/* =========================================================================
   Catalogo CAA — foglio di stile
   Mobile first. Temi chiaro / scuro / alto contrasto. Nessuna risorsa esterna.
   ========================================================================= */

/* ---------- 1. Variabili e temi ---------- */

:root {
  --primario:        #0f6d78;
  --primario-forte:  #0a545e;
  --primario-tenue:  #e0f0f1;
  --primario-testo:  #ffffff;
  --accento:         #c14a24;
  --accento-tenue:   #fbeae3;

  --sfondo:          #f6f5f2;
  --superficie:      #ffffff;
  --superficie-2:    #f0efea;
  --inchiostro:      #16212b;
  --inchiostro-2:    #4d5c68;
  --inchiostro-3:    #6b7a86;
  --bordo:           #dedad2;
  --bordo-forte:     #c4bfb4;

  --ok:              #146c43;
  --ok-tenue:        #e3f3ea;
  --attesa:          #8a5a00;
  --attesa-tenue:    #fbf0dc;
  --no:              #9a2c2c;
  --no-tenue:        #fbe8e8;

  --ombra-1: 0 1px 2px rgba(20, 30, 40, .06), 0 2px 8px rgba(20, 30, 40, .05);
  --ombra-2: 0 6px 16px rgba(20, 30, 40, .09), 0 2px 4px rgba(20, 30, 40, .05);
  --ombra-3: 0 14px 40px rgba(20, 30, 40, .14);

  --raggio:    14px;
  --raggio-s:  10px;
  --raggio-l:  22px;
  --tocco:     44px;

  --passo: .18s ease;

  --testo-base: 17px;
  --misura: 68ch;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", sans-serif;
  --font-titoli: var(--font);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]):not([data-tema="contrasto"]) {
    --primario:        #4cc4d1;
    --primario-forte:  #7ad9e3;
    --primario-tenue:  #10323a;
    --primario-testo:  #04222a;
    --accento:         #ff8a5c;
    --accento-tenue:   #33201a;

    --sfondo:          #0c141c;
    --superficie:      #14202b;
    --superficie-2:    #1b2836;
    --inchiostro:      #e8eff6;
    --inchiostro-2:    #a8bccd;
    --inchiostro-3:    #8ba0b3;
    --bordo:           #25384a;
    --bordo-forte:     #37506a;

    --ok:              #62d39a;
    --ok-tenue:        #10301f;
    --attesa:          #f0be6a;
    --attesa-tenue:    #33280f;
    --no:              #ff8f8f;
    --no-tenue:        #351a1a;

    --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra-2: 0 6px 18px rgba(0, 0, 0, .45);
    --ombra-3: 0 16px 44px rgba(0, 0, 0, .55);
  }
}

:root[data-tema="scuro"] {
  --primario:        #4cc4d1;
  --primario-forte:  #7ad9e3;
  --primario-tenue:  #10323a;
  --primario-testo:  #04222a;
  --accento:         #ff8a5c;
  --accento-tenue:   #33201a;
  --sfondo:          #0c141c;
  --superficie:      #14202b;
  --superficie-2:    #1b2836;
  --inchiostro:      #e8eff6;
  --inchiostro-2:    #a8bccd;
  --inchiostro-3:    #8ba0b3;
  --bordo:           #25384a;
  --bordo-forte:     #37506a;
  --ok:              #62d39a;
  --ok-tenue:        #10301f;
  --attesa:          #f0be6a;
  --attesa-tenue:    #33280f;
  --no:              #ff8f8f;
  --no-tenue:        #351a1a;
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra-2: 0 6px 18px rgba(0, 0, 0, .45);
  --ombra-3: 0 16px 44px rgba(0, 0, 0, .55);
}

/* Alto contrasto: fondo nero, testo bianco, comandi gialli, bordi sempre visibili. */
:root[data-tema="contrasto"] {
  --primario:        #ffe066;
  --primario-forte:  #fff2b3;
  --primario-tenue:  #000000;
  --primario-testo:  #000000;
  --accento:         #ffe066;
  --accento-tenue:   #000000;
  --sfondo:          #000000;
  --superficie:      #000000;
  --superficie-2:    #000000;
  --inchiostro:      #ffffff;
  --inchiostro-2:    #ffffff;
  --inchiostro-3:    #ffffff;
  --bordo:           #ffffff;
  --bordo-forte:     #ffffff;
  --ok:              #4dff9d;
  --ok-tenue:        #000000;
  --attesa:          #ffe066;
  --attesa-tenue:    #000000;
  --no:              #ff8080;
  --no-tenue:        #000000;
  --ombra-1: none; --ombra-2: none; --ombra-3: none;
}

:root[data-tema="contrasto"] .scheda,
:root[data-tema="contrasto"] .tessera,
:root[data-tema="contrasto"] .filtri,
:root[data-tema="contrasto"] .caratteristica,
:root[data-tema="contrasto"] .voce-accesso,
:root[data-tema="contrasto"] .elenco-risorse a,
:root[data-tema="contrasto"] .prodotto-scheda-tecnica,
:root[data-tema="contrasto"] .modulo,
:root[data-tema="contrasto"] input,
:root[data-tema="contrasto"] select,
:root[data-tema="contrasto"] textarea { border: 2px solid var(--bordo) !important; }

:root[data-tema="contrasto"] .figura { background: #000 !important; border: 2px solid #fff; }
:root[data-tema="contrasto"] .figura-sigla { color: #fff; }

/* Dimensione del testo (indipendente dallo zoom del browser). */
:root[data-testo="grande"]  { --testo-base: 19.5px; }
:root[data-testo="enorme"]  { --testo-base: 22.5px; --misura: 60ch; }

/* ---------- 2. Base ---------- */

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

html {
  font-size: var(--testo-base);
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--inchiostro);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 1.35rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem); }
h3 { font-size: 1.15rem; }

p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primario-forte); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: var(--accento); }

img, svg { max-width: 100%; }

ul, ol { margin: 0 0 1em; padding-left: 1.3em; }

:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 2px;
  border-radius: 4px;
}
:root[data-tema="contrasto"] :focus-visible { outline-color: #ffe066; }

::selection { background: var(--primario); color: var(--primario-testo); }

/* `hidden` deve vincere sui display impostati dalle classi. */
[hidden] { display: none !important; }

.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }

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

.salta {
  position: absolute; left: .5rem; top: -100%; z-index: 200;
  background: var(--primario); color: var(--primario-testo);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--raggio-s) var(--raggio-s);
  font-weight: 600; text-decoration: none;
}
.salta:focus { top: 0; color: var(--primario-testo); }

.contenitore { width: min(100% - 2rem, 1240px); margin-inline: auto; }

main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
:root[data-moto="no"] * , :root[data-moto="no"] *::before, :root[data-moto="no"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ---------- 3. Bottoni e chip ---------- */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--tocco);
  padding: .62em 1.15em;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--passo), color var(--passo),
              border-color var(--passo), transform var(--passo);
}
.bottone:active { transform: translateY(1px); }
.bottone-grande { padding: .8em 1.5em; font-size: 1.02rem; }

.bottone-primario { background: var(--primario); color: var(--primario-testo); border-color: var(--primario); }
.bottone-primario:hover { background: var(--primario-forte); border-color: var(--primario-forte); color: var(--primario-testo); }

.bottone-contorno { background: transparent; color: var(--primario-forte); border-color: var(--bordo-forte); }
.bottone-contorno:hover { border-color: var(--primario); background: var(--primario-tenue); color: var(--primario-forte); }

.bottone-quieto { background: transparent; color: var(--primario-forte); padding-inline: .6em; }
.bottone-quieto:hover { background: var(--primario-tenue); }

.bottone-chiaro { background: var(--superficie); color: var(--primario-forte); border-color: var(--superficie); }
.bottone-chiaro:hover { background: var(--superficie-2); color: var(--primario-forte); }

.bottone-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tocco); height: var(--tocco);
  border: 1px solid var(--bordo); border-radius: 50%;
  background: var(--superficie); color: var(--inchiostro);
  cursor: pointer; transition: background var(--passo), border-color var(--passo);
}
.bottone-ico:hover { background: var(--primario-tenue); border-color: var(--primario); }
.bottone-ico .ico { width: 1.35rem; height: 1.35rem; }
.bottone-ico[aria-expanded="true"] { background: var(--primario); border-color: var(--primario); color: var(--primario-testo); }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 40px; padding: .35em .9em;
  border: 1px solid var(--bordo-forte); border-radius: 999px;
  background: var(--superficie); color: var(--inchiostro);
  font: inherit; font-size: .92rem; cursor: pointer; text-decoration: none;
  transition: background var(--passo), border-color var(--passo), color var(--passo);
}
.chip:hover { border-color: var(--primario); background: var(--primario-tenue); color: var(--inchiostro); }
.chip[aria-pressed="true"], .chip.chip-attiva {
  background: var(--primario); border-color: var(--primario); color: var(--primario-testo);
}
.chip .ico { width: 1rem; height: 1rem; }

/* ---------- 4. Testata ---------- */

.testata {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--bordo);
}
@supports not (backdrop-filter: blur(2px)) { .testata { background: var(--superficie); } }

.testata-riga {
  display: flex; align-items: center; gap: .75rem;
  min-height: 4.2rem; padding-block: .5rem;
}

.marchio {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--inchiostro); margin-right: auto;
}
.marchio-segno {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--primario), color-mix(in srgb, var(--primario) 55%, #7c3f9e));
  color: #fff;
}
.marchio-segno .ico { width: 1.5rem; height: 1.5rem; }

/* Con un logo vero al posto dell'icona: via il riquadro colorato, che sotto un
   marchio con un fondo proprio sarebbe un rettangolo di troppo. */
.marchio-segno.marchio-logo {
  display: block;
  width: auto; height: auto;
  background: none; border-radius: 0;
}

/* L'altezza è in rem, non in percentuale. Una percentuale qui si misurerebbe
   sull'altezza del contenitore, che a sua volta dipende dall'immagine: il
   browser non risolve il cerchio e ripiega sulla dimensione naturale del file
   — 542 px, che sfondano la testata. `max-width: none` disattiva per questa
   sola immagine il `max-width: 100%` generale, che nel medesimo cerchio non
   aiuterebbe. */
.marchio-segno.marchio-logo img {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: none;
}

/* Il file è nero su fondo trasparente: sui temi scuri e ad alto contrasto
   sparirebbe. Si inverte, invece di tenere due copie del logo: un marchio
   monocromatico sopporta l'inversione e resta un file solo da aggiornare. Se
   un domani il logo diventa a colori, questa è la riga da togliere,
   sostituendola con una seconda immagine. */
:root[data-tema="scuro"] .marchio-logo img,
:root[data-tema="contrasto"] .marchio-logo img { filter: invert(1); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]):not([data-tema="contrasto"]) .marchio-logo img {
    filter: invert(1);
  }
}
.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }
.marchio-testo strong { font-size: 1.05rem; letter-spacing: -.01em; }
.marchio-testo small { font-size: .76rem; color: var(--inchiostro-3); }

.nav-principale ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-principale a {
  display: flex; align-items: center; min-height: var(--tocco);
  padding: .4rem .8rem; border-radius: var(--raggio-s);
  color: var(--inchiostro); text-decoration: none; font-weight: 550;
}
.nav-principale a:hover { background: var(--primario-tenue); color: var(--inchiostro); }
.nav-principale a.attivo { color: var(--primario-forte); background: var(--primario-tenue); font-weight: 700; }

.testata-azioni { display: flex; align-items: center; gap: .5rem; }

.ricerca-testata { position: relative; display: none; }
.ricerca-ico {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--inchiostro-3); pointer-events: none; display: flex;
}
.ricerca-testata input {
  width: 15rem; min-height: var(--tocco);
  padding: .5rem .8rem .5rem 2.5rem;
  border: 1px solid var(--bordo-forte); border-radius: 999px;
  background: var(--sfondo); color: var(--inchiostro); font: inherit; font-size: .95rem;
}
.ricerca-testata input:focus { background: var(--superficie); border-color: var(--primario); }

.suggerimenti {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 120;
  width: min(24rem, 90vw);
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra-3);
  overflow: hidden; padding: .3rem;
}
.suggerimenti a {
  display: block; padding: .6rem .7rem; border-radius: var(--raggio-s);
  text-decoration: none; color: var(--inchiostro);
}
.suggerimenti a:hover, .suggerimenti a:focus { background: var(--primario-tenue); }
.suggerimenti strong { display: block; font-size: .98rem; }
.suggerimenti small { color: var(--inchiostro-3); font-size: .82rem; }
.suggerimenti .vuoto-sugg { padding: .8rem .7rem; color: var(--inchiostro-3); font-size: .9rem; }

@media (min-width: 640px) { .ricerca-testata { display: block; } }

/* Selettore di lingua.
   Collegamenti veri, non un menu a tendina: funzionano senza Brython, ogni
   lingua ha il proprio indirizzo, e si raggiungono da tastiera in un passo. */
.lingue { display: flex; align-items: center; gap: .35rem; }
.lingue-ico { display: flex; color: var(--inchiostro-3); }
.lingue-ico .ico { width: 1.2rem; height: 1.2rem; }
.lingue ul {
  display: flex; gap: .15rem; list-style: none; margin: 0; padding: .15rem;
  border: 1px solid var(--bordo); border-radius: 999px; background: var(--sfondo);
}
.lingue a {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.6rem; min-height: 2.1rem; padding: .2rem .6rem;
  border-radius: 999px; text-decoration: none;
  color: var(--inchiostro-2); font-size: .82rem; font-weight: 650;
  letter-spacing: .02em;
}
.lingue a:hover { background: var(--primario-tenue); color: var(--inchiostro); }
.lingue a.attivo {
  background: var(--primario); color: var(--primario-testo); cursor: default;
}
/* Su schermi larghi basta la sigla; il nome per esteso resta per i lettori
   di schermo e ricompare nel menu e nel piede pagina, dove c'è spazio. */
.lingue .lingua-nome {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.testata-lingue { display: none; }
@media (min-width: 900px) { .testata-lingue { display: block; } }

.nav-lingue { display: block; padding: .2rem 1rem 1.1rem; }
.nav-lingue .lingue ul { border-radius: var(--raggio-s); }
.nav-lingue .lingue a { min-height: var(--tocco); padding: .4rem .9rem; font-size: .95rem; }
.nav-lingue .lingua-codice { display: none; }
.nav-lingue .lingua-nome {
  position: static; width: auto; height: auto; overflow: visible;
  clip-path: none;
}
@media (min-width: 900px) { .nav-lingue { display: none; } }

.piede .lingue { margin-top: 1rem; }
.piede .lingue a { min-height: var(--tocco); }
.piede .lingua-nome {
  position: static; width: auto; height: auto; overflow: visible;
  clip-path: none; margin-left: .4rem;
}

@media (max-width: 899px) {
  .nav-principale {
    position: fixed; inset: 4.2rem 0 auto 0; z-index: 90;
    background: var(--superficie); border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra-2);
    max-height: 0; overflow: hidden; transition: max-height var(--passo);
  }
  .nav-principale ul { flex-direction: column; padding: .5rem 1rem 1rem; gap: .2rem; }
  .nav-principale a { min-height: 3rem; font-size: 1.05rem; }
  .nav-principale .lingue ul { flex-direction: row; padding: .15rem; }
  body.nav-aperto .nav-principale { max-height: 30rem; }
}
@media (min-width: 900px) { .solo-mobile { display: none !important; } }

/* Pannello opzioni di lettura */
.pannello-accessibilita {
  border-top: 1px solid var(--bordo);
  background: var(--superficie-2);
  animation: apri .2s ease;
}
@keyframes apri { from { opacity: 0; transform: translateY(-6px); } }
.pannello-griglia {
  display: grid; gap: 1rem; padding: 1.1rem 0 1.3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pannello-griglia { grid-template-columns: repeat(3, 1fr); } }
.pannello-accessibilita fieldset { border: 0; margin: 0; padding: 0; }
.pannello-accessibilita legend {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--inchiostro-3); margin-bottom: .5rem;
}
.gruppo-bottoni { display: flex; flex-wrap: wrap; gap: .4rem; }
.pannello-nota {
  grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--inchiostro-3);
}

/* ---------- 5. Briciole ---------- */

.briciole { border-bottom: 1px solid var(--bordo); background: var(--superficie); }
.briciole ol {
  display: flex; flex-wrap: wrap; gap: .3rem; list-style: none;
  margin: 0; padding: .7rem 0; font-size: .88rem; color: var(--inchiostro-3);
}
.briciole li + li::before { content: "/"; margin-right: .35rem; color: var(--bordo-forte); }
.briciole a { color: var(--inchiostro-2); text-decoration: none; }
.briciole a:hover { color: var(--primario-forte); text-decoration: underline; }
.briciole [aria-current] { color: var(--inchiostro); font-weight: 600; }

/* ---------- 6. Eroe ---------- */

.eroe {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% -10%, color-mix(in srgb, var(--primario) 18%, transparent), transparent 70%),
    radial-gradient(700px 400px at 5% 110%, color-mix(in srgb, #7c3f9e 14%, transparent), transparent 70%),
    var(--superficie);
  border-bottom: 1px solid var(--bordo);
}
.eroe-griglia {
  display: grid; gap: 2rem; padding: clamp(2.2rem, 6vw, 4.5rem) 0;
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .eroe-griglia { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }

.eroe-occhiello {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .85rem; margin-bottom: 1rem;
  border-radius: 999px; background: var(--primario-tenue);
  color: var(--primario-forte); font-size: .87rem; font-weight: 650;
}
.eroe-testo h1 { max-width: 16ch; margin-bottom: .55em; }
.eroe-sommario {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color: var(--inchiostro-2); max-width: 52ch;
}
.eroe-azioni { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.eroe-numeri {
  display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.4rem 0 0;
  padding-top: 1.4rem; border-top: 1px solid var(--bordo);
}
.eroe-numeri div { margin: 0; }
.eroe-numeri dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--inchiostro-3); }
.eroe-numeri dd { margin: .1rem 0 0; font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; }

.eroe-figura { display: none; }
@media (min-width: 940px) { .eroe-figura { display: block; } }
.eroe-orbita {
  position: relative; aspect-ratio: 1; max-width: 26rem; margin-inline: auto;
  display: grid; place-items: center;
}
.eroe-orbita::before, .eroe-orbita::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--primario) 35%, transparent);
}
.eroe-orbita::before { inset: 6%; }
.eroe-orbita::after  { inset: 24%; border-style: solid; border-color: color-mix(in srgb, var(--primario) 18%, transparent); }
.orbita-voce {
  position: absolute; display: grid; place-items: center;
  width: 4.1rem; height: 4.1rem; border-radius: 20px;
  background: var(--superficie); color: var(--tinta, var(--primario));
  border: 1px solid var(--bordo); box-shadow: var(--ombra-2);
}
.orbita-voce:nth-child(1) { top: 0;    left: 50%; transform: translateX(-50%); }
.orbita-voce:nth-child(2) { top: 14%;  right: 6%; }
.orbita-voce:nth-child(3) { top: 47%;  right: -2%; }
.orbita-voce:nth-child(4) { bottom: 8%; right: 14%; }
.orbita-voce:nth-child(5) { bottom: 0;  left: 42%; }
.orbita-voce:nth-child(6) { bottom: 16%; left: 4%; }
.orbita-voce:nth-child(7) { top: 26%;  left: 0; }

/* ---------- 7. Sezioni ---------- */

.sezione { padding: clamp(2.4rem, 5vw, 4rem) 0; }
.sezione-alternata { background: var(--superficie); border-block: 1px solid var(--bordo); }
.sezione-testata {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: end;
  justify-content: space-between; margin-bottom: 1.8rem;
}
.sezione-sommario { color: var(--inchiostro-2); max-width: var(--misura); margin: 0; }

/* ---------- 8. Griglie e schede prodotto ---------- */

.griglia-prodotti {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.griglia-tre { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

.scheda {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); overflow: hidden;
  box-shadow: var(--ombra-1);
  transition: box-shadow var(--passo), transform var(--passo), border-color var(--passo);
}
.scheda:hover { box-shadow: var(--ombra-2); transform: translateY(-3px); border-color: var(--bordo-forte); }
.scheda:focus-within { border-color: var(--primario); }

.scheda-media { display: block; aspect-ratio: 16 / 9; position: relative; }
.scheda-media img { width: 100%; height: 100%; object-fit: cover; }

.figura {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 15% 0%, color-mix(in srgb, var(--tinta) 78%, #ffffff) 0%, var(--tinta) 55%,
                    color-mix(in srgb, var(--tinta) 65%, #000000) 100%);
  color: #fff; overflow: hidden;
}
.figura-trama {
  position: absolute; inset: 0; opacity: .22;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.9) 1px, transparent 0);
  background-size: 13px 13px;
}
.figura-ico { position: relative; display: grid; place-items: center; opacity: .95; }
.figura-svg { width: auto; height: auto; }
.figura-sigla {
  position: absolute; right: .6rem; bottom: -.55rem;
  font-size: 3.4rem; font-weight: 800; letter-spacing: -.05em;
  color: rgba(255,255,255,.24); line-height: 1;
}

.scheda-corpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.15rem 1.15rem; flex: 1; }
.scheda-badge { display: flex; flex-wrap: wrap; gap: .35rem; }

.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18em .6em; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  background: var(--superficie-2); color: var(--inchiostro-2);
  border: 1px solid var(--bordo);
}
.badge .ico { width: .85rem; height: .85rem; }
.badge-novita { background: var(--accento-tenue); color: var(--accento); border-color: color-mix(in srgb, var(--accento) 35%, transparent); }
.badge-evidenza { background: var(--primario-tenue); color: var(--primario-forte); border-color: color-mix(in srgb, var(--primario) 35%, transparent); }

.scheda-titolo { margin: 0; font-size: 1.18rem; }
.scheda-titolo a { color: var(--inchiostro); text-decoration: none; }
.scheda-titolo a::after { content: ""; position: absolute; inset: 0; }
.scheda { position: relative; }
.scheda-titolo a:hover { color: var(--primario-forte); }

.scheda-sottotitolo { margin: 0; color: var(--inchiostro-2); font-size: .93rem; font-weight: 550; }
.scheda-sommario { margin: 0; color: var(--inchiostro-3); font-size: .92rem; }

.pillole { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: .2rem 0 0; padding: 0; }
.pillola {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2em .55em; border-radius: 8px;
  background: var(--superficie-2); border: 1px solid var(--bordo);
  font-size: .78rem; color: var(--inchiostro-2);
}
.pillola .ico { width: .9rem; height: .9rem; color: var(--primario-forte); }
.pillola-resto { color: var(--inchiostro-3); }

.scheda-piede {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--bordo);
}
.prezzo { font-weight: 750; font-size: 1.05rem; }
.scheda-vai { margin-left: auto; color: var(--primario-forte); display: flex; }
.scheda:hover .scheda-vai { transform: translateX(3px); transition: transform var(--passo); }

.stato {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15em .6em; border-radius: 999px;
  font-size: .78rem; font-weight: 650;
}
.stato::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.stato-ok     { background: var(--ok-tenue);     color: var(--ok); }
.stato-attesa { background: var(--attesa-tenue); color: var(--attesa); }
.stato-no     { background: var(--no-tenue);     color: var(--no); }

.scheda-compatta .scheda-media { aspect-ratio: 21 / 9; }
.scheda-compatta .scheda-sommario { display: none; }

.vuoto {
  padding: 2.5rem 1.5rem; text-align: center;
  border: 2px dashed var(--bordo-forte); border-radius: var(--raggio-l);
  color: var(--inchiostro-2);
}

/* ---------- 9. Tessere categoria ---------- */

.griglia-tessere {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.griglia-tessere-ampia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.tessera {
  position: relative; display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.15rem; text-decoration: none; color: var(--inchiostro);
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); box-shadow: var(--ombra-1);
  overflow: hidden;
  transition: transform var(--passo), box-shadow var(--passo), border-color var(--passo);
}
.tessera::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tinta);
}
.tessera:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); border-color: var(--tinta); color: var(--inchiostro); }
.tessera-ico {
  display: grid; place-items: center; flex: none;
  width: 3.1rem; height: 3.1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--tinta) 14%, var(--superficie));
  color: var(--tinta);
}
:root[data-tema="contrasto"] .tessera-ico { background: #000; border: 2px solid #fff; color: #fff; }
.tessera-testo { display: flex; flex-direction: column; gap: .25rem; }
.tessera-titolo { font-weight: 700; font-size: 1.1rem; }
.tessera-sommario { color: var(--inchiostro-3); font-size: .9rem; }
.tessera-conteggio { font-size: .82rem; color: var(--tinta); font-weight: 650; }
.tessera-freccia { margin-left: auto; align-self: center; color: var(--inchiostro-3); display: flex; }
.tessera:hover .tessera-freccia { color: var(--tinta); transform: translateX(3px); transition: transform var(--passo); }

.dettaglio-categoria { padding: 1.6rem 0; border-top: 1px solid var(--bordo); max-width: var(--misura); }
.dettaglio-categoria h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; }
.dettaglio-categoria h2 a { color: var(--inchiostro); text-decoration: none; }
.dettaglio-categoria h2 a:hover { color: var(--primario-forte); text-decoration: underline; }
.dettaglio-ico {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 10px; background: color-mix(in srgb, var(--tinta) 15%, var(--superficie)); color: var(--tinta);
}
.dettaglio-categoria p { color: var(--inchiostro-2); margin: 0; }

/* ---------- 10. Passi e invito ---------- */

.passi {
  display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: passo;
}
.passi li {
  position: relative; padding: 1.3rem 1.15rem 1.15rem;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.passo-n {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--primario); color: var(--primario-testo);
  font-weight: 750; font-size: .95rem; margin-bottom: .7rem;
}
.passi h3 { margin-bottom: .3em; }
.passi p { color: var(--inchiostro-2); font-size: .93rem; margin: 0; }

.invito {
  background: linear-gradient(135deg, var(--primario-forte), color-mix(in srgb, var(--primario) 60%, #7c3f9e));
  color: #fff; padding: clamp(2rem, 4vw, 3.2rem) 0;
}
:root[data-tema="contrasto"] .invito { background: #000; border-block: 2px solid #fff; }
.invito-corpo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.invito h2 { margin-bottom: .3em; }
.invito p { margin: 0; max-width: 55ch; opacity: .95; }

/* ---------- 11. Elenchi con filtri ---------- */

.intestazione-elenco { padding: clamp(1.6rem, 4vw, 2.8rem) 0 1.4rem; }
.intestazione-elenco h1 { margin-bottom: .3em; }
.sottotesto { color: var(--inchiostro-2); max-width: var(--misura); font-size: 1.03rem; }

.banda-categoria {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: 1.4rem; padding: 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--tinta) 9%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--tinta) 30%, var(--bordo));
  border-radius: var(--raggio);
}
.banda-ico { color: var(--tinta); flex: none; display: flex; }
.banda-categoria p { margin: 0; color: var(--inchiostro-2); max-width: var(--misura); }

.disposizione-catalogo {
  display: grid; gap: 1.5rem; align-items: start;
  padding-bottom: 4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .disposizione-catalogo { grid-template-columns: 17rem 1fr; gap: 2rem; }
  .colonna-filtri { position: sticky; top: 5.4rem; }
}

.apri-filtri { width: 100%; margin-bottom: .25rem; }

.filtri {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); padding: 1.1rem;
}
.filtri-testata { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.filtri-testata h2 { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; margin: 0; }

.filtro-gruppo { border: 0; margin: 0 0 1.1rem; padding: 0; }
.filtro-gruppo legend {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--inchiostro-3); margin-bottom: .45rem; padding: 0;
}
.filtro-gruppo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .12rem; }
.filtro-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filtro-radio + label {
  display: flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .35rem .6rem;
  border-radius: var(--raggio-s); cursor: pointer;
  font-size: .95rem; color: var(--inchiostro-2);
}
.filtro-radio + label::before {
  content: ""; flex: none; width: 1.05rem; height: 1.05rem;
  border: 2px solid var(--bordo-forte); border-radius: 50%;
  transition: border-color var(--passo), box-shadow var(--passo);
}
.filtro-radio + label:hover { background: var(--superficie-2); color: var(--inchiostro); }
.filtro-radio:checked + label { background: var(--primario-tenue); color: var(--inchiostro); font-weight: 650; }
.filtro-radio:checked + label::before { border-color: var(--primario); box-shadow: inset 0 0 0 3px var(--superficie), inset 0 0 0 1rem var(--primario); }
.filtro-radio:focus-visible + label { outline: 3px solid var(--accento); outline-offset: 2px; }
.filtro-n { margin-left: auto; font-size: .8rem; color: var(--inchiostro-3); }

.filtri select {
  width: 100%; min-height: var(--tocco); padding: .5rem .7rem;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  background: var(--superficie); color: var(--inchiostro); font: inherit;
}
.filtri-azioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtri-azioni .bottone { flex: 1; }
.filtri-conteggio { margin: .8rem 0 0; font-size: .88rem; color: var(--inchiostro-3); text-align: center; }

body.js-attivo .filtri-azioni .bottone-primario { display: none; }

@media (max-width: 939px) {
  .colonna-filtri {
    position: fixed; inset: 0; z-index: 150; overflow-y: auto;
    background: var(--sfondo); padding: 1rem;
    transform: translateY(100%); visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  body.filtri-aperti .colonna-filtri { transform: translateY(0); visibility: visible; }
  body.filtri-aperti { overflow: hidden; }
}

/* Aggiornamento dei risultati in corso: il contenuto resta leggibile, attenuato. */
#area-risultati { transition: opacity var(--passo); }
#area-risultati.in-caricamento { opacity: .45; }

.risultati-testata {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: 1.1rem;
}
.risultati-conteggio { margin: 0; font-weight: 650; color: var(--inchiostro-2); }
.chip-attivi { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.chip-attivo { background: var(--primario-tenue); border-color: color-mix(in srgb, var(--primario) 35%, transparent); }
.chip-azzera { border-style: dashed; }

/* ---------- 12. Scheda prodotto ---------- */

.prodotto-testata {
  background:
    radial-gradient(800px 340px at 85% -20%, color-mix(in srgb, var(--tinta) 22%, transparent), transparent 70%),
    var(--superficie);
  border-bottom: 1px solid var(--bordo);
  padding: clamp(1.6rem, 4vw, 3rem) 0;
}
.prodotto-testata-griglia { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .prodotto-testata-griglia { grid-template-columns: 22rem 1fr; gap: 2.6rem; } }

.prodotto-figura {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--raggio-l); overflow: hidden;
  box-shadow: var(--ombra-2); border: 1px solid var(--bordo);
}
.prodotto-figura img { width: 100%; height: 100%; object-fit: cover; }

.prodotto-categoria { margin: 0 0 .5rem; }
.prodotto-categoria a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 14%, var(--superficie));
  color: var(--tinta); text-decoration: none; font-weight: 650; font-size: .9rem;
}
:root[data-tema="contrasto"] .prodotto-categoria a { border: 2px solid #fff; color: #fff; }
.prodotto-categoria a:hover { background: color-mix(in srgb, var(--tinta) 25%, var(--superficie)); }

.prodotto-intro h1 { margin-bottom: .25em; }
.prodotto-sottotitolo { font-size: 1.15rem; color: var(--inchiostro-2); font-weight: 550; margin-bottom: .8em; }
.prodotto-sommario { max-width: var(--misura); color: var(--inchiostro-2); }
.prodotto-intro .pillole { margin: 1rem 0; }

.prodotto-acquisto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1rem 0; margin: .5rem 0 1.2rem;
  border-block: 1px solid var(--bordo);
}
.prezzo-blocco { display: flex; flex-direction: column; }
.prezzo-grande { font-size: 1.9rem; font-weight: 780; letter-spacing: -.02em; line-height: 1.1; }
.prezzo-nota { font-size: .85rem; color: var(--inchiostro-3); }
.prodotto-azioni { display: flex; flex-wrap: wrap; gap: .7rem; }

.prodotto-indice {
  position: sticky; top: 4.2rem; z-index: 80;
  background: color-mix(in srgb, var(--sfondo) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo);
}
.prodotto-indice-riga {
  display: flex; gap: .3rem; overflow-x: auto; padding: .45rem 0;
  scrollbar-width: thin;
}
.prodotto-indice a {
  flex: none; padding: .5rem .85rem; border-radius: 999px;
  color: var(--inchiostro-2); text-decoration: none; font-size: .92rem; font-weight: 600;
  white-space: nowrap;
}
.prodotto-indice a:hover { background: var(--primario-tenue); color: var(--primario-forte); }
.prodotto-indice a.attivo { background: var(--primario); color: var(--primario-testo); }

.sezione-prodotto { padding: clamp(2rem, 4vw, 3.2rem) 0; }
.prodotto-corpo { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .prodotto-corpo { grid-template-columns: 1fr 19rem; gap: 3rem; } }
.prodotto-testo { max-width: var(--misura); }
.prodotto-testo p { color: var(--inchiostro-2); }

.riquadro-nota {
  margin-top: 1.6rem; padding: 1.1rem 1.2rem;
  background: var(--primario-tenue); border-left: 4px solid var(--primario);
  border-radius: 0 var(--raggio) var(--raggio) 0;
}
:root[data-tema="contrasto"] .riquadro-nota { border: 2px solid #fff; }
.riquadro-nota h3 { display: flex; align-items: center; gap: .45rem; margin-bottom: .4em; font-size: 1rem; }
.riquadro-nota p { margin: 0; color: var(--inchiostro); }

.prodotto-scheda-tecnica {
  align-self: start; position: sticky; top: 9rem;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); padding: 1.2rem;
}
.etichetta-piccola {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--inchiostro-3); margin-bottom: .8rem;
}
.fatti { margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.fatto dt { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--inchiostro-3); }
.fatto dt .ico { color: var(--primario-forte); }
.fatto dd { margin: .1rem 0 0; font-weight: 650; }
.piattaforme { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--bordo); }
.piattaforme ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }

.griglia-caratteristiche {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.caratteristica {
  padding: 1.15rem; background: var(--sfondo);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.sezione-alternata .caratteristica { background: var(--sfondo); }
.caratteristica-ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 12px; background: var(--primario-tenue); color: var(--primario-forte);
  margin-bottom: .7rem;
}
.caratteristica h3 { font-size: 1.02rem; margin-bottom: .3em; }
.caratteristica p { margin: 0; font-size: .92rem; color: var(--inchiostro-2); }

.griglia-specifiche {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}
.gruppo-specifiche h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--inchiostro-3); margin-bottom: .6rem;
}
.tabella-specifiche { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabella-specifiche tr { border-bottom: 1px solid var(--bordo); }
.tabella-specifiche tr:last-child { border-bottom: 0; }
.tabella-specifiche th {
  text-align: left; font-weight: 550; color: var(--inchiostro-3);
  padding: .6rem .8rem .6rem 0; vertical-align: top; width: 45%;
}
.tabella-specifiche td { padding: .6rem 0; font-weight: 600; }

.griglia-accesso {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.griglia-accesso-ampia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); margin-bottom: 2.5rem; }
.voce-accesso {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem; text-decoration: none; color: var(--inchiostro);
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  transition: border-color var(--passo), transform var(--passo);
}
.voce-accesso:hover { border-color: var(--primario); transform: translateY(-2px); color: var(--inchiostro); }
.voce-accesso-ico {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: var(--primario-tenue); color: var(--primario-forte);
}
.voce-accesso span span, .voce-accesso > span:last-child { display: flex; flex-direction: column; gap: .2rem; }
.voce-accesso small { color: var(--inchiostro-3); font-size: .87rem; }
.voce-accesso-n { color: var(--primario-forte) !important; font-weight: 650; }

.elenco-risorse { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.elenco-risorse a {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1rem; text-decoration: none; color: var(--inchiostro);
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  transition: border-color var(--passo), background var(--passo);
}
.elenco-risorse a:hover { border-color: var(--primario); background: var(--primario-tenue); color: var(--inchiostro); }
.risorsa-ico {
  display: grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 10px;
  background: var(--superficie-2); color: var(--primario-forte);
}
.risorsa-testo { display: flex; flex-direction: column; }
.risorsa-testo small { color: var(--inchiostro-3); font-size: .82rem; text-transform: capitalize; }
.risorsa-freccia { margin-left: auto; color: var(--inchiostro-3); display: flex; }

/* ---------- 13. Moduli ---------- */

.sezione-richiesta { background: var(--superficie); border-block: 1px solid var(--bordo); }
.richiesta-griglia { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .richiesta-griglia { grid-template-columns: 1fr 1.15fr; gap: 3rem; } }
.richiesta-intro p { color: var(--inchiostro-2); max-width: 46ch; }
.richiesta-nota {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .9rem; color: var(--inchiostro-3);
}
.richiesta-nota .ico { flex: none; margin-top: .15em; }
.richiesta-riferimento {
  display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem;
  padding: .8rem; background: var(--sfondo);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.richiesta-riferimento-ico {
  position: relative; display: block; flex: none;
  width: 4rem; height: 3rem; border-radius: 10px; overflow: hidden;
}
.richiesta-riferimento .figura-sigla { font-size: 2rem; right: .3rem; bottom: -.35rem; }
.richiesta-riferimento div { display: flex; flex-direction: column; }
.richiesta-riferimento small { color: var(--inchiostro-3); font-size: .8rem; }

.modulo {
  background: var(--sfondo); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); padding: clamp(1.1rem, 3vw, 1.8rem);
}
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 650; margin-bottom: .3rem; }
.campo-aiuto { margin: 0 0 .4rem; font-size: .88rem; color: var(--inchiostro-3); }
.campo input, .campo textarea {
  width: 100%; min-height: var(--tocco); padding: .65rem .85rem;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  background: var(--superficie); color: var(--inchiostro);
  font: inherit; font-size: 1rem;
  transition: border-color var(--passo), box-shadow var(--passo);
}
.campo textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.campo input:focus, .campo textarea:focus {
  border-color: var(--primario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 25%, transparent);
}
.campo-errore { margin: .35rem 0 0; font-size: .88rem; color: var(--no); font-weight: 600; }
.campo-errato input, .campo-errato textarea { border-color: var(--no); }
.obbligatorio { color: var(--no); font-weight: 700; }
.facoltativo { color: var(--inchiostro-3); font-weight: 400; font-size: .85rem; }

.campo-scelta { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; align-items: start; }
.campo-scelta input[type="checkbox"] {
  width: 1.4rem; height: 1.4rem; min-height: 0; margin-top: .18rem;
  accent-color: var(--primario); flex: none;
}
.campo-scelta label { font-weight: 400; font-size: .95rem; }
.campo-scelta .campo-errore { grid-column: 2; }

.campo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.modulo-nota { margin: .9rem 0 0; font-size: .85rem; color: var(--inchiostro-3); }

.esito-ok, .esito-errore {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem 1.3rem; border-radius: var(--raggio-l);
}
.esito-ok { background: var(--ok-tenue); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.esito-ok h2 { margin-bottom: .3em; font-size: 1.3rem; }
.esito-ok p { margin: 0; color: var(--inchiostro-2); }
.esito-ico {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--ok); color: var(--superficie);
}
.esito-errore {
  background: var(--no-tenue); color: var(--no); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--no) 35%, transparent);
  margin-bottom: 1.2rem; padding: .9rem 1rem;
}

.contatti-diretti { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.contatto-diretto {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1.2rem; text-decoration: none; color: var(--inchiostro);
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.contatto-diretto:hover { border-color: var(--primario); color: var(--inchiostro); }
.contatto-diretto .ico { color: var(--primario-forte); width: 1.5rem; height: 1.5rem; }
.contatto-diretto span { display: flex; flex-direction: column; }
.contatto-diretto small { color: var(--inchiostro-3); font-size: .8rem; }

/* ---------- 14. Guide e pagine informative ---------- */

.guida-blocco { padding: 1.8rem 0; max-width: var(--misura); }
.guida-blocco p, .guida-blocco li { color: var(--inchiostro-2); }
.guida-titolo { margin-top: 1.5rem; }
.guida-invito {
  max-width: none; margin: 2rem 0 4rem; padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-l);
}
.elenco-numerato, .elenco-punti { display: flex; flex-direction: column; gap: .7rem; }
.elenco-numerato li, .elenco-punti li { padding-left: .2rem; }

.pagina-errore { padding: clamp(3rem, 10vw, 7rem) 0; text-align: center; }
.errore-codice {
  font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 800; line-height: 1;
  color: var(--primario); opacity: .28; margin: 0;
}
.pagina-errore .eroe-azioni { justify-content: center; }

/* ---------- 15. Piede ---------- */

.piede {
  background: var(--superficie); border-top: 1px solid var(--bordo);
  padding: clamp(2rem, 4vw, 3rem) 0 1.5rem; margin-top: auto;
}
.piede-griglia {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .piede-griglia { grid-template-columns: 1.6fr 1fr 1fr; } }
.piede-marchio { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .5rem; }
.piede-marchio .ico { color: var(--primario-forte); width: 1.4rem; height: 1.4rem; }
.piede-testo { color: var(--inchiostro-3); font-size: .93rem; max-width: 42ch; }
.piede h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--inchiostro-3); margin-bottom: .7rem; }
.piede ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.piede ul a, .piede-contatti a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.4rem; color: var(--inchiostro-2); text-decoration: none;
}
.piede ul a:hover, .piede-contatti a:hover { color: var(--primario-forte); text-decoration: underline; }
.piede-contatti { display: flex; flex-direction: column; }
.piede-contatti .ico { color: var(--primario-forte); }
.piede-coda {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--bordo);
}
.piede-coda p { margin: 0; font-size: .85rem; color: var(--inchiostro-3); max-width: var(--misura); }

/* ---------- 16. Stampa ---------- */

@media print {
  .testata, .piede, .prodotto-indice, .sezione-richiesta, .briciole,
  .colonna-filtri, .apri-filtri, .invito { display: none !important; }
  body { background: #fff; color: #000; }
  .scheda, .caratteristica, .tessera { break-inside: avoid; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}