/* Academia BGM · estilos. Barra azul noche arriba; la lección se lee sobre blanco con el temario fijo a la derecha.
   El inicio del curso, «Mis cursos» y la entrada abren con la banda navy de la web. Todos los colores de marca, aquí. */
:root{
  --noche:#081C38;      /* Azul noche corporativo */
  --noche-2:#0E274B;
  --noche-3:#15335F;
  --vivo:#2448FF;       /* Azul vivo corporativo */
  --vivo-2:#1636D9;
  --vivo-soft:#E9EDFF;
  --vivo-claro:#8FA4FF;
  --verde:#00CD65;      /* Verde intenso corporativo */
  --verde-soft:#DDF8EA;
  --verde-tinta:#00733A;
  --rojo:#B42318;
  --rojo-soft:#FDECEA;
  --blanco:#FFFFFF;
  --papel:#F4F6FB;
  --linea:#DCE2EE;
  --linea-2:#EBEFF6;
  --tinta:#081C38;
  --tinta-2:#4A5A75;
  --tinta-3:#5F6E88;
  --hielo:#C6D0E4;
  --niebla:#9FB0CC;
  --sombra:rgba(8,28,56,.5);
  --velo:rgba(4,14,30,.86);
  --f-display:"Archivo","Arial Black",Helvetica,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --wrap:1240px;
  --nav-h:68px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--blanco);color:var(--tinta);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--noche)}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;line-height:1.05;letter-spacing:-.02em}
p{margin:0}
button{font:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:500 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vivo);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--verde);transform:rotate(-8deg)}
.eyebrow.on-dark{color:var(--vivo-claro)}
.tag{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.link-q{appearance:none;border:0;background:none;padding:0;color:var(--vivo);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-align:left}
.link-q:hover{color:var(--vivo-2)}
.chip{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--verde-tinta);background:var(--verde-soft);padding:6px 9px;border-radius:7px;vertical-align:middle;white-space:nowrap}

/* Botones (los de la web) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:12px;font:700 16px/1 var(--f-body);text-decoration:none;border:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s,color .2s}
.btn-primary{background:var(--verde);color:var(--noche);box-shadow:0 10px 30px -10px rgba(0,205,101,.7)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-blue{background:var(--vivo);color:var(--blanco);box-shadow:0 10px 30px -12px rgba(36,72,255,.7)}
.btn-blue:hover{transform:translateY(-2px);background:var(--vivo-2)}
.btn-line{background:var(--blanco);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--vivo);color:var(--vivo)}
.btn-ghost{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--blanco)}
.btn.sm{padding:11px 16px;font-size:14.5px;border-radius:11px}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.bar{display:block;height:8px;border-radius:99px;background:var(--linea-2);overflow:hidden}
.bar i{display:block;height:100%;width:var(--w,0%);background:var(--verde);border-radius:inherit;transition:width .4s}

/* ============ NAV ============ */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--noche);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;gap:18px;height:var(--nav-h)}
.brand{appearance:none;border:0;background:none;padding:0;display:flex;align-items:center;gap:12px;color:var(--blanco);cursor:pointer;text-align:left}
.brand svg{width:36px;height:36px;flex:none;display:block}
.brand-t{font:italic 900 16px/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.brand-t small{display:block;margin-top:5px;font:700 9.5px/1 var(--f-body);font-style:normal;letter-spacing:.24em;color:var(--vivo-claro)}
.nav-links{display:flex;gap:4px;margin-left:12px}
.nav-links button{appearance:none;border:0;background:transparent;color:var(--hielo);font-weight:600;font-size:15px;padding:10px 14px;border-radius:10px;cursor:pointer}
.nav-links button:hover{color:var(--blanco);background:rgba(255,255,255,.07)}
.nav-links button[aria-current="page"]{color:var(--blanco);background:rgba(36,72,255,.4)}
.user{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--blanco)}
.user-name{font-weight:700;font-size:15px;line-height:1.15;text-align:right}
.user-name small{display:block;font:500 11px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--niebla)}
.avatar{width:40px;height:40px;border-radius:12px;background:var(--vivo);display:grid;place-items:center;font:italic 900 17px/1 var(--f-display);color:var(--blanco)}
@media (max-width:560px){.brand-t small{display:none}.nav-links{margin-left:0}.user-name{display:none}}

/* Banda navy compartida (inicio del curso y Mis cursos) */
.hero{position:relative;overflow:hidden;background:var(--noche);color:var(--blanco)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 85% 10%,rgba(36,72,255,.45),transparent 70%),radial-gradient(500px 320px at 5% 100%,rgba(0,205,101,.14),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(40px,6vw,72px)}
.hero-copy{min-width:0}
.hero h1{margin-top:18px;font-size:clamp(40px,5.4vw,68px);font-weight:800}
.hero h1 em{font-style:italic;font-weight:900;color:var(--verde)}
.hero-copy>p{margin-top:18px;max-width:34em;color:var(--hielo);font-size:clamp(16.5px,1.5vw,18.5px)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* ============ INICIO DEL CURSO ============ */
.c-hero h1{font-size:clamp(38px,5vw,64px)}
.c-sub{font-size:clamp(18px,1.7vw,21px)!important;color:var(--hielo)}
.c-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;list-style:none;padding:0}
.c-chips li{font:500 12px/1.2 var(--f-mono);letter-spacing:.06em;color:var(--blanco);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:9px 12px;border-radius:9px}
.c-card{min-width:0;background:var(--blanco);color:var(--tinta);border-radius:22px;padding:16px;display:grid;gap:14px;box-shadow:0 50px 100px -40px rgba(0,0,0,.7),0 0 0 8px rgba(36,72,255,.14)}
.c-card-row{display:flex;justify-content:space-between;gap:12px;font:500 11.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);padding:0 4px}
.c-card .bar{margin:0 4px}
.c-card .btn{margin:2px 4px 4px}

.c-body{padding-block:clamp(44px,6vw,80px)}
.c-sec{display:grid;gap:22px}
.c-sec+.c-sec{margin-top:clamp(56px,7vw,96px)}
.c-sec h2{font:italic 900 clamp(30px,3.4vw,42px)/1.05 var(--f-display);color:var(--noche)}
.c-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px}
.c-head>div{display:grid;gap:12px}
.c-head .tag{font-size:12.5px}
/* Bienvenida: mensaje del equipo y vídeo */
.welcome{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center}
.letter{display:grid;gap:18px;align-content:start}
.letter-body{display:grid;gap:14px;max-width:36em;color:var(--tinta-2);font-size:17.5px;line-height:1.7}
.letter-body p:first-child{font-size:clamp(19px,1.8vw,21px);line-height:1.5;color:var(--tinta)}
.letter-from{display:flex;align-items:center;gap:14px;margin-top:4px}
.letter-from svg{width:46px;height:46px;flex:none;display:block}
.letter-from b{display:block;font:700 16px/1.25 var(--f-body);color:var(--tinta)}
.letter-from small{display:block;margin-top:3px;font-size:14px;color:var(--tinta-3)}
.letter .btn{justify-self:start}
.welcome-vid{margin:0;min-width:0}
.welcome-vid .player{margin:0}
.welcome-vid figcaption{margin-top:12px;font:500 11.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}

/* Cómo funciona y qué tener a mano */
.how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.how-steps li{border:1px solid var(--linea);border-radius:18px;padding:20px 22px;display:grid;gap:10px;align-content:start}
.how-steps b{width:34px;height:34px;border-radius:10px;background:var(--vivo);color:var(--blanco);display:grid;place-items:center;font:italic 900 17px/1 var(--f-display)}
.how-steps h3{font:italic 900 21px/1.15 var(--f-display);color:var(--noche)}
.how-steps p{color:var(--tinta-2);font-size:15.5px;line-height:1.55}
.prep{background:var(--papel);border-radius:20px;padding:22px 22px 14px;display:grid;gap:8px}
.prep-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:0 4px}
.prep-head h3{font:italic 900 21px/1.15 var(--f-display);color:var(--noche)}
.prep ul{list-style:none;margin:0;padding:0;display:grid}
.prep-item{appearance:none;border:0;background:transparent;width:100%;text-align:left;cursor:pointer;display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px 4px;border-top:1px solid var(--linea);color:var(--tinta);font:500 15.5px/1.45 var(--f-body)}
.prep li:first-child .prep-item{border-top:0}
.prep-item small{grid-column:2;font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.prep-box{width:24px;height:24px;border-radius:7px;border:2px solid var(--niebla);background:var(--blanco);display:grid;place-items:center;margin-top:-1px;transition:background .2s,border-color .2s}
.prep-item[aria-pressed="true"] .prep-box{background:var(--verde);border-color:var(--verde);color:var(--noche)}
.prep-item[aria-pressed="true"]>span:not(.prep-box){color:var(--tinta-3)}

/* Objetivos: se cumplen al ver sus lecciones */
.outcomes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.outcomes li{display:grid;grid-template-columns:34px 1fr;gap:8px 14px;align-items:start;padding:20px;border:1px solid var(--linea);border-radius:18px;font-size:16.5px;line-height:1.45;color:var(--tinta)}
.goal-n{font:italic 900 34px/.85 var(--f-display);color:var(--vivo)}
.outcomes small{grid-column:2;font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.outcomes li.is-ok{background:var(--verde-soft);border-color:var(--verde-soft)}
.outcomes li.is-ok .goal-n{width:30px;height:30px;border-radius:50%;background:var(--verde);color:var(--noche);display:grid;place-items:center}
.outcomes li.is-ok small{color:var(--verde-tinta)}
.syl{display:grid;gap:22px}
.syl-block h3{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px}
.syl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.syl-item{appearance:none;border:0;border-bottom:1px solid var(--linea);background:transparent;width:100%;text-align:left;cursor:pointer;display:grid;grid-template-columns:26px 44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px 8px;color:var(--tinta);transition:background .2s}
.syl-item:hover{background:var(--papel)}
.syl-num{font:italic 900 24px/1 var(--f-display);color:var(--vivo)}
.syl-txt b{display:block;font:700 18px/1.3 var(--f-body)}
.syl-txt span{display:block;margin-top:5px;color:var(--tinta-2);font-size:15.5px;line-height:1.5}
.syl-dur{font:500 12.5px/1.6 var(--f-mono);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.syl-item.is-cur{background:var(--vivo-soft)}
.study{background:var(--papel);border-radius:28px;padding:clamp(24px,4vw,48px);display:grid;gap:28px}
.study-head{display:grid;gap:12px;max-width:44em}
.study-head p{color:var(--tinta-2);font-size:17px}
.study-ab{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.study-box{background:var(--blanco);border-radius:18px;padding:22px 24px;display:grid;gap:12px;align-content:start}
.study-box h3{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.study-box ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--tinta);font-size:16.5px}
.study-box.goal{background:var(--noche);color:var(--blanco)}
.study-box.goal h3{color:var(--verde)}
.study-box.goal p{font:italic 900 clamp(19px,1.9vw,23px)/1.25 var(--f-display)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.steps li{background:var(--blanco);border-radius:18px;padding:20px 22px;display:grid;gap:8px;align-content:start}
.step-k{display:flex;align-items:center;gap:10px;font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.step-k b{width:28px;height:28px;border-radius:9px;background:var(--vivo);color:var(--blanco);display:grid;place-items:center;font:italic 900 15px/1 var(--f-display);letter-spacing:0}
.steps h3{font:italic 900 20px/1.15 var(--f-display);color:var(--noche)}
.steps p{color:var(--tinta-2);font-size:15.5px;line-height:1.55}
.results{background:var(--noche);color:var(--blanco);border-radius:20px;padding:24px 26px;display:grid;gap:18px}
.results h3{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stats li{display:grid;gap:6px;align-content:start}
.stats b{font:italic 900 clamp(32px,3.6vw,46px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.stats span{color:var(--hielo);font-size:15px;line-height:1.4}
.results small{color:var(--niebla);font-size:13.5px;line-height:1.5}
@media (max-width:1000px){.outcomes,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.how{grid-template-columns:1fr}}
@media (max-width:860px){.welcome{grid-template-columns:1fr}}
@media (max-width:700px){
  .study-ab{grid-template-columns:1fr}
  .outcomes,.steps,.how-steps{grid-template-columns:1fr}
  .syl-item{grid-template-columns:24px 34px minmax(0,1fr);padding:16px 4px}
  .syl-dur{grid-column:3}
}

/* ============ LECCIÓN ============ */
.lesson-wrap{padding-block:clamp(26px,4vw,52px) clamp(56px,7vw,96px)}
.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start}
.lesson{min-width:0;max-width:800px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;color:var(--tinta-3)}
.crumbs .link-q{text-decoration:none}
.crumbs .link-q:hover{text-decoration:underline}
.lesson .eyebrow{margin-top:26px}
.lesson h1{margin-top:14px;font-size:clamp(32px,4.4vw,56px);font-weight:800;color:var(--noche)}
.lesson h1 .num{color:var(--vivo);font-style:italic;font-weight:900}
.lead{margin-top:20px;font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--tinta-2);max-width:38em}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.meta span{display:inline-flex;align-items:center;gap:8px}
.meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--linea);margin-right:12px}

.temario-toggle{display:none;margin-top:20px;width:100%;appearance:none;border:1.5px solid var(--linea);background:var(--blanco);border-radius:12px;padding:13px 16px;align-items:center;gap:12px;color:var(--tinta);font-weight:700;font-size:15.5px;cursor:pointer}
.temario-toggle svg{color:var(--vivo)}
.temario-toggle b{margin-left:auto;font:500 12px/1 var(--f-mono);color:var(--tinta-3)}
.temario-toggle[aria-expanded="true"]{border-color:var(--vivo)}
.temario-mob{margin-top:12px;border:1.5px solid var(--linea);border-radius:16px;padding:18px 10px 12px}
.temario-mob h2{display:none}
.temario-mob .t-prog{margin:0 12px}

/* Reproductor: el vídeo de Bunny en un iframe; mientras no hay vídeo, una portada de marca */
.player{container-type:inline-size;position:relative;margin:32px 0 0;background:var(--noche);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -32px var(--sombra)}
.player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.screen{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:radial-gradient(55% 80% at 88% 8%,rgba(36,72,255,.5),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(0,205,101,.13),transparent 70%),var(--noche)}
.screen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:5cqw 5cqw}
.slide{position:absolute;inset:0;padding:6cqw 8cqw 11cqw;display:flex;flex-direction:column;justify-content:center;gap:2cqw;color:var(--blanco)}
.slide-eyebrow{font:500 1.6cqw/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--vivo-claro)}
.slide h3{font:italic 900 4.4cqw/1.05 var(--f-display);letter-spacing:-.02em;max-width:20ch}
.slide ul{list-style:none;margin:.6cqw 0 0;padding:0;display:grid;gap:1.2cqw}
.slide li{display:flex;align-items:center;gap:1.6cqw;font:600 2.4cqw/1.25 var(--f-body);color:var(--hielo)}
.slide li::before{content:"";flex:none;width:1.2cqw;height:1.2cqw;border-radius:.3cqw;background:var(--verde);transform:rotate(-8deg)}
.slide-mark{position:absolute;top:4cqw;right:4cqw;width:4.6cqw;height:4.6cqw;min-width:26px;min-height:26px}
.slide-mark svg{width:100%;height:100%;display:block}
.pending-chip{position:absolute;left:4cqw;bottom:4cqw;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hielo);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:8px 11px;border-radius:8px}
@container (max-width:600px){
  .slide{padding:5cqw 7cqw 13cqw;gap:1.6cqw}
  .slide-eyebrow{display:none}
  .slide h3{font-size:5.4cqw}
  .slide li{font-size:3.4cqw;gap:2cqw}
  .slide li::before{width:1.8cqw;height:1.8cqw}
  .slide ul{gap:1cqw}
}

.idea{margin-top:44px}
.idea small{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--verde-tinta)}
.idea p{margin-top:12px;font:italic 900 clamp(24px,2.8vw,34px)/1.12 var(--f-display);letter-spacing:-.015em;color:var(--noche);text-wrap:balance;max-width:24ch}
.body{display:grid;gap:20px;margin-top:24px;max-width:40em;color:var(--tinta-2);font-size:17.5px;line-height:1.75}
.case{margin-top:40px;background:var(--noche);color:var(--blanco);border-radius:18px;padding:24px 26px;display:grid;gap:10px}
.case-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:500 11.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--verde)}
.case-k span{color:var(--niebla)}
.case h2{font:italic 900 23px/1.15 var(--f-display)}
.case p{color:var(--hielo);font-size:17px;line-height:1.65;max-width:40em}
.exercise{margin-top:20px;padding:24px 26px;border-radius:18px;background:var(--papel)}
.exercise h2,.sec-h{font:italic 900 23px/1.1 var(--f-display);color:var(--noche)}
.exercise p{margin-top:10px;color:var(--tinta-2);font-size:17px;line-height:1.7;max-width:40em}
.resources{margin-top:40px}
.res-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--linea)}
.res-list li{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linea)}
.res-type{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px 6px;border-radius:7px;background:var(--vivo-soft);color:var(--vivo-2)}
.res-type.pdf{background:var(--verde-soft);color:var(--verde-tinta)}
.res-name{font-weight:600;color:var(--tinta);line-height:1.35}
.help{margin-top:34px;font-size:16px;color:var(--tinta-2)}
.done-row{margin-top:30px;padding-top:24px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.mark{appearance:none;border:0;background:transparent;padding:8px 2px;display:inline-flex;align-items:center;gap:12px;font:600 17px/1 var(--f-body);color:var(--tinta-3);cursor:pointer;border-radius:10px}
.mark:hover{color:var(--tinta)}
.mark-ico{width:28px;height:28px;border-radius:50%;border:2px solid var(--niebla);display:grid;place-items:center;transition:background .2s,border-color .2s}
.mark[aria-pressed="true"]{color:var(--verde-tinta)}
.mark[aria-pressed="true"] .mark-ico{background:var(--verde);border-color:var(--verde);color:var(--noche)}
.done-note{font-size:14px;color:var(--tinta-3)}
.pager{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pg{appearance:none;border:0;cursor:pointer;text-align:left;border-radius:16px;padding:20px 22px;display:grid;gap:8px;align-content:start;transition:background .2s,box-shadow .2s,transform .2s}
.pg small{font:700 14.5px/1 var(--f-body)}
.pg b{font:600 18px/1.35 var(--f-body)}
.pg-prev{background:var(--blanco);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.pg-prev small{color:var(--tinta-3)}
.pg-prev:hover{box-shadow:inset 0 0 0 1.5px var(--vivo)}
.pg-next{grid-column:2;background:var(--vivo);color:var(--blanco)}
.pg-next:hover{background:var(--vivo-2);transform:translateY(-2px)}
.pg-end{background:var(--noche)}
.pg-end:hover{background:var(--noche-3)}

/* Temario */
.temario{position:sticky;top:calc(var(--nav-h) + 28px + env(safe-area-inset-top,0px));max-height:calc(100vh - var(--nav-h) - 56px);overflow:auto;padding:4px 4px 12px;min-width:0}
.temario h2{font:italic 900 34px/1 var(--f-display);color:var(--vivo);margin-left:12px}
.t-home{margin:12px 12px 0;font-size:14.5px}
.t-prog{margin:18px 12px 0;display:grid;gap:9px}
.t-prog-row{display:flex;justify-content:space-between;gap:12px;font:500 11.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.t-block{margin-top:24px}
.t-block-h{padding:0 12px 8px;font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.t-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.t-item{appearance:none;border:0;background:transparent;width:100%;text-align:left;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 12px;border-radius:12px;cursor:pointer;color:var(--tinta-2);font:500 15.5px/1.4 var(--f-body)}
.t-item:hover{background:var(--papel);color:var(--tinta)}
.t-item[aria-current="true"]{background:var(--vivo-soft);color:var(--vivo-2);font-weight:700}
.t-ico{width:24px;height:24px;border-radius:50%;border:2px solid var(--niebla);display:grid;place-items:center;margin-top:-1px}
.t-item[aria-current="true"] .t-ico,.syl-item.is-cur .t-ico{border-color:var(--vivo);box-shadow:inset 0 0 0 4px var(--vivo-soft),inset 0 0 0 12px var(--vivo)}
.is-done .t-ico{background:var(--verde);border-color:var(--verde);color:var(--noche);box-shadow:none!important}
.t-dur{font:500 12px/1.75 var(--f-mono);color:var(--tinta-3);font-variant-numeric:tabular-nums}

@media (max-width:1000px){
  .lesson-grid{grid-template-columns:minmax(0,1fr)}
  .temario{display:none}
  .temario-toggle{display:flex}
}
@media (min-width:1001px){.temario-mob{display:none!important}}
@media (max-width:560px){
  .pager{grid-template-columns:1fr}
  .pg-next{grid-column:auto;order:-1}
  .res-list li{grid-template-columns:minmax(0,1fr) auto}
  .res-type{grid-column:1/-1;justify-self:start}
}

/* ============ MIS CURSOS ============ */
#lib{background:var(--papel)}
.resume{appearance:none;border:0;text-align:left;cursor:pointer;min-width:0;display:grid;gap:14px;background:var(--blanco);color:var(--tinta);border-radius:22px;padding:18px;box-shadow:0 50px 100px -40px rgba(0,0,0,.7),0 0 0 8px rgba(36,72,255,.14);transition:transform .2s}
.resume:hover{transform:translateY(-3px)}
.resume-k{font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vivo)}
.thumb{container-type:inline-size;position:relative;display:flex;flex-direction:column;justify-content:center;gap:2.4cqw;aspect-ratio:16/9;max-width:100%;border-radius:14px;overflow:hidden;padding:0 9cqw;color:var(--blanco);background:radial-gradient(60% 90% at 90% 0%,rgba(36,72,255,.55),transparent 70%),var(--noche)}
.thumb-k{font:500 2.8cqw/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vivo-claro)}
.thumb-t{font:italic 900 6.4cqw/1.05 var(--f-display);max-width:16ch}
.thumb-play{position:absolute;right:5cqw;bottom:5cqw;width:13cqw;height:13cqw;border-radius:50%;background:var(--vivo);display:grid;place-items:center}
.thumb-play svg{width:45%;height:45%;margin-left:8%}
.thumb-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.2)}
.thumb-bar i{display:block;height:100%;width:var(--w);background:var(--verde)}
.resume-t{display:grid;gap:6px;padding:0 4px}
.resume-t small{font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.resume-t b{font:700 19px/1.3 var(--f-body)}
.resume-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 4px 4px}
.resume-foot span{font-size:14px;color:var(--tinta-3)}
.resume-cta{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:var(--noche)!important;font-weight:700;font-size:15px!important;padding:11px 16px;border-radius:11px}

.lib-sec{padding-block:clamp(40px,6vw,64px) 0}
.lib-sec:last-child{padding-bottom:clamp(56px,7vw,88px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:22px}
.sec-head h2{margin-top:12px;font-size:clamp(27px,3.2vw,40px);font-weight:800}
.sec-head h2 em{font-style:italic;font-weight:900;color:var(--vivo)}
.sec-sub{color:var(--tinta-2);max-width:30em}

.own{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(20px,3.4vw,40px);align-items:center;background:var(--blanco);border:1px solid var(--linea);border-radius:24px;padding:16px}
.own-body{min-width:0;display:grid;gap:12px;padding:8px 10px 8px 0}
.own-body h3{font:italic 900 clamp(24px,2.6vw,32px)/1.08 var(--f-display);color:var(--noche)}
.own-body>p{color:var(--tinta-2)}
.blocks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.blocks li{display:grid;grid-template-columns:minmax(0,1fr) 110px 34px;gap:14px;align-items:center;font-size:15px;color:var(--tinta)}
.bk-n{font:500 12px/1 var(--f-mono);color:var(--tinta-3);text-align:right;font-variant-numeric:tabular-nums}
.own-foot{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.own-foot>div{display:flex;flex-wrap:wrap;gap:10px}
.own-foot>span{font-size:14.5px;color:var(--tinta-3)}


/* Portadas de curso (dibujadas en CSS) */
.cover{container-type:inline-size;position:relative;aspect-ratio:16/10;width:100%;max-width:100%;border-radius:14px;overflow:hidden;display:grid;place-items:center;color:var(--blanco);background:radial-gradient(70% 90% at 92% 0%,rgba(36,72,255,.6),transparent 70%),radial-gradient(60% 70% at 0% 100%,rgba(0,205,101,.16),transparent 70%),var(--noche)}
.cover::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:8cqw 8cqw}
.cover-tag{position:absolute;left:5cqw;top:5cqw;display:flex;align-items:center;gap:2cqw;font:500 3.1cqw/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vivo-claro)}
.cover-tag::before{content:"";width:2.4cqw;height:2.4cqw;border-radius:.6cqw;background:var(--verde);transform:rotate(-8deg)}
.cover-art{position:relative;width:74%;margin-top:7cqw}
.fb{background:var(--blanco);color:var(--noche);border-radius:3cqw;overflow:hidden;width:82%;margin:0 auto}
.fb-h{display:flex;align-items:center;gap:2cqw;padding:2.4cqw 3cqw}
.fb-h i{width:5cqw;height:5cqw;border-radius:50%;background:var(--vivo)}
.fb-h b{display:block;font:700 3cqw/1.1 var(--f-body)}
.fb-h small{display:block;font:500 2.4cqw/1.2 var(--f-body);color:var(--tinta-3)}
.fb-img{padding:4cqw 3cqw;font:italic 900 5cqw/1 var(--f-display);color:var(--blanco);background:linear-gradient(135deg,var(--vivo),var(--noche-3))}
.fb-img em{color:var(--verde)}
.fb-cta{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:2.4cqw 3cqw;font:600 2.7cqw/1.1 var(--f-body)}
.fb-cta b{background:var(--verde);color:var(--noche);padding:1.4cqw 2.4cqw;border-radius:1.4cqw}

@media (max-width:860px){.own{grid-template-columns:1fr}.own-body{padding:4px 6px 6px}}
@media (max-width:560px){.blocks li{grid-template-columns:minmax(0,1fr) 70px 30px;gap:10px}}

/* Pie y avisos */
.foot{background:var(--blanco);border-top:1px solid var(--linea)}
main:has(#lib:not([hidden]))+.foot{background:var(--papel)}
main:has(#login:not([hidden]))+.foot{display:none}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:22px;font-size:13.5px;color:var(--tinta-3)}
.foot-in .grow{flex:1}
.foot-in a{color:inherit}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:70;transform:translate(-50%,16px);opacity:0;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);background:var(--noche);color:var(--blanco);font-weight:600;font-size:14.5px;line-height:1.4;padding:13px 18px;border-radius:12px;box-shadow:0 20px 40px -16px var(--sombra);transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Usuario y salida en la barra */
.logout{appearance:none;border:0;background:transparent;color:var(--hielo);font-weight:600;font-size:14px;padding:9px 10px;border-radius:10px;cursor:pointer}
.logout:hover{color:var(--blanco);background:rgba(255,255,255,.07)}
body.out .nav-links,body.out .user{display:none}
@media (max-width:560px){.logout{display:none}}

/* Entrada a la academia */
.login-hero .wrap{grid-template-columns:minmax(0,1fr);justify-items:center;min-height:calc(100vh - var(--nav-h));min-height:calc(100dvh - var(--nav-h))}
.login-card{width:100%;max-width:440px;background:var(--blanco);color:var(--tinta);border-radius:24px;padding:clamp(24px,5vw,36px);display:grid;gap:14px;box-shadow:0 50px 100px -40px rgba(0,0,0,.7),0 0 0 8px rgba(36,72,255,.14)}
.login-card h1{margin:0;font:italic 900 clamp(30px,4vw,40px)/1.05 var(--f-display);color:var(--noche)}
.login-card>p{color:var(--tinta-2)}
.login-card form{display:grid;gap:10px;margin-top:6px}
.login-card label{font-weight:600;font-size:15px}
.login-card input{width:100%;border:1.5px solid var(--linea);border-radius:12px;padding:14px 16px;font:500 17px/1.3 var(--f-body);color:var(--tinta);background:var(--blanco)}
.login-card input:focus{outline:0;border-color:var(--vivo);box-shadow:0 0 0 4px var(--vivo-soft)}
#code{font:500 24px/1 var(--f-mono);letter-spacing:.3em;text-align:center}
.login-card .btn{width:100%;margin-top:4px}
.login-card .btn[disabled]{opacity:.6;cursor:wait;transform:none}
.form-err{color:var(--rojo);font-size:14.5px;font-weight:600}
.form-ok{color:var(--verde-tinta);font-size:14.5px;font-weight:600}
.login-alt{font-size:14.5px;color:var(--tinta-3)}
.local-note{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--verde-tinta);background:var(--verde-soft);padding:9px 11px;border-radius:9px}

/* Cargando y avisos de estado */
.state{min-height:calc(100vh - var(--nav-h) - 80px);display:grid;place-items:center;text-align:center;padding:40px 16px;color:var(--tinta-2)}
.state h2{font:italic 900 28px/1.1 var(--f-display);color:var(--noche);margin-bottom:10px}
.state p{max-width:30em;margin:0 auto 18px}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--linea);border-top-color:var(--vivo);animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Plantilla aún no subida y bonus pendiente */
.btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}
.t-soon{color:var(--tinta-3);cursor:default}
.t-soon:hover{background:transparent;color:var(--tinta-3)}
.t-soon .t-ico{border-style:dashed}