/* ==========================================================================
   STILOTTICA DI ANTONIO RAPINO — Lanciano (CH) · sistema visivo
   --------------------------------------------------------------------------
   TESI
   In un'ottica di corso non c'è niente di colorato: la vetrina è vetro, il
   banco di misura è metallo verniciato, il forottero è grigio ferro e la
   tavola delle lettere è bianca fino a farti stringere gli occhi. Poi prendi
   una lente sfusa, la giri di taglio contro la luce del Corso — e scopri che
   il vetro, visto dal bordo, è verde. Quello è l'unico colore che l'ottica
   possiede davvero. Da lì nasce tutto: fondo bianco d'ottotipo, lettere di
   grafite fredda come il metallo del forottero, e un solo verde — quello del
   bordo della lente. Il rosso esiste una volta sola in tutta la pagina, ed è
   la metà rossa del test bicromatico: lì il colore È l'informazione.

   Conseguenze, scritte prima del codice:
   · Il verde-taglio vuol dire una cosa sola: «qui si agisce». Bottone di
     chiamata, link, anello di focus, parentesi sulla riga che si sta leggendo.
     Mai decorazione, mai fondo di sezione.
   · Il rosso NON è uno stato del sistema: non segnala errori, non segnala i
     dati mancanti. Sta dentro un disegno e basta. Le pastiglie
     [DA CONFERMARE] sono grafite su velo con bordo tratteggiato — il segnale
     è il tratteggio più la parola, non il colore.
   · Una sola superficie scura in tutta la pagina, la banda dell'appuntamento.
     È il grigio del forottero, non un nero puro: ha dentro il verde del vetro.
   · Niente ombre grigie da «card che galleggia». L'unica elevazione è il
     bordo inferiore pieno sotto il bottone principale, e ha il colore del
     verde premuto — non del grigio.
   · Angoli: 14 fuori, 8 dentro, 6 di aria. Concentrici, non scelti a occhio.

   PALETTE E RUOLI
   Superfici   Ottotipo #f7f9f7 (fondo pagina)  ·  Vetro #eef2ef (sezione)
               Banco    #e2e8e4 (pannelli, schede, righe degli orari)
               Forottero #172420 (unica superficie scura, usata una volta)
   Testo       Lettera  #16211e (primario)  ·  Matita #47544f (secondario)
               Misura   #55625d (etichette maiuscole — gradino più chiaro)
               Luce     #f0f4f1  ·  Smerigliato #bcc9c3 (sul solo fondo scuro)
   Azione      Verde-taglio, rampa di cinque gradini:
               #0d4a37 premuto · #125b43 pieno · #14684c testo su chiaro
               #58c39a anello e testo su scuro · #7cd9b4 hover su scuro
   Disegno     Bicromatico rosso #bb3226 · bicromatico verde #1f8a5c
               (solo dentro la figura del test, mai altrove)
   Tipografia  Franklin Gothic (titoli, lettere della tavola, interfaccia)
               + Constantia (corpo, prosa lunga). Sans per la misura, serif
               per il racconto: l'ottotipo è un grottesco, il foglio no.
   Scala       12 · 14 · 16 · 18 · 21 · 26 · 34 · 46 · 64
   Ritmo       base 4px · dentro un gruppo 8/12px · tra gruppi 32/64/96px
   Forme       r14 esterno, r8 interno, 6px di aria fra i due (concentrici)

   CONTRASTI MISURATI (WCAG 2.1, formula ufficiale, non stimati — ogni coppia
   sul fondo su cui viene davvero renderizzata)
     Lettera #16211e su Ottotipo  #f7f9f7 ......... 15,62:1  AAA
     Lettera #16211e su Vetro     #eef2ef ......... 14,63:1  AAA
     Lettera #16211e su Banco     #e2e8e4 ......... 13,30:1  AAA
     Matita  #47544f su Ottotipo  #f7f9f7 ..........  7,49:1  AAA
     Matita  #47544f su Vetro     #eef2ef ..........  7,02:1  AAA
     Matita  #47544f su Banco     #e2e8e4 ..........  6,38:1  AA
     Misura  #55625d su Ottotipo  #f7f9f7 ..........  6,03:1  AA
     Misura  #55625d su Vetro     #eef2ef ..........  5,65:1  AA
     Misura  #55625d su Banco     #e2e8e4 ..........  5,13:1  AA
     Taglio  #14684c su Ottotipo  #f7f9f7 ..........  6,37:1  AA  (link)
     Taglio  #14684c su Vetro     #eef2ef ..........  5,97:1  AA
     Taglio  #14684c su Banco     #e2e8e4 ..........  5,43:1  AA
     Pieno   #125b43 su Ottotipo  #f7f9f7 ..........  7,62:1  AAA (anello)
     Pieno   #125b43 su Vetro     #eef2ef ..........  7,14:1  AAA
     Luce    #f0f4f1 su Pieno     #125b43 ..........  7,27:1  AAA (bottone)
     Luce    #f0f4f1 su Premuto   #0d4a37 ..........  9,22:1  AAA (:active)
     Luce    #f0f4f1 su Forottero #172420 ......... 14,44:1  AAA
     Smerigl.#bcc9c3 su Forottero #172420 ..........  9,38:1  AAA
     Taglio-luce #58c39a su Forottero #172420 ......  7,40:1  AAA (anello scuro)
     Forottero #172420 su Taglio-chiaro #7cd9b4 ....  9,50:1  AAA (hover chiaro)

   Le pastiglie [DA CONFERMARE] hanno un velo di grafite al 7%: vanno misurate
   sul COMPOSITO, non sulla superficie nuda.
     Lettera #16211e su velo+Ottotipo #e7e9e7 ..... 13,54:1  AAA
     Lettera #16211e su velo+Vetro    #dee3e0 ..... 12,73:1  AAA
     Lettera #16211e su velo+Banco    #d3dad6 ..... 11,63:1  AAA
     Matita  #47544f su velo+Banco    #d3dad6 ......  5,58:1  AA

   Componenti e disegni (soglia 3:1, scritti fuori dal formato «su» perché
   non sono testo):
     bordo dei pannelli #c3ccc7 contro fondo #f7f9f7 ....... 1,42:1 — è un
       capello di struttura, non porta informazione da solo: ogni pannello è
       già separato da spazio e da titolo.
     bordo del bottone di vetro #55625d contro #f7f9f7 ..... 6,03:1
     lettere del bicromatico #16211e contro rosso #bb3226 .. 3,32:1 — sopra 3:1
     lettere del bicromatico #16211e contro verde #1f8a5c .. 3,82:1 — sopra 3:1
     cornice del disegno #47544f contro #eef2ef ............ 7,02:1

   Nessun testo sotto 4,5:1. Caso peggiore in pagina: 5,13:1 (etichette
   maiuscole sul banco). Con Misura a #6a766f quel caso stava a 3,9:1:
   misurato, bocciato, corretto scendendo di luminosità. La tinta non si tocca.
   ========================================================================== */

:root{
  /* — Superfici. Tre chiare di vetro, una scura di forottero. Mai una quinta — */
  --ottotipo:  #f7f9f7;
  --vetro:     #eef2ef;
  --banco:     #e2e8e4;
  --forottero: #172420;

  /* — Testo: grigi freddi con dentro un soffio di verde. Il nero puro su un
       fondo d'ottotipo abbaglia: la lettera è grafite, non inchiostro. — */
  --lettera:     #16211e;
  --matita:      #47544f;
  --misura:      #55625d;
  --luce:        #f0f4f1;
  --smerigliato: #bcc9c3;

  /* — Verde-taglio: la rampa d'azione. Un colore, un significato — */
  --taglio-premuto: #0d4a37;
  --taglio-pieno:   #125b43;
  --taglio:         #14684c;
  --taglio-luce:    #58c39a;   /* solo sul fondo di forottero */
  --taglio-chiaro:  #7cd9b4;   /* solo :hover sul fondo di forottero */

  /* — Bicromatico: vivono solo dentro la figura del test — */
  --bicromo-rosso: #bb3226;
  --bicromo-verde: #1f8a5c;

  /* — Veli e bordi: capelli di struttura, non ornamento — */
  --velo:       rgba(22, 33, 30, 0.07);
  --filo:       rgba(22, 33, 30, 0.16);
  --filo-tenue: rgba(22, 33, 30, 0.08);
  --filo-luce:  rgba(240, 244, 241, 0.20);
  --alone:      rgba(13, 74, 55, 0.24);

  /* — Caratteri: due famiglie, accoppiate per contrasto vero.
       Il grottesco è la lettera della tavola (misura), il serif è il foglio
       su cui si scrive il risultato (racconto). — */
  --tavola: "Franklin Gothic Medium", "Franklin Gothic", "Segoe UI",
            ui-sans-serif, system-ui, "Trebuchet MS", sans-serif;
  --foglio: Constantia, "Palatino Linotype", Cambria, ui-serif, Georgia, serif;

  /* — Scala tipografica — */
  --t12:12px; --t14:14px; --t16:16px; --t18:18px; --t21:21px;
  --t26:26px; --t34:34px; --t46:46px; --t64:64px;

  /* — 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 forte, hover ease. Nessun ease-in, mai. — */
  --uscita: cubic-bezier(0.23, 1, 0.32, 1);
  --dentro-fuori: cubic-bezier(0.77, 0, 0.175, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ottotipo);
  color:var(--lettera);
  font-family:var(--foglio);
  font-size:var(--t16);
  line-height:1.6;
  overflow-x:hidden;
}

/* — Il salto al contenuto: c'è sempre, si vede solo da tastiera — */
.salta{
  position:absolute; left:var(--s8); top:-64px; z-index:40;
  background:var(--taglio-pieno); color:var(--luce);
  font-family:var(--tavola); font-size:var(--t14);
  padding:var(--s12) var(--s16); border-radius:var(--r-medio);
  text-decoration:none;
  transition:transform 160ms var(--uscita);
}
.salta:focus{ top:var(--s8); }

.telaio{
  width:100%; max-width:1080px;
  margin:0 auto;
  padding-inline:var(--s24);
}

.fascia{ padding-block:var(--s64); }
.fascia--ottotipo{ background:var(--ottotipo); }
.fascia--vetro{ background:var(--vetro); }
.fascia--forottero{ background:var(--forottero); color:var(--luce); }
.fascia--apertura{
  background:var(--ottotipo); padding-block:0 var(--s64);
  position:relative; overflow:hidden;
}
.fascia--apertura .nav,
.fascia--apertura .apertura{ position:relative; z-index:1; }

/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */

h1,h2,h3{
  font-family:var(--tavola);
  font-weight:600;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t46); letter-spacing:-0.02em; }
h2{ font-size:var(--t34); letter-spacing:-0.02em; }
h3{ font-size:var(--t18); letter-spacing:-0.01em; }
h1 em, h2 em{ font-style:normal; color:var(--taglio); }
.fascia--forottero h2 em{ color:var(--taglio-luce); }

p{ margin:0; text-wrap:pretty; }

.etichetta{
  font-family:var(--tavola);
  font-size:var(--t12);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--misura);
  margin:0 0 var(--s12);
}
.etichetta--luce{ color:var(--smerigliato); }

.conduce{
  font-size:var(--t18);
  line-height:1.55;
  color:var(--matita);
  max-width:64ch;
  margin-top:var(--s16);
}
.conduce--minore{ font-size:var(--t16); }

.cifre{ font-variant-numeric:tabular-nums lining-nums; }

/* — La pastiglia del dato mancante. Tre canali: tratteggio, velo, parola.
     Mai il solo colore, e mai il rosso: il rosso qui vuol dire un'altra cosa. — */
.dc{
  display:inline-block;
  font-family:var(--tavola);
  font-size:var(--t12);
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--lettera);
  background:var(--velo);
  border:1px dashed var(--filo);
  border-radius:var(--r-interno);
  padding:2px var(--s8);
  line-height:1.4;
}
.fascia--forottero .dc{
  color:var(--luce);
  background:rgba(240,244,241,0.10);
  border-color:var(--filo-luce);
}

/* ==========================================================================
   LINK E BOTTONI
   ========================================================================== */

a{ color:var(--taglio); }

.bottone{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;
  padding:var(--s12) var(--s24);
  font-family:var(--tavola); font-size:var(--t16); font-weight:600;
  letter-spacing:0.01em;
  border-radius:var(--r-medio);
  border:1px solid transparent;
  text-decoration:none;
  transition:transform 140ms var(--uscita), background-color 160ms ease,
             color 160ms ease, border-color 160ms ease;
}
.bottone--taglio{
  background:var(--taglio-pieno);
  color:var(--luce);
  box-shadow:0 2px 0 var(--taglio-premuto);
}
.bottone--vetro{
  background:transparent;
  color:var(--lettera);
  border-color:var(--misura);
}
.bottone--chiaro{
  background:var(--taglio-luce);
  color:var(--forottero);
}
.bottone--corto{ min-height:40px; padding:var(--s8) var(--s16); font-size:var(--t14); }
.bottone:active{ transform:scale(0.96); }

/* — Il link di secondo livello: un filo, non un secondo bottone pieno.
     Un solo pieno per schermata, e quello chiama. — */
.filo{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-family:var(--tavola); font-size:var(--t16); font-weight:600;
  color:var(--taglio);
  text-decoration:none;
  border-bottom:2px solid var(--taglio);
  transition:transform 140ms var(--uscita), color 160ms ease,
             border-color 160ms ease;
}
.filo--chiaro{ color:var(--taglio-luce); border-bottom-color:var(--taglio-luce); }
/* Qui c'era .filo--corto, che portava min-height a 32px. Non era usata da
   nessuna parte e abbassava il bersaglio di tocco sotto i 44px del brief:
   una variante cosi' non e' una comodita', e' una trappola per chi la
   riusera'. Rimossa. Se serve un link piu' piccolo, si cambia la dimensione
   del testo e si tiene l'altezza. */
.filo:active{ transform:scale(0.96); }

@media (hover: hover) and (pointer: fine){
  .bottone{ transition:transform 140ms var(--uscita), background-color 160ms ease,
             color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
  .bottone--taglio:hover{ background:var(--taglio-premuto); transform:translateY(-2px);
             box-shadow:0 4px 0 var(--taglio-premuto); }
  .bottone--vetro:hover{ border-color:var(--taglio); color:var(--taglio); transform:translateY(-2px); }
  .bottone--chiaro:hover{ background:var(--taglio-chiaro); transform:translateY(-2px); }
  .filo:hover{ color:var(--taglio-pieno); border-bottom-color:var(--taglio-pieno); transform:translateY(-1px); }
  .filo--chiaro:hover{ color:var(--taglio-chiaro); border-bottom-color:var(--taglio-chiaro); }
  .marchio:hover{ color:var(--taglio); }
  .nav__voci a:hover{ color:var(--taglio); border-bottom-color:var(--taglio); }

  /* Le schede e i passi si sollevano di un capello: solo transform, curva
     d'uscita, dentro la guardia hover. Il bordo verde a sinistra/in alto
     resta il segnale statico, il movimento è in più. */
  .scheda,.passo,.avviso{ transition:transform 160ms var(--uscita); }
  .scheda:hover,.passo:hover{ transform:translateY(-3px); }
  .quando li{ transition:transform 140ms var(--uscita); }
  .quando li:hover{ transform:translateX(2px); }
  .recapito__voce dd a:hover{ border-bottom-color:var(--taglio-pieno); }
}

/* — Un solo anello di focus per tutto il sito: 2px pieni più 2px d'aria.
     Verificato contro ogni fondo che attraversa (vedi il blocco in cima). — */
:focus-visible{
  outline:2px solid var(--taglio-pieno);
  outline-offset:2px;
  border-radius:var(--r-interno);
}
.fascia--forottero :focus-visible,
.chiama-fisso:focus-visible{
  outline-color:var(--taglio-luce);
}

/* ==========================================================================
   NAVIGAZIONE E APERTURA
   ========================================================================== */

.nav{ border-bottom:1px solid var(--filo-tenue); }
.nav__interno{
  display:flex; align-items:center; gap:var(--s24);
  padding-block:var(--s16);
}
.marchio{
  font-family:var(--tavola); font-size:var(--t21); font-weight:600;
  letter-spacing:-0.01em;
  color:var(--lettera); text-decoration:none;
  margin-right:auto;
  transition:color 160ms ease;
}
.nav__voci{
  display:flex; gap:var(--s24);
  list-style:none; margin:0; padding:0;
}
.nav__voci a{
  font-family:var(--tavola); font-size:var(--t14); font-weight:600;
  color:var(--matita); text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:color 160ms ease, border-color 160ms ease;
}

.apertura{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:var(--s64);
  align-items:start;
  padding-top:var(--s64);
}
.apertura h1{ margin-top:var(--s8); }
/* La colonna di testo dell'apertura. min-width:0 perche' in griglia una
   colonna non scende mai sotto il proprio contenuto e il disegno a fianco
   verrebbe schiacciato; il tetto in ch tiene la riga leggibile sul largo. */
.apertura__testo{ min-width:0; max-width:64ch; }
.azioni{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s24);
  margin-top:var(--s32);
}

.recapito{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s24);
  margin:var(--s48) 0 0;
  padding-top:var(--s24);
  border-top:1px solid var(--filo-tenue);
}
.recapito--colonna{
  grid-template-columns:1fr;
  gap:var(--s16);
  margin-top:0; padding-top:0; border-top:0;
}
.recapito__voce dt{
  font-family:var(--tavola); font-size:var(--t12); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--misura);
  margin-bottom:var(--s8);
}
.recapito__voce dd{ margin:0; color:var(--lettera); }
.recapito__voce dd a{ text-decoration:none; border-bottom:1px solid var(--taglio); }

/* — La tavola di lettura: disegnata qui, non scaricata — */
.tavola{ margin:0; }
.tavola__disegno{
  display:block; width:100%; height:auto;
  color:var(--matita);
}
.tavola figcaption{
  font-size:var(--t12);
  color:var(--misura);
  margin-top:var(--s12);
  text-wrap:pretty;
}
.d-cornice{ fill:none; stroke:currentColor; stroke-width:1.5; }
.d-filo{ stroke:currentColor; stroke-width:1.5; opacity:0.45; }
.d-testata{
  fill:currentColor; font-family:var(--tavola); font-size:11px;
  font-weight:600; letter-spacing:0.16em;
}
.d-lettere text{
  fill:var(--lettera); font-family:var(--tavola); font-weight:600;
  letter-spacing:0.14em;
}
.d-scala text{
  fill:currentColor; font-family:var(--tavola); font-size:10px;
  font-weight:600; letter-spacing:0.06em;
  font-variant-numeric:tabular-nums lining-nums;
}
.d-taglio path{
  fill:none; stroke:var(--taglio); stroke-width:1.5;
  stroke-linecap:square;
}

/* ==========================================================================
   AL BANCO — le cinque schede
   ========================================================================== */

.testata{ max-width:66ch; margin-bottom:var(--s48); }

.griglia{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s24);
}
.scheda{
  background:var(--banco);
  border-radius:var(--r-esterno);
  border-left:3px solid var(--taglio);
  padding:var(--s24);
}
.scheda h3{ margin-bottom:var(--s8); }
.scheda p{ color:var(--matita); }
.scheda__segno{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--filo);
  border-radius:var(--r-medio);
  color:var(--taglio);
  margin-bottom:var(--s16);
}
.scheda__segno svg{ width:24px; height:24px; }
.scheda__segno svg *{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.dc-riga{
  margin-top:var(--s16);
  padding-top:var(--s12);
  border-top:1px solid var(--filo-tenue);
  font-size:var(--t14);
  color:var(--matita);
}

/* ==========================================================================
   IL CONTROLLO — i quattro passi e il bicromatico
   ========================================================================== */

.controllo{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:var(--s64);
  align-items:start;
}
.passi{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s24); }
.passo{
  background:var(--ottotipo);
  border-radius:var(--r-esterno);
  border-top:2px solid var(--taglio);
  padding:var(--s24);
}
.passo__cifra{
  display:block;
  font-family:var(--tavola); font-size:var(--t26); font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--taglio);
  line-height:1;
  margin-bottom:var(--s8);
}
.passo h3{ margin-bottom:var(--s8); }
.passo p{ color:var(--matita); }

.bicromatico{
  margin:0;
  background:var(--ottotipo);
  border-radius:var(--r-esterno);
  padding:var(--s6);
}
.bicromatico__disegno{
  display:block; width:100%; height:auto;
  color:var(--matita);
  border-radius:var(--r-medio);
}
.bicromatico figcaption{
  padding:var(--s16) var(--s16) var(--s12);
  font-size:var(--t14);
  color:var(--matita);
  text-wrap:pretty;
}
.bicromatico figcaption strong{
  display:block;
  font-family:var(--tavola); font-size:var(--t16);
  color:var(--lettera);
  margin-bottom:var(--s8);
}
.d-rosso{ fill:var(--bicromo-rosso); }
.d-verde{ fill:var(--bicromo-verde); }
.d-nero text{
  fill:var(--lettera); font-family:var(--tavola); font-weight:600;
  letter-spacing:0.16em;
}

/* — La riga che solo questa ottica può dire — */
.unica{
  margin-top:var(--s64);
  padding-left:var(--s24);
  border-left:3px solid var(--taglio);
  font-size:var(--t21);
  line-height:1.5;
  max-width:60ch;
}

.avviso{
  margin-top:var(--s32);
  background:var(--banco);
  border-radius:var(--r-esterno);
  padding:var(--s24);
  max-width:70ch;
}
.avviso p:last-child{ color:var(--matita); font-size:var(--t14); }

/* ==========================================================================
   LA BANDA DELL'APPUNTAMENTO — unica superficie scura
   ========================================================================== */

.banda{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr);
  gap:var(--s64);
  align-items:center;
}
.banda__testo p{ color:var(--smerigliato); margin-top:var(--s16); max-width:60ch; }
.banda__testo h2{ color:var(--luce); }
.banda__azioni{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s24); }

/* ==========================================================================
   DOVE SIAMO
   ========================================================================== */

.visita{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s48) var(--s32);
}
.visita__colonna h3{ margin-bottom:var(--s16); }
.indirizzo{ font-size:var(--t18); line-height:1.5; }
.nota{
  margin-top:var(--s16);
  font-size:var(--t14);
  color:var(--matita);
  max-width:44ch;
}
.visita__colonna p + p{ margin-top:var(--s16); }

.quando{
  list-style:none; margin:0; padding:var(--s6);
  background:var(--banco);
  border-radius:var(--r-esterno);
}
.quando li{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s8);
  padding:var(--s8) var(--s12);
  border-radius:var(--r-medio);
  font-family:var(--tavola); font-size:var(--t14);
  font-variant-numeric:tabular-nums lining-nums;
}
.quando li + li{ margin-top:2px; }
/* — La riga di oggi: fondo velato PIÙ bordo pieno PIÙ la parola «oggi».
     Tre canali, di cui due funzionano anche a colori spenti. — */
.quando li[data-oggi]{
  background:var(--velo);
  box-shadow:inset 3px 0 0 var(--taglio);
}
.quando__oggi{
  display:inline-block;
  margin-left:var(--s8);
  font-size:var(--t12); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--taglio);
}

/* ==========================================================================
   PIEDE E BARRA DI CHIAMATA
   ========================================================================== */

.piede{ padding-block:var(--s32); border-top:1px solid var(--filo-tenue); }
.piede__interno{ font-size:var(--t14); color:var(--matita); }
.piede__interno strong{ color:var(--lettera); }
.piede__credito{ margin-top:var(--s8); color:var(--misura); }

/* — Da telefono la chiamata resta sempre a portata di pollice — */
.chiama-fisso{
  display:none;
  position:fixed; left:var(--s12); right:var(--s12); bottom:var(--s12);
  z-index:30;
  min-height:52px;
  align-items:center; justify-content:center;
  background:var(--taglio-pieno); color:var(--luce);
  font-family:var(--tavola); font-size:var(--t16); font-weight:600;
  text-decoration:none;
  border-radius:var(--r-esterno);
  box-shadow:0 2px 0 var(--taglio-premuto), 0 6px 20px var(--alone);
  transition:transform 140ms var(--uscita);
}
.chiama-fisso:active{ transform:scale(0.96); }

/* ==========================================================================
   MOVIMENTO
   Base: gli elementi salgono di 14px e si accendono. 240ms, curva d'uscita,
   stagger 60ms via --rit. Solo transform e opacity. Lo stato nascosto esiste
   soltanto sotto html.anima: senza JavaScript, o con «riduci movimento»
   acceso, la pagina arriva già intera.

   In più, dal 2026-08-30 (richiesta dell'utente: movimento su ogni cosa):
   · le righe dentro un gruppo (nav, recapito, orari, banda, piede) entrano
     a cascata di 55ms l'una dall'altra — .rivela--righe;
   · una luce ambientale attraversa l'apertura, lenta e dietro il contenuto:
     è una lente girata di taglio contro la luce del Corso — .lucelente;
   · schede, passi, bottoni e righe hanno una micro-reazione all'hover
     (solo dentro @media hover, solo transform).
   A movimento ridotto non si muove niente: le righe arrivano intere, la
   luce è spenta, le transizioni sono annullate.
   ========================================================================== */

html.anima .rivela{
  opacity:0;
  transform:translateY(14px);
}
html.anima .rivela.dentro{
  opacity:1;
  transform:none;
  transition:opacity 240ms var(--uscita) var(--rit,0ms),
             transform 240ms var(--uscita) var(--rit,0ms);
}

/* — Cascata sulle righe di un gruppo. Il gruppo è anche .rivela: quando entra
     (.dentro) i figli salgono uno dopo l'altro. Sei gradini bastano per
     ogni gruppo del sito. — */
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; }

/* — La luce della lente. Non è un fondo di sezione e non è l'azione: è una
     riga di luce che passa una volta ogni 15s, opacità massima 0,16, dietro
     tutto, senza intercettare il puntatore. Vive solo dove il movimento è
     ammesso: il blocco è interamente dentro @media no-preference. — */
.lucelente{ display:none; }

@media (prefers-reduced-motion: no-preference){
  .lucelente{
    display:block;
    position:absolute; inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .lucelente::before{
    content:"";
    position:absolute;
    top:-25%; bottom:-25%; left:0;
    width:12%;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(88,195,154,0.16) 45%,
      rgba(124,217,180,0.20) 55%,
      transparent 100%);
    /* durata dichiarata: luce ambientale continua, non un'interazione UI;
       lineare e lenta perché è un riflesso, non un feedback. */
    animation:lente-taglio 15s linear infinite;
  }
}

@keyframes lente-taglio{
  0%   { transform:translateX(-20vw) skewX(-14deg); opacity:0; }
  10%  { opacity:1; }
  85%  { opacity:1; }
  100% { transform:translateX(120vw) skewX(-14deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  html.anima .rivela,
  html.anima .rivela.dentro,
  html.anima .rivela--righe > *,
  html.anima .rivela--righe.dentro > *{
    opacity:1;
    transform:none;
    transition:none;
  }
  .bottone,.filo,.chiama-fisso,.salta,.marchio,.nav__voci a,
  .scheda,.passo,.avviso,.quando li{
    transition:none;
  }
  .bottone:active,.filo:active,.chiama-fisso:active{ transform:none; }
  .lucelente{ display:none; }
}

/* ==========================================================================
   ADATTAMENTO
   ========================================================================== */

@media (max-width: 900px){
  .apertura,.controllo,.banda{ grid-template-columns:1fr; gap:var(--s48); }
  .nav__voci{ display:none; }
  h1{ font-size:var(--t34); }
  h2{ font-size:var(--t26); }
  .tavola{ max-width:360px; }
}

@media (max-width: 640px){
  .fascia{ padding-block:var(--s48); }
  .telaio{ padding-inline:var(--s16); }
  .chiama-fisso{ display:flex; }
  body{ padding-bottom:76px; }
  .azioni{ gap:var(--s16); }
  .azioni .bottone{ width:100%; }
  .unica{ font-size:var(--t18); }
}

@media (max-width: 380px){
  h1{ font-size:var(--t26); }
  h2{ font-size:var(--t21); }
  .telaio{ padding-inline:var(--s12); }
}