/* Colori del logo di Cristalroi (strumenti/crea-logo.py): blu notte, ghiaccio, azzurro, e rosso e verde delle gemme. Archi al neon, Montserrat.
   Contrasti e focus sono controllati da prove/sito.mjs con axe (WCAG 2.1 AA): un colore nuovo passa da lì. */
/* Sul telefono il font non si scambia a pagina già disegnata: ricalcolare tutto il testo ritardava immagine e tocchi (LCP da 2,4 a 1,1 s nelle prove).
   Se a una prima visita non arriva in tempo si resta sul font di sistema, e Montserrat è già nella cache dalla pagina dopo. */
@media (min-width: 1081px) { @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } }
@media (max-width: 1080px) { @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-display: optional; } }

:root {
  --nero: #0A0B10;
  --notte: #06093E;
  --notte-2: #0A1060;
  --notte-3: #12207F;
  --chiarore: #F0F8FD;
  --bianco: #FFFFFF;
  --bordo: #D5DBE8;
  --blu: #0A5BC4;
  --blu-scuro: #083A8C;
  --azzurro: #4FD8FF;
  --azzurro-forte: #12B8FF;
  --ghiaccio: #A4F4FB;
  --ghiaccio-chiaro: #CFFAFD;
  --verde: #22D38A;
  --rosso-gemma: #FF4D5E;
  --testo: #06093E;
  --testo-2: #454B6E;
  --testo-chiaro: #EAF9FD;
  --testo-chiaro-2: #C4D6EC;
  --rosso: #B3261E;
  --raggio: 24px;
  --ombra: 0 18px 44px rgba(6, 9, 62, .16);
  --carattere: "Montserrat", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
body { margin: 0; background: var(--bianco); color: var(--testo); font: 400 1.03rem/1.65 var(--carattere); overflow-wrap: break-word; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--blu-scuro); text-underline-offset: 3px; }
a:hover { color: var(--blu); }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 4px; }
.tono-scuro :focus-visible, .tono-accento :focus-visible, .piede :focus-visible, .eroe :focus-visible { outline-color: var(--ghiaccio); }
main:focus { outline: 0; }
h1, h2, h3 { line-height: 1.14; margin: 0 0 .6em; letter-spacing: -.015em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.28; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
.evidenza { color: var(--blu); }
.tono-scuro .evidenza, .eroe .evidenza { color: var(--ghiaccio); }
.tono-accento .evidenza { color: var(--ghiaccio-chiaro); }
.salta { position: absolute; left: -999px; top: 8px; background: var(--bianco); color: var(--testo); padding: 10px 16px; z-index: 100; border-radius: 10px; font-weight: 700; }
.salta:focus { left: 8px; }

/* Testata */
.testata { position: sticky; top: 0; z-index: 50; background: var(--bianco); color: var(--testo); box-shadow: 0 1px 0 var(--bordo), 0 8px 24px rgba(6, 9, 62, .07); }
.testata-dentro { max-width: 1240px; margin: 0 auto; padding: 11px 20px; display: flex; align-items: center; gap: 20px; }
.marchio { display: flex; align-items: center; gap: 12px; color: var(--testo); text-decoration: none; flex: none; }
.marchio:hover { color: var(--testo); }
.marchio img { display: block; width: 151px; height: 40px; }
.piede-logo { display: block; width: 177px; height: auto; margin-bottom: 16px; }
.navigazione { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.menu > li { position: relative; margin: 0; }
.menu a { display: block; color: var(--testo); text-decoration: none; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; }
.menu a:hover, .menu .current-menu-item > a, .menu .current-menu-ancestor > a { background: var(--chiarore); color: var(--blu-scuro); }
.menu .menu-item-has-children > a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu .sub-menu { list-style: none; margin: 0; padding: 10px; position: absolute; top: 100%; left: 0; width: 330px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: 18px; box-shadow: 0 24px 54px rgba(6, 9, 62, .22); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.menu li.menu-chiuso > .sub-menu { opacity: 0; visibility: hidden; }
.menu .sub-menu li { margin: 0; }
.menu .sub-menu a { font-weight: 500; font-size: .9rem; padding: 8px 10px; }
.testata-cta { display: inline-block; background: var(--blu); color: #fff !important; font-weight: 700; font-size: .92rem; padding: 11px 20px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s, box-shadow .15s; }
.testata-cta:hover { background: var(--blu-scuro); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(10, 91, 196, .35); }
/* Sul telefono, accanto alle voci con un secondo livello: + per aprirlo, − per chiuderlo. Lo crea sito.js. */
.sottomenu-apri { display: none; position: relative; flex: none; width: 44px; height: 44px; margin-left: 8px; padding: 0; border: 1px solid var(--bordo); border-radius: 50%; background: var(--chiarore); color: var(--blu-scuro); cursor: pointer; transition: background .15s, color .15s; }
.sottomenu-apri::before, .sottomenu-apri::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .2s; }
.sottomenu-apri::after { transform: rotate(90deg); }
.sotto-aperto > .sottomenu-apri { background: var(--blu); border-color: var(--blu); color: #fff; }
.sotto-aperto > .sottomenu-apri::after { transform: none; }
.menu-apri { display: none; flex: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-apri span { display: block; height: 2px; background: var(--testo); margin: 5px 0; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
/* A menu aperto le tre linee diventano una X: così si capisce che lo stesso pulsante chiude (chiesto dall'utente il 04/11/2026). */
.menu-apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* A menu aperto la X è bianca su un disco blu pieno: si vede e si distingue dal resto (chiesto dall'utente il 04/11/2026, «più contrasto»). */
.menu-apri { border-radius: 50%; transition: background-color .2s ease; }
.menu-apri[aria-expanded="true"] { background: var(--blu); }
.menu-apri[aria-expanded="true"] span { background: #fff; height: 2.5px; }

@media (max-width: 1080px) {
  .menu-apri { display: block; }
  /* Il bordo azzurro sopra e il contorno sottile staccano il menu dalla pagina sotto. Niente angoli arrotondati: su un pannello che scorre costano al tocco 300 ms con la CPU lenta (misurato il 04/11/2026). */
  .navigazione { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bianco); padding: 12px 20px 22px; flex-direction: column; align-items: stretch; max-height: calc(100vh - 66px); overflow-y: auto; box-shadow: 0 22px 40px rgba(6, 9, 62, .2); border: 1px solid var(--bordo); border-top: 3px solid var(--azzurro-forte); }
  .navigazione.pronta { display: flex; visibility: hidden; }
  .navigazione.aperta { display: flex; visibility: visible; }
  .menu { flex-direction: column; }
  .menu .sub-menu, .menu li.menu-chiuso > .sub-menu { position: static; width: auto; opacity: 1; visibility: inherit; transform: none; box-shadow: none; background: none; border: 0; padding: 0 0 6px 14px; }
  .menu .menu-item-has-children > a::after { display: none; }
  /* Il secondo livello parte chiuso solo se lo script ha messo il pulsante: senza script resta tutto aperto. */
  .menu > li.con-tasto { display: flex; flex-wrap: wrap; align-items: center; }
  .menu > li.con-tasto > a { flex: 1; }
  .menu > li.con-tasto > .sub-menu { flex-basis: 100%; display: none; margin: 2px 0 8px 12px; padding: 0 0 0 10px; border-left: 2px solid var(--azzurro); }
  .menu > li.con-tasto.sotto-aperto > .sub-menu { display: block; }
  .sottomenu-apri { display: block; }
  .testata-cta { text-align: center; }
}

/* Sul telefono i collegamenti da soli in una riga sono più facili da toccare: almeno 24 px (WCAG 2.5.8). */
@media (max-width: 1080px) {
  .piede-colonna a, .briciole a, .scheda-link a, .scheda h3 a, .articolo-fonti a, .indice a, .sopratitolo a, td > a:only-child { display: inline-block; padding-block: 4px; }
}

/* Briciole */
.briciole { background: var(--chiarore); border-bottom: 1px solid var(--bordo); }
.briciole ol { max-width: 1240px; margin: 0 auto; padding: 9px 20px; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .84rem; color: var(--testo-2); }
.briciole li { margin: 0; }
.briciole li + li::before { content: "›"; margin-right: 8px; }
.briciole a { color: var(--testo-2); }

/* Sezioni */
.sezione { padding: clamp(52px, 8vw, 96px) 0; position: relative; overflow: hidden; }
/* Le sezioni fuori schermo si calcolano quando servono: meno lavoro all'arrivo del font e ai tocchi sul telefono. */
.sezione:not(.eroe), .piede { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.contenitore { max-width: 1240px; margin: 0 auto; padding: 0 20px; position: relative; }
.testo-stretto { max-width: 820px; }
.tono-chiaro { background: var(--bianco); }
.tono-crema { background: var(--chiarore); }
.tono-crema::before { content: ""; position: absolute; left: -90px; top: 60px; width: 300px; height: 300px; background: #DFF3FA; border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; pointer-events: none; }
.tono-scuro { background: url("../img/archi-neon-sfondo.svg") center / cover no-repeat, linear-gradient(135deg, var(--notte-2), var(--notte) 55%, var(--notte-3)); color: var(--testo-chiaro); }
.tono-scuro a { color: var(--ghiaccio); }
.tono-accento { background: url("../img/archi-neon-sfondo.svg") center / cover no-repeat, linear-gradient(120deg, var(--blu-scuro), var(--blu)); color: #fff; }
.sopratitolo { font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blu-scuro); margin-bottom: .75em; }
.tono-scuro .sopratitolo { color: var(--ghiaccio); }
.introduzione { font-size: 1.1rem; color: var(--testo-2); max-width: 800px; }
.tono-scuro .introduzione { color: var(--testo-chiaro-2); }
.nota { font-size: .88rem; color: var(--testo-2); margin-top: 1.4em; }
.tono-scuro .nota { color: var(--testo-chiaro-2); }
.chiusura { font-size: 1.15rem; margin-top: 1.8em; max-width: 880px; }
.testo-stretto h3, .due-colonne-testo h3 { margin-top: 1.5em; }
.testo-stretto ul li::marker, .testo-stretto ol li::marker, .due-colonne-testo li::marker { color: var(--blu); font-weight: 700; }
.tono-scuro li::marker { color: var(--ghiaccio) !important; }
.sezione-centrata .testa-sezione { text-align: center; }
.sezione-centrata .testa-sezione .introduzione { margin-left: auto; margin-right: auto; }
.sezione-centrata .chiusura, .sezione-centrata > .contenitore > .nota { text-align: center; margin-left: auto; margin-right: auto; }

/* Eroe */
.eroe { padding: clamp(46px, 7vw, 96px) 0; background: url("../img/archi-neon-sfondo.svg") center / cover no-repeat, radial-gradient(circle at 82% 18%, rgba(18, 184, 255, .3) 0, rgba(18, 184, 255, 0) 50%), linear-gradient(135deg, var(--notte-2), var(--notte) 62%); color: #fff; }
.eroe-titolo { color: #fff; }
.eroe .sopratitolo { color: var(--ghiaccio); }
.eroe-sotto { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.55; font-weight: 500; color: var(--testo-chiaro); max-width: 720px; margin: 1em 0 1.5em; }
/* Dalla pagina 2 di una categoria l'H1 è la riga sopra la griglia, con la misura di un titolo di sezione: il blocco scuro sta solo sulla prima pagina. */
.testa-sezione .elenco-titolo { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.elenco-pagina { color: var(--testo-2); font-weight: 600; white-space: nowrap; }
.eroe-nota { font-size: .88rem; color: var(--testo-chiaro-2); margin-top: 1em; }
.eroe a:not(.wp-block-button__link) { color: var(--ghiaccio); }
.due-colonne { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 68px); align-items: center; }
.due-colonne > * { min-width: 0; }
.due-colonne .tabella table { min-width: 0; }
.colonne-ritratto { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(26px, 5vw, 60px); align-items: start; max-width: 1040px; }
@media (max-width: 880px) { .due-colonne, .colonne-ritratto { grid-template-columns: minmax(0, 1fr); } }

/* Immagini */
.immagine { margin: 0; }
.immagine img { display: block; width: 100%; height: auto; border-radius: var(--raggio); box-shadow: var(--ombra); }
.tono-scuro .immagine img, .eroe .immagine img { box-shadow: 0 0 0 1px rgba(164, 244, 251, .28), 0 26px 64px rgba(0, 0, 0, .5), 0 0 60px rgba(18, 184, 255, .35); }
.immagine-banner { margin: 30px 0 0; }
.immagine-banner img { aspect-ratio: 21 / 8; object-fit: cover; }
@media (max-width: 640px) { .immagine-banner img { aspect-ratio: 3 / 2; } }

/* Bottoni */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 .6em; }
.wp-block-button { margin: 0; }
.wp-block-button__link { display: inline-block; padding: 14px 28px; border-radius: 999px; font: 700 1rem var(--carattere); text-decoration: none; transition: transform .15s, background .15s, box-shadow .15s; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.is-style-primario .wp-block-button__link { background: var(--blu); color: #fff !important; }
.is-style-primario .wp-block-button__link:hover { background: var(--blu-scuro); box-shadow: 0 12px 28px rgba(10, 91, 196, .35); }
.is-style-secondario .wp-block-button__link { background: transparent; color: var(--testo) !important; box-shadow: inset 0 0 0 2px var(--testo); }
.eroe .is-style-primario .wp-block-button__link, .tono-scuro .is-style-primario .wp-block-button__link, .tono-accento .is-style-primario .wp-block-button__link { background: var(--ghiaccio); color: var(--notte) !important; }
.eroe .is-style-primario .wp-block-button__link:hover, .tono-scuro .is-style-primario .wp-block-button__link:hover, .tono-accento .is-style-primario .wp-block-button__link:hover { background: var(--ghiaccio-chiaro); box-shadow: 0 12px 30px rgba(164, 244, 251, .35); }
.eroe .is-style-secondario .wp-block-button__link, .tono-scuro .is-style-secondario .wp-block-button__link { color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.eroe .is-style-secondario .wp-block-button__link:hover, .tono-scuro .is-style-secondario .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px #fff; }

/* In breve */
.sezione-risposta { background: var(--chiarore); border-bottom: 1px solid var(--bordo); padding: 26px 0; }
.risposta { border-left: 5px solid var(--blu); }
.risposta-etichetta { font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--blu-scuro); margin-bottom: .35em; }
.risposta-testo { font-size: 1.08rem; line-height: 1.6; max-width: 920px; margin: 0; }

/* Griglie e schede */
.griglia { display: grid; gap: 26px; margin-top: 34px; }
.griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .griglia-3, .griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .griglia-2, .griglia-3, .griglia-4 { grid-template-columns: minmax(0, 1fr); } }
.scheda { position: relative; background: var(--bianco); border: 2px solid var(--azzurro); border-radius: var(--raggio); padding: 28px; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.griglia .scheda::before { content: ""; position: absolute; left: -11px; top: 44px; width: 22px; height: 70px; background: linear-gradient(180deg, var(--azzurro), var(--blu)); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; }
.scheda > :last-child { margin-bottom: 0; }
.scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.scheda > .immagine:first-child { margin: -28px -28px 20px; }
.scheda > .immagine:first-child img { border-radius: 21px 21px 0 0; box-shadow: none; aspect-ratio: 3 / 2; object-fit: cover; }
.griglia .scheda:has(> .immagine:first-child)::before { display: none; }
.tono-scuro .scheda { background: var(--notte-2); border-color: rgba(79, 216, 255, .55); color: var(--testo-chiaro); }
.tono-scuro .scheda h3 { color: #fff; }
.scheda--evidenza { background: linear-gradient(145deg, var(--blu-scuro), var(--blu)) !important; color: #fff; border-color: transparent; }
.scheda--evidenza h3 { color: #fff; }
.scheda--evidenza a { color: var(--ghiaccio); }
.scheda-link { margin-top: auto; padding-top: 8px; font-weight: 700; }
.scheda-link a { text-decoration: none; }
.scheda-link a::after { content: " →"; }
.dice { margin-bottom: .5em; }
.non-dice { margin: 0; color: var(--blu-scuro); }
.tono-scuro .non-dice { color: var(--ghiaccio); }

/* Tessere dei collegamenti */
.griglia-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-top: 34px; }
.tessera-collegamento { background: var(--bianco); border: 2px solid var(--azzurro); border-radius: 22px; padding: 22px 16px; text-align: center; transition: transform .18s, box-shadow .18s; }
.tessera-collegamento:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.tessera-collegamento h3 { font-size: 1rem; margin: 0 0 .3em; color: var(--blu-scuro); }
.tessera-collegamento p { margin: 0; font-size: .86rem; color: var(--testo-2); }

/* Passi */
.passo { background: var(--bianco); border: 2px solid var(--bordo); border-radius: var(--raggio); padding: 28px; }
.passo > :last-child { margin-bottom: 0; }
.passo-numero { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, var(--blu), var(--blu-scuro)); color: #fff; font-size: 1.6rem; font-weight: 800; margin-bottom: .7em; }
.tono-scuro .passo { background: var(--notte-2); border-color: transparent; }

/* Numeri */
.numero { background: var(--notte-2); border-radius: var(--raggio); padding: 30px; color: var(--testo-chiaro); }
.numero > :last-child { margin-bottom: 0; }
.tono-chiaro .numero, .tono-crema .numero { background: linear-gradient(145deg, var(--notte-2), var(--notte)); }
.numero-grande { font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 800; line-height: 1; color: #fff; margin-bottom: .22em; letter-spacing: -.02em; }
.numero-titolo { font-size: 1.08rem; color: #fff; margin-bottom: .35em; }
.numero-testo { color: var(--testo-chiaro-2); }
.numero--acceso { background: linear-gradient(145deg, var(--blu-scuro), var(--blu)) !important; }
.numero--acceso .numero-testo { color: #fff; }
.numero--allarme { background: var(--bianco) !important; box-shadow: 0 0 0 3px var(--ghiaccio), 0 0 36px rgba(164, 244, 251, .35); }
.numero--allarme .numero-grande { color: var(--rosso); }
.numero--allarme .numero-titolo { color: var(--testo); }
.numero--allarme .numero-testo { color: var(--testo-2); }
.numero--acqua .numero-grande { color: var(--ghiaccio); }
.numero--arancio .numero-grande { color: var(--ghiaccio-chiaro); }

/* Tabella */
.tabella { margin: 28px 0 0; overflow-x: auto; }
.tabella table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; background: #fff; border: 2px solid var(--bordo); border-radius: 20px; overflow: hidden; color: var(--testo); }
.wp-block-table.tabella th { font-size: .92rem; font-weight: 700; text-align: left; padding: 15px 18px; background: var(--blu-scuro); color: #fff; border: 0; }
.wp-block-table.tabella td { padding: 14px 18px; border: 0; border-top: 1px solid var(--bordo); vertical-align: top; }
.wp-block-table.tabella thead { border: 0; }
.tabella tbody tr:hover td { background: var(--chiarore); }
.tabella td:first-child { font-weight: 700; }

/* Citazione */
.wp-block-quote { margin: 22px 0 0; padding: 28px 30px; background: var(--bianco); color: var(--testo); border: 2px solid var(--azzurro); border-radius: var(--raggio); font-size: 1.1rem; line-height: 1.6; max-width: 900px; position: relative; }
.wp-block-quote p:last-of-type { margin-bottom: .8em; }
.wp-block-quote cite { display: block; font-style: normal; font-size: .9rem; color: var(--testo-2); }
.sezione-citazione.tono-chiaro + .tono-chiaro { padding-top: 0; }

/* Domande */
.domande { margin-top: 22px; }
.wp-block-details { background: #fff; border: 2px solid var(--bordo); border-radius: 16px; margin-bottom: 11px; padding: 0; color: var(--testo); }
.wp-block-details[open] { border-color: var(--azzurro); }
.wp-block-details summary { cursor: pointer; font-weight: 700; line-height: 1.35; padding: 17px 48px 17px 20px; position: relative; list-style: none; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 19px; top: 12px; font-size: 1.5rem; color: var(--blu); }
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details p { padding: 0 20px 4px; }

/* Invito finale */
.sezione-cta { text-align: center; }
.sezione-cta .contenitore > *, .sezione-cta .testa-sezione > * { margin-left: auto; margin-right: auto; }
.sezione-cta .wp-block-buttons { justify-content: center; }
.sezione-cta .introduzione { color: #fff; }
.sezione-cta h2 { max-width: 880px; color: #fff; }
.sezione-cta .sopratitolo { color: var(--ghiaccio); }
.tono-accento a:not(.wp-block-button__link) { color: #fff; }

/* Pannelli illustrati */
.pannello { margin: 0; background: var(--bianco); color: var(--testo); border: 1px solid var(--bordo); border-radius: 26px; padding: 26px; box-shadow: 0 0 0 1px rgba(164, 244, 251, .22), 0 26px 64px rgba(0, 0, 0, .34), 0 0 60px rgba(18, 184, 255, .3); }
.pannello-testa { display: flex; justify-content: space-between; gap: 12px; font-size: .74rem; font-weight: 700; color: var(--testo-2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.pillola { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--blu-scuro); background: #DFF3FA; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.pillola--esito { background: var(--verde); color: var(--notte); }
.riga-fonte { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; border-top: 1px solid var(--bordo); padding: 12px 0; }
.riga-fonte strong { font-size: .96rem; font-weight: 700; }
/* Merchant Center e il suo valore chiedono circa 320 px: sul telefono (296 a 390) e nelle colonne strette (326 a 900, Merchant Center e prezzi)
   la riga andava a capo diversa dalle altre. Conta la larghezza del riquadro, non dello schermo: sotto i 360 px ogni riga ha la pillola sopra
   e il valore sotto, e tutto è centrato, testata ed esito compresi (chiesto dall'utente l'8/11/2026). */
.pannello-riga { container: riga / inline-size; }
@container riga (max-width: 360px) {
  .riga-fonte { flex-direction: column; text-align: center; }
  .pannello-testa { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .riga-esito { flex-direction: column; gap: 10px; text-align: center; }
}
.riga-esito { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--notte-2), var(--notte)); color: #fff; border-radius: 16px; padding: 16px 20px; margin-top: 6px; }
.riga-esito span:not(.pillola) { display: block; font-size: .84rem; color: var(--testo-chiaro-2); }
.riga-esito strong { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.briefing-numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.briefing-numeri div { border: 1px solid var(--bordo); background: #fff; border-radius: 13px; padding: 13px 15px; }
.briefing-numeri span { display: block; font-size: .82rem; color: var(--testo-2); }
.briefing-numeri strong { display: block; font-size: 1.3rem; font-weight: 800; }
.briefing-numeri em { display: block; font-style: normal; font-weight: 700; font-size: .78rem; }
.briefing-numeri .meno { color: var(--rosso); }
.briefing-numeri .piu { color: #17612F; }
.briefing-titolo { font-size: .76rem; font-weight: 700; color: var(--testo-2); letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 6px; }
.briefing-lista { margin: 0; padding: 0; list-style: none; counter-reset: fare; }
.briefing-lista li { counter-increment: fare; border-top: 1px solid var(--bordo); padding: 9px 0 9px 28px; margin: 0; position: relative; }
.briefing-lista li::before { content: counter(fare); position: absolute; left: 0; font-weight: 800; color: var(--blu); }
.chat-marchio { display: inline-flex; align-items: center; gap: 8px; }
.chat-megafono { width: 26px; height: 26px; flex: none; color: var(--blu); }
.pillola--ai { background: var(--blu); color: #fff; letter-spacing: .04em; padding: 2px 9px; }
.chat-nota { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--bordo); font-size: .86rem; font-weight: 600; color: var(--testo-2); }
.fumetto { padding: 13px 17px; border-radius: 17px; margin: 0 0 10px; max-width: 88%; }
.fumetto--domanda { background: var(--blu); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.fumetto--risposta { background: var(--chiarore); color: var(--testo); border-bottom-left-radius: 5px; }
.tessere { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.tessera { display: grid; place-items: center; aspect-ratio: 1; background: var(--notte-2); color: var(--ghiaccio); border-radius: 9px; font-weight: 800; font-size: clamp(.9rem, 2vw, 1.4rem); }
.tessera--accesa { background: var(--ghiaccio); color: var(--notte); }
.pannello-passaggi figcaption { margin-top: 16px; }
.controlli-titolo { font-size: .76rem; font-weight: 700; color: var(--testo-2); letter-spacing: .08em; text-transform: uppercase; margin: 18px 0 8px; }
.controlli { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.controlli li { margin: 0; padding: 6px 13px; border-radius: 999px; background: #DFF3FA; color: var(--blu-scuro); font-size: .86rem; font-weight: 700; line-height: 1.3; }
.fonti-elenco { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fonti-elenco li { margin: 0; font-size: .82rem; font-weight: 700; color: var(--blu-scuro); background: #DFF3FA; padding: 5px 13px; border-radius: 999px; }
.fonti-freccia { width: 2px; height: 26px; margin: 8px auto; background: var(--blu); position: relative; }
.fonti-freccia::after { content: ""; position: absolute; left: -4px; bottom: 0; width: 10px; height: 10px; border-right: 2px solid var(--blu); border-bottom: 2px solid var(--blu); transform: rotate(45deg); }
.fonti-centro { background: linear-gradient(135deg, var(--notte-2), var(--notte)); color: #fff; border-radius: 16px; padding: 16px; text-align: center; }
.fonti-centro strong { display: block; font-size: 1.2rem; font-weight: 800; }
.fonti-centro span { font-size: .86rem; color: var(--testo-chiaro-2); }
.fonti-esito { text-align: center; font-weight: 700; color: var(--blu-scuro); margin: 0; }
.flusso-nodo { border: 1px solid var(--bordo); background: #fff; border-radius: 14px; padding: 14px 16px; text-align: center; }
.flusso-nodo strong { display: block; font-size: 1.05rem; font-weight: 700; }
.flusso-nodo span { font-size: .84rem; color: var(--testo-2); }
.flusso-nodo--acceso { background: linear-gradient(135deg, var(--notte-2), var(--notte)); border-color: transparent; }
.flusso-nodo--acceso strong { color: #fff; }
.flusso-nodo--acceso span { color: var(--testo-chiaro-2); }
.flusso-mete { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Ritratto */
.ritratto { display: block; width: 220px; height: 220px; max-width: 100%; border-radius: 30px; object-fit: cover; }
.ritratto--sigla { display: grid; place-items: center; background: linear-gradient(135deg, var(--blu), var(--blu-scuro)); color: #fff; font-size: 4.4rem; font-weight: 800; }

/* Modulo */
.sezione-modulo .contenitore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
@media (max-width: 880px) { .sezione-modulo .contenitore { grid-template-columns: minmax(0, 1fr); } }
.modulo { background: #fff; color: var(--testo); border: 2px solid var(--azzurro); border-radius: 24px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--ombra); }
.modulo label { display: block; font-weight: 700; margin-bottom: 5px; }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=tel], .modulo input[type=password], .modulo select, .modulo textarea { width: 100%; font: inherit; color: inherit; background: #fff; border: 2px solid #6B7390; border-radius: 12px; padding: 11px 13px; }
.modulo ::placeholder { color: #565E7E; opacity: 1; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: 3px solid var(--blu); outline-offset: 1px; border-color: var(--blu); }
.modulo-esca { position: absolute; left: -9999px; }
.tono-scuro .modulo a { color: var(--blu-scuro); }
.modulo-consenso label { font-weight: 400; font-size: .9rem; display: flex; gap: 9px; align-items: flex-start; }
.modulo-consenso input { margin-top: 2px; flex: none; width: 24px; height: 24px; }
.facoltativo { font-weight: 400; color: var(--testo-2); }
.modulo-errore { background: #FCE9E7; color: #8A1C15; border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.bottone-invio { width: 100%; border: 0; cursor: pointer; background: var(--blu); color: #fff; font: 700 1.05rem var(--carattere); padding: 15px 24px; border-radius: 999px; transition: background .15s, transform .15s; }
.bottone-invio:hover { background: var(--blu-scuro); transform: translateY(-1px); }

/* Fondo pagina */
.piede { background: url("../img/archi-neon-sfondo.svg") center / cover no-repeat, var(--nero); color: var(--testo-chiaro-2); font-size: .92rem; }
.piede a { color: var(--testo-chiaro); text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; }
.piede .testata-cta { background: var(--ghiaccio); color: var(--notte) !important; }
.piede .testata-cta:hover { background: var(--ghiaccio-chiaro); text-decoration: none; }
.piede-dentro { max-width: 1240px; margin: 0 auto; padding: 58px 20px 28px; display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap: 24px; }
@media (max-width: 980px) { .piede-dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .piede-dentro { grid-template-columns: minmax(0, 1fr); } }
.piede-slogan { font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: #fff; }
.piede-titolo { font-weight: 700; color: var(--ghiaccio); }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: 7px; }
.piede-zone { max-width: 1240px; margin: 0 auto; padding: 0 20px 18px; font-size: .86rem; }
.piede-zone a { text-decoration: underline; }
.piede-fondo { max-width: 1240px; margin: 0 auto; padding: 18px 20px 28px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px; font-size: .84rem; }
.piede-fondo p { margin: 0; }
.piede-fondo a { text-decoration: underline; }

/* Blog */
.eroe-articolo .eroe-titolo { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.eroe-articolo .eroe-sotto { font-size: clamp(1rem, 1.5vw, 1.12rem); margin-bottom: 1em; }
.eroe-articolo .sopratitolo a { color: var(--ghiaccio); text-decoration: none; }
.eroe-articolo .sopratitolo a:hover { text-decoration: underline; }
.articolo-firma { font-size: .88rem; color: var(--testo-chiaro-2); margin: 0; }
.articolo-ai { margin-top: 3px; }
.contenuto-articolo .risposta { max-width: 820px; }
.articolo-testo { margin: 0 auto; }
.articolo-testo h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 1.9em; }
.articolo-testo > :first-child { margin-top: 0; }
.articolo-testo .tabella { margin: 22px 0 26px; }
.articolo-fonti { font-size: .9rem; }
.indice { background: var(--chiarore); border: 2px solid var(--bordo); border-radius: 20px; padding: 22px 26px; margin: 0 0 8px; }
.indice-titolo { font-weight: 800; font-size: 1rem; margin: 0 0 .5em; }
.indice ol { margin: 0; padding-left: 1.3em; }
.indice li { margin-bottom: .3em; font-size: .95rem; }
.indice li::marker { color: var(--blu); font-weight: 700; }
.formula { background: var(--chiarore); border-left: 5px solid var(--blu); border-radius: 0 14px 14px 0; padding: 14px 20px; font-weight: 700; }
/* Il percorso nei menu di uno strumento (gn_percorso): italiano in grassetto, inglese sotto fra parentesi. */
.percorso { margin: 1.3em 0; padding: 14px 20px; background: var(--chiarore); border: 1px solid var(--bordo); border-left: 5px solid var(--azzurro-forte); border-radius: 0 14px 14px 0; }
.percorso p { margin: 0; }
.percorso .percorso-etichetta { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blu-scuro); margin-bottom: 4px; }
.percorso .percorso-it { line-height: 1.5; }
.percorso .percorso-en { font-size: .9rem; color: var(--testo-2); margin-top: 4px; }
/* Il nome inglese accanto a quello italiano, nelle celle in grassetto: chiaro come nel riquadro del percorso. */
.tabella td:first-child span[lang="en"] { font-weight: 400; color: var(--testo-2); }
.wp-block-code { background: var(--notte); color: var(--testo-chiaro); border-radius: 16px; padding: 18px 20px; margin: 0 0 1.2em; font: .85rem/1.55 Consolas, "Courier New", monospace; }
.wp-block-code code { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.articolo-testo :not(pre) > code { background: var(--chiarore); padding: 1px 6px; border-radius: 6px; font: .9em Consolas, "Courier New", monospace; }
/* Nelle intestazioni blu delle tabelle il fondo chiaro lasciava il testo bianco su chiaro (contrasto 1,07, axe del 10/11/2026). */
.articolo-testo .tabella th code { background: rgba(255, 255, 255, .16); color: inherit; }
.riquadro-prodotto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: center; background: linear-gradient(145deg, var(--notte-2), var(--notte)); color: var(--testo-chiaro); border-radius: var(--raggio); padding: 24px; margin: 30px 0; }
.riquadro-prodotto .immagine img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: none; }
.riquadro-prodotto-titolo { font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: #fff; margin-bottom: .45em; }
.riquadro-prodotto a { color: var(--ghiaccio); }
.riquadro-prodotto-testo > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .riquadro-prodotto { grid-template-columns: minmax(0, 1fr); } }
.autore { display: flex; gap: 20px; align-items: center; border-top: 2px solid var(--bordo); margin-top: 40px; padding-top: 26px; }
.autore-foto { flex: none; width: 92px; height: 92px; object-fit: cover; border-radius: 22px; }
.autore-nome { font-weight: 800; margin-bottom: .2em; }
.autore-testo { font-size: .95rem; }
.autore-testo > :last-child { margin-bottom: 0; }
@media (max-width: 480px) { .autore { flex-direction: column; align-items: flex-start; } }
.griglia article.scheda h2, .griglia article.scheda h3 { font-size: 1.08rem; }
.griglia article.scheda h3 a { color: var(--testo); text-decoration: none; }
.griglia article.scheda h3 a:hover { color: var(--blu-scuro); text-decoration: underline; }
.griglia article.scheda p:not(.scheda-link, .scheda-riservato) { font-size: .95rem; color: var(--testo-2); }
.griglia article.scheda ul { text-align: left; }
.griglia article.scheda li { font-size: .95rem; }
.griglia article.scheda { text-align: left; }
.blog-tutti { margin-top: 28px; }
.paginazione { margin-top: 34px; }
.paginazione ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.paginazione li { margin: 0; }
.paginazione .page-numbers { display: inline-block; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 2px solid var(--bordo); border-radius: 12px; background: var(--bianco); color: var(--blu-scuro); font-weight: 700; line-height: 20px; text-align: center; text-decoration: none; }
.paginazione a.page-numbers:hover { border-color: var(--blu); background: var(--chiarore); }
.paginazione .page-numbers.current { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; }
.paginazione .page-numbers.dots { border-color: transparent; background: none; }
.blog-altre { text-align: center; margin-top: 34px; color: var(--testo-2); }

/* Icone delle fonti */
.logo-fonte { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.loghi { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 1.4em; padding: 0; }
.loghi li { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 15px 8px 11px; border-radius: 999px; background: var(--bianco); color: var(--testo); font-size: .9rem; font-weight: 700; }
.loghi .logo-fonte { width: 22px; height: 22px; color: var(--blu); }
.tono-chiaro .loghi li, .tono-crema .loghi li { box-shadow: inset 0 0 0 1px var(--bordo); }
.sezione-centrata .testa-sezione .loghi { justify-content: center; }
.flusso-nodo strong .logo-fonte { width: 1.05em; height: 1.05em; vertical-align: -.15em; }
.articolo-testo .immagine { margin: 6px 0 22px; }
.articolo-testo .immagine img { aspect-ratio: 16 / 9; object-fit: cover; }
.riquadro-prodotto .immagine { margin: 0; }
.riquadro-prodotto .immagine img { aspect-ratio: 3 / 2; }
.pillola { display: inline-flex; align-items: center; gap: 6px; }
.fonti-elenco li { display: inline-flex; align-items: center; gap: 6px; }
.tessera-collegamento .logo-fonte { display: block; width: 40px; height: 40px; margin: 0 auto 10px; color: var(--blu); }
.griglia-4 .scheda { padding: 24px; }

/* La testimonianza in evidenza */
.citazione-evidenza .testa-sezione { text-align: center; }
.citazione-evidenza .wp-block-quote { max-width: 980px; margin: 26px auto 0; padding: clamp(28px, 4vw, 48px); padding-top: clamp(52px, 6vw, 70px); font-size: clamp(1.12rem, 2vw, 1.4rem); line-height: 1.55; font-weight: 500; border-width: 3px; box-shadow: var(--ombra); }
.citazione-evidenza .wp-block-quote::before { content: "\201C"; position: absolute; left: clamp(24px, 4vw, 44px); top: 2px; font-size: 5.5rem; line-height: 1; font-weight: 800; color: var(--blu); }
.citazione-evidenza .wp-block-quote cite { font-size: .95rem; font-weight: 400; margin-top: 1em; }
.citazione-evidenza .wp-block-quote cite strong { font-size: 1.1rem; font-weight: 800; color: var(--blu-scuro); }

/* Il banner dei cookie: sopra la pagina, che resta visibile sotto il velo. */
.consenso { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(6, 9, 62, .62); }
.consenso[hidden] { display: none; }
/* Chi non ha ancora scelto vede il banner nel primo disegno: la classe la mette lo script in testa (inc/consenso.php), consenso.js la toglie quando prende in mano il banner. */
html.consenso-subito .consenso[hidden] { display: flex; }
/* Lo spazio della barra resta riservato: da computer il banner, togliendola, allargava la pagina e ricomponeva il testo già disegnato (CLS fino a 0,26). */
html { scrollbar-gutter: stable; }
html.consenso-aperto, html.consenso-subito { overflow: hidden; }
.consenso-scatola { position: relative; width: 100%; max-width: 720px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--bianco); color: var(--testo); border-radius: var(--raggio); padding: 28px 30px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); animation: consenso-entra .22s ease-out; }
.consenso-scatola:focus { outline: 0; }
@keyframes consenso-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.consenso-titolo { display: flex; align-items: center; gap: 10px; font-size: 1.28rem; font-weight: 800; margin: 0 40px .5em 0; line-height: 1.25; }
.consenso-icona { flex: none; display: block; width: 34px; height: 34px; }
.consenso-testo { font-size: .93rem; line-height: 1.55; }
.consenso-testo p { margin-bottom: .7em; }
.consenso-chiudi { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--chiarore); color: var(--testo); font: 400 1.6rem/1 var(--carattere); cursor: pointer; }
.consenso-chiudi:hover { background: var(--bordo); }
.consenso-dettagli { border: 2px solid var(--bordo); border-radius: 14px; margin: 4px 0 16px; }
.consenso-dettagli summary { cursor: pointer; font-weight: 700; font-size: .93rem; padding: 11px 16px; color: var(--blu-scuro); }
.consenso-categorie { padding: 0 16px 14px; }
.consenso-categoria { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--bordo); font-size: .9rem; line-height: 1.45; }
.consenso-categoria input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blu); }
.consenso-categoria strong { display: block; }
.consenso-categorie .consenso-bottone { margin-top: 8px; }
.consenso-comandi { display: flex; gap: 12px; justify-content: flex-end; }
.consenso-bottone { min-height: 48px; min-width: 150px; padding: 12px 26px; border-radius: 999px; border: 2px solid transparent; font: 700 1rem var(--carattere); cursor: pointer; transition: background .15s, color .15s; }
.consenso-bottone--primario { background: var(--blu); color: #fff; }
.consenso-bottone--primario:hover { background: var(--blu-scuro); }
.consenso-bottone--secondario { background: var(--bianco); color: var(--testo); border-color: var(--testo); }
.consenso-bottone--secondario:hover { background: var(--chiarore); }
@media (max-width: 560px) {
  .consenso { padding: 8px; }
  .consenso-scatola { padding: 22px 18px 18px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .consenso-comandi { flex-direction: column-reverse; }
  .consenso-bottone { width: 100%; }
}
.consenso-stato { font-size: 1.02rem; }
.piede-consenso { display: inline-block; background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.piede-consenso:hover { color: #fff; }

/* La landing in home. Titolo più contenuto, perché sul telefono il pulsante resti visibile senza scorrere. */
.home .eroe-titolo { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.home .eroe-sotto { margin: .8em 0 1.1em; }
.sezione-centrata > .contenitore > .wp-block-buttons { justify-content: center; margin-top: 30px; }
.testo-centrato { max-width: 860px; margin: 30px auto 0; text-align: center; }
/* Le tabelle della landing stanno nello schermo del telefono, senza scorrere di lato. */
.home .tabella table { min-width: 0; }
@media (max-width: 640px) { .home .wp-block-table.tabella th, .home .wp-block-table.tabella td { padding: 10px 9px; font-size: .88rem; } }
#richiedi:focus { outline: 0; }
.barra-demo { display: none; }
@media (max-width: 640px) {
  .barra-demo { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bianco); box-shadow: 0 -8px 24px rgba(6, 9, 62, .18); transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .barra-demo.visibile { transform: none; visibility: visible; }
  .barra-demo .testata-cta { display: block; text-align: center; font-size: 1rem; padding: 13px 20px; }
}

/* I risultati, ben visibili. */
.sezione-numeri-forti h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.sezione-numeri-forti .numero { padding: clamp(30px, 3.4vw, 44px) 26px; text-align: center; }
.sezione-numeri-forti .numero-grande { font-size: clamp(3rem, 5.4vw, 4.8rem); white-space: nowrap; }
.sezione-numeri-forti h2 .evidenza { display: inline-block; }
.sezione-numeri-forti .numero--acceso .numero-grande { color: var(--ghiaccio); }
.sezione-numeri-forti .numero-titolo { font-size: 1.2rem; }
.sezione-numeri-forti .icona-sezione { display: block; width: 58px; height: 58px; margin: 0 auto 16px; padding: 13px; border-radius: 50%; background: var(--ghiaccio); color: var(--notte); }
.parola-chiave { background: var(--ghiaccio); color: var(--notte); font-weight: 800; padding: 2px 7px; margin-right: -3px; border-radius: 7px; }
.chiusura-con-icona { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 30px auto 0; padding: 18px 24px; background: var(--bianco); border: 2px solid var(--azzurro); border-radius: 20px; text-align: left; position: relative; }
.chiusura-con-icona .icona-sezione { flex: none; width: 46px; height: 46px; color: var(--blu); }
.sezione-centrata .chiusura-con-icona .chiusura { margin: 0; text-align: left; }
.chiusura-con-icona .chiusura-logo { flex: none; width: 52px; height: 52px; }
/* Sul telefono il logo sopra e la frase centrata sotto (chiesto dall'utente l'8/11/2026). */
@media (max-width: 440px) { .chiusura-con-icona { flex-direction: column; gap: 10px; } .sezione-centrata .chiusura-con-icona .chiusura { text-align: center; } }
.confronto-testa { display: flex; align-items: center; gap: 12px; margin-bottom: .7em; }
.confronto-testa h3 { margin: 0; }
.confronto-testa .logo-fonte { flex: none; width: 42px; height: 42px; padding: 7px; border-radius: 11px; background: var(--bianco); color: var(--blu); }
.scheda > .icona-sezione { flex: none; align-self: flex-start; width: 46px; height: 46px; padding: 10px; margin-bottom: 14px; border-radius: 13px; background: #DFF3FA; color: var(--blu-scuro); }
.fumetto--risposta p { margin: 0 0 8px; }
.fumetto--risposta p:last-child { margin: 8px 0 0; }
.chat-perdite { list-style: none; margin: 0; padding: 0; }
.chat-perdite li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; margin: 0 0 8px; font-size: .9rem; }
.chat-perdite strong { color: var(--rosso); }
.chat-perdite i { display: block; grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--rosso-gemma); }
.pannello-conto { max-width: 780px; margin: 34px auto 0; padding: 0; overflow: hidden; box-shadow: var(--ombra); }
.conto { width: 100%; border-collapse: collapse; text-align: left; }
.conto caption { padding: 16px 22px 12px; font-size: .86rem; font-weight: 600; color: var(--testo-2); text-align: left; }
.conto th, .conto td { padding: 12px 22px; border-top: 1px solid var(--bordo); font-weight: 600; vertical-align: middle; }
.conto td { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.conto thead th { padding-block: 8px; font-size: .78rem; font-weight: 700; color: var(--testo-2); text-align: right; }
.conto thead th:first-child { text-align: left; }
.conto-incidenza { width: 1%; color: var(--blu-scuro); font-weight: 800; }
.conto-evidenza .conto-incidenza { color: var(--notte); }
.conto-finale .conto-incidenza { color: var(--ghiaccio); }
.conto small { display: block; margin-top: 2px; font-size: .84rem; font-weight: 400; color: var(--testo-2); }
.conto-nota { padding: 13px 22px 15px; font-size: .88rem; line-height: 1.5; color: var(--testo-2); text-align: left; }
.conto-gruppo th { background: var(--blu-scuro); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.conto-parziale th, .conto-parziale td { background: var(--chiarore); font-weight: 800; }
.conto-evidenza th, .conto-evidenza td { background: #DFF3FA; font-size: 1.12rem; font-weight: 800; }
.conto-finale th, .conto-finale td { background: var(--notte); color: #fff; font-size: 1.2rem; font-weight: 800; padding-block: 17px; }
@media (max-width: 640px) { .conto th, .conto td, .conto caption { padding-inline: 10px; } .conto thead th { font-size: .75rem; } .conto-nota { padding-inline: 10px; } }
@media (max-width: 360px) {
  .conto th, .conto td, .conto caption { padding-inline: 7px; font-size: .86rem; }
  .conto thead th { font-size: .75rem; }
  .conto-evidenza th, .conto-evidenza td, .conto-finale th, .conto-finale td { font-size: .95rem; }
  .conto td { white-space: normal; }
}
/* Le decisioni: il colore accompagna il testo, che dice già tutto. */
.scheda-sopra { margin: 0 0 2px; font-size: .78rem; font-weight: 700; color: var(--testo-2); }
/* Articoli e guida con la password: un'etichetta piena, non un testo grigio (chiesto dall'utente l'8/11/2026). Sulla foto, in alto
   a sinistra e chiara, è la prima cosa che si vede della scheda (scelta sua fra due proposte); senza foto resta blu notte sopra il titolo. */
.scheda-riservato { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 14px 7px 11px; border-radius: 12px; background: var(--notte); color: var(--ghiaccio); font-size: .86rem; font-weight: 700; line-height: 1.3; }
.scheda-riservato .icona-sezione { flex: none; width: 18px; height: 18px; stroke-width: 2.2; }
.scheda > .immagine:first-child + .scheda-riservato { position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px); margin: 0; background: var(--ghiaccio); color: var(--notte); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.scheda--rosso, .scheda--ambra, .scheda--azzurra, .scheda--verde { text-align: left; }
.griglia .scheda--rosso::before, .griglia .scheda--ambra::before, .griglia .scheda--azzurra::before, .griglia .scheda--verde::before { display: none; }
.scheda ul { margin: 0; padding-left: 1.15em; }
.scheda--rosso { border-color: var(--rosso-gemma); }
.scheda--rosso > .icona-sezione { background: #FFE3E6; color: var(--rosso); }
.scheda--ambra { border-color: #E6A623; }
.scheda--ambra > .icona-sezione { background: #FFF1D6; color: #7A4F00; }
.scheda--verde { border-color: var(--verde); }
.scheda--verde > .icona-sezione { background: #DBF7EA; color: #17612F; }
/* I tre passi come un percorso. */
.passi--linea { gap: 46px; }
.passi--linea .passo { position: relative; text-align: left; }
.passi--linea .passo:not(:last-child)::after { content: "→"; position: absolute; right: -38px; top: 50%; transform: translateY(-50%); font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--blu); }
@media (max-width: 980px) {
  .passi--linea { grid-template-columns: minmax(0, 1fr); }
  .passi--linea .passo:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: 100%; transform: translate(-50%, 7px); }
}
/* Stesso ROAS, risultato opposto: l'ultima riga della tabella è il punto della sezione. */
.home .tabella tbody tr:last-child td { background: #DFF3FA; border-top: 2px solid var(--blu-scuro); padding-block: 18px; font-size: 1.08rem; font-weight: 800; color: var(--notte); }
.home .tabella tbody tr:last-child td:nth-child(2) strong { color: #17612F; font-size: 1.3rem; }
.home .tabella tbody tr:last-child td:nth-child(3) strong { color: var(--rosso); font-size: 1.3rem; }
@media (max-width: 360px) {
  .home .wp-block-table.tabella th, .home .wp-block-table.tabella td { padding: 8px 6px; font-size: .82rem; }
  .home .tabella tbody tr:last-child td:nth-child(2) strong, .home .tabella tbody tr:last-child td:nth-child(3) strong { font-size: 1.02rem; }
}
.avviso { margin: 20px 0 0; padding: 14px 18px; border-left: 5px solid #E6A623; border-radius: 0 12px 12px 0; background: #FFF1D6; color: var(--notte); font-weight: 800; line-height: 1.45; }
.foto-prodotto { display: block; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 8px; background: #fff; object-fit: cover; }

/* Stesso ROAS, due risultati: la linea delle vendite è a 1.000 su 1.160. */
.barra-riga { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; border-top: 1px solid var(--bordo); padding: 14px 0 12px; }
.barra-foto { display: block; width: 72px; height: 72px; border-radius: 12px; border: 1px solid var(--bordo); object-fit: cover; }
.barra-nome { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; }
.barra-esito { font-weight: 800; }
.barra-esito--piu { color: #17612F; }
.barra-esito--meno { color: var(--rosso); }
.barra-traccia { position: relative; height: 30px; }
.barra-traccia span { position: absolute; top: 0; bottom: 0; }
.barra-traccia .barra-vendite { left: 0; width: 86.2%; background: #DFF3FA; top: -5px; bottom: -5px; }
.barra-traccia::after { content: ""; position: absolute; left: 86.2%; top: -5px; bottom: -5px; width: 3px; background: var(--notte); z-index: 1; }
.barra-traccia .barra-merce { left: 0; background: var(--notte); border-radius: 6px 0 0 6px; }
.barra-traccia .barra-spedizione { background: var(--blu); }
.barra-traccia .barra-ads { width: 21.55%; background: var(--azzurro-forte); border-radius: 0 6px 6px 0; }
.barra-dettaglio { margin: 10px 0 0; font-size: .86rem; color: var(--testo-2); }
.barre-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; padding: 0; font-size: .84rem; color: var(--testo-2); }
.barre-legenda li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.barre-legenda span { width: 14px; height: 14px; border-radius: 4px; }
.barre-legenda .barra-vendite { background: #DFF3FA; box-shadow: inset 0 0 0 1px var(--notte); }
.barre-legenda .barra-merce { background: var(--notte); }
.barre-legenda .barra-spedizione { background: var(--blu); }
.barre-legenda .barra-ads { background: var(--azzurro-forte); }

/* Tutti i tuoi dati entrano, escono decisioni. Sul telefono in verticale: fonti sopra, risultati sotto. */
.pannello-motore { display: grid; grid-template-columns: minmax(0, 1fr) clamp(46px, 7vw, 96px) minmax(0, .9fr) minmax(0, 1fr); align-items: center; margin-top: 34px; text-align: left; box-shadow: var(--ombra); }
.motore-titolo { height: 20px; line-height: 20px; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--blu-scuro); margin: 0 0 10px; }
.motore-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 8px; }
.motore-elenco li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; background: var(--chiarore); border-radius: 12px; font-weight: 700; line-height: 1.3; }
.motore-elenco .logo-fonte { width: 26px; height: 26px; color: var(--blu); }
.motore-elenco--esiti { grid-auto-rows: auto; }
.motore-elenco--esiti li { background: var(--notte); color: #fff; }
.motore-elenco--esiti .motore-esito-forte { background: var(--verde); color: var(--notte); font-size: 1.08rem; font-weight: 800; padding: 16px; box-shadow: 0 0 0 3px rgba(34, 211, 138, .3); }
/* Le righe partono dall'elenco delle fonti, sotto il suo titolo alto 30 px: per questo righe e riquadro scendono di altrettanto. */
.motore-righe { align-self: end; width: 100%; height: calc(100% - 30px); max-width: none; overflow: visible; }
.motore-righe path { fill: none; stroke: var(--blu); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.motore-colonna--esiti { margin-left: clamp(34px, 5vw, 64px); }
.motore-centro { margin-top: 30px; position: relative; background: linear-gradient(135deg, var(--notte-2), var(--notte)); color: var(--testo-chiaro); border-radius: 20px; padding: 26px 20px; text-align: center; }
.motore-centro img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 14px; }
.motore-centro p { margin: 0; font-size: .92rem; font-weight: 600; }
.motore-centro::before, .motore-centro::after { content: ""; position: absolute; top: 50%; width: clamp(34px, 5vw, 64px); height: 3px; background: var(--blu); }
.motore-centro::before { display: none; }
.motore-centro::after { left: 100%; }
@media (max-width: 880px) {
  .pannello-motore { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .motore-righe { display: none; }
  .motore-colonna--esiti { margin-left: 0; }
  .motore-centro { margin-top: 0; }
  .motore-centro::before, .motore-centro::after { top: auto; left: 50%; right: auto; width: 3px; height: 30px; }
  .motore-centro::before { display: block; bottom: 100%; left: 20%; width: 60%; background: repeating-linear-gradient(90deg, var(--blu) 0 3px, transparent 3px calc((100% - 3px) / 4)); }
  .motore-centro::after { top: 100%; }
}

/* Comparsa */
.da-mostrare { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.da-mostrare.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print { .testata, .piede, .sezione-cta, .consenso, .barra-demo { display: none; } .da-mostrare { opacity: 1; transform: none; } }