/* ---------- Botones (blanco sólido, fantasma, superficie, peligro — nunca dorado) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border-radius:var(--radius-md);border:1px solid transparent;
  font-weight:var(--p-fuerte);font-size:var(--text-base);line-height:1.2;text-decoration:none;letter-spacing:0;
  transition:background var(--dur-rapida) var(--ease),border-color var(--dur-rapida) var(--ease),color var(--dur-rapida) var(--ease),transform 80ms var(--ease);
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--action);color:var(--action-text)}
.btn-primary:hover{background:var(--action-hover)}
.btn-primary:active{background:var(--action-active)}
.btn-outline,.btn-onnavy{background:transparent;color:var(--text-body);border-color:var(--border-strong)}
.btn-outline:hover,.btn-onnavy:hover{border-color:rgba(255,255,255,.7);color:var(--text-heading)}
.tema-claro .btn-outline:hover{border-color:var(--navy-600)}
.btn-terciario{background:var(--surface-sunken);color:var(--text-body);border-color:var(--border-subtle)}
.btn-terciario:hover{background:var(--navy-700);color:var(--text-heading)}
.btn-danger{background:transparent;color:var(--danger-600);border-color:rgba(227,155,135,.4)}
.btn-danger:hover{border-color:var(--danger-600)}
.tema-claro .btn-danger{border-color:var(--border-strong)}
.btn-block{width:100%}
.btn-sm{min-height:44px;padding:8px 16px;font-size:var(--text-sm)}
.btn svg{width:18px;height:18px;flex-shrink:0}
.badge svg{width:13px;height:13px;flex-shrink:0}
.linklike{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;font-size:var(--text-sm);font-weight:var(--p-fuerte);min-height:44px;display:inline-flex;align-items:center}
.linklike:hover{color:var(--text-heading)}

/* ---------- Insignias y chips ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:var(--p-fuerte);
  padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap;letter-spacing:.02em;line-height:1.2}
/* "Vista" es avance, no aprobación: va en dorado como el resto del progreso */
.badge-visto{background:rgba(201,172,117,.16);color:var(--oro-300)}
.badge-pendiente{background:var(--warning-100);color:var(--warning-600)}
.badge-rechazado{background:var(--danger-100);color:var(--danger-600)}
.badge-publicado{background:var(--success-100);color:var(--success-600)}
.badge-muted{background:rgba(255,255,255,.08);color:var(--text-muted)}
.badge-navy{background:rgba(95,163,214,.14);color:var(--azul-300)}
.badge-rol{background:var(--navy-800);color:#fff}
.tema-claro .badge-muted{background:var(--gray-100);color:var(--gray-700)}
.tema-claro .badge-navy{background:var(--navy-50);color:var(--navy-700)}
.chip-muestra{background:var(--warning-100);color:var(--warning-600);font-size:var(--text-xs);
  font-weight:var(--p-fuerte);padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap}

/* ---------- Tarjetas: superficie elevada + hairline, sin sombra ---------- */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.filete{border-top:1px solid var(--brass-500)} /* filete dorado decorativo */

/* ---------- Formularios ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:var(--text-sm);font-weight:var(--p-fuerte);color:var(--gray-700);margin-bottom:6px}
/* Nota explicativa de un campo. A diferencia de .field-error no señala un
   problema: dice por que un campo no se puede editar. */
.field-nota{margin-top:6px;font-size:var(--text-xs);color:var(--text-muted)}
.input[readonly]{opacity:.72;cursor:not-allowed}
.input,select.input,textarea.input{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border-strong);
  border-radius:var(--radius-md);font:inherit;color:var(--text-body);background:var(--input-bg);
  transition:border-color var(--dur-rapida) var(--ease);
}
.input::placeholder{color:var(--text-faint)}
.input:hover{border-color:rgba(255,255,255,.32)}
.tema-claro .input:hover{border-color:var(--gray-400)}
textarea.input{min-height:96px;resize:vertical}
.input:focus-visible{box-shadow:var(--focus-ring);border-color:var(--navy-500)}
.radio-row{display:flex;gap:16px;flex-wrap:wrap}
.radio-row label{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-base);
  font-weight:400;color:var(--text-body);min-height:44px;cursor:pointer}
.radio-row input{width:18px;height:18px;accent-color:var(--navy-500)}
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-md);
  padding:12px 14px;font-size:var(--text-sm);margin-bottom:14px;line-height:1.45;border:1px solid transparent}
.alert-error{background:var(--danger-100);color:var(--danger-600);border-color:rgba(227,155,135,.3)}
.alert-aviso{background:var(--warning-100);color:var(--warning-600);border-color:rgba(232,197,122,.3)}
.alert-exito{background:var(--success-100);color:var(--success-600);border-color:rgba(127,209,168,.3)}
.tema-claro .alert{border-color:transparent}
.alert a{color:inherit;font-weight:700}

/* ---------- Pestañas ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle)}
.tab{flex:1;min-height:44px;padding:10px 8px;font-weight:var(--p-fuerte);font-size:var(--text-base);
  color:var(--text-muted);border-bottom:2px solid transparent;text-align:center;margin-bottom:-1px;
  transition:color var(--dur-rapida) var(--ease)}
.tab:hover{color:var(--text-heading)}
.tab[aria-selected="true"]{color:var(--text-heading);border-bottom-color:var(--brass-500)} /* subrayado dorado del activo */
.tabs-admin{overflow-x:auto}
.tabs-admin .tab{flex:0 0 auto;padding:10px 16px;white-space:nowrap}

/* ---------- Barras de avance: dorado, pista translúcida ---------- */
.pbar{height:6px;border-radius:var(--radius-pill);background:var(--gray-200);overflow:hidden}
.pbar>i{display:block;height:100%;background:var(--avance);border-radius:var(--radius-pill)}
.pbar-thin{height:3px}

/* ---------- Estrellas ---------- */
.stars{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
.stars svg{width:20px;height:20px}
.star-full{fill:var(--star)} .star-empty{fill:var(--star-empty)}
.stars-num{font-weight:var(--p-fuerte);color:var(--text-heading);margin-left:6px;font-variant-numeric:tabular-nums}
.stars-count{color:var(--text-muted);font-size:var(--text-sm);margin-left:4px}
.stars-edit{display:flex;gap:2px}
.stars-edit button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.stars-edit svg{width:32px;height:32px}

/* ---------- Avatar ---------- */
.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy-700);color:var(--text-heading);
  border:1px solid var(--border-on-inverse);display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);font-weight:700;flex-shrink:0}
.tema-claro .avatar{background:var(--navy-600);color:#fff;border:0}
.avatar-gray{background:var(--gray-400);color:#fff}

/* ---------- Marcadores de fotografía pendiente ---------- */
.ph{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--text-faint);
  background:var(--surface-sunken);border:1px dashed var(--border-strong)}
.ph svg{width:26px;height:26px;opacity:.7}
.ph-cap{position:absolute;left:8px;bottom:8px;background:rgba(8,13,21,.72);color:var(--text-muted);
  font-size:var(--text-xs);font-weight:var(--p-fuerte);padding:3px 9px;border-radius:var(--radius-pill)}
.tema-claro .ph-cap{background:rgba(255,255,255,.9);color:var(--gray-700)}
.ph-media{aspect-ratio:16/9;width:100%;border-radius:var(--radius-md)}
.ph-thumb{aspect-ratio:16/9;width:104px;border-radius:var(--radius-sm);flex-shrink:0}
.ph-thumb .ph-cap{display:none}


/* ---------- Barra superior (Fase 1: oscura y en flujo; sticky en Fase 2) ---------- */
.topnav{position:sticky;top:0;z-index:900;color:#fff;margin-bottom:calc(-1 * var(--nav-h));
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--dur-media) var(--ease),border-color var(--dur-media) var(--ease)}
/* Sólida a partir de 40 px de scroll. Respaldo opaco para navegadores sin backdrop-filter. */
.topnav.solida{background:rgba(14,21,32,.97);border-bottom-color:var(--hairline)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .topnav.solida{background:rgba(14,21,32,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  /* backdrop-filter crea bloque contenedor para position:fixed; con el panel móvil abierto se retira */
  .topnav.abierta{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ink-950)}
}
.topnav-in{display:flex;align-items:center;gap:24px;min-height:var(--nav-h)}
/* Lockup de respaldo: el isotipo de Grupo Bafar avala el nombre del programa.
   Van separados por un filete para que no se lean como una sola marca. */
.logo{display:inline-flex;align-items:center;gap:14px;min-height:44px;
  color:#fff;text-decoration:none}
.logo-marca{display:block;height:40px;width:auto;flex-shrink:0}
.logo-txt{display:flex;flex-direction:column;justify-content:center;
  padding-left:14px;border-left:1px solid var(--hairline-fuerte);
  font-family:var(--font-logo);letter-spacing:var(--tracking-logo);font-size:13px;
  white-space:nowrap;font-weight:400;line-height:1.2}
.logo small{display:block;font-family:var(--font-sans);font-stretch:var(--condensada);letter-spacing:var(--tracking-eyebrow);
  font-size:10px;color:var(--txt-suave);text-transform:uppercase;margin-top:3px;font-weight:var(--p-fuerte)}
.nav-links{display:flex;gap:24px;margin-left:8px}
.nav-links button{position:relative;color:var(--txt-suave);font-size:var(--text-sm);font-weight:var(--p-fuerte);
  min-height:44px;padding:0 2px;transition:color var(--dur-rapida) var(--ease)}
.nav-links button::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--oro-400);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-media) var(--ease)}
.nav-links button:hover{color:#fff}
.nav-links button.activo{color:#fff} /* subrayado dorado animado con transform */
.nav-links button.activo::after{transform:scaleX(1)}
/* Workbook: el disparador pesa lo mismo que Catalogo y Mi avance, no es un CTA.
   El panel hereda la caja de .menu para que se lea como extension de la barra. */
.wb-wrap{position:relative;display:inline-flex}
.wb-btn::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--oro-400);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-media) var(--ease)}
.wb-btn.abierto::after{transform:scaleX(1)}
.wb-btn.abierto{color:#fff}
.wb-pop{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 12px);
  width:302px;padding:18px 20px 16px;background:var(--ink-850);color:var(--txt-base);
  border:1px solid var(--hairline-fuerte);border-radius:var(--r-md);box-shadow:var(--shadow-lift);z-index:60}
.wb-pop b{display:block;font-size:var(--text-xs);font-weight:var(--p-fuerte);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-stretch:var(--condensada);color:var(--oro-300)}
.wb-pop p{margin:8px 0 0;font-size:var(--text-sm);line-height:1.6;color:var(--txt-suave)}
.wb-descargar{display:inline-flex;align-items:center;gap:9px;margin-top:16px;min-height:44px;text-decoration:none;
  padding:10px 16px;border:1px solid var(--oro-500);border-radius:var(--r-sm);
  color:var(--oro-300);font-size:var(--text-sm);font-weight:var(--p-fuerte);
  transition:background var(--dur-media) var(--ease),color var(--dur-media) var(--ease)}
@media (hover:hover){ .wb-descargar:hover{background:var(--oro-500);color:var(--ink-1000)} }
.nav-right{margin-left:auto;position:relative;display:flex;align-items:center;gap:10px}
.avatar-btn{border-radius:50%;padding:3px;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}
.menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--ink-850);color:var(--txt-base);
  border:1px solid var(--hairline-fuerte);border-radius:var(--r-md);box-shadow:var(--shadow-lift);
  min-width:220px;padding:6px;z-index:60}
.menu button{display:flex;width:100%;text-align:left;padding:11px 12px;border-radius:var(--r-sm);
  font-size:var(--text-base);min-height:44px;align-items:center;gap:10px}
@media (hover:hover){ .menu button:hover{background:var(--ink-800)} }
.menu .menu-user{padding:10px 12px;border-bottom:1px solid var(--hairline);margin-bottom:4px}
.menu .menu-user b{display:block;font-size:var(--text-base);color:var(--txt-alto)}
.menu .menu-user span{font-size:var(--text-sm);color:var(--txt-suave)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:#fff;border-radius:var(--r-sm)}
.mobile-panel{display:none}


/* ============================================================
   Fase 3 · Hero (portada, inicio, sección)
   Fase 4 · Tarjetas (CardBloque, CardSesion) y carruseles
   ============================================================ */
:root{
  --gap-fila:20px;
  /* la fila sangra hasta el borde de la pantalla; la primera tarjeta alinea con el contenedor */
  --pad-fila:max(var(--gutter),calc((100% - var(--cont-max)) / 2 + var(--gutter)));
}
@media (max-width:1080px){ :root{ --gap-fila:16px } }
@media (max-width:620px){ :root{ --gap-fila:12px } }

/* ---------- Hero base ---------- */
.hero{position:relative;isolation:isolate;color:#fff;background:var(--ink-1000);overflow:hidden}
.hero-foto{position:absolute;inset:0;z-index:-2;margin:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,62% 30%)}
/* Fondo de continuación: la placa de la siguiente sesión, ampliada, desenfocada y oscurecida */
.hero-foto.difusa img{object-position:center;filter:blur(20px) brightness(.5);transform:scale(1.12)}
.hero-scrims{position:absolute;inset:0;z-index:-1;background:var(--scrim-abajo),var(--scrim-lado)}
.hero-in{position:relative;display:flex;flex-direction:column}
.hero h1{color:#fff}
.hero .eyebrow{color:var(--oro-300)}
.hero-top{display:flex;align-items:center;min-height:var(--nav-h)}
.hero-copy{margin-top:auto;max-width:640px}
.hero-copy h1{font-size:var(--t-hero);font-weight:var(--p-regular);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:16px 0 20px;max-width:720px}
.hero-copy .promesa{font-size:var(--text-md);color:var(--txt-medio);max-width:520px;line-height:1.5;margin-bottom:18px}
.hero-copy .cta-row{margin-top:0}
.hero-copy .auth-nota{text-align:left;color:var(--txt-suave);margin-top:16px}

/* MetaLinea: separadores que viajan con el elemento anterior; nunca un punto colgando al inicio de línea */
.meta-linea{display:flex;flex-wrap:wrap;gap:6px 0;align-items:baseline;font-size:var(--text-base);font-weight:var(--p-medio);
  color:var(--txt-medio);margin:0 0 26px;font-variant-numeric:tabular-nums}
.meta-linea span{white-space:nowrap}
.meta-linea span:not(:last-child)::after{content:"·";color:var(--txt-tenue);margin:0 10px}

/* ---------- Portada ---------- */
.hero--portada .hero-in{min-height:78vh;padding-top:16px;padding-bottom:var(--e-16)}
.hero--portada .hero-copy{padding-top:var(--e-12)}
.portada-bloques{padding-bottom:var(--e-12)}

/* Acceso: el marquee pasa a ser el fondo y el panel entra por la derecha */
.hero--acceso .hero-in{padding-bottom:var(--e-12)}
.hero--acceso .hero-scrims{background:var(--scrim-abajo),var(--scrim-lado),rgba(8,13,21,.45)}
.acceso-grid{display:grid;grid-template-columns:1fr;gap:var(--e-8);margin-top:auto;padding-top:var(--e-8)}
.hero--acceso .hero-copy{margin-top:0;padding-top:0}
.hero--acceso .hero-copy h1{font-size:var(--t-h1);font-weight:var(--p-medio);line-height:1.15;letter-spacing:-.005em;max-width:520px;margin:12px 0 16px}
.hero--acceso .meta-linea{margin-bottom:0}
.auth-panel{background:var(--ink-850);border:1px solid var(--hairline-fuerte);border-radius:var(--r-xl);color:var(--txt-base);width:100%;max-width:440px;justify-self:end;box-shadow:var(--shadow-lift)}
.hero-marquee{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 16px;overflow:hidden}
.hero-marquee .rcol figure{margin:0 0 16px;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-850)}
.hero-marquee.quieto .rcol{animation-play-state:paused}
.hero--acceso .marquee-ctl{position:absolute;right:var(--gutter);bottom:16px;margin:0;z-index:2}
.hero--acceso .marquee-ctl .btn-pausa{background:rgba(8,13,21,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- Inicio: hero de continuación ---------- */
.hero--inicio .hero-in{min-height:62vh;padding-top:calc(var(--nav-h) + var(--e-8));padding-bottom:var(--e-12);justify-content:flex-end}
.inicio-grid{display:grid;grid-template-columns:1fr;gap:var(--e-8);align-items:end}
.hero--inicio .hero-copy{margin-top:0;max-width:600px}
.hero-kicker{font-family:var(--font-display);font-size:var(--t-h2);font-weight:var(--p-medio);color:var(--txt-medio);margin-top:12px;line-height:1.2}
.hero--inicio .num-deco{display:block;font-size:var(--t-cifra);color:var(--oro-300);margin:14px 0 2px}
.hero--inicio h1{font-size:var(--t-h1);font-weight:var(--p-medio);line-height:1.15;letter-spacing:-.005em;margin:0 0 14px;max-width:560px}
.hero--inicio .meta-linea{margin-bottom:22px}
.hero--completado .hero-copy h1{margin-top:12px}
.hero-media{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-850);
  padding:0;box-shadow:inset 0 0 0 1px var(--hairline-fuerte);isolation:isolate;cursor:pointer}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-lenta) var(--ease)}
.hero-media .facade-play--sm{width:64px;height:64px}
.hero-media .facade-play--sm svg{width:26px;height:26px;margin-left:4px}
.hero-media:focus-visible .facade-play{background:rgba(8,13,21,.8)}
@media (hover:hover){
  .hero-media:hover img{transform:scale(1.03);will-change:transform}
  .hero-media:hover .facade-play{background:rgba(8,13,21,.8);transform:translate(-50%,-50%) scale(1.06)}
}
.hero-media:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 0 0 5px var(--azul-400)}
.avance-global{margin-top:var(--e-8);max-width:640px}
.avance-global .lbl{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--text-sm);font-weight:var(--p-medio);
  color:var(--txt-suave);margin-bottom:8px;font-variant-numeric:tabular-nums}
.avance-global .lbl b{color:#fff}

/* Cómo funciona: franja de tres pasos sin tarjetas */
.pasos-franja{background:var(--ink-950);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:var(--e-12) 0;margin-top:var(--seccion)}
.pasos-franja h2{font-size:var(--t-h2);margin-bottom:var(--e-6)}
.pasos{display:grid;grid-template-columns:1fr;gap:var(--e-6)}
.paso{padding:16px 0 0;border-top:1px solid var(--oro-500);background:none}
.paso .num-deco{font-size:var(--t-cifra);color:var(--oro-300)}
.paso b{display:block;margin:10px 0 6px;font-size:var(--text-lg);color:var(--txt-alto)}
.paso p{font-size:var(--text-base);color:var(--txt-medio);line-height:1.5}

/* ---------- Hero de sección (Catálogo, Mi avance) ---------- */
.hero--seccion{background:var(--ink-950) var(--halo-navy) no-repeat;border-bottom:1px solid var(--hairline)}
.hero--seccion .hero-in{min-height:34vh;padding-top:calc(var(--nav-h) + var(--e-8));padding-bottom:var(--e-8);justify-content:flex-end}
.seccion-grid{display:grid;grid-template-columns:1fr;gap:var(--e-6);align-items:end}
.hero--seccion h1{font-size:var(--t-h1);font-weight:var(--p-medio);margin:10px 0 10px}
.hero--seccion .cat-desc{color:var(--txt-medio);max-width:560px;margin-bottom:10px}
.hero--seccion .meta-linea{margin:0;color:var(--txt-suave);font-size:var(--text-sm)}
.hero--seccion .avance-card{margin:0;background:var(--ink-850)}
.hero--seccion .perfil-id{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero--seccion .perfil-id h1{margin:0 0 4px}
.hero--seccion .perfil-id .sub{color:var(--txt-suave);font-size:var(--text-sm)}
.avatar-xl{width:var(--thumb-avatar);height:var(--thumb-avatar);font-size:var(--text-2xl);font-family:var(--font-display);font-weight:500}
.hero--seccion .perfil-avance{max-width:520px;margin-top:var(--e-6)}

/* ---------- Filas y carruseles ---------- */
.fila{margin-top:var(--seccion)}
.fila-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:var(--e-6);flex-wrap:wrap}
.fila-head h2{font-size:var(--t-h2)}
.fila-head .sub{font-size:var(--text-sm);color:var(--txt-suave);margin-top:4px}
.carrusel-wrap{position:relative}
.carrusel{display:flex;gap:var(--gap-fila);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding-inline:var(--pad-fila);scroll-padding-inline:var(--pad-fila);padding-block:8px;margin-block:-8px;
  scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--pad-fila) - 12px),#000 calc(100% - var(--pad-fila) + 12px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--pad-fila) - 12px),#000 calc(100% - var(--pad-fila) + 12px),transparent 100%)}
.carrusel::-webkit-scrollbar{display:none}
.carrusel>*{scroll-snap-align:start;flex:0 0 auto}
.carrusel-btn{display:none}
@media (hover:hover) and (min-width:1081px){
  .carrusel-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
    background:rgba(36,48,63,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--hairline-fuerte);color:#fff;display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity var(--dur-media) var(--ease),background var(--dur-rapida) var(--ease);z-index:3}
  .carrusel-btn svg{width:20px;height:20px}
  .carrusel-btn:hover{background:var(--ink-700)}
  .carrusel-btn.prev{left:calc(var(--pad-fila) - 22px)}
  .carrusel-btn.next{right:calc(var(--pad-fila) - 22px)}
  .carrusel-wrap:hover .carrusel-btn:not([hidden]),.carrusel-wrap:focus-within .carrusel-btn:not([hidden]){opacity:1}
  .carrusel-btn[hidden]{display:none}
  .fila--sesiones .carrusel-btn{top:calc(var(--card-sesion) * 9 / 16 / 2 + 8px)}
}

/* ---------- CardBloque: retrato 3:4 con duotono y caption anclado abajo ---------- */
.card-bloque{position:relative;display:block;width:var(--card-bloque-w);height:var(--card-bloque-h);border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-850);text-align:left;padding:0;color:#fff;isolation:isolate;box-shadow:inset 0 0 0 1px var(--hairline);
  transition:box-shadow var(--dur-lenta) var(--ease)}
.card-bloque img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform var(--dur-lenta) var(--ease)}
.card-bloque .cb-scrim{position:absolute;inset:0;z-index:-1;background:var(--scrim-abajo)}
.cb-cap{position:absolute;left:0;right:0;bottom:0;padding:16px;display:flex;flex-direction:column;gap:3px}
.cb-num{font-family:var(--font-display);font-size:26px;font-weight:300;color:var(--oro-300);line-height:1;font-variant-numeric:tabular-nums}
.cb-nom{font-size:var(--text-lg);font-weight:var(--p-fuerte);color:#fff;line-height:1.25;margin-top:4px}
.cb-filete{display:block;height:1px;width:48px;background:var(--oro-400);opacity:.75;margin:8px 0 4px}
.cb-meta{font-size:var(--text-sm);color:var(--txt-medio);font-variant-numeric:tabular-nums}
.card-bloque:focus-visible{box-shadow:var(--foco-sobre-foto)}

/* ---------- CardSesion: placa 16:9, badge, duración y línea de avance ---------- */
.card-sesion{display:flex;flex-direction:column;gap:12px;width:var(--card-sesion);text-align:left;padding:0;color:var(--txt-base);border-radius:var(--r-lg)}
.cs-media{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-850);
  box-shadow:inset 0 0 0 1px var(--hairline);isolation:isolate;transition:box-shadow var(--dur-lenta) var(--ease)}
.cs-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-lenta) var(--ease)}
.cs-media::after{content:"";position:absolute;inset:0;background:var(--scrim-hover);opacity:0;transition:opacity var(--dur-lenta) var(--ease);z-index:1}
.cs-badge{position:absolute;top:10px;left:10px;z-index:2}
.cs-dur{position:absolute;right:10px;bottom:12px;z-index:2;background:rgba(8,13,21,.72);color:#fff;font-size:var(--text-xs);font-weight:var(--p-fuerte);
  padding:3px 8px;border-radius:var(--r-sm);font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);line-height:1.3}
.linea-avance{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14);z-index:2}
.linea-avance>i{display:block;height:100%;background:var(--avance)}
.cs-body{display:flex;flex-direction:column;gap:3px;padding:0 2px}
.cs-num{font-size:var(--text-xs);font-weight:var(--p-fuerte);letter-spacing:var(--ls-label);color:var(--oro-300);font-stretch:var(--condensada);text-transform:uppercase}
.cs-tit{font-size:var(--text-lg);font-weight:var(--p-fuerte);color:var(--txt-alto);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--dur-rapida) var(--ease)}
.cs-bloque{font-size:var(--text-sm);color:var(--txt-suave)}
.card-sesion:focus-visible{box-shadow:var(--foco-sobre-foto)}
.card-sesion[disabled]{opacity:.55;cursor:default}
@media (hover:hover){
  .card-bloque:hover img{transform:scale(1.04);will-change:transform}
  .card-bloque:hover{box-shadow:inset 0 0 0 1px var(--hairline-fuerte)}
  .card-sesion:hover .cs-media img{transform:scale(1.04);will-change:transform}
  .card-sesion:hover .cs-media::after{opacity:1}
  .card-sesion:hover .cs-media{box-shadow:inset 0 0 0 1px var(--hairline-fuerte)}
}

/* ---------- Responsive de hero y filas ---------- */
@media (min-width:621px){
  .pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-8)}
  .inicio-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-8)}
  .acceso-grid{grid-template-columns:minmax(0,1fr) minmax(320px,440px);align-items:center;gap:var(--e-8)}
}
@media (min-width:1081px){
  .inicio-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--e-12)}
  .seccion-grid{grid-template-columns:minmax(0,1fr) 440px;gap:var(--e-12)}
  .acceso-grid{gap:var(--e-16)}
}
@media (max-width:620px){
  .hero--portada .hero-in{min-height:100svh;padding-bottom:var(--e-8)}
  .hero-copy h1{margin:12px 0 16px}
  .hero-copy .promesa{font-size:var(--text-base)}
  .meta-linea{font-size:var(--text-sm);margin-bottom:20px}
  .hero-marquee{display:none}
  .hero--acceso .hero-in{min-height:auto;padding-top:8px}
  .hero--acceso .hero-copy h1{font-size:26px;margin:8px 0 10px}
  .hero--acceso .meta-linea{display:none}
  .auth-panel{max-width:none}
  .hero--acceso .marquee-ctl{display:none}
  .hero--inicio .hero-in{min-height:auto;padding-top:calc(var(--nav-h) + var(--e-6));padding-bottom:var(--e-8)}
  .hero--seccion .hero-in{min-height:auto;padding-top:calc(var(--nav-h) + var(--e-6));padding-bottom:var(--e-6)}
  .hero--inicio .cta-row .btn{flex:1 1 100%}
}


/* ============================================================
   Fase 7 · Estados interactivos y movimiento (§5.14)
   ============================================================ */
/* Activo: hundido breve. Solo con puntero fino, y anulado con movimiento reducido. */
@media (hover:hover){
  .btn:active,.card-sesion:active,.card-bloque:active,.srow:active,.blista button:active,
  .player-facade:active,.hero-media:active,.sig-media:active{transform:scale(.985)}
}
.btn,.card-sesion,.card-bloque,.srow,.blista button,.player-facade,.hero-media,.sig-media{
  transition:transform 80ms var(--ease),background var(--dur-rapida) var(--ease)}

/* Esqueleto de carga: barrido de 1.4 s mientras la imagen del contenedor no resuelve.
   Es fondo del contenedor, no una capa, para no chocar con el scrim de hover. */
.esqueleto{background-image:linear-gradient(90deg,var(--ink-850),var(--ink-800),var(--ink-850));
  background-size:200% 100%;animation:barrido 1.4s linear infinite}
@keyframes barrido{from{background-position:200% 0}to{background-position:-200% 0}}

/* Deshabilitado: sin hover, sin cursor de acción */
[disabled],[aria-disabled="true"]{cursor:default}
[aria-disabled="true"]{opacity:.55}
.btn[disabled]{opacity:.55}

/* Franja de aviso persistente, bajo la barra superior. A diferencia de .aviso
   —que es efímero y flota abajo— esta se queda hasta que el problema se
   resuelve, porque describe un estado y no un suceso. */
.franja-aviso{position:fixed;top:var(--nav-h);left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:10px 18px;background:var(--danger-600);color:#fff;
  font-size:var(--text-sm);text-align:center}
.franja-aviso .btn{flex-shrink:0}