/* =========================================================
   HEAVEN · Lounge Bar — Siziano (PV)
   Foglio di stile unico. Ordine: token, base, tipografia,
   componenti, sezioni, pagine, responsive.
   ========================================================= */

/* ---------- 1. Token di marca ---------- */
:root{
  /* Colore (brand board, cap. 03) */
  --gloria:      #FDFBF6;  /* fondo dominante          70% */
  --alabastro:   #F4EEE2;  /* secondo piano            20% */
  --champagne:   #E6D3A8;  /* solo aura / luce          -- */
  --oro:         #CBAE73;  /* accento, filetti          7% */
  --ottone:      #A5854E;  /* metallo, filetti spessi      */
  --ottone-testo:#8A6E3F;  /* variante leggibile su chiaro */
  --inchiostro:  #2B2721;  /* testo e fondi notturni    3% */

  --filetto:      rgba(43,39,33,.14);
  --filetto-oro:  rgba(165,133,78,.34);
  --testo-medio:  rgba(43,39,33,.74);
  --testo-tenue:  rgba(43,39,33,.55);

  /* Tipografia (brand board, cap. 04) */
  --display:"Cinzel","Trajan Pro","Times New Roman",serif;
  --testo:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --misura:1160px;
  --gutter:clamp(20px,5vw,56px);
  --ritmo:clamp(64px,8vw,124px);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--gloria);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(17px,.42vw + 16px,19px);
  line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--filetto);margin:0}

::selection{background:var(--champagne);color:var(--inchiostro)}

:focus-visible{
  outline:2px solid var(--ottone-testo);
  outline-offset:3px;
}

.contenitore{
  width:100%;
  max-width:var(--misura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.salta{
  position:absolute;left:-9999px;top:0;
  background:var(--inchiostro);color:var(--gloria);
  padding:.75rem 1.25rem;z-index:100;
}
.salta:focus{left:var(--gutter)}

/* ---------- 3. Tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.16em;
  line-height:1.18;
  margin:0;
}

.titolo-xl{font-size:clamp(44px,9.5vw,104px);letter-spacing:.18em}
.titolo-l {font-size:clamp(28px,4.2vw,52px)}
.titolo-m {font-size:clamp(22px,2.6vw,30px)}
.titolo-s {font-size:clamp(16px,1.5vw,19px);letter-spacing:.18em}

/* Etichetta: Garamond 400 · 0.30em · maiuscolo.
   Il brand board indica 11–13px; qui sono portate a 1,2 volte
   (13,2–15,6px) perché con quella spaziatura restavano troppo esili. */
.etichetta{
  font-family:var(--testo);
  font-size:clamp(13.2px,1.08vw,15.6px);
  text-transform:uppercase;
  letter-spacing:.3em;
  color:var(--ottone-testo);
  font-weight:500;
  line-height:1.5;
  margin:0;
}
.etichetta--muta{color:var(--testo-tenue)}

/* La frase complice: sempre corsivo, sempre una sola per superficie */
.frase{
  font-family:var(--testo);
  font-style:italic;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.45;
  letter-spacing:.005em;
  text-transform:none;
  margin:0;
}

.numero{
  font-family:var(--display);
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.2em;
  color:var(--ottone-testo);   /* l'oro pallido su fondo chiaro non è leggibile */
  line-height:1;
}
.sezione--notte .numero{color:var(--oro)}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.occhiello{
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.62;
  color:inherit;
}
.tenue{color:var(--testo-medio)}
.piccolo{font-size:.86em;line-height:1.62;color:var(--testo-medio)}

/* ---------- 4. Aura (alone dorato dietro, mai sopra) ---------- */
.aura{position:relative;isolation:isolate}
.aura::before{
  content:"";
  position:absolute;
  /* Nessuna sbordatura laterale: allargherebbe la pagina sul telefono.
     L'alone sfuma comunque prima del bordo, quindi non si vede dove finisce. */
  inset:-10% 0 auto;
  height:120%;
  z-index:-1;
  background:radial-gradient(58% 52% at 50% 40%,
              rgba(230,211,168,.52) 0%,
              rgba(230,211,168,.22) 42%,
              rgba(230,211,168,0) 72%);
  pointer-events:none;
}

/* ---------- 5. Arco (contenitore, mai icona) ---------- */
/* Arco circolare ribassato: gambe verticali, calotta larga e bassa */
.arco{
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
  overflow:hidden;
  background:var(--alabastro);
}
.arco-filetto{
  border:1px solid var(--filetto-oro);
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
  border-bottom:0;
}

.arco-disegno{
  display:block;
  width:clamp(132px,17vw,196px);
  height:auto;
  margin-inline:auto;
}
.arco-disegno path{stroke:var(--ottone);stroke-width:1.25;fill:none}

/* ---------- 6. Marchio ---------- */
.marchio{display:inline-block;text-decoration:none;text-align:center}
.marchio__nome{
  font-family:var(--display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:20px;
  line-height:1;
  display:block;
  text-indent:.24em;
}
.marchio__filetto{
  display:block;
  height:1px;
  background:var(--filetto-oro);
  margin:.55rem auto .45rem;
  width:100%;
}
.marchio__coda{
  display:block;
  font-size:9.5px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ottone-testo);
  text-indent:.34em;
}

/* ---------- 7. Testata di navigazione ---------- */
.testata-sito{
  position:sticky;top:0;z-index:50;
  background:var(--gloria);
  border-bottom:1px solid var(--filetto);
}
.testata-sito__interno{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:76px;
}
.navigazione{display:flex;align-items:center;gap:clamp(1.4rem,2.4vw,2.6rem)}
.navigazione a{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--testo-medio);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.navigazione a:hover{color:var(--inchiostro);border-bottom-color:var(--ottone)}
.navigazione a[aria-current="page"]{color:var(--inchiostro);border-bottom-color:var(--ottone)}

.telefono-testata{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--inchiostro);white-space:nowrap;
  border-bottom:1px solid var(--ottone);padding-bottom:.2rem;
}

.interruttore{
  display:none;
  background:none;border:1px solid var(--filetto);
  padding:.6rem .8rem;cursor:pointer;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
}

/* ---------- 8. Bottoni ---------- */
.bottone{
  display:inline-block;
  background:var(--inchiostro);
  color:var(--gloria);
  text-decoration:none;
  padding:1rem 2rem;
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  border:1px solid var(--inchiostro);
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.bottone:hover{background:var(--ottone-testo);border-color:var(--ottone-testo)}

.bottone--chiaro{
  background:transparent;color:var(--inchiostro);border-color:var(--filetto-oro);
}
.bottone--chiaro:hover{background:transparent;border-color:var(--ottone);color:var(--ottone-testo)}

.legame{
  display:inline-block;
  text-decoration:none;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ottone-testo);
  border-bottom:1px solid var(--filetto-oro);
  padding-bottom:.25rem;
  transition:border-color .2s ease,color .2s ease;
}
.legame:hover{color:var(--inchiostro);border-bottom-color:var(--ottone)}

/* ---------- 9. Sezioni ---------- */
.sezione{padding-block:var(--ritmo)}
.sezione--stretta{padding-block:clamp(48px,6vw,84px)}
.sezione--alabastro{background:var(--alabastro)}
.sezione--notte{background:var(--inchiostro);color:var(--gloria)}
.sezione--notte .etichetta{color:var(--oro)}
.sezione--notte .tenue{color:rgba(253,251,246,.74)}
.sezione--notte .piccolo{color:rgba(253,251,246,.66)}
.sezione--notte .didascalia{color:rgba(253,251,246,.5)}
.sezione--notte .legame{color:var(--oro);border-bottom-color:rgba(203,174,115,.42)}
.sezione--notte .legame:hover{color:var(--gloria);border-bottom-color:var(--oro)}
.sezione--notte .bottone--chiaro{color:var(--gloria);border-color:rgba(203,174,115,.42)}
.sezione--notte .bottone--chiaro:hover{color:var(--oro);border-color:var(--oro)}

.testata-sezione{
  display:flex;align-items:baseline;gap:clamp(.9rem,2vw,1.6rem);
  margin-bottom:clamp(2.2rem,4vw,3.4rem);
}
.testata-sezione::after{
  content:"";flex:1;height:1px;background:var(--filetto);
  transform:translateY(-.35em);
}
.sezione--notte .testata-sezione::after{background:rgba(203,174,115,.28)}

/* ---------- 10. Hero ---------- */
.apertura{
  padding-top:clamp(56px,8vw,104px);
  padding-bottom:clamp(40px,5vw,64px);
  text-align:center;
  position:relative;
}
.apertura__marchio{margin-inline:auto;max-width:660px}
.apertura__nome{margin-top:clamp(1.6rem,3vw,2.4rem);text-indent:.18em}
.apertura__filetto{
  width:min(280px,52vw);height:1px;background:var(--filetto-oro);
  margin:clamp(1.1rem,2vw,1.6rem) auto clamp(.9rem,1.6vw,1.2rem);
}
.apertura__coda{letter-spacing:.34em;text-indent:.34em}

.apertura__dati{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem clamp(1.4rem,3vw,3rem);
  margin-top:clamp(2.4rem,4vw,3.4rem);
}
.apertura__dati span{position:relative}

/* Frase in vetrina: in basso a sinistra, mai sotto il logo */
.vetrina{
  border-top:1px solid var(--filetto);
  padding-block:clamp(1.6rem,3vw,2.4rem);
}
.vetrina__interno{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem}

/* ---------- 11. Blocco presentazione ---------- */
.doppia{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
}
@media (min-width:900px){
  .doppia{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .doppia--invertita{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
}

/* La foto prende la forma dell'arco, non ci sta dentro come un rettangolo:
   così la cornice chiara resta della stessa larghezza su tutti e quattro i
   lati invece di allargarsi in cima quanto tutta la calotta.
   Il margine è in percentuale perché così vale lo stesso numero di pixel
   sopra, sotto e ai lati: le percentuali dei padding si calcolano sempre
   sulla larghezza, mai sull'altezza. */
.scheda-media{
  --cornice:3.2%;
  position:relative;
  aspect-ratio:4/5;
  background:var(--alabastro);
  display:grid;place-items:center;
  padding:var(--cornice);
}
.scheda-media img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
}
.scheda-media__vuoto{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--testo-tenue);text-align:center;
}
.didascalia{
  margin-top:.9rem;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--testo-tenue);
}

/* ---------- 12. Orari e dati pratici ---------- */
.orari{width:100%;border-collapse:collapse}
.orari th,.orari td{
  text-align:left;padding:.85rem 0;
  border-bottom:1px solid var(--filetto);
  font-size:.94em;
}
.orari th{
  font-family:var(--testo);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;font-size:12px;
  color:var(--testo-medio);width:52%;
}
.orari td{text-align:right;font-variant-numeric:lining-nums tabular-nums}
.orari tr:last-child th,.orari tr:last-child td{border-bottom:0}
.orari .chiuso{color:var(--testo-tenue);font-style:italic}

.elenco-dati{list-style:none;margin:0;padding:0}
.elenco-dati li{
  padding:1rem 0;border-bottom:1px solid var(--filetto);
  display:grid;gap:.3rem;
}
.elenco-dati li:last-child{border-bottom:0}
.elenco-dati a{text-decoration:none;border-bottom:1px solid var(--filetto-oro)}
.elenco-dati a:hover{border-bottom-color:var(--ottone)}

/* ---------- 13. Carta / menu ---------- */
.categoria{margin-bottom:clamp(3rem,5vw,4.5rem)}
.categoria:last-child{margin-bottom:0}

.categoria__testata{
  display:flex;align-items:baseline;gap:1rem;
  padding-bottom:.9rem;margin-bottom:1.6rem;
}
.categoria__testata::after{
  content:"";flex:1;height:1px;background:var(--filetto);
  transform:translateY(-.3em);
  order:2;
}
.categoria__nome{white-space:nowrap}
.categoria__nota{white-space:nowrap;flex-shrink:0;order:3}

.voci{list-style:none;margin:0;padding:0}
.voce{
  padding:1.15rem 0;
  border-bottom:1px solid var(--filetto);
  display:grid;
  grid-template-columns:1fr auto;
  gap:.2rem 1.5rem;
  align-items:baseline;
}
.voce:last-child{border-bottom:0}
.voce__nome{
  font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;
  font-size:clamp(14px,1.3vw,16px);
  margin:0;
}
.voce__prezzo{
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--ottone-testo);
  font-size:.95em;
  white-space:nowrap;
}
.voce__desc{
  grid-column:1/-1;
  margin:.3rem 0 0;
  color:var(--testo-medio);
  font-size:.95em;
  max-width:56ch;
}

.riquadro{
  background:var(--alabastro);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.riquadro--filetto{
  background:transparent;
  border:1px solid var(--filetto);
}

/* ---------- 14. I sette cieli ---------- */
/* Su schermo stretto la tabella scorre dentro il suo riquadro,
   invece di allargare tutta la pagina. */
.tabella-scorre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabella-scorre .cieli{min-width:520px}
.cieli{width:100%;border-collapse:collapse;font-size:.96em}
.cieli caption{
  text-align:left;padding-bottom:1.2rem;
  color:var(--testo-medio);font-size:.95em;
}
.cieli th,.cieli td{
  text-align:left;padding:1.15rem 1.2rem 1.15rem 0;
  border-bottom:1px solid var(--filetto);
  vertical-align:baseline;
}
.cieli thead th{
  font-family:var(--testo);font-weight:500;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ottone-testo);padding-bottom:.9rem;
}
.cieli tbody th{
  font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(14px,1.2vw,16px);
  white-space:nowrap;
}
.cieli .cielo-numero{color:var(--ottone-testo);font-family:var(--display);letter-spacing:.18em;width:1%}
.cieli .cielo-soglia{white-space:nowrap;color:var(--testo-medio);font-size:.92em}
.cieli tr:last-child th,.cieli tr:last-child td{border-bottom:0}

/* Tessera nera. Il design sale con il cielo: l'alone cresce,
   il bordo diventa metallo, l'ultimo porta l'arco in filigrana. */
.tessera{
  --bordo-tessera:rgba(203,174,115,.22);
  --alone-tessera:0;
  --filigrana-tessera:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--inchiostro);
  color:var(--gloria);
  padding:clamp(1.6rem,3vw,2.2rem);
  aspect-ratio:1.586;
  display:flex;flex-direction:column;justify-content:space-between;
  max-width:420px;
  border:1px solid var(--bordo-tessera);
  transition:border-color .5s ease;
}
/* L'aura: radiale, da una sola sorgente, dietro il contenuto */
.tessera::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(72% 88% at 78% 12%,
              rgba(230,211,168,.55) 0%,
              rgba(203,174,115,.18) 45%,
              rgba(203,174,115,0) 76%);
  opacity:var(--alone-tessera);
  transition:opacity .5s ease;
}
.tessera__filigrana{
  position:absolute;z-index:-1;
  right:-14%;bottom:-26%;
  width:72%;height:auto;
  opacity:var(--filigrana-tessera);
  transition:opacity .5s ease;
}
.tessera__filigrana path{fill:none;stroke:var(--oro);stroke-width:1}

.tessera[data-cielo="2"]{--bordo-tessera:rgba(203,174,115,.28);--alone-tessera:.22}
.tessera[data-cielo="3"]{--bordo-tessera:rgba(203,174,115,.34);--alone-tessera:.36}
.tessera[data-cielo="4"]{--bordo-tessera:rgba(203,174,115,.44);--alone-tessera:.48}
.tessera[data-cielo="5"]{--bordo-tessera:rgba(203,174,115,.58);--alone-tessera:.55;--filigrana-tessera:.14}
.tessera[data-cielo="6"]{--bordo-tessera:rgba(203,174,115,.74);--alone-tessera:.58;--filigrana-tessera:.2}
.tessera[data-cielo="7"]{--bordo-tessera:var(--oro);--alone-tessera:.58;--filigrana-tessera:.3}
.tessera[data-cielo="7"] .tessera__nome{color:var(--oro)}

.tessera__alto{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.tessera__basso{position:relative}
.tessera__nome{font-size:15px;letter-spacing:.24em;transition:color .5s ease}
.tessera__coda{
  display:block;font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--oro);margin-top:.45rem;
}
.tessera__etichetta{margin-bottom:.4rem}
.tessera__cielo{
  font-family:var(--display);letter-spacing:.18em;
  font-size:clamp(16px,2vw,21px);color:var(--oro);
  text-transform:uppercase;margin:0;
}
.tessera__tacche{display:flex;gap:.5rem;margin-top:1rem}
.tessera__tacche span{
  width:26px;height:2px;background:rgba(253,251,246,.2);
  transition:background .4s ease;
}
.tessera__tacche span.piena{background:var(--oro)}
.tessera__arco{width:34px;height:24px;flex-shrink:0}
.tessera__arco path{stroke:var(--oro);stroke-width:1.2;fill:none}

/* ---------- 14b. Sfoglia i cieli ---------- */
.sfoglia{
  display:grid;
  gap:clamp(1.8rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .sfoglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

.sfoglia__scena{position:relative}
.js .sfoglia__carta{display:none}
.js .sfoglia__carta.attiva{display:block}
.sfoglia__carta + .sfoglia__carta{margin-top:1.2rem}
.js .sfoglia__carta + .sfoglia__carta{margin-top:0}

.sfoglia__comandi{
  display:none;
  align-items:center;gap:.6rem;
  margin-bottom:clamp(1.4rem,3vw,2rem);
}
.js .sfoglia__comandi{display:flex}

.sfoglia__schede{
  display:flex;gap:.2rem;flex:1;
  overflow-x:auto;scrollbar-width:none;
}
.sfoglia__schede::-webkit-scrollbar{display:none}

.sfoglia__scheda{
  font-family:var(--display);
  font-size:12px;letter-spacing:.14em;
  background:none;border:0;border-bottom:1px solid transparent;
  padding:.5rem .7rem;cursor:pointer;
  color:var(--testo-tenue);
  transition:color .2s ease,border-color .2s ease;
}
.sfoglia__scheda:hover{color:var(--inchiostro)}
.sfoglia__scheda[aria-selected="true"]{color:var(--ottone-testo);border-bottom-color:var(--ottone)}

.sfoglia__freccia{
  background:none;cursor:pointer;
  border:1px solid var(--filetto);
  color:var(--testo-medio);
  width:34px;height:34px;line-height:1;flex-shrink:0;
  transition:border-color .2s ease,color .2s ease;
}
.sfoglia__freccia:hover{border-color:var(--ottone);color:var(--inchiostro)}
.sfoglia__freccia[disabled]{opacity:.35;cursor:default}
.sfoglia__freccia[disabled]:hover{border-color:var(--filetto);color:var(--testo-medio)}

.js .sfoglia__pannello{display:none}
.js .sfoglia__pannello.attiva{display:block}
.sfoglia__pannello:focus{outline:none}
.sfoglia__pannello + .sfoglia__pannello{margin-top:2rem}
.js .sfoglia__pannello + .sfoglia__pannello{margin-top:0}
.sfoglia__nome{margin:.5rem 0 1.2rem}

.vantaggi{list-style:none;margin:0;padding:0}
.vantaggi li{
  position:relative;
  padding:.85rem 0 .85rem 1.6rem;
  border-bottom:1px solid var(--filetto);
}
.vantaggi li:last-child{border-bottom:0}
.vantaggi li::before{
  content:"";position:absolute;left:0;top:1.55em;
  width:9px;height:1px;background:var(--ottone);
}

/* Nella fascia notturna i comandi cambiano colore */
.sezione--notte .sfoglia__scheda{color:rgba(253,251,246,.55)}
.sezione--notte .sfoglia__scheda:hover{color:var(--gloria)}
.sezione--notte .sfoglia__scheda[aria-selected="true"]{color:var(--oro);border-bottom-color:var(--oro)}
.sezione--notte .sfoglia__freccia{border-color:rgba(203,174,115,.3);color:rgba(253,251,246,.7)}
.sezione--notte .sfoglia__freccia:hover{border-color:var(--oro);color:var(--gloria)}
.sezione--notte .vantaggi li{border-bottom-color:rgba(253,251,246,.14)}
.sezione--notte .vantaggi li::before{background:var(--oro)}
.sezione--notte .tessera{background:#221F1A}

/* ---------- 15. Modulo prenotazione ---------- */
.modulo{display:grid;gap:1.4rem}
.campo{display:grid;gap:.45rem}
.campo label{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--testo-medio);
}
.campo input,.campo select,.campo textarea{
  font-family:var(--testo);
  font-size:1rem;
  padding:.85rem 1rem;
  background:var(--gloria);
  border:1px solid var(--filetto);
  border-radius:0;
  color:var(--inchiostro);
  width:100%;
}
.campo textarea{resize:vertical;min-height:96px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--ottone);outline:none;
}
.coppia{display:grid;gap:1.4rem}
@media (min-width:620px){.coppia{grid-template-columns:1fr 1fr}}

/* ---------- 16. Piè di pagina ---------- */
.chiusura{
  border-top:1px solid var(--filetto);
  padding-block:clamp(2.6rem,5vw,4rem) clamp(1.6rem,3vw,2.2rem);
  font-size:.92em;
}
.chiusura__griglia{
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){
  .chiusura__griglia{grid-template-columns:1.4fr 1fr 1fr}
}
.chiusura h2{margin-bottom:1rem}
.chiusura ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.chiusura a{text-decoration:none;color:var(--testo-medio)}
.chiusura a:hover{color:var(--inchiostro)}
.chiusura__coda{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;
  margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:1.4rem;
  border-top:1px solid var(--filetto);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--testo-tenue);
}

/* ---------- 16b. Striscia di fotografie ---------- */
.striscia{
  display:grid;
  gap:clamp(1rem,2.5vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.striscia__voce{margin:0;min-width:0}
@media (max-width:640px){
  .striscia{
    grid-auto-flow:column;
    grid-auto-columns:minmax(66vw,1fr);
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:.6rem;
  }
  .striscia__voce{scroll-snap-align:start}
}

/* ---------- 17. Colonne di testo ---------- */
.colonne{display:grid;gap:clamp(1.8rem,3.5vw,3rem)}
@media (min-width:760px){.colonne--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.colonne--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.colonna h3{margin-bottom:.9rem}
.colonna .etichetta{margin-bottom:.8rem}

/* ---------- 18. Comparsa discreta ---------- */
/* Si nasconde solo se lo script è partito: senza JS il testo resta leggibile. */
.js .comparsa{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
.js .comparsa.visibile{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .comparsa{opacity:1;transform:none;transition:none}
}

/* Solo per lettori di schermo */
.sr-solo{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 19. Responsive ---------- */
@media (max-width:860px){
  .interruttore{display:block}
  .navigazione{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;
    gap:0;
    background:var(--gloria);
    border-bottom:1px solid var(--filetto);
    padding:.5rem var(--gutter) 1.4rem;
  }
  .navigazione.aperta{display:flex}
  .navigazione a{
    width:100%;padding-block:.95rem;
    border-bottom:1px solid var(--filetto);
  }
  .navigazione a:hover,.navigazione a[aria-current="page"]{border-bottom-color:var(--filetto)}
  .telefono-testata{display:none}
  .testata-sito__interno{min-height:66px}
}
@media (max-width:560px){
  /* I sette numerali devono entrare senza scorrere */
  .sfoglia__scheda{padding:.5rem .42rem}
  .sfoglia__comandi{gap:.35rem}
  .categoria__testata{flex-wrap:wrap}
  .categoria__testata::after{display:none}
  .categoria__nota{margin-left:auto}
  .cieli th,.cieli td{padding-right:.7rem}
  .cieli .cielo-soglia{white-space:normal}
}

/* ---------- 20. Stampa ---------- */
@media print{
  .testata-sito,.chiusura,.bottone,.aura::before{display:none}
  body{background:#fff;font-size:11pt}
  .sezione{padding-block:1.2rem}
}