@charset "UTF-8";

/* ===================================================================
   DESIGN SYSTEM V6 — "Mare & Sole" (generato con ui-ux-pro-max)
   Hero cinematografico dark + corpo caldo chiaro · Social-proof first
=================================================================== */
:root{
  --ink:#04202b; --deep:#073246; --sea:#0e6b82; --aqua:#38bdc9;
  --coral:#ff6a45; --gold:#f2b544; --gold-2:#ffcf6b;
  --wa:#25d366; --wa-d:#1da851;
  --foam:#eef7f8; --sand:#fbf7ef; --card:#ffffff;
  --text:#12303c; --muted:#5c7583; --line:rgba(14,107,130,.14);
  --radius:22px; --radius-sm:14px;
  --shadow:0 24px 60px -26px rgba(4,32,43,.42);
  --shadow-soft:0 14px 34px -22px rgba(4,32,43,.35);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text); background:var(--sand); line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,.display-font{font-family:"Fraunces",Georgia,serif; line-height:1.06; letter-spacing:-.015em}
.container{max-width:var(--maxw)}
a{color:var(--sea); text-decoration:none}
img{max-width:100%; display:block}
.eyebrow{font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; font-weight:800; color:var(--aqua)}
.section{padding:104px 0}
.lead-sub{font-size:1.14rem; color:var(--muted); max-width:640px}
:focus-visible{outline:3px solid var(--aqua); outline-offset:3px; border-radius:6px}

/* ---------- Buttons ---------- */
.btn{border-radius:999px; font-weight:800; padding:.92rem 1.7rem; letter-spacing:.005em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; will-change:transform}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--wa); border:none; color:#053d20; box-shadow:0 16px 32px -12px rgba(37,211,102,.72)}
.btn-wa:hover{background:var(--wa-d); color:#fff; transform:translateY(-2px)}
.btn-call{background:transparent; border:2px solid rgba(255,255,255,.72); color:#fff}
.btn-call:hover{background:#fff; color:var(--ink); transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2)); border:none; color:#4a3406; box-shadow:0 16px 32px -14px rgba(242,181,68,.8)}
.btn-gold:hover{transform:translateY(-2px); color:#4a3406}
.btn-ghost-dark{background:transparent; border:2px solid var(--sea); color:var(--sea)}
.btn-ghost-dark:hover{background:var(--sea); color:#fff}

/* ---------- Top nav ---------- */
.nav-wrap{position:fixed; top:0; left:0; right:0; z-index:60; transition:.3s}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; transition:.3s}
.nav-wrap.scrolled{background:rgba(4,32,43,.9); backdrop-filter:blur(12px); box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.nav-wrap.scrolled .nav-inner{padding-top:9px; padding-bottom:9px}
.brand{display:flex; align-items:center; gap:12px; color:#fff; font-family:"Fraunces"; font-weight:600; font-size:1.16rem}
.logo-chip{width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; overflow:hidden;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55); flex:0 0 auto}
.logo-chip img{width:100%; height:100%; object-fit:contain; padding:3px}
.nav-right{display:flex; align-items:center; gap:22px}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{color:rgba(255,255,255,.86); font-weight:600; font-size:.95rem}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--wa); color:#053d20; padding:.55rem 1.15rem; border-radius:999px; font-weight:800}
.nav-cta:hover{color:#fff; background:var(--wa-d)}
@media(max-width:900px){.nav-links{display:none}}
/* Logo grande al load → si rimpicciolisce animato allo scroll (senza sovrapporsi al wordmark) */
.nav-wrap .brand{position:relative}
.nav-wrap .logo-chip{transform-origin:left top; transition:transform .55s cubic-bezier(.2,.75,.2,1), box-shadow .55s; will-change:transform}
.nav-wrap .brand-text{transition:opacity .35s ease, transform .5s cubic-bezier(.2,.75,.2,1)}
.nav-wrap:not(.scrolled) .logo-chip{transform:scale(2.3); box-shadow:0 20px 44px -14px rgba(0,0,0,.6)}
.nav-wrap:not(.scrolled) .brand-text{opacity:0; transform:translateX(64px); pointer-events:none}
@media(max-width:991px){ .nav-wrap:not(.scrolled) .logo-chip{transform:scale(1.95)} }
@media(prefers-reduced-motion:reduce){.nav-wrap .logo-chip,.nav-wrap .brand-text{transition:none}}

/* ---------- Language switch ---------- */
.flag{display:inline-flex; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.14); flex:0 0 auto}
.flag img{width:100%; height:100%; object-fit:cover; display:block}
.lang-switch{position:relative}
.lang-btn{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  color:#fff; padding:.42rem .72rem; border-radius:999px; font-weight:800; font-size:.82rem; cursor:pointer; line-height:1; font-family:inherit}
.lang-btn:hover{background:rgba(255,255,255,.26)}
.lang-btn .flag{width:26px; height:18px}
.lang-caret{transition:transform .25s}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute; top:calc(100% + 12px); right:0; min-width:auto; background:#fff; border-radius:14px;
  box-shadow:var(--shadow); list-style:none; padding:8px; margin:0; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:90}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:none}
.lang-menu a{display:flex; align-items:center; justify-content:center; padding:.5rem .6rem; border-radius:10px; color:var(--ink); font-weight:600; font-size:.93rem}
.lang-menu a:hover{background:var(--foam)}
.lang-menu a.active{background:var(--foam); color:var(--sea)}
.lang-menu a.soon{color:var(--muted)}
.lang-menu a .flag{width:30px; height:21px}
.lang-menu em{margin-left:auto; font-style:normal; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  background:var(--sand); color:#9a7b2e; padding:2px 7px; border-radius:999px}

/* ---------- HERO cinematografico dark ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--ink)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0}
.hero-overlay{position:absolute; inset:0; z-index:1;
  background:
   radial-gradient(80% 60% at 78% 12%, rgba(255,207,107,.20), rgba(255,207,107,0) 60%),
   linear-gradient(92deg, rgba(4,22,31,.85) 0%, rgba(4,22,31,.5) 42%, rgba(4,22,31,.1) 100%),
   linear-gradient(180deg, rgba(4,22,31,.06) 45%, rgba(4,32,43,.8) 100%)}
.hero-content{position:relative; z-index:5; padding-block:120px 108px}
.hero .eyebrow{color:var(--gold-2)}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.9rem); font-weight:700; margin:.5rem 0 1.1rem; text-shadow:0 6px 34px rgba(0,0,0,.4)}
.hero h1 .hl{color:var(--gold-2)}
.hero p.sub{font-size:clamp(1.06rem,2vw,1.32rem); color:rgba(255,255,255,.92); max-width:600px; margin-bottom:1.7rem}
.trust-row{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:1.7rem}
.trust-chip{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  padding:.44rem .9rem; border-radius:999px; font-weight:700; font-size:.9rem; backdrop-filter:blur(4px)}
.stars{color:var(--gold-2); letter-spacing:.04em}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1rem}
.reassure{display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.78); font-size:.9rem; font-weight:600}
.reassure i{color:var(--aqua)}
.quickfacts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:2.4rem;
  border-top:1px solid rgba(255,255,255,.16); padding-top:1.4rem; max-width:720px}
.qf{display:flex; gap:11px; align-items:flex-start}
.qf i{font-size:1.35rem; color:var(--gold-2)}
.qf small{display:block; color:rgba(255,255,255,.6); font-size:.7rem; text-transform:uppercase; letter-spacing:.11em}
.qf b{font-weight:800; font-size:.98rem}
@media(max-width:720px){.quickfacts{grid-template-columns:repeat(2,1fr)}}
.hero-anim{opacity:0; transform:translateY(26px); animation:heroin .9s .15s cubic-bezier(.2,.7,.2,1) forwards}
.hero-anim.d2{animation-delay:.3s}.hero-anim.d3{animation-delay:.45s}.hero-anim.d4{animation-delay:.6s}
@keyframes heroin{to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.hero-anim{animation:none; opacity:1; transform:none}}
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:5; color:rgba(255,255,255,.7);
  font-size:1.5rem; animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media(max-width:720px){.scroll-cue{display:none}}

/* ---------- STAT band (count-up, social proof) ---------- */
.stats{background:var(--ink); color:#fff; padding:36px 0; border-top:1px solid rgba(255,255,255,.06)}
.stat{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:8px 0}
.stat .n{font-family:"Fraunces"; font-weight:700; font-size:clamp(1.9rem,4vw,2.7rem); color:var(--gold-2); line-height:1}
.stat .l{color:rgba(255,255,255,.72); font-size:.86rem; font-weight:600; letter-spacing:.02em}
.stat-div{width:1px; align-self:stretch; background:rgba(255,255,255,.14)}
@media(max-width:720px){.stat-div{display:none}}

/* ---------- Reveal ---------- */
.reveal{transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal{opacity:0; transform:translateY(34px)}
html.js .reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1; transform:none}}

/* ---------- Section heads ---------- */
.sec-head{max-width:730px; margin:0 auto 56px; text-align:center}
.sec-head h2{font-size:clamp(2.05rem,4.1vw,3rem); font-weight:600; margin:.5rem 0 .6rem; color:var(--ink)}
.sec-head p{color:var(--muted); font-size:1.08rem}

/* ---------- How it works (3 step) ---------- */
.how{background:var(--foam)}
.step{position:relative; background:var(--card); border-radius:var(--radius); padding:32px 28px; height:100%; text-align:center;
  box-shadow:var(--shadow-soft); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease}
.step:hover{transform:translateY(-6px); box-shadow:0 34px 70px -34px rgba(4,32,43,.45)}
.step .num{position:static; width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  font-family:"Fraunces"; font-weight:700; font-size:1.7rem; line-height:1; color:#4a3406; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); box-shadow:0 12px 26px -12px rgba(242,181,68,.7)}
.step i{display:none}
.step h3{font-size:1.2rem; color:var(--ink); margin-bottom:.35rem; font-weight:600}
.step p{color:var(--muted); margin:0; font-size:.98rem}

/* ---------- Experience cards ---------- */
.exp-card{background:var(--card); border-radius:var(--radius); padding:30px 26px; height:100%; box-shadow:var(--shadow);
  border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; text-align:center}
.exp-card:hover{transform:translateY(-8px); box-shadow:0 34px 70px -30px rgba(4,32,43,.5)}
.exp-ico{width:60px; height:60px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; color:#fff; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--sea),var(--aqua)); box-shadow:0 12px 26px -12px rgba(14,107,130,.7)}
.exp-card h3{font-size:1.24rem; color:var(--ink); margin-bottom:.4rem; font-weight:600}
.exp-card p{color:var(--muted); margin:0; font-size:.98rem}

/* ---------- Trips (uscite) ---------- */
.trip-card{position:relative; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  height:100%; display:flex; flex-direction:column; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease}
.trip-card:hover{transform:translateY(-6px); box-shadow:0 40px 80px -34px rgba(4,32,43,.55)}
.trip-card.featured{border-color:rgba(255,106,69,.55); box-shadow:0 40px 80px -30px rgba(255,106,69,.4)}
.trip-media{position:relative; overflow:hidden; height:230px}
.trip-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease}
.trip-card:hover .trip-media img{transform:scale(1.06)}
.trip-badge{position:absolute; top:14px; left:14px; background:#fff; color:var(--ink); font-weight:800; font-size:.8rem;
  padding:.35rem .8rem; border-radius:999px; z-index:2; display:inline-flex; align-items:center; gap:6px}
.ribbon{position:absolute; top:14px; right:14px; background:var(--coral); color:#fff; font-weight:800; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.34rem .7rem; border-radius:999px; z-index:2;
  box-shadow:0 10px 22px -10px rgba(255,106,69,.85)}
.trip-body{padding:26px; display:flex; flex-direction:column; flex:1}
.trip-body h3{color:var(--ink); font-size:1.42rem; margin-bottom:.2rem; font-weight:600}
.trip-time{color:var(--sea); font-weight:800; font-size:.92rem; margin-bottom:.9rem}
.trip-list{list-style:none; padding:0; margin:0 0 1.2rem}
.trip-list li{padding:.28rem 0 .28rem 1.75rem; position:relative; color:var(--text)}
.trip-list li::before{content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; color:var(--aqua)}
.price-tag{font-family:"Fraunces"; font-size:1.6rem; color:var(--ink); font-weight:700}
.price-tag small{font-size:.8rem; color:var(--muted); font-weight:400; font-family:"Manrope"}
.price-kids{font-family:"Manrope"; font-weight:800; font-size:1.05rem; color:var(--text); margin-top:.15rem}
.price-kids small{font-size:.78rem; color:var(--muted); font-weight:400}

/* ---------- Included (dark) ---------- */
.incl{background:linear-gradient(160deg,var(--deep),var(--ink)); color:#fff}
.incl .sec-head h2{color:#fff} .incl .sec-head p{color:rgba(255,255,255,.66)}
.incl-item{display:flex; gap:14px; align-items:flex-start; padding:17px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); height:100%}
.incl-item .ic{width:28px; height:28px; color:var(--gold-2); stroke-width:1.75; flex:0 0 auto}
.incl-item b{display:block; font-weight:800}
.incl-item span{color:rgba(255,255,255,.72); font-size:.92rem}

/* ---------- Boat gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:16px}
.gallery-grid>div{border-radius:var(--radius); overflow:hidden; background:var(--deep)}
.gallery-grid .g-lg{grid-column:span 2; grid-row:span 2}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease}
.gallery-grid>div:hover img{transform:scale(1.06)}
@media(max-width:800px){.gallery-grid{grid-template-columns:repeat(2,1fr)} .gallery-grid .g-lg{grid-column:span 2; grid-row:span 1}}

/* ---------- Story ---------- */
.story{background:var(--sand)}
.story-badge{display:inline-flex; gap:8px; align-items:center; background:#fff; border-radius:999px; padding:.5rem 1rem;
  font-weight:800; color:var(--sea); box-shadow:var(--shadow-soft); margin-bottom:1rem}
.story-img{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); height:100%}
.story-img img{width:100%; height:100%; object-fit:cover; min-height:460px}

/* ---------- Reviews ---------- */
.review-card{background:var(--card); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); height:100%;
  display:flex; flex-direction:column; border:1px solid var(--line)}
.review-card .stars{font-size:1.05rem; margin-bottom:.6rem}
.review-card p{font-style:italic; color:var(--text); flex:1; margin:0}
.review-card .who{font-weight:800; color:var(--muted); font-size:.85rem; margin-top:.9rem; display:flex; align-items:center; gap:8px}
.g-badge{display:inline-flex; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:14px 24px; box-shadow:var(--shadow); font-weight:800; color:var(--ink)}
.g-badge .score{font-family:"Fraunces"; font-size:2.1rem; color:var(--ink); line-height:1}
.g-badge .g-badge-r{text-align:left}
.g-badge small{color:var(--muted); font-weight:700}
.g-logo{font-weight:800; letter-spacing:-.02em}
.g-logo span:nth-child(1){color:#4285F4}.g-logo span:nth-child(2){color:#EA4335}.g-logo span:nth-child(3){color:#FBBC05}
.g-logo span:nth-child(4){color:#4285F4}.g-logo span:nth-child(5){color:#34A853}.g-logo span:nth-child(6){color:#EA4335}
.g-mark{display:inline-flex; width:18px; height:18px; flex:0 0 auto}

/* ---------- FAQ ---------- */
#faq details{border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:12px; background:#fff; overflow:hidden}
#faq summary{list-style:none; cursor:pointer; padding:18px 22px; font-family:"Fraunces"; font-weight:600; font-size:1.1rem;
  color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:14px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:""; width:11px; height:11px; border-right:2.5px solid var(--sea); border-bottom:2.5px solid var(--sea);
  transform:rotate(45deg); transition:transform .3s ease; flex:0 0 auto; margin-top:-5px}
#faq details[open] summary::after{transform:rotate(-135deg)}
#faq details[open] summary{color:var(--sea); background:var(--foam)}
#faq .faq-a{padding:2px 22px 20px; color:var(--muted); overflow:hidden; transition:height .32s ease}

/* ---------- Meeting point (dark) ---------- */
.meet{background:linear-gradient(160deg,var(--deep),var(--ink)); color:#fff}
.meet .eyebrow{color:var(--gold-2)}
.meet h2{color:#fff}
.meet-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:34px}
.meet-card b{color:#fff}

/* ---------- Final CTA ---------- */
.final-cta{position:relative; color:#fff; text-align:center; background:linear-gradient(150deg,var(--sea),var(--ink)); overflow:hidden}
.cta-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.24}
.final-form{background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); text-align:left; color:var(--text)}
.final-form label{font-weight:800; font-size:.85rem; color:var(--ink); margin-bottom:.25rem}
.final-form .form-control,.final-form .form-select{border-radius:12px; padding:.72rem .9rem; transition:border-color .2s ease, box-shadow .2s ease}
/* ---- Validazione: asterisco, stato errore, messaggi inline soft ---- */
.final-form .req{color:var(--coral); font-weight:800; margin-left:1px}
.final-form .is-err{border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,106,69,.16)}
.final-form .field-err{color:#c8401c; font-size:.8rem; font-weight:600; line-height:1.3; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease}
.final-form .field-err.show{max-height:44px; opacity:1; margin-top:.32rem}
.final-form .privacy-row.is-err input[type=checkbox]{outline:2px solid var(--coral); outline-offset:2px; border-radius:4px}
.final-form .privacy-row.is-err label{color:#c8401c}
/* ---- Loader overlay al submit (segnala l'invio + blocca doppio click) ---- */
.ept-overlay{position:fixed; inset:0; z-index:9999; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:rgba(4,32,43,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); color:#fff}
.ept-overlay.show{display:flex}
.ept-spinner{width:54px; height:54px; border-radius:50%; border:4px solid rgba(255,255,255,.25); border-top-color:var(--gold-2); animation:eptspin .8s linear infinite}
@keyframes eptspin{to{transform:rotate(360deg)}}
.ept-overlay-txt{font-weight:700; font-size:1.05rem; letter-spacing:.01em}
.final-form .btn.is-loading{pointer-events:none; opacity:.7}

/* ---- Cookie banner (CMP) ---- */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:9998; transform:translateY(115%);
  transition:transform .4s cubic-bezier(.2,.75,.2,1); background:rgba(4,32,43,.97); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; box-shadow:0 -10px 40px -12px rgba(0,0,0,.6); padding:16px 0 calc(16px + env(safe-area-inset-bottom))}
.cookie-banner.show{transform:none}
.cookie-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.cookie-txt{font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.9); max-width:760px}
.cookie-txt a{color:var(--gold-2); text-decoration:underline}
.cookie-actions{display:flex; gap:10px; flex:0 0 auto}
.cookie-btn{border-radius:999px; font-weight:800; padding:.6rem 1.5rem; font-size:.92rem; border:none; cursor:pointer; font-family:inherit; transition:transform .15s ease, filter .2s ease, background .2s ease}
.cookie-btn:active{transform:translateY(1px)}
.cookie-reject{background:transparent; border:2px solid rgba(255,255,255,.55); color:#fff}
.cookie-reject:hover{background:rgba(255,255,255,.12)}
.cookie-accept{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#4a3406}
.cookie-accept:hover{filter:brightness(1.05)}
@media(max-width:900px){
  .cookie-banner{bottom:0; padding:16px 0 calc(16px + env(safe-area-inset-bottom))}
  .cookie-inner{flex-direction:column; align-items:stretch; text-align:center; gap:13px}
  .cookie-txt{font-size:.9rem; max-width:none}
  .cookie-actions{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .cookie-btn{width:100%; padding:.95rem 1rem; font-size:1.02rem}
  /* mentre il banner e' aperto, nascondo la barra mobile call/WhatsApp: una sola scelta chiara in basso */
  body.cookie-open .mobile-bar{display:none !important}
}

/* ---- Pagine legali (privacy / cookie) ---- */
.legal{background:var(--sand); padding:140px 0 80px}
.legal .container{max-width:820px}
.legal h1{color:var(--ink); font-family:"Fraunces"; font-size:clamp(2rem,4vw,2.6rem); margin-bottom:.25rem}
.legal .updated{color:var(--muted); font-size:.9rem; margin-bottom:1.6rem}
.legal h2{color:var(--ink); font-family:"Fraunces"; font-weight:600; font-size:1.35rem; margin:2rem 0 .6rem}
.legal h3{color:var(--ink); font-size:1.02rem; margin:1.2rem 0 .35rem; font-weight:700}
.legal p, .legal li{color:var(--text); font-size:1rem; line-height:1.72}
.legal ul{padding-left:1.2rem; margin:.4rem 0 1rem}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--sea); text-decoration:underline}
.legal .box{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; margin:1.2rem 0}
.legal table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.92rem}
.legal th, .legal td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
.legal th{background:var(--foam); font-weight:700}
.urgency{display:inline-flex; gap:8px; align-items:center; background:rgba(255,106,69,.18); border:1px solid rgba(255,106,69,.5);
  color:var(--gold-2); padding:.5rem 1rem; border-radius:999px; font-weight:800; margin-bottom:1rem}

/* ---------- Footer ---------- */
footer{background:#031820; color:rgba(255,255,255,.72); padding:64px 0 30px}
footer a{color:rgba(255,255,255,.72)} footer a:hover{color:#fff}
footer h4{color:#fff; font-family:"Fraunces"; font-size:1.1rem; margin-bottom:1rem}
.foot-social a{width:40px; height:40px; border-radius:11px; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); margin-right:8px; font-size:1.1rem}
.foot-social a:hover{background:var(--sea); color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:22px; font-size:.85rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.foot-legal{font-size:.8rem; opacity:.7}

/* ---------- Floating WA + Sticky mobile bar ---------- */
.wa-float{position:fixed; right:20px; bottom:26px; width:60px; height:60px; border-radius:50%; background:var(--wa); color:#fff;
  display:grid; place-items:center; font-size:1.9rem; z-index:70; box-shadow:0 14px 34px -8px rgba(37,211,102,.8); animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.wa-float{animation:none}}
.mobile-bar{position:fixed; left:0; right:0; bottom:0; z-index:71; display:none; grid-template-columns:1fr 1fr;
  background:#fff; box-shadow:0 -8px 30px -10px rgba(0,0,0,.25); padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{padding:15px; text-align:center; font-weight:800; font-size:.98rem; display:flex; align-items:center; justify-content:center; gap:8px}
.mobile-bar .mb-wa{background:var(--wa); color:#053d20}
.mobile-bar .mb-call{background:var(--ink); color:#fff}
@media(max-width:900px){
  .mobile-bar{display:grid}
  .wa-float{display:none}   /* su mobile la barra in basso ha già Prenota (WhatsApp): niente doppione */
  body{padding-bottom:64px}
  .section{padding:70px 0}
  /* Nav mobile pulita: logo normale (niente scala gigante) + wordmark sempre visibile */
  .logo-chip{width:42px; height:42px}
  .nav-wrap:not(.scrolled) .logo-chip{transform:none; box-shadow:0 6px 18px -6px rgba(0,0,0,.55)}
  .nav-wrap:not(.scrolled) .brand-text{opacity:1; transform:none; pointer-events:auto}
  .brand{font-size:1.02rem}
  /* Scrim hero più scuro e uniforme: il testo bianco è a tutta larghezza su mobile → serve contrasto */
  .hero-overlay{background:
    linear-gradient(180deg, rgba(4,22,31,.80) 0%, rgba(4,22,31,.56) 48%, rgba(4,32,43,.90) 100%)}
}

/* ---------- Mobile premium polish (fix overflow laterale + respiro) ---------- */
@media(max-width:575.98px){
  .container{padding-left:20px; padding-right:20px}
  .hero-content{padding-block:120px 84px}
  .hero .eyebrow{font-size:.72rem; letter-spacing:.16em; margin-bottom:.55rem}
  .hero h1{font-size:clamp(2.3rem,8vw,3rem); margin:.1rem 0 .95rem}
  .hero p.sub{font-size:1.04rem; margin-bottom:1.5rem}
  .trust-row{gap:8px 10px; margin-bottom:1.5rem}
  .trust-chip{font-size:.82rem; padding:.4rem .8rem}
  .quickfacts{gap:14px 12px; margin-top:1.6rem; padding-top:1.1rem}
  .sec-head{margin-bottom:36px}
}

/* ---------- Footer mobile: colonne impilate a tutta larghezza + centrato ---------- */
@media(max-width:767.98px){
  footer{text-align:center; padding:52px 0 26px}
  footer .row{--bs-gutter-y:34px}
  footer .brand{justify-content:center}
  footer p{margin-left:auto; margin-right:auto}
  footer h4{margin-bottom:.7rem}
  .foot-nav{align-items:center; gap:.65rem}
  .foot-contacts p{overflow-wrap:anywhere}
  .foot-legal{font-size:.78rem; line-height:1.6; opacity:.68; max-width:340px; margin:.6rem auto 0}
  .foot-bottom{justify-content:center; text-align:center; flex-direction:column; gap:6px; margin-top:34px}
}