/* ============================================================
   iKU — Páginas públicas de cursos
   Mismo sistema visual que la página principal: claro, sobrio,
   con el púrpura como único acento y el naranja como subrayado.
   ============================================================ */

:root{
  --navy:#11193f; --navy-2:#0c1130;
  --purple:#9a28e8; --purple-2:#8661e2; --cyan:#2cd6e8; --cyan-ink:#12aebd;
  --orange:#ff8822; --orange-2:#ffa026;
  --lavender:#f3f0fb; --lavender-2:#f7f5fc;
  --ink:#11193f; --ink-soft:#4a5170; --ink-mute:#6b7290; --line:#e7e3f3;

  --font-display:"Hanken Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-num:"Oswald",system-ui,sans-serif;
  --font-italic:"Work Sans",system-ui,sans-serif;

  --maxw:1200px; --radius:22px; --radius-lg:30px;
  --shadow-soft:0 18px 40px -20px rgba(17,25,63,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{width:min(100% - 40px, var(--maxw)); margin-inline:auto}

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; border-radius:100px; border:0; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
.btn svg{width:17px;height:17px}
.btn svg.kivo-iso{width:23px;height:23px}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-2);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(255,136,34,.6)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(17,25,63,.55)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.btn:active{transform:translateY(0) scale(.975)}
.btn:focus-visible{outline:3px solid rgba(154,40,232,.45); outline-offset:3px}

/* ── Cabecera ────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:26px; height:84px}
.logo-img{height:50px; width:auto}
.nav-links{display:flex; gap:26px; margin-left:auto}
.nav-links a{
  font-size:15px; font-weight:500; color:var(--ink-soft);
  position:relative; padding:5px 0; transition:color .2s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--orange); border-radius:2px; transition:width .25s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after, .nav-links a.on::after{width:100%}
.nav-links a.on{color:var(--ink); font-weight:600}
.nav-right{display:flex; align-items:center; gap:12px; margin-left:auto}
.nav-links + .nav-right{margin-left:0}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:42px; height:42px; border:1.5px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer; padding:0 10px;
}
.nav-toggle span{display:block; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.nav-toggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.x span:nth-child(2){opacity:0}
.nav-toggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none; flex-direction:column; gap:4px; padding:14px 20px 22px; border-top:1px solid var(--line); background:#fff}
.mobile-nav a{padding:12px 4px; font-size:16px; font-weight:500; color:var(--ink-soft); border-bottom:1px solid #f4f1fb}
.mobile-nav a:last-child{border:0}
.mobile-nav .mm-cta{margin-top:14px; justify-content:center; color:#fff}
.mobile-nav.open{display:flex}

/* ── Encabezado de página ────────────────────────────────── */
.pagina-head{padding:64px 0 44px; background:linear-gradient(180deg,var(--lavender-2),#fff)}
.kicker{
  display:inline-block; font-family:var(--font-num); font-weight:600;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--purple); margin-bottom:14px;
}
.titulo{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,4.4vw,48px); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 16px;
}
.titulo .mark{color:var(--purple)}
.titulo::after{
  content:""; display:block; width:58px; height:4px; border-radius:4px;
  background:var(--orange); margin-top:18px;
}
.lead{font-size:clamp(16px,1.6vw,18px); color:var(--ink-soft); max-width:60ch; margin:0}

.migas{font-size:13px; color:var(--ink-mute); margin-bottom:18px}
.migas a{color:var(--ink-mute); transition:color .18s var(--ease)}
.migas a:hover{color:var(--purple)}
.migas span{margin:0 7px; opacity:.5}

/* ── Rejilla de cursos ───────────────────────────────────── */
.seccion{padding:56px 0 72px}
.cursos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}

.curso-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #efeafb; border-radius:var(--radius);
  overflow:hidden; height:100%;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.curso-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:#e2d8f7}
.curso-card:focus-within{box-shadow:var(--shadow-soft); border-color:var(--purple)}

.curso-img{height:150px; position:relative; overflow:hidden; background:var(--navy)}
.curso-img img, .curso-img svg{width:100%; height:100%; object-fit:cover}
.badge{
  position:absolute; top:14px; left:14px;
  font-family:var(--font-num); font-weight:600; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; color:#fff;
}
.badge.abierto{background:#1faa4a}
.badge.proximo{background:var(--orange)}
.badge.finalizado{background:#6d7391}

.curso-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.curso-meta{
  font-family:var(--font-num); font-weight:600; font-size:11px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--cyan-ink);
  margin-bottom:10px; min-height:14px;
}
.curso-card h3{
  font-family:var(--font-display); font-weight:800; font-size:19px;
  line-height:1.25; letter-spacing:-.01em; margin:0 0 9px;
}
.curso-card p{font-size:14.5px; color:var(--ink-soft); margin:0 0 18px; flex:1}
.curso-mas{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-weight:600; font-size:14.5px; color:var(--purple);
  transition:gap .2s var(--ease);
}
.curso-mas svg{width:17px; height:17px; transition:transform .2s var(--ease)}
.curso-card:hover .curso-mas svg{transform:translateX(4px)}

/* Toda la tarjeta lleva al programa: "Ver programa" se estira sobre la
   tarjeta entera. Sigue siendo un solo enlace para teclado y lectores. */
.curso-card{position:relative; cursor:pointer}
.curso-mas::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit}
.curso-mas:focus-visible{outline:none}
.curso-card:focus-within{box-shadow:0 0 0 3px rgba(154,40,232,.35), var(--shadow-soft)}
.curso-card:active{transform:translateY(-2px) scale(.99)}

.center-cta{display:flex; justify-content:center; margin-top:44px}

/* ── Vacío ───────────────────────────────────────────────── */
.vacio-cat{
  text-align:center; padding:64px 28px;
  background:var(--lavender-2); border:1.5px dashed var(--line); border-radius:var(--radius-lg);
}
.vacio-cat h3{font-family:var(--font-display); font-weight:800; font-size:21px; margin:0 0 10px}
.vacio-cat p{color:var(--ink-soft); margin:0 0 22px; max-width:46ch; margin-inline:auto}

/* ── Landing de un curso ─────────────────────────────────── */
.curso-hero{
  padding:52px 0 56px;
  background:linear-gradient(180deg,var(--lavender),#fff);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.hero-titulo{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,4.2vw,46px); line-height:1.08; letter-spacing:-.022em;
  margin:0 0 14px;
}
.hero-sub{font-size:clamp(16px,1.7vw,19px); color:var(--ink-soft); margin:0 0 26px; max-width:52ch}

.hero-datos{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px}
.dato{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:100px;
  background:#fff; border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
}
.dato svg{width:15px; height:15px; color:var(--purple)}

.hero-acciones{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero-precio{
  font-family:var(--font-display); font-weight:800; font-size:30px;
  letter-spacing:-.02em; margin:0 0 18px;
}
.hero-precio small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:13px; letter-spacing:0; color:var(--ink-mute); margin-top:2px;
}

.hero-visual{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); background:var(--navy)}
.hero-visual img, .hero-visual svg{width:100%; height:300px; object-fit:cover; display:block}

/* ── Cuerpo de la landing ────────────────────────────────── */
.curso-cuerpo{padding:60px 0 76px}
.cuerpo-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:start}

.bloque{margin-bottom:46px}
.bloque:last-child{margin-bottom:0}
.bloque h2{
  font-family:var(--font-display); font-weight:800; font-size:25px;
  letter-spacing:-.015em; margin:0 0 6px;
}
.bloque h2::after{
  content:""; display:block; width:44px; height:3px; border-radius:3px;
  background:var(--orange); margin:12px 0 22px;
}
.bloque p{color:var(--ink-soft); margin:0 0 14px; max-width:68ch}
.bloque p:last-child{margin-bottom:0}

/* Temario: se arma solo con los módulos del curso */
.temario{list-style:none; margin:0; padding:0; counter-reset:mod}
.temario li{
  counter-increment:mod; position:relative;
  padding:20px 22px 20px 70px; margin-bottom:12px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.temario li:hover{border-color:#d9cdf3; transform:translateX(3px)}
.temario li::before{
  content:counter(mod,decimal-leading-zero);
  position:absolute; left:22px; top:19px;
  font-family:var(--font-num); font-weight:600; font-size:16px;
  color:var(--purple); background:rgba(154,40,232,.09);
  width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.temario h3{font-family:var(--font-display); font-weight:700; font-size:16.5px; margin:0 0 4px; line-height:1.35}
.temario p{font-size:14px; color:var(--ink-soft); margin:0}

/* Lista de "para quién es" */
.lista-check{list-style:none; margin:0; padding:0}
.lista-check li{
  position:relative; padding:0 0 0 32px; margin-bottom:12px;
  color:var(--ink-soft);
}
.lista-check li::before{
  content:""; position:absolute; left:0; top:9px;
  width:16px; height:16px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 4px rgba(44,214,232,.18);
}

/* Tarjeta lateral de inscripción */
.aside-cta{
  position:sticky; top:104px;
  background:var(--navy); color:#fff;
  border-radius:var(--radius-lg); padding:30px 28px 32px;
  box-shadow:0 22px 50px -24px rgba(17,25,63,.6);
}
.aside-cta h3{font-family:var(--font-display); font-weight:800; font-size:21px; margin:0 0 8px; line-height:1.25}
.aside-cta .aside-desc{font-size:14.5px; color:rgba(255,255,255,.76); margin:0 0 22px}
.aside-lista{list-style:none; margin:0 0 26px; padding:0}
.aside-lista li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:rgba(255,255,255,.88); padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.aside-lista li:last-child{border:0}
.aside-lista svg{width:16px; height:16px; color:var(--cyan); flex-shrink:0; margin-top:3px}
.aside-cta .btn{width:100%; justify-content:center}
.aside-nota{font-size:12.5px; color:rgba(255,255,255,.55); text-align:center; margin:14px 0 0}
.aside-alt{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding:12px; border-radius:100px;
  border:1.5px solid rgba(255,255,255,.22); color:#fff;
  font-size:14px; font-weight:600;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.aside-alt:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4)}
.aside-alt svg{width:17px; height:17px}

/* ── El relato del curso en diez pasos ───────────────────────
   Una franja por sección, en el mismo orden en que el profesor las
   llena dentro de KIVO: de lo general a lo concreto. Lo que queda
   vacío no se imprime y la numeración se corre sola.

   MOVIMIENTO: cada animación explica algo. El hilo de arriba dice
   cuánto falta; el subrayado se dibuja al llegar a cada sección; las
   tarjetas entran una detrás de otra en el orden en que se leen; la
   diana del objetivo se dibuja de afuera hacia el centro. Todo corto,
   con curva suave y apagado si la persona pidió reducir movimiento. */
.pg{padding:64px 0}
.pg-lav{background:var(--lavender-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pg-estrecho{max-width:760px}

/* ── El hilo de lectura ──────────────────────────────────── */
.pg-progreso{position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none}
.pg-progreso span{
  display:block; height:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--purple),var(--cyan) 60%,var(--orange));
  will-change:transform;
}

/* ── Estado en la portada ────────────────────────────────── */
.estado-pill{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
  padding:7px 14px 7px 12px; border-radius:100px;
  background:#e9f8ef; color:#137a37;
  font-size:13.5px; font-weight:600;
}
.estado-pill i{width:8px; height:8px; border-radius:50%; background:#1faa4a; flex:none}
.estado-pill.abierto i{animation:pgLatido 2.2s var(--ease-out) infinite}
.estado-pill.proximo{background:#fff3e6; color:#a85a10}
.estado-pill.proximo i{background:var(--orange)}
.estado-pill.finalizado{background:#eef0f6; color:#4f5675}
.estado-pill.finalizado i{background:#8a90a8}
@keyframes pgLatido{
  0%  {box-shadow:0 0 0 0 rgba(31,170,74,.45)}
  70% {box-shadow:0 0 0 8px rgba(31,170,74,0)}
  100%{box-shadow:0 0 0 0 rgba(31,170,74,0)}
}

/* ── Títulos de sección ──────────────────────────────────── */
/* El número del paso va en la misma línea del título: "04  ¿Es para ti?" */
.pg-cab{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:14px; margin-bottom:28px}
.pg-cab .pg-h{flex:1 1 0; min-width:0}
.pg-cab .pg-sub{flex-basis:100%}
.pg-n{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-width:30px; height:30px; padding:0 8px; position:relative; top:-4px;
  border-radius:10px; background:rgba(154,40,232,.09); color:var(--purple);
  font-family:var(--font-num); font-weight:600; font-size:13px; letter-spacing:.04em;
}
.pg-h{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px,3.2vw,38px); line-height:1.12; letter-spacing:-.025em;
  margin:0; color:var(--navy); text-wrap:balance;
}
.pg-h .mark{color:var(--purple)}
/* El subrayado naranja de la marca: se dibuja cuando llegas a la sección */
.pg-h::after{
  content:""; display:block; width:58px; height:4px; border-radius:4px;
  background:var(--orange); margin-top:16px;
  transform-origin:0 50%; transform:scaleX(0);
  transition:transform .6s var(--ease-out) .15s;
}
.visible .pg-h::after, .pg-h.sin-anim::after{transform:scaleX(1)}
.pg-sub{margin:14px 0 0; font-size:16px; color:var(--ink-soft)}
.pg-cab.claro .pg-n{background:rgba(255,255,255,.12); color:#fff}
.pg-cab.claro .pg-h{color:#fff}
.pg-cab.claro .pg-h .mark{color:var(--cyan)}
.pg-cab.claro{justify-content:center; text-align:center}
.pg-cab.claro .pg-h{flex:0 1 auto}
.pg-cab.claro .pg-h::after{margin-left:auto; margin-right:auto; transform-origin:50% 50%}

.pg-texto p{color:var(--ink-soft); font-size:clamp(15.5px,1.6vw,17px); margin:0 0 15px; max-width:68ch}
.pg-texto p:last-child{margin-bottom:0}

/* ── 02 · El objetivo: la diana y la promesa ─────────────── */
.pg-objetivo{background:var(--navy); color:#fff; padding:72px 0; overflow:hidden}
.obj-grid{
  display:grid; grid-template-columns:minmax(160px,230px) 1fr;
  gap:clamp(32px,5vw,72px); align-items:center; max-width:1040px;
}
.obj-diana{width:100%; height:auto; display:block}
.obj-diana circle{fill:none; stroke-width:9; stroke-linecap:round}
.obj-diana .a1{stroke:rgba(44,214,232,.35)}
.obj-diana .a2{stroke:var(--purple)}
.obj-diana .a3{stroke:var(--cyan)}
.obj-diana .a4{fill:var(--orange); stroke:none}
/* Los anillos se trazan de afuera hacia adentro y al final cae el centro */
.obj-diana .a1, .obj-diana .a2, .obj-diana .a3{
  stroke-dasharray:600; stroke-dashoffset:600;
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
.obj-diana .a2{transition-delay:.15s}
.obj-diana .a3{transition-delay:.3s}
.obj-diana .a4{transform-origin:100px 100px; transform:scale(0); transition:transform .45s var(--ease-out) .75s}
.visible .obj-diana .a1, .visible .obj-diana .a2, .visible .obj-diana .a3{stroke-dashoffset:0}
.visible .obj-diana .a4{transform:scale(1)}

.obj-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 8px; margin-right:10px;
  border-radius:10px; background:rgba(255,255,255,.12); color:#fff;
  font-family:var(--font-num); font-weight:600; font-size:13px;
}
.obj-lead{display:flex; align-items:center; margin:0 0 16px; font-size:16px; color:var(--cyan); font-weight:600}
.pg-frase{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(22px,2.6vw,34px); line-height:1.28; letter-spacing:-.02em;
  margin:0; max-width:36ch; text-wrap:pretty;
}
.pg-frase.larga{font-size:clamp(19px,2vw,26px); line-height:1.4; max-width:48ch}
.pg-frase::after{
  content:""; display:block; width:58px; height:4px; border-radius:4px;
  background:var(--orange); margin-top:24px;
  transform-origin:0 50%; transform:scaleX(0); transition:transform .6s var(--ease-out) .5s;
}
.visible .pg-frase::after{transform:scaleX(1)}

/* ── Entrada escalonada de las listas ────────────────────── */
/* Cada tarjeta entra detrás de la anterior, en el orden en que se lee */
.reveal .logro, .reveal .vive, .reveal .lista-check li,
.reveal .tema, .reveal .inv-card{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out),
             box-shadow .25s var(--ease), border-color .25s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms + 120ms);
}
.reveal.visible .logro, .reveal.visible .vive, .reveal.visible .lista-check li,
.reveal.visible .tema, .reveal.visible .inv-card{opacity:1; transform:none}

/* ── 03 · Resultados de aprendizaje ──────────────────────── */
.pg-logros{display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:18px}
.logro{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px 26px;
}
.reveal.visible .logro:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:#e2d8f7; transition-delay:0s}
.logro-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:12px; margin-bottom:14px;
  background:linear-gradient(135deg,var(--purple),var(--cyan)); color:#fff;
  font-family:var(--font-num); font-weight:600; font-size:15px;
  transform:scale(.6); transition:transform .4s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 70ms + 260ms);
}
.visible .logro-n{transform:scale(1)}
.logro p{margin:0; font-size:15.5px; line-height:1.5; color:var(--navy); font-weight:500}

/* ── 04 · Para quién es ──────────────────────────────────── */
.pg-dos{columns:2; column-gap:34px}
.pg-dos li{break-inside:avoid}
.pg-cta-medio{margin-top:30px}

/* ── 05 · Cómo se vive ───────────────────────────────────── */
.pg-chips{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px}
.chip{
  display:inline-flex; align-items:center;
  padding:8px 16px; border-radius:100px;
  background:var(--lavender); border:1px solid #e6dcfa;
  font-size:13.5px; font-weight:600; color:var(--purple);
}
.pg-vive{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.vive{
  display:flex; gap:13px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 20px;
}
.vive svg{width:19px; height:19px; color:var(--cyan-ink); flex-shrink:0; margin-top:2px}
.vive p{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.5}

/* ── 06 y 10 · Acordeón ──────────────────────────────────── */
.temario-lista{display:flex; flex-direction:column; gap:10px}
.tema{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.tema[open]{border-color:#d9cdf3; box-shadow:var(--shadow-soft)}
.tema summary{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:16.5px;
  line-height:1.35; color:var(--navy);
  transition:background .15s var(--ease);
}
.tema summary::-webkit-details-marker{display:none}
.tema summary:hover{background:var(--lavender)}
.tema summary:focus-visible{outline:none; box-shadow:inset 0 0 0 3px rgba(154,40,232,.35)}
.tema-n{
  flex-shrink:0; width:34px; height:34px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(154,40,232,.09); color:var(--purple);
  font-family:var(--font-num); font-weight:600; font-size:15px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.tema[open] .tema-n{background:var(--purple); color:#fff}
.tema-nombre{flex:1; min-width:0}
.tema-flecha{width:20px; height:20px; color:var(--ink-mute); flex-shrink:0; transition:transform .25s var(--ease-out)}
.tema[open] .tema-flecha{transform:rotate(180deg)}
.tema-cuerpo{padding:0 20px 20px 68px}
/* Al abrir, el contenido baja desde la pregunta que lo abrió */
.tema[open] .tema-cuerpo{animation:pgAbrir .28s var(--ease-out)}
@keyframes pgAbrir{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.tema-cuerpo p{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.6}
.tema-vacio{color:var(--ink-mute); font-style:italic}

/* ── 07 · Quién te acompaña ──────────────────────────────── */
.pg-instructor{
  display:flex; gap:26px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 30px;
}
.pg-instructor img, .instr-inicial{
  width:104px; height:104px; border-radius:50%; flex-shrink:0;
  object-fit:cover; background:var(--lavender);
}
.instr-inicial{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:40px;
  color:var(--purple); text-transform:uppercase;
}
.pg-instructor h3{font-family:var(--font-display); font-weight:800; font-size:21px; margin:0 0 8px}
.pg-instructor p{margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.6}

/* ── 09 · La inversión ───────────────────────────────────── */
.pg-inversion{background:var(--navy); color:#fff; padding:68px 0 74px}

/* Una, dos o tres opciones, de la más barata a la más completa */
.inv-planes{display:grid; grid-template-columns:1fr; gap:22px; max-width:560px; margin:0 auto}
.inv-planes.son-2{grid-template-columns:repeat(2,1fr); max-width:900px}
.inv-planes.son-3{grid-template-columns:repeat(3,1fr); max-width:1140px}
.inv-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:34px 30px 34px; text-align:center;
  display:flex; flex-direction:column;
}
.reveal.visible .inv-card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.28); transition-delay:0s}
.inv-card.inv-destacada{
  background:rgba(255,255,255,.09); border-color:rgba(255,136,34,.55);
  box-shadow:0 0 0 1px rgba(255,136,34,.2);
}
.reveal.visible .inv-card.inv-destacada:hover{border-color:rgba(255,136,34,.85)}
.inv-plan{
  display:inline-block; align-self:center; margin-bottom:16px;
  padding:6px 15px; border-radius:100px;
  background:rgba(255,255,255,.12);
  font-size:13px; font-weight:600; color:#fff;
}
.inv-destacada .inv-plan{background:var(--orange); color:#fff}
.inv-card .inv-lista{flex:1}
.inv-precio{
  font-family:var(--font-display); font-weight:800; font-size:38px;
  letter-spacing:-.02em; margin:0 0 20px; color:#fff;
}
.inv-precio small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:13px; letter-spacing:0; color:rgba(255,255,255,.55); margin-top:4px;
}
.inv-titulo{font-family:var(--font-display); font-weight:800; font-size:21px; margin:0 0 8px}
.inv-desc{font-size:15px; color:rgba(255,255,255,.76); margin:0 0 20px}
.inv-urgencia{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 28px}
.inv-urgencia span{
  padding:7px 15px; border-radius:100px;
  background:rgba(255,136,34,.16); border:1px solid rgba(255,136,34,.4);
  font-size:13px; font-weight:600; color:var(--orange-2);
}
.inv-lista{list-style:none; margin:0 0 26px; padding:0; text-align:left}
.inv-lista li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; color:rgba(255,255,255,.88); padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.inv-lista li:last-child{border:0}
.inv-lista svg{width:16px; height:16px; color:var(--cyan); flex-shrink:0; margin-top:3px}
.inv-btn{width:100%; justify-content:center; font-size:16px; padding:16px 24px}
.inv-alt{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding:13px; border-radius:100px;
  border:1.5px solid rgba(255,255,255,.22); color:#fff;
  font-size:14.5px; font-weight:600;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease-out);
}
.inv-alt:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4)}
.inv-alt:active{transform:scale(.97)}
.inv-alt svg{width:17px; height:17px}
.inv-nota{font-size:12.5px; color:rgba(255,255,255,.55); margin:14px 0 0}

/* Puntos del carrusel: solo se ven en celular */
.inv-puntos{display:none; justify-content:center; gap:8px; margin-top:20px}
.inv-puntos button{
  width:8px; height:8px; padding:0; border:0; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.3);
  transition:width .25s var(--ease-out), background .25s var(--ease);
}
.inv-puntos button.on{width:24px; background:var(--orange)}

/* ── 10 · Cierre ─────────────────────────────────────────── */
.pg-cierre{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* ── Botón flotante (computadora) ────────────────────────── */
/* Aparece al pasar la portada, junto a la burbuja de WhatsApp */
.pg-flota{
  position:fixed; right:88px; bottom:20px; z-index:65;
  display:inline-flex; align-items:center; gap:14px;
  padding:7px 7px 7px 20px; border-radius:100px;
  background:var(--navy); color:#fff;
  box-shadow:0 16px 36px -14px rgba(17,25,63,.7);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.pg-flota.on{opacity:1; transform:none; pointer-events:auto}
.pg-flota-precio{font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.1}
.pg-flota-precio small{display:block; font-family:var(--font-body); font-weight:500; font-size:11px; color:rgba(255,255,255,.6)}
.pg-flota-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:100px;
  background:var(--orange); color:#fff; font-weight:700; font-size:15px;
  transition:background .15s var(--ease), transform .12s var(--ease-out);
}
.pg-flota-btn svg{width:16px; height:16px; transition:transform .2s var(--ease-out)}
.pg-flota:hover .pg-flota-btn{background:var(--orange-2)}
.pg-flota:hover .pg-flota-btn svg{transform:translateX(3px)}
.pg-flota:active .pg-flota-btn{transform:scale(.97)}
.pg-flota:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,136,34,.5), 0 16px 36px -14px rgba(17,25,63,.7)}

/* Barra fija en celular: el botón nunca desaparece de la pantalla.
   Solo aparece bajo 640px; se esconde mientras las opciones están a la vista. */
.pg-barra{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  align-items:center; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -14px rgba(17,25,63,.4);
  transition:transform .25s var(--ease-out);
}
.pg-barra.oculta{transform:translateY(110%)}
.pg-barra-precio{
  font-family:var(--font-display); font-weight:800; font-size:18px;
  color:var(--navy); flex-shrink:0; line-height:1.15;
}
.pg-barra-precio small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:11px; color:var(--ink-mute);
}
.pg-barra .btn{flex:1; justify-content:center; padding:13px 18px}

/* Pulsación de los botones: una respuesta táctil pequeña */
.btn:active{transform:translateY(0) scale(.97); transition-duration:.1s}

/* ── Otros cursos ────────────────────────────────────────── */
.mas-cursos{padding:62px 0 76px; background:var(--lavender-2); border-top:1px solid var(--line)}

/* ── Pie ─────────────────────────────────────────────────── */
.site-footer{background:var(--navy-2); color:rgba(255,255,255,.72); padding:60px 0 26px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.foot-logo{height:42px; width:auto; margin-bottom:14px}
.foot-lema{font-family:var(--font-italic); font-style:italic; font-weight:500; color:var(--cyan); margin:0 0 12px; font-size:15px}
.foot-desc{font-size:14px; max-width:38ch; margin:0}
.foot-col h4{
  font-family:var(--font-num); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 16px;
}
.foot-col a{display:block; font-size:14px; padding:6px 0; transition:color .18s var(--ease)}
.foot-col a:hover{color:var(--orange-2)}
.foot-bottom{
  margin-top:46px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(255,255,255,.5);
}

/* ── Burbuja de WhatsApp ─────────────────────────────────── */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.7);
  transition:transform .2s var(--ease);
}
.wa-fab svg{width:27px; height:27px}
.wa-fab:hover{transform:scale(1.07)}

/* ── Aparición al hacer scroll ───────────────────────────── */
/* Desplazamiento corto y curva suave: se nota que llega, sin exagerar */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.reveal.visible{opacity:1; transform:none}
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s}
.d4{transition-delay:.24s} .d5{transition-delay:.3s} .d6{transition-delay:.36s}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important}
  .reveal, .reveal .logro, .reveal .vive, .reveal .lista-check li,
  .reveal .tema, .reveal .inv-card{opacity:1; transform:none}
  .pg-h::after, .pg-frase::after, .logro-n{transform:none}
  .obj-diana circle{stroke-dashoffset:0 !important}
  .obj-diana .a4{transform:none}
  html{scroll-behavior:auto}
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1040px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .cursos-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-visual img, .hero-visual svg{height:240px}
  .cuerpo-grid{grid-template-columns:1fr; gap:42px}
  .aside-cta{position:static}
  .foot-grid{grid-template-columns:1fr 1fr; gap:34px}
  .pg-logros{grid-template-columns:repeat(2,1fr)}
  .inv-planes.son-3 .inv-card{padding:30px 22px}
  .inv-planes.son-3 .inv-precio{font-size:32px}
}

/* Tableta y celular: las opciones de inversión se vuelven un carrusel que
   se desliza con el dedo, y la diana del objetivo se achica y sube */
@media (max-width:760px){
  .obj-grid{grid-template-columns:1fr; gap:26px}
  .obj-diana{width:112px}

  .inv-carrusel{margin:0 -16px}
  .inv-planes.son-2, .inv-planes.son-3{
    display:flex; max-width:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    padding:8px 16px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .inv-planes.son-2::-webkit-scrollbar, .inv-planes.son-3::-webkit-scrollbar{display:none}
  .inv-planes.son-2 .inv-card, .inv-planes.son-3 .inv-card{flex:0 0 86%; scroll-snap-align:center}
  .inv-puntos{display:flex}
}
@media (max-width:640px){
  .wrap{width:min(100% - 32px, var(--maxw))}
  .nav{height:76px}
  .logo-img{height:42px}
  .header-cta{display:none}
  .cursos-grid{grid-template-columns:1fr}
  .pagina-head{padding:44px 0 34px}
  .seccion{padding:40px 0 56px}
  .curso-cuerpo{padding:44px 0 58px}
  .foot-grid{grid-template-columns:1fr; gap:30px}
  .temario li{padding:18px 18px 18px 62px}
  .temario li::before{left:16px}

  .pg{padding:44px 0}
  .pg-inversion{padding:46px 0 52px}
  .pg-logros{grid-template-columns:1fr}
  .pg-dos{columns:1}
  .pg-instructor{flex-direction:column; text-align:center; gap:18px; padding:26px 22px}
  .tema summary{padding:16px 16px; font-size:15.5px; gap:11px}
  .tema-cuerpo{padding:0 16px 18px 16px}
  .inv-card{padding:28px 22px 30px}
  .inv-precio{font-size:32px}
  .pg-cierre .btn{width:100%; justify-content:center}
  .pg-objetivo{padding:52px 0}
  .pg-h{font-size:clamp(24px,7vw,30px)}

  /* Con la barra fija abajo sobran la burbuja de WhatsApp y el botón flotante */
  .pg-barra{display:flex}
  .pg-flota{display:none}
  body.tiene-barra{padding-bottom:78px}
  body.tiene-barra .wa-fab{display:none}
}

/* Vinetas de las descripciones de modulo (cursos/sistema/includes/texto.php) */
.texto-vinetas{margin:8px 0 0;padding-left:20px;list-style:none}
.texto-vinetas li{position:relative;margin-bottom:5px;line-height:1.55}
.texto-vinetas li::before{content:'';position:absolute;left:-14px;top:.62em;
    width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
.texto-vinetas li:last-child{margin-bottom:0}
.texto-vinetas + p{margin-top:9px}