/* ============================================================
   Sito di Opala
   Costruito sui token di Ordito (core, semantic, feedback) con il
   tema «opala». Qui solo la composizione delle pagine: niente
   colori scritti a mano fuori dal tema, niente misure fuori scala.

   Le parti del programma che girano nel sito (l'agenda, i promemoria)
   hanno i loro stili in programma.css, copiati dal programma. Qui
   niente si muove da solo, a parte i denti che arrivano quando la loro
   sezione si vede: il resto si muove quando lo si tocca.
   ============================================================ */

@view-transition { navigation: auto; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-96);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  color: var(--fg);
  text-wrap: balance;
}
h2 { font-size: clamp(var(--fs-32), 1.2rem + 1.8vw, var(--fs-56)); max-width: 22ch; }

p { text-wrap: pretty; }
a { color: var(--accent-fg); text-underline-offset: 0.18em; text-decoration-thickness: var(--sp-1); }
a:hover { color: var(--accent-fg-strong); }

kbd {
  display: inline-block;
  min-width: 2.2em;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-sm);
  background: var(--layer);
  box-shadow: var(--ring-strong), 0 var(--sp-2) 0 var(--border);
  font: inherit;
  font-size: 0.9em;
  font-weight: var(--fw-medium);
  text-align: center;
  color: var(--fg);
}

.salta {
  position: absolute; left: var(--sp-16); top: var(--sp-8); z-index: 100;
  padding: var(--sp-8) var(--sp-16); border-radius: var(--r-md);
  background: var(--accent-solid); color: var(--on-accent);
  transform: translateY(-200%);
}
.salta:focus { transform: none; }

.misura {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--sp-16);
}
@media (min-width: 640px) { .misura { padding-inline: var(--sp-32); } }

/* ---------- Pulsanti e collegamenti ---------- */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  min-height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: 0; border-radius: var(--r-md);
  font: inherit; font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bottone:active { transform: translateY(var(--sp-1)); }
.bottone-primario { background: var(--accent-solid); color: var(--on-accent); }
.bottone-primario:hover { background: var(--accent-solid-hover); color: var(--on-accent); }
.bottone-quieto { background: var(--layer); color: var(--fg); box-shadow: var(--ring-strong); }
.bottone-quieto:hover { background: var(--surface-hover); color: var(--fg); }
.bottone-grande { min-height: var(--sp-48); padding-inline: var(--sp-24); font-size: var(--fs-16); }
.bottone-piccolo { min-height: var(--sp-32); padding-inline: var(--sp-12); font-size: var(--fs-14); }
.bottone[disabled] { opacity: 0.5; cursor: not-allowed; }

.collegamento { font-weight: var(--fw-medium); }
.collegamento-forte { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }

.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-24); }

/* ---------- Testata ---------- */

.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  box-shadow: 0 var(--sp-1) 0 transparent;
  transition: box-shadow var(--dur-normal) var(--ease-out);
}
.testata.scorsa { box-shadow: 0 var(--sp-1) 0 var(--border-subtle); }
.testata-riga { display: flex; align-items: center; gap: var(--sp-24); min-height: var(--sp-64); }

.marchio { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--fg); text-decoration: none; margin-right: auto; border-radius: var(--r-sm); }
.marchio:hover { color: var(--fg); }
.marchio-segno { width: var(--sp-32); height: var(--sp-32); flex: none; }
.marchio-segno .s { fill: var(--logo-scuro); }
.marchio-segno .c { fill: var(--logo-chiaro); }
.marchio-nome { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.marchio.lucidato .marchio-segno { animation: lucida 900ms var(--ease-out); }
@keyframes lucida {
  0% { filter: none; transform: none; }
  35% { filter: brightness(1.6) saturate(1.4) drop-shadow(0 0 var(--sp-6) var(--a-7)); transform: rotate(-8deg) scale(1.12); }
  100% { filter: none; transform: none; }
}

.navigazione { display: flex; gap: var(--sp-24); }
.navigazione a { color: var(--fg-subtle); text-decoration: none; font-weight: var(--fw-medium); border-radius: var(--r-sm); }
.navigazione a:hover { color: var(--fg); }
.testata-menu { display: none; }

@media (max-width: 960px) {
  .navigazione, .testata-azione { display: none; }
  .testata-menu { display: inline-flex; }
}

/* Il menu sul telefono è un foglio che sale dal fondo (regola di Ordito). */
.foglio { position: fixed; inset: 0; z-index: 80; }
.foglio-velo { position: absolute; inset: 0; background: var(--alpha-dark-4); animation: fade-in var(--dur-normal) var(--ease-out); }
.foglio-pannello {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; padding: var(--sp-12) var(--sp-16) var(--sp-32);
  background: var(--n-1);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--elevation-overlay);
  animation: sale var(--dur-slow) var(--ease-out);
}
.foglio-pannello a {
  display: flex; align-items: center; min-height: var(--sp-48);
  font-size: var(--fs-20); font-weight: var(--fw-medium);
  color: var(--fg); text-decoration: none;
  border-bottom: var(--sp-1) solid var(--border-subtle);
}
.foglio-pannello a:last-child { border-bottom: 0; color: var(--fg-subtle); font-size: var(--fs-16); }
@keyframes sale { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.festa {
  padding: var(--sp-12) var(--sp-16);
  background: var(--accent-surface);
  color: var(--accent-fg-strong);
  text-align: center;
  font-weight: var(--fw-medium);
}

/* ============================================================
   Apertura
   ============================================================ */

.apertura { padding-top: clamp(var(--sp-32), 6vw, var(--sp-96)); }
.apertura-testo {
  display: grid; gap: var(--sp-24) var(--sp-48);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
}
.apertura h1 { font-size: var(--fs-display); max-width: 13ch; }
.apertura-sopra { font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg-subtle); margin-bottom: var(--sp-24); max-width: 34ch; }
@media (max-width: 960px) { .apertura-testo { grid-template-columns: minmax(0, 1fr); } }

/* La pagina iniziale del programma, con il suo codice (agenda.js). */
.vetrina { margin-top: clamp(var(--sp-48), 6vw, var(--sp-96)); }
.vetrina-invito { color: var(--fg-subtle); font-size: var(--fs-14); margin-bottom: var(--sp-16); max-width: none; }
.vetrina-invito strong { color: var(--fg); font-weight: var(--fw-medium); }
.per-dito { display: none; }
@media (pointer: coarse) { .per-mouse { display: none; } .per-dito { display: inline; } }
/* Lo spazio dell'agenda c'è già prima che arrivi: la pagina non salta. */
#home-prova { min-height: 38rem; }
#home-prova:has(.sett) { min-height: 0; }
/* Il nome del testo nascosto a chi guarda, ma letto da chi usa un lettore di schermo. */
.nascosto-vista { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vetrina-nota { margin-top: var(--sp-12); font-size: var(--fs-14); color: var(--fg-subtle); }

/* ---------- L'odontogramma, dentro la scheda del paziente ---------- */

/* I segni della legenda come interruttori: uno acceso alla volta, un altro clic lo spegne. */
.segni-scelta { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.segni-scelta button {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  min-height: var(--sp-32); padding: 0 var(--sp-8);
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--fg); box-shadow: var(--ring);
  font: inherit; font-size: var(--fs-12); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.segni-scelta .sig { --sig-size: 12px; }
.segni-scelta button:hover { background: var(--surface-hover); }
.segni-scelta button[aria-pressed="true"] { background: var(--accent-surface); box-shadow: inset 0 0 0 var(--sp-2) var(--accent-solid); font-weight: var(--fw-medium); }

.arcate {
  --dente-gap: clamp(var(--sp-2), 0.5vw, var(--sp-8));
  max-width: 82rem; margin-inline: auto;
  padding: 0 var(--sp-16);
  display: grid; gap: 0;
  position: relative;
}
@media (min-width: 640px) { .arcate { padding-inline: var(--sp-32); } }
.arcata {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) clamp(var(--sp-8), 1.6vw, var(--sp-24)) repeat(8, minmax(0, 1fr));
  column-gap: var(--dente-gap);
}
.arcata-sopra { padding-bottom: var(--sp-12); border-bottom: var(--sp-1) solid var(--border); }
.arcata-sotto { padding-top: var(--sp-12); }
/* La linea che divide destra e sinistra del paziente. */
.arcata-mezzo { border-left: var(--sp-1) dashed var(--border); justify-self: center; height: 100%; }

.dente {
  --i: 0;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), opacity var(--dur-normal) var(--ease-out);
  display: grid; justify-items: center; align-content: end; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--fg);
  font: inherit; cursor: pointer;
}
.arcata-sotto .dente { align-content: start; }
/* Con un segno acceso, gli altri denti si fanno da parte. */
.arcate.con-segno .dente:not(.acceso) { opacity: 0.22; }
.dente:hover, .dente[aria-current="true"] { background: var(--surface-hover); }
.dente:active { background: var(--surface-active); }
.arcata-sopra .dente:hover { transform: translateY(calc(var(--sp-4) * -1)); }
.arcata-sotto .dente:hover { transform: translateY(var(--sp-4)); }
.dente-num { font-size: clamp(var(--fs-12), 0.6rem + 0.5vw, var(--fs-16)); font-weight: var(--fw-medium); color: var(--fg-subtle); }
.dente[aria-current="true"] .dente-num { color: var(--fg); }
.dente-segni { display: flex; gap: var(--sp-2); min-height: var(--sp-12); }
.dente-segni .sig { --sig-size: clamp(9px, 0.5rem + 0.3vw, 13px); }
.dente-disegno { width: 100%; }

/* L'ingresso: i denti arrivano dal centro della bocca verso l'esterno,
   quelli di sopra scendono e quelli di sotto salgono, come quando si
   chiude la bocca. Una volta sola, quando la sezione si vede. */
.arcate.attesa .dente { opacity: 0; }
.arcate.entra .dente { animation: dente-entra 420ms var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) both; animation-delay: calc(var(--i) * 40ms + 100ms); }
.arcate.entra .arcata-sotto .dente { animation-name: dente-sale; }
@keyframes dente-entra { from { opacity: 0; transform: translateY(calc(var(--sp-16) * -1)); } to { opacity: 1; transform: none; } }
@keyframes dente-sale { from { opacity: 0; transform: translateY(var(--sp-16)); } to { opacity: 1; transform: none; } }

/* Il dente che cambia: una pulsazione appena, per dire «qui». */
.dente.cambia .dente-disegno { animation: cambia 420ms var(--ease-out); }
@keyframes cambia { 0% { transform: scale(0.92); opacity: 0.4; } 100% { transform: none; opacity: 1; } }

/* Easter egg: la dentiera a molla (codice Konami). */
.arcate.dentiera .arcata-sopra { animation: batte 140ms var(--ease-in-out) 8 alternate; }
.arcate.dentiera .arcata-sotto { animation: batte-sotto 140ms var(--ease-in-out) 8 alternate; }
@keyframes batte { to { transform: translateY(var(--sp-12)); } }
@keyframes batte-sotto { to { transform: translateY(calc(var(--sp-12) * -1)); } }

/* Easter egg: «sorridi». Le arcate si piegano in un sorriso. */
.arcate .dente-disegno { transition: transform 700ms var(--ease-spring); }
.arcate.sorriso .dente-disegno { transform: translateY(var(--sorriso, 0)); }

@media (prefers-reduced-motion: reduce) {
  .arcate.entra .dente, .dente.cambia .dente-disegno, .arcate.dentiera .arcata-sopra, .arcate.dentiera .arcata-sotto,
  .marchio.lucidato .marchio-segno, .documento { animation: none; }
  .arcate .dente-disegno { transition: none; }
}

.lettura {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-24);
  min-height: calc(var(--sp-64) + var(--sp-16));
}
.lettura-dente { font-size: var(--fs-20); font-weight: var(--fw-medium); }
.lettura-numero { font-weight: var(--fw-bold); }
.lettura-stato { font-size: var(--fs-20); color: var(--fg-subtle); max-width: 60ch; }
.lettura-stato .sig { margin-right: var(--sp-6); }
/* Dentro la scheda la lettura è una riga del programma: più piccola, sotto le arcate. */
.odontogramma .arcate { padding-inline: 0; }
.odontogramma .lettura { margin-top: var(--sp-8); min-height: calc(var(--sp-48) + var(--sp-4)); gap: var(--sp-2); }
.odontogramma .lettura-dente { font-size: var(--fs-16); }
.odontogramma .lettura-stato { font-size: var(--fs-14); max-width: none; }
.odontogramma .lettura-numero .sig { margin-right: var(--sp-4); }

/* Sul telefono le arcate intere sarebbero troppo fitte da toccare, e
   scorrerle di lato è scomodo: si dividono in due, prima il lato destro
   del paziente (sopra e sotto), poi il sinistro. Le righe le dà
   posizione() in bocca.js. */
@media (max-width: 640px) {
  .arcate { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--sp-2); }
  .arcate::before, .arcate::after {
    grid-column: 1 / -1;
    font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--fg-subtle);
    padding: var(--sp-8) 0;
  }
  .arcate::before { content: "Lato destro del paziente"; grid-row: 1; }
  .arcate::after { content: "Lato sinistro"; grid-row: 4; margin-top: var(--sp-16); }
  .arcata { display: contents; }
  .arcata-mezzo { display: none; }
  .arcate .dente { grid-row: var(--riga); grid-column: var(--colonna); }
  .arcate .arcata-sotto .dente { border-top: var(--sp-1) solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); padding-top: var(--sp-8); }
  .arcate .arcata-sopra .dente { border-radius: var(--r-md) var(--r-md) 0 0; padding-bottom: var(--sp-8); }
}

/* I colori del disegno, come nel programma (pazienti.css). */
.dente-corpo { display: contents; }
.dente-svg { width: 100%; height: auto; display: block; overflow: visible; --layer: var(--bg); }
.dente-svg {
  --c-fatto: var(--success-solid); --c-presente: var(--fg-subtle); --c-patologia: var(--danger-solid);
  --c-prenotato: var(--info-solid); --c-proposto: var(--accent-solid); --c-mancato: var(--warning-solid);
}
[data-mode="dark"] .dente-svg { --c-fatto: var(--success-fg); --c-patologia: var(--danger-fg); --c-prenotato: var(--info-fg); --c-proposto: var(--accent-fg); --c-mancato: var(--warning-fg); }
.dente-svg .c-fatto { --c: var(--c-fatto); }
.dente-svg .c-presente { --c: var(--c-presente); }
.dente-svg .c-patologia { --c: var(--c-patologia); }
.dente-svg .p-prenotato { --c: var(--c-prenotato); }
.dente-svg .p-proposto { --c: var(--c-proposto); }
.dente-svg .p-mancato { --c: var(--c-mancato); }
.dente-svg .d-radice { fill: color-mix(in srgb, var(--fg-subtle) 14%, var(--layer)); stroke: var(--fg-subtle); stroke-width: 1; stroke-linejoin: round; }
.dente-svg .d-corona { fill: var(--layer); stroke: var(--fg-subtle); stroke-width: 1.3; stroke-linejoin: round; }
.dente-svg .d-sup { fill: var(--layer); stroke: var(--fg-subtle); stroke-width: .9; stroke-linejoin: round; transition: fill var(--dur-normal) var(--ease-out); }
.dente-svg .pieno { fill: var(--c); stroke: var(--c); }
.dente-svg .pieno-chiaro { fill: color-mix(in srgb, var(--c) 42%, var(--layer)); stroke: var(--c); stroke-width: 1.3; stroke-linejoin: round; }
.dente-svg .velo { fill: color-mix(in srgb, var(--c) 28%, var(--layer)); stroke: var(--c); }
.dente-svg .tratto { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dente-svg .tratto-fine { fill: none; stroke: var(--c); stroke-width: 1; }
.dente-svg .traccia { fill: color-mix(in srgb, var(--c) 12%, transparent); stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 2.4 1.8; stroke-linejoin: round; }
.dente-svg .traccia.tratto { fill: none; stroke-width: 2; }
.dente-assente .d-dente, .dente-assente .d-schema { opacity: .3; }
.dente-assente .d-corona, .dente-assente .d-radice { stroke-dasharray: 3 2; fill: transparent; }

/* ============================================================
   Sezioni
   ============================================================ */

.fascia { padding-block: clamp(var(--sp-64), 8vw, var(--sp-96) + var(--sp-16)); }
.fascia-tenue { background: var(--bg-subtle); }
.fascia-tenue .dente-svg { --layer: var(--bg-subtle); }
.introduzione { margin-top: var(--sp-20); font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg-subtle); max-width: 52ch; }
.nota { font-size: var(--fs-14); color: var(--fg-subtle); }

/* ---------- Il preventivo ---------- */

.finestra {
  margin-top: var(--sp-48);
  background: var(--n-1);
  border-radius: var(--r-lg);
  box-shadow: var(--elevation-raised);
  overflow: hidden;
}
.finestra-testa {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-24);
  border-bottom: var(--sp-1) solid var(--border-subtle);
}
.finestra-titolo { font-size: var(--fs-20); font-weight: var(--fw-bold); }
.finestra-chi { color: var(--fg-subtle); }
.finestra-corpo {
  display: grid; gap: var(--sp-32);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  padding: var(--sp-24);
}
@media (max-width: 960px) { .finestra-corpo { grid-template-columns: minmax(0, 1fr); } }
.finestra-piede {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-32);
  padding: var(--sp-16) var(--sp-24);
  border-top: var(--sp-1) solid var(--border-subtle);
  background: var(--bg-subtle);
}
.finestra-piede .azioni { margin-left: auto; }

.listino { border: 0; padding: 0; margin: 0; min-width: 0; }
.listino legend, .scelta-titolo { font-weight: var(--fw-bold); margin-bottom: var(--sp-12); padding: 0; }
.listino-voci { display: grid; }
.listino-voce {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-4) var(--sp-12);
  padding: var(--sp-12) var(--sp-12);
  border-radius: var(--r-md); cursor: pointer;
}
.listino-voce:hover { background: var(--surface); }
.listino-voce.attiva { background: var(--accent-surface); }
.listino-voce { position: relative; }
.listino-voce input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.listino-voce .spunta { margin-top: var(--sp-2); }

/* La spunta: una casella disegnata, la stessa nel preventivo e nei primi passi.
   Il segno si traccia quando la si spunta, e la casella si riempie. */
.spunta {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--layer); box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--fg-subtle);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.spunta svg {
  position: absolute; inset: 3px; width: 16px; height: 16px; overflow: visible;
  fill: none; stroke: var(--on-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 260ms var(--ease-out) 40ms;
}
.spunta-numero { font-size: var(--fs-12); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
input:checked + .spunta { background: var(--accent-solid); box-shadow: none; transform: scale(1.06); }
input:checked + .spunta svg { stroke-dashoffset: 0; }
input:checked + .spunta .spunta-numero { opacity: 0; transform: scale(0.5); }
input:focus-visible + .spunta { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
input:disabled + .spunta { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .spunta, .spunta svg, .spunta-numero { transition: none; } }
.listino-nome { font-weight: var(--fw-medium); }
.listino-denti { grid-column: 2; font-size: var(--fs-14); color: var(--fg-subtle); }
.listino-prezzo { white-space: nowrap; }
.listino .nota { margin-top: var(--sp-12); }

.scelta-aiuto { color: var(--fg-subtle); margin-bottom: var(--sp-16); min-height: 1.5em; }
.mini-arcate { display: grid; gap: 0; }
.mini-arcata { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) var(--sp-8) repeat(8, minmax(0, 1fr)); column-gap: var(--sp-2); }
.mini-arcata + .mini-arcata { border-top: var(--sp-1) solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-4); }
@media (max-width: 640px) { .mini-arcata + .mini-arcata { border-top: 0; padding-top: 0; margin-top: 0; } }
.mini-dente {
  display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-4) 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--fg-subtle); font: inherit; font-size: var(--fs-12); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mini-dente:hover { background: var(--surface-hover); }
.mini-dente:active { background: var(--surface-active); }
.mini-dente[aria-pressed="true"] { background: var(--accent-surface); color: var(--accent-fg-strong); box-shadow: inset 0 0 0 var(--sp-2) var(--accent-solid); font-weight: var(--fw-bold); }
.mini-dente.altro { color: var(--fg); font-weight: var(--fw-medium); }
.mini-dente .dente-svg { width: 100%; --layer: var(--n-1); }
.mini-arcate.ferma .mini-dente { cursor: default; }
/* Sul telefono, come l'apertura: due gruppi da otto per lato, niente scorrimento. */
@media (max-width: 640px) {
  .mini-arcate { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--sp-4); row-gap: 0; }
  .mini-arcata { display: contents; }
  .mini-mezzo { display: none; }
  .mini-dente { grid-row: var(--riga); grid-column: var(--colonna); font-size: var(--fs-14); }
  .mini-arcata + .mini-arcata .mini-dente { border-top: var(--sp-1) solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); }
  .mini-arcate .mini-dente[style*="--riga:5"] { margin-top: var(--sp-16); }
  .finestra-corpo { padding: var(--sp-16); }
}

.totale { display: grid; }
.totale-etichetta { font-size: var(--fs-14); color: var(--fg-subtle); }
.totale-cifra { font-size: var(--fs-32); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1.1; }
.esito { display: flex; align-items: center; gap: var(--sp-8); color: var(--fg); max-width: 42ch; }

/* ---------- I promemoria: le schede del programma e la chat sul telefono ----------
   Più fitti che nel programma: qui servono a far vedere il messaggio, non a lavorarci tutto il giorno. */

.promemoria-griglia {
  margin-top: var(--sp-32);
  display: grid; gap: var(--sp-24);
  grid-template-columns: minmax(0, 1fr) 17rem;
  align-items: start;
}
@media (max-width: 960px) { .promemoria-griglia { grid-template-columns: minmax(0, 1fr); justify-items: center; } .promemoria-griglia > .programma { justify-self: stretch; } }
.programma-schede .programma-corpo { padding: var(--sp-12); }
.programma-schede .richiamo-riga { padding: var(--sp-6) var(--sp-16); gap: var(--sp-6) var(--sp-8); }
.programma-schede .sezione-header { padding-block: var(--sp-8); }
.programma-schede .sezione-card + .sezione-card { margin-top: var(--sp-12); }
.telefono-chat { width: min(100%, 17rem); }
.telefono-chat .telefono-schermo { min-height: 22rem; align-content: start; padding: var(--sp-20) var(--sp-16); }
/* Sul computer il telefono resta in vista mentre si scorrono le righe. */
@media (min-width: 961px) { .telefono-chat { position: sticky; top: calc(var(--sp-64) + var(--sp-24)); } }
.chat-testa { font-size: var(--fs-14); color: var(--fg-subtle); padding-bottom: var(--sp-12); border-bottom: var(--sp-1) solid var(--border-subtle); }
.chat-testa strong { color: var(--fg); font-weight: var(--fw-bold); }
.chat-vuota { font-size: var(--fs-14); color: var(--fg-subtle); margin-top: var(--sp-24); text-align: center; }
.chat-mandati { display: grid; gap: var(--sp-8); }
.chat-bolla {
  justify-self: end; max-width: 92%;
  padding: var(--sp-8) var(--sp-12) var(--sp-6);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background: var(--accent-surface); color: var(--fg);
  font-size: var(--fs-14); line-height: var(--lh-snug);
  animation: arriva 320ms var(--ease-spring) both;
}
.chat-ora { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); font-size: var(--fs-12); color: var(--fg-subtle); margin-top: var(--sp-2); }
/* Le spunte del messaggio: una quando parte, due quando arriva. */
.chat-spunte { width: 18px; height: 10px; overflow: visible; fill: none; stroke: var(--fg-subtle); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-normal) var(--ease-out); }
.chat-spunte .spunta-2 { transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-spring); }
.chat-bolla[data-stato="inviato"] .spunta-2 { opacity: 0; transform: translateX(-3px); }
.chat-bolla[data-stato="consegnato"] .chat-spunte { stroke: var(--accent-solid); }
[data-mode="dark"] .chat-bolla[data-stato="consegnato"] .chat-spunte { stroke: var(--accent-fg); }
.chat-scrivi {
  display: grid; gap: var(--sp-8); justify-items: end;
  margin-top: var(--sp-12); padding: var(--sp-12);
  border-radius: var(--r-md); background: var(--bg-subtle); box-shadow: var(--ring);
}
.chat-testo { justify-self: stretch; font-size: var(--fs-14); line-height: var(--lh-snug); }
@media (prefers-reduced-motion: reduce) { .chat-bolla { animation: none; } }

/* ---------- La firma ---------- */

.firma-griglia { display: grid; gap: var(--sp-48); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 960px) { .firma-griglia { grid-template-columns: minmax(0, 1fr); } }
.punti { margin-top: var(--sp-32); display: grid; gap: var(--sp-12); max-width: 46ch; }
.punti li { padding-left: var(--sp-20); position: relative; }
/* Un tratto, non un pallino: regola di Ordito. */
.punti li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: var(--sp-12); height: var(--sp-2); background: var(--accent-solid); border-radius: var(--r-full); }

.firma-prova { position: relative; display: grid; justify-items: start; min-height: 34rem; }
.telefono {
  width: min(100%, 20rem);
  padding: var(--sp-12);
  border-radius: 2.5rem;
  background: var(--n-12);
  box-shadow: var(--elevation-raised);
}
.telefono-schermo {
  display: grid; gap: var(--sp-12); align-content: start;
  min-height: 31rem;
  padding: var(--sp-24) var(--sp-20);
  border-radius: 1.9rem;
  background: var(--n-1);
  color: var(--fg);
}
[data-mode="dark"] .telefono { background: var(--n-6); }
.telefono-studio { font-size: var(--fs-14); color: var(--fg-subtle); }
.telefono-titolo { font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.telefono-testo { font-size: var(--fs-14); color: var(--fg-subtle); }
.telefono-firma { position: relative; height: 11rem; border-radius: var(--r-md); background: var(--bg-subtle); box-shadow: var(--ring-strong); }
.telefono-firma canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; color: var(--fg); cursor: crosshair; border-radius: inherit; }
.telefono-qui { position: absolute; left: var(--sp-12); bottom: var(--sp-8); font-size: var(--fs-12); color: var(--fg-subtle); pointer-events: none; border-top: var(--sp-1) solid var(--border); padding-top: var(--sp-4); width: calc(100% - var(--sp-24)); }
.telefono-azioni { display: flex; gap: var(--sp-8); }
.telefono-azioni .bottone { flex: 1; }
.telefono-fatto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); font-weight: var(--fw-bold); margin-top: var(--sp-24); }
.telefono.firmato .telefono-firma, .telefono.firmato .telefono-azioni { display: none; }

.documento {
  position: absolute; right: 0; bottom: var(--sp-48);
  width: min(88%, 19rem);
  padding: var(--sp-20);
  background: var(--n-1);
  border-radius: var(--r-sm);
  box-shadow: var(--elevation-overlay);
  rotate: 2deg;
  z-index: 2;
  animation: arriva 420ms var(--ease-spring) both;
}
@keyframes arriva { from { opacity: 0; transform: translate(var(--sp-32), var(--sp-16)) scale(0.94); } to { opacity: 1; transform: none; } }
.documento-tipo { font-size: var(--fs-12); color: var(--fg-subtle); }
.documento-titolo { font-weight: var(--fw-bold); margin-bottom: var(--sp-8); }
.documento-riga { font-size: var(--fs-12); color: var(--fg-subtle); }
.documento-firma { margin-top: var(--sp-12); border-bottom: var(--sp-1) solid var(--border); }
.documento-firma img { width: 100%; height: 4.5rem; object-fit: contain; object-position: left center; }
.documento-quando { display: block; font-size: var(--fs-12); color: var(--fg-subtle); padding-bottom: var(--sp-4); }
.documento-impronta { margin-top: var(--sp-8); font-size: var(--fs-12); color: var(--success-fg); }
@media (max-width: 960px) {
  .firma-prova { min-height: 0; gap: var(--sp-24); }
  .documento { position: relative; right: auto; bottom: auto; width: min(100%, 20rem); }
}

/* ---------- Pronto dal primo giorno: cosa serve, cosa c'è già ---------- */

.inizio-griglia { margin-top: var(--sp-48); display: grid; gap: var(--sp-32) var(--sp-48); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 760px) { .inizio-griglia { grid-template-columns: minmax(0, 1fr); } }
.inizio-titolo { font-size: var(--fs-20); letter-spacing: var(--ls-tight); padding-bottom: var(--sp-12); border-bottom: var(--sp-2) solid var(--fg); }
.serve { display: grid; }
.serve > div { padding-block: var(--sp-16); border-bottom: var(--sp-1) solid var(--border); }
.serve dt { font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.serve dd { color: var(--fg-subtle); }
.note { margin-top: var(--sp-24); display: grid; gap: var(--sp-12) var(--sp-32); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); color: var(--fg-subtle); }
.note strong { color: var(--fg); font-weight: var(--fw-medium); }

/* ---------- Ricerca e guida ---------- */

.tasti { padding-block: clamp(var(--sp-48), 7vw, var(--sp-96)); }
.tasti-cerca { display: grid; gap: var(--sp-32) var(--sp-48); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 960px) { .tasti-cerca { grid-template-columns: minmax(0, 1fr); } }
.tasti-prove { color: var(--fg-subtle); }
.tasti-prove .bottone-testo { font-size: var(--fs-16); padding: 0; min-height: var(--sp-32); font-weight: var(--fw-bold); }
.tasti-guida { margin-top: clamp(var(--sp-48), 7vw, var(--sp-96)); padding-top: var(--sp-32); border-top: var(--sp-1) solid var(--border-subtle); }
.tasto-blocco { display: grid; gap: var(--sp-12); align-content: start; justify-items: start; }
.tasto-blocco p { color: var(--fg-subtle); max-width: 44ch; }
.tasti-combinazione { font-size: var(--fs-24); color: var(--fg); }
.tasti-combinazione kbd { font-size: var(--fs-20); }
.tasti-titolo { font-size: var(--fs-32); max-width: none; }

/* ---------- I dati: l'unica campitura, con il bordo a forma di arcata ---------- */

.dati {
  position: relative;
  margin-top: var(--sp-64);
  background: var(--campitura);
  color: var(--su-campitura);
}
.dati::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(var(--sp-32), 5vw, var(--sp-64));
  background: var(--campitura);
  clip-path: ellipse(64% 100% at 50% 100%);
}
.dati h2 { color: var(--su-campitura); }
.dati .introduzione { color: var(--su-campitura-tenue); }
.dati :focus-visible { outline-color: var(--campitura-linea); }

.mappa {
  --nodo: 15rem;
  margin-top: var(--sp-64);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--nodo) minmax(0, 1fr);
  grid-template-rows: auto var(--sp-64) auto var(--sp-64) auto;
  grid-template-areas:
    ".     nord   ."
    ".     filo-n ."
    "ovest centro est"
    ".     filo-s ."
    ".     sud    .";
  align-items: center;
  gap: 0 var(--sp-32);
}
.nodo { display: grid; gap: var(--sp-4); padding: var(--sp-16) var(--sp-20); border-radius: var(--r-md); box-shadow: inset 0 0 0 var(--sp-1) var(--campitura-linea); position: relative; }
.nodo strong { font-size: var(--fs-16); }
.nodo span { font-size: var(--fs-14); color: var(--su-campitura-tenue); }
.nodo-centro { grid-area: centro; background: var(--su-campitura); color: var(--campitura); box-shadow: none; text-align: center; padding-block: var(--sp-24); }
.nodo-centro span { color: var(--campitura); opacity: 0.75; }
.nodo-nord { grid-area: nord; text-align: center; }
.nodo-sud { grid-area: sud; text-align: center; }
.nodo-ovest { grid-area: ovest; }
.nodo-est { grid-area: est; }
.nodo-spento { box-shadow: inset 0 0 0 var(--sp-1) var(--su-campitura-tenue); opacity: 0.8; }
/* I fili: pieni dove passano i dati, tratteggiati dove passano solo se si vuole, assenti dove non passano. */
.nodo-ovest::after, .nodo-est::after { content: ""; position: absolute; top: 50%; width: var(--sp-32); border-top: var(--sp-2) solid var(--campitura-linea); }
.nodo-ovest::after { left: 100%; }
.nodo-est::after { right: 100%; border-top-style: dashed; }
.nodo-sud::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: var(--sp-64); border-left: var(--sp-2) solid var(--campitura-linea); }
.nodo-nord::after { content: "nessun filo"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: var(--sp-20); font-size: var(--fs-12); color: var(--su-campitura-tenue); white-space: nowrap; }
@media (max-width: 960px) {
  .mappa { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "centro" "ovest" "est" "sud" "nord"; gap: var(--sp-12); }
  .nodo-ovest::after, .nodo-est::after, .nodo-sud::before, .nodo-nord::after { display: none; }
  .nodo-nord, .nodo-sud { text-align: left; }
}

.garanzie { margin-top: var(--sp-96); display: grid; gap: var(--sp-32) var(--sp-48); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.garanzie dt { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin-bottom: var(--sp-8); padding-top: var(--sp-16); border-top: var(--sp-1) solid color-mix(in srgb, var(--campitura-linea) 55%, transparent); }
.garanzie dd { color: var(--su-campitura-tenue); }

/* ---------- Il resto: un elenco, non delle schede ---------- */

.elenco-funzioni { margin-top: var(--sp-48); columns: 3 18rem; column-gap: var(--sp-48); }
.elenco-funzioni > div { break-inside: avoid; padding: var(--sp-16) 0 var(--sp-24); border-top: var(--sp-1) solid var(--border-subtle); }
.elenco-funzioni dt { font-weight: var(--fw-bold); font-size: var(--fs-16); margin-bottom: var(--sp-4); }
.elenco-funzioni dd { color: var(--fg-subtle); }

/* ---------- Com'è nato: un racconto, e accanto chi l'ha fatto ---------- */

.storia-griglia { display: grid; gap: var(--sp-48); grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); align-items: end; }
@media (max-width: 960px) { .storia-griglia { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.storia-attacco { margin-top: var(--sp-24); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: var(--fw-medium); color: var(--fg); max-width: 32ch; }
.storia-testo p:not(.storia-attacco) { margin-top: var(--sp-16); color: var(--fg-subtle); max-width: 62ch; }
.storia-testo p:last-child { color: var(--fg); font-weight: var(--fw-medium); }
.storia-persone { display: grid; }
.storia-persone > div { padding-block: var(--sp-16); border-top: var(--sp-1) solid var(--border); }
.storia-persone > div:last-child { border-bottom: var(--sp-1) solid var(--border); }
.storia-persone dt { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.storia-persone dd { color: var(--fg-subtle); margin-top: var(--sp-2); }

/* ---------- Contatti ---------- */

.contatti-griglia { display: grid; gap: var(--sp-48); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 960px) { .contatti-griglia { grid-template-columns: minmax(0, 1fr); } }
.indirizzo { margin-top: var(--sp-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-16); }

.modulo { display: grid; gap: var(--sp-20) var(--sp-24); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .modulo { grid-template-columns: minmax(0, 1fr); } }
.campo { display: grid; gap: var(--sp-6); }
.campo-largo, .modulo-piede, .modulo-errore { grid-column: 1 / -1; }
.campo label { font-weight: var(--fw-medium); }
.facoltativo { font-weight: var(--fw-normal); color: var(--fg-subtle); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--sp-48);
  padding: var(--sp-12) var(--sp-16);
  border: 0; border-radius: var(--r-md);
  background: var(--n-1); color: var(--fg);
  box-shadow: var(--ring-strong);
  font: inherit;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { box-shadow: 0 0 0 var(--sp-1) var(--border-strong); }
.campo input[aria-invalid="true"] { box-shadow: 0 0 0 var(--sp-2) var(--danger-border); }
.modulo-errore { color: var(--danger-fg); font-weight: var(--fw-medium); }
.modulo-piede { display: grid; gap: var(--sp-12); justify-items: start; }

/* ============================================================
   Piede
   ============================================================ */

.piede { padding-block: var(--sp-64) var(--sp-48); border-top: var(--sp-1) solid var(--border-subtle); }
.piede-griglia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-32); align-items: start; }
.piede-logo { width: var(--sp-96); padding: var(--sp-8); border: 0; border-radius: var(--r-lg); background: transparent; cursor: pointer; }
.piede-logo:hover { background: var(--surface); }
.piede-logo svg { width: 100%; height: auto; overflow: visible; }
.piede-testo { display: grid; gap: var(--sp-6); color: var(--fg-subtle); font-size: var(--fs-14); }
.piede-nome { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--fg); }
.piede-notte { display: flex; align-items: center; gap: var(--sp-8); color: var(--fg); }
.piede-notte svg { width: var(--sp-32); height: var(--sp-16); flex: none; }
.piede-sep { margin-inline: var(--sp-6); }

/* Il logo che si disegna, come all'avvio del programma (logo-animato.js). */
#logo-animato .tratto { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
#logo-animato .tratto.scuro { stroke: var(--logo-scuro); }
#logo-animato .tratto.chiaro { stroke: var(--logo-chiaro); }
#logo-animato .riempi.scuro { fill: var(--logo-scuro); }
#logo-animato .riempi.chiaro { fill: var(--logo-chiaro); }
#logo-animato.disegna .tratto { animation: logo-disegna 1.3s cubic-bezier(0.4, 0.05, 0.25, 1) calc(0.5s * var(--i)) both; }
#logo-animato.disegna .riempi { animation: logo-riempi 0.85s ease-out calc(0.5s * var(--i) + 0.8s) both; }
@keyframes logo-disegna { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes logo-riempi { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Ricerca (Ctrl+K) e guida (Ctrl+clic)
   ============================================================ */

.ricerca {
  width: min(92vw, 36rem); max-height: 70vh;
  margin: 12vh auto auto; padding: 0;
  border: 0; border-radius: var(--r-lg);
  background: var(--n-1); color: var(--fg);
  box-shadow: var(--elevation-overlay);
}
.ricerca::backdrop { background: var(--alpha-dark-4); }
.ricerca[open] { animation: cade var(--dur-normal) var(--ease-out); }
@keyframes cade { from { opacity: 0; transform: translateY(calc(var(--sp-8) * -1)); } to { opacity: 1; transform: none; } }
.ricerca-forma { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); border-bottom: var(--sp-1) solid var(--border-subtle); }
.ricerca-forma input { flex: 1; min-height: var(--sp-48); border: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-20); outline: none; }
.ricerca-forma:focus-within { box-shadow: inset 0 calc(var(--sp-2) * -1) 0 var(--accent-solid); }
.ricerca-esiti { max-height: calc(70vh - var(--sp-96)); overflow-y: auto; padding: var(--sp-8); }
.ricerca-esiti li a { display: grid; gap: var(--sp-2); padding: var(--sp-12); border-radius: var(--r-md); color: var(--fg); text-decoration: none; }
.ricerca-esiti li a span { font-size: var(--fs-14); color: var(--fg-subtle); }
.ricerca-esiti li a.scelto, .ricerca-esiti li a:hover { background: var(--accent-surface); }
.ricerca-vuota { padding: var(--sp-16); color: var(--fg-subtle); }

.guida-pop {
  position: fixed; z-index: 90;
  max-width: min(22rem, calc(100vw - var(--sp-32)));
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-md);
  background: var(--n-12); color: var(--n-1);
  box-shadow: var(--elevation-overlay);
  font-size: var(--fs-14);
  animation: cade var(--dur-fast) var(--ease-out);
}
.guida-pop strong { display: block; margin-bottom: var(--sp-2); }

/* Un elemento con la sua spiegazione si riconosce tenendo premuto Ctrl. */
html.ctrl [data-guida] { cursor: help; }
html.ctrl [data-guida]:not(section, footer, .testata) { outline: var(--sp-1) dashed var(--accent-border-strong); outline-offset: var(--sp-4); }

/* ============================================================
   Pagine di testo (privacy) e pagina 404
   ============================================================ */

.documento-testo { padding-block: var(--sp-64) var(--sp-96); }
.documento-testo h1 { font-size: clamp(var(--fs-40), 1.6rem + 3vw, var(--fs-72)); max-width: 16ch; }
.documento-testo .aggiornata { margin-top: var(--sp-16); color: var(--fg-subtle); }
.documento-testo .corpo { max-width: var(--measure); margin-top: var(--sp-48); }
.documento-testo h2 { font-size: var(--fs-24); letter-spacing: var(--ls-tight); margin: var(--sp-48) 0 var(--sp-16); max-width: none; }
.documento-testo h3 { font-size: var(--fs-20); margin: var(--sp-32) 0 var(--sp-12); letter-spacing: var(--ls-normal); }
.documento-testo p { margin-bottom: var(--sp-16); line-height: var(--lh-relaxed); }
.documento-testo ul { margin: 0 0 var(--sp-16); display: grid; gap: var(--sp-8); }
.documento-testo ul li { padding-left: var(--sp-20); position: relative; line-height: var(--lh-relaxed); }
.documento-testo ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: var(--sp-8); height: var(--sp-2); background: var(--fg-subtle); }
.documento-testo code { font-family: var(--font-mono); font-size: 0.9em; padding: 0 var(--sp-4); border-radius: var(--r-sm); background: var(--surface); }
.in-breve { padding: var(--sp-20) var(--sp-24); border-radius: var(--r-md); background: var(--accent-surface); color: var(--accent-fg-strong); margin: var(--sp-32) 0; }
.in-breve p:last-child { margin-bottom: 0; }

.mancante { padding-block: var(--sp-64) var(--sp-128); }
.mancante h1 { font-size: var(--fs-display); max-width: 14ch; }
.mancante .introduzione { margin-bottom: var(--sp-32); }
.mancante .arcata { max-width: 46rem; margin-top: var(--sp-48); }

@media print {
  .testata, .piede, .foglio, .salta { display: none; }
  .documento-testo { padding: 0; }
  a { color: inherit; }
}

/* ============================================================
   Aggiunte dopo la revisione UX
   ============================================================ */

/* La ricerca in testata, come nel programma: lente, parola, tasti. */
.testata-cerca {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  min-height: var(--control-h); padding: 0 var(--sp-8) 0 var(--sp-12);
  border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--fg-subtle);
  font: inherit; cursor: pointer;
  box-shadow: var(--ring);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.testata-cerca kbd { margin-left: auto; }
@media (min-width: 1180px) { .testata-cerca { min-width: 15rem; } }
.testata-cerca .lente { transition: transform var(--dur-normal) var(--ease-spring); }
.testata-cerca:hover .lente { transform: rotate(-12deg) scale(1.08); }
.testata-cerca:hover { background: var(--surface-hover); color: var(--fg); }
.testata-cerca kbd { font-size: var(--fs-12); padding: 0 var(--sp-6); box-shadow: var(--ring-strong); }
@media (max-width: 960px) { .testata-cerca { display: none; } }

/* La sezione in cui si è: un tratto sotto la voce del menu. */
.navigazione a[aria-current="true"] { color: var(--fg); box-shadow: inset 0 calc(var(--sp-2) * -1) 0 var(--accent-solid); }

/* Il foglio del telefono: si chiude con un pulsante, oltre che toccando fuori. */
.foglio-testa { display: flex; align-items: center; justify-content: space-between; min-height: var(--sp-48); font-weight: var(--fw-bold); }
.foglio-cerca {
  display: flex; align-items: center; min-height: var(--sp-48);
  border: 0; border-bottom: var(--sp-1) solid var(--border-subtle);
  background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-20); font-weight: var(--fw-medium);
  text-align: left; cursor: pointer; padding: 0;
}

/* Un'azione secondaria che si legge come un collegamento. */
.bottone-testo {
  justify-self: center;
  min-height: var(--sp-32); padding: 0 var(--sp-8);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--accent-fg);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-medium);
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.bottone-testo:hover { color: var(--accent-fg-strong); }
.telefono.firmato .bottone-testo { display: none; }

/* Il messaggio pronto, da copiare se la posta non si apre. */
.modulo-fatto {
  grid-column: 1 / -1;
  display: grid; gap: var(--sp-12);
  padding: var(--sp-20);
  border-radius: var(--r-md);
  background: var(--n-1);
  box-shadow: var(--elevation-raised);
}
.modulo-fatto-titolo { display: flex; align-items: center; gap: var(--sp-8); font-weight: var(--fw-bold); }
.modulo-testo {
  margin: 0; padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-normal);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ============================================================
   Il biglietto dei cookie (consenso.js)
   In basso a sinistra, lontano dagli avvisi che arrivano a destra.
   Non copre la pagina e non la ferma: si legge, si risponde, se ne va.
   ============================================================ */

.biscotto {
  position: fixed; z-index: 300;
  left: var(--sp-20); bottom: var(--sp-20);
  width: min(27rem, calc(100vw - var(--sp-32)));
  display: grid; grid-template-columns: var(--sp-48) minmax(0, 1fr); gap: var(--sp-16);
  align-items: start;
  padding: var(--sp-20) var(--sp-24) var(--sp-16) var(--sp-20);
  border-radius: var(--r-lg);
  background: var(--n-1); color: var(--fg);
  box-shadow: var(--elevation-overlay);
  font-size: var(--fs-14); line-height: var(--lh-normal);
  animation: biscotto-entra var(--dur-slow) var(--ease-spring) both;
}
@keyframes biscotto-entra { from { opacity: 0; transform: translateY(var(--sp-24)) rotate(-2deg); } to { opacity: 1; transform: none; } }
.biscotto.esce { animation: biscotto-esce var(--dur-normal) var(--ease-out) forwards; }
@keyframes biscotto-esce { to { opacity: 0; transform: translateY(var(--sp-16)); } }

.biscotto-disegno { width: var(--sp-48); height: var(--sp-48); margin-top: var(--sp-2); transition: transform var(--dur-normal) var(--ease-spring), opacity var(--dur-normal) var(--ease-out); }
.biscotto-pasta { fill: var(--biscotto-pasta); }
.biscotto-gocce { fill: var(--biscotto-gocce); }
/* Il quarto morso arriva con il sì; con il no il biscotto si fa da parte. */
.biscotto-morso { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform var(--dur-normal) var(--ease-spring); }
.biscotto.detto-si .biscotto-morso { transform: scale(1); }
.biscotto.detto-si .biscotto-disegno { transform: rotate(-12deg); }
.biscotto.detto-no .biscotto-disegno { opacity: 0.4; transform: scale(0.8); }

.biscotto-testo { display: grid; gap: var(--sp-6); min-width: 0; }
.biscotto-testo p { margin: 0; color: var(--fg-subtle); }
.biscotto-testo .biscotto-titolo { padding-right: var(--sp-24); font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg); }
.biscotto-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); margin-top: var(--sp-8); }
.biscotto-azioni .collegamento { margin-left: var(--sp-4); font-size: var(--fs-14); }

.biscotto-chiudi {
  position: absolute; top: var(--sp-8); right: var(--sp-8);
  display: grid; place-items: center;
  width: var(--sp-32); height: var(--sp-32);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--fg-subtle);
  font: inherit; font-size: var(--fs-20); line-height: 1; cursor: pointer;
}
.biscotto-chiudi:hover { background: var(--surface-hover); color: var(--fg); }

@media (max-width: 640px) {
  .biscotto { left: var(--sp-12); right: var(--sp-12); bottom: calc(var(--sp-12) + env(safe-area-inset-bottom)); width: auto; }
}
@media (pointer: coarse) {
  .biscotto-chiudi { top: var(--sp-2); right: var(--sp-2); width: var(--sp-48); height: var(--sp-48); }
}
@media (prefers-reduced-motion: reduce) {
  .biscotto, .biscotto.esce { animation-duration: 1ms; }
  .biscotto-disegno, .biscotto-morso { transition: none; }
}
@media print { .biscotto { display: none; } }

/* Al tocco: niente attesa del doppio tocco, e bersagli da 48 pixel. */
a, button, label, summary { touch-action: manipulation; }
@media (pointer: coarse) {
  .bottone, .bottone-piccolo, .testata-cerca, .bottone-testo, .segni-scelta button { min-height: var(--sp-48); }
  .piede-testo a { display: inline-block; padding-block: var(--sp-8); }
}

/* L'attributo hidden vince su ogni display dichiarato sopra: a parità di
   specificità conta l'ordine, e questa è l'ultima regola. */
[hidden] { display: none; }

/* Il logo del piede nelle pagine di testo: un collegamento, non l'animazione. */
a.piede-logo { display: block; }
.piede-logo .piede-segno { width: 100%; height: auto; }