/* =====================================================================
   10 · CAPA FORMACIÓN Y VENTAS (masterclass / lanzamiento)
   Barra mínima sin escape · vídeo · espectadores discretos e intermitentes
   · capítulos y progreso · regalos con candado por minuto · llamada que se
   monta al desbloquear · cuenta atrás · overlay de salida · DEMO_MODE
   ===================================================================== */

/* ---------- Barra mínima: solo isotipo → home (sin enlaces de escape) ---------- */
.mc-top{ position:absolute; inset:0 0 auto 0; z-index:20; padding:22px 0; }
.mc-top .contenedor{ display:flex; align-items:center; justify-content:space-between; }
.mc-top .cab-logo img, .mc-top .cab-logo svg{ height:var(--logo-h); }
.mc-top .etiqueta-directo{ display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-acento-2); }
@media (max-width:700px){ .mc-top .cab-logo img, .mc-top .cab-logo svg{ height:var(--logo-h-movil); } }

/* ---------- Hero de masterclass ---------- */
.mc-hero{ position:relative; padding:calc(var(--cab-h) + 60px) 0 70px; text-align:center; overflow:hidden; }
.mc-hero::before{ content:""; position:absolute; inset:-30% -10% auto; height:90%; background:radial-gradient(closest-side, color-mix(in srgb, var(--c-acento) 35%, transparent), transparent); pointer-events:none; }
.mc-hero h1{ position:relative; max-width:16ch; margin:0 auto; font-weight:800; letter-spacing:-.02em; }
.mc-hero h1 em{ font-style:normal; color:var(--c-acento-2); }
.mc-hero .lead{ position:relative; margin:22px auto 0; text-align:center; }
.mc-meta{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:28px; font-size:.85rem; color:var(--c-texto-suave); }
.mc-meta span{ display:inline-flex; align-items:center; gap:8px; }
.mc-meta svg{ width:16px; height:16px; color:var(--c-acento-2); }

/* ---------- Espectadores: pequeño, discreto, intermitente (solo opacidad) ---------- */
.viendo{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 9px; padding:0;
  opacity:0; transition:opacity .8s var(--ease);   /* aparece/desaparece sin mover el reproductor */
}
.viendo.is-visible{ opacity:1; }
.viendo-punto{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--c-whatsapp); flex-shrink:0; opacity:.9; }
.viendo-punto::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--c-whatsapp); animation:viendoLatido 2.4s ease-out infinite; }
@keyframes viendoLatido{ 0%{ transform:scale(1); opacity:.65; } 70%,100%{ transform:scale(2.8); opacity:0; } }
.viendo span{ font-size:11.5px; font-weight:600; color:var(--c-acento-2); opacity:.8; letter-spacing:.02em; }
.viendo b{ color:var(--c-texto); font-weight:800; font-variant-numeric:tabular-nums; transition:opacity .25s ease; }
.viendo b.cambia{ opacity:0; }
@media (max-width:600px){ .viendo{ gap:6px; margin-bottom:8px; } .viendo span{ font-size:10.5px; } .viendo-punto{ width:7px; height:7px; } }

/* ---------- Vídeo ---------- */
.video-seccion{ padding-bottom:var(--sec-y); }
.video-shell{ max-width:980px; margin-inline:auto; padding-inline:var(--gutter); }
.video{ position:relative; aspect-ratio:16/9; border-radius:var(--radio); overflow:hidden; background:#000; box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px var(--c-linea); }
.video iframe, .video video, .video .poster{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video .poster{ display:grid; place-items:center; background:linear-gradient(135deg, var(--c-oscuro-alt), var(--c-oscuro)); cursor:pointer; }
.video .poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.video .play{ position:relative; width:88px; height:88px; border-radius:50%; border:0; background:var(--c-acento); display:grid; place-items:center; box-shadow:0 0 0 12px color-mix(in srgb, var(--c-acento) 25%, transparent); transition:transform var(--t-rapida) var(--ease); }
.video .play:hover{ transform:scale(1.06); }
.video .play svg{ width:30px; height:30px; fill:#fff; margin-left:5px; }

/* Capítulo actual + barra de progreso (gancho de retención) */
.video-estado{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; font-size:.85rem; color:var(--c-texto-suave); }
.video-estado b{ color:var(--c-texto); }
.progreso{ height:4px; margin-top:10px; border-radius:4px; background:var(--c-linea); overflow:hidden; }
.progreso i{ display:block; height:100%; width:var(--p, 0%); background:linear-gradient(90deg, var(--c-acento), var(--c-acento-2)); transition:width .6s var(--ease); }

/* ---------- Capítulos / módulos ---------- */
.capitulos{ list-style:none; margin:40px auto 0; padding:0; max-width:980px; display:grid; gap:8px; }
.capitulo{ display:grid; grid-template-columns:56px 1fr auto; gap:16px; align-items:center; padding:16px 20px; border:1px solid var(--c-linea); border-radius:var(--radio); transition:all var(--t-media) var(--ease); }
.capitulo .min{ font-variant-numeric:tabular-nums; font-size:.8rem; color:var(--c-texto-suave); }
.capitulo .titulo{ font-weight:600; }
.capitulo .estado{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-texto-suave); }
.capitulo.is-futuro{ opacity:.45; }
.capitulo.is-actual{ border-color:var(--c-acento); background:color-mix(in srgb, var(--c-acento) 10%, transparent); }
.capitulo.is-actual .estado{ color:var(--c-acento-2); }
.capitulo.is-visto .estado{ color:var(--c-whatsapp); }
@media (max-width:600px){ .capitulo{ grid-template-columns:44px 1fr; } .capitulo .estado{ grid-column:2; } }

/* ---------- Regalos con candado (gating por minuto) ---------- */
.regalos{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(16px, 2.4vw, 28px); max-width:980px; margin-inline:auto; }
@media (max-width:760px){ .regalos{ grid-template-columns:1fr; } }
.regalo{ position:relative; overflow:hidden; padding:clamp(24px, 3vw, 36px); border-radius:var(--radio); border:1px dashed var(--c-linea-acento); background:var(--c-fondo-alt); min-height:230px; display:flex; flex-direction:column; gap:12px; }
.regalo h3{ font-family:var(--f-texto); font-weight:800; font-size:1.25rem; }
.regalo .contenido{ filter:blur(7px); opacity:.55; user-select:none; transition:filter .9s var(--ease), opacity .9s var(--ease); }
.regalo .candado{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; padding:20px; background:color-mix(in srgb, var(--c-oscuro) 55%, transparent); transition:opacity .6s var(--ease), visibility 0s linear .6s; }
.regalo .candado svg{ width:34px; height:34px; color:var(--c-acento-2); }
.regalo .candado b{ font-size:.95rem; }
.regalo .candado small{ font-size:.8rem; color:var(--c-texto-suave); }
.regalo.is-abierto{ border-style:solid; border-color:var(--c-acento); animation:regaloAbre .9s var(--ease-salida); }
.regalo.is-abierto .contenido{ filter:none; opacity:1; user-select:auto; }
.regalo.is-abierto .candado{ opacity:0; visibility:hidden; }
@keyframes regaloAbre{ 0%{ transform:scale(.97); } 50%{ transform:scale(1.02); box-shadow:0 0 0 10px color-mix(in srgb, var(--c-acento) 25%, transparent); } 100%{ transform:none; } }

/* ---------- Llamada (se monta al desbloquear) ---------- */
.llamada{ max-width:980px; margin:40px auto 0; padding:clamp(28px, 4vw, 48px); border-radius:var(--radio); background:linear-gradient(135deg, var(--c-acento), var(--c-acento-hover)); color:#fff; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.llamada[hidden]{ display:none; }
.llamada h3{ font-family:var(--f-texto); font-weight:800; }
.llamada p{ margin:6px 0 0; opacity:.9; }
.js .llamada.is-nueva{ animation:regaloAbre .9s var(--ease-salida); }
@media (max-width:700px){ .llamada{ grid-template-columns:1fr; } }

/* ---------- Cuenta atrás ---------- */
.cuenta{ display:flex; justify-content:center; gap:clamp(10px, 2vw, 18px); }
.cuenta div{ min-width:clamp(64px, 12vw, 96px); padding:14px 8px; border-radius:var(--radio); background:var(--c-fondo-alt); border:1px solid var(--c-linea); text-align:center; }
.cuenta b{ display:block; font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.cuenta small{ display:block; margin-top:6px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-texto-suave); }
.cuenta-aviso{ margin-top:16px; text-align:center; font-size:.85rem; color:var(--c-texto-suave); }

/* ---------- Directores: collage en escritorio, apilado en móvil (sin solapes) ---------- */
.directores{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 3vw, 32px); max-width:860px; margin-inline:auto; }
.directores .persona{ position:relative; }
.directores .persona:nth-child(2){ transform:translateY(60px); }
.directores .persona img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; border-radius:var(--radio); }
.directores .persona figcaption{ margin-top:14px; font-weight:700; }
.directores .persona figcaption span{ display:block; font-weight:400; font-size:.88rem; color:var(--c-texto-suave); }
@media (max-width:700px){ .directores{ grid-template-columns:1fr; gap:36px; } .directores .persona:nth-child(2){ transform:none; } }

/* ---------- Overlay de salida ---------- */
.salida{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s; }
.salida.is-abierta{ opacity:1; visibility:visible; transition-delay:0s; }
.salida-caja{ position:relative; max-width:460px; padding:clamp(28px, 4vw, 44px); border-radius:var(--radio); background:var(--c-fondo-alt); border:1px solid var(--c-linea-acento); text-align:center; }
.salida-caja h3{ font-family:var(--f-texto); font-weight:800; font-size:1.5rem; margin-bottom:10px; }
.salida-caja .btns{ justify-content:center; margin-top:22px; }
.salida-cerrar{ position:absolute; top:10px; right:10px; padding:8px 12px; border:0; background:none; font-size:.8rem; opacity:.7; }

/* ---------- DEMO_MODE: panel de prueba (se QUITA antes de publicar) ---------- */
.demo{ position:fixed; z-index:90; left:12px; top:50%; transform:translateY(-50%); display:grid; gap:6px; padding:12px; border-radius:10px; background:#FFE066; color:#222; font:600 12px/1.3 system-ui, sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.demo button{ padding:6px 10px; border:1px solid #222; border-radius:6px; background:#fff; font:inherit; }
.demo output{ text-align:center; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .viendo-punto::after{ animation:none; }
  .regalo.is-abierto, .js .llamada.is-nueva{ animation:none; }
}