/* Il tema dei video (14/11/2026), per le pagine con body.tema-video: si carica DOPO stile.css e risorse.css.
   Dal 15/11 lo usano anche l'informativa e le pagine delle guide (li' solo a schermo, con media="screen", insieme a
   /risorse-gratuite/assets/tema-video-guide.css: in stampa restano chiare, e i PDF delle guide non cambiano).
   Raffaele, 14/11: aspetto A, «il mondo dei tuoi video», per staccare la pagina da acquisizione.eu. Come nei video
   della serie: fondo ardesia, panna per testi e schede, ambra come unico accento, pittogrammi a linea in cerchi
   panna, la parola chiave del titolo in un riquadro ambra. Niente carta a quadretti, niente illustrazioni
   isometriche, niente etichette sopra i titoli. Contrasti misurati sui colori calcolati dal browser: la landing da
   ai/strumenti/verifica.mjs, le altre pagine da strumenti/verifica-sito.mjs. */

.tema-video {
  --fondo: #141A21;
  --fondo-2: #19212A;
  --fondo-3: #222C37;
  --inchiostro: #F2EDE3;
  --inchiostro-2: #C1BFB8;
  --inchiostro-3: #9AA0A8;
  --riga: rgba(242, 237, 227, .14);
  --riga-forte: rgba(242, 237, 227, .30);
  --accento: #F2A33A;
  --scuro: #141A21;
  background-color: var(--fondo);
  background-image: none;
  color: var(--inchiostro-2);
  color-scheme: dark;
}
.tema-video h1, .tema-video h2, .tema-video h3, .tema-video h4 { color: var(--inchiostro); }
/* le schede chiare (guide, calendario) tengono l'inchiostro scuro: senza questa riga il titolo delle guide usciva
   panna su carta, 1,1:1 (trovato da strumenti/verifica.mjs il 14/11) */
.tema-video .scheda-guida h2, .tema-video .scheda-guida h3, .tema-video .scheda h3 { color: var(--ardesia); }
.tema-video ::selection { background: var(--accento); color: var(--scuro); }
.tema-video :focus-visible { outline-color: var(--accento); }
.tema-video .salta, .tema-video .salta:focus, .tema-video .salta:hover { background: var(--inchiostro); color: var(--scuro); }
.tema-video .introduzione { color: var(--inchiostro-2); }
.tema-video .collegamento { color: var(--accento); }
.tema-video .collegamento:hover { color: var(--inchiostro); }

/* la parola chiave nel riquadro ambra, come nei titoli dei video. Sta su una riga sola (inline-block): cosi' il
   riquadro non sale sulle righe vicine, che col titolo a interlinea stretta succederebbe */
.evidenza {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .02em .16em .07em;
  border-radius: .14em;
  background-color: var(--accento);
  color: var(--scuro);
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Testata ---------- */
.tema-video .testata { background: rgba(20, 26, 33, .86); border-bottom-color: var(--riga); }
.tema-video .marchio { color: var(--inchiostro); }
.tema-video .menu a { color: var(--inchiostro-2); }
.tema-video .menu a:hover { color: var(--inchiostro); background: rgba(242, 237, 227, .08); }
.tema-video .pulsante-secondario { border-color: var(--riga-forte); background: transparent; color: var(--inchiostro); }
.tema-video .pulsante-secondario:hover { border-color: var(--inchiostro); background: var(--fondo-3); color: var(--inchiostro); box-shadow: none; }

/* ---------- Sezioni ---------- */
.tv-rialzo { background: var(--fondo-2); }
/* l'unica banda chiara: la scheda panna dei video, larga quanto la pagina */
.tv-carta { background: var(--panna); color: var(--tenue); color-scheme: light; }
.tema-video .tv-carta h2, .tema-video .tv-carta h3 { color: var(--ardesia); }
.tema-video .tv-carta .introduzione { color: var(--tenue); }
.tema-video .tv-carta ::selection { background: var(--ardesia); color: var(--panna); }
.tema-video .tv-carta :focus-visible, .tema-video .tv-passo-chiaro :focus-visible, .tema-video .scheda :focus-visible, .tema-video .scheda-guida :focus-visible { outline-color: var(--ambra-titolo); }

/* i pittogrammi dei video: linea su un cerchio pieno */
.tv-pittogramma { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--inchiostro); color: var(--scuro); }
.tv-carta .tv-pittogramma { background: var(--ardesia); color: var(--panna); }

/* ---------- 1. La promessa ---------- */
.tv-hero { padding-top: clamp(36px, 5vw, 76px); padding-bottom: clamp(28px, 4vw, 56px); }
.tv-hero-griglia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 76px); align-items: center; }
.tv-hero h1 { max-width: 13em; font-size: clamp(38px, 4.5vw, 62px); line-height: 1.06; letter-spacing: -.035em; }
/* «Un processo alla volta.» va a capo intera, non resta «Un» da solo in fondo alla riga del riquadro; sul telefono,
   dove non sta su una riga, va a capo al suo interno */
.tv-riga { display: inline-block; }
/* il punto resta attaccato al riquadro: senza, il browser lo mandava da solo all'inizio della riga dopo (visto nella
   misura a 1440 px del 14/11), perche' dopo un riquadro inline-block si puo' sempre andare a capo */
.tv-unito { white-space: nowrap; }
.tv-sottotitolo { margin-top: 22px; max-width: 33em; color: var(--inchiostro-2); font-size: clamp(17px, 1.45vw, 19.5px); }
.tv-nota { margin-top: 14px; max-width: 34em; color: var(--inchiostro-3); font-size: 14.5px; text-wrap: pretty; }
.tema-video .prove { color: var(--inchiostro-3); }
.tema-video .prove strong { color: var(--inchiostro); }
.tema-video .prove li + li::before { background: var(--riga-forte); }
.tv-hero-video { width: clamp(230px, 21vw, 290px); margin: 0; }
.tv-hero-video .reel-apri, .tv-hero-video .reel-video { border-radius: 22px; }
.tv-hero-video figcaption { margin-top: 12px; color: var(--inchiostro-3); font-size: 14px; line-height: 1.4; }

/* ---------- 2. Il problema, prima e dopo ---------- */
.tv-prima-dopo { margin: 44px 0 0; padding: 0; border-top: 1px solid var(--riga); list-style: none; }
.tv-pd { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 76px); align-items: center; padding: clamp(24px, 2.8vw, 34px) 0; border-bottom: 1px solid var(--riga); }
.tv-pd-citazione { color: var(--inchiostro); font-size: clamp(26px, 3.1vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.tv-pd-citazione + p { margin-top: 14px; max-width: 30em; font-size: 18px; }
.tv-pd-dopo { max-width: 372px; margin: 0; justify-self: end; width: 100%; }
.tv-pd-dopo .anello-video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: #16191F; outline: 1px solid var(--riga); outline-offset: -1px; }
.tv-pd-dopo figcaption { margin-top: 12px; color: var(--inchiostro-2); font-size: 15.5px; line-height: 1.45; }
.tv-pd-dopo figcaption strong { color: var(--accento); }
.tema-video .ponte { color: var(--inchiostro); }

/* ---------- 3. I processi ---------- */
.tv-numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; max-width: 920px; margin: 34px 0 0; padding: 0; list-style: none; }
.tv-numeri li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; font-size: 16px; line-height: 1.45; }
.tv-numeri strong { min-width: 1.9em; color: var(--accento); font-size: clamp(40px, 4vw, 54px); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.tema-video .reel-introduzione { color: var(--inchiostro-2); }
.tema-video .reel-freccia { border-color: var(--riga-forte); background: var(--fondo-3); color: var(--inchiostro); }
.tema-video .reel-freccia:hover:not(:disabled) { border-color: var(--inchiostro); background: var(--fondo-3); }
.tema-video .reel-apri, .tema-video .reel-video { box-shadow: none; outline: 1px solid var(--riga); outline-offset: -1px; }
.tema-video .reel-apri:hover { box-shadow: none; }
.tema-video .reel-giorno, .tema-video .reel-guida { color: var(--accento); }

/* ---------- 4. L'AI prepara, tu decidi ---------- */
.tv-regole { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 76px); margin: 44px 0 0; padding: 0; list-style: none; }
.tv-regole li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-content: start; padding: 26px 0; border-top: 1px solid var(--filo-forte); }
.tv-regole .tv-pittogramma { grid-row: 1 / span 2; }
.tv-regole h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.tv-regole p { margin-top: 8px; }

/* ---------- 5. Il tuo processo e' un buon candidato? ---------- */
.tv-candidato-griglia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.tv-esempi { margin-top: 18px; max-width: 34em; }
.tv-candidato { border: 1px solid var(--riga-forte); border-radius: 20px; background: var(--fondo-2); }
.tv-domanda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--riga); }
.tv-domanda h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.tv-domanda h3 + p { margin-top: 6px; font-size: 15.5px; line-height: 1.45; }
.tv-sn { display: inline-flex; gap: 8px; }
.tv-sn label { position: relative; cursor: pointer; }
.tv-sn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tv-sn span { display: grid; place-items: center; min-width: 62px; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--riga-forte); border-radius: 999px; color: var(--inchiostro); font-weight: 700; transition: background-color var(--t-feedback) var(--quint), border-color var(--t-feedback) var(--quint), color var(--t-feedback) var(--quint); }
.tv-sn label:hover span { border-color: var(--inchiostro); }
.tv-sn input:checked + span { border-color: var(--inchiostro); background: var(--inchiostro); color: var(--scuro); }
.tv-sn input[value="si"]:checked + span { border-color: var(--accento); background: var(--accento); }
.tv-sn input:focus-visible + span { outline: 3px solid var(--accento); outline-offset: 3px; }
.tv-esito { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; min-height: 92px; padding: 20px 24px; color: var(--inchiostro); font-size: 17px; font-weight: 700; line-height: 1.4; }
.tv-esito a { flex: none; }

/* ---------- 6. Sessanta giorni ---------- */
.tv-tempo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); gap: 0 22px; margin-top: 48px; }
.tv-tempo-blocco { padding-top: 16px; border-top: 3px solid var(--riga-forte); }
.tv-tempo-largo { border-top-color: var(--accento); }
.tv-tempo-quando { color: var(--inchiostro); font-size: 15px; font-weight: 800; }
.tv-tempo-largo .tv-tempo-quando { color: var(--accento); }
.tv-tappe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.tv-tappe h3 { margin-top: 16px; font-size: 20px; line-height: 1.22; letter-spacing: -.02em; }
.tv-tappe p { margin-top: 8px; font-size: 16px; line-height: 1.5; }

/* ---------- 7. Casi ---------- */
.tv-casi { margin: 44px 0 0; padding: 0; border-top: 1px solid var(--riga); list-style: none; }
.tv-casi li { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 190px); gap: 12px clamp(20px, 4vw, 56px); align-items: start; padding: 32px 0; border-bottom: 1px solid var(--riga); }
.tv-caso-nome { color: var(--inchiostro); font-size: 17px; font-weight: 800; line-height: 1.3; }
.tv-stato { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(242, 163, 58, .16); color: var(--accento); font-size: 12.5px; font-weight: 700; }
.tv-casi h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.tv-casi h3 + p { margin-top: 10px; max-width: 38em; }
.tv-caso-numero { font-size: 15px; line-height: 1.35; }
.tv-caso-numero strong { display: block; color: var(--inchiostro); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }

/* ---------- 8. Chi sono ---------- */
.tema-video .chi-testo p { color: var(--inchiostro-2); }
.tema-video .ritratto::before { display: none; }
.tema-video .ritratto img { border-radius: 20px; box-shadow: none; }
.tema-video .tv-chi-azione { margin-top: 26px; }

/* ---------- 9. L'offerta ---------- */
.tv-percorso { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; margin-top: 44px; }
.tv-passo { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--riga-forte); border-radius: 20px; background: var(--fondo-2); }
.tv-passo h3 { font-size: 30px; letter-spacing: -.03em; }
.tv-passo-durata { margin-top: 10px; color: var(--inchiostro); font-size: 17px; font-weight: 600; line-height: 1.45; }
.tv-passo-per { margin-top: 6px; font-size: 15.5px; }
.tv-passo .pulsante { align-self: flex-start; }
.tema-video .tv-passo .voci strong { color: var(--inchiostro); }
.tema-video .tv-passo .voci span { color: var(--inchiostro-2); }
.tema-video .tv-passo .voci span::before { color: var(--accento); }
.tv-passo-chiaro { border-color: var(--panna); background: var(--panna); color: var(--tenue); color-scheme: light; }
.tema-video .tv-passo-chiaro h3, .tema-video .tv-passo-chiaro .tv-passo-durata, .tema-video .tv-passo-chiaro .voci strong { color: var(--ardesia); }
.tema-video .tv-passo-chiaro .voci span { color: var(--tenue); }
.tema-video .tv-passo-chiaro .voci span::before { color: var(--ambra-testo); }
.tv-percorso-poi { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 148px; padding: 0 14px; color: var(--inchiostro-2); font-size: 13.5px; font-weight: 700; text-align: center; }
.tv-percorso-poi svg { width: 100%; height: 12px; color: var(--riga-forte); }
.tv-non-rischi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 44px; align-items: start; margin-top: 28px; padding: 26px 28px; border: 1px solid var(--riga-forte); border-radius: 20px; }
.tv-non-rischi h3 { font-size: 20px; line-height: 1.3; }
.tv-non-rischi .spunte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin-top: 2px; }
.tema-video .tv-non-rischi .spunte li { color: var(--inchiostro); }

/* ---------- 10. Domande: una lista, non schede ---------- */
.tv-domande-griglia { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.tv-domande-griglia h2 { position: sticky; top: 104px; }
.tv-domande { border-top: 1px solid var(--riga-forte); }
.tema-video .tv-domande details { overflow: visible; border: 0; border-bottom: 1px solid var(--riga-forte); border-radius: 0; background: none; }
.tema-video .tv-domande summary { padding: 20px 48px 20px 0; color: var(--inchiostro); font-size: 19px; line-height: 1.3; }
.tema-video .tv-domande summary::after { right: 10px; border-color: var(--inchiostro); }
.tema-video .tv-domande summary:hover { background: none; color: var(--accento); }
.tema-video .tv-domande summary:hover::after { border-color: var(--accento); }
.tema-video .tv-domande details p { max-width: 44em; padding: 0 48px 22px 0; color: var(--inchiostro-2); }

/* ---------- 11. Le guide: tutte, in una fila che scorre come quelle dei video (15/11) ---------- */
/* Usa .reel-gruppo, .reel-fila e .reel-frecce dei video, cosi' le frecce le muove lo stesso codice di pagina.js.
   Tre schede per volta sul computer, due sul tablet, una e un pezzo della successiva sul telefono. */
.tv-guide { margin-top: 0; }
.tv-guide .reel-testa { align-items: flex-end; }
.tv-guide-fila { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; margin-top: 36px; list-style: none; }
.tv-guide-fila > li { min-width: 0; scroll-snap-align: start; }
.tema-video .tv-guide + .risorse-tutte { margin-top: 20px; }

/* ---------- 12. Prenota ---------- */
.tema-video .prenota-testo > p { color: var(--inchiostro-2); }

/* ---------- Piede ---------- */
.tema-video .piede { border-top-color: var(--riga); color: var(--inchiostro-3); }
.tema-video .piede-collegamenti a { color: var(--inchiostro); text-decoration-color: var(--riga-forte); }
.tema-video .piede-collegamenti a:hover { text-decoration-color: var(--inchiostro); }
.tema-video .piede-legale { border-top-color: var(--riga); }

/* ---------- Le altre pagine: testi comuni e informativa (15/11) ---------- */
.tema-video .sottotitolo { color: var(--inchiostro-2); }
.tema-video .legale p { color: var(--inchiostro-2); }
.tema-video .legale strong { color: var(--inchiostro); }
.tema-video .legale .legale-breve { border-color: var(--riga); background: var(--fondo-2); color: var(--inchiostro); }
.tema-video .legale :is(.legale-norma, .legale-data) { color: var(--inchiostro-3); }
.tema-video .legale a { color: var(--inchiostro); text-decoration-color: var(--accento); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tema-video .legale a:hover { color: var(--accento); }

/* ---------- Movimento ---------- */
/* Non la stessa entrata su ogni blocco: il contenuto c'e' gia'. Si muovono tre cose: la prima schermata che si posa,
   il riquadro ambra del titolo che si riempie (come nei video: la parola diventa scura solo a riquadro pieno), e il
   «dopo» di ogni riga che arriva da destra quando la riga entra. Tutto sotto .con-moto, assente col movimento ridotto. */
.con-moto .tema-video [data-entra] { opacity: 1; transform: none; }
.con-moto .tema-video .tv-hero [data-entra] { opacity: 0; transform: translateY(18px); }
.con-moto .tema-video .tv-hero [data-entra].visto { opacity: 1; transform: none; transition: opacity 600ms var(--expo), transform 600ms var(--expo); transition-delay: calc(var(--i, 0) * 80ms); }
.con-moto .tema-video .tv-hero h1 .evidenza { color: var(--inchiostro); transition: color 0ms linear 780ms; }
.con-moto .tema-video .tv-hero h1 .evidenza::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--fondo); transform-origin: 100% 50%; transition: transform 460ms var(--expo) 320ms; }
.con-moto .tema-video .tv-hero h1.visto .evidenza { color: var(--scuro); }
.con-moto .tema-video .tv-hero h1.visto .evidenza::after { transform: scaleX(0); }
.con-moto .tema-video .tv-pd[data-entra] .tv-pd-dopo { opacity: 0; transform: translateX(28px); }
.con-moto .tema-video .tv-pd[data-entra].visto .tv-pd-dopo { opacity: 1; transform: none; transition: opacity 520ms var(--expo) 120ms, transform 520ms var(--expo) 120ms; }

/* ---------- Misure ---------- */
/* finestre basse dei portatili: il video della prima schermata resta dentro lo schermo */
@media (min-width: 961px) and (max-height: 820px) {
  .tv-hero { padding-top: 40px; }
  .tv-sottotitolo { margin-top: 16px; }
  .tv-hero .comandi { margin-top: 22px; }
  .tv-hero-video { width: min(21vw, calc((100vh - 230px) * .5625)); min-width: 200px; }
}
@media (max-width: 960px) {
  .tv-hero-griglia, .tv-pd, .tv-candidato-griglia, .tv-domande-griglia, .tv-percorso, .tv-regole, .tv-numeri { grid-template-columns: minmax(0, 1fr); }
  .tv-hero-video { width: min(62vw, 290px); }
  .tv-pd-dopo { justify-self: start; }
  .tv-tempo { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tv-tappe { grid-auto-flow: row; gap: 22px; }
  .tv-tappe li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-content: start; }
  .tv-tappe .tv-pittogramma { grid-row: 1 / span 2; }
  .tv-tappe h3 { margin-top: 2px; }
  .tv-casi li { grid-template-columns: minmax(0, 1fr); }
  .tv-percorso-poi { flex-direction: row; width: auto; padding: 16px 0; }
  .tv-percorso-poi svg { width: 12px; height: 34px; }
  .tv-percorso-poi .freccia-orizzontale { display: none; }
  .tv-non-rischi, .tv-non-rischi .spunte { grid-template-columns: minmax(0, 1fr); }
  .tv-domande-griglia h2 { position: static; }
  /* larghezza fissa in percentuale, non minmax(): in una fila che scorre non c'e' spazio libero da distribuire, quindi
     una colonna minmax(240px, 82%) resta al minimo (misurato il 15/11: 240 px, con la scheda alta 738) */
  .tv-guide-fila { grid-auto-columns: 46%; gap: 16px; }
}
@media (min-width: 961px) {
  .tv-percorso-poi .freccia-verticale { display: none; }
}
@media (max-width: 640px) {
  .tv-domanda { grid-template-columns: minmax(0, 1fr); }
  .tema-video .tv-domande summary { font-size: 18px; }
  .tv-pd-citazione + p { font-size: inherit; }
  /* le tre prove una sotto l'altra: su una riga il puntino di separazione finiva fuori dal margine */
  .tema-video .prove { flex-direction: column; gap: 6px; }
  .tema-video .prove li + li::before { display: none; }
  .tv-guide-fila { grid-auto-columns: 84%; }
}
/* testata stretta: nome, «AI» e pulsante devono stare su una riga a 360 px */
@media (max-width: 480px) {
  .tema-video .marchio { gap: 8px; white-space: nowrap; }
  .tema-video .testata .pulsante-piccolo { white-space: nowrap; }
  .tema-video .marchio span { font-size: 16px; }
  .tema-video .testata .pulsante-piccolo { padding: 9px 13px; }
  .tema-video .testata .pulsante-piccolo .freccia { display: none; }
}
@media (max-width: 380px) {
  .tema-video .marchio img { display: none; }
}