/* ═══════════════════════════════════════════════════════════════════════
   CURSO MOTION — la capa unificada de las cinco páginas de cursos
   ═══════════════════════════════════════════════════════════════════════
   Archivo NUEVO a propósito (style.css está cacheado immutable un año).
   Lo cargan sólo las páginas del menú Cursos, que declaran su acento con
   <body data-cx="cl|si|ia|cp|en">. Cada curso conserva su color; lo que
   se unifica es la tipografía, el ritmo de las secciones, los marcos de
   los íconos, las escenas SVG del hero y la coreografía de descubrimiento.

   CONTRATO (el mismo del home, coaching y el aula, no romperlo):
   el CSS base muestra la composición TERMINADA. `.hm-discovered` (lo pone
   js/curso-motion.js con un IntersectionObserver, una sola vez, nunca con
   reduced motion ni navegando con Tab) sólo dispara keyframes finitos con
   `both`. Sin JS, con un error o con la pestaña oculta se ve todo entero.
   ═══════════════════════════════════════════════════════════════════════ */

body[data-cx]{--cx-ease:var(--nn-e-salida,cubic-bezier(.22,1,.36,1));--cx-out:var(--nn-e-out,cubic-bezier(.16,1,.3,1))}
body[data-cx="cl"]{--cx:#00e676;--cx2:#00d4ff;--cx-rgb:0,230,118;--cx2-rgb:0,212,255}
body[data-cx="si"]{--cx:#00b8ff;--cx2:#7c5cff;--cx-rgb:0,184,255;--cx2-rgb:124,92,255}
body[data-cx="ia"]{--cx:#7c5cff;--cx2:#06d6a0;--cx-rgb:124,92,255;--cx2-rgb:6,214,160}
body[data-cx="cp"]{--cx:#00e676;--cx2:#00d4ff;--cx-rgb:0,230,118;--cx2-rgb:0,212,255}
body[data-cx="en"]{--cx:#f59e0b;--cx2:#f97316;--cx-rgb:245,158,11;--cx2-rgb:249,115,22}

/* ── 1. Tipografía: tracking según tamaño, no un valor para todo ──────
   Los títulos grandes se aprietan; el cuerpo queda en cero. */
body[data-cx] .page-hero h1{letter-spacing:-.035em;line-height:1.08;text-wrap:balance;font-optical-sizing:auto}
body[data-cx] .section-title{letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
body[data-cx] .section-sub{line-height:1.75;max-width:62ch;text-wrap:pretty}
body[data-cx] .page-hero p{text-wrap:pretty}
body[data-cx] h3{letter-spacing:-.015em;text-wrap:balance}

/* El rótulo de sección pasa de barra degradada a kicker editorial: una
   línea fina del color del curso y el texto con más aire. */
body[data-cx] .section-label{gap:.7rem;font-weight:600;letter-spacing:.14em;color:var(--cx)}
body[data-cx] .section-label::before{width:26px;height:1px;border-radius:0;background:currentColor;opacity:.85;transform-origin:left center}
body[data-cx] .section-label i{font-size:.8em}

/* ── 2. Respuesta al toque: el feedback vive en el pointer-down ──────── */
body[data-cx] a[class*="-cta"],body[data-cx] .btn-secondary,body[data-cx] [class*="-btn-"],body[data-cx] .mobile-sticky-btn,body[data-cx] [data-buy]{transition:transform .16s var(--cx-ease),box-shadow .2s ease,background-color .2s ease,filter .2s ease}
body[data-cx] a[class*="-cta"]:active,body[data-cx] .btn-secondary:active,body[data-cx] [class*="-btn-"]:active,body[data-cx] .mobile-sticky-btn:active,body[data-cx] [data-buy]:active{transform:scale(.97)}
body[data-cx] [class$="-card"],body[data-cx] [class$="-stat"],body[data-cx] [class$="-entrega"],body[data-cx] [class$="-fecha"],body[data-cx] [class$="-perfil"],body[data-cx] [class$="-eco-card"]{transition:transform .32s var(--cx-ease),border-color .25s ease,box-shadow .32s ease}
@media(hover:hover) and (pointer:fine){
  body[data-cx] [class$="-card"]:hover,body[data-cx] [class$="-entrega"]:hover,body[data-cx] [class$="-fecha"]:hover,body[data-cx] [class$="-perfil"]:hover{transform:translateY(-4px)}
}

/* ── 3. El hero: escena SVG del curso detrás de la columna derecha ────
   Reemplaza a los tres íconos flotantes de Font Awesome. Se ve entera
   sin JS; con `.hm-discovered` se ensambla una vez. */
body[data-cx] .page-hero>.container{position:relative;z-index:2}
.cx-hero-art{position:absolute;z-index:1;right:-2%;top:50%;width:min(46vw,640px);aspect-ratio:520/420;transform:translateY(-52%);pointer-events:none;opacity:.9}
.cx-art svg{width:100%;height:100%;overflow:visible;color:var(--cx)}
.cx-art .cx-halo{fill:none;stroke:var(--cx);stroke-opacity:.16;transform-origin:260px 210px}
.cx-art .cx-halo ellipse:nth-child(2){stroke-opacity:.11}
.cx-art .cx-halo ellipse:nth-child(3){stroke-opacity:.07}
.cx-art .cx-panel{fill:rgba(13,21,37,.72);stroke:rgba(var(--cx-rgb),.35);stroke-width:1.2}
.cx-art .cx-panel-bar{fill:rgba(var(--cx-rgb),.08)}
.cx-art .cx-line{fill:none;stroke:var(--cx);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cx-art .cx-line-2{stroke:var(--cx2)}
.cx-art .cx-line-soft{stroke-opacity:.42}
.cx-art .cx-dot{fill:var(--cx)}
.cx-art .cx-dot-2{fill:var(--cx2)}
.cx-art .cx-tint{fill:rgba(var(--cx-rgb),.16)}
.cx-art .cx-tint-2{fill:rgba(var(--cx2-rgb),.16)}
.cx-art .cx-label{font:600 9.5px var(--font-body,Arial);letter-spacing:.14em;fill:var(--cx);opacity:.8}
.cx-art .cx-route{fill:none;stroke:var(--cx);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 5;stroke-opacity:.6}
.cx-art .cx-draw{stroke-dasharray:1;stroke-dashoffset:0}
.cx-art .cx-orbit{transform-origin:260px 210px}
.cx-art .cx-detail,.cx-art .cx-glint{transform-box:fill-box;transform-origin:center}
.cx-art .cx-bar{transform-box:fill-box;transform-origin:center bottom}
.cx-art .cx-beam{transform-box:view-box;transform-origin:var(--pivot,260px 210px)}
.cx-art .cx-glow{filter:drop-shadow(0 0 10px rgba(var(--cx-rgb),.55))}
@media(max-width:1200px){.cx-hero-art{width:min(52vw,560px);right:-8%}}
@media(max-width:991px){.cx-hero-art{width:min(88vw,480px);right:auto;left:50%;top:auto;bottom:-6%;transform:translateX(-50%);opacity:.34}}

/* La escena del curso vive como franja DENTRO de la tarjeta-ventana (el
   patrón del aula: ventana → arte → contenido). Detrás de la tarjeta sólo
   quedan los anillos, y la tarjeta es un material translúcido. */
.cx-window-art{position:relative;margin:-1.6rem -1.5rem 1.2rem;aspect-ratio:520/330;border-radius:22px 22px 0 0;overflow:hidden;background:radial-gradient(ellipse at 50% 62%,rgba(var(--cx-rgb),.16),transparent 66%),rgba(8,14,26,.42);border-bottom:1px solid rgba(var(--cx-rgb),.18)}
.cx-window-art svg{display:block;width:100%;height:100%;overflow:hidden}
.cl-offer .cx-window-art{margin:-1.5rem -1.4rem 1.1rem;aspect-ratio:520/220;border-radius:24px 24px 0 0}
.cx-glass,.cx-window{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.cx-window{position:relative;background:linear-gradient(165deg,rgba(var(--cx-rgb),.09),rgba(10,13,21,.62));border:1px solid rgba(var(--cx-rgb),.28);border-radius:22px;padding:1.6rem 1.5rem;box-shadow:0 26px 60px rgba(0,0,0,.45);max-width:420px;margin:0 auto}
.cx-ficha-label{display:flex;align-items:center;gap:.6rem;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cx);margin-bottom:1.1rem}
.cx-ficha{display:grid;gap:.75rem}
.cx-ficha>div{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:.6rem}
.cx-ficha>div:last-child{border-bottom:0;padding-bottom:0}
.cx-ficha span{color:var(--muted,#8fa3b8)}.cx-ficha b{color:var(--text,#f0f6ff);text-align:right}.cx-ficha b.cx-acento{color:var(--cx)}
@media(prefers-reduced-transparency:reduce){.cx-glass,.cx-window{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0d1525}}
@media(max-width:480px){.cx-window{padding:1.3rem 1.1rem}.cx-window-art{margin:-1.3rem -1.1rem 1rem}}

/* La tarjeta principal del hero (oferta, ficha o tapa) recibe un barrido
   de luz al entrar: se lee como un material que llega, no como un div. */
.cx-sweep{position:relative}
.cx-sweep::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 44%,rgba(255,255,255,.16) 49%,transparent 60%)}

/* ── 4. Marcos de ícono: un anillo fino del color del curso ───────────
   Los íconos de cada página siguen siendo los suyos (FA). El marco los
   unifica y les da una entrada. */
body[data-cx] .cl-card-icon,body[data-cx] .si-card-icon,body[data-cx] .ia-card-icon,body[data-cx] .cp-card-icon,body[data-cx] .en-card-icon,body[data-cx] .cl-eco-icon,body[data-cx] .cp-entrega-n,body[data-cx] .cp-mod-n,body[data-cx] .en-mod-n{position:relative;overflow:visible;isolation:isolate}
body[data-cx] .cl-card-icon::before,body[data-cx] .si-card-icon::before,body[data-cx] .ia-card-icon::before,body[data-cx] .cp-card-icon::before,body[data-cx] .en-card-icon::before,body[data-cx] .cl-eco-icon::before,body[data-cx] .cp-entrega-n::before{content:'';position:absolute;inset:-5px;border-radius:inherit;border:1px solid rgba(var(--cx-rgb),.32);pointer-events:none;z-index:-1}
body[data-cx] .cl-card-icon::after,body[data-cx] .si-card-icon::after,body[data-cx] .ia-card-icon::after,body[data-cx] .cp-card-icon::after,body[data-cx] .en-card-icon::after,body[data-cx] .cp-entrega-n::after{content:'';position:absolute;top:-7px;right:-7px;width:8px;height:8px;border-radius:50%;background:var(--cx2);box-shadow:0 0 0 3px rgba(var(--cx2-rgb),.18);pointer-events:none}
body[data-cx] .cl-eco-icon::after{content:none}
body[data-cx] .cl-tl-dot,body[data-cx] .si-tl-dot,body[data-cx] .ia-tl-dot{transform-origin:center}
body[data-cx] .cl-tl::before,body[data-cx] .si-tl::before,body[data-cx] .ia-tl::before{transform-origin:top center}

/* ── 5. Riel de módulos (cursos en vivo): una línea que une los acordeones */
.cx-rail{position:relative}
.cx-rail::before{content:'';position:absolute;left:-26px;top:22px;bottom:22px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--cx),rgba(var(--cx2-rgb),.35) 70%,transparent);opacity:.55;transform-origin:top center}
.cx-rail>[class$="-mod"]{position:relative}
.cx-rail>[class$="-mod"]::before{content:'';position:absolute;left:-31px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--bg,#080e1a);border:2px solid var(--cx);box-shadow:0 0 0 4px rgba(var(--cx-rgb),.12);transform-origin:center}
@media(max-width:1060px){.cx-rail::before,.cx-rail>[class$="-mod"]::before{display:none}}

/* ── 6. Antes / después: la flecha que une las dos columnas ─────────── */
.cx-vs{position:relative}
.cx-vs-arrow{position:absolute;left:50%;top:50%;z-index:3;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;background:var(--bg2,#0d1525);border:1px solid rgba(var(--cx-rgb),.55);color:var(--cx);font-size:1.05rem;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 6px rgba(var(--cx-rgb),.08);pointer-events:none}
.cx-vs-arrow::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(var(--cx-rgb),.35);opacity:0}
@media(max-width:767px){.cx-vs-arrow{transform:rotate(90deg)}}

/* ── 7. Cifras: una línea que se dibuja bajo el número ─────────────── */
body[data-cx] .cl-stat,body[data-cx] .si-stat,body[data-cx] .ia-stat,body[data-cx] .cp-stat,body[data-cx] .en-stat{position:relative;overflow:hidden}
body[data-cx] .cl-stat::after,body[data-cx] .si-stat::after,body[data-cx] .ia-stat::after,body[data-cx] .cp-stat::after,body[data-cx] .en-stat::after{content:'';position:absolute;left:18%;right:18%;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,transparent,var(--cx),transparent);opacity:.7;transform-origin:center}

/* ── 8. Precio destacado: brillo único al descubrirlo ───────────────── */
/* Sin overflow:hidden: recortaba el cartel "Mejor precio" que sobresale arriba
   de la tarjeta. El brillo recorre el fondo del ::after, que ya mide lo mismo
   que la tarjeta, así que no hace falta recortar nada. */
body[data-cx] [class$="-price-featured"]{position:relative}
body[data-cx] [class$="-price-featured"]::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;border-radius:inherit;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%) 100% 0/300% 100% no-repeat}

/* ── 9. Docente en dos columnas (foto + texto), igual en las cinco ──── */
.cx-docente-foto{position:relative;max-width:360px;margin:0 auto;border-radius:22px}
.cx-docente-foto::before{content:'';position:absolute;inset:-12px;background:linear-gradient(135deg,rgba(var(--cx-rgb),.22),rgba(var(--cx2-rgb),.16));border-radius:28px;filter:blur(24px);opacity:.55;z-index:-1}
.cx-docente-foto img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid rgba(var(--cx-rgb),.3)}
.cx-docente-foto figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:12px;background:rgba(8,14,26,.72);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.08);font-size:.78rem;color:var(--text,#f0f6ff)}
.cx-docente-foto figcaption i{color:var(--cx)}
@media(prefers-reduced-transparency:reduce){.cx-docente-foto figcaption{background:#0d1525;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ── 10. Ritmo: listas largas respiran ──────────────────────────────── */
body[data-cx] [class$="-vs-item"]{transform-origin:left center}
body[data-cx] .cp-lista li,body[data-cx] .en-lista li,body[data-cx] .cl-tl-item,body[data-cx] .si-tl-item,body[data-cx] .ia-tl-item{transform-origin:left center}

/* ═══ COREOGRAFÍA — sólo con .hm-discovered y sin reduced motion ═══════ */
@media(prefers-reduced-motion:no-preference){
  .hm-discovered .section-label::before{animation:cx-draw-x .7s var(--cx-out) both}
  .hm-discovered .cx-art .cx-halo{animation:cx-halo-in 1.8s var(--cx-ease) both}
  .hm-discovered .cx-art .cx-orbit{animation:cx-orbit-in 2.4s var(--cx-ease) both}
  .hm-discovered .cx-art .cx-main{animation:cx-rise 1.1s var(--cx-ease) .1s both}
  .hm-discovered .cx-art .cx-detail{animation:cx-pop .7s var(--cx-ease) both;animation-delay:calc(.5s + var(--o,0) * 110ms)}
  .hm-discovered .cx-art .cx-draw{animation:cx-draw-path 1.4s var(--cx-ease) both;animation-delay:calc(.5s + var(--o,0) * 140ms)}
  .hm-discovered .cx-art .cx-bar{animation:cx-grow-y 1s var(--cx-ease) both;animation-delay:calc(.45s + var(--o,0) * 120ms)}
  .hm-discovered .cx-art .cx-beam{animation:cx-beam 2.6s var(--cx-ease) .4s both}
  .hm-discovered .cx-art .cx-caret{animation:cx-caret 1.9s steps(2,jump-none) .9s 1 both}
  .hm-discovered .cx-art .cx-glint{animation:cx-glint 1.6s var(--cx-ease) 1.1s both;transform-origin:center}
  .hm-discovered .cx-sweep::after{animation:cx-light-pass 2s var(--cx-ease) .6s both}
  .hm-discovered .cl-card-icon::before,.hm-discovered .si-card-icon::before,.hm-discovered .ia-card-icon::before,.hm-discovered .cp-card-icon::before,.hm-discovered .en-card-icon::before,.hm-discovered .cl-eco-icon::before,.hm-discovered .cp-entrega-n::before{animation:cx-ring-in .9s var(--cx-ease) both;animation-delay:calc(var(--i,0) * 70ms)}
  .hm-discovered .cl-card-icon::after,.hm-discovered .si-card-icon::after,.hm-discovered .ia-card-icon::after,.hm-discovered .cp-card-icon::after,.hm-discovered .en-card-icon::after,.hm-discovered .cp-entrega-n::after{animation:cx-pop .6s var(--cx-ease) both;animation-delay:calc(.25s + var(--i,0) * 70ms)}
  .hm-discovered .cl-card-icon>i,.hm-discovered .si-card-icon>i,.hm-discovered .ia-card-icon>i,.hm-discovered .cp-card-icon>i,.hm-discovered .en-card-icon>i,.hm-discovered .cp-entrega-n>i{display:inline-block;animation:cx-pop .7s var(--cx-ease) both;animation-delay:calc(.1s + var(--i,0) * 70ms)}
  .hm-discovered .cl-tl::before,.hm-discovered .si-tl::before,.hm-discovered .ia-tl::before{animation:cx-grow-y 1s var(--cx-ease) both}
  .hm-discovered .cl-tl-dot,.hm-discovered .si-tl-dot,.hm-discovered .ia-tl-dot{animation:cx-pop .6s var(--cx-ease) both;animation-delay:calc(.15s + var(--i,0) * 110ms)}
  .hm-discovered .cl-tl-item,.hm-discovered .si-tl-item,.hm-discovered .ia-tl-item,.hm-discovered .cp-lista li,.hm-discovered .en-lista li{animation:cx-rise-sm .7s var(--cx-ease) both;animation-delay:calc(var(--i,0) * 70ms)}
  .hm-discovered [class$="-vs-item"]{animation:cx-rise-sm .7s var(--cx-ease) both;animation-delay:calc(.15s + var(--i,0) * 80ms)}
  .hm-discovered .cx-vs-arrow{animation:cx-pop .8s var(--cx-ease) .6s both}
  .hm-discovered .cx-vs-arrow::before{animation:cx-ring-out 1.4s ease-out 1.1s both}
  .hm-discovered .cx-rail::before{animation:cx-grow-y 1.4s var(--cx-ease) both}
  .hm-discovered .cx-rail>[class$="-mod"]::before{animation:cx-pop .6s var(--cx-ease) both;animation-delay:calc(.2s + var(--i,0) * 160ms)}
  .hm-discovered .cp-mod-n,.hm-discovered .en-mod-n{animation:cx-pop .7s var(--cx-ease) both;animation-delay:calc(.1s + var(--i,0) * 160ms)}
  .hm-discovered .cl-stat::after,.hm-discovered .si-stat::after,.hm-discovered .ia-stat::after,.hm-discovered .cp-stat::after,.hm-discovered .en-stat::after{animation:cx-draw-x 1s var(--cx-out) both;animation-delay:calc(.2s + var(--i,0) * 110ms)}
  .hm-discovered [class$="-price-featured"]::after{animation:cx-shine 1.7s ease-in-out .5s both}
  .hm-discovered .cx-docente-foto{animation:cx-rise 1s var(--cx-ease) both}
  .hm-discovered .cx-docente-foto figcaption{animation:cx-rise-sm .8s var(--cx-ease) .5s both}
}

@keyframes cx-draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cx-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cx-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes cx-rise-sm{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cx-pop{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes cx-ring-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes cx-ring-out{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
@keyframes cx-halo-in{from{opacity:0;transform:rotate(-22deg) scale(.92)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes cx-orbit-in{from{opacity:0;transform:rotate(-40deg)}to{opacity:1;transform:rotate(0)}}
@keyframes cx-draw-path{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cx-beam{0%{transform:rotate(-9deg)}35%{transform:rotate(9deg)}70%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@keyframes cx-caret{from{opacity:1}to{opacity:0}}
@keyframes cx-glint{0%{opacity:0;transform:scale(.4) rotate(-40deg)}45%{opacity:1;transform:scale(1.15) rotate(10deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes cx-light-pass{0%{opacity:0;transform:translateX(-30%)}30%{opacity:1}100%{opacity:0;transform:translateX(30%)}}
@keyframes cx-shine{0%{opacity:0;background-position:100% 0}25%{opacity:1}100%{opacity:0;background-position:0 0}}

@media(prefers-reduced-motion:reduce){
  .cx-sweep::after,.cx-vs-arrow::before,[class$="-price-featured"]::after{display:none}
  body[data-cx] [class$="-card"]:hover,body[data-cx] [class$="-entrega"]:hover,body[data-cx] [class$="-fecha"]:hover,body[data-cx] [class$="-perfil"]:hover{transform:none}
}

/* Lista larga en dos columnas (kit de materiales): una enumeración de 12
   piezas se lee mejor como lista que como párrafo corrido. */
.cx-cols2{display:block!important;columns:2;column-gap:1.4rem}
.cx-cols2>li{break-inside:avoid;margin-bottom:.5rem}
@media(max-width:600px){.cx-cols2{columns:1}}