/* ═══════════════════════════════════════════
   Curso "IA de cero" — hoja de encima
   Va DESPUÉS de assets/css/styles.css, que aporta los tokens :root,
   el reset, .wrap, .btn*, .eyebrow, .lead, .site-header, .nav, .burger,
   .site-footer, .reveal y el bloque de prefers-reduced-motion.
   Todo lo de aquí lleva prefijo .c- para no chocar con la landing.
   ═══════════════════════════════════════════ */

/* ── ritmo de sección ─────────────────── */
.c-sec{ padding:96px 0; }
.c-sec--soft{ background:var(--bg-soft); border-block:1px solid var(--line); }
.c-sec--sand{ background:var(--bg-sand); }

.c-head{ max-width:760px; margin-bottom:clamp(30px, 3.6vw, 48px); }
.c-head--center{ margin-inline:auto; text-align:center; }
.c-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px; }

/* ── hero ─────────────────────────────── */
/* Fondo oscuro con plasma. El degradado de aquí es lo que se ve sin WebGL
   (y el primer instante antes de que arranque el shader): mismos colores
   que la rampa del shader, para que el cambio no se note. */
.c-hero{
  --mx:0; --my:0;
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(88vh, 780px); display:flex; align-items:center;
  padding:clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(60% 70% at 78% 62%, rgba(253,81,7,.55), transparent 70%),
    radial-gradient(40% 45% at 92% 20%, rgba(250,142,33,.38), transparent 70%),
    radial-gradient(50% 60% at 55% 110%, rgba(58,31,10,.9), transparent 70%),
    var(--ink);
  color:#fff;
}
.c-plasma{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.c-hero.has-plasma .c-plasma{ opacity:1; }
/* Velo para que el texto siempre se lea: oscurece la columna del copy y
   el borde de abajo; el plasma queda libre a la derecha. */
.c-hero__velo{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(22,19,15,.82) 0%, rgba(22,19,15,.55) 38%, rgba(22,19,15,0) 68%),
    linear-gradient(0deg, rgba(22,19,15,.6) 0%, rgba(22,19,15,0) 30%);
}
.c-hero__inner{
  width:100%;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 4.5vw, 64px); align-items:center;
}
/* sin esto las líneas nowrap de la terminal ensanchan la columna y la
   página se desborda de lado en móvil */
.c-hero__inner > *{ min-width:0; }

/* chip "en vivo" con el punto que late */
.c-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px 8px 12px; border-radius:var(--pill);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  font-variation-settings:"wdth" var(--w-estrecho);
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.c-chip__punto{
  position:relative; width:8px; height:8px; border-radius:50%; background:var(--orange);
}
.c-chip__punto::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--orange);
  animation:c-latido 1.8s var(--ease) infinite;
}
@keyframes c-latido{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(3.2); opacity:0; } }

.c-hero__titulo{
  color:#fff; margin:22px 0 20px;
  font-size:clamp(2.9rem, 7.4vw, 5.6rem); line-height:.92; letter-spacing:-.04em;
  font-variation-settings:"wdth" 118;
}
/* cada renglón es una ventana: la palabra sube desde abajo del borde */
.c-linea{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.c-linea > .c-in{ display:inline-block; }
/* "& IA" con un degradado de la marca que corre despacio */
.c-hl{
  background:linear-gradient(100deg, var(--orange) 0%, var(--orange-mid) 30%, var(--butter) 50%, var(--orange-mid) 70%, var(--orange) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:c-brillo 6s linear infinite;
}
@keyframes c-brillo{ to{ background-position:-220% 0; } }

.c-hero__lead{
  font-size:clamp(1.05rem, 1.6vw, 1.28rem); line-height:1.5;
  color:rgba(255,255,255,.76); max-width:32ch;
}

/* Ficha técnica: los tres datos duros en una tira con divisiones, como la
   etiqueta de especificaciones de un aparato. Aquí en vidrio oscuro. */
.c-meta{
  display:flex; flex-wrap:wrap; width:fit-content; margin-top:28px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:6px; backdrop-filter:blur(10px); overflow:hidden;
}
.c-meta li{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px;
  font-family:var(--mono); font-size:.72rem; color:rgba(255,255,255,.85);
}
.c-meta li+li{ border-left:1px solid rgba(255,255,255,.14); }
.c-meta .ico{ width:16px; height:16px; color:var(--orange-mid); }

.c-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.c-iman{ transition:transform .35s var(--ease), color .2s; }
/* secundario sobre fondo oscuro: vidrio en vez de arena */
.btn--glass{ color:#fff; --btn-bg:rgba(255,255,255,.1); }
.btn--glass::before{ backdrop-filter:blur(8px); }
.btn--glass:hover{ color:var(--ink); --btn-bg:var(--butter); }

/* ── entrada del hero ──
   Todo con CSS: no depende de que cargue ningún script. Cada pieza sube,
   se enfoca y aparece, en cascada. */
.c-in{ animation:c-entra 1s var(--ease) backwards; }
.c-linea > .c-in{ animation-name:c-sube; animation-duration:1.1s; }
.c-in--1{ animation-delay:.1s; }
.c-in--2{ animation-delay:.22s; }
.c-in--3{ animation-delay:.34s; }
.c-in--4{ animation-delay:.58s; }
.c-in--5{ animation-delay:.72s; }
.c-in--6{ animation-delay:.86s; }
.c-in--term{ animation:c-term-entra 1.3s var(--ease) .45s backwards; }
@keyframes c-entra{ from{ opacity:0; transform:translateY(22px); filter:blur(8px); } }
@keyframes c-sube{ from{ transform:translateY(105%) rotate(4deg); } }
@keyframes c-term-entra{ from{ opacity:0; transform:translateY(40px) scale(.94) rotateX(14deg); } }

/* ── visual: terminal con inclinación + tarjetitas flotantes ── */
.c-hero__visual{
  position:relative; perspective:1100px;
  padding:56px 18px;
}
.c-hero__visual .c-term{
  position:relative; z-index:1;
  transform:rotateY(calc(var(--mx) * 9deg)) rotateX(calc(var(--my) * 7deg));
  transition:transform .2s linear;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -40px rgba(253,81,7,.6);
}
.c-flota{
  --prof:1;
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 10px 11px; border-radius:12px;
  background:rgba(255,255,255,.92); color:var(--ink);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
  font-size:.8rem; font-weight:700; line-height:1.2;
  translate:calc(var(--mx) * var(--prof) * 16px) calc(var(--my) * var(--prof) * -12px);
  animation:c-pop .8s var(--ease) backwards, c-flotar 6s ease-in-out infinite;
}
.c-flota b{
  display:block; font-weight:500; font-size:.72rem; color:var(--muted);
  font-family:var(--mono);
}
.c-flota .ico{
  width:30px; height:30px; padding:6px; border-radius:9px; flex:none;
  background:var(--orange); color:#fff;
}
.c-flota--a{ --prof:2.2; top:6px; right:4%; animation-delay:1.3s, 0s; }
.c-flota--a .ico{ background:#1FA855; }   /* el verde de WhatsApp: es su marca, no un acento nuevo */
.c-flota--b{ --prof:1.6; bottom:14px; left:0; animation-delay:1.5s, -2s; }
.c-flota--c{ --prof:2.8; bottom:30%; right:-14px; animation-delay:1.7s, -4s; }
.c-flota--c .ico{ background:var(--ink); color:var(--orange-mid); }
.c-flota b::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#1FA855; margin-right:6px; vertical-align:1px;
}
/* scale y translate van como propiedades sueltas: así no pelean con el
   transform de c-flotar ni con el translate del paralaje */
@keyframes c-pop{ from{ opacity:0; scale:.6; } }
@keyframes c-flotar{ 50%{ transform:translateY(-10px); } }

/* terminal decorativa — sólo CSS, sin JS.
   El negro no tiene token equivalente: es la única superficie oscura del hero. */
.c-term{
  background:#17140F; border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-lg); font-family:var(--mono); font-size:.68rem;
  line-height:2;
}
.c-term__bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.09);
}
.c-term__bar i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18); }
.c-term__bar i:nth-child(1){ background:var(--orange); }
.c-term__bar i:nth-child(2){ background:var(--orange-soft); }
.c-term__title{
  margin-left:8px; font-size:.72rem; color:rgba(255,255,255,.4);
  letter-spacing:.04em;
}
.c-term__body{ padding:18px 20px 22px; color:#E8E3D8; }
.c-term__body li{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-term__p{ color:var(--orange); margin-right:8px; }
.c-term__out{ color:rgba(255,255,255,.42); }
.c-term__cursor{
  display:inline-block; width:8px; height:1em; vertical-align:-2px;
  background:var(--orange-soft); animation:c-parpadeo 1.1s steps(2) infinite;
}
.c-term__cursor--fijo{ animation:none; }
@keyframes c-parpadeo{ 50%{ opacity:0; } }

/* ── para quién ───────────────────────── */
/* Prosa a la izquierda, tarjeta a la derecha. El párrafo desarma el miedo
   ("no necesitas saber programar") y la tarjeta remata con las cuatro
   razones: dicho en texto corrido convence, dicho en lista se escanea, y
   hacen falta las dos cosas con un público que llega dudando si le va a
   quedar grande. La viñeta cuadrada es la misma del temario: el sistema se
   sostiene solo, sin inventar un adorno nuevo para esta sección. */
.c-quien{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px, 3.4vw, 48px); align-items:center;
}
.c-quien__texto h3{ font-size:1.32rem; margin-bottom:16px; }
.c-quien__texto p{
  font-size:.98rem; color:var(--ink-2); line-height:1.75; max-width:52ch;
}
.c-quien__texto p+p{ margin-top:14px; }

.c-quien__caja{
  background:var(--bg); border:1px solid var(--orange-soft); border-radius:var(--r-lg);
  padding:clamp(24px, 2.8vw, 34px);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.c-quien__caja:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.c-quien__cab{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.c-quien__sello{
  width:44px; height:44px; flex:none; border-radius:14px;
  display:grid; place-items:center;
  background:var(--orange); color:var(--tinta-invertida);
}
.c-quien__sello .ico{ width:22px; height:22px; }
.c-quien h3{ font-size:1.18rem; }
.c-quien__lista li{
  position:relative; padding-left:22px;
  font-size:.98rem; color:var(--ink-2); line-height:1.62;
}
.c-quien__lista li+li{ margin-top:13px; }
.c-quien__lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--orange);
}

.c-quien__cierre{
  text-align:center; text-wrap:balance;   /* si el navegador no lo soporta, sólo reparte peor */
  max-width:66ch; margin:clamp(26px, 3vw, 36px) auto 0;
  font-size:.95rem; color:var(--muted); line-height:1.65;
}
.c-quien__cierre strong{ color:var(--ink); font-weight:700; }

/* ── resultados: carrusel ─────────────── */
/* Fila con scroll-snap nativo. El padding vertical deja sitio a la sombra y
   al salto del hover (un contenedor con overflow-x también recorta en y).
   Abajo no se devuelve con margen negativo: taparía las flechas. --canal
   es el padding de .wrap, así la pista llega justo al borde. Los bordes
   se desvanecen con una máscara para que la tarjeta cortada se lea como
   "hay más" y no como un error de maquetación. */
.c-carru{ --canal:24px; --tarjeta:min(352px, calc(100vw - 72px)); }
.c-logros{
  display:flex; gap:24px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--canal);
  padding:12px var(--canal) 36px; margin:-12px calc(-1 * var(--canal)) 0;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--canal), #000 calc(100% - var(--canal)), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 var(--canal), #000 calc(100% - var(--canal)), transparent);
  outline:none;
}
.c-logros::-webkit-scrollbar{ display:none; }
.c-logros:focus-visible .c-logro{ border-color:var(--orange-soft); }
.c-logros.is-arrastrable{ cursor:grab; }
.c-logros.is-arrastrando{ cursor:grabbing; scroll-snap-type:none; user-select:none; }

/* 25 % más grande que la tarjeta de rejilla anterior (≈280 px) */
.c-logro{
  flex:0 0 var(--tarjeta); scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.c-logro:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.c-logro__arte{
  aspect-ratio:320 / 200; border-radius:var(--r-md);
  background:var(--bg-sand); overflow:hidden;
}
.c-logro__txt{ padding:22px 14px 16px; }
.c-logro__n{
  display:block; margin-bottom:12px;
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--orange);
}
.c-logro h3{ font-size:1.24rem; line-height:1.28; margin-bottom:10px; }
.c-logro p{ font-size:1rem; color:var(--muted); line-height:1.6; }

.c-carru__nav{ display:flex; align-items:center; justify-content:center; gap:18px; }
.c-carru__nav[hidden]{ display:none; }
.c-carru__ant .ico{ transform:rotate(180deg); }
.c-carru__nav .round:disabled{ opacity:.35; cursor:default; pointer-events:none; }

/* ── dibujos 2D de las tarjetas ──
   Un solo lenguaje: contorno --ink de 2.5 y rellenos planos de la paleta.
   Las clases k-* mapean a tokens porque un atributo fill="" no acepta var(). */
.c-arte{ display:block; width:100%; height:100%; color:var(--ink); transition:transform .5s var(--ease); }
.c-logro:hover .c-arte{ transform:scale(1.035); }
.c-arte .k-or{ fill:var(--orange); }
.c-arte .k-mid{ fill:var(--orange-mid); }
.c-arte .k-soft{ fill:var(--orange-soft); }
.c-arte .k-but{ fill:var(--butter); }
.c-arte .k-sand{ fill:var(--sand); }
.c-arte .k-bg{ fill:var(--bg); }
.c-arte .k-bgs{ fill:var(--bg-sand); }
.c-arte .k-line{ fill:var(--line); }
.c-arte .k-ink{ fill:var(--ink); }
.c-arte .k-trazo{ fill:none; stroke:var(--orange); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.c-arte__txt{ font-family:var(--mono); font-size:11px; font-weight:600; fill:var(--bg); }
.c-arte__txt--but{ fill:var(--butter); }

/* barras del dashboard: reusa @keyframes barraCrece de styles.css */
.c-arte__barras rect{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:barraCrece 2.6s var(--ease) infinite alternate;
}
.c-arte__barras rect:nth-child(even){ animation-delay:.35s; }
.c-arte__barras rect:nth-child(3n){ animation-delay:.7s; }
.c-arte__dona{ animation:c-dona 5s var(--ease) infinite alternate; }
@keyframes c-dona{ from{ stroke-dasharray:44 88; } to{ stroke-dasharray:70 88; } }

/* datos que corren por el cable */
.c-arte__flujo{ animation:c-flujo 1.1s linear infinite; }
@keyframes c-flujo{ to{ stroke-dashoffset:-30; } }
.c-arte__led{ animation:c-led 1.6s steps(2, jump-none) infinite; }
.c-arte__led--2{ animation-duration:2.3s; }
@keyframes c-led{ 50%{ opacity:.25; } }

/* langosta: flota, pestañea y cierra las pinzas, como en el isotipo animado */
.c-arte__flota{ animation:c-flota 4s ease-in-out infinite; }
@keyframes c-flota{ 50%{ transform:translateY(-5px); } }
.c-arte__pinza{ transform-box:fill-box; transform-origin:100% 50%; animation:c-pinza 4s ease-in-out infinite; }
.c-arte__pinza--der{ transform-origin:0 50%; animation-delay:.2s; }
@keyframes c-pinza{ 0%, 85%, 100%{ transform:none; } 90%{ transform:rotate(-10deg); } }
.c-arte__ojo{ animation:c-ojo 3s infinite; }
@keyframes c-ojo{ 0%, 90%, 100%{ opacity:1; } 95%{ opacity:.25; } }
.c-arte__sombra{ transform-box:fill-box; transform-origin:50% 50%; animation:c-sombra 4s ease-in-out infinite; }
@keyframes c-sombra{ 50%{ transform:scaleX(.88); } }

/* pilotos que se encienden en cadena */
.c-arte__piloto{ animation:c-piloto 2.4s infinite; opacity:.2; }
.c-arte__piloto--2{ animation-delay:.3s; }
.c-arte__piloto--3{ animation-delay:.6s; }
@keyframes c-piloto{ 20%, 70%{ opacity:1; } }

/* ── temario ──────────────────────────── */
.c-temario{ display:flex; flex-direction:column; gap:20px; }
.c-sesion{
  display:grid; grid-template-columns:120px 1fr;
  gap:clamp(20px, 2.6vw, 36px); align-items:start;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px, 3vw, 38px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.c-sesion:hover{ border-color:var(--orange-soft); box-shadow:var(--shadow-md); }

/* Las pares se van al naranja del logo, sin diluir; las nones se quedan en el
   fondo base. Todo el texto de esas tarjetas va en blanco por decisión del
   cliente. Nota para quien edite esto después: blanco sobre #FD5107 da 3.30:1,
   que cumple para texto grande pero queda por debajo del 4.5:1 que pide la AA
   para texto corrido. Se compensa con peso 500 en la lista y con un chip de
   código bastante más oscuro, pero no sube el ratio del cuerpo. */
.c-sesion:nth-child(even){
  background:var(--orange); border-color:var(--orange);
  color:var(--tinta-invertida);
}
.c-sesion:nth-child(even) h3,
.c-sesion:nth-child(even) .c-sesion__n,
.c-sesion:nth-child(even) .c-sesion__dur,
.c-sesion:nth-child(even) .c-sesion__temas li{ color:var(--tinta-invertida); }
/* medio grado de peso extra: sobre un fondo saturado el trazo fino se deshilacha */
.c-sesion:nth-child(even) .c-sesion__temas li{ font-weight:500; }
.c-sesion:nth-child(even) .c-sesion__temas li::before{ background:var(--tinta-invertida); }
.c-sesion:nth-child(even):hover{ border-color:var(--ink); }
/* el chip va al 32% de negro para que el blanco encima llegue a 5.85:1 */
.c-sesion:nth-child(even) .c-sesion__temas code{
  background:rgba(22,19,15,.32); color:var(--tinta-invertida);
}

/* Entrada alternada: la primera llega desde la izquierda, la siguiente desde
   la derecha. El desplazamiento lateral pisa el translateY de la hoja base,
   así que hay que reponer el estado final con más peso que .js .reveal.is-in. */
.js .c-temario .reveal{ transform:translateX(-34px); }
.js .c-temario .reveal:nth-child(even){ transform:translateX(34px); }
.js .c-temario .reveal.is-in{ transform:none; }

/* La tarjeta desplazada asoma fuera de la pantalla mientras espera su turno, y
   eso es lo que dejaba arrastrar la página de lado. Ojo: no es sólo móvil —
   .wrap deja 24px de margen y el desplazamiento es de 34, así que se desborda
   en cualquier ventana por debajo de ~1268px. clip recorta sin crear un
   contenedor de scroll, así que el sticky del encabezado sigue funcionando. */
.c-sec--clip{ overflow-x:clip; }
.c-sesion__n{
  font-family:var(--display); font-weight:800; font-size:3.1rem; line-height:.86;
  font-variation-settings:"wdth" 118; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:var(--orange);
}
.c-sesion__dur{
  display:block; font-variation-settings:"wdth" var(--w-estrecho); font-size:.8rem;
  color:var(--muted); margin-top:12px; letter-spacing:.02em;
}
.c-sesion h3{ font-size:1.22rem; margin-bottom:16px; }
.c-sesion__temas li{
  position:relative; padding-left:20px;
  font-size:.92rem; color:var(--ink-2); line-height:1.62;
}
.c-sesion__temas li+li{ margin-top:9px; }
.c-sesion__temas code{
  font-family:var(--mono); font-size:.86em;
  background:var(--bg-sand); color:var(--ink);
  padding:.1em .4em; border-radius:6px;
}
.c-sesion__temas li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--orange-soft);
}
/* ── requisitos ───────────────────────── */
.c-req{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px); align-items:start; }
.c-req h3{ font-size:1.08rem; margin-bottom:18px; }
.c-req__lista li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.92rem; color:var(--ink-2); line-height:1.6;
}
.c-req__lista li+li{ margin-top:13px; }
.c-req__lista .ico{ width:19px; height:19px; margin-top:2px; color:var(--orange); }

.c-costos{
  width:100%; border-collapse:collapse;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
}
.c-costos__nota{
  font-size:.84rem; color:var(--muted); line-height:1.65; margin-top:16px;
}
.c-costos th,
.c-costos td{ padding:14px 18px; text-align:left; font-size:.88rem; border-bottom:1px solid var(--line); }
.c-costos th{ font-weight:700; color:var(--ink); }
.c-costos td:last-child{ font-family:var(--mono); font-size:.82rem; color:var(--ink-2); white-space:nowrap; }
.c-costos tr:last-child th,
.c-costos tr:last-child td{ border-bottom:0; }
.c-costos thead th{ background:var(--bg-sand); font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }

/* ── FAQ — <details> nativo, funciona sin JS ── */
.c-faq{ max-width:820px; margin-inline:auto; }
.c-faq details{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0 22px;
}
.c-faq details+details{ margin-top:12px; }
.c-faq details[open]{ border-color:var(--orange-soft); box-shadow:var(--shadow-sm); }
.c-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-weight:700; color:var(--ink); font-size:.98rem;
}
.c-faq summary::-webkit-details-marker{ display:none; }
.c-faq summary::after{
  content:"+"; flex:none;
  font-size:1.5rem; font-weight:400; line-height:1; color:var(--orange);
  transition:transform .3s var(--ease);
}
.c-faq details[open] summary::after{ transform:rotate(45deg); }
.c-faq summary:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:6px; }
.c-faq__r{ padding:0 0 22px; font-size:.92rem; color:var(--muted); line-height:1.7; max-width:66ch; }

/* ── CTA final ────────────────────────── */
.c-cta{
  background:linear-gradient(135deg, #17140F 0%, #241C12 55%, #3A1F0A 100%);
  color:#fff; padding:clamp(56px, 6.5vw, 92px) 0; text-align:center;
}
.c-cta h2{ color:#fff; font-size:clamp(1.8rem, 4vw, 2.7rem); margin-bottom:18px; }
.c-cta p{ color:rgba(255,255,255,.72); max-width:56ch; margin-inline:auto; font-size:1.02rem; line-height:1.7; }
.c-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.c-cta__nota{ font-family:var(--mono); font-size:.76rem; color:rgba(255,255,255,.45); margin-top:22px; }

/* ── métodos de pago ──────────────────── */
/* El precio es el dato que la gente viene a buscar aquí: va antes que las
   tarjetas y con peso de titular, no escondido en una nota al pie. */
.c-precio{ margin-top:20px; }
.c-precio__cifra{
  font-size:clamp(2.6rem, 6vw, 3.5rem); font-weight:800; line-height:1;
  font-variation-settings:"wdth" 118; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.c-precio__moneda{
  font-variation-settings:"wdth" var(--w-estrecho);
  font-size:1rem; font-weight:700; letter-spacing:.06em;
  color:var(--orange); margin-left:9px;
}
.c-precio__nota{
  display:block; margin:14px auto 0; max-width:44ch;
  font-size:.95rem; color:var(--ink-2);
}
.c-precio__extra{
  display:block; margin-top:6px;
  font-variation-settings:"wdth" var(--w-estrecho);
  font-size:.85rem; color:var(--muted);
}

.c-pagos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:start; }
.c-pago{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px, 2.8vw, 32px); box-shadow:var(--shadow-sm);
}
.c-pago__top{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.c-pago__ico{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:grid; place-items:center; background:var(--bg-sand); color:var(--orange);
}
.c-pago__ico .ico{ width:21px; height:21px; }
.c-pago h3{ font-size:1.04rem; }

.c-dato{ margin:0; }
.c-dato dt,
.c-dato__label{
  font-variation-settings:"wdth" var(--w-estrecho);
  font-size:.78rem; font-weight:600; letter-spacing:.045em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.c-dato dd{ margin:0 0 16px; font-size:.92rem; font-weight:600; color:var(--ink); }
.c-dato dd:last-child{ margin-bottom:0; }
.c-dato__label{ margin-top:18px; }

/* la red bajo la etiqueta: mandar a la cadena equivocada es la forma más
   fácil de perder el dinero, y el público de este curso es cero técnico */
.c-dato__red{ margin:-2px 0 9px; font-size:.82rem; color:var(--ink-2); }

/* la dirección: monoespaciada y partible, que una wallet no cabe en una línea */
.c-dato__copiable{ display:flex; align-items:stretch; gap:8px; }
.c-dato__copiable code{
  flex:1; min-width:0;
  font-family:var(--mono); font-size:.66rem; line-height:1.7;
  background:var(--bg-sand); color:var(--ink);
  padding:11px 13px; border-radius:var(--r-sm);
  word-break:break-all;
}
.c-copiar{
  flex:none; width:42px;
  display:grid; place-items:center;
  background:var(--bg); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; transition:color .2s, border-color .2s, background-color .2s;
}
.c-copiar:hover{ color:var(--orange); border-color:var(--orange-soft); }
.c-copiar .ico{ width:17px; height:17px; }
.c-copiar.is-ok{ background:var(--orange); border-color:var(--orange); color:#fff; }

.c-pend{ color:var(--muted); font-weight:400; font-style:italic; }

.c-qr{
  width:150px; height:150px; margin-bottom:20px;
  border-radius:var(--r-sm); background:var(--bg);
  display:grid; place-items:center;
}
.c-qr svg{ width:100%; height:100%; display:block; }
.c-qr--vacio{
  border:1.5px dashed var(--line);
  font-variation-settings:"wdth" var(--w-estrecho); font-size:.86rem; color:var(--muted); text-align:center;
}

.c-redes{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.c-redes .eyebrow{ margin-bottom:10px; }
.c-redes ul{ display:flex; flex-wrap:wrap; gap:8px; }
.c-redes li{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 8px; border:1px solid var(--line); border-radius:5px;
  font-size:.79rem; font-weight:600; color:var(--ink-2);
}
/* logos oficiales de cada red, como archivo suelto: cada marca trae sus
   propios colores y un <img> los aísla del CSS de la página. */
.c-redes img{ width:auto; height:18px; flex:none; }
.c-redes img.es-cuadro{ height:15px; }  /* el cuadro macizo pesa más a igual altura */

.c-pago__nota{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; text-align:center;
  margin-top:28px; font-size:.9rem; color:var(--muted);
}
.c-pago__nota .ico{ width:19px; height:19px; color:var(--orange); flex:none; }
.c-pago__nota a{ color:var(--orange); font-weight:700; }
.c-pago__nota a:hover{ text-decoration:underline; }

@media (max-width:980px){
  .c-pagos{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .c-pagos{ grid-template-columns:1fr; }
}

/* ── responsive — desktop-first, igual que el resto del proyecto ── */
@media (max-width:1080px){
  .c-hero__inner{ grid-template-columns:1fr; }
  .c-sesion{ grid-template-columns:96px 1fr; }
}

@media (max-width:980px){
  .c-sec{ padding:72px 0; }
  .c-req{ grid-template-columns:1fr; }
  .c-quien{ grid-template-columns:1fr; }
  /* Con la tarjeta ocupando casi todo el ancho, moverla de lado se siente como
     si la página se tambaleara. Aquí la entrada sube en vertical y el
     desbordamiento horizontal desaparece de raíz, no sólo recortado. */
  .js .c-temario .reveal,
  .js .c-temario .reveal:nth-child(even){ transform:translateY(18px); }
  .js .c-temario .reveal.is-in{ transform:none; }
}

@media (max-width:620px){
  .c-sec{ padding:56px 0; }
  .c-quien__cab{ gap:12px; margin-bottom:18px; }
  .c-sesion{ grid-template-columns:1fr; gap:18px; }
  .c-sesion__cab{ display:flex; align-items:baseline; gap:14px; }
  .c-sesion__n{ font-size:2.2rem; }
  .c-sesion__dur{ margin-top:0; }
  .c-carru{ --canal:18px; }
  .c-meta li{ padding:11px 12px; font-size:.66rem; gap:7px; }
  .c-hero__actions .btn,
  .c-cta__actions .btn{ width:100%; }
  .c-term{ font-size:.72rem; }
  .c-term__body{ padding:14px 15px 18px; }
  .c-costos th,
  .c-costos td{ padding:11px 13px; font-size:.82rem; }
}

@media (prefers-reduced-motion:reduce){
  .c-term__cursor{ animation:none; }
  .c-logro:hover,
  .c-quien__caja:hover{ transform:none; }
  /* la regla de la hoja base tiene menos peso que .js .c-temario .reveal:
     sin esto, quien pida menos movimiento se quedaría con las tarjetas corridas */
  .js .c-temario .reveal,
  .js .c-temario .reveal:nth-child(even){ opacity:1; transform:none; }
}


/* ═══════════════════════════════════════════
   Interacciones (assets/js/interaccion.js)
   ═══════════════════════════════════════════ */

/* ── foco de luz que sigue al cursor ──
   Un círculo naranja muy tenue bajo el puntero; la tarjeta lo recorta. */
.c-luz{ position:relative; isolation:isolate; overflow:hidden; }
.c-luz::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), rgba(253,81,7,.11), transparent 70%);
  opacity:0; transition:opacity .35s var(--ease);
}
.c-luz:hover::after{ opacity:1; }

/* ── "Es para ti si…" marcable ── */
.c-quien__lista.is-marcable li{ padding-left:0; }
.c-quien__lista.is-marcable li::before{ display:none; }
.c-quien__lista.is-marcable li+li{ margin-top:8px; }
.c-marca{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:10px 12px; margin:0 -12px; width:calc(100% + 24px);
  background:none; border:0; border-radius:12px; cursor:pointer; text-align:left;
  font-size:.98rem; color:var(--ink-2); line-height:1.45;
  transition:background-color .2s, color .2s;
}
.c-marca:hover{ background:var(--bg-soft); }
.c-marca__caja{
  flex:none; width:22px; height:22px; border-radius:6px;
  border:2px solid var(--orange-soft); background:var(--bg);
  display:grid; place-items:center;
  transition:background-color .2s, border-color .2s, transform .3s var(--ease);
}
.c-marca__caja svg{
  width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:16; stroke-dashoffset:16; transition:stroke-dashoffset .3s var(--ease) .05s;
}
.c-marca[aria-pressed="true"]{ color:var(--ink); font-weight:600; }
.c-marca[aria-pressed="true"] .c-marca__caja{
  background:var(--orange); border-color:var(--orange); transform:scale(1.1);
}
.c-marca[aria-pressed="true"] .c-marca__caja svg{ stroke-dashoffset:0; }
.c-marca:active .c-marca__caja{ transform:scale(.88); }

.c-medidor{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 16px;
}
.c-medidor__riel{
  grid-column:1 / -1; height:6px; border-radius:var(--pill);
  background:var(--bg-sand); overflow:hidden;
}
.c-medidor__riel span{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--orange), var(--orange-mid), var(--orange-soft));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease);
}
.c-medidor__txt{ font-size:.88rem; color:var(--muted); line-height:1.45; }
.c-medidor.is-listo .c-medidor__txt{ color:var(--ink); font-weight:600; }
.c-medidor__cta{
  padding:10px 18px; font-size:.86rem; --btn-corte:9px;
  opacity:0; transform:translateX(-8px); pointer-events:none; visibility:hidden;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.c-medidor.is-listo .c-medidor__cta{
  opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}

/* ── temario en pestañas ── */
.c-tabs{
  position:relative;
  display:grid; grid-template-columns:repeat(var(--pasos, 4), 1fr); gap:10px;
  margin-bottom:20px;
}
.c-tab{
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:16px 18px 20px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer;
  transition:border-color .25s, background-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.c-tab:hover{ border-color:var(--orange-soft); transform:translateY(-2px); }
.c-tab__n{
  font-weight:800; font-size:1.7rem; line-height:1; letter-spacing:-.04em;
  font-variation-settings:"wdth" 118; font-variant-numeric:tabular-nums;
  color:var(--orange-soft); transition:color .25s;
}
.c-tab__t{
  font-size:.86rem; font-weight:700; line-height:1.25; color:var(--ink-2);
  font-variation-settings:"wdth" var(--w-estrecho);
}
.c-tab[aria-selected="true"]{
  background:var(--ink); border-color:var(--ink); box-shadow:var(--shadow-md);
}
.c-tab[aria-selected="true"] .c-tab__n{ color:var(--orange); }
.c-tab[aria-selected="true"] .c-tab__t{ color:#fff; }
/* riel de avance: se llena hasta la sesión elegida */
.c-tabs__riel{
  position:absolute; left:0; right:0; bottom:-11px; height:3px;
  border-radius:var(--pill); background:var(--line); overflow:hidden;
}
.c-tabs__riel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--orange), var(--orange-mid));
  transform:scaleX(calc((var(--paso, 0) + 1) / var(--pasos, 4)));
  transform-origin:0 50%; transition:transform .5s var(--ease);
}

/* en modo pestañas todas las sesiones se ven igual (la alternancia
   blanco/naranja era para la lista larga) y el panel entra con un fundido */
.c-temario.is-tabs{ gap:0; }
.c-temario.is-tabs .c-sesion{
  margin-top:10px;
  background:var(--bg); border-color:var(--line); color:inherit;
  animation:c-panel .5s var(--ease);
}
.c-temario.is-tabs .c-sesion:nth-child(even) h3{ color:var(--ink); }
.c-temario.is-tabs .c-sesion:nth-child(even) .c-sesion__n{ color:var(--orange); }
.c-temario.is-tabs .c-sesion:nth-child(even) .c-sesion__dur{ color:var(--muted); }
.c-temario.is-tabs .c-sesion:nth-child(even) .c-sesion__temas li{ color:var(--ink-2); font-weight:400; }
.c-temario.is-tabs .c-sesion:nth-child(even) .c-sesion__temas li::before{ background:var(--orange-soft); }
.c-temario.is-tabs .c-sesion:nth-child(even) .c-sesion__temas code{ background:var(--bg-sand); color:var(--ink); }
.c-temario.is-tabs .c-sesion:hover{ border-color:var(--orange-soft); }
.c-temario.is-tabs .c-sesion__n{ font-size:4.4rem; }
/* display:grid de .c-sesion le gana al [hidden] del navegador */
.c-temario.is-tabs .c-sesion[hidden]{ display:none; }
.c-temario.is-tabs .c-sesion__temas li{ animation:c-item .5s var(--ease) backwards; }
.c-temario.is-tabs .c-sesion__temas li:nth-child(1){ animation-delay:.05s; }
.c-temario.is-tabs .c-sesion__temas li:nth-child(2){ animation-delay:.1s; }
.c-temario.is-tabs .c-sesion__temas li:nth-child(3){ animation-delay:.15s; }
.c-temario.is-tabs .c-sesion__temas li:nth-child(4){ animation-delay:.2s; }
.c-temario.is-tabs .c-sesion__temas li:nth-child(5){ animation-delay:.25s; }
.c-temario.is-tabs .c-sesion__temas li:nth-child(6){ animation-delay:.3s; }
.c-sesion:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
@keyframes c-panel{ from{ opacity:0; transform:translateY(12px); } }
@keyframes c-item{ from{ opacity:0; transform:translateX(-10px); } }

.c-sesion__sig{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  padding:0; background:none; border:0; cursor:pointer;
  font-weight:700; font-size:.9rem; color:var(--orange);
}
.c-sesion__sig .ico{ width:17px; height:17px; transition:transform .3s var(--ease); }
.c-sesion__sig:hover .ico{ transform:translateX(5px); }

/* ── requisitos: "de nuestro lado" ── */
.c-incluye{
  position:relative;
  background:var(--ink); color:rgba(255,255,255,.82);
  border-radius:var(--r-lg); padding:clamp(26px, 3vw, 36px);
  box-shadow:var(--shadow-lg);
}
.c-incluye h3{ color:#fff; }
.c-incluye .c-req__lista li{ color:rgba(255,255,255,.82); }
.c-incluye .c-req__lista .ico{ color:var(--orange-mid); }
.c-incluye.c-luz::after{
  background:radial-gradient(320px circle at var(--lx, 50%) var(--ly, 50%), rgba(253,81,7,.28), transparent 70%);
}
.c-incluye__sello{
  position:absolute; top:clamp(22px, 2.8vw, 32px); right:clamp(22px, 2.8vw, 32px);
  padding:5px 11px; border-radius:var(--pill);
  background:var(--orange); color:#fff;
  font-variation-settings:"wdth" var(--w-estrecho);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.c-incluye__nota{
  margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.9rem; line-height:1.6; color:var(--butter); font-weight:600;
}

/* ── FAQ: apertura suave donde el navegador lo permite ── */
@supports (interpolate-size:allow-keywords){
  .c-faq{ interpolate-size:allow-keywords; }
  .c-faq details::details-content{
    block-size:0; overflow:clip;
    transition:block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .c-faq details[open]::details-content{ block-size:auto; }
}
.c-faq details{ transition:border-color .25s, box-shadow .25s; }
.c-faq details:hover{ border-color:var(--orange-soft); }

/* ── responsive de lo nuevo ── */
@media (max-width:1080px){
  .c-hero{ min-height:0; }
  .c-hero__velo{
    background:linear-gradient(180deg, rgba(22,19,15,.72) 0%, rgba(22,19,15,.45) 55%, rgba(22,19,15,.2) 100%);
  }
  .c-hero__visual{ max-width:560px; width:100%; margin-inline:auto; }
}
@media (max-width:780px){
  .c-tabs{ grid-template-columns:repeat(var(--pasos, 4), 1fr); gap:8px; }
  .c-tab{ flex-direction:column; align-items:flex-start; gap:6px; padding:12px 12px 14px; }
  .c-tab__t{ display:none; }
  .c-tab__n{ font-size:1.4rem; }
  .c-temario.is-tabs .c-sesion__n{ font-size:2.2rem; }
}
@media (max-width:620px){
  .c-hero{ padding:44px 0 36px; }
  .c-hero__titulo{ margin:18px 0 16px; }
  .c-hero__visual{ padding:48px 6px 40px; }
  .c-flota{ font-size:.72rem; padding:8px 11px 8px 8px; }
  .c-flota .ico{ width:26px; height:26px; }
  .c-flota--c{ right:0; }
  .c-medidor{ grid-template-columns:1fr; }
  .c-medidor__cta{ justify-self:start; }
  .c-incluye__sello{ position:static; display:inline-block; margin-bottom:14px; }
}

@media (prefers-reduced-motion:reduce){
  .c-in, .c-linea > .c-in, .c-in--term,
  .c-flota, .c-hl, .c-chip__punto::after,
  .c-temario.is-tabs .c-sesion,
  .c-temario.is-tabs .c-sesion__temas li{ animation:none; opacity:1; }
  .c-hero__visual .c-term, .c-flota{ transform:none; translate:none; }
  .c-logro:hover .c-arte{ transform:none; }
  .c-arte *{ animation:none !important; }
  .c-arte__piloto{ opacity:1; }
}

/* ── header sobre el hero: vidrio oscuro, no marco blanco ─────────────
   Flota encima del plasma (el hero sube bajo él). Arriba es casi
   transparente; al hacer scroll se oscurece lo justo para leerse sobre
   las secciones claras. Texto y logo en blanco. */
.site-header{
  margin-bottom:-79px;
  background:linear-gradient(180deg, rgba(22,19,15,.55), rgba(22,19,15,.18));
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header.is-stuck{
  background:rgba(22,19,15,.72);
  border-bottom-color:rgba(255,255,255,.12);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
}
.site-header .nav a:not(.btn){ color:rgba(255,255,255,.82); }
.site-header .nav a:not(.btn):hover{ color:#fff; }
.site-header .burger span{ background:#fff; }
.c-hero{ padding-top:clamp(120px, 12vw, 168px); }
@media (max-width:980px){
  .site-header .nav{
    background:rgba(22,19,15,.94); border-bottom-color:rgba(255,255,255,.1);
  }
  .site-header .nav a:not(.btn){ border-bottom-color:rgba(255,255,255,.1); }
}

/* header más fluido: sin franja ni línea, se desvanece en el hero */
.site-header{
  background:linear-gradient(180deg, rgba(22,19,15,.5) 0%, rgba(22,19,15,0) 100%);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.site-header.is-stuck{
  background:rgba(22,19,15,.6);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.08);
}
.site-header{ background-clip:padding-box; }