/* ============================================================================
   MAISRI — kit unico web (CSS). v1.6.1, 2026-09-25. GENERATO da build_brand_kit.py:
   non modificare a mano — si cambia lo script (o le fonti che legge) e si rigenera.
   Fonti: maisri_brand_tokens.css (colori, tipografia) · ADR-036 emendato 23/09 (formula Maisri)
   ADR-037 (cementazione colori tema sera) · grammatica 05_web/grammatica_moduli_pagina.md v1.1
   (ricette riga F) · Visual OS §4 riga 119 (luce oro, emendamento 2026-09-21) · spec 2026-09-23
   «fondazione: kit 1.3.0 con ricette e colori per formula, home vera, controllo dei livelli» ·
   spec 2 2026-09-23 «pagine minime e di lettura» (kit 1.4.0) ·
   spec 3 2026-09-23 «pagine di racconto» (kit 1.5.0) ·
   spec 4a 2026-09-24 «hub done-for-you e pagine singole» (kit 1.6.0) ·
   spec 4a-bis 2026-09-25 «spaziatura dopo card e griglie in banda» (kit 1.6.1).
   Blocchi marcati: FONTS, PALETTE, LUCE, RICETTE. Le sole misure non cementate sono marcate
   [DERIVED] nel blocco RICETTE.
   ============================================================================ */


/* FONTS:BEGIN */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSansThai-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSansThai-SemiBold.woff2") format("woff2");
}
:root {
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-thai: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --font-wordmark: "IBM Plex Sans", system-ui, sans-serif;
  --weight-wordmark: 600;
  --weight-acronym: 700;
  --line-height-body: 1.6;
  --line-height-thai: 1.8;
  --radius: 6px;
}
/* FONTS:END */

/* PALETTE:BEGIN  (esadecimali verbatim da maisri_brand_tokens.css; 10 ruoli colore x 2 temi e derivati per formula Maisri, ADR-036 emendato 23/09, ADR-037; alias del sito) */
:root {
  --color-primary: #EC7B18;
  --color-anchor: #602820;
  --color-secondary: var(--color-anchor);
  --color-accent: var(--color-primary);
  --color-counterpoint: #0771A6;
  --color-cta-card: #1297D9;
  --color-surface: #FAF8F5;
  --color-surface-base: #F3EBDD;
  --color-card: #F9F8F6;
  --color-island: #F0EFEA;
  --color-canvas: #FAF8F5;
  --color-canvas-night: #171308;
  --color-ink: #3C3836;
  --color-ink-display: #1B1714;
  --color-heading: #310802;
  --color-heading-night: #E7DCDA;
  --color-heading-card: #931906;
  --color-text-secondary: #021E2C;
  --color-text-secondary-night: #C2CFD6;
  --color-divider: #AB8207;
  --color-divider-night: #7D6B36;
  --color-spark-gold: #DDB43C;
  --color-neutral-sand: #D9C9AC;
  --color-neutral-warmgrey: #8C8275;
  --color-neutral-byp: #38332D;
  --color-on-dark: #EDE6D6;
  --color-on-dark-muted: #C9C2B0;
  --color-signature-jum: #EB5D47;
  --color-signature-jum-night: #D59990;
  --kit-fondo: var(--color-surface-base);
  --kit-identita: var(--color-primary);
  --kit-titolo: var(--color-heading);
  --kit-titolo-card: var(--color-heading-card);
  --kit-testo-sec: var(--color-text-secondary);
  --kit-etichetta: var(--color-counterpoint);
  --kit-accento-card: var(--color-counterpoint);
  --kit-divisore: var(--color-divider);
  --kit-cta: var(--color-counterpoint);
  --kit-cta-ink: var(--color-card);
  --kit-card: var(--color-card); /* verbatim: cementato */
  --kit-isola: #EBE7DE; /* derivato: color-mix(in srgb, var(--color-island) 80%, var(--color-neutral-sand)) */
  --kit-testo: var(--color-ink);
  --kit-testo-terzo: var(--color-neutral-byp);
  --kit-badge: var(--color-counterpoint);
  --kit-card-lead: var(--kit-testo-sec);
  --bg-sheet: var(--kit-card);
  --text-default: var(--kit-testo);
  --bg-page: var(--kit-fondo);
  --text-heading: var(--kit-titolo);
  --text-secondary: var(--kit-testo-sec);
  --divider: var(--kit-divisore);
  --link: var(--kit-etichetta);
  --signature: var(--color-signature-jum);
  --wordmark: var(--color-ink-display);
  --byp: var(--color-neutral-byp);
  --accent: var(--color-primary);
  --accent-anchor: var(--color-anchor);
  --kit-cta-fisso: var(--color-cta-card); /* alias per il sito: blu CTA card, identico giorno/sera (LEGACY di site.css, evita di citare il token per nome) */
}
[data-theme="night"] {
  --kit-fondo: var(--color-canvas-night);
  --kit-identita: var(--color-primary);
  --kit-titolo: var(--color-heading-night);
  --kit-titolo-card: var(--color-heading-night);
  --kit-testo-sec: var(--color-text-secondary-night);
  --kit-etichetta: var(--kit-accento-sera);
  --kit-accento-card: var(--kit-accento-sera);
  --kit-divisore: var(--color-divider-night);
  --kit-cta: var(--color-cta-card);
  --kit-cta-ink: var(--color-canvas-night);
  --kit-card: #2B261E; /* derivato: color-mix(in srgb, var(--color-neutral-byp) 60%, var(--color-canvas-night)) */
  --kit-isola: #1E190F; /* derivato: color-mix(in srgb, var(--color-neutral-byp) 20%, var(--color-canvas-night)) */
  --kit-accento-sera: #5FC1F2; /* derivato: hsl(from var(--color-cta-card) h s 66%) */
  --kit-testo: var(--color-on-dark);
  --kit-testo-terzo: var(--color-on-dark-muted);
  --kit-badge: var(--kit-accento-sera);
  --kit-card-lead: var(--kit-testo-terzo);
  --bg-page: var(--kit-fondo);
  --text-heading: var(--kit-titolo);
  --text-secondary: var(--kit-testo-sec);
  --divider: var(--kit-divisore);
  --link: var(--kit-etichetta);
  --signature: var(--color-signature-jum-night);
  --wordmark: var(--color-surface-base);
  --byp: var(--color-neutral-sand);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
  --kit-fondo: var(--color-canvas-night);
  --kit-identita: var(--color-primary);
  --kit-titolo: var(--color-heading-night);
  --kit-titolo-card: var(--color-heading-night);
  --kit-testo-sec: var(--color-text-secondary-night);
  --kit-etichetta: var(--kit-accento-sera);
  --kit-accento-card: var(--kit-accento-sera);
  --kit-divisore: var(--color-divider-night);
  --kit-cta: var(--color-cta-card);
  --kit-cta-ink: var(--color-canvas-night);
  --kit-card: #2B261E; /* derivato: color-mix(in srgb, var(--color-neutral-byp) 60%, var(--color-canvas-night)) */
  --kit-isola: #1E190F; /* derivato: color-mix(in srgb, var(--color-neutral-byp) 20%, var(--color-canvas-night)) */
  --kit-accento-sera: #5FC1F2; /* derivato: hsl(from var(--color-cta-card) h s 66%) */
  --kit-testo: var(--color-on-dark);
  --kit-testo-terzo: var(--color-on-dark-muted);
  --kit-badge: var(--kit-accento-sera);
  --kit-card-lead: var(--kit-testo-terzo);
  --bg-page: var(--kit-fondo);
  --text-heading: var(--kit-titolo);
  --text-secondary: var(--kit-testo-sec);
  --divider: var(--kit-divisore);
  --link: var(--kit-etichetta);
  --signature: var(--color-signature-jum-night);
  --wordmark: var(--color-surface-base);
  --byp: var(--color-neutral-sand);
  }
}
/* PALETTE:END */

/* LUCE:BEGIN  (Visual OS §4 riga 119: --kit-filetto, --kit-luce-sfondo, --kit-bordo-video, costanti di casa, invariate per tema. --kit-luce-esterna e --kit-luce-interna: struttura HDI in oro 45 (ADR-036), cambiano di sera — voce 31/41 del cantiere 22/09) */
:root {
  --kit-luce-esterna: 0 0 0 1px rgba(171,130,7,0.35), 0 2px 1px rgba(221,180,60,0.7), 0 8px 6px rgba(171,130,7,0.3), 0 18px 12px rgba(171,130,7,0.15);
  --kit-luce-interna: none;
  --kit-luce-sfondo: radial-gradient(ellipse at center, rgba(221,180,60,0.11) 0%, rgba(221,180,60,0.05) 55%, rgba(221,180,60,0) 100%);
  --kit-filetto: 1px solid rgba(171,130,7,0.55);
  --kit-bordo-video: rgba(171,130,7,0.35);
}
[data-theme="night"] {
  --kit-luce-esterna: 0 0 0 1px rgba(221,180,60,0.26), 0 2px 1px rgba(221,180,60,0.5), 0 8px 6px rgba(221,180,60,0.28), 0 18px 12px rgba(221,180,60,0.16);
  --kit-luce-interna: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --kit-luce-esterna: 0 0 0 1px rgba(221,180,60,0.26), 0 2px 1px rgba(221,180,60,0.5), 0 8px 6px rgba(221,180,60,0.28), 0 18px 12px rgba(221,180,60,0.16);
    --kit-luce-interna: none;
  }
}
/* LUCE:END */

/* RICETTE:BEGIN  (solo classi .kit-, nessun selettore di elemento, nessun attributo di
   commutatore (tema, luce o movimento): i temi vivono nel blocco PALETTE attraverso le
   variabili di ruolo. Misure [DERIVED]: spec 2026-09-23, Minimal context — non cementate.
   Grammatica riga F · F.1) */

/* base — container, sezione, banda-isola — home_pagine.css / script v1.2.0 */
.kit-container { width: 100%; max-width: 44rem; /* [DERIVED] */ margin: 0 auto; padding: 0 1rem; }
.kit-sezione { padding: 3rem 0; /* [DERIVED] */ }
@media (min-width: 900px) { .kit-sezione { padding: 4rem 0; /* [DERIVED] */ } }
.kit-banda-isola { background: var(--kit-isola); border-top: 1px solid var(--kit-divisore); border-bottom: 1px solid var(--kit-divisore); }

/* tipografia — voce 34/35 (colore per ruolo) */
.kit-occhiello { display: block; font-family: var(--font-body); font-size: 0.875rem; /* [DERIVED] */ font-weight: 600; color: var(--kit-etichetta); margin: 0 0 0.5rem; }
.kit-h1 { font-family: var(--font-thai); font-weight: 600; font-size: clamp(1.5rem, 2.2vw + 0.75rem, 2rem); /* [DERIVED] */ line-height: 1.45; /* [DERIVED] */ color: var(--kit-titolo); margin: 0 0 0.5em; }
.kit-h2 { font-family: var(--font-thai); font-weight: 600; font-size: 1.375rem; /* [DERIVED] */ line-height: var(--line-height-thai); color: var(--kit-titolo); margin: 0 0 0.5em; }
.kit-h3 { font-family: var(--font-thai); font-weight: 600; font-size: 1.25rem; /* [DERIVED] */ line-height: var(--line-height-thai); color: var(--kit-titolo-card); margin: 0 0 0.5em; }
.kit-lead { font-size: 1.25rem; /* [DERIVED] */ color: var(--kit-testo-sec); margin: 0 0 1em; }
.kit-corpo { font-size: 1.125rem; /* [DERIVED] */ color: var(--kit-testo); margin: 0 0 1em; }

/* apertura — ricetta 1 (F.1); font-weight 600 dalla regola .apertura__yt, E2; variante articolo v1.1 (grammatica A.1, spec 2) */
.kit-apertura { padding: 2.5rem 0 3rem; /* [DERIVED] */ }
@media (min-width: 900px) { .kit-apertura { padding: 2.5rem 0 4rem; /* [DERIVED] */ } }
.kit-apertura__testo { max-width: 44rem; /* [DERIVED] */ }
.kit-apertura__azioni { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; }
.kit-apertura__azioni .kit-link { color: var(--kit-testo-sec); font-weight: 600; }
.kit-apertura__azioni .kit-link:hover, .kit-apertura__azioni .kit-link:focus-visible { color: var(--link); }
.kit-apertura__media { margin-top: 2rem; width: 100%; }
.kit-apertura__didascalia { margin-top: 0.75rem; font-size: 0.8rem; color: var(--kit-testo-sec); text-align: center; max-width: 22ch; margin-left: auto; margin-right: auto; }
.kit-apertura--articolo .kit-occhiello { display: flex; align-items: center; gap: 0.625rem; }
.kit-apertura__autrice { width: 2.5rem; height: 2.5rem; /* [DERIVED] */ border-radius: 50%; object-fit: cover; flex: none; }
.kit-apertura__immagine { margin: 1.5rem 0 0; }
.kit-apertura__immagine img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-spark-gold); }
.kit-apertura--404 .kit-link { display: inline-flex; align-items: center; min-height: 3rem; }
@media (min-width: 900px) {
  .kit-apertura--home .kit-container { display: grid; grid-template-columns: 1fr; gap: 2.5rem; /* [DERIVED] */ align-items: center; }
  .kit-apertura--home .kit-video { aspect-ratio: 16 / 9; width: 100%; max-width: 44rem; /* [DERIVED] */ }
  .kit-apertura--home .kit-video__cover--916 { display: none; }
  .kit-apertura--home .kit-video__cover--169 { display: block; }
}
@media (max-width: 899.98px) {
  .kit-apertura--home .kit-video { width: min(100%, calc(72vh * 9 / 16)); margin: 0 auto; }
}

/* figura — ricetta 2 */
.kit-figura { margin: 1.5rem 0; }
.kit-figura img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-spark-gold); }
.kit-figura figcaption { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--kit-testo-terzo); }

/* colonna di lettura — modulo A.1 (spec 2): capitoli kit-h2 + kit-corpo; elementi lista e firma; spaziature da .legal h2/h3 e .article__body .sign di site.css */
.kit-colonna .kit-h2:not(:first-child) { margin-top: 1.75rem; }
.kit-colonna .kit-h3 { margin-top: 1.25rem; }
.kit-lista { margin: 0 0 1em; padding-left: 1.25rem; font-size: 1.125rem; /* [DERIVED] */ color: var(--kit-testo); }
.kit-lista li + li { margin-top: 0.25rem; }
.kit-firma { font-size: 1.125rem; /* [DERIVED] */ font-weight: 600; color: var(--kit-testo); margin: 0 0 1em; }
/* parola-perno — elemento di colonna A.3 (spec 3): max 2 per pagina, mai cliccabile; da .pivot di site.css */
.kit-perno { color: var(--color-primary); font-weight: 600; }

/* cta e link */
.kit-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.75rem 1.5rem; background: var(--kit-cta); color: var(--kit-cta-ink); font-weight: 600; text-decoration: none; border-radius: 8px; /* [DERIVED] */ }
.kit-cta--card { background: var(--color-cta-card); }
.kit-link { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* card — ricetta 3 e anatomie (porta, post, offerta) */
.kit-card { position: relative; isolation: isolate; overflow: hidden; background: var(--kit-card); border-radius: 12px; /* [DERIVED] */ box-shadow: var(--kit-luce-esterna); border-top: 3px solid var(--kit-accento-card); padding: 1.5rem; }
.kit-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--kit-luce-interna); }
.kit-card > :last-child { margin-bottom: 0; }
.kit-card .kit-lead { color: var(--kit-card-lead); }
.kit-card .kit-link { color: var(--kit-accento-card); }
.kit-card__titolo { color: var(--kit-titolo-card); font-weight: 600; }
.kit-card--porta { display: block; text-decoration: none; color: inherit; }
.kit-card--porta:hover .kit-card__titolo { text-decoration: underline; text-decoration-color: var(--kit-accento-card); text-decoration-thickness: 3px; }
.kit-card--post { display: block; text-decoration: none; color: inherit; }
.kit-card--post:hover .kit-card__titolo { text-decoration: underline; text-decoration-color: var(--kit-accento-card); text-decoration-thickness: 3px; }
.kit-card__immagine { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); margin: 0 0 1rem; }
.kit-card__data { display: block; color: var(--kit-etichetta); font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.25rem; }
.kit-card__estratto { display: block; color: var(--kit-testo); font-size: 1rem; }
.kit-card__link { display: inline-flex; align-items: center; min-height: 3rem; margin-top: 0.5rem; color: var(--kit-accento-card); font-weight: 600; }
.kit-card--offerta { display: block; }
.kit-badge--chip { display: block; margin: 0 0 0.75rem; padding: 0; border: 0; border-radius: 0; font-size: 0.9375rem; color: var(--kit-etichetta); }
.kit-card__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 1em; }
.kit-card__meta dt { color: var(--kit-titolo-card); font-weight: 600; }
.kit-card__meta dd { margin: 0; }
.kit-card__lista { margin: 0 0 1em; padding-left: 1.25rem; color: var(--kit-testo); }
.kit-card__lista li + li { margin-top: 0.25rem; }

/* scheda offerta singola — A.2 (spec 4a): colonna breve in banda dentro la cornice della card (class="kit-card kit-scheda"); dl durata/prezzo; prezzo pieno barrato + attuale; nessun colore nuovo */
.kit-scheda { display: block; }
.kit-scheda .kit-h2 { margin-top: 0; }
.kit-scheda__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 1em; font-size: 1.125rem; /* [DERIVED] */ color: var(--kit-testo); }
.kit-scheda__meta dt { color: var(--kit-titolo-card); font-weight: 600; }
.kit-scheda__meta dd { margin: 0; }
.kit-scheda__pieno { text-decoration: line-through; color: var(--kit-testo-terzo); margin-right: 0.5rem; }
.kit-scheda__attuale { font-weight: 600; color: var(--kit-titolo-card); font-size: 1.25rem; /* [DERIVED] */ }
.kit-scheda__nota { grid-column: 2; font-size: 0.875rem; /* [DERIVED] */ color: var(--kit-testo-terzo); }

/* badge */
.kit-badge { display: inline-block; margin-left: 0.5rem; padding: 0 0.5rem; vertical-align: middle; font-size: 0.875rem; font-weight: 600; line-height: var(--line-height-thai); white-space: nowrap; color: var(--kit-badge); border: 1.5px solid var(--kit-badge); border-radius: 1rem; }

/* griglia R22 — ricetta 4 */
.kit-griglia { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .kit-griglia--1 { grid-template-columns: 1fr; }
  .kit-griglia--2 { grid-template-columns: repeat(2, 1fr); }
  .kit-griglia--3 { grid-template-columns: repeat(6, 1fr); }
  .kit-griglia--3 > * { grid-column: span 2; }
}
.kit-griglia--3:has(> :nth-child(7):last-child) > :nth-child(n+4) { grid-column: span 3; }
.kit-griglia--3:has(> :nth-child(8):last-child) > :nth-child(n+7) { grid-column: span 3; }
/* spaziatura dopo card o griglia in banda seguita da testo — spec 4a-bis 2026-09-25 (gap 5 del QA 4a, decisione di Andrea): passo 1.5rem già del kit (kit-percorso, kit-figura); griglia in banda o scheda A.2 seguite da un fratello (h2, p); senza fratello (porte della home e di maisri) non si applica */
.kit-banda-isola .kit-griglia + *, .kit-banda-isola .kit-scheda + * { margin-top: 1.5rem; }

/* porte / percorso — ricette 5, 6. .kit-porte non porta margin: sullo stesso elemento di
   .kit-container servirebbe solo a ribadire lo zero di un div (nessun margine proprio, come
   .porte__griglia in home_pagine.css), ma sovrascriverebbe per ordine di cascata il
   margin: 0 auto di centratura di .kit-container (bug trovato al Task 11, render non identico
   al riferimento: la banda-isola risultava senza centratura del contenuto). */
.kit-porte { }
.kit-percorso { margin-top: 1.5rem; }

/* contrasto — ricetta 7 */
.kit-contrasto { display: grid; gap: 2rem; }
@media (min-width: 900px) { .kit-contrasto { grid-template-columns: 1fr 1fr; align-items: center; } }
.kit-contrasto__meta { text-align: center; }
.kit-contrasto__svg { width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.kit-contrasto__etichetta { margin-top: 0.75rem; font-weight: 600; }

/* serie — ricetta 8 */
.kit-serie .kit-diagramma { margin: 1.5rem 0; width: 100%; height: auto; }
.kit-serie__giorni { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.kit-serie__giorno { font-weight: 600; color: var(--kit-titolo-card); margin-right: 0.375rem; }
.kit-serie__canali { display: flex; gap: 1rem; }
.kit-serie__canali a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
.kit-serie__canali svg { width: 36px; height: 36px; fill: initial; stroke: none; }
.kit-serie__canali a:hover { opacity: 0.8; }
@media (min-width: 720px) { .kit-serie__giorni { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; text-align: center; } }

/* divisore — ricetta 10 */
.kit-divisore { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 0; }
.kit-divisore__linea { flex: 1; height: 1px; background: var(--kit-divisore); }
.kit-divisore__petalo { width: 14px; height: 14px; flex: none; fill: var(--kit-identita); }

/* chiusura — ricette 12, 12a */
.kit-chiusura { }
.kit-chiusura__azioni { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.kit-chiusura__azioni .kit-link { color: var(--kit-testo-sec); }
.kit-chiusura__azioni .kit-link:hover, .kit-chiusura__azioni .kit-link:focus-visible { color: var(--link); }
.kit-chiusura--leggera ul { list-style: none; margin: 0; padding: 0; }
.kit-chiusura--leggera li + li { margin-top: 0.5rem; }
.kit-chiusura--leggera a { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0.5rem 0.25rem; }

/* video (apertura home) */
.kit-video { position: relative; aspect-ratio: 9 / 16; width: min(100%, 480px, calc((100vh - 200px) * 9 / 16)); border-radius: 12px; /* [DERIVED] */ overflow: hidden; background: var(--color-island); border: 1px solid var(--kit-bordo-video); }
@media (max-width: 720px) { .kit-video { width: min(100%, calc(72vh * 9 / 16)); margin: 0 auto; } }
.kit-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: var(--kit-cta); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.kit-video__play svg { width: 18px; height: 18px; fill: var(--kit-cta-ink); }
.kit-video__cover--916, .kit-video__cover--169 { display: block; width: 100%; height: 100%; object-fit: cover; }
.kit-video__cover--169 { display: none; }

/* luce di sfondo */
.kit-luce-sfondo { background: var(--kit-luce-sfondo); pointer-events: none; }

/* diagramma (serie + contrasto) */
.kit-diagramma { display: block; }
.kit-petalo { fill: var(--kit-identita); opacity: 0; }
.kit-filo { fill: none; stroke: var(--kit-divisore); stroke-width: 1.5; stroke-dasharray: var(--kit-len, 1); stroke-dashoffset: var(--kit-len, 1); }
.kit-punto { fill: var(--color-neutral-warmgrey); }

/* reveal (ADR-034, eccezione JS) */
.js .kit-reveal:not(.in) { opacity: 0; transform: translateY(24px); }
.kit-reveal { transition: opacity 0.3s ease-out, transform 0.3s ease-out; }

.kit-diagramma.in .kit-filo { animation: kit-disegna 0.9s ease-out forwards; }
.kit-diagramma.in .kit-petalo { animation: kit-appare 0.3s ease-out forwards; }
.kit-diagramma.in .kit-petalo:nth-of-type(1) { animation-delay: 0ms; }
.kit-diagramma.in .kit-petalo:nth-of-type(2) { animation-delay: 150ms; }
.kit-diagramma.in .kit-petalo:nth-of-type(3) { animation-delay: 300ms; }
.kit-diagramma.in .kit-petalo:nth-of-type(4) { animation-delay: 450ms; }
.kit-diagramma.in .kit-petalo:nth-of-type(5) { animation-delay: 600ms; }

@keyframes kit-disegna { to { stroke-dashoffset: 0; } }
@keyframes kit-appare { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .kit-reveal:not(.in) { opacity: 1; transform: none; }
  .kit-reveal { transition: none; }
  .kit-diagramma .kit-filo { stroke-dashoffset: 0; animation: none; }
  .kit-diagramma .kit-petalo { opacity: 1; animation: none; }
}
/* RICETTE:END */