/* ---------------------------------------------------------------------------
   DALIÙ — foglio di stile unico dell'app.
   Impostazione mobile-first: le regole di base valgono per il telefono,
   i breakpoint aggiungono spazio su tablet e desktop, mai il contrario.
   --------------------------------------------------------------------------- */

/* --- Caratteri: serviti da qui, mai da Google Fonts ------------------------
   Nunito Sans per interfaccia e testi, Inter per i dati densi (manuale v3,
   §12.2). File variabili, solo i set latino ed europeo: licenza OFL in
   assets/font/LICENZA-*.txt. */
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../font/nunito-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../font/nunito-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url(../font/nunito-sans-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../font/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../font/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design token: tema chiaro, scuro e «Sistema» ---------------------------
   Valori dall'Integrazione esecutiva v3.4, §20.3 e §21.3. I componenti usano
   solo questi token, mai un colore scritto a mano.

   Tre stati, decisi da assets/js/tema.js prima del primo disegno:
     nessun attributo      → Sistema: segue prefers-color-scheme
     data-tema="chiaro"    → chiaro anche se il telefono è scuro
     data-tema="scuro"     → scuro anche se il telefono è chiaro
   Per questo il blocco scuro compare due volte: una sotto la media query, per
   chi segue il sistema, e una per chi ha scelto «Scuro».

   Correzioni di contrasto approvate da Vittorio il 21 settembre 2026
   (_progetto/note/proposta_token_contrasto.md): --danger, --text-muted,
   --positive, lo schema di --warning (fondo pesca, testo scuro: la pesca
   scurita diventerebbe uguale al rosso d'errore) e --border-campo, il
   contorno dei campi (3:1), distinto da --border dei separatori.
   Stato, errore e attenzione non si affidano mai al solo colore: accanto
   c'è sempre una parola o un'icona (v3.6, §20.2 e §22.4).

   Ancora provvisori, perché il documento non li dà (segnati «prov.»):
   --surface chiaro, --border chiaro, --surface-alt, --on-primary chiaro,
   --primary-hover scuro. */
:root {
  color-scheme: light;

  --bg: #F7F2EA;
  --surface: #FFFFFF;                 /* prov. */
  --text: #203638;
  --text-muted: #686D6D;              /* approvato: 4,71 sul crema (era #6E7474, 4,27) */
  --primary: #07585A;
  --primary-hover: #0B6B6D;           /* «Teal» della palette */
  --on-primary: #FFFFFF;              /* prov.: testo su fondo pieno (primario, errore, completato) */
  --border: #E3DBD1;                  /* prov.: solo separatori */
  --border-campo: #A28867;            /* approvato: contorno dei campi, 3,36 sul bianco */
  --accent-peach: #F49A7A;
  --accent-sand: #E5CBA8;
  --accent-mint: #DDEDE7;
  --danger: #C53A30;                  /* approvato: 4,69 sul crema, bianco sopra 5,22 */
  --positive: #3F7762;                /* approvato: tinta della menta, 4,68 sul crema */
  --warning: var(--text);             /* approvato: l'attenzione non è un colore di testo */
  --warning-fondo: var(--accent-peach);
  --on-warning: var(--text);          /* testo scuro sulla pesca: 5,92 */
  --surface-alt: #F2ECE4;             /* prov.: ripiego senza color-mix */
  --surface-alt: color-mix(in srgb, var(--surface), var(--border) 45%);
  --shadow: 0 1px 2px rgba(32, 54, 56, .06), 0 4px 16px rgba(32, 54, 56, .06);

  --font-testo: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-dati: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Nomi di prima, rimasti perché li usano tutte le schermate: puntano ai token.
     Si tolgono man mano che le schermate vengono ridisegnate (fasi B–G). */
  --colore-marchio: var(--primary);
  --colore-marchio-chiaro: var(--primary-hover);
  --sfondo: var(--bg);
  --superficie: var(--surface);
  --superficie-alt: var(--surface-alt);
  --testo: var(--text);
  --testo-tenue: var(--text-muted);
  --linea: var(--border);
  --positivo: var(--positive);
  --attenzione: var(--warning-fondo); /* nei componenti è bordo o fondo, non testo */
  --errore: var(--danger);
  --ombra: var(--shadow);

  --raggio: 14px;
  --barra-alta: 56px;
  --barra-bassa: 60px;
  --tocco: 44px;                      /* area minima toccabile */
  --gutter: 16px;

  --sicura-alto: env(safe-area-inset-top, 0px);
  --sicura-basso: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    color-scheme: dark;
    --bg: #102829;
    --surface: #173536;
    --text: #F7F2EA;
    --text-muted: #BCC8C6;
    --primary: #66C6C2;
    --primary-hover: #66C6C2;         /* prov. */
    --on-primary: #102829;            /* §21.3: sul primario testo scuro, --bg */
    --border: #365253;
    --border-campo: #558183;          /* approvato: 3,04 sulla superficie */
    --accent-peach: #F49A7A;
    --accent-sand: #E5CBA8;
    --accent-mint: #9FD6C5;
    --danger: #FF9A91;
    --positive: #9FD6C5;              /* §21.3: menta = completato/positivo */
    --warning: #F49A7A;               /* §21.3: pesca = attenzione, leggibile come testo sullo scuro */
    --warning-fondo: #F49A7A;
    --on-warning: #102829;
    --surface-alt: #1E4243;           /* prov.: ripiego senza color-mix */
    --surface-alt: color-mix(in srgb, var(--surface), var(--border) 45%);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
  }
}
:root[data-tema="scuro"] {
  color-scheme: dark;
  --bg: #102829;
  --surface: #173536;
  --text: #F7F2EA;
  --text-muted: #BCC8C6;
  --primary: #66C6C2;
  --primary-hover: #66C6C2;
  --on-primary: #102829;
  --border: #365253;
  --border-campo: #558183;
  --accent-peach: #F49A7A;
  --accent-sand: #E5CBA8;
  --accent-mint: #9FD6C5;
  --danger: #FF9A91;
  --positive: #9FD6C5;
  --warning: #F49A7A;
  --warning-fondo: #F49A7A;
  --on-warning: #102829;
  --surface-alt: #1E4243;
  --surface-alt: color-mix(in srgb, var(--surface), var(--border) 45%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 16px;                   /* sotto i 16px iOS ingrandisce i campi al focus */
  line-height: 1.5;
  overscroll-behavior-y: contain;
}

body {
  min-height: 100dvh;
  padding-top: calc(var(--barra-alta) + var(--sicura-alto));
  padding-bottom: calc(var(--barra-bassa) + var(--sicura-basso));
}

.salta {
  position: absolute; left: -9999px;
  background: var(--colore-marchio); color: var(--on-primary); padding: .6rem 1rem; z-index: 100;
}
.salta:focus { left: 8px; top: 8px; }

/* --- Barra superiore ------------------------------------------------------ */
.barra-alta {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(var(--barra-alta) + var(--sicura-alto));
  padding: var(--sicura-alto) 8px 0;
  display: flex; align-items: center; gap: 4px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.barra-alta h1 {
  flex: 1; margin: 0; padding: 0 4px;
  font-size: 1.1rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icona {
  min-width: var(--tocco); height: var(--tocco);
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--testo);
  font-size: 1.25rem; cursor: pointer;
}
.icona:active { background: var(--superficie-alt); }
/* display:grid qui sopra vince sull'attributo hidden: senza questa riga la
   freccia «indietro» compariva anche nella schermata iniziale. */
.icona[hidden] { display: none; }

/* --- Barra inferiore ------------------------------------------------------ */
.barra-bassa {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  height: calc(var(--barra-bassa) + var(--sicura-basso));
  padding-bottom: var(--sicura-basso);
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--linea);
}
.barra-bassa .voce {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--testo-tenue);
  font-size: .7rem; padding-top: 6px;
}
.barra-bassa .icona-voce { width: 24px; height: 24px; }
.barra-bassa .voce[aria-current="page"] { color: var(--colore-marchio); font-weight: 600; }

/* --- Contenuto ------------------------------------------------------------ */
.contenuto {
  padding: var(--gutter);
  max-width: 900px;
  margin: 0 auto;
}

h2 { font-size: 1.15rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
p  { margin: .5rem 0; }

.scheda {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: var(--gutter);
  margin-bottom: 12px;
}
.scheda h2, .scheda h3 { margin-top: 0; }

.riga { display: flex; align-items: center; gap: 12px; }
.riga + .riga { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }
.riga .etichetta { color: var(--testo-tenue); font-size: .85rem; }
.riga .valore { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

.pillola {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  background: var(--superficie-alt); color: var(--testo-tenue);
}
.pillola.positivo  { background: color-mix(in srgb, var(--positive) 22%, transparent); color: var(--text); }
.pillola.attenzione{ background: var(--warning-fondo); color: var(--on-warning); }
.pillola.errore    { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--text); }

/* Pulsanti: altezza sempre almeno pari all'area di tocco */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tocco); padding: 0 18px;
  border: 0; border-radius: var(--raggio);
  background: var(--colore-marchio); color: var(--on-primary);
  font-size: 1rem; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.pulsante:active { background: var(--colore-marchio-chiaro); }
.pulsante.secondario {
  background: var(--superficie); color: var(--testo); border: 1px solid var(--linea);
}
.pulsante.largo { width: 100%; }

.vuoto { text-align: center; color: var(--testo-tenue); padding: 3rem 1rem; }
.vuoto .simbolo { font-size: 3rem; display: block; margin-bottom: .5rem; }

.caricamento { display: grid; place-items: center; gap: 12px; padding: 4rem 1rem; color: var(--testo-tenue); }
.rotella {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--linea); border-top-color: var(--colore-marchio);
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotella { animation-duration: 2.4s; } }

/* --- Avvisi temporanei ---------------------------------------------------- */
.avvisi {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--barra-bassa) + var(--sicura-basso) + 12px);
  z-index: 40; width: min(92vw, 420px);
  display: flex; flex-direction: column; gap: 8px;
}
.avviso {
  background: var(--testo); color: var(--sfondo);
  padding: 12px 14px; border-radius: var(--raggio);
  font-size: .9rem; box-shadow: var(--ombra);
}
.avviso.errore { background: var(--errore); color: var(--on-primary); }

.noscript { padding: var(--gutter); color: var(--errore); }

code, .mono { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }

/* --- Tablet: la navigazione passa a lato, il contenuto respira ------------- */
@media (min-width: 768px) {
  :root { --gutter: 24px; }

  body {
    padding-bottom: 0;
    padding-left: 200px;
  }
  .barra-bassa {
    top: calc(var(--barra-alta) + var(--sicura-alto)); bottom: 0; right: auto;
    width: 200px; height: auto;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 12px 8px;
    border-top: 0; border-right: 1px solid var(--linea);
  }
  .barra-bassa .voce {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px;
    width: 100%; min-height: var(--tocco); padding: 0 12px;
    border-radius: var(--raggio); font-size: .95rem;
  }
  .barra-bassa .voce[aria-current="page"] { background: var(--superficie-alt); }
  .barra-alta { padding-left: 16px; }
  .contenuto { padding: var(--gutter) var(--gutter) 48px; }
  .avvisi { left: calc(200px + 50%); }
}

@media (min-width: 1100px) {
  .contenuto { max-width: 1000px; }
  .griglia-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* --- Stampa: l'export vero è il PDF generato dal server, questo è un ripiego  */
@media print {
  .barra-alta, .barra-bassa, .avvisi, .salta { display: none !important; }
  body { padding: 0; background: #fff; }
  .scheda { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Componenti delle schermate: cronologia, fascicolo, validazione, misure.
   --------------------------------------------------------------------------- */

.tenue   { color: var(--testo-tenue); }
.piccolo { font-size: .82rem; }
.negativo{ color: var(--errore); }
.positivo{ color: var(--positivo); }
.valore.grande { font-size: 1.4rem; }
.numerone { font-size: 1.9rem; font-weight: 700; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.freccia { margin-left: auto; color: var(--testo-tenue); font-size: 1.4rem; }

/* Schede che si comportano da collegamento */
.scheda-azione {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.scheda-azione:active { background: var(--superficie-alt); }
.scheda-azione h3 { margin: .3rem 0 .2rem; }

.scheda-animale { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.scheda-animale h2 { margin: 0 0 .1rem; font-size: 1.15rem; }
.ritratto {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem;
  background: var(--superficie-alt); flex: 0 0 auto;
}
.ritratto.grande { width: 68px; height: 68px; font-size: 2.2rem; }
.intestazione-animale { display: flex; align-items: center; gap: 16px; }
.intestazione-animale h2 { margin: 0 0 .2rem; }

/* Avviso che deve farsi notare: disdetta, fascicolo incompleto */
.avviso-forte {
  border-left: 4px solid var(--attenzione);
  background: color-mix(in srgb, var(--attenzione) 7%, var(--superficie));
}
.avviso-forte h3 { margin-top: 0; }

.salvavita { border-left: 4px solid var(--errore); }

/* Cronologia clinica */
.cronologia { list-style: none; margin: 0; padding: 0; }
.cronologia .voce {
  position: relative;
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--raggio);
  padding: 14px; margin-bottom: 10px;
}
.cronologia .bollo {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--superficie-alt); font-size: 1.1rem;
}
.voce-corpo { flex: 1; min-width: 0; }
.voce-corpo h3 { margin: .15rem 0 .1rem; font-size: 1rem; }
.voce-corpo p { margin: .15rem 0; }
.voce-data { font-size: .8rem; color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .03em; }
.voce-importo { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.allegati { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .4rem; }

/* Barre di misura: massimale, categorie di spesa, attendibilità */
.barra {
  height: 8px; border-radius: 999px; background: var(--superficie-alt);
  overflow: hidden; margin: .4rem 0;
}
.barra-riempimento { height: 100%; background: var(--colore-marchio); border-radius: 999px; }
.categoria + .categoria { margin-top: .8rem; }
.categoria-testa { display: flex; justify-content: space-between; font-size: .9rem; }

/* Validazione dell'estrazione */
.anteprima-documento {
  display: grid; place-items: center; gap: 6px;
  background: var(--superficie-alt); border: 1px dashed var(--linea);
  border-radius: var(--raggio); padding: 2.2rem 1rem; margin: .8rem 0;
  font-size: 2.4rem;
}
.anteprima-documento p { font-size: .85rem; margin: 0; }

.campo label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .85rem; color: var(--testo-tenue); margin-bottom: .35rem;
}
.campo input, textarea {
  width: 100%; min-height: var(--tocco);
  padding: 10px 12px; font-size: 1rem; font-family: inherit;
  color: var(--testo); background: var(--sfondo);
  border: 1px solid var(--border-campo); border-radius: 10px;
}
textarea { line-height: 1.5; resize: vertical; }
.campo input:focus, textarea:focus { outline: 2px solid var(--colore-marchio); outline-offset: 1px; }
.campo.da_confermare { border-left: 4px solid var(--attenzione); }
.campo.errore { border-left: 4px solid var(--errore); }
.campo.errore input { border-color: var(--errore); }
.confidenza { height: 4px; background: var(--superficie-alt); border-radius: 999px; margin: .5rem 0 .2rem; }
.confidenza-barra { height: 100%; background: var(--colore-marchio); border-radius: 999px; }
.campo.errore .confidenza-barra { background: var(--errore); }
.campo.da_confermare .confidenza-barra { background: var(--attenzione); }

/* Lista di controllo del fascicolo */
.lista-controllo { list-style: none; margin: 0 0 12px; padding: 0; }
.voce-controllo {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--raggio); padding: 12px 14px; margin-bottom: 8px;
}
.voce-controllo .segno {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--superficie-alt); font-size: .85rem;
}
.voce-controllo.pronto .segno { background: color-mix(in srgb, var(--positive) 22%, transparent); color: var(--text); }
.voce-controllo.mancante { border-left: 4px solid var(--errore); }
.voce-controllo.mancante .segno { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--text); }
.voce-controllo.da_confermare .segno { background: var(--warning-fondo); color: var(--on-warning); }
.voce-controllo p { margin: 0; }
.titolo-documento { font-weight: 600; }
.voce-controllo button { margin-left: auto; }
.pulsante.piccolo { min-height: var(--tocco); padding: 0 12px; font-size: .85rem; }

/* Azioni in fondo alla schermata */
.barra-azioni { display: flex; gap: 10px; margin: 16px 0 8px; }
.barra-azioni .pulsante { flex: 1; }
.pulsante[disabled] { opacity: .5; pointer-events: none; }

.riga-scadenza { display: flex; align-items: center; gap: 12px; }
.riga-scadenza h3 { margin: 0 0 .1rem; font-size: 1rem; }
.riga-scadenza p { margin: 0; }
.riga-scadenza .pillola { margin-left: auto; white-space: nowrap; }
.riga-scadenza.urgente { border-left: 4px solid var(--attenzione); }

/* Cinque voci in barra: su schermi stretti servono caratteri più piccoli */
@media (max-width: 400px) {
  .barra-bassa .voce { font-size: .62rem; }
  .barra-bassa .icona-voce { width: 22px; height: 22px; }
}

/* ---------------------------------------------------------------------------
   Calendario: mese, anno, elenco.
   --------------------------------------------------------------------------- */

.barra-calendario { margin-bottom: 14px; }
.schede { display: flex; gap: 6px; margin-bottom: 10px; }
.scheda-selettore {
  flex: 1; min-height: var(--tocco);
  border: 1px solid var(--linea); border-radius: var(--raggio);
  background: var(--superficie); color: var(--testo-tenue);
  font-size: .95rem; font-weight: 600; cursor: pointer;
}
.scheda-selettore.attiva { background: var(--colore-marchio); color: var(--on-primary); border-color: var(--colore-marchio); }
.navigazione-periodo { display: flex; align-items: center; gap: 8px; }
.navigazione-periodo strong { flex: 1; text-align: center; text-transform: capitalize; }

/* --- griglia del mese --- */
.mese { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 10px; }
.settimana-testa, .griglia-mese { display: grid; grid-template-columns: repeat(7, 1fr); }
.settimana-testa span {
  text-align: center; font-size: .72rem; color: var(--testo-tenue);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px;
}
.giorno {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border-radius: 10px; font-size: .9rem;
}
.giorno.fuori { visibility: hidden; }
.giorno.pieno { background: var(--superficie-alt); font-weight: 600; }
.giorno.oggi { outline: 2px solid var(--colore-marchio); outline-offset: -2px; }
.giorno .punti { display: flex; gap: 2px; min-height: 6px; }
.punto { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--testo-tenue); }

.cat-scadenza      .bollo, .punto.cat-scadenza      { background: color-mix(in srgb, var(--warning-fondo) 45%, transparent); }
.punto.cat-scadenza      { background: var(--attenzione); }
.cat-clinico       .bollo, .punto.cat-clinico       { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.punto.cat-clinico       { background: var(--colore-marchio); }
.cat-pratica       .bollo, .punto.cat-pratica       { background: color-mix(in srgb, var(--positive) 22%, transparent); }
.punto.cat-pratica       { background: var(--positivo); }
.cat-polizza       .bollo, .punto.cat-polizza       { background: color-mix(in srgb, var(--danger) 20%, transparent); }
.punto.cat-polizza       { background: var(--errore); }
.cat-comunicazione .bollo, .punto.cat-comunicazione { background: var(--superficie-alt); }
.punto.cat-comunicazione { background: var(--testo-tenue); }

/* --- anno: dodici mesi in miniatura --- */
.anno { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.mini-mese {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--raggio); padding: 8px; cursor: pointer;
}
.mini-mese:active { background: var(--superficie-alt); }
.mini-testa {
  display: flex; justify-content: space-between;
  font-size: .78rem; font-weight: 600; text-transform: capitalize; margin-bottom: 5px;
}
.mini-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini { width: 100%; aspect-ratio: 1; border-radius: 2px; background: var(--superficie-alt); }
.mini.vuota { background: transparent; }
.mini.liv-1 { background: color-mix(in srgb, var(--colore-marchio) 35%, var(--superficie-alt)); }
.mini.liv-2 { background: color-mix(in srgb, var(--colore-marchio) 65%, var(--superficie-alt)); }
.mini.liv-3 { background: var(--colore-marchio); }

/* --- voci --- */
.voce-agenda {
  display: flex; align-items: flex-start; gap: 12px;
  text-decoration: none; color: inherit; padding: 12px 14px;
}
.voce-agenda.previsto { border-style: dashed; }
.voce-agenda h3 { margin: .1rem 0; font-size: .98rem; }
.voce-agenda p { margin: 0; }
.titolo-mese { text-transform: capitalize; margin: 1.4rem 0 .5rem; color: var(--testo-tenue); }
.linea-oggi {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  color: var(--colore-marchio); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
}
.linea-oggi::before, .linea-oggi::after { content: ''; flex: 1; height: 1px; background: var(--colore-marchio); opacity: .4; }

.legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 12px 0; font-size: .8rem; color: var(--testo-tenue); }
.voce-legenda { display: inline-flex; align-items: center; gap: 6px; }

@media (min-width: 768px) {
  .anno { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------------
   Iter della pratica: linea temporale (Gantt) ed elenco dei passi.
   --------------------------------------------------------------------------- */

.gantt { padding-bottom: 8px; }
.gantt-scala {
  position: relative; height: 18px; margin: 0 0 6px 40%;
  border-bottom: 1px solid var(--linea);
}
.gantt-scala .tacca {
  position: absolute; top: 0; font-size: .68rem; color: var(--testo-tenue);
  transform: translateX(-50%); white-space: nowrap;
}
.linea-adesso {
  position: absolute; top: 0; bottom: -1000px; width: 2px;
  background: var(--colore-marchio); opacity: .45;
}

.gantt-riga { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.gantt-nome {
  width: 40%; flex: 0 0 40%;
  font-size: .74rem; color: var(--testo-tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-corsia {
  position: relative; flex: 1; height: 14px;
  background: var(--superficie-alt); border-radius: 7px;
}
.gantt-barra { position: absolute; top: 0; height: 14px; border-radius: 7px; }
.gantt-barra.nei-tempi { background: var(--positivo); }
.gantt-barra.oltre     { background: var(--attenzione); }
.gantt-barra.scaduta   { background: var(--errore); }
.gantt-barra.attesa    { background: color-mix(in srgb, var(--colore-marchio) 45%, transparent); }
.gantt-barra.inerte    { background: var(--linea); }
.gantt-riga.non_applicabile .gantt-nome { opacity: .5; }

/* --- elenco dei passi --- */
.passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passo {
  position: relative; display: flex; gap: 12px; padding: 0 0 18px 0;
}
.passo::before {
  content: ''; position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--linea);
}
.passo:last-child::before { display: none; }
.passo-numero {
  position: relative; z-index: 1; flex: 0 0 28px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie-alt); color: var(--testo-tenue);
  font-size: .8rem; font-weight: 700;
  border: 2px solid var(--sfondo);
}
.passo.fatta .passo-numero      { background: var(--positivo); color: var(--on-primary); }
.passo.in_corso .passo-numero   { background: var(--colore-marchio); color: var(--on-primary); }
.passo.in_ritardo .passo-numero { background: var(--errore); color: var(--on-primary); }
.passo.non_applicabile { opacity: .45; }
.passo-corpo { flex: 1; min-width: 0; }
.passo-corpo h3 { margin: .15rem 0 .2rem; font-size: .98rem; }
.passo-corpo p { margin: .15rem 0; }

/* --- filtri del calendario --- */
.filtri { margin-bottom: 12px; }
.filtri-categorie { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tocco); padding: 0 12px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--superficie); color: var(--testo-tenue);
  font-size: .82rem; cursor: pointer;
}
.filtro .punto { opacity: .35; }
.filtro.attivo { color: var(--testo); border-color: var(--testo-tenue); font-weight: 600; }
.filtro.attivo .punto { opacity: 1; }
.filtro.azzera { border-style: dashed; }
.ricerca {
  width: 100%; min-height: var(--tocco); padding: 0 14px;
  font-size: 1rem; font-family: inherit;
  color: var(--testo); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--raggio);
}
.ricerca:focus { outline: 2px solid var(--colore-marchio); outline-offset: 1px; }

/* --- il giorno si può toccare --- */
.giorno {
  border: 0; font: inherit; color: inherit; cursor: pointer;
  width: 100%;
}
.giorno[disabled] { cursor: default; color: var(--testo-tenue); }
.giorno.scelto { background: var(--colore-marchio); color: var(--on-primary); }
.giorno.scelto .punto { background: var(--on-primary); }
.testa-giorno { display: flex; align-items: center; gap: 12px; }
.testa-giorno h2 { flex: 1; }
.testa-giorno.giorno-scelto h2 { text-transform: capitalize; }

/* --- scorte --- */
.punto.cat-scorta { background: #6b5bd2; }
.cat-scorta .bollo { background: rgba(107,91,210,.16); }
.scorta.da_riordinare { border-left: 4px solid var(--attenzione); }
.scorta.esaurito { border-left: 4px solid var(--errore); }
.scorta h3 { margin: 0 0 .1rem; font-size: 1rem; }

/* --- interruttori delle preferenze --- */
.interruttore {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--linea); cursor: pointer;
}
.interruttore:first-of-type { border-top: 0; }
.interruttore input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--colore-marchio); }
.interruttore span { display: flex; flex-direction: column; gap: 2px; }

/* --- selettore dell'animale: compare solo dal secondo in poi --- */
.selettore-animale {
  display: flex; gap: 6px; margin-bottom: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.scelta-animale {
  flex: 0 0 auto; min-height: var(--tocco); padding: 0 16px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--superficie); color: var(--testo-tenue);
  font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.scelta-animale.attiva {
  background: var(--colore-marchio); color: var(--on-primary); border-color: var(--colore-marchio);
}

/* Il gruppo si distingue dall'animale: è un insieme, non una bestia. */
.scelta-animale.gruppo { border-style: dashed; }
.scelta-animale.gestisci {
  display: inline-flex; align-items: center;
  color: var(--colore-marchio); border-color: transparent;
  text-decoration: none; font-weight: 600;
}

/* Nelle viste d'insieme ogni voce dice di chi parla. */
.etichetta-animale {
  display: inline-block; margin-right: 6px; padding: 1px 8px;
  background: var(--superficie-alt); border-radius: 999px;
  font-size: .72rem; font-weight: 700; color: var(--testo-tenue);
  vertical-align: middle;
}

/* --- gruppi di animali --- */
.campo select {
  width: 100%; min-height: var(--tocco);
  padding: 10px 12px; font-size: 1rem; font-family: inherit;
  color: var(--testo); background: var(--sfondo);
  border: 1px solid var(--border-campo); border-radius: 10px;
}
.campo { margin-bottom: .9rem; }
.campo > span { display: block; font-size: .85rem; color: var(--testo-tenue); margin-bottom: .35rem; }
fieldset.campo { border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .8rem; }
fieldset.campo legend { font-size: .85rem; color: var(--testo-tenue); padding: 0 .3rem; }
.spunta {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--linea); cursor: pointer;
}
.spunta:first-of-type { border-top: 0; }
.spunta input { width: 20px; height: 20px; accent-color: var(--colore-marchio); }
.pulsante.minuto { min-height: var(--tocco); padding: 0 12px; font-size: .82rem; }
.pulsante.testo { background: none; border: 0; color: var(--testo-tenue); }
.pulsante.testo.pericolo { color: var(--errore); }
.vuoto.piccolo { padding: 1.2rem 1rem; }

/* --- negozio: la quantità si tocca con il pollice --- */
.quantita { display: flex; align-items: center; gap: 8px; margin: .6rem 0; }
.quantita-valore {
  width: 72px; text-align: center; min-height: var(--tocco);
  padding: 8px; font-size: 1rem; font-family: inherit;
  color: var(--testo); background: var(--sfondo);
  border: 1px solid var(--linea); border-radius: 10px;
}
.campo-codice {
  flex: 1; min-height: var(--tocco); padding: 10px 12px;
  font-size: 1rem; font-family: inherit; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo); background: var(--sfondo);
  border: 1px solid var(--linea); border-radius: 10px;
}
.riga.totale { border-top: 1px solid var(--linea); margin-top: .4rem; padding-top: .6rem; }
.riga.totale .valore { font-size: 1.15rem; font-weight: 700; }
.dettaglio-ordine { border-top: 1px solid var(--linea); margin-top: .6rem; padding-top: .6rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* --- moduli lunghi: due campi in riga dove il telefono ce la fa --- */
.campo-doppio { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 480px) {
  .campo-doppio { grid-template-columns: 1fr 1fr; gap: .8rem; }
}
.azioni { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.campo em { color: var(--accento, #b45309); font-style: normal; }
.campo small { display: block; margin-top: .3rem; line-height: 1.45; }
.campo details > summary, details.campo > summary { min-height: var(--tocco); display: flex; align-items: center; cursor: pointer; }

/* --- amministrazione: linguette, cifre, tabelle --- */
.schede-nav {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem;
  margin-bottom: .8rem; -webkit-overflow-scrolling: touch;
}
.scheda-linguetta {
  flex: 0 0 auto; min-height: var(--tocco); padding: 8px 14px;
  font: inherit; font-size: .92rem; color: var(--testo-tenue);
  background: var(--sfondo); border: 1px solid var(--linea);
  border-radius: 999px; cursor: pointer;
}
.scheda-linguetta.attiva {
  color: var(--sfondo); background: var(--testo); border-color: var(--testo);
}

/* Etichetta e numero stanno in riga, con il numero a destra: un cruscotto
   si legge scorrendo la colonna dei valori, non cercandoli nel testo. */
.cifre { margin: .4rem 0 0; }
.cifre > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linea);
}
.cifre > div:last-child { border-bottom: 0; }
.cifre dt { color: var(--testo-tenue); font-size: .92rem; }
.cifre dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tabella { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabella th, .tabella td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--linea); }
.tabella th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
/* Su telefono la tabella scorre invece di spezzare le righe. */
.scheda:has(> .tabella) { overflow-x: auto; }

/* --- pulsanti compatti solo col mouse ---
   Di base i pulsanti piccoli, i filtri e il selettore degli animali sono alti
   quanto un dito (--tocco): il CSS di partenza è quello del telefono. Dove c'è
   un puntatore preciso tornano bassi, e la schermata del PC resta densa. */
@media (hover: hover) and (pointer: fine) {
  .pulsante.piccolo, .filtro { min-height: 34px; }
  .pulsante.minuto { min-height: 32px; }
  .scelta-animale { min-height: 38px; }
}

/* Un pulsante che apre un modulo sul posto: niente triangolino del browser. */
summary.pulsante { list-style: none; }
summary.pulsante::-webkit-details-marker { display: none; }
details[open] > summary.pulsante { margin-bottom: 12px; }

/* --- Sostieni il pilota: banner e livella (il pulsante in testata non c'è più:
   «Sostieni» sta in Altro e nella home, decisione 14) ---------------------- */

.novita {
  display: block; text-decoration: none; color: var(--testo);
  background: var(--superficie-alt); border-bottom: 1px solid var(--linea);
  padding: 10px var(--gutter); min-height: var(--tocco);
  font-size: .9rem; overflow: hidden;
}
.novita[hidden] { display: none; }
.icona-novita { width: 18px; height: 18px; vertical-align: -3px; }
.novita-testo { display: block; transition: opacity .3s ease, transform .3s ease; }
.novita-testo.esce { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .novita-testo { transition: none; } }

.livella { position: relative; padding-top: 28px; }
.livella-trave {
  position: absolute; top: 10px; left: 12%; right: 12%; height: 6px;
  border-radius: 3px; background: var(--testo-tenue);
  transform-origin: 50% 50%; transition: transform .6s ease;
}
.livella-piatti { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.livella-pila { text-align: center; }
.livella-colonna {
  position: relative; height: 220px; margin: 0 auto; max-width: 140px;
  border-bottom: 3px solid var(--testo-tenue);
}
.pila { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 8px 8px 0 0; }
.pila.costi { background: var(--attenzione); }
.pila.costi-forchetta { background: var(--attenzione); opacity: .3; }
.pila.donazioni { background: var(--colore-marchio); }
.livella-cifra { font-weight: 700; font-size: 1.1rem; margin: .5rem 0 0; }
@media (min-width: 768px) { .livella-colonna { height: 280px; } }

/* --- I dati della società, quando c'è una società che vende --------------- */
.piede {
  padding: 16px var(--gutter) 24px; text-align: center;
  font-size: .78rem; color: var(--testo-tenue); line-height: 1.6;
}
.piede[hidden] { display: none; }

/* ===========================================================================
   Sito pubblico — home (fase A, Integrazione esecutiva v3.4 §3)
   Ambiente distinto dall'app: via testata e barra dell'app, testata e piede
   propri. Solo token: nessun colore scritto qui.
   =========================================================================== */
body.pubblico { padding: 0; }
body.pubblico .barra-alta,
body.pubblico .barra-bassa,
body.pubblico .novita,
body.pubblico .piede { display: none; }
body.pubblico .contenuto { padding: 0; max-width: none; }

.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.home { --larghezza: 1120px; font-family: var(--font-testo); }
.home h1, .home h2 { line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.home h2 { font-size: 1.5rem; margin: 0 0 1rem; }

.home-testata {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + var(--sicura-alto)) var(--gutter) 12px;
  max-width: var(--larghezza); margin: 0 auto;
}
.home-marchio {
  font-weight: 900; font-size: 1.35rem; letter-spacing: .02em;
  color: var(--primary); text-decoration: none;
}

.home-blocco {
  max-width: var(--larghezza); margin: 0 auto;
  padding: 40px var(--gutter);
}
.home-blocco + .home-blocco { border-top: 1px solid var(--border); }
.home-grande { font-size: 1.25rem; line-height: 1.45; margin: 0 0 1.25rem; }
.home-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }

/* Foto: mai scurite né colorate dal tema (v3.4 §20.2). Lo spazio è riservato
   da width/height, così la pagina non salta mentre arrivano. */
.foto {
  display: block; width: 100%; height: auto;
  border-radius: var(--raggio); background: var(--surface-alt);
}
.foto.verticale { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* Segnaposto dichiarati: si vede che manca qualcosa, e cosa. */
.segnaposto-asset {
  display: grid; place-items: center; text-align: center;
  width: 100%; min-height: 180px; padding: 16px;
  border: 2px dashed var(--border); border-radius: var(--raggio);
  background: var(--surface-alt); color: var(--text-muted);
  font-size: .9rem;
}
.segnaposto-asset.verticale { aspect-ratio: 4 / 5; min-height: 0; }
.segnaposto-asset.schermata { min-height: 220px; margin: 1rem 0; }
.segnaposto-cta { border-style: dashed; cursor: default; opacity: .75; }

.icona-svg { width: 24px; height: 24px; flex: 0 0 auto; }

/* 1 · Hero */
.home-hero { display: grid; gap: 24px; padding-top: 16px; border-top: 0; }
.home-marchio-grande {
  margin: 0; font-weight: 900; font-size: 2.6rem; letter-spacing: .02em;
  color: var(--primary); line-height: 1;
}
.home-hero h1 { font-size: 1.9rem; margin: .5rem 0 .75rem; font-weight: 800; }
.home-sottotitolo { font-size: 1.1rem; color: var(--text-muted); margin: 0; }
.home-hero-foto .foto { max-height: 70vh; }

/* 2 · Problema */
.home-tessere { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.home-tessere li {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: var(--raggio);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 1.15rem; font-weight: 700;
}
.home-tessere .icona-svg { width: 28px; height: 28px; color: var(--primary); }

/* 3 · Come funziona: la conferma di chi controlla è il passo che conta */
.home-passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: passo; }
.home-passi li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--raggio);
  background: var(--surface); border: 1px solid var(--border);
  font-weight: 700;
}
.home-passi .icona-svg { color: var(--primary); }
.home-passi li.in-evidenza { border: 2px solid var(--primary); }

/* 4 · Origine */
.home-coppia { display: grid; gap: 20px; }
.home-coppia figure { margin: 0; }
.home-coppia figcaption { margin-top: .75rem; font-size: 1.1rem; }

/* 5 · Il nome */
.home-nome { display: grid; gap: 24px; align-items: center; }
.home-formula { font-size: 2rem; font-weight: 800; letter-spacing: .01em; }
.home-formula em { font-style: normal; color: var(--primary); }
.home-formula-esito { color: var(--primary); }

/* 6 · La storia nel tempo: una sequenza che si scorre col dito */
.home-sequenza {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.home-sequenza > * { scroll-snap-align: start; aspect-ratio: 4 / 5; }
.home-sequenza .foto { height: 100%; object-fit: cover; }

/* 7 · NFC */
.home-nfc { display: grid; gap: 24px; align-items: center; }
.home-simbolo { margin: 0 0 .5rem; color: var(--primary); }
.home-simbolo .icona-svg { width: 40px; height: 40px; }

/* 9 · Rimborsi: le cinque fasi */
.home-flusso {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px;
  font-weight: 700;
}
.home-flusso li { display: inline-flex; align-items: center; gap: 6px; }
.home-flusso .freccia { width: 18px; height: 18px; color: var(--text-muted); }

/* 10 · Comunità */
.home-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-mosaico .foto { height: 100%; object-fit: cover; aspect-ratio: 1; }
.home-mosaico .foto.alta { aspect-ratio: 3 / 4; }
.home-mosaico .foto.larga { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* Pagine pubbliche (come funziona, storia, medaglietta) */
.home-pagina { padding-top: 16px; border-top: 0; }
.home-pagina h1 { font-size: 1.8rem; font-weight: 800; margin: 0 0 1.25rem; }
.home-due-colonne { display: grid; gap: 20px; align-items: start; }
.home-due-colonne figure { margin: 0; }
.home-due-colonne figcaption { margin-top: .5rem; color: var(--text-muted); }
.home-foto-piccola { max-width: 280px; }
.home-passi.verticali { grid-auto-flow: row; }
.home-dopo { margin-top: 1.25rem; }

/* 11 · Pilota e piede */
.home-pilota { text-align: left; }
.home-piede {
  max-width: var(--larghezza); margin: 0 auto;
  padding: 24px var(--gutter) calc(32px + var(--sicura-basso));
  border-top: 1px solid var(--border); color: var(--text-muted); font-size: .9rem;
}

@media (min-width: 700px) {
  .home-coppia { grid-template-columns: 1fr 1fr; }
  .home-tessere, .home-passi { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .home-passi.verticali { grid-auto-flow: row; }
  .home-due-colonne { grid-template-columns: 1fr 1fr; }
  .home-pagina h1 { font-size: 2.3rem; }
  .home-sequenza { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  /* Tre colonne a righe fisse: cinque foto di forme diverse senza buchi. */
  .home-mosaico { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; }
  .home-mosaico .foto, .home-mosaico .foto.alta { aspect-ratio: auto; }
  .home-mosaico .foto.larga { grid-column: span 2; aspect-ratio: auto; }
  .home h2 { font-size: 1.9rem; }
  .home-blocco { padding-top: 64px; padding-bottom: 64px; }
}

@media (min-width: 900px) {
  .home-hero { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
  .home-marchio-grande { font-size: 3.4rem; }
  .home-hero h1 { font-size: 2.6rem; }
  .home-nome { grid-template-columns: .8fr 1.2fr; gap: 48px; }
  .home-nfc { grid-template-columns: 1fr 1fr; gap: 48px; }
  .home-formula { font-size: 2.8rem; }
}


/* ===========================================================================
   App — fase B: volto dell'animale, Oggi, Altro, foto o avatar
   Solo token. Stato e livello si leggono da icona e parola, non dal colore.
   =========================================================================== */

/* Il volto: foto, avatar approvato o segnaposto neutro della specie */
.identita {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--surface-alt); color: var(--text-muted);
  border: 1px solid var(--border);
}
.identita img { width: 100%; height: 100%; object-fit: cover; display: block; }
.identita-piccolo { width: 32px; height: 32px; }
.identita-medio   { width: 64px; height: 64px; }
.identita-grande  { width: 120px; height: 120px; }
.identita .segnaposto-specie { width: 55%; height: 55%; }

/* Selettore: miniatura tonda + nome */
.scelta-animale.con-volto { display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; }
.scelta-animale[aria-pressed="true"] .identita { border: 2px solid var(--on-primary); }

/* Oggi */
.oggi-identita { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.oggi-identita h2 { margin: 0 0 2px; font-size: 1.4rem; }
.collegamento-discreto {
  display: inline-flex; align-items: center; min-height: var(--tocco);
  color: var(--primary); font-weight: 600; font-size: .95rem;
}
.oggi-attenzioni { display: grid; gap: 10px; margin-bottom: 18px; }
.attenzione {
  display: flex; align-items: center; gap: 12px; margin: 0;
  text-decoration: none; color: var(--text);
  border-left: 4px solid var(--border);
}
.attenzione-icona { width: 26px; height: 26px; }
.attenzione-testo { flex: 1; display: grid; gap: 2px; min-width: 0; }
.attenzione-parola {
  justify-self: start; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
}
.attenzione .freccia { width: 20px; height: 20px; color: var(--text-muted); }
.livello-errore { border-left-color: var(--danger); }
.livello-errore .attenzione-icona { color: var(--danger); }
.livello-errore .attenzione-parola { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--text); }
.livello-attenzione { border-left-color: var(--warning-fondo); }
.livello-attenzione .attenzione-icona { color: var(--text); }
.livello-attenzione .attenzione-parola { background: var(--warning-fondo); color: var(--on-warning); }
.livello-informazione { border-left-color: var(--primary); }
.livello-informazione .attenzione-icona { color: var(--primary); }
.livello-informazione .attenzione-parola { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--text); }
.oggi-tranquillo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.oggi-tranquillo p { margin: 0; }
.oggi-tranquillo .icona-svg { color: var(--positive); }

.oggi-azioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.azione-rapida {
  display: grid; justify-items: center; align-content: center; gap: 6px;
  min-height: 76px; padding: 10px 4px;
  border-radius: var(--raggio); background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-weight: 700; font-size: .85rem;
}
.azione-rapida .icona-svg { color: var(--primary); width: 26px; height: 26px; }
.azione-rapida:active { background: var(--surface-alt); }

.oggi-recenti h3 { margin: 0 0 8px; font-size: 1.05rem; }
.cronologia-breve { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cronologia-breve li {
  display: grid; grid-template-columns: 6.5em 1fr; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.tipo-evento { font-weight: 700; }

/* Altro */
.elenco-altro { padding: 4px 0; }
.voce-altro {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border);
}
.voce-altro:last-child { border-bottom: 0; }
.voce-altro span { flex: 1; font-weight: 600; }
.voce-altro .icona-svg { color: var(--primary); }
.voce-altro .freccia { color: var(--text-muted); width: 20px; height: 20px; }

/* Come vuoi riconoscere [Nome]? */
.riconoscere { text-align: center; }
.riconoscere-volto { display: grid; justify-items: center; margin: 8px 0 12px; }
.riconoscere h2 { margin: 0 0 16px; }
.scelta-foto { cursor: pointer; }
.scegli-avatar { text-align: left; margin: 12px 0; }
.scegli-avatar h3 { margin: 16px 0 8px; font-size: 1rem; }
.griglia-avatar { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.opzione-avatar {
  position: relative; display: grid; justify-items: center; gap: 6px;
  padding: 10px 6px; min-height: var(--tocco);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-campo); border-radius: var(--raggio);
  font: inherit; cursor: pointer;
}
.opzione-avatar.attiva { border: 2px solid var(--primary); }
.opzione-nome { font-size: .8rem; line-height: 1.2; }
.opzione-scelta { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; color: var(--primary); }

.elenco-storie { display: grid; gap: 10px; }
.elenco-storie .scheda-animale { display: flex; align-items: center; gap: 14px; }

@media (min-width: 768px) {
  .oggi-azioni { max-width: 640px; }
}

/* ===========================================================================
   App — fase C: Storia a schede, caricamento, calendario
   Manuale v3, §7.2: foto e nome dominano, la timeline è l'elemento principale.
   Solo token.
   =========================================================================== */

/* Testata della Storia: il volto grande e il nome, centrati sul telefono */
.storia-testata {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  margin: 4px 0 14px;
}
.storia-testata h1 { margin: 0; font-size: 1.8rem; line-height: 1.15; }
.storia-testata p { margin: 2px 0 0; }
.storia-testata .identita-grande { width: 132px; height: 132px; }

/* Linguette: una riga che scorre sul telefono, sottolineata quella scelta */
.linguette {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.linguette::-webkit-scrollbar { display: none; }
.linguetta {
  flex: 1 0 auto; min-height: var(--tocco); padding: 0 8px;
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--text-muted); cursor: pointer;
}
.pulsante-testo { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.linguetta[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.linguetta:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pannello { display: grid; gap: 12px; }
.pannello > * { margin: 0; }
.pannello .scheda h2 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.1rem;
}
.pannello .scheda h2 .icona-svg { color: var(--primary); width: 22px; height: 22px; }
.pannello .pulsante .icona-svg { width: 20px; height: 20px; }
.titolo-sezione { margin: 8px 0 0; font-size: 1rem; color: var(--text-muted); }

/* La linea del tempo, per anno */
.storia-anno { display: grid; gap: 4px; }
.storia-anno-titolo {
  margin: 10px 0 4px; font-size: 1.05rem; font-family: var(--font-dati);
  color: var(--text-muted); letter-spacing: .02em;
}
.storia-linea { list-style: none; margin: 0; padding: 0; position: relative; }
.storia-linea::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px;
  border-left: 2px solid var(--border);
}
.storia-voce { display: flex; gap: 12px; padding: 6px 0 12px; position: relative; }
.storia-segno {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary);
  border: 2px solid var(--bg); position: relative;
}
.storia-segno .icona-svg { width: 20px; height: 20px; }
.storia-corpo {
  flex: 1; min-width: 0; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raggio);
}
.storia-corpo h3 { margin: 2px 0; font-size: 1.02rem; }
.storia-corpo p { margin: 2px 0; }
.storia-quando { font-size: .85rem; color: var(--text-muted); }
.storia-quando .tipo-evento { color: var(--text); }
.storia-dettagli { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px !important; }
.storia-dettagli .pillola { display: inline-flex; align-items: center; gap: 4px; }
.storia-importo { margin-left: auto; font-family: var(--font-dati); font-weight: 700; font-variant-numeric: tabular-nums; }
.icona-svg.mini { width: 14px; height: 14px; }
.appena-aggiunta .storia-corpo { border: 2px solid var(--positive); }
.appena-aggiunta .storia-segno { background: var(--positive); color: var(--on-primary); }
.appena-aggiunta-segno { margin: 0 0 4px !important; }
.storia-vuota { display: grid; gap: 12px; }
.storia-vuota p { margin: 0; }

/* Il messaggio editoriale della pagina: uno solo, discreto (v3.6, §9) */
.claim {
  padding: 14px 16px; border-radius: var(--raggio);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg)); color: var(--text);
  font-weight: 700; line-height: 1.4;
}

/* Elenchi semplici: nome a sinistra, valore a destra */
.elenco-semplice { list-style: none; margin: 0; padding: 0; }
.elenco-semplice li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.elenco-semplice li:last-child { border-bottom: 0; }
.elenco-semplice li > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cifre dd { white-space: normal; text-align: right; }
.elenco-semplice .pillola { display: inline-block; width: auto; margin: 2px 0 0 6px; }

/* Archivio dei documenti */
.elenco-documenti {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raggio);
}
.elenco-documenti li + li { border-top: 1px solid var(--border); }
.documento {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 14px;
  background: none; border: 0; font: inherit; text-align: left; color: var(--text); text-decoration: none;
}
button.documento, a.documento { cursor: pointer; }
.documento-segno { color: var(--primary); display: grid; }
.documento-testo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.documento-testo strong { overflow-wrap: anywhere; }
.documento-testo .pillola { justify-self: start; }
.documento .freccia { width: 20px; height: 20px; color: var(--text-muted); }

@media (min-width: 768px) {
  .storia-testata { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 20px; }
  .storia-testata h1 { font-size: 2.2rem; }
  .storia-testata .identita-grande { width: 148px; height: 148px; }
  .linguette { margin-left: 0; margin-right: 0; padding: 0; }
  .linguetta { flex: 0 0 auto; padding: 0 18px; }
  .pannello { max-width: 760px; }
}

/* Caricamento: i quattro passi del manuale v3, §7.4, con quello in corso */
.passi-caricamento {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.passi-caricamento li {
  display: grid; justify-items: center; gap: 4px; padding: 8px 2px;
  text-align: center; font-size: .78rem; font-weight: 700; line-height: 1.2;
  color: var(--text-muted); border-bottom: 3px solid var(--border);
}
.passi-caricamento .icona-svg { width: 22px; height: 22px; }
.passi-caricamento li.fatto { color: var(--text); border-bottom-color: var(--positive); }
.passi-caricamento li.fatto .icona-svg { color: var(--positive); }
.passi-caricamento li[aria-current="step"] { color: var(--primary); border-bottom-color: var(--primary); }
@media (min-width: 768px) {
  .passi-caricamento { max-width: 640px; }
  .passi-caricamento li { font-size: .85rem; }
}

/* ===========================================================================
   Sito pubblico — linguaggio della tavola di riferimento (21 settembre, sera)
   Decisione di Vittorio: foto e testi dalla v3.6, il modo di proporli e
   l'emozione dalla tavola. Quindi: foto grandi che sfumano nel fondo invece
   di rettangoli affiancati, angoli morbidi, pannelli caldi al posto delle
   righe di separazione, icone in cerchi tenui, blocchi che compaiono con una
   dissolvenza. La foto non viene mai scurita o colorata (v3.6, §20.5): sfuma
   solo il bordo, verso il colore del fondo, in entrambi i temi.
   =========================================================================== */
.home {
  --raggio-grande: 28px;
  --ombra-morbida: 0 2px 6px rgba(32, 54, 56, .05), 0 18px 40px -12px rgba(32, 54, 56, .18);
  --fondo-pesca: color-mix(in srgb, var(--accent-peach) 20%, var(--bg));
  --fondo-menta: color-mix(in srgb, var(--accent-mint) 55%, var(--bg));
  --fondo-teal:  color-mix(in srgb, var(--primary) 10%, var(--bg));
  --tinta-cerchio: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

/* Testata: marchio, le pagine della v3.6, Entra e la CTA */
.home-testata { gap: 16px; }
.home-marchio { display: inline-flex; align-items: center; gap: 8px; font-size: 1.4rem; }
.home-marchio .icona-svg { width: 26px; height: 26px; }
.home-voci { display: none; }
.home-testata-azioni { display: flex; gap: 8px; align-items: center; }
.home-solo-largo { display: none; }
.home-piede { display: grid; gap: 12px; border-top: 0; }
.home-voci-piede { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.home-voci a, .home-voci-piede a {
  display: inline-flex; align-items: center; min-height: var(--tocco);
  color: var(--text); text-decoration: none; font-weight: 600;
}
.home-voci a[aria-current="page"], .home-voci-piede a[aria-current="page"] { color: var(--primary); }

/* Foto: angoli morbidi e ombra leggera, ovunque nel sito pubblico */
.home .foto { border-radius: var(--raggio-grande); box-shadow: var(--ombra-morbida); }
.home .segnaposto-asset {
  border-radius: var(--raggio-grande);
  border: 2px dashed color-mix(in srgb, var(--border-campo) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* Cerchi delle icone */
.h-cerchio {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--tinta-cerchio); color: var(--primary);
}
.h-cerchio .icona-svg { width: 24px; height: 24px; }
.h-cerchio-grande { width: 68px; height: 68px; margin-bottom: 12px; }
.h-cerchio-grande .icona-svg { width: 32px; height: 32px; }

/* 1 · Hero: sul telefono il testo e sotto la foto che sale sfumando;
   da 900 px la foto occupa la destra e sfuma verso il testo. */
.h-hero {
  position: relative; display: grid; max-width: 1280px; margin: 0 auto;
  padding: 8px var(--gutter) 0;
}
.h-hero-testo { position: relative; z-index: 1; padding: 12px 0 8px; }
.h-hero h1 {
  font-size: 2.35rem; line-height: 1.08; font-weight: 800; letter-spacing: -.02em;
  color: var(--primary); margin: 0 0 14px;
}
.h-sottotitolo { font-size: 1.12rem; line-height: 1.5; margin: 0; max-width: 34ch; }
.h-hero-foto { order: 2; margin: 8px calc(-1 * var(--gutter)) 0; }
.h-hero-foto .foto {
  width: 100%; height: auto; aspect-ratio: auto;
  border-radius: 0 0 var(--raggio-grande) var(--raggio-grande); box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.h-tessere {
  order: 3; list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; gap: 14px;
}
.h-tessere li { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.05rem; }

/* Blocchi: niente righe fra l'uno e l'altro, lo spazio basta */
.h-blocco { max-width: var(--larghezza); margin: 0 auto; padding: 44px var(--gutter); }
.h-blocco h2 { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.h-titolo-largo { max-width: 24ch; }
.h-grande { font-size: 1.22rem; line-height: 1.5; margin: 0 0 1.1rem; }
.h-centro { text-align: center; margin-top: 18px; }

/* 3 · Come funziona: cerchi uniti da una linea tratteggiata */
.h-passi {
  list-style: none; margin: 8px 0 20px; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.h-passi::before {
  content: ""; position: absolute; top: 26px; left: 12.5%; right: 12.5%;
  border-top: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
}
.h-passi li {
  position: relative; display: grid; justify-items: center; gap: 8px;
  text-align: center; font-weight: 700; font-size: .88rem; line-height: 1.25;
}
.h-passi .h-cerchio { box-shadow: 0 0 0 6px var(--bg); }
.h-passi li.in-evidenza .h-cerchio { background: var(--primary); color: var(--on-primary); }
.h-passi li.in-evidenza { color: var(--primary); }

/* Pannelli caldi: pesca, menta, teal tenue */
.h-pannello { border-radius: var(--raggio-grande); padding: 28px 22px; overflow: hidden; }
.h-pannello-pesca { background: var(--fondo-pesca); }
.h-pannello-menta { background: var(--fondo-menta); }
.h-pannello-teal  { background: var(--fondo-teal); }
.h-pannello h2 { margin-top: 0; }
.h-pannello > *:last-child, .h-pannello-testo > *:last-child { margin-bottom: 0; }
.h-due { display: grid; gap: 22px; align-items: center; }

/* 4-5 · Origine e nome: la foto si apre nel pannello, sfumando */
.h-pannello.h-con-foto { display: grid; padding: 0; }
.h-pannello-foto .foto {
  width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: 50% 40%;
  border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.h-con-foto .h-pannello-testo { padding: 0 22px 28px; margin-top: -24px; position: relative; }

/* 6 · La storia nel tempo: tre momenti di Dalia, allineati */
.h-sequenza {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px;
}
.h-sequenza .foto { scroll-snap-align: start; aspect-ratio: 4 / 5; height: 100%; object-fit: cover; }

/* 9 · Rimborsi: le fasi come tappe */
.h-flusso {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px;
}
.h-flusso li { display: inline-flex; align-items: center; gap: 4px; }
.h-flusso li > span {
  padding: 8px 14px; border-radius: 999px; font-weight: 700;
  background: var(--surface); box-shadow: var(--ombra-morbida);
}
.h-flusso .freccia { width: 18px; height: 18px; color: var(--text-muted); }

/* 10 · Comunità */
.home .home-mosaico { gap: 14px; }

/* Dissolvenza all'ingresso dei blocchi */
.appare { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.appare.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .appare { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 700px) {
  .h-tessere { grid-template-columns: repeat(3, 1fr); }
  .h-passi li { font-size: 1rem; }
  .h-blocco { padding: 64px var(--gutter); }
  .h-blocco h2 { font-size: 2rem; }
  .h-pannello { padding: 40px; }
  .h-sequenza { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; padding-bottom: 18px; }
}

@media (min-width: 900px) {
  .home-voci { display: flex; gap: 26px; margin: 0 auto 0 32px; }
  .home-solo-largo { display: inline-flex; }
  /* A tutta larghezza, con il testo allineato alla testata */
  .h-hero {
    max-width: var(--larghezza); align-items: center;
    grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; padding-top: 8px;
  }
  .h-hero-foto { grid-column: 2; grid-row: 1 / span 2; margin: 0; order: 0; }
  .h-hero-foto .foto {
    width: auto; height: min(600px, 74vh); aspect-ratio: 3 / 4;
    border-radius: var(--raggio-grande);
    /* Sfuma verso il testo e verso il blocco sotto */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 16%);
            mask-composite: intersect;
  }
  .h-hero-testo { grid-column: 1; grid-row: 1; padding: 32px 0 8px; align-self: end; }
  .h-hero h1 { font-size: 3.6rem; }
  .h-sottotitolo { font-size: 1.25rem; }
  .h-tessere { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; position: relative; z-index: 1; margin: 24px 0 32px; align-self: start; }
  .h-tessere li { font-size: .98rem; }
  .h-due { grid-template-columns: 1fr 1fr; gap: 48px; }
  .h-con-foto { grid-template-columns: 45% 1fr; align-items: center; }
  .h-pannello-foto { height: 100%; }
  .h-pannello-foto .foto {
    height: 100%; max-height: 620px; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
            mask-image: linear-gradient(to right, #000 62%, transparent 100%);
  }
  .h-con-foto .h-pannello-testo { padding: 48px 48px 48px 8px; margin: 0; }
}