/* ================================================================
   IncubaLab — Hero B2C (estudiantes)
   Paleta: rojo INACAP como color de acción + violeta / aguamarina /
   celeste como paleta de producto (LMS). Base blanca luminosa.
   ================================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --red: #E30513;
  --red-dark: #C10410;

  --purple: #7C3AED;
  --purple-soft: #A78BFA;
  --aqua: #14B8A6;
  --aqua-soft: #5EEAD4;
  --sky: #0EA5E9;
  --sky-soft: #7DD3FC;

  --ink: #1B1426;
  --ink-70: rgba(27, 20, 38, .70);
  --ink-55: rgba(27, 20, 38, .55);
  --ink-40: rgba(27, 20, 38, .40);
  --line: rgba(27, 20, 38, .08);

  --bg: #FCFBFF;
  --card: #FFFFFF;

  --disp: 'Bricolage Grotesque', sans-serif;
  --serif: 'Instrument Serif', serif;
  --sans: 'Instrument Sans', sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1 { text-wrap: balance; }

::selection { background: rgba(124, 58, 237, .22); }

:focus-visible { outline: 2.5px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed; top: -80px; left: 16px; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; transition: top .2s;
}
.skip:focus { top: 14px; }

/* ---------- 3. Header ---------- */
.head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 251, 255, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.head.is-scrolled { box-shadow: 0 8px 30px -18px rgba(27, 20, 38, .25); }

.head-in {
  max-width: 1240px; margin: 0 auto; height: 68px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo span { font-family: var(--disp); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.logo-img {
  height: 24px !important; width: auto !important;
  max-width: none !important; max-height: 24px !important;
  display: block; margin: 4px 0;
}

.head-nav { display: flex; gap: 6px; }
.head-nav a {
  padding: 8px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink-55);
  transition: color .2s, background .2s;
}
.head-nav a:hover { color: var(--ink); background: rgba(124, 58, 237, .07); }

.head-cta {
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 10px 20px; border-radius: 12px;
  box-shadow: 0 8px 20px -10px rgba(227, 5, 19, .55);
  transition: background .2s, transform .25s var(--ease), box-shadow .3s;
}
.head-cta:hover {
  background: var(--red-dark); transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(227, 5, 19, .6);
}

/* ---------- 4. Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 68px);
  padding: clamp(44px, 6.5vh, 80px) 32px 64px;
  display: flex; flex-direction: column; align-items: center;
  isolation: isolate;
}

/* Aurora */
.aurora { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.b1 { width: 560px; height: 560px; left: -6%;  top: 2%;    background: rgba(124, 58, 237, .17); animation: drift1 22s ease-in-out infinite alternate; }
.b2 { width: 640px; height: 640px; right: -10%; top: 24%;  background: rgba(45, 212, 191, .17); animation: drift2 26s ease-in-out infinite alternate; }
.b3 { width: 520px; height: 520px; left: 14%;  bottom: -18%; background: rgba(56, 189, 248, .15); animation: drift3 24s ease-in-out infinite alternate; }
.b4 { width: 400px; height: 400px; right: 20%; top: -12%;  background: rgba(227, 5, 19, .07);  animation: drift1 28s ease-in-out infinite alternate-reverse; }

@keyframes drift1 { to { transform: translate(60px, 40px) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-70px, -30px) scale(1.05); } }
@keyframes drift3 { to { transform: translate(50px, -50px) scale(1.1); } }

/* Grano sutil */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: multiply;
}

.hero-core {
  position: relative; z-index: 2;
  max-width: 880px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* Tag: texto entre dos guiones */
.tag {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--ink);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 18px;
}
.tag::before, .tag::after {
  content: ""; width: 28px; height: 1.5px; border-radius: 2px; flex-shrink: 0;
}
.tag::before { background: linear-gradient(90deg, transparent, var(--purple) 55%, var(--aqua)); }
.tag::after  { background: linear-gradient(90deg, var(--aqua), var(--sky) 45%, transparent); }

/* Titular */
h1 {
  font-family: var(--disp);
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.025em;
  margin-bottom: 26px;
}

.w-idea {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: 0; padding-right: .04em;
  background: linear-gradient(100deg, var(--purple) 10%, var(--aqua) 50%, var(--sky) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hueShift 7s ease-in-out infinite alternate;
}
@keyframes hueShift { to { background-position: 100% 0; } }

/* Destacador (highlighter escolar) */
.hl { position: relative; white-space: nowrap; z-index: 0; }
.hl::before {
  content: ""; position: absolute; z-index: -1;
  left: -2%; right: -2.5%; top: 16%; bottom: 4%;
  border-radius: 10px;
  background: linear-gradient(97deg, rgba(94, 234, 212, .55), rgba(125, 211, 252, .55));
  transform: skewX(-7deg) rotate(-.6deg) scaleX(0);
  transform-origin: left center;
  animation: swipe .7s var(--ease) 1s forwards;
}
@keyframes swipe { to { transform: skewX(-7deg) rotate(-.6deg) scaleX(1); } }

/* Bajada */
.lead {
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.58;
  color: var(--ink-70);
  max-width: 720px;
  margin-bottom: 42px;
}

/* ---------- 5. Formulario de idea ---------- */
.idea-form {
  display: flex; align-items: center; gap: 10px;
  width: min(660px, 100%);
  background: var(--card);
  border: 1.5px solid #E9E5F3;
  border-radius: 22px;
  padding: 9px 9px 9px 20px;
  box-shadow: 0 24px 55px -22px rgba(76, 29, 149, .22), 0 3px 10px rgba(27, 20, 38, .04);
  transition: border-color .25s, box-shadow .3s, transform .3s var(--ease);
}
.idea-form:focus-within {
  border-color: rgba(124, 58, 237, .45);
  box-shadow:
    0 0 0 4px rgba(124, 58, 237, .14),
    0 0 0 8px rgba(45, 212, 191, .08),
    0 28px 60px -22px rgba(76, 29, 149, .28);
  transform: translateY(-2px);
}
.if-spark { flex-shrink: 0; }

.idea-form { cursor: pointer; }
.idea-form input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-size: 16.5px; color: var(--ink);
  cursor: pointer; caret-color: transparent; /* es un ejemplo, no se escribe aquí */
}
.idea-form input::placeholder { color: var(--ink-40); }

.btn-go {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--red); color: #fff;
  font-size: 15.5px; font-weight: 600;
  padding: 15px 24px; border-radius: 15px;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(227, 5, 19, .55);
  transition: background .2s, transform .25s var(--ease), box-shadow .3s;
  position: relative;
}
.btn-go svg { transition: transform .25s var(--ease); }
.btn-go:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(227, 5, 19, .6); }
.btn-go:hover svg { transform: translateX(3px); }
.btn-go:active { transform: translateY(0) scale(.98); }

/* Variante de dos líneas (home): acción + aviso de destino */
.btn-2l { flex-direction: column; gap: 2px; padding: 11px 26px; }
.bg-line { display: flex; align-items: center; gap: 9px; }
.bg-sub {
  font-size: 10.5px; font-weight: 500; letter-spacing: .015em;
  color: rgba(255, 255, 255, .75);
}

/* Garantías */
.assure {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 26px; flex-wrap: wrap;
  margin-top: 22px;
}
.assure li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-55);
}

.hint {
  margin-top: 14px; min-height: 22px;
  font-size: 13.5px; font-weight: 500; color: #0D9488;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s, transform .4s var(--ease);
}
.hint.on { opacity: 1; transform: none; }

/* ---------- 6. Tarjetas flotantes ---------- */
.orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.fwrap { position: absolute; will-change: transform; pointer-events: auto; }
.fw1 { left: max(3.5%, 28px); top: 24%; --glow: 20, 184, 166; }
.fw2 { right: max(3%, 24px); top: 19%; --glow: 14, 165, 233; }
.fw3 { left: max(5%, 36px); bottom: 25%; --glow: 124, 58, 237; }
.fw4 { right: max(4.5%, 32px); bottom: 22%; --glow: 227, 5, 19; }

.fcard {
  position: relative;
  width: 248px;
  background: var(--card);
  border: 1px solid #EFEBF7;
  border-radius: 18px;
  padding: 15px 16px;
  box-shadow: 0 30px 60px -26px rgba(76, 29, 149, .20), 0 4px 14px rgba(27, 20, 38, .05);
  transform: rotate(var(--rot, 0deg));
  animation: bob 7s ease-in-out infinite;
  opacity: 0;
  cursor: default;
  /* el zoom usa la propiedad `scale` para no pelear con la animación de flote */
  scale: 1;
  transition: scale .35s var(--ease), box-shadow .35s, border-color .3s;
}
.fcard:hover {
  scale: 1.06;
  border-color: rgba(var(--glow), .35);
  box-shadow:
    0 34px 70px -26px rgba(76, 29, 149, .26),
    0 0 0 1px rgba(var(--glow), .22),
    0 0 30px -2px rgba(var(--glow), .30),
    0 4px 14px rgba(27, 20, 38, .05);
}

/* Texto explicativo bajo cada tarjeta */
.fc-tip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 224px;
  transform: translateX(-50%);
  font-style: italic;
  font-size: 12px; font-weight: 500; line-height: 1.55;
  color: var(--ink-55); text-align: center;
  opacity: 0; translate: 0 -6px;
  transition: opacity .3s, translate .35s var(--ease);
  pointer-events: none;
}
.fcard:hover .fc-tip { opacity: 1; translate: 0 0; }
.fw1 .fcard { animation-delay: .2s; }
.fw2 .fcard { animation-delay: 1.4s; }
.fw3 .fcard { animation-delay: 2.6s; }
.fw4 .fcard { animation-delay: 3.4s; }

/* entrada + flote en una sola línea de tiempo */
@keyframes bob {
  0%   { opacity: 1; transform: rotate(var(--rot)) translateY(0); }
  50%  { opacity: 1; transform: rotate(var(--rot)) translateY(-9px); }
  100% { opacity: 1; transform: rotate(var(--rot)) translateY(0); }
}
.fcard { animation-fill-mode: both; }

.fc-top { display: flex; align-items: center; gap: 11px; }
.fc-top > div { flex: 1; min-width: 0; }
.fc-top strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.fc-top small { display: block; font-size: 12px; color: var(--ink-55); line-height: 1.35; }

.fc-ava {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: #fff;
}
.av-aqua { background: linear-gradient(135deg, var(--aqua), var(--sky)); }

.fc-ico {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
}
.ic-sky    { background: rgba(14, 165, 233, .12);  color: #0284C7; }
.ic-purple { background: rgba(124, 58, 237, .12);  color: var(--purple); }
.ic-red    { background: rgba(227, 5, 19, .10);    color: var(--red); }

.fc-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.ch-aqua { background: rgba(20, 184, 166, .13); color: #0F766E; }
.ch-red  { background: rgba(227, 5, 19, .10);   color: var(--red); }

.fc-bar {
  height: 6px; border-radius: 99px; background: #F1EEF8;
  margin: 13px 0 8px; overflow: hidden;
}
.fc-bar i {
  display: block; height: 100%; width: var(--w, 50%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--aqua), var(--sky));
  animation: grow 1.4s var(--ease) .8s both;
}
@keyframes grow { from { width: 0; } }

.fc-cap { font-size: 11.5px; color: var(--ink-55); }

/* ---------- 7. El viaje ---------- */
.journey {
  position: relative; z-index: 2;
  width: min(760px, 100%);
  height: 90px;
  margin-top: auto;
  padding-top: 54px; /* aire para los íconos: no se montan sobre el texto de arriba */
}
.j-line {
  position: absolute; top: 58px; left: 2%; right: 2%;
  height: 2px; border-radius: 2px; background: #E9E5F3;
}
/* Ciclo de 9s: el cometa recorre la línea (0%→88%), cada checkpoint que
   pasa queda marcado con su ícono; al reiniciar el loop, todo se limpia. */
.j-line::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--aqua), var(--sky));
  transform: scaleX(0); transform-origin: left;
  animation: jFill 9s linear forwards;
}
@keyframes jFill {
  0% { transform: scaleX(0); }
  88%, 100% { transform: scaleX(1); }
}

.j-comet {
  position: absolute; top: 53px; left: 2%;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, var(--aqua) 45%, var(--sky) 100%);
  box-shadow: 0 0 12px rgba(14, 165, 233, .8), 0 0 26px rgba(45, 212, 191, .5);
  transform: translateX(-50%);
  animation: jRun 9s linear forwards;
}
@keyframes jRun {
  0% { left: 2%; opacity: 1; }
  88% { left: 98%; opacity: 1; }
  94%, 100% { left: 98%; opacity: 0; }
}

.j-node {
  position: absolute; top: 54px; left: var(--x);
  transform: translateX(-50%); text-align: center;
}

.j-node i {
  display: block; width: 10px; height: 10px; margin: 0 auto;
  border-radius: 50%; background: #fff; border: 2px solid #D9D3E8;
}
.j-node span.j-lab {
  display: block; margin-top: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-40);
  white-space: nowrap;
}

.j-ico {
  position: absolute; left: 50%; top: -42px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--jc, var(--aqua));
  color: var(--jc, var(--aqua));
  display: grid; place-items: center;
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--jc, var(--aqua)) 55%, transparent);
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(.4);
  transform-origin: bottom center;
  pointer-events: none;
}

/* Puntos: se marcan al paso del cometa y quedan marcados para siempre */
.j-n1 i { animation: jd1 9s linear forwards; }
.j-n2 i { animation: jd2 9s linear forwards; }
.j-n3 i { animation: jd3 9s linear forwards; }
.j-n4 i { animation: jd4 9s linear forwards; }
.j-n5 i { animation: jd5 9s linear forwards; }

.j-n1 .j-ico { animation: ji1 9s linear forwards; }
.j-n2 .j-ico { animation: ji2 9s linear forwards; }
.j-n3 .j-ico { animation: ji3 9s linear forwards; }
.j-n4 .j-ico { animation: ji4 9s linear forwards; }
.j-n5 .j-ico { animation: ji5 9s linear forwards; }

@keyframes jd1 {
  0% { transform: scale(1); background: #fff; border-color: #D9D3E8; }
  .8% { transform: scale(2.05); }
  2%, 100% { transform: scale(1.75); background: var(--jc); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc) 18%, transparent), 0 3px 12px color-mix(in srgb, var(--jc) 55%, transparent); }
}
@keyframes jd2 {
  0%, 21.7% { transform: scale(1); background: #fff; border-color: #D9D3E8; }
  22.5% { transform: scale(2.05); }
  23.7%, 100% { transform: scale(1.75); background: var(--jc); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc) 18%, transparent), 0 3px 12px color-mix(in srgb, var(--jc) 55%, transparent); }
}
@keyframes jd3 {
  0%, 43.7% { transform: scale(1); background: #fff; border-color: #D9D3E8; }
  44.5% { transform: scale(2.05); }
  45.7%, 100% { transform: scale(1.75); background: var(--jc); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc) 18%, transparent), 0 3px 12px color-mix(in srgb, var(--jc) 55%, transparent); }
}
@keyframes jd4 {
  0%, 65.7% { transform: scale(1); background: #fff; border-color: #D9D3E8; }
  66.5% { transform: scale(2.05); }
  67.7%, 100% { transform: scale(1.75); background: var(--jc); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc) 18%, transparent), 0 3px 12px color-mix(in srgb, var(--jc) 55%, transparent); }
}
@keyframes jd5 {
  0%, 87.7% { transform: scale(1); background: #fff; border-color: #D9D3E8; }
  88.5% { transform: scale(2.05); }
  89.7%, 100% { transform: scale(1.75); background: var(--jc); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc) 18%, transparent), 0 3px 12px color-mix(in srgb, var(--jc) 55%, transparent); }
}

@keyframes ji1 {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.4); }
  1% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.08); }
  2.4%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ji2 {
  0%, 21.7% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.4); }
  22.7% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.08); }
  24.1%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ji3 {
  0%, 43.7% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.4); }
  44.7% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.08); }
  46.1%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ji4 {
  0%, 65.7% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.4); }
  66.7% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.08); }
  68.1%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ji5 {
  0%, 87.7% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.4); }
  88.7% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.08); }
  90.1%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.journey-alt { display: none; }

/* ---------- 8. Strip móvil ---------- */
.mini-strip { display: none; }

/* ---------- 8a. El problema (el archivo) ---------- */
.problema {
  position: relative;
  padding: clamp(88px, 11vh, 128px) 32px;
  background: linear-gradient(180deg, #F7F3FC, #F2EDF9);
  border-top: 1px solid rgba(27, 20, 38, .08);
  border-bottom: 1px solid rgba(27, 20, 38, .08);
  overflow: clip;
}
/* trama de puntos, casi invisible */
.problema::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(27, 20, 38, .055) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%);
  mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%);
}

.pr-in {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 72px; align-items: center;
}

.pr-title {
  font-family: var(--disp);
  font-size: clamp(30px, 3.9vw, 50px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.025em;
  text-wrap: balance;
  margin-bottom: 24px;
}
.pr-dead {
  opacity: .45;
  text-decoration: line-through;
  text-decoration-thickness: 4px;
  text-decoration-color: rgba(27, 20, 38, .45);
}

.pr-p {
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.62; color: var(--ink-70);
  max-width: 520px; margin-bottom: 16px;
}

.pr-quote {
  position: relative;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5; color: var(--ink);
  max-width: 480px;
  padding-left: 18px;
  margin: 26px 0 30px;
}
.pr-quote::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--purple), var(--aqua));
}

.pr-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  border-bottom: 1.5px solid rgba(27, 20, 38, .2);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s, gap .25s var(--ease);
}
.pr-link:hover { color: var(--purple); border-color: var(--purple); gap: 11px; }

/* El archivo: pila de restos de proyecto */
.pr-archivo {
  position: relative;
  height: 540px;
}
/* resplandores suaves detrás de la pila: la sección respira color */
.pr-archivo::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: -1;
  background:
    radial-gradient(42% 38% at 24% 22%, rgba(124, 58, 237, .13), transparent 70%),
    radial-gradient(40% 36% at 78% 46%, rgba(45, 212, 191, .12), transparent 70%),
    radial-gradient(36% 34% at 42% 86%, rgba(56, 189, 248, .11), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

.pr-stamp {
  position: absolute; top: 6px; left: 2%; z-index: 5;
  font-family: var(--disp); font-weight: 800;
  font-size: 26px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(27, 20, 38, .22);
  border: 3px solid rgba(27, 20, 38, .18);
  border-radius: 10px; padding: 6px 16px;
  transform: rotate(-11deg);
}

.ar-card {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(27, 20, 38, .08);
  border-radius: 16px;
  box-shadow: 0 20px 44px -22px rgba(27, 20, 38, .22), 0 3px 10px rgba(27, 20, 38, .04);
  transform: rotate(var(--rot, 0deg));
  filter: grayscale(.68) saturate(.9);
  opacity: .97;
  scale: 1; translate: 0 0;
  transition: filter .45s, scale .35s var(--ease), translate .35s var(--ease), box-shadow .35s;
  cursor: default;
}
/* al pasar el cursor, recuperan el color: podrían volver a vivir */
.ar-card:hover {
  filter: grayscale(0);
  opacity: 1;
  scale: 1.03; translate: 0 -6px;
  box-shadow: 0 28px 54px -22px rgba(76, 29, 149, .26), 0 4px 12px rgba(27, 20, 38, .05);
  z-index: 6;
}

.ar-polaroid {
  top: 34px; right: 4%; width: 258px;
  --rot: 4deg;
  padding: 10px 10px 12px;
  margin: 0;
}
.ar-polaroid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px;
}
.ar-polaroid figcaption {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink-55);
  text-align: center; padding-top: 9px;
}

.ar-nota {
  top: 150px; left: 0; width: 268px; z-index: 2;
  --rot: -3deg;
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
}
.ar-nota strong {
  font-family: var(--disp); font-size: 34px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink);
  flex-shrink: 0;
}
.ar-nota span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-70); line-height: 1.4; }
.ar-nota small { display: block; font-size: 11.5px; color: var(--ink-40); margin-top: 4px; }

.ar-file {
  top: 318px; right: 0; width: 296px; z-index: 3;
  --rot: 2deg;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px;
}
.ar-file-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(14, 165, 233, .12); color: #0284C7;
}
.ar-file span { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.ar-file small { display: block; font-size: 11.5px; color: var(--ink-40); margin-top: 3px; }

.ar-chat {
  top: 424px; left: 5%; width: 300px; z-index: 4;
  --rot: -2deg;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px;
}
.ar-chat-ava {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--purple), var(--sky));
  color: #fff; font-size: 13px; font-weight: 700;
}
.ar-chat span { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.ar-chat small { display: block; font-size: 11.5px; color: var(--ink-40); margin-top: 3px; }

/* ---------- 8a-bis. El muro que se olvida (scrollytelling) ---------- */
.olvido {
  position: relative;
  background: linear-gradient(180deg, #FCFBFF, #F8F6FC 50%, #FCFBFF);
}

/* papel milimetrado: los proyectos nacieron en cuadernos */
.olvido::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(27, 20, 38, .055) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(27, 20, 38, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 20, 38, .032) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(27, 20, 38, .032) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(78% 72% at 50% 46%, #000 42%, transparent 98%);
  mask-image: radial-gradient(78% 72% at 50% 46%, #000 42%, transparent 98%);
}

.ol-pin {
  position: relative;
  min-height: calc(100svh - 68px);
  display: flex; flex-direction: column;
  max-width: 1200px; margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) 32px 40px;
  overflow: clip;
}

/* lienzo del polvo, sobre el muro */
.ol-dust {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%;
  pointer-events: none;
}

.ol-head { text-align: center; margin-bottom: clamp(12px, 2.4vh, 26px); }
.ol-head .tag { margin-bottom: 12px; }

.ol-title {
  font-family: var(--disp);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.025em;
  text-wrap: balance;
}
.ol-fade {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.05em;
  background: linear-gradient(100deg, var(--purple) 10%, var(--aqua) 55%, var(--sky) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* El muro */
.ol-wall {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content;
  align-content: space-evenly;
  column-gap: 30px; row-gap: 2px;
}

.ol-item {
  padding: 3px 0;
  min-width: 0; /* permite que el nombre haga ellipsis en vez de ensanchar la columna */
}

/* desintegración: la entrada se erosiona de izquierda a derecha */
.ol-item.dusting {
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0) 34%, #000 62%);
  mask-image: linear-gradient(100deg, rgba(0,0,0,0) 34%, #000 62%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: dustSweep 1.25s linear forwards;
}
@keyframes dustSweep {
  0% {
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    opacity: 1; transform: none; filter: blur(0);
  }
  100% {
    -webkit-mask-position: 0% 0; mask-position: 0% 0;
    opacity: 0; transform: translate(10px, -5px); filter: blur(2px);
  }
}
.ol-item strong {
  display: block;
  font-size: clamp(12px, .95vw, 13.5px); font-weight: 700;
  color: var(--ink); line-height: 1.28;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ol-item strong em {
  font-style: normal; font-weight: 500; color: var(--ink-55);
}
.ol-item small {
  display: block;
  font-size: 10px; color: var(--ink-40); line-height: 1.3;
}

/* desintegrada: ya no está */
.ol-item.off { opacity: 0 !important; animation: none; }

/* sobrevivientes: al final, su meta revela por qué siguen vivas */
.ol-item.keep small::after {
  content: " — siguió adelante";
  color: #0F766E; font-weight: 700;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.olvido.done .ol-item.keep small::after { opacity: 1; }

/* Pie: contador y cierre */
.ol-foot {
  text-align: center;
  padding-top: clamp(10px, 2vh, 18px);
}
.ol-count {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
}
.ol-count strong {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(24px, 2.5vw, 34px); letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ol-count span {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(13px, 1.15vw, 16px); color: var(--ink-55);
}
.ol-count b { font-variant-numeric: tabular-nums; }

.ol-close {
  margin-top: 8px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(14.5px, 1.3vw, 18px); color: var(--ink);
  opacity: 0; translate: 0 8px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}
.olvido.done .ol-close { opacity: 1; translate: 0 0; }
.olvido.done .ol-hint { opacity: 0; transition: opacity .4s; }

@media (max-width: 900px) {
  .ol-wall { grid-template-columns: repeat(2, 1fr); column-gap: 22px; }
  .ol-item:nth-child(n + 25) { display: none; } /* móvil: 24 entradas */
  .ol-pin { padding: 24px 20px 22px; }
  .ol-title { font-size: clamp(24px, 6.2vw, 32px); }
}

/* ---------- 8a-ter. Cómo funciona: la ruta de FeriaGo ---------- */
.como {
  position: relative;
  padding: clamp(88px, 12vh, 140px) 32px clamp(72px, 10vh, 110px);
  border-top: 1px solid rgba(27, 20, 38, .07);
  isolation: isolate;
  overflow: clip;
}
.como::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(27, 20, 38, .05) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(62% 55% at 50% 30%, #000 18%, transparent 100%);
  mask-image: radial-gradient(62% 55% at 50% 30%, #000 18%, transparent 100%);
}
.cf-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; pointer-events: none; }
.cf-glow-a { width: 620px; height: 620px; left: -12%; top: 16%; background: rgba(124, 58, 237, .10); }
.cf-glow-b { width: 560px; height: 560px; right: -10%; bottom: 8%; background: rgba(45, 212, 191, .10); }

.cf-head {
  position: relative;
  text-align: center;
  max-width: 780px; margin: 0 auto clamp(56px, 8vh, 96px);
}
.cf-mat {
  position: absolute; inset: -70px -120px; z-index: 2;
  width: calc(100% + 240px); height: calc(100% + 140px);
  pointer-events: none;
}

.cf-title {
  font-family: var(--disp);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800; line-height: 1.04; letter-spacing: -.025em;
  text-wrap: balance;
}
/* se materializa desde el polvo (una sola vez) */
.js .cf-title { opacity: 0; }
.js .cf-title.mat {
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0) 34%, #000 62%);
  mask-image: linear-gradient(100deg, rgba(0,0,0,0) 34%, #000 62%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: matIn 1.5s linear .35s forwards;
}
@keyframes matIn {
  0% {
    -webkit-mask-position: 0% 0; mask-position: 0% 0;
    opacity: 0; filter: blur(3px); transform: translate(8px, -4px);
  }
  100% {
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    opacity: 1; filter: blur(0); transform: none;
  }
}

.cf-lead {
  margin-top: 18px;
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.6; color: var(--ink-70);
  max-width: 620px; margin-left: auto; margin-right: auto;
}

/* La ruta */
.cf-route {
  position: relative;
  max-width: 1020px; margin: 0 auto;
}
.cf-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.cf-step {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  padding: clamp(36px, 6vh, 64px) 0;
}
.cf-step:nth-child(odd) .cf-copy { order: 2; }
.cf-step:nth-child(odd) .cf-shot { order: 1; }

.cf-dot {
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%; background: #fff;
  border: 2.5px solid #DAD4E8;
  z-index: 1;
  transition: background .35s, border-color .35s, box-shadow .4s, scale .4s cubic-bezier(.34, 1.56, .64, 1);
  scale: 1;
}
.cf-step.lit .cf-dot {
  background: var(--dc, var(--purple));
  border-color: #fff;
  scale: 1.35;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dc, var(--purple)) 16%, transparent),
              0 3px 14px color-mix(in srgb, var(--dc, var(--purple)) 50%, transparent);
}

.cf-num {
  display: inline-block;
  font-family: var(--disp); font-weight: 800;
  font-size: 13px; letter-spacing: .14em;
  color: var(--dc, var(--purple));
  margin-bottom: 10px;
}
.cf-copy h3 {
  font-family: var(--disp);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
  margin-bottom: 12px;
  text-wrap: balance;
}
.cf-copy p {
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.65; color: var(--ink-70);
  max-width: 380px;
}
.cf-step:nth-child(even) .cf-copy { justify-self: end; text-align: right; }
.cf-step:nth-child(even) .cf-copy p { margin-left: auto; }
.cf-step:nth-child(odd) .cf-copy { justify-self: start; text-align: left; }

/* Pantallas del caso */
.cf-shot { max-width: 400px; width: 100%; }
.cf-step:nth-child(odd) .cf-shot { justify-self: end; }
.cf-step:nth-child(even) .cf-shot { justify-self: start; }

.shot {
  background: var(--card);
  border: 1px solid #ECE8F5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(76, 29, 149, .22), 0 4px 14px rgba(27, 20, 38, .05);
  transition: translate .45s var(--ease), box-shadow .45s;
}
.shot:hover {
  translate: 0 -5px;
  box-shadow: 0 38px 70px -28px rgba(76, 29, 149, .3), 0 5px 16px rgba(27, 20, 38, .06);
}
.shot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px;
  border-bottom: 1px solid #F1EEF8;
}
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E9E4F2; }
.shot-bar span {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-40);
}
.shot-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }

.sh-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-40);
}
.sh-idea {
  border: 1.5px solid #ECE8F5; border-radius: 12px;
  padding: 12px 14px; background: #FDFCFF;
  font-size: 14.5px; color: var(--ink);
}
.sh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-ok {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: #0F766E;
}
.sh-chip {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(124, 58, 237, .09); color: #6D28D9;
}

.sh-diag {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; color: var(--ink-70); line-height: 1.45;
  padding: 7px 10px; border-radius: 10px;
}
.sh-diag b {
  flex-shrink: 0; width: 92px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-40);
}
.sh-diag.sh-next { background: rgba(20, 184, 166, .08); }
.sh-diag.sh-next b { color: #0F766E; }

/* Paso 03 — "el sistema elige por ti": catálogo apagado → 3 lecciones a color → tu proyecto */
.sh-pick { display: flex; flex-direction: column; }

/* el catálogo completo, en gris y desenfocándose: lo que NO te asignaron */
.sh-pick-cat {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  padding: 0 10px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent 98%);
}
.sh-pick-cat i { height: 22px; border-radius: 6px; background: #DCD7E6; opacity: .7; }
.sh-pick-cat i:nth-child(3n)   { background: #D2CCE0; }
.sh-pick-cat i:nth-child(4n+1) { background: #E3DFEC; }
.sh-pick-cat i:nth-child(5n+2) { opacity: .45; }

/* las 3 elegidas se adelantan, a color, sobre el catálogo */
.sh-pick-row {
  display: flex; gap: 10px; justify-content: center;
  margin-top: -30px;
  position: relative; z-index: 1;
}
.sh-pick-row .sh-course { flex: 1; max-width: 122px; }
.pc-1 { transform: rotate(-3.5deg) translateY(5px); }
.pc-2 { transform: translateY(-5px); }
.pc-3 { transform: rotate(3.5deg) translateY(5px); }

.sh-course {
  background: var(--card);
  border: 1px solid rgba(27, 20, 38, .07);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 20px 38px -16px rgba(76, 29, 149, .38);
}
.sh-course-cov {
  position: relative; height: 62px;
  background-size: cover; background-position: center;
}
.sh-course-cov::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 10, 24, .1), rgba(15, 10, 24, .5));
}
.sh-course-badge {
  position: absolute; z-index: 1; top: 6px; left: 6px;
  font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .28);
  padding: 2.5px 7px; border-radius: 999px;
}
.sh-course-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 1.5px;
  color: var(--ink); background: rgba(255, 255, 255, .92);
}
.sh-course-body { padding: 7px 9px 9px; }
.sh-course-body b { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.sh-course-body small { display: block; margin-top: 2px; font-size: 9px; font-weight: 600; color: var(--ink-40); }

/* leyenda + conexión hacia el proyecto */
.sh-pick .sh-cap {
  margin-top: 16px; text-align: center;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-70);
}
.sh-pick .sh-cap b { color: var(--ink); font-weight: 700; }

.sh-pick-drop {
  align-self: center;
  width: 1.5px; height: 18px; margin-top: 8px;
  background: linear-gradient(180deg, transparent, var(--aqua));
}
.sh-pick-target {
  align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1px solid #ECE8F5; border-radius: 999px;
  padding: 7px 15px;
  box-shadow: 0 12px 26px -16px rgba(76, 29, 149, .35);
}
.pt-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(130deg, var(--purple), var(--aqua));
}
.sh-pick-task {
  align-self: center; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: #0284C7;
  background: rgba(14, 165, 233, .08);
  border-radius: 999px; padding: 5px 13px;
}
.sh-pick-task i {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px dashed var(--sky);
}
.sh-pick-task b {
  font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}

.sh-notif {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #F1EEF8; border-radius: 12px;
  padding: 11px 13px;
}
.sh-notif b { display: block; font-size: 13px; color: var(--ink); }
.sh-notif small { display: block; font-size: 11.5px; color: var(--ink-55); }
.sh-ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
}
.i-sky { background: rgba(14, 165, 233, .12); color: #0284C7; }
.i-red { background: rgba(227, 5, 19, .1); color: var(--red); }

/* Paso 05 — "Despega": de la frase original al resultado, sin ventana de navegador */
.sh-launch {
  display: flex; flex-direction: column; align-items: center;
  max-width: 320px; margin: 0 auto;
  background: var(--card);
  border: 1px solid #ECE8F5;
  border-radius: 22px;
  padding: 28px 22px 24px;
  box-shadow: 0 30px 60px -28px rgba(76, 29, 149, .22), 0 4px 14px rgba(27, 20, 38, .05);
}

/* recorte con la frase original, como pegado con washi tape */
.sh-then {
  position: relative;
  max-width: 250px;
  background: #FDFCFF; border: 1px solid #ECE8F5; border-radius: 10px;
  padding: 11px 16px 12px;
  rotate: -2deg;
  box-shadow: 0 10px 20px -14px rgba(27, 20, 38, .22);
}
.sh-then::before {
  content: ""; position: absolute; top: -8px; left: 50%; translate: -50% 0;
  width: 44px; height: 15px; border-radius: 2px; rotate: -3deg;
  background: linear-gradient(100deg, rgba(167, 139, 250, .6), rgba(94, 234, 212, .6));
  opacity: .85;
}
.sh-then-tag {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-40); margin-bottom: 4px;
}
.sh-then-quote {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; line-height: 1.4; color: var(--ink-55);
}

/* conector: el tiempo que pasó entre una cosa y la otra */
.sh-launch-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 14px 0 12px;
}
.sh-launch-arrow i {
  width: 1.5px; height: 20px;
  background: linear-gradient(180deg, rgba(167, 139, 250, .5), var(--aqua));
}
.sh-launch-arrow span {
  font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--ink-40);
}

/* resultado: la ruta completa, convertida en avance real */
.sh-now { display: flex; align-items: center; gap: 14px; width: 100%; }
.sh-ring {
  position: relative; flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--purple), var(--aqua) 50%, var(--sky) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sh-ring::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card);
}
.sh-ring b {
  position: relative; z-index: 1;
  font-family: var(--disp); font-weight: 800; font-size: 13px; color: var(--ink);
}
.sh-ring small {
  position: relative; z-index: 1;
  font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-40);
}

.sh-now-body { flex: 1; min-width: 0; }
.sh-now-body b {
  display: block;
  font-family: var(--disp); font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.25; color: var(--ink);
}
.sh-spark { display: block; width: 100%; height: 22px; margin-top: 6px; }
.sh-now-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 10.5px; font-weight: 700; color: #0F766E;
  background: rgba(20, 184, 166, .1); padding: 4px 11px; border-radius: 999px;
}

/* Cierre */
.cf-foot {
  text-align: center;
  margin-top: clamp(40px, 7vh, 72px);
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.cf-moral {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.35; letter-spacing: -.015em; color: var(--ink);
  max-width: 620px; text-wrap: balance;
}
.cf-moral em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, var(--purple) 10%, var(--aqua) 55%, var(--sky) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CTA de cierre del "Cómo funciona": transparente, dos líneas, igual lógica que el hero */
.cf-cta-2l {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 28px; border-radius: 16px;
  background: transparent;
  border: 1.5px solid var(--red);
  color: var(--red);
  transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .3s;
}
.cf-cta-2l .bg-line {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--disp); font-weight: 700; font-size: 15px;
}
.cf-cta-2l .bg-sub {
  font-size: 10.5px; font-weight: 500; color: currentColor; opacity: .68;
}
.cf-cta-2l:hover {
  background: var(--red); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(227, 5, 19, .5);
}
.cf-cta-2l:active { transform: translateY(0) scale(.98); }

@media (max-width: 900px) {
  .como { padding-left: 20px; padding-right: 20px; }
  .cf-svg, .cf-dot { display: none; }
  .cf-step { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; }
  .cf-step:nth-child(odd) .cf-copy,
  .cf-step:nth-child(even) .cf-copy { order: 1; justify-self: start; text-align: left; }
  .cf-step:nth-child(odd) .cf-shot,
  .cf-step:nth-child(even) .cf-shot { order: 2; justify-self: start; }
  .cf-step:nth-child(even) .cf-copy p { margin-left: 0; }
  /* hilo punteado entre pasos */
  .cf-step:not(:last-child)::after {
    content: ""; position: absolute; left: 24px; bottom: -14px;
    width: 2px; height: 28px;
    background: repeating-linear-gradient(180deg, #D9D3E8 0 4px, transparent 4px 9px);
  }
  .cf-mat { inset: -50px -30px; width: calc(100% + 60px); height: calc(100% + 100px); }
}

/* ---------- 8a-quater. Qué recibes: radar del ecosistema + catálogo ---------- */
.recibes {
  position: relative;
  padding: clamp(88px, 12vh, 136px) 32px clamp(80px, 11vh, 120px);
  background: linear-gradient(180deg, #F6F1FC, #F0EBF8 60%, #F4EFFA);
  border-top: 1px solid rgba(27, 20, 38, .08);
  border-bottom: 1px solid rgba(27, 20, 38, .08);
  overflow: clip;
}
/* hairlines diagonales, casi invisibles */
.recibes::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(27, 20, 38, .045) 0 1px, transparent 1px 68px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.rb-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(48px, 7vh, 80px);
}
.rb-title {
  font-family: var(--disp);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.025em;
  text-wrap: balance;
}
.rb-lead {
  margin: 18px auto 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62; color: var(--ink-70);
  max-width: 680px;
}

/* --- Parte 1: el radar del copiloto --- */
.eco {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.15fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.eco-claims { display: flex; flex-direction: column; gap: 26px; }
.eco-claims li { display: flex; align-items: flex-start; gap: 15px; }
.ec-ico {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--cc, var(--purple));
  background: color-mix(in srgb, var(--cc, var(--purple)) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--cc, var(--purple)) 18%, transparent);
}
.eco-claims b {
  display: block;
  font-family: var(--disp);
  font-size: 17px; font-weight: 800; letter-spacing: -.015em;
  margin-bottom: 4px;
}
.eco-claims p { font-size: 14px; line-height: 1.55; color: var(--ink-70); max-width: 320px; }

.eco-radar {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  justify-self: center;
}

.ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(27, 20, 38, .09);
  border-radius: 50%;
}
.r1 { width: 100%; height: 100%; }
.r2 { width: 68%; height: 68%; border-style: dashed; border-color: rgba(27, 20, 38, .08); }
.r3 { width: 36%; height: 36%; }

/* el barrido: la IA mirando su ecosistema, sin parar */
.eco-sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(124, 58, 237, .17) 0deg,
    rgba(45, 212, 191, .07) 42deg,
    transparent 85deg);
  animation: ecoSpin 9s linear infinite;
}
@keyframes ecoSpin { to { transform: rotate(360deg); } }

.eco-core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2;
}
.eco-core svg {
  width: 54px; height: 54px; padding: 15px;
  border-radius: 17px; background: #1B1426;
  box-shadow: 0 14px 30px -10px rgba(27, 20, 38, .55);
}
.eco-core::before {
  content: ""; position: absolute; top: -14px; left: 50%;
  width: 82px; height: 82px; margin-left: -41px;
  border-radius: 24px;
  border: 1.5px solid rgba(124, 58, 237, .35);
  animation: corePulse 3s ease-out infinite;
}
@keyframes corePulse {
  0% { transform: scale(.75); opacity: .9; }
  100% { transform: scale(1.45); opacity: 0; }
}
.eco-core span {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-55);
  background: rgba(255, 255, 255, .8); padding: 3px 9px; border-radius: 999px;
}

.eco-node {
  position: absolute; left: var(--nx); top: var(--ny);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 1;
}
.en-ico {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: #fff; color: var(--nc, var(--purple));
  border: 1.5px solid rgba(27, 20, 38, .08);
  box-shadow: 0 10px 22px -12px rgba(27, 20, 38, .3);
  animation: nodePing 9s infinite;
  animation-delay: var(--nd, 0s);
}
/* el nodo se enciende cuando el barrido lo toca */
@keyframes nodePing {
  0%, 100% { scale: 1; border-color: rgba(27, 20, 38, .08); box-shadow: 0 10px 22px -12px rgba(27, 20, 38, .3); }
  2.5% {
    scale: 1.22;
    border-color: var(--nc);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--nc) 15%, transparent),
                0 12px 26px -10px color-mix(in srgb, var(--nc) 55%, transparent);
  }
  11% { scale: 1; border-color: rgba(27, 20, 38, .08); box-shadow: 0 10px 22px -12px rgba(27, 20, 38, .3); }
}
.en-lab {
  font-size: 11.5px; font-weight: 700; color: var(--ink-70);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.en-chip {
  position: absolute; bottom: calc(100% + 6px); left: 55%;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff;
  border: 1px solid rgba(27, 20, 38, .08);
  border-radius: 999px; padding: 6px 12px;
  font-size: 11px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(27, 20, 38, .35);
  opacity: 0;
  animation: chipPop 9s infinite;
  animation-delay: var(--cd, 0s);
  z-index: 3;
}
.en-chip i {
  width: 1.4cqw; height: 1.4cqw; border-radius: 50%; flex-shrink: 0;
  background: var(--nc, var(--purple));
}
@keyframes chipPop {
  0%, 2% { opacity: 0; transform: translateY(7px) scale(.92); }
  5%, 27% { opacity: 1; transform: translateY(0) scale(1); }
  33%, 100% { opacity: 0; transform: translateY(-6px) scale(.96); }
}

/* --- Parte 2: el catálogo --- */
.cat { margin-top: clamp(80px, 11vh, 128px); }
.cat-head {
  text-align: center;
  max-width: 720px; margin: 0 auto clamp(36px, 5vh, 56px);
}
.cat-title {
  font-family: var(--disp);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.08;
}
.cat-lead {
  margin-top: 12px;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.6; color: var(--ink-70);
}

.cat-grid {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tarjeta de curso — las disponibles son un enlace al curso en el LMS */
.cur {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid #ECE8F5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 50px -26px rgba(76, 29, 149, .18), 0 3px 10px rgba(27, 20, 38, .04);
  transition: translate .4s var(--ease), box-shadow .4s;
}
.cur:hover {
  translate: 0 -7px;
  box-shadow: 0 36px 66px -26px rgba(76, 29, 149, .3), 0 5px 14px rgba(27, 20, 38, .05);
}

/* Portadas: arte propio por módulo */
.cur-cover {
  position: relative;
  height: 148px;
  overflow: hidden;
}
.cur-cover::before {
  content: ""; position: absolute; inset: 0;
  transition: transform .6s var(--ease);
}
.cur:hover .cur-cover::before { transform: scale(1.06); }

.cov1 { background: linear-gradient(130deg, #5B21B6, #7C3AED 52%, #A78BFA); }
.cov1::before { background: repeating-radial-gradient(circle at 85% 130%, transparent 0 17px, rgba(255,255,255,.16) 17px 18.5px); }
.cov2 { background: linear-gradient(130deg, #0F766E, #14B8A6 55%, #5EEAD4); }
.cov2::before { background: repeating-linear-gradient(115deg, rgba(255,255,255,.13) 0 2px, transparent 2px 15px); }
.cov3 { background: linear-gradient(130deg, #0369A1, #0EA5E9 55%, #7DD3FC); }
.cov3::before { background: radial-gradient(rgba(255,255,255,.3) 1.2px, transparent 1.4px); background-size: 17px 17px; }
.cov4 { background: linear-gradient(130deg, #4C1D95, #7C3AED 45%, #0EA5E9); }
.cov4::before { background: repeating-radial-gradient(circle at 15% -20%, transparent 0 22px, rgba(255,255,255,.13) 22px 23.5px); }
.cov5 { background: linear-gradient(130deg, #0D9488, #14B8A6 50%, #0EA5E9); }
.cov5::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px;
}
.cov6 { background: linear-gradient(130deg, #0284C7, #38BDF8 55%, #5EEAD4); }
.cov6::before { background: repeating-radial-gradient(circle at 50% 160%, transparent 0 15px, rgba(255,255,255,.17) 15px 16.5px); }

.cur-art {
  position: absolute; right: -22px; bottom: -30px;
  transform: rotate(-8deg);
  transition: transform .6s var(--ease);
}
.cur:hover .cur-art { transform: rotate(-3deg) scale(1.06); }

/* Portada con imagen real de la cápsula: el gradiente queda de fondo
   mientras carga; la trama del ::before se apaga para no ensuciar la foto */
.cur-cover.has-img::before { display: none; }
.cur-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .6s var(--ease);
}
.cur:hover .cur-img { transform: scale(1.06); }
.cur-cover.has-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27, 20, 38, .48), rgba(27, 20, 38, 0) 42%),
    linear-gradient(0deg, rgba(27, 20, 38, .52), rgba(27, 20, 38, 0) 44%);
}

a.cur { text-decoration: none; color: inherit; }
a.cur:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* Módulo que aún no corresponde a la etapa del proyecto: apagado y sin enlace */
.cur-locked { cursor: default; }
.cur-locked:hover {
  translate: 0 0;
  box-shadow: 0 24px 50px -26px rgba(76, 29, 149, .18), 0 3px 10px rgba(27, 20, 38, .04);
}
.cur-locked .cur-img { filter: grayscale(1) brightness(.62) contrast(1.05); }
.cur-locked:hover .cur-img { transform: none; }
.cur-locked .cur-body h4 { color: var(--ink-70); }
.cur-lock {
  position: absolute; z-index: 2;
  /* left+right con width:fit-content lo centra sin limitar el ancho
     disponible a la mitad, como haría left:50% */
  left: 14px; right: 14px; top: 50%; translate: 0 -50%;
  margin: 0 auto; width: fit-content; max-width: 100%;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; line-height: 1.2;
  color: #fff; text-align: left;
  background: rgba(27, 20, 38, .55);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 8px 14px; border-radius: 999px;
}
.cur-lock svg { flex-shrink: 0; }

.cur-num, .cur-dur, .cur-type {
  position: absolute; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 4px 11px; border-radius: 999px;
}
.cur-num { top: 12px; left: 12px; }
.cur-dur { top: 12px; right: 12px; }
.cur-type { bottom: 12px; left: 12px; text-transform: none; letter-spacing: .01em; font-weight: 600; }

.cur-body { padding: 16px 18px 14px; flex: 1; }
.cur-body h4 {
  font-family: var(--disp);
  font-size: 18px; font-weight: 800; letter-spacing: -.015em;
  line-height: 1.2; margin-bottom: 7px;
}
.cur-body p {
  font-size: 13px; line-height: 1.55; color: var(--ink-70);
  margin-bottom: 11px;
}
.cur-stage {
  font-family: var(--serif); font-style: italic;
  font-size: 13px;
  color: var(--cc, var(--purple));
}

.cur-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #F1EEF8;
  color: var(--ink-40);
}
.cur-foot > div { flex: 1; min-width: 0; }
.cur-ava {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  padding: 2px;
  background: linear-gradient(135deg, var(--cc, var(--purple)), color-mix(in srgb, var(--cc, var(--purple)) 45%, #7DD3FC));
}
.cur-ava img {
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 1.5px solid #fff;
}

/* etapa + calificación */
.cur-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
}
.cur-rate {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.st {
  position: relative;
  font-size: 12.5px; letter-spacing: 1.5px; line-height: 1;
  color: #E4DEF0;
}
.st i {
  position: absolute; left: 0; top: 0;
  overflow: hidden; white-space: nowrap;
  font-style: normal;
  color: #F5A80C;
}
.cur-rate small { font-size: 11px; font-weight: 600; color: var(--ink-40); }
.cur-foot b { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.25; }
.cur-foot small { display: block; font-size: 11px; color: var(--ink-55); }

/* Cierre: la misión */
.rb-foot {
  text-align: center;
  margin-top: clamp(64px, 9vh, 100px);
}
.rb-mision {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6; color: var(--ink-55);
  max-width: 600px; margin: 0 auto 30px;
  text-wrap: balance;
}
.rb-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(100deg, var(--purple) 5%, var(--aqua) 50%, var(--sky) 95%);
  box-shadow: 0 14px 30px -12px rgba(124, 58, 237, .45);
  transition: transform .25s var(--ease), box-shadow .3s;
}
.rb-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(124, 58, 237, .55);
}
.rb-cta:active { transform: translateY(0) scale(.98); }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .recibes { padding-left: 20px; padding-right: 20px; }
  .eco { grid-template-columns: 1fr; gap: 48px; }
  .eco-claims { order: 2; }
  .eco-radar { order: 1; width: min(400px, 92vw); }
  .en-lab { font-size: 10px; }
  .en-chip { font-size: 10px; left: auto; right: -10%; }
  .rb-mision br { display: none; }
}
@media (max-width: 640px) {
  .cat-grid {
    display: flex; gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 18px;
    margin: 0 -20px; padding-left: 20px; padding-right: 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .cur { min-width: 280px; scroll-snap-align: center; }
}

/* ---------- 8a-quinquies. Proyectos: la vitrina (dark) ---------- */
.vitrina {
  position: relative;
  padding: clamp(88px, 12vh, 136px) 0 clamp(72px, 10vh, 108px);
  background: radial-gradient(110% 130% at 50% 0%, #241B30 0%, #181222 48%, #130E1C 100%);
  overflow: clip;
  isolation: isolate;
}
/* respiración de color + trama de puntos, muy sutil */
.vitrina::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 46% at 14% 80%, rgba(124, 58, 237, .12), transparent 70%),
    radial-gradient(36% 42% at 88% 24%, rgba(45, 212, 191, .07), transparent 70%);
}
.vitrina::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 25%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 25%, transparent 100%);
}

.vt-head {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto clamp(36px, 5vh, 54px);
  padding: 0 32px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.vitrina .tag { color: #F4F1F8; }
.vt-title {
  font-family: var(--disp);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.025em;
  color: #F4F1F8;
  text-wrap: balance;
}
.vt-lead {
  margin-top: 14px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6; color: rgba(244, 241, 248, .58);
  max-width: 560px;
}

.vt-nav { display: flex; gap: 10px; flex-shrink: 0; }
.vt-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(244, 241, 248, .8);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .25s, border-color .25s, color .2s, scale .25s var(--ease);
}
.vt-arrow:hover {
  background: rgba(124, 58, 237, .25);
  border-color: rgba(167, 139, 250, .5);
  color: #fff; scale: 1.06;
}

/* Carrusel */
.vt-track {
  position: relative; z-index: 1;
  display: flex; gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px max(32px, calc(50vw - 590px)) 26px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}
.vt-track::-webkit-scrollbar { display: none; }

.vt-card:hover { translate: 0 -6px; }

.vt-card {
  flex-shrink: 0;
  width: min(400px, 84vw);
  scroll-snap-align: center;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: 18px 18px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: translate .4s var(--ease), border-color .3s, box-shadow .4s;
}
.vt-card:hover {
  border-color: rgba(167, 139, 250, .38);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 40px -18px rgba(124, 58, 237, .5);
}
.vt-card { cursor: pointer; }
.vt-card:focus-visible { outline: 2.5px solid var(--purple-soft); outline-offset: 3px; }

.vt-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 13px;
}
.vt-sede {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: rgba(244, 241, 248, .55);
}
.vt-sede svg { color: rgba(244, 241, 248, .4); flex-shrink: 0; }
.vt-etapa {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--aqua-soft);
  border: 1px solid rgba(94, 234, 212, .28);
  padding: 3px 11px; border-radius: 999px;
  white-space: nowrap;
}

/* insignias oficiales del equipo */
.vt-badges {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.bd {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--bc, var(--purple-soft));
  background: color-mix(in srgb, var(--bc, var(--purple-soft)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc, var(--purple-soft)) 42%, transparent);
  transition: scale .25s var(--ease), box-shadow .3s;
}
.bd:hover {
  scale: 1.15;
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--bc) 55%, transparent);
  z-index: 3;
}
.bd::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #0E0A16; color: rgba(244, 241, 248, .9);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  padding: 5px 10px; border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease);
}
.bd:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.vt-more-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 13px;
  font-size: 12.5px; font-weight: 700;
  color: rgba(244, 241, 248, .55);
  transition: color .25s, gap .25s var(--ease);
}
.vt-card:hover .vt-more-link { color: #fff; gap: 10px; }

.vt-photo {
  position: relative;
  border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 10;
}
.vt-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.vt-card:hover .vt-photo img { transform: scale(1.045); }
.vt-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19, 14, 28, .16), transparent 35%, rgba(19, 14, 28, .38) 100%);
  pointer-events: none;
}

/* pulso de actividad en vivo */
.vt-live {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(19, 14, 28, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 6px 12px;
  font-size: 11px; font-weight: 600; color: rgba(244, 241, 248, .88);
}
.vt-live i {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80; flex-shrink: 0;
}
.vt-live i::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(74, 222, 128, .55);
  animation: vtPulse 2.2s ease-out infinite;
}
@keyframes vtPulse {
  0% { transform: scale(.55); opacity: .95; }
  100% { transform: scale(1.9); opacity: 0; }
}

.vt-body { padding-top: 15px; }
.vt-name { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.vt-name h3 {
  font-family: var(--disp);
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: #F4F1F8;
}
.vt-name small { font-size: 12.5px; color: rgba(244, 241, 248, .48); }

.vt-quote {
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(244, 241, 248, .6);
}
.vt-quote b {
  display: block; margin-top: 5px;
  font-family: var(--sans); font-style: normal;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: rgba(244, 241, 248, .4);
}

.vt-foot {
  position: relative; z-index: 1;
  margin-top: clamp(30px, 4vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 0 32px; text-align: center;
}
.vt-next {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2vw, 26px);
  color: rgba(244, 241, 248, .85);
}
.vt-next em {
  font-style: italic;
  background: linear-gradient(100deg, var(--purple-soft) 10%, var(--aqua-soft) 55%, var(--sky-soft) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Modal: conocer más del proyecto */
html.modal-open { overflow: hidden; }

.vtm {
  width: min(880px, 94vw); max-height: 88vh;
  margin: auto; padding: 0;
  background: linear-gradient(180deg, #221A2E, #17111F);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  color: #F4F1F8;
  overflow: auto;
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .9);
}
.vtm::backdrop {
  background: rgba(10, 7, 14, .74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.vtm[open] { animation: vtmIn .45s var(--ease); }
@keyframes vtmIn {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.vtm-x {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(244, 241, 248, .85);
  background: rgba(14, 10, 22, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s, scale .25s var(--ease);
}
.vtm-x:hover { background: rgba(227, 5, 19, .55); scale: 1.07; }

.vtm-hero { position: relative; height: min(300px, 34vh); }
.vtm-hero img { width: 100%; height: 100%; object-fit: cover; }
.vtm-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23, 17, 31, .1) 30%, rgba(23, 17, 31, .92) 100%);
  pointer-events: none;
}
.vtm-hero-txt {
  position: absolute; left: 28px; right: 28px; bottom: 18px; z-index: 1;
}
.vtm-hero-txt h3 {
  font-family: var(--disp);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800; letter-spacing: -.02em;
}
.vtm-hero-txt p { font-size: 14.5px; color: rgba(244, 241, 248, .65); }

.vtm-chips {
  display: flex; flex-wrap: wrap; gap: 9px;
  padding: 18px 28px 0;
}
.vtm-chips span {
  font-size: 12px; font-weight: 600;
  color: rgba(244, 241, 248, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  padding: 5px 13px; border-radius: 999px;
}
.vtm-chips .vtm-etapa {
  color: var(--aqua-soft);
  border-color: rgba(94, 234, 212, .3);
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px;
}

.vtm-grid {
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: 34px;
  padding: 22px 28px 30px;
}
.vtm-grid h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(244, 241, 248, .42);
  margin-bottom: 8px;
}
.vtm-grid section + section { margin-top: 22px; }
.vtm-left p {
  font-size: 14.5px; line-height: 1.7;
  color: rgba(244, 241, 248, .78);
}

.vtm-equipo ul { display: flex; flex-direction: column; gap: 12px; }
.vtm-equipo li { display: flex; align-items: center; gap: 11px; }
.vtm-ava {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--sky));
}
.vtm-equipo b { display: block; font-size: 13.5px; }
.vtm-equipo small { display: block; font-size: 11.5px; color: rgba(244, 241, 248, .5); }

.vtm-badges { display: flex; flex-direction: column; gap: 9px; }
.vtm-badge {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
}
.vtm-badge .bd { width: 30px; height: 30px; }
.vtm-badge .bd::after { display: none; }
.vtm-badge b { display: block; font-size: 12.5px; color: rgba(244, 241, 248, .9); }
.vtm-badge small { display: block; font-size: 11px; color: rgba(244, 241, 248, .48); }

.vtm-cta { margin-top: 26px; text-align: center; font-size: 13.5px; }

@media (max-width: 720px) {
  .vtm-grid { grid-template-columns: 1fr; gap: 26px; }
  .vtm-hero { height: 200px; }
  .vtm-hero-txt, .vtm-chips, .vtm-grid { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 900px) {
  .vt-head { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 20px; }
  .vt-nav { display: none; }
  .vt-track { padding: 8px 20px 22px; gap: 16px; }
  .vt-card { width: min(340px, 86vw); }
}

/* ---------- 8a-sexies. Mentores: la red ---------- */
.mentores {
  position: relative;
  padding: clamp(88px, 12vh, 136px) 32px clamp(72px, 10vh, 104px);
  overflow: clip;
}
/* fondo: iluminaciones suaves + ondas concéntricas emanando de la red */
.mentores::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36% 42% at 10% 26%, rgba(124, 58, 237, .1), transparent 70%),
    radial-gradient(32% 38% at 90% 74%, rgba(45, 212, 191, .09), transparent 70%),
    radial-gradient(26% 30% at 72% 12%, rgba(56, 189, 248, .07), transparent 70%),
    repeating-radial-gradient(circle at 50% 62%, transparent 0 84px, rgba(76, 29, 149, .05) 84px 85.5px);
  -webkit-mask-image: radial-gradient(80% 75% at 50% 55%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 75% at 50% 55%, #000 30%, transparent 100%);
}

/* Heading editorial: overline con regla + título y bajada en dos columnas */
.mt-head { max-width: 1140px; margin: 0 auto clamp(44px, 6vh, 64px); }
.mt-head-top {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: clamp(22px, 3.5vh, 34px);
}
.mt-head-top span {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.mt-rule {
  flex: 1; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--aqua) 50%, transparent);
}
.mt-head-top em {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink-55);
}
.mt-head-main {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
.mt-title {
  font-family: var(--disp);
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.028em;
  text-wrap: balance;
}
.mt-lead {
  font-size: 15px;
  line-height: 1.55; color: var(--ink-70);
  padding-bottom: 6px;
}

/* La red */
.mt-orbit {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  height: clamp(480px, 62vh, 640px);
}
.mt-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mt-line {
  stroke-width: .5; opacity: .3;
  vector-effect: non-scaling-stroke;
}

.mt-core {
  position: absolute; left: var(--nx); top: var(--ny);
  transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1B1426;
  box-shadow: 0 18px 40px -14px rgba(27, 20, 38, .55);
  z-index: 2;
}
.mt-core span {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(244, 241, 248, .8);
  text-align: center; line-height: 1.3; padding: 0 10px;
}
.mt-core::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px solid rgba(124, 58, 237, .32);
  animation: mtCorePulse 3.2s ease-out infinite;
}
@keyframes mtCorePulse {
  0% { transform: scale(.8); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Nodos */
.mt-node {
  position: absolute; left: var(--nx); top: var(--ny);
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  animation: mtFloat 7s ease-in-out infinite;
  animation-delay: var(--nd, 0s);
  cursor: default;
}
.mt-node:hover, .mt-node:focus { z-index: 5; }
@keyframes mtFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.mt-node:focus-visible { outline: 2px solid var(--purple-soft); outline-offset: 4px; border-radius: 16px; }

.mt-photo {
  position: relative;
  border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--purple-soft), var(--aqua-soft));
  box-shadow: 0 14px 30px -14px rgba(76, 29, 149, .4);
  transition: scale .35s var(--ease), box-shadow .4s;
}
.mt-node.s .mt-photo { width: 60px; height: 60px; }
.mt-node.m .mt-photo { width: 74px; height: 74px; }
.mt-node.l .mt-photo { width: 90px; height: 90px; }
.mt-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 2.5px solid #fff;
  filter: grayscale(1) contrast(1.02);
  transition: filter .5s ease;
}
.mt-node:hover .mt-photo,
.mt-node:focus .mt-photo { scale: 1.09; box-shadow: 0 20px 42px -14px rgba(76, 29, 149, .52); }
.mt-node:hover .mt-photo img,
.mt-node:focus .mt-photo img { filter: grayscale(0); }

/* insignia de especialidad sobre la foto */
.mt-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: var(--bc, var(--purple));
  border: 2px solid #FCFBFF;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--bc, var(--purple)) 60%, transparent);
}

/* nombre siempre visible */
.mt-tag {
  font-size: 11px; font-weight: 700; color: var(--ink-70);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(27, 20, 38, .07);
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(27, 20, 38, .3);
}

/* tarjeta de detalle al hover/focus */
.mt-info {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  width: 224px; text-align: center;
  background: #fff;
  border: 1px solid #ECE8F5; border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 20px 44px -18px rgba(76, 29, 149, .35);
  opacity: 0; translate: 0 4px;
  transition: opacity .3s, translate .3s var(--ease);
  pointer-events: none; z-index: 6;
}
.mt-node:hover .mt-info,
.mt-node:focus .mt-info { opacity: 1; translate: 0 0; }
.mt-node.up .mt-info { top: auto; bottom: calc(100% + 6px); }
.mt-node.flip .mt-info { left: auto; right: -6px; transform: none; }
.mt-info h3 {
  font-family: var(--disp);
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  margin-bottom: 3px;
}
.mt-spec {
  display: inline-block;
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--purple);
  margin-bottom: 6px;
}
.mt-role { font-size: 12px; line-height: 1.45; color: var(--ink-70); }

/* Lista simple para móvil */
.mt-list { display: none; }

@media (max-width: 760px) {
  .mt-head-main { grid-template-columns: 1fr; gap: 14px; }
  .mt-orbit { display: none; }
  .mt-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    max-width: 460px; margin: 0 auto;
  }
  .mt-list li {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    text-align: center;
    padding: 16px 10px 14px;
    background: #fff; border: 1px solid #ECE8F5; border-radius: 16px;
    box-shadow: 0 16px 34px -24px rgba(76, 29, 149, .25);
  }
  .mt-list img {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  }
  .mt-list b { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.2; }
  .mt-list span { display: block; font-size: 11px; color: var(--ink-55); font-style: italic; font-family: var(--serif); margin-top: 2px; }
}

/* ---------- 8a-septies. CTA final: el cierre (dark) ---------- */
.cta-final {
  position: relative;
  padding: clamp(120px, 16vh, 180px) 32px;
  background: radial-gradient(120% 140% at 50% 12%, #241B30 0%, #170F22 55%, #0F0A17 100%);
  overflow: clip;
  isolation: isolate;
  text-align: center;
}
/* iluminación focal desde la esquina superior izquierda + respiro cálido opuesto */
.cta-final::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 62% at 6% 2%, rgba(124, 58, 237, .30), transparent 62%),
    radial-gradient(30% 36% at 90% 88%, rgba(45, 212, 191, .10), transparent 70%);
}
/* trama de cuadros muy suave, concentrada al centro */
.cta-final::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(48% 55% at 50% 42%, #000 20%, transparent 100%);
  mask-image: radial-gradient(48% 55% at 50% 42%, #000 20%, transparent 100%);
}

.cta-final .cf2-tag { color: #F4F1F8; justify-content: center; }

/* iconos sueltos: tiempo, idea, crecimiento — sin caja, solo trazo */
.cf2-ico {
  position: absolute; z-index: 1;
  color: var(--ic, var(--purple-soft));
  opacity: .5;
  animation: cf2Float var(--fd, 7s) ease-in-out infinite alternate;
  animation-delay: var(--fdd, 0s);
}
@keyframes cf2Float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
@media (max-width: 900px) {
  .cf2-ico { display: none; }
}

.cf2-in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

.cf2-title {
  font-family: var(--disp);
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
  color: #F8F6FB;
  text-wrap: balance;
}
.cf2-lead {
  margin: 18px auto clamp(44px, 6vh, 60px);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65; color: rgba(244, 241, 248, .6);
  max-width: 480px;
}

/* Botón: variante exclusiva del cierre — más grande, protagonista */
.cf2-btn {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--red); color: #fff;
  padding: 24px 52px; border-radius: 20px;
  box-shadow: 0 24px 60px -18px rgba(227, 5, 19, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .3s var(--ease), box-shadow .35s, background .2s;
}
.cf2-btn-line {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -.01em;
}
.cf2-btn-line svg { transition: transform .25s var(--ease); }
.cf2-btn-sub {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: rgba(255, 255, 255, .75);
}
.cf2-btn:hover {
  background: var(--red-dark); transform: translateY(-3px);
  box-shadow: 0 30px 70px -18px rgba(227, 5, 19, .65), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.cf2-btn:hover .cf2-btn-line svg { transform: translateX(4px); }
.cf2-btn:active { transform: translateY(-1px) scale(.98); }

.cf2-halo {
  position: absolute; z-index: 0;
  left: 50%; top: 50%; width: 340px; height: 340px;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(227, 5, 19, .45), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
  animation: cf2Pulse 5s ease-in-out infinite;
}
@keyframes cf2Pulse {
  0%, 100% { opacity: .55; scale: 1; }
  50%      { opacity: .9; scale: 1.12; }
}

@media (max-width: 640px) {
  .cf2-btn { padding: 20px 36px; }
  .cf2-btn-line { font-size: 17px; }
}

/* ---------- 8a-octies. FAQ ---------- */
.faq {
  position: relative;
  padding: clamp(88px, 11vh, 128px) 32px clamp(80px, 10vh, 112px);
  overflow: clip;
}

.faq-head {
  text-align: center;
  max-width: 620px; margin: 0 auto clamp(44px, 6vh, 64px);
}
.faq-title {
  font-family: var(--disp);
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 800; line-height: 1.08; letter-spacing: -.025em;
}
.faq-lead {
  margin-top: 14px;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.6; color: var(--ink-70);
}

.faq-list {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}

.faq-item {
  background: var(--card);
  border: 1px solid #ECE8F5;
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.faq-item:hover { border-color: rgba(124, 58, 237, .22); }
.faq-item[open] {
  border-color: rgba(124, 58, 237, .3);
  box-shadow: 0 20px 44px -26px rgba(76, 29, 149, .25);
}

.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 19px 24px;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-q {
  font-family: var(--disp);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.faq-item[open] .faq-q { color: var(--purple); }

.faq-plus {
  position: relative; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid #E2DCF0;
  transition: transform .4s var(--ease), background .3s, border-color .3s;
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--ink-55);
  transition: background .3s;
}
.faq-plus::before { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-plus::after { width: 1.6px; height: 11px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-plus {
  transform: rotate(135deg);
  background: linear-gradient(135deg, var(--purple), var(--sky));
  border-color: transparent;
}
.faq-item[open] .faq-plus::before,
.faq-item[open] .faq-plus::after { background: #fff; }

.faq-a {
  padding: 0 24px 22px;
  animation: faqIn .35s var(--ease);
}
@keyframes faqIn {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}
.faq-a p {
  font-size: 14.5px; line-height: 1.65; color: var(--ink-70);
  max-width: 560px;
}

@media (max-width: 560px) {
  .faq-item summary { padding: 16px 18px; gap: 14px; }
  .faq-q { font-size: 14.5px; }
  .faq-a { padding: 0 18px 18px; }
}

/* ---------- 8a-novies. Footer ---------- */
.foot {
  position: relative;
  padding: clamp(64px, 8vh, 88px) 32px clamp(28px, 4vh, 36px);
  background: linear-gradient(180deg, #1B1426, #0E0A16 65%, #0A0710);
  color: rgba(244, 241, 248, .78);
  overflow: clip;
}
.foot-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 60% at 12% 0%, rgba(124, 58, 237, .13), transparent 70%),
    radial-gradient(30% 50% at 88% 100%, rgba(45, 212, 191, .09), transparent 70%);
}

.foot-top {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr .8fr .8fr .8fr;
  gap: clamp(32px, 5vw, 64px);
}

.foot-brand { max-width: 300px; }
.foot-logo {
  height: 26px !important; width: auto !important;
  max-width: none !important; max-height: 26px !important;
  display: block; margin-bottom: 14px;
}
.foot-tag {
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(244, 241, 248, .48);
}

.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(244, 241, 248, .38);
  margin-bottom: 2px;
}
.foot-col a {
  font-size: 14px; color: rgba(244, 241, 248, .68);
  transition: color .2s;
  width: fit-content;
}
.foot-col a:hover { color: #fff; }
.foot-staff { color: var(--aqua-soft) !important; }

.foot-social { display: flex; gap: 10px; margin-top: 4px; }
.foot-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(244, 241, 248, .68);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .25s, border-color .25s, color .2s, translate .25s var(--ease);
}
.foot-social a:hover {
  background: rgba(124, 58, 237, .25);
  border-color: rgba(167, 139, 250, .45);
  color: #fff; translate: 0 -2px;
}

.foot-line {
  position: relative; z-index: 1;
  max-width: 1200px; margin: clamp(40px, 6vh, 56px) auto 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 20%, rgba(255, 255, 255, .14) 80%, transparent);
}

.foot-bottom {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(244, 241, 248, .4);
}
.foot-legal { display: flex; gap: 20px; }
.foot-legal a { color: rgba(244, 241, 248, .4); transition: color .2s; }
.foot-legal a:hover { color: rgba(244, 241, 248, .8); }

@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- 8b. Página de registro — paso 1 de 3 (dark: es un paso nuevo) ----------
   Nota: el fondo/color dark vive en cada sección (.rg-hero / .rg-form / .rg-live),
   NO en <body>, porque en Elementor el widget HTML no controla el <body> real. */
body.dark-page { background: #130E1C; color: #F4F1F8; }

.rg-hero, .rg-form, .rg-live {
  background: #130E1C; color: #F4F1F8;
}
.rg-hero .tag, .rg-form .tag, .rg-live .tag { color: #F4F1F8; }
.rg-hero .assure li { color: rgba(244, 241, 248, .68); }
.rg-hero .lead { color: rgba(244, 241, 248, .62); }

/* marca mínima flotante: vive solo dentro del hero, NO sticky —
   se va con el scroll en vez de quedar pegada arriba */
.rg-mark {
  position: absolute; top: 30px; left: 26px; z-index: 60;
  display: inline-flex; align-items: center;
  line-height: 0;
}
.rg-mark img { display: block; height: 22px; width: auto; }

/* "volver al home": el único link de salida, minimalista, sin caja */
.rg-back {
  position: absolute; top: 30px; right: 26px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500;
  color: rgba(244, 241, 248, .5);
  transition: color .2s ease;
}
.rg-back svg { transition: transform .2s ease; }
.rg-back:hover { color: #F4F1F8; }
.rg-back:hover svg { transform: translateX(-3px); }

/* --- Hero: "¡Felicidades!" + barra de progreso tipo upsell --- */
.rg-hero {
  position: relative;
  padding: clamp(96px, 13vh, 132px) 32px clamp(56px, 8vh, 88px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  isolation: isolate;
  overflow: clip;
}
.rg-hero .aurora { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.rg-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000 15%, transparent 100%);
  mask-image: radial-gradient(60% 55% at 50% 30%, #000 15%, transparent 100%);
}

.rg-title {
  font-family: var(--disp);
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.025em;
  color: #F8F6FB;
  margin-bottom: 18px;
  text-wrap: balance;
}
.rg-shout { display: block; }
.rg-lead { margin-bottom: 28px; max-width: 620px; }
.rg-hero .assure { margin-top: 0; }

/* indicador hacia el form: 3 flechas flotando en cascada, sin interacción */
.rg-cue {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 28px;
  margin-top: 46px;
  pointer-events: none;
}
.rg-cue-col {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.rg-cue-ico {
  color: rgba(244, 241, 248, .3);
  opacity: 0;
  animation: rgCueFlow 2s ease-in-out infinite;
  animation-delay: var(--cd, 0s);
}
.rg-cue-gold {
  color: #F0CE8A;
  filter: drop-shadow(0 0 7px rgba(240, 206, 138, .55));
}
@keyframes rgCueFlow {
  0%   { opacity: 0; translate: 0 -6px; }
  30%  { opacity: 1; translate: 0 0; }
  65%  { opacity: .35; translate: 0 5px; }
  100% { opacity: 0; translate: 0 9px; }
}

/* La barra: un solo camino, recién comenzando — como un progreso de checkout */
.rg-steps { width: min(480px, 100%); margin: 0 0 40px; }
.rc-steps { width: min(880px, 100%); margin-bottom: clamp(52px, 7vh, 76px); }
.rgs-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}
.rgs-pill {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(100deg, var(--purple), var(--sky));
}
.rgs-pct { font-size: 11.5px; font-weight: 600; color: rgba(244, 241, 248, .4); }

.rgs-track {
  position: relative; height: 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.rgs-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 8%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--sky));
}
.rgs-tip {
  position: absolute; right: -2px; top: 50%; translate: 0 -50%;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .3), 0 0 18px rgba(14, 165, 233, .65);
  animation: rgsPulse 1.8s ease-in-out infinite;
}
@keyframes rgsPulse { 0%, 100% { scale: 1; } 50% { scale: 1.3; } }

.rgs-labels { display: flex; justify-content: space-between; margin-top: 11px; }
.rgs-lab {
  font-size: 12px; font-weight: 700; letter-spacing: -.005em;
  color: rgba(244, 241, 248, .32);
}
.rgs-lab.is-now { color: #F4F1F8; }

/* --- Form (placeholder: aquí va el formulario real) --- */
.rg-form { position: relative; padding: clamp(64px, 9vh, 96px) 32px; }
.rgf-head { text-align: center; margin-bottom: 32px; }
.rgf-title {
  font-family: var(--disp);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800; letter-spacing: -.025em;
  color: #F8F6FB;
}
.rgf-slot {
  max-width: 720px; margin: 0 auto;
  min-height: 380px;
  display: grid; place-items: center;
  border: 2px dashed rgba(167, 139, 250, .3);
  border-radius: 24px;
  background: rgba(124, 58, 237, .05);
}
.rgf-slot p { font-family: var(--serif); font-style: italic; font-size: 17px; color: rgba(244, 241, 248, .38); }

/* --- El laboratorio, en vivo (FOMO) --- */
.rg-live {
  position: relative;
  padding: clamp(80px, 11vh, 120px) 32px clamp(88px, 12vh, 128px);
  border-top: 1px solid rgba(255, 255, 255, .07);
  overflow: clip; isolation: isolate;
}
.rgl-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 14% 12%, rgba(124, 58, 237, .16), transparent 70%),
    radial-gradient(32% 40% at 88% 82%, rgba(45, 212, 191, .1), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px);
  background-size: auto, auto, 26px 26px;
}
.rgl-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.rgl-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #F4F1F8;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4);
  margin-bottom: 16px;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #10B981;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .4); }
  50%      { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}
.rgl-title {
  font-family: var(--disp);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.025em;
  color: #F8F6FB;
  text-wrap: balance;
}
.rgl-lead {
  margin-top: 12px;
  font-size: 14.5px; line-height: 1.55; color: rgba(244, 241, 248, .55);
}

.rgl-panel {
  max-width: 940px; margin: 0 auto 48px;
  display: grid; grid-template-columns: minmax(200px, .8fr) minmax(340px, 1.4fr);
  gap: 22px; align-items: stretch;
}

/* estadística: el pulso del día, con datos que el sistema ya sabe */
.rgl-stat {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 26px 24px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rgl-num b {
  display: block;
  font-family: var(--disp); font-weight: 800; font-size: clamp(38px, 4.2vw, 50px);
  line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--purple-soft) 5%, var(--aqua-soft) 55%, var(--sky-soft) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rgl-num span {
  display: block; margin-top: 4px;
  font-size: 12.5px; font-weight: 600; color: rgba(244, 241, 248, .5);
}

.rgl-div { height: 1px; background: rgba(255, 255, 255, .08); margin: 20px 0; }

.rgl-block-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244, 241, 248, .4);
  margin-bottom: 12px;
}

/* distribución por etapa: barra segmentada + leyenda */
.rgl-bar {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
  margin-bottom: 12px;
}
.rgl-bar i { width: var(--w, 33%); background: var(--bc); }
.rgl-legend { display: flex; flex-direction: column; gap: 7px; }
.rgl-legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(244, 241, 248, .68);
}
.rgl-legend li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--bc);
}
.rgl-legend li b { margin-left: auto; color: #fff; font-weight: 700; }

/* sedes con registros hoy */
.rgl-sedes { display: flex; flex-wrap: wrap; gap: 8px; }
.rgl-sedes span {
  font-size: 11.5px; font-weight: 600; color: rgba(244, 241, 248, .75);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* consola: el feed en vivo */
.rgl-console {
  background: rgba(10, 7, 16, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.rgc-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rgc-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.rgc-bar span {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(244, 241, 248, .35);
}
.rgc-body {
  display: flex; flex-direction: column;
  padding: 8px;
  min-height: 302px;
}

.fe {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 12px;
  border-radius: 13px;
  text-align: left;
}
.fe + .fe { border-top: 1px solid rgba(255, 255, 255, .06); }
.fe.fe-in { animation: feIn .55s var(--ease); }
@keyframes feIn {
  from { opacity: 0; translate: 0 -8px; background-color: rgba(124, 58, 237, .12); }
  to   { background-color: transparent; }
}
.fe-ava {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--disp); font-weight: 800; font-size: 11.5px;
  color: var(--fc, var(--purple-soft));
  background: color-mix(in srgb, var(--fc, var(--purple)) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc, var(--purple)) 40%, transparent);
}
.fe-body { min-width: 0; flex: 1; }
.fe-body p { font-size: 13.5px; line-height: 1.4; color: rgba(244, 241, 248, .82); }
.fe-body p b { color: #fff; }
.fe-body p em { font-style: normal; font-weight: 700; color: #fff; }
.fe-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.fe-stage {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2.5px 8px; border-radius: 999px;
  color: var(--fc, var(--purple-soft));
  background: color-mix(in srgb, var(--fc, var(--purple)) 16%, transparent);
}
.fe-sede, .fe-time { font-size: 10.5px; color: rgba(244, 241, 248, .35); }
.fe-sede::before { content: "· "; }
.fe-time::before { content: "· "; }

.rgl-next {
  text-align: center;
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -.02em; line-height: 1.15;
  color: #F8F6FB;
}
/* el destacador se pinta recién cuando la sección entra en pantalla */
.hl-live::before { animation: none; transition: transform .8s var(--ease) .35s; }
.srv.on .hl-live::before,
html:not(.js) .hl-live::before {
  transform: skewX(-7deg) rotate(-.6deg) scaleX(1);
}

@media (max-width: 900px) {
  .rgl-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rg-hero, .rg-form, .rg-live { padding-left: 20px; padding-right: 20px; }
  .rg-mark { top: 18px; left: 18px; }
  .rg-back { top: 18px; right: 18px; font-size: 0; gap: 0; }
  .rg-back svg { width: 16px; height: 16px; }
  .rgs-lab { font-size: 10.5px; }
  .rgf-slot { min-height: 280px; }
}

/* ---------- 8c. Trazos decorativos (deriva lenta, sin protagonismo) ---------- */
.deco {
  position: absolute; pointer-events: none;
  animation: decoDrift var(--dd, 26s) ease-in-out infinite alternate;
}
@keyframes decoDrift {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(16px) rotate(2.2deg); }
}

/* ---------- 9. Reveals ---------- */
.rv {
  animation: rise .9s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 130ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Reveal on-scroll (solo con JS activo: sin JS todo queda visible) */
.js .srv {
  opacity: 0; translate: 0 24px;
  transition: opacity .75s var(--ease), translate .75s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js .srv.on { opacity: 1; translate: 0 0; }

/* ---------- 9b. TutorLMS — Página de curso (single course) ---------- */
.crs-wrap {
  max-width: 1240px; margin: 0 auto;
  padding: 48px 32px 100px;
  display: grid; grid-template-columns: 1fr 360px; gap: 56px;
  align-items: start;
  font-family: var(--sans); color: var(--ink);
  background: var(--bg);
}

.crs-main { min-width: 0; }

.crs-head { margin-bottom: 22px; }
.crs-cat {
  font-size: 13px; font-weight: 500; color: var(--ink-55);
  margin-bottom: 8px;
}
.crs-cat b { color: var(--ink); font-weight: 600; }
.crs-title {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12;
  letter-spacing: -.02em; margin-bottom: 12px;
}
.crs-actions {
  display: flex; gap: 18px; align-items: center;
  font-size: 13.5px; font-weight: 500; color: var(--ink-55);
}
.crs-actions button {
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s;
}
.crs-actions button:hover { color: var(--purple); }

.crs-cover {
  margin: 24px 0 32px; border-radius: 20px; overflow: hidden;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, var(--purple-soft), var(--aqua-soft) 55%, var(--sky-soft));
  box-shadow: 0 24px 55px -28px rgba(76, 29, 149, .3);
}
.crs-cover img { width: 100%; height: 100%; object-fit: cover; }

.crs-section { margin-bottom: 40px; }
.crs-section h3 {
  font-family: var(--disp); font-weight: 700; font-size: 19px;
  margin-bottom: 14px; letter-spacing: -.01em;
}
.crs-about p { color: var(--ink-70); line-height: 1.7; max-width: 62ch; }

.crs-benefits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px;
}
.crs-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: var(--ink-70); line-height: 1.5; padding: 3px 0;
}
.crs-benefits li::before {
  content: ""; flex-shrink: 0; margin-top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--aqua));
}

/* Currículum: acordeón nativo, mismo lenguaje visual que el FAQ del home */
.crs-content { border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.crs-topic { border-bottom: 1px solid var(--line); background: var(--card); }
.crs-topic:last-child { border-bottom: 0; }
.crs-topic > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  font-family: var(--disp); font-weight: 700; font-size: 15.5px; color: var(--purple);
  background: rgba(124, 58, 237, .05);
  transition: background .2s;
}
.crs-topic > summary::-webkit-details-marker { display: none; }
.crs-topic > summary:hover { background: rgba(124, 58, 237, .09); }
.crs-topic > summary::after {
  content: ""; width: 10px; height: 10px; flex-shrink: 0;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.crs-topic[open] > summary::after { transform: rotate(-135deg); }

.crs-lesson {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px 13px 44px;
  font-size: 14.5px; color: var(--ink-70);
  border-top: 1px solid var(--line);
}
.crs-lesson svg { flex-shrink: 0; color: var(--ink-40); }
.crs-lesson .crs-lock { margin-left: auto; color: var(--ink-40); }

/* Sidebar sticky */
.crs-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; }
.crs-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 22px 24px;
}
.crs-price-card .crs-price {
  font-family: var(--disp); font-weight: 800; font-size: 26px; margin-bottom: 16px;
}
.crs-enroll {
  display: block; width: 100%; text-align: center;
  background: var(--red); color: #fff;
  font-size: 15px; font-weight: 600;
  padding: 13px 20px; border-radius: 13px;
  box-shadow: 0 10px 24px -10px rgba(227, 5, 19, .5);
  transition: background .2s, transform .25s var(--ease), box-shadow .3s;
  margin-bottom: 10px;
}
.crs-enroll:hover {
  background: var(--red-dark); transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(227, 5, 19, .58);
}
.crs-enroll-note { font-size: 12.5px; color: var(--ink-55); text-align: center; }

.crs-level {
  display: flex; align-items: center; gap: 10px;
  padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500; color: var(--ink-70);
}
.crs-level svg { color: var(--aqua); flex-shrink: 0; }

.crs-instructor-label { font-size: 12.5px; font-weight: 600; color: var(--ink-55); margin-bottom: 12px; }
.crs-instructor { display: flex; align-items: center; gap: 12px; }
.crs-instructor img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--card); box-shadow: 0 0 0 2px var(--purple-soft);
}
.crs-instructor span { font-weight: 600; font-size: 14.5px; }

.crs-list-title { font-size: 15px; font-weight: 700; font-family: var(--disp); margin-bottom: 12px; }
.crs-list { display: flex; flex-direction: column; gap: 9px; }
.crs-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--ink-70); line-height: 1.5;
}
.crs-list li svg { flex-shrink: 0; margin-top: 2px; color: #0D9488; }

.crs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.crs-tag {
  font-size: 12.5px; font-weight: 500; color: var(--ink-70);
  padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--line);
  background: rgba(124, 58, 237, .05);
}

.crs-rating {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-55);
}
.crs-rating svg, .crs-rating i {
  color: var(--purple-soft) !important; fill: var(--purple-soft) !important;
}
.crs-rating .tutor-icon-star-full,
.crs-rating .tutor-icon-star-filled { color: var(--purple) !important; }

/* ---------- 10. Responsive ---------- */
@media (max-width: 1180px) {
  .fcard { width: 216px; }
  .fw1 { top: 20%; } .fw2 { top: 15%; }
}

@media (max-width: 960px) {
  .head-nav { display: none; }
  .head-in { padding: 0 20px; }

  .crs-wrap { grid-template-columns: 1fr; padding: 32px 20px 72px; gap: 36px; }
  .crs-side { position: static; }
  .crs-benefits { grid-template-columns: 1fr; }

  .problema { padding: 72px 20px 88px; }
  .pr-in { grid-template-columns: 1fr; gap: 56px; }
  .pr-copy { text-align: center; }
  .pr-p, .pr-quote { margin-left: auto; margin-right: auto; }
  .pr-quote { text-align: left; }

  .pr-archivo { height: auto; max-width: 380px; margin: 0 auto; width: 100%; }
  .pr-stamp { top: -14px; left: auto; right: -6px; font-size: 20px; }
  .ar-card { position: relative; inset: auto; width: 100%; margin-bottom: 16px; }
  .ar-polaroid { width: 82%; margin: 0 auto 16px; }

  .orbit, .journey { display: none; }
  .journey-alt {
    display: block; margin-top: 48px;
    font-size: 13.5px; font-weight: 500; color: var(--ink-55); text-align: center;
  }

  .hero { padding: 48px 20px 56px; min-height: 0; }

  .mini-strip {
    display: block; width: 100vw; margin-top: 30px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .mini-track {
    display: flex; gap: 12px; width: max-content;
    padding: 6px 0 14px;
    animation: slide 28s linear infinite;
  }
  @keyframes slide { to { transform: translateX(-50%); } }
  .mini {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--card); border: 1px solid #EFEBF7;
    border-radius: 14px; padding: 11px 16px;
    font-size: 12.5px; color: var(--ink-55); white-space: nowrap;
    box-shadow: 0 10px 24px -14px rgba(76, 29, 149, .18);
  }
  .mini b { color: var(--ink); font-weight: 700; }
  .md { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .m-aqua { background: var(--aqua); } .m-sky { background: var(--sky); }
  .m-purple { background: var(--purple); } .m-red { background: var(--red); }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(38px, 11vw, 52px); }
  h1 br { display: none; }
  .lead { font-size: 16px; }

  .idea-form {
    flex-direction: column; align-items: stretch;
    padding: 16px; gap: 12px; border-radius: 20px;
  }
  .if-spark { display: none; }
  .idea-form input { padding: 2px 4px; text-align: center; }
  .btn-go { justify-content: center; padding: 16px 24px; }

  .assure { gap: 8px 18px; }
  .assure li { font-size: 12.5px; }
}

/* ---------- 11. Reduced motion (solo lo intrusivo) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob { animation: none; }
  .j-comet { animation: none; opacity: 0; }
  .j-line::after { animation: none; transform: scaleX(1); }
  .j-node i { animation: none; }
  .j-ico { animation: none; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  .ol-item.dusting { animation-duration: .01s; }
  .deco { animation: none; }
  .vt-live i::after { animation: none; opacity: 0; }
  .mt-core::before { animation: none; opacity: 0; }
  .mt-node { animation: none; }
  .mini-track { animation: none; }
  .w-idea { animation: none; }
  .cf2-halo { animation: none; }
  .cf2-ico { animation: none; }
  .live-dot { animation: none; }
  .fe.fe-in { animation: none; }
  .rgs-tip { animation: none; }
  .rg-cue-ico { animation: none; opacity: .5; translate: 0 0; }
}

/* ---------- 12. Admin bar: etiqueta en avatar (link a editar perfil) ---------- */
#wpadminbar #wp-admin-bar-my-account.menupos-left > .ab-item {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
#wpadminbar #wp-admin-bar-my-account.menupos-left > .ab-item::after {
  content: "Editar perfil";
  font-family: "Instrument Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  opacity: .75;
  white-space: nowrap;
}

/* ============================================================
   12. Registro completado (registrocompleto.html)
   Reusa el sistema oscuro de registro.html: .dark-page, .aurora,
   .rg-grid, .rg-steps, .rg-title, .assure y el footer compartido.
   ============================================================ */

.rc-hero { background: #130E1C; color: #F4F1F8; }

/* Mientras InnovaBot analiza, abajo no hay nada: el contenido entra recién
   cuando la barra llega a 100%. La clase la pone un script inline. */
body.rc-loading .rc-later { display: none; }
body.rc-revealed .rc-later {
  animation: rcEnter .85s var(--ease) both;
  animation-delay: var(--rd, 0s);
}
@keyframes rcEnter {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

/* El diagnóstico manda sobre la barra: si llega antes de los 30s, la barra
   acelera hasta "completado" en vez de saltar de golpe. Es la misma
   transición que ya trae .rc-fill, solo que con una duración corta que fija
   el JS al momento de acelerar (ver ACELERA en el script). */
body.rc-revealed .rc-fill { width: 100%; }
body.rc-revealed .rc-cp,
.rc-cp.on {
  scale: 1.28;
  background: linear-gradient(135deg, #A78BFA, #5EEAD4);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .22), 0 0 14px rgba(94, 234, 212, .7);
}
body.rc-revealed .rc-cplist li,
.rc-cplist li.on { opacity: 1; }

/* La única señal de que seguimos trabajando: el punto de la barra late. */
body.rc-esperando .rc-load { animation: rcLatido 1.5s ease-in-out infinite; }
@keyframes rcLatido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.rc-hero .tag { color: #F4F1F8; }

/* --- 1. Hero de confirmación --- */
.rc-hero {
  position: relative;
  padding: clamp(96px, 12vh, 132px) 32px clamp(96px, 13vh, 136px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  isolation: isolate; overflow: clip;
}
.rc-hero .aurora { position: absolute; inset: 0; z-index: -2; overflow: clip; }

/* Sello: el check se dibuja y una onda sale desde el centro */
.rc-seal {
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
}
.rc-seal svg { position: relative; z-index: 2; overflow: visible; }
/* Todo lo que marca "ya está listo" (sello, pill, franjas, textos) se
   dispara con body.rc-revealed, NO con un tiempo fijo: el diagnóstico ahora
   puede llegar en cualquier momento entre la pausa del hito 2 (~3.8s) y el
   techo de espera, así que la marca de "completado" tiene que esperar al
   evento real, no a un cronómetro. */
.rc-seal-ring { stroke-dasharray: 145; stroke-dashoffset: 145; }
body.rc-revealed .rc-seal-ring { animation: rcRing .85s var(--ease) forwards; }
.rc-seal-tick { stroke-dasharray: 34; stroke-dashoffset: 34; }
body.rc-revealed .rc-seal-tick { animation: rcTick .45s var(--ease) .55s forwards; }
/* mientras analiza, en el sello gira un arco: la espera tiene su indicador */
.rc-seal-spin {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .1);
  border-top-color: #7DD3FC;
  animation: hpSpin 1s linear infinite;
}
body.rc-revealed .rc-seal-spin { animation: hpOut .4s ease forwards; }
@keyframes rcRing { to { stroke-dashoffset: 0; } }
@keyframes rcTick { to { stroke-dashoffset: 0; } }
.rc-wave {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(94, 234, 212, .55);
  opacity: 0;
}
body.rc-revealed .rc-wave { animation: rcWave 2.6s var(--ease) .8s 2; }
.rc-wave-2 { animation-delay: 1.15s; }
body.rc-revealed .rc-wave-2 { animation-delay: 1.15s; }
@keyframes rcWave {
  0%   { opacity: .7; scale: 1; }
  100% { opacity: 0; scale: 2.5; }
}

/* La barra del paso 1, ahora al 100% y en verde-aguamarina */
.rc-steps { margin-bottom: 36px; }
.rc-pill {
  background: linear-gradient(100deg, var(--aqua), var(--sky));
}
body.rc-revealed .rc-pill { animation: hpOut .45s ease forwards; }
.rc-pct { color: #5EEAD4; font-weight: 700; }
.rc-fill {
  width: 2%;
  background: linear-gradient(90deg, var(--purple), var(--aqua) 60%, var(--sky));
  /* v5 (2026-08-13): un solo movimiento uniforme. El JS fija la duración
     (45s de recorrido completo, o ACELERA si el diagnóstico ya llegó) y
     mueve el ancho a 100% una sola vez — de ahí que el ritmo sea constante
     y no haya ninguna pausa intermedia. */
  transition: width 45s linear;
}

/* Hitos: círculos sobre la pista que se encienden y crecen cuando el JS les
   agrega .on, en el mismo instante en que la barra los alcanza (o, si el
   diagnóstico llegó antes, en cascada mientras la barra acelera). */
.rgs-track { overflow: visible; }
.rc-cp {
  position: absolute; z-index: 2; top: 50%; left: var(--x);
  width: 11px; height: 11px; border-radius: 50%;
  translate: -50% -50%;
  background: #221B2E;
  border: 2px solid rgba(255, 255, 255, .16);
  transition: scale .45s var(--ease), background .45s var(--ease),
              border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* Etiquetas: una por hito, alineadas con su círculo. Se iluminan junto con
   su .rc-cp — mismo mecanismo, misma clase .on agregada por JS. */
.rc-cplist {
  list-style: none; margin-top: 22px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 22px;
  text-align: center;
}
.rc-cplist li {
  opacity: .3;
  transition: opacity .5s ease;
}
.rc-cplist b {
  display: block; font-size: 12.5px; font-weight: 700; line-height: 1.25;
  color: #F4F1F8; margin-bottom: 3px;
}
.rc-cplist small {
  display: block; font-size: 10.5px; line-height: 1.45;
  color: rgba(244, 241, 248, .34);
}
/* franjas en movimiento: se ve que la tarea está corriendo */
.rc-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 5px, transparent 5px 12px);
  animation: rcStripes .7s linear infinite;
}
body.rc-revealed .rc-fill::after { animation: hpOut .5s ease forwards; }
@keyframes rcStripes { to { background-position: 24px 0; } }

/* etiqueta derecha: "Analizando…" hasta que termina */
.rc-pct { position: relative; }
.rc-done { position: absolute; right: 0; top: 0; opacity: 0; color: #5EEAD4; }
body.rc-revealed .rc-load { animation: hpOut .4s ease forwards; }
body.rc-revealed .rc-done { animation: hpRow .4s ease forwards .1s; }



/* --- InnovaBot: el personaje de la IA + sus pantallas --- */
.rc-bot-row {
  width: 100%; max-width: 1120px;
  margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  text-align: left;
}

/* El escenario: el robot y, donde apunta su mano, las pantallas */
.rc-stage {
  position: relative;
  width: 100%; max-width: 640px;
  aspect-ratio: 640 / 528;
  isolation: isolate;
  /* las pantallas se miden contra el escenario, no contra el viewport:
     así encogen enteras y nunca se corta un título */
  container-type: inline-size;
}
.rc-bot-img {
  /* nada de translate para centrar: el flote anima esa misma propiedad */
  /* el robot queda fijo y por detrás: las pantallas van delante de él */
  position: absolute; z-index: 1; left: 30%; bottom: 0;
  width: 40%; height: auto;
  filter: drop-shadow(0 26px 40px rgba(6, 4, 12, .62));
}
.rc-bot-glow {
  position: absolute; z-index: -1;
  left: 50%; top: 56%; translate: -50% -50%;
  width: 72%; aspect-ratio: 1;
  background:
    radial-gradient(closest-side, rgba(124, 58, 237, .42), transparent 70%),
    radial-gradient(closest-side, rgba(20, 184, 166, .24), transparent 62%);
  filter: blur(26px);
  animation: rcBotPulse 5.5s ease-in-out infinite;
}
@keyframes rcBotFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes rcBotPulse { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

/* Las tres pantallas holográficas, en abanico desde la mano */
/* Las manos abiertas quedan a ~62% del alto de la escena y a los costados:
   sobre cada palma va una pantalla, y la del diagnóstico al centro-arriba,
   despejando la cabeza y el logo. */
.rc-holo { position: absolute; z-index: 2; inset: 0; }
.hp { position: absolute; }
/* Posiciones tomadas de la imagen: mano izquierda levantada (x 8,6-26%,
   y 5-22% del robot) y mano derecha extendida (x 80-96%, y 35-45%). */
.hp-1 { left: 15%;   width: 25%; top: 25%;   }
.hp-2 { left: 42.5%; width: 25%; top: 2.5%;  }
.hp-3 { right: 10%;  width: 25%; top: 34%;   }
.hp {
  min-width: 0;
  padding: 1.35cqw 1.5cqw 1.7cqw;
  border-radius: 1.2cqw;
  border: 1px solid rgba(125, 211, 252, .45);
  background: linear-gradient(160deg, rgba(125, 211, 252, .17), rgba(94, 234, 212, .07));
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 16px rgba(56, 189, 248, .2), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  overflow: hidden;
  color: #E8F8FF;
  font-size: 1.5cqw; font-weight: 600; letter-spacing: .02em;
  /* cada una entra en su turno y se mantiene */
  opacity: 0;
  animation-name: hpIn, hpFloat;
  animation-duration: .5s, var(--fd, 6s);
  animation-timing-function: ease, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
  animation-delay: var(--in, .2s), var(--fdd, 0s);
}
.hp-1 { --in: .5s;  --fd: 5.6s; --fdd: .4s;  --amp: -.55cqw; --sw: 5.2s; --swd: 8.4s; }
.hp-2 { --in: 2.9s; --fd: 6.9s; --fdd: 0s;   --amp: -.75cqw; --sw: 6.4s; --swd: 9.6s; }
.hp-3 { --in: 4.9s; --fd: 6.2s; --fdd: 1.2s; --amp: -.42cqw; --sw: 5.8s; --swd: 8.9s; }

/* Pantalla 1: renglones que aparecen, como un texto siendo leído */
.hp-lines { list-style: none; display: grid; gap: .8cqw; margin-bottom: 1.4cqw; }
.hp-lines li {
  height: .55cqw; border-radius: 999px;
  background: rgba(232, 248, 255, .55);
  transform-origin: left; scale: 0 1;
  animation: hpLine .3s var(--ease) forwards;
  animation-delay: calc(.9s + var(--i) * .26s);
}
.hp-lines li:nth-child(2) { width: 82%; }
.hp-lines li:nth-child(3) { width: 94%; }
.hp-lines li:nth-child(4) { width: 71%; }
.hp-lines li:nth-child(5) { width: 88%; }
@keyframes hpLine { to { scale: 1 1; } }
@keyframes hpIn { from { opacity: 0; } to { opacity: .96; } }
/* cada pantalla flota con su propia amplitud, duración y desfase */
@keyframes hpFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 var(--amp, -1.4cqw); }
}

.hp-bar { display: flex; gap: .42cqw; margin-bottom: 1cqw; }
.hp-bar i { width: .5cqw; height: .5cqw; border-radius: 50%; background: rgba(232, 248, 255, .5); }
.hp-t {
  display: block; margin-bottom: 1cqw;
  font-size: 1.6cqw; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
  color: #BFEAFF;
}

/* Pantalla 1: el checklist que se va marcando */
.hp-list { list-style: none; display: grid; gap: .75cqw; }
.hp-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .67cqw;
  padding-bottom: .58cqw;
  border-bottom: 1px solid rgba(125, 211, 252, .22);
  opacity: .45;
  animation: hpRow .4s ease forwards;
  animation-delay: calc(3.2s + var(--i) * .4s);
}
.hp-list li:last-child { border-bottom: 0; padding-bottom: 0; }
@keyframes hpRow { to { opacity: 1; } }
.hp-list em {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(191, 234, 255, .55);
  scale: 0;
  animation: hpTick .35s var(--ease) forwards;
  animation-delay: calc(3.4s + var(--i) * .4s);
}
@keyframes hpTick {
  to { scale: 1; background: #5EEAD4; border-color: #5EEAD4; box-shadow: 0 0 7px rgba(94, 234, 212, .9); }
}
/* barrido de escaneo */
.hp-scan {
  position: absolute; left: 0; right: 0; height: 3cqw;
  background: linear-gradient(180deg, transparent, rgba(125, 211, 252, .45), transparent);
  animation: hpScan 1.9s ease-in-out .6s 2;
}
@keyframes hpScan { 0% { top: -3cqw; } 100% { top: 100%; } }

/* Pantalla 2: el medidor que llega al veredicto */
.hp-ring {
  position: absolute; right: 1.33cqw; top: 1.17cqw;
  width: 1.5cqw; height: 1.5cqw; border-radius: 50%;
  border: 1.5px solid rgba(191, 234, 255, .35);
  border-top-color: #5EEAD4;
  animation: hpSpin .9s linear infinite, hpOut .4s ease forwards 2.7s;
}
@keyframes hpSpin { to { rotate: 360deg; } }
.hp-gauge {
  height: .67cqw; border-radius: 999px; margin-top: 2.2cqw;
  background: rgba(232, 248, 255, .16); overflow: hidden;
}
.hp-gauge i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7DD3FC, #5EEAD4);
  animation: hpFill 1.7s var(--ease) forwards;
  animation-delay: .9s;
}
@keyframes hpFill { to { width: 100%; } }

@keyframes hpOut { to { opacity: 0; height: 0; margin-top: 0; } }


/* Pantalla 3: la ruta armándose módulo a módulo */
/* mini tarjetas de módulo: portada de color + dos líneas de texto */
.hp-mods { list-style: none; display: grid; gap: .62cqw; margin-top: .35cqw; }
.hp-mods li {
  display: flex; align-items: center; gap: .75cqw;
  padding: .5cqw;
  border-radius: .7cqw;
  border: 1px solid rgba(125, 211, 252, .3);
  background: rgba(232, 248, 255, .07);
  transform-origin: left;
  opacity: 0; translate: -.8cqw 0;
  animation: hpMod .38s var(--ease) forwards;
  animation-delay: calc(5.2s + var(--i) * .3s);
}
@keyframes hpMod { to { opacity: 1; translate: 0 0; } }
.hc-cov {
  width: 3.4cqw; height: 2.4cqw; border-radius: .4cqw; flex-shrink: 0;
  background: linear-gradient(130deg, var(--c1), var(--c2));
}
.hc-1 { --c1: #7C3AED; --c2: #A78BFA; }
.hc-2 { --c1: #0F766E; --c2: #5EEAD4; }
.hc-3 { --c1: #0369A1; --c2: #7DD3FC; }
.hc-4 { --c1: #4C1D95; --c2: #0EA5E9; }
.hc-5 { --c1: #0D9488; --c2: #38BDF8; }
.hp-mods span { flex: 1; min-width: 0; display: grid; gap: .34cqw; }
.hp-mods b {
  display: block; height: .55cqw; width: 88%; border-radius: 999px;
  background: rgba(232, 248, 255, .85);
}
.hp-mods em {
  display: block; height: .45cqw; width: 55%; border-radius: 999px;
  background: rgba(232, 248, 255, .4);
}
.hp-ok svg { width: 1.5cqw; height: 1.5cqw; }
.hp-ok {
  display: inline-flex; align-items: center; gap: .5cqw;
  margin-top: 1.33cqw;
  font-size: 1.5cqw; font-weight: 800; color: #5EEAD4;
  opacity: 0;
  animation: hpRow .4s ease forwards; animation-delay: 6.8s;
}

/* Vida permanente: cada pantalla tiene SU propio barrido de luz, recortado
   dentro de ella, y los puntos de su barra de título parpadean. */
.hp::after {
  content: ""; position: absolute; z-index: 3; top: 0; bottom: 0;
  width: 45%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(191, 234, 255, .18), transparent);
  animation: hpSweep var(--sw, 5.5s) ease-in-out var(--swd, 9s) infinite;
}
@keyframes hpSweep {
  0%       { left: -45%; opacity: 0; }
  14%, 76% { opacity: 1; }
  100%     { left: 100%; opacity: 0; }
}
.hp-bar i {
  animation: hpBlink 2.6s ease-in-out infinite;
  animation-delay: calc(var(--b, 0) * .5s);
}
.hp-bar i:nth-child(2) { --b: 1; }
.hp-bar i:nth-child(3) { --b: 2; }
@keyframes hpBlink { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* la barra del diagnóstico queda latiendo suave */
.hp-gauge i { box-shadow: 0 0 8px rgba(94, 234, 212, .7); }

.rc-bot-copy { min-width: 0; }
.rc-bot-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(244, 241, 248, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  padding: 6px 13px; border-radius: 999px;
  margin-bottom: 16px;
}
.rc-bot-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #5EEAD4;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .18);
  animation: rcDot 2.2s ease-in-out infinite;
}
@keyframes rcDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.rc-bot-note {
  margin-top: 16px; padding-left: 15px;
  border-left: 2px solid rgba(167, 139, 250, .45);
  font-family: var(--serif); font-style: italic;
  font-size: 15px; line-height: 1.55;
  color: rgba(244, 241, 248, .52);
}

/* Celebración: una sola palabra, del tamaño de la noticia */
/* Los dos textos comparten celda de grilla: la caja mide lo del más alto,
   así el relevo no mueve nada de lugar. */
.rc-cap, .rc-bot-copy .rc-title, .rc-bot-copy .rc-lead { display: grid; }
.sw { grid-area: 1 / 1; }
.sw-b { opacity: 0; }
body.rc-revealed .sw-a { animation: hpOut .45s ease forwards; }
body.rc-revealed .sw-b { animation: hpRow .55s ease forwards .15s; }

.rc-dots { display: inline-flex; gap: .16em; margin-left: .35em; }
.rc-dots b {
  width: .22em; height: .22em; border-radius: 50%;
  background: currentColor; opacity: .25;
  align-self: flex-end; margin-bottom: .3em;
  animation: rcDots 1.4s ease-in-out infinite;
}
.rc-dots b:nth-child(2) { animation-delay: .2s; }
.rc-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes rcDots { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Pie del sello: discreto, solo nombra el estado */
.rc-cap {
  justify-items: center;
  margin: 14px 0 clamp(40px, 5vh, 58px);
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  color: rgba(244, 241, 248, .38);
}
.rc-cap .sw { display: inline-flex; align-items: center; }

/* Y debajo, lo que el sistema ya hizo mientras tanto */
.rc-title {
  font-family: var(--disp);
  font-size: clamp(25px, 3.2vw, 39px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.14;
  color: #F8F6FB; margin-bottom: 14px;
  text-wrap: balance;
}
.rc-lead {
  max-width: 660px;
  font-size: 15.5px; line-height: 1.65; color: rgba(244, 241, 248, .6);
}
.rc-bot-copy .rc-title { text-wrap: pretty; }

/* ============================================================
   Diagnóstico — tablero cualitativo (v3, 2026-08-13)
   ------------------------------------------------------------
   Ocho bloques. Salieron los tres componentes que hablaban el idioma del
   prompt en vez del del alumno: el chip de veredicto de encaje, su bloque
   destacado y la alerta ámbar de "fundamento roto". El público son
   estudiantes sin formación en innovación; esas etiquetas no orientaban.

   Lo que queda: la escala de etapa (la etapa la sigue determinando InnovaBot,
   pero ya no la explica), tres frases de lectura, las dos tarjetas de
   problema y solución con su apreciación, fortalezas y riesgos, el plan y
   las cápsulas.

   Regla de diseño que se mantiene: SIN puntajes, notas ni porcentajes. Toda
   apreciación es una PALABRA con un color, nunca un número.
     ok    → aguamarina  (se entiende bien)
     mid   → celeste     (va a medio camino)
     start → violeta     (todavía por definir — punto de partida, no alarma;
                           es el mismo violeta de la etapa Idea)
   ============================================================ */

.rc-panel {
  width: 100%; max-width: 900px;
  margin: clamp(64px, 8vh, 92px) auto 0;
  text-align: left;
}

/* --- El resumen: la etapa. Es lo único que hay que leer para entender dónde
   está el proyecto; el resto es el porqué. --- */
.rc-verdict {
  padding: 30px clamp(22px, 3.5vw, 40px) 26px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, .3);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(124, 58, 237, .3), transparent 70%),
    rgba(255, 255, 255, .035);
  text-align: center;
}
.rc-ver-lab {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244, 241, 248, .45);
}
.rc-ver-stage {
  font-family: var(--disp);
  font-size: clamp(38px, 5.4vw, 52px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; margin: 6px 0 4px;
  background: linear-gradient(100deg, #A78BFA, #5EEAD4 55%, #7DD3FC);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.rc-scale {
  list-style: none;
  display: flex; justify-content: space-between; gap: 4px;
  margin: 20px 0 4px;
  position: relative;
}
.rc-scale::before {
  content: ""; position: absolute;
  left: 10%; right: 10%; top: 5px; height: 1.5px;
  background: rgba(255, 255, 255, .12);
}
.rc-scale li {
  position: relative; flex: 1;
  font-size: 9.5px; font-weight: 700; letter-spacing: .01em;
  color: rgba(244, 241, 248, .3);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.rc-scale i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #2A2338; border: 1.5px solid rgba(255, 255, 255, .16);
}
.rc-scale .is-now { color: #F4F1F8; }
.rc-scale .is-now i {
  background: linear-gradient(135deg, #A78BFA, #5EEAD4);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .28), 0 0 16px rgba(94, 234, 212, .5);
}

/* Los tres tonos: se aplican con una clase sobre el mismo elemento */
.rc-tone-ok    { --rc-tone-bg: rgba(20,184,166,.16); --rc-tone-line: rgba(94,234,212,.4); --rc-tone-fg: #5EEAD4; }
.rc-tone-mid   { --rc-tone-bg: rgba(14,165,233,.16); --rc-tone-line: rgba(125,211,252,.4); --rc-tone-fg: #7DD3FC; }
.rc-tone-start { --rc-tone-bg: rgba(124,58,237,.16); --rc-tone-line: rgba(167,139,250,.4); --rc-tone-fg: #C4B5FD; }

/* --- El documento: los ocho bloques, en su orden. Harto aire entre bloques
   a propósito — es contenido para leer, no para escanear. --- */
.rc-doc { margin-top: clamp(40px, 5vh, 56px); text-align: left; display: grid; gap: 26px; }

/* Mensaje de error: ocupa el lugar del documento entero. */
.rc-doc-error {
  font-size: 15.5px; line-height: 1.75;
  color: rgba(244, 241, 248, .72);
}

/* --- Bloque 1: lo que vimos. Tres frases cortas, una por línea, con su
   rótulo al costado. Es lo primero que se lee y tiene que entrar de una
   mirada: no es un resumen del proyecto, es lo que quedó en pie. --- */
.rc-vimos-list { display: grid; gap: 12px; margin-top: 14px; }
.rc-vimos-item {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.rc-vimos-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-vimos-item dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(167, 139, 250, .85);
}
.rc-vimos-item dd {
  font-size: 15px; line-height: 1.65;
  color: rgba(244, 241, 248, .88);
}

/* Bloque 8: el cierre. Cita en itálica, para que se lea como la voz de
   InnovaBot hablando directo, no como un informe. */
.rc-quote {
  padding: 20px 24px;
  border-left: 3px solid rgba(167, 139, 250, .5);
  font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.62;
  color: rgba(244, 241, 248, .88);
}
.rc-quote-lab {
  display: block; margin-bottom: 8px;
  font-family: var(--sans); font-style: normal;
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(244, 241, 248, .4);
}

/* Bloques 2 y 3: problema y solución, uno al lado del otro. */
.rc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rc-diagcard {
  padding: 20px clamp(18px, 2.4vw, 24px) 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .09);
}
.rc-diagcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.rc-diagcard-head b {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244, 241, 248, .45);
}
/* La apreciación. Sin `text-transform: capitalize`: ahora son frases
   ("va a medio camino"), no etiquetas de una palabra, y capitalizar cada
   palabra las hacía ver como un rótulo de formulario. */
.rc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  background: var(--rc-tone-bg); border: 1px solid var(--rc-tone-line); color: var(--rc-tone-fg);
  white-space: nowrap;
}
.rc-diagcard-text {
  font-size: 14px; line-height: 1.68; color: rgba(244, 241, 248, .72);
}
.rc-diagcard-rewrite {
  margin-top: 14px; padding: 13px 15px;
  border-radius: 12px; background: rgba(255, 255, 255, .045);
  border: 1px dashed rgba(255, 255, 255, .16);
  font-size: 13px; line-height: 1.6; color: rgba(244, 241, 248, .68);
}
.rc-diagcard-rewrite b {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 241, 248, .42);
}

/* Etiqueta reutilizable sobre cualquier bloque del documento (lo que vimos /
   plan / cápsulas) — mismo trato visual que las demás, sin repetir la regla. */
.rc-doc-lab {
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(244, 241, 248, .45); margin-bottom: 10px;
}

/* Bloques 4 y 5: fortalezas y riesgos — el mismo componente que ya
   funcionaba, sin tocarlo. */
.rd-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.rd-block {
  padding: 14px 16px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.rd-block > b {
  display: block; margin-bottom: 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.rd-ok > b   { color: #5EEAD4; }
.rd-risk > b { color: #FCA5A5; }
.rd-block ul { list-style: none; display: grid; gap: 8px; }
.rd-block li {
  position: relative; padding-left: 16px;
  font-size: 13px; line-height: 1.5;
  color: rgba(244, 241, 248, .62);
}
.rd-block li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
}
.rd-ok li::before   { background: #5EEAD4; }
.rd-risk li::before { background: #FCA5A5; }

/* Bloque 8: el plan de acción — hasta 3 tareas, cada una con su propio
   criterio de resultado destacado abajo. */
.rc-plan { display: grid; gap: 12px; }
.rc-tarea {
  padding: 17px 19px 16px;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, .3);
  background: rgba(124, 58, 237, .09);
}
.rc-tarea-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rc-tarea-num {
  font-family: var(--disp); font-weight: 800; font-size: 13px;
  color: #C4B5FD; flex-shrink: 0;
}
.rc-tarea-titulo { font-weight: 700; font-size: 14.5px; color: #F4F1F8; }
.rc-tarea-texto {
  font-size: 13.5px; line-height: 1.65; color: rgba(244, 241, 248, .74);
  white-space: pre-line;
}
.rc-tarea-criterio {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .14);
  font-size: 12.5px; line-height: 1.55; color: rgba(244, 241, 248, .66);
}
.rc-tarea-criterio svg { flex-shrink: 0; margin-top: 2px; color: #5EEAD4; }
.rc-tarea-criterio b { color: #F4F1F8; }

/* Bloque 9: cápsulas — chips discretos, sin imagen ni enlace todavía
   (el catálogo real llega después). */
.rc-capsulas { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-capsula {
  padding: 10px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  max-width: 260px;
}
.rc-capsula b {
  display: block; font-size: 12.5px; font-weight: 700; color: #F4F1F8; margin-bottom: 3px;
}
.rc-capsula span { font-size: 11.5px; line-height: 1.5; color: rgba(244, 241, 248, .58); }

.rc-ver-foot {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: rgba(244, 241, 248, .5);
  margin-top: clamp(28px, 4vh, 40px);
}

/* --- 3. Tu ruta (fondo claro, mismas tarjetas del home) --- */
.rc-ruta {
  position: relative;
  background: var(--bg); color: var(--ink);
  padding: clamp(76px, 10vh, 112px) 32px clamp(72px, 10vh, 104px);
}
.rc-ruta-head { text-align: center; max-width: 700px; margin: 0 auto clamp(40px, 5vh, 56px); }
.rc-ruta-title {
  font-family: var(--disp);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.12;
  margin-bottom: 14px;
}
.rc-ruta-lead { font-size: 15.5px; line-height: 1.65; color: var(--ink-70); }

/* Collage: las tarjetas son una lámina informativa, no navegación.
   Se apilan en dos hileras con inclinaciones leves y un filete blanco que
   las separa, como fotos puestas una sobre otra.
   pointer-events:none deja todo el bloque inerte (ni clic ni hover).

   El solape es acotado a propósito: el cuerpo de la tarjeta tiene 18px de
   padding, así que solo puede montarse sobre ese margen. Más que eso
   empieza a cortar los títulos. */
.rc-collage {
  max-width: 1120px; margin: 0 auto;
  pointer-events: none;
  user-select: none;
}
.rc-row {
  display: flex; justify-content: center; align-items: flex-start;
}
.rc-row-b { margin-top: -6px; }

.rc-cur {
  width: 344px; flex-shrink: 0;
  transition: none;
  rotate: var(--rot, 0deg);
  margin-top: var(--dy, 0px);
  /* filete blanco: hace que la superposición se lea como dos piezas distintas */
  box-shadow:
    0 0 0 5px #fff,
    0 30px 58px -26px rgba(76, 29, 149, .36),
    0 4px 14px rgba(27, 20, 38, .07);
}
.rc-cur + .rc-cur { margin-left: -10px; }
/* inerte: ni elevación ni zoom de portada */
.rc-cur:hover {
  translate: 0 0;
  box-shadow:
    0 0 0 5px #fff,
    0 30px 58px -26px rgba(76, 29, 149, .36),
    0 4px 14px rgba(27, 20, 38, .07);
}
.rc-cur:hover .cur-img { transform: none; }
.rc-cur .cur-cover { height: 138px; }

/* Inclinación y orden de apilado. Las de más adelante quedan encima, de
   modo que el filete blanco monte sobre el margen de la siguiente. */
.rc-row .rc-cur:nth-child(1) { --rot: -2.2deg; --dy: 12px; z-index: 3; }
.rc-row .rc-cur:nth-child(2) { --rot: 1.2deg;  --dy: 0px;  z-index: 2; }
.rc-row .rc-cur:nth-child(3) { --rot: 2.4deg;  --dy: 15px; z-index: 1; }
.rc-row-b .rc-cur:nth-child(1) { --rot: 1.8deg;  --dy: 0px;  z-index: 5; }
.rc-row-b .rc-cur:nth-child(2) { --rot: -1.8deg; --dy: 13px; z-index: 4; }

/* Chip "Empieza aquí" sobre la portada del módulo 01 */
.rc-first {
  position: absolute; z-index: 2; right: 12px; bottom: 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(227, 5, 19, .7);
}
.rc-open {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  color: #0F766E; background: rgba(94, 234, 212, .22);
}
.rc-open::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #14B8A6;
}

.rc-ruta-note {
  max-width: 640px; margin: clamp(36px, 5vh, 52px) auto 0;
  text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.6; color: var(--ink-70);
}

/* --- 4. CTA final --- */
.rc-cta {
  position: relative;
  background: var(--bg); color: var(--ink);
  padding: clamp(24px, 4vh, 44px) 32px clamp(88px, 12vh, 124px);
  text-align: center;
  isolation: isolate; overflow: clip;
}
.rc-cta-glow {
  position: absolute; z-index: -1;
  left: 50%; top: 20%; translate: -50% 0;
  width: min(760px, 92%); height: 320px;
  background: radial-gradient(closest-side, rgba(124, 58, 237, .16), transparent 72%);
  filter: blur(30px);
}
.rc-cta-title {
  font-family: var(--disp);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.14;
  margin-bottom: 12px;
}
.rc-cta-lead {
  max-width: 560px; margin: 0 auto 32px;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-70);
}

/* Botón grande: es la única salida de la página, tiene que pesar */
.rc-go {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 56px 19px;
  border-radius: 20px;
  background: linear-gradient(135deg, #F2222F, var(--red) 55%, #B90411);
  color: #fff;
  box-shadow:
    0 26px 54px -16px rgba(227, 5, 19, .68),
    0 3px 0 rgba(0, 0, 0, .12) inset,
    0 0 0 1px rgba(255, 255, 255, .14) inset;
  transition: translate .25s var(--ease), box-shadow .25s ease, filter .2s ease;
}
.rc-go:hover {
  translate: 0 -4px;
  filter: saturate(1.08);
  box-shadow:
    0 34px 66px -16px rgba(227, 5, 19, .75),
    0 3px 0 rgba(0, 0, 0, .12) inset,
    0 0 0 1px rgba(255, 255, 255, .2) inset;
}
.rc-go:active { translate: 0 -1px; }

/* Halo que late detrás del botón, para que llame sin gritar */
.rc-go-halo {
  position: absolute; inset: -8px; z-index: -1;
  border-radius: 26px;
  background: radial-gradient(closest-side, rgba(227, 5, 19, .45), transparent 78%);
  filter: blur(14px);
  animation: rcHalo 3.2s ease-in-out infinite;
}
@keyframes rcHalo {
  0%, 100% { opacity: .55; scale: 1; }
  50%      { opacity: 1;   scale: 1.06; }
}

.rc-go-line {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--disp);
  font-size: clamp(22px, 2.6vw, 27px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.1;
}
.rc-go-line svg { transition: transform .25s var(--ease); }
.rc-go:hover .rc-go-line svg { transform: translateX(5px); }
.rc-go-sub {
  font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .rc-panel { grid-template-columns: 1fr; }
}
/* El collage se apila: primero 2+2+1, luego una columna sin inclinaciones */
@media (max-width: 860px) {
  /* cuatro columnas no caben: los hitos pasan a dos filas */
  .rc-cplist { grid-template-columns: repeat(2, 1fr); }
  .rd-cols { grid-template-columns: 1fr; }
  /* Problema y solución dejan de estar lado a lado: en dos columnas
     angostas se leerían apretados. */
  .rc-pair { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rc-quote { padding: 16px 18px; font-size: 15.5px; }
  .rc-tarea-head { flex-direction: column; gap: 2px; }
  /* El rótulo pasa arriba de su frase: 92px de columna dejan el texto en
     una tira demasiado angosta. */
  .rc-vimos-item { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 520px) {
  .rc-cplist {
    grid-template-columns: 1fr; gap: 12px;
    text-align: left; margin-top: 20px;
  }
  .rc-cplist li { padding-left: 16px; position: relative; }
  /* en una columna cada etiqueta lleva su propio punto */
  .rc-cplist li::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, #A78BFA, #5EEAD4);
  }
  .rc-cplist b { font-size: 13px; }
}

@media (max-width: 880px) {
  .rc-bot-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 4px;
  }
  .rc-stage { max-width: min(94vw, 470px); margin-inline: auto; }
  .rc-bot-note {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(167, 139, 250, .3);
    padding-top: 14px;
  }
  .rc-lead { margin-inline: auto; }
}

@media (max-width: 1040px) {
  .rc-row { flex-wrap: wrap; }
  .rc-row-b { margin-top: -4px; }
  .rc-cur { width: min(330px, 86vw); }
  .rc-cur + .rc-cur { margin-left: -8px; }
}
@media (max-width: 720px) {
  .rc-hero { padding-top: clamp(84px, 11vh, 104px); }
  .rc-row { flex-direction: column; align-items: center; }
  .rc-row-b { margin-top: -8px; }
  .rc-cur { width: min(340px, 90vw); --dy: 0px !important; }
  .rc-cur + .rc-cur { margin-left: 0; margin-top: -8px; }
  .rc-row .rc-cur:nth-child(1) { --rot: -1.8deg; }
  .rc-row .rc-cur:nth-child(2) { --rot: 1.6deg; }
  .rc-row .rc-cur:nth-child(3) { --rot: -1.2deg; }
  .rc-row-b .rc-cur:nth-child(1) { --rot: 1.8deg; }
  .rc-row-b .rc-cur:nth-child(2) { --rot: -1.6deg; }
  .rc-go { padding: 19px 34px 16px; }
  .rc-scale li { font-size: 8.5px; }
  .rc-ruta, .rc-cta { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-seal-ring, .rc-seal-tick { animation: none; stroke-dashoffset: 0; }
  .rc-wave { animation: none; opacity: 0; }
  .rc-fill { animation: none; width: 100%; }
  .rc-go-halo { animation: none; opacity: .7; }
  .rc-bot-img, .rc-bot-glow, .rc-bot-dot, .rc-holo, .hp-scan, .hp-ring { animation: none; }
  /* sin movimiento: las pantallas se muestran ya resueltas */
  .hp { opacity: .96; animation: none; }
  .hp-list li, .hp-ok { opacity: 1; animation: none; }
  .hp-list em { scale: 1; background: #5EEAD4; border-color: #5EEAD4; animation: none; }
  .hp-gauge i { width: 100%; animation: none; }
  .hp-lines li { scale: 1 1; animation: none; }
  .hp-mods li { opacity: 1; translate: 0 0; animation: none; }
  /* la carga se muestra ya terminada */
  .rc-fill::after, .rc-dots b { animation: none; opacity: 0; }
  .rc-load { animation: none; opacity: 0; }
  .rc-done { animation: none; opacity: 1; }
  .rc-lab { animation: none; color: rgba(244, 241, 248, .9); }
  /* sin animación se muestra el estado final: diagnóstico ya listo */
  .rc-seal-spin { animation: none; opacity: 0; }
  .sw-a { animation: none; opacity: 0; }
  .sw-b { animation: none; opacity: 1; }
  .hp::after { animation: none; opacity: 0; }
  .rc-later { animation: none; }
  .rc-cp {
    animation: none; scale: 1.28;
    background: linear-gradient(135deg, #A78BFA, #5EEAD4); border-color: transparent;
  }
  .rc-cplist li { animation: none; opacity: 1; }
}