/* ============================================================
   ODC — Riesgos IA Generativa · SDLC · Universidad de Cundinamarca
   styles.css — Sistema de diseño: Landing + Slide Player
   Autores: Escobar Sarmiento B.E. · Martínez Gaitán E.A.
   ============================================================ */

/* ── TOKENS (LIGHT) ── */
:root {
  --font-h: 'Montserrat', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;

  --bg:        #EEF2F7;
  --surface:   #FFFFFF;
  --surface2:  #F5F8FC;
  --border:    #DDE3EC;
  --text:      #1A202C;
  --text2:     #4A5568;
  --muted:     #718096;

  --blue:      #2A7AFF;
  --blue-dk:   #1A6AEF;
  --blue-bg:   #EBF4FF;
  --teal:      #00C49A;
  --teal-dk:   #009E7A;
  --teal-bg:   #E0FFF6;
  --navy:      #0A1628;
  --navy2:     #0F1F3D;
  --warn:      #F59E0B;
  --warn-bg:   #FFFBEB;
  --danger:    #EF4444;
  --success:   #10B981;

  --sh-sm: 0 1px 4px rgba(0,0,0,.08);
  --sh-md: 0 4px 14px rgba(0,0,0,.10);
  --sh-lg: 0 10px 32px rgba(0,0,0,.13);

  --r-sm:  6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --t: .2s ease;
  --t-slow: .35s ease;

  --hdr: 52px;   /* player header height */
  --ftr: 54px;   /* player footer height */
}

/* ── TOKENS (DARK) ── */
html.dark {
  --bg:       #0A1628;
  --surface:  #0F1F3D;
  --surface2: #182D4A;
  --border:   #2A3F5F;
  --text:     #E8EAED;
  --text2:    #9CA3AF;
  --muted:    #6B7280;
  --blue:     #5B96FF;
  --blue-bg:  rgba(91,150,255,.12);
  --teal-bg:  rgba(0,196,154,.10);
  --warn-bg:  rgba(245,158,11,.10);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.7;transition:background var(--t-slow),color var(--t-slow);}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.25;color:var(--text);}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style:none;}
img{max-width:100%;height:auto;}
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 24px;}

/* ── SHARED BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:var(--r-md);font-family:var(--font-h);font-weight:600;font-size:.875rem;cursor:pointer;border:2px solid transparent;transition:all var(--t);text-decoration:none;white-space:nowrap;}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-primary:hover{background:var(--blue-dk);border-color:var(--blue-dk);transform:translateY(-1px);box-shadow:var(--sh-md);text-decoration:none;color:#fff;}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);text-decoration:none;}
.hero .btn-outline{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.35);}
.hero .btn-outline:hover{color:#fff;border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.1);text-decoration:none;}
.btn-lg{padding:13px 30px;font-size:.95rem;}
.btn-sm{padding:6px 14px;font-size:.78rem;}
.btn-icon{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;transition:all var(--t);flex-shrink:0;}
.btn-icon:hover{border-color:var(--blue);}
html:not(.dark) .icon-dark{display:none;}
html.dark .icon-light{display:none;}

/* ═══════════════════════════════════════════════════════
   LANDING PAGE
═══════════════════════════════════════════════════════ */

/* Header */
.header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);height:58px;transition:background var(--t-slow);}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-img{height:36px;width:36px;object-fit:contain;border-radius:50%;flex-shrink:0;box-shadow:0 1px 6px rgba(0,0,0,.18);}
.logo-badge{background:var(--navy);color:#fff;font-family:var(--font-h);font-weight:800;font-size:.75rem;padding:4px 10px;border-radius:var(--r-sm);letter-spacing:.05em;}
html.dark .logo-badge{background:var(--blue);}
.logo-text{font-family:var(--font-h);font-size:.82rem;font-weight:600;color:var(--text2);}
.header-actions{display:flex;align-items:center;gap:12px;}
/* ODC player header logo */
.ph-logo-img{height:30px;width:30px;object-fit:contain;border-radius:50%;flex-shrink:0;box-shadow:0 1px 5px rgba(0,0,0,.4);}
/* Cover slides — logo institucional */
.cover-logo{width:90px;height:90px;object-fit:contain;border-radius:50%;margin-bottom:18px;box-shadow:0 4px 24px rgba(0,0,0,.45);flex-shrink:0;}
.cover-logo-sm{position:absolute;top:18px;right:22px;width:52px;height:52px;object-fit:contain;border-radius:50%;opacity:.88;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.4);}
/* Footer logo */
.footer-logo{height:28px;width:28px;object-fit:contain;border-radius:50%;opacity:.7;flex-shrink:0;}

/* Hero */
.hero{position:relative;background:linear-gradient(135deg,#0A1628 0%,#0F2040 45%,#0A2240 100%);overflow:hidden;padding:72px 0 90px;color:#fff;}
.hero-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.shape{position:absolute;border-radius:50%;opacity:.07;}
.shape-1{width:580px;height:580px;background:var(--blue);top:-180px;right:-80px;}
.shape-2{width:380px;height:380px;background:var(--teal);bottom:-80px;left:4%;opacity:.05;}
.hero-layout{position:relative;display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center;}
.hero-title{font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:800;color:#fff;margin:14px 0 18px;line-height:1.15;}
.hero-title em{color:var(--teal);font-style:normal;}
.hero-desc{font-size:1rem;color:rgba(255,255,255,.78);margin-bottom:28px;max-width:520px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.hero-meta{font-size:.77rem;color:rgba(255,255,255,.45);}
.hero-badge{display:inline-block;padding:5px 13px;border-radius:999px;font-size:.75rem;font-weight:600;font-family:var(--font-h);background:var(--teal-bg);color:var(--teal-dk);border:1px solid var(--teal);margin-bottom:4px;}
.hero-visual{position:relative;height:340px;}
.float-card{position:absolute;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:18px;color:#fff;min-width:160px;animation:floatY 6s ease-in-out infinite;}
.fc-1{top:0;left:0;animation-delay:0s;}
.fc-2{top:105px;right:0;animation-delay:2s;}
.fc-3{bottom:0;left:25px;animation-delay:4s;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.fc-icon{font-size:1.4rem;margin-bottom:6px;}
.fc-num{font-family:var(--font-h);font-size:1.9rem;font-weight:800;color:var(--teal);}
.fc-lbl{font-size:.77rem;color:rgba(255,255,255,.78);line-height:1.4;}
.fc-cite{font-size:.68rem;color:rgba(255,255,255,.4);margin-top:5px;}

/* Stats bar */
.stats-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:24px 0;}
.stats-grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.stat-item{display:flex;flex-direction:column;align-items:center;padding:0 44px;text-align:center;}
.stat-num{font-family:var(--font-h);font-size:1.9rem;font-weight:800;color:var(--blue);}
.stat-lbl{font-size:.8rem;color:var(--muted);margin-top:2px;}
.stat-div{width:1px;height:46px;background:var(--border);}

/* REA section */
.rea-section{padding:52px 0;}
.rea-card{display:flex;gap:24px;align-items:flex-start;background:linear-gradient(135deg,var(--blue-bg),var(--teal-bg));border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:var(--r-lg);padding:32px;}
.rea-badge{background:var(--blue);color:#fff;font-family:var(--font-h);font-weight:700;font-size:.82rem;padding:7px 14px;border-radius:var(--r-md);white-space:nowrap;flex-shrink:0;}
.rea-title{font-size:1.05rem;margin-bottom:10px;}
.rea-text{font-size:.92rem;color:var(--text2);line-height:1.8;}
.rea-text mark{background:rgba(42,122,255,.12);color:var(--blue);padding:1px 4px;border-radius:3px;}

/* Modules section */
.modules-section{padding:52px 0 72px;}
.section-header{text-align:center;margin-bottom:44px;}
.section-title{font-size:1.7rem;font-weight:800;}
.section-sub{color:var(--muted);margin-top:7px;font-size:.92rem;}
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:44px;}
.module-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;text-decoration:none;color:var(--text);transition:all var(--t);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;}
.module-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal));opacity:0;transition:opacity var(--t);}
.module-card.available:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--sh-lg);text-decoration:none;color:var(--text);}
.module-card.available:hover::before{opacity:1;}
.module-card.locked{opacity:.5;cursor:default;}
.mod-num{font-family:var(--font-h);font-size:1.9rem;font-weight:800;color:var(--border);}
.module-card.available .mod-num{color:var(--blue);}
.mod-content h3{font-size:.95rem;margin-bottom:5px;}
.mod-content p{font-size:.82rem;color:var(--muted);line-height:1.5;}
.mod-tag{font-size:.72rem;font-weight:600;font-family:var(--font-h);padding:4px 10px;border-radius:999px;align-self:flex-start;margin-top:auto;}
.avail-tag{background:var(--blue-bg);color:var(--blue);}
.lock-tag{background:var(--surface2);color:var(--muted);}
.cta-center{text-align:center;}

/* Authors strip */
.authors-strip{background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;}
.authors-inner{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;}
.author-item{display:flex;align-items:center;gap:10px;}
.author-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:800;font-size:.85rem;color:#fff;flex-shrink:0;}
.author-name{font-size:.87rem;font-weight:600;}
.author-role{font-size:.75rem;color:var(--muted);}
.authors-sep{width:1px;height:36px;background:var(--border);}

/* Footer */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:20px 0;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:.8rem;color:var(--muted);}
.footer a{color:var(--blue);}

/* ═══════════════════════════════════════════════════════
   SLIDE PLAYER — odc.html
═══════════════════════════════════════════════════════ */

.odc-page{overflow:hidden;}

/* -- Player Shell -- */
.player-shell{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);transition:background var(--t-slow);}

/* -- Player Header -- */
.player-header{
  height:var(--hdr);
  flex-shrink:0;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  z-index:10;
  transition:background var(--t-slow);
}
.ph-logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.ph-logo:hover{text-decoration:none;}
.ph-title{font-family:var(--font-h);font-size:.78rem;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;}
.ph-module{
  font-family:var(--font-h);
  font-size:.72rem;
  font-weight:700;
  color:var(--blue);
  background:var(--blue-bg);
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
}
.ph-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
.ph-counter{
  font-family:var(--font-h);
  font-size:.7rem;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}

/* -- Slides Viewport -- */
.slides-viewport{
  flex:1;
  position:relative;
  overflow:hidden;
}

/* -- Slide Base -- */
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:translateX(32px);
  transition:opacity .28s ease, transform .28s ease;
}
.slide.active{
  opacity:1;
  pointer-events:all;
  transform:translateX(0);
}
.slide.exit-left{
  transform:translateX(-32px);
}

/* -- COVER slides (Portada, Módulo covers) -- */
.slide-cover{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:48px 40px;
  background:linear-gradient(135deg,#0A1628 0%,#0F2040 50%,#0A2240 100%);
  color:#fff;
  overflow:hidden;
}
.slide-cover::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:var(--blue);opacity:.06;top:-200px;right:-100px;pointer-events:none;}
.slide-cover::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:var(--teal);opacity:.05;bottom:-100px;left:5%;pointer-events:none;}
.cover-badge{display:inline-block;background:rgba(0,196,154,.15);color:var(--teal);border:1px solid rgba(0,196,154,.4);border-radius:999px;padding:5px 16px;font-size:.75rem;font-weight:700;font-family:var(--font-h);letter-spacing:.03em;margin-bottom:16px;}
.cover-num{font-family:var(--font-h);font-size:clamp(3rem,10vw,6rem);font-weight:800;color:rgba(255,255,255,.08);line-height:1;margin-bottom:-8px;}
.cover-title{font-family:var(--font-h);font-size:clamp(1.3rem,2.5vw,2rem);font-weight:800;color:#fff;margin-bottom:14px;max-width:680px;line-height:1.2;}
.cover-title em{color:var(--teal);font-style:normal;}
.cover-desc{font-size:.95rem;color:rgba(255,255,255,.7);max-width:560px;line-height:1.7;margin-bottom:28px;}
.cover-authors{margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:32px;justify-content:center;flex-wrap:wrap;}
.cover-author{font-size:.82rem;color:rgba(255,255,255,.55);}
.cover-cc{font-size:.72rem;color:rgba(255,255,255,.35);margin-top:10px;}
.cover-screens{display:flex;gap:8px;margin-top:12px;justify-content:center;flex-wrap:wrap;}
.cover-screen-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-sm);padding:4px 12px;font-size:.75rem;color:rgba(255,255,255,.6);}
.mod-cover-content{display:flex;flex-direction:column;align-items:center;max-width:700px;position:relative;z-index:1;}

/* -- S01 Portada: two-column layout with avatar -- */
.s01-layout{
  display:flex;
  width:100%;
  height:100%;
  max-width:1200px;
  align-items:stretch;
  gap:0;
  position:relative;
  z-index:1;
  padding:0 0 0 32px;
  overflow:hidden;
}
.s01-content{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  min-width:0;
  justify-content:center;
  overflow:hidden;
  padding-right:16px;
}
.s01-content .cover-badge{align-self:flex-start;}
.s01-content .cover-num{text-align:left;}
.s01-content .cover-title{text-align:left;}
.s01-content .cover-screens{justify-content:flex-start;}
.s01-content .cover-authors{justify-content:flex-start;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:auto;}
.s01-avatar-col{
  flex:0 0 auto;
  width:clamp(220px, 30vw, 400px);
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  overflow:hidden;
  position:relative;
}
/* Video transparente S01 — respeta aspect ratio, alineado abajo */
.avatar-video-s01{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom center;
}
.s01-avatar-label{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  font-size:.65rem;
  color:rgba(255,255,255,.3);
  font-style:italic;
  white-space:nowrap;
  pointer-events:none;
}
/* Unmute button overlay */
.avatar-unmute-btn{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:4px 14px;
  font-size:.72rem;
  cursor:pointer;
  z-index:10;
  backdrop-filter:blur(4px);
  transition:background .2s;
}
.avatar-unmute-btn:hover{background:rgba(0,0,0,.8);}

/* -- CONTENT slides layout (following storyboard zones 1-6) -- */
.slide-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  grid-template-rows:1fr 160px;
  grid-template-areas:
    "main  right"
    "btm   right";
  height:100%;
  overflow:hidden;
}

/* Zone 1: Main visual */
.zone-main{
  grid-area:main;
  overflow:hidden;
  padding:16px 22px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}
.zone-title{
  font-family:var(--font-h);
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  padding-bottom:8px;
  border-bottom:2px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  line-height:1.3;
}
.zone-title-num{
  background:var(--blue);
  color:#fff;
  font-size:.68rem;
  padding:2px 8px;
  border-radius:var(--r-sm);
  font-weight:700;
  flex-shrink:0;
}
/* Zone visual: scrollable so content is never clipped */
.zone-visual{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:0;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.zone-visual::-webkit-scrollbar{width:4px;}
.zone-visual::-webkit-scrollbar-track{background:transparent;}
.zone-visual::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
/* Center-content helper for simpler slides */
.zone-visual.center{justify-content:center;}

/* Zone RIGHT sidebar: zones 2, 5, 6 */
.zone-right{
  grid-area:right;
  display:flex;
  flex-direction:column;
  border-left:2px solid var(--border);
  background:var(--surface);
  overflow:hidden;
  transition:background var(--t-slow);
  min-height:0;
}

/* Zone 2: Screen number */
.zone-screen-num{
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  font-family:var(--font-h);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.zone-screen-num .sn-badge{
  background:var(--navy);
  color:#fff;
  padding:2px 8px;
  border-radius:var(--r-sm);
  font-size:.65rem;
  font-weight:800;
}
html.dark .zone-screen-num .sn-badge{background:var(--blue);}

/* Zone 5: Avatar video */
.zone-avatar{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
  transition:background var(--t-slow);
  min-height:0;
  overflow:hidden;
}
.avatar-frame{
  width:100%;
  aspect-ratio:16/10;
  border:2px dashed var(--border);
  border-radius:var(--r-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--surface);
  transition:all var(--t);
  cursor:default;
}
.avatar-frame:hover{border-color:var(--blue);background:var(--blue-bg);}
.av-icon{font-size:1.5rem;}
.av-label{font-family:var(--font-h);font-size:.6rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.4;}
.av-sub{font-size:.58rem;color:var(--muted);opacity:.7;text-align:center;}
/* Avatar video inside zone-right sidebar */
.avatar-video-zone{
  width:100%;
  position:relative;
  background:var(--surface2);
  overflow:hidden;
  flex:1;
  min-height:0;
}
.avatar-canvas-zone{
  display:block;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  /* Render at native video aspect ratio, fill available height */
  height:100%;
  width:auto;
  max-width:none;
}
.zone-avatar-label{
  font-family:var(--font-h);
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:5px;
  display:flex;
  align-items:center;
  gap:4px;
}
/* Script text under avatar */
.avatar-script{
  margin-top:6px;
  width:100%;
}
.avatar-script-label{
  font-family:var(--font-h);
  font-size:.56rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--blue);
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:4px;
}
.avatar-script-text{
  font-size:.66rem;
  color:var(--text2);
  line-height:1.5;
  font-style:italic;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:2px solid var(--blue);
  border-radius:var(--r-sm);
  padding:6px 8px;
  overflow-y:auto;
  max-height:90px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.avatar-script-text::-webkit-scrollbar{width:3px;}
.avatar-script-text::-webkit-scrollbar-thumb{background:var(--border);}
/* Slide cover: ensure content is centered and scrollable on small screens */
.slide-cover{overflow-y:auto;}

/* Zone 6: Image description */
.zone-img-desc{
  padding:8px 12px;
  font-size:.68rem;
  color:var(--muted);
  line-height:1.5;
  font-style:italic;
  overflow:hidden;
}
.zone-img-desc strong{font-style:normal;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);display:block;margin-bottom:3px;}

/* Zone BOTTOM: zones 3 + 4 */
.zone-btm{
  grid-area:btm;
  display:grid;
  grid-template-columns:1fr 160px;
  border-top:2px solid var(--border);
  overflow:hidden;
  background:var(--surface2);
}

/* Zone 3: Text content */
.zone-text{
  padding:10px 16px;
  font-size:.8rem;
  color:var(--text2);
  line-height:1.6;
  overflow-y:auto;
  border-right:1px solid var(--border);
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.zone-text strong{color:var(--text);font-weight:600;}
.zone-lbl{
  font-family:var(--font-h);
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
  margin-bottom:5px;
  display:flex;
  align-items:center;
  gap:6px;
}
.zone-lbl::before{content:'③';font-size:.65rem;color:var(--blue);}

/* Zone 4: Interactivity */
.zone-interact{
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  overflow:hidden;
}
.zone-interact-lbl{
  font-family:var(--font-h);
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
  margin-bottom:2px;
  text-align:center;
}
.int-btn{
  width:100%;
  padding:6px 8px;
  border-radius:var(--r-sm);
  background:var(--blue);
  color:#fff;
  border:none;
  font-family:var(--font-h);
  font-size:.68rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--t);
  text-align:center;
}
.int-btn:hover{background:var(--blue-dk);transform:translateY(-1px);}
.int-btn.teal{background:var(--teal);}
.int-btn.teal:hover{background:var(--teal-dk);}
.int-btn.ghost{background:transparent;color:var(--text2);border:1px solid var(--border);}
.int-btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);}

/* -- Player Footer (Navigation) -- */
.player-footer{
  height:var(--ftr);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  gap:10px;
  background:var(--surface);
  border-top:1px solid var(--border);
  transition:background var(--t-slow);
}
.pf-icon-btn{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:1rem;
  transition:all var(--t);
  flex-shrink:0;
  color:var(--text2);
}
.pf-icon-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);}
.pf-divider{width:1px;height:24px;background:var(--border);flex-shrink:0;}
.pf-nav-btn{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:7px 16px;
  font-family:var(--font-h);
  font-size:.75rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--t);
  color:var(--text2);
  flex-shrink:0;
}
.pf-nav-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);}
.pf-nav-btn:disabled{opacity:.35;cursor:default;}
.pf-nav-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.pf-nav-btn.primary:hover{background:var(--blue-dk);border-color:var(--blue-dk);}
.pf-counter{
  font-family:var(--font-h);
  font-size:.8rem;
  font-weight:700;
  color:var(--muted);
  min-width:52px;
  text-align:center;
  flex-shrink:0;
}
.pf-progress{
  flex:1;
  max-width:160px;
  height:4px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.pf-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  border-radius:999px;
  transition:width .3s ease;
}

/* ── Menu Overlay ── */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t-slow);
  backdrop-filter:blur(4px);
}
.menu-overlay.open{opacity:1;pointer-events:all;}
.menu-panel{
  position:absolute;
  left:0;top:0;bottom:0;
  width:320px;
  background:var(--surface);
  box-shadow:var(--sh-lg);
  display:flex;
  flex-direction:column;
  transform:translateX(-100%);
  transition:transform var(--t-slow);
  overflow:hidden;
}
.menu-overlay.open .menu-panel{transform:translateX(0);}
.menu-hdr{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
}
.menu-hdr h2{font-size:1rem;font-weight:700;}
.menu-close{background:none;border:none;cursor:pointer;font-size:1.2rem;color:var(--muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);transition:all var(--t);}
.menu-close:hover{background:var(--surface2);color:var(--text);}
.menu-body{flex:1;overflow-y:auto;padding:12px;}
.menu-section{margin-bottom:16px;}
.menu-section-title{font-family:var(--font-h);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 8px 4px;}
.menu-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  background:none;
  border:none;
  border-radius:var(--r-md);
  cursor:pointer;
  font-size:.82rem;
  font-family:var(--font-b);
  color:var(--text2);
  text-align:left;
  transition:all var(--t);
}
.menu-btn:hover{background:var(--blue-bg);color:var(--blue);}
.menu-btn.active{background:var(--blue-bg);color:var(--blue);font-weight:600;}
.menu-btn-num{
  font-family:var(--font-h);
  font-size:.65rem;
  font-weight:800;
  background:var(--border);
  color:var(--text2);
  padding:2px 6px;
  border-radius:4px;
  min-width:28px;
  text-align:center;
  flex-shrink:0;
}
.menu-btn.active .menu-btn-num{background:var(--blue);color:#fff;}

/* ── VISUAL COMPONENTS (Zone 1 content) ── */

/* Stat display cards */
.vis-stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:8px 0;}
.vstat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:16px 20px;
  text-align:center;
  flex:1;
  min-width:120px;
  box-shadow:var(--sh-sm);
}
.vstat-n{font-family:var(--font-h);font-size:2rem;font-weight:800;line-height:1;margin-bottom:6px;}
.vstat-n.blue{color:var(--blue);}
.vstat-n.teal{color:var(--teal);}
.vstat-n.red{color:var(--danger);}
.vstat-n.warn{color:var(--warn);}
.vstat-l{font-size:.78rem;color:var(--text2);line-height:1.4;}
.vstat-c{font-size:.67rem;color:var(--muted);margin-top:5px;font-style:italic;}

/* Process flow */
.vis-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;padding:8px 0;}
.flow-step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:12px 14px;
  text-align:center;
  flex-shrink:0;
}
.flow-step.hl{background:var(--blue-bg);border-color:var(--blue);}
.flow-step.hl2{background:var(--teal-bg);border-color:var(--teal);}
.fs-icon{font-size:1.3rem;margin-bottom:4px;}
.fs-name{font-family:var(--font-h);font-size:.72rem;font-weight:700;margin-bottom:3px;}
.fs-desc{font-size:.65rem;color:var(--muted);line-height:1.3;max-width:90px;}
.flow-arrow{font-size:.9rem;color:var(--muted);flex-shrink:0;}

/* REA chips */
.vis-rea{display:flex;flex-direction:column;gap:8px;padding:4px 0;}
.rea-chip{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;}
.rea-chip-icon{font-size:1.1rem;flex-shrink:0;margin-top:2px;}
.rea-chip-label{font-family:var(--font-h);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.rea-chip-text{font-size:.8rem;color:var(--text2);line-height:1.5;}
.rea-chip.c-blue{border-left:3px solid var(--blue);}
.rea-chip.c-teal{border-left:3px solid var(--teal);}
.rea-chip.c-warn{border-left:3px solid var(--warn);}
.rea-chip.c-success{border-left:3px solid var(--success);}

/* Population cards */
.vis-pop{display:flex;gap:12px;padding:8px 0;flex-wrap:wrap;}
.pop-card{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;text-align:center;}
.pop-icon{font-size:2rem;margin-bottom:8px;}
.pop-name{font-family:var(--font-h);font-size:.82rem;font-weight:700;margin-bottom:5px;}
.pop-desc{font-size:.73rem;color:var(--muted);line-height:1.5;}

/* Menu grid (slide 4) */
.vis-menu-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:4px 0;}
.mg-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
  transition:all var(--t);
}
.mg-item:hover{border-color:var(--blue);background:var(--blue-bg);transform:translateY(-2px);box-shadow:var(--sh-sm);}
.mg-item.available{cursor:pointer;}
.mg-item.locked{opacity:.45;cursor:not-allowed;}
.mg-num{font-family:var(--font-h);font-size:1.1rem;font-weight:800;color:var(--blue);}
.mg-item.locked .mg-num{color:var(--muted);}
.mg-label{font-size:.65rem;color:var(--text2);line-height:1.3;margin-top:4px;}

/* PRISMA flow */
.vis-prisma{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;padding:4px 0;}
.prisma-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px;text-align:center;min-width:90px;}
.prisma-box.hl{background:var(--blue-bg);border-color:var(--blue);}
.pb-n{font-family:var(--font-h);font-size:1.6rem;font-weight:800;color:var(--blue);}
.pb-l{font-size:.7rem;color:var(--muted);line-height:1.3;margin-top:3px;}
.prisma-arr{font-size:.9rem;color:var(--muted);}
/* Below prisma: CWE strip */
.cwe-strip{display:flex;gap:8px;margin-top:10px;justify-content:center;flex-wrap:wrap;}
.cwe-badge{background:var(--danger);color:#fff;padding:4px 12px;border-radius:999px;font-family:var(--font-h);font-size:.73rem;font-weight:700;}

/* Comparison visual (Perry et al.) */
.vis-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0;}
.comp-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.comp-hdr{padding:8px 14px;font-family:var(--font-h);font-size:.78rem;font-weight:700;text-align:center;}
.comp-hdr.neg{background:rgba(239,68,68,.1);color:var(--danger);}
.comp-hdr.pos{background:rgba(16,185,129,.1);color:var(--success);}
.comp-row{display:flex;gap:8px;align-items:flex-start;padding:7px 12px;border-top:1px solid var(--border);font-size:.78rem;}
.comp-row .cr-icon{flex-shrink:0;font-size:.9rem;}
.comp-row .cr-text{color:var(--text2);line-height:1.4;}

/* DevSecOps pipeline */
.vis-pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 0;}
.pipe-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;border-top:2px solid var(--blue);}
.pipe-step.teal-top{border-top-color:var(--teal);}
.ps-label{font-family:var(--font-h);font-size:.75rem;font-weight:700;color:var(--blue);margin-bottom:4px;}
.pipe-step.teal-top .ps-label{color:var(--teal);}
.ps-tool{font-size:.7rem;color:var(--muted);line-height:1.4;}

/* Cost bar chart */
.vis-cost{display:flex;flex-direction:column;gap:10px;padding:8px 0;}
.cost-row{display:flex;align-items:center;gap:10px;}
.cr-phase{font-family:var(--font-h);font-size:.75rem;font-weight:600;min-width:90px;}
.cr-bar{height:24px;border-radius:4px;transition:width .5s ease;}
.cr-bar.c1{background:var(--success);width:6%;}
.cr-bar.c2{background:var(--warn);width:20%;}
.cr-bar.c3{background:linear-gradient(90deg,var(--danger),#c01);width:100%;}
.cr-val{font-family:var(--font-h);font-size:.73rem;font-weight:700;color:var(--text2);white-space:nowrap;}
.cost-note{font-size:.72rem;color:var(--muted);font-style:italic;margin-top:4px;text-align:center;}

/* Tool card (Copilot, ChatGPT, etc.) */
.vis-tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;height:100%;}
.vtc-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--border);}
.vtc-logo{font-size:1.6rem;}
.vtc-name{font-family:var(--font-h);font-size:.9rem;font-weight:700;}
.vtc-meta{font-size:.7rem;color:var(--muted);}
.vtc-risk{margin-left:auto;padding:3px 10px;border-radius:999px;font-size:.68rem;font-weight:700;font-family:var(--font-h);flex-shrink:0;}
.risk-h{background:rgba(239,68,68,.12);color:var(--danger);}
.risk-m{background:rgba(245,158,11,.12);color:var(--warn);}
.risk-l{background:rgba(16,185,129,.12);color:var(--success);}
.vtc-body{display:grid;grid-template-columns:1fr 1fr;padding:12px 16px;gap:12px;}
.vtc-col h4{font-size:.72rem;font-family:var(--font-h);margin-bottom:6px;font-weight:700;}
.vtc-col ul{display:flex;flex-direction:column;gap:4px;}
.vtc-col li{font-size:.72rem;color:var(--text2);padding-left:10px;position:relative;line-height:1.4;}
.vtc-col li::before{content:'·';position:absolute;left:0;color:var(--blue);}

/* 4-tool grid */
.vis-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0;}
.mini-tool{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;}
.mt-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.mt-icon{font-size:1.2rem;}
.mt-name{font-family:var(--font-h);font-size:.78rem;font-weight:700;}
.mt-tag{padding:2px 8px;border-radius:999px;font-size:.62rem;font-weight:700;font-family:var(--font-h);}
.mt-tag.green{background:rgba(16,185,129,.12);color:var(--success);}
.mt-tag.blue{background:var(--blue-bg);color:var(--blue);}
.mt-tag.purple{background:rgba(139,92,246,.12);color:#8B5CF6;}
.mt-tag.teal{background:var(--teal-bg);color:var(--teal-dk);}
.mt-list{display:flex;flex-direction:column;gap:4px;}
.mt-list li{font-size:.7rem;color:var(--muted);padding-left:10px;position:relative;line-height:1.4;}
.mt-list li::before{content:'·';position:absolute;left:0;color:var(--teal);}

/* Comparison table (slide 19) */
.vis-table{overflow-x:auto;}
.ctable{width:100%;border-collapse:collapse;font-size:.72rem;}
.ctable th{padding:7px 10px;background:var(--surface2);text-align:left;font-family:var(--font-h);font-size:.65rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);}
.ctable td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text2);}
.ctable .hl-row{background:var(--blue-bg);}
.cy{color:var(--success);font-weight:700;}
.cn{color:var(--danger);}
.cw{color:var(--warn);font-weight:700;}

/* Frameworks row */
.vis-frameworks{display:flex;gap:10px;padding:4px 0;flex-wrap:wrap;}
.fw-card{flex:1;min-width:130px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;border-top:3px solid var(--blue);}
.fw-name{font-family:var(--font-h);font-size:.8rem;font-weight:700;margin-bottom:5px;}
.fw-desc{font-size:.71rem;color:var(--muted);line-height:1.5;}

/* LLM Architecture flow */
.vis-llm-flow{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px 0;}
.llm-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;text-align:center;min-width:110px;flex-shrink:0;}
.llm-box.hl{background:var(--blue-bg);border-color:var(--blue);}
.llm-icon{font-size:1.5rem;margin-bottom:5px;}
.llm-name{font-family:var(--font-h);font-size:.78rem;font-weight:700;margin-bottom:2px;}
.llm-sub{font-size:.66rem;color:var(--muted);}
.llm-arr{font-size:1.1rem;color:var(--muted);flex-shrink:0;}

/* Callout */
.callout{border-left:3px solid;padding:10px 14px;border-radius:0 var(--r-md) var(--r-md) 0;font-size:.8rem;margin-top:8px;}
.callout-b{border-color:var(--blue);background:var(--blue-bg);}
.callout-t{border-color:var(--teal);background:var(--teal-bg);}
.callout-w{border-color:var(--warn);background:var(--warn-bg);}
.callout-r{border-color:var(--danger);background:rgba(239,68,68,.06);}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .vis-tool-grid{grid-template-columns:1fr;}
  .vis-menu-grid{grid-template-columns:repeat(4,1fr);}
  .zone-layout{grid-template-columns:1fr 180px;}
  .vis-pipeline{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  .hero-layout{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .slide-layout{grid-template-columns:1fr;}
  .zone-right{display:none;}
  .zone-btm{grid-template-columns:1fr;}
  .zone-interact{display:none;}
  .vis-flow{flex-direction:column;}
  .vis-compare{grid-template-columns:1fr;}
  .vis-pipeline{grid-template-columns:1fr;}
  .vis-menu-grid{grid-template-columns:repeat(3,1fr);}
  .cover-authors{flex-direction:column;align-items:center;}
  .menu-panel{width:100%;}
  .stats-grid{flex-direction:column;}
  .stat-div{display:none;}
  .ph-title{display:none;}
  /* S01 avatar: stack on mobile */
  .s01-layout{flex-direction:column-reverse;align-items:center;gap:16px;}
  .s01-content{align-items:center;text-align:center;}
  .s01-content .cover-badge,.s01-content .cover-num,.s01-content .cover-title,.s01-content .cover-screens,.s01-content .cover-authors{align-self:center;text-align:center;justify-content:center;}
  .s01-avatar-col{width:clamp(150px,60vw,260px);}
}