/* ═══════════════════════════════════════════
   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); }

/* Letrero "Próxima edición": vidrio oscuro con filo naranja, como un aviso
   colgado; el punto que late es el mismo del chip "en vivo". */
.c-edicion{
  display:flex; align-items:center; gap:14px; width:fit-content; max-width:100%;
  margin-top:26px; padding:12px 20px 12px 12px;
  background:linear-gradient(100deg, rgba(253,81,7,.2), rgba(255,255,255,.05) 60%);
  border:1px solid rgba(253,81,7,.55); border-radius:10px;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -22px rgba(253,81,7,.7);
}
.c-edicion__ico{
  width:46px; height:46px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--orange); color:#fff;
}
.c-edicion__ico .ico{ width:24px; height:24px; }
.c-edicion p{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-edicion__label{
  display:inline-flex; align-items:center; gap:8px;
  font-variation-settings:"wdth" var(--w-estrecho);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-soft);
}
.c-edicion__fechas{
  color:#fff; font-weight:800; line-height:1.15;
  font-size:clamp(1.08rem, 1.7vw, 1.32rem); letter-spacing:-.01em;
  font-variation-settings:"wdth" 108;
}
.c-edicion__sub{ font-family:var(--mono); font-size:.64rem; color:rgba(255,255,255,.6); }
.c-edicion + .c-meta{ margin-top:14px; }

.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--45{ animation-delay:.65s; }
.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; }


/* ═══════════════════════════════════════════
   La infraestructura (sección 2): diagrama vivo
   Claude Code → SSH → VPS (nginx · BD · OpenClaw) ← HTTPS ← tu web
                                    ↓ APIs y MCP
                     Calendar · Gmail · Telegram
   Estado base = todo encendido (sin JS / movimiento reducido). Con
   .is-vivo, interaccion.js enciende las piezas paso por paso.
   ═══════════════════════════════════════════ */
#infraestructura h2, #aula h2{ text-wrap:balance; }
#infraestructura .c-head{ max-width:820px; }
.c-mono{ font-family:var(--mono); }

.c-infra__mapa{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 84px minmax(0, 1.32fr) 84px minmax(0, 1fr);
  grid-template-areas:
    "claude a vps b web"
    ".      . c   . .  "
    "servs servs servs servs servs";
  align-items:center;
}
.c-pieza--claude{ grid-area:claude; }
.c-red--a{ grid-area:a; }
.c-pieza--vps{ grid-area:vps; }
.c-red--b{ grid-area:b; }
.c-pieza--web{ grid-area:web; }
.c-red--c{ grid-area:c; }
.c-servs{ grid-area:servs; }

/* ── piezas ── */
.c-pieza{
  position:relative;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--shadow-sm);
  transition:border-color .35s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.c-pieza__cab{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 11px; align-items:center;
  margin-bottom:14px;
}
.c-pieza__ico{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--bg-sand); color:var(--orange);
}
.c-pieza__ico .ico{ width:19px; height:19px; }
.c-pieza__cab h3{ font-size:1rem; line-height:1.15; }
.c-pieza__cab p{ font-size:.74rem; color:var(--muted); margin-top:2px; }
.c-pieza__ses{
  justify-self:end; align-self:start; white-space:nowrap;
  padding:3px 8px; border-radius:var(--pill);
  background:var(--bg-sand); color:var(--ink-2);
  font-family:var(--mono); font-size:.58rem;
}
.c-pieza__ses--mini{ margin-left:auto; padding:2px 7px; font-size:.54rem; }

.c-infra.is-vivo .c-pieza.is-foco{
  border-color:var(--orange); transform:translateY(-3px);
  box-shadow:0 0 0 4px rgba(253,81,7,.12), var(--shadow-md);
}

/* terminal de Claude Code */
.c-term2{
  background:var(--ink); border-radius:12px; padding:12px 14px;
  font-family:var(--mono); font-size:.68rem; line-height:1.5; color:#E8E3D8;
  min-height:150px;
}
.c-term2 li{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-term2__p{ color:var(--orange); margin-right:8px; }
.c-term2__yo{ color:var(--butter); white-space:normal !important; }
.c-term2__ok{ color:#7FE0A8; }
.c-term2__sube{ color:var(--orange-soft); margin-top:4px; }

/* el servidor: tarjeta oscura, es el centro de todo */
.c-pieza--vps{ background:var(--ink); border-color:var(--ink); color:rgba(255,255,255,.8); box-shadow:var(--shadow-lg); }
.c-pieza--vps .c-pieza__ico{ background:rgba(255,255,255,.08); color:var(--orange-soft); }
.c-pieza--vps .c-pieza__cab h3{ color:#fff; }
.c-pieza--vps .c-pieza__cab p{ color:rgba(255,255,255,.5); font-size:.66rem; }
.c-pieza--vps .c-pieza__ses{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); }
.c-pieza--vps.c-luz::after{
  background:radial-gradient(300px circle at var(--lx, 50%) var(--ly, 50%), rgba(253,81,7,.24), transparent 70%);
}
.c-infra.is-vivo .c-pieza--vps.is-foco{ border-color:var(--ink); box-shadow:var(--shadow-lg); transform:none; }

.c-vps{ display:grid; grid-template-columns:1fr 1.15fr; gap:8px; }
.c-mod{
  position:relative;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  transition:border-color .35s, background-color .35s;
}
.c-mod--claw{ grid-column:1 / -1; }
.c-infra.is-vivo .c-mod.is-foco{ border-color:var(--orange); background:rgba(253,81,7,.13); }
.c-mod__t{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:.82rem; color:#fff; }
.c-mod__d{ font-size:.72rem; color:rgba(255,255,255,.55); margin-top:3px; }
.c-mod__badge{
  display:inline-block; margin-top:7px; padding:2px 8px; border-radius:var(--pill);
  background:rgba(61,187,122,.18); color:#7FE0A8; font-size:.62rem; font-weight:700;
}
.c-mod__evento{ margin-top:6px; font-family:var(--mono); font-size:.66rem; color:var(--orange-soft); }
.c-led{ position:relative; width:7px; height:7px; border-radius:50%; background:#3DBB7A; flex:none; }
.c-led::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:#3DBB7A;
  animation:c-latido 2.2s var(--ease) infinite;
}
.c-tabla{ margin-top:7px; font-family:var(--mono); font-size:.6rem; }
.c-tabla li{
  display:flex; justify-content:space-between; gap:6px;
  padding:3px 6px; border-radius:5px; color:rgba(255,255,255,.62);
}
.c-tabla li+li{ margin-top:2px; }
.c-tabla .is-nueva{ background:rgba(252,224,141,.16); color:var(--butter); }

/* la web app */
.c-mini{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg); }
.c-mini__bar{
  display:flex; align-items:center; gap:5px; padding:7px 9px;
  background:var(--bg-sand); border-bottom:1px solid var(--line);
}
.c-mini__bar i{ width:7px; height:7px; border-radius:50%; background:var(--sand); flex:none; }
.c-mini__bar span{
  margin-left:5px; padding:2px 7px; border-radius:6px; background:var(--bg);
  font-family:var(--mono); font-size:.6rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.c-mini__body{ padding:12px; }
.c-mini__tit{ font-weight:800; font-size:.95rem; color:var(--ink); }
.c-mini__sub{ font-size:.72rem; color:var(--muted); margin-top:1px; }
.c-mini__horas{ display:flex; gap:5px; margin-top:10px; }
.c-mini__horas span{
  flex:1; text-align:center; padding:5px 0; border-radius:7px;
  border:1px solid var(--line); font-family:var(--mono); font-size:.62rem; color:var(--ink-2);
  transition:border-color .3s, background-color .3s, color .3s;
}
.c-mini__horas .c-mini__elegida{ border-color:var(--orange); background:#FFF1E8; color:var(--orange); font-weight:600; }
.c-mini__btn{
  display:block; margin-top:10px; padding:7px; border-radius:7px; text-align:center;
  background:var(--orange); color:#fff; font-weight:700; font-size:.74rem;
}
.c-mini__listo{ margin-top:8px; font-size:.72rem; font-weight:700; color:#1F7A4D; text-align:center; }

/* ── cables ── */
.c-red{
  position:relative; align-self:center;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding-inline:8px;
}
.c-red__tag{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; color:var(--muted);
  white-space:nowrap; transition:color .3s;
}
.c-red__via{
  position:relative; display:block; width:100%; height:2px;
  background:repeating-linear-gradient(90deg, var(--orange-soft) 0 6px, transparent 6px 11px);
  transition:opacity .3s;
}
/* punta de flecha: A entra al servidor por la derecha, B por la izquierda */
.c-red__via::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  border-block:5px solid transparent;
}
.c-red--a .c-red__via::after{ right:-2px; border-left:8px solid var(--orange-soft); }
.c-red--b .c-red__via::after{ left:-2px; border-right:8px solid var(--orange-soft); }
.c-red__pkt{
  position:absolute; top:50%; left:0; width:11px; height:11px; margin-top:-5.5px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 0 4px rgba(253,81,7,.2), 0 0 14px rgba(253,81,7,.7);
  opacity:0;
}
.c-infra.is-vivo .c-red:not(.is-foco) .c-red__via{ opacity:.55; }
.c-red.is-foco .c-red__tag{ color:var(--orange); font-weight:600; }
.c-red--a.is-foco .c-red__pkt{ animation:c-pkt-x 1.15s var(--ease) infinite; }
.c-red--b.is-foco .c-red__pkt{ animation:c-pkt-x 1.15s var(--ease) infinite reverse; }
@keyframes c-pkt-x{
  0%{ left:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 11px); opacity:0; }
}

/* C baja del servidor a los servicios */
.c-red--c{ justify-self:center; height:64px; padding:0; }
.c-red--c .c-red__via{
  width:2px; height:100%;
  background:repeating-linear-gradient(180deg, var(--orange-soft) 0 6px, transparent 6px 11px);
}
.c-red--c .c-red__via::after{
  top:auto; bottom:-2px; left:50%; transform:translateX(-50%);
  border-block:0; border-inline:5px solid transparent; border-top:8px solid var(--orange-soft);
}
.c-red--c .c-red__tag{ position:absolute; left:calc(50% + 14px); top:50%; transform:translateY(-50%); }
.c-red--c .c-red__pkt{ left:50%; top:0; margin:0 0 0 -5.5px; }
.c-red--c.is-foco .c-red__pkt{ animation:c-pkt-y 1.15s var(--ease) infinite; }
@keyframes c-pkt-y{
  0%{ top:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:calc(100% - 11px); opacity:0; }
}

/* ── servicios a los que llega OpenClaw ── */
.c-servs{
  justify-self:center; width:min(100%, 860px);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
.c-serv{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:border-color .35s, box-shadow .35s;
}
.c-serv__ico{
  width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--bg-sand); color:var(--orange);
}
.c-serv__ico .ico{ width:18px; height:18px; }
.c-serv__t{ font-weight:700; font-size:.86rem; color:var(--ink); }
.c-serv__m{ font-size:.74rem; color:#1F7A4D; font-weight:600; margin-top:1px; }
.c-servs.is-foco .c-serv{ border-color:var(--orange-soft); box-shadow:var(--shadow-md); }

/* ── lo que aparece en cada paso ── */
.c-infra.is-vivo [data-desde]{ transition:opacity .45s var(--ease), transform .45s var(--ease); }
.c-infra.is-vivo [data-desde]:not(.is-on):not(.c-mini__elegida){ opacity:0; transform:translateY(4px); }
.c-infra.is-vivo .c-mini__elegida:not(.is-on){ border-color:var(--line); background:none; color:var(--ink-2); font-weight:400; }
.c-term2 .is-on:nth-child(4){ transition-delay:.3s; }
.c-term2 .is-on:nth-child(5){ transition-delay:.6s; }
.c-term2 .is-on:nth-child(6){ transition-delay:1s; }
.c-mini__listo.is-on{ transition-delay:.5s; }
.c-serv:nth-child(2) .is-on{ transition-delay:.45s; }
.c-serv:nth-child(3) .is-on{ transition-delay:.9s; }

/* ── los pasos, debajo ── */
.c-pasos{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;
  margin-top:clamp(36px, 4.4vw, 56px);
}
.c-pasos li{
  position:relative; padding:16px 4px 0;
  border-top:3px solid var(--line);
  transition:border-color .3s, opacity .3s;
}
.c-pasos li::before{
  content:""; position:absolute; left:0; top:-3px; height:3px; width:0; background:var(--orange);
}
.c-infra.is-vivo .c-pasos li{ cursor:pointer; opacity:.55; }
.c-infra.is-vivo .c-pasos li:hover{ opacity:.85; }
.c-infra.is-vivo .c-pasos li.is-actual{ opacity:1; }
.c-infra.is-vivo .c-pasos li.is-actual::before{ animation:c-reloj-ancho var(--dur, 3s) linear forwards; }
.c-infra.is-vivo .c-pasos li.is-hecho{ border-top-color:var(--orange-soft); }
.c-infra.is-quieto .c-pasos li.is-actual::before{ animation:none; width:100%; }
@keyframes c-reloj-ancho{ to{ width:100%; } }
.c-pasos li:focus-visible{ outline:3px solid var(--orange); outline-offset:4px; border-radius:4px; }
.c-pasos__n{
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:.74rem; font-weight:700;
}
.c-pasos li.is-actual .c-pasos__n{ background:var(--orange); }
.c-pasos h4{ font-size:.98rem; margin:10px 0 4px; }
.c-pasos p{ font-size:.84rem; line-height:1.5; color:var(--muted); }

@media (max-width:1080px){
  .c-infra__mapa{ grid-template-columns:minmax(0, 1fr) 64px minmax(0, 1.32fr) 64px minmax(0, 1fr); }
}
/* tablet y celular: misma topología en vertical.
   Claude ↓ servidor; abajo, la web sube al servidor (↑) y el agente baja a
   los servicios (↓), lado a lado. */
@media (max-width:980px){
  .c-infra__mapa{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "claude claude"
      "a      a"
      "vps    vps"
      "b      c"
      "web    servs";
    align-items:start;
    max-width:620px; margin-inline:auto;
  }
  .c-red--a, .c-red--b{ justify-self:center; height:56px; padding:0; }
  .c-red--a .c-red__via, .c-red--b .c-red__via{
    width:2px; height:100%;
    background:repeating-linear-gradient(180deg, var(--orange-soft) 0 6px, transparent 6px 11px);
  }
  .c-red--a .c-red__via::after{
    right:auto; top:auto; bottom:-2px; left:50%; transform:translateX(-50%);
    border-block:0; border-inline:5px solid transparent; border-top:8px solid var(--orange-soft);
  }
  .c-red--b .c-red__via::after{
    left:50%; top:-2px; transform:translateX(-50%);
    border-block:0; border-inline:5px solid transparent; border-bottom:8px solid var(--orange-soft);
  }
  .c-red--a .c-red__tag, .c-red--b .c-red__tag{ position:absolute; left:calc(50% + 14px); top:50%; transform:translateY(-50%); }
  .c-red--a .c-red__pkt, .c-red--b .c-red__pkt{ left:50%; top:0; margin:0 0 0 -5.5px; }
  .c-red--a.is-foco .c-red__pkt{ animation:c-pkt-y 1.15s var(--ease) infinite; }
  .c-red--b.is-foco .c-red__pkt{ animation:c-pkt-y 1.15s var(--ease) infinite reverse; }
  .c-red--c{ height:56px; }
  .c-servs{ grid-template-columns:1fr; gap:8px; margin-left:6px; }
  .c-pieza--web{ margin-right:6px; }
  .c-pasos{ grid-template-columns:1fr; gap:0; max-width:620px; margin-inline:auto; }
  .c-pasos li{ display:grid; grid-template-columns:auto 1fr; gap:2px 12px; padding:12px 0 12px 14px; border-top:0; border-left:3px solid var(--line); }
  .c-pasos li::before{ top:0; left:-3px; width:3px; height:0; }
  .c-infra.is-vivo .c-pasos li.is-actual::before{ animation-name:c-reloj-alto; }
  .c-infra.is-quieto .c-pasos li.is-actual::before{ height:100%; }
  .c-infra.is-vivo .c-pasos li.is-hecho{ border-left-color:var(--orange-soft); }
  .c-pasos__n{ grid-row:1 / 3; }
  .c-pasos h4{ margin:2px 0 0; }
}
@keyframes c-reloj-alto{ to{ height:100%; } }
@media (max-width:620px){
  .c-pieza{ padding:12px; border-radius:var(--r-md); }
  .c-pieza__cab{ grid-template-columns:auto 1fr; }
  .c-pieza__ses{ grid-column:1 / -1; justify-self:start; }
  .c-pieza--claude .c-pieza__ses, .c-pieza--vps > .c-pieza__cab .c-pieza__ses{ grid-column:auto; grid-row:1; grid-column-start:3; justify-self:end; }
  .c-pieza--claude .c-pieza__cab, .c-pieza--vps > .c-pieza__cab{ grid-template-columns:auto 1fr auto; }
  .c-term2{ min-height:0; }
  .c-pieza--web .c-pieza__ico, .c-pieza--web .c-pieza__cab p{ display:none; }
  .c-mini__body{ padding:9px; }
  .c-mini__horas{ gap:3px; }
  .c-mini__horas span{ font-size:.56rem; }
  .c-serv{ padding:9px 10px; gap:9px; }
  .c-serv__ico{ width:28px; height:28px; border-radius:8px; }
  .c-serv__t{ font-size:.78rem; }
  .c-serv__m{ font-size:.68rem; }
}
@media (prefers-reduced-motion:reduce){
  .c-led::after{ animation:none; }
  .c-infra.is-vivo .c-pieza.is-foco{ transform:none; }
}


/* ═══════════════════════════════════════════
   El aula (después de Resultados)
   Maquetas de la plataforma: todo dentro de .c-pant mide en cqi para que
   la "pantalla" escale como una captura.
   ═══════════════════════════════════════════ */
.c-sec--oscura{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:rgba(255,255,255,.78);
}
/* la misma rejilla de puntos del aula real */
.c-sec--oscura::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 50%, #000, transparent);
          mask-image:radial-gradient(80% 70% at 70% 50%, #000, transparent);
}
.c-sec--oscura h2{ color:#fff; }
.c-sec--oscura .lead{ color:rgba(255,255,255,.66); }

.c-aula{
  display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(24px, 3.6vw, 56px); align-items:center;
}

.c-aula__lista{ display:flex; flex-direction:column; gap:6px; }
.c-aula__tab{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center;
  width:100%; padding:14px 16px; border-radius:14px;
  background:none; border:1px solid transparent; cursor:pointer; text-align:left;
  color:rgba(255,255,255,.62);
  transition:background-color .25s, border-color .25s, color .25s;
}
.c-aula__tab:hover{ background:rgba(255,255,255,.04); color:#fff; }
.c-aula__tab:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
.c-aula__tab[aria-selected="true"]{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#fff;
}
.c-aula__ico{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:var(--orange-soft);
  transition:background-color .25s, color .25s;
}
.c-aula__ico .ico{ width:23px; height:23px; }
.c-aula__tab[aria-selected="true"] .c-aula__ico{ background:var(--orange); color:#fff; }
.c-aula__t{ font-weight:700; font-size:1rem; }
.c-aula__d{
  grid-column:2; font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.66);
  display:none;
}
.c-aula__tab[aria-selected="true"] .c-aula__d{ display:block; animation:c-panel .4s var(--ease); }
/* sin JS no hay pestañas: se ven todas las descripciones */
html:not(.js) .c-aula__d{ display:block; }
/* barrita de tiempo del avance automático */
.c-aula__reloj{
  position:absolute; left:16px; right:16px; bottom:0; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
}
.c-aula.is-auto .c-aula__tab[aria-selected="true"] .c-aula__reloj{
  animation:c-reloj var(--dur, 6s) linear forwards;
}
@keyframes c-reloj{ to{ transform:scaleX(1); } }

/* ventana de navegador */
.c-nav{
  border-radius:16px; overflow:hidden;
  background:#1F1B16; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4), var(--shadow-lg);
}
.c-nav__bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:#2A251F; border-bottom:1px solid rgba(255,255,255,.06);
}
.c-nav__bar > i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); }
.c-nav__bar > i:first-child{ background:#FF5F57; }
.c-nav__bar > i:nth-child(2){ background:#FEBC2E; }
.c-nav__bar > i:nth-child(3){ background:#28C840; }
.c-nav__url{
  flex:1; display:flex; align-items:center; gap:7px; margin-left:12px; min-width:0;
  padding:6px 12px; border-radius:8px; background:rgba(0,0,0,.28);
  font-family:var(--mono); font-size:.72rem; color:rgba(255,255,255,.62);
  white-space:nowrap; overflow:hidden;
}
.c-nav__url .ico{ width:13px; height:13px; flex:none; color:#28C840; }

/* cada pantalla. El contenedor es la ventana (.c-nav), no la pantalla:
   así el padding y el font-size de .c-pant también se miden en su ancho. */
.c-nav{ container-type:inline-size; }
.c-pant{
  display:flex; flex-direction:column; justify-content:center;
  aspect-ratio:16 / 10.4; overflow:hidden; position:relative;
  background:#17140F; color:#E8E3D8;
  font-size:2.3cqi;
}
.c-pant:not([hidden]){ animation:c-pant .45s var(--ease); }
.c-pant[hidden]{ display:none; }
.c-pant--hub{ justify-content:flex-start; }
@keyframes c-pant{ from{ opacity:0; transform:scale(.985); } }

.m-kicker{
  font-family:var(--mono); font-size:1.75cqi; letter-spacing:.04em; color:var(--orange-soft);
}
.m-tag{
  font-style:normal; white-space:nowrap;
  padding:.5cqi 1.6cqi; border-radius:99px; font-size:1.7cqi; font-weight:700;
  background:var(--orange); color:#fff;
}
.m-tag--ok{ background:#DDF1E5; color:#1F7A4D; }
.m-tag--off{ background:var(--bg-sand); color:var(--muted); }

/* hub */
.m-hub__cab{
  padding:4.2cqi 5cqi 3.4cqi;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:3.4cqi 3.4cqi;
}
.m-hub__hola{
  margin-top:1.2cqi; color:#fff; font-weight:800; line-height:1;
  font-size:5.4cqi; letter-spacing:-.02em; font-variation-settings:"wdth" 125;
}
.m-hub__hola span{ color:var(--orange); }
.m-hub__filas{
  display:flex; flex-direction:column; gap:1.3cqi;
  flex:1; padding:3cqi 5cqi; background:var(--bg-soft);
}
.m-hub__filas li{
  display:grid; grid-template-columns:5.4cqi 1fr auto; align-items:center; gap:2.4cqi;
  padding:1.6cqi 2.2cqi; border-radius:1.4cqi;
  background:#fff; border:1px solid var(--ink); color:var(--ink);
  font-weight:700; font-size:2cqi;
}
.m-hub__filas b{
  color:var(--orange); font-weight:800; font-size:3.4cqi; line-height:.9;
  font-variation-settings:"wdth" 125;
}
.m-hub__filas .ico{ width:3.2cqi; height:3.2cqi; color:#1F7A4D; }
.m-hub__filas .is-ex{ background:#FFF9EE; }
.m-hub__filas .is-off{ border-color:var(--line); color:var(--muted); }
.m-hub__filas .is-off b{ color:var(--line); }
.m-hub__filas span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* diapositiva */
.c-pant--slide{ background:#FBFAF7; color:var(--ink); padding:5.5cqi 6.5cqi 8cqi; }
.c-pant--slide .m-kicker{ color:var(--orange); }
.m-slide__tit{
  margin-top:1.6cqi; font-weight:800; line-height:1.05; letter-spacing:-.02em;
  font-size:4.6cqi; font-variation-settings:"wdth" 112; max-width:22ch;
}
.m-slide__tit span{ background:linear-gradient(var(--butter), var(--butter)) no-repeat 0 80% / 100% 34%; }
.m-slide__frase{ display:flex; flex-wrap:wrap; gap:1.2cqi; margin-top:4cqi; }
.m-slide__frase span{
  padding:1cqi 1.8cqi; border-radius:1cqi; border:1px solid var(--line); background:#fff;
  font-family:var(--mono); font-size:2cqi;
}
.m-slide__frase .is-q{ border:2px dashed var(--orange); color:var(--orange); font-weight:700; }
.m-slide__probs{ display:flex; flex-direction:column; gap:1.3cqi; margin-top:3.2cqi; max-width:62cqi; }
.m-slide__probs li{ display:grid; grid-template-columns:11cqi 1fr 7cqi; align-items:center; gap:2cqi; font-size:2cqi; }
.m-slide__probs span{ font-family:var(--mono); }
.m-slide__probs i{ height:2cqi; border-radius:99px; background:var(--bg-sand); position:relative; overflow:hidden; }
.m-slide__probs i::after{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:inherit; background:var(--orange);
  transform-origin:left; animation:m-barra 1s var(--ease) .2s backwards;
}
.m-slide__probs li+li i::after{ background:var(--orange-soft); }
.m-slide__probs b{ text-align:right; font-family:var(--mono); font-size:1.8cqi; }
@keyframes m-barra{ from{ transform:scaleX(0); } }
.m-slide__pie{
  position:absolute; left:6.5cqi; right:6.5cqi; bottom:3.2cqi;
  display:flex; align-items:center; gap:2cqi; font-family:var(--mono); font-size:1.6cqi; color:var(--muted);
}
.m-slide__pie i{ flex:1; height:.5cqi; background:var(--line); border-radius:99px; overflow:hidden; }
.m-slide__pie b{ display:block; width:25%; height:100%; background:var(--orange); }

/* diagnóstico */
.c-pant--diag{ padding:5cqi 7cqi; }
.m-diag__prog{ display:flex; align-items:center; gap:2.4cqi; font-family:var(--mono); font-size:1.7cqi; color:rgba(255,255,255,.55); }
.m-diag__prog i{ flex:1; height:.7cqi; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.m-diag__prog b{ display:block; width:26.6%; height:100%; background:var(--orange); }
.m-diag__q{ margin-top:4.4cqi; color:#fff; font-weight:800; font-size:3.8cqi; line-height:1.15; letter-spacing:-.01em; }
.m-diag__q code{ font-family:var(--mono); font-size:.82em; color:var(--orange-soft); }
.m-diag__ops{ display:flex; flex-direction:column; gap:1.4cqi; margin-top:3.4cqi; }
.m-diag__ops li{
  display:flex; align-items:center; gap:2cqi;
  padding:1.7cqi 2.2cqi; border-radius:1.3cqi;
  border:1px solid rgba(255,255,255,.12); font-size:2.1cqi; color:rgba(255,255,255,.78);
}
.m-diag__ops i{ width:2.4cqi; height:2.4cqi; border-radius:50%; border:2px solid rgba(255,255,255,.3); flex:none; }
.m-diag__ops .is-sel{ border-color:var(--orange); background:rgba(253,81,7,.12); color:#fff; }
.m-diag__ops .is-sel i{ border-color:var(--orange); background:radial-gradient(var(--orange) 45%, transparent 50%); }
.m-btn{
  display:inline-block; align-self:flex-start; margin-top:3cqi; padding:1.4cqi 3.4cqi; border-radius:1cqi;
  background:var(--orange); color:#fff; font-weight:700; font-size:2cqi;
}

/* resultado del repaso */
.c-pant--exam{ padding:5cqi 7cqi; }
.m-exam__cab{ display:flex; align-items:center; gap:4cqi; }
.m-exam__pts{
  font-weight:800; font-size:11cqi; line-height:.85; color:var(--orange);
  letter-spacing:-.03em; font-variation-settings:"wdth" 118;
}
.m-exam__pts span{ font-size:.42em; color:rgba(255,255,255,.4); }
.m-exam__msg{ font-size:2.1cqi; line-height:1.4; color:rgba(255,255,255,.6); }
.m-exam__msg b{ color:#fff; font-size:3.2cqi; }
.m-exam__temas{ display:flex; flex-direction:column; gap:1.6cqi; margin-top:4.4cqi; }
.m-exam__temas li{ display:grid; grid-template-columns:18cqi 1fr 6cqi; align-items:center; gap:2.4cqi; font-size:2cqi; }
.m-exam__temas i{ height:1.4cqi; border-radius:99px; background:rgba(255,255,255,.08); position:relative; overflow:hidden; }
.m-exam__temas i::after{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:inherit; background:#3DBB7A;
  transform-origin:left; animation:m-barra 1s var(--ease) .2s backwards;
}
.m-exam__temas b{ font-family:var(--mono); font-size:1.7cqi; text-align:right; color:rgba(255,255,255,.7); }
.m-exam__rev{
  display:flex; align-items:center; gap:2cqi; margin-top:4cqi;
  padding:1.8cqi 2.4cqi; border-radius:1.3cqi;
  background:rgba(180,35,24,.14); border:1px solid rgba(253,100,80,.35); font-size:1.95cqi;
}
.m-exam__x{
  width:3.4cqi; height:3.4cqi; flex:none; border-radius:50%; display:grid; place-items:center;
  background:#B42318; color:#fff; font-size:1.7cqi; font-weight:800;
}
.m-exam__rev s{ color:rgba(255,255,255,.5); font-family:var(--mono); }
.m-exam__rev b{ color:#7FE0A8; font-family:var(--mono); font-weight:600; }

/* grabaciones */
.c-pant--grab{ padding:5cqi 6cqi; }
.m-grab__fila{ display:grid; grid-template-columns:1fr 1fr; gap:3cqi; margin-top:3cqi; }
.m-grab__mini{
  position:relative; aspect-ratio:16 / 9; border-radius:1.6cqi; overflow:hidden;
  background:
    radial-gradient(70% 90% at 80% 100%, rgba(253,81,7,.55), transparent 70%),
    linear-gradient(135deg, #2A231B, #120F0B);
  display:grid; place-items:center;
}
.m-grab__n{
  position:absolute; left:2.4cqi; bottom:1cqi; font-weight:800; font-size:9cqi; line-height:1;
  color:rgba(255,255,255,.12); font-variation-settings:"wdth" 125;
}
.m-grab__rec{
  position:absolute; top:1.6cqi; left:1.6cqi; font-style:normal;
  padding:.4cqi 1.2cqi; border-radius:.6cqi; background:#B42318; color:#fff;
  font-family:var(--mono); font-size:1.4cqi; font-weight:600;
}
.m-grab__dur{
  position:absolute; right:1.6cqi; bottom:1.6cqi; font-style:normal;
  padding:.4cqi 1.2cqi; border-radius:.6cqi; background:rgba(0,0,0,.6); color:#fff;
  font-family:var(--mono); font-size:1.4cqi;
}
.m-grab__play{
  width:8cqi; height:8cqi; border-radius:50%; background:rgba(255,255,255,.92);
  position:relative; box-shadow:0 0 0 1.6cqi rgba(255,255,255,.12);
}
.m-grab__play::after{
  content:""; position:absolute; left:52%; top:50%; transform:translate(-40%, -50%);
  border-left:2.6cqi solid var(--orange); border-block:1.6cqi solid transparent;
}
.m-grab p{ margin-top:1.6cqi; font-weight:700; font-size:2.2cqi; color:#fff; }

/* responsive */
@media (max-width:980px){
  .c-aula{ grid-template-columns:1fr; }
  .c-aula .c-nav{ order:-1; }
}
@media (max-width:620px){
  .c-aula__tab{ padding:12px 12px; }
}
@media (prefers-reduced-motion:reduce){
  .c-pant:not([hidden]),
  .c-aula__tab[aria-selected="true"] .c-aula__d,
  .m-slide__probs i::after,
  .m-exam__temas i::after{ animation:none; }
}