/* Walter Pani, foglio di stile unico */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   COLORI
   Tre fasce che si alternano: bianca, nera, blu. Il giallo è l'accento.
   Ogni fascia ridefinisce le stesse variabili, così i componenti
   cambiano colore da soli a seconda dello sfondo.
   ================================================================ */
:root {
  --giallo: #F2C200;
  --nero: #111418;
  --blu: #123F73;
  --bianco: #FFFFFF;
  --carattere: "Figtree", "Segoe UI", Arial, sans-serif;
  color-scheme: only light;       /* "only": il browser non deve scurire il sito da solo */
}

/* fascia bianca (anche il valore di base della pagina) */
:root, .banda--bianco {
  --sfondo: #FFFFFF;
  --testo: #111418;
  --testo-2: #4A525C;
  --linea: #D5DAE0;
  --box: #F1F4F7;
  --tono: #123F73;
  --tono-su: #FFFFFF;
  --evidenza: #FFE27A;
  --evidenza-da: 52%;
  --logo-filtro: none;
  --campo: #FFFFFF;
  --campo-bordo: #4A525C;
  --errore: #B3261E;
  --battuta: #123F73;
}
.banda--nero {
  --sfondo: #111418;
  --testo: #F1F3F5;
  --testo-2: #B3BBC4;
  --linea: #2E353D;
  --box: #1C2127;
  --tono: #F2C200;
  --tono-su: #111418;
  --evidenza: #F2C200;
  --evidenza-da: 84%;
  --logo-filtro: invert(1);
  --campo: #0B0D10;
  --campo-bordo: #8A949F;
  --errore: #FF8A80;
  --battuta: #F2C200;
}
.banda--blu {
  --sfondo: #123F73;
  --testo: #FFFFFF;
  --testo-2: #C8D5E6;
  --linea: rgba(255, 255, 255, 0.24);
  --box: #0C2F57;
  --tono: #FFFFFF;
  --tono-su: #123F73;
  --evidenza: #F2C200;
  --evidenza-da: 84%;
  --logo-filtro: invert(1);
  --campo: #0C2F57;
  --campo-bordo: #C8D5E6;
  --errore: #FFB4AB;
  --battuta: #F2C200;
}

/* due tinte chiare per alleggerire: azzurro e giallo tenue */
.banda--azzurro {
  --sfondo: #E6F0FB;
  --testo: #111418;
  --testo-2: #3D4A58;
  --linea: #C3D4E9;
  --box: #FFFFFF;
  --tono: #123F73;
  --tono-su: #FFFFFF;
  --evidenza: #FFE27A;
  --evidenza-da: 52%;
  --logo-filtro: none;
  --campo: #FFFFFF;
  --campo-bordo: #3D4A58;
  --errore: #B3261E;
  --battuta: #123F73;
}
.banda--giallo {
  --sfondo: #FFF5CF;
  --testo: #111418;
  --testo-2: #4F4A38;
  --linea: #E8D48A;
  --box: #FFFFFF;
  --tono: #123F73;
  --tono-su: #FFFFFF;
  --evidenza: #F2C200;
  --evidenza-da: 80%;
  --logo-filtro: none;
  --campo: #FFFFFF;
  --campo-bordo: #4F4A38;
  --errore: #B3261E;
  --battuta: #123F73;
  --segno-sfondo: #111418;
  --segno-colore: #F2C200;
}

/* Niente versione notte: il sito resta chiaro anche se il telefono è in modalità scura,
   così le fasce bianche danno luce e i riquadri colorati si alternano come previsto. */

/* ================================================================
   BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: 1.125rem;            /* 18px su telefono */
  line-height: 1.62;
  font-weight: 400;
  font-kerning: normal;
}
@media (min-width: 48rem) { body { font-size: 1.1875rem; } }   /* 19px su desktop */

img { max-width: 100%; height: auto; display: block; }
.logo { filter: var(--logo-filtro); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
.banda--bianco :focus-visible, .home :focus-visible, .semplice :focus-visible { outline-color: var(--testo); }

strong { font-weight: 700; }
p { margin: 0 0 1.05em; }

h1, h2, h3 {
  font-family: var(--carattere);
  font-weight: 800;
  color: var(--testo);
  text-wrap: balance;
  letter-spacing: -0.015em;
}

.nascosto {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ================================================================
   IMPAGINAZIONE
   ================================================================ */
.colonna { width: 100%; max-width: 54rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 30rem) { .colonna { padding: 0 1.5rem; } }
@media (min-width: 48rem) { .colonna { padding: 0 2.5rem; } }
.misura { max-width: 35em; }          /* riga sotto gli 80 caratteri */

.banda {
  background: var(--sfondo);
  color: var(--testo);
  padding: 3.25rem 0 2.5rem;
}
@media (min-width: 48rem) { .banda { padding: 4.75rem 0 3.75rem; } }

.banda h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.12;
  margin: 0 0 1.3rem;
  max-width: 20em;
}
.banda h3 { font-size: 1.2em; line-height: 1.3; margin: 2em 0 0.4em; }
.banda h3 + p { margin-top: 0; }

/* icona di sezione: un quadrato giallo che fa da segnale mentre si scorre */
.segno {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin: 0 0 1rem;
  color: var(--segno-colore, var(--nero)); background: var(--segno-sfondo, var(--giallo)); border-radius: 10px;
}
.segno__icona { width: 1.75rem; height: 1.75rem; }

/* barra di avanzamento della lettura: solo CSS */
.avanzamento {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 30;
  background: var(--giallo); transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .avanzamento { animation: avanza linear both; animation-timeline: scroll(root); }
}
@keyframes avanza { to { transform: scaleX(1); } }

/* ================================================================
   APERTURA
   ================================================================ */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.testata__logo { width: 15rem; }
@media (min-width: 48rem) { .testata__logo { width: 17.5rem; } }
.testata__cta { display: none; }
@media (min-width: 48rem) {
  .testata__cta {
    display: inline-block; flex: none;
    font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-decoration: none;
    padding: 0.65rem 1rem; border: 2px solid var(--testo); border-radius: 4px;
  }
  .testata__cta:hover { background: var(--giallo); color: var(--nero); border-color: var(--giallo); }
}

.apertura { padding: 0 0 2.75rem; }
.apertura__corpo { padding-top: 2.75rem; }
@media (min-width: 48rem) {
  .apertura { min-height: 94vh; min-height: 94svh; display: flex; flex-direction: column; padding-bottom: 3.5rem; }
  .apertura__corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 3rem; }
}
.apertura h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.9vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 1.4rem;
  max-width: 15em;
}
.sottotitolo {
  font-size: clamp(1.25rem, 1.08rem + 0.8vw, 1.5625rem);
  line-height: 1.45; font-weight: 500;
  max-width: 26em; margin: 0 0 1.6rem;
}
.promessa {
  max-width: 32em; margin: 0 0 1.4rem; padding: 1rem 1.1rem;
  font-size: 1.05rem; line-height: 1.55;
  background: var(--box); border-left: 5px solid var(--giallo); border-radius: 4px;
}
.apertura .azione { margin: 0 0 2rem; }
.destinatario {
  font-size: 0.98rem; line-height: 1.5; color: var(--testo-2);
  max-width: 36em; margin: 0; padding-top: 1rem; border-top: 1px solid var(--linea);
}
.autore { display: flex; align-items: center; gap: 0.85rem; margin: 1.35rem 0 0; }
.autore__foto {
  width: 3.5rem; height: 3.5rem; flex: none; object-fit: cover; object-position: 50% 12%;
  border-radius: 50%; border: 2px solid var(--giallo);
}
.autore__testo { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--testo-2); }
.autore__testo strong { color: var(--testo); font-size: 1.05rem; }

/* ================================================================
   BOTTONI E INVITI
   ================================================================ */
.bottone {
  display: inline-block;
  font-family: var(--carattere); font-weight: 800; font-size: 1.15rem; line-height: 1.25;
  color: var(--nero); background: var(--giallo);
  border: 2px solid var(--nero); border-radius: 6px;
  padding: 1rem 1.5rem; cursor: pointer; text-decoration: none; text-align: center;
  width: 100%; max-width: 30rem;
}
@media (min-width: 30rem) { .bottone { width: auto; } }
.banda--nero .bottone, .banda--blu .bottone { border-color: var(--giallo); }
.bottone:hover { box-shadow: 0 0 0 3px var(--testo); }
.bottone[disabled] { opacity: 0.7; cursor: progress; }
.bottone--secondario { background: transparent; color: var(--testo); border-color: var(--testo); }
.nota-bottone { display: block; margin: 0.55rem 0 0; font-size: 0.9rem; color: var(--testo-2); }

/* riquadro di invito all'autotest dentro il testo */
.invito-test {
  margin: 2rem 0 0.5rem; padding: 1.35rem 1.25rem 1.4rem;
  background: var(--box); border-radius: 12px; border: 2px solid var(--giallo);
}
.invito-test__titolo { font-weight: 800; font-size: 1.25em; line-height: 1.25; margin: 0 0 0.5rem; }
.invito-test p:last-child { margin-bottom: 0; }

/* ================================================================
   RITMO DI LETTURA
   ================================================================ */
mark {
  color: inherit;
  background: linear-gradient(transparent var(--evidenza-da), var(--evidenza) var(--evidenza-da), var(--evidenza) 96%, transparent 96%);
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.battuta {
  color: var(--battuta);
  font-weight: 800; font-size: 1.3em; line-height: 1.3; letter-spacing: -0.01em;
  margin: 1.4em 0 1em; max-width: 22em;
}
.tesi {
  font-size: 1.12em; line-height: 1.55; font-weight: 500;
  margin: 1.8em 0 0.5em; padding: 1.1rem 1.2rem;
  background: var(--box); border-left: 5px solid var(--tono); border-radius: 4px;
}

/* elenchi con segni grafici in SVG */
.elenco { list-style: none; margin: 0 0 1.3em; padding: 0; }
.elenco li { position: relative; padding-left: 2rem; margin: 0 0 0.7em; }
.elenco li::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 1.15rem; height: 1.15rem;
  background: var(--tono);
  -webkit-mask: var(--segno-elenco) center / contain no-repeat; mask: var(--segno-elenco) center / contain no-repeat;
}
.elenco--spunta { --segno-elenco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.elenco--no     { --segno-elenco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.elenco--pezzo  { --segno-elenco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='2.5' width='11' height='11' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E"); }
.elenco--barra  { --segno-elenco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='6' width='14' height='4' fill='black'/%3E%3C/svg%3E"); }
.elenco--spunta li { font-weight: 600; }
.elenco--barra li { margin-bottom: 1em; }
.elenco--no {
  padding: 1.1rem 1.1rem 0.4rem 1rem; border: 2px dashed var(--linea); border-radius: 10px;
}
.elenco--no li { padding-left: 2.1rem; }
.elenco--no li::before { background: var(--errore); left: 0.1rem; }

/* 1, 2, 3 */
.punto { margin-top: 1.8em; }
.punto::before {
  content: attr(data-n);
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; margin: 0 0 0.6rem;
  font-weight: 800; font-size: 1.2rem; line-height: 1;
  color: var(--tono-su); background: var(--tono); border-radius: 50%;
}

/* la catena: sei anelli */
.catena { list-style: none; margin: 1.6rem 0 1.4rem; padding: 0.4rem 0; }
.catena li { position: relative; padding: 0.7rem 0 0.7rem 3rem; font-weight: 700; font-size: 1.04em; line-height: 1.35; }
.catena li::before {
  content: ""; position: absolute; left: 0.55rem; top: -0.45rem; bottom: -0.45rem; width: 1.15rem;
  border: 3.5px solid var(--tono); border-radius: 0.6rem;
}
.catena li:nth-child(even)::before { left: 0.93rem; width: 0.4rem; background: var(--tono); }
.catena li:first-child::before { top: 0.3rem; }
.catena li:last-child::before { bottom: 0.3rem; }

/* il salto tra analisi e prezzo */
.salto { margin: 1.4rem 0 2.2rem; }
.salto ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr) 0.8fr 0.9fr; }
.salto li { position: relative; padding: 1.2rem 0.35rem 0 0; font-size: 0.8rem; line-height: 1.25; color: var(--testo-2); font-weight: 600; }
.salto li::before { content: ""; position: absolute; top: 0.35rem; left: 0; right: 0; border-top: 3px solid var(--tono); }
.salto li::after { content: ""; position: absolute; top: 0; left: 0; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--tono); }
.salto .salto__vuoto::before { border-top: 3px dotted var(--testo-2); left: 0.3rem; right: 0.3rem; }
.salto .salto__vuoto::after { display: none; }
.salto__vuoto span { display: inline-block; font-weight: 800; color: var(--nero); background: var(--giallo); padding: 0.05rem 0.35rem; margin-left: 0.3rem; }
.salto .salto__prezzo { color: var(--testo); font-weight: 800; }
.salto .salto__prezzo::before { display: none; }
.salto .salto__prezzo::after { background: var(--sfondo); border: 3px solid var(--tono); }
@media (min-width: 30rem) { .salto li { font-size: 0.875rem; } }

/* i quattro anelli mancanti */
.mancanti { list-style: none; margin: 0 0 1.4em; padding: 0; counter-reset: manca; }
.mancanti li { position: relative; counter-increment: manca; padding-left: 3.1rem; margin: 0 0 1.1em; }
.mancanti li::before {
  content: counter(manca); position: absolute; left: 0; top: 0;
  width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; line-height: 1;
  border: 2.5px dashed var(--tono); color: var(--tono); border-radius: 50%;
}
.mancanti p { margin: 0 0 0.6em; }
.mancanti p:last-child { margin: 0; }

/* Azioni + Materiali */
.coppia { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin: 1.8rem 0; }
.coppia__parte { margin: 0; padding: 1rem 1.1rem 1.1rem; background: var(--box); border-top: 4px solid var(--giallo); border-radius: 4px; }
.coppia__parte strong { font-weight: 800; font-size: 1.12em; }
.coppia__giunto { color: var(--giallo); width: 3.5rem; height: auto; justify-self: center; transform: rotate(90deg); margin: 0.2rem 0; }
@media (min-width: 48rem) {
  .coppia { grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
  .coppia__giunto { transform: none; margin: 0; }
}

/* le obiezioni: pensieri del lettore, in un fumetto */
.obiezione-box { margin: 1.75rem 0 0; }
.banda .obiezione {
  position: relative; margin: 0 0 0.9rem; padding: 0.9rem 1.1rem 0.95rem 3.1rem;
  font-size: 1.08em; background: var(--box); border-radius: 18px 18px 18px 4px;
}
.obiezione::before {
  content: "\201C"; position: absolute; left: 0.8rem; top: 0.3rem;
  font-weight: 900; font-size: 2.4em; line-height: 1; color: var(--tono);
}
.obiezione + p { margin: 0; padding-left: 1rem; margin-left: 0.15rem; border-left: 3px solid var(--giallo); }

/* ================================================================
   DIAGNOSI
   ================================================================ */
.fasi { list-style: none; margin: 2rem 0 2.25rem; padding: 0; }
.fasi > li { position: relative; padding: 0.3rem 0 1.8rem 2.2rem; border-left: 3px solid var(--tono); margin-left: 1.3rem; }
.fasi > li:last-child { padding-bottom: 0.2rem; border-left-color: transparent; }
.fasi__icona {
  position: absolute; left: -1.4rem; top: 0; width: 2.7rem; height: 2.7rem; padding: 0.55rem;
  color: var(--nero); background: var(--giallo); border: 2px solid var(--tono); border-radius: 50%;
}
.fasi p { margin: 0 0 0.6em; }
.fasi p:last-child { margin: 0; }
.fasi ul { margin: 0.2rem 0 0; padding: 0; list-style: none; }
.fasi ul li { position: relative; padding-left: 1.2rem; margin: 0 0 0.35em; }
.fasi ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 0.5rem; background: var(--tono); border-radius: 1px; }

.prezzo {
  line-height: 1.45; margin: 2.25rem 0 0.9rem; padding: 1.15rem 1.25rem 1.25rem;
  background: var(--box); border: 2px solid var(--testo); border-top: 8px solid var(--giallo); border-radius: 8px;
}
.prezzo strong { display: block; font-weight: 900; font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); line-height: 1.1; margin-bottom: 0.35rem; }
.dopo-prezzo { margin: 0 0 0.5rem; }

/* garanzia: riquadro a timbro sulla fascia nera */
.garanzia {
  padding: 1.5rem 1.25rem 1.1rem; background: var(--box);
  border: 3px solid var(--testo); border-radius: 12px; box-shadow: 7px 7px 0 var(--giallo);
}
@media (min-width: 48rem) { .garanzia { padding: 2.1rem 2.1rem 1.4rem; } }
.garanzia h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); }

/* ================================================================
   CHI SONO
   ================================================================ */
.ritratto { margin: 0 0 1.75rem; max-width: 16rem; }
.ritratto img { width: 100%; border-radius: 6px; border: 3px solid var(--giallo); }
@media (min-width: 48rem) { .ritratto { float: right; width: 14rem; margin: 0.4rem 0 1.25rem 1.75rem; } .lavoro { clear: both; } }
.lavoro {
  display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 0.95rem; align-items: start;
  margin: 1.1rem 0 0; padding: 1rem 1.1rem 1.05rem 0.95rem;
  background: var(--box); border-left: 5px solid var(--giallo); border-radius: 6px;
}
.lavoro:first-of-type { margin-top: 1.75rem; }
.lavoro__icona { width: 2.5rem; height: 2.5rem; padding: 0.45rem; color: var(--nero); background: var(--giallo); border-radius: 8px; }
.lavoro p { margin: 0; }
@media (max-width: 29.99rem) {
  .lavoro { grid-template-columns: 1fr; padding: 0.95rem 1rem 1rem; }
  .lavoro__icona { width: 2.1rem; height: 2.1rem; padding: 0.35rem; margin-bottom: 0.6rem; }
}
.testimonianza { margin: 1.75rem 0 0; padding: 0 0 0 1.25rem; border-left: 4px solid var(--giallo); }
.testimonianza blockquote { margin: 0 0 0.6rem; font-size: 1.1em; font-weight: 500; }
.testimonianza figcaption { font-size: 0.9em; color: var(--testo-2); }
.dato { font-weight: 800; font-size: 1.25em; line-height: 1.35; margin: 2rem 0; padding: 1rem 0; border-top: 3px solid var(--tono); border-bottom: 1px solid var(--linea); }

/* ================================================================
   INVITO FINALE
   ================================================================ */
.invito { display: grid; grid-template-columns: 6.75rem 1fr; column-gap: 1.1rem; align-items: center; margin: 2.25rem 0 0; }
.invito__foto { width: 100%; border-radius: 6px; border: 3px solid var(--giallo); grid-row: 1; }
.invito h3, .invito__titolo { margin: 0; font-weight: 800; line-height: 1.25; font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem); }
.invito__testo { grid-column: 1 / -1; margin-top: 1.1rem; }
.invito__testo p:last-child { margin-bottom: 0; }
@media (min-width: 40rem) {
  .invito { grid-template-columns: 10rem 1fr; column-gap: 1.6rem; align-items: start; }
  .invito__foto { grid-row: 1 / span 2; }
  .invito h3, .invito__titolo { margin-top: 0.3rem; }
  .invito__testo { grid-column: 2; margin-top: 0.75rem; }
}
.azione-finale { margin: 1.75rem 0 0; }
.riservatezza { font-size: 0.95rem; line-height: 1.5; color: var(--testo-2); margin: 1rem 0 0; }

/* barra fissa su telefono verso l'autotest */
.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--sfondo); border-top: 1px solid var(--linea); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
}
.barra-cta .bottone { display: block; width: 100%; max-width: 30rem; margin: 0 auto; padding: 0.8rem 1rem; font-size: 1.05rem; }
@media (min-width: 64rem) { .barra-cta { display: none !important; } }

/* ================================================================
   CHIUSURA
   ================================================================ */
.firma { padding-top: 2.75rem; padding-bottom: 3.25rem; }
.firma__monogramma { width: 3.75rem; margin: 0 0 1rem; }
.firma p { margin: 0; line-height: 1.5; }
.firma .nota { font-size: 0.95rem; margin-top: 1.25rem; color: var(--testo-2); }

/* ================================================================
   HOME
   ================================================================ */
.home { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 2.5rem 0; }
.home .colonna { max-width: 46rem; }
.home__logo { width: 16rem; margin: 0 0 2.25rem; }
@media (min-width: 48rem) { .home__logo { width: 19rem; } }
.home__motto { font-size: 1.6rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 0.9rem; max-width: 22em; }
@media (min-width: 48rem) { .home__motto { font-size: 2rem; } }
.home__frase { font-size: 1.2rem; line-height: 1.55; font-weight: 500; margin: 0 0 2.25rem; max-width: 32em; }
@media (min-width: 48rem) { .home__frase { font-size: 1.35rem; } }
.porte { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 40rem) { .porte { grid-template-columns: 1fr 1fr; } }
.porta {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.15rem 1.2rem; font-weight: 800; font-size: 1.25rem; line-height: 1.25; text-decoration: none;
  color: var(--testo); background: var(--box); border: 2px solid var(--testo); border-radius: 12px;
}
.porta:hover { background: var(--giallo); color: var(--nero); border-color: var(--nero); }
.porta__segno { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--nero); background: var(--giallo); border-radius: 8px; }
.porta:hover .porta__segno { background: var(--bianco); }
.porta__segno svg { width: 1.6rem; height: 1.6rem; }

/* ================================================================
   PAGINE SEMPLICI (segnaposto, privacy)
   ================================================================ */
.semplice { padding: 1rem 0 4rem; }
.semplice h1 { font-size: 2.1rem; line-height: 1.12; margin: 2.5rem 0 1rem; }
.semplice h2 { font-size: 1.35rem; margin: 2rem 0 0.5rem; }
.nota { color: var(--testo-2); }

/* ================================================================
   MODULI (autotest)
   ================================================================ */
.campo { margin: 0 0 1.35rem; }
.campo label, .campo legend { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.35; margin: 0 0 0.4rem; padding: 0; }
.campo .aiuto { display: block; font-size: 0.95rem; line-height: 1.45; color: var(--testo-2); margin: -0.15rem 0 0.5rem; }
.campo .facoltativo { font-weight: 400; color: var(--testo-2); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo select {
  display: block; width: 100%; max-width: 30rem;
  font: inherit; font-size: 1.125rem; line-height: 1.4; color: var(--testo);
  background: var(--campo); border: 2px solid var(--campo-bordo); border-radius: 6px;
  padding: 0.75rem 0.85rem; min-height: 3.2rem;
}
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; border-color: var(--testo); }
.campo [aria-invalid="true"] { border-color: var(--errore); }
.messaggio-errore { display: block; color: var(--errore); font-size: 1rem; line-height: 1.4; margin: 0.45rem 0 0; font-weight: 600; }
.messaggio-errore:empty { display: none; }
fieldset.campo { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }

/* scelte a pulsante: Sempre / A volte / Mai */
.scelte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: 30rem; }
.scelte--colonna { grid-template-columns: 1fr; }
.scelta { position: relative; display: block; }
.scelta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.scelta span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.1rem;
  padding: 0.55rem 0.7rem; font-weight: 700; font-size: 1rem; line-height: 1.25;
  border: 2px solid var(--campo-bordo); border-radius: 8px; background: var(--campo);
}
.scelte--colonna .scelta span { justify-content: flex-start; text-align: left; }
.scelta input:checked + span { background: var(--giallo); color: var(--nero); border-color: var(--nero); }
.scelta input:focus-visible + span { outline: 3px solid var(--giallo); outline-offset: 2px; }
.scelta input:hover + span { border-color: var(--testo); }

/* ================================================================
   STAMPA
   ================================================================ */
@media print {
  .avanzamento, .barra-cta, .testata__cta, .azione, .invito-test, .dopo-prezzo, .azione-finale { display: none !important; }
  .banda { background: none !important; color: #000 !important; padding: 1.5rem 0; }
  .logo { filter: none !important; }
  body { font-size: 11pt; }
}

/* ================================================================
   AUTOTEST
   ================================================================ */
.test-testata { padding-bottom: 2.25rem; }
.test-testata .testata { margin-bottom: 2rem; }
.test-testata h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 1rem; max-width: 16em; }
.test-occhiello {
  display: inline-block; margin: 0 0 0.9rem; padding: 0.3rem 0.7rem;
  font-weight: 800; font-size: 0.95rem; color: var(--nero); background: var(--giallo); border-radius: 4px;
}
.test-corpo { padding-top: 2rem; }

.percorso { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0 0 2rem; padding: 0; font-size: 0.9rem; font-weight: 700; color: var(--testo-2); }
.percorso li { display: flex; align-items: center; gap: 0.4rem; padding-top: 0.55rem; border-top: 5px solid var(--linea); line-height: 1.2; }
.percorso li span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--box); font-size: 0.85rem; }
.percorso li.attivo { border-top-color: var(--giallo); color: var(--testo); }
.percorso li.attivo span { background: var(--giallo); color: var(--nero); }
.percorso li.fatto { border-top-color: var(--tono); color: var(--testo); }
.percorso li.fatto span { background: var(--tono); color: var(--tono-su); }

.passo:focus, .risultato:focus { outline: none; }
.passo h2, .risultato h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); line-height: 1.15; margin: 0 0 1rem; }
.passo__comandi { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.75rem 0 0; }
.passo__comandi .bottone--secondario { font-size: 1rem; padding: 0.85rem 1.2rem; }

/* risultato */
.r-scheda { background: var(--sfondo); color: var(--testo); border-radius: 14px; padding: 1.4rem 1.25rem 1.3rem; margin: 0 0 1rem; }
.r-scheda--bordo { border: 2px solid var(--testo); }
.r-scheda p:last-child { margin-bottom: 0; }
.r-etichetta { font-size: 0.9rem; font-weight: 800; color: var(--testo-2); margin: 0 0 0.35rem; }
.r-numero { font-weight: 900; font-size: clamp(2.5rem, 2rem + 3vw, 3.5rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 0.9rem; color: var(--testo); }
.r-numero--testo { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.01em; }
.r-su { font-size: 0.45em; font-weight: 700; color: var(--testo-2); letter-spacing: 0; }

.r-barra { display: flex; height: 1.1rem; border-radius: 6px; overflow: hidden; background: var(--box); margin: 0 0 0.75rem; }
.r-barra span { display: block; height: 100%; }
.r-barra__firmate, .r-legenda__firmate::before { background: var(--tono); }
.r-barra__no, .r-legenda__no::before { background: #8A949F; }
.r-barra__silenzio, .r-legenda__silenzio::before { background: var(--giallo); }
.r-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0 0 1rem; padding: 0; font-size: 0.95rem; }
.r-legenda li::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.4rem; border-radius: 2px; vertical-align: -0.05em; }

.r-catena { list-style: none; margin: 0 0 1rem; padding: 0; }
.r-catena li { position: relative; padding: 0.85rem 0 0.85rem 2.6rem; border-top: 1px solid var(--linea); }
.r-catena li::before { content: ""; position: absolute; left: 0.35rem; top: 0.9rem; width: 1.3rem; height: 2rem; border: 3.5px solid var(--tono); border-radius: 0.7rem; }
.r-catena li.r-c-debole::before { border-style: dashed; border-color: var(--giallo); }
.r-catena li.r-c-manca::before { border-style: dotted; border-color: #FF8A80; }
.r-catena strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.r-stato { display: inline-block; margin: 0 0 0.35rem; padding: 0.1rem 0.55rem; font-size: 0.8rem; font-weight: 800; border-radius: 999px; }
.r-c-ok .r-stato { background: #7FB2EC; color: var(--nero); }
.r-c-debole .r-stato { background: var(--giallo); color: var(--nero); }
.r-c-manca .r-stato { background: #FF8A80; color: var(--nero); }
.r-spiega { margin: 0.4rem 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--testo-2); }
.r-chi { margin: 1rem 0 0; padding: 0.9rem 1rem; background: var(--box); border-left: 4px solid var(--giallo); border-radius: 4px; font-weight: 600; }

.r-chiusura { margin: 2rem 0 0; }
.r-chiusura h3 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.r-conferma { font-weight: 800; font-size: 1.15rem; padding: 1rem 1.1rem; background: var(--box); border-left: 6px solid var(--giallo); border-radius: 4px; }
.r-link a { font-weight: 700; }
.r-avviso { margin: 1.5rem 0 0; padding: 0.9rem 1rem; border: 2px dashed var(--errore); border-radius: 6px; font-size: 0.95rem; }

/* casella di consenso */
.spunta { display: flex; align-items: flex-start; gap: 0.7rem; font-weight: 500; font-size: 1rem; line-height: 1.45; cursor: pointer; max-width: 30rem; }
.spunta input { flex: none; width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; accent-color: var(--tono); }

/* autotest su telefono: il bottone Comincia deve stare nella prima schermata */
@media (max-width: 47.99rem) {
  .test-testata { padding-bottom: 1.5rem; }
  .test-testata .testata { margin-bottom: 1.25rem; }
  .test-testata .testata__logo { width: 12.5rem; }
  .test-testata h1 { font-size: 1.85rem; margin-bottom: 0.75rem; }
  .test-testata .sottotitolo { font-size: 1.05rem; margin-bottom: 0; }
  .test-corpo { padding-top: 1.25rem; }
  .percorso { margin-bottom: 1.25rem; }
  #passo-0 h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
  #passo-0 .passo__comandi { margin-top: 1rem; }
}
.r-link { margin-top: 1.5rem; }
.passo__comandi--inizio { margin-top: 0; }
.consiglio { margin: 1rem 0 0; padding: 0.85rem 1rem; font-size: 0.98rem; line-height: 1.5; background: var(--box); border-left: 4px solid var(--giallo); border-radius: 4px; }

/* ================================================================
   RIQUADRI COLORATI
   La pagina resta bianca; le sezioni colorate sono riquadri staccati dai bordi.
   ================================================================ */
.banda.banda--riquadro { padding: 0.5rem; }
.riquadro {
  background: var(--sfondo); color: var(--testo);
  max-width: 60rem; margin: 0 auto; padding: 2.75rem 0 2.25rem;
  border-radius: 20px;
}
.riquadro .colonna { padding: 0 1.1rem; }
@media (min-width: 30rem) { .riquadro .colonna { padding: 0 1.5rem; } }
@media (min-width: 48rem) {
  .banda.banda--riquadro { padding: 1rem 1.5rem; }
  .riquadro { padding: 4rem 0 3.25rem; border-radius: 28px; }
  .riquadro .colonna { padding: 0 3rem; }
}

.testimonianza--frase { margin: 1.25rem 0 1.5rem; }
.r-dopo { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); }