/* ’A famiglia — V3 «PREMIUM» (07/10/2026). Progetto: Design/DESIGN-V3-PREMIUM.md (struttura: DESIGN-V2.md).
   Stessa pagina della v2, cambiano la HERO (fondo chiaro col bagliore del tramonto, il golfo nella card, l'arco della casa
   sopra) e i COLORI: tre proposte (A «Golfo al tramonto», B «Blu e oro», C «Pompeiano»), solo token su :root, scritti da
   strumenti/costruisci.py --proposta A|B|C. Un solo colore vivo per tema; mai beige, mai giallo, mai antracite.
   Logo e targa del cliente non si ricolorano. Font del kit, serviti dal sito. Questo file è la base comune: il :root
   coi colori lo mette costruisci.py al posto del segnaposto qui sotto.
   08/10/2026: Domenico sceglie la A (in produzione) e chiede le foto della casa «più grandi e più intere, il taglio ci
   sta, ma non esagerato»: ogni foto sta in un riquadro con la sua proporzione (archi a 0,65 per le verticali 3:4 e 9:16,
   la 16:9 orizzontale), principali visibili almeno all'85%, miniature almeno al 75% (strumenti/misura-tagli.js). */

@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/Space-Grotesk-Medium.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/DM-Sans-Variable.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Great Vibes";src:url("/assets/fonts/Great-Vibes-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Proposta A · «Golfo al tramonto» — colori di Design/DESIGN-V3-PREMIUM.md, scritti da strumenti/costruisci.py */
:root{
  --bianco:#FFFFFF;
  --schiuma:#EEF4F9;
  --notte:#0B2540;
  --testo-2:#4F6275;
  --mare:#1E6BB0;
  --cielo:#7FB8E6;
  --tramonto:#EE6436;
  --tramonto-scuro:#B9461F;

  --fascia:var(--schiuma);
  --vivo:var(--tramonto);
  --su-vivo:var(--notte);
  --napoli:var(--tramonto);
  --stella:var(--tramonto);
  --stella-notte:var(--tramonto);
  --vivo-notte:var(--tramonto);
  --etichetta:var(--tramonto-scuro);
  --etichetta-notte:var(--tramonto);
  --dettaglio:var(--mare);
  --dettaglio-notte:var(--cielo);
  --onda-1:var(--cielo);
  --onda-2:var(--mare);
  --bande:inline;
  --filo-hero:none;
  --cta:var(--tramonto);
  --su-cta:var(--notte);
  --cta-2:var(--notte);
  --su-cta-2:var(--bianco);
  --cta-2-bordo:transparent;

  --rgb-bianco:255,255,255;
  --rgb-notte:11,37,64;
  --rgb-fascia:238,244,249;
  --rgb-testo-2:79,98,117;
  --rgb-vivo:238,100,54;
  --rgb-cta:238,100,54;
  --linea:rgba(var(--rgb-notte),.14);
  --linea-forte:rgba(var(--rgb-notte),.26);
  --linea-chiara:rgba(var(--rgb-bianco),.16);
  --bianco-78:rgba(var(--rgb-bianco),.78);
  --notte-78:rgba(var(--rgb-notte),.78);
  --bagliore:rgba(var(--rgb-vivo),0.15);
  --bagliore-2:rgba(var(--rgb-vivo),0.06);
}

:root{
  --f-titoli:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-testo:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-script:"Great Vibes","Snell Roundhand",cursive;

  --r:22px;
  --gutter:64px;
  --sez:140px;
  --testata:84px;
  --barra-mobile:0px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:.35s;
  --focus:var(--notte);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--testata) + 12px)}
body{margin:0;background:var(--bianco);color:var(--notte);font-family:var(--f-testo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
/* collaudo 08/10/2026 (P4): niente parola orfana in fondo ai paragrafi, titoli divisi in righe pari. Solo la lunghezza
   delle ultime righe: la proprietà lunga (text-wrap-style) non tocca chi sta su una riga sola (white-space:nowrap) */
p,li,dd,dt,figcaption,blockquote{text-wrap-style:pretty}
h1,h2,h3{text-wrap-style:balance}
/* le voci corte (elenchi, didascalie, note brevi) in righe pari: niente «le 10.» o «e Procida.» da soli in fondo */
li,li p,figcaption,.hero__nota,.voto__testo{text-wrap-style:balance}
.sezione--notte,.piede,.lightbox,.barra-mobile,.voto{--focus:var(--vivo-notte)}
::selection{background:var(--vivo);color:var(--su-vivo)}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nowrap{white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--notte);color:var(--bianco);padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600;transition:top var(--t)}
.skip:focus{top:16px}

.contenitore{width:100%;max-width:calc(1320px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- tipografia ---------- */
.titolo{font-family:var(--f-titoli);font-weight:500;font-size:clamp(46px,6.2vw,92px);line-height:.96;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
.titolo--medio{font-size:clamp(38px,4.4vw,64px)}
.attacco{font-size:clamp(19px,1.55vw,22px);line-height:1.5;max-width:40ch}
.script{font-family:var(--f-script);font-style:normal;font-weight:400;font-size:1.32em;line-height:.7;letter-spacing:0;padding-right:.06em}

/* l'etichetta della sezione, uguale ovunque: disegno · NN —— NOME */
.segno{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-family:var(--f-titoli);font-weight:500;font-size:12px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase}
.segno__disegno{flex:none;width:44px;height:40px;margin-right:4px}
.segno__n{font-variant-numeric:tabular-nums}
.segno__filo{flex:none;width:44px;height:1px;background:currentColor;opacity:.45}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:999px;font-family:var(--f-titoli);font-weight:500;font-size:15px;line-height:1.15;letter-spacing:.005em;text-decoration:none;text-align:center;white-space:nowrap;background:none;transition:transform var(--t) var(--ease),background-color var(--t),color var(--t),border-color var(--t),box-shadow var(--t)}
.btn .ico{width:19px;height:19px;transition:transform var(--t) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ico:last-child:not(:first-child){transform:translateX(3px)}
.btn--scuro{background:var(--notte);color:var(--bianco)}
.btn--scuro:hover{box-shadow:0 16px 30px -16px rgba(var(--rgb-notte),.7)}
.btn--vivo{background:var(--vivo);color:var(--su-vivo)}
.btn--vivo:hover{box-shadow:0 16px 30px -14px rgba(var(--rgb-vivo),.55)}
.btn--linea-chiara{border-color:rgba(var(--rgb-bianco),.34);color:var(--bianco)}
.btn--linea-chiara:hover{background:rgba(var(--rgb-bianco),.08);border-color:rgba(var(--rgb-bianco),.7)}
.btn--largo{width:100%}
/* il pulsante principale sui fondi chiari (menu del telefono, 404): «cta» = il colore vivo in A e C, il blu notte in B.
   Sui fondi blu (Contatti, barra fissa del telefono) e nella barra delle date della hero resta il colore vivo. */
.menu-mobile .btn--vivo,.pagina__azioni .btn--vivo{background:var(--cta);color:var(--su-cta)}
.menu-mobile .btn--vivo:hover,.pagina__azioni .btn--vivo:hover{box-shadow:0 16px 30px -14px rgba(var(--rgb-cta),.55)}
/* «Torna alla home» della 404, accanto al principale: blu notte in A e C, bianco col filo in B (dove il principale è blu notte) */
.pagina__azioni .btn--scuro{background:var(--cta-2);color:var(--su-cta-2);border-color:var(--cta-2-bordo)}

/* ---------- testata: chiara sopra la hero chiara; bianca, velata, con l'ombra allo scroll ---------- */
.testata{position:fixed;inset:0 0 auto;z-index:50;color:var(--notte);transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.testata.scorsa,.testata--pagina{background:rgba(var(--rgb-bianco),.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--linea),0 12px 30px -24px rgba(var(--rgb-notte),.45)}
.testata.aperto{background:var(--bianco);box-shadow:0 1px 0 var(--linea)}
.testata__barra{display:flex;align-items:center;gap:clamp(16px,2vw,28px);height:var(--testata);max-width:calc(1320px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.marchio{display:flex;align-items:center;gap:16px;flex:none;text-decoration:none}
/* il logo del cliente (giallo, mai ricolorato) sta sul suo riquadro blu notte */
.marchio__targa{display:grid;place-items:center;padding:8px 14px 7px;background:var(--notte);border-radius:10px;box-shadow:0 10px 22px -14px rgba(var(--rgb-notte),.7)}
.marchio__logo{width:100px;height:auto}
.marchio__sotto{max-width:180px;font-family:var(--f-titoli);font-weight:500;font-size:10.5px;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2)}
.menu{margin-left:auto}
.menu ul{display:flex;gap:clamp(16px,1.7vw,28px)}
.menu a{position:relative;display:block;padding:8px 0;font-family:var(--f-titoli);font-weight:500;font-size:14px;letter-spacing:.005em;text-decoration:none;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.menu a:hover::after,.menu a.attivo::after{transform:scaleX(1)}
.menu a.attivo::after{height:2px;background:var(--vivo)}
.lingue{display:flex;flex:none;font-family:var(--f-titoli);font-weight:500;font-size:12px;letter-spacing:.08em}
.lingue a{display:block;padding:8px 5px;text-decoration:none;color:var(--testo-2);transition:color var(--t)}
.lingue a:hover{color:var(--notte)}
.lingue a[aria-current]{color:var(--notte);text-decoration:underline;text-decoration-color:var(--vivo);text-decoration-thickness:2px;text-underline-offset:5px}
.btn--testata{flex:none;min-height:44px;padding:0 20px;font-size:14px;background:var(--cta);color:var(--su-cta);box-shadow:0 12px 26px -16px rgba(var(--rgb-cta),.9)}
.testata__apri{display:none;place-items:center;width:48px;height:48px;margin-right:-10px;border:0;border-radius:50%;background:none}
.hamburger{position:relative;display:block;width:24px;height:12px}
.hamburger span{position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:2px;transition:transform var(--t) var(--ease),top var(--t) var(--ease)}
.hamburger span:first-child{top:0}
.hamburger span:last-child{top:10.4px}
.testata__apri[aria-expanded="true"] .hamburger span:first-child{top:5.2px;transform:rotate(45deg)}
.testata__apri[aria-expanded="true"] .hamburger span:last-child{top:5.2px;transform:rotate(-45deg)}
/* il menu del telefono: chiaro come la testata */
.menu-mobile{position:fixed;inset:var(--testata) 0 0;display:flex;flex-direction:column;gap:28px;padding:20px var(--gutter) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;background:var(--bianco);color:var(--notte)}
.menu-mobile[hidden]{display:none}
.menu-mobile ul a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--linea);font-family:var(--f-titoli);font-weight:500;font-size:clamp(26px,7vw,40px);line-height:1.1;letter-spacing:-.02em;text-decoration:none}
.menu-mobile__n{font-size:12px;letter-spacing:.14em;color:var(--etichetta)}
.menu-mobile__azioni{display:grid;gap:10px}
.menu-mobile .btn--linea-chiara{border-color:var(--linea-forte);color:var(--notte)}
.menu-mobile .btn--linea-chiara:hover{background:var(--fascia);border-color:var(--notte)}
.menu-mobile__lingue{display:flex;gap:4px;font-family:var(--f-titoli);font-size:14px;letter-spacing:.08em}
.menu-mobile__lingue a{padding:10px 10px;border:1px solid var(--linea-forte);border-radius:999px;text-decoration:none}
.menu-mobile__lingue a[aria-current]{border-color:var(--vivo);color:var(--etichetta)}

/* ---------- l'ARCO (cornice-arco del kit): tutto sesto in alto, 22 px in basso ---------- */
.arco{--ar:.8;position:relative;display:block;width:100%;aspect-ratio:var(--ar);padding:0;border:0;overflow:hidden;background:rgba(var(--rgb-notte),.07);border-radius:50% 50% var(--r) var(--r) / calc(var(--ar) * 50%) calc(var(--ar) * 50%) var(--r) var(--r);isolation:isolate}
.arco img{width:100%;height:100%;object-fit:cover}
button.arco{cursor:zoom-in}
.accoglienza__foto .arco,.prezzi__foto .arco{outline:1px solid var(--linea-forte);outline-offset:10px}
.accoglienza__foto figcaption,.prezzi__foto figcaption{margin-top:24px!important}
.arco::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(var(--rgb-notte),.1);pointer-events:none}
button.arco img{transition:transform 1s var(--ease)}
button.arco:hover img{transform:scale(1.035)}

/* ---------- HERO (v3 premium) · fa sognare: fondo chiaro col bagliore del tramonto, il golfo nella card,
   l'ARCO con le foto della casa sopra la card, il voto Airbnb nel badge bianco. Da computer sta in una schermata. ---------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:calc(var(--testata) + clamp(10px,2.4vh,30px)) 0 clamp(64px,9vh,96px);background:var(--bianco);color:var(--notte);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;right:-18%;top:-36%;width:84%;height:130%;background:radial-gradient(closest-side,var(--bagliore),var(--bagliore-2) 52%,transparent);pointer-events:none}
.hero::after{content:"";position:absolute;z-index:-1;left:-24%;bottom:-52%;width:78%;height:104%;background:radial-gradient(closest-side,var(--fascia),transparent);pointer-events:none}
.hero__corpo{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,3.6vh,46px)}
.hero__griglia{--scena-w:clamp(400px,calc((100svh - 300px) * 1.06),620px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--scena-w));gap:clamp(36px,4.5vw,84px);align-items:center}
.hero__fiducia{display:inline-flex;align-items:center;max-width:100%;padding:8px 16px;border:1px solid var(--linea);border-radius:22px;background:var(--bianco);box-shadow:0 12px 26px -20px rgba(var(--rgb-notte),.5);font-family:var(--f-titoli);font-weight:500;font-size:13px;line-height:1.35;letter-spacing:.01em}
.fiducia__vista{display:block;min-width:0;clip-path:inset(-.6em 0)}
.fiducia__riga{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;margin-left:-23px}
.fiducia__stella{padding-left:23px;margin-right:10px;color:var(--stella);font-size:14px}
.fiducia__pezzo{white-space:nowrap}
.fiducia__pezzo--dopo{position:relative;padding-left:23px}
.fiducia__pezzo--dopo::before{content:"";position:absolute;left:10px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:currentColor;opacity:.5}
.hero__titolo{margin-top:clamp(14px,2.2vh,24px);font-family:var(--f-titoli);font-weight:500;font-size:clamp(34px,min(4.2vw,6.2vh),62px);line-height:1;letter-spacing:-.035em}
.hero__riga{display:block;text-wrap:balance}
.hero__citta{display:block;margin-top:.14em}
.hero__napoli{display:inline-block;padding:0 .12em 0 .04em;font-family:var(--f-script);font-weight:400;font-size:1.95em;line-height:1.02;letter-spacing:0;color:var(--napoli)}
.hero__dopo{display:inline-block;margin-left:-.12em;white-space:nowrap}
.hero__sotto{display:grid;gap:2px;margin-top:clamp(12px,2vh,22px);max-width:60ch;font-size:clamp(16px,2.1vh,17.5px);line-height:1.55;color:var(--testo-2)}
.hero__basso{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:16px 32px;margin-top:clamp(16px,2.8vh,30px)}
.hero__azioni{display:flex}
.btn--linea{border-color:var(--linea-forte);background:rgba(var(--rgb-bianco),.75);color:var(--notte)}
.btn--linea:hover{border-color:var(--notte);background:var(--bianco);box-shadow:0 16px 30px -18px rgba(var(--rgb-notte),.5)}
.hero__miniature{display:flex;gap:12px}
.hero__mini{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:58px;padding:0;border:0;background:none;color:var(--notte);font-family:var(--f-titoli);font-weight:500;font-size:10.5px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;text-align:center;opacity:.74;transition:opacity var(--t)}
.hero__mini img{width:50px;height:74px;object-fit:cover;border-radius:25px 25px 8px 8px;box-shadow:0 0 0 1px var(--linea),0 10px 18px -12px rgba(var(--rgb-notte),.55);transition:box-shadow var(--t),transform var(--t) var(--ease)}
.hero__mini:hover{opacity:1}
.hero__mini:hover img{transform:translateY(-3px)}
.hero__mini.attiva{opacity:1}
.hero__mini.attiva img{box-shadow:0 0 0 2px var(--bianco),0 0 0 3.5px var(--vivo),0 12px 20px -12px rgba(var(--rgb-notte),.6)}
.hero__mini span{display:block;white-space:nowrap}

/* la scena: la card del golfo a destra, l'arco della casa che la scavalca in basso a sinistra (misure in %, valgono ovunque).
   08/10: l'arco è più grande (43% della scena, proporzione 0,65: la casa si vede all'87%) e scende più in basso, così copre
   solo il bordo sinistro del golfo, che resta il sogno.
   08/10, secondo giro: la card del golfo torna grande come prima (74% della scena: 486×409 a 1440) e l'arco, grande uguale,
   esce un filo a sinistra della scena e sta più in basso: copre il golfo come prima (~10%), non il 16% */
.hero__scena{position:relative;padding:0 0 34% 26%}
.hero__golfo{position:relative;margin:0}
.hero__card{position:relative;aspect-ratio:1.2;overflow:hidden;border-radius:30px;background:var(--fascia);rotate:1.6deg;box-shadow:0 50px 90px -50px rgba(var(--rgb-notte),.6),0 34px 80px -44px rgba(var(--rgb-vivo),.55);isolation:isolate}
.hero__card img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(var(--rgb-notte),.08);pointer-events:none}
.hero__golfo figcaption{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;margin-top:20px;padding-left:22%;font-size:13px;line-height:1.4;color:var(--testo-2);text-align:right}
.hero__golfo figcaption .ico{width:15px;height:15px;margin-top:2px;color:var(--dettaglio)}
.hero__badge{position:absolute;z-index:3;top:-3%;right:-2.4%;display:grid;justify-items:center;gap:5px;padding:14px 20px 12px;border-radius:20px;background:var(--bianco);box-shadow:0 26px 44px -22px rgba(var(--rgb-notte),.55),0 0 0 1px rgba(var(--rgb-notte),.05);rotate:3deg;text-align:center}
.hero__badge-voto{display:flex;align-items:center;gap:6px;font-family:var(--f-titoli);font-weight:500;font-size:30px;line-height:1;letter-spacing:-.02em}
.hero__badge-stella{color:var(--stella);font-size:.7em}
.hero__badge-et{font-family:var(--f-titoli);font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-2)}
.hero__arco{position:absolute;z-index:2;left:-5%;bottom:0;width:43%}
.arco--hero{border:7px solid var(--bianco);background:var(--fascia);rotate:-2.6deg;box-shadow:0 36px 60px -26px rgba(var(--rgb-notte),.62);transition:translate .6s var(--ease),box-shadow .6s var(--ease)}
.hero__arco:hover .arco--hero{translate:0 -5px;box-shadow:0 44px 70px -28px rgba(var(--rgb-notte),.66)}
.hero__disegno{position:absolute;z-index:2;pointer-events:none}
.hero__disegno--sole{top:-30px;left:calc(26% - 30px);width:54px;height:auto}
.hero__disegno--cornicello{bottom:56px;left:calc(-5% - 34px);width:30px;height:auto}
.arco__slide{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;opacity:0;cursor:zoom-in;transition:opacity 1.3s ease}
.arco__slide.attiva{z-index:1;opacity:1}
.arco__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 6.5s cubic-bezier(.25,.6,.3,1)}
.arco__slide.attiva img{transform:scale(1)}
.hero__didascalia{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:20px;padding-right:2px;font-family:var(--f-titoli);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--notte)}
.hero__stanza{white-space:nowrap}
.hero__barre{display:flex;gap:5px}
.hero__barra{width:22px;height:2px;overflow:hidden;border-radius:2px;background:rgba(var(--rgb-notte),.16)}
.hero__barra span{display:block;width:100%;height:100%;background:var(--vivo);transform:scaleX(0);transform-origin:left}
.hero__barra.fatta span{transform:scaleX(1)}
.hero__barra.corre span{animation:corre 5s linear forwards}
.hero.in-pausa .hero__barra.corre span{animation-play-state:paused}
@keyframes corre{to{transform:scaleX(1)}}

/* la barra delle date: scheda bianca con l'ombra, il pulsante nel colore vivo */
.hero__fondo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:16px 40px;align-items:center}
.cerca{display:flex;align-items:stretch;padding:8px;background:var(--bianco);color:var(--notte);border-radius:var(--r);box-shadow:0 34px 64px -34px rgba(var(--rgb-notte),.5),0 0 0 1px rgba(var(--rgb-notte),.07);--focus:var(--notte)}
.cerca__campo{position:relative;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;min-width:0;padding:9px 22px;border-radius:14px;transition:background-color var(--t)}
.cerca__campo+.cerca__campo::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--linea)}
.cerca__campo>.ico{grid-row:1/3;width:22px;height:22px;color:var(--dettaglio)}
.cerca__campo:hover,.cerca__campo:focus-within{background:var(--fascia)}
.cerca__campo:focus-within{box-shadow:inset 0 0 0 1.5px var(--notte)}
.cerca__etichetta{font-family:var(--f-titoli);font-weight:500;font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2)}
.cerca__valore{font-size:16px;font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cerca__input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.cerca__input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cerca__campo--ospiti{flex:.7}
.cerca__select{grid-column:2;width:100%;min-width:0;padding:0 24px 0 0;border:0;background:transparent;font-size:16px;font-weight:500;line-height:1.5;-webkit-appearance:none;appearance:none;cursor:pointer}
.cerca__select:focus-visible{outline:0}
.cerca__giu{position:absolute;right:16px;top:50%;width:16px!important;height:16px!important;transform:translateY(-50%);pointer-events:none}
.cerca__invia{flex:none;min-width:210px;min-height:60px;border-radius:16px;font-size:15.5px}
.hero__nota{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--testo-2)}
.hero__nota .ico{width:20px;height:20px;margin-top:1px;color:var(--dettaglio)}

/* entrata della hero (solo all'apertura; a fine animazione la pagina è quella di sempre, niente si sposta) */
@media (prefers-reduced-motion:no-preference){
  .hero__fiducia,.hero__riga,.hero__sotto,.hero__basso{animation:sale .9s var(--ease) backwards}
  .hero__riga{animation-delay:.08s}
  .hero__sotto{animation-delay:.5s}
  .hero__basso{animation-delay:.62s}
  .hero__napoli{animation:scrivi 1.7s cubic-bezier(.55,.1,.3,1) .45s backwards}
  .hero__golfo{animation:apre 1.3s cubic-bezier(.3,.7,.2,1) .12s backwards}
  .hero__card img{animation:respira 9s cubic-bezier(.25,.6,.3,1) .12s backwards}
  .hero__arco{animation:posa 1.15s cubic-bezier(.3,.7,.2,1) .55s backwards}
  .hero__badge{animation:sale .9s var(--ease) 1s backwards}
  .hero__disegno{animation:sale 1s var(--ease) 1.15s backwards}
  .hero__fondo{animation:sale 1s var(--ease) .75s backwards}
}
@keyframes sale{from{opacity:0;transform:translateY(22px)}}
@keyframes scrivi{from{clip-path:inset(-30% 100% -40% -12%)}to{clip-path:inset(-30% -12% -40% -12%)}}
@keyframes apre{from{opacity:0;transform:translateY(30px) scale(.97)}}
@keyframes respira{from{transform:scale(1.08)}}
@keyframes posa{from{opacity:0;transform:translate(-16px,36px) rotate(-5deg)}}

/* ---------- il mare del kit: le onde (06-SFONDI-E-DECORAZIONI) nei blu della proposta, in cima alle fasce profonde.
   A: due fasce (cielo e mare) sopra il blu notte. B e C, che non hanno un azzurro: una sola onda blu notte piena col filo
   d'oro sulla cresta (--bande:none), perché il blu notte trasparente sullo schermo diventa grigio. ---------- */
.onde{display:block;width:100%;height:clamp(56px,7.5vw,116px);overflow:hidden;background:var(--fascia)}
.pagina .onde{background:var(--bianco)}
.onde svg{display:block;width:100%;height:100%;overflow:visible}
.onde__1{fill:var(--onda-1,transparent)}
.onde__2{fill:var(--onda-2,transparent)}
.onde__1,.onde__2{display:var(--bande,inline)}
.onde__3{fill:var(--notte)}
.onde__filo{fill:none;stroke:var(--onda-filo,transparent);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.onde path{transform-box:fill-box;transform-origin:50% 100%}
.sezione--notte.dove,.piede.piede--onde{padding-top:0}
.onde+.contenitore{padding-top:calc(var(--sez) - 28px)}
/* in fondo alla hero il mare è appena accennato: due nastri chiari e il bianco della sezione dopo (A); in B e C il solo filo d'oro */
.onde--hero{position:absolute;z-index:-1;left:0;right:0;bottom:-1px;height:clamp(40px,5vw,72px);background:none}
.onde--hero .onde__1{opacity:.3}
.onde--hero .onde__2{opacity:.16}
.onde--hero .onde__filo{display:var(--filo-hero,none)}
/* in B e C le due fasce della hero restano, trasparenti (--onda-1/2 non ci sono): il loro movimento tiene la hero composta
   come prima, e Chrome disegna intera l'ombra della card del golfo (senza, la taglia di netto sotto la didascalia) */
.onde--hero .onde__1,.onde--hero .onde__2{display:inline}
.onde--hero .onde__3{fill:var(--bianco)}
@media (prefers-reduced-motion:no-preference){
  .onde__1{animation:ondeggia 16s ease-in-out infinite alternate}
  .onde__2{animation:ondeggia 12s ease-in-out -4s infinite alternate-reverse}
}
@keyframes ondeggia{from{transform:translateX(-1.6%) scaleX(1.05)}to{transform:translateX(1.6%) scaleX(1.05)}}

/* ---------- sezioni ---------- */
.sezione{padding-block:var(--sez)}
.sezione--chiara{background:var(--bianco)}
.sezione--fascia{background:var(--fascia)}
.sezione--notte{background:var(--notte);color:var(--bianco)}
.testa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(56px,6vw,88px)}
.testa__dx{display:grid;gap:14px;padding-bottom:6px}
.testa--colonna{display:block;margin-bottom:0}

/* reveal allo scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* il blocco raggiunto da un'ancora (#a-piedi, #regole…) entra già fermo: se salisse dopo il salto, il browser avrebbe
   calcolato la posizione col blocco 30 px più in basso e il titolo finirebbe sotto la testata */
.reveal:target{opacity:1;transform:none;transition:none}

/* ---------- 01 · L'appartamento ----------
   08/10: ogni foto nella sua proporzione. Secondo giro: il salotto (16:9; il file più grande è 1200×675) non sta più a
   tutta larghezza (1312 px: ingrandito, morbido sugli schermi retina) ma INTERO, senza tagli, su 9 colonne di 12
   (980×551 a 1440); accanto la cucina 9:16, alta uguale (si vede al 98%); sotto camera, bagno e ingresso, più grandi di
   prima (427×657 a 1440, 0,65: 87%). Sotto i 900 px il salotto da bordo a bordo e le verticali due per riga */
.mosaico{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.mosaico__foto{position:relative;display:block;grid-column:span 4;aspect-ratio:.65;padding:0;border:0;overflow:hidden;border-radius:var(--r);background:var(--fascia);cursor:zoom-in}
.mosaico__foto--1{grid-column:1/10;aspect-ratio:16/9}
.mosaico__foto--2{grid-column:10/13;aspect-ratio:auto}
.mosaico__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.mosaico__foto:hover img{transform:scale(1.04)}
.pastiglia{position:absolute;left:14px;bottom:14px;padding:7px 13px;border-radius:999px;background:var(--bianco);color:var(--notte);font-family:var(--f-titoli);font-weight:500;font-size:12px;line-height:1.2;letter-spacing:.06em;pointer-events:none}
/* «In tutta la casa»: una griglia di 8 caselle, la prima col titolo e «Guarda le 27 foto» */
.dotazioni-blocco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(72px,8vw,112px);border-top:1px solid var(--linea)}
.dotazioni{display:contents}
.dotazioni__testa{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:24px;padding:30px 28px 30px 0;border-bottom:1px solid var(--linea)}
.dotazioni__titolo{font-family:var(--f-titoli);font-weight:500;font-size:clamp(28px,2.5vw,36px);line-height:1.05;letter-spacing:-.025em}
.dotazioni__testa .btn{padding:0 20px;font-size:14.5px}
.dotazioni li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:30px 28px;border-bottom:1px solid var(--linea);border-left:1px solid var(--linea);font-size:16.5px;line-height:1.45}
.dotazioni li:nth-child(4){border-left:0;padding-left:0}
.dotazioni__ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--fascia)}
.dotazioni__ico .ico{width:21px;height:21px}

/* ---------- 02 · Le stanze ----------
   08/10: l'arco più grande, nella proporzione della sua foto (--ar da costruisci.py: 3:4 → 0,7, 9:16 → 0,62, si vede
   più del 90%) e le tre miniature, ognuna nella proporzione della sua foto
   (--r, da costruisci.py), in fila alla stessa altezza nella colonna del testo, sotto il numero: lo spazio vuoto fra il
   numero e il nome ora mostra la stanza. Il nome resta in basso, allineato alla base dell'arco. */
.stanze__elenco{display:grid;gap:112px}
.stanza{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"arco n" "arco mini" "arco ." "arco giu";column-gap:clamp(56px,7vw,112px);align-items:start}
.stanza--inversa{grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"n arco" "mini arco" ". arco" "giu arco"}
.stanza__media,.stanza__testo{display:contents}
.stanza__arco{grid-area:arco}
.stanza__miniature{grid-area:mini;display:flex;align-items:flex-start;gap:16px;margin-top:28px}
.stanza__mini{position:relative;display:block;flex:var(--r,1) 1 0;min-width:0;aspect-ratio:var(--r,1);padding:0;border:0;overflow:hidden;border-radius:16px;background:rgba(var(--rgb-notte),.08);cursor:zoom-in}
.stanza__mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.stanza__mini:hover img{transform:scale(1.06)}
.stanza__n{grid-area:n}
.stanza__giu{grid-area:giu;padding-top:32px;min-width:0}
.stanza__n{display:flex;align-items:center;gap:10px;font-family:var(--f-titoli);font-weight:500;font-size:13px;letter-spacing:.16em;color:var(--notte)}
.stanza__di{color:rgba(var(--rgb-notte),.74)}
.stanza__filo{flex:1;height:1px;margin-left:6px;background:var(--linea-forte)}
.stanza__nome{margin:0 0 18px;font-family:var(--f-titoli);font-weight:500;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.035em;overflow-wrap:break-word}
.stanza__riga{max-width:46ch;font-size:19px;line-height:1.55}
.stanza__piu{display:inline-flex;align-items:center;gap:10px;margin-top:26px;min-height:46px;padding:0 20px 0 16px;border:1px solid var(--linea-forte);border-radius:999px;background:none;font-family:var(--f-titoli);font-weight:500;font-size:15px;transition:background-color var(--t),color var(--t),border-color var(--t)}
.stanza__piu .ico{width:18px;height:18px}
.stanza__piu:hover{background:var(--notte);color:var(--bianco);border-color:var(--notte)}

/* ---------- 03 · Dove si trova ---------- */
.testa--dove{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.dove__indirizzo{justify-items:stretch;gap:20px}
/* la targa di marmo: lastra chiara con venature sottili, cornice scura, lettere e numero incisi */
.targa-marmo{position:relative;display:block;max-width:620px;padding:clamp(28px,2.8vw,40px) clamp(48px,5vw,76px) clamp(22px,2.2vw,30px);border-radius:3px;color:rgba(var(--rgb-notte),.8);font-family:var(--f-titoli);font-weight:500;line-height:1.22;letter-spacing:.18em;text-transform:uppercase;text-align:center;text-decoration:none;
  background:
    radial-gradient(150% 60% at 8% -14%,transparent 57%,rgba(var(--rgb-testo-2),.2) 57.25%,transparent 58.2%),
    radial-gradient(120% 80% at 108% 128%,transparent 61%,rgba(var(--rgb-testo-2),.17) 61.2%,transparent 62.1%),
    radial-gradient(80% 46% at 46% 140%,transparent 66%,rgba(var(--rgb-testo-2),.12) 66.2%,transparent 67%),
    radial-gradient(60% 90% at -6% 70%,transparent 70%,rgba(var(--rgb-testo-2),.1) 70.3%,transparent 71%),
    linear-gradient(104deg,transparent 46%,rgba(var(--rgb-testo-2),.06) 48%,transparent 52%),
    radial-gradient(130% 120% at 18% 0%,var(--bianco) 0%,rgba(var(--rgb-fascia),.55) 62%,rgba(var(--rgb-fascia),.95) 100%),
    var(--bianco);
  box-shadow:inset 0 1px 0 rgba(var(--rgb-bianco),.9),inset 0 -3px 8px rgba(var(--rgb-notte),.14),0 0 0 1px rgba(var(--rgb-notte),.25),0 26px 44px -22px rgba(var(--rgb-notte),.75);
  text-shadow:0 1px 0 rgba(var(--rgb-bianco),.95),0 -1px 0 rgba(var(--rgb-notte),.45);
  transition:transform .5s var(--ease)}
.targa-marmo::before{content:"";position:absolute;inset:10px;border:1px solid rgba(var(--rgb-notte),.6);border-radius:2px;box-shadow:inset 0 1px 0 rgba(var(--rgb-bianco),.7),0 1px 0 rgba(var(--rgb-bianco),.7);pointer-events:none}
.targa-marmo:hover{transform:translateY(-3px)}
.targa-marmo__foro{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--bianco) 0 18%,var(--testo-2) 62%,var(--notte));box-shadow:0 1px 0 rgba(var(--rgb-bianco),.9)}
.targa-marmo__foro--sx{left:24px}
.targa-marmo__foro--dx{right:24px}
.targa-marmo__riga1{display:block;font-size:clamp(12px,1.05vw,15px);letter-spacing:.32em}
.targa-marmo__riga2{display:block;margin-top:8px;font-size:clamp(17px,1.75vw,25px);text-wrap:balance}
.targa-marmo__civico{display:block;margin-top:6px;font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:0}
.dove__zona{display:flex;align-items:flex-start;gap:10px;max-width:42ch;font-size:17px;line-height:1.5;color:var(--bianco-78)}
.dove__zona .ico{width:19px;height:19px;margin-top:2px;color:var(--dettaglio-notte)}
.dove__zona a{color:var(--bianco)}

.panorama{position:relative}
.panorama img{width:100%;height:clamp(240px,36vw,540px);object-fit:cover;object-position:center 58%}
.panorama figcaption{display:flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--f-titoli);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bianco-78)}
.panorama figcaption .ico{width:15px;height:15px;color:var(--dettaglio-notte)}

.luoghi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(72px,8vw,112px)}
.luogo{display:block;color:var(--bianco);text-decoration:none}
.luogo__foto{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:rgba(var(--rgb-bianco),.06)}
.luogo__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.luogo:hover .luogo__foto img{transform:scale(1.04)}
.luogo__piede{display:flex;align-items:center;gap:14px;padding:18px 2px 0;font-family:var(--f-titoli);font-weight:500;font-size:clamp(18px,1.5vw,21px);line-height:1.25;letter-spacing:-.01em}
.luogo__disegno{flex:none;width:34px;height:auto}
.luogo__nome{flex:1;min-width:0}
.luogo__freccia{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid rgba(var(--rgb-bianco),.26);border-radius:50%;transition:background-color var(--t),color var(--t),border-color var(--t)}
.luogo__freccia .ico{width:17px;height:17px}
.luogo:hover .luogo__freccia{background:var(--vivo-notte);border-color:var(--vivo-notte);color:var(--notte)}

/* tempi a piedi e porto: lo stesso orario, con le teste e le basi allineate */
.dove__orari{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;column-gap:clamp(48px,6vw,96px);margin-top:clamp(88px,9vw,136px)}
.orario{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.orario__testa{align-self:end;padding-bottom:24px}
.orario__titolo{font-family:var(--f-titoli);font-weight:500;font-size:clamp(24px,2.2vw,32px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.porto__intro{margin-top:8px;color:var(--bianco-78)}
.righe{display:flex;flex-direction:column;border-top:1px solid var(--linea-chiara)}
.righe li{flex:1 1 auto;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 0;border-bottom:1px solid var(--linea-chiara);font-size:16.5px;line-height:1.4}
.riga__ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:rgba(var(--rgb-bianco),.08);color:var(--bianco)}
.riga__ico .ico{width:17px;height:17px}
.riga__disegno{width:26px;height:auto}
.riga__luogo{min-width:0}
.riga__puntini{flex:1 1 24px;min-width:24px;height:3px;align-self:center;transform:translateY(6px);background-image:radial-gradient(circle,rgba(var(--rgb-bianco),.42) 1px,transparent 1.4px);background-size:7px 3px;background-repeat:repeat-x}
.riga__tempo{flex:none;font-family:var(--f-titoli);font-weight:500;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 04 · Accoglienza ---------- */
.accoglienza__griglia{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"testa foto" "lista foto";grid-template-rows:auto 1fr;column-gap:clamp(48px,7vw,120px);align-items:start}
.accoglienza__testa{grid-area:testa}
/* 08/10: titolo e le tre cose in una colonna, l'arco nell'altra. Secondo giro: le tre cose restano attaccate al titolo
   (48 px, come prima) e il blocco sta al centro dell'arco (senza la didascalia), non più titolo in alto e lista in fondo
   con una fascia vuota di 178 px in mezzo */
.accoglienza__sx{grid-column:1;grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:48px;padding-bottom:40px;min-width:0}
.accoglienza__sx .tre{align-self:stretch;margin-top:0}
.accoglienza__foto{grid-area:foto;align-self:end;justify-self:end;width:min(calc(100% - 11px),440px);margin-right:11px}
.accoglienza__foto figcaption{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-titoli);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-2)}
.accoglienza__foto figcaption .ico{width:15px;height:15px}
.tre{grid-area:lista;align-self:end;margin-top:48px;border-top:1px solid var(--linea)}
.tre li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--linea)}
.tre__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--fascia)}
.tre__ico .ico{width:24px;height:24px}
.tre p{max-width:52ch;font-size:18px;line-height:1.55}

/* ---------- 05 · Recensioni ---------- */
.recensioni__griglia{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:stretch}
.voto{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:clamp(32px,3.6vw,52px);border-radius:var(--r);background:var(--notte);color:var(--bianco)}
.voto__testa .segno{margin-bottom:22px}
.voto__numero{font-family:var(--f-titoli);font-weight:500;font-size:clamp(96px,11.5vw,172px);line-height:.82;letter-spacing:-.055em}
.voto__stelle{margin-top:28px;color:var(--stella-notte);font-size:26px;line-height:1;letter-spacing:.14em}
.voto__testo{margin-top:26px;padding-top:24px;border-top:1px solid var(--linea-chiara);max-width:40ch;font-size:16.5px;line-height:1.6;color:var(--bianco-78)}
.citazioni{display:grid;gap:14px}
.citazione{display:grid;align-content:center;gap:12px;padding:clamp(24px,2.6vw,34px) clamp(24px,3vw,40px);border-radius:var(--r);background:var(--bianco)}
.stelline{color:var(--stella);font-size:14px;line-height:1;letter-spacing:.16em}
.citazione blockquote{margin:0;font-family:var(--f-titoli);font-weight:500;font-size:clamp(20px,1.75vw,25px);line-height:1.28;letter-spacing:-.015em;text-wrap:pretty}
.citazione figcaption{font-size:14px;color:var(--testo-2)}

/* ---------- 06 · Come prenotare ---------- */
.passi{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.passi::before{content:"";position:absolute;left:28px;right:calc((100% - 112px) / 5 - 28px);top:28px;height:1px;background:var(--linea-forte);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.passi.reveal:not(.in)::before{transform:scaleX(0)}
.passo{position:relative}
.passo__n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--notte);color:var(--bianco);font-family:var(--f-titoli);font-weight:500;font-size:16px;letter-spacing:.02em;box-shadow:0 0 0 10px var(--bianco)}
.passo p{max-width:26ch;margin-top:28px;font-size:16.5px;line-height:1.55}
.prenotare__azioni{display:flex;align-items:center;gap:28px;margin-top:64px}
.prenotare__azioni::before{content:"";flex:1;height:1px;background:var(--linea)}

/* ---------- 07 · Disponibilità e prezzi + calendario ---------- */
.prezzi__griglia{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px clamp(48px,7vw,120px);align-items:start}
.prezzi__testo{display:grid;gap:12px;margin-top:28px;max-width:44ch;font-size:18px;line-height:1.6}
.prezzi__foto{max-width:330px;margin-top:64px;margin-left:11px}
.prezzi__foto figcaption{display:flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--f-titoli);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--notte-78)}
.prezzi__foto figcaption .ico{width:15px;height:15px}
.scheda{padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--bianco);box-shadow:0 44px 80px -52px rgba(var(--rgb-notte),.55)}
.scheda__testa{display:flex;align-items:center;justify-content:space-between;gap:16px}
.scheda__titolo{font-family:var(--f-titoli);font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.1;letter-spacing:-.02em}
.scheda__icona{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--notte);color:var(--vivo-notte)}
.scheda__intro{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:14px;line-height:1.5;color:var(--testo-2)}
.scheda__intro .ico{width:18px;height:18px;margin-top:1px}
.scheda__campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.campo--intero{grid-column:1/-1}
.campo__etichetta{display:block;margin-bottom:8px;font-family:var(--f-titoli);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2)}
.campo__box>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campo__box{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:52px;padding:0 16px;border:1px solid var(--linea-forte);border-radius:14px;background:var(--bianco);font-size:15px;font-weight:500;text-align:left;transition:border-color var(--t),box-shadow var(--t)}
.campo__box .ico{width:18px;height:18px;color:var(--testo-2)}
.campo__box:hover{border-color:var(--notte)}
.campo__box.attivo,.campo__box:focus-within{border-color:var(--notte);box-shadow:0 0 0 1px var(--notte)}
.campo__vuoto{font-weight:400;color:var(--testo-2)}
.campo__box--select select{position:absolute;inset:0;width:100%;height:100%;padding:0 44px 0 16px;border:0;border-radius:14px;background:transparent;font-size:15px;font-weight:500;-webkit-appearance:none;appearance:none;cursor:pointer}
.campo__box--select select:focus-visible{outline:0}
.campo__box--select .ico{position:absolute;right:16px;pointer-events:none}
.cal{margin-top:20px;padding:18px 16px 14px;border:1px solid var(--linea);border-radius:20px}
.cal__testa{display:flex;align-items:center;justify-content:space-between}
.cal__mese{font-family:var(--f-titoli);font-weight:500;font-size:16px;text-transform:capitalize}
.cal__nav{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--linea-forte);border-radius:50%;background:none;transition:background-color var(--t),color var(--t)}
.cal__nav:hover:not(:disabled){background:var(--notte);color:var(--bianco)}
.cal__nav:disabled{opacity:.3;cursor:default}
.cal__nav .ico{width:17px;height:17px}
.cal__settimana,.cal__giorni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px 0}
.cal__settimana{margin:14px 0 6px;font-size:11px;letter-spacing:.06em;text-align:center;text-transform:capitalize;color:var(--testo-2)}
.giorno{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:46px;padding:0;border:0;border-radius:12px;background:transparent;font-size:14.5px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums;transition:background-color var(--t),color var(--t)}
.giorno small{margin-top:2px;font-size:10px;font-weight:400;color:var(--testo-2)}
.giorno:hover:not(:disabled){background:var(--fascia)}
.giorno:disabled{color:rgba(var(--rgb-notte),.28);cursor:default}
.giorno--occupato{color:rgba(var(--rgb-notte),.4);text-decoration:line-through;text-decoration-thickness:1px}
.giorno--occupato small{visibility:hidden}
.giorno--oggi::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--notte)}
.giorno--tra{border-radius:0;background:var(--fascia)}
.giorno--inizio,.giorno--fine{background:var(--vivo)!important;color:var(--su-vivo)}
.giorno--inizio small,.giorno--fine small{color:var(--su-vivo)}
.giorno--inizio::after,.giorno--fine::after{background:var(--su-vivo)}
.giorno--vuoto{visibility:hidden}
.cal__legenda[hidden]{display:none}
.cal__legenda{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--testo-2)}
.cal__chip{width:12px;height:12px;border:1px solid var(--linea-forte);border-radius:4px}
.cal__chip--occupato{margin-left:10px;background:repeating-linear-gradient(135deg,rgba(var(--rgb-notte),.25) 0 2px,transparent 2px 5px)}
.scheda__msg{min-height:22px;margin-top:12px;font-size:14px;line-height:1.5}
/* collaudo 08/10/2026 (P1): «Prenota su WhatsApp» prima delle date porta qui: il giorno da scegliere si cerchia (e pulsa
   tre volte), l'invito sotto il calendario si accende nel colore delle etichette. Nessun movimento che sposti la pagina. */
.giorno--invito{box-shadow:inset 0 0 0 2px var(--vivo)}
.scheda__msg--invito{color:var(--etichetta);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .giorno--invito{animation:invito 1.1s var(--ease) 3}
  .scheda__msg--invito{animation:accende .5s var(--ease)}
}
@keyframes invito{50%{box-shadow:inset 0 0 0 2px var(--vivo),0 0 0 7px rgba(var(--rgb-vivo),.22)}}
@keyframes accende{from{opacity:0;transform:translateY(5px)}}
.riepilogo{margin-top:12px;padding:14px 18px;border-radius:16px;background:var(--fascia);font-size:14.5px}
.riepilogo[hidden]{display:none}
.riepilogo__riga{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.riepilogo__riga dd{font-weight:500;text-align:right}
.riepilogo__date dd{text-align:left;font-family:var(--f-titoli)}
.riepilogo__totale{margin-top:4px;padding-top:10px;border-top:1px solid var(--linea-forte);font-weight:600}
.riepilogo__totale dd{font-weight:700}
.scheda__invia{margin-top:18px;min-height:58px}
.scheda__invia[aria-disabled="true"]{opacity:.6}
.scheda__invia[aria-disabled="true"]:hover{transform:none;box-shadow:none}

/* FAQ */
.faq-blocco{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px clamp(40px,6vw,96px);margin-top:clamp(104px,10vw,152px)}
.faq{border-top:1px solid var(--linea-forte)}
.faq__voce{border-bottom:1px solid var(--linea-forte)}
.faq__voce h3{margin:0}
.faq__voce button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:24px 0;border:0;background:none;text-align:left;font-family:var(--f-titoli);font-weight:500;font-size:clamp(18px,1.5vw,21px);line-height:1.3;letter-spacing:-.01em}
.faq__segno{position:relative;flex:none;width:38px;height:38px;border:1px solid var(--linea-forte);border-radius:50%;transition:background-color var(--t),color var(--t),border-color var(--t)}
.faq__segno::before,.faq__segno::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.faq__segno::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--t) var(--ease)}
.faq__voce button:hover .faq__segno{border-color:var(--notte)}
.faq__voce button[aria-expanded="true"] .faq__segno{background:var(--notte);border-color:var(--notte);color:var(--bianco)}
.faq__voce button[aria-expanded="true"] .faq__segno::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq__risposta p{max-width:60ch;padding:0 62px 26px 0;font-size:17px;line-height:1.6}
.faq__risposta:not([hidden]){animation:apri .45s var(--ease)}
@keyframes apri{from{opacity:0;transform:translateY(-6px)}}

/* ---------- 09 · Contatti + footer ---------- */
.piede{padding:var(--sez) 0 calc(32px + var(--barra-mobile));background:var(--notte);color:var(--bianco)}
.contatti{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px clamp(40px,6vw,96px);align-items:end;padding-bottom:clamp(72px,8vw,112px);border-bottom:1px solid var(--linea-chiara)}
.contatti__titolo{font-size:clamp(60px,10vw,148px);line-height:.9}
.contatti__testo{max-width:30ch;margin-top:28px;font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--bianco-78)}
.contatti__testo a{color:var(--bianco);text-decoration-color:var(--vivo-notte);text-decoration-thickness:2px;text-underline-offset:6px}
.contatti__riga{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea-chiara);font-size:16.5px;line-height:1.4;text-decoration:none;transition:color var(--t)}
.contatti__riga:first-child{border-top:1px solid var(--linea-chiara)}
.contatti__riga:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
.contatti__ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(var(--rgb-bianco),.08)}
.contatti__ico .ico{width:19px;height:19px}
.contatti__azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.piede__griglia{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,2fr) minmax(0,2fr);gap:40px;padding:64px 0 56px;font-size:15px;line-height:1.6;color:var(--bianco-78)}
.piede__logo{width:170px;height:auto;margin-bottom:16px}
.piede__col p+p{margin-top:6px}
.piede__col a{color:var(--bianco)}
.piede__menu{display:grid;gap:6px}
.piede__menu a{color:var(--bianco-78);text-decoration:none}
.piede__menu a:hover{color:var(--bianco);text-decoration:underline;text-underline-offset:4px}
.piede__targa{width:150px;height:auto;border-radius:8px;box-shadow:0 0 0 1px var(--linea-chiara)}
.piede__cin{margin-top:12px;font-family:var(--f-titoli);font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--bianco);overflow-wrap:anywhere}
.piede__basso{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;padding-top:26px;border-top:1px solid var(--linea-chiara);font-size:13px;color:rgba(var(--rgb-bianco),.68)}
.piede__legali a{color:inherit;text-underline-offset:3px}
.piede__legali a:hover{color:var(--bianco)}
.piede__lingue{display:flex;gap:2px;font-family:var(--f-titoli);font-weight:500;letter-spacing:.08em}
.piede__lingue a{padding:6px 7px;text-decoration:none;opacity:.75}
.piede__lingue a[aria-current]{opacity:1;color:var(--vivo-notte)}
.credit a{color:var(--bianco);text-underline-offset:3px}

/* ---------- barra del telefono, cookie, finestra delle foto ---------- */
.barra-mobile{display:none}
/* il cookie: una riga, compatto, in basso a destra; il link all'informativa e «Ok» si vedono sempre */
.cookie{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:12px;max-width:min(700px,calc(100% - 32px));padding:7px 7px 7px 18px;border:1px solid var(--linea);border-radius:999px;background:var(--bianco);color:var(--notte);font-size:13px;line-height:1.35;box-shadow:0 18px 40px -18px rgba(var(--rgb-notte),.5);transition:bottom .4s var(--ease)}
.cookie[hidden]{display:none}
.cookie p{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.cookie__testo{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cookie p a{flex:none;color:inherit;text-underline-offset:2px}
.cookie__ok{flex:none;min-width:48px;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--notte);color:var(--bianco);font-family:var(--f-titoli);font-weight:500;font-size:13px}

.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--notte);color:var(--bianco)}
.lightbox[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.lightbox::backdrop{background:rgba(var(--rgb-notte),.85)}
.lightbox__testa{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--linea-chiara)}
.lightbox__stanze{display:flex;flex:1;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.lightbox__stanze::-webkit-scrollbar{display:none}
.lightbox__stanze button{flex:none;padding:9px 15px;border:1px solid var(--linea-chiara);border-radius:999px;background:none;color:var(--bianco);font-family:var(--f-titoli);font-weight:500;font-size:13px;line-height:1.1;transition:background-color var(--t),color var(--t),border-color var(--t)}
.lightbox__stanze button:hover{border-color:rgba(var(--rgb-bianco),.6)}
.lightbox__stanze button.attiva{background:var(--vivo);border-color:var(--vivo);color:var(--su-vivo)}
.lightbox__conta{flex:none;font-family:var(--f-titoli);font-weight:500;font-size:13px;letter-spacing:.1em;font-variant-numeric:tabular-nums;opacity:.85}
.lightbox__chiudi,.lightbox__nav{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid var(--linea-chiara);border-radius:50%;background:rgba(var(--rgb-bianco),.04);color:var(--bianco);transition:background-color var(--t)}
.lightbox__chiudi:hover,.lightbox__nav:hover{background:rgba(var(--rgb-bianco),.16)}
.lightbox__figura{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;padding:24px 96px 28px}
.lightbox__img{max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);width:auto;height:auto;min-height:0;object-fit:contain;border-radius:14px;animation:entra .45s var(--ease)}
.lightbox__didascalia{font-family:var(--f-titoli);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bianco-78)}
.lightbox__nav{position:absolute;top:calc(50% + 30px);transform:translateY(-50%)}
.lightbox__nav--prima{left:24px}
.lightbox__nav--dopo{right:24px}
@keyframes entra{from{opacity:0;transform:scale(.985)}}
html.bloccato,html.bloccato body{overflow:hidden}

/* ---------- pagine: privacy, crediti, 404 ---------- */
.pagina-testo{padding:calc(var(--testata) + clamp(64px,8vw,112px)) 0 clamp(96px,10vw,140px)}
.contenitore--stretto{max-width:calc(820px + 2 * var(--gutter))}
.pagina-testo h1.titolo{margin-bottom:24px;font-size:clamp(44px,6vw,84px)}
.pagina-testo h2{margin:52px 0 14px;font-family:var(--f-titoli);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.02em}
.pagina-testo p,.pagina-testo li{max-width:68ch}
.pagina-testo p+p{margin-top:12px}
.pagina-testo ul{margin:12px 0;padding-left:22px;list-style:disc}
.pagina-testo li+li{margin-top:8px}
.pagina-testo__data{font-size:14px;color:var(--testo-2)}
.tabella-crediti{margin-top:44px;overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r)}
.tabella-crediti table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.tabella-crediti th,.tabella-crediti td{padding:14px 18px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.tabella-crediti thead th{font-family:var(--f-titoli);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2);background:var(--fascia)}
.tabella-crediti tbody tr:last-child>*{border-bottom:0}
.pagina-404{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(40px,7vw,104px);align-items:center}
.pagina-404__arco{max-width:320px}
.e404 .attacco{margin-top:8px}
.pagina__azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.pagina .contatti .segno{display:none}

/* ---------- i colori della proposta sulle etichette e sulle icone ---------- */
.segno{color:var(--etichetta)}
.script{color:var(--napoli)}
.sezione--notte .segno,.piede .segno,.voto .segno{color:var(--etichetta-notte)}
.dotazioni__ico,.tre__ico,.scheda__intro .ico,.campo__box .ico,.accoglienza__foto figcaption .ico,.prezzi__foto figcaption .ico{color:var(--dettaglio)}
.riga__ico,.contatti__ico{color:var(--dettaglio-notte)}
.mosaico__foto:focus-visible,.stanza__mini:focus-visible,button.arco:focus-visible{outline-color:var(--vivo)}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1499px){
  .marchio__sotto{display:none}
}
@media (max-width:1359px){
  :root{--gutter:48px}
}
@media (max-width:1239px){
  .menu,.lingue{display:none}
  .testata__apri{display:grid}
  .testata__cta{margin-left:auto}
  .marchio__sotto{display:block}
}
@media (max-width:1100px){
  :root{--gutter:40px;--sez:128px}
  .hero__fondo{grid-template-columns:minmax(0,1fr)}
  .hero__basso{gap:14px 20px}
  .hero__azioni .btn{padding:0 20px}
  .hero__miniature{gap:8px}
  .hero__mini{min-width:0}
  .hero__mini span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hero__griglia{--scena-w:clamp(320px,calc((100svh - 330px) * .92),440px)}
  .stanza,.stanza--inversa{column-gap:48px}
  .stanza{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .stanza--inversa{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .stanza__miniature{gap:12px}
  .dotazioni-blocco{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dotazioni li:nth-child(4){border-left:1px solid var(--linea);padding-left:28px}
  .dotazioni li:nth-child(even){border-left:0;padding-left:0}
  .piede__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* computer con lo schermo basso (portatile 13", 1280×720): tutto un po' più compatto, la barra resta nella prima schermata */
@media (min-width:900px) and (max-height:800px){
  :root{--testata:74px}
  .hero__fiducia{padding:6px 14px;font-size:12.5px}
  .hero__mini{gap:6px}
  .hero__mini img{width:42px;height:60px;border-radius:21px 21px 7px 7px}
  .hero__didascalia{margin-top:14px}
  .cerca__campo{padding:7px 20px}
  .cerca__invia{min-height:54px}
}
/* fra 1101 e 1239 px, con lo schermo basso, le miniature vanno a capo sotto WhatsApp: senza i nomi (restano per i lettori
   di schermo, come sotto i 1100 px) la barra delle date resta nella prima schermata */
@media (min-width:1101px) and (max-width:1239px) and (max-height:800px){
  .hero__mini{min-width:0}
  .hero__mini span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:899px){
  :root{--sez:112px;--barra-mobile:84px}
  .marchio__sotto{display:none}
  /* hero: titolo e «Napoli», la scena (card del golfo a tutta larghezza con l'arco della casa sopra), il testo, la barra delle date, le miniature */
  .hero{min-height:0;padding:calc(var(--testata) + 32px) 0 72px}
  .hero::before{right:-40%;top:-12%;width:130%;height:70%}
  .hero__corpo{display:flex;flex-direction:column;justify-content:flex-start;gap:0}
  .hero__griglia,.hero__testo{display:contents}
  .hero__fiducia{order:1;align-self:flex-start}
  .hero__titolo{order:2;font-size:clamp(40px,6.4vw,52px)}
  /* 08/10, secondo giro: l'arco (40%) sta più in basso, così copre il golfo come prima (~9%) */
  .hero__scena{order:3;width:100%;max-width:600px;margin:34px auto 0;padding:0 0 44% 0}
  .hero__sotto{order:4;margin-top:30px}
  .hero__fondo{order:5;margin-top:30px}
  .hero__basso{order:6}
  .hero__card{aspect-ratio:4/3;rotate:1deg;border-radius:24px}
  .hero__card img{object-position:62% 50%}
  .hero__golfo figcaption{justify-content:flex-start;margin-top:14px;padding-left:49%;font-size:12px;text-align:left}
  .hero__arco{left:4%;width:40%}
  .arco--hero{border-width:5px;rotate:-3deg}
  .hero__didascalia{gap:8px;margin-top:14px;font-size:10px;letter-spacing:.14em}
  .hero__barra{width:16px}
  .hero__badge{top:-14px;right:-6px;padding:10px 14px 9px;border-radius:16px}
  .hero__badge-voto{font-size:23px}
  .hero__badge-et{font-size:9.5px}
  .hero__disegno--sole{top:-26px;left:-6px;width:42px}
  .hero__disegno--cornicello{display:none}
  /* barra della hero su due righe: le date sopra, ospiti e pulsante sotto */
  .cerca{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:0}
  .cerca__campo{padding:12px 14px;column-gap:10px}
  .cerca__campo+.cerca__campo::before{top:12px;bottom:12px}
  .cerca__campo:nth-child(3)::before{left:12px;right:12px;top:0;bottom:auto;width:auto;height:1px}
  .cerca__invia{width:100%;min-width:0;min-height:56px;margin:6px 0}
  .testa{grid-template-columns:minmax(0,1fr);gap:24px}
  .testa__dx{padding-bottom:0}
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaico__foto,.mosaico__foto--2{grid-column:auto;aspect-ratio:.65}
  /* il salotto da bordo a bordo (tablet e telefono): si vede di più ed è più grande della card fra i margini */
  .mosaico__foto--1{grid-column:1/-1;margin-inline:calc(-1 * var(--gutter));border-radius:0;aspect-ratio:1.55}
  .mosaico__foto--1 .pastiglia{left:var(--gutter)}
  /* stanze da tablet: arco | numero, miniature, nome */
  .stanza,.stanza--inversa{column-gap:36px}
  .stanza__nome{font-size:clamp(34px,5vw,44px)}
  .stanza__riga{font-size:17px}
  .dove__orari{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .orario{display:block}
  .orario__testa{padding-bottom:22px}
  .luoghi{display:flex;gap:14px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .luoghi::-webkit-scrollbar{display:none}
  .luoghi li{flex:0 0 min(78%,340px);scroll-snap-align:start}
  .accoglienza__griglia{grid-template-columns:minmax(0,1fr);grid-template-areas:"testa" "foto" "lista";grid-template-rows:auto}
  .accoglienza__sx{display:contents}
  .accoglienza__sx .tre{margin-top:48px}
  .accoglienza__foto{justify-self:start;width:min(78%,340px);margin:12px 0 0 11px}
  .recensioni__griglia{grid-template-columns:minmax(0,1fr)}
  .passi{grid-template-columns:minmax(0,1fr);gap:28px}
  .passi::before{left:27.5px;right:auto;top:28px;bottom:28px;width:1px;height:auto;transform-origin:top}
  .passi.reveal:not(.in)::before{transform:scaleY(0)}
  .passo{display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;align-items:center}
  .passo p{margin-top:0;max-width:none}
  .prenotare__azioni{margin-top:44px}
  /* prezzi da telefono: prima il calendario, poi Piazza del Gesù */
  .prezzi__griglia{grid-template-columns:minmax(0,1fr);gap:0}
  .prezzi__sx{display:contents}
  .prezzi__testo{order:2}
  .prezzi__dx{order:3;margin-top:40px}
  .prezzi__foto{order:4;max-width:300px;margin-top:48px}
  .faq-blocco{grid-template-columns:minmax(0,1fr)}
  .contatti{grid-template-columns:minmax(0,1fr)}
  .barra-mobile{position:fixed;left:50%;width:min(calc(100% - 24px),540px);bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px;border-radius:999px;background:var(--notte);color:var(--bianco);box-shadow:0 18px 40px -14px rgba(var(--rgb-notte),.6),0 0 0 1px rgba(var(--rgb-bianco),.08);transition:transform .5s var(--ease),opacity .35s}
  .barra-mobile.nascosta{transform:translate(-50%,150%);opacity:0;pointer-events:none}
  .barra-mobile .btn{min-height:48px;padding:0 18px;font-size:14.5px}
  .barra-mobile .btn .ico{width:18px;height:18px}
  body.barra-su .cookie{bottom:calc(84px + env(safe-area-inset-bottom))}
  .cookie{left:12px;right:12px;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom))}
  .pagina-404{grid-template-columns:minmax(0,1fr)}
  .pagina-404__arco{max-width:220px}
}
@media (max-width:699px){
  :root{--gutter:20px;--sez:96px;--testata:66px}
  body{font-size:16.5px}
  .testata.scorsa{box-shadow:0 1px 0 var(--linea)}
  .testata__cta{display:none}
  .testata__apri{margin-left:auto}
  .marchio__logo{width:88px}
  .marchio__targa{padding:7px 12px 6px}
  .titolo{font-size:clamp(40px,11.4vw,56px)}
  .titolo--medio{font-size:clamp(34px,9.5vw,46px)}
  .segno{gap:10px;margin-bottom:20px;font-size:11px}
  .segno__disegno{width:38px;height:34px;margin-right:2px}
  .segno__filo{width:28px}
  .hero{padding-top:calc(var(--testata) + 24px)}
  .hero__fiducia{font-size:12px;padding:8px 14px;border-radius:16px}
  /* da telefono lo spazio fra i due pezzi resta quello di prima (14 px), così a 390 px la pillola sta su una riga sola */
  .fiducia__riga{margin-left:-14px}
  .fiducia__stella{padding-left:14px}
  .fiducia__pezzo--dopo{padding-left:14px}
  .fiducia__pezzo--dopo::before{left:5.5px}
  .hero__titolo{margin-top:20px;font-size:clamp(26px,7.6vw,31px);line-height:1.04}
  .hero__napoli{font-size:2.15em}
  .hero__scena{margin-top:26px}
  .hero__fondo{margin-top:26px}
  .hero__sotto{margin-top:26px;font-size:16.5px}
  .hero__basso{flex-direction:column;align-items:stretch;gap:24px;margin-top:24px}
  .hero__azioni .btn{width:100%}
  .hero__miniature{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .hero__mini{min-width:0}
  .hero__mini img{width:100%;height:auto;aspect-ratio:.68;max-width:76px;border-radius:50% 50% 10px 10px / 34% 34% 10px 10px}
  .hero__mini span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cerca__campo:nth-child(3){grid-column:1/-1}
  .cerca__invia{grid-column:1/-1}
  .cerca__campo>.ico{width:20px;height:20px}
  .cerca__valore,.cerca__select{font-size:15px}
  .cerca__campo{padding:12px 12px}
  .attacco{font-size:18.5px}
  .mosaico{gap:10px}
  .pastiglia{left:10px;bottom:10px;font-size:11px;padding:6px 10px}
  .mosaico__foto--1 .pastiglia{left:var(--gutter)}
  .dotazioni-blocco{grid-template-columns:minmax(0,1fr)}
  .dotazioni__testa{padding:24px 0}
  .dotazioni__testa .btn{width:100%}
  .dotazioni li,.dotazioni li:nth-child(4),.dotazioni li:nth-child(even){flex-direction:row;align-items:center;gap:16px;padding:16px 0;border-left:0}
  /* stanze da telefono: arco, numero, nome e testo, le miniature in fila (con la 16:9 sulla riga sua, a tutta larghezza) */
  .stanza,.stanza--inversa{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"arco" "n" "giu" "mini";column-gap:0}
  .stanza__arco{justify-self:center;max-width:min(100%,calc(70svh * var(--ar)))}
  .stanza__n{margin-top:28px}
  .stanza__giu{padding-top:18px}
  .stanza__miniature{gap:10px;margin-top:24px}
  .stanza__miniature--larga{flex-wrap:wrap}
  .stanza__miniature--larga .stanza__mini--largo{flex-basis:100%;aspect-ratio:1.6}
  .stanza__mini{border-radius:14px}
  .stanza__nome{margin:0 0 14px}
  .stanza__riga{font-size:17px}
  .stanza__piu{margin-top:20px}
  .targa-marmo{width:100%;padding:26px 34px 20px}
  .targa-marmo::before{inset:8px}
  .targa-marmo__foro--sx{left:16px}
  .targa-marmo__foro--dx{right:16px}
  .targa-marmo__riga1{font-size:11px;letter-spacing:.24em}
  .targa-marmo__riga2{font-size:15px;letter-spacing:.12em}
  .targa-marmo__civico{font-size:28px}
  .righe li{gap:12px;font-size:15.5px}
  .riga__tempo{font-size:15.5px}
  .tre li{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 0}
  .tre__ico{width:48px;height:48px}
  .tre p{font-size:16.5px;max-width:none}
  .voto{padding:26px 18px;gap:36px}
  .voto__testo{max-width:none;font-size:14.5px;line-height:1.55}
  .citazione{padding:20px 20px}
  .citazione blockquote{font-size:18px}
  .faq__voce button{padding:20px 0;gap:16px}
  .faq__risposta p{padding-right:0}
  .contatti__azioni .btn{width:100%}
  .prenotare__azioni::before{display:none}
  .prenotare__azioni .btn{width:100%}
  .piede__griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding:48px 0 40px}
  .piede__marchio,.piede__griglia>.piede__col:nth-child(2){grid-column:1/-1}
  .piede__targa{width:120px}
  /* il codice CIN (una parola sola) entra nella sua colonna da 320 px in su: lettere più strette, corpo che scala */
  .piede__cin{font-size:clamp(11px,3.4vw,13px);letter-spacing:.03em}
  .piede__basso{flex-direction:column;align-items:flex-start}
  .scheda__campi{gap:10px}
  .campo__box{padding:0 12px;gap:6px;font-size:14px}
  .campo__box .ico{width:16px;height:16px}
  .cookie{font-size:12px;padding-left:16px;gap:8px}
  .cookie__lungo{display:none}
  .lightbox__testa{flex-wrap:wrap;padding:10px 12px;gap:10px}
  .lightbox__stanze{order:3;flex-basis:100%}
  .lightbox__conta{margin-left:auto}
  .lightbox__figura{padding:16px 12px 84px}
  .lightbox__img{max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px)}
  .lightbox__nav{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:none}
  .lightbox__nav--prima{left:calc(50% - 58px)}
  .lightbox__nav--dopo{right:calc(50% - 58px)}
  .tabella-crediti{border:0;overflow:visible}
  .tabella-crediti thead{display:none}
  .tabella-crediti table,.tabella-crediti tbody,.tabella-crediti tr,.tabella-crediti th,.tabella-crediti td{display:block;width:100%}
  .tabella-crediti tr{margin-bottom:14px;padding:6px 0;border:1px solid var(--linea);border-radius:16px}
  .tabella-crediti th,.tabella-crediti td{padding:8px 16px;border:0}
  .tabella-crediti td::before{content:attr(data-label);display:block;font-family:var(--f-titoli);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2)}
}
/* sotto i 480 px i nomi lunghi vanno a capo: niente puntini, il tempo resta in fondo a destra */
@media (max-width:479px){
  .riga__puntini{display:none}
  .righe li{align-items:flex-end}
  .riga__ico{align-self:center}
  .riga__luogo{flex:1}
}
@media (max-width:379px){
  :root{--gutter:16px}
  .btn{padding:0 18px;white-space:normal}
  .cerca__campo{padding:10px 8px;column-gap:8px}
  .scheda{padding:20px 16px}
  .campo__box{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .arco__slide,.arco__slide img{transition:none}
  .arco__slide img{transform:none}
  .passi::before{transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* =================================================================
   08/10/2026 · «REGOLE DELLA CASA» (step 6-bis, Copy/regole-della-casa.md)
   La pagina per gli ospiti che hanno già prenotato, quasi sempre dal telefono: testa corta, il Wi-Fi subito, le ancore
   alle sezioni. Coi pezzi della landing: testata, la scheda del calendario, le righe dell'accoglienza («tre»),
   «In tutta la casa», la fascia blu notte di «Dove si trova» con le onde e le righe coi puntini, il piede coi Contatti.
   Più compatta della landing (sezioni più basse): chi la apre cerca un dato.
   ================================================================= */

/* la landing: il link alla pagina, sotto le tre cose dell'accoglienza */
.accoglienza__regole{display:flex;margin-top:-16px}

.pagina--regole{--sez:104px}
.regole [hidden]{display:none!important}
/* testata: niente menu delle sezioni della home; le lingue (che portano a questa pagina) restano a ogni larghezza */
.testata--regole .lingue{display:flex;margin-left:auto}
.testata--regole .lingue a{display:flex;align-items:center;min-height:44px;padding:0 6px}
.testata--regole .testata__cta{margin-left:0}

/* 1 · testa corta, col bagliore del tramonto della hero; accanto (sotto, da telefono) il Wi-Fi */
.regole-testa{position:relative;padding:calc(var(--testata) + clamp(40px,5vw,72px)) 0 clamp(56px,6vw,88px);overflow:hidden;isolation:isolate}
.regole-testa::before{content:"";position:absolute;z-index:-1;right:-18%;top:-40%;width:84%;height:130%;background:radial-gradient(closest-side,var(--bagliore),var(--bagliore-2) 52%,transparent);pointer-events:none}
.regole-testa__griglia{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.regole-testa .segno{margin-bottom:20px}
.regole-testa__titolo{font-family:var(--f-titoli);font-weight:500;font-size:clamp(42px,5.2vw,78px);line-height:1;letter-spacing:-.035em}
.regole-testa__casa{display:block;margin-top:.32em;font-size:.4em;line-height:1.3;letter-spacing:-.015em;color:var(--testo-2)}
.regole-testa__casa .hero__napoli{font-size:1.9em;line-height:.9}
.regole-testa .hero__sotto{margin-top:22px}
.regole-testa__indirizzo{display:flex;align-items:flex-start;gap:8px;margin-top:20px;font-size:16px;line-height:1.45}
.regole-testa__indirizzo a{font-weight:500;text-decoration:underline;text-decoration-color:var(--linea-forte);text-underline-offset:4px;transition:text-decoration-color var(--t)}
.regole-testa__indirizzo a:hover{text-decoration-color:var(--vivo)}
.regole-testa__indirizzo .ico{width:18px;height:18px;margin-top:2px;color:var(--dettaglio)}
.regole-testa__piano{color:var(--testo-2);white-space:nowrap}
/* le ancore: le pastiglie del kit, col filo, che vanno a capo sul telefono */
.regole-ancore{margin-top:28px}
.regole-ancore ul{display:flex;flex-wrap:wrap;gap:10px}
.regole-ancore__voce{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:1px solid var(--linea-forte);border-radius:999px;background:rgba(var(--rgb-bianco),.8);font-family:var(--f-titoli);font-weight:500;font-size:14.5px;line-height:1.15;text-decoration:none;white-space:nowrap;transition:background-color var(--t),color var(--t),border-color var(--t),transform var(--t) var(--ease)}
.regole-ancore__voce .ico{width:17px;height:17px;color:var(--dettaglio);transition:color var(--t)}
.regole-ancore__voce:hover{background:var(--notte);border-color:var(--notte);color:var(--bianco);transform:translateY(-2px)}
.regole-ancore__voce:hover .ico{color:var(--vivo)}
@media (prefers-reduced-motion:no-preference){
  .regole-testa .segno,.regole-testa__indirizzo,.regole-ancore{animation:sale .9s var(--ease) .56s backwards}
  .regole-ancore{animation-delay:.66s}
  .regole-testa .wifi{animation:apre 1.1s cubic-bezier(.3,.7,.2,1) .2s backwards}
  .regole-testa .segno{animation-delay:0s}
}

/* il Wi-Fi: la scheda del calendario. Pieno: rete e password (grande, cifre tabellari) e «Copia la password»;
   vuoto: «Rete e password te le diamo all'arrivo.» */
.wifi__dati{display:grid;gap:10px;margin-top:22px}
.wifi__riga{display:grid;gap:4px;padding:14px 18px;border-radius:16px;background:var(--fascia)}
.wifi__riga dt{font-family:var(--f-titoli);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2)}
.wifi__riga dd{font-family:var(--f-titoli);font-weight:500;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.wifi__riga dd.wifi__password{font-size:clamp(25px,2.3vw,32px);line-height:1.2;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:break-spaces;-webkit-user-select:all;user-select:all}
.wifi__copia{margin-top:12px;-webkit-appearance:none;appearance:none;cursor:pointer}
.wifi__arrivo{margin-top:22px;padding:18px 20px;border-radius:16px;background:var(--fascia);font-family:var(--f-titoli);font-weight:500;font-size:clamp(19px,1.6vw,22px);line-height:1.35;letter-spacing:-.01em}
.wifi__tascabile{margin-top:18px}
.wifi__codice{font-family:var(--f-titoli);font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* la password, un carattere alla volta (regole.js): il font del sito disegna uguali 0/O e l/I, quindi le cifre in blu
   e lo zero barrato, i segni in arancio scuro, la I maiuscola con le grazie; la l minuscola resta un'asta sola */
.wifi__password span{position:relative}
.wifi__password .pw-cifra{color:var(--dettaglio)}
.wifi__password .pw-segno{color:var(--etichetta)}
.wifi__password .pw-zero::after{content:"";position:absolute;left:50%;top:50%;width:.075em;height:.46em;border-radius:.04em;background:currentColor;transform:translate(-50%,-46%) rotate(32deg)}
.wifi__password .pw-i::before,.wifi__password .pw-i::after{content:"";position:absolute;left:50%;width:.34em;height:.075em;border-radius:.03em;background:currentColor;transform:translateX(-50%)}
.wifi__password .pw-i::before{top:var(--pw-cima,21%)}
.wifi__password .pw-i::after{top:var(--pw-base,71%)}
/* lo spazio: un vero spazio in linea (white-space:break-spaces sulla password: si vede, va a capo e si copia anche a
   mano; mai inline-block, che lo fa sparire dalla copia) allargato, con un riquadro chiaro alto come le lettere, non una
   lineetta in basso che sembra «_»; sotto, la legenda «▮ è uno spazio» (extra*.md), solo se la password ne ha uno */
.wifi__password .pw-spazio{padding:0 .15em}
.wifi__password .pw-spazio::before,.wifi__legenda-segno{content:"";border-radius:.12em;background:currentColor;opacity:.2}
.wifi__password .pw-spazio::before{position:absolute;left:.05em;right:.05em;top:var(--pw-cima,21%);bottom:var(--pw-piede,25%)}
.wifi__riga dd.wifi__legenda{display:flex;align-items:center;gap:.5em;font-family:var(--f-testo);font-weight:400;font-size:14px;line-height:1.4;color:var(--testo-2)}
.wifi__legenda-segno{display:inline-block;flex:none;width:.8em;height:1.05em;color:var(--notte)}

/* 2 · l'arrivo e le regole: due schede sulla fascia chiara, con le righe dell'accoglienza */
.regole-schede__griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.regole-schede .tre{margin-top:18px}
.regole-schede .tre li{grid-template-columns:48px minmax(0,1fr);gap:18px;padding:18px 0}
.regole-schede .tre__ico{width:48px;height:48px}
.regole-schede .tre__ico .ico{width:21px;height:21px}
.regole-schede .tre p{font-size:17px}
.regole .tre p a,.regole-consigli .attacco a{text-decoration-color:var(--vivo);text-decoration-thickness:2px;text-underline-offset:4px}
.regole__dopo{margin-top:18px}

/* 3 · in casa: «In tutta la casa» della landing (titolo + 7 voci = 8 caselle) */
.regole-casa .dotazioni-blocco{margin-top:0}
.regole-casa .dotazioni__testa{justify-content:flex-start;gap:18px}

/* 4 · come arrivare e a piedi da casa: la fascia blu notte di «Dove si trova» */
.regole-strada{padding-top:0}
.regole-strada .dove__orari{margin-top:0}
.regole-strada .orario__titolo{font-size:clamp(30px,3vw,44px)}
.righe.righe--strada li{align-items:flex-start;gap:16px;padding:20px 0}
.righe--strada .riga__ico{align-self:flex-start;margin-top:1px}
.strada__testo{display:grid;gap:4px;min-width:0}
.strada__da{display:block;font-family:var(--f-titoli);font-weight:500;font-size:17px;line-height:1.3}
.strada__come{display:block;color:var(--bianco-78);line-height:1.5}
.strada__mappa{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:4px;padding:6px 0;font-family:var(--f-titoli);font-weight:500;font-size:14.5px;color:var(--bianco);text-decoration:underline;text-decoration-color:var(--vivo-notte);text-decoration-thickness:2px;text-underline-offset:5px}
.strada__mappa .ico{width:15px;height:15px;color:var(--vivo-notte);transition:transform var(--t) var(--ease)}
.strada__mappa:hover .ico,.riga__link:hover .riga__vai{transform:translate(2px,-2px)}
.righe.righe--link li{padding:0}
.riga__link{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 0;color:inherit;text-decoration:none}
.riga__link:hover .riga__luogo{text-decoration:underline;text-decoration-color:var(--vivo-notte);text-underline-offset:4px}
.riga__vai{display:grid;place-items:center;flex:none;width:20px;height:20px;margin-left:-4px;color:var(--vivo-notte);transition:transform var(--t) var(--ease)}
.riga__vai .ico{width:15px;height:15px}

/* 5 · i nostri consigli: le schede del pannello (2 per riga sul telefono, 3 sul computer, senza foto) e le due righe */
.regole-consigli .testa{margin-bottom:0}
.regole-consigli .testa__dx{gap:18px}
.regole-consigli__porto{display:flex;align-items:flex-start;gap:12px;max-width:46ch;font-size:16px;line-height:1.55;color:var(--testo-2)}
.regole-consigli__porto .ico{width:20px;height:20px;margin-top:2px;color:var(--dettaglio)}
.consigli{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.consiglio{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:clamp(20px,2.2vw,28px);border-radius:var(--r);background:var(--fascia)}
.consiglio__luogo{font-family:var(--f-titoli);font-weight:500;font-size:clamp(19px,1.6vw,22px);line-height:1.2;letter-spacing:-.015em;overflow-wrap:anywhere}
.consiglio__nota{font-size:15.5px;line-height:1.5;color:var(--testo-2);overflow-wrap:anywhere}
.consiglio__mappa{margin-top:auto;min-height:44px;padding:0 16px;font-size:14px}

/* 6 · contatti e piede: la riga della pulizia non è un link; «Torna alla home» in fondo */
p.contatti__riga:hover span:last-child{text-decoration:none}
.piede__casa{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border:1px solid var(--linea-chiara);border-radius:999px;color:var(--bianco);font-family:var(--f-titoli);font-weight:500;font-size:14px;text-decoration:none;transition:background-color var(--t),border-color var(--t)}
.piede__casa .ico{width:17px;height:17px;color:var(--vivo-notte)}
.piede__casa:hover{background:rgba(var(--rgb-bianco),.08);border-color:rgba(var(--rgb-bianco),.5)}

@media (max-width:1100px){
  .regole-testa__griglia{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
}
@media (max-width:899px){
  .accoglienza__regole{margin-top:32px}
  .pagina--regole{--sez:88px}
  .regole-testa__griglia{grid-template-columns:minmax(0,1fr);gap:36px}
  .regole-testa .wifi{max-width:560px}
  .regole-schede__griglia{grid-template-columns:minmax(0,1fr);gap:16px}
  .consigli{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:699px){
  .accoglienza__regole .btn{width:100%}
  .pagina--regole{--sez:64px}
  .regole-testa{padding:calc(var(--testata) + 26px) 0 48px}
  /* telefono: il Wi-Fi subito sotto il titolo, così si vede senza scorrere anche su un telefono basso (375×667) e sopra
     il banner dei cookie; poi le due righe, l'indirizzo e le ancore */
  .regole-testa__griglia{gap:0}
  .regole-testa__testo{display:contents}
  .regole-testa .segno{order:1}
  .regole-testa__titolo{order:2}
  .regole-testa .wifi{order:3;margin-top:22px}
  .regole-testa .hero__sotto{order:4}
  .regole-testa__indirizzo{order:5}
  .regole-ancore{order:6}
  .regole-testa .segno{margin-bottom:14px}
  .regole-testa__titolo{font-size:clamp(34px,9.6vw,44px)}
  .regole-testa__casa{font-size:.5em}
  .regole-testa .hero__sotto{margin-top:26px;font-size:16px}
  .regole-testa__indirizzo{margin-top:16px;font-size:15px}
  .regole-ancore{margin-top:22px}
  .regole-ancore ul{gap:8px}
  .regole-ancore__voce{padding:0 14px 0 11px;font-size:14px;gap:7px}
  .wifi__arrivo{padding:16px 16px;font-size:18px}
  .regole-schede .tre li{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:15px 0}
  .regole-schede .tre__ico{width:40px;height:40px}
  .regole-schede .tre__ico .ico{width:19px;height:19px}
  .regole-schede .tre p{font-size:16px}
  .regole-strada .dove__orari{row-gap:48px}
  .regole-strada .orario__titolo{font-size:clamp(28px,8vw,34px)}
  .righe.righe--strada li{gap:12px;padding:18px 0}
  .strada__da{font-size:16px}
  .consiglio{padding:16px 14px}
  .consiglio__luogo{font-size:17px}
  .consiglio__nota{font-size:14.5px}
  .consiglio__mappa{width:100%;min-height:40px;padding:0 10px;gap:6px;font-size:13px;white-space:normal}
  .consiglio__mappa .ico:last-child{display:none}
}
@media (max-width:479px){
  .riga__link{align-items:flex-end;gap:12px}
  .riga__link .riga__luogo{flex:1}
  /* telefono: un filo più di spazio al testo delle schede, così ogni blocco sta in 3 righe anche in francese e tedesco */
  .regole-testa .wifi,.regole-schede .scheda{padding:22px 16px}
  .regole-schede .tre li{grid-template-columns:32px minmax(0,1fr);gap:12px}
  .regole-schede .tre__ico{width:32px;height:32px}
  .regole-schede .tre__ico .ico{width:17px;height:17px}
  .regole-consigli .attacco{font-size:16px}
}
@media (max-width:379px){
  .testata--regole .testata__barra{gap:10px}
  .testata--regole .lingue a{padding:0 4px}
  .regole-ancore__voce{padding:0 12px 0 10px;font-size:13.5px}
  .consiglio__mappa .ico{display:none}
}