:root{
  --ivory:#f7f4ee;
  --sand:#e8dbc9;
  --olive:#85836a;
  --sea:#557985;
  --deep:#073f41;
  --ink:#2f2b27;
  --muted:#6d675d;
  --line:rgba(47,43,39,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--ivory);
  color:var(--ink);
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3,.serif{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  letter-spacing:-.035em;
}
.container{width:min(1180px,calc(100% - 44px));margin:0 auto}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:24px 0;
  transition:.25s ease;
}
.topbar.scrolled{padding:13px 0;background:rgba(6,58,60,.78);backdrop-filter:blur(18px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{width:128px;height:auto}
.nav-links{display:flex;align-items:center;gap:30px;color:white;font-size:12px;font-weight:700;letter-spacing:.09em}
.nav-links a{opacity:.9}
.nav-links a:hover{opacity:1}
.menu-toggle{display:none;color:white;font-size:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:white;font-size:13px;font-weight:800;letter-spacing:.04em;
  backdrop-filter:blur(12px);transition:.25s ease
}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.24)}
.btn.dark{background:var(--olive);border-color:var(--olive);color:white}
.btn.light{background:transparent;color:var(--ink);border-color:rgba(47,43,39,.22)}
.hero{
  min-height:88vh;position:relative;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(90deg,rgba(2,35,36,.80),rgba(2,35,36,.28),rgba(2,35,36,.05)),
             url("../assets/hero-beach.jpg") center/cover no-repeat;
}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.22),transparent 40%)}
.hero-content{position:relative;z-index:1;color:white;max-width:670px;padding-top:90px}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;opacity:.84}
.hero h1{font-size:clamp(58px,8vw,116px);line-height:.9;margin:22px 0}
.hero p{font-size:18px;line-height:1.85;max-width:560px;opacity:.92}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.whatsapp-float{
  position:fixed;right:26px;bottom:26px;z-index:60;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#6f694c;font-size:28px;box-shadow:0 18px 50px rgba(0,0,0,.24)
}
.section{padding:96px 0}
.split{display:grid;grid-template-columns:.86fr 1.14fr;gap:72px;align-items:center}
.section-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800;display:flex;gap:12px;align-items:center;margin-bottom:22px}
.section-label:before{content:"";width:42px;height:1px;background:currentColor}
h2{font-size:clamp(42px,5vw,76px);line-height:.95;margin:0 0 24px}
.lead{font-size:17px;line-height:1.85;color:#5c574f;max-width:580px}
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
.feature{font-size:13px;color:#4e4942}
.feature .icon{font-size:26px;margin-bottom:10px}
.gallery-grid{display:grid;grid-template-columns:1.35fr .75fr;gap:18px}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
.gallery-grid .big{min-height:430px}
.side-stack{display:grid;gap:18px}
.services{background:linear-gradient(180deg,#fbfaf7,#efe8dd);text-align:center}
.services h2{max-width:860px;margin-left:auto;margin-right:auto}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:52px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-item{padding:34px 18px;border-right:1px solid var(--line)}
.service-item:last-child{border-right:0}
.service-item .icon{font-size:30px;margin-bottom:14px}
.food{background:#fff}
.food-grid{display:grid;grid-template-columns:.65fr repeat(3,1fr);gap:22px;align-items:end}
.food-card img{height:310px;width:100%;object-fit:cover}
.wellness-events{display:grid;grid-template-columns:1fr 1fr}
.panel{min-height:470px;padding:68px;display:flex;flex-direction:column;justify-content:center;background:#efe9de}
.panel.image{padding:0}
.panel.image img{width:100%;height:100%;object-fit:cover}
.blue-texture{color:white;background:linear-gradient(90deg,rgba(7,48,50,.84),rgba(7,48,50,.48)),url("../assets/blue-sand-texture.jpg") center/cover no-repeat}
.blue-texture .lead{color:rgba(255,255,255,.86)}
.cta{background:linear-gradient(90deg,rgba(88,91,68,.97),rgba(112,113,85,.93)),url("../assets/blue-sand-texture.jpg") center/cover no-repeat;color:white;padding:72px 0}
.cta-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:40px}
.phone{font-family:"Cormorant Garamond",Georgia,serif;font-size:42px;white-space:nowrap}
.footer{background:#6f7154;color:white;padding:34px 0;font-size:12px}
.footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.footer nav{display:flex;gap:24px;font-weight:800;letter-spacing:.08em}
.footer-logo{width:88px}
.page-hero{min-height:52vh;display:flex;align-items:end;padding:150px 0 70px;background:linear-gradient(90deg,rgba(6,58,60,.82),rgba(6,58,60,.25)),url("../assets/hero-blur.jpg") center/cover no-repeat;color:white}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:white;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.07)}
.card img{height:260px;width:100%;object-fit:cover}
.card-content{padding:28px}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.menu-box{background:white;padding:34px;border-radius:24px}
.menu-box h3{font-size:34px;margin:0 0 18px}
.menu-box ul{padding:0;margin:0;list-style:none}
.menu-box li{display:flex;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.08);padding:14px 0;color:#555}
.form{background:white;border-radius:30px;padding:38px;box-shadow:0 18px 60px rgba(0,0,0,.08)}
.form input,.form textarea,.form select{width:100%;padding:16px;border:1px solid rgba(0,0,0,.12);border-radius:14px;margin-bottom:14px;font:inherit;background:#faf9f6}
.form button{border:0;cursor:pointer}
@media (max-width:900px){
  .nav-links{display:none}.menu-toggle{display:block}.split,.food-grid,.wellness-events,.cta-row,.menu-list{grid-template-columns:1fr}.service-grid,.feature-row,.cards{grid-template-columns:1fr 1fr}.hero{min-height:80vh}.panel{padding:42px}.logo{width:96px}
}
@media (max-width:560px){
  .service-grid,.feature-row,.cards{grid-template-columns:1fr}
  .hero h1{font-size:54px}
  .phone{font-size:34px}
}


/* Booking pages */
.whatsapp-page{
  min-height:100vh;
  padding:160px 0 90px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg, rgba(6,58,60,.86), rgba(6,58,60,.45)),
    url("../assets/hero-beach.jpg") center/cover no-repeat;
  color:white;
}
.whatsapp-card{
  max-width:760px;
  padding:54px;
  border-radius:34px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 90px rgba(0,0,0,.24);
}
.whatsapp-card h1{font-size:clamp(54px,7vw,96px);line-height:.92;margin:14px 0 22px}
.whatsapp-card p{font-size:18px;line-height:1.8;opacity:.92}
.whatsapp-number{font-family:"Cormorant Garamond",Georgia,serif;font-size:48px;margin:26px 0}
.booking-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.booking-panel{
  background:white;
  border-radius:30px;
  padding:34px;
  box-shadow:0 22px 70px rgba(0,0,0,.08);
  position:sticky;
  top:105px;
}
.beach-map{
  background:linear-gradient(180deg,#f8f1e6,#ead7bd);
  border-radius:34px;
  padding:28px;
  border:1px solid rgba(47,43,39,.10);
  overflow:hidden;
}
.map-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:20px;
  color:#5c574f;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sea-strip{
  height:90px;
  border-radius:24px;
  margin-bottom:28px;
  background:linear-gradient(180deg,#1d8d9b,#75d0d3);
  position:relative;
  overflow:hidden;
}
.sea-strip:after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:18px;
  height:18px;
  background:rgba(255,255,255,.7);
  filter:blur(5px);
  transform:rotate(-1deg);
}
.umbrella-zones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
}
.zone h3{
  font-family:Inter,system-ui,sans-serif;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 14px;
  color:#5c574f;
}
.umbrella-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.umbrella{
  aspect-ratio:1;
  border:1px solid rgba(47,43,39,.14);
  border-radius:999px;
  background:#fff;
  color:#6f7154;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
  position:relative;
}
.umbrella:before{
  content:"☂";
  font-size:18px;
  line-height:1;
}
.umbrella span{
  position:absolute;
  bottom:7px;
  font-size:10px;
}
.umbrella:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.08)}
.umbrella.selected{
  background:var(--olive);
  color:white;
  border-color:var(--olive);
  box-shadow:0 12px 26px rgba(111,113,84,.28);
}
.umbrella.unavailable{
  opacity:.32;
  cursor:not-allowed;
  background:#eee;
}
.booking-fields{display:grid;gap:14px;margin-top:18px}
.booking-fields input,.booking-fields select,.booking-fields textarea{
  width:100%;
  padding:15px 16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  font:inherit;
  background:#faf9f6;
}
.selected-box{
  margin-top:20px;
  padding:16px;
  background:#f6f3ec;
  border-radius:18px;
  color:#5c574f;
}
@media(max-width:900px){
  .booking-layout{grid-template-columns:1fr}
  .booking-panel{position:static}
  .umbrella-zones{grid-template-columns:1fr}
}


/* Corrected umbrella map: 9 rows x 6 left + central aisle + 6 right */
.real-beach-plan{
  display:grid;
  grid-template-columns:repeat(6, minmax(34px, 1fr)) 68px repeat(6, minmax(34px, 1fr));
  gap:8px;
  align-items:center;
  margin-top:24px;
}
.plan-aisle{
  grid-row:span 9;
  align-self:stretch;
  border-radius:16px;
  background:linear-gradient(180deg,#e7c09b,#d6a477);
  box-shadow:inset 0 0 0 1px rgba(47,43,39,.08);
}
.plan-umbrella{
  aspect-ratio:1;
  border:1px solid rgba(47,43,39,.18);
  border-radius:12px;
  background:#fff;
  color:#5e594d;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.plan-umbrella:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
}
.plan-umbrella.selected{
  background:var(--olive);
  color:#fff;
  border-color:var(--olive);
  outline:3px solid rgba(133,131,106,.25);
}
@media(max-width:700px){
  .real-beach-plan{
    grid-template-columns:repeat(6, minmax(28px, 1fr)) 28px repeat(6, minmax(28px, 1fr));
    gap:5px;
  }
  .plan-umbrella{font-size:10px;border-radius:8px}
}


/* Final refinements */
.phone{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight:600;
  letter-spacing:.01em;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  color:#fff;
  opacity:.92;
  transition:.2s ease;
}
.social-link:hover{opacity:1; transform:translateY(-2px)}
.social-link svg{width:20px;height:20px;display:block}
.nav-socials{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-socials{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-socials .social-link{
  border:1px solid rgba(255,255,255,.22);
}
@media(max-width:900px){
  .nav-socials{display:none}
}

.social-link svg[fill="currentColor"]{stroke:none}
.date-range{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:560px){
  .date-range{grid-template-columns:1fr}
}

.map-section{background:#f5f3ef;}
.map-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;}
.map-text h2{font-size:48px;margin-bottom:16px;}
.map-embed{width:100%;height:420px;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,0.1);}
@media(max-width:900px){
.map-layout{grid-template-columns:1fr;}
.map-embed{height:320px;}
}

/* Narrow map section */
.map-layout{
  max-width:1100px;
  margin:0 auto;
}
.map-embed{
  height:320px !important;
}

/* Fix map title visibility */
.map-text h2{
  color:#6f6a4f !important;
}


/* Language switcher */
.lang-switch{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
}
.lang-switch a{
  opacity:.58;
  padding:8px 2px;
  position:relative;
}
.lang-switch a.active{
  opacity:1;
}
.lang-switch a.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:currentColor;
}
.lang-switch span{
  opacity:.45;
}
@media(max-width:900px){
  .lang-switch{
    gap:7px;
    font-size:11px;
    letter-spacing:.12em;
  }
}


/* ULTRA PRO NAVIGATION */
.topbar{
  padding:18px 0 !important;
  background:rgba(4,45,47,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.topbar.scrolled{
  padding:12px 0 !important;
  background:rgba(4,45,47,.72) !important;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 14px 40px rgba(0,0,0,.10);
}
.nav{
  min-height:54px;
  gap:22px;
}
.logo{
  width:92px !important;
  height:auto;
}
.nav-links{
  gap:26px !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
}
.nav-links a{
  opacity:.82;
  line-height:1.1;
  white-space:nowrap;
  position:relative;
}
.nav-links a:not(.btn):after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-9px;
  height:1px;
  background:#fff;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s ease, opacity .28s ease;
  opacity:.9;
}
.nav-links a:not(.btn):hover:after{
  transform:scaleX(1);
}
.nav-links a:hover{
  opacity:1;
}
.nav-links .btn,
.btn.dark{
  padding:11px 21px !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
  border-radius:999px !important;
  background:rgba(133,131,106,.90) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
.nav-links .btn:hover,
.btn.dark:hover{
  background:rgba(133,131,106,1) !important;
  transform:translateY(-1px);
}
.lang-switch{
  gap:8px !important;
  font-size:10px !important;
  letter-spacing:.2em !important;
  margin-left:2px;
}
.lang-switch a{
  opacity:.55;
  padding:7px 1px !important;
}
.lang-switch a.active{
  opacity:1;
}
.lang-switch a.active:after{
  height:1px !important;
  bottom:0 !important;
}
.nav-socials{
  gap:7px !important;
}
.social-link{
  width:28px !important;
  height:28px !important;
}
.social-link svg{
  width:16px !important;
  height:16px !important;
}
@media(max-width:1100px){
  .nav-links{
    gap:18px !important;
    font-size:10px !important;
    letter-spacing:.13em !important;
  }
  .logo{width:82px !important;}
}
@media(max-width:900px){
  .topbar{padding:14px 0 !important;}
  .logo{width:86px !important;}
}


/* ULTRA PRO V2 REFINEMENTS */
.nav{
  justify-content:center;
  position:relative;
}
.logo{
  position:absolute;
  left:20px;
  width:120px !important;
}
.nav-links{
  margin:0 auto;
}
.nav-right{
  position:absolute;
  right:20px;
  display:flex;
  align-items:center;
  gap:18px;
}
.lang-switch{
  margin-left:10px;
}
.nav-socials{
  margin-left:10px;
}


/* ULTRA PRO V3 final alignment + WhatsApp floating icon */
.logo{
  width:138px !important;
  left:8px !important;
}

.nav{
  justify-content:center !important;
}

.nav-links{
  transform:translateX(-12px);
}

.nav-right{
  right:54px !important;
  gap:14px !important;
}

.lang-switch{
  margin-left:0 !important;
}

.nav-socials{
  margin-left:0 !important;
}

.whatsapp-float{
  background:#25D366 !important;
  color:#fff !important;
  font-size:0 !important;
  width:62px !important;
  height:62px !important;
}

.whatsapp-float::before{
  content:"";
  width:34px;
  height:34px;
  display:block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.02 3.2C9.03 3.2 3.34 8.84 3.34 15.78c0 2.35.65 4.63 1.9 6.62L3.2 28.8l6.6-1.98a12.72 12.72 0 0 0 6.22 1.6c6.99 0 12.68-5.64 12.68-12.58S23.01 3.2 16.02 3.2Zm0 22.96c-1.94 0-3.84-.54-5.48-1.56l-.39-.24-3.91 1.17 1.21-3.77-.25-.4a10.2 10.2 0 0 1-1.6-5.58c0-5.7 4.67-10.34 10.42-10.34s10.42 4.64 10.42 10.34-4.67 10.38-10.42 10.38Zm5.72-7.75c-.31-.16-1.86-.91-2.15-1.02-.29-.1-.5-.16-.71.16-.21.31-.82 1.02-1.01 1.23-.18.21-.37.23-.68.08-.31-.16-1.32-.48-2.52-1.53-.93-.83-1.56-1.85-1.74-2.16-.18-.31-.02-.48.14-.64.14-.14.31-.37.47-.55.16-.18.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.16-.71-1.71-.97-2.34-.25-.6-.51-.52-.71-.53h-.61c-.21 0-.55.08-.84.39-.29.31-1.1 1.07-1.1 2.61s1.13 3.03 1.28 3.24c.16.21 2.22 3.38 5.38 4.74.75.32 1.34.52 1.8.66.76.24 1.45.21 1.99.13.61-.09 1.86-.76 2.12-1.49.26-.73.26-1.36.18-1.49-.08-.13-.29-.21-.6-.37Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.02 3.2C9.03 3.2 3.34 8.84 3.34 15.78c0 2.35.65 4.63 1.9 6.62L3.2 28.8l6.6-1.98a12.72 12.72 0 0 0 6.22 1.6c6.99 0 12.68-5.64 12.68-12.58S23.01 3.2 16.02 3.2Zm0 22.96c-1.94 0-3.84-.54-5.48-1.56l-.39-.24-3.91 1.17 1.21-3.77-.25-.4a10.2 10.2 0 0 1-1.6-5.58c0-5.7 4.67-10.34 10.42-10.34s10.42 4.64 10.42 10.34-4.67 10.38-10.42 10.38Zm5.72-7.75c-.31-.16-1.86-.91-2.15-1.02-.29-.1-.5-.16-.71.16-.21.31-.82 1.02-1.01 1.23-.18.21-.37.23-.68.08-.31-.16-1.32-.48-2.52-1.53-.93-.83-1.56-1.85-1.74-2.16-.18-.31-.02-.48.14-.64.14-.14.31-.37.47-.55.16-.18.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.16-.71-1.71-.97-2.34-.25-.6-.51-.52-.71-.53h-.61c-.21 0-.55.08-.84.39-.29.31-1.1 1.07-1.1 2.61s1.13 3.03 1.28 3.24c.16.21 2.22 3.38 5.38 4.74.75.32 1.34.52 1.8.66.76.24 1.45.21 1.99.13.61-.09 1.86-.76 2.12-1.49.26-.73.26-1.36.18-1.49-.08-.13-.29-.21-.6-.37Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media(max-width:1100px){
  .logo{width:118px !important; left:8px !important;}
  .nav-links{transform:translateX(-4px);}
  .nav-right{right:28px !important;}
}

@media(max-width:900px){
  .logo{width:104px !important;}
  .nav-links{transform:none;}
}


/* V4 final ordering + image proportions */
.food-grid{
  align-items:center !important;
}
.food-card{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:0;
  background:#f5f3ef;
}
.food-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block;
}
.food-card:nth-child(2) img{
  object-position:center center;
}
.food-card:nth-child(3) img,
.food-card:nth-child(4) img{
  object-position:center 58%;
}
.cta{
  margin-top:0;
}
.map-section + .cta{
  margin-top:0;
}


/* FIX floating logo bug */
.logo{
  position:absolute !important;
}

/* FIX WhatsApp button (brand aligned + centered icon) */
.whatsapp-float{
  background:#85836A !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.whatsapp-float::before{
  width:28px !important;
  height:28px !important;
  background:#fff !important;
  margin:0 auto;
}

/* remove skew/rotation issues */
.whatsapp-float,
.whatsapp-float::before{
  transform:none !important;
}


/* PDF brand food imagery */
.food-card{
  aspect-ratio: 3 / 4;
  overflow:hidden;
  background:#f5f3ef;
}
.food-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}
.menu-gallery-section{
  padding-bottom:0;
  background:#fff;
}
.menu-gallery{
  display:grid;
  grid-template-columns:1.15fr 1.15fr .9fr .9fr;
  gap:22px;
  align-items:stretch;
}
.menu-gallery img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:0;
}
@media(max-width:900px){
  .menu-gallery{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .menu-gallery{grid-template-columns:1fr;}
  .menu-gallery img{height:300px;}
}


/* =========================
   FINAL ULTRA PRO FIXES
   ========================= */

/* Logo bug fix: logo must stay inside header only */
.logo{
  position:static !important;
  width:150px !important;
  min-width:150px !important;
}
.nav{
  justify-content:space-between !important;
  position:relative !important;
}
.nav-links{
  position:absolute;
  left:50%;
  transform:translateX(-50%) !important;
  margin:0 !important;
  gap:24px !important;
}
.nav-right,
.nav-socials,
.lang-switch{
  position:static !important;
}
.nav-right{
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
  margin-left:auto !important;
  right:auto !important;
}
.nav-socials{
  gap:16px !important;
  margin-left:18px !important;
}
.lang-switch{
  margin-left:22px !important;
}

/* More space between language selector and socials */
.nav .lang-switch + .nav-socials,
.nav-socials + .lang-switch{
  margin-left:26px !important;
}

/* Floating WhatsApp: site colors, centered and stable */
.whatsapp-float{
  background:#85836A !important;
  color:#fff !important;
  width:58px !important;
  height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  box-shadow:0 18px 48px rgba(47,43,39,.22) !important;
  transform:none !important;
}
.whatsapp-float::before{
  content:"";
  width:30px !important;
  height:30px !important;
  display:block;
  background:#fff !important;
  margin:0 !important;
  transform:none !important;
}

/* Image proportions: no stretching, better crops */
.food-card{
  aspect-ratio:3 / 4 !important;
  overflow:hidden !important;
  background:#f5f3ef !important;
}
.food-card img,
.menu-gallery img,
.gallery-grid img,
.panel.image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.food-card:nth-child(2) img{object-position:center center !important;}
.food-card:nth-child(3) img{object-position:center center !important;}
.food-card:nth-child(4) img{object-position:center right !important;}

.menu-gallery img{
  height:330px !important;
  object-position:center center !important;
}
.menu-gallery img:nth-child(1){object-position:center top !important;}
.menu-gallery img:nth-child(2){object-position:center center !important;}
.menu-gallery img:nth-child(3){object-position:center center !important;}
.menu-gallery img:nth-child(4){object-position:center center !important;}

/* Experiences section: reduce oversized images */
.wellness-events{
  grid-template-columns:1fr 1fr !important;
}
.wellness-events .panel{
  min-height:420px !important;
}
.wellness-events .panel.image{
  max-height:520px !important;
  overflow:hidden !important;
}
.wellness-events .panel.image img{
  height:100% !important;
  max-height:520px !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* Luxury image animations */
.food-card,
.gallery-grid img,
.menu-gallery img,
.panel.image,
.card img,
.map-embed{
  overflow:hidden;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease, filter .55s ease;
  will-change:transform;
}
.food-card img,
.gallery-grid img,
.menu-gallery img,
.panel.image img,
.card img{
  transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease;
  will-change:transform;
}
.food-card:hover img,
.gallery-grid img:hover,
.menu-gallery img:hover,
.panel.image:hover img,
.card:hover img{
  transform:scale(1.045);
  filter:saturate(1.04) contrast(1.03);
}
.food-card:hover,
.menu-gallery img:hover,
.panel.image:hover,
.card:hover{
  box-shadow:0 24px 70px rgba(47,43,39,.12);
}

/* Buttons micro-interactions */
.btn{
  transition:transform .28s cubic-bezier(.2,.8,.2,1), background .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
.btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 36px rgba(47,43,39,.14);
}

/* Scroll reveal animation */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Header tighter responsive control */
@media(max-width:1200px){
  .logo{width:130px !important; min-width:130px !important;}
  .nav-links{gap:18px !important; font-size:10px !important;}
  .nav-right{gap:18px !important;}
}
@media(max-width:900px){
  .logo{width:110px !important; min-width:110px !important;}
  .nav-links{position:static !important; transform:none !important;}
  .nav-right{display:none !important;}
  .wellness-events{grid-template-columns:1fr !important;}
  .wellness-events .panel,
  .wellness-events .panel.image{min-height:auto !important; max-height:none !important;}
  .wellness-events .panel.image img{height:360px !important; max-height:none !important;}
}


/* V8 fixes: clean nav, language selector, single image, order page */
.nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
}
.logo{
  position:static !important;
  width:138px !important;
  min-width:138px !important;
  transform:none !important;
}
.nav-links{
  position:static !important;
  transform:none !important;
  margin:0 auto !important;
  gap:22px !important;
  white-space:nowrap !important;
}
.nav-links a{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}
.nav-links a:not(.btn)::after{
  bottom:-10px !important;
}
.nav-right{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  gap:30px !important;
  margin-left:0 !important;
  right:auto !important;
}
.lang-switch{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  white-space:nowrap !important;
}
.nav-socials{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  margin:0 !important;
}
.single-feature-image{
  width:100%;
  min-height:520px;
  overflow:hidden;
}
.single-feature-image img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  object-position:center;
  transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease;
}
.single-feature-image:hover img{
  transform:scale(1.04);
  filter:saturate(1.04) contrast(1.03);
}
.order-hero{
  background:linear-gradient(90deg,rgba(6,58,60,.82),rgba(6,58,60,.25)),url("../assets/beach-service-food.jpg") center/cover no-repeat !important;
}
.order-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:64px;
  align-items:start;
}
.order-form textarea{
  resize:vertical;
}
@media(max-width:1200px){
  .nav-links{gap:16px !important; font-size:10px !important; letter-spacing:.12em !important;}
  .logo{width:118px !important; min-width:118px !important;}
  .nav-right{gap:18px !important;}
}
@media(max-width:900px){
  .nav-links{display:none !important;}
  .nav-right{display:flex !important; margin-left:auto !important;}
  .order-layout{grid-template-columns:1fr;}
  .single-feature-image, .single-feature-image img{min-height:360px;}
}
@media(max-width:560px){
  .nav-right{display:none !important;}
}


/* Dove siamo page */
.where-hero{
  background:linear-gradient(90deg,rgba(6,58,60,.82),rgba(6,58,60,.25)),url("../assets/sea-foam-brand.jpg") center/cover no-repeat !important;
}
.where-layout{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:62px;
  align-items:center;
}
.where-copy h2{
  color:#6f6a4f;
}
.where-copy .btn{
  margin-top:22px;
}
.where-map{
  height:470px !important;
  border-radius:28px !important;
}
@media(max-width:900px){
  .where-layout{grid-template-columns:1fr;}
  .where-map{height:340px !important;}
}


/* v11 refinements */
.panel-image-narrow{
  max-width:72% !important;
  justify-self:center !important;
  align-self:center !important;
  min-height:340px !important;
  max-height:380px !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
.panel-image-narrow img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.order-form .order-download{
  margin-top:10px;
  width:100%;
}

@media(max-width:900px){
  .panel-image-narrow{
    max-width:100% !important;
    min-height:300px !important;
    max-height:320px !important;
  }
}


/* ===== v12 refinements: better fruit crops + wide rectangular image ===== */

/* Better crop for the three homepage food images */
.food-grid .food-card{
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

.food-grid .food-card img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Fruit bowl */
.food-grid .food-card:nth-of-type(1) img{
  object-position: center 28% !important;
}

/* Mediterranean platter */
.food-grid .food-card:nth-of-type(2) img{
  object-position: center center !important;
}

/* Lemons / fresh fruit detail */
.food-grid .food-card:nth-of-type(3) img{
  object-position: center 52% !important;
}

/* Menu gallery fruit/food images a little cleaner */
.menu-gallery img:nth-child(1){
  object-position: center 24% !important;
}
.menu-gallery img:nth-child(3){
  object-position: center 42% !important;
}
.menu-gallery img:nth-child(4){
  object-position: center 50% !important;
}

/* The image next to “Esperienze…” should be narrower but still wide/horizontal */
.panel-image-wide{
  width: 78% !important;
  min-height: 0 !important;
  height: 300px !important;
  max-height: 300px !important;
  justify-self: center !important;
  align-self: center !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.panel-image-wide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media(max-width: 900px){
  .panel-image-wide{
    width: 100% !important;
    height: 260px !important;
    max-height: 260px !important;
  }
}


/* ===== v13: wider horizontal image next to "Esperienze..." ===== */
.wellness-events{
  align-items:center !important;
}

.panel-image-wide{
  width: 92% !important;
  max-width: 92% !important;
  height: 300px !important;
  max-height: 300px !important;
  min-height: 300px !important;
  justify-self: center !important;
  align-self: center !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.panel-image-wide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display:block !important;
}

@media (max-width: 1200px){
  .panel-image-wide{
    width: 96% !important;
    max-width: 96% !important;
    height: 280px !important;
    max-height: 280px !important;
    min-height: 280px !important;
  }
}

@media (max-width: 900px){
  .panel-image-wide{
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    max-height: 260px !important;
    min-height: 260px !important;
  }
}


/* ===== v14 refinements ===== */

/* Better crop for food/fruit cards */
.food-grid .food-card{
  overflow: hidden !important;
}

/* Fruit bowl: cleaner square crop, centered like the uploaded example */
.food-grid .food-card:nth-of-type(1){
  aspect-ratio: 1 / 1 !important;
}
.food-grid .food-card:nth-of-type(1) img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.02) !important;
  display: block !important;
}

/* Mediterranean platter */
.food-grid .food-card:nth-of-type(2) img{
  object-position: center center !important;
  transform: scale(1.03) !important;
}

/* Lemons: show more lemons, fuller composition */
.food-grid .food-card:nth-of-type(3) img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 38% center !important;
  transform: scale(1.10) !important;
  display: block !important;
}

/* Also refine shared gallery crops if present elsewhere */
.menu-gallery img:nth-child(1){
  object-position: center center !important;
}
.menu-gallery img:nth-child(3){
  object-position: center 45% !important;
}
.menu-gallery img:nth-child(4){
  object-position: 38% center !important;
}

/* Wider horizontal image next to “Esperienze…” */
.wellness-events{
  align-items: center !important;
}
.panel-image-wide{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 300px !important;
  height: 300px !important;
  max-height: 300px !important;
  justify-self: stretch !important;
  align-self: center !important;
  overflow: hidden !important;
}
.panel-image-wide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (max-width: 1200px){
  .panel-image-wide{
    min-height: 280px !important;
    height: 280px !important;
    max-height: 280px !important;
  }
}
@media (max-width: 900px){
  .panel-image-wide{
    min-height: 250px !important;
    height: 250px !important;
    max-height: 250px !important;
  }
}


/* ===== v15: remove image in "Uno spazio pensato per te" and center the content ===== */
.about-centered .container,
.about-centered .about-layout,
.about-centered .space-layout,
.about-centered .intro-layout{
  display: block !important;
}

.about-centered .panel,
.about-centered .copy,
.about-centered .about-copy,
.about-centered .space-copy{
  max-width: 980px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.about-centered .section-label,
.about-centered .eyebrow,
.about-centered .kicker{
  justify-content: center !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.about-centered .section-label::before,
.about-centered .eyebrow::before,
.about-centered .kicker::before{
  margin: 0 !important;
}

.about-centered h2,
.about-centered h3,
.about-centered .serif{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.about-centered p,
.about-centered .lead{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
}

.about-centered .features,
.about-centered .icon-grid,
.about-centered .benefits{
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.about-centered .feature,
.about-centered .icon-item,
.about-centered .benefit{
  text-align: center !important;
}

.about-centered img{
  display: none !important;
}


/* ===== v16: restore experience image and keep about image removed only ===== */
.wellness-events .panel-image-wide{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:300px !important;
  min-height:300px !important;
  max-height:300px !important;
  overflow:hidden !important;
}

.wellness-events .panel-image-wide img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Keep only the "Uno spazio pensato per te" section image hidden */
.about-centered .single-feature-image,
.about-centered .gallery-grid,
.about-centered > img{
  display:none !important;
}


/* ===== v17: second section centered, no right image ===== */
.second-section-centered{
  text-align:center !important;
}

.second-section-centered .second-section-inner,
.second-section-centered .container{
  display:block !important;
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.second-section-centered .split,
.second-section-centered .gallery-grid,
.second-section-centered .single-feature-image,
.second-section-centered .panel.image{
  display:none !important;
}

.second-section-centered .section-label{
  justify-content:center !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.second-section-centered h2{
  text-align:center !important;
  max-width:850px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.second-section-centered .lead,
.second-section-centered p{
  text-align:center !important;
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.second-section-centered .feature-row{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
}

.second-section-centered .feature{
  text-align:center !important;
}


/* ===== v18: perfect center alignment for second section ===== */
.second-section-centered{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.second-section-centered > .container,
.second-section-centered .second-section-inner{
  width:min(900px, calc(100% - 44px)) !important;
  max-width:900px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.second-section-centered .container > div,
.second-section-centered .split > div,
.second-section-centered .panel,
.second-section-centered .copy{
  width:100% !important;
  max-width:900px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.second-section-centered .section-label{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.second-section-centered .section-label::before{
  margin:0 !important;
}

.second-section-centered h2{
  width:100% !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.second-section-centered .lead,
.second-section-centered p{
  width:100% !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.second-section-centered .feature-row{
  width:100% !important;
  max-width:720px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  justify-content:center !important;
  justify-items:center !important;
  align-items:start !important;
}

.second-section-centered .feature{
  width:100% !important;
  text-align:center !important;
}

@media(max-width:700px){
  .second-section-centered .feature-row{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}


/* ===== v19: clean centered “Uno spazio pensato per te” section ===== */
.space-centered-section{
  background:#f7f4ee;
  text-align:center !important;
  padding:104px 0 !important;
}

.space-centered-section .container{
  width:min(980px, calc(100% - 44px)) !important;
  margin:0 auto !important;
  display:block !important;
}

.space-copy-centered{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

.space-centered-section .section-label{
  justify-content:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.space-centered-section h2{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.space-centered-section .lead{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.space-centered-section .feature-row{
  width:100% !important;
  max-width:760px !important;
  margin:48px auto 0 !important;
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:36px !important;
  justify-items:center !important;
  align-items:start !important;
}

.space-centered-section .feature{
  text-align:center !important;
  width:100% !important;
}

.space-centered-section .feature .icon{
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:700px){
  .space-centered-section .feature-row{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:30px !important;
  }
}


/* ===== v20: restored homepage hero ===== */
.hero{
  min-height:88vh !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg, rgba(2,35,36,.80), rgba(2,35,36,.28), rgba(2,35,36,.05)),
    url("../assets/hero-beach.jpg") center/cover no-repeat !important;
}

.hero-content{
  position:relative !important;
  z-index:1 !important;
  color:#fff !important;
  max-width:670px !important;
  padding-top:90px !important;
  text-align:left !important;
  align-items:flex-start !important;
}

.hero h1,
.hero p{
  text-align:left !important;
}

.hero .actions{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-top:34px !important;
}

/* v22 final: visibility and no logo follow-bug */
.logo{width:160px!important;min-width:160px!important;position:static!important;transform:none!important;}
.footer-logo{width:120px!important;min-width:120px!important;position:static!important;transform:none!important;}
.real-beach-plan{position:relative!important;z-index:2!important;}
.plan-umbrella{cursor:pointer!important;user-select:none!important;}
.plan-umbrella.selected{background:var(--olive)!important;color:#fff!important;border-color:var(--olive)!important;}
@media(max-width:1200px){.logo{width:138px!important;min-width:138px!important}.footer-logo{width:104px!important;min-width:104px!important}}
@media(max-width:700px){.logo{width:112px!important;min-width:112px!important}.footer-logo{width:92px!important;min-width:92px!important}}


/* v23: mobile menu dropdown */
.menu-toggle{
  cursor:pointer !important;
  z-index:1003 !important;
  display:none;
  color:#fff;
  font-size:26px;
  line-height:1;
}

@media(max-width:900px){
  .topbar{
    z-index:1002 !important;
  }

  .nav{
    position:relative !important;
  }

  .menu-toggle{
    display:block !important;
    margin-left:auto !important;
  }

  .nav-links{
    display:none !important;
  }

  body.mobile-menu-open .nav-links{
    display:flex !important;
    position:fixed !important;
    top:76px !important;
    left:14px !important;
    right:14px !important;
    transform:none !important;
    margin:0 !important;
    padding:24px !important;
    border-radius:26px !important;
    background:rgba(6,58,60,.94) !important;
    backdrop-filter:blur(22px) !important;
    -webkit-backdrop-filter:blur(22px) !important;
    box-shadow:0 28px 80px rgba(0,0,0,.26) !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
    z-index:1001 !important;
  }

  body.mobile-menu-open .nav-links a{
    width:100% !important;
    justify-content:flex-start !important;
    color:#fff !important;
    font-size:13px !important;
    letter-spacing:.12em !important;
    padding:7px 0 !important;
  }

  body.mobile-menu-open .nav-links .btn{
    justify-content:center !important;
    text-align:center !important;
    margin-top:8px !important;
  }

  .nav-right{
    display:flex !important;
    margin-left:auto !important;
    gap:12px !important;
  }

  .nav-right .nav-socials{
    display:none !important;
  }

  .lang-switch{
    display:flex !important;
    font-size:10px !important;
  }
}

@media(max-width:560px){
  .nav-right{
    display:flex !important;
  }
  .nav-right .lang-switch{
    display:flex !important;
  }
}


/* v24: booking button final fix */
#sendBooking{
  cursor:pointer !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:5 !important;
}


/* v27: Excel-driven umbrella availability */
.plan-umbrella.occupied{
  background:#6f6a4f !important;
  color:#fff !important;
  border-color:#6f6a4f !important;
  cursor:not-allowed !important;
  opacity:1 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important;
}

.plan-umbrella.occupied:hover{
  transform:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important;
}

.excel-availability-note{
  margin:16px 0 0;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f6a4f;
  font-weight:700;
}


/* v29: occupati visibili direttamente nel sito */
.plan-umbrella.occupied,
.real-beach-plan .plan-umbrella.occupied{
  background:#5f5b43 !important;
  color:#ffffff !important;
  border-color:#5f5b43 !important;
  cursor:not-allowed !important;
  opacity:1 !important;
  pointer-events:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22) !important;
}

.plan-umbrella.occupied:hover{
  transform:none !important;
}

.umbrella-legend{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  margin:18px 0 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f6a4f;
}

.umbrella-legend span{
  display:flex;
  align-items:center;
  gap:7px;
}

.umbrella-legend i{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
  border:1px solid #d8d0c2;
}

.legend-free{
  background:#ffffff;
}

.legend-occupied{
  background:#5f5b43;
  border-color:#5f5b43 !important;
}


/* v30: mare illustrato nella piantina */
.excel-availability-note{display:none !important;}
.sea-strip{
  height:90px;
  border-radius:24px;
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#1c93a3 0%, #3fb7c5 48%, #7ed7da 100%);
}
.sea-strip:after{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  bottom:18px;
  height:16px;
  background:rgba(255,255,255,.42);
  filter:blur(6px);
  border-radius:999px;
}
.sea-wave{
  position:absolute;
  left:6%;
  right:6%;
  height:14px;
  border-top:3px solid rgba(255,255,255,.52);
  border-radius:50%;
  opacity:.9;
}
.sea-wave:before,
.sea-wave:after{
  content:"";
  position:absolute;
  top:-3px;
  width:36%;
  height:14px;
  border-top:3px solid rgba(255,255,255,.52);
  border-radius:50%;
}
.sea-wave:before{left:8%;}
.sea-wave:after{right:8%;}
.sea-wave-1{top:20px;}
.sea-wave-2{top:38px; left:10%; right:10%; opacity:.72;}
.sea-wave-3{top:56px; left:12%; right:12%; opacity:.54;}
.sea-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Inter,system-ui,sans-serif;
  font-size:14px;
  font-weight:800;
  letter-spacing:.28em;
  color:rgba(255,255,255,.95);
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.08);
}
/* =========================================================
   MIRÀ Beach Club — Mobile hardening patch v38
   Appendere IN FONDO a css/style.css
   Obiettivo: mobile navigation, hero, form, mappa e piantina ombrelloni.
   ========================================================= */

/* Safety: evita micro-scroll orizzontale causato da griglie larghe o immagini */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

/* Focus visibile per tap/tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(133,131,106,.36);
  outline-offset:3px;
}

/* Header mobile più stabile */
@media(max-width:900px){
  .topbar{
    padding:12px 0 !important;
  }

  .container{
    width:min(1180px, calc(100% - 28px)) !important;
  }

  .nav{
    min-height:50px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .logo{
    width:108px !important;
    min-width:108px !important;
    max-width:108px !important;
    flex:0 0 auto !important;
  }

  .nav-right{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  .lang-switch{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    font-size:10px !important;
    letter-spacing:.12em !important;
    white-space:nowrap !important;
  }

  .menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    margin-left:0 !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    color:#fff !important;
    line-height:1 !important;
  }

  body.mobile-menu-open .nav-links{
    top:72px !important;
    left:14px !important;
    right:14px !important;
    max-height:calc(100vh - 92px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

@media(max-width:390px){
  .logo{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }

  .lang-switch{
    font-size:9px !important;
    gap:5px !important;
  }

  .menu-toggle{
    width:38px !important;
    height:38px !important;
  }
}

/* Hero mobile: CTA leggibili e non schiacciate */
@media(max-width:700px){
  .hero{
    min-height:82vh !important;
    align-items:flex-end !important;
    padding:0 0 54px !important;
    background-position:center center !important;
  }

  .hero-content{
    padding-top:120px !important;
    max-width:100% !important;
  }

  .hero h1{
    font-size:clamp(46px, 14vw, 62px) !important;
    line-height:.92 !important;
    margin:18px 0 !important;
  }

  .hero p{
    font-size:15px !important;
    line-height:1.65 !important;
    max-width:94% !important;
  }

  .hero .actions,
  .actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:11px !important;
    width:100% !important;
    margin-top:26px !important;
  }

  .hero .btn,
  .actions .btn{
    width:100% !important;
    min-height:50px !important;
    padding:13px 18px !important;
    text-align:center !important;
  }
}

/* Spaziature sezioni più compatte su smartphone */
@media(max-width:700px){
  .section,
  .space-centered-section{
    padding:68px 0 !important;
  }

  h2{
    font-size:clamp(36px, 11vw, 48px) !important;
    line-height:1 !important;
  }

  .lead{
    font-size:15px !important;
    line-height:1.72 !important;
  }

  .feature-row,
  .space-centered-section .feature-row{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:24px 18px !important;
  }
}

@media(max-width:420px){
  .feature-row,
  .space-centered-section .feature-row{
    grid-template-columns:1fr 1fr !important;
  }

  .feature{
    font-size:12px !important;
  }
}

/* Booking/form mobile */
@media(max-width:700px){
  .page-hero{
    min-height:44vh !important;
    padding:130px 0 52px !important;
  }

  .booking-layout{
    gap:28px !important;
  }

  .booking-panel,
  .form{
    padding:22px !important;
    border-radius:24px !important;
  }

  .booking-fields{
    gap:10px !important;
  }

  .booking-fields input,
  .booking-fields select,
  .booking-fields textarea,
  .form input,
  .form textarea,
  .form select{
    min-height:48px !important;
    padding:14px 14px !important;
    border-radius:14px !important;
    font-size:16px !important; /* evita zoom automatico iOS */
  }

  .date-range{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #sendBooking{
    width:100% !important;
    min-height:52px !important;
    margin-top:4px !important;
  }
}

/* Piantina ombrelloni mobile: leggibile, touch-friendly e scrollabile */
@media(max-width:700px){
  .beach-map{
    padding:16px !important;
    border-radius:26px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .map-title{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:8px !important;
    margin-bottom:14px !important;
  }

  .umbrella-legend{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px 14px !important;
    margin:12px 0 !important;
    font-size:10px !important;
  }

  .sea-strip{
    height:64px !important;
    min-width:520px !important;
    margin-bottom:18px !important;
    border-radius:20px !important;
  }

  .real-beach-plan{
    width:max-content !important;
    min-width:520px !important;
    grid-template-columns:repeat(6, 31px) 22px repeat(6, 31px) !important;
    gap:5px !important;
    margin-top:18px !important;
  }

  .plan-aisle{
    width:22px !important;
    border-radius:12px !important;
  }

  .plan-umbrella{
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    min-height:31px !important;
    border-radius:9px !important;
    font-size:10px !important;
    padding:0 !important;
    touch-action:manipulation !important;
  }
}

@media(max-width:390px){
  .beach-map{
    padding:14px !important;
  }

  .sea-strip,
  .real-beach-plan{
    min-width:492px !important;
  }

  .real-beach-plan{
    grid-template-columns:repeat(6, 29px) 20px repeat(6, 29px) !important;
    gap:5px !important;
  }

  .plan-umbrella{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
    min-height:29px !important;
    font-size:9px !important;
  }
}

/* WhatsApp page mobile */
@media(max-width:700px){
  .whatsapp-page{
    min-height:100vh !important;
    padding:126px 0 70px !important;
    align-items:flex-end !important;
  }

  .whatsapp-card{
    padding:28px !important;
    border-radius:26px !important;
  }

  .whatsapp-card h1{
    font-size:clamp(46px, 14vw, 64px) !important;
  }

  .whatsapp-card p{
    font-size:15px !important;
    line-height:1.65 !important;
  }

  .whatsapp-number{
    font-size:34px !important;
    line-height:1.05 !important;
    word-break:break-word !important;
  }
}

/* Mappa e dove siamo */
@media(max-width:700px){
  .map-layout,
  .where-layout,
  .order-layout{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .map-text h2,
  .where-copy h2{
    font-size:clamp(34px, 10vw, 44px) !important;
  }

  .map-embed,
  .where-map{
    height:280px !important;
    border-radius:22px !important;
  }
}

/* Gallerie e immagini: evita blocchi troppo alti su mobile */
@media(max-width:700px){
  .gallery-grid,
  .menu-gallery,
  .food-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .gallery-grid .big,
  .gallery-grid img,
  .menu-gallery img,
  .food-card,
  .food-card img{
    min-height:0 !important;
    height:300px !important;
  }

  .wellness-events .panel{
    padding:34px 22px !important;
  }

  .wellness-events .panel.image img,
  .panel-image-wide,
  .panel-image-wide img{
    height:260px !important;
    min-height:260px !important;
    max-height:260px !important;
  }
}

/* Footer mobile */
@media(max-width:700px){
  .footer{
    padding:30px 0 calc(30px + env(safe-area-inset-bottom)) !important;
  }

  .footer-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
  }

  .footer nav{
    display:none !important;
  }

  .footer-logo{
    width:96px !important;
    min-width:96px !important;
  }
}

/* Floating WhatsApp non deve coprire i bottoni principali */
@media(max-width:700px){
  .whatsapp-float{
    right:16px !important;
    bottom:calc(16px + env(safe-area-inset-bottom)) !important;
    width:54px !important;
    height:54px !important;
  }

  .whatsapp-float::before{
    width:27px !important;
    height:27px !important;
  }
}

/* Accessibilità: riduci animazioni se richiesto dal dispositivo */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}