/* Base comune a tutte le pagine — direzione «F · Pulita» (DESIGN.md).
   Reset, telaio, titoli, bottoni, collegamenti, etichette, segnaposto e le tre classi dell'arancio delle demo.
   Testata, menu, lingua, titoli di sezione, chiusura e piede: css/proposta.css. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--testata-altezza) + var(--s-5));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: var(--t-corpo);
  line-height: var(--interlinea-corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* titoli: stretti, pesanti, tracking negativo. Le pagine regolano solo misura e interlinea. */
h1, h2 { font-weight: 800; font-stretch: var(--stretto); letter-spacing: var(--tracking-poster); text-wrap: balance; }
h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

::selection { background: var(--superficie-3); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--r-cella);
}

.salta {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-controllo);
  background: var(--inchiostro);
  color: var(--su-inchiostro);
  font-weight: 600;
  text-decoration: none;
}
.salta:focus { top: var(--s-4); }

.sr,
.solo-lettore {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* telaio: 12 colonne, larghezza massima 1280 + margini */
.telaio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}
.telaio > * { grid-column: 1 / -1; min-width: 0; }

/* etichette
   .etichetta: testo breve che si legge (grotesk)
   .etichetta-mono: nome storico. Ora è un grotesk piccolo, niente maiuscolo né monospazio.
   .numero: numeri e dati (tabellari), grotesk */
.etichetta,
.etichetta-mono {
  font-size: var(--t-mini);
  font-weight: 600;
  line-height: 1.3;
  color: var(--grafite);
}
.etichetta-mono { font-size: var(--t-etichetta); font-variant-numeric: tabular-nums; }
.numero {
  font-size: var(--t-etichetta);
  font-weight: 600;
  color: var(--grigio);
  font-variant-numeric: tabular-nums;
}

/* segnaposto dichiarati: ciò che manca si vede */
.segnaposto {
  display: inline;
  padding: 0.05em 0.35em;
  border: 1px dashed var(--segnaposto-bordo);
  border-radius: var(--r-carta);
  background: var(--segnaposto-fondo);
  color: var(--segnaposto-testo);
  font-family: var(--font);
  font-size: 0.88em;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ───────── Bottoni: 12 px, tutti uguali, niente bordo ─────────
   .bottone              azione principale: arancio, testo inchiostro. Solo Prenota (e i suoi sinonimi: Parliamone…).
   .bottone--inchiostro  pieno scuro: l'azione dentro il campo arancio, i comandi delle demo.
   .bottone--contorno    secondario: carta con filetto. Preferire .collegamento (una parola con la freccia). */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 54px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-controllo);
  background: var(--accento);
  color: var(--su-accento);
  font-family: var(--font);
  font-size: var(--t-corpo);
  font-weight: 650;
  font-stretch: 100%;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-breve) var(--curva), color var(--d-breve) var(--curva), box-shadow var(--d-breve) var(--curva);
}
.bottone > span[aria-hidden] { display: inline-block; transition: transform var(--d-media) var(--curva); }
.bottone:hover { background: var(--accento-passaggio); }
.bottone:hover > span[aria-hidden] { transform: translateX(3px); }
.bottone:active { transform: translateY(1px); }
.bottone--piccolo { min-height: var(--tocco); padding: 0 var(--s-4); font-size: var(--t-piccolo); }
.bottone--grande { min-height: 62px; padding: 0 var(--s-6); font-size: var(--t-medio); }
.bottone--inchiostro { background: var(--inchiostro); color: var(--su-inchiostro); }
.bottone--inchiostro:hover { background: var(--grafite); }
.bottone--contorno {
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: inset 0 0 0 1px var(--tratto);
}
.bottone--contorno:hover { background: var(--carta); box-shadow: inset 0 0 0 1px var(--inchiostro); }

/* il secondo livello non è un bottone: è una parola con la freccia */
.collegamento {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tocco);
  font-weight: 650;
  color: var(--inchiostro);
  text-decoration: none;
}
.collegamento__testo {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: var(--tratto);
  transition: text-decoration-color var(--d-breve) var(--curva);
}
.collegamento > span[aria-hidden] { display: inline-block; transition: transform var(--d-media) var(--curva); }
.collegamento:hover .collegamento__testo { text-decoration-color: var(--inchiostro); }
.collegamento:hover > span[aria-hidden] { transform: translateX(3px); }

/* ───────── Le tre classi dell'arancio delle demo (nomi storici) ─────────
   In F l'arancio pieno è solo di Prenota e della chiusura: qui le tre classi diventano sobrie.
   .azione-demo    il comando che fa partire una dimostrazione: bottone pieno inchiostro.
   .fascia-scelta  il gruppo dei comandi d'ingresso: un pannello carta, nessun segno arancio.
   .risultato      il blocco con la risposta ottenuta: un pannello carta; il dato che conta lo segna la demo. */
.azione-demo {
  border: 0;
  border-radius: var(--r-controllo);
  background: var(--inchiostro);
  color: var(--su-inchiostro);
}
.azione-demo:hover:not(:disabled) { background: var(--grafite); color: var(--su-inchiostro); }

.fascia-scelta { position: relative; }
.fascia-scelta--spezzata > * { position: relative; }

.risultato {
  position: relative;
  border-radius: var(--r-pannello);
  background: var(--carta);
}

/* tag del tipo di pagina: Dimostrazione · Fonti reali · Caso reale. Piccolo, grotesk, fondo tavolo (non una pillola) */
.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 2px var(--s-2);
  border-radius: var(--r-piccolo);
  background: var(--superficie-3);
  color: var(--inchiostro);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.tag--pieno { background: var(--inchiostro); color: var(--su-inchiostro); }

/* freccia in quadrato: «questo si apre» */
.quadro-freccia {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tocco);
  height: var(--tocco);
  border-radius: var(--r-controllo);
  background: var(--inchiostro);
  color: var(--su-inchiostro);
  font-size: var(--t-medio);
}
.quadro-freccia span { transition: transform var(--d-media) var(--curva); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}