/* ---------- Apertura ---------- */
  .apertura {
    padding-block: clamp(48px, 8vw, 112px) clamp(64px, 8vw, 120px);
  }
  .apertura__griglia {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  .apertura h1 {
    margin-top: var(--s-5);
  }
  .apertura .attacco {
    margin-top: var(--s-5);
  }
  .apertura__azioni {
    margin-top: var(--s-6);
  }
  @media (max-width: 960px) {
    .apertura__griglia {
      grid-template-columns: 1fr;
    }
  }

  /* Campione: una risposta con le tre garanzie */
  .campione {
    position: relative;
    padding: 0;
    overflow: hidden;
  }
  .campione__testa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--filetto);
    background: var(--carta-2);
  }
  .campione__testa .etichetta {
    white-space: nowrap;
  }
  /* Lo stato cambia testo durante il controllo: il riquadro resta fermo, cambia solo la scritta */
  #campione-stato {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }
  .campione__corpo {
    padding: var(--s-5);
  }
  .campione__domanda {
    font-family: var(--f-titolo);
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .campione__risposta {
    margin-top: var(--s-4);
    color: var(--inchiostro-2);
    font-size: var(--t-piccolo);
    line-height: 1.65;
  }
  .campione__gruppi {
    margin-top: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Le sigle ci sono dalla prima pittura: si animano solo le spunte del sigillo */
  .campione__gruppi .sigla {
    transition: background var(--d-2), border-color var(--d-2), color var(--d-2);
  }
  /* Una citazione per gruppo, a rotazione. Stanno tutte nella stessa cella:
     il riquadro prende l'altezza della più lunga e non salta. */
  .campione__voci {
    display: grid;
    margin-top: var(--s-5);
  }
  .campione__voci .cit {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--d-3) var(--e-uscita), transform var(--d-3) var(--e-uscita), visibility 0s linear var(--d-3);
  }
  .campione__voci .cit[data-on] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--d-3) var(--e-uscita), transform var(--d-3) var(--e-uscita), visibility 0s;
  }
  .campione__gruppi button.sigla {
    cursor: pointer;
    font: inherit;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
  }
  .campione__gruppi button.sigla:hover {
    border-color: var(--inchiostro-3);
  }
  .campione__gruppi button.sigla[aria-pressed="true"] {
    border-color: color-mix(in oklab, var(--accento) 50%, transparent);
    color: var(--accento);
    background: var(--accento-tenue);
  }
  .campione__piede {
    padding: var(--s-4) var(--s-5) var(--s-5);
    border-top: 1px dashed var(--filetto-forte);
  }
  .campione .sigillo__voce svg {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity var(--d-2), transform var(--d-3) var(--e-uscita);
  }
  .campione .sigillo__voce[data-ok] svg {
    opacity: 1;
    transform: none;
  }

  /* ---------- Il problema ---------- */
  .problema {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6) clamp(32px, 6vw, 96px);
    margin-top: var(--s-6);
  }
  .problema__testo {
    display: grid;
    gap: var(--s-4);
    font-size: 1.1875rem;
    color: var(--inchiostro-2);
    max-width: 56ch;
  }
  .problema__testo strong {
    color: var(--inchiostro);
    font-weight: 500;
  }
  @media (max-width: 860px) {
    .problema {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Garanzie ---------- */
  .garanzia {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6) clamp(32px, 6vw, 96px);
    padding-block: var(--s-8);
    border-top: 1px solid var(--filetto);
  }
  .garanzia:first-of-type {
    border-top: 0;
  }
  .garanzia__n {
    font-family: var(--f-mono);
    font-size: var(--t-nota);
    color: var(--accento);
  }
  .garanzia h3 {
    margin-top: var(--s-3);
  }
  .garanzia__testo {
    margin-top: var(--s-4);
    color: var(--inchiostro-2);
    max-width: 44ch;
  }
  .garanzia__come {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--filetto);
    font-size: var(--t-piccolo);
    color: var(--inchiostro-2);
    max-width: 44ch;
  }
  .garanzia__come .etichetta {
    display: block;
    margin-bottom: var(--s-2);
  }
  @media (max-width: 860px) {
    .garanzia {
      grid-template-columns: 1fr;
      padding-block: var(--s-7);
    }
  }

  /* 01: tutti i gruppi, sull'Aula vera */
  .aula-demo {
    display: grid;
    gap: var(--s-4);
  }
  .aula-demo > svg {
    width: 100%;
    height: auto;
  }
  .aula-demo .emiciclo circle {
    fill: var(--filetto-forte);
  }
  .aula-demo .emiciclo circle[data-g=""] {
    fill: none;
    stroke: var(--filetto-forte);
    stroke-width: 3;
  }
  .aula-demo .emiciclo[data-scelto] circle {
    fill: var(--carta-3);
  }
  .aula-demo .emiciclo[data-scelto] circle[data-on] {
    fill: var(--accento);
  }
  .gruppi-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0;
    border-top: 1px solid var(--filetto);
  }
  .gruppi-lista button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 10px 12px 10px 0;
    border: 0;
    border-bottom: 1px solid var(--filetto);
    background: none;
    text-align: left;
    font-size: var(--t-nota);
    cursor: pointer;
    color: var(--inchiostro-2);
    transition: color var(--d-1);
  }
  .gruppi-lista button:hover,
  .gruppi-lista button[aria-pressed="true"] {
    color: var(--inchiostro);
  }
  .gruppi-lista button svg {
    width: 14px;
    height: 14px;
    color: var(--verificato);
    flex-shrink: 0;
  }
  .gruppi-lista .n {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    color: var(--inchiostro-3);
    margin-left: auto;
  }
  .gruppo-voce {
    min-height: 168px;
  }
  .gruppo-voce .cit__testo {
    font-size: 1.1875rem;
    line-height: 1.45;
  }

  /* 02: i pesi */
  .pesi {
    display: grid;
    gap: 0;
  }
  .peso {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3rem;
    gap: var(--s-4);
    align-items: center;
    padding-block: 14px;
    border-bottom: 1px solid var(--filetto);
  }
  .peso:first-child {
    border-top: 1px solid var(--filetto);
  }
  .peso__nome {
    font-weight: 500;
    font-size: var(--t-piccolo);
  }
  .peso__nome small {
    display: block;
    font-weight: 400;
    color: var(--inchiostro-3);
    font-size: var(--t-nota);
    line-height: 1.35;
    margin-top: 2px;
  }
  .peso__barra {
    height: 10px;
    background: var(--carta-2);
    border-radius: 2px;
    overflow: hidden;
  }
  .peso__barra i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accento);
    transition: width 1.1s var(--e-uscita);
    transition-delay: var(--ritardo, 0ms);
  }
  [data-visto="true"] .peso__barra i {
    width: var(--w);
  }
  .peso__v {
    font-family: var(--f-mono);
    font-size: var(--t-nota);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 560px) {
    .peso {
      grid-template-columns: 1fr 3rem;
    }
    .peso__barra {
      grid-column: 1 / -1;
      order: 3;
    }
  }

  /* 03: confronto parola per parola */
  .confronto {
    display: grid;
    gap: var(--s-4);
  }
  .confronto__parole {
    font-family: var(--f-titolo);
    font-size: var(--t-3);
    line-height: 1.45;
    letter-spacing: -0.01em;
  }
  .confronto__parole span {
    transition: background var(--d-2), color var(--d-2), box-shadow var(--d-2);
    border-radius: 2px;
  }
  .confronto__parole span[data-s="ok"] {
    box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--verificato) 55%, transparent);
  }
  .confronto__parole span[data-s="no"] {
    background: color-mix(in oklab, var(--errore) 16%, transparent);
    color: var(--errore);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .confronto__parole span[data-s="nuovo"] {
    background: color-mix(in oklab, var(--errore) 16%, transparent);
    color: var(--errore);
  }
  .esito {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--r-2);
    font-size: var(--t-piccolo);
    border: 1px solid var(--filetto);
    background: var(--carta-2);
  }
  .esito svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .esito[data-esito="ok"] {
    color: var(--verificato);
    border-color: color-mix(in oklab, var(--verificato) 35%, transparent);
    background: color-mix(in oklab, var(--verificato) 8%, transparent);
  }
  .esito[data-esito="no"] {
    color: var(--errore);
    border-color: color-mix(in oklab, var(--errore) 35%, transparent);
    background: color-mix(in oklab, var(--errore) 8%, transparent);
  }
  .esito span {
    color: var(--inchiostro-2);
  }

  /* ---------- Sistemi ---------- */
  .sistemi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-7);
  }
  .sistema {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5) var(--s-5);
    text-decoration: none;
    transition: border-color var(--d-2), transform var(--d-2) var(--e-uscita);
    --accento: var(--verde);
    --accento-tenue: var(--verde-tenue);
  }
  .sistema:hover {
    border-color: var(--inchiostro-3);
    transform: translateY(-2px);
  }
  .sistema__marchio svg {
    height: 44px;
    width: auto;
    color: var(--inchiostro);
    overflow: visible;
  }
  .sistema__nome {
    font-family: var(--f-testo);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.035em;
  }
  .sistema__cosa {
    color: var(--inchiostro-2);
    font-size: var(--t-piccolo);
    flex: 1;
  }
  .sistema__per {
    font-size: var(--t-nota);
    color: var(--inchiostro-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--filetto);
  }
  .sistema__vai {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-piccolo);
    font-weight: 500;
    color: var(--verde);
  }
  .sistema:hover .freccia {
    transform: translateX(3px);
  }
  @media (max-width: 960px) {
    .sistemi {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Numeri ---------- */
  /* --su: il colore del testo sul fondo della sezione, in entrambi i temi */
  .numeri {
    --su: var(--carta);
    background: var(--inchiostro);
    color: var(--su);
  }
  .numeri .etichetta,
  .numeri .cifra__l,
  .numeri .nota {
    color: color-mix(in oklab, var(--su) 62%, transparent);
  }
  .numeri .testata,
  .numeri .camere__nome {
    border-color: var(--su);
  }
  /* Camera e Senato affiancati, mai sommati; sotto i numeri comuni */
  .camere {
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-7) var(--s-6);
  }
  .camere__nome {
    font-family: var(--f-titolo);
    font-weight: 400;
    font-size: var(--t-3);
    letter-spacing: -0.02em;
    line-height: 1.1;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--su);
  }
  .camere__cifre {
    margin-top: var(--s-5);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-5);
  }
  /* Chi c'è dietro il numero dei parlamentari */
  .camere__chi {
    margin-top: var(--s-6);
    max-width: none;
    text-wrap: pretty;
    font-size: var(--t-piccolo);
    line-height: 1.55;
    color: color-mix(in oklab, var(--su) 72%, transparent);
  }
  .camere__chi b {
    font-weight: 600;
    color: var(--su);
  }
  .numeri__comuni {
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-7) var(--s-5);
  }
  .numeri .cifra__n {
    font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  }
  .numeri .cifra {
    padding-top: var(--s-4);
    border-top: 1px solid color-mix(in oklab, var(--su) 20%, transparent);
  }
  .numeri .btn--linea {
    --btn-fg: var(--su);
    border-color: color-mix(in oklab, var(--su) 30%, transparent);
  }
  .numeri .btn--linea:hover {
    --btn-bg: color-mix(in oklab, var(--su) 10%, transparent);
  }
  :root[data-theme="dark"] .numeri {
    --su: var(--inchiostro);
    background: var(--carta-2);
    color: var(--su);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .numeri {
      --su: var(--inchiostro);
      background: var(--carta-2);
      color: var(--su);
    }
  }
  @media (max-width: 860px) {
    .camere {
      grid-template-columns: minmax(0, 1fr);
    }
    .numeri__comuni {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ---------- Ricerca ---------- */
  .articoli {
    margin-top: var(--s-6);
    display: grid;
    gap: 0;
  }
  .articolo {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr) auto;
    gap: var(--s-5);
    align-items: baseline;
    padding-block: var(--s-5);
    border-bottom: 1px solid var(--filetto);
    text-decoration: none;
  }
  .articolo:first-child {
    border-top: 1px solid var(--filetto);
  }
  .articolo__t {
    font-family: var(--f-titolo);
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: color var(--d-1);
  }
  .articolo:hover .articolo__t {
    color: var(--accento);
  }
  .articolo__a {
    margin-top: 6px;
    font-size: var(--t-nota);
    color: var(--inchiostro-3);
  }
  @media (max-width: 760px) {
    .articolo {
      grid-template-columns: 1fr;
      gap: var(--s-2);
    }
  }

  /* ---------- Copertura e domande ---------- */
  .copre {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-6);
  }
  .copre h3 {
    font-size: var(--t-piccolo);
    font-weight: 600;
    margin-bottom: var(--s-3);
  }
  .copre ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--s-2);
    font-size: var(--t-piccolo);
    color: var(--inchiostro-2);
  }
  .copre li {
    display: flex;
    gap: 10px;
  }
  .copre li svg {
    width: 15px;
    height: 15px;
    margin-top: 4px;
    flex-shrink: 0;
    color: var(--verificato);
  }
  .copre .presto li svg {
    color: var(--inchiostro-4);
  }
  @media (max-width: 860px) {
    .copre {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Newsletter ---------- */
  .iscriviti {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6) clamp(32px, 6vw, 96px);
    align-items: start;
  }
  .iscriviti form {
    display: grid;
    gap: var(--s-4);
  }
  @media (max-width: 860px) {
    .iscriviti {
      grid-template-columns: 1fr;
    }
  }