/* ═══════════════════════════════════════════════════════════
   La Corte del Passone — CSS globale
   Token: Style Guide v1.4, §12

   ATTENZIONE: tutto il CSS del sito sta QUI, comprese le sezioni
   di pagina. Non spostare regole nei <style> dei componenti Astro:
   lo scope alza la specificita' e le media query globali smettono
   di vincere, con il risultato che il layout mobile non si applica.
   ═══════════════════════════════════════════════════════════ */

:root{
  --colore-primario:#713A2B;
  --colore-primario-scuro:#42211A;
  --colore-inchiostro:#2E241E;
  --colore-accento:#5C6649;
  --colore-pietra:#A89C8D;
  --colore-fondo:#F1ECE5;
  --colore-fondo-alt:#E3DACE;
  --colore-carta:#FAF6F0;
  --colore-errore:#8C3A2E;  --colore-errore-fondo:#F6E7E3;
  --colore-successo:#4C5F41; --colore-successo-fondo:#E9EEE3;

  --p-50:#F2EBE4; --p-100:#E7DCD4; --p-200:#D1BEB5;
  --p-300:#B6988E; --p-400:#93695C; --p-600:#623528;
  --p-700:#553126; --p-800:#472C23; --p-900:#3B2821;

  --font-display:"Marcellus", Georgia, serif;
  --font-testo:"Karla", system-ui, sans-serif;
  --t-h1:3.5rem; --t-h2:2.375rem; --t-h3:1.6875rem; --t-h4:1.3125rem;
  --t-lead:1.125rem; --t-corpo:1rem; --t-small:.875rem; --t-micro:.719rem;
  --lh-titolo:1.15; --lh-corpo:1.65;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --contenuto-max:1120px;

  --r-s:8px; --r-m:14px; --r-l:18px; --r-pill:999px;
  --ombra-s:0 1px 3px rgba(0,0,0,.08);
  --ombra-m:0 12px 28px -14px rgba(0,0,0,.25);
  --ombra-l:0 18px 50px -18px rgba(0,0,0,.28);

  --t-micro-ms:150ms; --t-std:250ms; --t-entrata:400ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  --ico-tratto:1.8; --ico-s:20px; --ico-m:22px; --ico-l:26px;

  /* Altezza reale della testata, ricalcolata via JS (main.js):
     serve ai contenuti sticky sotto la testata (es. sotto-menu dintorni).
     Il valore qui e' solo il ripiego prima che lo script giri. */
  --altezza-testata:90px;

  /* ── NUOVO in v2: larghezze fisse dei bottoni ──
     Da riportare nella Style Guide, §componenti. */
  --btn-w:256px;         /* standard, per le coppie di CTA */
  --btn-w-compatto:148px;/* testata e spazi stretti        */
  --btn-w-largo:344px;   /* etichette lunghe               */
  --btn-h:52px;
  --btn-h-compatto:44px;

  /* Rosso del marchio: vive nel logo, mai nell'interfaccia. */
  --marchio-rosso:#B22222;

  /* Lembo del carosello su mobile: quanto della card successiva resta
     scoperto sul bordo destro. Non e' un passo della scala di spazio
     perche' non separa nulla: e' la parte di card che si deve vedere
     perche' si capisca che ce n'e' un'altra. Sotto i 40px si legge come
     un errore di allineamento, sopra i 72 la card in lettura si stringe
     troppo su uno schermo da 360px. */
  --sbircia:56px;

  /* v3 */
  --altezza-cta-mobile:76px;

  /* Distanza fra il bordo dello schermo e il bordo interno del
     contenitore. Sopra i 1120px cresce con la finestra; sotto, vale
     il solo padding del contenitore. Serve alle fotografie che escono
     dalla colonna per arrivare a filo di pagina (.modulo-app__media). */
  --fuori:max(var(--s5), calc((100vw - var(--contenuto-max)) / 2 + var(--s5)));
}

/* ═══ reset essenziale ═══ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Nessun elemento puo' spingere la pagina oltre la larghezza dello schermo */
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--colore-fondo);
  color:var(--colore-inchiostro);
  font-family:var(--font-testo);
  font-size:var(--t-corpo);
  line-height:var(--lh-corpo);
  font-weight:400;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--colore-primario);text-decoration-thickness:1px;text-underline-offset:3px}

/* ═══ focus: anello oliva 2px, scarto 3px ═══ */
:focus-visible{
  outline:2px solid var(--colore-accento);
  outline-offset:3px;
  border-radius:var(--r-s);
}

/* ═══ tipografia ═══ */
.t-h1{font-size:var(--t-h1);line-height:1.06;letter-spacing:.005em}
.t-h2{font-size:var(--t-h2);line-height:var(--lh-titolo)}
.t-h3{font-size:var(--t-h3);line-height:1.2}
.t-h4{font-size:var(--t-h4);line-height:1.3}
.occhiello{
  font-family:var(--font-testo);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--colore-primario);margin:0 0 var(--s4)
}
.lead{font-size:var(--t-lead);line-height:1.6}
.corpo{font-size:var(--t-corpo);line-height:var(--lh-corpo);max-width:72ch}
.small{font-size:var(--t-small)}
.micro{font-size:var(--t-micro);opacity:.7}
em{font-style:italic}

/* ═══ struttura ═══ */
.contenitore{
  max-width:var(--contenuto-max);
  margin-inline:auto;
  padding-inline:var(--s5);
}
/* v2: la misura si limita QUI, non sul contenitore.
   Prima il max-width sul .contenitore, che ha margin-inline:auto,
   restringeva e centrava tutto il blocco. */
.misura{max-width:54ch}
.misura--stretta{max-width:44ch}

.sezione{padding-block:var(--s9)}
.sezione--alt{background:var(--colore-fondo-alt)}
.sezione--scura{background:var(--colore-primario-scuro);color:var(--colore-carta)}
.sezione--scura .t-h2{color:var(--colore-carta)}
.sezione--scura .occhiello{color:var(--p-200)}
.intestazione-sezione{max-width:62ch;margin-bottom:var(--s7)}
.intestazione-sezione .t-h2{margin-bottom:var(--s4)}
/* Blocco di sola CTA: nessun elenco sotto, quindi niente margine inferiore */
.intestazione-sezione--chiusa{margin-bottom:0}
.intestazione-sezione--chiusa .fila-azioni{margin-top:var(--s6)}

/* ═══════════════════════════════════════════════════
   SPLIT — impianto a due colonne
   Una sola griglia per intestazioni di sezione e testi di
   pagina. Prima ogni blocco era limitato a 62ch/72ch e
   lasciava vuota la meta' destra del contenitore.
   INVARIANTE: .split ha SEMPRE esattamente due figli
   diretti, .split__testa e .split__corpo.
   ═══════════════════════════════════════════════════ */
.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:var(--s9);
  align-items:start;
}
/* elenco, tabella o mappa nella colonna destra */
.split--elenco{grid-template-columns:.85fr 1.15fr}
/* Barra verticale fra le due colonne: usa parte del gap, non lo aumenta. */
.split--elenco .split__corpo{border-left:1px solid var(--colore-pietra);padding-left:var(--s7)}
/* due sezioni brevi di pari peso, affiancate: nessuna delle due e'
   intestazione dell'altra, quindi colonne uguali e stessa barra verticale */
.split--pari{grid-template-columns:1fr 1fr}
.split--pari .split__corpo{border-left:1px solid var(--colore-pietra);padding-left:var(--s7)}
/* indice di pagina a destra: colonna stretta, il testo tiene la scena */
.split--indice{grid-template-columns:1.4fr .6fr}
/* testo a sinistra, azione a destra */
.split--azione{grid-template-columns:1fr auto;align-items:end}
.split--azione .split__testa{max-width:62ch}
.split--azione .split__corpo .fila-azioni{flex-direction:column;align-items:flex-start}
/* la testata resta visibile mentre scorre un elenco lungo */
.split--sticky .split__testa{position:sticky;top:calc(var(--altezza-testata) + var(--s4))}

.split__testa .t-h1,
.split__testa .t-h2{margin-bottom:0}
/* quando l'intro sta a sinistra insieme al titolo */
.split__testa--con-intro .t-h2{margin-bottom:var(--s4)}

/* la misura di lettura la da' la colonna, non piu' .corpo */
.split .corpo{max-width:none}
.split .corpo + .corpo{margin-top:var(--s4)}

.intestazione-sezione.split{max-width:none}
.pdp-testo.split .corpo:last-of-type{margin-bottom:0}
.pdp-testo.split .fila-azioni{margin-top:var(--s6)}
.split .info-utili{margin-top:0}
.split .info-utili div{grid-template-columns:150px 1fr}
.split .tappe{margin-top:0}
.split .sintesi-dati{margin-top:0}

/* ═══ salto al contenuto ═══ */
.salta{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--colore-carta);color:var(--colore-primario);
  padding:var(--s3) var(--s5);border-radius:var(--r-s);
  font-weight:600;text-decoration:none;
  transition:top var(--t-micro-ms) var(--ease);
}
.salta:focus{top:var(--s4)}

/* ═══════════════════════════════════════════════════
   BOTTONI — v2: larghezza fissa
   ═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--btn-w);height:var(--btn-h);
  padding-inline:var(--s4);
  border-radius:var(--r-pill);border:1.5px solid transparent;
  font-family:var(--font-testo);font-size:var(--t-corpo);font-weight:600;
  line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  transition:background var(--t-micro-ms) var(--ease),
             border-color var(--t-micro-ms) var(--ease),
             color var(--t-micro-ms) var(--ease);
}
.btn--compatto{width:var(--btn-w-compatto);height:var(--btn-h-compatto);font-size:var(--t-small)}
.btn--largo{width:var(--btn-w-largo)}
.btn--primario{background:var(--colore-primario);color:var(--colore-carta)}
.btn--primario:hover{background:var(--p-600)}
.btn--secondario{background:transparent;color:var(--colore-primario);border-color:var(--colore-primario)}
/* v5 — l'hover RIEMPIE, non schiarisce.
   Prima era background:var(--p-50), cioe' #F2EBE4. Il fondo di pagina
   e' --colore-fondo #F1ECE5: due colori distanti un punto, invisibili
   uno sull'altro. Funzionava solo dove il fondo era diverso - sulle
   .sezione--alt (#E3DACE) e dentro le card (#FAF6F0) - e li' sembrava
   a posto, da cui l'impressione che il bug fosse a intermittenza.
   Riempire di mattone e invertire il testo non dipende dal fondo:
   si vede su carta, su fondo, su fondo-alt e dentro una card.
   I fondi scuri hanno gia' i loro override piu' sotto (.sezione--scura,
   .hero, .chiusura) e vincono per specificita': la' l'inversione non
   serve, il bottone e' gia' chiaro su scuro. */
.btn--secondario:hover{
  background:var(--colore-primario);
  color:var(--colore-carta);
  border-color:var(--colore-primario);
}
.sezione--scura .btn--secondario{color:var(--colore-carta);border-color:var(--p-200)}
.sezione--scura .btn--secondario:hover{background:rgba(250,246,240,.1)}
.fila-azioni{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.fila-azioni--centrata{justify-content:center;margin-top:var(--s6)}

/* ═══ ornamento: losanga ═══ */
.losanga{
  display:flex;align-items:center;gap:var(--s4);
  color:var(--colore-pietra);margin-bottom:var(--s5);
}
.losanga::after{content:"";flex:1;height:1px;background:var(--colore-pietra);opacity:.5}
.losanga svg{flex:none}

/* ═══════════════════════════════════════════════════
   TESTATA — v2: logo centrato, nav sotto
   ═══════════════════════════════════════════════════ */
.testata{
  position:sticky;top:0;z-index:100;
  background:var(--colore-fondo);
  border-bottom:1px solid var(--colore-fondo-alt);
  transition:box-shadow var(--t-std) var(--ease);
}
.testata.compatta{box-shadow:var(--ombra-s)}

.testata__logo-riga{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5) var(--s5) var(--s4);
  transition:padding var(--t-std) var(--ease);
}
.testata.compatta .testata__logo-riga{padding-block:var(--s3) var(--s2)}

.marchio{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-decoration:none}
/* Logo dimezzato (era 260px, compatto 190px). La testata e' sticky: quello
   che occupa lo toglie a ogni schermata, e su mobile il logo esteso da solo
   si mangiava circa 90px di altezza prima ancora dei contenuti.
   L'altezza reale della testata la rimisura main.js in --altezza-testata,
   quindi i contenuti sticky sotto (sotto-menu dintorni, colonne .split)
   si riallineano da soli: non ci sono numeri da aggiornare a mano. */
.marchio__img{display:block;height:auto;max-width:130px;transition:max-width var(--t-std) var(--ease)}
.testata.compatta .marchio__img{max-width:95px}
/* Stessa inversione di .media: il logo si vede, il ripiego testuale
   compare solo se l'SVG non carica. Prima serviva il JS per vedere il
   logo, e senza JS la testata restava con il ripiego. */
.marchio--ko .marchio__img{display:none}
.marchio__ripiego{display:none;flex-direction:column;align-items:center;gap:var(--s2)}
.marchio--ko .marchio__ripiego{display:flex}
/* Il ripiego compare solo se l'SVG del logo non carica: scende con lui,
   altrimenti il fallback risulterebbe piu' ingombrante del logo vero. */
.marchio__albero{width:26px;height:29px;color:var(--colore-primario);transition:transform var(--t-std) var(--ease)}
.testata.compatta .marchio__albero{transform:scale(.78)}
.marchio__nome{
  font-family:var(--font-display);font-size:18px;line-height:1;
  color:var(--marchio-rosso);letter-spacing:.03em;
  transition:font-size var(--t-std) var(--ease);
}
.testata.compatta .marchio__nome{font-size:15px}
.marchio__riga{
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--colore-inchiostro);opacity:.7;
  transition:opacity var(--t-std) var(--ease),max-height var(--t-std) var(--ease);
}
.testata.compatta .marchio__riga{opacity:0;max-height:0;overflow:hidden}

/* nav orizzontale */
.nav-principale{border-top:1px solid var(--colore-fondo-alt)}
.nav-principale > ul{
  max-width:var(--contenuto-max);margin-inline:auto;
  display:flex;align-items:center;justify-content:center;gap:var(--s8);
  padding:var(--s2) var(--s5);
}
/* :not(.btn) — senza questo la regola vinceva per specificita' sul
   colore di .btn--primario e la scritta "Prenota" restava marrone
   su fondo marrone. */
.nav-principale .voce > a:not(.btn){
  color:var(--colore-inchiostro);text-decoration:none;
  font-size:var(--t-small);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;border-bottom:1.5px solid transparent;
}
.nav-principale .voce > a:not(.btn):hover{color:var(--colore-primario);border-bottom-color:var(--colore-primario)}
.nav-principale .btn--primario{color:var(--colore-carta);text-transform:none;letter-spacing:normal}
.freccia{transition:transform var(--t-micro-ms) var(--ease)}

/* tendine: contenuto presente nell'HTML al primo caricamento */
.voce{position:relative}
.tendina{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--colore-carta);
  border:1px solid var(--colore-fondo-alt);
  border-radius:var(--r-m);
  box-shadow:var(--ombra-m);
  padding:var(--s5);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s6);
  min-width:400px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-micro-ms) var(--ease),transform var(--t-micro-ms) var(--ease);
}
.voce:hover .tendina,.voce:focus-within .tendina{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.voce:hover .freccia,.voce:focus-within .freccia{transform:rotate(180deg)}
.tendina a{
  display:flex;align-items:center;min-height:38px;
  color:var(--colore-inchiostro);text-decoration:none;font-size:var(--t-small);
  padding-inline:var(--s2);border-radius:var(--r-s);
}
.tendina a:hover{color:var(--colore-primario);background:var(--p-50)}
.tendina__tutti{grid-column:1 / -1;border-bottom:1px solid var(--colore-fondo-alt);margin-bottom:var(--s2);padding-bottom:var(--s2)}
.tendina__tutti a{font-weight:600;color:var(--colore-primario)}

.apri-menu__chiudi{display:none}
.apri-menu[aria-expanded="true"] .apri-menu__apri{display:none}
.apri-menu[aria-expanded="true"] .apri-menu__chiudi{display:block}
.apri-menu{
  display:none;position:absolute;right:var(--s5);top:50%;transform:translateY(-50%);
  background:none;border:1.5px solid var(--colore-pietra);
  border-radius:var(--r-s);width:44px;height:44px;
  align-items:center;justify-content:center;cursor:pointer;
  color:var(--colore-inchiostro);
}

/* menu mobile */
.menu-mobile{display:none;border-top:1px solid var(--colore-fondo-alt);padding:var(--s4) var(--s5) var(--s6)}
.menu-mobile[data-aperto="true"]{display:block}
.menu-mobile__gruppo{border-bottom:1px solid var(--colore-fondo-alt)}
.menu-mobile__gruppo summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  min-height:52px;font-size:var(--t-small);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}
.menu-mobile__gruppo summary::-webkit-details-marker{display:none}
.menu-mobile__gruppo summary::after{
  content:"";width:10px;height:10px;flex:none;
  border-right:1.8px solid var(--colore-primario);border-bottom:1.8px solid var(--colore-primario);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t-std) var(--ease);
}
.menu-mobile__gruppo[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.menu-mobile__gruppo ul{padding-bottom:var(--s4)}
.menu-mobile__gruppo a{
  display:flex;align-items:center;min-height:44px;
  color:var(--colore-inchiostro);text-decoration:none;font-size:var(--t-small);
}
.menu-mobile__gruppo a:hover{color:var(--colore-primario)}
.menu-mobile__link{
  display:flex;align-items:center;min-height:52px;
  border-bottom:1px solid var(--colore-fondo-alt);
  color:var(--colore-inchiostro);text-decoration:none;
  font-size:var(--t-small);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}
.menu-mobile__link:hover{color:var(--colore-primario)}
.menu-mobile .btn{margin-top:var(--s5);width:100%}

/* ═══════════════════════════════════════════════════
   CORNICE MEDIA — segnaposto unico di tutto il sito
   ═══════════════════════════════════════════════════ */
/* Contiene una <img> con percorso e alt definitivi. Se il file non esiste
   si vede il segnaposto tratteggiato con il nome atteso; appena lo carichi
   nella cartella, l'immagine compare da sola.
   NON creare altre classi segnaposto: questa vale per hero, carosello,
   moduli appartamento e card dintorni.

   L'IMMAGINE E' VISIBILE DI DEFAULT, il segnaposto e' l'eccezione (--ko).
   Prima era il contrario: img in display:none finche' main.js non
   confermava il caricamento. Due difetti, entrambi reali.
   1) Un'immagine display:none con loading="lazy" NON viene mai scaricata
      dai browser: senza box non entra mai nel viewport, quindi niente
      fetch, niente evento load, niente classe, e resta invisibile per
      sempre. Il primo file davvero caricato in /img/homepage/ e' finito
      esattamente in questo stallo.
   2) Senza JavaScript non si vedeva nessuna immagine del sito.
   Ora il percorso normale e' solo CSS; JS interviene solo sull'errore. */
.media{
  position:relative;overflow:hidden;margin:0;
  border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media__nota{display:none}
.media--ko{
  background:repeating-linear-gradient(45deg,
    var(--colore-fondo-alt) 0 10px, var(--p-100) 10px 20px);
  border:1px dashed var(--colore-pietra);
}
.media--ko img{display:none}
.media--ko .media__nota{display:block}
.media__nota{
  position:absolute;/* display:none sopra, torna a block con .media--ko */
  background:rgba(250,246,240,.94);border-radius:var(--r-s);
  padding:var(--s3) var(--s4);max-width:min(38ch,100%);text-align:center;
  font-size:var(--t-small);line-height:1.45;color:var(--colore-inchiostro);
  margin:var(--s4);
}
.scheda__immagine .media__nota{
  max-width:none;margin:var(--s2);padding:var(--s2) var(--s3);
  font-size:var(--t-micro);opacity:1;
}
.media__nota b{display:block;font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.14em;opacity:.6;
  margin-bottom:var(--s1);font-weight:600}
.media__nota code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;opacity:.7;display:block;margin-top:var(--s2);
  word-break:break-all;line-height:1.4}

/* ═══════════════════════════════════════════════════
   01. HERO
   ═══════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:min(78vh,640px);
  display:flex;align-items:flex-end;
  background:repeating-linear-gradient(45deg,
    var(--p-800) 0 14px, var(--p-900) 14px 28px);
  color:var(--colore-carta);overflow:hidden;
}
/* v3: la hero usa una <img> e non un background-image.
   Motivo: l'elemento LCP si puo' precaricare con fetchpriority
   e Vercel la serve ottimizzata. Da aggiornare nei Requisiti SEO. */
.hero__sfondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Stessa inversione di .media: la foto si vede, il segnaposto compare
   solo se il file manca. Vedi il commento esteso sopra .media. */
.hero.hero--ko .hero__sfondo{display:none}
.hero__nota-scatto{display:none}
.hero.hero--ko .hero__nota-scatto{display:block}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(46,36,30,.86) 0%, rgba(46,36,30,.5) 50%, rgba(46,36,30,.2) 100%);
}
.hero__nota-scatto{
  position:absolute;top:var(--s5);right:var(--s5);z-index:3;
  background:rgba(250,246,240,.94);color:var(--colore-inchiostro);
  border-radius:var(--r-s);padding:var(--s3) var(--s4);
  max-width:min(30ch,60%);font-size:var(--t-small);line-height:1.45;
}
.hero__nota-scatto b{display:block;font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.14em;opacity:.6;
  margin-bottom:var(--s1);font-weight:600}
/* Il percorso file va a capo da solo: inline sbordava dal riquadro */
.hero__nota-scatto code{
  display:block;margin-top:var(--s2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;opacity:.7;word-break:break-all;line-height:1.4;
}
.hero__contenuto{position:relative;z-index:2;padding-block:var(--s9) var(--s8);width:100%}
.hero .occhiello{color:var(--p-200)}
.hero .t-h1{color:var(--colore-carta);margin-bottom:var(--s5);max-width:16ch}
.hero .lead{color:var(--colore-carta);opacity:.94;margin-bottom:var(--s7);max-width:52ch}
.hero .btn--secondario{color:var(--colore-carta);border-color:rgba(250,246,240,.7)}
.hero .btn--secondario:hover{background:rgba(250,246,240,.12);border-color:var(--colore-carta)}

/* ═══════════════════════════════════════════════════
   02. INTRODUZIONE
   ═══════════════════════════════════════════════════ */
.intro__griglia{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s9);align-items:start}
.intro__testo .t-h2{margin-bottom:var(--s5)}
.intro__immagine{aspect-ratio:4/3}

.prove{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);
  margin-top:var(--s8);border-top:1px solid var(--colore-pietra);padding-top:var(--s6);
}
.prova__valore{
  font-family:var(--font-display);font-size:var(--t-h4);line-height:1.25;
  color:var(--colore-primario);font-variant-numeric:tabular-nums;margin-bottom:var(--s1);
}
.prova__etichetta{font-size:var(--t-small);opacity:.8}

/* ═══════════════════════════════════════════════════
   CAROSELLO — componente unico
   Usato dalla homepage (appartamenti) e da /appartamenti/ (dintorni).
   Non scriverne un secondo: due caroselli sono due bug da mantenere.
   ═══════════════════════════════════════════════════ */
.carosello__testata{margin-bottom:var(--s6)}

/* Pista: flex, non grid. Una card per schermo su mobile,
   due su tablet, tre su desktop. scroll-snap-stop: always
   impedisce di saltare piu' card con uno swipe deciso. */
.carosello__pista{
  display:flex;gap:var(--s5);align-items:stretch;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--s5);
  padding-block:var(--s2) var(--s5);
  margin-inline:calc(var(--s5) * -1);padding-inline:var(--s5);
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.carosello__pista::-webkit-scrollbar{display:none;width:0;height:0}
.carosello__pista > *{
  flex:0 0 calc((100% - var(--s5) * 2) / 3);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* ═══ Piede: barra di avanzamento + contatore + frecce ═══
   Prima qui c'erano solo due frecce centrate. Su mobile non servivano
   (si scorre col dito) e nessuno dei due elementi diceva quante card
   ci fossero ne' a che punto si fosse arrivati. Barra e contatore lo
   dicono a ogni formato; le frecce restano da tablet in su.
   Markup: src/components/CaroselloPiede.astro, uno per tutti. */
.carosello__piede{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s2)}
/* --colore-pietra al 42%: la traccia deve restare sotto il testo del
   contatore, e la pietra piena su fondo carta la porterebbe alla pari. */
.carosello__avanzamento{
  flex:1;height:2px;background:rgba(168,156,141,.42);
  border-radius:var(--r-pill);overflow:hidden;
}
.carosello__avanzamento span{
  display:block;height:100%;width:0;
  background:var(--colore-primario);border-radius:var(--r-pill);
  transition:width 90ms linear;
}
/* min-width 11ch e nowrap: da quando il contatore stampa un intervallo
   ("09–11 / 11") l'etichetta e' lunga il doppio del numero singolo, e in
   una riga flex si sarebbe potuta spezzare su due righe facendo saltare
   l'allineamento della barra. tabular-nums tiene ferme le cifre mentre
   scorrono, cosi' la scritta non "respira" a ogni passo. */
.carosello__stato{
  min-width:11ch;text-align:right;white-space:nowrap;
  font-size:var(--t-small);font-variant-numeric:tabular-nums;
  color:var(--colore-inchiostro);opacity:.8;
}
.carosello__comandi{display:flex;gap:var(--s3);align-items:center;flex:none}
.comando{
  width:52px;height:52px;border-radius:var(--r-pill);
  border:1.5px solid var(--colore-primario);background:transparent;color:var(--colore-primario);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--t-micro-ms) var(--ease),
             border-color var(--t-micro-ms) var(--ease),
             color var(--t-micro-ms) var(--ease),
             opacity var(--t-micro-ms) var(--ease);
}
/* v5 — stesso difetto e stessa cura di .btn--secondario: l'hover a
   --p-50 spariva sul fondo di pagina. Le frecce vivono sia su .sezione
   che su .sezione--alt, quindi non potevano dipendere dal fondo.
   La freccia si inverte con il bottone perche' il suo SVG usa
   stroke:currentColor. */
.comando:hover{
  background:var(--colore-primario);
  color:var(--colore-carta);
  border-color:var(--colore-primario);
}
.comando[disabled]{border-color:var(--colore-pietra);color:var(--colore-pietra);cursor:not-allowed;background:transparent;opacity:.55}
.comando svg{
  width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* ═══ Scheda: card del carosello ═══ */
.scheda{
  scroll-snap-align:start;background:var(--colore-carta);
  border:1px solid var(--colore-fondo-alt);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ombra-s);
  transition:box-shadow var(--t-std) var(--ease),transform var(--t-std) var(--ease);
}
.scheda:hover{box-shadow:var(--ombra-m);transform:translateY(-2px)}
/* v3.1: la foto passa da 1:1 a 5:4. Su mobile la card occupa tutta la
   larghezza, quindi il lato dell'immagine quadrata diventava l'altezza:
   su uno schermo da 390px erano 390px di sola foto, e la card non entrava
   in una schermata. A 5:4 se ne recuperano circa 78, senza scendere a 4:3
   che avrebbe stretto troppo scatti d'interno gia' inquadrati quadrati.
   Il file resta 800×800: object-fit:cover ritaglia sopra e sotto. */
.scheda__immagine{aspect-ratio:5/4;border:none;border-radius:0;border-bottom:1px solid var(--colore-fondo-alt)}
/* Le card dintorni usano 4:3: i paesaggi non stanno in un quadrato */
.scheda--dintorno .scheda__immagine{aspect-ratio:4/3}
/* flex:1 serve al margin-top:auto di .scheda__azione: senza, il corpo e'
   alto quanto il suo contenuto e il pulsante non ha spazio da spingere,
   cosi' in una fila di card i pulsanti restano a quote diverse. */
.scheda__corpo{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.scheda__corpo .t-h3,.scheda__corpo .t-h4{color:var(--colore-primario-scuro)}
.scheda__testo{font-size:var(--t-small);opacity:.85;line-height:1.45}
.scheda__distanza{
  font-size:var(--t-small);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--colore-accento);
}
/* ═══ Azione della scheda: chip tonale ═══
   Era .scheda__link, cioe' testo e freccia. Su una card con foto grande
   non c'era nulla che dicesse "qui si tocca": il bersaglio finiva dove
   finiva la parola. Ora ha forma e superficie, ma il fondo e'
   --colore-fondo-alt, un colore che la pagina usa gia' a pochi pixel di
   distanza: si legge come pulsante senza aggiungere saturazione.
   Angoli piccoli e larghezza al contenuto sono le due differenze che lo
   tengono distinto da "Prenota", che e' una pillola piena. */
.scheda__azione{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--btn-h-compatto);padding-inline:var(--s5);
  border-radius:var(--r-s);
  background:var(--colore-fondo-alt);color:var(--colore-primario);
  font-size:var(--t-small);font-weight:600;line-height:1.2;
  text-decoration:none;
  transition:background var(--t-micro-ms) var(--ease);
}
.scheda__azione:hover{background:var(--p-200)}
.scheda__azione svg{flex:none}
.etichetta{
  align-self:flex-start;background:var(--colore-successo-fondo);color:var(--colore-successo);
  font-size:var(--t-micro);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  padding:var(--s1) var(--s3);border-radius:var(--r-pill);
}

/* ═══════════════════════════════════════════════════
   04 / 05 / 06 — sezioni a due colonne
   ═══════════════════════════════════════════════════ */
.duetto{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.duetto--invertito .duetto__media{order:-1}
.duetto__media{aspect-ratio:3/2}
.duetto__testo .t-h2{margin-bottom:var(--s5)}
/* h3 e h4 avevano margine ZERO e restavano incollati al paragrafo: il
   reset in testa al file azzera i margini di tutti i titoli, e qui era
   dichiarata solo la riga per .t-h2. Si vedeva sui tre luoghi di
   /altre-strutture/, gli unici h3 dentro un .duetto__testo.
   16px e non 24 come l'h2: il titolo e' piu' piccolo e lo spazio scende
   con lui. Resta comunque meta' dei 32px che separano il paragrafo da
   cio' che segue, cosi' il titolo sta con il suo testo e non a meta'
   strada fra due blocchi. */
.duetto__testo .t-h3,
.duetto__testo .t-h4{margin-bottom:var(--s4)}
.duetto__testo .corpo{margin-bottom:var(--s6)}
.duetto__testo .corpo:last-child{margin-bottom:0}

/* Foto a filo di pagina — stesso trattamento di .modulo-app__media.
   Qui pero' il testo precede la foto nel DOM: senza --invertito la
   fotografia sta nella colonna destra e deborda a destra, con
   --invertito passa a sinistra (order:-1) e deborda a sinistra.
   .duetto--pieno resta fuori: quella variante non ha .contenitore
   intorno, arriva al bordo da sola, e un margine negativo in piu'
   la spingerebbe oltre lo schermo. */
.duetto:not(.duetto--pieno) .duetto__media{
  border-radius:0;
  margin-right:calc(var(--fuori) * -1);
}
.duetto--invertito:not(.duetto--pieno) .duetto__media{
  margin-right:0;
  margin-left:calc(var(--fuori) * -1);
}

/* ── Filetto sopra il titolo dei moduli alternati ──
   Con la fotografia a filo il peso visivo si sposta tutto da una
   parte: la foto ha un bordo netto, la colonna di testo comincia
   nel vuoto. Il filetto le da' un inizio, e allinea il titolo a un
   segno invece che al nulla.
   Oliva --colore-accento, lo stesso dell'ornamento .orn e
   dell'anello di focus: e' il colore con cui il sito fa i segni.
   Non porta testo, quindi il contrasto non e' un problema. */
.modulo-app__titolo::before,
.duetto:not(.duetto--pieno) .duetto__testo > .t-h2::before,
.duetto:not(.duetto--pieno) .duetto__testo > .t-h3::before{
  content:"";display:block;
  width:56px;height:2px;
  background:var(--colore-accento);
  margin-bottom:var(--s4);
}

/* ═══════════════════════════════════════════════════
   DUETTO A TUTTA LARGHEZZA — prova, 3 agosto 2026
   Attivo solo sulle due sezioni della homepage: "Il territorio" e
   "La storia". Le altre diciotto restano contenute.

   E' lo stesso trattamento della hero spezzata (.hero--diviso): la
   fotografia arriva al bordo dello schermo invece di stare dentro un
   riquadro con gli angoli tondi. Non cambia nessun colore: i fondi
   sono quelli di prima, --colore-fondo e --colore-primario-scuro.

   USO — la sezione NON ha .contenitore:
     <section class="sezione sezione--divisa">
       <div class="duetto duetto--pieno">        (o --pieno --invertito)
         <div class="duetto__testo">...</div>
         <figure class="media duetto__media">...</figure>
       </div>
     </section>

   SE LA PROVA NON CONVINCE si torna indietro togliendo .sezione--divisa
   e .duetto--pieno dal markup e rimettendo il .contenitore: questo
   blocco resta inerte, non tocca il .duetto normale.
   ═══════════════════════════════════════════════════ */

/* .sezione porta 96px di padding sopra e sotto. Qui vanno via: con
   quelli, la fotografia si ritrova due fasce di fondo colorato sopra e
   sotto, ed e' esattamente cio' che toglie l'effetto "a tutta pagina".
   Il respiro verticale si sposta dentro la colonna di testo. */
.sezione--divisa{padding-block:0}

/* Proporzioni ROVESCIATE rispetto alla hero spezzata: qui il testo e' la
   colonna larga (1.1fr, 55%) e la fotografia la stretta (.9fr, 45%).
   Nella hero e' il contrario, ed e' voluto: la linea verticale di stacco
   non cade nello stesso punto: la hero divide a sinistra del centro, la
   sezione a destra. Se coincidessero, due bande in pila sembrerebbero la
   stessa banda ripetuta. */
.duetto--pieno{
  grid-template-columns:1.1fr .9fr;
  gap:0;
  align-items:stretch;
}
/* Con --invertito la fotografia scavalca il testo (order:-1) e prende la
   PRIMA colonna. Se il template restasse invariato, la foto si
   prenderebbe l'1.1fr e il testo lo .9fr: le due sezioni avrebbero
   proporzioni opposte fra loro. Il template si specchia insieme
   all'ordine, cosi' il testo resta largo 55% in entrambi i casi.
   E' l'errore che c'era nella prima prova: la sezione "Dal 1953" aveva il
   testo al 55% ma la calc tarata sul 45%, e partiva 213px fuori asse. */
.duetto--pieno.duetto--invertito{grid-template-columns:.9fr 1.1fr}

/* ATTENZIONE — allineamento del testo alla griglia di pagina.
   Stessa idea di .hero--diviso .hero__pannello, e stessa trappola: la
   colonna sborda fino al bordo, ma il testo deve partire dove parte
   .contenitore, cioe' in linea con l'occhiello delle altre sezioni e con
   la breadcrumb. La percentuale si risolve sulla larghezza della
   COLONNA, non della pagina.

   COME SI RICALCOLA, se cambi il rapporto delle colonne:

       percentuale = (a + b) / (2 * a) * 100

   dove `a` e' la frazione della colonna di TESTO e `b` quella della
   foto. Qui a=1.1, b=.9  ->  2 / 2.2 = 90.909%.
   Nella hero, dove il pannello e' la colonna stretta, a=.9  ->  111.111%.
   (La formula scritta prima, "100 / frazione", tornava per caso solo
   quando le due frazioni sommavano a 2 ed era il pannello stretto.)

   Il max() con --s5 e' la rete: sulle finestre strette la calc scende
   sotto il rientro di pagina, e il testo si aggancia a quello. */
.duetto--pieno .duetto__testo{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s9);
  padding-right:var(--s7);
  padding-left:max(
    var(--s5),
    calc(90.909% - var(--contenuto-max) / 2 + var(--s5))
  );
}

/* Il caso specchiato: la fotografia sta a sinistra e il testo a destra,
   quindi e' il lato DESTRO che deve allinearsi al contenitore. Stessa
   percentuale, perche' ora anche il template e' specchiato e la colonna
   di testo e' larga uguale. Le due regole vanno cambiate insieme. */
.duetto--pieno.duetto--invertito .duetto__testo{
  padding-left:var(--s7);
  padding-right:max(
    var(--s5),
    calc(90.909% - var(--contenuto-max) / 2 + var(--s5))
  );
}

/* La figura riempie la sua meta': niente rapporto fisso 3:2, che in una
   griglia allungata lascerebbe una fascia vuota sotto la foto, e niente
   angoli tondi, che sono il segno del riquadro contenuto.
   min-height regge il caso opposto: una colonna di testo corta che
   schiaccerebbe la fotografia a una striscia. */
.duetto--pieno .duetto__media{
  aspect-ratio:auto;
  border-radius:0;
  height:100%;
  min-height:clamp(360px,48vh,520px);
}
.link-esterno{margin-top:var(--s4)}
.link-esterno a{
  display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  font-size:var(--t-small);font-weight:600;color:var(--colore-carta);
  text-decoration:underline;text-underline-offset:4px;
}
.link-esterno .micro{font-weight:400;text-decoration:none}

/* ═══════════════════════════════════════════════════
   07. FAQ
   ═══════════════════════════════════════════════════ */
/* v3: due colonne su desktop. Prima l'accordion era largo 80ch
   e lasciava vuota tutta la meta' destra. */
.faq-griglia{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s9);align-items:start}
.faq-griglia .intestazione-sezione{position:sticky;top:150px;margin-bottom:0}
.faq{max-width:none}
.faq__voce{border-bottom:1px solid var(--colore-pietra)}
.faq__voce:first-child{border-top:1px solid var(--colore-pietra)}
.faq__domanda{
  font-family:var(--font-display);font-size:var(--t-h4);line-height:1.3;
  color:var(--colore-primario-scuro);font-weight:400;margin:0;
  flex:1;text-align:left;
}
.faq__voce summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;min-height:44px;
}
.faq__voce summary::-webkit-details-marker{display:none}
.faq__voce summary::after{
  content:"";flex:none;width:14px;height:14px;
  border-right:1.8px solid var(--colore-primario);border-bottom:1.8px solid var(--colore-primario);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--t-std) var(--ease);
}
.faq__voce[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq__risposta{padding:0 0 var(--s5);max-width:72ch}

/* ═══════════════════════════════════════════════════
   09. CHIUSURA
   ═══════════════════════════════════════════════════ */
.chiusura{
  position:relative;
  background:repeating-linear-gradient(45deg, var(--p-800) 0 14px, var(--p-900) 14px 28px);
  color:var(--colore-carta);overflow:hidden;
}
.chiusura__sfondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.chiusura.chiusura--ko .chiusura__sfondo{display:none}
.chiusura__nota-scatto{display:none}
.chiusura.chiusura--ko .chiusura__nota-scatto{display:block}
.chiusura::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(46,36,30,.9) 0%,rgba(46,36,30,.55) 100%);
}
.chiusura__contenuto{position:relative;z-index:2;padding-block:var(--s9);width:100%}
.chiusura .t-h2{color:var(--colore-carta);margin-bottom:var(--s5);max-width:18ch}
.chiusura .lead{opacity:.94;margin-bottom:var(--s7);max-width:52ch}
/* Paragrafi dopo il lead e stacco prima dei pulsanti.
   Mancavano: il reset in testa al file azzera i margini di tutti i <p>,
   e dentro .chiusura erano dichiarati solo per .t-h2 e .lead — perche'
   fino a ieri nessuna chiusura aveva altro testo oltre al lead.
   La PDP appartamento ne ha due (nota di assegnazione e orari), e senza
   questa regola restavano incollati fra loro e al pulsante "Prenota".
   Prima, da .duetto__testo, il margine glielo dava quel blocco: e' una
   spaziatura che si e' persa nel passaggio a .chiusura, non una scelta.
   I margini di fratelli adiacenti collassano: fra l'ultimo paragrafo e
   la fila di pulsanti vale il piu' grande dei due, cioe' --s7. */
.chiusura__contenuto .corpo{margin-bottom:var(--s4)}
.chiusura__contenuto .fila-azioni{margin-top:var(--s7)}
.chiusura .occhiello{color:var(--p-200)}
/* Link di testo dentro la chiusura. Senza questa riga prendono il colore
   globale dei link, cioe' il mattone --colore-primario #713A2B, che sul
   pannello --colore-primario-scuro #42211A e' praticamente invisibile:
   due marroni a un passo l'uno dall'altro.
   Serve dalla PDP appartamento, dove la sezione "Prenota il tuo
   soggiorno" contiene il rimando ad "Arrivo e partenza".
   :not(.btn) perche' i due pulsanti hanno gia' le loro regole. */
.chiusura__contenuto a:not(.btn){
  color:var(--colore-carta);
  text-decoration:underline;text-underline-offset:3px;
}
.chiusura .btn--secondario{color:var(--colore-carta);border-color:rgba(250,246,240,.7)}
.chiusura .btn--secondario:hover{background:rgba(250,246,240,.12);border-color:var(--colore-carta)}
.chiusura__nota-scatto{
  position:absolute;bottom:var(--s5);right:var(--s5);z-index:3;
  background:rgba(250,246,240,.94);color:var(--colore-inchiostro);
  border-radius:var(--r-s);padding:var(--s3) var(--s4);
  max-width:30ch;font-size:var(--t-small);line-height:1.45;
}
.chiusura__nota-scatto b{display:block;font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.14em;opacity:.6;
  margin-bottom:var(--s1);font-weight:600}

/* ═══ 1.a — chiusura a tutta altezza ═══
   Stessa statura della hero intera: la sezione di chiusura era alta
   quanto il suo testo, e su schermo largo diventava una fascia sottile
   con dentro una fotografia schiacciata. Con min-height la foto ha lo
   spazio per essere una fotografia, non un fondino.
   Stesso valore della .hero — min(78vh,640px) — perche' apertura e
   chiusura della pagina si rispondano.
   Usata da: homepage e /storia/. Le altre chiusure sono --divisa. */
.chiusura--intera{
  min-height:min(78vh,640px);
  display:flex;align-items:center;
}

/* ═══ 1.b — chiusura spezzata ═══
   Pannello pieno a sinistra, fotografia a destra: la stessa
   impaginazione della hero delle PDP (.hero--diviso), applicata alla
   chiusura. Niente overlay e niente sfondo a piena larghezza — la foto
   e' un elemento, non un fondale su cui scrivere sopra.
   Usata da: /dintorni/, /altre-strutture/ e le tre PDP del gruppo. */
.chiusura--divisa{
  background:none;overflow:visible;
}
.chiusura--divisa::after{content:none}
/* Stesso rapporto della hero spezzata: pannello .9fr, foto 1.1fr.
   NON quello del duetto a tutta larghezza, che e' rovesciato (testo
   largo): li' serviva sfalsare la linea di stacco rispetto alla hero,
   qui invece la chiusura CITA la hero, e la cita per intero. */
.chiusura--divisa__griglia{
  display:grid;grid-template-columns:.9fr 1.1fr;
  background:var(--colore-primario-scuro);
}
/* ATTENZIONE — allineamento del testo alla griglia di pagina.
   Prima il pannello aveva un padding fisso var(--s7): il testo cadeva
   dove capitava, e su schermo largo era decine di pixel fuori dalla
   colonna delle sezioni sopra. Stessa formula di .hero--diviso, stesso
   rapporto di colonne, quindi stessa percentuale: 111.111%.
   Per ricalcolarla se cambi le colonne: (a + b) / (2 * a) * 100, dove
   `a` e' la frazione del PANNELLO. Qui a=.9, b=1.1 -> 2/1.8 = 111.111. */
.chiusura--divisa .chiusura__pannello{
  background:var(--colore-primario-scuro);
  display:flex;align-items:center;
  padding-block:var(--s9);
  padding-right:var(--s7);
  padding-left:max(
    var(--s5),
    calc(111.111% - var(--contenuto-max) / 2 + var(--s5))
  );
}
.chiusura--divisa .chiusura__contenuto{
  position:static;z-index:auto;padding-block:0;
  max-width:44ch;width:auto;margin-inline:0;
}
.chiusura--divisa .chiusura__figura{
  margin:0;border:none;border-radius:0;
  min-height:clamp(360px,52vh,560px);
}
/* La nota di segnaposto della chiusura e' posizionata sulla sezione
   intera (bottom/right assoluti): dentro la versione spezzata finirebbe
   sopra la fotografia a meta' della griglia. Qui vale quella di .media,
   che si posiziona sulla figura. */
.chiusura--divisa .chiusura__nota-scatto{display:none}

/* ═══════════════════════════════════════════════════
   INDICE DI PAGINA — ancore alle sezioni, colonna destra
   Non e' una navigazione di sito: sta nel <main>, punta solo
   a sezioni della pagina corrente. Righe alte 44px per la
   regola sull'area di tocco.
   ═══════════════════════════════════════════════════ */
.indice-pagina{
  border-top:2px solid var(--colore-primario);
  padding-top:var(--s4);margin:0;
}
.indice-pagina .occhiello{
  margin:0;padding-bottom:var(--s4);
  border-bottom:1px solid var(--colore-pietra);
}
.indice-pagina ul{list-style:none;margin:0;padding:0}
.indice-pagina li{border-bottom:1px solid var(--colore-pietra)}
.indice-pagina a{
  display:flex;align-items:center;min-height:44px;
  font-family:var(--font-testo);font-weight:600;
  font-size:var(--t-small);color:var(--colore-primario);
  text-decoration:none;
}
.indice-pagina a:hover{text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════
   ICONE S2 (D-038) — componente unico Icona.astro
   ═══════════════════════════════════════════════════ */
.ico{
  width:24px;height:24px;flex:none;
  fill:none;stroke:var(--colore-primario);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.ico--s{width:20px;height:20px}
.ico--l{width:26px;height:26px}
.orn{
  width:24px;height:24px;fill:none;
  stroke:var(--colore-accento);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* ═══════════════════════════════════════════════════
   PAGINA /appartamenti/ — revisione 2.1
   Pagina editoriale, non comparativa (D-037): niente filtri,
   niente contatore, niente badge, niente riga dati.
   ═══════════════════════════════════════════════════ */

/* Breadcrumb — visibile minuscolo, senza numeri ne' separatori grafici.
   Sta SOTTO la hero: sopra spezzava il legame fra testata e immagine. */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  max-width:var(--contenuto-max);margin-inline:auto;
  padding:var(--s5) var(--s5) 0;
  font-size:var(--t-small);color:var(--colore-inchiostro);opacity:.85;
}
.breadcrumb a{color:var(--colore-inchiostro);text-decoration:none}
.breadcrumb a:hover{color:var(--colore-primario);text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current="page"]{font-weight:600;color:var(--colore-primario-scuro)}

/* Hero fascia A — pagine di scelta (D-035 bis)
   NESSUN USO ATTIVO. Le pagine di scelta (/appartamenti/, /dintorni/,
   /altre-strutture/, /storia/) montano ora la .hero della homepage, alla
   sua altezza piena: erano l'unica fascia bassa del sito e stonavano.
   L'unico riferimento rimasto e' dentro il blocco 01A, commentato, di
   src/pages/appartamenti/[slug].astro. Resta qui finche' quel blocco e'
   un ripiego dichiarato: se 01A si cancella, queste due righe seguono. */
.hero--appartamenti{min-height:clamp(340px,46vh,480px);align-items:center}
.hero--appartamenti .t-h1{max-width:20ch}

/* ─────────────────────────────────────────────────────
   HERO DIVISA — impaginazione di TUTTE le pagine di dettaglio
   Pannello pieno a sinistra, immagine a destra: nessun overlay,
   nessuno sfondo a piena larghezza. Stessa logica di
   .chiusura--divisa, applicata alla hero.

   In uso su:
     - le 10 PDP appartamento   src/pages/appartamenti/[slug].astro (01B)
     - le 10 PDP dintorno       src/pages/dintorni/[slug].astro
     - le 3 PDP altre strutture src/pages/altre-strutture/*/index.astro

   La divisione del lavoro e' questa: fascia con foto a piena larghezza
   e testo sopra (.hero) alle pagine di scelta - home, /appartamenti/,
   /dintorni/, /altre-strutture/, /storia/ - hero spezzata a tutte le
   pagine di dettaglio. Non e' piu' una prova su un solo template:
   cambiarla qui cambia ventitre' pagine.
   ───────────────────────────────────────────────────── */
.hero--diviso{
  min-height:0;background:none;overflow:visible;
  display:block;color:var(--colore-carta);
}
.hero--diviso::after{content:none}
/* Colonne sbilanciate: al pannello basta la misura di lettura,
   la foto si prende lo spazio che le serve per raccontare. */
.hero--diviso__griglia{
  display:grid;grid-template-columns:.9fr 1.1fr;
  background:var(--colore-primario-scuro);
}
/* ATTENZIONE — allineamento del testo alla griglia di pagina.
   Il pannello sborda a sinistra fino al bordo, ma il testo deve
   partire dove parte .contenitore (breadcrumb, sezioni sotto).
   La percentuale si risolve sulla larghezza del pannello: con
   colonne .9fr/1.1fr il pannello e' il 45% della pagina, quindi
   111.111% del pannello = meta' pagina, da cui si sottrae meta'
   contenitore e si riaggiunge il suo padding.
   SE CAMBI IL RAPPORTO DELLE COLONNE, RICALCOLA QUESTA PERCENTUALE:
   e' 100 / (frazione del pannello), qui 100 / .9 di 2 = 111.111. */
.hero--diviso .hero__pannello{
  background:var(--colore-primario-scuro);
  display:flex;align-items:center;
  padding-block:var(--s9);
  padding-right:var(--s7);
  padding-left:max(
    var(--s5),
    calc(111.111% - var(--contenuto-max) / 2 + var(--s5))
  );
}
.hero--diviso .hero__contenuto{
  position:static;z-index:auto;padding-block:0;
  max-width:44ch;width:auto;margin-inline:0;
}
.hero--diviso .hero__figura{
  margin:0;border:none;border-radius:0;
  min-height:clamp(360px,52vh,560px);
}

/* ─── 02. Dotazione comune ─── */
/* Ogni voce porta l'icona del proprio servizio (D-038), mai un segno
   di spunta generico: "Presente" ha senso solo dove esiste uno stato
   opposto, e qui e' tutto presente per definizione. */
/* Due colonne: il paragrafo a sinistra, l'elenco a destra. Prima il testo
   stava da solo a sinistra e la meta' destra restava vuota. */
.dotazione-blocco{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start;
}
.dotazione-blocco .intestazione-sezione{margin-bottom:0;max-width:none}
.dotazione{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);
  margin-top:var(--s2);
}
.dotazione li{
  display:flex;align-items:center;gap:var(--s3);
  color:var(--colore-inchiostro);font-size:var(--t-small);
}
.dotazione svg{flex:none}

/* ─── 03. Moduli sfalsati ─── */
.moduli-appartamenti{
  display:flex;flex-direction:column;gap:var(--s7);
  margin-top:var(--s8);
}
/* Losanga fra un appartamento e il successivo: senza, i moduli
   sembravano scollegati e lo stacco lo faceva solo il vuoto. */
.separatore-moduli{
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  padding-block:var(--s5);
}
.separatore-moduli::before,
.separatore-moduli::after{
  content:"";height:1px;width:min(140px,20vw);
  background:var(--colore-pietra);opacity:.45;
}
.modulo-app{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);
  align-items:center;
}
/* L'immagine precede sempre il testo nel DOM: su mobile l'ordine visivo
   coincide con quello di lettura, senza inversioni. Su desktop
   l'alternanza si ottiene posizionando le colonne, non con `order`. */
.modulo-app__media{grid-column:1;grid-row:1;aspect-ratio:4/3}
.modulo-app__testo{grid-column:2;grid-row:1}
.modulo-app--invertito .modulo-app__media{grid-column:2}
.modulo-app--invertito .modulo-app__testo{grid-column:1}

/* Foto a filo di pagina. Margine negativo su un elemento di griglia in
   stretch: la larghezza cresce verso il bordo, il blocco non trasla e il
   testo resta allineato alla colonna del contenitore. Il raggio sparisce
   perche' un angolo arrotondato contro il bordo dello schermo si legge
   come un errore: qui la fotografia e' un piano, non una scheda. */
.modulo-app__media{
  border-radius:0;
  margin-left:calc(var(--fuori) * -1);
}
.modulo-app--invertito .modulo-app__media{
  margin-left:0;
  margin-right:calc(var(--fuori) * -1);
}
.modulo-app__titolo{color:var(--colore-primario-scuro);margin-bottom:var(--s4)}
.modulo-app__testo .corpo{margin-bottom:var(--s6)}

/* ═══════════════════════════════════════════════════
   LOGHI DELLE ALTRE STRUTTURE DEL GRUPPO
   Passonino, Ristorante Passone, Ristorante TRE.
   File in public/img/loghi/, due varianti per struttura:
   a colori per i fondi chiari, chiara per il pannello mattone.

   NON sono il marchio della Corte: quello vive nella testata e in
   public/img/brand/, e il rosso del marchio resta li' (CLAUDE.md).
   Questi sono marchi altrui, mostrati come firma della struttura di
   cui parla il modulo. Per questo non prendono nessun token di
   colore: si mostrano come sono.
   ═══════════════════════════════════════════════════ */

/* Firma sopra il titolo, nei moduli delle due hub (/dintorni/ e
   /altre-strutture/). Il vincolo forte e' l'ALTEZZA, non la larghezza:
   i sei loghi hanno proporzioni diverse (dal quadrato del Passonino
   breve al 3,2:1 del TRE) e allineandoli per larghezza uno finirebbe
   alto il triplo dell'altro. A parita' di altezza si leggono come una
   famiglia. */
.logo-struttura{
  display:block;width:auto;height:auto;
  max-width:200px;max-height:56px;
  margin-bottom:var(--s4);
}

/* Stessa firma dentro il pannello mattone della hero spezzata, sopra
   l'occhiello. Piu' contenuta: qui sotto arriva un h1, e il logo deve
   introdurlo, non competerci. */
.hero__logo{
  display:block;width:auto;height:auto;
  max-width:180px;max-height:52px;
  margin-bottom:var(--s5);
}
/* Il Passonino breve e' quadrato: a parita' di max-height occuperebbe
   58px di larghezza e sparirebbe accanto agli estesi. Gli si concede
   qualche pixel in piu' di altezza, che e' cio' che rende comparabile
   l'ingombro ottico di un quadrato e di una striscia. */
.hero__logo--quadrato{max-height:68px}
.logo-struttura--quadrato{max-height:72px}

/* ═══════════════════════════════════════════════════
   PDP — pagina di dettaglio appartamento
   ═══════════════════════════════════════════════════ */
/* Blocco titolo + racconto (sezioni "Gli spazi", "{Nome} in sintesi",
   "Prenota il tuo soggiorno"): NON va combinato con .misura sullo stesso
   nodo di .contenitore — .misura ridurrebbe a 54ch anche il contenitore
   centrato, schiacciando titolo e testo in una colonna stretta al centro
   dello schermo invece che nel normale flusso a sinistra. La larghezza di
   lettura la da' gia' .corpo (72ch), qui serve solo lo spazio verticale. */
.pdp-testo .t-h2{margin-bottom:var(--s5)}
.pdp-testo .corpo{margin-bottom:var(--s4)}
.pdp-testo .corpo:last-of-type{margin-bottom:var(--s6)}
.pdp-testo .fila-azioni{margin-top:var(--s2)}
.pdp-testo .dotazione{margin-top:var(--s5)}

/* Sintesi dati (superficie · ospiti · livelli · bagni): cifre tabellari,
   dopo il racconto, mai una griglia dominante (pagina-appartamento-pdp.md §3). */
/* auto-fit e non repeat(5,1fr): le voci sono passate da quattro a cinque
   con l'aggiunta di "Camere", e un numero fisso di colonne va riscritto a
   ogni voce nuova. Con auto-fit la riga si riempie da sola e, quando lo
   spazio non basta, va a capo invece di stringere le cifre. */
.sintesi-dati{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--s5);
  padding-block:var(--s5);margin-block:var(--s5) var(--s6);
  border-block:1px solid var(--colore-pietra);
}
.sintesi-dati div{display:flex;flex-direction:column;gap:var(--s1)}
.sintesi-dati dt{
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;
  color:var(--colore-inchiostro);opacity:.7;
}
.sintesi-dati dd{
  font-family:var(--font-display);font-size:var(--t-h4);
  color:var(--colore-primario-scuro);margin:0;
}

/* ═══ Sezione "Le foto": striscia a tutta larghezza ═══
   La striscia NON sta dentro .contenitore: e' figlia diretta di .sezione,
   che non ha padding-inline. Niente calcoli su 100vw, che sulle finestre
   con barra di scorrimento visibile aggiungono uno scorrimento orizzontale
   al body. Il titolo resta nel contenitore, la striscia esce da sola.

   Tre foto per schermo su desktop, due su tablet, una su mobile: sono i
   default gia' scritti su .carosello__pista, ereditati e non riscritti.
   L'unica cosa da azzerare e' il rientro negativo del contenitore, che qui
   non serve perche' il padding lo mette la striscia stessa.

   Il selettore e' composto (.galleria-app .carosello__pista) e non a classe
   singola: .carosello__pista viene riscritto nei blocchi @media piu' in
   basso nel file, e a parita' di specificita' in CSS vince l'ultimo. Con
   due classi questi override valgono a ogni breakpoint senza doverli
   inseguire.

   NOTA: fino alla v6 il commento si chiudeva a meta' e le sei righe qui
   sopra finivano nel CSS come testo libero. Il parser, cercando la graffa
   che non arrivava, si mangiava la regola successiva: .galleria-app non ha
   mai avuto il suo margine superiore. */
.galleria-app{margin-top:var(--s6)}
.galleria-app .carosello__pista{
  margin-inline:0;
  padding-inline:var(--s5);
  scroll-padding-inline:var(--s5);
}
/* Il piede torna dentro il contenitore: la striscia esce ai bordi, barra
   e contatore no, altrimenti si allineerebbero al nulla invece che al
   titolo della sezione. */
.galleria-app .carosello__piede{
  max-width:var(--contenuto-max);
  margin-inline:auto;
  padding-inline:var(--s5);
  margin-top:var(--s4);
}
/* ORIZZONTALE 3:2, il file e' 1200×800.
   Era verticale 4:5 (1200×1500), scelto quando le foto non c'erano
   ancora. Gli scatti reali degli appartamenti sono orizzontali —
   4096×2731, cioe' 3:2 a meno di un terzo di pixel — e in un frame
   verticale object-fit:cover avrebbe tagliato via meta' inquadratura
   per lato: esattamente i dettagli che la sezione "Le foto" esiste per
   mostrare. Il rapporto segue le fotografie, non viceversa.
   object-fit:cover di .media assorbe comunque lo scarto se uno scatto
   arriva con proporzioni leggermente diverse. */
.galleria-app__foto{aspect-ratio:3/2;height:100%}
.galleria-app .media__nota{max-width:none;margin:var(--s3)}

/* ═══════════════════════════════════════════════════
   PAGINE /dintorni/{slug}/ — tappe numerate e info utili
   Stessa logica di .pdp-testo: NON combinare .contenitore con .misura.
   ═══════════════════════════════════════════════════ */
.tappe{
  counter-reset:tappa;display:flex;flex-direction:column;gap:var(--s6);
  margin-top:var(--s6);
}
.tappe li{display:flex;gap:var(--s5);align-items:flex-start}
.tappe li::before{
  counter-increment:tappa;content:counter(tappa);
  flex:none;width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--colore-primario);color:var(--colore-carta);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--t-corpo);
}
.tappe h3{margin-bottom:var(--s2);color:var(--colore-primario-scuro)}

/* ═══════════════════════════════════════════════════
   PAGINA /prenota/ — modulo + aside "Come funziona"
   ═══════════════════════════════════════════════════ */
.prenota-griglia{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s9);align-items:start}
.prenota-griglia__aside{
  position:sticky;top:calc(var(--altezza-testata) + var(--s4));
  border-top:2px solid var(--colore-primario);padding-top:var(--s5);
}
.prenota-griglia__aside .tappe{margin-top:var(--s5)}
.prenota-griglia__aside .tappe li::before{width:32px;height:32px;font-size:var(--t-small)}
.prenota-griglia__aside .corpo{margin-top:var(--s5)}
.prenota-griglia__link{
  margin-top:var(--s5);border-top:1px solid var(--colore-pietra);
  display:flex;flex-direction:column;
}
.prenota-griglia__link a{
  display:flex;align-items:center;min-height:44px;
  border-bottom:1px solid var(--colore-pietra);
  font-weight:600;color:var(--colore-primario);text-decoration:none;
}
.prenota-griglia__link a:hover{text-decoration:underline}

.info-utili{border-top:1px solid var(--colore-pietra);margin-top:var(--s6)}
.info-utili div{
  display:grid;grid-template-columns:220px 1fr;gap:var(--s5);
  padding-block:var(--s4);border-bottom:1px solid var(--colore-pietra);
}
.info-utili dt{font-weight:600;color:var(--colore-primario-scuro)}
.info-utili dd{margin:0;font-size:var(--t-small);color:var(--colore-inchiostro)}

/* Mappa reale del luogo (docs/14. Dintorni mappe - Corte - Addendum.docx
   §02). Stessa cornice della mappa di /contatti/: raggio 18px, bordo
   pietra 1px. L'iframe non e' interattivo (pointer-events:none): un
   click ovunque sul riquadro apre le indicazioni stradali su Google
   Maps, tramite l'<a> che lo avvolge. */
.mappa-luogo{margin-top:var(--s6)}
.mappa-luogo__indirizzo{font-weight:600;color:var(--colore-primario-scuro);margin-bottom:var(--s3)}
.mappa-luogo__cornice{
  position:relative;display:block;height:280px;margin-bottom:var(--s3);
  border:1px solid var(--colore-pietra);border-radius:var(--r-l);overflow:hidden;
  outline-offset:3px;
}
.mappa-luogo__cornice iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.mappa-luogo__apri{
  display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  font-weight:600;font-size:var(--t-small);color:var(--colore-primario);
  text-decoration:underline;text-underline-offset:3px;
}
.mappa-luogo__nota{margin-top:var(--s3)}

/* ═══════════════════════════════════════════════════
   SOTTO-MENU STICKY — /dintorni/ e /domande-frequenti/
   ═══════════════════════════════════════════════════ */
/* Link testuali verso le sezioni della pagina: non sono filtri,
   non generano parametri, non nascondono contenuto. Sticky sotto la
   testata: si aggancia quando la hero (o l'introduzione) esce dallo
   schermo. L'altezza reale della testata arriva da --altezza-testata,
   impostata via JS in main.js perche' cambia con lo scroll e con il
   breakpoint. Classe generica: stesso comportamento su piu' pagine,
   vedi lo script in main.js che opera per classe, non per id. */
.sotto-nav-sticky{
  position:sticky;top:var(--altezza-testata);z-index:90;
  background:var(--colore-fondo);border-bottom:1px solid var(--colore-fondo-alt);
  transition:box-shadow var(--t-std) var(--ease);
}
.sotto-nav-sticky__lista{
  display:flex;gap:var(--s2) var(--s6);list-style:none;
  max-width:var(--contenuto-max);margin-inline:auto;
  padding:var(--s3) var(--s5);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.sotto-nav-sticky__lista::-webkit-scrollbar{display:none}
.sotto-nav-sticky__link{
  font-weight:600;font-size:var(--t-small);color:var(--colore-inchiostro);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;border-bottom:1.5px solid transparent;
}
.sotto-nav-sticky__link:hover{color:var(--colore-primario)}
.sotto-nav-sticky__link.active{color:var(--colore-primario);border-bottom-color:var(--colore-primario)}

/* Tre card statiche, sempre visibili: niente carosello (docs pagina hub §6). */
.griglia-card{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  margin-top:var(--s7);
}

/* ═══════════════════════════════════════════════════
   PIEDE
   ═══════════════════════════════════════════════════ */
.piede{background:var(--colore-inchiostro);color:var(--colore-carta);padding-block:var(--s8) var(--s6)}
.piede__griglia{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:var(--s7)}
.piede h2,.piede h3{
  font-family:var(--font-testo);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--p-200);margin-bottom:var(--s5);
}
.piede h2 a,.piede h3 a{color:var(--p-200);font-size:12px;min-height:0;letter-spacing:.2em}
.piede h2 a:hover,.piede h3 a:hover{color:var(--colore-carta)}
.piede a{color:var(--colore-carta);text-decoration:none;font-size:var(--t-small);
  display:inline-flex;align-items:center;min-height:34px}
.piede a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--p-100)}
.piede li{line-height:1.4}
/* Marchio del piede. Serve l'override di min-height e align-items ereditati
   da ".piede a": quella regola e' scritta per i link testuali dell'elenco e
   su un'immagine aggiungerebbe spazio sotto il logo. */
.piede__marchio{
  display:block;min-height:0;align-items:initial;
  max-width:190px;margin-bottom:var(--s6);
}
.piede__marchio img{width:100%;height:auto}
.piede__marchio:hover{opacity:.85}
.piede__contatti p{font-size:var(--t-small);margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
.piede__contatti .btn{margin-bottom:var(--s5)}
.piede__separatore{
  height:1px;background:rgba(168,156,141,.3);margin-block:var(--s5);
}
.piede__social-titolo{
  font-family:var(--font-testo);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--p-200);margin-bottom:var(--s4);
}
.piede__social{display:flex;gap:var(--s3)}
.piede__social a{
  width:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid rgba(250,246,240,.3);
  display:flex;align-items:center;justify-content:center;
}
.piede__social a:hover{border-color:var(--p-200);background:rgba(250,246,240,.08)}
.piede__coda{
  margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid rgba(168,156,141,.35);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);
  align-items:baseline;justify-content:space-between;
}
.piede__legali{display:flex;gap:var(--s5);flex-wrap:wrap}
.piede__legali a{font-size:var(--t-micro);min-height:0;text-decoration:underline;opacity:.8}
.piede__legali a:hover{opacity:1}
.piede__societari{
  font-size:var(--t-micro);opacity:.75;line-height:1.7;
  font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════════════
   CTA STICKY MOBILE — compare quando la hero esce dallo schermo
   ═══════════════════════════════════════════════════ */
.cta-mobile{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(241,236,229,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--colore-fondo-alt);
  box-shadow:0 -6px 18px -12px rgba(0,0,0,.35);
  transform:translateY(110%);
  transition:transform var(--t-std) var(--ease);
}
.cta-mobile .btn{width:100%;gap:var(--s3)}
.cta-mobile .btn svg{flex:none}
.cta-mobile.visibile{transform:translateY(0)}

/* ═══════════════════════════════════════════════════
   BREAKPOINT — tablet
   ═══════════════════════════════════════════════════ */
@media (max-width:1024px){
  :root{--t-h1:2.75rem;--t-h2:2rem;--t-h3:1.5rem;--t-h4:1.25rem;--t-lead:1.0625rem}
  .sezione{padding-block:var(--s8)}
  .intro__griglia,.duetto{grid-template-columns:1fr;gap:var(--s7)}
  .duetto--invertito .duetto__media{order:0}
  /* Colonna unica: niente alternanza da compensare, la foto esce da
     entrambi i lati e vale il solo rientro del contenitore. Stessa
     specificita' delle regole base (0,3,0), quindi vince perche' viene
     dopo: la media query non alza nulla, vedi la nota qui sotto. */
  .duetto:not(.duetto--pieno) .duetto__media,
  .duetto--invertito:not(.duetto--pieno) .duetto__media{
    margin-inline:calc(var(--s5) * -1);
  }

  /* Duetto a tutta larghezza: da qui in giu' e' una colonna sola, e la
     calc di allineamento va DISATTIVATA. Non e' una rifinitura: su una
     colonna larga quanto lo schermo, `90.909% - meta' contenitore`
     diventa un padding di centinaia di pixel e il testo sparisce fuori
     dallo schermo. Il max() con --s5 non basta a proteggere, perche' il
     valore e' grande, non negativo.
     Le due righe qui sotto devono stare DOPO .duetto, che poche righe
     sopra rimette gap e colonna singola: a parita' di specificita' in
     CSS vince l'ultima. */
  .sezione--divisa{padding-block:0}
  /* LA RIGA CHE SERVE DAVVERO, e il motivo per cui serve.
     Poche righe sopra `.intro__griglia,.duetto` rimette la colonna
     singola, ma e' UNA classe: specificita' (0,1,0). La regola base
     `.duetto--pieno.duetto--invertito` ne ha DUE, (0,2,0), e una media
     query NON alza la specificita' — la limita e basta. Risultato: la
     sezione invertita restava a due colonne su qualunque schermo, con il
     testo in una striscia da 100px accanto alla foto.
     Va quindi ripetuta qui con almeno la stessa specificita'. E' la
     trappola descritta in CLAUDE.md a proposito degli stili scoped, e
     vale identica fra due regole globali. */
  .duetto--pieno,
  .duetto--pieno.duetto--invertito{grid-template-columns:1fr}
  .duetto--pieno{gap:0}
  .duetto--pieno .duetto__testo,
  .duetto--pieno.duetto--invertito .duetto__testo{
    padding:var(--s8) var(--s5);
  }
  /* Impilati, l'immagine va sopra il testo come nella hero spezzata:
     su schermo stretto il titolo resta la prima cosa che si legge solo
     se la foto non gli sta davanti. Qui pero' la foto e' il richiamo
     della sezione, non la sua hero, quindi resta dove la mette il DOM
     e cambia solo l'altezza. */
  .duetto--pieno .duetto__media{min-height:clamp(260px,38vh,360px)}
  .prove{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
  .nav-principale{display:none}
  .apri-menu{display:flex}
  .piede__griglia{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .faq-griglia{grid-template-columns:1fr;gap:var(--s7)}
  /* due card per schermo */
  .carosello__pista > *{flex:0 0 calc((100% - var(--s5)) / 2)}
  .faq-griglia .intestazione-sezione{position:static}
  .cta-mobile{display:block}
  .piede{padding-bottom:calc(var(--s6) + var(--altezza-cta-mobile))}
  .dotazione-blocco{grid-template-columns:1fr;gap:var(--s6)}
  .griglia-card{grid-template-columns:1fr 1fr}
  .dotazione{grid-template-columns:repeat(2,1fr);margin-top:var(--s5)}

  /* Moduli appartamento: colonna unica, immagine sopra il testo.
     Le posizioni di griglia vanno azzerate, altrimenti la seconda
     colonna resta assegnata e i moduli invertiti si sovrappongono. */
  .modulo-app{grid-template-columns:1fr;gap:var(--s5)}
  .modulo-app__media,
  .modulo-app__testo,
  .modulo-app--invertito .modulo-app__media,
  .modulo-app--invertito .modulo-app__testo{grid-column:auto;grid-row:auto}
  /* Colonna unica: niente alternanza da compensare, la foto esce da
     entrambi i lati e vale il solo rientro del contenitore. */
  .modulo-app__media,
  .modulo-app--invertito .modulo-app__media{
    margin-inline:calc(var(--s5) * -1);
  }
  .moduli-appartamenti{gap:var(--s8)}

  .split,
  .split--elenco,
  .split--azione{display:block}
  .split--sticky .split__testa{position:static}
  .split__testa .t-h1,
  .split__testa .t-h2{margin-bottom:var(--s4)}
  .split__corpo{margin-top:var(--s6)}
  .split--elenco .split__corpo,
  .split--pari .split__corpo{border-left:none;padding-left:0}
  .split .info-utili div{grid-template-columns:1fr;gap:var(--s1)}

  .chiusura--divisa__griglia{grid-template-columns:1fr}
  /* Su mobile il PANNELLO viene prima e la fotografia dopo, come nella
     hero spezzata delle PDP: stessa impaginazione, stesso ordine.
     Prima la foto scavalcava il testo (order:-1) e la sezione si apriva
     con un'immagine muta.
     C'e' anche una ragione cromatica: sotto la chiusura comincia il
     piede, che e' --colore-inchiostro. Con il pannello mattone sopra, la
     fotografia resta incastrata fra due blocchi scuri invece di stare
     appiccicata alla sezione chiara che la precede. */
  .chiusura--divisa .chiusura__figura{min-height:280px;order:0}
  /* La calc di allineamento va DISATTIVATA a colonna singola: su una
     colonna larga quanto lo schermo `111.111% - meta' contenitore`
     diventa un padding di centinaia di pixel e il testo esce fuori.
     Due classi, come la regola base, altrimenti non vince: una media
     query non alza la specificita' (vedi .duetto--pieno, stesso caso). */
  .chiusura--divisa .chiusura__pannello{
    padding:var(--s8) var(--s5);
  }
  /* A tutta altezza su schermo stretto la chiusura non serve: il
     contenuto la riempie da solo e min-height creerebbe vuoto. */
  .chiusura--intera{min-height:0;display:block}

  /* Hero divisa: le due meta' si impilano nell'ordine del markup,
     pannello sopra e immagine sotto. Il titolo resta la prima cosa
     che si legge senza dover scorrere oltre una foto.
     Il testo si appoggia in alto, non centrato: su schermo stretto
     il pannello e' piu' alto del suo contenuto e il blocco centrato
     galleggiava lontano dal bordo superiore. */
  .hero--diviso__griglia{grid-template-columns:1fr}
  .hero--diviso .hero__figura{min-height:260px}
  .hero--diviso .hero__pannello{
    align-items:flex-start;
    padding:var(--s8) var(--s5);
  }
  .hero--diviso .hero__contenuto{max-width:none}

  .prenota-griglia{display:block}
  .prenota-griglia__aside{position:static;margin-top:var(--s7);padding-top:var(--s6)}
}

/* ═══════════════════════════════════════════════════
   BREAKPOINT — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width:640px){
  :root{--t-h1:2.125rem;--t-h2:1.6875rem;--t-h3:1.3125rem;--t-h4:1.1875rem}
  .contenitore{padding-inline:var(--s4)}
  /* Il rientro del contenitore passa a s4: il debordamento lo segue. */
  .modulo-app__media,
  .modulo-app--invertito .modulo-app__media{
    margin-inline:calc(var(--s4) * -1);
  }
  .duetto:not(.duetto--pieno) .duetto__media,
  .duetto--invertito:not(.duetto--pieno) .duetto__media{
    margin-inline:calc(var(--s4) * -1);
  }
  /* Il testo del duetto pieno e il pannello della chiusura spezzata
     seguono il rientro del contenitore a ogni breakpoint: qui s4, come
     tutto il resto della pagina. */
  .duetto--pieno .duetto__testo,
  .duetto--pieno.duetto--invertito .duetto__testo{
    padding:var(--s7) var(--s4);
  }
  .chiusura--divisa .chiusura__pannello{
    padding:var(--s7) var(--s4);
  }
  .sezione{padding-block:var(--s7)}
  .hero__contenuto{padding-block:var(--s8) var(--s7)}
  /* Su mobile la nota di segnaposto resta nascosta anche a file mancante:
     coprirebbe mezza hero. Il selettore ripete .hero--ko / .chiusura--ko
     perche' senza deve battere quelle regole, che hanno specificita' 0,3,0
     contro lo 0,1,0 di una classe sola. */
  .hero.hero--ko .hero__nota-scatto,
  .chiusura.chiusura--ko .chiusura__nota-scatto{display:none}
  .hero .t-h1,.chiusura .t-h2{max-width:none}
  .misura,.misura--stretta{max-width:none}
  .fila-azioni{flex-direction:column;align-items:stretch}
  .fila-azioni .btn{width:100%}
  /* v4: elementi di prova centrati su mobile.
     Il paragrafo sopra resta allineato a sinistra: il testo lungo
     centrato e' piu' faticoso da leggere. */
  .prove{grid-template-columns:1fr;gap:var(--s5);text-align:center}
  /* una sola card per schermo: swipe = card successiva */
  .carosello__pista{
    margin-inline:calc(var(--s4) * -1);
    padding-inline:var(--s4);
    scroll-padding-inline:var(--s4);
    gap:var(--s4);
  }
  /* LEMBO: la card non arriva al bordo, lascia scoperti --sbircia pixel
     della successiva. A 100% la pista sembrava un'immagine ferma e
     nessuno provava a scorrere; il lembo della card dopo e' il solo
     segnale che funziona senza istruzioni. */
  .carosello__pista > *{flex:0 0 calc(100% - var(--sbircia))}
  /* Le frecce spariscono: qui si scorre col dito, e due bersagli da 52px
     sotto ogni carosello rubavano una riga di schermo per niente.
     Barra e contatore restano e portano tutta l'informazione. */
  .carosello__comandi{display:none}
  .apri-menu{right:var(--s4)}

  /* v5: hero allineata a sinistra su mobile, tutte.
     In v3 erano centrate perche' su schermi stretti la colonna sinistra
     restava vuota; la hero divisa faceva gia' eccezione e restava a
     sinistra. Due comportamenti diversi per la stessa cosa: ora vale
     l'allineamento a sinistra ovunque, che e' anche il bordo su cui
     cadono breadcrumb, sezioni e piede.
     Il max-width del titolo cade gia' qualche riga piu' su. */
  .hero__contenuto{text-align:left}
  .hero .t-h1,.hero .lead,.hero .occhiello{margin-inline:0}
  .hero .fila-azioni{align-items:stretch}

  /* v3: piede centrato su mobile, stessa ragione */
  .piede__griglia{grid-template-columns:1fr;gap:var(--s7);text-align:center}
  .piede__contatti .btn{margin-inline:auto}
  .piede__marchio{margin-inline:auto}
  .piede a{justify-content:center}
  .piede__social{justify-content:center}
  .piede__coda{flex-direction:column;align-items:center;text-align:center}
  .piede__legali{justify-content:center}
  .piede__separatore{max-width:180px;margin-inline:auto}

  /* Si centra il blocco, non la singola riga. Dentro ogni riga icona ed
     etichetta restano allineate a sinistra, cosi' le icone formano una
     colonna netta invece di uno zig-zag. */
  .dotazione{
    display:flex;flex-direction:column;
    width:max-content;max-width:100%;margin-inline:auto;
  }
  .dotazione li{justify-content:flex-start}

  .sintesi-dati{grid-template-columns:repeat(2,1fr);gap:var(--s4)}

  .info-utili div{grid-template-columns:1fr;gap:var(--s1)}
  .tappe{gap:var(--s5)}
  .tappe li{gap:var(--s4)}
  .tappe li::before{width:32px;height:32px;font-size:var(--t-small)}

  .griglia-card{grid-template-columns:1fr}

  /* .campo-riga, .campo-eta-bambini e .mappa-sito-griglia stavano qui e
     non hanno mai funzionato: le loro regole base sono dichiarate PIU'
     IN BASSO nel file, stessa specificita', quindi vincevano loro.
     Sono state spostate in fondo, nel blocco mobile di coda. */
}

/* ═══════════════════════════════════════════════════
   TESTATA SENZA HERO — /grazie/ e /termini-condizioni/
   Le sole due pagine rimaste con il titolo su testo nudo. Le sei di
   servizio elencate qui prima (/prenota/, /contatti/, /domande-frequenti/
   e le altre) sono passate alla fascia mattone: vedi il blocco sotto.
   Queste due restano fuori perche' nessuno le raggiunge dalla
   navigazione - a /grazie/ ci si arriva dopo l'invio del modulo - ma se
   un giorno entrano nel menu, la fascia vale anche per loro.
   ═══════════════════════════════════════════════════ */
.testata-testo .t-h1{margin-bottom:var(--s5)}
.testata-testo .lead{max-width:60ch;margin-bottom:var(--s4)}
.testata-testo .corpo:last-child{margin-bottom:0}

/* ─────────────────────────────────────────────────────
   TESTATA A FASCIA MATTONE — le sei pagine di servizio
   /contatti/  /prenota/  /domande-frequenti/
   /privacy-policy/  /cookie-policy/  /mappa-del-sito/

   Erano in tre stati diversi (testo nudo a una colonna, testo nudo a
   due, hero fotografica) e per una fase in due varianti a confronto.
   Scelta: fascia mattone piena su tutte e sei. La variante a pannello
   stretto (.testata-spezzata) e' stata cancellata.

   PERCHE' NON USA .split — l'allineamento e' il punto.
   Con .split l'occhiello sta dentro la colonna sinistra, quindi la
   descrizione a destra parte all'altezza dell'occhiello, non del
   titolo: su /domande-frequenti/, dove l'h1 va a capo, la descrizione
   sembrava piu' alta del titolo. Qui l'occhiello occupa una riga di
   griglia tutta sua e titolo e testo cadono nella riga successiva:
   partono dalla stessa linea per costruzione, con h1 di una o tre
   righe, senza margini calcolati a mano.
   ───────────────────────────────────────────────────── */
.testata-piena{
  background:var(--colore-primario-scuro);
  color:var(--colore-carta);
  padding-block:var(--s9);
}
.testata-piena__griglia{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  column-gap:var(--s9);
  align-items:start;
}
/* riga 1: solo l'occhiello, a tutta larghezza */
.testata-piena__griglia > .occhiello{grid-column:1 / -1;color:var(--p-200)}
/* riga 2: titolo a sinistra, testo a destra, stessa linea di partenza */
.testata-piena__griglia > .t-h1{grid-column:1;color:var(--colore-carta);margin-bottom:0}
.testata-piena__testo{grid-column:2}
.testata-piena__testo .lead{color:var(--colore-carta);opacity:.94;margin-bottom:0}
.testata-piena__testo .corpo{margin-top:var(--s4);margin-bottom:0}
.testata-piena__testo .corpo:last-child{margin-bottom:0}

/* Il @media sta QUI, sotto le regole base, e non nei blocchi in alto:
   queste classi sono dichiarate in fondo al file e a parita' di
   specificita' vincerebbero loro. Stessa trappola descritta nel blocco
   "MOBILE DI CODA". */
@media (max-width:1024px){
  .testata-piena__griglia{grid-template-columns:1fr}
  .testata-piena__griglia > .t-h1{grid-column:1}
  .testata-piena__testo{grid-column:1;margin-top:var(--s6)}
}
@media (max-width:640px){
  .testata-piena{padding-block:var(--s7)}
}

/* ═══════════════════════════════════════════════════
   PAGINA /contatti/
   ═══════════════════════════════════════════════════ */
/* auto-fit invece di breakpoint fissi: si adatta da solo, e con
   min-width:0 sul figlio evita il bug per cui una grid track non si
   restringe mai sotto la larghezza "intrinseca" del suo contenuto
   (un indirizzo o un'email lunghi, senza spazi dove andare a capo,
   spingevano la griglia oltre la larghezza dello schermo su mobile). */
.recapiti-griglia{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s5);margin-top:var(--s7);
}
.recapito{
  min-width:0;
  background:var(--colore-carta);border:1px solid var(--colore-fondo-alt);border-radius:var(--r-m);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--ombra-s);
}
.recapito svg{width:28px;height:28px;flex:none;color:var(--colore-primario);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recapito__canale{font-family:var(--font-display);font-size:var(--t-h4);color:var(--colore-primario-scuro);margin:0}
.recapito__valore{font-size:var(--t-small);opacity:.85;font-variant-numeric:tabular-nums;margin:0;overflow-wrap:break-word}
.recapito__azione{
  margin-top:auto;font-weight:600;font-size:var(--t-small);color:var(--colore-primario);
  display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;text-decoration:none;
}
.recapito__azione:hover{text-decoration:underline;text-underline-offset:3px}

.recapiti-social{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s6)}
.recapiti-social a{
  display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  font-size:var(--t-small);font-weight:600;color:var(--colore-inchiostro);text-decoration:none;
}
.recapiti-social a:hover{color:var(--colore-primario)}
.recapiti-social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════════════════════════════════
   PAGINA /domande-frequenti/ — accordion a colonna singola
   ═══════════════════════════════════════════════════ */
.faq-colonna{max-width:820px}
.faq-colonna .faq__voce:first-child{border-top:1px solid var(--colore-pietra)}
.faq-gruppo{margin-top:var(--s8)}
.faq-gruppo:first-of-type{margin-top:var(--s7)}
.faq-gruppo .t-h2{margin-bottom:var(--s2)}

/* ═══════════════════════════════════════════════════
   PAGINA /storia/ — galleria d'archivio
   ═══════════════════════════════════════════════════ */
/* La galleria d'archivio E' la galleria delle PDP appartamento: stessa
   striscia a tutta larghezza (.galleria-app), stesso piede, stesso
   numero di foto per schermo, stesso rapporto.
   L'ultima differenza e' caduta il 3 agosto 2026: /storia/ era gia' 3:2
   perche' gli scatti d'archivio sono orizzontali, e ora lo sono anche
   quelli degli appartamenti. La riga che qui riscriveva aspect-ratio non
   serve piu': il valore arriva da .galleria-app__foto. */
/* Le didascalie d'archivio stanno sotto la foto e si leggono: non sono
   la nota di segnaposto sovrapposta delle altre gallerie. */
.galleria-storia .media__nota{
  position:static;background:none;padding:0;
  margin:var(--s2) 0 0;text-align:left;max-width:none;
}

/* ═══════════════════════════════════════════════════
   EMBED IUBENDA — /privacy-policy/ e /cookie-policy/

   Altezza fissa e non aspect-ratio: dentro c'e' un documento di
   testo, la cui lunghezza non ha rapporto con la larghezza della
   colonna. L'iframe scorre per conto suo quando il testo eccede.
   800px e' la stessa misura gia' in uso su C:\dev\TRE\tre-site-astro,
   verificata su entrambe le informative; 600px sotto i 768px, dove
   una finestra piu' alta della schermata si mangia tutta la pagina.
   ═══════════════════════════════════════════════════ */
.iubenda-embed{
  background:var(--colore-carta);
  border:1px solid var(--colore-pietra);
  border-radius:var(--r-m);
  overflow:hidden;
  margin-top:var(--s5);
}
.iubenda-embed iframe{
  width:100%;height:800px;border:0;display:block;
}
@media (max-width:768px){
  .iubenda-embed iframe{height:600px}
}

/* ═══════════════════════════════════════════════════
   404 — nessuna immagine, ampia respirazione verticale
   ═══════════════════════════════════════════════════ */
.errore-404{padding-block:var(--s9);text-align:center;min-height:50vh}
.errore-404 .occhiello,
.errore-404 .t-h1,
.errore-404 .lead{margin-inline:auto}
.errore-404 .t-h1{margin-bottom:var(--s5)}

/* ═══════════════════════════════════════════════════
   PAGINA /mappa-del-sito/
   ═══════════════════════════════════════════════════ */
.mappa-sito-griglia{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8) var(--s9)}
.mappa-sito-gruppo .t-h2{margin-bottom:var(--s5)}
.mappa-sito-lista{display:flex;flex-direction:column;gap:var(--s4)}
/* Link di primo livello come pulsanti a tutti gli effetti: sfondo,
   bordo e stato hover pieno, non solo testo sottolineato. */
.mappa-sito-lista > li > a{
  font-weight:600;color:var(--colore-primario-scuro);text-decoration:none;
  display:inline-flex;min-height:44px;align-items:center;
  padding-inline:var(--s4);border-radius:var(--r-pill);
  border:1.5px solid var(--colore-primario);background:var(--colore-carta);
  transition:background var(--t-micro-ms) var(--ease),color var(--t-micro-ms) var(--ease);
}
.mappa-sito-lista > li > a:hover{background:var(--colore-primario);color:var(--colore-carta)}
.mappa-sito-sottolista{
  display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);
  padding-left:var(--s5);border-left:1px solid var(--colore-fondo-alt);
}
.mappa-sito-sottolista a{
  font-size:var(--t-small);font-weight:600;color:var(--colore-inchiostro);text-decoration:none;
  display:inline-flex;min-height:44px;align-items:center;
  padding-inline:var(--s3);border-radius:var(--r-pill);
  border:1px solid var(--colore-fondo-alt);background:var(--colore-carta);
  transition:background var(--t-micro-ms) var(--ease),border-color var(--t-micro-ms) var(--ease),color var(--t-micro-ms) var(--ease);
}
.mappa-sito-sottolista a:hover{background:var(--colore-primario);border-color:var(--colore-primario);color:var(--colore-carta)}

/* ═══════════════════════════════════════════════════
   PAGINA /termini-condizioni/
   ═══════════════════════════════════════════════════ */
/* .avviso-bozza e' stata rimossa insieme al banner "Bozza di lavoro, non
   ancora validata legalmente" che la usava, e che era il suo unico
   consumatore in tutto il sito. Se un domani servisse di nuovo un avviso
   rosso di pagina, si riscrive: tenerla qui sarebbe CSS morto servito a
   ogni visitatore del sito, non un risparmio. */
.lista-legale{list-style:disc;padding-left:var(--s6);display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}

/* ═══════════════════════════════════════════════════
   PAGINA /prenota/ — modulo di richiesta
   ═══════════════════════════════════════════════════ */
.modulo-prenota{max-width:560px}
.modulo-prenota fieldset{border:0;padding:0;margin:0 0 var(--s7)}
.modulo-prenota fieldset:last-of-type{margin-bottom:var(--s6)}
.modulo-prenota legend{
  font-family:var(--font-display);font-size:var(--t-h4);color:var(--colore-primario-scuro);
  margin-bottom:var(--s5);padding:0;
}
.campo{margin-bottom:var(--s5)}
.campo label{display:block;font-weight:600;font-size:var(--t-small);margin-bottom:var(--s2)}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="number"],
.campo select,
.campo textarea{
  width:100%;min-height:44px;padding:var(--s3) var(--s4);
  border:1px solid var(--colore-pietra);border-radius:var(--r-s);
  background:var(--colore-carta);color:var(--colore-inchiostro);
  font-family:var(--font-testo);font-size:var(--t-corpo);
}
.campo textarea{resize:vertical;min-height:100px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--colore-accento);outline-offset:2px;border-color:var(--colore-accento)}
.campo__aiuto{font-size:var(--t-micro);opacity:.7;margin-top:var(--s2)}
.campo__errore{font-size:var(--t-small);color:var(--colore-errore);font-weight:600;margin-top:var(--s2)}
.campo.con-errore input,.campo.con-errore select{border-color:var(--colore-errore)}
.campo-riga{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.campo-eta-bambini{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-bottom:var(--s5)}

/* ─── Campi data: tre correzioni per i browser mobili ───

   1) SI ACCAVALLANO. input[type=date] ha una larghezza intrinseca sua,
      che su WebKit e su Chrome mobile vince su width:100%. In una cella
      di griglia il default e' min-width:auto, cioe' l'elemento non si
      restringe sotto la propria min-content width: sborda e finisce
      sopra il campo accanto. min-width:0 rimette la larghezza sotto il
      controllo della griglia.

   2) MANCA L'ICONA. Prima di essere valorizzato il campo non mostra
      nulla che faccia capire che si apre un calendario: su iOS il
      controllo nativo non disegna alcuna icona. Qui la disegna il
      background (SVG inline, nessuna richiesta esterna) e l'indicatore
      nativo di WebKit resta sopra, trasparente ma cliccabile, cosi'
      dove esiste non se ne vedono due.
      L'SVG e' lo stesso calendario del pulsante "Prenota". Il colore e'
      scritto a mano perche' dentro un data URI non entra una var():
      se cambia --colore-primario va cambiato anche %23713A2B qui. */
.campo-riga > .campo,
.campo-eta-bambini > .campo{min-width:0}
.campo input[type="date"]{
  min-width:0;max-width:100%;
  /* 3) SBORDANO A DESTRA SU iOS. Safari mobile impone al controllo data
        la sua larghezza intrinseca e ignora width:100%, anche a colonna
        singola: il campo esce dal contenitore e la pagina scorre in
        orizzontale. Togliere l'aspetto nativo rimette la larghezza sotto
        il controllo del CSS. Il picker nativo continua ad aprirsi al
        tocco; l'altezza la tiene il min-height:44px della regola comune. */
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23713A2B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3.5v4M16 3.5v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s4) center;
  background-size:20px 20px;
  padding-right:calc(var(--s4) * 2 + 20px);
}
.campo input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;width:20px;height:20px;
  margin:0;padding:0;cursor:pointer;
}
/* Disattivati dalla spunta "Non ho ancora date precise": lo stato non
   e' dato dal solo colore, il campo e' anche non interattivo. */
.campo input[type="date"]:disabled{opacity:.55;cursor:not-allowed}
.campo-eta-bambini .campo{margin-bottom:0}
.campo-eta-bambini[hidden]{margin-bottom:0}
.campo-checkbox{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
.campo-checkbox input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--colore-primario)}
.campo-checkbox label{display:block;font-weight:400;font-size:var(--t-small)}
/* Senza questa riga il testo di aiuto (span inline) resta incollato alla
   riga sopra: gli span non rispettano margin-top da inline. */
.campo-checkbox .campo__aiuto{display:block;margin-top:var(--s1)}
.avviso{background:var(--colore-fondo-alt);border-radius:var(--r-s);padding:var(--s4);font-size:var(--t-small);margin-top:var(--s3)}
.avviso--errore{background:var(--colore-errore-fondo);color:var(--colore-errore);font-weight:600;margin-bottom:var(--s4)}
.avviso--errore a{color:inherit}
.avviso--errore[hidden]{display:none}

/* Trappola anti-spam del modulo /prenota/. Fuori dal viewport e non
   display:none: un campo nascosto cosi' i bot lo compilano lo stesso,
   mentre display:none o visibility:hidden sono i primi due segnali che
   imparano a riconoscere. All'ospite resta invisibile e irraggiungibile
   da tastiera (tabindex="-1" sull'input, aria-hidden sul contenitore). */
.campo-trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.riepilogo-errori{
  background:var(--colore-errore-fondo);color:var(--colore-errore);
  border-radius:var(--r-m);padding:var(--s4) var(--s5);margin-bottom:var(--s6);
  font-size:var(--t-small);font-weight:600;
}
.riepilogo-errori ul{margin:var(--s2) 0 0;padding-left:var(--s5);font-weight:400}
.modulo-prenota .btn{width:100%;margin-top:var(--s2)}
.modulo-prenota[data-stato="invio"] .btn{opacity:.7;pointer-events:none}
.modulo-prenota[hidden],.conferma-invio[hidden]{display:none}

/* ═══════════════════════════════════════════════════
   MOBILE DI CODA — deve restare l'ULTIMO blocco @media del file

   Le sezioni "modulo" e "mappa del sito" sono state scritte dopo i
   blocchi @media principali (righe ~1007 e ~1071). Un override mobile
   messo lassu' ha la stessa specificita' della regola base scritta qui
   sotto, e in CSS a parita' di specificita' vince l'ULTIMA: l'override
   non si applicava mai. Nella pagina /prenota/ i due campi data
   restavano affiancati anche su iPhone, sbordando fuori dallo schermo.

   REGOLA: se aggiungi una sezione in fondo al file e le serve un
   comportamento mobile, il suo @media va QUI, non nei blocchi in alto.
   ═══════════════════════════════════════════════════ */
@media (max-width:640px){
  .campo-riga{grid-template-columns:1fr}
  .campo-eta-bambini{grid-template-columns:1fr}
  .mappa-sito-griglia{grid-template-columns:1fr;gap:var(--s8)}
  /* Galleria appartamento: gutter piu' stretto, come le altre piste su
     mobile. Sta qui e non accanto alle regole .galleria-app per la ragione
     scritta in testa a questo blocco. */
  .galleria-app .carosello__pista,
  .galleria-app .carosello__piede{
    padding-inline:var(--s4);
    scroll-padding-inline:var(--s4);
  }
}

/* ═══ movimento ridotto ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}