/* ============================================================
   A casa di Antonella — foglio di stile
   Fondazione + Barra + Hero (morph giorno/notte)
   Design: blu cobalto su bianco. Tema unico chiaro (come da mockup).
   ============================================================ */

/* ---------- FONT ---------- */
@font-face{font-family:"Nohemi";src:url("../font/Nohemi-Light.otf") format("opentype");   font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../font/Nohemi-Regular.otf") format("opentype"); font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../font/Nohemi-Medium.otf") format("opentype");  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../font/Nohemi-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nohemi";src:url("../font/Nohemi-Bold.otf") format("opentype");    font-weight:700;font-style:normal;font-display:swap}
/* corsivo a mano per i titoli */
@font-face{font-family:"Corsivo";src:url("../font/TheOnlyException.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* Arrus BT per i testi (richiesta di Antonio). Font commerciale Bitstream/Monotype:
   i file vanno in font/ con licenza WEB. Finche' mancano, --testo ricade su Nohemi
   e il sito resta identico. */
@font-face{font-family:"Arrus BT";src:url("../font/ArrusBT-Roman.woff2") format("woff2");     font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arrus BT";src:url("../font/ArrusBT-Italic.woff2") format("woff2");    font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Arrus BT";src:url("../font/ArrusBT-Bold.woff2") format("woff2");      font-weight:700;font-style:normal;font-display:swap}

/* ---------- TOKEN ---------- */
:root{
  --blu:#265CAE;          /* cobalto brand: barra, hero, occhielli, bottoni */
  --blu-scuro:#0C4597;    /* pattern a onde, stati hover */
  --blu-icona:#195EAA;    /* icone (colore nativo dei loro SVG) */
  --blu-vivo:#1C60C4;     /* prezzi, accenti brillanti */
  --azzurro:#DFE7F3;      /* fasce morbide */
  --azzurro-chiaro:#EEF3FA;
  --ink:#14181F;          /* testo */
  --ink-soft:#48505C;     /* testo secondario */
  --bianco:#FFFFFF;
  --ground:#FFFFFF;
  --wa:#22A45A;           /* verde WhatsApp */

  --serif:"Corsivo", "Segoe Script", cursive;
  --sans:"Nohemi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  /* font dei testi lunghi: Arrus se c'e', altrimenti lo stesso di prima */
  --testo:"Arrus BT", var(--sans);

  --wrap:1200px;
  --barra-h:56px;
}

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box}
/* "hidden" deve vincere sempre: le nostre classi impostano display e lo coprirebbero */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
p, li, dd, blockquote{font-family:var(--testo)}
/* ...ma i pezzi d'interfaccia restano nel font del marchio */
.menu li, .occhiello, .tariffe-stagione, .inclusi, .cookie-testo, .esito,
.footer-legale, .footer p, .condizioni dd{font-family:var(--sans)}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--blu-vivo); outline-offset:3px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem)}

/* icone monocromatiche: si ricolorano con currentColor via mask */
.ic{display:inline-block; background-color:currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain}
.ic-pin  {width:11px;height:14px;-webkit-mask-image:url("../icone/map_pin.svg");   mask-image:url("../icone/map_pin.svg")}
.ic-tel  {width:9px; height:15px;-webkit-mask-image:url("../icone/smartphone.svg");mask-image:url("../icone/smartphone.svg")}
.ic-fb   {width:8px; height:16px;-webkit-mask-image:url("../icone/facebook.svg");  mask-image:url("../icone/facebook.svg")}
.ic-ig   {width:16px;height:16px;-webkit-mask-image:url("../icone/instagram.svg"); mask-image:url("../icone/instagram.svg")}

/* ============================================================
   BARRA IN ALTO
   ============================================================ */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:60;
  min-height:var(--barra-h);
  background:var(--blu); color:#fff;
  display:flex; align-items:center; gap:1.5rem;
  padding-inline:clamp(1.1rem,3vw,2rem);
  font-size:.86rem;
}
.barra a{display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap}
.barra a:not(.pill){color:#fff}
.barra a:not(.pill):hover{color:#dbe6fb}
.barra .ic{opacity:.95}
.barra-sx{display:flex; align-items:center; gap:1.6rem}
.barra-dx{display:flex; align-items:center; gap:1.15rem; margin-left:auto}
.barra strong{font-weight:600}

.lang{display:inline-flex; align-items:center; gap:.35rem; font-weight:500; letter-spacing:.02em}
.lang button{background:none; border:0; color:#cdddf7; font-size:.86rem; font-weight:500; padding:.1rem}
.lang button[aria-pressed="true"]{color:#fff; text-decoration:underline; text-underline-offset:3px}
.lang span{opacity:.5}

.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; color:var(--blu); font-weight:600; font-size:.86rem;
  padding:.5rem 1rem; border-radius:999px; border:1px solid #fff;
  transition:background .18s,color .18s;
}
.pill:hover{background:var(--azzurro); color:var(--blu-scuro)}

.social{display:inline-flex; align-items:center; gap:.85rem}
.social a{color:#fff}
.social a:hover{color:#cdddf7}

@media (max-width:820px){
  .barra-sx .cta-mappa span, .barra-sx .tel-nome{display:none}
  .barra-sx{gap:1rem}
  .barra{font-size:.8rem}
}
/* SOLO mobile: hamburger e social nella barra; lascio spazio a sinistra per l'hamburger */
@media (max-width:560px){
  .barra-sx{display:none}
  .barra{justify-content:flex-end; gap:.55rem; padding-inline:52px 12px}
  .barra-dx{gap:.55rem}
  .lang{font-size:.78rem}
  .lang button{font-size:.78rem}
  .social{gap:.6rem}
  .pill{padding:.4rem .7rem; font-size:.75rem}
}

/* ============================================================
   HAMBURGER + MENU
   ============================================================ */
.hamburger{
  position:fixed; top:calc(var(--barra-h) + 22px); left:clamp(1rem,3vw,2.2rem); z-index:55;
  width:52px; height:52px; border:0; border-radius:12px;
  background:rgba(12,30,62,.28); backdrop-filter:blur(4px);
  display:grid; place-content:center; gap:5px;
}
.hamburger span{display:block; width:26px; height:2.5px; background:#fff; border-radius:2px; transition:transform .25s,opacity .2s}
.hamburger:hover{background:rgba(12,30,62,.45)}
/* mobile: l'hamburger sale dentro la barra, a sinistra (override DOPO la regola base) */
@media (max-width:560px){
  .hamburger{top:7px; left:8px; z-index:65; width:42px; height:42px; background:transparent; backdrop-filter:none; border-radius:10px}
  .hamburger:hover{background:rgba(255,255,255,.14)}
  .hamburger span{width:24px}
}

.menu{
  position:fixed; inset:0; z-index:70; background:var(--blu);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.4rem;
  opacity:0; visibility:hidden; transition:opacity .3s;
}
.menu[data-aperto="true"]{opacity:1; visibility:visible}
.menu-logo{width:clamp(120px,20vw,180px); height:auto; margin-bottom:1.4rem}
.menu a{color:#fff; font-family:var(--serif); font-size:clamp(2rem,5vw,3.1rem); line-height:1}
.menu a:hover{color:var(--azzurro)}
.menu-chiudi{position:absolute; top:22px; right:26px; width:48px; height:48px; border:0; background:none; color:#fff; font-size:2rem; line-height:1}

/* ============================================================
   HERO — morph giorno/notte, a tutta pagina
   ============================================================ */
.hero{position:relative; height:100svh; min-height:560px; overflow:hidden; isolation:isolate}
.hero__foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.hero__foto--notte{
  z-index:2; opacity:0;
  /* 1) passaggio veloce giorno→notte all'apertura; 2) poi ciclo lento infinito */
  animation:
    alba-veloce 2.2s ease-out 0.5s forwards,
    ciclo-lento 32s ease-in-out 2.7s infinite;
}
@media (prefers-reduced-motion:reduce){ .hero__foto--notte{animation:none; opacity:0} }

@keyframes alba-veloce{ from{opacity:0} to{opacity:1} }   /* giorno → notte, rapido */
@keyframes ciclo-lento{
  0%   {opacity:1}   /* parte da notte (dove finisce l'alba veloce) */
  25%  {opacity:1}   /* resta notte */
  50%  {opacity:0}   /* torna giorno, lento */
  75%  {opacity:0}   /* resta giorno */
  100% {opacity:1}   /* torna notte, lento */
}

/* velatura per leggibilità del logo e aggancio della barra */
.hero__scrim{
  position:absolute; inset:0; z-index:3; cursor:pointer;
  background:
    linear-gradient(180deg, rgba(10,22,45,.34) 0, rgba(10,22,45,0) 22%),
    radial-gradient(120% 80% at 50% 42%, rgba(10,20,40,.28) 0%, rgba(10,20,40,0) 60%),
    linear-gradient(0deg, rgba(10,20,40,.30) 0, rgba(10,20,40,0) 30%);
}
.hero__centro{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  justify-content:flex-start; align-items:center; text-align:center;
  padding:clamp(96px,15svh,220px) 1rem 1rem;
  pointer-events:none;
}
.hero__logo{
  width:min(46vw,440px); height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* freccia scorri-giù */
.giu{
  position:absolute; left:50%; bottom:clamp(1.4rem,4vh,2.6rem); transform:translateX(-50%);
  z-index:5; width:56px; height:56px; border:0; background:none; color:#fff;
  display:grid; place-content:center; animation:saltella 2.2s ease-in-out infinite;
}
.giu svg{width:34px; height:34px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.giu:hover{color:var(--azzurro)}
@keyframes saltella{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* mobile: logo più grande e centrato nell'hero */
@media (max-width:640px){
  .hero__centro{justify-content:center; padding-top:1rem}
  .hero__logo{width:min(76vw,440px)}
}

/* ============================================================
   PIN WHATSAPP
   ============================================================ */
.wa{
  position:fixed; right:clamp(.9rem,2.5vw,1.5rem); bottom:clamp(.9rem,2.5vw,1.5rem); z-index:65;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--wa); color:#fff; font-weight:600; font-size:.92rem;
  padding:.72rem 1.05rem; border-radius:999px;
  box-shadow:0 8px 26px -6px rgba(0,0,0,.4); transition:transform .18s,background .18s;
}
.wa:hover{background:#1E9250; transform:translateY(-2px)}
.wa svg{width:22px; height:22px; fill:currentColor}
.wa .wa-txt{display:inline}
@media (max-width:520px){.wa .wa-txt{display:none} .wa{padding:.85rem}}
body[data-menu="true"] .wa{opacity:0; pointer-events:none}

/* ============================================================
   SEGNAPOSTO sezione successiva (per l'"entra nel sito")
   ============================================================ */
.sezione{padding-block:clamp(3.5rem,9vw,7rem)}
.occhiello{
  color:var(--blu); font-weight:500; font-size:1.05rem; letter-spacing:.01em;
  text-align:center; margin:0 0 .4rem;
}
.titolo-corsivo{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(2.1rem,5vw,3.6rem); line-height:1; text-align:center; margin:0;
  /* il corsivo sta a meta' strada fra l'occhiello e il testo, non incollato
     all'occhiello: lo abbassiamo senza spostare nient'altro, in proporzione
     alla sua grandezza (su telefono scende di meno) */
  position:relative; top:.33em;
}
.stub{text-align:center; color:var(--ink-soft)}
.stub p{max-width:60ch; margin:1.4rem auto 0}
.stub .nota{
  margin-top:2.5rem; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blu); opacity:.7;
}

/* ============================================================
   SEZIONE BENVENUTI
   ============================================================ */
.benvenuti .testo-centro{text-align:center}
.intro{
  max-width:64ch; margin:1.5rem auto 0; color:var(--ink);
  font-size:1.06rem; line-height:1.7;
}
.intro strong{font-weight:600}
/* il titolo corsivo e' abbassato (vedi .titolo-corsivo): un filo d'aria in piu'
   sotto, perche' le lettere con la coda (la "p" di "sapori") non tocchino il testo */
.titolo-corsivo + .intro{margin-top:2rem}

.foto-trio{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,2rem); margin-top:clamp(2.2rem,4.5vw,3.4rem);
}
.foto-round{margin:0}
.foto-round img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:0 38px 38px 38px;               /* angolo alto-sx squadrato: stilema */
  box-shadow:0 18px 34px -20px rgba(18,40,84,.45);
}
@media (max-width:760px){
  .foto-trio{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
  .foto-round img{aspect-ratio:16/11}
}

/* foto benvenuti: griglia di 3 su desktop, carosello (una per volta) su mobile */
@media (min-width:761px){
  .foto-carosello{margin-top:clamp(2.2rem,4.5vw,3.4rem)}
  .foto-carosello .car-freccia{display:none}
  .foto-carosello .car-palco{
    flex:1; height:auto; overflow:visible;
    display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem);
  }
  .foto-carosello .car-foto{
    position:static; transform:none!important; opacity:1!important;
    width:auto; height:auto; z-index:auto; pointer-events:auto;
  }
  .foto-carosello .car-foto img{aspect-ratio:4/5}
}
@media (max-width:760px){
  .foto-carosello{margin-top:2rem; gap:.2rem}
  .foto-carosello .car-palco{
    position:relative; flex:1; height:auto; aspect-ratio:4/5;
    max-width:72vw; margin-inline:auto; overflow:hidden;
  }
  .foto-carosello .car-foto{
    position:absolute; inset:0; width:100%; height:100%;
    transform:none!important; opacity:0;
  }
  .foto-carosello .car-foto.is-active{opacity:1}
  .foto-carosello .car-foto img{aspect-ratio:auto}
}

/* ============================================================
   FASCIA SERVIZI (pattern a onde)
   ============================================================ */
.servizi{
  position:relative; overflow:hidden;
  background:var(--blu); color:#fff;
  padding-block:clamp(2.6rem,5.5vw,4.2rem);
}
.servizi::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("../img/pattern.svg"); background-repeat:repeat;
  background-size:300px auto; opacity:.55;
}
.servizi-griglia{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem; text-align:center;
}
.servizio{display:flex; flex-direction:column; align-items:center; gap:.55rem}
.serv-ic{
  display:inline-block; background:#fff; margin-bottom:.3rem;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.si-navetta  {width:60px;height:48px;-webkit-mask-image:url("../icone/navetta.svg");  mask-image:url("../icone/navetta.svg")}
.si-wifi     {width:56px;height:43px;-webkit-mask-image:url("../icone/wifi.svg");     mask-image:url("../icone/wifi.svg")}
.si-piscina  {width:56px;height:50px;-webkit-mask-image:url("../icone/piscina.svg");  mask-image:url("../icone/piscina.svg")}
.si-colazione{width:52px;height:51px;-webkit-mask-image:url("../icone/colazione.svg");mask-image:url("../icone/colazione.svg")}
.servizio h3{font-family:var(--sans); font-weight:700; font-size:1.08rem; margin:0}
.servizio p{color:#cfe0f6; font-size:.94rem; line-height:1.45; margin:0; max-width:20ch}
/* mobile: i 4 servizi restano a 2×2, come i prezzi delle camere */
@media (max-width:820px){ .servizi-griglia{grid-template-columns:repeat(2,1fr); gap:2.2rem 1.2rem} }

/* ============================================================
   SEZIONE CAMERE
   ============================================================ */
.camere .testo-centro{text-align:center}

/* striscia tariffe (azzurra, a tutta larghezza) */
.tariffe{
  background:var(--azzurro);
  margin-top:clamp(2rem,4vw,3rem);
  padding-block:clamp(1.8rem,3.4vw,2.6rem);
}
/* la stagione a cui si riferiscono i prezzi, sopra la griglia */
.tariffe-stagione{
  margin:0 auto clamp(1.2rem,2.4vw,1.8rem); text-align:center;
  text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:600;
  color:var(--blu);
}
.tariffe-griglia{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.4rem .4rem;
}
.tariffa{display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:.3rem 1rem; text-align:center}
.tariffa-letti{display:flex; align-items:flex-end; justify-content:center; gap:5px; height:40px}
.tariffa-letti img{height:34px; width:auto}
.tariffa-letti img.fade{opacity:.38}
.tariffa-nome{color:var(--ink); font-size:1rem; line-height:1.2}
.tariffa-piano{font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:#8092ad}
.tariffa-prezzo{
  font-family:var(--sans); font-weight:700; color:var(--blu);
  font-size:clamp(1.7rem,3vw,2.55rem); line-height:1; margin-top:.15rem;
}
.tariffa-prezzo .eur{font-size:.5em; font-weight:600; vertical-align:.55em; margin-right:.05em}
@media (max-width:900px){ .tariffe-griglia{grid-template-columns:repeat(3,1fr); gap:2rem .4rem} }
@media (max-width:560px){ .tariffe-griglia{grid-template-columns:repeat(2,1fr)} }

.inclusi{text-align:center; margin-top:1.6rem; color:var(--ink-soft); font-size:.9rem; letter-spacing:.04em}
.inclusi .etichetta{text-transform:uppercase; font-weight:500}
.inclusi b{color:var(--blu); font-weight:600; font-size:1.02rem; letter-spacing:0}

/* orari e condizioni, sotto le tariffe */
.condizioni{
  margin:1.6rem auto 0; padding-top:1.4rem; max-width:64rem;
  border-top:1px solid rgba(38,92,174,.18);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem 2rem;
}
.condizione{text-align:center}
.condizioni dt{
  text-transform:uppercase; letter-spacing:.06em; font-size:.76rem;
  font-weight:500; color:var(--ink-soft); margin-bottom:.2rem;
}
.condizioni dd{margin:0; color:var(--blu-scuro); font-weight:600; font-size:.98rem}
@media (max-width:560px){
  .condizioni{gap:.9rem 1.6rem}
  .condizioni dd{font-size:.92rem}
}

/* carosello coverflow */
.carosello{
  position:relative; margin-top:clamp(2.4rem,5vw,3.6rem);
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.car-palco{
  position:relative; flex:1; max-width:var(--wrap);
  height:clamp(300px,40vw,470px); overflow:hidden;
}
.car-foto{
  position:absolute; top:0; left:50%; margin:0;
  width:clamp(280px,44vw,560px); height:100%;
  transform:translateX(-50%) scale(.72); opacity:0; z-index:0; pointer-events:none;
  transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .5s;
}
.car-foto img{
  width:100%; height:100%; object-fit:cover;
  border-radius:0 38px 38px 38px;
  box-shadow:0 20px 44px -20px rgba(18,40,84,.5);
}
.car-foto.is-active{transform:translateX(-50%) scale(1); opacity:1; z-index:3; pointer-events:auto}
.car-foto.is-prev {transform:translateX(calc(-50% - 66%)) scale(.8); opacity:.5; z-index:2}
.car-foto.is-next {transform:translateX(calc(-50% + 66%)) scale(.8); opacity:.5; z-index:2}
.car-freccia{
  flex:none; width:48px; height:48px; border:0; background:none; color:var(--blu);
  display:grid; place-content:center; border-radius:50%; transition:background .18s,transform .18s;
}
.car-freccia svg{width:30px; height:30px}
.car-freccia:hover{background:var(--azzurro-chiaro); transform:scale(1.08)}
@media (max-width:600px){
  .car-foto{width:74vw}
  .car-foto.is-prev,.car-foto.is-next{opacity:0}   /* su mobile solo la centrale */
  .car-freccia{width:42px;height:42px}
}

/* ============================================================
   SEZIONE NELLE VICINANZE
   ============================================================ */
.vicinanze .testo-centro{text-align:center}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1.8rem; padding:.8rem 2rem; border-radius:999px;
  border:2px solid var(--blu); color:var(--blu); background:transparent;
  font-weight:600; font-size:1rem; transition:background .18s,color .18s;
}
.btn-outline:hover{background:var(--blu); color:#fff}

.vic-banda{background:var(--azzurro); padding-block:clamp(1.3rem,2.2vw,1.9rem); overflow:hidden}
.vic-carosello{
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:flex; align-items:center; gap:clamp(.4rem,2vw,1.4rem);
}
.vic-cards{position:relative; flex:1; min-height:0}
.vic-card{
  position:absolute; inset:0; display:grid; grid-template-columns:0.78fr 1.22fr;
  gap:clamp(1.2rem,2.8vw,2.4rem); align-items:center;
  opacity:0; visibility:hidden; transition:opacity .4s;
}
.vic-card.is-active{opacity:1; visibility:visible; position:relative}
.vic-card figure{margin:0}
.vic-card img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:0 30px 30px 30px; box-shadow:0 14px 32px -18px rgba(18,40,84,.5);
}
.vic-card h3{font-family:var(--sans); font-weight:700; color:var(--blu); font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 .55rem}
.vic-card p{color:var(--ink); font-size:1.02rem; line-height:1.6; margin:0}
.indicazioni{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  color:var(--blu); font-weight:600;
}
.indicazioni .ic-pin{width:13px; height:16px}
.indicazioni:hover{color:var(--blu-scuro)}
.vic-freccia{
  flex:none; width:46px; height:46px; border:0; background:none; color:var(--blu);
  display:grid; place-content:center; border-radius:50%; transition:background .18s,transform .18s;
}
.vic-freccia svg{width:28px; height:28px}
.vic-freccia:hover{background:#fff; transform:scale(1.08)}
@media (max-width:720px){
  .vic-card{grid-template-columns:1fr; gap:1.2rem}
  .vic-cards{min-height:0}
  .vic-card{position:relative; display:none}
  .vic-card.is-active{display:grid}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative; overflow:hidden; background:var(--blu); color:#fff; padding-block:clamp(2.6rem,5vw,4rem)}
.footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("../img/pattern.svg"); background-repeat:repeat; background-size:300px auto; opacity:.5;
}
.footer-griglia{
  position:relative; z-index:1;
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:grid; grid-template-columns:0.95fr 1.9fr 1fr; gap:clamp(1.6rem,3vw,2.6rem); align-items:start;
}
.footer-logo{width:clamp(150px,16vw,190px); height:auto; margin-bottom:1.2rem}
.footer-brand p{line-height:1.7; margin:0; color:#dbe6fb; font-size:.95rem}
.footer-brand strong{color:#fff; font-weight:600}
/* "come raggiungerci": ripiego mostrato finche' non si accettano i cookie */
.mappa-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  width:100%; min-height:clamp(200px,18vw,250px); padding:1.6rem 1.2rem; text-align:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32);
  border-radius:0 26px 26px 26px; color:#fff; transition:background .2s,transform .2s;
}
.mappa-box .mappa-cta{border:0; cursor:pointer; font-family:inherit}
.mappa-box .mappa-cta:hover{background:var(--azzurro); color:var(--blu-scuro)}
.mappa-nota{font-size:.76rem; color:#c3d5f0; max-width:34ch; line-height:1.45}
/* quando la mappa e' caricata il riquadro diventa la mappa */
.mappa-box.mappa-caricata{padding:0; background:none; border:0; min-height:0; display:block; overflow:hidden}
.mappa-box.mappa-caricata iframe{
  width:100%; height:clamp(220px,20vw,280px); border:0; display:block;
  border-radius:0 26px 26px 26px; box-shadow:0 14px 30px -16px rgba(0,0,0,.5);
}
.mappa-box .ic-pin{width:22px; height:28px}
.mappa-indirizzo{line-height:1.6; color:#dbe6fb}
.mappa-indirizzo strong{color:#fff; font-weight:600; font-size:1.05rem}
.mappa-cta{
  display:inline-block; background:#fff; color:var(--blu); font-weight:600; font-size:.88rem;
  padding:.5rem 1.1rem; border-radius:999px; margin-top:.2rem;
}
.footer-contatti{display:flex; flex-direction:column; gap:1rem; align-items:flex-start}
.footer-social{display:flex; gap:1rem; color:#fff}
.footer-social a{color:#fff}
.footer-social a:hover{color:var(--azzurro)}
.footer-contatti .pill{margin:0}
.footer-contatti a[href^="mailto"]{color:#fff; border-bottom:1px solid transparent}
.footer-contatti a[href^="mailto"]:hover{border-bottom-color:#fff}
.footer-contatti p{margin:0; color:#dbe6fb; font-size:.95rem; line-height:1.5}
.footer-contatti p strong{color:#fff; font-weight:600; font-size:1.02rem}
.footer-legale{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:clamp(1.8rem,4vw,2.6rem) auto 0;
  padding:1.2rem clamp(1.1rem,4vw,2.5rem) 0;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:space-between;
  font-size:.82rem; color:#c3d5f0;
}
.footer-legale a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.footer-legale a:hover{color:var(--azzurro)}

@media (max-width:820px){
  .footer-griglia{grid-template-columns:1fr 1fr; gap:2rem}
  .footer-mappa{grid-column:1/-1; order:3}
}
@media (max-width:520px){ .footer-griglia{grid-template-columns:1fr} }

/* tasto centrato (es. "Guarda tutte le foto" sotto il carosello camere) */
.centro-btn{text-align:center; margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.centro-btn .btn-outline{margin-top:0}

/* ============================================================
   PAGINA GALLERY — mosaico
   ============================================================ */
.gallery-griglia{
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  columns:3; column-gap:clamp(.8rem,1.5vw,1.4rem);
}
.gallery-griglia figure{margin:0 0 clamp(.8rem,1.5vw,1.4rem); break-inside:avoid}
.gallery-griglia img{
  width:100%; display:block; border-radius:0 24px 24px 24px;
  box-shadow:0 14px 30px -20px rgba(18,40,84,.4);
}
@media (max-width:900px){ .gallery-griglia{columns:2} }
@media (max-width:560px){ .gallery-griglia{columns:1; max-width:440px} }

/* ============================================================
   PAGINA RICETTE
   ============================================================ */
.ricetta{
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(1.6rem,4vw,3.2rem);
  align-items:start; margin-bottom:0;
}
.ricetta + .ricetta{
  border-top:1px solid #E1E8F4;
  margin-top:clamp(2.6rem,6vw,4rem); padding-top:clamp(2.6rem,6vw,4rem);
}
.ricetta:nth-of-type(even){grid-template-columns:1.18fr 0.82fr}
.ricetta:nth-of-type(even) figure{order:2}
.ricetta figure{margin:0; position:sticky; top:80px}
.ricetta img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:0 32px 32px 32px; box-shadow:0 16px 34px -20px rgba(18,40,84,.45)}
.ricetta-cat{display:inline-block; background:var(--azzurro); color:var(--blu-scuro); font-weight:600; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; padding:.3rem .75rem; border-radius:999px; margin-bottom:.75rem}
.ricetta h3{font-family:var(--serif); font-weight:400; color:var(--ink); font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.05; margin:0 0 .5rem}
.ricetta-nota{color:var(--ink-soft); margin:0 0 .5rem; line-height:1.6}
.ricetta h4{color:var(--blu); font-weight:600; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; margin:1.6rem 0 .6rem}
.ricetta ul{margin:0; padding-left:1.15rem; line-height:1.65}
.ricetta ul li{margin-bottom:.25rem}
.ricetta ol{margin:0; padding-left:1.25rem; line-height:1.6}
.ricetta ol li{margin-bottom:.7rem; padding-left:.2rem}
.ricetta em{color:var(--blu); font-style:normal; font-weight:600}
@media (max-width:760px){
  .ricetta, .ricetta:nth-of-type(even){grid-template-columns:1fr; gap:1.1rem}
  .ricetta:nth-of-type(even) figure{order:0}
  .ricetta figure{position:static}
  .ricetta img{aspect-ratio:16/11}
}

/* richiamo ricette in home (sezione bianca; la fascia col carosello riusa .vic-*) */
.ricette-intro .testo-centro{text-align:center}
/* intro che precede una fascia-carosello: poco stacco sotto, il bottone va dopo la fascia */
.intro-carosello{padding-bottom:clamp(1rem,2vw,1.5rem)}
.dopo-banda{text-align:center; padding-block:clamp(1.3rem,2.8vw,2rem)}
.dopo-banda .btn-outline{margin-top:0}

/* ============================================================
   PAGINA INTERNA — Nelle vicinanze
   ============================================================ */
.pagina-interna{padding-top:var(--barra-h)}
.gruppo-luoghi{padding-bottom:clamp(1.5rem,4vw,3rem)}
.gruppo-titolo{
  text-align:center; color:var(--blu); font-weight:600;
  font-size:1.1rem; letter-spacing:.05em; text-transform:uppercase; margin:0 0 2rem;
}
.luoghi-griglia{
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.8rem,3.5vw,3rem);
}
@media (max-width:720px){ .luoghi-griglia{grid-template-columns:1fr; max-width:460px} }
.luogo{display:flex; flex-direction:column}
.luogo figure{margin:0 0 1.1rem}
.luogo img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:0 32px 32px 32px; box-shadow:0 16px 34px -20px rgba(18,40,84,.45);
}
.luogo-dist{
  align-self:flex-start; background:var(--azzurro); color:var(--blu-scuro);
  font-weight:600; font-size:.82rem; padding:.32rem .75rem; border-radius:999px; margin-bottom:.75rem;
  font-variant-numeric:tabular-nums;
}
.luogo h3{font-family:var(--sans); font-weight:700; color:var(--blu); font-size:1.35rem; line-height:1.25; margin:0 0 .6rem}
.luogo p{color:var(--ink); line-height:1.6; margin:0 0 1rem}
.luogo .indicazioni{margin-top:auto; align-self:flex-start}

/* ============================================================
   MODALE — Fai una Richiesta
   ============================================================ */
.modale{
  border:0; padding:0; background:#fff; color:var(--ink);
  border-radius:8px; max-width:720px; width:calc(100% - 2rem);
  box-shadow:0 40px 100px -30px rgba(10,22,45,.6);
}
.modale::backdrop{background:rgba(10,22,45,.55); backdrop-filter:blur(3px)}
.modale-in{position:relative; padding:clamp(1.6rem,4vw,2.8rem); max-height:88vh; overflow-y:auto}
.modale-chiudi{
  position:absolute; top:12px; right:14px; width:44px; height:44px; border:0; background:none;
  color:var(--ink-soft); font-size:1.9rem; line-height:1; border-radius:50%; transition:background .18s,color .18s;
}
.modale-chiudi:hover{background:var(--azzurro-chiaro); color:var(--ink)}
.modale .occhiello{margin-bottom:.1rem}
.modale .titolo-corsivo{font-size:clamp(1.9rem,4vw,2.7rem)}
.modale-intro{text-align:center; color:var(--ink-soft); max-width:50ch; margin:.8rem auto 1.9rem}

.gruppo{border:0; padding:0; margin:0 0 1.5rem; min-inline-size:0}
.gruppo legend{color:var(--blu); font-weight:600; font-size:.98rem; margin-bottom:.85rem; padding:0}
.campi{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.campo{display:flex; flex-direction:column; gap:.35rem}
.campo.full{grid-column:1/-1}
.campo label{font-size:.83rem; font-weight:500; color:var(--ink-soft)}
.campo label .req{color:var(--blu)}
.campo input, .campo textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid #C9D4E6; border-radius:7px; padding:.7rem .8rem; width:100%;
}
.campo input:focus, .campo textarea:focus{outline:none; border-color:var(--blu); box-shadow:0 0 0 3px var(--azzurro)}
.campo textarea{resize:vertical; min-height:98px}

.consenso{display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--ink-soft); margin-bottom:1.2rem}
.consenso input{margin-top:.15rem; accent-color:var(--blu); width:18px; height:18px; flex:none}
.consenso a{color:var(--blu); text-decoration:underline}
/* trappola anti-robot: deve sparire alla vista senza usare display:none o
   visibility:hidden, che i robot piu' accorti riconoscono e saltano */
.trappola{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.modale-azioni{display:flex; justify-content:flex-end}
.btn-blu{
  display:inline-flex; align-items:center; gap:.5rem; border:0;
  background:var(--blu); color:#fff; font-weight:600; font-size:1rem;
  padding:.82rem 1.7rem; border-radius:999px; transition:background .18s;
}
.btn-blu:hover{background:var(--blu-scuro)}
.esito{margin-top:1.1rem; padding:.9rem 1.1rem; border-radius:7px; background:var(--azzurro); color:var(--blu-scuro); font-size:.94rem}
.esito[hidden]{display:none}
.esito-ko{background:#FDECEA; color:#9B2C1F}
@media (max-width:560px){ .campi{grid-template-columns:1fr} }
body[data-modale="true"] .wa{opacity:0; pointer-events:none}


/* ============================================================
   TESTO LUNGO (informativa privacy)
   ============================================================ */
.testo-lungo .wrap{max-width:74ch}
.testo-lungo h3{color:var(--blu); font-family:var(--sans); font-weight:600; font-size:1.15rem; margin:2rem 0 .6rem}
.testo-nota{color:var(--ink-soft); font-size:.92rem; margin:0 0 1.2rem}
.testo-nota em{font-style:italic}
.testo-lungo h3:first-child{margin-top:0}
.testo-lungo p{margin:0 0 .9rem; line-height:1.75}
.testo-lungo a{color:var(--blu); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.link-privacy{color:var(--blu); font-weight:600; text-decoration:underline; text-underline-offset:3px; margin-left:.35rem; white-space:nowrap}


/* ============================================================
   BANNER COOKIE
   ============================================================ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--blu-scuro); color:#fff;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem 1.6rem;
  padding:1rem clamp(1rem,4vw,2.5rem);
  box-shadow:0 -6px 24px rgba(0,0,0,.28);
}
.cookie-testo{margin:0; font-size:.92rem; line-height:1.5; max-width:66ch; color:#dbe6fb}
.cookie-azioni{display:flex; align-items:center; gap:.8rem}
.cookie-link{color:#fff; font-size:.88rem; text-decoration:underline; text-underline-offset:3px}
.cookie-no{background:none; border:1px solid rgba(255,255,255,.5); color:#fff; font-weight:600; font-size:.88rem; padding:.5rem 1.1rem; border-radius:999px}
.cookie-no:hover{background:rgba(255,255,255,.14)}
.cookie-si{background:#fff; border:0; color:var(--blu); font-weight:600; font-size:.88rem; padding:.55rem 1.4rem; border-radius:999px}
.cookie-si:hover{background:var(--azzurro)}
/* col banner aperto alzo il pin WhatsApp per non sovrapporlo */
body[data-cookie-banner="1"] .wa{bottom:calc(clamp(.9rem,2.5vw,1.5rem) + 92px)}
@media (max-width:640px){
  .cookie-banner{flex-direction:column; align-items:stretch; text-align:center}
  .cookie-azioni{justify-content:center}
  body[data-cookie-banner="1"] .wa{bottom:calc(clamp(.9rem,2.5vw,1.5rem) + 156px)}
}