/* ==========================================================================
   RISTORANTE ZAPPACOSTA — Archi (CH) · sistema visivo
   --------------------------------------------------------------------------
   TESI
   In una cucina di casa abruzzese la luce non entra dalla finestra: rimbalza
   sul rame appeso sopra il fuoco. Il muro è intonaco tirato a calce, la
   credenza è legno chiaro consumato, la tovaglia è a quadri stirati male, e
   l'unica cosa che brilla in tutta la stanza è il fondo di una pentola
   lucidata da trent'anni di sughi. Da lì nasce tutto: fondo di intonaco,
   testo di ghisa — nero mai puro, sempre bruciato — e un solo lampo, il rame.

   Conseguenze, scritte prima del codice:
   · Il rame è l'unico colore vivo e vuol dire una cosa sola: «qui si agisce».
     Bottone di chiamata, riga attiva, anello di focus. Mai decorazione.
   · Una sola superficie scura in tutta la pagina — la ghisa della banda
     «La domenica». Compare una volta, dà il contrasto che l'intonaco non ha.
   · Gli angoli sono tondi ma non gonfi: il rame è battuto a mano, il bordo
     di una pentola non è uno spigolo. 14px fuori, 8px dentro, 6px di aria.
   · Niente ombre grigie da «card che galleggia». L'unica elevazione è quella
     del rame che riflette: un alone caldo, e solo sul bottone principale.

   PALETTE E RUOLI
   Superfici   Intonaco #f6efe4 (fondo)  ·  Calce #eee5d6 (sezione rialzata)
               Credenza #e5d9c4 (pannelli, tovaglia)
               Ghisa    #231b15 (unica superficie scura, usata una volta)
   Testo       Scritto  #231b15  ·  Fumo #5c4d41 (secondario)
               Cenere   #6d5d4f (etichette piccole — il limite basso)
               Latte    #f7f0e3  ·  Stoviglia #d3c6ae (sul solo fondo scuro)
   Azione      Rame, rampa di quattro gradini:
               #6f3413 premuto · #8a4118 pieno · #98481b testo · #d98b4f su ghisa
   Tipografia  Georgia (titoli, cifre) + Segoe UI (corpo e interfaccia)
   Scala       12 · 14 · 16 · 18 · 22 · 28 · 38 · 52 · 76
   Ritmo       base 4px · dentro un gruppo 8/12px · tra gruppi 32/64/96px
   Forme       r14 esterno, r8 interno, 6px di padding fra i due (concentrici)

   CONTRASTI MISURATI (WCAG 2.1, calcolati, non stimati — ogni coppia sul
   fondo su cui viene davvero renderizzata)
     Scritto  #231b15 su Intonaco #f6efe4 ......... 14,84:1   AAA
     Scritto  #231b15 su Calce    #eee5d6 ......... 13,57:1   AAA
     Scritto  #231b15 su Credenza #e5d9c4 ......... 12,15:1   AAA
     Fumo     #5c4d41 su Intonaco #f6efe4 ..........  7,09:1   AAA
     Fumo     #5c4d41 su Credenza #e5d9c4 ..........  5,81:1   AA
     Cenere   #6d5d4f su Intonaco #f6efe4 ..........  5,52:1   AA
     Cenere   #6d5d4f su Calce    #eee5d6 ..........  5,05:1   AA
     Rame     #98481b su Intonaco #f6efe4 ..........  5,61:1   AA
     Rame-scuro #8a4118 su Calce  #eee5d6 ..........  5,90:1   AA
     Rame-scuro #8a4118 su Credenza #e5d9c4 ........  5,28:1   AA
     Latte    #f7f0e3 su Rame-pieno #8a4118 ........  6,50:1   AA  (bottone)
     Latte    #f7f0e3 su Rame-premuto #6f3413 ......  8,51:1   AAA (:active)
     Latte    #f7f0e3 su Ghisa    #231b15 ......... 14,95:1   AAA
     Stoviglia #d3c6ae su Ghisa   #231b15 ......... 10,05:1   AAA
     Rame-luce #d98b4f su Ghisa   #231b15 ..........  6,26:1   AA  (anello + bottone chiaro)
     Ghisa    #231b15 su Rame-chiaro #e79c62 .......  7,53:1   AAA (:hover bottone chiaro)

   Le pastiglie [DA CONFERMARE] hanno un fondo velato: vanno misurate sul
   COMPOSITO, non sulla superficie nuda.
     Rame-pieno su velo+Intonaco #eee0d2 ...........  5,69:1   AA
     Rame-pieno su velo+Calce    #e6d7c5 ...........  5,22:1   AA
     Rame-pieno su velo+velo     #dfcab6 ...........  4,65:1   AA  (peggiore: riga «oggi»)
     Rame-luce su velo+Ghisa     #39281c ...........  5,19:1   AA
   Con il rame più chiaro (#98481b) quel caso peggiore stava a 4,05:1:
   misurato, bocciato, corretto scendendo di luminosità. La tinta non si tocca.

   La banda scura ha un gradiente: la coppia va verificata sul punto PIÙ
   CHIARO del gradiente (#3a2a1d), non sul fondo dichiarato.
     Latte     su #3a2a1d ......................... 12,12:1   AAA
     Stoviglia su #3a2a1d .........................  8,15:1   AAA
     Rame-luce su #3a2a1d .........................  5,07:1   AA

   Nessun testo sotto 4,5:1 e nessun bordo di controllo sotto 3:1.
   Cenere (#6d5d4f) sta a 4,52:1 sulla credenza: è sotto il margine che mi
   fido, quindi sulla credenza non ci va mai — lì il secondario è Fumo.
   ========================================================================== */

:root{
  /* — Superfici. Tre di intonaco, una di ghisa. Mai una quinta — */
  --intonaco: #f6efe4;
  --calce:    #eee5d6;
  --credenza: #e5d9c4;
  --ghisa:    #231b15;

  /* — Testo: bruni caldi, mai grigi puri: il nero puro su intonaco fa un
       buco. Cenere è il gradino più chiaro consentito (5,52:1). — */
  --scritto:   #231b15;
  --fumo:      #5c4d41;
  --cenere:    #6d5d4f;
  --latte:     #f7f0e3;
  --stoviglia: #d3c6ae;

  /* — Rame: la rampa d'azione. Un colore, un significato — */
  --rame-premuto: #6f3413;
  --rame-pieno:   #8a4118;
  --rame:         #98481b;
  --rame-luce:    #d98b4f;
  --rame-chiaro:  #e79c62;   /* solo :hover sul fondo di ghisa */
  --rame-velo:    rgba(152, 72, 27, 0.09);
  --rame-alone:   rgba(111, 52, 19, 0.22);

  /* — Bordi: capelli di grafite calda, non linee nere — */
  --filo:       rgba(35, 27, 21, 0.16);
  --filo-tenue: rgba(35, 27, 21, 0.08);
  --filo-luce:  rgba(247, 240, 227, 0.18);

  /* — Caratteri: Georgia per la voce, Segoe UI per la mano.
       Due famiglie, accoppiate per contrasto vero (serif + sans). — */
  --voce: Georgia, "Palatino Linotype", ui-serif, Cambria, serif;
  --mano: "Segoe UI", system-ui, ui-sans-serif, "Trebuchet MS", sans-serif;

  /* — Scala tipografica — */
  --t12:12px; --t14:14px; --t16:16px; --t18:18px; --t22:22px;
  --t28:28px; --t38:38px; --t52:52px; --t76:76px;

  /* — Ritmo, base 4 — */
  --s4:4px;   --s6:6px;   --s8:8px;   --s12:12px; --s16:16px;
  --s24:24px; --s32:32px; --s48:48px; --s64:64px; --s96:96px;

  /* — Forme concentriche: 8 dentro + 6 di aria = 14 fuori — */
  --r-interno:6px; --r-medio:8px; --r-esterno:14px;

  /* — Curve. Entrata ease-out, hover ease.
       Mai ease-in su un'interfaccia: fa partire tutto in ritardo. — */
  --uscita: cubic-bezier(0.23, 1, 0.32, 1);

  --largo:1100px;
}

*,*::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(--intonaco);
  color:var(--scritto);
  font-family:var(--mano);
  font-size:var(--t16);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{display:block}

/* Georgia sta solo nei titoli e nelle cifre. Nel corpo non entra mai:
   in un paragrafo lungo a 16px il grigio di Georgia si sfalda. */
h1,h2,h3,.marchio__nome{
  font-family:var(--voce);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
h1{font-size:clamp(36px, 7.2vw, var(--t76))}
h2{font-size:clamp(26px, 4.6vw, var(--t38))}
h3{font-size:var(--t18);letter-spacing:-0.01em}
p{text-wrap:pretty}

/* Numeri di telefono e cifre: cifre a larghezza fissa, così le colonne
   non ballano e «0872 898545» non cambia forma da un blocco all'altro. */
.num{font-variant-numeric:tabular-nums;letter-spacing:0.01em}

/* Anello di focus: 2px pieni di rame, staccati di 2. Verificato su tutti e
   quattro i fondi (5,28:1 il peggiore). Sulla ghisa passa al rame-luce. */
:focus-visible{
  outline:2px solid var(--rame-pieno);
  outline-offset:2px;
}
.fuoco :focus-visible,.chiamata-fissa:focus-visible{outline-color:var(--rame-luce)}

.salta{
  position:absolute;left:var(--s12);top:-64px;z-index:20;
  background:var(--ghisa);color:var(--latte);
  padding:var(--s12) var(--s16);border-radius:var(--r-medio);
  font-size:var(--t14);text-decoration:none;
  transition:transform 160ms var(--uscita);
}
.salta:focus-visible{transform:translateY(76px)}

/* ---------- Impalcatura ---------- */
.frame{width:100%;max-width:var(--largo);margin-inline:auto;padding-inline:var(--s24)}
@media (max-width:420px){.frame{padding-inline:var(--s16)}}

/* Tra gruppi 64/96px, dentro un gruppo 8/12px: il divario esterno non
   scende mai sotto il doppio di quello interno. */
main{display:flex;flex-direction:column;gap:var(--s96);padding-block:var(--s96)}
.sezione{display:flex;flex-direction:column;gap:var(--s32)}
.testata{display:flex;flex-direction:column;gap:var(--s12);max-width:62ch}
.lead{font-size:var(--t18);color:var(--fumo);max-width:64ch;line-height:1.55}

/* ---------- Etichetta: Segoe UI in maiuscolo, tracking positivo ---------- */
.etichetta{
  font-size:var(--t12);
  font-weight:600;
  line-height:1;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cenere);
}
.etichetta--luce{color:var(--rame-luce)}

/* ---------- Il placeholder. Non è un errore: è la domanda al titolare.
     Segnale triplo — colore rame E bordo tratteggiato E le parentesi quadre
     nel testo — così vale anche per chi il colore non lo vede.
     Il testo è rame-PIENO e non rame: la pastiglia porta con sé il proprio
     velo, e su un fondo già velato (la riga di oggi negli orari) il rame
     chiaro scendeva a 4,05:1. Con #8a4118 il caso peggiore è 4,65:1. ---- */
.manca{
  display:inline-block;
  padding:2px var(--s6);
  border:1px dashed var(--rame-pieno);
  border-radius:var(--r-interno);
  color:var(--rame-pieno);
  background:var(--rame-velo);
  font-size:var(--t14);
  font-weight:600;
  letter-spacing:0.01em;
}
.manca--luce{color:var(--rame-luce);border-color:var(--rame-luce);background:rgba(217,139,79,0.12)}

/* ---------- Segni disegnati: un solo stile, tratto 1.5, currentColor ---- */
.segno{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.bottone .segno{stroke-width:2}

/* ---------- Bottoni. Uno solo pieno per schermata: quello che chiama ---- */
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16)}

.bottone{
  display:inline-flex;align-items:center;gap:var(--s8);
  min-height:48px;
  padding:var(--s12) var(--s24);
  border:1px solid transparent;
  border-radius:var(--r-medio);
  font-family:var(--mano);
  font-size:var(--t16);
  font-weight:600;
  text-decoration:none;
  transition:background-color 160ms ease, transform 120ms var(--uscita),
             box-shadow 160ms ease, border-color 160ms ease;
}
.bottone--rame{
  background:var(--rame-pieno);
  color:var(--latte);
  box-shadow:0 2px 0 var(--rame-alone);
}
.bottone--luce{
  background:var(--rame-luce);
  color:var(--ghisa);
  box-shadow:0 2px 0 rgba(35,27,21,0.45);
}
.bottone--corto{padding-inline:var(--s16);min-height:44px}
.bottone:active{transform:scale(0.96)}
.bottone--rame:active{background:var(--rame-premuto)}

.fantasma{
  display:inline-flex;align-items:center;
  min-height:48px;padding-block:var(--s12);
  color:var(--rame);
  font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--rame-velo);
  transition:border-color 160ms ease, color 160ms ease;
}
.fantasma--luce{color:var(--rame-luce);border-bottom-color:rgba(217,139,79,0.3)}

/* Il filo è il link dentro il testo: sottolineatura vera, mai «clicca qui» */
.filo{
  display:inline-flex;align-items:center;gap:var(--s6);
  color:var(--rame);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color 160ms ease;
}

/* ---------- Barra alta ---------- */
.nav{border-bottom:1px solid var(--filo-tenue);background:var(--intonaco)}
.nav__riga{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s16);
  min-height:72px;
}
.marchio{display:flex;align-items:baseline;gap:var(--s8);text-decoration:none;padding-block:var(--s8)}
.marchio__nome{font-size:var(--t22)}
.marchio__luogo{font-size:var(--t12);letter-spacing:0.14em;text-transform:uppercase;color:var(--cenere)}

/* 24px tra voci di solo testo, come vuole la regola per i controlli senza bordo */
.nav__voci{display:none;gap:var(--s24)}
.nav__voci a{
  display:inline-block;padding-block:var(--s12);
  font-size:var(--t14);font-weight:600;color:var(--fumo);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color 160ms ease, border-color 160ms ease;
}
@media (min-width:860px){.nav__voci{display:flex}}

/* ---------- Apertura ---------- */
.apertura{
  background:var(--calce);
  border-bottom:1px solid var(--filo-tenue);
  overflow:hidden;
  position:relative;
}
.apertura > .nav,
.apertura > .apertura__griglia,
.apertura > .pentole{position:relative;z-index:1}

/* ---------- Il riflesso del rame.
     La luce non entra dalla finestra: rimbalza sul rame appeso sopra il
     fuoco. Qui e' letterale — una riga di luce di rame che attraversa
     l'apertura una volta ogni 14s, opacita' massima 0,16, dietro il
     contenuto, senza intercettare il puntatore. E' lo stesso rame
     dell'azione, non un secondo colore: e' il suo riflesso. Vive solo dove
     il movimento e' ammesso. --------------------------------------------- */
.riflesso{display:none}
@media (prefers-reduced-motion: no-preference){
  .riflesso{
    display:block;position:absolute;inset:0;
    overflow:hidden;pointer-events:none;z-index:0;
  }
  .riflesso::before{
    content:"";position:absolute;
    top:-30%;bottom:-30%;left:0;width:10%;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(217,139,79,0.14) 44%,
      rgba(231,156,98,0.20) 54%,
      transparent 100%);
    /* durata dichiarata: luce ambientale continua, non un feedback UI;
       lineare e lenta perche' e' un riflesso che scorre, non una risposta. */
    animation:rame-riflesso 14s linear infinite;
  }
}
@keyframes rame-riflesso{
  0%   {transform:translateX(-15vw) skewX(-15deg);opacity:0}
  12%  {opacity:1}
  86%  {opacity:1}
  100% {transform:translateX(120vw) skewX(-15deg);opacity:0}
}
.apertura__griglia{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s48);
  padding-block:var(--s64) var(--s48);
}
@media (min-width:900px){
  .apertura__griglia{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s64);align-items:start}
}
.apertura__testo{display:flex;flex-direction:column;gap:var(--s24);min-width:0}
.apertura__testo .etichetta+h1{margin-top:calc(var(--s8) * -1)}

/* La scheda: pannello di credenza, righe interne r8 dentro r14 con 6px
   d'aria — i raggi sono concentrici, non scelti a occhio. */
.scheda{
  background:var(--credenza);
  border:1px solid var(--filo);
  border-radius:var(--r-esterno);
  padding:var(--s6);
  min-width:0;
}
.scheda__titolo{
  font-family:var(--voce);font-size:var(--t18);
  padding:var(--s16) var(--s16) var(--s12);
}
.scheda__lista{display:flex;flex-direction:column;gap:var(--s4)}
.scheda__voce{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s8);
  background:var(--intonaco);
  border-radius:var(--r-medio);
  padding:var(--s12) var(--s16);
}
.scheda__voce dt{font-size:var(--t14);color:var(--fumo);font-weight:600}
.scheda__voce dd{margin:0;font-size:var(--t16);text-align:right}
.scheda__piede{
  padding:var(--s12) var(--s16) var(--s16);
  font-size:var(--t14);color:var(--fumo);
}

/* Le pentole appese: disegnate a mano in SVG, nessuna foto, nessuna emoji.
   Sono la firma del locale e non dicono niente che il testo non dica già,
   quindi sono aria-hidden. */
.pentole{
  display:block;width:100%;max-width:520px;height:auto;
  margin:0 auto;padding-inline:var(--s24);
  fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0.55;
}
/* Il colore sta sui due gruppi, non sul contenitore: l'asta e' struttura
   (fumo), le pentole sono il soggetto (rame). Reso identico a prima. */
.pentole__corpo{stroke:var(--rame)}
.pentole__asta{stroke:var(--fumo);stroke-width:1.5}
.pentole__bordo{stroke-width:2.5}

/* ---------- Riquadri ---------- */
.riquadri{
  display:grid;grid-template-columns:1fr;gap:var(--s16);
}
@media (min-width:640px){.riquadri{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.riquadri{grid-template-columns:repeat(4,minmax(0,1fr))}}
.riquadro{
  display:flex;flex-direction:column;gap:var(--s8);
  min-width:0;
  padding:var(--s24);
  background:var(--calce);
  border:1px solid var(--filo-tenue);
  border-left:3px solid var(--rame);
  border-radius:var(--r-medio);
}
.riquadro p{font-size:var(--t16);color:var(--fumo)}

/* ---------- Avviso ---------- */
.avviso{
  display:flex;gap:var(--s12);
  max-width:72ch;
  padding:var(--s16);
  background:var(--rame-velo);
  border:1px solid var(--rame);
  border-radius:var(--r-medio);
}
.avviso p{font-size:var(--t16);color:var(--scritto)}
.segno--avviso{color:var(--rame);width:20px;height:20px;margin-top:2px}

/* ---------- La tovaglia: quadri veri, fatti di due righe incrociate.
     È l'unico motivo della pagina, sta sotto il menù e nient'altro.
     Le righe sono rame all'8%: pattern, non testo — non porta significato. -- */
.tovaglia{
  border:1px solid var(--filo);
  border-radius:var(--r-esterno);
  padding:var(--s6);
  background-color:var(--credenza);
  background-image:
    repeating-linear-gradient(90deg, var(--rame-velo) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(0deg,  var(--rame-velo) 0 18px, transparent 18px 36px);
}
.portate{display:flex;flex-direction:column;gap:var(--s4)}
.portata{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s8);
  padding:var(--s16);
  background:var(--intonaco);
  border-radius:var(--r-medio);
}
.portata__nome{font-family:var(--voce);font-size:var(--t22);letter-spacing:-0.01em}
.portata__filo{
  flex:1 1 24px;min-width:24px;
  height:1px;
  align-self:center;
  background:repeating-linear-gradient(90deg, var(--filo) 0 2px, transparent 2px 6px);
}
.tovaglia__piede{padding:var(--s12) var(--s16) var(--s8);font-size:var(--t14);color:var(--fumo)}

/* ---------- Passi ---------- */
.passi{display:grid;grid-template-columns:1fr;gap:var(--s16)}
@media (min-width:760px){.passi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.passo{
  display:flex;flex-direction:column;gap:var(--s8);
  min-width:0;
  padding:var(--s24);
  border-top:2px solid var(--rame);
  background:var(--calce);
  border-radius:0 0 var(--r-medio) var(--r-medio);
}
.passo__cifra{font-family:var(--voce);font-size:var(--t28);color:var(--rame)}
.passo p{color:var(--fumo)}

/* ---------- Domande ---------- */
.domande{display:flex;flex-direction:column;gap:var(--s8);max-width:72ch}
.domande .etichetta{margin-bottom:var(--s8)}
.domanda{
  border-bottom:1px solid var(--filo-tenue);
  padding-block:var(--s4);
}
.domanda summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s12);
  min-height:44px;
  padding-block:var(--s8);
  font-weight:600;
  cursor:pointer;
  list-style:none;
}
.domanda summary::-webkit-details-marker{display:none}
/* Il segno di apertura è un più che diventa meno: cambia il TESTO del segno,
   non solo la sua posizione. Ruotarlo e basta lascerebbe lo stato al colore. */
.domanda summary::after{
  content:"+";
  font-family:var(--voce);font-size:var(--t22);line-height:1;color:var(--rame);
  transition:transform 160ms ease;
}
.domanda[open] summary::after{content:"−"}
.domanda p{padding:0 0 var(--s16);color:var(--fumo);max-width:64ch}

/* ---------- Dove siamo ---------- */
.visita{display:grid;grid-template-columns:1fr;gap:var(--s32)}
@media (min-width:860px){.visita{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s48)}}
.orari,.recapiti{min-width:0;display:flex;flex-direction:column;gap:var(--s12)}
.orari__lista{display:flex;flex-direction:column;gap:var(--s4)}
.orari__lista li{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s8);
  padding:var(--s12) var(--s16);
  border-radius:var(--r-medio);
  background:var(--calce);
}
/* Oggi: fondo rame velato, bordo pieno E la parola «oggi» aggiunta dal JS.
   Tre segnali, di cui due non cromatici. */
.orari__lista li[data-oggi]{
  background:var(--rame-velo);
  box-shadow:inset 0 0 0 1px var(--rame);
}
.orari__oggi{
  margin-left:var(--s8);
  font-size:var(--t12);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--rame-pieno);
}
.orari__nota{font-size:var(--t14);color:var(--fumo)}

.recapiti{gap:var(--s24)}
.recapito{display:flex;flex-direction:column;gap:var(--s8)}
.recapito__valore{font-size:var(--t18)}
.recapito__nota{font-size:var(--t14);color:var(--fumo)}

/* ---------- La banda di ghisa: unica superficie scura della pagina.
     Il gradiente è il riflesso del rame sulla parete sopra il fuoco:
     interpolato in oklab, altrimenti passando per l'sRGB il rame vira al
     fango. La prima dichiarazione è la scialuppa per i browser vecchi. ---- */
.fuoco{
  background:var(--ghisa);
  background-image:radial-gradient(120% 90% at 12% 0%, #3a2a1d 0%, var(--ghisa) 62%);
  background-image:radial-gradient(120% 90% at 12% 0%, in oklab, #3a2a1d 0%, var(--ghisa) 62%);
  color:var(--latte);
  padding-block:var(--s96);
  border-block:1px solid var(--filo-luce);
}
.fuoco__testo{display:flex;flex-direction:column;gap:var(--s16);max-width:var(--largo)}
.fuoco h2{color:var(--latte)}
.fuoco p{color:var(--stoviglia);max-width:64ch}
.fuoco .azioni{margin-top:var(--s16)}

/* ---------- Piede ---------- */
.piede{
  padding-block:var(--s48) var(--s96);
  display:flex;flex-direction:column;gap:var(--s12);
  border-top:1px solid var(--filo-tenue);
  margin-top:var(--s96);
}
.piede__riga{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s12)}
.piede__nome{font-size:var(--t14);color:var(--fumo)}
.piede__dato{font-size:var(--t14)}
.piede__credito{font-size:var(--t14);color:var(--cenere);max-width:60ch}

/* ---------- La chiamata fissa: solo sul telefono, dove il pollice arriva.
     È l'unico bottone pieno che resta a schermo, e resta perché su un
     ristorante di paese l'azione è una sola. ---- */
.chiamata-fissa{
  position:fixed;left:var(--s12);right:var(--s12);bottom:var(--s12);z-index:10;
  display:flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:52px;
  padding:var(--s12) var(--s16);
  background:var(--rame-pieno);
  color:var(--latte);
  border-radius:var(--r-medio);
  box-shadow:0 6px 20px rgba(35,27,21,0.28);
  font-weight:600;text-decoration:none;
  transition:transform 120ms var(--uscita), background-color 160ms ease;
}
.chiamata-fissa:active{transform:scale(0.96);background:var(--rame-premuto)}
@media (min-width:860px){.chiamata-fissa{display:none}}
@media (max-width:859px){.piede{padding-bottom:calc(var(--s96) + var(--s24))}}

/* ==========================================================================
   MOVIMENTO
   Una regola sola: le cose salgono di 14px e si accendono, 240ms, curva
   d'uscita, sfalsate di 60ms. Nessuna width, nessun top, nessun margin —
   solo transform e opacity, le uniche due cose che il browser sposta senza
   ridisegnare il layout. Sotto i 300ms tutto, senza eccezioni da giustificare.
   ========================================================================== */
.rivela{
  transition:opacity 240ms var(--uscita), transform 240ms var(--uscita);
  transition-delay:var(--rit, 0ms);
}
html.anima .rivela{opacity:0;transform:translateY(14px)}
html.anima .rivela.dentro{opacity:1;transform:none}

/* Dal 2026-08-30 (richiesta dell'utente: movimento su ogni cosa): le righe
   di un gruppo — nav, scheda, orari, recapiti, piede — salgono a cascata di
   ~50ms l'una dall'altra. Il gruppo e' anche .rivela. */
html.anima .rivela--righe > *{opacity:0;transform:translateY(10px)}
html.anima .rivela--righe.dentro > *{opacity:1;transform:none;
  transition:opacity 220ms var(--uscita), transform 220ms var(--uscita)}
html.anima .rivela--righe.dentro > *:nth-child(1){transition-delay:30ms}
html.anima .rivela--righe.dentro > *:nth-child(2){transition-delay:80ms}
html.anima .rivela--righe.dentro > *:nth-child(3){transition-delay:130ms}
html.anima .rivela--righe.dentro > *:nth-child(4){transition-delay:180ms}
html.anima .rivela--righe.dentro > *:nth-child(5){transition-delay:230ms}
html.anima .rivela--righe.dentro > *:nth-child(6){transition-delay:270ms}
html.anima .rivela--righe.dentro > *:nth-child(n+7){transition-delay:290ms}

/* Il movimento su :hover esiste solo dove c'è davvero un puntatore fine.
   Sul telefono un :hover è un tocco rimasto appiccicato. */
@media (hover: hover) and (pointer: fine){
  .bottone--rame:hover{background:var(--rame-premuto);transform:translateY(-1px)}
  .bottone--luce:hover{background:var(--rame-chiaro);transform:translateY(-1px)}
  .fantasma:hover{color:var(--rame-premuto);border-bottom-color:var(--rame)}
  .fantasma--luce:hover{color:var(--rame-chiaro);border-bottom-color:var(--rame-luce)}
  .filo:hover{color:var(--rame-premuto)}
  .fuoco .filo:hover,.fuoco .fantasma:hover{color:var(--rame-chiaro)}
  .nav__voci a:hover{color:var(--rame);border-bottom-color:var(--rame)}
  .domanda summary:hover::after{transform:scale(1.15)}
  .chiamata-fissa:hover{background:var(--rame-premuto)}

  /* Micro-reazioni: solo transform, il segnale statico (bordo rame, colore)
     resta. */
  .riquadro,.passo,.recapito{transition:transform 160ms var(--uscita)}
  .riquadro:hover,.passo:hover,.recapito:hover{transform:translateY(-3px)}
  .portata,.orari__lista li,.domanda{transition:transform 140ms var(--uscita)}
  .portata:hover,.orari__lista li:hover{transform:translateX(3px)}
  .domanda:hover{transform:translateX(2px)}
}

/* Chi ha «riduci movimento» acceso non prende la classe .anima, quindi la
   pagina gli arriva già intera. Questo blocco spegne anche il resto:
   micro-interazioni, transizioni, tutto. Restano i cambi di colore, che
   sono informazione e non movimento. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  html.anima .rivela,
  html.anima .rivela--righe > *{opacity:1;transform:none}
  .riflesso{display:none}
}

/* Sicurezza doppia: se il JS non parte, .rivela non riceve mai .dentro.
   Senza questa riga la pagina resterebbe invisibile. La classe .anima la
   mette lo script in <head>, che gira solo se IntersectionObserver esiste. */
html:not(.anima) .rivela,
html:not(.anima) .rivela--righe > *{opacity:1;transform:none}