/* SwipeAI, foglio di stile comune
   Direzione «Matita rossa»: carta, inchiostro, un rosso.
   Indice: 1 font · 2 token · 3 base · 4 griglia · 5 testo · 6 segni di matita
           7 testata · 8 piè di pagina · 9 componenti · 10 movimento · 11 stampa */

/* 1. Font ---------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* 2. Token --------------------------------------------------------------- */

:root {
  --carta: #F8F5EF;
  --carta-2: #EFEAE0;
  --carta-3: #E2DBCD;
  --bianco: #FFFDF9;
  --inchiostro: #16140F;
  --inchiostro-2: #48443C;
  --inchiostro-3: #6B665C;
  --rosso: #C5301A;
  --rosso-scuro: #9C2412;
  --verde: #2C6B4A;
  --ocra: #A8780F;
  --blu: #1F4E79;
  --filetto: rgb(22 20 15 / 0.16);

  --f-titoli: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-testo: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --t-apertura: clamp(2.75rem, 1.5rem + 5vw, 6.25rem);
  --t-h1: clamp(2.4rem, 1.6rem + 3.4vw, 4.5rem);
  --t-h2: clamp(1.8rem, 1.35rem + 1.9vw, 3rem);
  --t-h3: clamp(1.3rem, 1.17rem + 0.55vw, 1.65rem);
  --t-sommario: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --t-testo: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --t-piccolo: 0.9375rem;
  --t-minimo: 0.8125rem;

  --margine: clamp(20px, 5vw, 72px);
  --canalino: 24px;
  --largo: 1320px;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: clamp(4rem, 3rem + 5vw, 8rem);
}

/* 3. Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: var(--t-testo);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rosso);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
  transition: color 0.15s;
}
a:hover { color: var(--rosso); }

:focus-visible {
  outline: 3px solid var(--rosso);
  outline-offset: 3px;
}

::selection { background: var(--rosso); color: var(--bianco); }

/* L'attributo hidden vince sempre, anche su elementi con un display dichiarato */
[hidden] { display: none !important; }

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

.salta {
  position: absolute; left: var(--margine); top: -4rem; z-index: 10;
  padding: 0.75rem 1rem; background: var(--inchiostro); color: var(--carta);
  text-decoration: none; font-weight: 600;
}
.salta:focus { top: 0.5rem; color: var(--carta); }

/* 4. Griglia ------------------------------------------------------------- */

.pagina {
  width: min(100% - 2 * var(--margine), var(--largo));
  margin-inline: auto;
}

.griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-4);
}

@media (min-width: 48rem) {
  .griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--canalino);
  }
  /* Ogni figlio dichiara le sue colonne: style="--col: 1 / span 7"
     --col-m vale tra 768 e 1100px, se serve una disposizione diversa. */
  .griglia > * { grid-column: var(--col-m, var(--col, 1 / -1)); }
}
@media (min-width: 68.75rem) {
  .griglia > * { grid-column: var(--col, 1 / -1); }
}

.sezione { padding-block: var(--s-6); }
.sezione--filetto { border-top: 1px solid var(--inchiostro); }
.sezione--carta2 { background: var(--carta-2); }
.sezione--inchiostro { background: var(--inchiostro); color: var(--carta); }
.sezione--inchiostro :focus-visible { outline-color: var(--carta); }

/* 5. Testo --------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titoli);
  font-weight: 400;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.016em; font-weight: 450; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.006em; font-weight: 500; }
h4 { font-family: var(--f-testo); font-size: 1em; font-weight: 700; line-height: 1.35; }

h1 em, h2 em, h3 em, .apertura em { font-style: italic; }

.apertura {
  font-family: var(--f-titoli);
  font-size: var(--t-apertura);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

.sommario {
  font-family: var(--f-titoli);
  font-size: var(--t-sommario);
  line-height: 1.38;
  letter-spacing: -0.005em;
}

.occhiello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.75rem;
  margin: 0;
  font-size: var(--t-minimo);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
}
.occhiello__numero {
  font-family: var(--f-titoli);
  font-size: 1.15rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rosso);
}
/* Separatore tra due parti di un occhiello: un punto rosso, mai una lineetta */
.occhiello__punto { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--rosso); }
@media (max-width: 35.99rem) { .occhiello__punto { flex-basis: 100%; height: 0; } }

.piccolo { font-size: var(--t-piccolo); line-height: 1.5; }
.minimo { font-size: var(--t-minimo); line-height: 1.45; }
.tenue { color: var(--inchiostro-2); }
.misura { max-width: 34em; }

.prosa > * + * { margin-top: 1em; }
.prosa > h2 { margin-top: 2.2em; }
.prosa > h3 { margin-top: 1.8em; }
.prosa ul, .prosa ol { padding-left: 1.2em; margin-block: 1em; }
.prosa li + li { margin-top: 0.4em; }
.prosa li::marker { color: var(--rosso); }

/* Nota a margine: asterisco rosso + testo piccolo */
.nota {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--inchiostro-2);
}
.nota::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0.06em;
  font-family: var(--f-titoli);
  font-size: 1.8em;
  line-height: 1;
  color: var(--rosso);
}
.asterisco {
  font-family: var(--f-titoli);
  color: var(--rosso);
  font-style: normal;
  margin-left: 0.04em;
}

.citazione {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--rosso);
  font-family: var(--f-titoli);
  font-size: var(--t-h3);
  font-style: italic;
  line-height: 1.3;
}

/* 6. Segni di matita ----------------------------------------------------- */

.segno { position: relative; white-space: nowrap; }
.segno svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  filter: url(#matita);
}
.segno path, .freccia-matita path {
  fill: none;
  stroke: var(--rosso);
  stroke-width: max(2.5px, 0.05em);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.segno--sotto svg { left: -1.5%; bottom: -0.14em; width: 103%; height: 0.2em; }
.segno--cerchio svg { left: -8%; top: -8%; width: 116%; height: 120%; }
.freccia-matita { filter: url(#matita); }
.freccia-matita path { stroke-width: 2.6px; }

/* 7. Testata ------------------------------------------------------------- */

.testata { border-bottom: 1px solid var(--inchiostro); }
.testata__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 4.5rem;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--inchiostro);
  text-decoration: none;
}
.marchio:hover { color: var(--inchiostro); }
.marchio__nome {
  font-family: var(--f-titoli);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.marchio__nome i { font-weight: 400; }

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.nav a:not(.bottone) {
  display: block;
  padding-block: 0.5rem;
  font-size: 1rem;
  text-decoration: none;
  background: linear-gradient(var(--rosso), var(--rosso)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.2s;
}
.nav a:not(.bottone):hover { color: inherit; background-size: 100% 2px; }
.nav a[aria-current] { background-size: 100% 2px; }

.testata__menu { display: none; }

@media (max-width: 61.99rem) {
  .js .testata__menu {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.9rem; margin-right: -0.9rem;
    font: 600 1rem var(--f-testo); color: inherit;
    background: none; border: 0; cursor: pointer;
  }
  .testata__menu[aria-expanded="true"] .icona--apri,
  .testata__menu[aria-expanded="false"] .icona--chiudi { display: none; }

  .testata__riga { flex-wrap: wrap; }
  .nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
  }
  .js .nav { display: none; }
  .js .nav.aperta { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-top: 1px solid var(--filetto); }
  .nav a:not(.bottone) {
    padding-block: 0.8rem;
    font-family: var(--f-titoli);
    font-size: 1.6rem;
    background: none;
  }
  .nav a[aria-current] { color: var(--rosso); }
}

/* 8. Piè di pagina ------------------------------------------------------- */

.piede {
  border-top: 1px solid var(--inchiostro);
  padding-block: var(--s-5) var(--s-4);
  font-size: var(--t-piccolo);
}
.piede h2 {
  margin-bottom: 0.9rem;
  font-family: var(--f-testo);
  font-size: var(--t-minimo);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.piede ul { margin: 0; padding: 0; list-style: none; }
.piede li + li { margin-top: 0.45rem; }
.piede a { text-decoration-color: transparent; }
.piede a:hover { text-decoration-color: var(--rosso); }
.piede__motto {
  font-family: var(--f-titoli);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  max-width: 15em;
}
.piede__legale {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--filetto);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: var(--t-minimo);
  color: var(--inchiostro-2);
}
.piede__legale p + p { margin-top: 0; }
.piede__legale a { text-decoration-color: var(--rosso); }

/* 9. Componenti ---------------------------------------------------------- */

/* Bottoni */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border: 1.5px solid var(--inchiostro);
  background: var(--inchiostro);
  color: var(--carta);
  font: 600 1rem/1.2 var(--f-testo);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.bottone:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); color: var(--bianco); }
.bottone--rosso { background: var(--rosso); border-color: var(--rosso); color: var(--bianco); }
.bottone--contorno { background: transparent; color: var(--inchiostro); }
.bottone--contorno:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
.bottone--piccolo { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.9375rem; }
.sezione--inchiostro .bottone { background: var(--carta); border-color: var(--carta); color: var(--inchiostro); }
.sezione--inchiostro .bottone:hover { background: var(--rosso); border-color: var(--rosso); color: var(--bianco); }

.con-freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.con-freccia .icona { transition: transform 0.2s; }
.con-freccia:hover .icona { transform: translateX(4px); }

.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* Etichetta di stato: il tratteggio dice "provvisorio" */
.stato {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border: 1px dashed var(--inchiostro);
  font-size: var(--t-minimo);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.stato::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border: 1.5px solid var(--rosso);
  border-radius: 50%;
}
.stato--futuro { border-color: var(--inchiostro-3); color: var(--inchiostro-2); }
.stato--futuro::before { display: none; }

/* Riquadri editoriali */
.riquadro {
  padding: var(--s-3) var(--s-3) calc(var(--s-3) + 0.25rem);
  border-top: 2px solid var(--inchiostro);
  background: var(--carta-2);
}
.riquadro__titolo {
  margin-bottom: 0.9rem;
  font-family: var(--f-testo);
  font-size: var(--t-minimo);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.riquadro ul { margin: 0; padding: 0; list-style: none; }
.riquadro li { position: relative; padding-left: 1.6rem; }
.riquadro li + li { margin-top: 0.6rem; }
.riquadro li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 0.9rem; height: 1.5px; background: var(--rosso);
}
.riquadro--ricorda { background: var(--inchiostro); color: var(--carta); border-top-color: var(--rosso); }
.riquadro--ricorda li::before {
  top: 0.38em; width: 0.8rem; height: 0.45rem; background: none;
  border-left: 2px solid var(--rosso); border-bottom: 2px solid var(--rosso);
  transform: rotate(-48deg);
  border-color: #EE6A52;
}

/* Tabella editoriale */
.tabella-scorri { overflow-x: auto; }
.tabella-scorri .tabella { min-width: 34rem; }
.tabella {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--inchiostro);
  font-size: var(--t-piccolo);
  line-height: 1.45;
}
.tabella caption {
  caption-side: bottom;
  padding-top: 0.75rem;
  text-align: left;
  font-size: var(--t-minimo);
  color: var(--inchiostro-2);
}
.tabella th, .tabella td {
  padding: 0.85rem 1.25rem 0.85rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filetto);
}
.tabella thead th {
  font-size: var(--t-minimo);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: var(--inchiostro);
}
.tabella tbody th {
  font-family: var(--f-titoli);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
}

/* Prima / Dopo */
.confronto { display: grid; gap: 0; border-top: 2px solid var(--inchiostro); }
@media (min-width: 40rem) { .confronto { grid-template-columns: 1fr 1fr; } }
.confronto__lato { padding: var(--s-3); }
.confronto__lato--prima { background: var(--carta-2); color: var(--inchiostro-2); }
.confronto__lato--dopo { background: var(--bianco); }
.confronto__etichetta {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--t-minimo);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inchiostro);
}
.confronto__lato--dopo .confronto__etichetta { color: var(--rosso); }
.confronto__richiesta { font-size: 1.0625rem; line-height: 1.5; }
.confronto__richiesta mark {
  background: none; color: inherit;
  box-shadow: inset 0 -0.5em 0 rgb(197 48 26 / 0.16);
}
.confronto__perche { margin-top: 1rem; font-size: var(--t-piccolo); color: var(--inchiostro-2); }

/* Riga strumento */
.strumento {
  display: grid;
  gap: 0.75rem var(--canalino);
  padding-block: var(--s-3);
  border-top: 1px solid var(--inchiostro);
}
.strumento:last-child { border-bottom: 1px solid var(--inchiostro); }
@media (min-width: 48rem) {
  .strumento { grid-template-columns: 5fr 5fr 2fr; align-items: baseline; }
  .strumento > :last-child { justify-self: end; }
}
.strumento__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }

/* Segnaposto per le foto vere */
.segnaposto {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 1rem;
  border: 1.5px dashed var(--inchiostro-3);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgb(22 20 15 / 0.07) 11px 12px),
    var(--carta-2);
}
.segnaposto__etichetta {
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  background: var(--inchiostro);
  color: var(--carta);
  font-size: var(--t-minimo);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.segnaposto__testo {
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  background: var(--carta);
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
.da-completare {
  padding: 0.05em 0.35em;
  background: rgb(197 48 26 / 0.12);
  border-bottom: 1.5px dashed var(--rosso);
  font-size: 0.92em;
}

/* Moduli */
.campo { display: grid; gap: 0.4rem; }
.campo + .campo { margin-top: var(--s-3); }
.campo label { font-weight: 600; font-size: var(--t-piccolo); }
.campo__aiuto { font-size: var(--t-minimo); color: var(--inchiostro-2); }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--inchiostro);
  border-radius: 0;
  background: var(--bianco);
  color: var(--inchiostro);
  font: inherit;
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline-offset: 0; }
.spunta { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--t-piccolo); }
.spunta input {
  appearance: none;
  flex: none;
  width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0;
  border: 1.5px solid var(--inchiostro);
  background: var(--bianco);
  cursor: pointer;
}
.spunta input:checked {
  background: var(--inchiostro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F5EF' stroke-width='3'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Domande frequenti */
.domande { border-top: 1px solid var(--inchiostro); }
.domande details { border-bottom: 1px solid var(--inchiostro); }
.domande summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.1rem;
  font-family: var(--f-titoli);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary .icona { transition: transform 0.2s; }
.domande details[open] summary .icona { transform: rotate(45deg); }
.domande details > div { padding-bottom: 1.4rem; max-width: 40em; }

/* Diagramma: la parola più probabile */
.previsione { font-size: var(--t-piccolo); }
.previsione__frase {
  font-family: var(--f-titoli);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.previsione__vuoto {
  display: inline-block;
  width: 3.2em; height: 0.08em; margin-left: 0.15em;
  background: var(--inchiostro);
  vertical-align: baseline;
}
.previsione__righe { margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.previsione__riga {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0 1rem;
  padding-block: 0.6rem;
  border-top: 1px solid var(--filetto);
}
.previsione__parola { font-family: var(--f-titoli); font-size: 1.3rem; line-height: 1.2; }
.previsione__barra {
  height: 1.1rem;
  width: calc(var(--quota) * 1%);
  background: var(--inchiostro);
  transform-origin: left;
}
.previsione__riga--giusta .previsione__barra {
  background: repeating-linear-gradient(135deg, var(--rosso) 0 2px, transparent 2px 6px);
  border: 1.5px solid var(--rosso);
}
.previsione__commento { grid-column: 2; margin-top: 0.25rem; font-size: var(--t-minimo); color: var(--inchiostro-2); }
.previsione__riga--giusta .previsione__commento { color: var(--rosso-scuro); font-weight: 600; }
.previsione__avviso { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--inchiostro); font-size: var(--t-minimo); color: var(--inchiostro-2); }


/* 9b. Pagine ------------------------------------------------------------- */

/* Apertura della home */
.apre { padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem) var(--s-6); }
.apre .griglia { row-gap: clamp(1.75rem, 1.2rem + 2vw, 3.25rem); }
.apre .apertura { margin: 0; text-wrap: wrap; }
.apre .azioni { margin-top: var(--s-4); }
.apre__lato { display: grid; gap: var(--s-4); align-content: start; }
.apre__lato .nota { max-width: 30em; }
.apre .previsione { margin: 0; }
.apre .previsione .occhiello { margin-bottom: var(--s-2); }

/* Testa delle pagine interne */
.capo { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.capo .griglia { row-gap: var(--s-3); }
.capo h1 { max-width: 14em; }
.capo .sommario { max-width: 30em; }
.briciole { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin: 0 0 var(--s-3); padding: 0; list-style: none; font-size: var(--t-minimo); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.briciole li + li::before { content: "/"; margin-right: 0.6rem; color: var(--inchiostro-3); font-weight: 400; }
.briciole a { text-decoration-color: transparent; }
.briciole a:hover { text-decoration-color: var(--rosso); }

.sezione__testa { margin-bottom: var(--s-4); }
.sezione__testa h2 { margin-top: 0.9rem; max-width: 16em; }
.sezione--stretta { padding-block: var(--s-5); }

/* Elenco numerato grande: numeri in corsivo rosso, filetti */
.elenco { margin: 0; padding: 0; list-style: none; counter-reset: voce; }
.elenco > li {
  counter-increment: voce;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 0.5rem;
  padding-block: var(--s-3);
  border-top: 1px solid var(--inchiostro);
}
.elenco > li:last-child { border-bottom: 1px solid var(--inchiostro); }
.elenco > li::before {
  content: counter(voce, decimal-leading-zero);
  font-family: var(--f-titoli);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.25;
  color: var(--rosso);
}
.elenco h3 + p { margin-top: 0.5rem; }
.elenco p { color: var(--inchiostro-2); max-width: 34em; }
.elenco .con-freccia { margin-top: 0.9rem; font-size: var(--t-piccolo); color: var(--inchiostro); }
.sezione--inchiostro .elenco > li { border-color: rgb(248 245 239 / 0.35); }
.sezione--inchiostro .elenco p { color: #CFC9BD; }
.sezione--inchiostro .elenco > li::before { color: #EE6A52; }
.sezione--inchiostro a { text-decoration-color: #EE6A52; }
.sezione--inchiostro a:hover { color: #EE6A52; }

/* Indice delle guide: come il sommario di una rivista */
.sommario-guide { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--inchiostro); }
.sommario-guide a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--filetto);
  text-decoration: none;
}
.sommario-guide strong { font-family: var(--f-titoli); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
.sommario-guide span { grid-column: 1; font-size: var(--t-piccolo); color: var(--inchiostro-2); }
.sommario-guide .icona { grid-row: 1; grid-column: 2; align-self: center; transition: transform 0.2s; }
.sommario-guide a:hover { color: inherit; }
.sommario-guide a:hover strong { color: var(--rosso); }
.sommario-guide a:hover .icona { transform: translateX(4px); color: var(--rosso); }

/* Due colonne affiancate con filetto in mezzo (genitori / insegnanti) */
.coppia { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) {
  .coppia { grid-template-columns: 1fr 1fr; gap: 0; }
  .coppia > * { padding-inline: var(--s-4); }
  .coppia > :first-child { padding-left: 0; }
  .coppia > :last-child { padding-right: 0; border-left: 1px solid var(--inchiostro); }
}
.coppia h3 { font-size: var(--t-h2); font-weight: 450; line-height: 1.1; letter-spacing: -0.016em; }
.coppia p { margin-top: 0.9rem; color: var(--inchiostro-2); max-width: 28em; }
.coppia ul { margin: 1.1rem 0 1.4rem; padding: 0; list-style: none; font-size: var(--t-piccolo); }
.coppia li { padding-block: 0.5rem; border-top: 1px solid var(--filetto); }

/* Fascia studenti: l'altra metà della matita, il blu */
.fascia-blu { background: var(--blu); color: var(--bianco); }
.fascia-blu a { text-decoration-color: rgb(255 253 249 / 0.6); }
.fascia-blu a:hover { color: var(--bianco); text-decoration-color: var(--bianco); }
.fascia-blu :focus-visible { outline-color: var(--bianco); }
.fascia-blu .occhiello__punto { background: var(--bianco); }
.fascia-blu h3 { font-size: var(--t-h2); font-weight: 450; line-height: 1.1; }
.fascia-blu p { color: #DCE6F0; }

/* Avviso onesto: bordo tratteggiato */
.avviso { padding: var(--s-3); border: 1.5px dashed var(--inchiostro); background: var(--bianco); }
.avviso > strong:first-child { display: block; margin-bottom: 0.4rem; font-size: var(--t-minimo); letter-spacing: 0.09em; text-transform: uppercase; }

/* Scheda: coppie voce / valore */
.voci { margin: 0; border-top: 2px solid var(--inchiostro); }
.voci > div { display: grid; gap: 0.2rem var(--canalino); padding-block: 0.9rem; border-bottom: 1px solid var(--filetto); }
@media (min-width: 40rem) { .voci > div { grid-template-columns: 12rem minmax(0, 1fr); } }
.voci dt { font-size: var(--t-minimo); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.2em; }
.voci dd { margin: 0; }

/* Schermate illustrate degli strumenti */
.schermate { display: grid; gap: var(--canalino); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.schermo { margin: 0; }
.schermo__cornice { border: 1.5px solid var(--inchiostro); background: var(--bianco); }
.schermo__barra { display: flex; gap: 0.35rem; padding: 0.55rem 0.7rem; border-bottom: 1.5px solid var(--inchiostro); }
.schermo__barra i { width: 0.55rem; height: 0.55rem; border: 1.5px solid var(--inchiostro); border-radius: 50%; }
.schermo__corpo { display: grid; gap: 0.7rem; align-content: start; min-height: 17rem; padding: 1rem; font-size: 0.875rem; line-height: 1.4; }
.schermo__campo { padding: 0.6rem 0.7rem; border: 1px solid var(--inchiostro-3); }
.schermo__etichetta { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-2); }
.schermo__pillole { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.schermo__pillole span { padding: 0.2rem 0.6rem; border: 1px solid var(--inchiostro); font-size: 0.75rem; font-weight: 600; }
.schermo__pillole .scelta { background: var(--inchiostro); color: var(--carta); }
.schermo__tasto { justify-self: start; padding: 0.45rem 0.9rem; background: var(--inchiostro); color: var(--carta); font-size: 0.8125rem; font-weight: 600; }
.schermo__fumetto { max-width: 85%; padding: 0.55rem 0.75rem; background: var(--carta-2); }
.schermo__fumetto--tu { justify-self: end; background: var(--inchiostro); color: var(--carta); }
.schermo__nota { padding-top: 0.6rem; border-top: 1px dashed var(--inchiostro-3); font-size: 0.75rem; color: var(--inchiostro-2); }
.schermo figcaption { margin-top: 0.7rem; font-size: var(--t-piccolo); line-height: 1.45; }
.schermo figcaption strong { display: block; }

/* Modulo: messaggi di esito */
.modulo__esito { margin-top: var(--s-3); padding: 0.9rem 1rem; border-left: 3px solid var(--verde); background: var(--bianco); font-size: var(--t-piccolo); }
.modulo__esito[data-tipo="errore"] { border-left-color: var(--rosso); }
.modulo__esito:empty { display: none; }
.modulo__trappola { position: absolute; left: -200vw; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--rosso); box-shadow: inset 0 0 0 1px var(--rosso); }

/* Modulo su fondo inchiostro */
.sezione--inchiostro .campo__aiuto { color: #CFC9BD; }
.sezione--inchiostro .campo input, .sezione--inchiostro .campo textarea, .sezione--inchiostro .spunta input { border-color: var(--carta); }
.sezione--inchiostro .spunta input:checked { background-color: var(--rosso); border-color: var(--rosso); }
.sezione--inchiostro .modulo__esito { color: var(--inchiostro); }

/* Pagine legali e testi lunghi */
.legale { max-width: 42rem; }
.legale h2 { font-size: var(--t-h3); font-weight: 500; margin-top: 2.4em; }
.legale h2 + * { margin-top: 0.7em; }
.legale h3 { font-family: var(--f-testo); font-size: 1em; font-weight: 700; margin-top: 1.6em; }
.aggiornato { margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--inchiostro); font-size: var(--t-minimo); color: var(--inchiostro-2); }

/* Guide: indice laterale fisso, colonna di testo, elementi larghi */
.guida__meta { margin-top: var(--s-3); color: var(--inchiostro-2); }
.guida__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--canalino); padding-bottom: var(--s-6); }
.guida__testo, .guida__indice { min-width: 0; }
.guida__indice { padding-block: var(--s-2); border-block: 1px solid var(--inchiostro); }
.guida__indice ol { margin: 0; padding: 0; list-style: none; counter-reset: capitolo; font-size: var(--t-piccolo); line-height: 1.35; }
.guida__indice li { counter-increment: capitolo; }
.guida__indice a { display: grid; grid-template-columns: 1.6rem 1fr; padding-block: 0.4rem; text-decoration: none; color: var(--inchiostro-2); }
.guida__indice a::before { content: counter(capitolo); font-family: var(--f-titoli); font-style: italic; color: var(--rosso); }
.guida__indice a:hover, .guida__indice a[aria-current] { color: var(--inchiostro); }
.guida__indice a[aria-current] { font-weight: 600; }
@media (min-width: 62rem) {
  .guida__corpo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .guida__indice { grid-column: 1 / span 3; position: sticky; top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; border-bottom: 0; }
  .guida__testo { grid-column: 5 / -1; }
}
.guida__testo > * { max-width: 41rem; }
.guida__testo > .largo, .guida__testo > section > .largo { max-width: none; }
.guida__testo > section { max-width: none; }
.guida__testo > section > * { max-width: 41rem; }
.guida__testo > section + section { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--inchiostro); }
.guida__testo section > * + * { margin-top: 1em; }
.guida__testo section > h3 { margin-top: 1.9em; }
.guida__testo section > .riquadro, .guida__testo section > .confronto, .guida__testo section > figure, .guida__testo section > .tabella-scorri { margin-block: var(--s-4); }
.guida__testo h2 { scroll-margin-top: 1.5rem; }
.guida__testo ul, .guida__testo ol { padding-left: 1.2em; }
.guida__testo .riquadro ul, .guida__testo ul.piatto { padding-left: 0; }
.guida__testo ul.piatto li { padding-block: 0.55rem; border-top: 1px solid var(--filetto); margin: 0; }
.guida__testo .domande ol { margin-block: 0.5rem 1rem; }
.guida__testo .domande p + p { margin-top: 0.7rem; }
.guida__testo .avviso p { margin-top: 0.4rem; }
.guida__testo li + li { margin-top: 0.4em; }
.guida__testo li::marker { color: var(--rosso); }

.rimando { font-size: 0.7em; line-height: 0; }
.rimando a { padding: 0 0.15em; font-weight: 600; color: var(--rosso-scuro); text-decoration: none; }
.rimando a:hover { text-decoration: underline; }
.fonti { padding-left: 1.4em; font-size: var(--t-piccolo); line-height: 1.5; }
.fonti li { padding-left: 0.3em; }
.fonti li + li { margin-top: 0.7em; }
.fonti li:target { background: rgb(197 48 26 / 0.1); outline: 6px solid rgb(197 48 26 / 0.1); }
.fonti__data { color: var(--inchiostro-2); }
.fonti--tutte { padding-left: 0; list-style: none; }

/* Richieste pronte da copiare */
.pronta { border: 1.5px solid var(--inchiostro); background: var(--bianco); }
.pronta + .pronta { margin-top: var(--s-3); }
.pronta__testa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--inchiostro); font-size: var(--t-minimo); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pronta__copia { padding: 0.3rem 0.8rem; border: 1.5px solid var(--inchiostro); background: var(--inchiostro); color: var(--carta); font: 600 0.8125rem var(--f-testo); cursor: pointer; }
.pronta__copia:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); }
.pronta__testo { margin: 0; padding: 0.9rem; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; }
.pronta__controlla { margin: 0 !important; padding: 0.7rem 0.9rem; border-top: 1px dashed var(--inchiostro-3); font-size: var(--t-piccolo); color: var(--inchiostro-2); }

/* Schede attività per la classe */
.attivita { border-top: 2px solid var(--inchiostro); }
.attivita details { border-bottom: 1px solid var(--inchiostro); }
.attivita summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1.5rem; align-items: center; padding-block: 1rem; cursor: pointer; list-style: none; }
.attivita summary::-webkit-details-marker { display: none; }
.attivita summary strong { font-family: var(--f-titoli); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; }
.attivita summary span { grid-column: 1; font-size: var(--t-minimo); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--inchiostro-2); }
.attivita summary .icona { grid-row: 1 / span 2; grid-column: 2; transition: transform 0.2s; }
.attivita details[open] summary .icona { transform: rotate(45deg); }
.attivita dl { margin: 0; padding-bottom: 1.5rem; }
.attivita dt { margin-top: 1rem; font-size: var(--t-minimo); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.attivita dd { margin: 0.3rem 0 0; }
.attivita dd ol { margin: 0; }

/* Mappa delle competenze: righe = dimensioni, colonne = livelli */
.mappa { display: grid; gap: var(--s-4); }
@media (min-width: 60rem) { .mappa { grid-template-columns: 1fr 1fr; } }
.mappa__quadro { border-top: 2px solid var(--inchiostro); padding-top: var(--s-2); }
.mappa__quadro h3 { font-size: var(--t-h3); }
.mappa__livelli { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--s-2) 0 0; padding: 0 !important; list-style: none; font-size: var(--t-minimo); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.mappa__livelli li { margin: 0 !important; padding: 0.45rem 0.6rem; border: 1px solid var(--inchiostro); border-left-width: 0; }
.mappa__livelli li:first-child { border-left-width: 1px; }
.mappa__livelli li:nth-child(2) { background: var(--carta-2); }
.mappa__livelli li:nth-child(3) { background: var(--inchiostro); color: var(--carta); }
.mappa__dimensioni { margin: 0; padding: 0 !important; list-style: none; counter-reset: dim; }
.mappa__dimensioni li { counter-increment: dim; margin: 0 !important; display: grid; grid-template-columns: 1.8rem 1fr; padding-block: 0.6rem; border-bottom: 1px solid var(--filetto); font-size: var(--t-piccolo); }
.mappa__dimensioni li::before { content: counter(dim); font-family: var(--f-titoli); font-style: italic; color: var(--rosso); }
.mappa__dimensioni span { display: block; font-size: var(--t-minimo); color: var(--inchiostro-2); }

/* Linea del tempo orizzontale */
.tempo { position: relative; border-top: 2px solid var(--inchiostro); }
.tempo__striscia { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 17rem); gap: 0; margin: 0; padding: 0 !important; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tempo__striscia li { margin: 0 !important; padding: var(--s-3) var(--s-3) var(--s-3) 0; scroll-snap-align: start; border-right: 1px solid var(--filetto); }
.tempo__striscia li + li { padding-left: var(--s-3); }
.tempo__anno { display: block; font-family: var(--f-titoli); font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; }
.tempo__anno::after { content: ""; display: block; width: 0.6rem; height: 0.6rem; margin-top: 0.8rem; border-radius: 50%; background: var(--rosso); }
.tempo__striscia strong { display: block; margin-top: 0.8rem; font-family: var(--f-titoli); font-size: 1.2rem; font-weight: 500; line-height: 1.2; }
.tempo__striscia p { margin-top: 0.4rem; font-size: var(--t-piccolo); line-height: 1.45; color: var(--inchiostro-2); }
.tempo__tasti { display: none; gap: 0.5rem; justify-content: flex-end; padding-top: 0.75rem; border-top: 1px solid var(--inchiostro); }
.js .tempo__tasti { display: flex; }
.tempo__tasti button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--inchiostro); background: none; color: inherit; cursor: pointer; }
.tempo__tasti button:hover { background: var(--inchiostro); color: var(--carta); }
.tempo__tasti button:first-child .icona { transform: scaleX(-1); }

/* Cerchi concentrici */
.cerchi { display: grid; gap: var(--s-3) var(--s-4); align-items: center; }
@media (min-width: 48rem) { .cerchi { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.cerchi svg { width: 100%; max-width: 22rem; }
.cerchi dl { margin: 0; }
.cerchi dt { margin-top: 1rem; font-family: var(--f-titoli); font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.cerchi dt:first-child { margin-top: 0; }
.cerchi dd { margin: 0.25rem 0 0; font-size: var(--t-piccolo); color: var(--inchiostro-2); }

/* Pittogrammi (esempi di sbilanciamento) */
.figurine { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-2) 0; }
.figurine svg { width: 2.4rem; height: auto; }

/* Scheda "cosa fare se" */
.se { display: grid; gap: 0; border-top: 2px solid var(--inchiostro); }
.se details { border-bottom: 1px solid var(--inchiostro); }
.se summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.1rem; font-family: var(--f-titoli); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; cursor: pointer; list-style: none; }
.se summary::-webkit-details-marker { display: none; }
.se summary .icona { transition: transform 0.2s; }
.se details[open] summary .icona { transform: rotate(45deg); }
.se details > div { padding-bottom: 1.4rem; }
.se ol { margin: 0; }

/* Schede per fascia d'età */
.eta { display: grid; gap: 0; border-top: 2px solid var(--inchiostro); }
@media (min-width: 60rem) { .eta { grid-template-columns: repeat(3, 1fr); } }
.eta__scheda { padding: var(--s-3) 0; border-bottom: 1px solid var(--inchiostro); }
@media (min-width: 60rem) {
  .eta__scheda { padding: var(--s-3); border-bottom: 0; }
  .eta__scheda:first-child { padding-left: 0; }
  .eta__scheda + .eta__scheda { border-left: 1px solid var(--inchiostro); }
}
.eta__scheda h3 { font-size: var(--t-h2); font-weight: 450; letter-spacing: -0.016em; }
.eta__scheda dl { margin: var(--s-2) 0 0; font-size: var(--t-piccolo); line-height: 1.5; }
.eta__scheda dt { margin-top: 1rem; font-size: var(--t-minimo); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.eta__scheda dd { margin: 0.3rem 0 0; }

/* Semaforo: ogni luce ha colore, simbolo e parola */
.semaforo { display: grid; gap: 0; border-top: 2px solid var(--inchiostro); }
@media (min-width: 54rem) { .semaforo { grid-template-columns: repeat(3, 1fr); } }
.semaforo__luce { padding: var(--s-3); border-left: 6px solid var(--tinta); background: var(--bianco); }
.semaforo__luce + .semaforo__luce { border-top: 1px solid var(--filetto); }
@media (min-width: 54rem) { .semaforo__luce { border-left: 0; border-top: 6px solid var(--tinta); } .semaforo__luce + .semaforo__luce { border-top: 6px solid var(--tinta); border-left: 1px solid var(--filetto); } }
.semaforo__luce--verde { --tinta: var(--verde); }
.semaforo__luce--giallo { --tinta: var(--ocra); }
.semaforo__luce--rosso { --tinta: var(--rosso); }
.semaforo__titolo { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.semaforo__titolo span { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--tinta); color: var(--bianco); font-size: 0.95rem; line-height: 1; }
.semaforo ul { margin: 0.9rem 0 0; padding: 0 !important; list-style: none; font-size: var(--t-piccolo); line-height: 1.45; }
.semaforo li { margin: 0 !important; padding-block: 0.5rem; border-top: 1px solid var(--filetto); }

/* Grafici a barre */
.grafico { margin: 0; padding-top: var(--s-2); border-top: 2px solid var(--inchiostro); max-width: 46rem; }
.grafico__titolo { font-size: var(--t-h3); }
.grafico__sotto { margin-top: 0.4rem; font-size: var(--t-piccolo); color: var(--inchiostro-2); max-width: 38rem; }
.grafico__legenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: var(--s-2) 0 0; padding: 0 !important; list-style: none; font-size: var(--t-piccolo); }
.grafico__legenda li { display: flex; align-items: center; gap: 0.5rem; margin: 0 !important; }
.grafico__legenda i { width: 1.6rem; height: 0.8rem; }
.grafico__righe { margin-top: var(--s-2); }
.grafico__riga { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0 1rem; padding-block: 0.55rem; border-top: 1px solid var(--filetto); }
.grafico__etichetta { font-size: var(--t-piccolo); line-height: 1.25; }
.grafico__barre { display: grid; gap: 3px; padding-right: 3.6rem; }
.grafico__barra { position: relative; display: block; height: 0.95rem; width: calc(var(--v) / var(--scala) * 100%); min-width: 2px; }
.grafico__barra b { position: absolute; left: 100%; top: 50%; translate: 0.45rem -50%; font-size: var(--t-minimo); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico__barra--pieno { background: var(--inchiostro); }
.grafico__barra--tratto { background: repeating-linear-gradient(135deg, var(--inchiostro-3) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1.5px var(--inchiostro-3); }
.grafico__barra--tratto b { font-weight: 400; color: var(--inchiostro-2); }
.grafico__tabella { margin-top: var(--s-2); font-size: var(--t-piccolo); }
.grafico__tabella summary { cursor: pointer; font-weight: 600; }
.grafico__tabella table { margin-top: 0.75rem; max-width: 28rem; }
.grafico__tabella td, .grafico__tabella th { padding-block: 0.45rem; }
.grafico__tabella tbody th { font-family: var(--f-testo); font-size: inherit; font-weight: 400; }
.grafico__fonte { margin-top: var(--s-2); font-size: var(--t-minimo); color: var(--inchiostro-2); }
@media (max-width: 30rem) { .grafico__riga { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 0.6rem; } }

/* Diagramma interattivo: la frase che si completa */
.viva { margin: 0; padding: var(--s-3); border: 1.5px solid var(--inchiostro); background: var(--bianco); max-width: 46rem; }
.viva .occhiello { margin-bottom: var(--s-2); }
.viva__frase { min-height: 2.4em; }
.viva__aggiunta { box-shadow: inset 0 -0.42em 0 rgb(197 48 26 / 0.18); }
.viva__domanda { margin-top: var(--s-2); font-size: var(--t-piccolo); color: var(--inchiostro-2); }
.viva__candidati { margin: var(--s-2) 0 0; padding: 0 !important; list-style: none; }
.viva__candidati li { margin: 0 !important; border-top: 1px solid var(--filetto); }
.viva__candidato {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3rem; align-items: center; gap: 0 1rem;
  width: 100%; padding: 0.65rem 0.5rem; border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
button.viva__candidato { cursor: pointer; }
button.viva__candidato:hover { background: var(--carta-2); }
.viva__parola { font-family: var(--f-titoli); font-size: 1.25rem; line-height: 1.2; }
.viva__barra { height: 1rem; width: calc(var(--quota) * 1%); min-width: 3px; background: var(--inchiostro); }
button.viva__candidato:hover .viva__barra { background: var(--rosso); }
.viva__quota { font-size: var(--t-piccolo); font-variant-numeric: tabular-nums; text-align: right; }
.viva__resto { padding: 0.6rem 0.5rem; font-size: var(--t-minimo); color: var(--inchiostro-2); }
.viva__azioni { margin-top: var(--s-3); }
.viva:not(.viva--attiva) .viva__azioni { display: none; }
@media (max-width: 30rem) { .viva__candidato { grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem; gap: 0 0.6rem; } .viva__parola { font-size: 1.05rem; } }

/* Quiz */
.quiz { max-width: 44rem; border-top: 2px solid var(--inchiostro); padding-top: var(--s-3); }
.quiz__avanzamento { height: 4px; margin-bottom: var(--s-3); background: linear-gradient(var(--rosso), var(--rosso)) 0 0 / calc(var(--fatto, 0) * 100%) 100% no-repeat var(--carta-3); }
.quiz:not(.quiz--vivo) .quiz__avanzamento { display: none; }
.quiz__domanda { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz:not(.quiz--vivo) .quiz__domanda + .quiz__domanda { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--filetto); }
.quiz__domanda legend { padding: 0; margin-bottom: var(--s-3); font-family: var(--f-titoli); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; }
.quiz__domanda legend:focus { outline: none; }
.quiz__n { display: block; margin-bottom: 0.5rem; font: 600 var(--t-minimo) var(--f-testo); letter-spacing: 0.09em; text-transform: uppercase; color: var(--inchiostro-2); }
.quiz__opzione { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.85rem 1rem; border: 1.5px solid var(--inchiostro); background: var(--bianco); cursor: pointer; }
.quiz__opzione + .quiz__opzione { margin-top: 0.6rem; }
.quiz__opzione input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; accent-color: var(--inchiostro); }
.quiz__opzione:has(input:focus-visible) { outline: 3px solid var(--rosso); outline-offset: 3px; }
.quiz__opzione--giusta { border-color: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde); }
.quiz__opzione--giusta span::after { content: " \2713  giusta"; font-weight: 700; color: var(--verde); white-space: nowrap; }
.quiz__opzione--sbagliata { border-style: dashed; color: var(--inchiostro-2); }
.quiz__opzione--sbagliata span::after { content: " \2717  la tua scelta"; font-weight: 700; color: var(--rosso-scuro); white-space: nowrap; }
.quiz__esito { margin-top: var(--s-3); font-family: var(--f-titoli); font-size: var(--t-h3); font-style: italic; }
.quiz__esito:empty { display: none; }
.quiz__esito[data-tipo="ok"] { color: var(--verde); }
.quiz__esito[data-tipo="no"] { color: var(--rosso-scuro); }
.quiz__spiega { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--carta-2); }
.quiz__spiega summary { cursor: pointer; font-weight: 600; }
.quiz--vivo .quiz__spiega summary { display: none; }
.quiz__spiega p { margin-top: 0.5rem; }
.quiz__domanda > .bottone { margin-top: var(--s-3); }
.quiz__fine:focus { outline: none; }
.quiz__punti { margin-top: var(--s-2); font-family: var(--f-titoli); font-size: var(--t-apertura); line-height: 1; letter-spacing: -0.03em; }
.quiz__giudizio { margin-block: var(--s-2) var(--s-3); }

/* Glossario */
.glossario__cerca { position: sticky; top: 0; z-index: 2; padding-block: var(--s-2); background: var(--carta); border-bottom: 1px solid var(--inchiostro); }
.glossario__cerca .campo { max-width: 26rem; }
.glossario__lettere { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.glossario__lettere button { min-width: 2.25rem; height: 2.25rem; border: 1px solid var(--inchiostro-3); background: transparent; font: 600 0.9375rem var(--f-testo); color: inherit; cursor: pointer; }
.glossario__lettere button[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
.glossario__conta { margin-top: 0.6rem; font-size: var(--t-minimo); color: var(--inchiostro-2); }
.glossario { margin: 0; }
.glossario__voce { display: grid; gap: 0.4rem var(--canalino); padding-block: var(--s-3); border-bottom: 1px solid var(--filetto); scroll-margin-top: 11rem; }
@media (min-width: 48rem) { .glossario__voce { grid-template-columns: 4fr 8fr; } }
.glossario__voce:target dt { color: var(--rosso); }
.glossario dt { font-family: var(--f-titoli); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
.glossario__sigla { display: block; margin-top: 0.2rem; font: 400 var(--t-minimo) var(--f-testo); font-style: italic; color: var(--inchiostro-2); }
.glossario dd { margin: 0; max-width: 40rem; }
.glossario__esempio { margin-top: 0.5rem; color: var(--inchiostro-2); }
.glossario__vedi { margin-top: 0.5rem; font-size: var(--t-piccolo); }

/* Pagina non trovata */
.smarrita { padding-block: var(--s-6); }
.smarrita__numero { font-family: var(--f-titoli); font-size: clamp(6rem, 3rem + 14vw, 14rem); line-height: 0.85; letter-spacing: -0.04em; }

/* Sezione studenti delle superiori: l’altra metà della matita.
   Il blu prende il posto del rosso e le animazioni di comparsa si spengono. */
.tinta-blu { --rosso: #1F4E79; --rosso-scuro: #163A5A; }
.tinta-blu .entra { opacity: 1 !important; transform: none !important; }

/* 10. Movimento ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .entra { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
  .js .entra.visto { opacity: 1; transform: none; }

  .js .segno svg, .js .freccia-matita {
    clip-path: inset(-60% 102% -60% -4%);
    transition: clip-path 0.65s cubic-bezier(0.6, 0, 0.3, 1) 0.25s;
  }
  .js .visto .segno svg, .js .segno.visto svg, .js .visto .freccia-matita, .js .freccia-matita.visto {
    clip-path: inset(-60% -4% -60% -4%);
  }

  .js .previsione .previsione__barra { transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .previsione.visto .previsione__barra { transform: none; }
  .js .previsione.visto .previsione__riga:nth-child(2) .previsione__barra { transition-delay: 0.15s; }
  .js .previsione.visto .previsione__riga:nth-child(3) .previsione__barra { transition-delay: 0.3s; }
}

/* Fogli da compilare e stampare */
.foglio { max-width: 48rem; padding: clamp(1.25rem, 1rem + 2vw, 3rem); border: 1px solid var(--inchiostro); background: var(--bianco); }
.foglio__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--inchiostro); }
.foglio__testa .marchio__nome { font-size: 1.2rem; }
.foglio h1 { font-size: var(--t-h2); margin-top: var(--s-3); }
.foglio h2 { font-family: var(--f-testo); font-size: var(--t-minimo); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-top: var(--s-3); }
.foglio ol, .foglio ul { margin: 0.6rem 0 0; padding-left: 1.3em; }
.foglio li + li { margin-top: 0.45rem; }
.foglio li::marker { color: var(--rosso); }
.foglio__riga { display: block; width: 100%; margin-top: 0.4rem; padding: 0.35rem 0; border: 0; border-bottom: 1px solid var(--inchiostro-3); background: transparent; font: inherit; color: inherit; }
.foglio__riga:focus-visible { outline-offset: 2px; }
textarea.foglio__riga { min-height: 4.5rem; resize: vertical; line-height: 1.5; }
.foglio__scelta { display: flex; align-items: flex-start; gap: 0.6rem; }
.foglio__scelta input { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0; accent-color: var(--inchiostro); }
.foglio__firme { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.foglio__firme span { display: block; padding-top: 2.5rem; border-bottom: 1px solid var(--inchiostro); }
.foglio__firme small { display: block; margin-top: 0.3rem; font-size: var(--t-minimo); color: var(--inchiostro-2); }
.foglio__piede { margin-top: var(--s-4); padding-top: 0.7rem; border-top: 1px solid var(--filetto); font-size: var(--t-minimo); color: var(--inchiostro-2); }
.foglio .tabella { font-size: 0.875rem; }

/* 11. Stampa ------------------------------------------------------------- */

@media print {
  @page { size: A4; margin: 14mm; }
  .testata, .piede, .salta, .bottone, .solo-schermo, .capo, .guida__indice { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  a { text-decoration: none; }
  .foglio { max-width: none; padding: 0; border: 0; }
  .foglio__riga { border-bottom-color: #888; }
  .sezione--stretta { padding: 0 !important; }
}