/* =========================================================
   Keto & Fitness · Sistema visual v9
   Hoja compartida por todas las páginas del sitio.
   Visual: referencia del cliente (hero a sangre, sans pesada,
   punto amarillo, botones en mayúsculas, firma, pilares).
   Contenedor al 75% en pantallas grandes. Tipografía escalada
   por ancho Y alto para que cada pantalla entre en la ventana.
   Transiciones: cada sección tiene su fondo y su contenido aparece
   con un fundido al entrar en pantalla (igual en todas las páginas).
   Premisas: CET Juntos / Ollas Rubi (función por sección,
   CTA único, contacto sin redundancia, sidenav, fondos y
   composición alternados, motion con propósito).
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Oscuros */
  --ink-950:#080808;
  --ink-900:#0E0E0E;
  --ink-800:#141414;
  --ink-700:#1C1C1C;
  --ink-600:#2A2A2A;
  --line:rgba(255,255,255,.14);
  --text-hi:#F5F2EC;
  --text-mid:#BCB7AE;
  --text-low:#8A867F;

  /* Claros (pantallas alternadas) */
  --bone-100:#F2EEE7;
  --bone-200:#E6E0D5;
  --paper:#FBF9F5;               /* claro más blanco: la tarjeta de presentación */
  --line-ink:rgba(20,20,20,.13);
  --text-ink:#141414;
  --text-ink-mid:#55514A;

  /* Acentos */
  --kf-yellow:#F5EE35;          /* gota del logo · acento global y CTA único */
  --kf-yellow-hover:#E8E02A;
  --com-red:#E3261C;            /* solo Carne o Muerte (portadas temporada 4) */
  --aca:#FD7100;                /* solo Academy: el naranja del logo de Academy */
  --wa-green:#25D366;           /* color funcional del canal, no de marca */

  /* Tonos de fondo por pantalla (fundido entre pantallas) */
  --tone-dark:#0E0E0E;
  --tone-light:#F2EEE7;
  --tone-com:#0B0605;

  /* Tipografía */
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Mrs Saint Delafield",cursive; /* provisoria: reemplazar por la firma real de Manuel */
  --fs-h1:clamp(36px,min(4.1vw,7.6vh),74px);
  --fs-h2:clamp(30px,min(2.8vw,5.4vh),48px);
  --fs-lead:clamp(15.5px,min(1.02vw,1.95vh),18px);
  --fs-body:16px;
  --track-btn:.14em;

  /* Contenedor: 1344px (70% en 1920 · 88% en 1440 · casi todo el ancho en notebooks);
     en pantallas muy grandes no baja del 60%. */
  --gutter:clamp(20px,5.8vw,96px);
  --cw:min(100% - 2*var(--gutter),max(1344px,60%));
  --cw-vw:min(100vw - 2*var(--gutter),max(1344px,60vw));
  --side:calc((100% - var(--cw))/2);

  /* Forma */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --header-h:clamp(92px,13vh,120px);
  --header-h-compact:72px;

  /* Motion: un solo easing */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.2s;
  --t-normal:.35s;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink-900);color:var(--text-hi);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
/* Grano fílmico muy sutil sobre todo el sitio (detalle de terminación) */
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;background:url(../img/grain.png);opacity:.04;mix-blend-mode:overlay}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
button{font:inherit}
::selection{background:var(--kf-yellow);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--kf-yellow);outline-offset:4px;border-radius:6px}
.is-light :focus-visible{outline-color:var(--text-ink)}
.skip{position:absolute;left:12px;top:-80px;z-index:400;background:var(--kf-yellow);color:var(--ink-900);padding:12px 16px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.container{width:var(--cw);margin:0 auto}
.dot{color:var(--kf-yellow)}
/* Plus Jakarta deja mucho aire antes del punto en pesos altos: se ajusta el kerning a mano */
h1 .dot,h2 .dot,h2 .pt{margin-left:-.07em}
.caps{text-transform:uppercase;letter-spacing:.32em;font-size:11px;font-weight:600;line-height:2.1}
.sign{font-family:var(--script);font-weight:400;line-height:1;letter-spacing:0;display:inline-block;transform:rotate(-7deg)}

/* Pretítulo de pantalla: "02 — Consultorio" */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2.2vh,20px);text-transform:uppercase;letter-spacing:.3em;font-size:11.5px;font-weight:600}
.eyebrow .n{color:var(--kf-yellow);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.eyebrow::after{content:"";width:36px;height:1.5px;background:currentColor;opacity:.5}
.is-light .eyebrow .n{color:var(--ink-900);background:var(--kf-yellow);padding:3px 7px;border-radius:5px;letter-spacing:.04em}
body.com .is-light .eyebrow .n{color:#fff}
.center .eyebrow{justify-content:center}
.center .eyebrow::before{content:"";width:36px;height:1.5px;background:currentColor;opacity:.5}

/* ---------- Sistema de detalles (igual en todas las páginas) ----------
   1 · Pretítulo numerado en cada sección (número en el color del área sobre oscuro, en tinta sobre claro).
   2 · Número gigante de fondo en cada sección numerada.
   3 · Punto final del título en el color del área (sobre oscuro); en tinta sobre claro.
   4 · Palabra clave en el color del área: una por título, solo en secciones oscuras (sobre claro no se lee).
   5 · Manuscrita (la firma) solo para la voz y el nombre de Manuel: firma del hero, Sobre mí, Quién enseña,
       supervisor del equipo y el creador del curso.
   6 · Íconos de línea en chip: chip de color = elemento principal; chip oscuro = secundario. Sin emojis.
   ---------- Detalles de títulos ----------
   · Palabra manuscrita (la letra de la firma) solo en las secciones de Manuel.
   · Número de sección gigante, en contorno, de fondo. */
.s-academy .hl{color:var(--aca)}
.s-podcast .hl{color:var(--com-red)}
/* El nombre de Manuel como persona va con su firma */
.script-name,.supervisor .script-name{font-family:var(--script);font-weight:400;font-size:32px;line-height:1.1;letter-spacing:0;margin-bottom:0}
.script{font-family:var(--script);font-weight:400;font-size:2.2em;letter-spacing:0;line-height:.4;position:relative;top:-.05em;padding:0 .12em 0 .08em;white-space:nowrap}
/* Con la firma en el título: un poco más de interlineado para que los trazos no se toquen; en fondo oscuro va en el
   color del área (igual que la palabra clave .hl); en fondo claro, en tinta */
h2:has(.script){line-height:1.12}
.section:not(.is-light) .script{color:var(--kf-yellow)}
/* En el celular la firma puede quedar sola en una línea: se le da su propia altura para que no pise la de arriba */
@media (max-width:760px){.script{display:inline-block;font-size:2em;line-height:.95;top:0}}
.section,.screen{isolation:isolate}
.bignum{position:absolute;right:-.04em;bottom:-.2em;z-index:-1;font-size:clamp(180px,22vw,380px);font-weight:800;letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none;user-select:none}
.is-light .bignum{-webkit-text-stroke-color:rgba(20,20,20,.09)}

/* ---------- Botones ----------
   Siempre con fondo pintado. Al pasar el mouse el color se aclara apenas, el botón sube 2px
   con una sombra suave y la flecha avanza. Sin barridos ni brillos. */
.btn{--bg:var(--kf-yellow);--fg:var(--ink-900);--hover-bg:color-mix(in srgb,var(--bg) 82%,#fff);--hover-fg:var(--fg);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:clamp(48px,5.6vh,54px);padding:0 28px;border-radius:var(--r-pill);
  font:800 13px/1 var(--sans);text-transform:uppercase;letter-spacing:var(--track-btn);text-decoration:none;white-space:nowrap;
  background:var(--bg);color:var(--fg);border:0;cursor:pointer;touch-action:manipulation;
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{background:var(--hover-bg);color:var(--hover-fg);transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(0,0,0,.55)}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--t-normal) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
/* Botón que baja dentro de la misma página: flecha hacia abajo */
.btn.is-down svg{transform:rotate(90deg)}
.btn.is-down:hover svg{transform:rotate(90deg) translateX(3px)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.btn-light{--bg:var(--text-hi);--fg:var(--ink-900);--hover-bg:#fff}
.btn-dark{--bg:var(--ink-900);--fg:var(--bone-100);--hover-bg:#2B2B2B}
.btn-aca{--bg:var(--aca);--fg:var(--ink-900)}
.btn-com{--bg:var(--com-red);--fg:#fff}
/* Letra blanca: el hover oscurece el fondo para que el texto siga leyéndose */
.btn-com,body.com main .btn-primary{--hover-bg:color-mix(in srgb,var(--bg) 84%,#000)}
.btn-lg{min-height:clamp(54px,6.6vh,62px);padding:0 36px;font-size:14px}
.btn-sm{min-height:44px;padding:0 20px;font-size:12px;gap:10px}
.btn-sm svg{width:16px;height:16px}

.text-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;text-decoration:none;padding:6px 0;border-bottom:1px solid currentColor}
.text-link svg{width:16px;height:16px;transition:transform var(--t-normal) var(--ease)}
.text-link:hover svg{transform:translateX(3px)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;view-transition-name:site-header;color:var(--text-hi);
  transition:background var(--t-normal) var(--ease),color var(--t-normal) var(--ease),box-shadow var(--t-normal) var(--ease)}
.site-header .bar{display:flex;align-items:center;gap:32px;height:var(--header-h);transition:height var(--t-normal) var(--ease)}
.site-header .brand{flex:none;position:relative;display:block}
.site-header .brand img{height:clamp(60px,min(9.6vh,5.6vw),96px);width:auto;transition:height var(--t-normal) var(--ease),opacity var(--t-normal) var(--ease)}
.site-header nav.main{flex:1;display:flex;justify-content:center;gap:clamp(14px,2.4vw,42px)}
.site-header nav.main a{position:relative;text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:.01em;padding:12px 2px;opacity:.88;transition:opacity var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.site-header nav.main a:hover{opacity:1}
.site-header nav.main a::after{content:"";position:absolute;left:50%;bottom:3px;width:26px;height:2px;border-radius:2px;background:var(--nav-acc,var(--kf-yellow));transform:translateX(-50%) scaleX(0);transition:transform var(--t-normal) var(--ease)}
.site-header nav.main a:hover::after{transform:translateX(-50%) scaleX(1)}
.site-header nav.main a[aria-current="page"]{color:var(--nav-acc,var(--kf-yellow));opacity:1}
/* Color de área en el menú: Academy en naranja (hover, activo y flecha del menú mobile) */
.site-header nav.main a[href^="/academy/"],.mobile-menu nav a[href^="/academy/"]{--nav-acc:var(--aca)}
.site-header nav.main a[href^="/podcast/"],.mobile-menu nav a[href^="/podcast/"]{--nav-acc:var(--com-red)}
.site-header nav.main a[aria-current="page"]::after{transform:translateX(-50%) scaleX(1)}
.site-header .cta{flex:none}
/* Barra única para todo el sitio: vidrio oscuro esmerilado, igual sobre secciones claras u oscuras */
.site-header.is-scrolled{background:rgba(14,14,14,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.07),0 12px 32px -20px rgba(0,0,0,.7)}
.site-header.is-scrolled .bar{height:var(--header-h-compact)}
.site-header.is-scrolled .brand img{height:52px}
/* ---------- Desplegable de "Inicio" (desktop) ----------
   "Inicio" lleva a la Home; la flecha (o pasar el mouse) abre sus pantallas, con el número de cada una.
   Cada área usa su color (--dacc) en el ícono. */
.nav-item{position:relative;display:flex;align-items:center;gap:2px}
.drop-btn{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:none;color:inherit;opacity:.7;cursor:pointer;transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.drop-btn:hover{opacity:1;background:rgba(255,255,255,.08)}
.drop-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-normal) var(--ease)}
.drop{position:absolute;top:100%;left:-14px;z-index:5;padding-top:14px;min-width:300px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--ease),transform .3s var(--ease),visibility .3s}
.has-drop:hover .drop,.has-drop.is-open .drop{opacity:1;visibility:visible;transform:none}
.has-drop:hover .drop-btn svg,.has-drop.is-open .drop-btn svg{transform:rotate(180deg)}
.drop-card{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:20px;background:#121212;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -24px rgba(0,0,0,.8);border-top:2px solid var(--dacc)}
.site-header nav.main .drop a{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;opacity:1;font-size:14px;letter-spacing:0;white-space:nowrap;transition:background var(--t-fast) var(--ease)}
.site-header nav.main .drop a::after{display:none}
.site-header nav.main .drop a:hover,.site-header nav.main .drop a:focus-visible{background:rgba(255,255,255,.06)}
.drop .di{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--dacc);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.drop a:hover .di{background:var(--dacc);color:var(--ink-900)}
.drop .di svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.drop .dt b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text-hi)}
.drop .dt b i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--dacc);font-variant-numeric:tabular-nums}
.drop .dt small{display:block;font-size:12.5px;font-weight:500;color:var(--text-mid);margin-top:1px}
.m-crumb{display:none}
.menu-btn{display:none;margin-left:auto;width:48px;height:48px;border:0;background:none;color:inherit;cursor:pointer;place-items:center;touch-action:manipulation}
.menu-btn span{display:block;width:28px;height:2.5px;border-radius:2px;background:currentColor;box-shadow:0 -8px 0 currentColor,0 8px 0 currentColor}

/* Menú mobile */
.mobile-menu{position:fixed;inset:0;z-index:150;background:var(--ink-950);display:flex;flex-direction:column;
  padding:12px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  visibility:hidden;clip-path:inset(0 0 0 100%);transition:clip-path .5s var(--ease),visibility 0s linear .5s}
.mobile-menu.is-open{visibility:visible;clip-path:inset(0);transition:clip-path .55s var(--ease),visibility 0s}
.mobile-menu .top{display:flex;align-items:center;justify-content:space-between;height:72px;margin-bottom:20px}
.mobile-menu .top img{height:52px;width:auto}
.mobile-menu .close{width:48px;height:48px;border-radius:50%;border:0;background:var(--ink-600);color:var(--text-hi);font-size:20px;cursor:pointer}
.mobile-menu nav a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;padding:15px 2px;border-bottom:1px solid var(--ink-600)}
.mobile-menu nav b{display:block;font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.mobile-menu nav small{display:block;font-size:13.5px;color:var(--text-mid);margin-top:3px}
.mobile-menu nav svg{width:20px;height:20px;color:var(--nav-acc,var(--kf-yellow));flex:none}
.mobile-menu nav a[aria-current="page"] b{color:var(--nav-acc,var(--kf-yellow))}
.mobile-menu .bottom{margin-top:auto;display:grid;gap:10px;padding-top:24px}
.mobile-menu .bottom .btn{width:100%}
body.menu-open{overflow:hidden}

/* ---------- Sidenav: puntos con el nombre de cada pantalla (Home, desktop) ---------- */
.sidenav{position:fixed;left:clamp(16px,2vw,40px);top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:4px;color:var(--text-hi);transition:color .6s var(--ease)}
.sidenav a{display:flex;align-items:center;gap:12px;padding:6px 0;text-decoration:none;color:inherit}
.sidenav .pip{display:block;width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;opacity:.35;transition:width var(--t-normal) var(--ease),opacity var(--t-normal) var(--ease),background var(--t-normal) var(--ease)}
.sidenav .label{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity var(--t-normal) var(--ease),transform var(--t-normal) var(--ease);pointer-events:none}
.sidenav a:hover .pip{opacity:1}
.sidenav a:hover .label,.sidenav a:focus-visible .label,.sidenav a.is-current.announce .label{opacity:1;transform:none}
.sidenav a.is-current .pip{width:26px;opacity:1;background:var(--kf-yellow)}
.sidenav.on-light{color:var(--text-ink)}
.sidenav.on-light a.is-current .pip{background:var(--text-ink)}
@media (min-width:1800px){
  .sidenav a.is-current .label{opacity:1;transform:none;padding:5px 10px;margin-left:-4px;border-radius:var(--r-pill);background:rgba(14,14,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .sidenav.on-light a.is-current .label{background:rgba(242,238,231,.82)}
}

/* ---------- Pantallas (Home) ---------- */
.screen{position:relative;min-height:100vh;min-height:calc(100svh * var(--vz,1));display:flex;align-items:center;isolation:isolate;overflow:hidden;
  padding:calc(var(--header-h) + 1vh) 0 clamp(44px,6vh,72px);background:var(--ink-900)}
.screen.is-light{background:var(--bone-100);color:var(--text-ink)}
.screen-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.screen-media img{width:100%;height:100%;object-fit:cover}
.screen-media::after{content:"";position:absolute;inset:0}
.screen-copy{max-width:min(46%,600px)}
.screen-copy h2{font-size:var(--fs-h2);max-width:11.5em;margin-bottom:clamp(14px,2.6vh,22px)}
.screen-copy .lead{font-size:var(--fs-lead);line-height:1.62;color:var(--text-mid);max-width:34em;margin-bottom:clamp(20px,3.4vh,30px)}
.is-light .screen-copy .lead{color:var(--text-ink-mid)}
.screen-copy .ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.side-note{position:absolute;right:var(--side);top:calc(var(--header-h) + 3vh);text-align:right;opacity:.9}
.side-note::after{content:"";display:block;width:30px;height:1.5px;background:currentColor;margin:12px 0 0 auto;opacity:.7}

/* Composición: izquierda / derecha / centro */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.split .screen-copy{max-width:560px}
.center{text-align:center}
.center .screen-copy{max-width:760px;margin:0 auto}
.center .lead{margin-left:auto;margin-right:auto}
.center .ctas{justify-content:center}
.center h2{margin-left:auto;margin-right:auto}

/* Logo propio de cada área (Consultorio · Academy · Podcast): mismo tamaño y lugar */
.area-logo{display:block;height:clamp(58px,9vh,88px);width:auto;margin:0 0 clamp(14px,2.6vh,22px)}
.center .area-logo{margin-left:auto;margin-right:auto}
/* El logo de Academy es cuadrado: necesita más alto para que se lea "ACADEMY" */
.s-academy .area-logo{height:clamp(96px,14vh,136px)}
/* Home · Academy: logo al lado del título, el par centrado */
.title-logo{display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.4vw,36px);margin-bottom:clamp(14px,2.6vh,22px)}
.center .title-logo .area-logo{flex:none;margin:0}
/* El título toma el ancho de su línea más larga: así el par logo + título queda centrado de verdad */
.center .title-logo h2{margin:0;text-align:left;max-width:none;width:max-content}

/* Foto en tarjeta (pantallas claras) */
.media-card{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;height:min(66vh,640px);background:var(--ink-800);box-shadow:0 40px 80px -40px rgba(20,20,20,.45)}
.media-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.media-card img{width:100%;height:100%;object-fit:cover}

/* Pilares / datos: fila con íconos y divisores */
.facts{list-style:none;margin:0 0 clamp(22px,3.6vh,32px);padding:clamp(16px,2.6vh,22px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.facts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts li{padding:0 14px;display:flex;flex-direction:column;gap:1px}
.facts li:first-child{padding-left:0}
.facts li+li{border-left:1px solid var(--line)}
.facts svg{width:clamp(24px,3.2vh,30px);height:clamp(24px,3.2vh,30px);fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px;opacity:.95}
.facts b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.facts span{font-size:13px;color:var(--text-mid);line-height:1.45}
.facts a{text-decoration:none;display:flex;flex-direction:column;gap:1px}
.facts a:hover b{color:var(--kf-yellow)}
.facts a:hover svg{stroke:var(--kf-yellow)}
.is-light .facts,.is-light .facts li+li{border-color:var(--line-ink)}
.is-light .facts span{color:var(--text-ink-mid)}
.center .facts{text-align:left}

/* Lista de opciones con descripción (más información que un ícono suelto) */
.options{list-style:none;margin:0 0 clamp(16px,2.8vh,24px);padding:0;display:grid;gap:10px}
.options li{display:grid;grid-template-columns:44px 1fr auto;gap:2px 16px;align-items:center;padding:clamp(12px,2vh,16px) 16px;border-radius:16px;
  background:rgba(255,255,255,.45);border:1px solid var(--line-ink);transition:background var(--t-normal) var(--ease),border-color var(--t-normal) var(--ease),transform var(--t-normal) var(--ease)}
.options li:hover{background:#fff;border-color:rgba(20,20,20,.2);transform:translateY(-1px)}
.options .ic{grid-row:span 2;align-self:start;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--kf-yellow);color:var(--ink-900)}
.options li.alt .ic{background:var(--ink-900);color:var(--kf-yellow)}
.options svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.options b{font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.options p{grid-column:2/-1;font-size:14px;line-height:1.55;color:var(--text-ink-mid)}
.options .tag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);background:rgba(245,238,53,.5);white-space:nowrap}
.options li.alt .tag{background:rgba(20,20,20,.07)}
.note{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-ink-mid);margin:0 0 clamp(20px,3.2vh,28px)}
.note svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.note b{color:var(--text-ink);font-weight:600}

/* ---------- 01 · Inicio (izquierda) ----------
   Foto anclada a la derecha del texto, grande y alta: Manuel de la cabeza a la cintura,
   con la cabeza a la altura del pretítulo. Su borde derecho deja lugar a la firma. */
/* La altura de la foto se limita también por el ancho del contenedor, para que la firma
   siempre tenga lugar a la derecha de Manuel */
.hero{--sig-fs:clamp(26px,1.9vw,40px);--sig-w:calc(var(--sig-fs)*7.6);--img-h:min(calc(112svh * var(--vz,1)),60vw,(.59*var(--cw-vw) - .8*var(--sig-w))*2.05);
  --img-top:calc(13svh * var(--vz,1) - .27*var(--img-h))}
.hero .screen-media{background:var(--ink-900)}
.hero .screen-media img{position:absolute;height:var(--img-h);width:auto;max-width:none;object-fit:cover;
  top:var(--img-top);
  left:calc(var(--side) + .49*var(--cw) - .5625*var(--img-h));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 10%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 10%);
          mask-composite:intersect}
.hero .screen-media::after{background:
  linear-gradient(rgba(14,14,14,.14),rgba(14,14,14,.14)),
  linear-gradient(90deg,rgba(14,14,14,.96) 0%,rgba(14,14,14,.86) 30%,rgba(14,14,14,.32) 45%,rgba(14,14,14,0) 54%),
  linear-gradient(0deg,rgba(14,14,14,1) 0%,rgba(14,14,14,0) 24%),
  linear-gradient(180deg,rgba(14,14,14,.7) 0%,rgba(14,14,14,0) 22%)}
.hero .screen-copy{max-width:min(47%,700px)}
.hero .kicker{text-transform:uppercase;letter-spacing:.5em;font-size:11.5px;font-weight:600;margin-bottom:clamp(14px,2.4vh,22px);color:#fff}
/* El título va siempre en dos líneas en escritorio: el tamaño se limita para que la línea más
   larga (~9.2em) entre antes del hombro de Manuel (43% del contenedor) */
.hero h1{font-size:min(var(--fs-h1),.43*var(--cw-vw)/9.2);line-height:1;letter-spacing:-.035em;margin-bottom:clamp(16px,2.6vh,24px);color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero h1 .ln{display:block;white-space:nowrap}
/* Bajada y accesos no deben invadir la silueta de Manuel: se limitan al 38% del contenedor */
.hero .lead{font-size:clamp(16px,min(1.2vw,2.25vh),20px);line-height:1.55;color:#E4E0D8;max-width:min(26em,.4*var(--cw-vw));margin-bottom:clamp(22px,3.6vh,34px)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:16px}
.hero .ctas .btn{min-height:clamp(50px,6vh,56px);padding:0 clamp(26px,2.1vw,36px);font-size:13.5px}
.hero{padding-bottom:calc(var(--ticker-h) + 3vh);--ticker-h:clamp(46px,5.6vh,54px)}
/* Accesos a las áreas: estáticos y clickeables (la navegación nunca se mueve sola) */
.portal{margin-top:clamp(22px,3.8vh,36px);max-width:min(560px,.39*var(--cw-vw))}
.portal ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.portal a{--acc:var(--kf-yellow);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 10px;padding:9px 12px 9px 10px;border-radius:14px;text-decoration:none;
  background:rgba(18,18,18,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color var(--t-normal) var(--ease),background var(--t-normal) var(--ease),transform var(--t-normal) var(--ease)}
.portal a:hover{border-color:var(--acc);background:rgba(26,26,26,.75);transform:translateY(-2px)}
.portal a.com{--acc:var(--com-red)}
.portal a.aca{--acc:var(--aca)}
.portal .lg{display:block;height:clamp(30px,4vh,36px)}
.portal .lg img{height:100%;width:auto}
.portal b{display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.25}
.portal small{display:block;font-size:12px;color:var(--text-mid)}
.portal svg{width:16px;height:16px;color:var(--acc);transition:transform var(--t-normal) var(--ease)}
.portal a:hover svg{transform:translateX(3px)}

/* Cinta de credenciales: infinita, lenta, se pausa con el mouse (no es navegación) */
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:2;height:var(--ticker-h);display:flex;align-items:center;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1);background:rgba(10,10,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.ticker li{display:flex;align-items:center;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-mid)}
.ticker li b{color:#fff;font-weight:800;margin-right:.6em;letter-spacing:.1em}
.ticker li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--kf-yellow);margin:0 clamp(22px,2.4vw,40px)}
@keyframes ticker{to{transform:translateX(-50%)}}
.hero .side-note{color:#fff}
.hero .signature{position:absolute;z-index:1;right:var(--side);top:min(calc(var(--img-top) + .91*var(--img-h)),calc(100svh * var(--vz,1) - var(--ticker-h) - 130px));text-align:center;color:#fff}
.hero .signature::before{content:"";position:absolute;inset:-50px -60px;z-index:-1;background:radial-gradient(closest-side,rgba(10,10,10,.82),rgba(10,10,10,0))}
.hero .signature .sign{font-size:var(--sig-fs);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hero .signature small{display:block;margin-top:12px;font-size:10px;letter-spacing:.34em;line-height:2;opacity:.85}
.hero .signature .mat{color:var(--kf-yellow)}
/* Apodo "Keto King" después del nombre, separado por una barrita fina */
/* "Keto King" separado por una barrita escrita en el texto (con espacios): nunca queda pegado, aunque falte el estilo */
.kk{font-weight:800}
.kk-sep{display:inline-block;margin:0 .15em;font-weight:300;letter-spacing:0;opacity:.55}

/* Entrada del hero: sobria. La foto aparece despacio y se asienta; el texto llega en fundidos
   encadenados; la firma se escribe al final. */
.rise,.hero h1 .ln{animation:fade-in .85s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes fade-in{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.hero .kicker{animation:fade-in .85s var(--ease) .1s both}
.hero .screen-media img{animation:photo-in 2.6s var(--ease) both}
@keyframes photo-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.hero .signature .sign{clip-path:inset(-20% 0 -20% 0);animation:write 1.4s cubic-bezier(.65,0,.35,1) .6s both}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}

/* ---------- 02 · Consultorio (claro · texto a la derecha) ---------- */
.s-consultorio .media-card img{object-position:38% 40%}
.s-consultorio::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 22% 55%,color-mix(in srgb,var(--kf-yellow) 30%,transparent),transparent 70%)}
.badge{position:absolute;left:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border-radius:var(--r-md);
  background:rgba(12,12,12,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.12);color:#fff}
.badge img{height:clamp(44px,6vh,56px);width:auto}
.badge span{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;line-height:1.6;padding-left:14px;border-left:1px solid rgba(255,255,255,.22)}
.badge small{display:block;font-weight:500;letter-spacing:.04em;text-transform:none;font-size:12.5px;opacity:.8}

/* ---------- 03 · Academy (oscuro · centrado) ----------
   Se entiende de un vistazo: qué es (una línea) y qué hay hoy (la tarjeta del curso). */
/* Identidad propia de Academy: detalles en naranja, como la landing del curso */
.s-academy::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 100%,color-mix(in srgb,var(--aca) 20%,transparent),transparent 70%)}
.s-academy .eyebrow .n,.s-academy .dot{color:var(--aca)}
.s-academy .more a{text-decoration-color:var(--aca)}
.s-academy .more a:hover{color:var(--aca)}
.course{position:relative;transition:border-color var(--t-normal) var(--ease)}
.course::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--aca)}
.course:hover{border-color:color-mix(in srgb,var(--aca) 45%,transparent)}
.s-academy .lead{max-width:30em}
.course{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);max-width:940px;margin:0 auto clamp(18px,3vh,26px);text-align:left;
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800);border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.course .media{position:relative;min-height:clamp(260px,38vh,380px)}
.course .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%;filter:grayscale(1) contrast(1.08)}
.course .media .tag{position:absolute;left:16px;top:16px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-900);background:var(--aca);padding:7px 11px;border-radius:var(--r-pill)}
.course .body{padding:clamp(22px,3.6vh,36px) clamp(22px,2.4vw,38px);display:flex;flex-direction:column;justify-content:center}
.course .kind{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--aca);margin-bottom:10px}
.course h3{font-size:clamp(22px,1.9vw,30px);line-height:1.1;margin-bottom:clamp(14px,2.4vh,20px)}
.course ul{list-style:none;margin:0 0 clamp(18px,3vh,26px);padding:0;display:grid;gap:10px}
.course li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:#DCD7CE}
.course li svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--aca);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.course .btn{align-self:flex-start}
.s-academy .more{font-size:14px;color:var(--text-mid)}
.s-academy .more a{color:var(--text-hi);font-weight:600;text-underline-offset:4px}

/* ---------- 04 · Podcast (Carne o Muerte · texto a la izquierda) ---------- */
.s-podcast{background:var(--tone-com)}
.s-podcast::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(55% 60% at 85% 15%,rgba(227,38,28,.24),transparent 65%),radial-gradient(50% 50% at 10% 95%,rgba(227,38,28,.1),transparent 65%)}
.s-podcast .eyebrow .n,.s-podcast .dot{color:var(--com-red)}
.s-podcast .com-logo{height:clamp(76px,12vh,112px)}

.s-podcast .facts svg{stroke:var(--com-red)}
.episodes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.episode{display:block;text-decoration:none;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(227,38,28,.28);background:#120b0a;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);transition:border-color var(--t-normal) var(--ease),transform var(--t-normal) var(--ease)}
.episode:hover{border-color:var(--com-red);transform:translateY(-2px)}
.episode.main{grid-column:1/-1}
.episode .cover{overflow:hidden;aspect-ratio:16/9}
.episode .cover img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.episode:hover .cover img{transform:scale(1.035)}
.episode .info{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px}
.episode small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--com-red)}
.episode b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin-top:4px;line-height:1.3}
.episode em{display:block;font-style:normal;font-size:13px;color:var(--text-mid);margin-top:3px}
.episode .play{flex:none;width:48px;height:48px;border-radius:50%;background:var(--com-red);color:#fff;display:grid;place-items:center;transition:transform var(--t-normal) var(--ease)}
.episode:hover .play{transform:scale(1.06)}
.episode .play svg{width:15px;height:15px;margin-left:3px}
.episode:not(.main) .info{padding:12px 14px}
.episode:not(.main) b{font-size:13.5px}
.platforms{display:flex;gap:16px;align-items:center;font-size:13.5px;color:var(--text-mid)}
.platforms a{color:var(--text-hi);text-underline-offset:4px}

/* ---------- 05 · Manuel (claro · texto a la derecha · puede extenderse) ---------- */
.s-manuel .split{align-items:center}
.s-manuel .media-card{height:min(70vh,660px)}
.s-manuel .media-card img{object-position:50% 20%;filter:contrast(1.06)}
.s-manuel .media-card .sign{position:absolute;left:26px;bottom:30px;font-size:clamp(32px,min(3vw,5.4vh),52px);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.s-manuel .media-card .sign small{display:block;transform:rotate(7deg);font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;text-align:left;margin-top:14px;opacity:.9}
.s-manuel .screen-copy{max-width:580px;padding-top:clamp(0px,2vh,24px)}
.story p:not(.eyebrow){font-size:clamp(15.5px,min(1.05vw,2vh),17.5px);line-height:1.7;color:var(--text-ink-mid);margin-bottom:16px}
.story p:not(.eyebrow) strong{color:var(--text-ink);font-weight:600}
.story blockquote{margin:clamp(20px,3.4vh,30px) 0;padding:0 0 0 22px;border-left:3px solid var(--kf-yellow);font-size:clamp(20px,min(1.6vw,3vh),27px);line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--text-ink)}
.story blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-ink-mid)}
.journey{list-style:none;margin:0 0 clamp(20px,3.4vh,28px);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.journey li{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto 1fr;gap:3px 14px;align-items:start;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.45);border:1px solid var(--line-ink);
  transition:background var(--t-normal) var(--ease),border-color var(--t-normal) var(--ease)}
.journey li:hover{background:#fff;border-color:rgba(20,20,20,.2)}
.journey .ic{grid-row:span 2;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ink-900);color:var(--kf-yellow)}
.journey li:first-child .ic{background:var(--kf-yellow);color:var(--ink-900)}
.journey svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.journey b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--text-ink)}
.journey span:not(.ic){font-size:13px;line-height:1.45;color:var(--text-ink-mid)}

/* ---------- 06 · Contacto (oscuro · centrado) ----------
   Cierre: una frase grande, una sola acción (WhatsApp) y los datos para quien prefiere otro canal. */
.s-contacto::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 55% at 50% 58%,rgba(245,238,53,.11),transparent 70%)}
.s-contacto .watermark{position:absolute;right:-4vw;bottom:-8vh;z-index:-1;width:min(46vw,760px);opacity:.05;pointer-events:none}
.s-contacto .screen-copy{max-width:900px}
.s-contacto h2{font-size:var(--fs-h1);max-width:none;margin-bottom:clamp(16px,2.8vh,24px)}
.s-contacto .lead{max-width:34em;margin-bottom:clamp(26px,4.4vh,38px)}
.channels{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px;margin:clamp(34px,6vh,56px) auto 0;padding:clamp(18px,3vh,24px) 0 0;border-top:1px solid var(--line)}
.channels li{padding:0 18px;display:flex;flex-direction:column;align-items:center;gap:2px}
.channels li+li{border-left:1px solid var(--line)}
.channels svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;opacity:.9}
.channels b{font-size:14.5px;font-weight:700}
.channels span,.channels a{font-size:13.5px;color:var(--text-mid);text-decoration:none}
.channels a:hover{color:var(--kf-yellow)}
.also{margin-top:clamp(22px,3.6vh,30px);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:14px;color:var(--text-mid)}
.also a{color:var(--text-hi);font-weight:600;text-underline-offset:4px}
.also a:hover{color:var(--kf-yellow)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:95;width:56px;height:56px;border-radius:50%;
  background:var(--wa-green);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  transition:opacity var(--t-normal) var(--ease),transform var(--t-normal) var(--ease),visibility var(--t-normal)}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:scale(1.06)}
.wa-float.is-hidden{opacity:0;visibility:hidden;transform:translateY(12px) scale(.9)}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:1;background:var(--ink-950);padding:120px 0 28px;overflow:hidden}
.site-footer .word{position:absolute;top:22px;left:0;right:0;text-align:center;white-space:nowrap;font-size:clamp(56px,10.5vw,180px);font-weight:800;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);user-select:none;pointer-events:none}
.site-footer .grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-top:30px}
.site-footer .brand img{height:80px;width:auto;margin-bottom:18px}
.site-footer p{color:var(--text-mid);font-size:14.5px;max-width:320px}
.site-footer h2{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-low);margin-bottom:16px;line-height:1.4}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px}
.site-footer a{text-decoration:none;transition:color var(--t-fast) var(--ease)}
.site-footer a:hover{color:var(--kf-yellow)}
.site-footer .disclaimer{margin-top:48px;font-size:12.5px;color:var(--text-low);max-width:none}
.site-footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin-top:20px;padding-top:22px;border-top:1px solid var(--ink-600);font-size:12.5px;color:var(--text-low)}
.site-footer .legal nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* =========================================================
   PÁGINAS INTERNAS (Consultorio, Academy, Podcast, Manuel…)
   Mismo sistema que la Home, pero de lectura: secciones por
   padding (no por pantalla), sin fundido entre secciones,
   breadcrumbs y sidenav con las secciones de la página.
   ========================================================= */

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--text-mid);margin-bottom:clamp(18px,3vh,28px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a{text-decoration:none;padding:4px 0}
.crumbs a:hover{color:var(--text-hi);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--text-hi);font-weight:600}

/* ---------- Hero de página interna ----------
   Mismo lenguaje que el hero de la Home: casi a pantalla completa, foto protagonista con un velo que oscurece
   del lado del texto, y a la izquierda la ruta, el pretítulo en el color del área y el nombre de la página bien grande.
   Queda un margen abajo para que asome la sección 01 (clara): se entiende que la página sigue. */
.page-banner{--acc:var(--kf-yellow);position:relative;isolation:isolate;overflow:hidden;min-height:min(74svh,820px);display:flex;align-items:center;
  padding:calc(var(--header-h) + clamp(14px,2.4vh,26px)) 0 clamp(40px,6.5vh,76px);background:var(--ink-900)}
.page-banner-media{position:absolute;inset:0;z-index:-2}
.page-banner-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.85);animation:photo-in 2.6s var(--ease) both}
/* Consultorio: el grupo de la foto está corrido a la izquierda; se amplía apenas y se desplaza para centrarlo */
.page-banner-media img.shift{scale:1.14;translate:9% 0}
/* Podcast: la cara de Manuel queda a la altura del título, a su derecha */
.page-banner-media img.pod{object-position:50% 52%}
.page-banner-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(40% 60% at 8% 55%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%),
  linear-gradient(90deg,rgba(14,14,14,.93) 0%,rgba(14,14,14,.8) 32%,rgba(14,14,14,.4) 62%,rgba(14,14,14,.22) 100%),
  linear-gradient(180deg,rgba(14,14,14,.65) 0%,rgba(14,14,14,0) 24%),
  linear-gradient(0deg,rgba(14,14,14,.6) 0%,rgba(14,14,14,0) 32%)}
.page-banner .crumbs{margin:0 0 clamp(22px,3.6vh,34px)}
.page-banner .eyebrow{color:var(--acc);margin-bottom:clamp(14px,2.4vh,22px)}
.page-banner .eyebrow::after{opacity:.6}
.pb-title{font-size:clamp(60px,min(9vw,15vh),172px);line-height:.88;letter-spacing:-.055em;color:#fff;max-width:8.4em;text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.pb-title .dot{color:var(--acc)}
/* Títulos largos (p. ej. el nombre de un curso): más chicos y en bloque equilibrado */
.pb-title--long{font-size:clamp(44px,min(6.2vw,11vh),120px);line-height:.92;max-width:9.5em}
/* Podcast: el nombre en dos líneas, lejos de la cara de Manuel */
#podcast .pb-title{max-width:6.2em}


/* Sección 01 (presentación): clara, papel; logo del área (o la firma de Manuel) arriba, título, bajada,
   y a la derecha los datos clave en un panel. La 02 sigue en hueso, separada por un filete. */
.section.is-light.intro-sec{background:var(--paper);border-bottom:1px solid var(--line-ink)}
/* Foto de un lado y texto del otro, en Z con la sección 02 (.is-rev = foto a la derecha) */
.intro-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,110px);align-items:center}
.intro-split.is-rev{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.intro-split .media-card{height:clamp(400px,64vh,620px)}
.intro-split .media-card img{object-position:50% 22%}
.intro-split .intro-facts{margin-top:clamp(26px,4.4vh,38px);padding-top:clamp(22px,3.6vh,30px);border-top:1px solid var(--line-ink)}
.intro-sec .lead strong{color:var(--text-ink);font-weight:700}
.intro-sec .ctas{margin-top:clamp(22px,3.6vh,30px)}
.ic-logo{display:block;height:clamp(60px,8vh,92px);width:auto;margin:0 0 clamp(18px,3vh,26px)}
.intro-sign{font-family:var(--script);font-weight:400;font-size:clamp(42px,3.6vw,60px);line-height:1;letter-spacing:0;color:var(--text-ink);display:inline-block;transform:rotate(-5deg);margin:0 0 clamp(18px,3vh,26px)}
/* Datos con el ícono en un chip del color del área */
.intro-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.6vh,32px) clamp(20px,2.4vw,36px)}
.intro-facts li{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:center}
.intro-facts .ic{grid-row:span 2;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--kf-yellow);color:var(--ink-900)}
.intro-facts .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.intro-facts b{align-self:end;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--text-ink)}
.intro-facts span:not(.ic){align-self:start;font-size:14px;line-height:1.4;color:var(--text-ink-mid)}
body.com .intro-facts .ic{color:#fff}
/* Copia de los datos: solo la usa la cinta de mobile */
.intro-facts .dup{display:none}

/* ---------- Sección de lectura ---------- */
.section{position:relative;padding:clamp(84px,12vh,140px) 0;background:var(--ink-900);overflow:hidden;overflow:clip}
.section.is-light{background:var(--bone-100);color:var(--text-ink)}
.section h2{font-size:var(--fs-h2);max-width:15em;margin-bottom:clamp(14px,2.4vh,20px)}
.section .lead{font-size:var(--fs-lead);line-height:1.62;color:var(--text-mid);max-width:36em}
/* Botones en fila dentro de las secciones (se apilan si no entran) */
.section .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Aire entre la bajada y los datos que la siguen */
.section .lead+.facts,.section .lead+.ep-meta{margin-top:clamp(20px,3.2vh,28px)}
.section.is-light .lead{color:var(--text-ink-mid)}
.section-head{max-width:760px;margin-bottom:clamp(36px,6vh,56px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center h2,.section-head.center .lead{margin-left:auto;margin-right:auto}
.prose p{font-size:clamp(15.5px,1.05vw,17px);line-height:1.72;color:var(--text-ink-mid);margin-bottom:14px;max-width:36em}
.prose strong{color:var(--text-ink);font-weight:700}

/* 01 · Qué es keto */
.keto-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,110px);align-items:start}
.benefits{list-style:none;margin:clamp(22px,3.6vh,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.benefits li{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:16px;background:rgba(255,255,255,.5);border:1px solid var(--line-ink)}
.benefits .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--ink-900);color:var(--kf-yellow);margin-bottom:8px}
.benefits li:first-child .ic{background:var(--kf-yellow);color:var(--ink-900)}
.benefits svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.benefits b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.benefits span:not(.ic){font-size:13.5px;line-height:1.5;color:var(--text-ink-mid)}
.video-card{margin:0;justify-self:center;width:min(100%,360px);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-900);color:var(--text-hi);box-shadow:0 40px 80px -40px rgba(20,20,20,.55)}
.video-card video{display:block;width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;background:#000}
.video-card figcaption{display:flex;flex-direction:column;gap:2px;padding:14px 18px 16px}
/* Video con vista previa: se mueve solo (mudo, en loop) bajo un velo; el botón invita a verlo completo con sonido */
.vp-frame{position:relative}
.vp-btn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(0deg,rgba(14,14,14,.82) 0%,rgba(14,14,14,.45) 45%,rgba(14,14,14,.3) 100%);transition:background var(--t-normal) var(--ease)}
.vp-btn:hover{background:linear-gradient(0deg,rgba(14,14,14,.7) 0%,rgba(14,14,14,.32) 45%,rgba(14,14,14,.18) 100%)}
.vp-play{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--kf-yellow);color:var(--ink-900);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);transition:transform var(--t-normal) var(--ease)}
.vp-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--kf-yellow);opacity:.6;animation:vp-ring 2.2s var(--ease) infinite}
@keyframes vp-ring{from{transform:scale(.85);opacity:.7}to{transform:scale(1.35);opacity:0}}
.vp-play svg{width:26px;height:26px;margin-left:4px;color:var(--ink-900);fill:var(--ink-900)}
.vp-btn:hover .vp-play{transform:scale(1.07)}
.vp-label{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1.6;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.6)}
[data-vplay].is-playing .vp-btn{display:none}
.video-card b{font-size:15px}
.video-card figcaption span{font-size:13px;color:var(--text-mid)}

/* 02 · Planes */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1060px;margin:0 auto}
.plan{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3.2vw,40px);border-radius:var(--r-lg);background:var(--ink-800);border:1px solid var(--line);position:relative}
.plan.is-top{border-color:rgba(245,238,53,.5);background:linear-gradient(180deg,rgba(245,238,53,.06),rgba(245,238,53,0) 40%),var(--ink-800)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.plan .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--ink-600);color:var(--kf-yellow)}
.plan.is-top .ic{background:var(--kf-yellow);color:var(--ink-900)}
.plan .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.plan .tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.08)}
.plan.is-top .tag{background:rgba(245,238,53,.16);color:var(--kf-yellow)}
.plan h3{font-size:clamp(26px,2.2vw,34px);letter-spacing:-.035em}
.plan>p{font-size:15.5px;line-height:1.6;color:var(--text-mid)}
.check{list-style:none;margin:4px 0;padding:14px 0;display:grid;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.check li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.check li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:rgba(245,238,53,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EE35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.ideal{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-mid)}
.ideal svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--kf-yellow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{align-self:flex-start;margin-top:auto}
.plans-note{text-align:center;margin-top:28px;font-size:14.5px;color:var(--text-mid)}
.plans-note a{color:var(--text-hi);font-weight:600;text-underline-offset:4px}
.plans-note a:hover{color:var(--kf-yellow)}

/* Componentes de lectura que funcionan sobre fondo oscuro o claro (la sección define el tono) */
.section{--fg:var(--text-hi);--fg-mid:var(--text-mid);--card:var(--ink-800);--card-line:var(--line);--card-hover:#1f1f1f}
.section.is-light{--fg:var(--text-ink);--fg-mid:var(--text-ink-mid);--card:rgba(255,255,255,.55);--card-line:var(--line-ink);--card-hover:#fff}
.hl{color:var(--kf-yellow)}

/* Invitación a la sección siguiente */
.next-step{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(26px,4.4vh,40px);padding-top:clamp(20px,3.4vh,28px);border-top:1px solid var(--card-line)}
.next-step p{font-size:16px;font-weight:600;color:var(--fg)}
.next-step p span{display:block;font-size:14px;font-weight:500;color:var(--fg-mid)}

/* Cómo funciona */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.steps li{display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.steps .num{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1;margin-bottom:12px;color:var(--fg)}
.steps .num::after{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--kf-yellow);margin-top:12px}
.steps b{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--fg)}
.steps span:not(.num){font-size:14.5px;line-height:1.55;color:var(--fg-mid)}
.hours-line{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:14.5px;color:var(--fg-mid)}
.hours-line b{color:var(--fg);font-weight:600}
.hours-line svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Equipo */
.team-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center}
.team-grid .media-card{height:min(64vh,620px)}
.team-grid .media-card img{object-position:38% 40%}
.supervisor{display:flex;align-items:center;gap:16px;margin:clamp(22px,3.6vh,30px) 0 14px;padding:12px 18px 12px 12px;border-radius:18px;background:var(--card);border:1px solid var(--card-line)}
.supervisor img{width:62px;height:62px;border-radius:14px;object-fit:cover;object-position:50% 20%}
.supervisor b{display:block;font-size:16px;color:var(--fg)}
.supervisor span{font-size:13.5px;color:var(--fg-mid)}
.members{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.members li{display:grid;grid-template-columns:44px 1fr;gap:0 12px;align-items:center;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--card-line)}
.members li.wide{grid-column:1/-1}
.members .av{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ink-900);font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--kf-yellow)}
.members b{font-size:14.5px;color:var(--fg)}
.members span:not(.av){font-size:13px;color:var(--fg-mid)}

/* Historias */
.testimonial{margin:0;display:flex;flex-direction:column;gap:18px;justify-content:space-between;padding:26px;border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.testimonial:last-of-type{grid-column:2/-1}
.testimonial p{font-size:16px;line-height:1.55;font-weight:500;color:var(--fg)}
.testimonial footer{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--fg-mid)}
.testimonial footer b{display:block;font-size:14.5px;color:var(--fg)}
.testimonial .av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--kf-yellow);font-size:13px;font-weight:800;color:var(--ink-900)}

/* Preguntas frecuentes */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px);align-items:start}
.faq-side{position:sticky;top:calc(var(--header-h-compact) + 40px)}
.help{display:flex;flex-direction:column;gap:6px;margin-top:clamp(20px,3.4vh,30px);padding:24px;border-radius:20px;max-width:380px;
  background:var(--kf-yellow);color:var(--ink-900);box-shadow:0 24px 50px -28px rgba(14,14,14,.45)}
.help b{font-size:17px;color:var(--ink-900)}
.help span{font-size:14px;color:rgba(14,14,14,.72);margin-bottom:8px}
.help .text-link{align-self:flex-start;color:var(--ink-900);font-weight:700}
.faq details{border-bottom:1px solid var(--card-line);border-radius:0;transition:background var(--t-normal) var(--ease)}
/* La pregunta abierta se marca con una franja del color del área y un fondo apenas tintado */
.faq details[open]{background:color-mix(in srgb,var(--kf-yellow) 16%,transparent);border-left:3px solid var(--kf-yellow);border-radius:0 14px 14px 0;border-bottom-color:transparent}
.faq details[open] summary{padding-left:20px;padding-right:16px}
.faq details[open] p{padding-left:20px}
.faq summary:hover{color:var(--fg)}
.faq details:first-child{border-top:1px solid var(--card-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--fg);transition:opacity var(--t-fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq details:not([open]) summary:hover{opacity:.7}
.faq summary i{flex:none;position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--card-line);transition:background var(--t-normal) var(--ease),border-color var(--t-normal) var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--t-normal) var(--ease)}
.faq details[open] summary i{background:var(--kf-yellow);border-color:var(--kf-yellow);color:var(--ink-900)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details p{padding:0 48px 22px 0;font-size:15.5px;line-height:1.65;color:var(--fg-mid)}
.faq details[open] p{animation:fade-in .5s var(--ease) both}
.faq details p a{color:var(--fg);font-weight:600;text-underline-offset:4px}

/* ---------- Academy ----------
   Dentro del contenido de la página de Academy el acento pasa a ser el naranja del logo:
   se redefine el color de acento solo en <main> y el sidenav (header y footer siguen siendo de marca). */
body.aca main,body.aca .sidenav{--kf-yellow:var(--aca);--kf-yellow-hover:#E06400}
body.com main,body.com .sidenav{--kf-yellow:var(--com-red);--kf-yellow-hover:#C41E15}
body.com main .btn-primary{--fg:#fff}
.explore a.kf{--acc:#F5EE35}


/* Catálogo de formaciones */
.catalog{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:16px;align-items:stretch}
.course-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:1px solid var(--card-line);
  transition:border-color var(--t-normal) var(--ease),box-shadow var(--t-normal) var(--ease)}
.course-card:hover{border-color:color-mix(in srgb,var(--kf-yellow) 60%,transparent);box-shadow:0 30px 60px -40px rgba(20,20,20,.45)}
.cc-media{position:relative;display:block;min-height:320px;overflow:hidden;background:var(--ink-800)}
.cc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%;filter:grayscale(1) contrast(1.08);transition:transform .7s var(--ease)}
.course-card:hover .cc-media img{transform:scale(1.04)}
.cc-tag{position:absolute;left:16px;top:16px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-900);background:var(--kf-yellow);padding:7px 11px;border-radius:var(--r-pill)}
.cc-body{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.6vw,34px)}
.cc-kind{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--kf-yellow)}
.is-light .cc-kind{color:#C25600}
.course-card h3{font-size:clamp(24px,2vw,30px);line-height:1.1;letter-spacing:-.03em}
.course-card h3 a{text-decoration:none}
.course-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.cc-body>p{font-size:15px;line-height:1.6;color:var(--fg-mid)}
.cc-meta{list-style:none;margin:2px 0;padding:14px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line)}
.cc-meta li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--fg)}
.cc-meta svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--kf-yellow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.is-light .cc-meta svg{stroke:#C25600}
.cc-chips{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cc-chips li{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(20,20,20,.06);color:var(--fg)}
.cc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:6px}
.cc-price{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--fg);line-height:1.1}
.cc-body>.cc-price{font-size:26px}
.cc-price small{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mid)}
.course-card.soon{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(24px,2.6vw,34px);background:transparent;border:1.5px dashed var(--card-line)}
.course-card.soon:hover{box-shadow:none}
.soon-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--ink-900);color:var(--kf-yellow);margin-bottom:6px}
.soon-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.course-card.soon h3{font-size:clamp(22px,1.8vw,26px)}
.course-card.soon p:not(.cc-kind){font-size:15px;line-height:1.6;color:var(--fg-mid)}
.course-card.soon .text-link{margin-top:auto;color:var(--fg)}

/* Para quién */
.audiences{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.audiences li,.features li{display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.audiences .ic,.features .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--kf-yellow);color:var(--ink-900);margin-bottom:10px}
.features .ic{background:var(--ink-900);color:var(--kf-yellow)}
.audiences svg,.features svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.audiences b,.features b{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--fg)}
.audiences span:not(.ic),.features span:not(.ic){font-size:14.5px;line-height:1.55;color:var(--fg-mid)}
.quote-line{margin-top:clamp(36px,6vh,56px);font-size:clamp(24px,2.4vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--fg)}

/* Cómo es formarte */
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

/* Academy · Nuestra mirada: manifiesto (título a la izquierda, principios numerados a la derecha) */
.mirada-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center}
.principles{list-style:none;margin:0;padding:0}
.principles{margin-top:clamp(20px,3.4vh,32px)}
.principles li{display:grid;grid-template-columns:clamp(64px,6vw,90px) 1fr;gap:4px 20px;padding:clamp(20px,3.2vh,28px) 0;border-top:1px solid var(--card-line)}
.principles li:last-child{border-bottom:1px solid var(--card-line)}
.principles .num{grid-row:span 2;font-size:clamp(40px,4vw,60px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--kf-yellow)}
.principles b{font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.principles span:not(.num){font-size:15px;line-height:1.55;color:var(--fg-mid)}
.is-light .principles .num{color:transparent;-webkit-text-stroke:1.4px var(--text-ink)}
/* Academy · Para quién: tres columnas tipográficas. Las profesiones son lo grande (cada visitante busca la suya);
   el grupo va como etiqueta chica con su ícono. Distinto de "Nuestra mirada" (filas numeradas con descripción). */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.6vw,64px)}
.who-col{border-top:2px solid var(--fg);text-align:center}
.who-label{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:clamp(18px,2.6vh,24px) 0 clamp(8px,1.4vh,12px);
  font-size:11.5px;font-weight:700;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;color:var(--fg-mid)}
.who-label .ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--kf-yellow);color:var(--ink-900)}
.who-label .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.who ul{list-style:none;margin:0;padding:0}
.who li{padding:clamp(12px,2vh,18px) 0;border-bottom:1px solid var(--card-line);font-size:clamp(22px,1.9vw,30px);font-weight:700;letter-spacing:-.035em;line-height:1.15;color:var(--fg)}

/* ---------- Podcast ---------- */
/* Último episodio: video grande a la izquierda, datos y acciones a la derecha */
/* Texto a la izquierda y video a la derecha: sigue la Z que arranca con la foto de la 01 a la izquierda */
.latest{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,4.6vw,84px);align-items:center}
.latest h2{font-size:clamp(32px,2.9vw,50px)}
/* Video liviano: se ve la portada y el reproductor de YouTube se carga recién al hacer clic */
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(20,20,20,.55)}
.yt iframe,.yt-btn{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-btn{display:block;padding:0;background:none;cursor:pointer}
.yt-btn img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.yt-btn:hover img{transform:scale(1.03)}
.yt-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(64px,6.5vw,92px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--com-red);color:#fff;box-shadow:0 0 0 10px rgba(227,38,28,.28);transition:transform var(--t-normal) var(--ease),box-shadow var(--t-normal) var(--ease)}
.yt-btn:hover .yt-play,.yt-btn:focus-visible .yt-play{transform:scale(1.06);box-shadow:0 0 0 16px rgba(227,38,28,.2)}
.yt-play svg{width:32%;height:32%;margin-left:7%}
.ep-meta{list-style:none;margin:0 0 clamp(24px,4vh,32px);padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:600;color:var(--fg)}
.ep-meta li{display:flex;align-items:center;gap:8px}
.ep-meta svg{width:18px;height:18px;fill:none;stroke:var(--com-red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Episodios: grilla de portadas (mismas tarjetas que la Home) */
.ep-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ep-grid .episode{display:flex;flex-direction:column}
.ep-grid .episode .info{flex:1;align-items:flex-start}
.ep-grid .episode b{font-size:15px}
.ep-more{display:flex;justify-content:center;margin-top:clamp(36px,6vh,56px)}
/* Invitados: dos columnas de filas; cada fila lleva al episodio */
.guests{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px);border-top:1px solid var(--card-line)}
.guests a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 20px;padding:clamp(18px,3vh,26px) 0;border-bottom:1px solid var(--card-line);text-decoration:none;color:var(--fg)}
.guests b{font-size:clamp(20px,1.7vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.guests b span{font-size:.6em;font-weight:600;letter-spacing:0;color:var(--fg-mid)}
.guests b{grid-column:2}
.guests .g-ep{grid-column:2;font-size:14px;line-height:1.45;color:var(--fg-mid)}
.guests .g-ep em{font-style:normal;font-weight:800;letter-spacing:.06em;color:var(--com-red);margin-right:8px}
.guests svg{grid-row:1/span 2;grid-column:3;width:20px;height:20px;transition:transform var(--t-normal) var(--ease),color var(--t-normal) var(--ease)}
.guests a:hover svg{transform:translateX(4px);color:var(--com-red)}
/* Cara del invitado en un círculo, con un aro fino del rojo del podcast */
.g-face{grid-row:1/span 2;grid-column:1;width:clamp(52px,4vw,64px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--com-red);
  box-shadow:0 0 0 2px var(--bone-100),0 0 0 3.5px color-mix(in srgb,var(--com-red) 60%,transparent)}
.g-face img{width:100%;height:100%;object-fit:cover}
.g-ini{display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff}

/* ---------- Sobre mí ---------- */
/* Historia: texto a la izquierda, retrato a la derecha */
.story-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,110px);align-items:center}
.me-card .sign{position:absolute;left:26px;bottom:30px;font-size:clamp(32px,min(3vw,5.4vh),52px);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.me-card .sign small{display:block;transform:rotate(7deg);font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;text-align:left;margin-top:14px;opacity:.9}
/* Hoy: las tres partes del ecosistema, cada una con su color y su página */
.built{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.built li{--acc:var(--kf-yellow)}
.built li.aca{--acc:var(--aca)}
.built li.com{--acc:var(--com-red)}
.built a{height:100%;display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);text-decoration:none;
  background:var(--ink-800);border:1px solid var(--line);border-top:2px solid var(--acc);transition:transform var(--t-normal) var(--ease),border-color var(--t-normal) var(--ease)}
.built a:hover{transform:translateY(-3px);border-color:var(--acc)}
.built .lg{height:clamp(58px,7vh,72px);margin-bottom:clamp(8px,1.6vh,14px)}
.built .lg img{height:100%;width:auto}
.built small{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.built b{font-size:clamp(21px,1.75vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--text-hi)}
.built .tx{font-size:15px;line-height:1.6;color:var(--text-mid);flex:1}
.built .go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.built .go svg{width:16px;height:16px;transition:transform var(--t-normal) var(--ease)}
.built a:hover .go svg{transform:translateX(4px)}
.social-line{margin-top:clamp(22px,3.6vh,32px);font-size:14px;color:var(--fg-mid)}
.social-line a{color:var(--fg);font-weight:700;text-underline-offset:4px}
/* ---------- Cintas en movimiento (fotos con pacientes, testimonios) ----------
   El contenido va dos veces y se desplaza la mitad: el giro es continuo, sin cortes. Se frena al pasar el mouse;
   si el sistema pide menos movimiento, queda quieta y se recorre deslizando. */
.marquees{margin-top:clamp(8px,2vh,20px)}
.marquee{--gap:clamp(12px,1.4vw,20px);position:relative;overflow:hidden;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee+.marquee{margin-top:var(--gap)}
.marquee-track{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:var(--gap);width:max-content;animation:marquee var(--dur,80s) linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--gap) / 2))}}
.pm-photo{flex:none;width:clamp(170px,14.5vw,250px);aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800)}
.pm-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pm-photo:hover img{transform:scale(1.04)}
.marquee .testimonial{flex:none;width:clamp(290px,27vw,430px)}
/* Home: la cinta cierra la pantalla de Manuel, sobre el mismo hueso */
.home-band{position:relative;background:var(--bone-100);color:var(--text-ink);padding:0 0 clamp(72px,11vh,120px);--fg:var(--text-ink);--fg-mid:var(--text-ink-mid)}
.home-band .band-cap{margin-top:0}
.band-more{margin-top:clamp(22px,3.6vh,32px);text-align:center}
/* Sobre mí: la cinta cierra "Mi historia" con su voz (manuscrita) */
.band-cap{margin:clamp(48px,8vh,84px) 0 clamp(14px,2.4vh,22px);text-align:center;font-family:var(--script);font-size:clamp(38px,3.4vw,56px);line-height:1;color:var(--fg)}

/* ---------- Slider con miniaturas (En los medios) ----------
   Fila que se desliza (dedo, trackpad o flechas); la tarjeta que asoma al borde avisa que hay más. */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4.6vh,44px)}
.head-row .section-head{margin-bottom:0}
.slider-nav{display:flex;gap:10px;flex:none}
.slider-btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;background:none;color:var(--fg);border:1px solid var(--card-line);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.slider-btn:hover:not([disabled]){background:var(--kf-yellow);border-color:var(--kf-yellow);color:var(--ink-900)}
.slider-btn[disabled]{opacity:.3;cursor:default}
.slider-btn svg{width:18px;height:18px}
.slider-btn .flip{transform:scaleX(-1)}
.slider-track{list-style:none;margin:0;padding:0 0 4px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,23.5vw,350px);gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.slider-track::-webkit-scrollbar{display:none}
/* La fila llega hasta el borde de la pantalla: la tarjeta que asoma se ve entera hacia el borde, no cortada en el contenedor */
.slider-track{margin-right:calc((100% - 100vw) / 2);padding-right:calc((100vw - 100%) / 2)}
.slider-track>li{scroll-snap-align:start}
.mcard{display:flex;flex-direction:column;gap:6px;height:100%;text-decoration:none;color:var(--fg)}
.mc-thumb{position:relative;display:block;aspect-ratio:16/9;margin-bottom:10px;border-radius:18px;overflow:hidden;background:var(--ink-800);border:1px solid var(--line)}
.mc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mcard:hover .mc-thumb img{transform:scale(1.04)}
.mc-play{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--kf-yellow);color:var(--ink-900);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);transition:transform var(--t-normal) var(--ease)}
.mc-play svg{width:14px;height:14px;margin-left:2px}
.mcard:hover .mc-play{transform:scale(1.08)}
.mc-thumb.is-press{display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;background:linear-gradient(135deg,#1c1c1c,#0f0f0f)}
.mc-thumb.is-press svg{width:26px;height:26px;fill:none;stroke:var(--kf-yellow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mc-thumb.is-press em{font-style:normal;font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff}
.mc-tag{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--kf-yellow)}
.mcard b{font-size:clamp(17px,1.3vw,20px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.mc-meta{font-size:13.5px;line-height:1.45;color:var(--fg-mid)}

/* Banner: la cara queda a la altura del título, a su derecha */
.page-banner-media img.me{object-position:50% 30%}

/* Testimonios de colegas */
.quotes-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.quotes-3 .testimonial:last-of-type{grid-column:auto}

/* Cierre de página */
.page-end{text-align:center;border-top:1px solid var(--line)}
.page-end::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(45% 60% at 50% 40%,color-mix(in srgb,var(--kf-yellow) 10%,transparent),transparent 70%)}
.page-end .container{position:relative}
.page-end h2{font-size:var(--fs-h1);max-width:none}
.page-end .lead{margin:0 auto clamp(26px,4.4vh,36px);max-width:34em}
.page-end .ctas{display:flex;justify-content:center}
.explore{margin-top:clamp(48px,8vh,80px)}
.explore>p{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--text-mid);margin-bottom:14px}
.explore ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:880px;text-align:left}
.explore a{--acc:var(--kf-yellow);display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:16px 18px;border-radius:16px;text-decoration:none;background:var(--ink-800);border:1px solid var(--line);transition:border-color var(--t-normal) var(--ease),transform var(--t-normal) var(--ease)}
.explore a:hover{border-color:var(--acc);transform:translateY(-2px)}
.explore a.aca{--acc:var(--aca)}
.explore a.com{--acc:var(--com-red)}
.explore b{font-size:15.5px}
.explore span{grid-column:1;font-size:13px;color:var(--text-mid)}
.explore svg{grid-row:1/span 2;grid-column:2;width:18px;height:18px;color:var(--acc);transition:transform var(--t-normal) var(--ease)}
.explore a:hover svg{transform:translateX(3px)}

/* ---------- Revelado al entrar en pantalla (una vez · fundido con desenfoque, sin desplazamiento) ---------- */
.js .reveal{opacity:0;translate:0 14px;transition:opacity .8s var(--ease),translate .9s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;translate:none}
.js .reveal-media img{opacity:0;transition:opacity .9s var(--ease)}
.js .reveal-media.is-in img{opacity:1}
.js .reveal-card{opacity:0;translate:0 18px;transition:opacity .8s var(--ease),translate .9s var(--ease);transition-delay:var(--d,0s)}
.js .reveal-card.is-in{opacity:1;translate:none}

/* ---------- Transición entre páginas (View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s var(--ease) both}
::view-transition-new(root){animation:vt-in .45s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .site-header nav.main,.site-header .cta{display:none}
  .menu-btn{display:grid}
  /* Barra de ruta fija (solo páginas internas): aparece al dejar atrás el hero, que ya muestra la ruta completa */
  .m-crumb{display:block;max-height:0;overflow:hidden;opacity:0;border-top:1px solid transparent;
    transition:max-height var(--t-normal) var(--ease),opacity var(--t-normal) var(--ease),border-color var(--t-normal) var(--ease)}
  .site-header:not(.over-hero) .m-crumb{max-height:44px;opacity:1;border-top-color:rgba(255,255,255,.08)}
  .m-crumb .container{display:flex;align-items:center;gap:12px;height:42px;font-size:13px}
  .mc-back{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;text-decoration:none;font-weight:600;color:var(--text-mid)}
  .mc-back svg{width:15px;height:15px;transform:scaleX(-1);color:var(--mc-acc,var(--kf-yellow))}
  .mc-here{min-width:0;display:flex;align-items:baseline;gap:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.16);white-space:nowrap;overflow:hidden}
  .mc-here b{flex:none;font-weight:700;color:var(--mc-acc,var(--kf-yellow))}
  .mc-sec{overflow:hidden;text-overflow:ellipsis;color:var(--text-hi);opacity:.85}
  .mc-sec:not(:empty)::before{content:"· ";color:var(--text-mid)}
  body.aca .m-crumb{--mc-acc:var(--aca)}
  body.com .m-crumb{--mc-acc:var(--com-red)}
  .sidenav{display:none}
  .screen-copy,.hero .screen-copy{max-width:600px}
  .s-podcast .split{grid-template-columns:1fr}
  .hero{--img-h:min(100svh,90vw);--sig-fs:28px}
  .hero .screen-media img{left:auto;right:-18%}
  .hero .signature{top:auto;bottom:22vh}
  .site-footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:34px}
  .split .media-card{height:clamp(300px,50vh,500px)}
  .course{grid-template-columns:1fr}
  .course .media{min-height:240px}
  .s-manuel .media-card{height:clamp(380px,62vh,560px)}
  .journey{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--header-h:74px;--header-h-compact:66px;--gutter:20px;--fs-h1:clamp(38px,10.6vw,48px);--fs-h2:clamp(30px,8.6vw,40px);--fs-lead:16px}
  .site-header .brand img{height:52px}
  .site-header.is-scrolled .brand img{height:44px}

  /* Mobile pensado aparte: foto arriba, texto abajo */
  .screen{display:block;min-height:0;padding:56px 0 60px}
  .screen-copy,.hero .screen-copy{max-width:none}
  .screen-copy .ctas .btn{width:100%}
  .side-note{right:20px;top:calc(var(--header-h) + 10px);font-size:9.5px;letter-spacing:.26em}

  .hero{padding:0 0 40px}
  .hero .screen-media{position:relative;height:clamp(440px,68svh,660px)}
  .hero .screen-media img{position:static;width:100%;height:100%;object-fit:cover;object-position:54% 24%;translate:none;-webkit-mask-image:none;mask-image:none}
  .hero .screen-media::after{background:linear-gradient(0deg,rgba(14,14,14,1) 0%,rgba(14,14,14,0) 40%),linear-gradient(180deg,rgba(14,14,14,.6) 0%,rgba(14,14,14,0) 22%)}
  .hero .signature{position:relative;top:auto;bottom:auto;right:auto;margin:-150px 20px 0 auto;text-align:right;display:block;width:max-content}
  .hero .signature .sign{font-size:34px}
  .hero .signature small{font-size:8.5px}
  .hero .screen-inner{margin-top:16px;translate:none}
  .hero .kicker{font-size:10.5px;margin-bottom:12px;letter-spacing:.36em}
  .hero h1{font-size:min(var(--fs-h1),(100vw - 40px)/9.3)}
  .hero .lead{font-size:16px}
  .br-d{display:none}
  .hero .ctas .btn{width:100%}
  .portal{max-width:none;margin-top:28px}
  .hero .k-name{display:none}
  .hero .lead{max-width:none}
  .portal ul{grid-template-columns:1fr;gap:8px}
  .hero{padding-bottom:0}
  .ticker{position:relative;margin-top:36px}

  .facts,.facts--3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .facts li:nth-child(odd){padding-left:0;border-left:0}
  .facts li:nth-child(even){padding-right:0}
  .s-academy .screen-media,.s-contacto .screen-media{position:absolute;inset:0}
  .options li{grid-template-columns:40px 1fr}
  .options .ic{width:40px;height:40px}
  .options .tag{grid-column:2;justify-self:start;margin-top:4px}
  .featured{flex-wrap:wrap}
  .featured svg{display:none}
  .platforms{flex-wrap:wrap}
  .channels{grid-template-columns:1fr;gap:18px}
  .channels li+li{border-left:0}
  .s-contacto .btn-lg{width:100%}

  .bignum{font-size:46vw}
  .title-logo{flex-direction:column;gap:14px}
  .center .title-logo h2{text-align:center;width:auto}
  .s-academy .area-logo{height:84px}
  .site-footer{padding-top:84px}
  .site-footer .grid{grid-template-columns:1fr;gap:30px}
  .wa-float{width:52px;height:52px;right:16px}
}
@media (min-width:440px) and (max-width:760px){

}

/* ---------- Páginas internas · responsive ---------- */
@media (max-width:1180px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testimonial:last-of-type{grid-column:auto}
}
@media (max-width:900px){
  .keto-grid,.team-grid,.faq-grid{grid-template-columns:1fr}
  .catalog{grid-template-columns:1fr}
  .mirada-grid{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}
  .built{grid-template-columns:1fr}
  .latest{grid-template-columns:minmax(0,1fr)}
  .latest .yt{order:-1}
  .ep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .who{grid-template-columns:1fr;gap:36px}
  .audiences,.quotes-3{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* En columna, el video va antes de la invitación a los planes */
  .keto-grid{gap:0}
  .keto-grid>div{display:contents}
  .keto-grid .video-card{order:1;margin-top:30px}
  .keto-grid .next-step{order:2}
  .plans{grid-template-columns:1fr}
  .faq-side{position:static}
  .benefits{grid-template-columns:1fr}
  .team-grid .media-card{height:clamp(280px,48vh,460px)}
}
@media (max-width:760px){
  .page-banner{min-height:66svh;align-items:flex-end;padding-top:calc(var(--header-h) + 14px);padding-bottom:40px}
  .page-banner-media::after{background:linear-gradient(0deg,rgba(14,14,14,.96) 0%,rgba(14,14,14,.72) 42%,rgba(14,14,14,.35) 75%,rgba(14,14,14,.55) 100%)}
  .page-banner .crumbs{margin-bottom:18px}
  .intro-split{grid-template-columns:minmax(0,1fr);gap:34px}
  .intro-split.is-rev{grid-template-columns:minmax(0,1fr)}
  .intro-split.is-rev>figure{order:-1}
  .intro-split .media-card{height:clamp(280px,48svh,420px)}
  .page-banner .eyebrow{letter-spacing:.24em}
  .page-banner .eyebrow::before,.page-banner .eyebrow::after{display:none}
  .page-banner-media img.shift{scale:none;translate:none;object-position:45% 30%}
  .next-step .btn{width:100%}
  .pb-title{font-size:clamp(48px,15.5vw,72px)}
  .pb-title--long{font-size:clamp(42px,12.5vw,58px)}
  .intro-facts{gap:18px 16px}
  .intro-facts li{grid-template-columns:40px minmax(0,1fr);column-gap:12px}
  .intro-facts .ic{width:40px;height:40px;border-radius:11px}
  .intro-facts b{font-size:15px}
  .intro-facts span:not(.ic){font-size:13px}
  .section{padding:64px 0}
  .steps{grid-template-columns:1fr}
  .plan .btn,.page-end .btn{width:100%}
  .members{grid-template-columns:1fr}
  .course-card{grid-template-columns:1fr}
  .cc-media{min-height:240px}
  .cc-meta{grid-template-columns:1fr}
  .cc-foot .btn{width:100%}
  .features{grid-template-columns:1fr}
  .who{gap:28px}
  .ep-grid{grid-template-columns:1fr;gap:10px}
  .ep-grid .episode{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center}
  .ep-grid .episode .cover{width:128px;height:100%;min-height:72px;aspect-ratio:auto}
  .ep-grid .episode .info{padding:10px 14px}
  .ep-grid .episode b{font-size:14px}
  .ep-grid .episode em{font-size:12px}
  .ep-more .btn{width:100%}
  .guests{grid-template-columns:1fr}
  .slider-nav{display:none}
  .slider-track{grid-auto-columns:78%}
  .pm-photo{width:150px}
  .marquee .testimonial{width:280px}
  .page-banner-media img.pod{object-position:72% 50%}
  .page-banner-media img.me{object-position:84% 30%}
  .who li{font-size:21px;padding:11px 0}
  .who-label{padding-top:16px}
  .faq details p{padding-right:0}
  .explore ul{grid-template-columns:1fr}
}

/* ---------- Movimiento reducido: todo visible, sin animaciones ---------- */
/* ---------- Home en celular: esquema simple (inspirado en el orden del sitio anterior) ----------
   Cada sección se anuncia igual: etiqueta resaltada en el color del área + título grande; después, siempre en el
   mismo orden: imagen → texto → lista → botón. Sin decoración (números de fondo, placas, logos sueltos) y con menos texto. */
@media (max-width:760px){
  .screens>.screen:not(.hero) .screen-inner{display:flex;flex-direction:column;align-items:stretch;text-align:left}
  .screens>.screen:not(.hero) .screen-copy{display:contents}
  :where(.screens>.screen:not(.hero)) :where(.screen-inner>*,.screen-copy>*){order:5;margin-left:0;margin-right:0}
  .screens .bignum,.screens .badge,.screens .area-logo,.screens .watermark,.screens .story blockquote,.screens .note{display:none}

  /* 1 · etiqueta de sección */
  .screens>.screen:not(.hero) .eyebrow{order:1;align-self:flex-start;display:inline-flex;gap:8px;padding:8px 12px;margin-bottom:16px;border-radius:7px;
    background:var(--kf-yellow);color:var(--ink-900);font-size:11px;font-weight:800;letter-spacing:.18em}
  .screens>.screen:not(.hero) .eyebrow::before,.screens>.screen:not(.hero) .eyebrow::after{display:none}
  .screens>.screen:not(.hero) .eyebrow .n{color:inherit;opacity:.55;background:none;padding:0}
  .screens>.screen.s-academy:not(.hero) .eyebrow{background:var(--aca)}
  .screens>.screen.s-podcast:not(.hero) .eyebrow{background:var(--com-red);color:#fff}
  /* 2 · título grande */
  .screens>.screen:not(.hero) h2,.screens .title-logo{order:2}
  .screens>.screen:not(.hero) h2{font-size:clamp(32px,9.6vw,42px);text-align:left;margin:0 0 4px;max-width:none}
  .screens .title-logo{display:block}
  .screens .center .title-logo h2{text-align:left;width:auto}
  /* 3 · imagen */
  .screens .media-card,.screens .episodes{order:3;margin:22px 0 24px}
  .screens .episodes+.m-dots{order:3;margin:-8px 0 26px}
  .screens .split .media-card{height:clamp(260px,44svh,380px)}
  /* 4 · texto */
  .screens .lead,.screens .story>p:not(.eyebrow){order:4;margin:0 0 22px;max-width:none}
  .screens .s-academy .lead,.screens .s-contacto .lead{margin-top:14px}
  /* 5 · lista */
  .screens .options,.screens .journey,.screens .facts,.screens .channels,.screens .course{order:5}
  .screens .journey{grid-template-columns:1fr;gap:0;margin-bottom:24px}
  .screens .journey li{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line-ink);padding:14px 0}
  .screens .journey li:first-child{border-top:1px solid var(--line-ink)}
  .screens .facts,.screens .facts--3{grid-template-columns:1fr;row-gap:0;padding-top:0;border-top:0;margin-bottom:24px}
  .screens .facts li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:center;padding:12px 0!important;border-left:0!important;border-bottom:1px solid var(--line)}
  .screens .facts li:first-child{border-top:1px solid var(--line)}
  .screens .facts svg{grid-row:span 2;margin:0;width:24px;height:24px}
  .screens .options{margin-bottom:22px}
  /* 6 · botón */
  .screens>.screen:not(.hero) .ctas{order:6;justify-content:flex-start}
  .screens .more,.screens .also{order:7;text-align:left;justify-content:flex-start}
  .screens .s-contacto .channels{margin-top:26px}
  .band-cap{font-size:clamp(26px,8vw,34px);padding-inline:var(--gutter)}
  /* Preguntas frecuentes: primero las preguntas, después '¿No encontrás tu respuesta?' */
  .faq-grid{display:flex;flex-direction:column;gap:0}
  .faq-side{display:contents}
  .faq{order:2;margin-top:8px}
  .faq-side .help{order:3;margin-top:28px;max-width:none}
}
/* ---------- Pantallas grandes: sitio más compacto ----------
   Desde 1600px todo se ve al 90% (como el zoom del navegador). El texto de lectura se compensa para seguir cómodo
   y --vz corrige las alturas de pantalla completa (100svh) para que sigan llenando la ventana. */
@media (min-width:1600px){
  html{zoom:.9;--vz:1.1111}
  /* Con la escala, el ancho de referencia del título (vw) se corrige para que coincida con el del contenedor (%) */
  :root{--cw-vw:min(100vw * var(--vz) - 2*var(--gutter),max(1344px,60vw * var(--vz)));--fs-h1:clamp(36px,min(4.1vw,7.6vh),84px)}
  .hero{--img-top:max(calc(13svh * var(--vz) - .27*var(--img-h)),calc(100svh * var(--vz) - var(--ticker-h) - 48px - var(--img-h)))}
  :root{--fs-body:17px;--fs-lead:clamp(17px,min(1.1vw,2.1vh),20px)}
  .prose p,.story p:not(.eyebrow){font-size:18px}
  .faq details p,.legal-doc p{font-size:17.5px}
  .testimonial p{font-size:17px}
  .check li,.journey b,.facts b,.intro-facts b{font-size:16.5px}
  .facts span,.intro-facts span:not(.ic),.journey span:not(.ic),.features>li>ul>li,.modules ul li,.audiences span:not(.ic),.benefits span:not(.ic),.steps span:not(.num),.cc-body p,.course .body li,.options p{font-size:15.5px}
  .eyebrow{font-size:12.5px}
  .crumbs{font-size:14px}
  .site-header nav.main a{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .vp-play::before{animation:none}
  .marquee-track{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal,.js .reveal-card,.js .reveal-media img{opacity:1;filter:none;transform:none;translate:none}
  .mobile-menu nav a,.mobile-menu .bottom{opacity:1;translate:none}
  .ticker .track{animation:none}
  @view-transition{navigation:none}
}

/* ---------- Página del curso ---------- */
/* Hero: Manuel queda en el tercio derecho de la foto */
.page-banner-media img.cur{object-position:50% 30%}
/* 02 · Video de presentación: texto a la izquierda, video horizontal a la derecha (con vista previa y botón) */
.vsl-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,90px);align-items:center}
.vsl{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(20,20,20,.55)}
.vsl video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;background:#000}
.tags{list-style:none;margin:clamp(20px,3.4vh,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:var(--r-pill);background:var(--kf-yellow);color:var(--ink-900)}
/* 03 · ¿Te pasa esto?: la frase de cierre va bajo el título */
#te-pasa .quote-line{margin-top:clamp(26px,4.4vh,40px);font-size:clamp(22px,2vw,32px)}
/* 05 · Qué te llevás: la tarjeta del bonus en el color del área */
.features li.is-bonus{background:color-mix(in srgb,var(--kf-yellow) 12%,var(--card));border-color:color-mix(in srgb,var(--kf-yellow) 45%,transparent)}
.features li.is-bonus .ic{background:var(--kf-yellow);color:var(--ink-900)}
/* 06 · Programa: módulos numerados en tarjetas */
.modules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:none}
.modules>li{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.2vw,30px);border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.modules .num{font-size:clamp(34px,3vw,46px);font-weight:800;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--fg)}
.modules b{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--fg)}
.modules ul{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--card-line);display:grid;gap:7px}
.modules ul li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.45;color:var(--fg-mid)}
.modules ul li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--kf-yellow)}
.modules>li.is-bonus{background:var(--ink-900);border-color:var(--ink-900)}
.modules>li.is-bonus .num{color:var(--kf-yellow);-webkit-text-stroke:0}
.modules>li.is-bonus b{color:#fff}
.modules>li.is-bonus ul{border-color:rgba(255,255,255,.14)}
.modules>li.is-bonus ul li{color:var(--text-mid)}
/* 07 · El creador */
.also-line{margin-top:clamp(20px,3.4vh,28px);font-size:14px;color:var(--fg-mid)}
.also-line a{color:var(--fg);font-weight:700;text-underline-offset:4px}
/* 08 · Testimonios en cinta: separación del título */
#testimonios .marquees{margin-top:0}
/* 09 · Inversión: texto a la izquierda, tarjeta de precio a la derecha */
.price-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,110px);align-items:center}
.price-grid .check{margin-top:clamp(20px,3.4vh,28px)}
.price-card{padding:clamp(28px,3vw,44px);border-radius:var(--r-lg);background:var(--paper);color:var(--text-ink);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);border-top:4px solid var(--kf-yellow)}
.pc-kind{font-size:11.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--text-ink-mid)}
.pc-price{display:flex;align-items:flex-start;gap:8px;margin:8px 0 6px;font-size:clamp(64px,6vw,96px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--text-ink)}
.pc-price small{margin-top:.35em;font-size:.26em;letter-spacing:.06em;color:var(--text-ink-mid)}
.pc-note{font-size:13.5px;line-height:1.5;color:var(--text-ink-mid);margin-bottom:22px}
.price-card .btn{width:100%}
.pc-guarantee{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--kf-yellow) 14%,transparent);font-size:14px;line-height:1.5;color:var(--text-ink)}
.pc-guarantee svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--kf-yellow);margin-top:1px}
.pc-pay{margin-top:14px;font-size:12.5px;text-align:center;color:var(--text-ink-mid)}
/* Cierre */
.legal-note{margin-top:18px;font-size:13px;color:var(--text-mid)}
@media (max-width:1180px){
  .vsl-grid,.price-grid{grid-template-columns:minmax(0,1fr)}
  .modules{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .vsl-grid{gap:28px}
  .tags li{font-size:11px;padding:8px 12px}
  .modules>li{padding:22px}
  .price-card{padding:26px 22px}
  .vsl .vp-btn{gap:10px}
  .vsl .vp-play{width:56px;height:56px}
  .vsl .vp-play svg{width:20px;height:20px}
  .vsl .vp-label{font-size:10px}
  .pc-price{font-size:64px}
}

/* Curso · tarjetas de entregables con viñetas (texto de la landing) */
.features>li>ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:7px}
.features>li>ul>li{display:block;position:relative;padding:0 0 0 14px;border:0;border-radius:0;background:none;font-size:14px;line-height:1.5;color:var(--fg-mid)}
.features>li>ul>li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--kf-yellow)}
.f-tag{align-self:flex-start;justify-self:start;width:max-content;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);background:var(--kf-yellow);color:var(--ink-900)}
.modules+.ctas{display:flex;justify-content:center;margin-top:clamp(28px,4.6vh,40px)}
.mat-line{margin:-6px 0 clamp(14px,2.4vh,20px);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--kf-yellow)}
/* Testimonios del curso: resultado de cada caso */
.t-res{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:700;line-height:1.4;color:var(--fg)}
.t-res svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--kf-yellow);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.next-step.next-center{justify-content:center;text-align:center;border-top:0;max-width:760px;margin:clamp(28px,4.6vh,40px) auto 0;flex-direction:column}
/* Header del curso: el botón lleva a la compra, en el color de la Academy */
.site-header .cta.btn-aca{--bg:var(--aca);--fg:var(--ink-900)}
/* Barra de compra (solo celular) */
.buy-bar{display:none}

/* ---------- Curso · composiciones propias por sección (para que no se repitan) ---------- */
/* 02 · video protagonista */
.vsl--wide{max-width:1040px;margin:0 auto}
.tags--center{justify-content:center;margin-top:clamp(24px,4vh,34px)}
/* 05 · bento: tarjeta protagonista alta, cuatro medianas y el bonus a lo ancho */
.features.bento{grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));grid-auto-flow:dense}
.bento .is-main{grid-row:span 2;justify-content:flex-end;position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--kf-yellow) 22%,var(--card)) 0%,var(--card) 60%);border-color:color-mix(in srgb,var(--kf-yellow) 40%,transparent)}
.bento .is-main .big{position:absolute;top:clamp(18px,2.4vw,30px);right:clamp(18px,2.4vw,30px);font-size:clamp(90px,10vw,170px);font-weight:800;letter-spacing:-.06em;line-height:.85;color:var(--kf-yellow)}
.bento .is-main b{font-size:clamp(22px,2vw,28px)}
.bento .is-bonus{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.6fr);align-items:center;column-gap:clamp(18px,2.4vw,36px)}
.bento .is-bonus .ic{grid-row:span 2;margin:0}
.bento .is-bonus .f-tag{grid-column:2;justify-self:start;width:max-content}
.bento .is-bonus b{grid-column:2}
.bento .is-bonus ul{grid-column:3;grid-row:1/span 2;margin:0}
/* 06 · programa en línea de tiempo: número · módulo · temas como etiquetas */
.modules.timeline{display:block;position:relative;max-width:1100px}
.modules.timeline>li{display:grid;grid-template-columns:clamp(70px,7vw,110px) minmax(0,.9fr) minmax(0,1.6fr);align-items:start;gap:8px clamp(18px,2.6vw,40px);
  padding:clamp(22px,3.4vh,30px) 0;border-radius:0;background:none;border:0;border-top:1px solid var(--line-ink)}
.modules.timeline>li:last-child{border-bottom:1px solid var(--line-ink)}
.modules.timeline .num{font-size:clamp(44px,4.4vw,68px);line-height:.9}
.modules.timeline b{font-size:clamp(20px,1.7vw,25px);padding-top:6px}
.modules.timeline ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:4px 0 0;border:0}
.modules.timeline ul li{padding:7px 12px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--card-line);font-size:13.5px;color:var(--fg)}
.modules.timeline ul li::before{display:none}
.modules.timeline>li.is-bonus{margin-top:12px;padding:clamp(22px,3vh,28px) clamp(20px,2.4vw,30px);border-radius:20px;background:var(--ink-900);border:0}
.modules.timeline>li.is-bonus ul li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--text-hi)}
/* 07 · el creador: banda a todo el ancho con la foto de fondo y el texto a la izquierda */
.creator-band{min-height:min(84svh,820px);display:flex;align-items:center;isolation:isolate}
.cb-media{position:absolute;inset:0;z-index:-2}
.cb-media img{width:100%;height:100%;object-fit:cover;object-position:70% 30%}
.cb-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(14,14,14,.96) 0%,rgba(14,14,14,.88) 34%,rgba(14,14,14,.35) 64%,rgba(14,14,14,.15) 100%),
  linear-gradient(0deg,rgba(14,14,14,.7) 0%,rgba(14,14,14,0) 30%)}
.cb-copy{max-width:660px}
.creator-band .facts{border-top-color:rgba(255,255,255,.18)}
/* 09 · inversión: tarjeta ancha clara sobre el oscuro (qué incluye | precio) */
.price-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1060px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);color:var(--text-ink);box-shadow:0 50px 100px -50px rgba(0,0,0,.9);border-top:4px solid var(--kf-yellow)}
.pw-includes{padding:clamp(28px,3.4vw,48px);background:var(--bone-100);border-right:1px solid var(--line-ink)}
.pw-includes .check{border-color:var(--line-ink);margin-top:14px}
.pw-includes .check li{color:var(--text-ink);font-size:16px}
.pw-includes .check li::before{background:var(--kf-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.pw-buy{padding:clamp(28px,3.4vw,48px)}
.pw-buy .btn{width:100%}
@media (max-width:1180px){
  .features.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .is-main{grid-row:auto}
  .bento .is-bonus{grid-template-columns:auto minmax(0,1fr)}
  .bento .is-bonus ul{grid-column:1/-1;grid-row:auto;margin-top:12px}
  .modules.timeline>li{grid-template-columns:clamp(60px,8vw,90px) minmax(0,1fr)}
  .modules.timeline ul{grid-column:2}
}
@media (max-width:760px){
  .bento .is-main .big{position:static;font-size:72px;margin-bottom:6px}
  .bento .is-bonus{display:flex;flex-direction:column;align-items:flex-start}
  .modules.timeline>li{grid-template-columns:52px minmax(0,1fr);gap:6px 14px;padding:20px 0}
  .modules.timeline .num{font-size:40px}
  .modules.timeline b{font-size:19px;padding-top:2px}
  /* temas en una línea corrida (sin etiquetas) para que el programa no se haga eterno */
  .modules.timeline ul{display:block;grid-column:2;font-size:13.5px;line-height:1.55;color:var(--fg-mid)}
  .modules.timeline ul li{display:inline;padding:0;border:0;background:none;font-size:inherit;color:inherit}
  .modules.timeline ul li+li::before{display:inline;content:" · ";position:static;width:auto;height:auto;background:none}
  .modules.timeline>li.is-bonus ul li{background:none;color:var(--text-mid)}
  .modules.timeline>li.is-bonus{padding:20px 16px}
  .creator-band{min-height:0;align-items:flex-end;padding-top:clamp(280px,62vw,360px)}
  .cb-media{height:clamp(340px,90vw,460px);bottom:auto}
  .cb-media img{object-position:78% 30%}
  .cb-media::after{inset:-1px 0;background:linear-gradient(0deg,var(--ink-900) 0%,var(--ink-900) 10%,rgba(14,14,14,.4) 55%,rgba(14,14,14,.1) 100%)}
  .price-wide{grid-template-columns:minmax(0,1fr)}
  .pw-includes{border-right:0;border-bottom:1px solid var(--line-ink)}
}

/* 03 · Para quién es (distribución de la landing): pirámide a la izquierda; situaciones, perfiles, recuadro y botón a la derecha */
.fit-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,90px);align-items:start}
.fit-media{height:auto;aspect-ratio:876/900;position:sticky;top:calc(var(--header-h-compact) + 30px);background:#fff;padding:clamp(18px,2.2vw,32px);box-shadow:0 40px 80px -48px rgba(20,20,20,.35)}
.fit-media img{object-fit:contain}
.fit-label{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:11.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--text-ink)}
.fit-label::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--kf-yellow)}
.fit-check{margin:0 0 clamp(30px,5vh,44px);border-color:var(--line-ink)}
.fit-check li{color:var(--text-ink);font-size:16px;line-height:1.55}
.fit-check li::before{background:var(--kf-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.aud-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.aud-cards>li{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:18px;background:#fff;border:1px solid var(--line-ink);border-top:3px solid var(--kf-yellow);
  box-shadow:0 24px 50px -36px rgba(14,14,14,.35)}
.aud-cards .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--kf-yellow) 16%,transparent);color:var(--kf-yellow)}
.aud-cards .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aud-cards b{font-size:12.5px;font-weight:800;letter-spacing:.14em;line-height:1.35;text-transform:uppercase;color:var(--text-ink)}
.aud-cards ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.aud-cards ul li{position:relative;padding-left:14px;font-size:14.5px;line-height:1.4;color:var(--text-ink-mid)}
.aud-cards ul li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:2px;background:var(--kf-yellow)}
.system-note{display:flex;flex-direction:column;gap:2px;margin:clamp(26px,4.4vh,38px) 0 0;padding:20px 24px;border-radius:0 16px 16px 0;background:var(--ink-900);border-left:4px solid var(--kf-yellow);
  font-size:15px;font-weight:600;color:var(--text-hi)}
.system-note b{font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--kf-yellow)}
.fit-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(22px,3.6vh,30px)}
.guarantee{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-ink)}
.guarantee svg{width:20px;height:20px;fill:none;stroke:var(--kf-yellow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1180px){
  .fit-grid{grid-template-columns:minmax(0,1fr)}
  .fit-media{position:static;max-width:420px}
}
@media (max-width:760px){
  .aud-cards{grid-template-columns:minmax(0,1fr)}
  .aud-cards>li{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;align-items:start}
  .aud-cards .ic{grid-row:span 2}
  .fit-ctas .btn{width:100%}
  .fit-media{max-width:none}
}

/* ---------- Menos estímulo, más recorrido (v72) ----------
   Sin números gigantes de fondo; etiquetas como texto; los datos con ícono en un tono suave del área. */
.bignum{display:none}
.tags li{padding:0;border-radius:0;background:none;color:inherit;opacity:.8;font-size:11.5px;letter-spacing:.2em}
.tags li+li::before{content:"";display:inline-block;width:4px;height:4px;margin:0 14px 2px 0;border-radius:50%;background:var(--kf-yellow);vertical-align:middle}
.tags{gap:8px 14px}
.intro-facts .ic{background:color-mix(in srgb,var(--kf-yellow) 26%,transparent);color:var(--ink-900)}
body.com .intro-facts .ic{color:var(--ink-900)}

/* Hilo conductor: cada sección entra con una línea fina que baja desde el borde de arriba hasta su número.
   Se ve como la continuación de la sección anterior y lleva la vista al comienzo de la nueva. */
.section .eyebrow .n{position:relative}
.section .eyebrow .n::before{content:"";position:absolute;left:50%;bottom:calc(100% + 12px);width:1px;height:100vh;margin-left:-.5px;
  background:currentColor;opacity:.35;pointer-events:none}
.section.is-light .eyebrow .n::before{background:var(--ink-900);opacity:.22}
.intro-sec .eyebrow .n::before,.page-end .eyebrow .n::before{display:none}

/* ---------- Curso (v72): hero como la landing y video en la sección 01 ---------- */
.pb-course .pb-title{max-width:none}
.pb-by{margin:clamp(16px,2.6vh,24px) 0 0;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-hi);opacity:.85}
.pb-lead{max-width:34em;margin:clamp(10px,1.6vh,14px) 0 0;font-size:clamp(16px,min(1.15vw,2.1vh),19px);line-height:1.55;color:#E4E0D8}
.page-banner .ctas{margin-top:clamp(22px,3.6vh,32px)}
.intro-split.is-video{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.intro-split.is-video .tags{margin-top:clamp(16px,2.6vh,22px)}
.intro-split.is-video .ctas{margin-top:clamp(24px,4vh,34px)}
/* Aviso del video: "¡El video ya empezó!" + invitación a activar el sonido */
.vp-btn.is-sound .vp-play svg{margin-left:0;width:28px;height:28px;fill:none}
.vp-btn.is-sound .vp-label{max-width:24em;padding:0 20px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;line-height:1.5}
.vp-btn.is-sound .vp-label b{display:block;margin-bottom:4px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.next-step .guarantee{color:var(--fg-mid)}
/* Datos en una sección clara */
.is-light .facts{border-top-color:var(--line-ink)}
.is-light .facts li+li{border-left-color:var(--line-ink)}
.is-light .facts span{color:var(--text-ink-mid)}
.intro-sec .facts{margin-top:clamp(24px,4vh,34px)}
.intro-sec .facts b{font-size:clamp(20px,1.6vw,26px);font-weight:800;letter-spacing:-.03em;color:var(--text-ink)}
@media (max-width:1180px){
  .intro-split.is-video{grid-template-columns:minmax(0,1fr)}
  /* Apilado (tablet y celular): primero el título y la bajada, después el video, después etiquetas y botón */
  .intro-split.is-video{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .intro-split.is-video>div{display:contents}
  .intro-split.is-video .eyebrow{order:1}
  .intro-split.is-video h2{order:2}
  .intro-split.is-video .lead{order:3}
  .intro-split.is-video .vsl{order:4;margin-top:clamp(20px,3.4vh,28px)}
  .intro-split.is-video .tags{order:5}
  .intro-split.is-video .ctas{order:6}
}
.vp-short{display:none}
@media (max-width:760px){
  .tags li{letter-spacing:.12em;font-size:11px}
  .tags li+li::before{margin-right:10px}
  .tags{gap:8px 10px}
  /* En el celular el video es chico: el aviso queda corto para no taparlo */
  .vp-btn.is-sound{gap:10px}
  .vp-btn.is-sound .vp-play{width:56px;height:56px}
  .vp-btn.is-sound .vp-play svg{width:22px;height:22px}
  .vp-btn.is-sound .vp-more{display:none}
  .vp-btn.is-sound .vp-short{display:block;font-size:13px}
}

/* ---------- Contacto ----------
   01: cada consulta con su canal (fila: ícono en el color del área · qué · botón).
   02: datos a la izquierda y formulario en una tarjeta blanca a la derecha. */
.routes{list-style:none;margin:clamp(24px,4vh,34px) 0 0;padding:0;border-top:1px solid var(--line-ink)}
.routes li{--r:var(--kf-yellow);display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px 18px;padding:18px 0;border-bottom:1px solid var(--line-ink)}
.routes li.r-aca{--r:var(--aca)}
.routes li.r-com{--r:var(--com-red)}
.routes .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--r) 24%,transparent);color:var(--ink-900)}
.routes .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.routes b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--text-ink)}
.routes div span{display:block;margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--text-ink-mid)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,90px);align-items:start}
.contact-data{list-style:none;margin:clamp(22px,3.6vh,30px) 0 0;padding:0;display:grid;gap:12px}
.contact-data li{display:grid;grid-template-columns:20px 100px minmax(0,1fr);align-items:center;gap:12px;font-size:15px;color:var(--text-ink-mid)}
.contact-data svg{width:20px;height:20px;fill:none;stroke:var(--ink-900);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-data b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-ink)}
.contact-data a{color:var(--text-ink);font-weight:600;overflow-wrap:anywhere}
.contact-wa-note{display:flex;gap:12px;align-items:flex-start;margin:clamp(24px,4vh,32px) 0 0;padding:16px 18px;border-radius:16px;background:var(--paper);border:1px solid var(--line-ink);font-size:14.5px;line-height:1.5;color:var(--text-ink-mid)}
.contact-wa-note svg{flex:none;width:20px;height:20px;margin-top:1px;color:#1FA855}
.contact-wa-note a{color:var(--text-ink);font-weight:700}
.contact-form{display:grid;gap:18px;padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-ink);box-shadow:0 40px 80px -50px rgba(20,20,20,.35)}
.form-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-ink)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line-ink);border-radius:12px;background:var(--paper);
  font:inherit;font-size:16px;line-height:1.4;color:var(--text-ink);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8C877E}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink-900);outline-offset:1px;background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{font-size:13px;line-height:1.5;color:var(--text-ink-mid)}
.form-legal a{color:var(--text-ink)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.form-status{font-size:14.5px;font-weight:600;line-height:1.45}
.form-status.is-ok{color:#1E7A3C}
.form-status.is-error{color:#B3261E}
.form-status a{color:inherit}
@media (max-width:1180px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .routes li{grid-template-columns:46px minmax(0,1fr)}
  .routes .btn{grid-column:1/-1;width:100%}
  .form-two{grid-template-columns:minmax(0,1fr)}
  .contact-data li{grid-template-columns:20px minmax(0,1fr)}
  .contact-data li b{display:none}
  .form-foot .btn{width:100%}
}

/* Dos secciones oscuras seguidas (p. ej. la última y el cierre): un filete las separa, como entre dos claras */
.section:not(.is-light)+.section:not(.is-light){border-top:1px solid var(--line)}

/* ---------- Microanimaciones (v77): pocas y sutiles ---------- */
/* Menú mobile: los ítems entran escalonados detrás del panel; al cerrar se van juntos */
.mobile-menu nav a,.mobile-menu .bottom{opacity:0;translate:28px 0;transition:opacity .35s var(--ease),translate .35s var(--ease)}
.mobile-menu.is-open nav a,.mobile-menu.is-open .bottom{opacity:1;translate:none;transition:opacity .55s var(--ease),translate .6s var(--ease)}
.mobile-menu.is-open nav a:nth-child(1){transition-delay:.12s}
.mobile-menu.is-open nav a:nth-child(2){transition-delay:.17s}
.mobile-menu.is-open nav a:nth-child(3){transition-delay:.22s}
.mobile-menu.is-open nav a:nth-child(4){transition-delay:.27s}
.mobile-menu.is-open nav a:nth-child(5){transition-delay:.32s}
.mobile-menu.is-open nav a:nth-child(6){transition-delay:.37s}
.mobile-menu.is-open .bottom{transition-delay:.42s}
.mobile-menu .close{transition:rotate .6s var(--ease),background var(--t-fast) var(--ease)}
.mobile-menu:not(.is-open) .close{rotate:-90deg}
.mobile-menu nav a:active{background:rgba(255,255,255,.04)}
/* Preguntas frecuentes: se abren y cierran deslizando (donde el navegador lo permite) */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
  .faq details[open]::details-content{height:auto}
}
/* Fotos: un zoom mínimo al pasar el mouse (solo con mouse) */
@media (hover:hover) and (pointer:fine){
  .media-card img{transition:scale 1.4s var(--ease),opacity .9s var(--ease)}
  .media-card:hover img{scale:1.03}
}
/* Barra mobile: el nombre de la sección cambia con un fundido */
.mc-sec.swap{animation:mc-swap .45s var(--ease)}
@keyframes mc-swap{from{opacity:0;translate:0 6px}}
/* Cifras que cuentan: ancho de número fijo para que no salten */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- Espaciados finos (v81): ningún botón pegado a lo que tiene arriba ---------- */
.next-step{gap:20px 24px}
.plan .btn{margin-top:10px}
.help .text-link{margin-top:10px;align-self:flex-start}
.cc-foot{gap:18px 20px}
.contact-wa-note{margin-top:clamp(30px,5vh,42px)}
.contact-data{gap:14px}
.course-card.soon p:not(.cc-kind){margin-bottom:10px}
@media (max-width:760px){
  .screens .s-contacto .ctas{margin-top:32px}
  .routes li{row-gap:20px}
  .contact-data{gap:16px}
}

/* ---------- Formulario: validación y confirmación (v82) ---------- */
.field-error{display:none;align-items:flex-start;gap:7px;margin:0;font-size:13.5px;font-weight:600;line-height:1.4;color:#B3261E}
.field-error::before{content:"!";flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:#B3261E;color:#fff;font-size:11px;font-weight:800;line-height:1}
.field.has-error .field-error{display:flex;animation:fe-in .3s var(--ease)}
.field.has-error input,.field.has-error textarea{border-color:#B3261E;background:#FDF3F2}
.field.has-error input:focus,.field.has-error textarea:focus{outline-color:#B3261E}
.field.has-error label{color:#B3261E}
@keyframes fe-in{from{opacity:0;translate:0 -4px}}
.contact-form .btn.is-loading{opacity:.75;cursor:progress}
.form-status.is-error{display:block;padding:12px 14px;border-radius:12px;background:#FDF3F2;border:1px solid rgba(179,38,30,.25);font-weight:500;color:#8C1D17}
.form-status:empty{display:none}
.form-foot{align-items:center}
.form-done{display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(28px,6vh,56px) clamp(8px,2vw,24px);outline:none;animation:fe-in .5s var(--ease)}
.contact-form [hidden]{display:none!important}
.fd-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--kf-yellow);color:var(--ink-900);margin-bottom:8px;box-shadow:0 0 0 10px color-mix(in srgb,var(--kf-yellow) 22%,transparent)}
.fd-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fd-title{font-size:clamp(24px,2.2vw,30px);font-weight:800;letter-spacing:-.03em;color:var(--text-ink)}
.fd-text{max-width:30em;font-size:15.5px;line-height:1.55;color:var(--text-ink-mid)}
.fd-again{margin-top:8px;background:none;border:0;border-bottom:1px solid currentColor;color:var(--text-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media (max-width:760px){
  .form-foot{flex-direction:column;align-items:stretch}
  .form-status{text-align:left}
}

/* Imágenes en WebP con respaldo JPG: el <picture> no participa del diseño (la imagen se comporta como antes) */
picture{display:contents}

/* ---------- Scroll suave (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis,.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ---------- Páginas legales ---------- */
.page-banner.is-compact{min-height:clamp(320px,46vh,460px);background:radial-gradient(60% 80% at 10% 80%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%),var(--ink-900)}
.legal-doc{max-width:780px}
.legal-doc p{font-size:clamp(15.5px,1.05vw,17px);line-height:1.75;color:var(--text-ink-mid);margin-bottom:18px}
.legal-doc h2{font-size:clamp(24px,2vw,30px);margin:clamp(34px,5vh,48px) 0 14px;scroll-margin-top:calc(var(--header-h-compact) + 20px)}
.legal-doc a{color:var(--text-ink);font-weight:700;text-underline-offset:4px}
.legal-scope{display:inline-block;font-size:11.5px!important;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-ink)!important;padding:8px 12px;border-radius:7px;background:var(--kf-yellow);margin-bottom:26px!important}
.legal-tip{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line-ink)}
.legal-tip svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.legal-doc .ctas{margin:6px 0 24px}
.legal-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(30px,5vh,44px);padding-top:20px;border-top:1px solid var(--line-ink);font-size:14px}
@media (max-width:760px){
  .page-banner.is-compact{min-height:clamp(260px,40svh,320px)}
  .page-banner.is-compact .pb-title{font-size:clamp(34px,10.4vw,46px)}
  .legal-doc .ctas .btn{width:100%}
  /* Barra de compra del curso: aparece al dejar atrás el hero y se oculta en la inversión y el cierre */
  .buy-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 0 calc(10px + env(safe-area-inset-bottom));
    background:rgba(14,14,14,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.1);
    transform:translateY(110%);transition:transform var(--t-normal) var(--ease)}
  .buy-bar.is-on{transform:none}
  .buy-bar .container{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .buy-bar p{display:flex;flex-direction:column;line-height:1.2;color:#fff}
  .buy-bar b{font-size:18px;font-weight:800;letter-spacing:-.02em}
  .buy-bar span{font-size:11.5px;color:var(--text-mid)}
  .buy-bar .btn{min-height:46px;padding:0 18px;font-size:12px}
  body.has-buybar .wa-float{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ---------- Mobile: menos bloques apilados ----------
   1) Los datos de la tarjeta de presentación giran en una cinta infinita (la lista va duplicada; la copia es aria-hidden).
   2) Los grupos de tarjetas se deslizan de costado (carrusel con imán): la siguiente asoma al borde y los puntos
      de abajo indican cuántas hay y en cuál estás. El JS les pone la clase .m-carousel y crea los puntos. */
.m-dots{display:none}
@media (max-width:760px){
  .ic-logo{height:52px}
  .if-wrap{overflow:hidden;margin-inline:calc(-1 * var(--gutter));-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .intro-facts{--gap:28px;display:flex;flex-wrap:nowrap;width:max-content;gap:var(--gap);animation:marquee 26s linear infinite}
  .intro-facts .dup{display:grid}
  .intro-facts li{flex:none}
  .intro-facts b,.intro-facts span:not(.ic){white-space:nowrap}

  .m-carousel{--m-col:84%;display:grid !important;grid-auto-flow:column !important;grid-template-columns:none !important;grid-template-rows:none !important;grid-auto-columns:var(--m-col);
    gap:12px !important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .m-carousel::-webkit-scrollbar{display:none}
  .m-carousel>*{scroll-snap-align:start;min-width:0;grid-column:auto !important;grid-row:auto !important}
  .ep-grid.m-carousel,.episodes.m-carousel{--m-col:76%}
  .who.m-carousel{--m-col:78%}
  .ep-grid.m-carousel .episode{display:flex;flex-direction:column}
  .ep-grid.m-carousel .episode .cover{width:auto;height:auto;min-height:0;aspect-ratio:16/9}
  .m-dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
  .m-dots i{display:block;width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;opacity:.25;transition:width .3s var(--ease),opacity .3s var(--ease)}
  .m-dots i.on{width:20px;opacity:.85}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .intro-facts{animation:none}
  .if-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}