/* ============================================================
   EduIngenio — páginas de curso (rediseño editorial, fase 2)
   Se carga DESPUÉS de css/eduingenio.css: usa sus tokens, sus anillos
   y su movimiento. --curso = color propio de cada curso (lo pone el
   <body style>); solo decora (resplandor de la carátula, puntos), nunca
   es color de texto: los tonos viejos se pensaron para fondo oscuro.
   ============================================================ */

:root{--label:var(--ink);--curso:var(--brand-2)}

/* piezas del diseño anterior que ya no se muestran (el JS de la página
   todavía usa #scrollProgress: se oculta, no se borra) */
.blob,.shimmer,.scroll-progress,.thumb-title{display:none!important}
[class*="accent-"]{color:inherit;text-shadow:none}

/* ---------- cabecera ---------- */
#mainHeader{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;background:var(--paper);border-bottom:1px solid var(--rule);transition:transform 380ms var(--ease-out),border-color 160ms ease,background-color 200ms ease}
#mainHeader.scrolled{border-bottom-color:var(--rule-strong);background:rgba(243,238,228,.94)}
#mainHeader.oculto{transform:translateY(-101%)}
#mainHeader img{height:50px!important;width:auto!important;filter:none!important}
.logo-sub{display:none;max-width:22ch;padding-left:14px;border-left:1px solid var(--rule);font:500 12px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.header-badge{display:none;padding:7px 10px;border:1px solid var(--rule-strong);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.back-btn{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--brand);border-radius:2px;font:600 14px/1 var(--sans);color:var(--brand);text-decoration:none;white-space:nowrap;transition:background-color 200ms ease,color 200ms ease}
@media (hover:hover) and (pointer:fine){.back-btn:hover{background:var(--brand);color:var(--paper)}}
@media (min-width:640px){.logo-sub{display:block}}
@media (min-width:1024px){
  #mainHeader{padding:0 32px}
  #mainHeader.scrolled{background:rgba(243,238,228,.86);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
  .header-badge{display:inline-block}
}

/* ---------- hero del curso (con los anillos de la portada) ---------- */
.course-hero{position:relative;isolation:isolate;overflow:hidden;padding:24px 0 56px;border-bottom:1px solid var(--rule)}
.course-hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(34,35,102,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,35,102,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 72% 45%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 70% at 72% 45%,#000 15%,transparent 72%)}
.course-hero .hero-glow,.course-hero .hero-glow2,.course-hero .hero-ring{z-index:-1}
.breadcrumb{display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:28px;font:500 12px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--brand);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.course-hero-inner{display:grid;gap:36px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2)}
.hero-eyebrow .ico{font-size:16px;color:var(--brand)}
.course-hero h1{font-size:clamp(36px,4.4vw,60px);line-height:1.04;letter-spacing:-.024em;text-wrap:balance}
.course-hero h1 em{font-style:italic;color:var(--brand)}
.course-hero h1 .hero-linea-chica{margin-top:.35em;font-size:.48em;letter-spacing:-.01em;color:var(--ink-soft)}
.course-hero .hero-desc{max-width:58ch;margin-top:22px;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--ink-soft)}
.course-hero .hero-stats{display:flex;flex-wrap:wrap;gap:1px;margin-top:28px;background:var(--rule);border:1.5px solid var(--rule-strong)}
.hero-stat-item{display:flex;flex:1 1 150px;align-items:center;gap:10px;padding:14px 16px;background:var(--sheet);font-size:14px;line-height:1.35;color:var(--ink-soft)}
@media (min-width:1024px){.hero-stat-item{flex-basis:230px}}
.hero-stat-icon{display:inline-flex;flex-shrink:0;font-size:18px;color:var(--brand)}
.hero-stat-val{font:500 22px/1 var(--serif);color:var(--ink)}
.hero-course-list{display:grid;gap:8px;margin-top:22px}
.hero-course-item{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-soft)}
.hero-course-item::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--curso)}
/* carátula: resplandor con el color del curso (simetría carátula ↔ página) */
.course-thumb-hero{position:relative;aspect-ratio:16/9;background-color:var(--paper-deep);border:1px solid var(--rule-strong);box-shadow:0 34px 60px -34px var(--curso),0 0 0 6px var(--sheet),0 0 0 7px var(--rule);transition:translate 450ms var(--ease-out),box-shadow 450ms ease}
@media (hover:hover) and (pointer:fine){.course-thumb-hero:hover{translate:0 -6px;box-shadow:0 44px 70px -30px var(--curso),0 0 0 6px var(--sheet),0 0 0 7px var(--rule)}}
/* (16 oct 2026) Curso publicado antes de tener carátula: el ícono va centrado y grande, como en la tarjeta del catálogo */
.thumb-icon{position:absolute;inset:0;display:grid;place-items:center;font-size:72px;color:var(--brand)}
.thumb-badge-hero{position:absolute;top:14px;left:14px;padding:6px 9px;background:var(--paper);border:1px solid var(--rule-strong);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.thumb-price-hero{position:absolute;right:14px;bottom:14px;padding:8px 12px 6px;background:var(--paper);border:1px solid var(--rule-strong)}
.thumb-price-big{font:500 34px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.thumb-price-big span,.thumb-price-currency{font-size:16px!important;vertical-align:.7em!important;margin-right:2px}
.thumb-tech-row{position:absolute;left:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:6px;max-width:60%}
.thumb-tech-row > *{background:var(--paper)}
@media (min-width:1024px){
  .course-hero{padding:36px 0 84px}
  .course-hero-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}
}

/* ---------- cuerpo: contenido + tarjeta de compra ---------- */
.course-layout{display:grid;gap:40px;max-width:1200px;margin:0 auto;padding:32px 20px 72px}
@media (min-width:1024px){
  .course-layout{grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start;padding:48px 32px 104px}
  .course-sidebar{position:sticky;top:96px}
}

/* pestañas */
.tab-bar{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;border-bottom:1.5px solid var(--rule-strong)}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{position:relative;flex-shrink:0;min-height:52px;padding:14px 0;background:none;border:0;font:600 16px/1 var(--sans);color:var(--ink-soft);cursor:pointer;transition:color 200ms ease}
.tab-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:right center;transition:transform 380ms var(--ease-out)}
.tab-btn.active{color:var(--ink)}
.tab-btn.active::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.tab-btn:hover{color:var(--ink)}.tab-btn:hover::after{transform:scaleX(1);transform-origin:left center}}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* títulos de cada bloque (en el curso, .section-label es un h2) */
.course-main .section-label{display:block;margin:44px 0 16px;font:500 clamp(26px,2.6vw,32px)/1.2 var(--serif);letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.course-main .section-label::before{display:none}
.course-main .tab-panel > .section-label:first-child{margin-top:32px}

/* descripción */
.desc-intro{max-width:68ch;font-size:18px;line-height:1.7;color:var(--ink-soft)}
.outcome-box{margin:28px 0;padding:20px 22px;background:var(--sheet);border:1px solid var(--rule);border-left:4px solid var(--brand)}
.outcome-tag{margin-bottom:10px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2)}
.outcome-text{font:500 20px/1.45 var(--serif);color:var(--ink)}
.learn-grid{display:grid;border-top:1px solid var(--rule)}
.learn-item{position:relative;padding:14px 0 14px 32px;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.5;color:var(--ink)}
.learn-item::before{content:"";position:absolute;left:4px;top:20px;width:13px;height:7px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
@media (min-width:700px){.learn-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
.target-section{margin-top:40px;padding:24px;background:var(--paper-deep);border:1px solid var(--rule)}
.target-title{margin-bottom:14px;font:500 24px/1.2 var(--serif);color:var(--ink)}
.target-list{display:grid;gap:10px}
.target-item{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.target-dot{flex-shrink:0;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--curso);box-shadow:0 0 0 3px color-mix(in srgb,var(--curso) 25%,transparent)}

/* temario desplegable (módulos y, en el pack, cursos) */
.module-list{border-top:1.5px solid var(--rule-strong)}
.module-item,.course-block{border-bottom:1px solid var(--rule)}
.module-header,.course-block-header{display:flex;align-items:center;gap:16px;padding:18px 6px;cursor:pointer;user-select:none;transition:background-color 200ms ease}
@media (hover:hover) and (pointer:fine){.module-header:hover,.course-block-header:hover{background:var(--sheet)}}
.module-num,.course-block-num{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border:1px solid var(--rule-strong);border-radius:50%;background:none;font:500 18px/1 var(--serif);color:var(--ink);transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease}
.module-item.open .module-num,.course-block.open .course-block-num{background:var(--brand);border-color:var(--brand);color:var(--paper)}
.module-info,.course-block-info{flex:1;min-width:0}
.module-name,.course-block-name{font:500 20px/1.3 var(--serif);color:var(--ink)}
.module-meta,.course-block-meta{margin-top:4px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.module-toggle,.course-block-toggle{flex-shrink:0;width:32px;font-size:13px;line-height:1;text-align:center;color:var(--brand);transition:rotate 300ms var(--ease-out)}
.module-item.open .module-toggle,.course-block.open .course-block-toggle{rotate:180deg}
.module-topics,.course-block-body{display:none;padding:0 0 18px}
.module-item.open .module-topics,.course-block.open .course-block-body{display:block}
@media (min-width:700px){.module-topics{padding-left:62px}}
.topic-list{display:grid;gap:10px}
.topic-item{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--sheet);border:1px solid var(--rule);font-size:15px;line-height:1.45}
.topic-item .ico{color:var(--brand)}
.topic-label{font:500 12px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;color:var(--brand-2)}
.topic-bullet{position:relative;padding-left:16px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.topic-bullet::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--curso)}
.topic-mat{display:inline-block;margin-top:6px;padding:5px 8px;border:1px dashed var(--rule-strong);font:500 12px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink-soft)}

/* qué incluye */
.includes-grid{display:grid;gap:16px;margin-top:8px}
@media (min-width:700px){.includes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.include-card{padding:20px;background:var(--sheet);border:1px solid var(--rule);transition:translate 380ms var(--ease-out),border-color 200ms ease,box-shadow 380ms ease}
.include-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border:1px solid var(--rule-strong);border-radius:50%;font-size:20px;color:var(--brand);transition:rotate 500ms var(--ease-out),background-color 300ms ease,color 300ms ease,border-color 300ms ease}
.include-title{font:500 20px/1.25 var(--serif);color:var(--ink)}
.include-desc{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){
  .include-card:hover{translate:0 -4px;border-color:var(--brand);box-shadow:0 18px 36px -22px rgba(34,35,102,.45)}
  .include-card:hover .include-icon{rotate:-10deg;background:var(--brand);border-color:var(--brand);color:var(--paper)}
}
.plantillas-box{margin-top:32px;padding:20px;background:var(--sheet);border:1px solid var(--rule)}
.plantillas-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:500 22px/1.2 var(--serif);color:var(--ink)}
.plantillas-count{padding:4px 8px;background:var(--brand);font:600 13px/1 var(--mono);color:var(--paper)}
.plantillas-tags,.tech-tags{display:flex;flex-wrap:wrap;gap:8px}
.plantilla-tag,.tech-tag{padding:6px 10px;background:var(--paper);border:1px solid var(--rule-strong);font:500 12px/1.2 var(--mono);letter-spacing:.04em;color:var(--ink);transition:background-color 200ms ease,color 200ms ease}
@media (hover:hover) and (pointer:fine){.plantilla-tag:hover,.tech-tag:hover{background:var(--brand);color:var(--paper)}}

/* ---------- tarjeta de compra ---------- */
.purchase-card{position:relative;padding:26px 24px 24px;background:var(--sheet);border:1.5px solid var(--rule-strong);box-shadow:0 26px 50px -34px rgba(34,35,102,.5)}
.purchase-card::before{content:"";position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;height:5px;background:linear-gradient(90deg,var(--brand),var(--brand-2) 60%,var(--curso))}
.price-badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.price-badge-oferta,.price-badge-dscto{padding:6px 8px;border:1px solid var(--rule-strong);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.price-badge-oferta{background:var(--brand);border-color:var(--brand);color:var(--paper)}
.price-main{font:500 64px/1 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.price-currency{margin-right:4px;font-size:24px;letter-spacing:0;vertical-align:.95em}
.price-old-row{margin-top:10px;font-size:14px;color:var(--muted)}
.includes-list{display:grid;gap:10px;margin:22px 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.includes-list-title{margin-bottom:4px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.inc-item{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:var(--ink)}
.inc-item-icon{display:inline-flex;flex-shrink:0;margin-top:2px;color:var(--brand)}
.btn-comprar,.btn-wa{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:14px 20px;border:1.5px solid var(--brand);border-radius:2px;font:600 17px/1.2 var(--sans);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:scale 160ms var(--ease-out),translate 280ms var(--ease-out),color 220ms ease,border-color 220ms ease}
.btn-comprar{background:var(--brand);color:var(--paper)}
.btn-wa{margin-top:10px;background:transparent;color:var(--brand)}
.btn-comprar::before,.btn-wa::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right center;transition:transform 420ms var(--ease-out)}
.btn-comprar::before{background:var(--brand-2)}
.btn-wa::before{background:var(--brand)}
.btn-comprar:active,.btn-wa:active{scale:.97}
@media (hover:hover) and (pointer:fine){
  .btn-comprar:hover::before,.btn-wa:hover::before{transform:scaleX(1);transform-origin:left center}
  .btn-comprar:hover{border-color:var(--brand-2)}
  .btn-wa:hover{color:var(--paper)}
}
.access-note{margin-top:14px;font-size:14px;line-height:1.55;text-align:center;color:var(--ink-soft)}
.alerta{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;background:var(--brand-tint);border-left:3px solid var(--brand);font-size:14px;line-height:1.5;color:var(--ink)}
.alerta .ico{flex-shrink:0;margin-top:2px;font-size:16px;color:var(--brand)}

/* ---------- pie del curso ---------- */
body > footer{padding:44px 20px 32px;text-align:center;font-size:15px;line-height:1.7}
body > footer a{color:var(--paper);text-underline-offset:4px}
.footer-norm{margin-top:14px;font-size:13px;color:#C9C2B4}
.footer-norm a{color:#E8E2D6}

/* aparición al bajar: las tarjetas que suben al pasar el mouse conservan su transición */
.js .include-card.fade-up{transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out),translate 380ms var(--ease-out),border-color 200ms ease,box-shadow 380ms ease}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  #mainHeader,.module-toggle,.course-block-toggle,.tab-btn::after{transition:none}
  .course-thumb-hero:hover,.include-card:hover{translate:none}
  .include-card:hover .include-icon{rotate:none}
  .btn-comprar:active,.btn-wa:active{scale:none}
  .btn-comprar::before,.btn-wa::before{transition:none}
}