/* ============================================================
   components.css — COMPONENTI & UTILITY GLOBALI
   Caricare dopo tokens.css e base.css.
   Qui vanno SOLO blocchi riusabili tra pagine diverse.
   Niente regole specifiche di una pagina: quelle vanno in page.css.
============================================================ */

/* ============================================================
   CONTAINER / LAYOUT
   Tutte le varianti sono auto-sufficienti: si possono usare da sole
   senza dover accoppiare anche .container base.
============================================================ */
.container,
.container-sm,
.container-lg {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.container    { max-width: var(--container); }
.container-sm { max-width: var(--container-sm); }
.container-lg { max-width: var(--container-lg); }

/* ---------- SECTION wrappers ---------- */
.section {
  padding: var(--section-pad);
}

.section-tight { padding: var(--sp-8) var(--section-pad-x); }
.section-loose { padding: var(--sp-11) var(--section-pad-x); }

.section-light { background: var(--white); color: var(--text); }
.section-cream { background: var(--bg);    color: var(--text); }
.section-dark  { background: var(--dark);  color: var(--white); }
.section-blue  { background: var(--blue);  color: var(--white); }

/* ============================================================
   UNIFORM SECTION SPACING — regola master (aprile 2026)
   SCOPE: collassa automaticamente il padding verticale fra due
   <section> adiacenti figlie di <main>. Senza questa regola, due
   sezioni che hanno entrambe `padding: 60 20` creerebbero un gap
   di 120px (60 bottom + 60 top), troppo ampio, incoerente da
   pagina a pagina. Con questa regola il gap verticale fra sezioni
   adiacenti e' SEMPRE 60px totali (30 bottom + 30 top), qualsiasi
   sia la coppia di componenti.

   USO `!important` PERCHE':
   I componenti sezione (`.narrative-block`, `.bio-section`, ecc.)
   dichiarano `padding: var(--section-pad)` con specificita' (0,1,0).
   Un selector tipo `main > section:has(+ section)` ha specificita'
   (0,0,3) — PERDE. Aggiungere la classe al selector batte 0,1,0 per
   padding-top ma e' fragile e dipende dall'elencazione di tutte le
   classi note. `!important` rende la regola master robusta per ogni
   nuovo componente sezione SENZA dovermi ricordare di aggiornare una
   lista.

   ECCEZIONI AMMESSE:
   - `.hero-corso`: la prima sezione conserva il suo padding-bottom
     originale per respiro col CTA in fondo (override con !important).
   - Se un pattern richiede di "saldarsi" alla sezione successiva
     senza gap (raro), usa modifier class `.is-glued` page-specific
     con `padding-top: 0 !important` / `padding-bottom: 0 !important`.
============================================================ */
:root {
  --section-gap: var(--sp-7);                    /* 30px — gap verticale uniforme fra sezioni */
}

/* Padding-top della seconda di due sezioni adiacenti */
main > section + section {
  padding-top: var(--section-gap) !important;
}

/* Padding-bottom della prima di due sezioni adiacenti */
main > section:has(+ section) {
  padding-bottom: var(--section-gap) !important;
}

/* Reset margin del primo e dell'ultimo figlio interno di una sezione.
   Senza questo, un <h2> con margin-top: 60px "per stare in mezzo" si
   somma al padding-top della sezione e crea mare di spazio. Azzeriamo
   fino a 3 livelli (section > inner > wrapper > heading) cosi' il gap
   verticale fra sezioni resta esattamente --section-gap = 30px+30px,
   senza sommatorie. */
main > section > *:first-child,
main > section > *:first-child > *:first-child,
main > section > *:first-child > *:first-child > *:first-child {
  margin-top: 0 !important;
}
main > section > *:last-child,
main > section > *:last-child > *:last-child,
main > section > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0 !important;
}

/* Mobile: gap sezioni un filo piu' stretto (24px invece di 30px). */
@media (max-width: 768px) {
  :root { --section-gap: var(--sp-6); }       /* 24px su mobile */
}

/* ============================================================
   TIPOGRAFIA UTILITY
============================================================ */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.font-sans  { font-family: var(--font); }
.font-serif { font-family: var(--serif); }

.fw-light    { font-weight: var(--fw-light); }
.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.color-brand  { color: var(--orange); }
.color-muted  { color: var(--muted); }
.color-accent { color: var(--blue); }

/* ============================================================
   BOTTONI
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-7);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--t-base),
    transform var(--t-fast),
    box-shadow var(--t-base);
}

.btn:hover   { transform: translateY(-1px); }
.btn:active  { transform: translateY(0); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--orange-dk); }

.btn-dark {
  background: var(--dark);
  color: var(--white);
}
.btn-dark:hover { background: #000; }

/* Green CTA (usato tipicamente su bg dark: sezione community, ecc.) */
.btn-green {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(46, 125, 63, 0.35);
}
.btn-green:hover { background: var(--green-dk); color: var(--white); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); }

.btn-lg {
  padding: var(--sp-5) var(--sp-8);
  font-size: var(--fs-md);
  border-radius: var(--radius-md);
}

.btn-pill {
  border-radius: var(--radius-full);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ============================================================
   CARD di base
============================================================ */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.card-body {
  padding: var(--sp-7);
}

.card-title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}

/* ============================================================
   IMG RESPONSIVE (<picture>)
   Regola di default per ogni immagine di contenuto.
   Non serve sempre una classe — gia' coperto da base.css — ma
   questo utility blocca il CLS forzando aspect-ratio coerente.
============================================================ */
.img-fluid { width: 100%; height: auto; }

.ratio-16-9 { aspect-ratio: 16 / 9;  }
.ratio-4-3  { aspect-ratio: 4 / 3;   }
.ratio-1-1  { aspect-ratio: 1 / 1;   }
.ratio-3-2  { aspect-ratio: 3 / 2;   }

/* ============================================================
   FLEX/GRID utility minime
============================================================ */
.stack > * + * { margin-top: var(--sp-5); }
.stack-sm > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-7); }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* ============================================================
   TEXT BLOCK riusabili (eyebrow, fineprint)
   Valori allineati al gold (vedi .hero-tagline, .top-bar,
   .summary-inner p, .dark-section p).
============================================================ */
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.fineprint {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ============================================================
   PATTERN: SITE-HEADER
   Barra navigazione globale del sito (NON delle landing di corso).
   Usare sulle pagine che fanno parte della navigazione del sito:
   homepage, /acquerelli/, /pastelli-morbidi/, /tempere-alluovo/,
   /arte-i-segreti-degli-antichi-maestri/, /corsi/, /home_eng, ...
   Le landing di vendita (hero-corso dedicato) NON hanno questo header.

   Markup canonico in _global/partials/site-header-<lang>.html:
     <header class="site-header">
       <div class="site-header-inner">
         <a class="site-header-logo" href="/">
           <img src="..." alt="..." width="163" height="40">
         </a>
         <input type="checkbox" id="site-nav-toggle" class="site-header-toggle" hidden>
         <label for="site-nav-toggle" class="site-header-burger" aria-label="Apri menu">
           <span></span><span></span><span></span>
         </label>
         <nav class="site-header-nav" aria-label="Principale">
           <ul>
             <li><a href="/">HOME</a></li>
             <li class="has-submenu">
               <a href="/acquerelli">I MIEI DIPINTI</a>
               <ul class="site-header-submenu">
                 <li><a href="/acquerelli/">ACQUERELLI</a></li>
                 ...
               </ul>
             </li>
             ...
           </ul>
           <a class="site-header-cta" href="/corsi/">TUTTI I CORSI</a>
         </nav>
       </div>
     </header>

   Comportamento:
     - position: sticky; top: 0 (occupa flow, resta visibile su scroll).
     - bg --dark (funziona su qualsiasi hero sottostante).
     - Desktop >=901px: nav orizzontale, dropdown su hover/focus-within
       (CSS-only, zero JS).
     - Mobile <=900px: burger -> drawer fullscreen (checkbox hack,
       zero JS). Submenu sempre espanso nel drawer.
     - z-index var(--z-sticky) = 50.
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--dark);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header-inner {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.site-header-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.site-header-logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* burger toggle: checkbox nascosto, label visibile solo su mobile */
.site-header-toggle {
  display: none;
}
.site-header-burger {
  display: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.site-header-burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* nav desktop */
.site-header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: auto;
}
.site-header-nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.site-header-nav > ul > li {
  position: relative;
}
.site-header-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  padding: 10px 0;
  transition: color 0.15s ease;
}
.site-header-nav a:hover,
.site-header-nav a:focus-visible {
  color: var(--orange-lt);
}

/* voce con icona (usato per lang-switch) */
.site-header-nav .is-lang-switch > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-header-nav .is-lang-switch svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* caret per le voci con submenu */
.site-header-nav > ul > li.has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}

/* submenu: dropdown CSS-only */
.site-header-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: var(--sp-3) 0;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 1;
}
.site-header-submenu::before {
  /* triangolo che connette al menu */
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--white);
}
.site-header-nav > ul > li.has-submenu:hover .site-header-submenu,
.site-header-nav > ul > li.has-submenu:focus-within .site-header-submenu {
  display: block;
}
.site-header-submenu a {
  color: var(--text);
  display: block;
  padding: 10px var(--sp-5);
  white-space: nowrap;
  font-size: var(--fs-xs);
}
.site-header-submenu a:hover,
.site-header-submenu a:focus-visible {
  color: var(--green-dk);
  background: var(--bg);
}

/* CTA finale del menu
   Specificita' (0,0,2,0) per vincere su .site-header-nav a (0,0,1,1). */
.site-header-nav .site-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-6);
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.site-header-nav .site-header-cta:hover,
.site-header-nav .site-header-cta:focus-visible {
  background: var(--green-dk);
  color: var(--white);
  transform: translateY(-1px);
}

/* ---------- MOBILE (<=900px) ---------- */
@media (max-width: 900px) {
  .site-header-inner {
    height: 64px;
  }
  .site-header-burger {
    display: flex;
  }
  .site-header-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--sp-6) var(--sp-5);
    margin: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .site-header-toggle:checked ~ .site-header-nav {
    transform: translateX(0);
  }
  /* burger -> X quando aperto */
  .site-header-toggle:checked ~ .site-header-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header-toggle:checked ~ .site-header-burger span:nth-child(2) {
    opacity: 0;
  }
  .site-header-toggle:checked ~ .site-header-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* blocca scroll body mentre il drawer e' aperto */
  .site-header:has(.site-header-toggle:checked) {
    position: fixed;
    width: 100%;
  }
  .site-header-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .site-header-nav > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-header-nav a {
    display: block;
    padding: var(--sp-4) 0;
    font-size: var(--fs-base);
  }
  .site-header-nav > ul > li.has-submenu > a::after {
    display: none;
  }
  /* submenu sempre espanso nel drawer mobile */
  .site-header-submenu {
    position: static;
    transform: none;
    display: block;
    background: transparent;
    box-shadow: none;
    padding: 0 0 var(--sp-3) var(--sp-4);
    min-width: 0;
  }
  .site-header-submenu::before {
    display: none;
  }
  .site-header-submenu a {
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 0;
  }
  .site-header-submenu a:hover,
  .site-header-submenu a:focus-visible {
    color: var(--orange-lt);
    background: transparent;
  }
  .site-header-nav .site-header-cta {
    margin-top: var(--sp-5);
    width: 100%;
    padding: var(--sp-4);
    font-size: var(--fs-base);
  }
}

/* ============================================================
   PATTERN: LANG-SUGGEST — popup modal "English version available"
   Modal centrato che appare SOLO se navigator.language != 'it' e
   l'utente non lo ha ancora dismesso (localStorage). Gestito da
   _global/js/lang-suggest.js. Opt-in: includere lo script solo
   sulle pagine che hanno una controparte inglese.
   Accessibilita': role="dialog", aria-modal, chiudibile con ESC.
============================================================ */
.lang-suggest {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--overlay-dark-80);
  animation: lang-suggest-fade 0.2s ease;
}
@keyframes lang-suggest-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lang-suggest-card {
  background: var(--white);
  color: var(--text);
  max-width: 480px;
  width: 100%;
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  position: relative;
  animation: lang-suggest-pop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes lang-suggest-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lang-suggest-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  color: var(--blue);
}
.lang-suggest-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.lang-suggest-title {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
  color: var(--dark);
}
.lang-suggest-msg {
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0 0 var(--sp-6);
  color: var(--muted);
}
.lang-suggest-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.lang-suggest-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, transform 0.15s ease;
}
.lang-suggest-cta:hover,
.lang-suggest-cta:focus-visible {
  background: var(--green-dk);
  color: var(--white);
  transform: translateY(-1px);
}
.lang-suggest-dismiss {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: var(--sp-2);
  font-family: inherit;
}
.lang-suggest-dismiss:hover,
.lang-suggest-dismiss:focus-visible {
  color: var(--text);
}
.lang-suggest-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-circle);
  transition: color 0.15s, background 0.15s;
}
.lang-suggest-close:hover,
.lang-suggest-close:focus-visible {
  color: var(--dark);
  background: var(--border);
}
body.lang-suggest-open {
  overflow: hidden;
}
@media (max-width: 480px) {
  .lang-suggest-card { padding: var(--sp-6); }
  .lang-suggest-title { font-size: var(--fs-xl); }
}

/* ============================================================
   PATTERN: TOP-BAR
   Striscia full-width sul blu brand, in cima ad ogni pagina.
   Serve come "audience statement" o tagline del sito.
   Valori ESATTI dal gold .top-bar:
     bg        -> var(--blue)
     colore    -> white
     padding   -> 10px 20px
     font      -> 15px / 300 / center
============================================================ */
.top-bar {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: var(--fw-light);
  line-height: 1.4;
}
/* Inner opzionale: limita la reading width del testo a 800px senza
   compromettere il bg full-width. Aggiunto maggio 2026 per pagine
   con testi top-bar lunghi (sl-a-a). Backward compatible: pagine
   esistenti senza .top-bar-inner restano invariate. */
.top-bar-inner {
  max-width: var(--reading-width);
  margin: 0 auto;
}

/* ============================================================
   PATTERN: INTRO-BAR
   Banda di lead sopra il blocco hero, sul bg cream del body,
   padding verticale minimo.
============================================================ */
.intro-bar {
  background: transparent;
  padding: 15px 20px;
  text-align: center;
}
.intro-bar-inner {
  max-width: 800px;
  margin: 0 auto;
}
.intro-bar p {
  font-size: 19px;
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

/* ============================================================
   PATTERN: HERO-CORSO
   Sezione principale di una landing corso: overline, H1,
   kicker, body, video, CTA. Calcato su .summary-section del gold.
   Valori dal gold:
     bg        -> var(--bg) cream (body default, transparent qui)
     padding   -> 40px 20px desktop, 20px 20px mobile
     inner max -> 800px
     text      -> center
============================================================ */
.hero-corso {
  background: transparent;
  /* padding-top dominante (hero e' sempre prima sezione dentro <main>).
     padding-bottom lo gestisce il master rule "main > section:has(+ section)"
     che forza --section-gap (!important). Qui lo metto a 0 per evitare
     somma col gap automatico. Valore ridotto da 40 a 30 (aprile 2026)
     per coerenza con lo spacing del resto. */
  padding: var(--sp-7) 20px 0;
  text-align: center;
}
.hero-corso-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* Overline sopra l'H1 (non deve competere con l'H1).
   Calcato sul pattern gold: testo piccolo muted, 18px / 400 / 1.4. */
.hero-overline {
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto 12px;
}

/* H1 dominante (calcato su .hero h1 del gold: 36px / 1.15 / 700) */
.hero-h1 {
  font-size: 36px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--dark);
  max-width: 800px;
  margin: 0 auto 10px;
}

/* Kicker sotto l'H1: leggero, supporto alla headline.
   Calcato su .hero-tagline del gold (21px / 300 / 1.4). */
.hero-kicker {
  font-size: 21px;
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 20px;
}

/* Corpo del blocco hero (coerente con .summary-inner p del gold: 21px / 400) */
.hero-body {
  font-size: 21px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 30px;
}

/* Mobile: come da gold (letter-text p, summary-inner p = 19px) */
@media (max-width: 768px) {
  .intro-bar p    { font-size: 17px; }

  /* Mobile: top ridotto da 20 a 12 (sp-3) perche' 20 appariva eccessivo
     e il master uniform-spacing gia' garantisce il gap col blocco sotto. */
  .hero-corso     { padding: var(--sp-3) 20px 0; }
  .hero-overline  { font-size: 15px; }
  .hero-h1        { font-size: 26px; line-height: 1.2; }
  .hero-kicker    { font-size: 18px; }
  .hero-body      { font-size: 19px; line-height: 1.45; }
}

/* ============================================================
   HERO HOME — hero della homepage / pagine "chi sono".
   Layout 2-col desktop: prose a sinistra + ritratto a destra.
   Stacked mobile, ritratto sopra (per "dare un volto subito"
   prima del testo). A differenza di .hero-corso (stacked
   centrato, vende UN corso specifico), .hero-home presenta
   la persona e rimanda al catalogo /corsi/ con CTA finale.
   Markup:
     <section class="hero-home">
       <div class="hero-home-inner">
         <div class="hero-home-body">
           <h1 class="hero-home-title">...</h1>
           <p class="hero-home-subtitle">...</p>
           <p>bio paragrafi...</p>
           <a class="btn btn-primary" href="/corsi/">SCOPRI I CORSI</a>
         </div>
         <figure class="hero-home-portrait">
           <img src="..." alt="Ritratto di Enrico De Cenzo"
                width="633" height="866"
                fetchpriority="high" loading="eager">
         </figure>
       </div>
     </section>
============================================================ */
/* Valori desunti dal live enricodecenzo.com/ (inspection @1920):
   - section padding-top 30, sides 20, bottom 0 (ritratto flush)
   - inner max-width 1080, altezza 699
   - 2 col: sinistra 554 (text) / destra 511 (portrait), gap ~30
   - testo centrato verticalmente nella col, ritratto fills col
   - H1 58/700/lh 60.9  | H3 24/300/lh 31.2 (sans)  | p 18/300/lh 28.8 */
.hero-home {
  background: transparent;
  /* padding-bottom 0: il ritratto tocca il bordo inferiore della
     sezione (Enrico con il dipinto = look editoriale, nessun
     margine/effetto sulla foto). */
  padding: var(--sp-6) var(--section-pad-x) 0;
}
.hero-home-inner {
  max-width: var(--container-md);          /* 1080px, come live */
  margin: 0 auto;
  display: grid;
  /* Ratio 554:511 dal live (~52:48). */
  grid-template-columns: minmax(0, 554fr) minmax(0, 511fr);
  gap: var(--sp-4);                        /* ~30px, come live */
  align-items: stretch;                    /* entrambe le col a tutta altezza */
  min-height: 699px;                       /* uguale al live */
}
.hero-home-body {
  /* Text col: flex column con contenuto centrato verticalmente,
     esattamente come il live (~80px top/bottom naturali nella col
     699). Nessun max-width extra: la col stessa ha 554px. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-home-title {
  /* Valori esatti dal live: 58/700/lh 60.9 (ratio 1.05). */
  font-size: 58px;
  font-weight: var(--fw-bold);
  line-height: 1.05;
  color: var(--dark);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.01em;
}
.hero-home-subtitle {
  /* Sans-serif (NON serif italic come hero-corso): 24/300/lh 31.2. */
  font-family: var(--font);
  font-style: normal;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--muted);
  margin: 0 0 var(--sp-5);
}
.hero-home-body p {
  /* Paragrafi bio: 18/300/lh 28.8 (ratio 1.6), spacing piccolo
     fra paragrafi (~ma corrispondente al live). */
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 var(--sp-2);
}
.hero-home-body p strong { font-weight: var(--fw-bold); color: var(--dark); }
.hero-home-body .btn {
  margin-top: var(--sp-4);
  align-self: flex-start;
}
.hero-home-portrait {
  /* Flush-bottom: la figure cresce fino al bordo basso della col
     (che coincide col bordo basso della section). */
  align-self: end;
  justify-self: end;
  margin: 0;
  max-width: 100%;
  line-height: 0;                          /* elimina gap inline */
}
.hero-home-portrait img {
  /* Riempe in altezza la col (max 699px come live); larghezza
     auto tiene la proporzione nativa (~0.73 per il 633x866). */
  display: block;
  height: auto;
  max-height: 699px;
  width: 100%;
  /* Nessun border-radius, nessun box-shadow. */
}

/* MODIFIER: title compatto (42px) per pagine con headline piu' lunga
   della home. La home base usa headline corta (58/700 tutto bold);
   qui la frase e' lunga e usa weight light come baseline + <strong>
   per la parte enfatizzata, dentro UN UNICO <h1>. Tutto stessa taglia,
   solo il peso varia.
   Markup:
     <h1 class="hero-home-title">
       parte light <strong>parte bold</strong> parte light.
     </h1>
   Backward compatible: la home esistente (senza .is-compact-title)
   resta a 58/700 tutto bold come prima. */
.hero-home.is-compact-title .hero-home-title {
  font-size: 42px;
  line-height: 1.15;
  font-weight: var(--fw-light);
  color: var(--text);
}
.hero-home.is-compact-title .hero-home-title strong {
  font-weight: var(--fw-bold);
  color: var(--dark);
}

@media (max-width: 900px) {
  .hero-home { padding: var(--sp-6) var(--section-pad-x) 0; }
  .hero-home-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    min-height: 0;
  }
  .hero-home-body { order: 1; }
  .hero-home-portrait {
    order: 2;
    justify-self: center;
  }
  .hero-home-portrait img {
    max-height: 520px;
    width: auto;
  }
  .hero-home-title    { font-size: 38px; line-height: 1.1; }
  .hero-home-subtitle { font-size: 20px; margin-bottom: var(--sp-4); }
  .hero-home-body p   { font-size: 17px; }
  .hero-home-eyebrow  { font-size: 15px; margin-bottom: var(--sp-1); }
  .hero-home.is-compact-title .hero-home-title { font-size: 30px; }
}

/* ============================================================
   PROMO STRIP — banda dark annuncio + CTA sulla destra.
   Thin band (~130px) con sfondo scuro e un'offerta breve a
   sinistra + bottone accent a destra. Adatto per "mini-corso
   gratuito", "nuovo corso in arrivo", ecc. sotto l'hero di una
   home. A differenza di .cta-band (centrato, full-width testo),
   .promo-strip e' a 2-col (text + bottone) e piu' compatto.
   Markup:
     <section class="promo-strip">
       <div class="promo-strip-inner">
         <div class="promo-strip-body">
           <p class="promo-strip-title">MINICORSO GRATUITO: ...</p>
           <p class="promo-strip-desc">Ogni tecnica ha pregi...</p>
         </div>
         <a class="promo-strip-cta btn" href="...">GUARDA ORA IL MINICORSO GRATUITO</a>
       </div>
     </section>
============================================================ */
.promo-strip {
  background: var(--dark);
  color: #fff;
  padding: var(--sp-5) var(--section-pad-x);
}
.promo-strip-inner {
  max-width: var(--container-md);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}
.promo-strip-body { color: #fff; }
.promo-strip-title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: #fff;
  margin: 0 0 var(--sp-2);
  letter-spacing: 0.01em;
}
.promo-strip-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.promo-strip-cta {
  display: inline-block;
  padding: var(--sp-4) var(--sp-6);
  background: var(--green);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  justify-self: end;
  min-width: 320px;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease;
}
.promo-strip-cta:hover,
.promo-strip-cta:focus-visible {
  background: var(--green-dk);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .promo-strip { padding: var(--sp-6) var(--section-pad-x); }
  .promo-strip-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    text-align: center;
  }
  .promo-strip-cta {
    justify-self: stretch;
    min-width: 0;
    width: 100%;
  }
}

/* Adiacenza hero-home + promo-strip: edge-to-edge, 0 gap. La
   regola master UNIFORM SECTION SPACING forzerebbe 30px top+bottom,
   ma il ritratto dell'hero-home deve rimanere flush col bordo
   inferiore (Enrico + dipinto = look editoriale) e il promo-strip
   dark si attacca direttamente sotto come sul live. */
main > .hero-home:has(+ .promo-strip),
main > .hero-home:has(+ .benefits-band) {
  padding-bottom: 0 !important;
}
main > .promo-strip:first-of-type,
main > .hero-home + .promo-strip {
  padding-top: var(--sp-5) !important;
}
/* hero-home + benefits-band: la dark band si "salda" al fondo del
   ritratto senza gap (look editoriale, foto + banda di rinforzo). */
main > .hero-home + .benefits-band {
  padding-top: var(--sp-9) !important;               /* 60px, mantiene respiro interno */
}
/* Simmetria interna della dark strip: il master UNIFORM SECTION
   SPACING forzerebbe 30px di padding-bottom dentro la strip;
   riporto a 20px per matchare il padding-top e tenere la band
   visivamente bilanciata. Il gap "vero" verso la sezione dopo
   e' dato dal padding-top di quella sezione (30px master). */
main > .promo-strip:has(+ section) {
  padding-bottom: var(--sp-5) !important;
}

/* ============================================================
   PATTERN: CATEGORY-SECTION — sezione "didattico / navigazione".
   Introdotta per home/ (aprile 2026), sezione "Perche' studiare
   con Enrico De Cenzo": H2 + citazione + paragrafo + 3 category
   card cliccabili (immagine landscape + label uppercase + hint).

   Riusabile ogni volta che serve una "landing di catalogo": 3 o
   piu' card-navigazione con stessa struttura (img + label + hint).

   Struttura HTML:
     <section class="category-section">
       <div class="category-section-inner">
         <h2 class="category-heading">...titolo...</h2>
         <blockquote class="category-quote">&ldquo;...citazione...&rdquo;</blockquote>
         <p class="category-desc">...paragrafo descrittivo...</p>
         <ul class="category-cards">
           <li>
             <a class="category-card" href="/slug/">
               <img class="category-card-img" src="..." alt="" width="300" height="203">
               <h3 class="category-card-label">ACQUERELLI</h3>
               <p class="category-card-hint">Clicca sull&rsquo;immagine per entrare nella sezione</p>
             </a>
           </li>
           <li>...</li>
           <li>...</li>
         </ul>
       </div>
     </section>

   Note design:
   - heading 40px bold (sul live e' h2 light 300 con <strong> 700
     annidato; semplificato qui a bold dichiarativo).
   - quote + desc con max-width di lettura (--reading-width).
   - card con immagine 300x203, hover lift + shadow + label blu.
   - intera card e' <a>: qualsiasi punto cliccato va alla categoria.
============================================================ */
.category-section {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: transparent;
}
.category-section-inner {
  max-width: var(--container-md);
  margin: 0 auto;
  text-align: center;
}
.category-heading {
  font-family: var(--font);
  font-size: var(--fs-4xl);              /* 42px ~ 40 del live */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  letter-spacing: -0.005em;
  margin: 0 auto var(--sp-5);            /* 20px sotto il titolo */
  max-width: 900px;
}
.category-quote {
  font-family: var(--font);
  font-style: italic;
  font-size: var(--fs-md);               /* 18px */
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--text);
  max-width: var(--reading-width);       /* 800px */
  margin: 0 auto var(--sp-5);            /* 20px */
  /* blockquote reset: rimuovi padding/border default del browser */
  padding: 0;
  border: 0;
}
.category-desc {
  font-family: var(--font);
  font-size: var(--fs-md);               /* 18px */
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--text);
  max-width: var(--reading-width);
  margin: 0 auto var(--sp-9);            /* 60px di stacco prima delle card */
}

/* --- Grid di 3 card cliccabili --- */
.category-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);                      /* 30px */
  max-width: var(--container-md);
  margin-inline: auto;
}
.category-cards > li { margin: 0; }

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);                      /* 12px fra img/label/hint */
  text-decoration: none;
  color: inherit;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.category-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 203;
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.category-card-label {
  font-family: var(--font);
  font-size: var(--fs-lg);               /* 21px ~ live */
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
  line-height: var(--lh-tight);
  margin: var(--sp-3) 0 0;
  text-align: center;
}
.category-card-hint {
  font-family: var(--font);
  font-size: var(--fs-sm);               /* 14px */
  font-weight: var(--fw-light);
  color: var(--muted);
  line-height: var(--lh-snug);
  margin: 0;
  text-align: center;
}

/* Mobile: card stacked, 1 col */
@media (max-width: 900px) {
  .category-section       { padding: var(--sp-9) var(--section-pad-x); }
  .category-heading       { font-size: var(--fs-3xl); }   /* 32px */
  .category-quote,
  .category-desc          { font-size: var(--fs-base); }  /* 16px */
  .category-desc          { margin-bottom: var(--sp-8); } /* 40px */
  .category-cards         { grid-template-columns: 1fr; gap: var(--sp-6); max-width: 420px; }
  .category-card-label    { font-size: var(--fs-md); }    /* 18px */
}

/* ============================================================
   LANG BADGE — strip blu informativa con icona microfono.
   Nasce su soft-pastel-secrets (hero EN) per il cartello
   "FOR THE FIRST TIME, FULLY DUBBED AND SUBTITLED IN ENGLISH".
   Uso tipico: dopo il video hero di una landing EN/multilingua.
   Markup:
     <p class="lang-badge">
       <svg class="lang-badge-icon" viewBox="0 0 24 24" aria-hidden="true">
         <path d="..."/>
       </svg>
       <span>FOR THE FIRST TIME, FULLY DUBBED AND SUBTITLED IN ENGLISH</span>
     </p>
   Il padre centra automaticamente se ha text-align:center (hero-corso
   ce l'ha di default). In contesti fluid usare: display:flex; justify-content:center;
============================================================ */
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  color: var(--white);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin: 0 auto 20px;
  max-width: 720px;
}
/* Se il badge e' l'ultimo figlio del suo parent (tipicamente nell'hero-corso
   subito sopra la sezione successiva), azzera il margin-bottom: il padding
   del wrapper .hero-corso gia' gestisce la distanza verso la sezione dopo. */
.lang-badge:last-child { margin-bottom: 0; }
.lang-badge-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}
@media (max-width: 768px) {
  .lang-badge {
    font-size: 13px;
    padding: 10px 18px;
    gap: 8px;
    letter-spacing: 0.02em;
  }
  .lang-badge-icon { width: 16px; height: 16px; }
}

/* ============================================================
   CTA con prezzo + bottone multilinea (landing commerciali)
   Uso:
     <div class="cta-price-box">
       <a class="btn btn-primary btn-lg btn-cta-multiline" href="...">
         <span class="btn-cta-top">CLICCA QUI ED ACCEDI SUBITO A</span>
         <span class="btn-cta-main">SOLI 47&euro;</span>
         <span class="btn-cta-bottom">AL POSTO DI <del>97&euro;</del></span>
       </a>
       <p class="fineprint">* OFFERTA DISPONIBILE ...</p>
     </div>
============================================================ */
.cta-price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-inline: auto;
  max-width: 640px;
}

.btn-cta-multiline {
  flex-direction: column;
  gap: var(--sp-1);                       /* 4px */
  padding: var(--sp-5) var(--sp-8);       /* 20px 40px */
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
.btn-cta-multiline:hover { transform: scale(1.02); }

.btn-cta-top {
  font-size: 15px;
  font-weight: var(--fw-regular);
  opacity: 0.95;
}
.btn-cta-main {
  font-size: var(--fs-xl);                /* 24px, come .btn-orange del gold */
  font-weight: var(--fw-bold);
}
.btn-cta-bottom {
  font-size: 14px;
  font-weight: var(--fw-regular);
  /* niente opacity: PSI bocciava rgb(255,255,255,.8) su #A8481A
     (~4.13:1 < 4.5 AA per testo piccolo). Bianco pieno da 5.82:1.
     La gerarchia "vecchio prezzo" e' data da font-size minore +
     line-through sul <del>, non serve sbiadire. */
}
.btn-cta-bottom del {
  /* line-through e' gia' sufficiente a marcare "prezzo precedente" */
}

.price-old {
  color: var(--muted);
  font-weight: var(--fw-bold);
  text-decoration: line-through;
}
.price-new {
  color: var(--orange);
  font-weight: var(--fw-bold);
}

/* ============================================================
   VIDEO RESPONSIVO (16:9 desktop / 4:5 mobile)
   Calcato su .video-wrap + .video-inner del gold (max-width 800px,
   margin 0 auto 30px, aspect-ratio via padding-bottom 56.25%).
============================================================ */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 30px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed-mobile { display: none; }

@media (max-width: 768px) {
  .video-embed-desktop { display: none; }
  .video-embed-mobile  { display: block; aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------------
   .video-lazy — fake player (poster + pulsante play + didascalia)
   Si combina con .video-embed. Al click common.js sostituisce il
   contenuto con un iframe dinamico (data-src).
   STRUTTURA ATTESA:
     <div class="video-embed video-embed-desktop video-lazy"
          data-src="https://iframe.mediadelivery.net/embed/&hellip;">
       <img src="poster-1200w.webp"
            srcset="poster-480w.webp 480w, &hellip;"
            sizes="&hellip;" alt="&hellip;">
       <button class="video-lazy-play" type="button"
               aria-label="Riproduci il video"></button>
       <span class="video-lazy-caption">Premi qui per guardare il video</span>
     </div>
   VANTAGGIO: l'iframe Bunny (pesante) non viene caricato finch&eacute;
   l'utente non decide di guardare. Il poster &egrave; una WebP ottimizzata
   con srcset responsive.
------------------------------------------------------------ */
.video-lazy {
  cursor: pointer;
}
.video-lazy > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow), filter var(--t-base);
}
.video-lazy:hover > img,
.video-lazy:focus-within > img {
  transform: scale(1.02);
  filter: brightness(0.85);
}

.video-lazy-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  background: var(--overlay-dark-40);
  border-radius: var(--radius-circle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px var(--overlay-dark-40);
  transition: background var(--t-base), transform var(--t-base);
}
/* Triangolino "play" via border-trick: sempre bianco, leggermente offset */
.video-lazy-play::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 24px solid var(--white);
}
.video-lazy:hover .video-lazy-play,
.video-lazy:focus-within .video-lazy-play {
  background: var(--orange);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Alone pulsante intorno al bottone play: attira l'attenzione con un
   anello che si espande e svanisce in loop. Usa ::after cos&igrave;
   il ::before (triangolino) resta libero. */
.video-lazy-play::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--overlay-light-70);
  border-radius: var(--radius-circle);
  box-sizing: border-box;
  animation: video-lazy-pulse 1.9s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Didascalia pill sotto il pulsante: accompagna il play con un
   invito esplicito e accessibile. Cambia colore insieme al bottone. */
.video-lazy-caption {
  position: absolute;
  left: 50%;
  top: calc(50% + 70px);              /* sotto il bottone (46px radius + gap) */
  transform: translateX(-50%);
  padding: var(--sp-2) var(--sp-5);   /* 8px / 20px */
  background: var(--overlay-dark-80);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  pointer-events: none;               /* il click arriva comunque al wrapper */
  box-shadow: 0 6px 20px var(--overlay-dark-40);
  transition: background var(--t-base), color var(--t-base);
}
/* Freccia animata che sale dalla didascalia verso il bottone play.
   Triangolo border-trick, animazione infinita con fade: guida l'occhio
   dall'invito testuale al bottone cliccabile. */
.video-lazy-caption::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid var(--white);
  filter: drop-shadow(0 2px 4px var(--overlay-dark-40));
  animation: video-lazy-arrow-up 1.4s ease-in-out infinite;
}
.video-lazy:hover .video-lazy-caption,
.video-lazy:focus-within .video-lazy-caption {
  background: var(--orange);
  color: var(--white);
}

/* Keyframes animazioni attention-hook del fake player */
@keyframes video-lazy-pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  80%  { transform: scale(1.45); opacity: 0;   }
  100% { transform: scale(1.45); opacity: 0;   }
}
@keyframes video-lazy-arrow-up {
  0%   { transform: translate(-50%, 8px);  opacity: 0;   }
  25%  { transform: translate(-50%, 0);    opacity: 1;   }
  75%  { transform: translate(-50%, -18px); opacity: 0.2; }
  100% { transform: translate(-50%, -22px); opacity: 0;   }
}

/* Accessibilit&agrave;: rispetta la preferenza utente per ridurre il movimento */
@media (prefers-reduced-motion: reduce) {
  .video-lazy-play::after,
  .video-lazy-caption::before {
    animation: none;
  }
  .video-lazy-caption::before {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 768px) {
  .video-lazy-play { width: 72px; height: 72px; }
  .video-lazy-play::before {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 18px;
  }
  .video-lazy-caption {
    top: calc(50% + 58px);
    font-size: var(--fs-xs);
    padding: 6px var(--sp-4);
    letter-spacing: 0.02em;
  }
  .video-lazy-caption::before {
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 9px;
  }
}

/* ============================================================
   PATTERN: PROMO-SECTION
   Blocco promozionale ripetuto nelle landing corso.
   Struttura: bg cream esterno + CARD BIANCA interna con 2 aree:
     - .promo-highlight  (centrata): lead + sub + mockup + CTA + fineprint
     - .promo-prose     (left): paragrafi narrativi, h2, check-list
   Valori allineati alla scala del master:
     bg outer   -> var(--bg)
     card       -> white, padding 50/60, radius, shadow, max 800
     lead       -> --fs-2xl (28px) / --fw-medium / center
     sub        -> --fs-md  (18px) / --fw-medium / center
     prose p    -> --fs-lg  (21px) / --fw-regular / left / --text
     prose h2   -> --fs-2xl (28px) / --fw-light / left
============================================================ */
.promo-section {
  background: var(--bg);
  padding: 40px 20px;
}

.promo-section-inner {
  max-width: var(--container-md);       /* 1080px — card "medium" */
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 50px 60px;
}

/* --- area "highlight" (centrata): reassurance + mockup + CTA --- */
.promo-highlight {
  text-align: center;
  margin-bottom: var(--sp-9);          /* 60px — respiro prima della prose */
}

.promo-lead {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--dark);
  line-height: var(--lh-tight);
  max-width: 680px;
  margin: 0 auto var(--sp-2);          /* 8px */
}
/* Modifier: lead in versione "claim/manifesto", piu' grande e serif.
   Usalo quando il lead non e' una domanda emotiva breve ma un'informazione
   chiave del corso che merita peso (es. "33 ore di lezione", "+50 studenti"). */
.promo-lead--strong {
  font-family: var(--serif);
  font-size: clamp(var(--fs-2xl), 3.2vw, var(--fs-4xl));   /* 28-42px responsive */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  max-width: 760px;
}

.promo-sub {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--dark);
  line-height: 1.4;
  max-width: 640px;
  margin: 0 auto var(--sp-8);          /* 40px */
}

.promo-mockup {
  max-width: 100%;                      /* riempie la card-width (card piu' larga = mockup piu' grande) */
  margin: 0 auto var(--sp-7);           /* 30px bottom prima del CTA */
  border-radius: var(--radius);
  overflow: hidden;
}
.promo-mockup img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- area "prose" (left-aligned): paragrafi narrativi + h2 + lista ---
   Reading-width globale (vedi --reading-width in tokens): uguale su
   tutti i blocchi di prose per coerenza visiva tra sezioni. A 21px
   resta nel range 60-75 char/riga. Il blocco viene centrato; il testo
   interno resta left-aligned. */
.promo-prose {
  max-width: var(--reading-width, 800px);
  margin: 0 auto;
}

.promo-prose p {
  font-size: var(--fs-lg);             /* 21px */
  font-weight: var(--fw-regular);
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-5);             /* 20px */
  text-align: left;
}
.promo-prose p strong { font-weight: var(--fw-bold); }
.promo-prose p u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Lead-paragraph dentro una promo-prose: piu' grande del body
   (32px desktop / 24px mobile), apre/introduce una sub-sezione
   narrativa. Riusabile come <p class="lead"> dentro .promo-prose. */
.promo-prose p.lead {
  font-size: var(--fs-3xl);            /* 32px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-6);             /* 24px */
}

.promo-prose h2 {
  font-size: var(--fs-2xl);            /* 28px */
  font-weight: var(--fw-light);
  color: var(--text);
  line-height: var(--lh-tight);
  text-align: left;
  margin: var(--sp-7) 0 var(--sp-5);   /* 30 / 20 */
}

/* Mobile */
@media (max-width: 768px) {
  .promo-section       { padding: 20px 20px; }
  .promo-section-inner { padding: 30px 24px; }
  .promo-highlight     { margin-bottom: 40px; }
  .promo-lead          { font-size: var(--fs-xl); }     /* 24px */
  .promo-sub           { font-size: var(--fs-base); }   /* 16px */
  .promo-prose p       { font-size: 19px; }
  .promo-prose p.lead  { font-size: var(--fs-xl); }     /* 24px su mobile */
  .promo-prose h2      { font-size: var(--fs-xl); }     /* 24px */
}

/* ============================================================
   PATTERN: CHECK-LIST
   Lista puntata con pallino blu circolare e icona check bianca.
   Usabile ovunque servano bullet "feature/benefit".
============================================================ */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: var(--sp-3);           /* 12px */
  font-size: var(--fs-lg);              /* 21px */
  line-height: 1.4;
  color: var(--text);
}

/* Alternanza peso come nel gold: dispari bold, pari regular.
   Crea ritmo visivo e facilita la scansione della lista. */
.check-list li:nth-child(odd)  { font-weight: var(--fw-bold); }
.check-list li:nth-child(even) { font-weight: var(--fw-regular); }

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  background: var(--blue);
  border-radius: 50%;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.333 10.267c0 0.4-0.133 0.8-0.533 1.2l-14.8 14.8c-0.267 0.267-0.667 0.4-1.067 0.4s-0.933-0.133-1.2-0.533l-2.4-2.267-6.267-6.267c-0.267-0.267-0.4-0.667-0.4-1.2s0.133-0.8 0.533-1.2l2.4-2.4c0.267-0.133 0.667-0.4 1.067-0.4s0.8 0.133 1.2 0.533l5.067 5.067 11.2-11.333c0.267-0.267 0.667-0.533 1.2-0.533 0.4 0 0.8 0.133 1.2 0.533l2.4 2.4c0.267 0.267 0.4 0.667 0.4 1.2z'/%3E%3C%2Fsvg%3E") no-repeat center / 60% 60%;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.333 10.267c0 0.4-0.133 0.8-0.533 1.2l-14.8 14.8c-0.267 0.267-0.667 0.4-1.067 0.4s-0.933-0.133-1.2-0.533l-2.4-2.267-6.267-6.267c-0.267-0.267-0.4-0.667-0.4-1.2s0.133-0.8 0.533-1.2l2.4-2.4c0.267-0.133 0.667-0.4 1.067-0.4s0.8 0.133 1.2 0.533l5.067 5.067 11.2-11.333c0.267-0.267 0.667-0.533 1.2-0.533 0.4 0 0.8 0.133 1.2 0.533l2.4 2.4c0.267 0.267 0.4 0.667 0.4 1.2z'/%3E%3C%2Fsvg%3E") no-repeat center / 60% 60%;
}

@media (max-width: 768px) {
  .check-list li { font-size: 19px; }
}

/* ============================================================
   PATTERN: SPLIT-SECTION (2 colonne: media + contenuto)
   Uso tipico: reassurance multi-device, feature con immagine,
   testimonial con ritratto, qualsiasi blocco "immagine a fianco".

   Struttura HTML:
     <section class="split-section">
       <div class="split-section-inner">
         <div class="split-media"><img src="..." alt=""></div>
         <div class="split-content">
           <p class="split-overline">Over-title breve</p>
           <h2 class="split-heading">Heading principale</h2>
           <p>Paragrafo body</p>
           <p>Altro paragrafo (opzionale)</p>
           <a class="btn btn-primary btn-lg" href="...">CTA</a>
         </div>
       </div>
     </section>

   Varianti previste:
     .split-section.is-reverse     -> media a destra
     .split-section.bg-cream       -> sfondo crema invece che bianco
============================================================ */
.split-section {
  background: var(--white);
  padding: 60px 20px;
}

.split-section.bg-cream {
  background: var(--bg);
}

/* Variante "feature highlight": sfondo blu brand, testo bianco.
   Ideale per blocchi "product benefit" (es. multi-device access)
   che devono staccare dal flusso cream/white circostante.
   Introdotta per soft-pastel-secrets "From PC, Smartphone, or Tablet"
   (aprile 2026). */
.split-section.bg-blue {
  background: var(--blue);
}
.split-section.bg-blue .split-overline { color: var(--coral); }  /* AA su blue */
.split-section.bg-blue .split-heading  { color: var(--white); }
.split-section.bg-blue .split-content,
.split-section.bg-blue .split-content p { color: var(--white); }

/* Variante dark (alternativa piu' neutra al blu): usare quando il
   contesto richiede un fondo scuro "museale" senza saturazione
   brand. */
.split-section.bg-dark {
  background: var(--dark);
}
.split-section.bg-dark .split-overline { color: var(--orange-lt); }  /* AA su dark */
.split-section.bg-dark .split-heading  { color: var(--white); }
.split-section.bg-dark .split-content,
.split-section.bg-dark .split-content p { color: var(--white); }

.split-section-inner {
  max-width: var(--container);          /* 1120px */
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);  /* ~40/60 */
  gap: var(--sp-8);                     /* 40px */
  align-items: center;
}

.split-section.is-reverse .split-section-inner {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.split-section.is-reverse .split-media  { order: 2; }
.split-section.is-reverse .split-content { order: 1; }

.split-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.split-content { text-align: left; }

.split-overline {
  font-size: var(--fs-md);              /* 18px */
  font-weight: var(--fw-medium);
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 var(--sp-2);              /* 8px */
}

.split-heading {
  font-size: var(--fs-4xl);             /* 42px — match live ~41 */
  font-weight: var(--fw-light);         /* 300: respiro, tipico headline editorial */
  color: var(--blue);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-5);              /* 20px */
}

.split-content p {
  font-size: var(--fs-lg);              /* 21px */
  font-weight: var(--fw-regular);
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-4);              /* 16px */
}

.split-content .btn {
  margin-top: var(--sp-3);              /* 12px */
}

/* Mobile: stack verticale, media sopra, testo sotto */
@media (max-width: 768px) {
  .split-section            { padding: 40px 20px; }
  .split-section-inner      { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split-section.is-reverse .split-media  { order: 1; }
  .split-section.is-reverse .split-content { order: 2; }
  .split-heading            { font-size: var(--fs-2xl); }  /* 28px */
  .split-content p          { font-size: 19px; }
}

/* ============================================================
   PATTERN: BIO-SECTION (bio autore + galleria opere su sfondo dark)
   Sezione editoriale "chi sono": ritratto a sinistra, paragrafi
   narrativi a destra, poi intro galleria, poi griglia di opere,
   chiusa con CTA commerciale. Usata per posizionare l'autore e
   costruire autorevolezza prima della conversione.

   Struttura HTML:
     <section class="bio-section">
       <div class="bio-section-inner">
         <div class="bio-split">
           <div class="bio-portrait"><img src="..." alt=""></div>
           <div class="bio-prose">
             <p>…</p>
             <p>…</p>
           </div>
         </div>
         <p class="gallery-intro">In basso alcuni lavori…</p>
         <div class="gallery-grid">
           <img src="..." alt=""> x N
         </div>
         <div class="cta-price-box">
           <a class="btn btn-primary btn-cta-multiline" href="...">…</a>
           <p class="fineprint">…</p>
         </div>
       </div>
     </section>
============================================================ */
.bio-section {
  background: var(--dark);
  color: var(--white);
  padding: var(--sp-10) var(--section-pad-x);  /* 80 20 — scala "conversione" */
}

.bio-section-inner {
  max-width: var(--container);
  margin: 0 auto;
}

/* --- Bio-heading: titolo opzionale sopra il .bio-split ---
   Quando la sezione bio apre con un "display-eyebrow + H2" (es.
   "YOU MIGHT BE WONDERING: WHO IS ENRICO DE CENZO?") usare questo
   wrapper. Opt-in: se non presente, la sezione apre direttamente
   con il .bio-split come nelle landing precedenti. */
.bio-heading {
  text-align: center;
  margin: 0 auto var(--sp-8);           /* 40px stacco da .bio-split */
  max-width: 900px;
}
.bio-heading .eyebrow {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-xs);              /* 14px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--overlay-light-70);
  margin: 0 0 var(--sp-2);              /* 8px */
}
.bio-heading h2 {
  font-family: var(--font);
  font-size: var(--fs-2xl);             /* 28px, match al resto dei H2 del sito */
  font-weight: var(--fw-bold);          /* 700, coerente con le altre H2 del sito */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  line-height: var(--lh-tight);
  margin: 0;
}

/* --- Bio split: portrait 40% | prose 60% --- */
.bio-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--sp-8);                     /* 40px */
  align-items: start;
  margin-bottom: var(--sp-9);           /* 60px */
}

/* --- Modifier .is-reverse: prose a sinistra (wide) / ritratto a destra ---
   Opt-in. Mantiene DOM order invariato (portrait first, prose second: cosi'
   le pagine esistenti con DOM order classico possono aggiungere/rimuovere
   .is-reverse senza riordinare il markup). Solo desktop: su mobile lo
   stack verticale resta con portrait in cima (comportamento esistente).

   Ratio 5fr:2fr (prose:portrait): la prose ha piu' spazio orizzontale
   (quindi meno linee, altezza minore) e il portrait e' stretto (quindi
   le immagini a ratio nativo impilate hanno altezza minore e matchano
   approx la prose). Usare quando il portrait contiene PIU' immagini. */
@media (min-width: 769px) {
  .bio-split.is-reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
  }
  .bio-split.is-reverse .bio-portrait { order: 2; }
  .bio-split.is-reverse .bio-prose    { order: 1; }
}

/* Sticky desktop: il ritratto "accompagna" i paragrafi mentre scorri,
   e si sgancia naturalmente uscendo dal .bio-split. Su mobile no
   (stack verticale: pinnare coprirebbe i paragrafi sotto).

   `display: flex; flex-direction: column; gap` e' additivo: con un solo
   <img> child il gap non si attiva (serve solo se impili piu' immagini,
   come in soft-pastel-secrets/ dove il bio ha ritratto + still life). */
.bio-portrait {
  position: sticky;
  top: var(--sp-5);                     /* 20px dal top del viewport */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);                     /* 20px tra img impilate, se >1 */
}
.bio-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.bio-prose p {
  font-size: var(--fs-lg);              /* 21px */
  font-weight: var(--fw-regular);
  color: var(--white);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-5);              /* 20px */
  text-align: left;
}
.bio-prose p:last-child { margin-bottom: 0; }

/* Variante: prose narrativa CHE SEGUE la galleria opere (fuori dal
   .bio-split, quindi full-width). Va centrata e capata a reading-width
   per non risultare un blocco "sparato" su tutta la sezione.
   Esempi: chiusura "community globale 35 paesi" nelle landing dove
   il bio prosegue dopo la galleria. */
.bio-prose-after-gallery {
  max-width: var(--reading-width, 800px);
  margin: 0 auto var(--sp-9);           /* 60px prima della CTA */
  text-align: center;
}
.bio-prose-after-gallery p { text-align: center; }

/* --- Bio-coda: 2 frasi di chiusura in stile editoriale "takeaway" ---
   Chiude la bio con sintesi + bridge al prodotto. Opt-in: la sezione
   puo' ancora terminare con gallery + CTA come nelle landing precedenti.
   Stile centrato, serif, tono museale: separa visivamente dalla prose
   sopra e da' peso al "what he can do for you".

   - First par: serif italic, overlay-70 (sospensione, setup)
   - Last par: serif bold white (takeaway, bridge al prodotto)
     L'emfasi sta nello stacco italic-muted -> bold-white e nella size
     bump, NON in un colore accent (coral fuori dai pattern coerenti).

   Markup:
     <div class="bio-coda">
       <p>This is just a part of his story…</p>
       <p>Thanks to his method…</p>
     </div> */
.bio-coda {
  max-width: var(--reading-width, 800px);
  margin: 0 auto;
  padding-top: var(--sp-8);             /* 40px stacco dalla prose sopra */
  text-align: center;
}
.bio-coda p {
  font-family: var(--serif);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-5);              /* 20px */
  text-align: center;
}
.bio-coda p:last-child { margin-bottom: 0; }

.bio-coda p:first-child {
  font-size: var(--fs-xl);              /* 24px */
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--overlay-light-70);
}
.bio-coda p:last-child {
  font-size: var(--fs-2xl);             /* 28px */
  font-weight: var(--fw-bold);
  color: var(--white);
}

/* --- Intro galleria (generica): "In basso alcuni lavori..." ---
   Usata sia dentro .bio-section (dark: eredita white), sia in sezioni
   chiare (eredita text color del parent). Non forzare il colore qui. */
.gallery-intro {
  font-size: var(--fs-2xl);             /* 28px */
  font-weight: var(--fw-light);
  color: inherit;
  line-height: var(--lh-tight);
  text-align: center;
  margin: 0 0 var(--sp-7);              /* 30px */
}

/* --- Gallery grid: riga-masonry con altezza fissa, aspect ratio vari --- */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);                     /* 12px */
  margin-bottom: var(--sp-9);           /* 60px prima della CTA */
}
.gallery-grid img {
  height: 220px;
  width: auto;
  max-width: 100%;
  display: block;
  border-radius: var(--radius-xs);
  object-fit: cover;
}

/* --- Variante con didascalia: usa <figure><img><figcaption> ---
   Il figure diventa un flex column cos&igrave; l'immagine mantiene l'altezza
   fissa di .gallery-grid img e la didascalia si impila sotto centrata. */
.gallery-grid--labeled > figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);                     /* 8px tra img e caption */
}
.gallery-grid--labeled figcaption {
  font-family: var(--font);
  font-size: var(--fs-xs);              /* 14px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  text-align: center;
  line-height: var(--lh-tight);
}

/* ============================================================
   PATTERN: STUDENTS GALLERY (showcase opere allievi su bg crema)
   SCOPO: blocco "Qui in basso alcune opere dei miei studenti..."
   con heading muted center + galleria .gallery-grid--labeled.
   Differente da .community-section (dark + masonry + video CTA).
   Qui solo crema, heading semplice, opere con didascalia.
   Introdotto maggio 2026 per /sl-a-a/.
============================================================ */
.students-gallery {
  background: var(--bg);
  padding: var(--section-pad);                  /* 60 20 */
}
.students-gallery-inner {
  max-width: var(--container-md);               /* 1080 */
  margin: 0 auto;
}
.students-gallery-intro {
  font-family: var(--font);
  font-size: var(--fs-2xl);                     /* 28 */
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--muted);
  text-align: center;
  max-width: var(--reading-width);
  margin: 0 auto var(--sp-8);                   /* 40 sotto */
}
.students-gallery-intro strong { font-weight: var(--fw-medium); color: var(--text); }

/* OPT-IN: variante dark (sfondo nero, intro chiaro, opere risaltano). */
.students-gallery.is-dark { background: var(--dark); }
.students-gallery.is-dark .students-gallery-intro { color: rgba(255,255,255,0.7); }
.students-gallery.is-dark .students-gallery-intro strong { color: var(--white); }
.students-gallery.is-dark .gallery-grid--labeled figcaption { color: var(--coral); }   /* 5.38:1 AA */
@media (max-width: 768px) {
  .students-gallery-intro { font-size: var(--fs-xl); }   /* 24 mobile */
}

/* --- Override contestuali per dark bg --- */
.bio-section .fineprint { color: var(--overlay-light-70); }

/* --- Adjacency .bio-split -> .bio-coda (ritmo interno) ---
   Quando la coda esiste (opt-in, solo soft-pastel-secrets finora),
   riduciamo il margin-bottom del split a sp-8 (40px): la coda ha
   gia' il suo padding-top di 40px, quindi il totale fra ultima riga
   di prose e prima riga di coda resta 80px. Senza questa regola
   l'offset sarebbe 60+40 = 100px, sbilanciato rispetto ai 40px
   fra .bio-heading e .bio-split. Le pagine senza .bio-coda (cane,
   il_vetro) mantengono il margin-bottom 60px esistente. */
.bio-split:has(+ .bio-coda) { margin-bottom: var(--sp-8); }

/* --- Adjacency bg-diversi: narrative-block (bg chiaro) <-> bio-section (bg dark) ---
   Regola scolpita nel master (aprile 2026): quando due sezioni con
   sfondo diverso sono adiacenti, NON azzero il padding della sezione
   colorata (e' la sua identita' visiva) — riduco il padding sul bordo
   condiviso. 30 (chiaro) + 40 (scuro) = 70px totali, stacco netto ma
   non esagerato. */
.narrative-block:has(+ .bio-section) { padding-bottom: var(--sp-7); }  /* 30px */
.bio-section + .narrative-block      { padding-top: var(--sp-7); }     /* 30px */
.bio-section:has(+ .narrative-block) { padding-bottom: var(--sp-8); }  /* 40px */
.narrative-block + .bio-section      { padding-top: var(--sp-8); }     /* 40px */

/* Mobile */
@media (max-width: 768px) {
  .bio-section            { padding: var(--sp-9) var(--section-pad-x); }  /* 60 20 */
  .bio-split              { grid-template-columns: 1fr; gap: var(--sp-5); margin-bottom: var(--sp-7); }
  .bio-split:has(+ .bio-coda) { margin-bottom: var(--sp-6); }  /* 24 — coda gia' ha padding-top 24 */
  /* Disattiva lo sticky su mobile: in stack verticale il ritratto
     resterebbe pinnato in cima al viewport coprendo i paragrafi. */
  .bio-portrait           { position: static; top: auto; max-width: 360px; margin: 0 auto; }
  .bio-prose p            { font-size: 19px; }
  .bio-heading            { margin-bottom: var(--sp-6); }         /* 24px */
  .bio-heading h2         { font-size: var(--fs-xl); }            /* 24px */
  .bio-coda               { padding-top: var(--sp-6); }           /* 24px */
  .bio-coda p:first-child { font-size: var(--fs-base); }          /* 18px */
  .bio-coda p:last-child  { font-size: var(--fs-xl); }            /* 24px */
  .gallery-intro          { font-size: var(--fs-xl); }            /* 24px */
  .gallery-grid           { gap: var(--sp-2); margin-bottom: var(--sp-7); }
  .gallery-grid img       { height: 140px; }
}

/* ============================================================
   PATTERN: TESTIMONIAL-SECTION (recensioni stampa / citazioni autore)
   Blocco di social proof: titolo + stack verticale di card 2-colonne
   (scan articolo/ritaglio stampa a sinistra, citazione + firma a destra).
   Card alternate in layout (is-reverse) per ritmo visivo.

   Struttura HTML:
     <section class="testimonial-section">
       <div class="testimonial-section-inner">
         <h2 class="testimonial-title">Dicono di me</h2>
         <div class="testimonial-stack">

           <article class="testimonial-card">
             <div class="testimonial-media">
               <img src="..." alt="Ritaglio stampa">
             </div>
             <div class="testimonial-body">
               <p class="testimonial-quote">&ldquo;Citazione&hellip;&rdquo;</p>
               <a class="testimonial-readmore" href="...">Continua la lettura &gt;</a>
               <div class="testimonial-author">
                 <div class="testimonial-avatar">
                   <img src="..." alt="Ritratto Nome Cognome">
                 </div>
                 <div class="testimonial-author-meta">
                   <p class="testimonial-name">NOME COGNOME</p>
                   <p class="testimonial-role">Ruolo / qualifica</p>
                 </div>
               </div>
             </div>
           </article>

         </div>
       </div>
     </section>

   Varianti previste:
     .testimonial-card.is-reverse     -> media a destra
     .testimonial-card.is-letter      -> card con sola immagine + autore
                                         (es. lettera di un personaggio pubblico)
============================================================ */
.testimonial-section {
  background: var(--bg);
  padding: 80px 20px;
}

.testimonial-section-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.testimonial-title {
  font-size: var(--fs-4xl);             /* 42px */
  font-weight: var(--fw-light);
  color: var(--blue);
  line-height: var(--lh-tight);
  text-align: center;
  margin: 0 0 var(--sp-9);              /* 60px */
}
.testimonial-title em {
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--blue);
}

/* ------------------------------------------------------------
   Elementi OPZIONALI (opt-in) per gestire la narrativa attorno
   alle card. Backward-compatible: pagine esistenti che non li
   usano (cane) non sono toccate.

   .testimonial-intro  — paragrafo narrativo di apertura della
                          sezione, prima del titolo.
   .testimonial-divider — heading H3 di stacco tra due gruppi di
                          card dentro lo stesso stack (es. "Gilberto
                          Grilli" vs "Altri giornalisti" vs "Hillary").
   .testimonial-coda   — paragrafo narrativo di chiusura della
                          sezione, dopo l'ultimo stack.
   ------------------------------------------------------------ */
.testimonial-intro,
.testimonial-coda {
  max-width: var(--reading-width, 800px);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-lg);              /* 21px */
  line-height: var(--lh-normal);
  color: var(--text);
  text-align: center;
}
.testimonial-intro {
  margin-top: 0;
  margin-bottom: var(--sp-8);           /* 40px */
}
.testimonial-coda {
  margin-top: var(--sp-8);
  margin-bottom: 0;
  color: var(--muted);
  font-style: italic;
}

.testimonial-divider {
  font-size: var(--fs-xl);              /* 24px */
  font-weight: var(--fw-bold);
  color: var(--blue);
  line-height: var(--lh-tight);
  text-align: center;
  letter-spacing: 0.5px;
  max-width: var(--reading-width, 800px);
  margin: var(--sp-9) auto var(--sp-8);  /* 60 auto 40 */
}
.testimonial-divider em {
  font-style: normal;
  color: var(--orange);
}

@media (max-width: 768px) {
  .testimonial-intro,
  .testimonial-coda        { font-size: var(--fs-md); }
  .testimonial-divider     {
    font-size: var(--fs-lg);
    margin: var(--sp-7) auto var(--sp-6);
  }
}

.testimonial-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);                     /* 40px tra una card e l'altra */
}

/* --- card singola --- */
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
}

.testimonial-card.is-reverse {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.testimonial-card.is-reverse .testimonial-media   { order: 2; }
.testimonial-card.is-reverse .testimonial-body    { order: 1; }

/* --- media: scan articolo / ritaglio / lettera ---
   Vincolo doppio: max-width cappa le scan orizzontali (es. newspaper),
   max-height cappa le scan verticali (es. critica a colonna singola).
   L'immagine scala mantenendo le proporzioni. */
.testimonial-media {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);                 /* 24px */
}
.testimonial-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;                    /* cap scan verticali */
  display: block;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

/* --- body: citazione + autore --- */
.testimonial-body {
  padding: var(--sp-8);                 /* 40px */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);                     /* 20px */
}

.testimonial-quote {
  font-size: var(--fs-lg);              /* 21px */
  font-weight: var(--fw-regular);
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0;
  font-style: italic;
}
.testimonial-quote strong { font-weight: var(--fw-bold); font-style: normal; }

.testimonial-quote-title {
  font-size: var(--fs-xl);              /* 24px — titolo articolo */
  font-weight: var(--fw-bold);
  font-style: normal;
  color: var(--dark);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}

.testimonial-readmore {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);              /* 14px */
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
  transition: color var(--t-fast);
}
.testimonial-readmore:hover { color: var(--orange-dk); }

/* --- autore: avatar + nome + ruolo --- */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);                     /* 16px */
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  margin-top: auto;                     /* ancora il blocco autore in basso */
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-author-meta { line-height: 1.3; }

.testimonial-name {
  font-size: var(--fs-base);            /* 16px */
  font-weight: var(--fw-bold);
  color: var(--dark);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 2px;
}

.testimonial-role {
  font-size: var(--fs-sm);              /* 14px */
  font-style: italic;
  color: var(--muted);
  margin: 0;
}

/* --- variante is-letter: senza avatar (lettera pubblica, es. Hillary) --- */
.testimonial-card.is-letter .testimonial-author { border-top: 1px solid var(--border); }
.testimonial-card.is-letter .testimonial-avatar { display: none; }
.testimonial-card.is-letter .testimonial-media  { background: var(--white); }

/* Mobile: stack verticale (media sopra, testo sotto) */
@media (max-width: 768px) {
  .testimonial-section        { padding: 50px 20px; }
  .testimonial-title          { font-size: var(--fs-2xl); margin-bottom: var(--sp-7); }
  .testimonial-stack          { gap: var(--sp-7); }

  .testimonial-card,
  .testimonial-card.is-reverse { grid-template-columns: 1fr; }
  .testimonial-card.is-reverse .testimonial-media  { order: 1; }
  .testimonial-card.is-reverse .testimonial-body   { order: 2; }

  .testimonial-media          { padding: var(--sp-5); }
  .testimonial-media img      { max-width: 240px; max-height: 280px; }
  .testimonial-body           { padding: var(--sp-6); }
  .testimonial-quote          { font-size: 18px; }
  .testimonial-quote-title    { font-size: var(--fs-md); }
}

/* ============================================================
   PATTERN: TESTIMONIALS-SECTION (commenti stile Meta/Facebook)
   Social proof fedele all'UI di Meta: font sistema, bolle grigie,
   badge reactions autentico. Le convenzioni UI di Meta sono ormai
   un linguaggio universale di social proof — qui NON adattiamo al
   design system del resto del sito: replichiamo Meta fedelmente.

   I token Meta sono scoped localmente alla sezione per non
   contaminare il design system globale.

   Struttura HTML:
     <section class="testimonials-section">
       <div class="testimonials-section-inner">
         <p class="testimonials-overline">Testimonianze</p>
         <h2 class="testimonials-title">Cosa dice chi ha seguito i miei corsi</h2>
         <div class="comment-grid">

           <article class="comment-card">
             <div class="comment-avatar">
               <img src="..." alt="">
             </div>
             <div class="comment-content">
               <div class="comment-bubble">
                 <p class="comment-name">Nome Cognome</p>
                 <p class="comment-body">Testo&hellip;</p>
               </div>
               <footer class="comment-meta">
                 <span class="comment-meta-action">Like</span>
                 <span class="comment-meta-sep">&middot;</span>
                 <span class="comment-meta-action">Reply</span>
                 <span class="comment-meta-sep">&middot;</span>
                 <span class="comment-timestamp">9h</span>
                 <span class="comment-reactions">
                   <span class="reaction-icons"><svg&hellip;/><svg&hellip;/></span>
                   <span class="comment-reactions-count">5</span>
                 </span>
               </footer>
             </div>
           </article>

         </div>
       </div>
     </section>
============================================================ */
.testimonials-section {
  /* token Meta, scoped alla sezione */
  --meta-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
               Arial, sans-serif;
  --meta-text: #050505;
  --meta-muted: #65676B;
  --meta-muted-strong: #1C1E21;
  --meta-bubble-bg: #F0F2F5;
  --meta-blue: #1877F2;
  --meta-red: #F33E58;
  --meta-pill-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.1);

  background: var(--white);
  padding: 80px 20px;
}

.testimonials-section-inner {
  max-width: var(--container);
  margin: 0 auto;
}

/* Intestazione: usa il font del sito (design system),
   NON quello Meta. Solo i commenti usano Meta font. */
.testimonials-overline {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0 0 var(--sp-3);
}

.testimonials-title {
  font-family: var(--font);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-light);
  color: var(--blue);
  line-height: var(--lh-tight);
  text-align: center;
  margin: 0 0 var(--sp-9);
}

/* --- grid: 2 colonne desktop, 1 colonna mobile --- */
.comment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);                     /* 30px */
  margin-bottom: var(--sp-9);           /* 60px */
}

/* --- card: avatar + contenuto (bolla + meta) --- */
.comment-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: start;
  font-family: var(--meta-font);        /* solo qui: Meta font */
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--meta-bubble-bg);
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comment-content {
  min-width: 0;                         /* evita overflow su testi lunghi */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- bubble grigia con nome + body --- */
.comment-bubble {
  background: var(--meta-bubble-bg);
  border-radius: 18px;
  padding: 8px 12px;
  position: relative;
}

.comment-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--meta-text);
  line-height: 1.3;
  margin: 0 0 2px;
}

.comment-body {
  font-size: 15px;
  font-weight: 400;
  color: var(--meta-text);
  line-height: 1.33;
  margin: 0;
}

/* --- meta line: Like · Reply · Xh   [reactions pill] --- */
.comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 12px 0;
  font-size: 12px;
  color: var(--meta-muted);
  line-height: 1;
}

.comment-meta-action {
  font-weight: 600;
  color: var(--meta-muted-strong);
  cursor: default;
}
.comment-meta-sep {
  color: var(--meta-muted);
  user-select: none;
}
.comment-timestamp {
  font-weight: 400;
  color: var(--meta-muted);
}

/* --- reactions pill (badge con icone + numero) --- */
.comment-reactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;                    /* push a destra sulla riga */
  background: var(--white);
  border-radius: 100px;
  padding: 2px 7px 2px 3px;
  box-shadow: var(--meta-pill-shadow);
  font-size: 13px;
  font-weight: 600;
  color: var(--meta-muted);
}
.reaction-icons {
  display: inline-flex;
  align-items: center;
}
.reaction-icon {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
}
.reaction-icon + .reaction-icon {
  margin-left: -4px;                    /* overlap sottile */
}
.reaction-icon-like  { background: var(--meta-blue); }
.reaction-icon-love  { background: var(--meta-red);  }

/* --- galleria disegni: override size SOLO in questa sezione.
   La galleria del master (.gallery-grid) ha altezza 220px di default;
   qui i disegni studenti vogliono respirare di piu'. --- */
.testimonials-section .gallery-grid {
  gap: var(--sp-3);                     /* 12px */
}
.testimonials-section .gallery-grid img {
  height: 300px;                        /* +80 rispetto al default */
}

/* Intro galleria in questa sezione: usa font del master */
.testimonials-section .gallery-intro {
  font-family: var(--font);
  color: var(--text);
}

/* Mobile: grid 1 colonna, galleria piu' contenuta */
@media (max-width: 768px) {
  .testimonials-section             { padding: 50px 20px; }
  .testimonials-title               { font-size: var(--fs-2xl); margin-bottom: var(--sp-7); }
  .comment-grid                     { grid-template-columns: 1fr; gap: var(--sp-6); }
  .testimonials-section .gallery-grid img { height: 200px; }
}

/* ============================================================
   PATTERN: COMMUNITY-SECTION (social proof black, video + grids)
   Blocco importato dal gold `metodo-de-cenzo`: sezione scura
   centrata che mostra l'attivit&agrave; della community. Sequenza:
     1. H2 + paragrafo contatore lavori
     2. Video loop 16:9 (iframe media delivery, muted/autoplay)
     3. Lead "Questi sono alcuni:" + grid opere allievi
     4. Community-grid masonry di post FB-style
     5. CTA verde (btn-cta-green) + fineprint

   Struttura HTML attesa:
     <section class="community-section">
       <div class="community-section-inner">
         <h2 class="community-title">&hellip;</h2>
         <p class="community-sub">&hellip;</p>
         <div class="community-video"><iframe &hellip;></iframe></div>
         <p class="community-lead">Questi sono alcuni:</p>
         <div class="student-grid">
           <figure class="student-item">
             <img &hellip;>
             <figcaption>&hellip;</figcaption>
           </figure> x 6
         </div>
         <div class="community-grid">
           <img &hellip;> x 9
         </div>
         <a class="btn btn-cta-green" href="&hellip;">ISCRIVITI ADESSO</a>
         <p class="community-note">&hellip;</p>
       </div>
     </section>
============================================================ */
.community-section {
  background: var(--dark);
  color: var(--white);
  padding: var(--sp-9) var(--section-pad-x);    /* 60px vert (gold) */
  text-align: center;
}
.community-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.community-title {
  font-family: var(--font);
  font-size: var(--fs-xl);                      /* 24px */
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: var(--lh-tight);
  max-width: 800px;
  margin: 0 auto var(--sp-3);
}
.community-sub {
  font-family: var(--font);
  font-size: var(--fs-lg);                      /* 21px */
  font-weight: var(--fw-regular);
  color: var(--overlay-light-70);
  max-width: 850px;
  margin: 0 auto var(--sp-7);
}

/* Video loop 16:9 — iframe a tutta larghezza del wrapper */
.community-video {
  position: relative;
  max-width: 800px;
  margin: 0 auto var(--sp-7);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: #000;
}
.community-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;                         /* decorativo: no interazione */
}

.community-lead {
  font-family: var(--font);
  font-size: var(--fs-sm);                      /* 14-15px */
  font-weight: var(--fw-bold);
  color: var(--overlay-light-90, rgba(255,255,255,0.9));
  margin: 0 0 var(--sp-3);
}

/* Grid opere allievi (masonry via column-count) */
.student-grid {
  column-count: 3;
  column-gap: var(--sp-5);                      /* 20px */
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.student-item {
  margin: 0 0 var(--sp-6);                      /* 24px tra item */
  display: inline-block;                        /* richiesto dal column-layout */
  width: 100%;
  break-inside: avoid;
}
.student-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);                   /* 12px tra img e caption */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.student-item figcaption {
  font-family: var(--font);
  font-size: var(--fs-xs);                      /* 13-14px (gold: 13) */
  font-weight: var(--fw-regular);
  color: var(--overlay-light-70);
  line-height: var(--lh-tight);
}

/* Community grid (post FB-style, masonry 3 col) */
.community-grid {
  column-count: 3;
  column-gap: var(--sp-5);                      /* 20px */
  max-width: 800px;
  margin: var(--sp-7) auto var(--sp-7);
}
.community-grid img {
  width: 100%;
  height: auto;
  margin-bottom: var(--sp-5);                   /* 20px tra img */
  display: inline-block;
  break-inside: avoid;
  border-radius: var(--radius);
}

/* CTA verde e nota sotto */
.btn-cta-green {
  /* estende .btn: dimensioni da CTA commerciale */
  background: var(--green);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-md);                      /* 18px */
  font-weight: var(--fw-bold);
  padding: var(--sp-5) var(--sp-9);             /* 20px / 60px */
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  text-decoration: none;
  margin: var(--sp-7) 0 var(--sp-3);            /* 30/12 */
  box-shadow: 0 6px 18px rgba(46, 125, 63, 0.35);
}
.btn-cta-green:hover {
  background: var(--green-dk);
  color: var(--white);
}
.community-note {
  font-family: var(--font);
  font-size: var(--fs-sm);                      /* 14px */
  color: var(--overlay-light-60, rgba(255,255,255,0.6));
  margin: 0;
}

/* Mobile: grid a 1 colonna, padding ridotto */
@media (max-width: 768px) {
  .community-section     { padding: 50px 20px; }
  .community-title       { font-size: var(--fs-lg); }     /* 21px */
  .community-sub         { font-size: var(--fs-md); }     /* 18px */
  .student-grid,
  .community-grid        { column-count: 1; }
  .btn-cta-green         { padding: var(--sp-4) var(--sp-7); font-size: var(--fs-base); }
}

/* Tablet: 2 colonne per le grid */
@media (min-width: 769px) and (max-width: 1024px) {
  .student-grid,
  .community-grid        { column-count: 2; }
}

/* --- Modifier: variante "light" (bg crema, senza video)
   SCOPE: riuso dei pattern .student-grid / .community-grid in una sezione
   standalone, senza video/heading, su sfondo chiaro. Nato per
   /soft-pastel-secrets/ (aprile 2026) dove due gallery di lavori studenti
   (una con didascalia, una masonry pura) vanno in fila dopo la
   testimonial di Juliana, senza transizione narrativa.

   STRUTTURA HTML ATTESA:
     <section class="community-section community-section--light">
       <div class="community-section-inner">
         <div class="student-grid">&hellip;</div>
         <div class="community-grid">&hellip;</div>
       </div>
     </section>
*/
.community-section--light {
  background: var(--bg);
  color: var(--text);
}
.community-section--light .community-title,
.community-section--light .community-sub,
.community-section--light .community-lead,
.community-section--light .community-note {
  color: var(--text);
}
.community-section--light .student-item figcaption {
  color: var(--muted);
}
.community-section--light .student-item img,
.community-section--light .community-grid img {
  box-shadow: var(--shadow-sm);                  /* ombra leggera su bg chiaro */
}

/* ============================================================
   PATTERN: FITS-YOU SECTION (qualificazione "fa al caso tuo")
   Blocco pre-decisione: H2 centrato leggero + check-list a
   sinistra dentro un wrap narrow + CTA commerciale (cta-price-box).
   Sfondo cream per staccarsi dalle sezioni bianche adiacenti.

   Struttura HTML attesa:
     <section class="fits-you-section">
       <div class="fits-you-inner">
         <h2 class="fits-you-title">Questo percorso fa al caso tuo se&hellip;</h2>
         <ul class="check-list fits-you-list">…</ul>
         <div class="cta-price-box">…</div>
       </div>
     </section>
============================================================ */
.fits-you-section {
  background: var(--bg);
  color: var(--text);
  padding: var(--section-pad-y) var(--section-pad-x);
}

.fits-you-inner {
  max-width: var(--container-sm);       /* 800px, leggibile */
  margin: 0 auto;
}

.fits-you-title {
  font-family: var(--font);
  font-size: var(--fs-3xl);             /* 32px (live: 34, coerente col master) */
  font-weight: var(--fw-light);         /* 300 come il live */
  line-height: var(--lh-tight);
  color: var(--text);
  text-align: center;
  margin: 0 0 var(--sp-8);              /* 40px */
}

/* Reading-width uniforme (token --reading-width): coerente con le
   altre prose della pagina (narrative, promo, testimonial). */
.fits-you-list {
  max-width: var(--reading-width, 800px);
  margin: 0 auto var(--sp-9);           /* 60px prima del CTA box */
}

@media (max-width: 768px) {
  .fits-you-section { padding: 50px 20px; }
  .fits-you-title   { font-size: var(--fs-2xl); margin-bottom: var(--sp-7); }
  .fits-you-list    { margin-bottom: var(--sp-8); }
}

/* ============================================================
   PATTERN: AUDIENCE CALLOUT (disclaimer + qualifica numerata)
   SCOPO: blocco "ATTENZIONE: questo corso non e' per tutti +
   pero' e' per te se 1) ... 2) ... 3) ...". Differente da
   .fits-you-section (che usa check-list verde + center-aligned
   senza disclaimer rosso). Qui:
     - left-aligned (come live, lettura piu' personale)
     - "ATTENZIONE" in --red-price (12.27:1 AAA su --bg)
     - lista numerata, cifre in --blue (8.78:1 AAA)
   Introdotto maggio 2026 per /sl-a-a/.
   Markup:
     <section class="audience-callout">
       <div class="audience-callout-inner">
         <p class="audience-callout-warning">
           <strong class="audience-callout-flag">ATTENZIONE:</strong>
           Questo corso non &egrave; adatto a tutti,
           <strong>infatti se non hai...</strong>
           e ti consiglio di chiudere questa pagina.
         </p>
         <p class="audience-callout-bridge">Potrebbe essere di estremo aiuto invece se:</p>
         <ol class="audience-callout-list">
           <li>...</li><li>...</li><li>...</li>
         </ol>
       </div>
     </section>
============================================================ */
.audience-callout {
  background: var(--bg);
  color: var(--text);
  padding: var(--section-pad);                /* 60 20, master rule lo collassa fra sezioni */
}
/* La card bianca interna stacca il disclaimer dal flow crema delle
   sezioni adiacenti (es. sopra .cta-band, sotto altra cream). */
.audience-callout-inner {
  max-width: var(--container-sm);             /* 800 reading-width */
  margin: 0 auto;
  text-align: left;
  background: var(--white);
  border-radius: var(--radius-lg);            /* 12 */
  box-shadow: var(--shadow-md);
  padding: var(--sp-9) var(--sp-8);           /* 60 40 desktop */
}
@media (max-width: 768px) {
  .audience-callout-inner { padding: var(--sp-7) var(--sp-5); }   /* 30 20 mobile */
}
.audience-callout-warning {
  font-family: var(--font);
  font-size: var(--fs-lg);                    /* 21 */
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--text);
  margin: 0 0 var(--sp-6);                    /* 24 sotto */
}
.audience-callout-warning strong { font-weight: var(--fw-medium); }   /* 500 come live */
.audience-callout-flag {
  color: var(--red-price);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
}
.audience-callout-bridge {
  font-family: var(--font);
  font-size: var(--fs-lg);                    /* 21 */
  font-weight: var(--fw-medium);              /* 500 */
  line-height: var(--lh-snug);
  color: var(--muted);                        /* 5.7:1 AA largo */
  margin: 0 0 var(--sp-4);                    /* 16 prima della lista */
}
.audience-callout-list {
  list-style: none;
  counter-reset: callout-num;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);                           /* 12 fra item */
}
.audience-callout-list li {
  counter-increment: callout-num;
  position: relative;
  padding-left: var(--sp-7);                  /* 30 spazio per cifra */
  font-family: var(--font);
  font-size: var(--fs-lg);                    /* 21 */
  font-weight: var(--fw-medium);              /* 500 come live */
  line-height: var(--lh-normal);
  color: var(--text);
}
.audience-callout-list li::before {
  content: counter(callout-num) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--fw-bold);
  color: var(--blue);                         /* 8.78:1 AAA */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .audience-callout-warning,
  .audience-callout-bridge,
  .audience-callout-list li { font-size: var(--fs-md); }   /* 18 mobile */
  .audience-callout-list li { padding-left: var(--sp-6); }
}

/* ============================================================
   PATTERN: DISCOVER SECTION (curiosity bullets su bg scuro)
   SCOPO: blocco "Ecco cosa scoprirai..." con lead grande +
   una o piu' liste check di curiosity bullets. Bg --blue-dk
   per continuita' brand con .benefits-band e .device-band.
   Differente da .fits-you-section (cream, centrata, una
   lista, con CTA). Qui lo scopo e' "elenca contenuti corso"
   con eventuale closing pitch in sezione successiva.
   Introdotto maggio 2026 per /sl-a-a/.
   Markup:
     <section class="discover-section">
       <div class="discover-section-inner">
         <h2 class="discover-section-lead">Ecco cosa scoprirai&hellip;</h2>
         <ul class="discover-list">
           <li>...</li><li>...</li>
         </ul>
         <ul class="discover-list">
           <li>...</li><li>...</li>
         </ul>
       </div>
     </section>
   Multiple .discover-list possibili come sul live (4+8 items).
============================================================ */
.discover-section {
  background: var(--blue-dk);
  color: var(--white);
  padding: var(--section-pad);                /* 60 20 */
}
.discover-section-inner {
  max-width: var(--container-sm);             /* 800 reading-width */
  margin: 0 auto;
}
.discover-section-lead {
  font-family: var(--font);
  font-size: var(--fs-3xl);                   /* 32 desktop */
  font-weight: var(--fw-light);               /* 300, come live */
  line-height: var(--lh-snug);                /* 1.4 */
  color: var(--white);
  text-align: center;
  margin: 0 0 var(--sp-8);                    /* 40 prima della prima lista */
  max-width: var(--reading-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp-8);
}
.discover-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-7);                    /* 30 fra liste consecutive */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);                           /* 16 fra item */
}
.discover-list:last-child { margin-bottom: 0; }
.discover-list li {
  position: relative;
  padding-left: 36px;                         /* allineato a .check-list canone */
  font-family: var(--font);
  font-size: var(--fs-lg);                    /* 21 desktop, allineato al canone master */
  font-weight: var(--fw-regular);             /* 400 (no bold di default; <strong> per enfasi) */
  line-height: var(--lh-snug);                /* 1.4 come .check-list canone */
  color: var(--white);
}
.discover-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;                                   /* allineato a .check-list canone */
  width: 24px;
  height: 24px;
  background-color: var(--green-bright);      /* 4.53:1 su --blue-dk, AA UI */
  border-radius: var(--radius-circle);
  /* Check bianco SVG centrato dentro il cerchio verde */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .discover-section-lead { font-size: var(--fs-xl); margin-bottom: var(--sp-7); }
  .discover-list li      { font-size: var(--fs-md); padding-left: 32px; } /* 18 mobile */
  .discover-list li::before { width: 22px; height: 22px; top: 3px; background-size: 13px 13px; }
}

/* ============================================================
   PATTERN: MEMBERS-AREA SECTION (banner scuro "la tua area membri")
   Sezione full-width su sfondo scuro (--dark) con titolo grande
   centrato, lead, parentetica e mockup device. Usata come
   "punchline" visiva prima della CTA finale.

   Struttura HTML attesa:
     <section class="members-area-section">
       <div class="members-area-inner">
         <h2 class="members-area-title">La tua area membri</h2>
         <p class="members-area-lead">…</p>
         <p class="members-area-note">(…)</p>
         <div class="members-area-media"><img …></div>
         <p class="members-area-fineprint">* …</p>
       </div>
     </section>
============================================================ */
.members-area-section {
  background: var(--dark);
  color: var(--white);
  padding: var(--sp-10) var(--section-pad-x);   /* 80px verticali */
  text-align: center;
}

.members-area-inner {
  max-width: var(--container);                   /* 1120px */
  margin: 0 auto;
}

.members-area-title {
  font-family: var(--font);
  font-size: var(--fs-5xl);                      /* 56px (live: 52) */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--white);
  margin: 0 0 var(--sp-6);                       /* 24px */
}

.members-area-lead {
  font-family: var(--font);
  font-size: var(--fs-2xl);                      /* 28px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);                  /* 1.2 — lead compatto, allineato a .promo-lead */
  color: var(--white);
  max-width: 820px;
  margin: 0 auto var(--sp-5);                    /* 20px */
}

/* Nota parentetica: pi&ugrave; piccola e leggermente meno in evidenza. */
.members-area-note {
  font-family: var(--font);
  font-size: var(--fs-md);                       /* 18px */
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);                  /* 1.2 — nota compatta, coerente col lead sopra */
  color: var(--white);
  opacity: 0.85;
  max-width: 720px;
  margin: 0 auto var(--sp-9);                    /* 60px prima del mockup */
}

.members-area-media {
  max-width: 900px;
  margin: 0 auto;
}
.members-area-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Legal/commerce note dentro la banda scura. */
.members-area-fineprint {
  margin: var(--sp-8) 0 0;                       /* 40px sopra */
  font-family: var(--font);
  font-size: var(--fs-sm);                       /* 14px (legibilita' su scuro) */
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  color: var(--white);
  opacity: 0.7;
}

@media (max-width: 768px) {
  .members-area-section   { padding: 60px 20px; }
  .members-area-title     { font-size: var(--fs-3xl); }   /* 32px */
  .members-area-lead      { font-size: var(--fs-lg); }    /* 21px */
  .members-area-note      { font-size: var(--fs-base); margin-bottom: var(--sp-8); }
  .members-area-fineprint { font-size: var(--fs-xs); }
}

/* Override contestuale: dentro la banda scura il .fineprint generico
   (var(--muted)) sparirebbe sul fondo. Allineato a .bio-section .fineprint. */
.members-area-section .fineprint { color: var(--overlay-light-70); }
/* .cta-price-box interno: toglie il max-width 640 per respiro nella banda. */
.members-area-section .cta-price-box { margin-top: var(--sp-6); }

/* ------------------------------------------------------------
   MODIFIER: .members-area-section.is-light
   Versione chiara dello stesso pattern: stesso ritmo tipografico
   e layout, ma fondo chiaro e testo scuro. Serve per i reveal
   post-cliffhanger (es. "is a pleasure to introduce you to:"
   seguito da titolo corso + mockup) dove serve STACCARE dalla
   sezione precedente senza passare dal dark.
   Include anche .members-area-subtitle (double-heading opt-in:
   titolo corso + "The Hidden Techniques..."). Introdotto in
   soft-pastel-secrets/ (aprile 2026).
------------------------------------------------------------ */
.members-area-section.is-light {
  background: var(--white);
  color: var(--text);
}
.members-area-section.is-light .members-area-title      { color: var(--dark); }
.members-area-section.is-light .members-area-subtitle   { color: var(--blue); }
.members-area-section.is-light .members-area-lead       { color: var(--text); }
.members-area-section.is-light .members-area-note       { color: var(--muted); opacity: 1; }
.members-area-section.is-light .members-area-fineprint  { color: var(--muted); }
.members-area-section.is-light .fineprint               { color: var(--muted); }

/* Sottotitolo corso sotto il title: serif, blu, uppercase sobrio.
   Usare dentro .members-area-section (tipicamente .is-light) subito
   dopo .members-area-title. */
.members-area-subtitle {
  font-family: var(--serif);
  font-size: var(--fs-2xl);                      /* 28px desktop */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--blue);
  letter-spacing: 0.01em;
  margin: calc(var(--sp-6) * -1) 0 var(--sp-6);  /* compensa il margin-bottom del title sopra */
}
@media (max-width: 768px) {
  .members-area-subtitle { font-size: var(--fs-xl); }   /* 24px */
}

/* ============================================================
   PATTERN: CTA-BAND (striscia CTA tra due sezioni)
   Wrapper per inserire un .cta-price-box fra due sezioni grandi,
   tipicamente su bg cream chiaro per staccarsi dalle sezioni
   a bg pieno (scuro / colorato) adiacenti.

   Struttura HTML:
     <section class="cta-band">
       <div class="cta-band-inner">
         <div class="cta-price-box"> … </div>
       </div>
     </section>
============================================================ */
.cta-band {
  background: var(--bg);
  padding: var(--sp-8) var(--section-pad-x);      /* 40px vert, non 80 */
}
.cta-band-inner {
  max-width: var(--container-sm);
  margin: 0 auto;
  text-align: center;
}
/* Paragrafo-hook sopra la CTA (introduttivo, breve). Usato sulle
   lesson-page: lead "Ti piacerebbe scoprire..." prima del bottone. */
.cta-band-intro {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--text);
  margin: 0 auto var(--sp-5);
  max-width: var(--reading-width);
}
.cta-band .btn-lg {
  font-size: var(--fs-md);
  padding: var(--sp-4) var(--sp-8);
}

/* Sotto-elementi opzionali per pitch finale (estensione maggio 2026
   per /sl-a-a/). Servono a costruire blocchi tipo:
     [headline mixed weight] [price con verde+rosso strike]
     [note italic muted]     [CTA]                [fineprint]
   senza creare un pattern separato. Backward compatible: chi usa
   solo .cta-band-intro + .btn-lg resta invariato. */

/* Headline grande mixed weight: base light, <strong>/<em>/<u> per enfasi. */
.cta-band-headline {
  font-family: var(--font);
  font-size: var(--fs-3xl);                       /* 32 */
  font-weight: var(--fw-light);                   /* 300 base */
  line-height: var(--lh-tight);                   /* 1.2 */
  color: var(--text);
  margin: 0 auto var(--sp-5);                     /* 20 sotto */
  max-width: var(--reading-width);
}
.cta-band-headline strong { font-weight: var(--fw-bold); color: var(--dark); }
.cta-band-headline em      { font-style: italic; }
.cta-band-headline u       { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Linea prezzo: 28px regular, con .price-now verde brand + .price-was rosso strike.
   Contrasti su --bg: green 4.36:1 (AA 24px+), red-price 11.79:1 (AAA). */
.cta-band-price {
  font-family: var(--font);
  font-size: var(--fs-2xl);                       /* 28 */
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--text);
  margin: 0 auto var(--sp-3);                     /* 12 sotto */
}
.cta-band-price .price-now {
  font-weight: var(--fw-bold);
  color: var(--green);
}
.cta-band-price .price-was {
  font-weight: var(--fw-bold);
  color: var(--red-price);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Nota parentetica light italic, sotto al prezzo. */
.cta-band-note {
  font-family: var(--font);
  font-size: var(--fs-md);                        /* 18 (mobile-friendly) */
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-normal);
  color: var(--muted);                            /* 5.7:1 su --bg, AA largo */
  margin: 0 auto var(--sp-6);                     /* 24 sopra al CTA */
  max-width: var(--reading-width);
}

/* Sub-pattern: price ladder 3 livelli (Normalmente / In offerta / Oggi).
   Aggiunto maggio 2026 per /sl-a-a/ closing offer. Riusabile per altre
   pagine che hanno la stessa struttura "scala prezzi" tipica.
   Markup:
     <div class="cta-band-price-ladder">
       <p class="cta-band-price-was-line">Normalmente a <span class="price-was">197&euro;</span></p>
       <p class="cta-band-price-mid-line">In offerta a 147&euro;</p>
       <p class="cta-band-price-now-line">Oggi a soli <span class="price-now">97&euro;</span></p>
     </div>
*/
.cta-band-price-ladder {
  margin: 0 auto var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);                                 /* 8 fra righe */
  align-items: center;
}
.cta-band-price-was-line {
  font-family: var(--font);
  font-size: var(--fs-2xl);                         /* 28 desktop */
  font-weight: var(--fw-light);
  color: var(--red-price);                          /* 11.79:1 AAA su crema */
  margin: 0;
  line-height: 1.2;
}
.cta-band-price-was-line .price-was {
  font-weight: var(--fw-bold);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.cta-band-price-mid-line {
  font-family: var(--font);
  font-size: var(--fs-xl);                          /* 24 */
  font-weight: var(--fw-light);
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.cta-band-price-now-line {
  font-family: var(--font);
  font-size: var(--fs-4xl);                         /* 42 desktop */
  font-weight: var(--fw-bold);
  color: var(--dark);
  margin: var(--sp-2) 0 0;
  line-height: 1.1;
}
.cta-band-price-now-line .price-now {
  color: var(--green);                              /* 4.36:1 AA largo */
}
@media (max-width: 768px) {
  .cta-band-price-was-line { font-size: var(--fs-xl); }     /* 24 */
  .cta-band-price-mid-line { font-size: var(--fs-lg); }     /* 21 */
  .cta-band-price-now-line { font-size: var(--fs-3xl); }    /* 32 */
}

/* Mockup multi-device opzionale dentro al pitch (tipico fra .cta-band-price
   e .cta-band-note). Il <figure> e' centrato, max-width 500px, no shadow
   (la trasparenza dei device frame e' gia' caratterizzante). */
.cta-band-mockup {
  margin: 0 auto var(--sp-6);                     /* 24 sotto */
  max-width: 500px;
  line-height: 0;
}
.cta-band-mockup img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .cta-band-mockup { max-width: 100%; }
}

@media (max-width: 768px) {
  .cta-band { padding: 30px 20px; }
  .cta-band-intro    { font-size: var(--fs-md); }
  .cta-band-headline { font-size: var(--fs-xl); } /* 24 mobile */
  .cta-band-price    { font-size: var(--fs-lg); } /* 21 mobile */
  .cta-band-note     { font-size: var(--fs-base); }/* 16 mobile */
}

/* ============================================================
   PATTERN: CLOSING-OFFER SECTION (chiusura commerciale)
   Sezione grande con 2 parti verticali:
     1) "punchline" centrata: titolo XL, mockup hero, prezzo
        verde, fineprint, bottone AGGIUNGI AL CARRELLO XL,
        badge pagamento sicuro.
     2) grid 2 colonne:
        - left: guarantee (titolo + lead + box garanzia)
        - right: pricing-card con card blu (titolo prodotto,
          mini-mockup, accesso a vita, prezzo barrato + prezzo
          live, CTA verde, lista benefit con check).

   Struttura HTML attesa:
     <section class="closing-offer-section">
       <div class="closing-offer-inner">
         <div class="closing-offer-top"> … </div>
         <div class="closing-offer-grid">
           <div class="guarantee"> … </div>
           <aside class="pricing-card"> … </aside>
         </div>
       </div>
     </section>
============================================================ */
.closing-offer-section {
  background: var(--bg-lavender);
  color: var(--text);
  padding: var(--sp-10) var(--section-pad-x);    /* 80px vert */
}
.closing-offer-inner {
  max-width: var(--container);                    /* 1120px */
  margin: 0 auto;
}

/* ---- TOP: punchline ---- */
.closing-offer-top {
  text-align: center;
  margin-bottom: var(--sp-11);                    /* 120px prima della grid */
}

.closing-offer-title {
  font-family: var(--font);
  font-size: var(--fs-5xl);                       /* 56px (live: 63 bold) */
  font-weight: var(--fw-black);                   /* 800 come live */
  line-height: var(--lh-tight);
  color: var(--text);
  max-width: 900px;
  margin: 0 auto var(--sp-8);
}

.closing-offer-hero {
  max-width: 900px;
  margin: 0 auto var(--sp-8);
}
.closing-offer-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.closing-offer-price {
  font-family: var(--font);
  font-size: var(--fs-4xl);                       /* 42px (live: 52) */
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  /* --green-dk 7.09:1 su --bg-lavender (green-bright fallava 2.89:1) */
  color: var(--green-dk);
  margin: 0 0 var(--sp-3);
}

/* Variante "ladder" — prezzi precedenti stricciati sopra al prezzo finale.
   Modifier: .closing-offer-strike. Font piu' piccolo, muted, line-through.
   Ordine tipico: NORMALMENTE 187 (strike) -> IN OFFERTA 127 (strike) -> 67 (price). */
.closing-offer-strike {
  font-family: var(--font);
  font-size: var(--fs-xl);                        /* 24px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin: 0 0 var(--sp-2);
}
.closing-offer-strike + .closing-offer-strike {
  font-size: var(--fs-lg);                        /* 21px (gradiente verso il prezzo finale) */
}
.closing-offer-strike + .closing-offer-price {
  margin-top: var(--sp-4);
}

.closing-offer-hint {
  font-size: var(--fs-md);                        /* 18px */
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 var(--sp-6);
}

/* Bottone "AGGIUNGI AL CARRELLO" XL, arancio brand. */
.btn-cart-xl {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-3xl);                       /* 32px (live: 42) */
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  padding: var(--sp-6) var(--sp-10);              /* 24px 80px */
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform var(--t-base), background var(--t-base), box-shadow var(--t-base);
  box-shadow: var(--shadow-brand);
}
.btn-cart-xl:hover,
.btn-cart-xl:focus-visible {
  background: var(--orange-dk);
  transform: scale(1.02);
}

.secure-badge {
  display: block;
  max-width: 460px;
  margin: var(--sp-7) auto 0;                     /* 30px sopra */
}
.secure-badge img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- GRID: guarantee + pricing-card ---- */
.closing-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);                              /* 80px */
  align-items: stretch;                           /* stessa altezza */
}

/* ============================================================
   PATTERN: GUARANTEE-SECTION (sezione standalone "Rimborso 100%")
   SCOPO: sezione dedicata di garanzia con seal SVG dorato + titolo
   grande + copy + signature + CTA. Differente da .guarantee
   (sub-elemento dentro .closing-offer-section grid 2-col).
   Aggiunto maggio 2026 per /sl-a-a/.
   Markup:
     <section class="guarantee-section">
       <div class="guarantee-section-inner">
         <div class="guarantee-seal" aria-hidden="true">SVG seal</div>
         <h2 class="guarantee-section-title">Rimborso 100% <em>entro 30 giorni</em></h2>
         <p class="guarantee-section-lead">...</p>
         <p>...</p>
         <p class="guarantee-section-signature">Parola di Enrico De Cenzo</p>
         <a class="btn btn-primary btn-lg" href="...">CTA</a>
         <p class="fineprint">Invece di 147&euro;</p>
       </div>
     </section>
============================================================ */
.guarantee-section {
  background: var(--bg);
  padding: var(--section-pad);
  text-align: center;
}
/* L'inner e' una card bianca con doppio bordo dorato (look certificato),
   shadow morbida, padding generoso. Il doppio bordo e' realizzato con
   border principale + outline (offset interno verso il bordo esterno). */
.guarantee-section-inner {
  max-width: var(--container-sm);                   /* 800 */
  margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: 6px;                              /* 6px dentro il border */
  border-radius: var(--radius-md);
  padding: var(--sp-10) var(--sp-8);                /* 80 40 desktop */
  box-shadow: var(--shadow-md);
  position: relative;
}
@media (max-width: 768px) {
  .guarantee-section-inner {
    padding: var(--sp-8) var(--sp-5);               /* 40 20 mobile */
    outline-offset: 4px;
  }
}
.guarantee-seal {
  width: 140px;
  height: 140px;
  margin: 0 auto var(--sp-7);
  display: block;
}
.guarantee-seal svg { width: 100%; height: 100%; display: block; }
.guarantee-section-title {
  font-family: var(--font);
  font-size: var(--fs-3xl);                         /* 32 desktop */
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin: 0 0 var(--sp-6);
}
.guarantee-section-title em {
  font-style: normal;
  color: var(--gold-dk);                            /* 7+:1 su crema, AAA */
}
.guarantee-section-lead {
  font-family: var(--serif);
  font-size: var(--fs-xl);                          /* 24 */
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--text);
  margin: 0 auto var(--sp-6);
  max-width: var(--reading-width);
}
.guarantee-section p {
  font-family: var(--font);
  font-size: var(--fs-md);                          /* 18 */
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--text);
  margin: 0 auto var(--sp-4);
  max-width: var(--reading-width);
}
.guarantee-section-signature {
  font-style: italic;
  color: var(--muted);
  margin-top: var(--sp-7) !important;
  margin-bottom: var(--sp-9) !important;
}
.guarantee-section a.btn { margin-bottom: var(--sp-3); }
.guarantee-section .fineprint { color: var(--muted); margin-top: 0; }
@media (max-width: 768px) {
  .guarantee-section-title { font-size: var(--fs-2xl); }
  .guarantee-section-lead  { font-size: var(--fs-md); }
  .guarantee-seal          { width: 110px; height: 110px; }
}

/* Colonna sinistra: guarantee — si distribuisce vertical. lungo la card */
.guarantee {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.guarantee-title {
  font-family: var(--font);
  font-size: var(--fs-3xl);                       /* 32px (live: 42) */
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  color: var(--text);
  margin: 0 0 var(--sp-5);
}

.guarantee-lead {
  font-size: var(--fs-lg);                        /* 21px */
  font-weight: var(--fw-regular);
  color: var(--muted);
  line-height: var(--lh-normal);
  margin: 0;
}
/* Sub-frase "per sempre. Senza abbonamento." in blue medium. */
.guarantee-lead .strong-blue {
  color: var(--blue);
  font-weight: var(--fw-medium);
}

.guarantee-box {
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-9);                        /* 60px */
}
.guarantee-box img {
  width: 98px;
  height: auto;
  display: block;
}
.guarantee-box p {
  font-size: var(--fs-sm);                        /* 15px */
  font-weight: var(--fw-light);
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0;
}
.guarantee-box a {
  color: var(--blue);
  text-decoration: underline;
}

/* Colonna destra: pricing card */
.pricing-card {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-lg);                /* 12px */
  padding: var(--sp-8) var(--sp-7);               /* 40px 30px */
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.pricing-card-title {
  font-family: var(--font);
  font-size: var(--fs-xl);                        /* 24px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--white);
  margin: 0 0 var(--sp-5);
}
.pricing-card-media {
  max-width: 280px;
  margin: 0 auto var(--sp-5);
}
.pricing-card-media img {
  display: block;
  width: 100%;
  height: auto;
}
.pricing-card-access {
  font-size: var(--fs-md);                        /* 18px */
  font-weight: var(--fw-regular);
  color: var(--white);
  margin: 0 0 var(--sp-2);
}
/* "Normalmente a €97" — coral per leggibilit&agrave; su bg blue. */
.pricing-card-strike {
  font-size: var(--fs-lg);                        /* 21px (live: 23) */
  font-weight: var(--fw-medium);
  color: var(--coral);
  margin: 0 0 var(--sp-1);
}
.pricing-card-strike del {
  text-decoration: line-through;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
}
.pricing-card-price {
  font-family: var(--font);
  font-size: var(--fs-4xl);                       /* 42px (live: 44) */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--white);
  margin: 0 0 var(--sp-6);
}
.btn-pricing {
  display: block;
  background: var(--green);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-xl);                        /* 24px (live: 26) */
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  padding: var(--sp-4) var(--sp-6);               /* 16px 24px */
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--t-base), transform var(--t-base);
}
.btn-pricing:hover,
.btn-pricing:focus-visible {
  background: var(--green-dk);
  transform: scale(1.02);
}

/* Lista benefit DENTRO la pricing-card: testo bianco, divisori light alpha.
   Separatore in alto per agganciarsi visivamente al CTA sopra. */
.pricing-benefits {
  list-style: none;
  padding: 0;
  margin: var(--sp-7) 0 0;                        /* 30px sotto il CTA */
  text-align: left;
  border-top: 1px solid var(--overlay-light-20);
}
.pricing-benefits li {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-7); /* 12px top/bot, 30px left */
  font-size: var(--fs-md);                        /* 18px */
  font-weight: var(--fw-regular);
  color: var(--overlay-light-90);                 /* white 90% */
  line-height: var(--lh-normal);
  border-bottom: 1px solid var(--overlay-light-20);
}
.pricing-benefits li:last-child { border-bottom: 0; }
.pricing-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  background: var(--green-bright);
  border-radius: 50%;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.333 10.267c0 0.4-0.133 0.8-0.533 1.2l-14.8 14.8c-0.267 0.267-0.667 0.4-1.067 0.4s-0.933-0.133-1.2-0.533l-2.4-2.267-6.267-6.267c-0.267-0.267-0.4-0.667-0.4-1.2s0.133-0.8 0.533-1.2l2.4-2.4c0.267-0.133 0.667-0.4 1.067-0.4s0.8 0.133 1.2 0.533l5.067 5.067 11.2-11.333c0.267-0.267 0.667-0.533 1.2-0.533 0.4 0 0.8 0.133 1.2 0.533l2.4 2.4c0.267 0.267 0.4 0.667 0.4 1.2z'/%3E%3C%2Fsvg%3E") no-repeat center / 60% 60%;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.333 10.267c0 0.4-0.133 0.8-0.533 1.2l-14.8 14.8c-0.267 0.267-0.667 0.4-1.067 0.4s-0.933-0.133-1.2-0.533l-2.4-2.267-6.267-6.267c-0.267-0.267-0.4-0.667-0.4-1.2s0.133-0.8 0.533-1.2l2.4-2.4c0.267-0.133 0.667-0.4 1.067-0.4s0.8 0.133 1.2 0.533l5.067 5.067 11.2-11.333c0.267-0.267 0.667-0.533 1.2-0.533 0.4 0 0.8 0.133 1.2 0.533l2.4 2.4c0.267 0.267 0.4 0.667 0.4 1.2z'/%3E%3C%2Fsvg%3E") no-repeat center / 60% 60%;
}

@media (max-width: 900px) {
  .closing-offer-grid { grid-template-columns: 1fr; gap: var(--sp-9); }
  .pricing-card       { max-width: 480px; margin: 0 auto; }
  .guarantee          { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .closing-offer-section  { padding: 50px 20px; }
  .closing-offer-top      { margin-bottom: 60px; }
  .closing-offer-title    { font-size: var(--fs-3xl); }  /* 32px */
  .closing-offer-price    { font-size: var(--fs-3xl); }  /* 32px */
  .btn-cart-xl            { font-size: var(--fs-xl); padding: var(--sp-5) var(--sp-7); }  /* 24px, 20/30 */
  .guarantee-title        { font-size: var(--fs-2xl); }  /* 28px */
  .guarantee-lead         { font-size: var(--fs-md); }
  .guarantee-box          { grid-template-columns: 64px 1fr; gap: var(--sp-4); }
  .guarantee-box img      { width: 64px; }
}


/* ============================================================
   .bundle-offer — "value stack" editoriale a singola colonna
   SCOPE: mid-page o closing offer quando il contenuto del live e'
   un bundle con lista moduli + prezzo + CTA (singola colonna, non
   grid 2 colonne come .closing-offer-section).
   Design: eyebrow a pill + titolo editoriale con highlight blu -->
     mockup centrato con drop-shadow --> griglia di 12 tile numerati
     (moduli in blue, bonus in green-dk, hover lift + shadow) -->
     pannello prezzo bianco con total strike + prezzo serif 96px +
     savings chip verde --> CTA verde con hover lift -->
     policy card con icona shield blu.
   HTML attesa:
     <section class="bundle-offer">
       <div class="bundle-offer-inner">
         <div class="bundle-offer-head">
           <span class="bundle-offer-eyebrow">&hellip;</span>
           <h2 class="bundle-offer-title">&hellip; <em>&hellip;</em></h2>
         </div>
         <div class="bundle-offer-media"><img&hellip;></div>
         <ol class="bundle-tiles">
           <li class="bundle-tile">
             <span class="bundle-tile-num">01</span>
             <span class="bundle-tile-kind">Module</span>
             <span class="bundle-tile-name">&hellip;</span>
             <span class="bundle-tile-value">Value <strong>$&hellip;</strong></span>
           </li>
           <li class="bundle-tile is-bonus">&hellip;</li>
         </ol>
         <div class="bundle-price-panel">
           <p class="bundle-price-total">
             <span>Total value</span> <del>$&hellip;</del>
           </p>
           <p class="bundle-price-now">$97<span>USD</span></p>
           <p class="bundle-price-savings">Save $&hellip; today</p>
         </div>
         <a class="btn btn-green btn-cta-multiline bundle-offer-cta">&hellip;</a>
         <aside class="bundle-policy">
           <span class="bundle-policy-icon"><svg&hellip;/></span>
           <div class="bundle-policy-body">
             <h3 class="bundle-policy-title">&hellip;</h3>
             <p>&hellip;</p>
           </div>
         </aside>
       </div>
     </section>
   WCAG:
   - blue su white (eyebrow/highlight): >10:1 PASS
   - white su blue (tile num): 10.57:1 PASS
   - white su green-dk (bonus num): ~7:1 PASS
   - muted su white (kind/value): 5.13:1 PASS
   - dark su white (title/name/price): >15:1 PASS
   - green-dk su overlay-green-15 (savings chip): high contrast PASS
   - white su green (CTA): 5.64:1 PASS (niente opacity).
============================================================ */
.bundle-offer {
  background: linear-gradient(180deg, var(--bg-lavender) 0%, var(--white) 100%);
  padding: var(--sp-10) var(--section-pad-x);     /* 80 20 — scala "conversione" (come .closing-offer-section, .members-area-section, .bio-section, .testimonial-section) */
}
.bundle-offer-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* Titolo introduttivo (testo 1:1 dal live) */
.bundle-offer-title {
  font-family: var(--font);
  font-size: 40px;
  font-weight: var(--fw-black);
  line-height: 1.2;
  color: var(--dark);
  text-align: center;
  margin: 0 auto var(--sp-9);
  max-width: 840px;
}
.bundle-offer-title em {
  font-style: normal;
  color: var(--blue);
}

/* Mockup: sta DENTRO al .bundle-box (niente drop-shadow, il box
   gia' ha shadow-xl). Larghezza 100% della cassa interna, margine
   inferiore che lo separa dalla griglia tile. */
.bundle-offer-media {
  margin: 0 auto var(--sp-8);
}
.bundle-offer-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==== .bundle-box ====
   Contenitore "unificante": un singolo box grande con shadow-xl che
   avvolge tile + total + CTA, per dare l'idea che sono UN pezzo solo,
   non cose sconnesse. Il divisore interno stile "biglietto/ricevuta"
   (dashed + 3 pallini blu) separa visivamente tile e prezzo mantenendo
   la continuita' del contenitore.
*/
.bundle-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-10) var(--sp-9) var(--sp-10);
  margin: 0 auto var(--sp-9);
}

/* Tiles grid DENTRO al box: senza ombra propria (l'ombra e' del box),
   solo border sottile + hover con border-color che cambia. */
.bundle-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: 0;
  padding: var(--sp-4) 0 0;
}
.bundle-tile {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  transition: transform var(--t-base), border-color var(--t-base);
  display: flex;
  flex-direction: column;
}
.bundle-tile:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
}
.bundle-tile.is-bonus:hover { border-color: var(--green-dk); }

.bundle-tile-num {
  position: absolute;
  top: -14px;
  left: var(--sp-5);
  background: var(--blue);
  color: var(--white);
  font-family: var(--serif);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  min-width: 36px;
  text-align: center;
}
.bundle-tile.is-bonus .bundle-tile-num {
  background: var(--green-dk);
}
.bundle-tile-kind {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.bundle-tile.is-bonus .bundle-tile-kind {
  color: var(--green-dk);
}
.bundle-tile-name {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 var(--sp-4);
  flex-grow: 1;
}
.bundle-tile-value {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}
.bundle-tile-value strong {
  color: var(--dark);
  font-weight: var(--fw-bold);
  margin-left: var(--sp-1);
}

/* ==== .bundle-summary ====
   Sta DENTRO il .bundle-box, sotto ai tile. Divisore "biglietto" in
   alto (border dashed + 3 pallini blu centrati) che lega visivamente
   tile e prezzo senza spezzare il box.
*/
.bundle-summary {
  position: relative;
  margin-top: var(--sp-9);
  padding-top: var(--sp-9);
  border-top: 1px dashed var(--border-dk);
  text-align: center;
}
.bundle-summary::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 16px;
  background: var(--white);
  /* 3 pallini blu via radial-gradient (niente SVG esterni) */
  background-image:
    radial-gradient(circle, var(--blue) 3px, transparent 3.5px);
  background-size: 16px 16px;
  background-repeat: repeat-x;
  background-position: 2px center;
}

.bundle-summary-total {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
.bundle-summary-total strong {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--sp-2);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.bundle-summary-hint {
  font-family: var(--font);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  margin: 0 0 var(--sp-3);
  letter-spacing: 0;
}
.bundle-summary-price {
  font-family: var(--serif);
  font-size: 96px;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--dark);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-8);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.bundle-summary-price .only {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  align-self: center;
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--blue);
  border-radius: var(--radius-full);
  line-height: 1;
}
.bundle-summary-price .usd {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--muted);
  letter-spacing: 0.12em;
}

/* Countdown evergreen DENTRO .bundle-summary, fra prezzo e CTA.
   Pattern globale: .countdown-evergreen (riusabile su altre pagine).
   JS: un piccolo tick in common.js legge data-countdown-hours dal
   wrapper, usa localStorage come anchor per l'evergreen e aggiorna
   i 4 slot ogni secondo. Zero countdown "tot 23:59:59 HURRY!!!":
   sobrio, serif, box sottile. */
.countdown-evergreen {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  flex-wrap: wrap;
}
.countdown-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: 84px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.countdown-digit {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.countdown-label {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* CTA DENTRO il box-summary: niente margin bottom separato */
.bundle-offer-cta {
  width: 100%;
  max-width: 520px;
  display: flex;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-7);
  box-shadow: 0 14px 30px rgba(46, 125, 63, 0.30);
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.bundle-offer-cta:hover,
.bundle-offer-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(46, 125, 63, 0.40);
}
.bundle-offer-cta .btn-cta-main {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.bundle-offer-cta .btn-cta-bottom {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  opacity: 1;
}

/* Policy card (separata dal box, sotto) */
.bundle-policy {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-7);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.bundle-policy-icon {
  width: 48px;
  height: 48px;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bundle-policy-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.bundle-policy-title {
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 var(--sp-2);
}
.bundle-policy p {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0;
}

@media (max-width: 900px) {
  .bundle-tiles          { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .bundle-offer-title    { font-size: 32px; }
  .bundle-summary-price  { font-size: 80px; }
  .bundle-box            { padding: var(--sp-8) var(--sp-7); }
  .countdown-slot        { min-width: 72px; padding: var(--sp-2) var(--sp-3); }
  .countdown-digit       { font-size: 30px; }
}
@media (max-width: 600px) {
  .bundle-offer          { padding: var(--sp-9) var(--section-pad-x); }
  .bundle-offer-title    { font-size: 26px; margin-bottom: var(--sp-8); }
  .bundle-offer-media    { margin-bottom: var(--sp-8); }
  .bundle-box            { padding: var(--sp-7) var(--sp-5); }
  /* gap maggiore per evitare che il .bundle-tile-num (top:-14px) sembri
     "attaccato" al bordo inferiore della tile precedente. sp-7 (30px) =
     ~16px di respiro visivo dopo il badge numero. */
  .bundle-tiles          { grid-template-columns: 1fr; gap: var(--sp-7); padding-top: var(--sp-4); }
  .bundle-tile           { padding: var(--sp-6) var(--sp-5) var(--sp-4); }
  .bundle-summary        { margin-top: var(--sp-8); padding-top: var(--sp-8); }
  .bundle-summary-total  { font-size: var(--fs-sm); }
  .bundle-summary-total strong { font-size: var(--fs-xl); }
  .bundle-summary-hint   { font-size: var(--fs-md); }
  .bundle-summary-price  { font-size: 60px; gap: var(--sp-2); }
  .bundle-summary-price .only { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); }
  .bundle-summary-price .usd  { font-size: var(--fs-md); }
  .bundle-policy         { grid-template-columns: 1fr; gap: var(--sp-3); text-align: center; padding: var(--sp-5); }
  .bundle-policy-icon    { margin: 0 auto; }
  .bundle-offer-cta      { padding: var(--sp-4) var(--sp-5); }
  .bundle-offer-cta .btn-cta-main   { font-size: var(--fs-md); }
  .bundle-offer-cta .btn-cta-bottom { font-size: var(--fs-xs); }
  /* Timer 4 slot su UNA sola riga anche a 360px: flex-wrap:nowrap, flex:1,
     min-width:0. Le cifre si adattano alla larghezza disponibile senza
     andare a capo. */
  .countdown-evergreen   { gap: var(--sp-1); flex-wrap: nowrap; justify-content: space-between; }
  .countdown-slot        { min-width: 0; flex: 1 1 0; padding: var(--sp-2) var(--sp-1); }
  .countdown-digit       { font-size: 22px; }
  .countdown-label       { font-size: 9px; letter-spacing: 0.08em; }
}


/* ============================================================
   .guarantee-section — GARANZIA LUNGA STANDALONE (editorial)
   SCOPE: blocco di reassurance full-section, centrato, singola
   colonna reading width. Pattern "lungo" di garanzia con sigillo
   dorato + 3 step numerati + firma autore. Nato per
   /soft-pastel-secrets/ (aprile 2026). Riusabile su qualsiasi
   landing che abbia una garanzia distesa stile sales-letter.

   Distinto dalla `.guarantee` compatta che vive DENTRO
   `.closing-offer-section` (card a 2 colonne col pricing a fianco):
   qui e' una sezione autonoma a sviluppo verticale.

   STRUTTURA ATTESA:
     <section class="guarantee-section">
       <div class="guarantee-inner">
         <figure class="guarantee-seal">
           <img src="&hellip;/garanzia.webp" alt="30-day guarantee seal">
         </figure>
         <h2 class="guarantee-heading">
           &ldquo;Artistic Growth&rdquo; <em>Guarantee</em>
         </h2>
         <p>&hellip; lead &hellip;</p>
         <p class="guarantee-howto">Here&rsquo;s how it works:</p>
         <ol class="guarantee-steps">
           <li>&hellip;</li>
           <li>&hellip;</li>
           <li>&hellip;</li>
         </ol>
         <p>&hellip;</p>
         <p>&hellip;</p>
         <figure class="guarantee-sign">
           <img src="&hellip;/firma.webp" alt="Enrico De Cenzo signature">
           <figcaption>Enrico De Cenzo&rsquo;s word.</figcaption>
         </figure>
       </div>
     </section>

   NOTE:
   - Bg crema (`--bg`), coerente con altri blocchi narrativi "caldi".
   - Inner max 760px, heading centrato, prose left-aligned (reading).
   - Seal max 200px, centrato in alto.
   - Heading serif 40/32 con `<em>` blu brand (keyword "Guarantee").
   - .guarantee-howto: label bold che apre la lista numerata.
   - .guarantee-steps: `<ol>` con numeri custom cerchiati blu
     (`counter-reset` + `::before`). Step multi-line ok.
   - Firma: immagine 260px max, caption serif italic muted.
   - Classi figlie namespacate con prefisso `guarantee-*` MA diverse
     da quelle dentro `.closing-offer-section` (`.guarantee-box`,
     `.guarantee-lead`, `.guarantee-title`): zero collisioni.
   WCAG:
   - dark su bg crema: >15:1 PASS (text, heading, howto)
   - blue su bg crema (heading em, step badge bg): >8:1 PASS
   - white su blue (numero step): 10.57:1 PASS
   - muted su bg crema (sign caption): ~5.1:1 PASS
============================================================ */
.guarantee-section {
  background: var(--white);                      /* full-bleed white */
  padding: var(--sp-10) var(--section-pad-x);    /* 80 20 — scala "conversione" */
}

/* Card interna con cornice dorata: stacca la garanzia dallo sfondo
   della pagina e concentra lo sguardo. Border sottile in --gold
   (decorativo, passa perche' non e' testo), radius morbido, shadow
   impercettibile. */
.guarantee-inner {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-9);              /* 80 60 desk */
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Sigillo dorato in apertura, centrato. */
.guarantee-seal {
  margin: 0 auto var(--sp-6);
  max-width: 200px;
}
.guarantee-seal img {
  width: 100%;
  height: auto;
  display: block;
}

/* Titolo editoriale. <em> = keyword dorato (AA su white via gold-dk). */
.guarantee-heading {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  text-align: center;
  margin: 0 0 var(--sp-3);
}
.guarantee-heading em {
  font-style: normal;
  color: var(--gold-dk);                         /* text-safe AA */
}

/* Ornamento decorativo sotto il titolo: due righe oro con diamante
   centrale. Decorativo, marcatore "sigillo" dell'intera card. */
.guarantee-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  color: var(--gold);
}
.guarantee-ornament::before,
.guarantee-ornament::after {
  content: "";
  flex: 0 0 48px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}
.guarantee-ornament span {
  font-size: 12px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Paragrafi generici dentro la guarantee (allineati a sinistra,
   reading-width gia' capp. dall'inner 760). */
.guarantee-section .guarantee-inner > p {
  font-size: var(--fs-lg);                       /* 21px */
  line-height: var(--lh-normal);                 /* 1.6 */
  color: var(--text);
  margin: 0 0 var(--sp-5);
}
.guarantee-section .guarantee-inner > p:last-of-type {
  margin-bottom: 0;
}

/* Label "Here's how it works:" — bold, apre la lista. */
.guarantee-howto {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--dark);
  margin: var(--sp-6) 0 var(--sp-4) !important;
}

/* Lista numerata con badge dorato cerchiato. */
.guarantee-steps {
  counter-reset: gstep;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
}
.guarantee-steps li {
  counter-increment: gstep;
  position: relative;
  padding-left: 52px;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text);
  min-height: 36px;
}
.guarantee-steps li:last-child { margin-bottom: 0; }
.guarantee-steps li::before {
  content: counter(gstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-dk);                    /* AA su white */
  color: var(--white);
  border: 2px solid var(--gold);                 /* anello oro decorativo */
  box-shadow: 0 0 0 3px var(--gold-lt);          /* alone morbido */
  font-family: var(--serif);
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: 32px;                             /* 36 - 2*2 border */
  text-align: center;
  box-sizing: border-box;
}
.guarantee-steps li a {
  color: var(--gold-dk);
  text-decoration: underline;
  font-weight: var(--fw-medium);
}

/* Firma autore in fondo: allineata a SINISTRA, caption SOPRA la
   firma stilizzata. Doppia linea dorata sopra la caption per
   staccare dal corpo della guarantee. */
.guarantee-sign {
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--gold);
  text-align: left;
}
.guarantee-sign figcaption {
  margin: 0 0 var(--sp-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--muted);
}
.guarantee-sign img {
  max-width: 260px;
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .guarantee-inner          { padding: var(--sp-8) var(--sp-5); }      /* 40 20 mob */
  .guarantee-heading        { font-size: 28px; }
  .guarantee-seal           { max-width: 140px; }
  .guarantee-ornament::before,
  .guarantee-ornament::after { flex-basis: 32px; }
  .guarantee-section .guarantee-inner > p { font-size: var(--fs-md); }
  .guarantee-howto          { font-size: var(--fs-md); }
  .guarantee-steps li       { padding-left: 44px; font-size: var(--fs-md); min-height: 30px; }
  .guarantee-steps li::before { width: 30px; height: 30px; line-height: 26px; font-size: 16px; }
  .guarantee-sign img       { max-width: 220px; }
  .guarantee-sign figcaption { font-size: var(--fs-sm); }
}


/* ============================================================
   .paths-section — 3-PATH CHOICE / CONFRONTO SCELTE
   SCOPE: sezione editoriale di chiusura con "N opzioni per il
   lettore", con frase-cornice all'inizio e alla fine. Numeri grandi
   tipografici (serif 96/72) come accento visivo, titoletto estratto
   dalla prima frase di ogni path, corpo di 1-3 paragrafi.
   Nata per /soft-pastel-secrets/ (aprile 2026) ma riusabile per
   qualsiasi "ecco le strade davanti a te" comparison editoriale.

   STRUTTURA ATTESA:
     <section class="paths-section">
       <div class="paths-inner">
         <p class="paths-intro">Frase-cornice introduttiva&hellip;</p>
         <ol class="paths-list">
           <li class="path-item">
             <span class="path-num" aria-hidden="true">1</span>
             <div class="path-body">
               <h3 class="path-title">Titoletto del path (serif bold).</h3>
               <p>Corpo&hellip;</p>
               <p>Altro paragrafo&hellip;</p>
             </div>
           </li>
           &hellip; (N path)
         </ol>
         <p class="paths-outro">Eco finale della frase-cornice (italic muted).</p>
       </div>
     </section>

   NOTE:
   - Bg white: stacca da eventuali narrative-block crema precedenti.
   - Intro/outro serif 28/21, centrati, reading-width cappata a 720.
   - Outro: italic muted (echo), non ripetizione secca.
   - .path-item: grid 2-col desktop (auto 1fr). Su mobile (700) stack.
   - .path-num: serif 96px blu brand, line-height 0.9 per verticalita'.
   - .path-title: serif 24/21 bold dark, "concetto" del path.
   - Paragrafi: body 21/18px standard.
   - Non numeriamo via `counter-reset` perche' i numeri sono TESTO
     visivo pesante (96px) — meglio li' espliciti nel DOM per
     accessibilita' (letti come "one/two/three" se non aria-hidden).
     Aggiunto aria-hidden perche' l'<ol> rende gia' l'enumerazione
     a screen reader.
   WCAG:
   - blue su white (numeri 96px bold): > 10:1 PASS AA Large
   - dark su white (titoletto, corpo): > 15:1 PASS
   - muted su white (outro italic): 5.13:1 PASS AA normal
============================================================ */
.paths-section {
  background: var(--white);
  padding: var(--sp-10) var(--section-pad-x);     /* 80 20 */
}
.paths-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* Frase-cornice: apertura centrata. */
.paths-intro {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--dark);
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-9);                      /* 60 */
}

/* Frase-cornice: eco di chiusura in italic muted. */
.paths-outro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--muted);
  text-align: center;
  max-width: 720px;
  margin: var(--sp-9) auto 0;                      /* 60 */
}

/* Lista dei path. */
.paths-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);                                /* 60 fra path */
}

/* Singolo path: numero grande a sx + body a dx (desktop), stack mobile. */
.path-item {
  display: grid;
  grid-template-columns: 130px 1fr;                /* numero ~96px + aria */
  gap: var(--sp-7);                                /* 30 */
  align-items: start;
}

/* Numero grande tipografico: accento visivo dominante. */
.path-num {
  font-family: var(--serif);
  font-size: 96px;
  font-weight: var(--fw-bold);
  line-height: 0.9;
  color: var(--blue);
  text-align: center;
  letter-spacing: -0.02em;
  /* Micro-shift per allineare la baseline con il titoletto a dx. */
  margin-top: -6px;
}

/* Body del path: titoletto + paragrafi standard. */
.path-body {
  min-width: 0;
}
.path-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin: 0 0 var(--sp-3);
}
.path-body p {
  font-size: var(--fs-lg);                          /* 21px */
  line-height: var(--lh-normal);                    /* 1.6 */
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.path-body p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .paths-intro            { font-size: 21px; margin-bottom: var(--sp-8); }
  .paths-outro            { font-size: 18px; margin-top: var(--sp-8); }
  .paths-list             { gap: var(--sp-8); }      /* 40 */
  .path-item              { grid-template-columns: 1fr; gap: var(--sp-3); }
  .path-num               { font-size: 64px; text-align: left; margin-top: 0; }
  .path-title             { font-size: 21px; }
  .path-body p            { font-size: var(--fs-md); }
}


/* ============================================================
   .narrative-block — BLOCCO NARRATIVO LUNGO / EDITORIALE
   SCOPE: lunghe sequenze di testo tipo sales-letter (storia,
   problema, promessa, imagine-list) su singola colonna, reading
   width 700px. Nato per /soft-pastel-secrets/ (aprile 2026) ma
   riusabile su qualsiasi landing che abbia un passaggio long-form.
   STRUTTURA ATTESA:
     <section class="narrative-block">
       <div class="narrative-inner">
         <p class="narrative-lead">Prima frase, centrata, serif bold.</p>
         <p>Paragrafi base del racconto.</p>
         <p class="narrative-pivot">Breve riga di transizione&hellip;</p>
         <h2 class="narrative-heading">
           Domanda chiave con <em>nomi evidenziati</em>?
         </h2>
         <ul class="narrative-list">
           <li>Imagine what your art would be like&hellip;</li>
           <li>Imagine the respect&hellip;</li>
         </ul>
       </div>
     </section>
   NOTE:
   - Singola colonna centrata, max 700px: reading width comoda
     (60-75 char) senza scendere al livello "articolo blog".
   - .narrative-lead: serif bold 28px, centrato, apre il blocco.
   - .narrative-heading: serif 32px centrato; <em> dentro diventa
     blu (brand), per evidenziare nomi/parole chiave senza italico.
   - .narrative-pivot: serif italico muted, centrato, per le
     transizioni brevi ("Let me ask you&hellip;", "&hellip;e poi&hellip;").
   - .narrative-kicker: sans 21px muted centrato, frase-gancio
     d'apertura piu' leggera del lead (es. "Imagine finally finding&hellip;").
   - .narrative-callout: sans 25px blu centrato, statement/annuncio.
     Modifier .is-uppercase per versione all-caps con letter-spacing.
   - .narrative-break: serif bold 28 blu sinistra; modifier .is-center
     per versione centrata stretta.
   - .narrative-list: card bianca con shadow-sm e border-left blu,
     bullet-dot blu custom, per l'"imagine-list" ad alta enfasi.
   - p.is-center: paragrafo singolo centrato nel flusso, senza cambio
     peso/colore ("It seems there's a missing piece&hellip;").
   Coerente con promo/bio/juliana come classe di pattern editoriale.
============================================================ */
.narrative-block {
  background: var(--bg);
  padding: var(--section-pad);                  /* 60 20 — standard narrativi */
}

/* OPT-IN: variante dark (sfondo blu scuro, testo bianco). Per sezioni
   di "verita' schietta" che servono scuotere il lettore. Aggiunto
   maggio 2026 per /sl-a-a/ "Non e' Magia!". */
.narrative-block.is-dark {
  background: var(--blue-dk);
}
.narrative-block.is-dark p,
.narrative-block.is-dark .narrative-pivot { color: var(--white); }
.narrative-block.is-dark .narrative-heading { color: var(--white); }
.narrative-block.is-dark .narrative-heading em { color: var(--coral); }   /* 5.38:1 AA */
.narrative-block.is-dark .narrative-break { color: var(--coral); }
.narrative-block.is-dark .narrative-pivot { color: rgba(255,255,255,0.85); }
.narrative-block.is-dark strong { color: var(--white); }

/* OPT-IN: variante light (sfondo bianco puro). Per sezioni
   "tecniche/operative" che richiedono look pulito-tech, stacco
   visivo da bg cream circostante. */
.narrative-block.is-light {
  background: var(--white);
}
.narrative-inner {
  max-width: var(--reading-width, 800px);              /* 800px — uniforme con altre prose */
  margin: 0 auto;
}
.narrative-block p {
  font-size: var(--fs-lg);                       /* 21px */
  line-height: var(--lh-normal);                 /* 1.6 */
  color: var(--text);
  margin: 0 0 var(--sp-5);                       /* 20px */
}
.narrative-block p:last-child { margin-bottom: 0; }

/* Prima frase: annuncio, centrata, serif bold */
.narrative-block .narrative-lead {
  font-family: var(--serif);
  font-size: var(--fs-2xl);                       /* 28px */
  font-weight: var(--fw-bold);
  color: var(--dark);
  text-align: center;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-8);                        /* 40px */
}

/* Domanda/pivot forte, centrata, serif bold. <em> dentro -> blu */
.narrative-block .narrative-heading {
  font-family: var(--serif);
  font-size: var(--fs-3xl);                       /* 32px */
  font-weight: var(--fw-bold);
  color: var(--dark);
  text-align: center;
  line-height: var(--lh-tight);
  margin: var(--sp-9) 0 var(--sp-7);              /* 60 0 30 */
}
.narrative-block .narrative-heading em {
  font-style: normal;
  color: var(--blue);
}

/* Transizione breve, serif italic muted, centrata */
.narrative-block .narrative-pivot {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-xl);                        /* 24px */
  color: var(--muted);
  text-align: center;
  margin: var(--sp-8) 0 var(--sp-6);              /* 40 0 24 */
}

/* Lista "imagine": card bianca con border-left blu + bullet custom */
.narrative-list {
  list-style: none;
  padding: var(--sp-7) var(--sp-8);               /* 30 40 */
  margin: var(--sp-8) 0;                          /* 40 0 */
  background: var(--white);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.narrative-list li {
  position: relative;
  padding-left: var(--sp-6);                      /* 24px */
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text);
  margin-bottom: var(--sp-5);                     /* 20px */
}
.narrative-list li:last-child { margin-bottom: 0; }
.narrative-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--blue);
}

/* Frase-perno nel flusso: pesa tipograficamente ma NON stacca.
   Stesso allineamento e posizione dei paragrafi, solo serif bold
   blu e size-up: il lettore la nota e continua a leggere senza fermarsi.
   Usare per svolte pain&rarr;solution o affermazioni chiave. */
.narrative-block .narrative-break {
  font-family: var(--serif);
  font-size: var(--fs-2xl);                         /* 28 */
  font-weight: var(--fw-bold);
  color: var(--blue);
  line-height: 1.35;
  margin: var(--sp-6) 0;                            /* 24 sopra/sotto: si fonde col ritmo dei paragrafi */
}
/* Modifier: versione centrata per frasi brevi/dichiarative ("statement").
   Stretta max 600 per mantenere reading-width, margini auto. */
.narrative-block .narrative-break.is-center {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
/* Modifier: sottolineato. Per le frasi-perno dove serve segnare il
   punto di svolta (es. "It seems there's a missing piece&hellip;"):
   la sottolineatura stacca visivamente senza ricorrere al bordo/box.
   Usa underline-offset generoso per non toccare le lettere. */
.narrative-block .narrative-break.is-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
/* Modifier: colore muted (neutro), per statement dove il peso visivo
   deve venire SOLO dal size, non dal colore blu. Tipico di frasi
   retoriche intermedie tipo "But Enrico didn't stop at this discovery." */
.narrative-block .narrative-break.is-muted {
  color: var(--muted);
}
/* Modifier: scala XL per il climax, quando la frase-perno deve pesare
   piu' dei paragrafi attorno senza arrivare al size di una heading.
   NB: split top/bottom, mai shorthand `margin: X 0` che azzererebbe
   i `margin-left/right: auto` ereditati da .is-center. */
.narrative-block .narrative-break.is-xl {
  font-size: var(--fs-3xl);                         /* 32 */
  margin-top: var(--sp-8);                          /* 40 */
  margin-bottom: var(--sp-8);
}

/* Enfasi keyword/numero importante dentro la prose: blu brand, bold.
   Usa parsimonia: serve a far "saltare" numeri o parole chiave
   (es. "4000 Italian students"), non a rimpiazzare l'italico. */
.narrative-block strong {
  font-weight: var(--fw-bold);
  color: var(--blue);
}

/* Kicker: frase-gancio d'apertura di un blocco secondario, sans serif,
   centrata, muted. Piu' leggera del .narrative-lead (che apre l'INTERO
   blocco narrativo con serif bold dark): usala quando in un nuovo
   .narrative-block vuoi introdurre un tema in tono discorsivo prima
   del callout blu. Es. "Imagine finally finding that elusive key&hellip;" */
.narrative-block .narrative-kicker {
  font-family: var(--font);
  font-size: var(--fs-lg);                          /* 21 — come i p, ma center+muted */
  font-weight: var(--fw-regular);
  color: var(--muted);
  text-align: center;
  line-height: var(--lh-normal);
  max-width: 640px;
  margin: 0 auto var(--sp-6);                       /* 0 auto 24 */
}

/* Callout: statement blu sans-serif centrato, 25px, weight regular.
   Distinto da .narrative-heading (serif 32 dark) e .narrative-break
   (serif 28 blu sinistra): qui il tono e' annuncio/promessa, tipografia
   moderna e leggera, pesa con il colore non con il peso.
   Da usare dopo il .narrative-kicker o come pivot di enfasi. */
.narrative-block .narrative-callout {
  font-family: var(--font);
  font-size: var(--fs-xl);                          /* 24 mobile-safe */
  font-weight: var(--fw-regular);
  color: var(--blue);
  text-align: center;
  line-height: 1.35;
  max-width: 720px;
  margin: var(--sp-6) auto var(--sp-7);             /* 24 auto 30 */
}
@media (min-width: 769px) {
  .narrative-block .narrative-callout { font-size: 25px; }
}
/* Variante all-caps con letter-spacing: sentenza "programmatica". */
.narrative-block .narrative-callout.is-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Paragrafo singolo centrato nel flusso: da usare quando una frase
   corta (tipo "It seems there's a missing piece of the puzzle&hellip;")
   deve staccare visivamente senza cambiare peso o colore. */
.narrative-block p.is-center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* OPT-IN: immagine inline nel flusso narrativo (figure centrata).
   Aggiunto maggio 2026 per /sl-a-a/. La figure rispetta il container
   700px del .narrative-block e ha shadow + radius per "stacco card". */
.narrative-block .narrative-image {
  margin: var(--sp-7) auto;                         /* 30 sopra/sotto */
  max-width: 460px;
  text-align: center;
  line-height: 0;
}
.narrative-block .narrative-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.narrative-block .narrative-image figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
}

/* OPT-IN: blocco 2-col (testo + aside laterale immagini) dentro un
   .narrative-block. Usa grid invece di float per evitare il wrap-around
   brutto (testo che si allarga quando le imgs finiscono prima del testo).
   Aggiunto maggio 2026 per /sl-a-a/ "IL VERO ACQUERELLO" (3 acquerelli
   di Enrico in colonna laterale destra accanto al testo).
   Markup:
     <div class="narrative-2col">
       <div class="narrative-2col-text">
         <p>...</p> <ol>...</ol> <p>...</p>
       </div>
       <aside class="narrative-aside-images">
         <img> <img> <img>
       </aside>
     </div>
   Su mobile (<768px) le 2 colonne si impilano e l'aside diventa
   fila orizzontale 3-col. */
.narrative-block .narrative-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-7);                                 /* 30 fra colonne */
  align-items: stretch;                             /* aside cresce a tutta altezza testo */
  margin: var(--sp-7) 0;                            /* 30 sopra/sotto */
}
.narrative-block .narrative-aside-images {
  display: flex;
  flex-direction: column;
  justify-content: space-between;                   /* 3 imgs distribuite: prima top, ultima bottom */
  gap: var(--sp-4);                                 /* min 16 fra img (per testi molto corti) */
  height: 100%;                                     /* eredita altezza dal grid stretch */
}
.narrative-block .narrative-aside-images img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
/* Eredito stili paragrafi/lista dal narrative-block parent
   (font-size, line-height, color, margin gia' definiti). */
.narrative-block .narrative-2col-text > :first-child { margin-top: 0; }
.narrative-block .narrative-2col-text > :last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .narrative-block .narrative-2col {
    grid-template-columns: 1fr;
    gap: var(--sp-6);                               /* 24 mobile */
  }
  .narrative-block .narrative-aside-images {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .narrative-block .narrative-aside-images img {
    flex: 1 1 30%;
    min-width: 30%;
  }
}

/* OPT-IN: lista numerata con cerchi blu pieni (numero bianco bold dentro).
   Tipica per "Questo per te significa che... 1) ... 2) ... 3) ...".
   Item testo medium 21px, cerchio 48px su --blue (8.78:1 vs white, AAA).
   Aggiunto maggio 2026 per /sl-a-a/ "IL VERO ACQUERELLO". */
.narrative-block .narrative-numbered-list {
  list-style: none;
  counter-reset: nrow;
  padding: 0;
  margin: var(--sp-7) 0;                            /* 30 sopra/sotto */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);                                 /* 20 fra item */
}
.narrative-block .narrative-numbered-list li {
  counter-increment: nrow;
  display: flex;
  align-items: center;
  gap: var(--sp-5);                                 /* 20 fra cerchio e testo */
  font-family: var(--font);
  font-size: var(--fs-lg);                          /* 21 */
  font-weight: var(--fw-medium);                    /* 500 come live */
  line-height: var(--lh-snug);                      /* 1.4 */
  color: var(--text);
}
.narrative-block .narrative-numbered-list li::before {
  content: counter(nrow);
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);                          /* 24 */
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .narrative-block .narrative-numbered-list      { gap: var(--sp-4); }
  .narrative-block .narrative-numbered-list li   { font-size: var(--fs-md); gap: var(--sp-4); }
  .narrative-block .narrative-numbered-list li::before { width: 40px; height: 40px; font-size: var(--fs-lg); }
}

/* OPT-IN: testimonial breve italic nel flusso (corto, 1 frase).
   Tipico chiusura paragrafo "Questo e' uno dei feedback ricevuti..."
   seguita dalla quote. Non e' .testimonial-section (sezione) ma
   inline element. Indentato a sinistra, italic muted, max 600. */
.narrative-block .narrative-quote {
  margin: var(--sp-6) auto var(--sp-7);             /* 24 sopra, 30 sotto */
  padding-left: var(--sp-5);                        /* 20 indent */
  border-left: 3px solid var(--border);
  max-width: 600px;
  font-size: var(--fs-md);                          /* 18 */
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-snug);                      /* 1.4, piu' compatto per quote breve */
  color: var(--muted);                              /* 5.7:1 su white, AA largo */
}
.narrative-block .narrative-quote::before {
  content: '\201C';                                 /* curly opening quote */
  font-size: 1.4em;
  line-height: 0;                                   /* non gonfiare la line-box della 1a riga */
  vertical-align: -0.15em;
  margin-right: 2px;
}
.narrative-block .narrative-quote::after {
  content: '\201D';
  font-size: 1.4em;
  line-height: 0;                                   /* simmetrico */
  vertical-align: -0.15em;
  margin-left: 2px;
}

@media (max-width: 768px) {
  .narrative-block {
    padding: var(--sp-9) var(--section-pad-x);    /* 60 20 */
  }
  .narrative-block p                   { font-size: var(--fs-md); }
  .narrative-block .narrative-lead     { font-size: var(--fs-xl); }
  .narrative-block .narrative-heading  { font-size: var(--fs-2xl); margin: var(--sp-8) 0 var(--sp-6); }
  .narrative-block .narrative-pivot    { font-size: var(--fs-md); }
  .narrative-block .narrative-break    { font-size: var(--fs-xl); }
  .narrative-block .narrative-break.is-xl { font-size: var(--fs-2xl); margin-top: var(--sp-7); margin-bottom: var(--sp-7); }
  .narrative-block .narrative-kicker   { font-size: var(--fs-md); }
  .narrative-block .narrative-callout  { font-size: var(--fs-lg); }
  .narrative-list                      { padding: var(--sp-6) var(--sp-6); }
  .narrative-list li                   { font-size: var(--fs-md); }
  .narrative-block .narrative-image    { margin: var(--sp-6) auto; max-width: 100%; }
  .narrative-block .narrative-quote    { font-size: var(--fs-base); padding-left: var(--sp-4); }
}


/* ============================================================
   .narrative-feature — BANDA NAVY BREAKOUT DENTRO UN FLUSSO NARRATIVO
   SCOPE: quando in mezzo a un long-form (pain &rarr; solution &rarr;
   metodo) serve un "breakout" visivo scuro con una frase d'apertura
   e uno statement, prima di tornare alla prose chiara. Nato per
   /soft-pastel-secrets/ sezione "Enrico-DNA" (aprile 2026), riusabile
   su ogni landing che abbia un momento di svolta da sottolineare con
   un blocco colorato.
   STRUTTURA ATTESA:
     <section class="narrative-feature">
       <div class="narrative-feature-inner">
         <p class="narrative-feature-lead">Frase d'apertura, 21 center.</p>
         <p class="narrative-feature-statement">
           Statement piu' grande, serif 28 center.
         </p>
       </div>
     </section>
   NOTE:
   - Section standalone full-width con bg `--blue-dk`: stacca per
     colore e importa la stessa grammatica dei narrative-block
     (reading-width centrato, padding generoso).
   - Inner max 720: piu' largo dei 700 del narrative-inner per dare
     respiro ai due paragrafi centrati.
   - Si posiziona tipicamente FRA due `.narrative-block`: la banda
     non apre/chiude la pagina, e' un breakout intermedio.
============================================================ */
.narrative-feature {
  background: var(--blue-dk);
  color: var(--white);
  padding: var(--section-pad);                    /* 60 20, allineato a narrative-block */
}
.narrative-feature-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.narrative-feature-lead {
  font-family: var(--font);
  font-size: var(--fs-lg);                         /* 21 */
  font-weight: var(--fw-regular);
  color: var(--white);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-6);                         /* 0 0 24 */
}
.narrative-feature-statement {
  font-family: var(--serif);
  font-size: var(--fs-2xl);                        /* 28 */
  font-weight: var(--fw-regular);
  color: var(--white);
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 768px) {
  .narrative-feature-lead            { font-size: var(--fs-md); }
  .narrative-feature-statement       { font-size: var(--fs-xl); }
}

/* Modifier .is-standalone: banda navy dove lo statement &egrave; il
   protagonista unico (niente lead). Usato per frasi-manifesto
   uppercase tipo "THIS IS A DISTILLATION OF TECHNIQUES". Pattern
   globale introdotto in soft-pastel-secrets/ (aprile 2026). */
.narrative-feature.is-standalone .narrative-feature-statement {
  font-size: var(--fs-3xl);                       /* 32 desktop */
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .narrative-feature.is-standalone .narrative-feature-statement {
    font-size: var(--fs-xl);                      /* 24 mobile */
  }
}

/* Adiacenza narrative-block <-> narrative-feature: le due sezioni hanno
   bg diverso (crema vs navy), quindi il padding interno di ciascuna e'
   la sua identita' visiva e NON si puo' azzerare. Per evitare di
   accumulare troppo respiro tra le due, riduco il padding del lato
   adiacente di entrambe. Il lato non adiacente mantiene il 60 pieno.
   Usa :has() per la sezione PRECEDENTE (supportato su tutti gli evergreen). */
.narrative-block:has(+ .narrative-feature) { padding-bottom: var(--sp-7); } /* 30 */
.narrative-feature + .narrative-block      { padding-top: var(--sp-7); }     /* 30 */
.narrative-feature:has(+ .narrative-block) { padding-bottom: var(--sp-8); } /* 40 */
.narrative-block + .narrative-feature      { padding-top: var(--sp-8); }     /* 40 */


/* ============================================================
   .loop-video — VIDEO AMBIENT INLINE (muted autoplay loop)
   SCOPE: inserito dentro .narrative-block (o in qualsiasi flusso di
   prose stretto) per mostrare un video "GIF-like" che gira in loop
   a fianco al testo: "video continuo senza controlli" tipo preview
   del corso. Nato per soft-pastel-secrets sezione GATES (aprile 2026).
   STRUTTURA ATTESA:
     <figure class="loop-video">
       <video autoplay muted loop playsinline preload="metadata"
              poster="img/poster.webp"
              width="1280" height="720">
         <source src="img/clip.mp4" type="video/mp4">
       </video>
     </figure>
   NOTE:
   - `autoplay muted loop playsinline` = richiesto da iOS/Android
     per auto-play silenzioso.
   - `preload="metadata"` = il browser scarica solo gli header, il
     video parte quando entra in view (lazyload nativo). Mai
     preload="auto" altrimenti tutti i video iniziano a scaricare
     al page load e uccidono il LCP.
   - Aspect-ratio fissato via width/height intrinseci sull'elemento
     video — zero CLS.
   - max-width default 720 per stare dentro la reading-column di
     .narrative-block; override con .loop-video.is-full per estendere
     a tutto il container (es. dentro una banda dark wide).
   - Poster WebP statico come placeholder (mostrato prima che il
     video inizi). Deve avere stesse proporzioni del video.
============================================================ */
.loop-video {
  margin: var(--sp-6) auto;                         /* 24 auto — respiro su/giu' */
  max-width: 720px;
  width: 100%;
}
.loop-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--dark);                          /* fallback finche' poster non carica */
}
.loop-video.is-full {
  max-width: 100%;
}


/* ============================================================
   .device-band — BANDA SCURA CON VIDEO + TESTO AFFIANCATI
   SCOPE: breakout visivo dentro un flusso narrativo: video ambient
   a sinistra, overline + titolo + prose a destra, tutto su bg scuro.
   Nato per soft-pastel-secrets sezione GATES (aprile 2026), riusabile
   ogni volta che serve mostrare un device/interfaccia con un messaggio
   accanto (accesso multi-device, area riservata live, ecc.).
   STRUTTURA ATTESA:
     <section class="device-band">
       <div class="device-band-inner">
         <div class="device-band-media">
           <video autoplay muted loop playsinline preload="metadata"
                  poster="&hellip;" width="1280" height="720">
             <source src="&hellip;.mp4" type="video/mp4">
           </video>
         </div>
         <div class="device-band-body">
           <p class="device-band-overline">From PC, Smartphone, or Tablet</p>
           <h2 class="device-band-title">
             Wherever you want, <em>whenever you want</em>
           </h2>
           <p>Prose in bianco&hellip;</p>
           <p>&hellip;altro paragrafo.</p>
         </div>
       </div>
     </section>
   NOTE:
   - Bg `--blue-dk` per coerenza con .narrative-feature e .members-
     area-section (gli altri pattern dark della pagina).
   - Desktop: grid 2-col (media | body), gap generoso. Mobile: stacked.
   - Media ha i suoi bordi arrotondati e shadow; NON eredita quelli
     di .loop-video perche' qui l'embed e' piu' grande e full-width
     dentro la sua colonna.
   - Title: serif bold 32/28, white; `<em>` dentro usa --coral (5.38:1
     su --blue-dk, passa WCAG AA) per la keyword enfatica.
   - Overline: sans uppercase muted, 14px, letter-spacing. Serve come
     "cartellino" sopra al titolo.
============================================================ */
.device-band {
  background: var(--blue-dk);
  color: var(--white);
  padding: var(--section-pad);                      /* 60 20 */
}
.device-band-inner {
  max-width: var(--container);                      /* 1120 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);                                 /* 40 */
  align-items: center;
}
.device-band-media video,
.device-band-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--dark);
}
.device-band-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);                                 /* 16 tra paragrafi */
  max-width: 60ch;
}
.device-band-overline {
  font-family: var(--font);
  font-size: var(--fs-sm);                          /* 14 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);                              /* 5.38:1 su --blue-dk, AA */
  margin: 0;
}
.device-band-title {
  font-family: var(--serif);
  font-size: var(--fs-3xl);                         /* 32 */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--white);
  margin: 0 0 var(--sp-2);
}
.device-band-title em {
  font-style: italic;
  color: var(--coral);                              /* keyword enfatica */
}
.device-band-body p {
  font-family: var(--font);
  font-size: var(--fs-md);                          /* 18 desk-friendly su dark */
  line-height: var(--lh-normal);
  color: var(--white);
  margin: 0;
}

@media (min-width: 769px) {
  .device-band-body p { font-size: var(--fs-lg); } /* 21 desktop */
}

@media (max-width: 900px) {
  .device-band-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);                               /* 24 */
  }
  .device-band-title { font-size: var(--fs-2xl); } /* 28 mobile */
}

/* Adjacency: .device-band tra due .narrative-block deve respirare
   senza raddoppiare il padding verticale. */
.narrative-block:has(+ .device-band) { padding-bottom: var(--sp-7); } /* 30 */
.device-band + .narrative-block      { padding-top: var(--sp-7); }     /* 30 */
.device-band:has(+ .narrative-block) { padding-bottom: var(--sp-8); }  /* 40 */
.narrative-block + .device-band      { padding-top: var(--sp-8); }     /* 40 */


/* ============================================================
   .benefits-band — BANDA BENEFIT 3-COL CARD (full-width scura)
   SCOPE: tre micro-benefit in card eleganti su sfondo blu scuro
   brand, tipicamente subito sotto l'hero, per dare 3 punti di
   valore concreti (durata corso, modalita' fruizione, community).
   Introdotto maggio 2026 per /sl-a-a/.
   - Bg banda: --blue-dk. Card bg: rgba(white, 0.06) elevation
     subtle + border 1px rgba(white, 0.12).
   - Icona SVG line-style 48px in --orange-lt (7.3:1 su --blue-dk,
     AA per testo normale, AAA per large/UI). Inline svg, no asset.
   - Title: 21px regular white. Desc: 16/300 white opacity 0.92
     (resta AAA, leggera attenuazione per gerarchia interna).
   - Grid 3-col desktop, stack 1-col mobile (<768px).
   - align-items: stretch -> tutte le card stessa altezza.
   - hover lift subtle (translateY(-2px), shadow piu' ampio).
   Markup:
     <section class="benefits-band">
       <div class="benefits-band-inner">
         <div class="benefits-band-grid">
           <article class="benefits-band-card">
             <div class="benefits-band-icon"><svg .../></div>
             <h3 class="benefits-band-title">+ 7 ore di lezione</h3>
             <p class="benefits-band-desc">Accedendo adesso...</p>
           </article>
           ... altre 2 card
         </div>
       </div>
     </section>
============================================================ */
.benefits-band {
  background: var(--blue-dk);
  color: var(--white);
  padding: var(--section-pad);                      /* 60 20 */
}
.benefits-band-inner {
  max-width: var(--container-md);                   /* 1080 */
  margin: 0 auto;
}
.benefits-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);                                 /* 24 */
  align-items: stretch;                             /* stessa altezza per le 3 card */
}
.benefits-band-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);                  /* 8 */
  padding: var(--sp-7) var(--sp-6);                 /* 30 24 */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);                                 /* 16 */
  transition:
    transform var(--t-base),
    background var(--t-base),
    border-color var(--t-base);
}
.benefits-band-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.20);
}
.benefits-band-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-lt);                          /* 7.3:1 su --blue-dk, AA per icone */
  flex-shrink: 0;
}
.benefits-band-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.benefits-band-title {
  font-family: var(--font);
  font-size: var(--fs-lg);                          /* 21 */
  font-weight: var(--fw-semibold);                  /* leggera enfasi senza scendere a regular */
  line-height: var(--lh-snug);                      /* 1.4 */
  color: var(--white);
  margin: 0;
}
.benefits-band-desc {
  font-family: var(--font);
  font-size: var(--fs-base);                        /* 16 */
  font-weight: var(--fw-light);                     /* 300, come live */
  line-height: var(--lh-normal);                    /* 1.6 */
  color: rgba(255, 255, 255, 0.92);                 /* 12.5:1 -> AAA preservato */
  margin: 0;
  max-width: 32ch;                                  /* respiro interno card */
}

@media (max-width: 900px) {
  .benefits-band-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);                               /* 16 stacked */
  }
  .benefits-band-card { padding: var(--sp-6) var(--sp-5); }   /* 24 20 */
  .benefits-band-icon { width: 48px; height: 48px; }
  .benefits-band-title { font-size: var(--fs-md); }           /* 18 */
}


/* ============================================================
   .works-section — GALLERIA STANDALONE (opere del maestro)
   SCOPE: mostrare una griglia di lavori senza didascalie, dopo
   una sezione narrativa/testimonial. Wrapper minimale che ospita
   il pattern globale .gallery-grid. Nato per /soft-pastel-secrets/
   (aprile 2026), riusabile per "portfolio" in qualsiasi landing.
   STRUTTURA ATTESA:
     <section class="works-section">
       <div class="gallery-grid">
         <img src=&hellip; alt=&hellip; loading="lazy" width=&hellip; height=&hellip; />
         &hellip;
       </div>
     </section>
   NOTE:
   - Bg scuro (--dark) per STACCO forte dalla sezione testuale
     sopra e per far risaltare le opere colorate a pastello
     (coerente con .members-area-section e .site-footer).
   - Padding verticale generoso (--sp-10 = 80) per dare respiro
     al blocco "museale".
   - Override del .gallery-grid base: qui e' **masonry via CSS
     columns** (column-count 3) con max-width stretta (900px).
     Ogni opera mantiene le proporzioni native (width:100%,
     height:auto) senza crop, packing verticale automatico.
     Mobile: 2 colonne a 768px, 1 a 480px.
============================================================ */
.works-section {
  background: var(--dark);
  padding: var(--sp-10) var(--section-pad-x);    /* 80 20 — respiro museale */
}
.works-section .gallery-grid {
  max-width: 900px;
  margin: 0 auto;
  /* override del flex-wrap default: masonry via CSS columns */
  display: block;
  column-count: 3;
  column-gap: var(--sp-3);                       /* 12px tra colonne */
}
.works-section .gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 var(--sp-3);                       /* 12px tra opere in colonna */
  break-inside: avoid;                           /* l'immagine non si spezza a meta' */
  border-radius: var(--radius-sm);
}
@media (max-width: 768px) {
  .works-section .gallery-grid { column-count: 2; }
}
@media (max-width: 480px) {
  .works-section .gallery-grid { column-count: 1; }
}


/* ============================================================
   .modules-section — SEZIONE MODULI CORSO
   SCOPE: sezione piu' grande della landing che elenca i moduli del
   corso, ciascuno con heading, immagine, bullet list. Per ora, il
   wrapper ospita solo il titolo ponte ("HERE'S WHAT YOU'LL FIND
   INSIDE..."); i singoli moduli verranno aggiunti uno per uno nel
   loop cascade. Pattern globale introdotto in soft-pastel-secrets/
   (aprile 2026).
   STRUTTURA ATTESA:
     <section class="modules-section">
       <div class="modules-inner">
         <h2 class="modules-title">HERE'S WHAT YOU'LL FIND&hellip;</h2>
         <!-- .module-row per ciascun modulo, da aggiungere -->
       </div>
     </section>
============================================================ */
.modules-section {
  background: var(--bg);                          /* cream */
  padding: var(--sp-9) var(--section-pad-x);      /* 60 20 */
}
.modules-inner {
  max-width: var(--container);                    /* 1120 */
  margin: 0 auto;
}
.modules-title {
  font-family: var(--font);
  font-size: var(--fs-3xl);                       /* 32 desktop */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 auto;
  max-width: 900px;
}
@media (max-width: 768px) {
  .modules-section { padding: var(--sp-8) var(--section-pad-x); }
  .modules-title   { font-size: var(--fs-2xl); }  /* 28 mobile */
}


/* ============================================================
   .module-row — CARD DI UN SINGOLO MODULO
   SCOPE: usata dentro .modules-section per ogni modulo/bonus del
   corso. Layout 2-col desktop (media | body), stacked mobile.
   Alternato L/R via modifier .module-row--reverse. Ogni row e' una
   card bianca con ombra su sfondo crema della .modules-section.
   Pattern globale introdotto in soft-pastel-secrets/ (aprile 2026).
   STRUTTURA ATTESA:
     <article class="module-row">            <!-- o .module-row--reverse -->
       <div class="module-row-media">
         <picture> ... <img ...> </picture>
       </div>
       <div class="module-row-body">
         <div class="module-row-meta">
           <span class="module-row-label">MODULE #1</span>
           <span class="module-row-value">&mdash; ($147.97 Value)</span>
         </div>
         <h3 class="module-row-title">The Fundamentals</h3>
         <span class="module-row-dubbed">
           <svg>check</svg> 100% Dubbed &amp; Subtitled
         </span>
         <p class="module-row-intro">...</p>
         <p class="module-row-list-heading">In this module, you'll discover:</p>
         <ul class="module-row-list">
           <li>...</li>
         </ul>
         <p class="module-row-outro">...</p>   <!-- opzionale -->
       </div>
     </article>
============================================================ */
.modules-inner > .modules-title + .module-row { margin-top: var(--sp-8); }
.modules-inner > .module-row + .module-row    { margin-top: var(--sp-6); }

.module-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;       /* colonne alte quanto la card → abilita sticky sul media */
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  /* niente overflow: hidden — romperebbe position: sticky sull'immagine */
}
.module-row--reverse .module-row-media { order: 2; }
.module-row--reverse .module-row-body  { order: 1; }

.module-row-media {
  align-self: stretch;
  display: block;
}
.module-row-media picture {
  /* sticky: l'immagine "accompagna" lo scroll del testo dall'alto della card
     al basso, poi si sblocca all'uscita dalla card.
     top = top-bar (60) + intro-bar (~40) + respiro (20) ≈ 120, ma restiamo
     cauti a 80 per non rischiare di sovrapporre header su scroll lento */
  position: sticky;
  top: var(--sp-10);          /* 80px */
  display: block;
}
.module-row-media img,
.module-row-media picture {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.module-row-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 60ch;
}

.module-row-meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.module-row-label {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}
.module-row-value {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--orange);
}
.module-row-title {
  font-family: var(--serif);
  font-size: var(--fs-3xl);         /* 32 */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin: 0;
}
.module-row-dubbed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--green-lt);
  color: var(--green-dk);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--green-dk);
}
.module-row-dubbed svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.module-row-intro {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  margin: 0;
}
.module-row-list-heading {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--dark);
  margin: var(--sp-2) 0 0;
}
.module-row-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.module-row-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
}
.module-row-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--green-dk);
  color: var(--white);
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
}
.module-row-outro {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  margin: 0;
  padding-top: var(--sp-2);
}

@media (max-width: 900px) {
  .module-row {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }
  .module-row--reverse .module-row-media { order: 0; }
  .module-row--reverse .module-row-body  { order: 0; }
  .module-row-title   { font-size: var(--fs-2xl); }  /* 28 mobile */
  .module-row-body    { max-width: 100%; }
  /* mobile stacked → niente sticky (immagine e testo sono in sequenza) */
  .module-row-media picture { position: static; }
}


/* ============================================================
   .modules-section--cards — variante VERTICALE A CARD
   SCOPE: alternativa al layout 2-col quando il contenuto per modulo
   e' breve (titolo + 1 paragrafo) e ci sono opere con proporzioni
   eterogenee (orizzontali + verticali). Ogni .module-row diventa
   una card centrata stretta con immagine in cima dentro un frame
   uniforme (object-fit: contain, niente crop) + meta + titolo +
   testo sotto. Usa cosi':
     <section class="modules-section modules-section--cards">
   Il modifier .module-row--reverse non ha effetto (layout block).
============================================================ */
.modules-section--cards .module-row {
  display: block;                      /* annulla la grid 2-col */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-7);
  text-align: left;
}
/* Frame immagine: dimensione fissa con object-fit contain.
   Tutte le opere appaiono nello stesso "spazio visivo" senza
   essere tagliate, qualsiasi sia la loro proporzione nativa. */
.modules-section--cards .module-row-media {
  width: 100%;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);               /* sfondo neutro crema */
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.modules-section--cards .module-row-media picture {
  position: static;                    /* niente sticky in card mode */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.modules-section--cards .module-row-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
/* Reset modifier reverse (in card mode non si alterna) */
.modules-section--cards .module-row--reverse .module-row-media,
.modules-section--cards .module-row--reverse .module-row-body { order: 0; }

.modules-section--cards .module-row-body {
  max-width: 100%;
  gap: var(--sp-2);
}

@media (max-width: 600px) {
  .modules-section--cards .module-row {
    padding: var(--sp-5);
  }
  .modules-section--cards .module-row-media {
    height: 280px;
  }
}


/* ============================================================
   .faq-section — "Domande frequenti" (accordion nativo)
   SCOPE: sezione FAQ verso la chiusura della landing.
   STRUTTURA ATTESA:
     <section class="faq-section">
       <div class="wrap">
         <h2 class="faq-title">Domande frequenti</h2>
         <div class="faq-list">
           <details class="faq-item">
             <summary>
               <span class="faq-num">01</span>
               <span class="faq-q">Domanda?</span>
             </summary>
             <div class="faq-answer"><p>Risposta.</p></div>
           </details>
           &hellip;
         </div>
       </div>
     </section>
   NOTE:
   - Accordion HTML5 (details/summary): zero JS, accessibile per default.
   - L'icona "+/-" e' pseudo ::after, ruota il glifo via [open].
============================================================ */
.faq-section {
  background: var(--white);
  padding: var(--section-pad);
}
.faq-section .wrap {
  max-width: var(--container-sm);
  margin: 0 auto;
}
.faq-title {
  text-align: center;
  font-family: var(--font);
  font-size: var(--fs-4xl);          /* 42px */
  font-weight: var(--fw-bold);
  color: var(--blue);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-9);            /* 60px */
}

.faq-list {
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-8) var(--sp-6) 0;
  position: relative;
  font-family: var(--font);
  color: var(--text);
  line-height: var(--lh-normal);
  transition: color var(--t-base);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ''; }
.faq-num {
  flex: 0 0 auto;
  font-size: var(--fs-lg);            /* 21px */
  font-weight: var(--fw-regular);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.faq-q {
  flex: 1 1 auto;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.faq-item > summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: var(--fw-light);
  color: var(--blue);
  line-height: 1;
  transition: color var(--t-fast);
}
.faq-item[open] > summary::after {
  content: '\2212';                   /* minus segment */
}
.faq-item > summary:hover .faq-q,
.faq-item > summary:focus-visible .faq-q { color: var(--blue); }
.faq-item > summary:hover::after,
.faq-item > summary:focus-visible::after { color: var(--blue-dk); }

.faq-answer {
  padding: 0 var(--sp-8) var(--sp-6) 0;
  color: var(--muted);
  font-size: var(--fs-md);            /* 18px */
  line-height: var(--lh-normal);
}
.faq-answer p { margin: 0 0 var(--sp-3); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a {
  color: var(--blue);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .faq-title { font-size: var(--fs-3xl); margin-bottom: var(--sp-8); }  /* 32px */
  .faq-num, .faq-q { font-size: var(--fs-md); }
  .faq-item > summary { padding: var(--sp-5) var(--sp-7) var(--sp-5) 0; gap: var(--sp-3); }
  .faq-item > summary::after { font-size: 24px; }
  .faq-answer { font-size: var(--fs-base); padding-right: var(--sp-7); }
}

/* ============================================================
   .juliana-section — testimonial lungo (pull-quote + lavori)
   SCOPE: storia di un'allieva, due colonne (2/3 story + 1/3 lavori).
   STRUTTURA ATTESA:
     <section class="juliana-section">
       <div class="wrap">
         <div class="juliana-grid">
           <div class="juliana-story">
             <p class="juliana-pull">&ldquo;&hellip;&rdquo;</p>
             <p>&hellip;body&hellip;</p>
             <div class="juliana-sign">
               <img class="juliana-portrait" &hellip;>
               <div class="juliana-meta">
                 <p class="juliana-name">Juliana &hellip;</p>
                 <p class="juliana-role">Allieva</p>
               </div>
             </div>
           </div>
           <aside class="juliana-works">
             <h3 class="juliana-works-title">Alcuni lavori di Juliana</h3>
             <img src="lavori-di-juliana.jpg" &hellip;>
           </aside>
         </div>
       </div>
     </section>
   NOTE:
   - Base pattern potenzialmente riusabile come .story-testimonial
     per altre allieve; per ora scoped "juliana".
============================================================ */
.juliana-section {
  background: var(--bg);
  padding: var(--section-pad);
}
.juliana-section .wrap {
  max-width: var(--container);
  margin: 0 auto;
}
.juliana-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-10);                  /* 80px */
  align-items: stretch;               /* colonne stessa altezza: l'immagine a dx capa alla storia */
}

/* ---- LEFT: story ---- */
.juliana-story { min-width: 0; }

.juliana-pull {
  font-family: var(--serif);
  font-size: var(--fs-xl);            /* 24px */
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--dark);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-7);            /* 30px */
  padding-left: var(--sp-5);          /* 20px */
  border-left: 4px solid var(--coral);
}
.juliana-story > p {
  font-size: var(--fs-md);            /* 18px */
  color: var(--text);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-4);            /* 16px */
}

.juliana-sign {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);            /* 24px */
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.juliana-portrait {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex: 0 0 auto;
}
.juliana-meta { min-width: 0; }
.juliana-name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  /* --coral (#FFA5A5) su --bg (#F7F4EF) = 1.78:1 FAIL AA. Coral e' AA
     solo su --blue (5.38:1). Su cream usiamo --orange (5.82:1 AA). */
  color: var(--orange);
  line-height: var(--lh-tight);
}
.juliana-role {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--muted);
  line-height: var(--lh-tight);
}

/* ---- RIGHT: lavori ---- */
.juliana-works {
  display: flex;
  flex-direction: column;
  text-align: center;
  min-height: 0;                      /* necessario per far restringere l'img in grid/flex */
}
.juliana-works-title {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: var(--fs-xl);            /* 24px */
  font-weight: var(--fw-bold);
  color: var(--dark);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-tight);
}
.juliana-works img {
  flex: 1 1 auto;
  display: block;
  min-height: 0;
  max-height: 100%;                   /* capa all'altezza della colonna (== storia a sx) */
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: top center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .juliana-grid { grid-template-columns: 1fr; gap: var(--sp-7); align-items: start; }
  .juliana-works {
    min-height: 0;
    height: auto;
    align-items: center;              /* centra l'img come flex item cross-axis */
  }
  /* Su mobile il <picture> ha commutato alla variante orizzontale 452x166.
     L'img qui deve rispettare il suo aspect nativo senza stirarsi.
     Larghezza fluida fino a 452px (natural), altezza auto, aspect defensivo. */
  .juliana-works img {
    flex: 0 0 auto;
    align-self: center;
    display: block;
    width: 100%;
    max-width: 452px;
    height: auto;
    max-height: none;
    aspect-ratio: 452 / 166;           /* orizzontale: matcha la source mobile */
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .juliana-pull { font-size: var(--fs-lg); }           /* 21px */
  .juliana-story > p { font-size: var(--fs-base); }    /* 16px */
}

/* Quando un narrative-block long-form termina con una frase-invito verso
   il testimonial (es. "But don't just take my word for it..."), i 60+60
   di gap sommati diventano un mare. Azzeriamo il pad-top del Juliana
   solo quando segue DIRETTAMENTE un .narrative-block: zero impatto su
   pagine (come cane) che non usano narrative-block prima di Juliana. */
.narrative-block + .juliana-section { padding-top: 0; }

/* ---- MODIFIER .is-card ----
   Variante "card bianca" del .juliana-section: il wrapper interno
   diventa una card bianca staccata (shadow + radius) sopra il bg cream
   della section. Usato per enfatizzare il testimonial come pezzo a se'
   stante. NON tocca il pattern base: le pagine esistenti (cane) non
   caricano questa classe e restano identiche.
   HTML: <section class="juliana-section is-card"><div class="wrap">...</div></section>
*/
.juliana-section.is-card .wrap {
  max-width: var(--container-md);        /* 1080 */
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-9) var(--sp-8);      /* 60 40 */
}
/* Cap dell'altezza immagine lavori all'altezza della story adiacente.
   Su desktop la grid ha align-items:stretch: il track si allarga al
   massimo contenuto fra le 2 colonne. Se la story e' corta (es.
   soft-pastel-secrets, 4 paragrafi ~400px) ma l'img e' alta (166x600
   natural), l'img fa sfondare il track.

   Soluzione CSS-only:
   - <picture> display:contents → collassa nel layout, l'<img> torna
     figlia diretta del flex container .juliana-works
   - .juliana-works min-height:0 + align-items:center → niente stretch
     orizzontale, permette collasso
   - img flex:1 1 0 → flex-basis 0: l'altezza intrinseca dell'img NON
     entra nel calcolo del min-content del container
   - img max-height:100% + object-fit:contain → scala per fit dentro
     lo spazio disponibile (= story height - title height) mantenendo
     le proporzioni
   Risultato: track grid = story height; img cappata a quella,
   centrata, mai oltre. Scope al solo .is-card per non toccare cane. */
@media (min-width: 901px) {
  .juliana-section.is-card .juliana-works {
    min-height: 0;
    align-items: center;
    overflow: hidden;
  }
  .juliana-section.is-card .juliana-works picture {
    display: contents;
  }
  .juliana-section.is-card .juliana-works img {
    flex: 1 1 0;
    align-self: center;
    min-height: 0;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }
}
@media (max-width: 768px) {
  .juliana-section.is-card .wrap { padding: var(--sp-7) var(--sp-5); }  /* 30 20 */
}

/* ============================================================
   .site-footer — footer globale della landing (2 colonne, dark)
   SCOPE: ultimo elemento della pagina. Info societarie, contatti,
   link policy, disclaimer Facebook (IT + EN).
   STRUTTURA ATTESA:
     <footer class="site-footer">
       <div class="wrap">
         <div class="footer-grid">
           <div class="footer-brand">
             <p class="footer-signature">Enrico De Cenzo</p>
             <address class="footer-address">&hellip;</address>
             <ul class="footer-contact">
               <li>&hellip;</li>
             </ul>
           </div>
           <div class="footer-legal">
             <p class="footer-heading">Informazioni legali</p>
             <ul class="footer-links">&hellip;</ul>
             <p class="footer-disclaimer">&hellip;</p>
             <p class="footer-disclaimer">&hellip;</p>
           </div>
         </div>
         <div class="footer-base">
           <p>&copy; 2026 De Cenzo S.A.S.</p>
         </div>
       </div>
     </footer>
   NOTE:
   - Bg scuro (--dark) per chiusura pagina "editoriale", 2 colonne
     2fr + 1fr: brand/contact ampio a sx, legali compatto a dx.
   - Firma brand in serif italic a richiamare il gesto dell'artista.
   - Accenti coral su hover link + bordi sottili in white/10%.
============================================================ */
.site-footer {
  background: var(--dark);
  color: var(--overlay-light-70);
  font-family: var(--font);
  font-weight: var(--fw-light);
  padding: var(--sp-10) var(--section-pad-x) var(--sp-6);
}
.site-footer .wrap {
  max-width: var(--container);
  margin: 0 auto;
}

.site-footer a {
  color: var(--overlay-light-90);
  text-decoration: none;
  transition: color var(--t-fast);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--orange-lt);
  text-decoration: underline;
}

/* ---- GRID 2 colonne ---- */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-10);                 /* 80px */
  align-items: start;
  padding-bottom: var(--sp-8);       /* 40px prima della base-bar */
  border-bottom: 1px solid var(--overlay-light-10);
}

/* ---- LEFT: brand + address + contact ---- */
.footer-signature {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-3xl);          /* 32px */
  color: var(--white);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}

.footer-address {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--overlay-light-70);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-6);
  max-width: 38ch;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-5);
}
.footer-contact li {
  display: contents;
}
.footer-contact-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--overlay-light-70);
  font-weight: var(--fw-medium);
  padding-top: 2px;                  /* allinea con link */
}
.footer-contact a {
  font-size: var(--fs-base);
  color: var(--white);
  font-weight: var(--fw-regular);
}

/* ---- RIGHT: legal ---- */
.footer-heading {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-lt);
  margin: 0 0 var(--sp-4);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer-links a {
  font-size: var(--fs-sm);
  color: var(--overlay-light-90);
}

.footer-disclaimer {
  font-size: 11px;
  line-height: var(--lh-normal);
  color: var(--overlay-light-70);
  margin: 0 0 var(--sp-3);
  opacity: 0.85;
}
.footer-disclaimer:last-child { margin-bottom: 0; }

/* ---- BASE BAR ---- */
.footer-base {
  padding-top: var(--sp-5);
  text-align: center;
}
.footer-base p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--overlay-light-70);
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width: 768px) {
  .site-footer { padding: var(--sp-8) var(--section-pad-x) var(--sp-5); }
  .footer-signature { font-size: var(--fs-2xl); }  /* 28px */
  .footer-contact { grid-template-columns: 1fr; gap: var(--sp-1); }
  .footer-contact li { display: block; }
  .footer-contact-label { padding-top: 0; }
}

/* ============================================================
   STATES & ACCESSIBILITA'
============================================================ */
:focus-visible {
  outline: 3px solid var(--orange-lt);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   PATTERN: .docuserie-section
   Banda scura con immagine di background + gradient, titolo
   centrato, paragrafo descrittivo, 3 video-thumb 16:9 cliccabili
   con play-overlay YouTube-red, CTA pillola rossa "ISCRIVITI AL
   CANALE YOUTUBE". Pensata per raccolte video / miniserie.

   Scelte designer:
   - Tipografia uniforme Raleway (nessun mix serif in questa banda):
     titolo 40px fw-light (300), overline small-caps coral, desc 18px.
   - Play-overlay YouTube-red `--youtube-red` (#FF0000): linguaggio
     visivo del canale, contrasto AAA sul gradient scuro.
   - CTA pillola rossa con play-icon inline + hover darker.

   NOTA path: la URL dell'immagine di background va messa INLINE sullo
   `<section>` via `style="background-image: linear-gradient(...), url(...)"`.
   NON usare una CSS custom property: Chrome risolve l'url() dentro
   var(...) rispetto al foglio di stile che la usa (components.css in
   `_global/css/`), non rispetto all'HTML, e i path relativi si rompono.
   Mettendo background-image direttamente inline la URL si risolve sempre
   rispetto al documento HTML.

   HTML atteso:
     <section class="docuserie-section"
              style="background-image:
                linear-gradient(rgba(28,28,28,0.72), rgba(28,28,28,0.94)),
                url('../_global/img/...');">
       <div class="docuserie-inner">
         <p class="docuserie-overline">Una DocuSerie di Enrico De Cenzo</p>
         <h2 class="docuserie-title">I segreti degli antichi maestri</h2>
         <p class="docuserie-desc">...</p>
         <ul class="docuserie-videos">
           <li>
             <a class="docuserie-video" href="...">
               <figure class="docuserie-video-thumb">
                 <img src="..." alt="..." width="384" height="216">
                 <span class="docuserie-video-play" aria-hidden="true">...svg...</span>
               </figure>
               <span class="docuserie-video-label">Guarda il primo episodio</span>
             </a>
           </li>
           <!-- x3 -->
         </ul>
         <a class="docuserie-youtube-cta" href="..." target="_blank" rel="noopener">
           <svg ...></svg>
           Iscriviti al canale YouTube
         </a>
       </div>
     </section>
============================================================ */
.docuserie-section {
  position: relative;
  padding: var(--sp-10) var(--section-pad-x);    /* 80 20 */
  /* Gradient scuro + immagine di background (Caravaggio).
     Il gradient va sopra (primo in stack), l'immagine sotto (secondo).
     Il risultato e' un tono scuro unificato che lascia intravedere
     l'opera senza rubare contrasto al testo. */
  background-image:
    linear-gradient(rgba(28, 28, 28, 0.72) 0%, rgba(28, 28, 28, 0.94) 100%),
    var(--docuserie-bg, none);
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  color: var(--white);
}

.docuserie-inner {
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}

.docuserie-overline {
  font-family: var(--font);
  font-size: var(--fs-sm);                       /* 14px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral);                            /* AA on dark 5.38:1 */
  margin: 0 0 var(--sp-3);
}

.docuserie-title {
  font-family: var(--font);
  font-size: var(--fs-4xl);                      /* 42px */
  font-weight: var(--fw-light);                  /* 300 — elegance */
  line-height: var(--lh-tight);
  color: var(--white);
  margin: 0 auto var(--sp-5);
  max-width: 900px;
}

.docuserie-desc {
  font-family: var(--font);
  font-size: var(--fs-md);                       /* 18px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--white);
  max-width: var(--reading-width);
  margin: 0 auto var(--sp-9);                    /* 60px before video grid */
}

/* --- Video thumbnail grid --- */
.docuserie-videos {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--sp-9);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);                              /* 30px */
  max-width: var(--container-md);                /* 1080 */
}
.docuserie-videos > li { margin: 0; }

.docuserie-video {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast);
}
.docuserie-video:hover,
.docuserie-video:focus-visible {
  transform: translateY(-3px);
}
.docuserie-video:hover .docuserie-video-play,
.docuserie-video:focus-visible .docuserie-video-play {
  background: var(--youtube-red);
  transform: translate(-50%, -50%) scale(1.08);
}

.docuserie-video-thumb {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: var(--overlay-dark-40);
}
.docuserie-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play overlay: cartello YouTube-red 68x48 con triangolo bianco */
.docuserie-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: var(--youtube-red-dk);             /* hover → youtube-red */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}
.docuserie-video-play svg {
  width: 24px;
  height: 24px;
  fill: var(--white);
  display: block;
}

.docuserie-video-label {
  font-family: var(--font);
  font-size: var(--fs-md);                       /* 18px */
  font-weight: var(--fw-regular);
  color: var(--white);
  text-align: center;
  line-height: var(--lh-snug);
}

/* --- CTA YouTube pill --- */
.docuserie-youtube-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-7);              /* 16 30 */
  background: var(--youtube-red);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.docuserie-youtube-cta:hover,
.docuserie-youtube-cta:focus-visible {
  background: var(--youtube-red-dk);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.docuserie-youtube-cta svg {
  width: 28px;
  height: 20px;
  fill: var(--white);
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 900px) {
  .docuserie-section      { padding: var(--sp-9) var(--section-pad-x); }
  .docuserie-title        { font-size: var(--fs-3xl); }    /* 32 */
  .docuserie-desc         { font-size: var(--fs-base); margin-bottom: var(--sp-8); }
  .docuserie-videos {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    max-width: 420px;
    margin-bottom: var(--sp-8);
  }
  .docuserie-video-play   { width: 58px; height: 42px; border-radius: 12px; }
  .docuserie-video-play svg { width: 20px; height: 20px; }
  .docuserie-youtube-cta  { font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-6); }
}

/* ============================================================
   CINEMATIC-PAGE — modifier dark per pagine "documentaristiche"
   ------------------------------------------------------------
   Applica un mood scuro/caldo a tutta la pagina per contenuti
   narrativi (docuserie, saggi, pagine editoriali) dove lo stile
   "corso online" del resto del sito non funziona. Usato su
   /arte-i-segreti-degli-antichi-maestri/.

   Applicazione:
     <main class="cinematic-page">
       <section class="page-intro">...</section>
       <section class="episodes-section">...</section>
       <section class="cta-band">...</section>
       <section class="cta-band">...</section>
     </main>

   La classe .cinematic-page applica in scoped:
     - background scuro caldo tipo sala documentario
     - radial-gradient "alone di candela" centrato in alto
     - tipografia chiara per titoli, muted per corpo
     - accent oro (--gold-lt) per eyebrow/numeri episodio invece di orange
     - cta-band integrate nel mood (niente stacco cromatico)
============================================================ */
.cinematic-page {
  /* Nero-marrone caldo + alone centrale ocra/oro luminoso che dissolve. */
  background:
    radial-gradient(ellipse 1200px 800px at 50% 0%,
      rgba(201, 162, 39, 0.15) 0%,
      rgba(201, 162, 39, 0.04) 40%,
      transparent 80%),
    #1a1410;
  color: var(--overlay-light-90);
}
.cinematic-page section { background: transparent !important; }

/* Page-intro in versione cinematic */
.cinematic-page .page-intro {
  padding-top: var(--sp-11);                    /* hero piu' arieggiato */
  padding-bottom: var(--sp-9);
}
.cinematic-page .page-intro-eyebrow { color: var(--gold-lt); }
.cinematic-page .page-intro-title  { color: var(--white); }
.cinematic-page .page-intro-lead   { color: var(--overlay-light-70); }

/* Episodi in versione cinematic */
.cinematic-page .episode-number { color: var(--gold-lt); }
.cinematic-page .episode-title  { color: var(--white); }
.cinematic-page .episode-desc   { color: var(--overlay-light-70); }
/* Linea decorativa oro sotto il numero per mood editoriale */
.cinematic-page .episode-header { position: relative; padding-bottom: var(--sp-4); }
.cinematic-page .episode-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.cinematic-page .episode-block .video-embed {
  /* ombra piu' drammatica + cornice oro sottilissima */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(201, 162, 39, 0.15);
}

/* CTA band in versione cinematic */
.cinematic-page .cta-band-intro {
  color: var(--overlay-light-90);
  font-family: var(--serif);
  font-style: italic;
}

/* Btn-ghost adattato a sfondo scuro: bordo bianco semi-trasparente */
.cinematic-page .btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--overlay-light-30);
}
.cinematic-page .btn-ghost:hover,
.cinematic-page .btn-ghost:focus-visible {
  background: var(--overlay-light-10);
  border-color: var(--overlay-light-60);
  color: var(--white);
}

/* Site-footer dark gia' nativo, integrato senza stacco */

/* ============================================================
   .btn-youtube — BOTTONE ROSSO BRAND YOUTUBE
   ------------------------------------------------------------
   Variante di .btn per CTA "Iscriviti al canale" / "Guarda su
   YouTube". Usa il rosso brand YouTube (--youtube-red).
   Tipico: include un'icona YouTube play inline (svg) + label.

   Markup atteso:
     <a class="btn btn-youtube btn-lg" href="https://youtube.com/@...">
       <svg viewBox="0 0 24 24" aria-hidden="true">...</svg>
       Iscriviti al canale YouTube
     </a>
============================================================ */
.btn-youtube {
  background: var(--youtube-red);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.20);
}
.btn-youtube:hover,
.btn-youtube:focus-visible {
  background: var(--youtube-red-dk);
  color: var(--white);
}
.btn-youtube svg { width: 24px; height: 24px; flex-shrink: 0; }

/* ============================================================
   .episodes-section — DOCU-SERIE: sequenza di episodi video
   ------------------------------------------------------------
   Pattern per pagine tipo /arte-i-segreti-degli-antichi-maestri/:
   una serie di puntate video con numero, titolo, embed e una breve
   descrizione. Gli episodi sono presentati verticalmente uno sotto
   l'altro, ciascuno come card a tutta larghezza col video 16:9
   centrato grande.

   Markup atteso:
     <section class="episodes-section">
       <div class="episodes-inner">
         <article class="episode-block">
           <header class="episode-header">
             <p class="episode-number">Episodio #1</p>
             <h2 class="episode-title">Lo Scheletro Pittorico</h2>
           </header>
           <div class="video-lazy video-embed" data-src="...youtube...">...</div>
           <p class="episode-desc">...descrizione 1-3 righe...</p>
           <a class="episode-watch" href="https://www.youtube.com/watch?v=...">
             <svg>...</svg> Guarda su YouTube
           </a>
         </article>
         ... altre article ...
       </div>
     </section>
============================================================ */
.episodes-section {
  padding: var(--section-pad);
  background: var(--bg);
}
.episodes-inner {
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-11);                              /* 120px fra episodi */
}
.episode-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}
.episode-header {
  text-align: center;
  max-width: var(--reading-width);
}
.episode-number {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--sp-2);
}
.episode-title {
  font-family: var(--serif);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin: 0;
  letter-spacing: -0.01em;
}
.episode-block .video-embed {
  max-width: 100%;
  width: 100%;
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-md);
  margin: 0;
}
.episode-desc {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text);
  text-align: center;
  max-width: var(--reading-width);
  margin: 0;
}
.episode-watch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--youtube-red);
  text-decoration: none;
  transition: color var(--t-fast);
}
.episode-watch:hover,
.episode-watch:focus-visible { color: var(--youtube-red-dk); }
.episode-watch svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 768px) {
  .episodes-inner { gap: var(--sp-9); }             /* 60px mobile */
  .episode-desc { font-size: var(--fs-base); }
}

/* ============================================================
   .lesson-page — LAYOUT lezione video (lead magnet / minicorso)
   ------------------------------------------------------------
   Pagine tipo /pastellivideo01/, /sps-vid02/, /parte-03/:
   minicorso gratuito a step, video YouTube embed + bullet "cosa
   scoprirai" + navigazione fra lezioni + CTA finale al corso completo.

   Pattern figli riusabili (ognuno standalone):
     .lesson-progress   — indicator 3+ step (current/done/future)
     .lesson-body       — wrapper contenuto (video + bullet + CTA)
     .lesson-nav        — prev/next link fra lezioni

   Markup completo tipico:
     <section class="page-intro">
       <p class="page-intro-eyebrow">MINICORSO GRATUITO &middot; LEZIONE 1/3</p>
       <h1 class="page-intro-title">Titolo lezione</h1>
     </section>

     <section class="lesson-progress-section">
       <ol class="lesson-progress">
         <li class="is-done"><span class="dot"></span><span class="label">Materiali</span></li>
         <li class="is-current"><span class="dot"></span><span class="label">Profondita'</span></li>
         <li><span class="dot"></span><span class="label">Tipi di pastello</span></li>
       </ol>
     </section>

     <section class="lesson-body">
       <div class="lesson-body-inner">
         <div class="video-lazy video-embed" data-src="...youtube...">...</div>
         <h2 class="lesson-heading">Cosa scoprirai in questa lezione</h2>
         <ul class="check-list">...</ul>
         <nav class="lesson-nav">
           <a class="lesson-nav-prev" href="/...">&larr; Lezione precedente</a>
           <a class="lesson-nav-next" href="/...">Lezione successiva &rarr;</a>
         </nav>
       </div>
     </section>
============================================================ */

/* Eyebrow della page-intro (riusabile, non solo per lezioni) */
.page-intro-eyebrow {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--sp-4);
}

/* --- Progress indicator --- */
.lesson-progress-section {
  padding: var(--sp-7) var(--section-pad-x) var(--sp-4);
  background: var(--bg);
}
.lesson-progress {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--container-sm);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  position: relative;
}
.lesson-progress::before {
  /* linea di connessione fra i cerchi */
  content: "";
  position: absolute;
  top: 12px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.lesson-progress li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
  text-align: center;
}
.lesson-progress .dot {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  background: var(--white);
  border: 2px solid var(--border);
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--bg);
}
.lesson-progress .label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  line-height: 1.3;
}
.lesson-progress .is-done .dot {
  background: var(--green);
  border-color: var(--green);
  position: relative;
}
.lesson-progress .is-done .dot::after {
  /* checkmark SVG-free: due pseudo edge */
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 8px;
  height: 14px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lesson-progress .is-done .label { color: var(--green-dk); }
.lesson-progress .is-current .dot {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px var(--bg), 0 4px 12px rgba(168, 72, 26, 0.25);
}
.lesson-progress .is-current .label { color: var(--dark); font-weight: var(--fw-bold); }

/* --- Lesson body: video + bullet + navigation wrapper --- */
.lesson-body {
  padding: var(--sp-7) var(--section-pad-x) var(--section-pad-y);
  background: var(--bg);
}
.lesson-body-inner {
  max-width: var(--container-md);
  margin: 0 auto;
}
.lesson-body .video-embed {
  margin: 0 auto var(--sp-9);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-md);
}
.lesson-heading {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  text-align: center;
  margin: 0 auto var(--sp-6);
  max-width: var(--reading-width);
}
.lesson-body .check-list {
  max-width: var(--reading-width);
  margin: 0 auto var(--sp-9);
}

/* --- Prev/Next navigation fra lezioni --- */
.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: var(--reading-width);
  margin: 0 auto;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.lesson-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--orange);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast);
}
.lesson-nav a:hover,
.lesson-nav a:focus-visible { color: var(--orange-dk); }
.lesson-nav-prev { margin-right: auto; }
.lesson-nav-next { margin-left: auto; }

@media (max-width: 600px) {
  .lesson-progress .label { font-size: var(--fs-xs); }
  .lesson-progress .dot { width: 22px; height: 22px; }
  .lesson-progress .is-done .dot::after { left: 5px; top: 1px; width: 7px; height: 12px; }
  .lesson-progress::before { top: 10px; }
  .lesson-nav a { font-size: var(--fs-xs); }
  .lesson-nav { flex-direction: column; gap: var(--sp-3); }
  .lesson-nav-prev,
  .lesson-nav-next { margin: 0; text-align: center; justify-content: center; }
}

/* ============================================================
   .gallery-hub — GALLERY MASONRY per pagine portfolio
   ------------------------------------------------------------
   Pagine hub tipo /acquerelli/, /pastelli-morbidi/, /tempere-alluovo/.
   Layout masonry via CSS columns: ogni opera mantiene le proporzioni
   native (opere verticali restano verticali, orizzontali restano
   orizzontali, zero crop). Click su una thumb apre la lightbox JS
   (vedi _global/js/gallery-lightbox.js).

   Markup atteso:
     <section class="gallery-hub">
       <div class="gallery-hub-inner">
         <div class="gallery-hub-grid" data-gallery="acquerelli">
           <a class="gallery-item"
              href="/_global/img/gallery/acquerelli/acq-01-full.webp"
              data-full="..." data-w="800" data-h="600"
              data-alt="...">
             <img src="/_global/img/gallery/acquerelli/acq-01-600w.webp"
                  alt="..." loading="lazy" width="600" height="401">
           </a>
           ... altre 23 item ...
         </div>
       </div>
     </section>

   NOTE:
     - Column-count responsive: 3 desktop / 2 tablet / 1 mobile
     - Hover: elevazione morbida, zero zoom (rispetto dell'opera)
     - La prima riga di img puo' avere loading="eager" come LCP hint
============================================================ */
.gallery-hub {
  padding: var(--section-pad);
  background: var(--bg);
}
.gallery-hub-inner {
  max-width: var(--container-lg);
  margin: 0 auto;
}
.gallery-hub-grid {
  column-count: 3;
  column-gap: var(--sp-5);
}
.gallery-hub-grid .gallery-item {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
  cursor: zoom-in;
}
.gallery-hub-grid .gallery-item:hover,
.gallery-hub-grid .gallery-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.gallery-hub-grid .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .gallery-hub-grid { column-count: 2; column-gap: var(--sp-4); }
  .gallery-hub-grid .gallery-item { margin-bottom: var(--sp-4); }
}
@media (max-width: 500px) {
  .gallery-hub-grid { column-count: 1; }
}

/* ============================================================
   .lightbox — OVERLAY FULLSCREEN per visualizzare le opere
   ------------------------------------------------------------
   Attivato dal JS di _global/js/gallery-lightbox.js quando l'utente
   clicca su un .gallery-item. Markup creato dal JS, NO markup HTML
   statico necessario nelle pagine. Chiuso con ESC, click-bg o X.
   Nav arrows (PC) + swipe (mobile).

   Struttura creata dal JS:
     <div class="lightbox is-open">
       <button class="lightbox-close" aria-label="Chiudi">x</button>
       <button class="lightbox-prev" aria-label="Precedente">&lt;</button>
       <button class="lightbox-next" aria-label="Successiva">&gt;</button>
       <figure class="lightbox-figure">
         <img src="...-full.webp" alt="...">
         <figcaption class="lightbox-caption">n/tot</figcaption>
       </figure>
     </div>
============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.lightbox.is-open {
  display: flex;
  animation: lightbox-fade-in 180ms ease;
}
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-figure {
  margin: 0;
  max-width: min(95vw, 1400px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.lightbox-figure img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  color: var(--overlay-light-70);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-align: center;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background: var(--overlay-light-10);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-circle);
  width: 48px;
  height: 48px;
  font-size: 22px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast);
  line-height: 1;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  background: var(--overlay-light-30);
}
.lightbox-close { top: var(--sp-5); right: var(--sp-5); }
.lightbox-prev  { left: var(--sp-5); top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: var(--sp-5); top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox-prev, .lightbox-next { display: none; }
  .lightbox-close { top: var(--sp-4); right: var(--sp-4); width: 40px; height: 40px; }
  .lightbox-figure img { max-height: 80vh; }
}

/* ============================================================
   .page-intro — HERO BREVE per pagine hub
   ------------------------------------------------------------
   Introduzione minimal (titolo + eventuale lead) per pagine
   informative tipo /corsi/, /acquerelli/, /pastelli-morbidi/,
   policy, contatti. A differenza di .hero-corso (landing, con
   video e CTA) e .hero-home (presentazione autore), .page-intro
   e' solo "qui sei, questo e' il contenuto": titolo centrato +
   sottotitolo opzionale, ZERO distrazioni.

   Markup atteso:
     <section class="page-intro">
       <div class="page-intro-inner">
         <h1 class="page-intro-title">&hellip;</h1>
         <p class="page-intro-lead">&hellip;</p>   <!-- opzionale -->
       </div>
     </section>

   NOTE:
     - H1 centrato, max-width reading per leggibilita'.
     - Padding verticale generoso sopra (stacca dal menu sticky),
       ridotto sotto (la sezione successiva e' tipicamente il
       contenuto principale, es. .courses-catalog).
============================================================ */
.page-intro {
  background: var(--bg);
  padding: var(--sp-10) var(--section-pad-x) var(--sp-7);
  text-align: center;
}
.page-intro-inner {
  max-width: var(--reading-width);
  margin: 0 auto;
}
.page-intro-title {
  font-family: var(--serif);
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
}
.page-intro-lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--muted);
  margin: 0;
}
.page-intro-lead + .page-intro-lead { margin-top: var(--sp-4); }
/* Actions row: 1+ bottoni centrati sotto il lead. Wrap su mobile.
   Usata su pagine status (offerta-chiusa, "thank you", 404) o hub
   semplici dove il visitatore ha 1-2 strade chiare. */
.page-intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
@media (max-width: 600px) {
  .page-intro-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-intro-actions .btn { width: 100%; }
}
@media (max-width: 768px) {
  .page-intro { padding: var(--sp-9) var(--section-pad-x) var(--sp-6); }
  .page-intro-lead { font-size: var(--fs-md); }
}

/* ============================================================
   .courses-catalog — CATALOGO CORSI (grid di card)
   ------------------------------------------------------------
   Pattern globale per il catalogo dei corsi online. Sostituisce
   il blocco Thrive del live /corsi/ con una griglia pulita, una
   card per corso.

   Usata in:
     - /home/ sezione "I corsi online"
     - /corsi/ pagina intera (una volta migrata)
     - qualsiasi landing che deve mostrare l'elenco completo

   Markup atteso:
     <section class="courses-catalog">
       <div class="courses-catalog-inner">
         <h2 class="courses-catalog-title">&hellip;</h2>
         <div class="courses-catalog-grid">
           <article class="course-card">
             <a class="course-card-link" href="/corso/">
               <div class="course-card-media">
                 <img ...>
               </div>
               <div class="course-card-body">
                 <p class="course-card-duration">Durata: &hellip;</p>
                 <h3 class="course-card-title">&hellip;</h3>
                 <p class="course-card-desc">&hellip;</p>
                 <span class="course-card-cta">Scopri di pi&ugrave; sul corso &rarr;</span>
               </div>
             </a>
           </article>
           &hellip;
         </div>
       </div>
     </section>

   NOTE:
     - Il contenuto del catalogo e' usato su piu' pagine via SSI:
       `<!--#include virtual="/_global/partials/corsi-catalog-it.html" -->`
       Aggiornare il partial = aggiornare tutte le pagine.
     - Hover: la card sale leggermente e ombreggia.
     - Intera card cliccabile (link wrap), no bottone separato.
============================================================ */
.courses-catalog {
  padding: var(--section-pad);
  background: var(--bg);
}
.courses-catalog-inner {
  max-width: var(--container-lg);
  margin: 0 auto;
}
.courses-catalog-title {
  font-family: var(--serif);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
  text-align: center;
  margin: 0 auto var(--sp-9);
  max-width: var(--reading-width);
}
.courses-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-7);
}
.course-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
}
.course-card:hover,
.course-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.course-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.course-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg);
}
.course-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.course-card:hover .course-card-media img {
  transform: scale(1.03);
}
.course-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  flex: 1;
}
.course-card-duration {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  line-height: 1.5;
}
.course-card-title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
  margin: 0;
}
.course-card-desc {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--muted);
  margin: 0;
  /* limita a 5 righe per uniformita' della griglia */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card-cta {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange);
  transition: color var(--t-fast);
}
.course-card:hover .course-card-cta { color: var(--orange-dk); }

@media (max-width: 768px) {
  .courses-catalog-grid { gap: var(--sp-6); }
  .courses-catalog-title { margin-bottom: var(--sp-7); }
}

/* ============================================================
   MOBILE ADJUST
   Su mobile uniformiamo il pad-y di tutte le sezioni principali a
   sp-8 (40px) sopra/sotto. Sul desktop ogni pattern ha il suo pad
   (60/80 a seconda della tipologia), ma su mobile 80px sopra + 80px
   sotto su ogni sezione = scroll enorme e ritmo sfiancato. 40px
   uniforme tiene il ritmo molto piu' stretto senza rompere nessun
   layout esistente (ne' cane ne' il_vetro: riduce solo).
============================================================ */
@media (max-width: 768px) {
  .section       { padding: var(--sp-8) var(--section-pad-x); }
  .section-loose { padding: var(--sp-9) var(--section-pad-x); }
  .btn-lg        { padding: var(--sp-4) var(--sp-6); }

  /* NOTA (aprile 2026): questa lista e' residuo storico. Il master
     uniform section-spacing rule (`main > section + section`) con
     `!important` gia' forza --section-gap fra ogni coppia di sezioni
     adiacenti su mobile (24px). Questa regola serve SOLO per:
     - dare padding di fallback a sezioni isolate (prima/ultima di main,
       dove il selettore adjacency non arriva);
     - pagine vecchie dove il wrapping in <main> non era stato fatto.
     `.hero-corso` RIMOSSO: e' sempre prima sezione, e il proprio
     padding e' dichiarato a line 366 (12 0 mobile, dal master). Se lo
     includiamo qui forziamo 40/40 e scavalchiamo il comportamento
     corretto. */
  .promo-section,
  .split-section,
  .bio-section,
  .members-area-section,
  .fits-you-section,
  .juliana-section,
  .narrative-block,
  .works-section,
  .testimonial-section,
  .testimonials-section,
  .community-section,
  .closing-offer-section,
  .bundle-offer,
  .faq-section,
  .docuserie-section,
  .courses-catalog {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

}