/* ==========================================================================
   AGRITURISMO DORIS — Treglio (CH) · sistema visivo
   --------------------------------------------------------------------------
   TESI

   Treglio sta in cima alla collina fra Lanciano e il mare, e Via Puglianna è
   la strada che ci sale. Il posto è il pergolato: due pali, la trave, il
   tralcio che ci corre sopra, e sotto la tovaglia apparecchiata. Dietro, la
   collina con le righe della vigna che si allontanano.

   Il fondo è quello di una tovaglia lavata mille volte — bianco mai puro,
   con dentro il verde della foglia. Il testo è verde-nero, non nero: sul
   lino il nero pieno fa un buco. Un solo colore d'azione, la terracotta del
   vaso delle conserve, e vuol dire una cosa sola: «qui si chiama, qui si
   va». Un solo altro colore, l'ambra, e vuol dire un'altra cosa sola:
   «questo dato manca e lo devono dire loro».

   Conseguenze, decise prima del codice:
   · Nessuna foto. Non ne ho: quelle vere le mette il titolare. Al loro posto
     un disegno a tratto del pergolato, fatto qui dentro, che non finge di
     essere una fotografia.
   · Nessun piatto, nessun orario, nessun prezzo inventato. Le sei righe del
     menù restano vuote apposta, con lo spazio già apparecchiato: si vede che
     è un posto pronto, non un posto finto.
   · Una sola superficie scura in tutta la pagina — la fascia della foglia,
     quella del «per prenotare». Compare una volta, ed è la parte che conta.
   · Angoli concentrici: 16 fuori, 10 in mezzo, 4 dentro, 6 di aria. Non
     scelti a occhio.
   · Nessuna ombra grigia da riquadro che galleggia. L'unica elevazione è la
     riga scura sotto il bottone pieno.

   PALETTE E RUOLI
   Superfici   Chiara   #EEF2E9 (fondo pagina, apertura)
               Tovaglia #E4EBDC (fasce rialzate: scaffale, piede)
               Carta    #F8FAF5 (pannelli: i vasi, la carta del menù)
               Foglia   #1E3026 (unica superficie scura, usata una volta)
   Testo       Inchiostro #16241C primario · Grafite #445045 secondario
               Cenere #55634F etichette maiuscole (il gradino più chiaro)
               Latte #F2F6EE e Lino #C3D0BE sul solo fondo scuro
   Azione      Terracotta: #6F2B12 premuto · #8A3618 pieno, anello, testo
               #E8A87C sul solo fondo di foglia
   Dato manca  Ambra #7A5410 sui fondi chiari · #DDA94A sul fondo di foglia
   Tipografia  Iowan Old Style / Palatino (titoli, cifre, indirizzo)
               + la sans di sistema (corpo e interfaccia)
   Scala       12 · 14 · 16 · 18 · 21 · 26 · 34 · 46 · 64
   Ritmo       base 4px · dentro un gruppo 8/12px · tra gruppi 32/72/104px
   Forme       r16 esterno, r10 medio, r4 interno, 6px di aria (concentrici)

   CONTRASTI MISURATI (formula WCAG 2.1, luminanza relativa calcolata riga
   per riga, non stimata a occhio. Ogni coppia è misurata sul fondo su cui
   viene davvero renderizzata.)

     Sulla chiara (fondo della pagina)
     #16241C su #EEF2E9 = 14.21:1  AAA  testo primario
     #445045 su #EEF2E9 =  7.47:1  AAA  testo secondario
     #55634F su #EEF2E9 =  5.64:1  AA   etichette maiuscole
     #8A3618 su #EEF2E9 =  7.06:1  AAA  link e anello di focus
     #7A5410 su #EEF2E9 =  5.97:1  AA   pastiglia [DA CONFERMARE]

     Sulla tovaglia (fasce rialzate)
     #16241C su #E4EBDC = 13.21:1  AAA
     #445045 su #E4EBDC =  6.94:1  AAA
     #55634F su #E4EBDC =  5.24:1  AA
     #8A3618 su #E4EBDC =  6.57:1  AAA
     #7A5410 su #E4EBDC =  5.55:1  AA

     Sulla carta (i vasi, la carta del menù)
     #16241C su #F8FAF5 = 15.33:1  AAA
     #445045 su #F8FAF5 =  8.06:1  AAA
     #55634F su #F8FAF5 =  6.09:1  AA
     #8A3618 su #F8FAF5 =  7.62:1  AAA
     #7A5410 su #F8FAF5 =  6.44:1  AA

     Sulla foglia (unica superficie scura)
     #F2F6EE su #1E3026 = 12.74:1  AAA  testo
     #C3D0BE su #1E3026 =  8.69:1  AAA  testo secondario
     #E8A87C su #1E3026 =  6.85:1  AAA  etichetta e anello di focus
     #DDA94A su #1E3026 =  6.54:1  AAA  pastiglia [DA CONFERMARE]

     Dentro i bottoni
     #F2F6EE su #8A3618 =  7.32:1  AAA  bottone pieno
     #F2F6EE su #6F2B12 =  9.45:1  AAA  bottone premuto (:active)
     #16241C su #E8A87C =  7.92:1  AAA  bottone chiaro sulla foglia
     #16241C su #F0C3A1 =  9.99:1  AAA  bottone chiaro premuto

     COMPOSITI — la pastiglia si porta dietro un velo del proprio colore,
     quindi va misurata sul colore risultante, non sulla superficie nuda.
     #7A5410 su #E2E2D3 = 5.17:1  AA   velo 10% sulla chiara
     #7A5410 su #D9DCC8 = 4.84:1  AA   velo 10% sulla tovaglia  ← il peggiore
     #7A5410 su #EBE9DE = 5.56:1  AA   velo 10% sulla carta
     #DDA94A su #353F2A = 5.19:1  AA   velo 12% sulla foglia
     #E8A87C su #33443A = 5.09:1  AA   bottone vuoto chiaro premuto,
                                       velo di latte al 10% sulla foglia

   Caso peggiore in tutta la pagina: 4.84:1. Nessun testo sotto 4.5:1.

   I fili di separazione (inchiostro diluito all'8–16%) sono struttura
   decorativa: non portano informazione e non identificano nessun controllo,
   quindi per loro non vale la soglia 3:1. Ogni bordo che invece dice
   qualcosa — il tratteggio della pastiglia, il bordo del bottone vuoto,
   l'anello di focus — è pieno e sta sopra 6:1.
   ========================================================================== */

:root{
  /* — Superfici. Tre chiare di lino, una di foglia. Mai una quinta — */
  --chiara:   #EEF2E9;
  --tovaglia: #E4EBDC;
  --carta:    #F8FAF5;
  --foglia:   #1E3026;

  /* — Testo. Verdi spenti, mai grigi puri e mai nero — */
  --inchiostro: #16241C;
  --grafite:    #445045;
  --cenere:     #55634F;   /* gradino più chiaro consentito: 5.24:1 sulla tovaglia */
  --latte:      #F2F6EE;
  --lino:       #C3D0BE;

  /* — Terracotta: la rampa d'azione. Un colore, un significato — */
  --terra-premuto: #6F2B12;
  --terra:         #8A3618;
  --terra-luce:    #E8A87C;   /* solo sul fondo di foglia */
  --terra-chiara-premuta: #F0C3A1;   /* :active e :hover del bottone chiaro */
  --terra-velo:    rgba(138, 54, 24, 0.09);
  --terra-ombra:   rgba(111, 43, 18, 0.32);

  /* — Ambra: la rampa del dato mancante. Non è un errore, è una domanda — */
  --ambra:            #7A5410;
  --ambra-luce:       #DDA94A;
  --ambra-velo:       rgba(122, 84, 16, 0.10);
  --ambra-velo-scuro: rgba(221, 169, 74, 0.12);

  /* — Fili: capelli di inchiostro diluito. Struttura, non ornamento — */
  --filo-tratto: rgba(22, 36, 28, 0.16);
  --filo-tenue:  rgba(22, 36, 28, 0.08);
  --filo-luce:   rgba(242, 246, 238, 0.20);

  /* — Caratteri. Un serif da carta stampata per i titoli e le cifre, la sans
       di sistema per il corpo. Nessuna terza famiglia, nessun file da
       scaricare: zero richieste esterne. — */
  --stampa: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua",
            ui-serif, Georgia, "Times New Roman", serif;
  --mano:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            Helvetica, Arial, sans-serif;

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

  /* — Ritmo, base 4. Tra i gruppi non si scende mai sotto il doppio del
       divario interno. — */
  --s4:4px;  --s6:6px;  --s8:8px;  --s12:12px; --s16:16px;
  --s24:24px; --s32:32px; --s48:48px; --s72:72px; --s104:104px;

  /* — Forme concentriche: 4 dentro, 10 in mezzo, 6 di aria, 16 fuori — */
  --r-interno:4px; --r-medio:10px; --r-esterno:16px;

  /* — Curva d'uscita. Mai ease-in su un'interfaccia: fa partire tutto in
       ritardo e sembra che il sito sia lento. — */
  --uscita: cubic-bezier(0.23, 1, 0.32, 1);

  --largo:1120px;
}

*,*::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(--chiara);
  color:var(--inchiostro);
  font-family:var(--mano);
  font-size:var(--t16);
  line-height:1.6;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* Il serif sta nei titoli, nell'indirizzo e nelle cifre. Nel corpo non
   entra: in un paragrafo lungo a 16px il suo colore si chiude troppo. */
h1,h2,h3,.indirizzo,.cifre{font-family:var(--stampa)}
h1,h2,h3{font-weight:400;letter-spacing:-0.02em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(32px, 5.6vw, var(--t64))}
h2{font-size:clamp(25px, 4vw, var(--t34))}
h3{font-size:var(--t18);letter-spacing:-0.01em;line-height:1.25}
h1 em,h2 em{font-style:italic;color:var(--terra)}
.fascia--foglia h2 em{color:var(--terra-luce)}
p{text-wrap:pretty}

/* Il numero di telefono compare sei volte in pagina: con le cifre a
   larghezza fissa non cambia forma da un blocco all'altro. */
.cifre{font-variant-numeric:tabular-nums lining-nums;letter-spacing:0.01em}

/* ---------- Anello di focus: 2px pieni di terracotta, staccati di 2.
     Verificato su tutte e quattro le superfici (6.57:1 il peggiore dei
     chiari). Sulla foglia passa alla terracotta chiara, 6.85:1. ---------- */
:focus-visible{
  outline:2px solid var(--terra);
  outline-offset:2px;
  border-radius:var(--r-interno);
}
.fascia--foglia :focus-visible{outline-color:var(--terra-luce)}

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

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

.fascia{padding-block:var(--s72)}
@media (min-width:760px){.fascia{padding-block:var(--s104)}}
.fascia--chiara{background:var(--chiara)}
.fascia--tovaglia{background:var(--tovaglia)}
.fascia--foglia{background:var(--foglia);color:var(--latte)}

.testata{display:flex;flex-direction:column;gap:var(--s12);max-width:62ch}
.testata + *{margin-top:var(--s48)}

.conduce{font-size:var(--t18);color:var(--grafite);max-width:64ch;line-height:1.55}
.fascia--foglia .conduce,.fascia--foglia p{color:var(--lino)}
.nota{font-size:var(--t14);color:var(--grafite);max-width:56ch}

/* ---------- Etichetta: maiuscolo, tracking positivo -------------------- */
.etichetta{
  display:flex;align-items:center;gap:var(--s8);
  font-size:var(--t12);
  font-weight:700;
  line-height:1;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cenere);
}
.etichetta--luce{color:var(--terra-luce)}

/* Segni disegnati a mano: un solo stile in tutto il sito, tratto 1.5,
   currentColor, mai un file esterno, mai un'emoji. */
.segno{
  width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- La pastiglia del dato mancante.
     Non è un errore di costruzione: è la domanda al titolare, lasciata in
     pagina apposta. Tre segnali insieme — colore ambra, bordo tratteggiato e
     le parentesi quadre nel testo — così vale anche a colori spenti. Il velo
     la scurisce: il rapporto va letto sul composito. ---------------------- */
.dc{
  display:inline-block;
  padding:1px var(--s6);
  border:1px dashed var(--ambra);
  border-radius:var(--r-interno);
  background:var(--ambra-velo);
  color:var(--ambra);
  font-family:var(--mano);
  font-size:var(--t14);
  font-weight:700;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.fascia--foglia .dc{
  border-color:var(--ambra-luce);
  background:var(--ambra-velo-scuro);
  color:var(--ambra-luce);
}
.dc-riga{font-size:var(--t14);color:var(--grafite);margin-top:var(--s8)}

/* ---------- Bottoni. Uno solo pieno per schermata, ed è quello che
     chiama. Tutto il resto è vuoto o è un link. ------------------------- */
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s12)}

.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:48px;
  padding-block:var(--s12);
  padding-inline:var(--s24);
  border:1.5px solid transparent;
  border-radius:var(--r-medio);
  font-family:var(--mano);
  font-size:var(--t16);
  font-weight:700;
  text-decoration:none;
  transition:background-color 160ms ease, color 160ms ease,
             border-color 160ms ease, box-shadow 160ms ease,
             transform 120ms var(--uscita);
}
.bottone--pieno{
  background:var(--terra);
  color:var(--latte);
  box-shadow:0 2px 0 var(--terra-ombra);
}
.bottone--filo{
  border-color:var(--terra);
  color:var(--terra);
  background:transparent;
}
.bottone--chiaro{
  background:var(--terra-luce);
  color:var(--inchiostro);
  box-shadow:0 2px 0 rgba(22,36,28,0.5);
}
.bottone--filo-chiaro{border-color:var(--terra-luce);color:var(--terra-luce)}
.bottone:active{transform:scale(0.96)}
.bottone--pieno:active{background:var(--terra-premuto)}
.bottone--chiaro:active{background:var(--terra-chiara-premuta)}
.bottone--filo:active{background:var(--terra-velo)}

/* Il link dentro il testo: sottolineatura vera, e comincia con un verbo. */
.filo{
  display:inline-flex;align-items:center;gap:var(--s6);
  min-height:44px;
  color:var(--terra);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color 160ms ease;
}
.fascia--foglia .filo{color:var(--terra-luce)}

/* ---------- Apertura: il testo a sinistra, il pergolato a destra -------- */
.apertura{
  display:grid;
  gap:var(--s48);
  padding-block:var(--s48) var(--s72);
}
@media (min-width:900px){
  .apertura{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:var(--s72);
    align-items:center;
    padding-block:var(--s72) var(--s104);
  }
}
.apertura{position:relative;overflow:hidden}
.apertura__testo{display:flex;flex-direction:column;gap:var(--s24);min-width:0;
  position:relative;z-index:1}
.apertura .azioni{margin-top:var(--s4)}
.pergolato{position:relative;z-index:1}

/* ---------- Il sole sotto il pergolato.
     Una macchia di luce calda che si sposta piano, come il sole che filtra
     fra le foglie del tralcio e cambia posto nell'ora di pranzo. Non e' un
     colore d'azione ne' un dato mancante: e' luce, bianca appena scaldata.
     Dietro il testo, non intercetta il puntatore, vive solo dove il
     movimento e' ammesso. -------------------------------------------------- */
.sole{display:none}
@media (prefers-reduced-motion: no-preference){
  .sole{
    display:block;position:absolute;inset:-15% -10%;
    z-index:0;pointer-events:none;
    background:
      radial-gradient(38% 42% at 30% 24%, rgba(255,248,232,0.55) 0%, rgba(255,248,232,0) 70%),
      radial-gradient(30% 34% at 68% 60%, rgba(255,245,224,0.38) 0%, rgba(255,245,224,0) 72%);
    /* durata dichiarata: luce ambientale continua, non un feedback UI;
       ciclo lungo perche' e' il sole che gira, non una risposta al tocco. */
    animation:sole-deriva 22s ease-in-out infinite alternate;
  }
}
@keyframes sole-deriva{
  from{ transform:translate3d(-3%, -2%, 0) scale(1);    opacity:0.7; }
  to  { transform:translate3d(4%, 3%, 0)   scale(1.08); opacity:1; }
}

/* ---------- Il disegno del pergolato.
     Nessuna foto: non ne ho, e una foto stock di tavolate sotto il glicine
     sarebbe una bugia. Il disegno dichiara di essere un disegno. --------- */
.pergolato{display:flex;flex-direction:column;gap:var(--s12);min-width:0}
.pergolato__disegno{width:100%;height:auto;max-width:340px;margin-inline:auto}
.pergolato figcaption{
  font-size:var(--t14);color:var(--grafite);text-align:center;text-wrap:pretty;
}
.d-lontano{fill:none;stroke:var(--cenere);stroke-width:1.2;opacity:0.5;
  stroke-linecap:round}
.d-legno{fill:none;stroke:var(--inchiostro);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.d-tralcio{fill:none;stroke:var(--terra);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.d-tavola{fill:none;stroke:var(--grafite);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- La scheda dei recapiti: raggi concentrici veri.
     La cornice è r16 con 6px di aria, le righe dentro sono r10. ---------- */
.recapito{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:var(--carta);
  border:1px solid var(--filo-tratto);
  border-radius:var(--r-esterno);
  padding:var(--s6);
}
.recapito--colonna{grid-template-columns:1fr}
.recapito__voce{
  display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s16);
  border-radius:var(--r-medio);
  background:var(--chiara);
}
.recapito dt{
  font-size:var(--t12);font-weight:700;line-height:1;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--cenere);
}
.recapito dd{font-size:var(--t18);line-height:1.4}
.recapito dd a{color:var(--terra);text-decoration:underline;text-underline-offset:4px}

/* ---------- Lo scaffale delle conserve: cinque vasi ancora vuoti -------- */
.scaffale{
  display:grid;gap:var(--s16);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.vaso{
  background:var(--carta);
  border:1px solid var(--filo-tratto);
  border-top:2px solid var(--terra);
  border-radius:var(--r-medio);
  padding:var(--s24);
  display:flex;flex-direction:column;gap:var(--s8);
}
.vaso p{font-size:var(--t16);color:var(--grafite)}
.vaso .dc-riga{margin-top:auto;padding-top:var(--s8)}

/* ---------- La carta del menù: sei righe apparecchiate e vuote.
     Il filo di puntini fra il nome della portata e il dato mancante è lo
     stesso che si trova sulle carte stampate: dice «qui manca la voce»
     senza bisogno di scriverlo. ------------------------------------------ */
.carta{
  background:var(--carta);
  border:1px solid var(--filo-tratto);
  border-radius:var(--r-esterno);
  padding:var(--s24);
  max-width:72ch;
}
@media (min-width:600px){.carta{padding:var(--s32)}}
.carta__righe{display:flex;flex-direction:column}
.portata{
  display:flex;align-items:baseline;gap:var(--s12);
  padding-block:var(--s16);
  flex-wrap:wrap;
}
.portata + .portata{border-top:1px solid var(--filo-tenue)}
.portata h3{flex:none}
.portata__filo{
  flex:1 1 40px;
  min-width:24px;
  align-self:flex-end;
  margin-bottom:5px;
  border-bottom:1px dotted var(--filo-tratto);
}

/* ---------- La banda scura: l'unica volta che la pagina si spegne ------ */
.banda{display:grid;gap:var(--s32);align-items:center}
@media (min-width:860px){
  .banda{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s72)}
}
.banda__testo{display:flex;flex-direction:column;gap:var(--s16);min-width:0}
.banda__azioni{display:flex;flex-direction:column;gap:var(--s12);align-items:stretch}
.banda__azioni .bottone{width:100%}

/* ---------- Dove siamo e quando ---------------------------------------- */
.visita{display:grid;gap:var(--s32)}
@media (min-width:760px){.visita{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s48)}}
@media (min-width:1040px){.visita{grid-template-columns:repeat(3,minmax(0,1fr))}}
.visita__colonna{display:flex;flex-direction:column;gap:var(--s12);align-items:flex-start}
.indirizzo{font-size:var(--t21);line-height:1.4}

.quando{
  display:flex;flex-direction:column;gap:var(--s4);
  width:100%;
  background:var(--carta);
  border:1px solid var(--filo-tratto);
  border-radius:var(--r-esterno);
  padding:var(--s6);
}
.quando li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s12);
  padding:var(--s12) var(--s16);
  border-radius:var(--r-medio);
  background:var(--chiara);
  font-size:var(--t14);
  flex-wrap:wrap;
}

/* ---------- Piè di pagina ---------------------------------------------- */
.piede{padding-block:var(--s48)}
.piede__interno{display:flex;flex-direction:column;gap:var(--s12);font-size:var(--t14)}
.piede strong{font-weight:700}
.piede__credito{color:var(--cenere)}

/* ---------- La barra di chiamata fissa.
     Non compare finché si è ancora in cima: mentre l'apertura è sullo
     schermo il bottone che chiama è già lì, e due bottoni identici uno
     sopra l'altro sono rumore. La classe `cima` la mette lo script in
     <head> e la toglie main.js quando l'intestazione esce di scena; senza
     JavaScript la classe non c'è e la barra resta visibile da subito. ---- */
.chiama-fisso{
  position:fixed;
  left:var(--s16);right:var(--s16);bottom:var(--s16);
  z-index:30;
  display:flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:52px;
  padding:var(--s12) var(--s24);
  border-radius:var(--r-medio);
  background:var(--terra);
  color:var(--latte);
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 22px rgba(22,36,28,0.22);
  transition:transform 220ms var(--uscita), opacity 220ms ease;
}
.chiama-fisso:active{background:var(--terra-premuto)}
html.cima .chiama-fisso{
  transform:translateY(calc(100% + var(--s24)));
  opacity:0;
  pointer-events:none;
}
@media (min-width:760px){
  .chiama-fisso{left:auto;right:var(--s24);bottom:var(--s24)}
  /* Sotto la barra ci deve restare aria, altrimenti copre il piè di pagina */
  .piede{padding-bottom:var(--s72)}
}
@media (max-width:759px){
  .piede{padding-bottom:96px}
}

/* ==========================================================================
   MOVIMENTO
   Una regola sola: gli elementi salgono di 12px e si accendono.
   220ms, cubic-bezier(0.23, 1, 0.32, 1), scaglionati di 60ms con --rit.
   Solo transform e opacity. Nessuna durata sopra i 300ms, quindi nessuna
   ragione da dichiarare. Mai ease-in, mai transition: all.
   ========================================================================== */
.rivela{
  transition:opacity 220ms var(--uscita), transform 220ms var(--uscita);
  transition-delay:var(--rit, 0ms);
}
html.anima .rivela{opacity:0;transform:translateY(12px)}
html.anima .rivela.dentro{opacity:1;transform:none}

/* Dal 2026-08-30 (richiesta dell'utente: movimento su ogni cosa): le righe
   di un gruppo — recapiti, orari, piede — entrano a cascata di ~50ms l'una
   dall'altra. Il gruppo e' anche .rivela: entra lui, poi i figli. */
html.anima .rivela--righe > *{opacity:0;transform:translateY(9px)}
html.anima .rivela--righe.dentro > *{opacity:1;transform:none;
  transition:opacity 210ms var(--uscita), transform 210ms 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: su un
   dito il :hover resta appiccicato dopo il tocco e il bottone rimane
   sollevato, su una tastiera non si attiva proprio. */
@media (hover: hover) and (pointer: fine){
  .bottone--pieno:hover{background:var(--terra-premuto)}
  .bottone--chiaro:hover{background:var(--terra-chiara-premuta)}
  .bottone--filo:hover{background:var(--terra-velo);border-color:var(--terra-premuto)}
  .bottone--filo-chiaro:hover{background:rgba(242,246,238,0.10);border-color:var(--terra-luce)}
  .bottone:hover{transform:translateY(-1px)}
  .bottone:active{transform:scale(0.96)}
  .filo:hover{color:var(--terra-premuto)}
  .fascia--foglia .filo:hover{color:var(--terra-chiara-premuta)}
  .chiama-fisso:hover{background:var(--terra-premuto)}
  html:not(.cima) .chiama-fisso:hover{transform:translateY(-2px)}

  /* Micro-reazioni: i vasi e le colonne salgono di un capello, le righe
     scorrono. Solo transform, il segnale statico (bordo terracotta, colore)
     resta. */
  .vaso,.visita__colonna{transition:transform 160ms var(--uscita)}
  .vaso:hover,.visita__colonna:hover{transform:translateY(-3px)}
  .portata,.recapito__voce,.quando li{transition:transform 140ms var(--uscita)}
  .portata:hover,.recapito__voce:hover,.quando li:hover{transform:translateX(2px)}
}

/* Chi ha «riduci movimento» acceso non riceve nemmeno la classe .anima (la
   mette lo script in <head>, che controlla la stessa preferenza): la pagina
   arriva già intera al primo disegno e non si accende sotto gli occhi.
   Questo blocco è la seconda rete, per i casi limite. */
@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}
  .sole{display:none}
}

/* Senza JavaScript la classe .anima non c'è, quindi lo stato nascosto non
   esiste e la pagina resta intera, leggibile e cliccabile. */
html:not(.anima) .rivela,
html:not(.anima) .rivela--righe > *{opacity:1;transform:none}