/* ============================================================
   Pillole AI & Scuola — versione 2.0 — foglio di stile unico
   ============================================================ */

@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-Hairline.otf?v=3') format('opentype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-Thin.otf?v=3') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-ExtraLight.otf?v=3') format('opentype');font-weight:250;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-Light.otf?v=3') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-Regular.otf?v=3') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-Medium.otf?v=3') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-SemiBold.otf?v=3') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-Bold.otf?v=3') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-ExtraBold.otf?v=3') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'LTSaeada';src:url('../font/lt_saeada/LTSaeada-Black.otf?v=3') format('opentype');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* Superfici — azzurro freddo e luminoso */
  --paper:#f2f6fe;
  --paper-2:#e8f0fc;
  --paper-3:#d6e4f8;
  --ink:#0b1a33;
  --ink-soft:#33455f;
  --muted:#647691;
  --line:#dbe6f6;
  --line-soft:#e9f1fd;

  /* Scala blu */
  --blue-900:#081633;
  --blue-800:#0d2350;
  --blue-700:#163a86;
  --blue-600:#1d4ed8;
  --blue-500:#2f6bf0;
  --blue-400:#5d8ef0;

  /* Accento dominante = blu · nota elegante = oro */
  --accent:#1d4ed8;
  --accent-2:#1838a6;
  --gold:#d6a435;
  --gold-soft:#ecca7c;
  --gold-deep:#b3811d;

  /* alias legacy usati da alcuni componenti */
  --teal:#1f9fb0;
  --plum:#3b5bc4;
  --moss:#3f6948;
  --slate:#445574;

  --shadow-1: 0 1px 2px rgba(11,26,51,.05), 0 6px 18px rgba(11,26,51,.07);
  --shadow-2: 0 10px 34px rgba(11,26,51,.12);
  --shadow-3: 0 22px 60px rgba(11,26,51,.18);
  --glow-blue: 0 10px 30px rgba(29,78,216,.32);
  --glow-gold: 0 8px 22px rgba(214,164,53,.34);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'LTSaeada',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 560px at 88% -12%, #dbe8fc 0%, transparent 60%),
    radial-gradient(900px 480px at -10% 108%, #e3edfb 0%, transparent 62%),
    var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
a{color:inherit}

/* ===== NAV ============================================ */
nav.topbar{
  max-width:1280px;
  margin:0 auto;
  padding:24px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none;
  color:var(--ink);
}
.brand .logo{
  width:38px; height:38px;
  border-radius:11px;
  background:var(--accent);
  color:#fff;
  display:grid; place-items:center;
  font-weight:600;
  font-size:19px;
  box-shadow:0 4px 14px rgba(214,164,53,.35);
}
.brand .lbl{ font-weight:500; font-size:18px; line-height:1 }
.brand .sub{
  font-size:11px; color:var(--muted);
  letter-spacing:.18em; text-transform:uppercase;
  margin-top:5px;
}
.nav-meta{
  font-size:12px; color:var(--muted); letter-spacing:.12em;
  display:flex; align-items:center; gap:14px;
}
.nav-meta a{
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px dashed var(--line);
  padding-bottom:1px;
  transition:.2s;
}
.nav-meta a:hover{color:var(--accent); border-color:var(--accent)}

/* ===== HERO =========================================== */
.hero{
  max-width:1280px;
  margin:0 auto;
  padding:48px 32px 56px;
}
.eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:22px;
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--accent)}
h1.display{
  font-weight:300;
  font-size:clamp(48px, 7.4vw, 104px);
  line-height:.98;
  letter-spacing:-.04em;
  margin:0 0 26px;
  max-width:980px;
}
h1.display em{font-style:italic; color:var(--plum); font-weight:400}
h1.display strong{font-weight:500; color:var(--accent); font-style:normal}
.lede{
  font-weight:300;
  font-size:clamp(19px, 2vw, 25px);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:820px;
  margin:0 0 38px;
}
.lede em{color:var(--accent-2); font-style:italic}
.hero-stats{
  display:flex; gap:54px; flex-wrap:wrap;
  padding:26px 0 0;
  border-top:1px solid var(--line);
  margin-top:38px;
}
.stat .n{
  font-weight:400;
  font-size:38px;
  line-height:1;
  color:var(--ink);
}
.stat .l{
  font-size:11px; color:var(--muted);
  letter-spacing:.18em; text-transform:uppercase;
  margin-top:7px;
}

/* ===== TOOLBAR / SEARCH =============================== */
.toolbar{
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg, rgba(251,248,243,.96) 0%, rgba(251,248,243,.86) 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.toolbar-inner{
  padding:20px 0;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.search{ flex:1; min-width:280px; position:relative }
.search input{
  width:100%;
  padding:15px 20px 15px 50px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  font-family:inherit;
  font-size:16px;
  outline:none;
  transition:.2s;
  box-shadow:var(--shadow-1);
}
.search input::placeholder{color:var(--muted); font-style:italic}
.search input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(214,164,53,.13), var(--shadow-1);
}
.search svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--muted);
}
.filters{ display:flex; gap:7px; flex-wrap:wrap }
.filter{
  padding:9px 15px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px; font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.filter:hover{border-color:var(--accent); color:var(--accent)}
.filter.active{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.toolbar-meta{
  font-size:11px; color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase;
}

/* ===== GRID DI SCHEDE ================================= */
main{
  max-width:1280px;
  margin:0 auto;
  padding:36px 32px 80px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:22px;
}

/* card editorial */
.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 28px 22px;
  transition:.28s;
  display:flex; flex-direction:column;
  min-height:340px;
  overflow:hidden;
  isolation:isolate;
}

/* Cover image della card. Miniatura più piccola, dentro la card (non
   edge-to-edge): l'immagine si vede per intero, scalata mantenendo
   l'aspect ratio originale (16:9 delle sorgenti). */
.card-cover{
  position:relative;
  margin:-28px -28px 18px;          /* full-bleed: banner a tutta larghezza in cima alla card */
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--paper-2);
  display:flex;
  align-items:flex-end;             /* titolo ancorato in basso */
}
.card-cover img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;                 /* la foto riempie il banner */
  display:block;
  transition:transform .4s ease;
  z-index:0;
}
.card:hover .card-cover img{ transform:scale(1.04) }
.card-cover-fallback{
  position:absolute; inset:0;
  background: var(--th-bg, linear-gradient(135deg, var(--paper-2), var(--paper-3)));
  display:none;
  z-index:0;
}
/* Velo blu per la leggibilità del titolo: denso in basso, sfuma verso l'alto */
.card-cover::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(8,22,51,.94) 0%,
    rgba(13,35,80,.66) 38%,
    rgba(22,58,134,.24) 72%,
    rgba(22,58,134,.05) 100%);
  z-index:1;
  pointer-events:none;
}
.card-cover .cover-title{
  position:relative;
  z-index:2;
  margin:0;
  padding:14px 18px 16px;
  color:#fff;
  font-weight:600;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.012em;
  text-shadow:0 1px 14px rgba(0,8,28,.6), 0 1px 2px rgba(0,8,28,.65);
}
.card-cover .cover-title mark{ background:rgba(255,255,255,.30); color:#fff; border-radius:2px; padding:0 1px }
.card-cover.no-cover{ background:transparent }
.card-cover.no-cover .card-cover-fallback{ display:block }
.card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:.3s;
  z-index:1;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-3);
  border-color:#d8cfb9;
}
.card:hover::before{transform:scaleY(1)}
.card.disabled{ opacity:.5; cursor:not-allowed }
.card.disabled:hover{transform:none; box-shadow:none}

.card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:14px;
}
.num{
  font-weight:300;
  font-size:54px;
  line-height:.85;
  color:var(--accent);
  letter-spacing:-.035em;
}
.num small{
  display:block;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-top:4px;
  font-weight:500;
}

.status-chip{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:4px 10px;
  border-radius:6px;
  font-weight:600;
  white-space:nowrap;
}
.status-chip.bozza      { background:#f3ede2; color:#8a7a52 }
.status-chip.script     { background:#eaf0fa; color:#2c4f8e }
.status-chip.audio      { background:#f6ecdf; color:#a85a1a }
.status-chip.video      { background:#e7f3ec; color:#1f6e3a }
.status-chip.pubblicato { background:#1a1f26; color:#f2f6fe }

.card h3{
  font-weight:500;
  font-size:23px;
  line-height:1.18;
  margin:6px 0 12px;
  letter-spacing:-.012em;
  color:var(--ink);
}
.card .desc{
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 16px;
  flex:1;
}
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px }
.tag{
  font-size:11px;
  padding:3px 9px;
  background:var(--paper-2);
  color:var(--ink-soft);
  border-radius:5px;
  font-weight:500;
}

.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding-top:16px;
  border-top:1px dashed var(--line);
}
.btn{
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  padding:10px 16px;
  border-radius:9px;
  cursor:pointer;
  text-decoration:none;
  transition:.18s;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
}
.btn-primary:hover{background:var(--accent)}
.btn-ghost{
  background:transparent;
  color:var(--ink-soft);
  border-color:var(--line);
}
.btn-ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.btn-gobbo{
  background:#fff;
  color:var(--plum);
  border-color:var(--plum);
}
.btn-gobbo:hover{ background:var(--plum); color:#fff }
.btn-gobbo .dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor;
  display:inline-block;
}

/* DEFAULT: vista pubblica (per docenti). Le sezioni "creator" sono nascoste.
   Uso :not(.creator) sul body così quando si attiva la modalità creator il
   display naturale dell'elemento (chip = inline-flex, btn = inline-flex…)
   prevale automaticamente, senza ridefinizioni esplicite. */
body:not(.creator) .btn-gobbo,
body:not(.creator) .gobbo-only{ display:none !important }

/* Toggle modalità creator */
.btn-creator-toggle{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:8px;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s ease;
}
.btn-creator-toggle:hover{
  border-color:var(--accent);
  color:var(--accent);
}
body.creator .btn-creator-toggle{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-creator-toggle .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
  display:inline-block;
  margin-right:6px;
  vertical-align:middle;
  opacity:.5;
}
body.creator .btn-creator-toggle .dot{ opacity:1 }

/* riga di durata sotto al titolo */
.card-meta-row{
  display:flex; align-items:center; gap:14px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.06em;
  margin-bottom:10px;
}
.card-meta-row .dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--muted);
  display:inline-block;
}

.empty{
  grid-column:1/-1;
  text-align:center;
  padding:80px 20px;
  color:var(--muted);
  font-size:20px;
  font-style:italic;
}

/* ===== FOOTER ========================================= */
footer.bottom{
  max-width:1280px;
  margin:0 auto;
  padding:48px 32px 60px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  letter-spacing:.05em;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
}

mark{ background:rgba(212,160,23,.35); color:inherit; padding:0 2px; border-radius:2px }

/* ============================================================
   PILLOLA — pagina dettaglio
   ============================================================ */
.pill-hero{
  max-width:1080px;
  margin:0 auto;
  padding:32px 32px 28px;
}
.crumbs{
  font-size:12px; color:var(--muted); letter-spacing:.08em;
  margin-bottom:30px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.crumbs a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px dashed var(--line) }
.crumbs a:hover{ color:var(--accent); border-color:var(--accent) }
.crumbs .sep{ color:var(--paper-3) }

.pill-num{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:18px;
}
.pill-num .n{
  font-weight:300;
  font-size:96px; line-height:.85;
  color:var(--accent);
  letter-spacing:-.04em;
}
.pill-num .lbl{
  font-size:11px; color:var(--muted);
  letter-spacing:.22em; text-transform:uppercase;
}
.pill-title{
  font-weight:300;
  font-size:clamp(40px, 5vw, 64px);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 20px;
  max-width:880px;
}
.pill-title em{font-style:italic; color:var(--plum); font-weight:400}
.pill-lede{
  font-weight:300;
  font-size:clamp(18px, 1.6vw, 22px);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:780px;
  margin:0 0 28px;
}
.pill-meta{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:18px;
}
.chip{
  font-size:12px;
  padding:6px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:7px;
}
.chip.accent{ color:var(--accent); border-color:rgba(214,164,53,.35) }
.chip.gold  { color:var(--gold);   border-color:rgba(212,160,23,.35) }
.chip.teal  { color:var(--teal);   border-color:rgba(47,126,122,.35) }
.chip.plum  { color:var(--plum);   border-color:rgba(91,59,107,.35) }

.pill-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:8px;
}
.pill-actions .btn{ padding:13px 22px; font-size:14px }

/* sezione */
.section{
  max-width:1080px;
  margin:36px auto;
  padding:0 32px;
}
.section h2{
  font-weight:500;
  font-size:24px;
  letter-spacing:-.012em;
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.section h2 .ico{
  width:34px; height:34px;
  border-radius:9px;
  background:var(--paper-2);
  color:var(--accent);
  display:grid; place-items:center;
  font-size:14px;
  font-weight:600;
}

/* video placeholder */
.video-frame{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-1);
  max-width:640px;
  margin:0 auto;
}
.video-player{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, #f3ede2 0%, #ebe2ce 100%);
  display:grid; place-items:center;
}
.video-player.has-video{ background:#000 }
.video-player iframe, .video-player video{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-placeholder{
  text-align:center; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.video-placeholder .play{
  width:64px; height:64px; border-radius:50%;
  background:rgba(214,164,53,.15);
  color:var(--accent);
  display:grid; place-items:center;
  font-size:24px;
}
.video-placeholder .ph-title{
  font-size:18px; color:var(--ink-soft); font-weight:500;
}
.video-placeholder .ph-sub{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}

/* pannello pronuncia */
.pronuncia{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px 26px;
  box-shadow:var(--shadow-1);
}
.pronuncia h3{
  font-size:14px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
  font-weight:600;
}
.pronuncia ul{ list-style:none; padding:0; margin:0 }
.pronuncia li{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0;
  border-bottom:1px dashed var(--line-soft);
  font-size:15px;
}
.pronuncia li:last-child{ border-bottom:0 }
.pronuncia .term{ font-weight:500; color:var(--ink) }
.pronuncia .leggi{
  font-style:italic;
  color:var(--plum);
  font-family:Georgia, serif;
}

/* riferimenti */
.references{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 26px;
}
.references h3{
  font-size:14px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 14px;
  font-weight:600;
}
.references ul{ list-style:none; padding:0; margin:0 }
.references li{
  padding:8px 0 8px 22px;
  position:relative;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.5;
}
.references li::before{
  content:"§";
  position:absolute; left:0;
  color:var(--accent);
  font-weight:600;
}

/* due colonne per pronuncia + riferimenti */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width:780px){ .two-col{ grid-template-columns:1fr } }

/* anteprima script */
.script-preview{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:36px 42px;
  box-shadow:var(--shadow-1);
  font-size:18px;
  line-height:1.78;
  color:var(--ink-soft);
}
.script-preview .act{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  display:flex; align-items:center; gap:10px;
  margin:30px 0 14px;
}
.script-preview .act::before{
  content:""; width:18px; height:1px; background:var(--accent);
}
.script-preview .act:first-child{ margin-top:0 }
.script-preview p{ margin:0 0 16px }
.script-preview strong{ color:var(--ink); font-weight:600 }
.script-preview .pause{
  display:inline-block;
  margin:0 4px;
  color:var(--accent);
  font-style:italic;
  font-size:.78em;
  vertical-align:middle;
  letter-spacing:.04em;
  opacity:.7;
}

/* ============================================================
   GOBBO — teleprompter
   ============================================================ */
body.gobbo{
  background:#0a0e1a;
  color:#fff;
  overflow-x:hidden;
}
.gobbo-fade-top, .gobbo-fade-bot{
  position:fixed; left:0; right:0;
  z-index:5; pointer-events:none;
}
.gobbo-fade-top{
  top:0; height:25vh;
  background:linear-gradient(180deg, #0a0e1a 30%, transparent);
}
.gobbo-fade-bot{
  bottom:0; height:35vh;
  background:linear-gradient(0deg, #0a0e1a 30%, transparent);
}
.gobbo-guide{
  position:fixed;
  top:28%;
  left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 8%, rgba(96,165,250,.35) 30%, rgba(96,165,250,.6) 50%, rgba(96,165,250,.35) 70%, transparent 92%);
  z-index:10; pointer-events:none;
}

#teleprompter{
  max-width:980px;
  margin:0 auto;
  padding:30vh 48px 60vh;
  font-weight:400;
  color:rgba(255,255,255,.85);
  letter-spacing:.005em;
}
#teleprompter p{ margin:0 0 38px; transition:opacity .3s; }
#teleprompter p.dim{ opacity:.22 }
#teleprompter p.active{ opacity:1; color:#fff }
#teleprompter strong{
  color:#7cb0ff;
  font-weight:700;
  letter-spacing:0;
}
#teleprompter .pause{
  display:inline-block;
  margin:0 8px;
  color:rgba(167,139,250,.7);
  font-style:italic;
  font-size:.7em;
  letter-spacing:.08em;
}
#teleprompter .act-mark{
  display:block;
  margin:48px 0 28px;
  font-size:14px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(167,139,250,.55);
  font-weight:700;
  text-align:center;
}
#teleprompter .act-mark::before, #teleprompter .act-mark::after{
  content:" — ";
  color:rgba(167,139,250,.3);
}

/* size variants */
body.size-s  #teleprompter{font-size:30px; line-height:1.6}
body.size-m  #teleprompter{font-size:42px; line-height:1.7}
body.size-l  #teleprompter{font-size:56px; line-height:1.75}
body.size-xl #teleprompter{font-size:72px; line-height:1.8}

body.mirror #teleprompter{ transform:scaleX(-1) }

/* gobbo info pill */
.gobbo-info{
  position:fixed;
  top:20px; left:50%; transform:translateX(-50%);
  z-index:20;
  display:flex; gap:14px; align-items:center;
  background:rgba(10,14,26,.85);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.gobbo-info .pill-n{
  color:#7cb0ff;
  font-weight:800;
}
.gobbo-info .sep{
  width:1px; height:14px; background:rgba(255,255,255,.15);
}

/* timer panel */
.gobbo-timer{
  position:fixed;
  top:20px; right:20px;
  z-index:20;
  display:flex; gap:18px;
  background:rgba(10,14,26,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px 20px;
  font-variant-numeric:tabular-nums;
}
.gobbo-timer .group{
  display:flex; flex-direction:column;
}
.gobbo-timer .lbl{
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:3px;
}
.gobbo-timer .val{
  font-size:18px; font-weight:700; color:#fff;
}
.gobbo-timer .val.warn{ color:#fbbf24 }
.gobbo-timer .val.over{ color:#f87171 }
.gobbo-timer .val.good{ color:#34d399 }

/* controls */
.gobbo-ctrl{
  position:fixed;
  bottom:22px; left:50%; transform:translateX(-50%);
  z-index:20;
  display:flex; gap:10px; align-items:center;
  background:rgba(10,14,26,.92);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:13px 22px;
}
.gobbo-ctrl button{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  padding:10px 18px;
  border-radius:11px;
  cursor:pointer;
  transition:.18s;
  min-width:48px;
}
.gobbo-ctrl button:hover{ background:rgba(255,255,255,.13) }
.gobbo-ctrl button.active{ background:rgba(96,165,250,.28); border-color:rgba(96,165,250,.55) }
.gobbo-ctrl .speed{
  font-size:13px;
  color:rgba(255,255,255,.6);
  font-weight:600;
  min-width:104px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.gobbo-ctrl .copy{
  background:rgba(214,164,53,.25);
  border-color:rgba(214,164,53,.45);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.gobbo-ctrl .copy:hover{ background:rgba(214,164,53,.4) }
.gobbo-ctrl .copy.done{
  background:rgba(52,211,153,.25);
  border-color:rgba(52,211,153,.5);
}
.gobbo-ctrl .divider{
  width:1px; height:26px; background:rgba(255,255,255,.1);
  margin:0 4px;
}

/* Rec button */
.gobbo-ctrl .rec{
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.4);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  display:inline-flex; align-items:center; gap:8px;
}
.gobbo-ctrl .rec:hover{ background:rgba(239,68,68,.32) }
.gobbo-ctrl .rec .red-dot{
  width:9px; height:9px; border-radius:50%;
  background:#ef4444;
  display:inline-block;
}
.gobbo-ctrl .rec.armed{
  background:rgba(239,68,68,.55);
  border-color:rgba(239,68,68,.85);
  box-shadow:0 0 0 0 rgba(239,68,68,.7);
  animation:recPulse 1.4s ease-in-out infinite;
}
@keyframes recPulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(239,68,68,.55) }
  50%      { box-shadow:0 0 0 9px rgba(239,68,68,0) }
}
.gobbo-ctrl .rec.armed .red-dot{
  animation:dotBlink 1s ease-in-out infinite;
}
@keyframes dotBlink{
  0%, 100% { opacity:1 }
  50%      { opacity:.35 }
}

/* Rec status panel (floating top-left) */
.gobbo-rec-panel{
  position:fixed;
  top:20px; left:20px;
  z-index:20;
  display:none;
  flex-direction:column; gap:8px;
  background:rgba(20,8,8,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(239,68,68,.3);
  border-radius:14px;
  padding:14px 18px;
  min-width:200px;
  font-variant-numeric:tabular-nums;
}
.gobbo-rec-panel.active{ display:flex }
.gobbo-rec-panel .row{
  display:flex; align-items:center; gap:10px;
}
.gobbo-rec-panel .ind{
  display:flex; align-items:center; gap:9px;
  color:#fff;
  font-weight:700;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.gobbo-rec-panel .ind .red-dot{
  width:11px; height:11px; border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 12px rgba(239,68,68,.7);
  animation:dotBlink 1s ease-in-out infinite;
}
.gobbo-rec-panel .timecode{
  font-size:22px; font-weight:700; color:#fff;
  margin-left:auto;
}
.gobbo-rec-panel .take{
  font-size:10px;
  color:rgba(255,255,255,.5);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.gobbo-rec-panel .vu{
  height:4px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.gobbo-rec-panel .vu .bar{
  position:absolute; left:0; top:0; bottom:0;
  width:0;
  background:linear-gradient(90deg, #34d399 0%, #fbbf24 70%, #ef4444 100%);
  transition:width 60ms linear;
  border-radius:2px;
}

/* Export button (intro+outro) */
.gobbo-ctrl .export{
  background:rgba(91,59,107,.28);
  border-color:rgba(167,139,250,.45);
  color:#fff;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.gobbo-ctrl .export:hover{ background:rgba(91,59,107,.45) }

/* Pillola page — primary export button */
.btn-export{
  background:linear-gradient(135deg, #5b3b6b 0%, #8b5cf6 100%);
  color:#fff;
  border:none;
  font-weight:600;
  letter-spacing:.02em;
}
.btn-export:hover{
  filter:brightness(1.1);
  box-shadow:0 8px 24px rgba(139,92,246,.3);
}

/* Riepilogo video sul server (sotto pill-actions) */
.pill-videos{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
}
.video-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px dashed var(--line-soft);
}
.video-row:last-child{ border-bottom:0 }
.video-row .vr-l{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0 }
.video-row .vr-tag{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
}
.video-row .vr-state{
  font-size:13px;
  color:var(--ink-soft);
}
.video-row.missing .vr-state{ color:var(--muted); font-style:italic }
.video-row.primary{
  background:linear-gradient(180deg, rgba(214,164,53,.10), rgba(214,164,53,.03));
  margin:-4px -8px 8px;
  padding:14px 12px;
  border-radius:10px;
  border-bottom:1px solid var(--line);
}
.video-row.primary .vr-tag{ font-size:11px; letter-spacing:.16em }
.video-row .vr-r{ display:flex; gap:6px; flex-wrap:wrap }
.video-row .vr-r .btn{ padding:8px 14px; font-size:13px }

/* Audio takes */
.pill-audio{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
}
.audio-takes{
  display:flex; flex-direction:column; gap:14px;
}
.audio-take{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 18px;
}
.at-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.at-num{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  background:rgba(214,164,53,.1);
  padding:4px 10px;
  border-radius:6px;
}
.at-meta{
  font-size:13px;
  color:var(--ink-soft);
}
.at-tag{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--moss);
  background:rgba(63,105,72,.1);
  padding:3px 9px;
  border-radius:5px;
  font-weight:600;
}
.at-row{
  display:flex; align-items:center; gap:12px;
  padding:8px 0;
  flex-wrap:wrap;
}
.at-row + .at-row{
  border-top:1px dashed var(--line-soft);
  padding-top:14px;
  margin-top:6px;
}
.at-row-opt{
  background:rgba(63,105,72,.04);
  margin:6px -12px -8px;
  padding:12px 12px;
  border-radius:8px;
  border:none;
}
.at-label{
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  flex:0 0 110px;
}
.at-label.opt{ color:var(--moss) }
.at-row audio{
  flex:1; min-width:200px;
  height:36px;
  border-radius:18px;
}
.at-actions{ display:flex; gap:6px; flex-wrap:wrap }
.at-actions .btn{ padding:7px 12px; font-size:12px }

/* ============================================================
   PROMPT IMMAGINI — accordion editoriale
   ============================================================ */
.image-prompts{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.image-prompts > summary{
  cursor:pointer;
  list-style:none;
  padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  font-weight:500;
  color:var(--ink);
  background:linear-gradient(180deg, #fff 0%, #f2f6fe 100%);
  border-bottom:1px solid transparent;
  transition:.2s;
}
.image-prompts > summary::-webkit-details-marker{ display:none }
.image-prompts > summary::before{
  content:"›";
  display:inline-block;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--paper-2);
  color:var(--accent);
  text-align:center;
  line-height:22px;
  font-size:18px;
  font-weight:600;
  margin-right:14px;
  transition:transform .25s ease;
  flex:0 0 auto;
}
.image-prompts[open] > summary::before{ transform:rotate(90deg) }
.image-prompts[open] > summary{ border-bottom-color:var(--line) }
.image-prompts > summary:hover{ background:linear-gradient(180deg, #fff 0%, #f3ede2 100%) }
.image-prompts .sum-l{ flex:1; font-weight:500 }
.image-prompts .sum-r{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  flex:0 0 auto;
}

.prompts-body{ padding:24px 26px 28px }
.prompts-intro{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
  padding:16px 22px;
  margin-bottom:22px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.prompts-intro p{ margin:0 0 8px }
.prompts-intro p:last-child{ margin:0 }
.prompts-intro strong{ color:var(--ink); font-weight:600 }
.prompts-intro em{ color:var(--accent-2); font-style:italic }

.prompt-card{
  background:#f2f6fe;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:14px;
  position:relative;
}
.prompt-card.subtle{ background:#fff; border-style:dashed }
.prompt-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.prompt-head .prompt-n{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  background:rgba(214,164,53,.1);
  padding:4px 10px;
  border-radius:6px;
}
.prompt-head .prompt-concept{
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  font-style:italic;
}
.prompt-text{
  background:#1a1f26;
  color:#e5dfd0;
  padding:16px 18px;
  border-radius:10px;
  font-family:'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  font-size:13px;
  line-height:1.65;
  white-space:pre-wrap;
  word-wrap:break-word;
  max-height:260px;
  overflow-y:auto;
  margin:0 0 12px;
  letter-spacing:0;
}
.prompt-text::-webkit-scrollbar{ width:6px }
.prompt-text::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px }
.prompt-actions{
  display:flex; gap:8px; flex-wrap:wrap;
}
.prompt-actions .btn{ padding:8px 16px; font-size:13px }
.prompt-actions .btn.done{ background:var(--moss); color:#fff }

.style-extra{
  margin-top:18px;
  border-top:1px dashed var(--line);
  padding-top:18px;
}
.style-extra > summary{
  cursor:pointer;
  list-style:none;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 0;
  font-weight:600;
}
.style-extra > summary::-webkit-details-marker{ display:none }
.style-extra > summary::before{
  content:"+";
  display:inline-block;
  width:18px; height:18px;
  border-radius:50%;
  border:1px solid var(--line);
  text-align:center;
  line-height:16px;
  margin-right:10px;
  font-size:13px;
  color:var(--accent);
  transition:.2s;
}
.style-extra[open] > summary::before{ content:"−" }
.style-extra[open] > summary{ color:var(--ink) }
.style-extra > .prompt-card{ margin-top:14px }

/* fonetic strip on top of the gobbo */
.gobbo-pron{
  position:fixed;
  top:74px; left:50%; transform:translateX(-50%);
  z-index:18;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  max-width:90vw;
  font-size:13px;
  color:rgba(255,255,255,.55);
}
.gobbo-pron .item{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:5px 11px;
}
.gobbo-pron .item b{
  color:#fff;
  font-weight:700;
  margin-right:6px;
}
.gobbo-pron .item i{
  color:rgba(167,139,250,.85);
  font-style:italic;
}

/* ===== TESTO — divider editoriale tra atti ===================== */
/* Sostituisce le scritte Amo/Idea/Inciampo/Lascito nella vista pubblica.
   Linea sottile con un piccolo pallino accent al centro. Il primo divider
   viene nascosto perché aprirebbe il testo con un separatore inutile. */
.script-preview .act-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:36px auto;
  max-width:240px;
  gap:14px;
}
.script-preview .act-divider::before,
.script-preview .act-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}
.script-preview .act-divider .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 7px;
}
.script-preview .act-divider:first-child{ display:none }

/* ===== QUIZ — verifica della comprensione ====================== */
.quiz-section .quiz-intro{
  color:var(--muted);
  font-style:italic;
  max-width:680px;
  margin:0 0 28px;
  font-size:15px;
  line-height:1.6;
}
.quiz-list{ display:flex; flex-direction:column; gap:24px }

.quiz-domanda{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 26px;
  box-shadow:var(--shadow-1);
  transition:box-shadow .2s ease;
}
.quiz-domanda:hover{ box-shadow:var(--shadow-2) }

.quiz-q{
  display:flex; gap:14px; align-items:flex-start;
  margin:0 0 18px;
  font-size:17px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink);
}
.quiz-num{
  flex:0 0 30px;
  height:30px; line-height:30px;
  text-align:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:14px;
  margin-top:1px;
}
.quiz-q-text{ flex:1 }

.quiz-alts{ display:flex; flex-direction:column; gap:10px }

.quiz-alt{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  font-size:15px;
  line-height:1.5;
}
.quiz-alt:hover{
  border-color:var(--accent);
  background:var(--paper-2);
}
.quiz-alt input[type=radio]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.quiz-alt-letter{
  flex:0 0 26px;
  height:26px; line-height:26px;
  border:1px solid var(--line);
  border-radius:6px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:var(--paper-2);
  letter-spacing:.04em;
  transition:all .15s ease;
}
.quiz-alt:has(input:checked){
  border-color:var(--accent);
  background:var(--paper-2);
}
.quiz-alt:has(input:checked) .quiz-alt-letter{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* dopo verifica */
.quiz-section.verificata .quiz-alt{ cursor:default }
.quiz-section.verificata .quiz-alt:hover{
  border-color:var(--line);
  background:#fff;
}
.quiz-alt.giusta{
  border-color:var(--moss) !important;
  background:rgba(63,105,72,.06) !important;
}
.quiz-alt.giusta .quiz-alt-letter{
  background:var(--moss);
  color:#fff;
  border-color:var(--moss);
}
.quiz-alt.sbagliata{
  border-color:#b94c3a !important;
  background:rgba(185,76,58,.06) !important;
}
.quiz-alt.sbagliata .quiz-alt-letter{
  background:#b94c3a;
  color:#fff;
  border-color:#b94c3a;
}

.quiz-commento{
  margin-top:18px;
  padding:16px 20px;
  border-left:3px solid var(--accent);
  background:var(--paper-2);
  border-radius:0 8px 8px 0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
}
.quiz-commento-label{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:6px;
}

.quiz-actions{
  display:flex; align-items:center; gap:18px;
  margin-top:28px;
  flex-wrap:wrap;
}
.btn-verifica{
  background:var(--ink);
  color:#fff;
  padding:13px 24px;
}
.btn-verifica:hover{ background:var(--accent) }
.btn-verifica:disabled{
  background:var(--paper-3);
  color:var(--muted);
  cursor:default;
}
.quiz-score{
  font-size:15px;
  font-weight:600;
  color:var(--ink-soft);
  padding:8px 14px;
  background:var(--paper-2);
  border-radius:8px;
}
.quiz-score.perfetto{
  color:var(--moss);
  background:rgba(63,105,72,.08);
}

@media (max-width:780px){
  .quiz-domanda{ padding:18px 18px }
  .quiz-q{ font-size:16px }
  .quiz-alt{ padding:10px 12px; font-size:14.5px }
  .quiz-commento{ padding:14px 16px; font-size:14px }
}

/* responsive */
@media (max-width:780px){
  .nav-meta, .hero-stats{ gap:24px }
  .stat .n{ font-size:30px }
  .pill-num .n{ font-size:64px }
  .gobbo-timer{ padding:10px 14px; gap:12px }
  .gobbo-timer .val{ font-size:15px }
  .gobbo-pron{ display:none }
  #teleprompter{ padding:30vh 24px 60vh }
}

/* ============================================================
   AI LITERACY — Selettore percorsi per figura + gruppi capitolo
   ============================================================ */

/* fascia percorsi */
.percorsi-wrap{
  background:linear-gradient(180deg, var(--paper-2), var(--paper));
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line);
}
.percorsi-inner{
  max-width:1280px;
  margin:0 auto;
  padding:22px 32px 26px;
}
.percorsi-label{
  font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.percorsi{
  display:flex; flex-wrap:wrap; gap:10px;
}
.percorso-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:11px 18px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:14px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:var(--shadow-1);
}
.percorso-chip:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow-2); }
.percorso-chip .pc-label{ font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.005em; }
.percorso-chip .pc-sub{ font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
.percorso-chip.active{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 8px 22px rgba(214,164,53,.28);
}
.percorso-chip.active .pc-label{ color:#fff; }
.percorso-chip.active .pc-sub{ color:rgba(255,255,255,.82); }

/* banner percorso selezionato */
.percorso-intro{ margin:8px 0 30px; }
.percorso-intro .pi-inner{
  border-left:3px solid var(--accent);
  background:linear-gradient(180deg, rgba(214,164,53,.06), rgba(214,164,53,.01));
  border-radius:0 16px 16px 0;
  padding:22px 28px;
}
.pi-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.pi-title{ font-size:28px; font-weight:500; letter-spacing:-.01em; margin:0 0 8px; color:var(--ink); }
.pi-desc{ font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:760px; margin:0 0 12px; }
.pi-meta{ font-size:13px; color:var(--muted); letter-spacing:.02em; }

/* il grid ora contiene sezioni-capitolo impilate */
.grid{ display:block; }
.cap-group{ margin:0 0 46px; }
.cap-head{
  display:flex; align-items:center; gap:14px;
  margin:0 0 20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.cap-head .cap-n{
  flex:none;
  width:34px; height:34px; line-height:34px;
  text-align:center;
  border-radius:10px;
  background:var(--paper-2);
  color:var(--accent);
  font-size:15px; font-weight:700;
}
.cap-head .cap-title{
  flex:1;
  font-size:21px; font-weight:600; letter-spacing:-.01em;
  margin:0; color:var(--ink);
}
.cap-head .cap-count{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.cap-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:22px;
}

/* autore (avatar) sulla card */
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-autore{
  flex:none;
  font-size:11px; font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-soft);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 10px;
  white-space:nowrap;
}

@media (max-width:680px){
  .percorsi-inner{ padding:18px 20px; }
  .percorso-chip{ flex:1 1 calc(50% - 10px); }
  .pi-title{ font-size:23px; }
}

/* ============================================================
   REDESIGN BLU + ORO — professionale · moderno · dinamico (2026)
   ============================================================ */
::selection{ background:var(--blue-600); color:#fff }
html{ scroll-behavior:smooth }

/* ----- Topbar: vetro sospeso a tutta larghezza ----- */
nav.topbar{ position:sticky; top:0; z-index:60; }
nav.topbar::before{
  content:""; position:absolute; inset:0 calc(50% - 50vw); z-index:-1;
  background:rgba(242,246,254,.74);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 4px 24px rgba(11,26,51,.05);
}
.brand .logo{
  background:linear-gradient(135deg, var(--blue-500), var(--blue-700));
  box-shadow:var(--glow-blue);
  font-weight:700; font-size:16px; letter-spacing:.02em;
  position:relative; overflow:hidden;
}
.brand .logo::after{
  content:""; position:absolute; right:-5px; bottom:-5px;
  width:13px; height:13px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 10px rgba(214,164,53,.7);
}
.nav-meta a{ border-bottom-color:transparent }
.nav-meta a:hover{ color:var(--gold-deep); border-color:var(--gold) }

/* ----- HERO: fascia blu a tutta larghezza con mesh animata ----- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  max-width:none; margin:0;
  padding:88px clamp(20px,5vw,64px) 96px;
  color:#eaf1ff;
  background:
    radial-gradient(900px 520px at 12% 6%, rgba(47,107,240,.50), transparent 60%),
    linear-gradient(135deg, #081a40 0%, #0d2a6b 50%, #143a8e 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroIn{ from{opacity:0} to{opacity:1} }
.hero::before{
  content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(360px 360px at 18% 28%, rgba(93,142,240,.42), transparent 62%),
    radial-gradient(420px 420px at 82% 18%, rgba(214,164,53,.18), transparent 62%),
    radial-gradient(460px 460px at 66% 96%, rgba(47,107,240,.34), transparent 62%);
  filter:blur(14px);
  animation:heroFloat 20s ease-in-out infinite alternate;
}
@keyframes heroFloat{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(0,-26px,0) scale(1.07)} }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero > *{ position:relative; z-index:2; max-width:1180px; margin-left:auto; margin-right:auto; }
.hero .eyebrow{ color:var(--gold-soft) }
.hero .eyebrow::before{ background:linear-gradient(90deg,var(--gold),transparent); width:36px; height:2px }
.hero h1.display{ color:#fff }
.hero h1.display em{ color:var(--gold-soft); font-style:italic }
.hero h1.display strong{ color:#fff; font-weight:600 }
.hero .lede{ color:#c2d4f7 }
.hero .lede em{ color:var(--gold-soft) }
.hero-stats{ border-top:1px solid rgba(255,255,255,.16) }
.hero .stat .n{ color:#fff; font-weight:500 }
.hero .stat .n::after{ content:""; display:block; width:22px; height:3px; border-radius:3px; background:var(--gold); margin-top:10px }
.hero .stat .l{ color:#9fb6e6 }

/* ----- Selettore percorsi ----- */
.percorsi-wrap{ background:linear-gradient(180deg,#ffffff,var(--paper)); border-top:none; border-bottom:1px solid var(--line) }
.percorsi-label{ color:var(--muted) }
.percorso-chip{ border-radius:16px; border:1.5px solid var(--line); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s, background .22s }
.percorso-chip:hover{ transform:translateY(-3px); border-color:var(--blue-400); box-shadow:var(--shadow-2) }
.percorso-chip.active{ background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); border-color:transparent; box-shadow:var(--glow-blue) }
.percorso-chip.active .pc-label{ color:#fff }
.percorso-chip.active .pc-sub{ color:var(--gold-soft) }

/* ----- Banner del percorso ----- */
.percorso-intro .pi-inner{
  position:relative; overflow:hidden; border-left:none; border-radius:20px; color:#fff;
  background:radial-gradient(700px 300px at 0% 0%, rgba(93,142,240,.55), transparent 60%), linear-gradient(135deg,var(--blue-700),var(--blue-600));
  box-shadow:var(--glow-blue); padding:26px 32px;
}
.percorso-intro .pi-inner::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(214,164,53,.34),transparent 70%) }
.pi-eyebrow{ color:var(--gold-soft) }
.pi-title{ color:#fff }
.pi-desc{ color:#d3e1ff }
.pi-meta{ color:#a8bff0 }

/* ----- Gruppi capitolo + card ----- */
.cap-head{ border-bottom:1px solid var(--line) }
.cap-head .cap-n{ background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); color:#fff; box-shadow:var(--glow-blue); border-radius:12px }
.cap-head .cap-title{ position:relative; padding-left:2px }
.cap-head .cap-count{ color:var(--gold-deep); font-weight:700 }

.card{ border-radius:18px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
  animation:cardIn .55s cubic-bezier(.2,.7,.2,1) both; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.2,1); background:linear-gradient(90deg,var(--blue-600),var(--gold)); z-index:3 }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-3); border-color:var(--blue-400) }
.card:hover::before{ transform:scaleX(1) }
@keyframes cardIn{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
.cap-cards .card:nth-child(1){animation-delay:.02s}
.cap-cards .card:nth-child(2){animation-delay:.07s}
.cap-cards .card:nth-child(3){animation-delay:.12s}
.cap-cards .card:nth-child(4){animation-delay:.17s}
.cap-cards .card:nth-child(5){animation-delay:.22s}
.cap-cards .card:nth-child(6){animation-delay:.27s}
.card .num{ color:var(--blue-700) }
.card-autore{ background:var(--paper-2); border-color:var(--line); color:var(--blue-700) }
.card .tag{ transition:.2s }

/* ----- Bottoni ----- */
.btn-primary{ background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); border:none; color:#fff; box-shadow:var(--glow-blue); transition:transform .2s, box-shadow .2s, filter .2s }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(29,78,216,.42); filter:saturate(1.08) }
.btn-gobbo{ border-color:var(--gold) }
.btn-gobbo .dot{ background:var(--gold) }

/* ----- Section heading accent (scheda / approfondimento) ----- */
.section h2 .ico{ background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); color:#fff; box-shadow:var(--glow-blue) }

/* riduzione movimento per chi lo preferisce */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}

/* ----- Correzioni layout redesign ----- */
/* Hero full-bleed: padding che ancora i contenuti alla colonna 1180 (allineamento coerente di occhiello/titolo/lede/stats) */
.hero{
  padding-left:max(clamp(20px,5vw,64px), calc((100% - 1180px) / 2));
  padding-right:max(clamp(20px,5vw,64px), calc((100% - 1180px) / 2));
}
.hero > *{ max-width:none; margin-left:0; margin-right:0 }
.hero h1.display{ max-width:980px }
.hero .lede{ max-width:820px }
/* La barra di ricerca non è più sticky (lo è la topbar): evita la sovrapposizione */
.toolbar{ position:static; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none }
.search input{ border-radius:14px }
.search input:focus{ border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(47,107,240,.15), var(--shadow-1) }
.toolbar-meta{ color:var(--gold-deep); font-weight:600 }

/* alias tonalità di testo usati dall'approfondimento */
:root{ --ink-2:#34465f; --ink-3:#647691; }

/* ----- Gobbo: pannello "Take registrate" (tema scuro, fisso) ----- */
.gobbo-takes-panel{ display:none }
.gobbo-takes-panel.has{
  display:block; position:fixed; right:20px; top:88px; z-index:45;
  width:344px; max-height:52vh; overflow-y:auto;
  background:rgba(8,16,34,.93); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:14px 16px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.5); color:#dce6f5;
}
.gobbo-takes-panel .gtp-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.62); font-weight:600; margin-bottom:10px;
}
.gobbo-takes-panel .gtp-count{ color:#0b1a33; background:var(--gold,#d6a435); border-radius:999px; padding:1px 9px; font-weight:700 }
.gobbo-takes-panel .gtp-row{ display:flex; align-items:center; gap:8px; padding:9px 0; border-top:1px solid rgba(255,255,255,.08) }
.gobbo-takes-panel .gtp-row:first-of-type{ border-top:none }
.gobbo-takes-panel .gtp-meta{ min-width:74px; display:flex; flex-direction:column; gap:2px }
.gobbo-takes-panel .gtp-n{ font-size:13px; font-weight:600; color:#fff }
.gobbo-takes-panel .gtp-mb{ font-size:10px; color:#8fa6cf }
.gobbo-takes-panel audio{ flex:1; height:34px; min-width:0 }
.gobbo-takes-panel .gtp-dl{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.08); color:#cfe0ff; text-decoration:none; font-size:15px }
.gobbo-takes-panel .gtp-dl:hover{ background:var(--blue-600,#1d4ed8); color:#fff }
@media (max-width:640px){ .gobbo-takes-panel.has{ left:12px; right:12px; width:auto; top:auto; bottom:96px; max-height:38vh } }

/* pulsante Ottimizza nel pannello take del gobbo */
.gobbo-takes-panel .gtp-actions{ display:flex; align-items:center; gap:6px; flex:none }
.gobbo-takes-panel .gtp-opt{
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:8px; border:none; cursor:pointer;
  background:rgba(214,164,53,.18); color:#ecca7c; font-size:15px; transition:.15s;
}
.gobbo-takes-panel .gtp-opt:hover{ background:var(--gold,#d6a435); color:#0b1a33 }
.gobbo-takes-panel .gtp-opt.busy{ opacity:.6; cursor:wait }

.card-autore{ display:inline-flex; align-items:center; gap:2px }

/* === Link "Il corso" nella topbar (landing commerciale) === */
.nav-meta a.nav-corso{
  color:var(--gold-deep);
  font-weight:600;
  letter-spacing:.04em;
  border:1px solid var(--gold);
  border-radius:100px;
  padding:6px 15px;
  background:linear-gradient(135deg, rgba(236,202,124,.18), rgba(214,164,53,.08));
}
.nav-meta a.nav-corso:hover{
  color:#3a2a06;
  background:linear-gradient(135deg, #ecca7c, #d6a435);
  border-color:#d6a435;
  box-shadow:var(--glow-gold);
}

/* === Logo immagine nel topbar (marchio ArIAnna) === */
.brand.has-logo .logo{
  width:auto; height:auto; min-width:0;
  background:none; box-shadow:none; border-radius:0; overflow:visible;
}
.brand.has-logo .logo::after{ display:none }
.brand.has-logo .logo img{ height:46px; width:auto; display:block }
.brand.has-logo > div:not(.logo){ display:none }   /* nasconde nome+sottotitolo (il logo è già il wordmark) */

/* === Materiali di produzione (immagini + video HeyGen) per il video finale === */
.media-intro{ font-size:14.5px; color:var(--ink-soft); margin:0 0 18px; max-width:760px; line-height:1.6 }
.media-intro b{ color:var(--ink); font-weight:600 }
.media-err{ color:#b3261e; font-size:14px }
.media-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px }
.media-slot{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:14px 14px 12px; display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.media-slot.has{ border-color:#cfe0fb }
.media-head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.media-label{ font-weight:600; font-size:14px; color:var(--ink); letter-spacing:-.005em }
.media-badge{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); background:rgba(214,164,53,.12);
  border:1px solid rgba(214,164,53,.34); border-radius:100px; padding:3px 9px;
}
.media-preview{
  border-radius:11px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--line-soft); aspect-ratio:16/10; display:grid; place-items:center;
}
.media-preview img{ width:100%; height:100%; object-fit:cover; display:block }
.media-preview video{ width:100%; height:100%; object-fit:contain; background:#0b1a33; display:block }
.media-drop{
  border:1.5px dashed #c3d4ee; border-radius:11px; background:var(--paper);
  aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; transition:.2s; text-align:center; padding:10px;
}
.media-drop:hover{ border-color:var(--accent); background:#eef4fe }
.media-drop .md-ico{ font-size:26px; line-height:1 }
.media-drop .md-cta{ font-weight:600; font-size:14px; color:var(--accent) }
.media-drop .md-hint{ font-size:11.5px; color:var(--muted); line-height:1.35 }
.media-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto }
.media-name{ font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52% }
.media-name .muted{ color:var(--muted) }
.media-actions{ display:flex; gap:6px; flex:0 0 auto }
.media-actions .btn{ padding:6px 12px; font-size:12.5px }
.media-prog{ display:flex; align-items:center; gap:8px }
.media-prog[hidden]{ display:none }
.media-track{ flex:1; height:6px; border-radius:100px; background:var(--paper-3); overflow:hidden }
.media-bar{ height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--blue-500),var(--blue-700)); transition:width .15s ease }
.media-pct{ font-size:11px; font-weight:600; color:var(--accent); min-width:34px; text-align:right }
.media-slot.uploading{ opacity:.92 }
.media-slot.uploading .media-actions{ pointer-events:none; opacity:.5 }