/* Base independiente para el widget de capítulo. */
.fitclass-capitulo-elementor{
  --rojo:#E32751; --rojo-hover:#C41E44; --vino:#7A1030;
  --verde:#22C55E; --negro:#000; --carbon:#0D0B0A; --tarjeta:#161412;
  --gris:#A3A3A3; --blanco:#FFF; --borde:rgba(255,255,255,.13);
  --divisor:#1C1A18; --display:'Anton',Impact,sans-serif;
  --tipo:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Playfair Display',Georgia,serif; --radio:10px; --max:1220px;
  width:100vw; max-width:none; margin-left:calc(50% - 50vw);
  color:var(--blanco); background:var(--negro); font-family:var(--tipo);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.elementor-widget-fitclass_capitulo_serie,.elementor-widget-fitclass_capitulo_serie>.elementor-widget-container{margin:0!important;padding:0!important}
.fitclass-capitulo-elementor,.fitclass-capitulo-elementor *,.fitclass-capitulo-elementor *::before,.fitclass-capitulo-elementor *::after{box-sizing:border-box}
.fitclass-capitulo-elementor img{max-width:100%;display:block}
.fitclass-capitulo-elementor a{color:inherit;text-decoration:none}
.fitclass-capitulo-elementor button{font:inherit;cursor:pointer;color:inherit}
.fitclass-capitulo-elementor :focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:4px}
.fitclass-capitulo-elementor h1,.fitclass-capitulo-elementor h2,.fitclass-capitulo-elementor h3,.fitclass-capitulo-elementor p{margin:0}
.fitclass-capitulo-elementor .barra__interior{display:flex;align-items:center;gap:30px;height:74px}
.fitclass-capitulo-elementor .logo{font-family:var(--serif);font-size:1.62rem;font-weight:700;letter-spacing:-.005em}
.fitclass-capitulo-elementor .menu{display:flex;gap:26px;font-size:.95rem;font-weight:600}
.fitclass-capitulo-elementor .menu a{color:var(--gris);transition:color .15s}
.fitclass-capitulo-elementor .menu a:hover{color:var(--blanco)}
.fitclass-capitulo-elementor .barra__derecha{display:flex;align-items:center;gap:18px;font-size:.93rem;font-weight:600}
.fitclass-capitulo-elementor .iniciar{color:var(--blanco);padding:9px 16px;border:1px solid var(--borde);border-radius:999px;white-space:nowrap}
.fitclass-capitulo-elementor .iniciar:hover{background:rgba(255,255,255,.1)}
.fitclass-capitulo-elementor .boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 30px;border-radius:var(--radio);border:1.5px solid transparent;font-weight:700;font-size:1rem;transition:background .16s ease,border-color .16s ease}
.fitclass-capitulo-elementor .boton--verde{background:var(--verde);color:#071109}
.fitclass-capitulo-elementor .boton--verde:hover{background:#19ad50}
.fitclass-capitulo-elementor .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body.sus-abierto{overflow:hidden}
@media(max-width:860px){.fitclass-capitulo-elementor .menu{display:none}}

/* Formularios Kit de los planes de la página del capítulo. */
.fitclass-capitulo-elementor .fitclass-kit-popup{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s}
.fitclass-capitulo-elementor .fitclass-kit-popup[hidden]{display:none}
.fitclass-capitulo-elementor .fitclass-kit-popup--activo{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.fitclass-capitulo-elementor .fitclass-kit-popup__velo{position:absolute;inset:0;background:rgba(0,0,0,.84);backdrop-filter:blur(5px)}
.fitclass-capitulo-elementor .fitclass-kit-popup__contenido{position:relative;z-index:1;width:min(100%,620px);max-height:90vh;overflow-y:auto;padding:32px 28px 28px;border:2px solid var(--verde);border-radius:22px;background:linear-gradient(180deg,#101712,#0a100c);color:#fff;box-shadow:0 0 34px rgba(34,197,94,.16),0 28px 80px rgba(0,0,0,.5);opacity:0;transform:translateY(34px) scale(.94);transition:opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1)}
.fitclass-capitulo-elementor .fitclass-kit-popup--activo .fitclass-kit-popup__contenido{opacity:1;transform:none}
.fitclass-capitulo-elementor .fitclass-kit-popup__cerrar{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;font-size:32px;line-height:1}
.fitclass-capitulo-elementor .fitclass-kit-popup__cerrar:hover{background:rgba(255,255,255,.09)}
.fitclass-capitulo-elementor .fitclass-kit-popup__etiqueta{margin:0 42px 12px 0;color:var(--verde);font-size:.83rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fitclass-capitulo-elementor .fitclass-kit-popup__contenido h2{margin:0 42px 8px 0!important;color:#fff!important;font-family:var(--tipo)!important;font-size:clamp(1.8rem,4vw,2.7rem)!important;font-weight:800!important;line-height:1.08!important;letter-spacing:-.03em!important}
.fitclass-capitulo-elementor .fitclass-kit-popup__subtitulo{margin:0 0 8px;color:#c9c1b7;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.fitclass-capitulo-elementor .fitclass-kit-popup__texto{margin:0 0 22px;color:#ddd5cb;line-height:1.6}
.fitclass-capitulo-elementor .fitclass-kit-popup__formulario{width:100%;padding:16px;border:1px solid rgba(34,197,94,.25);border-radius:18px;background:rgba(255,255,255,.04)}
.fitclass-capitulo-elementor .fitclass-kit-cargando{margin:0;padding:13px;text-align:center;color:#aaa39b}
.fitclass-capitulo-elementor .fitclass-kit-popup .formkit-form{max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#f5f0eb!important}
.fitclass-capitulo-elementor .fitclass-kit-popup .formkit-field input{min-height:52px!important;border-radius:10px!important;border:1px solid #5e5a56!important;background:#0d0c0b!important;color:#fff!important}
.fitclass-capitulo-elementor .fitclass-kit-popup .formkit-submit{min-height:52px!important;border-radius:10px!important;background:var(--verde)!important;color:#04140a!important;border:1px solid var(--verde)!important;font-weight:800!important}
body.fitclass-kit-abierto{overflow:hidden}
@media(max-width:600px){.fitclass-capitulo-elementor .fitclass-kit-popup{padding:14px}.fitclass-capitulo-elementor .fitclass-kit-popup__contenido{padding:28px 16px 18px;border-radius:18px}.fitclass-capitulo-elementor .fitclass-kit-popup__formulario{padding:10px}}
@media(prefers-reduced-motion:reduce){.fitclass-capitulo-elementor .fitclass-kit-popup,.fitclass-capitulo-elementor .fitclass-kit-popup__contenido{transition:none}}

/* ============================================================
   FITCLASS · PÁGINA DE SERIE
   Archivo: fitclass-assets/serie.css

   Maqueta: columna izquierda con el reproductor arriba y el
   contenido abajo; columna derecha con el panel de capítulos,
   fijo mientras se hace scroll.

   Depende de style.css SOLO para heredar los tokens del sitio
   (--rojo, --negro, --max, tipografías, .boton). No redefine
   ninguna clase existente: todo vive bajo .serie-*, .episodio
   y .sus, así que no puede romper la landing principal.
   ============================================================ */

/* Texto visible solo para lectores de pantalla. Se define aquí porque
   en estas páginas se quita el CSS del tema, que normalmente lo trae. */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ---- Rejilla general --------------------------------------
   Ya no hay min-height:100vh: la altura la define el contenido,
   que es lo que permite tener dos zonas apiladas a la izquierda. */
.serie{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(330px, 26vw, 430px);
  align-items:start;
  background:var(--negro);
  min-height:100vh;
  min-height:100svh;
}
.serie__principal{position:relative; min-width:0; display:flex; flex-direction:column}

/* ---- Barra superior ---------------------------------------- */
.barra--serie{
  position:relative; z-index:15;
  background:transparent; backdrop-filter:none; border-bottom:0;
  padding-inline:clamp(18px,2.4vw,32px);
}
.barra--serie .barra__interior{width:100%; margin:0; gap:24px}
.barra--serie .logo-img{display:block; height:clamp(24px,2.2vw,32px); width:auto}
.barra--serie .menu{margin-left:auto; margin-right:0}
.barra--serie .barra__derecha{margin-left:24px}

/* ---- Zona superior: el reproductor -------------------------
   Va a sangre por los lados: el video es el protagonista de la
   página y cualquier margen lo empequeñece. */
.serie__reproductor{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.serie__video{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Sin ID de capítulo configurado: póster + aviso, nunca un iframe roto. */
.serie__vacio{position:absolute; inset:0; display:grid; place-items:center}
.serie__vacio img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5}
.serie__vacio p{
  position:relative; z-index:2; padding:14px 20px; border-radius:10px;
  background:rgba(0,0,0,.7); border:1px solid var(--borde);
  font-size:.9rem; font-weight:600; color:var(--gris); text-align:center;
}

/* ---- Aviso de fin del capítulo -----------------------------
   Se superpone al video, centrado. Parte oculto: si el JS no
   carga, nunca llega a taparlo. */
.serie__fin{
  position:absolute; inset:0; z-index:6;
  display:grid; place-items:center; padding:20px;
  background:rgba(0,0,0,.82); backdrop-filter:blur(3px);
  animation:serie-fin-aparece .25s ease both;
}
.serie__fin[hidden]{display:none}
@keyframes serie-fin-aparece{from{opacity:0} to{opacity:1}}
.serie__fin-caja{
  position:relative; width:min(100%, 380px);
  max-height:100%; overflow-y:auto;
  padding:26px 24px 22px; border-radius:16px;
  background:#141414; border:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.serie__fin-cerrar{
  position:absolute; top:6px; right:8px;
  width:32px; height:32px; border:0; background:transparent;
  color:#B9B4AE; font-size:26px; line-height:1;
  display:grid; place-items:center; border-radius:50%;
}
.serie__fin-cerrar:hover{color:var(--blanco); background:rgba(255,255,255,.08)}
.serie__fin-titulo{
  font-family:var(--tipo); font-weight:800; letter-spacing:-.015em;
  font-size:1.2rem; line-height:1.25; color:var(--blanco);
}
.serie__fin-texto{margin-top:8px; font-size:.94rem; line-height:1.5; color:#B4AEA7}
.serie__fin-texto em{font-style:normal; color:var(--blanco); font-weight:600}
.serie__fin-boton{margin-top:18px; width:100%}
.serie__fin-distintivo{
  display:inline-block; margin-bottom:12px;
  padding:5px 13px; border-radius:999px;
  background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.35);
  font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#22C55E; line-height:1.4;
}
.serie__fin-precio{
  margin-top:10px; font-size:1.05rem; font-weight:800;
  letter-spacing:-.02em; color:var(--blanco);
}
.serie__fin-precio s{
  margin-left:8px; font-size:.88rem; font-weight:600; color:#8D8D8D;
}
.serie__fin-secundario{
  display:inline-block; margin-top:12px;
  font-size:.8rem; font-weight:600; color:#8D8D8D;
  text-decoration:none;
}
.serie__fin-secundario:hover{color:var(--blanco)}

/* En pantallas bajas el video es chico y la tarjeta no cabe. */
@media (max-height:520px){
  .serie__fin-caja{padding:18px 18px 16px}
  .serie__fin-texto{display:none}
}

/* ---- Zona que se revela al terminar el capítulo ------------
   El atributo data-oculto lo pone y lo quita serie.js. En el HTML
   la zona llega SIN ese atributo, es decir visible: si el JS falla,
   la página conserva sus precios en vez de quedarse muda. */
.serie__revelable[data-oculto="si"]{display:none}
.serie__revelable{animation:serie-revelar .4s ease both}
@keyframes serie-revelar{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}
}

/* ---- Zona inferior: contexto y llamado a la acción ---------- */
.serie__info{
  /* Ocupa todo el ancho de la columna, del borde izquierdo hasta el
     panel de capítulos. Sin tope de caja: el ancho de lectura se
     controla párrafo a párrafo más abajo, no estrechando el bloque. */
  padding:clamp(22px,2.6vw,34px) clamp(18px,2.4vw,32px) clamp(40px,5vw,64px);
  width:100%;
}
.serie__etiqueta{
  display:flex; align-items:center; gap:11px;
  font-size:.79rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rojo); margin-bottom:12px;
}
.serie__etiqueta::before{content:""; width:4px; height:17px; border-radius:2px; background:var(--rojo); flex:0 0 auto}

.serie__titulo{
  font-family:var(--display); font-weight:400; line-height:.98;
  letter-spacing:-.02em; text-transform:uppercase;
  font-size:clamp(1.9rem,3.6vw,3.1rem); margin:0;
}
.serie__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:14px; font-size:.92rem; font-weight:700; color:#CBC5BE;
}
.serie__nota{display:inline-flex; align-items:center; gap:7px; color:#F5C518}
.serie__nota svg{width:17px; height:17px; display:block}
.serie__pastilla{
  border:1px solid var(--borde); border-radius:999px;
  padding:5px 15px; font-size:.85rem; font-weight:700;
  color:#EFEBE6; background:rgba(255,255,255,.07);
}
.serie__capitulo{
  margin-top:18px; font-size:1.06rem; font-weight:700;
  line-height:1.35; color:var(--blanco); text-wrap:pretty;
}

/* Rótulo pequeño reutilizado por resumen y educador. */
.serie__rotulo{
  font-size:.72rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:#8D8D8D; margin-bottom:8px;
}

.serie__resumen{
  margin-top:22px; padding:18px 0;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.serie__resumen p:last-child{color:#B4AEA7; font-size:1rem; line-height:1.7}

.serie__educador{margin-top:22px}
.serie__educador-nombre{font-size:1.02rem; font-weight:700; color:var(--blanco); line-height:1.35}
.serie__educador-detalle{margin-top:4px; font-size:.9rem; line-height:1.55; color:#B4AEA7}

/* ---- Ancho de lectura --------------------------------------
   La caja va a todo lo ancho, pero un párrafo de 130 caracteres
   por línea es incómodo de leer: el ojo pierde el renglón al
   volver a la izquierda. Se limita solo el texto largo, en ch
   (unidad relativa al tamaño de fuente), no el contenedor. */
.serie__resumen p:last-child{max-width:88ch}
.serie__educador-detalle{max-width:80ch}
.serie__capitulo{max-width:70ch}

/* ---- Línea de contexto bajo el título ---------------------- */
.serie__intro{
  margin-top:12px; max-width:62ch;
  font-size:1.02rem; line-height:1.55; color:#DCD7D1;
}

/* ---- Qué incluye la suscripción ----------------------------
   Va antes de los planes: las tarjetas de precio nombran FitPlay,
   Audiografías, FitBooks y FitQuiz, y hay que saber qué son antes
   de ver cuánto cuestan. */
.serie__que-es{margin-top:30px}
.serie__que-titulo{
  font-family:var(--tipo); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.25; color:var(--blanco);
}
.serie__que-texto{
  margin-top:8px; max-width:70ch;
  font-size:1rem; line-height:1.6; color:#B4AEA7;
}
.serie__que-texto span{color:var(--blanco); font-weight:600}
.serie__que-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr));
  gap:clamp(14px,1.6vw,22px); margin-top:22px;
}
.que-item__icono{
  display:block; width:32px; height:32px; margin-bottom:12px; color:var(--rojo);
}
.que-item__icono svg{width:100%; height:100%; display:block}
.que-item h3{
  font-family:var(--tipo); font-weight:800; letter-spacing:-.015em;
  font-size:1rem; line-height:1.25; color:var(--blanco);
}
.que-item p{margin-top:8px; font-size:.89rem; line-height:1.55; color:#B4AEA7}

/* Para quién es: cierra el bloque de servicios antes de los precios. */
.serie__para-quien{
  margin-top:clamp(22px,2.4vw,30px); padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
}
.serie__para-quien h3{
  font-family:var(--tipo); font-weight:800; letter-spacing:-.015em;
  font-size:1.05rem; line-height:1.25; color:var(--blanco);
}
.serie__para-quien p{
  margin-top:10px; max-width:78ch;
  font-size:.98rem; line-height:1.65; color:#B4AEA7;
}

/* ---- Caja de conversión ------------------------------------ */
.serie__cta{
  margin-top:28px; padding:clamp(22px,2.4vw,30px);
  border-radius:16px; background:var(--tarjeta);
  border:1px solid var(--borde); text-align:center;
}
.serie__cta-titulo{
  font-family:var(--tipo); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.3; color:var(--blanco);
}
.serie__cta-texto{margin-top:10px; font-size:.95rem; line-height:1.6; color:#B4AEA7}
.serie__cta-boton{margin-top:18px; width:100%; max-width:340px}
.serie__cta-micro{margin-top:12px; font-size:.84rem; color:#8D8D8D}

/* CTA verde.
   OJO CONTRASTE: blanco sobre #22C55E da 2,3:1, bajo el mínimo
   accesible. Si quieres blanco Y buen contraste usa #16A34A (3,3:1)
   o #15803D (5,0:1). Aquí el texto va oscuro, que sí cumple. */
.boton--verde{background:#22C55E; color:#04140A}
.boton--verde:hover{background:#1BA851}

/* ---- Los dos planes ----------------------------------------
   Mismo formato que la sección de precios de la landing
   principal: rótulo, título, lista completa, precio y botón. */
.serie__planes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px; margin-top:26px; max-width:900px; margin-inline:auto;
  text-align:left; align-items:start;
}
.plan-serie{
  display:flex; flex-direction:column; gap:18px;
  padding:30px 26px; border-radius:16px;
  background:var(--tarjeta); border:1px solid var(--borde);
  border-top:4px solid rgba(255,255,255,.5);
}
.plan-serie--destacado{
  border-top-color:#22C55E;
  box-shadow:0 30px 70px -34px rgba(34,197,94,.5);
}
.plan-serie__rotulo{
  font-size:.76rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.plan-serie--destacado .plan-serie__rotulo{color:#22C55E}
.plan-serie__titulo{
  font-family:var(--tipo); font-weight:800;
  font-size:1.4rem; letter-spacing:-.03em; line-height:1.2;
}
.plan-serie__que{
  font-size:.84rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris);
}
.plan-serie__lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
  font-size:.95rem; line-height:1.5;
}
.plan-serie__lista li{padding-left:27px; position:relative; color:var(--gris)}
.plan-serie__lista li::before{content:"✔"; position:absolute; left:0; font-weight:800}
.plan-serie__lista li strong{color:var(--blanco); font-weight:700}
.plan-serie__lista li::before{color:var(--blanco)}
.plan-serie--destacado .plan-serie__lista li::before{color:#22C55E}
.plan-serie__precio{
  font-size:2.4rem; font-weight:900; letter-spacing:-.035em; line-height:1;
  color:var(--blanco);
}
.plan-serie__precio small{
  display:block; margin-top:8px;
  font-size:.9rem; font-weight:600; letter-spacing:0; color:var(--gris);
}
.plan-serie--destacado .plan-serie__precio small{color:#22C55E; font-weight:800}
/* Precio anterior tachado. Solo puede usarse con un precio que
   estuvo realmente vigente: tachar uno inventado es publicidad
   engañosa. */
.plan-serie__antes{
  display:block; margin-bottom:4px;
  font-size:1.15rem; font-weight:700; letter-spacing:-.02em;
  color:#8D8D8D; text-decoration-thickness:2px;
}
/* La renovación va en la tarjeta, no en la letra chica: un precio
   promocional sin decir a cuánto renueva genera reclamos. */
.plan-serie__renovacion{
  margin-top:-6px; font-size:.82rem; line-height:1.45; color:#B4AEA7;
}
/* margin-top:auto alinea los dos botones aunque las tarjetas
   tengan distinta altura. */
.plan-serie__boton{
  margin-top:auto; width:100%;
  border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.05); color:var(--blanco);
}
.plan-serie__boton:hover{background:rgba(255,255,255,.14); border-color:#fff}
.plan-serie--destacado .plan-serie__boton{background:#22C55E; border-color:#22C55E; color:#04140A}
.plan-serie--destacado .plan-serie__boton:hover{background:#1BA851; border-color:#1BA851}

/* ---- Preguntas frecuentes ----------------------------------
   <details> nativo: sin JavaScript, navegable con teclado y con
   el contenido indexable aunque esté plegado. */
.serie__faq{
  /* Mismo ancho y centrado que .serie__planes, para que ambos
     bloques compartan el eje vertical. Si cambias el 900px de
     arriba, cambia también este. */
  margin:26px auto 0; max-width:900px;
  display:flex; flex-direction:column; gap:8px;
}
.serie__faq details{
  border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--tarjeta); overflow:hidden;
}
.serie__faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:16px 52px 16px 18px;
  font-size:.98rem; font-weight:600; color:var(--blanco);
  transition:background .15s ease;
}
.serie__faq summary::-webkit-details-marker{display:none}
.serie__faq summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:1.6rem; font-weight:300; line-height:1; color:var(--rojo);
}
.serie__faq details[open] summary::after{content:"−"}
.serie__faq summary:hover{background:rgba(255,255,255,.05)}
.serie__faq p{padding:0 18px 18px; color:#B4AEA7; font-size:.94rem; line-height:1.6}

/* ---- Acciones rápidas -------------------------------------- */
.serie__acciones{
  margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,36px);
}
.serie__rapida{
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:0; padding:4px 2px;
  font-size:.88rem; font-weight:600; color:#D6D1CB;
  transition:color .15s ease;
}
.serie__rapida:hover{color:var(--blanco)}
.serie__rapida svg{width:21px; height:21px; display:block}

/* ---- Panel de episodios ----------------------------------- */
.serie-panel{
  position:sticky; top:0; align-self:start;
  height:100vh; height:100svh;
  display:flex; flex-direction:column;
  background:#080807; border-left:1px solid var(--borde);
}
.serie-panel__titulo{
  flex:0 0 auto; margin:0;
  padding:clamp(18px,2vw,26px) clamp(16px,1.6vw,22px) 14px;
  font-family:var(--tipo); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.1rem,1.5vw,1.35rem);
}
.serie-panel__titulo{
  /* El contador se alinea a la derecha del rótulo. align-items:baseline
     hace que ambos textos compartan la misma línea base pese al salto
     de tamaño entre uno y otro. */
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.serie-panel__cuenta{
  font-size:.82rem; font-weight:600; letter-spacing:0;
  color:#8D8D8D; white-space:nowrap; flex:0 0 auto;
}
/* Botón "Siguiente capítulo": abre el mismo aviso de suscripción
   que los capítulos con candado. flex:0 0 auto lo mantiene fijo
   bajo el encabezado mientras la lista de abajo hace su scroll. */
.serie-panel__siguiente{
  flex:0 0 auto;
  margin:0 clamp(10px,1vw,14px) 12px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 16px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--borde);
  font-size:.92rem; font-weight:700; color:var(--blanco);
  transition:background .16s ease, border-color .16s ease;
}
.serie-panel__siguiente:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3)}
.serie-panel__siguiente svg{width:16px; height:16px; display:block; flex:0 0 auto}

.serie-panel__lista{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:0 clamp(10px,1vw,14px) 22px;
  display:flex; flex-direction:column; gap:4px;
  scrollbar-width:thin;
  scrollbar-color:#39352F transparent;
}
.serie-panel__lista::-webkit-scrollbar{width:9px}
.serie-panel__lista::-webkit-scrollbar-track{background:transparent}
.serie-panel__lista::-webkit-scrollbar-thumb{background:#39352F; border-radius:9px; border:3px solid #080807}
.serie-panel__lista::-webkit-scrollbar-thumb:hover{background:#4D4842}

/* ---- Cada episodio ---------------------------------------- */
.episodio{
  display:grid; grid-template-columns:26px minmax(0,118px) minmax(0,1fr);
  align-items:start; gap:12px;
  padding:14px 9px; border-radius:12px;
  transition:background .16s ease;
}
.episodio:hover{background:rgba(255,255,255,.06)}
.episodio__num{
  font-family:var(--tipo); font-weight:800; font-size:1.3rem; line-height:1.25;
  color:#4F4A44; text-align:center;
}
.episodio--activo .episodio__num{color:var(--rojo)}

.episodio__miniatura{
  position:relative; display:block; aspect-ratio:16/9;
  border-radius:8px; overflow:hidden;
  background:linear-gradient(150deg,#1a1614,#0d0b0a);
  border:1px solid rgba(255,255,255,.09);
}
.episodio__miniatura img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.episodio__icono{
  position:absolute; right:6px; bottom:6px; z-index:2;
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.4);
  display:grid; place-items:center; color:#fff;
}
.episodio__icono svg{width:12px; height:12px; display:block}

.episodio__titulo{
  /* Sin recorte: los títulos reales son largos y deben leerse
     completos. Se ajustan en varias líneas si hace falta. */
  display:block; font-weight:700; font-size:.97rem; line-height:1.35;
  color:var(--blanco); text-wrap:pretty;
}
.episodio__desc{
  display:block; margin-top:7px;
  font-size:.87rem; line-height:1.58; color:#B4AEA7;   /* contraste 9:1 sobre el panel */
}
/* Los capítulos bloqueados se atenúan SOLO en la miniatura. El texto
   mantiene su contraste: el candado ya comunica el estado, oscurecer
   además la letra solo la haría difícil de leer. */
.episodio--bloqueado .episodio__miniatura{opacity:.55}
.episodio--bloqueado .episodio__num{color:#4F4A44}
.episodio--bloqueado .episodio__titulo{color:#EDE9E4}

/* Al pasar el mouse (o al llegar con el teclado) el capítulo bloqueado
   REFUERZA su estado: velo con candado grande sobre la miniatura y el
   aviso bajo el texto. Antes el hover hacía lo contrario. */
.episodio__candado{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  background:rgba(0,0,0,.62);
  opacity:0; transition:opacity .18s ease;
}
.episodio__candado svg{width:26px; height:26px; color:#fff; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9)); transition:transform .18s ease}
.episodio--bloqueado:hover .episodio__candado,
.episodio--bloqueado:focus-visible .episodio__candado{opacity:1}
.episodio--bloqueado:hover .episodio__candado svg{transform:scale(1.08)}
/* El candado grande reemplaza al chico de la esquina mientras dura el hover */
.episodio--bloqueado:hover .episodio__icono,
.episodio--bloqueado:focus-visible .episodio__icono{opacity:0}
.episodio__icono{transition:opacity .18s ease}


/* El capítulo libre sí se ilumina al pasar por encima: el contraste
   entre ambos comportamientos es justamente lo que se quiere. */
.episodio--activo:hover .episodio__miniatura{transform:scale(1.02)}
.episodio__miniatura{transition:transform .18s ease}

/* ============================================================
   AVISO DE SUSCRIPCIÓN (capítulo bloqueado)
   Vive fuera de .serie porque cubre toda la pantalla: el
   panel de capítulos tiene scroll propio y una tarjeta dentro de
   él quedaría descolocada.
   ============================================================ */
.sus{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px}
.sus[hidden]{display:none}
.sus__velo{position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(4px)}
.sus__caja{
  position:relative; width:min(100%, 360px);
  max-height:calc(100vh - 40px); overflow-y:auto;
  padding:30px 26px 24px; border-radius:18px;
  background:#141414; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  color:var(--blanco); text-align:center;
  animation:sus-aparece .22s ease both;
}
@keyframes sus-aparece{
  from{opacity:0; transform:translateY(14px) scale(.96)}
  to{opacity:1; transform:none}
}
.sus__cerrar{
  position:absolute; top:8px; right:10px;
  width:34px; height:34px; margin:0!important; padding:0!important; border:0;
  background:var(--rojo); color:transparent!important; font-size:0!important; line-height:0!important;
  display:block!important; border-radius:50%; appearance:none;
}
.sus__cerrar::before,.sus__cerrar::after{
  content:""; position:absolute; top:50%; left:50%;
  width:13px; height:2px; border-radius:2px; background:#fff;
  transform-origin:center;
}
.sus__cerrar::before{transform:translate(-50%,-50%) rotate(45deg)}
.sus__cerrar::after{transform:translate(-50%,-50%) rotate(-45deg)}
.sus__cerrar:hover{background:var(--rojo-hover)}
.sus__icono{
  width:52px; height:52px; border-radius:50%;
  background:rgba(227,39,81,.16); color:var(--rojo);
  display:grid; place-items:center; margin:0 auto 15px;
}
.sus__icono svg{width:23px; height:23px; display:block}
.sus__capitulo{font-size:.86rem; color:#8D8D8D; margin-bottom:7px}
.sus__capitulo:empty{display:none}
.sus__titulo{
  font-family:var(--tipo); font-weight:800; letter-spacing:-.015em;
  font-size:1.22rem; line-height:1.3; margin-bottom:6px;
}
.sus__texto{font-size:.94rem; color:#B9B4AE; line-height:1.5; margin-bottom:18px}
.sus__texto span{color:var(--blanco)}
.sus__lista{
  list-style:none; margin:0 0 18px; padding:16px 0 18px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; gap:10px;
  font-size:.92rem; color:#B9B4AE; text-align:left;
}
.sus__lista li{padding-left:26px; position:relative}
.sus__lista li::before{content:"✔"; position:absolute; left:0; color:#22C55E; font-weight:800}
.sus__boton{width:100%}
.sus__micro{margin-top:12px; font-size:.84rem; color:#8D8D8D}
/* Los dos planes dentro del aviso. */
.sus__planes{display:flex; flex-direction:column; gap:10px}
.sus__plan{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 16px; border-radius:12px; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid var(--borde);
  transition:background .16s ease, border-color .16s ease;
}
.sus__plan:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.32)}
.sus__plan--destacado{background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.45)}
.sus__plan--destacado:hover{background:rgba(34,197,94,.16); border-color:#22C55E}
.sus__plan-rotulo{font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gris)}
.sus__plan--destacado .sus__plan-rotulo{color:#22C55E}
.sus__plan-precio{font-size:1.25rem; font-weight:900; letter-spacing:-.02em; color:var(--blanco)}
.sus__plan-detalle{font-size:.8rem; color:#B4AEA7}
.sus__plan-oferta{
  margin-top:5px; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; line-height:1.4; color:#22C55E;
}
.sus__plan-precio s{
  display:inline-block; margin-right:7px;
  font-size:.92rem; font-weight:700; color:#8D8D8D;
}

/* Bloquea el scroll del fondo mientras el aviso está abierto. */
body.sus-abierto{overflow:hidden}

@media (max-width:420px){
  .sus{padding:14px}
  .sus__caja{padding:26px 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  .sus__caja{animation:none}
  .serie__fin{animation:none}
  .serie__revelable{animation:none}
}

/* ---- Responsive -------------------------------------------
   El panel deja de ser columna y pasa a ir debajo del contenido.
   El punto de corte sigue en 1100px, igual que antes. */
@media (max-width:1100px){
  .serie{grid-template-columns:1fr; min-height:0}
  .serie-panel{
    position:static; height:auto;
    border-left:0; border-top:1px solid var(--borde);
  }
  .serie-panel__lista{overflow:visible; padding-inline:clamp(16px,3vw,32px)}
  .serie-panel__titulo{padding-inline:clamp(16px,3vw,32px)}
  .episodio{grid-template-columns:26px minmax(0,150px) minmax(0,1fr)}
}
@media (max-width:640px){
  .fitclass-capitulo-elementor{width:100%;max-width:100%;margin-left:0;font-size:15px}
  .serie,.serie__principal,.serie__info,.serie-panel{width:100%;max-width:100%;min-width:0}
  .barra--serie{padding-inline:14px}
  .barra--serie .barra__interior{height:60px;gap:14px}
  .barra--serie .logo-img{height:25px}
  .barra--serie .barra__derecha{margin-left:auto}
  .serie__reproductor{min-height:200px;aspect-ratio:16/9}
  .serie__info{padding:22px 16px 40px}
  .serie__etiqueta{font-size:.69rem;letter-spacing:.11em}
  .serie__titulo{font-size:clamp(2rem,12vw,3rem)}
  .serie__intro{font-size:.94rem;line-height:1.5}
  .serie__meta{gap:9px;font-size:.84rem}
  .serie__capitulo{font-size:1rem}
  .serie__resumen{margin-top:18px;padding:15px 0}
  .serie__resumen p:last-child{font-size:.94rem;line-height:1.58}
  .serie__que-grid{grid-template-columns:1fr;gap:18px}
  .que-item{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:start}
  .que-item__icono{grid-row:1/3;margin:0}
  .que-item p{margin-top:4px}
  .serie__cta{margin-top:22px;padding:20px 14px}
  .serie__cta-boton{max-width:none}
  .serie__planes{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:20px}
  .plan-serie{padding:22px 18px;gap:14px}
  .plan-serie__precio{font-size:2rem}
  .serie__faq summary{padding:14px 44px 14px 14px;font-size:.92rem}
  .serie-panel__titulo{padding:18px 16px 12px}
  .serie-panel__siguiente{margin:0 16px 12px;min-height:48px}
  .serie-panel__lista{
    display:flex;flex-direction:column;
    gap:8px;overflow:visible;padding:0 16px 20px;
  }
  .episodio{width:100%;min-width:0;grid-template-columns:20px 92px minmax(0,1fr);gap:9px;padding:12px 10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
  .episodio__num{font-size:1.05rem}
  .episodio__titulo{font-size:.88rem;line-height:1.28}
  .episodio__desc{display:-webkit-box;margin-top:5px;font-size:.78rem;line-height:1.38;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .serie__fin{position:fixed;z-index:100001;padding:14px}
  .serie__fin-caja{width:100%;max-width:390px;max-height:calc(100dvh - 28px)}
  .sus{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
  .sus__caja{width:100%;max-height:calc(100dvh - 20px);padding:25px 16px 18px;border-radius:16px}
  .sus__planes{gap:8px}
  .sus__plan{padding:12px 13px}
  .fitclass-capitulo-elementor .fitclass-kit-popup{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
  .fitclass-capitulo-elementor .fitclass-kit-popup__contenido{width:100%;max-height:calc(100dvh - 20px);padding:26px 14px 16px;border-radius:16px}
  .fitclass-capitulo-elementor .fitclass-kit-popup__contenido h2{font-size:1.65rem!important}
  .fitclass-capitulo-elementor .fitclass-kit-popup__formulario{padding:8px}
  .fitclass-capitulo-elementor .fitclass-kit-popup .formkit-fields{display:flex!important;flex-direction:column!important;gap:10px!important}
  .fitclass-capitulo-elementor .fitclass-kit-popup .formkit-field,.fitclass-capitulo-elementor .fitclass-kit-popup .formkit-submit{width:100%!important}
}

/* ---- Preferencia de movimiento reducido ------------------- */
@media (prefers-reduced-motion:reduce){
  .sus__caja{animation:none}
  .serie__fin{animation:none}
  .serie__revelable{animation:none}
}