/* =============================================================
   MedCore — styles.css
   Identidad: tema oscuro dominante (navy + tonos más oscuros),
   azul MedCore como acento que "ilumina", tipografía geométrica,
   tarjetas "flashcard" elevadas. Mobile-first.
   Ver MEDCORE_CONFIG al inicio de script.js para datos editables.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --navy:        #0B2545;
  --navy-2:      #0A1F3B;
  --navy-3:      #143a68;   /* superficie "elevada" de tarjetas sobre fondo oscuro */
  --navy-deep:   #071931;   /* el tono más oscuro — footer, profundidad */
  --navy-line:   rgba(255,255,255,.14);

  --paper:       #FFFFFF;
  --paper-2:     #F5F8FC;
  --paper-3:     #EAF1FA;
  --ink:         #0B2545;
  --ink-soft:    #33517a;
  --ink-mute:    #6b7c93;
  --line:        rgba(11,37,69,.12);

  --blue:        #0096FF;
  --blue-dark:   #0077CC;
  --blue-soft:   rgba(0,150,255,.14);
  --blue-2:      #38BDF8;   /* azul secundario — acento de OffClass */
  --blue-2-soft: rgba(56,189,248,.16);
  --success:     #1FB77E;
  --success-soft: rgba(31,183,126,.16);
  --warn:        #E8A33D;
  --warn-soft:   rgba(232,163,61,.18);
  --discord:      #5865F2;   /* color de marca oficial de Discord — excepción deliberada a la paleta */
  --discord-dark: #4752C4;
  --discord-soft: rgba(88,101,242,.16);

  --text-on-dark:   #F5F8FC;
  --text-on-dark-mute: rgba(245,248,252,.68);

  --sans-display: "Sora", "Inter", system-ui, sans-serif;
  --sans-body:    "Inter", system-ui, sans-serif;
  --font-accent:  "Fraunces", "Sora", serif; /* acento editorial para palabras clave de marca */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1180px;
  --nav-h: 76px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-on-dark);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  padding-bottom: 78px; /* espacio para sticky-cta en móvil */
}
@media (min-width: 960px) { body { padding-bottom: 0; } }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5 { font-family: var(--sans-display); text-wrap: balance; line-height: 1.08; letter-spacing: -0.01em; font-weight: 700; color: #fff; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ruido sutil sobre todo el navy — le da textura y profundidad al fondo
   oscuro dominante sin que se note como "textura" (opacidad muy baja). */
.grain-overlay {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 720px) { .container { padding-inline: 2rem; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--paper); color: var(--ink);
  z-index: 9999; border-radius: 8px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(11,37,69,.2);
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7fc4ff;
  margin-bottom: .6rem;
}

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700;
  padding: .35rem .7rem;
  border-radius: 999px;
}
.badge-warn { background: var(--warn-soft); color: #ffc773; }
.badge-uni { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--navy-line); }
.badge-success { background: var(--success-soft); color: #3fe0a5; }

/* =============================================================
   Separadores "blended" entre secciones
   Se aplican como clase utilitaria a cualquier <section>; no hace falta
   marcado extra. Alternamos dos tratamientos para que los bloques
   contiguos tengan identidad propia sin cortarse en seco:
     .sec-glow-top  → hilo de luz que se desvanece a los lados
     .sec-curve-top → curva cóncava en SVG (máscara del tono navy)
   ============================================================= */
.sec-glow-top { position: relative; }
.sec-glow-top::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(760px, 82%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,150,255,.55), transparent);
  box-shadow: 0 0 12px rgba(0,150,255,.35);
}

.sec-curve-top { position: relative; }
.sec-curve-top::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: clamp(32px, 5vw, 64px); pointer-events: none; z-index: 1;
  background: var(--curve-from, var(--navy-2));
  /* Curva cóncava: el bloque de color de arriba "cae" hacia el centro,
     dejando que el fondo de esta sección emerja por los lados. */
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 63%, transparent 64%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 63%, transparent 64%);
}

/* -------------------------------------------------------------
   Texturas de fondo por sección — utilidades ligeras (CSS puro,
   sin imágenes) para dar identidad propia a cada área sin salir de
   la paleta. Se aplican como capa ::after de baja opacidad, así que
   nunca comprometen el contraste AA del texto encima.
   ------------------------------------------------------------- */
.sec-tex { position: relative; }
.sec-tex > .container,
.sec-tex > * { position: relative; z-index: 1; }
.sec-tex::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

/* Rejilla técnica muy tenue — vibra de "plataforma/estudio". */
.sec-tex-grid::after {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 78%);
}

/* Glow radial anclado a una esquina — rompe la simetría y da foco. */
.sec-tex-corner::after {
  background: radial-gradient(60% 55% at 88% 12%, rgba(0,150,255,.14), transparent 62%);
}
.sec-tex-corner-left::after {
  background: radial-gradient(60% 55% at 12% 88%, rgba(31,183,126,.12), transparent 62%);
}

/* Líneas diagonales sutiles — textura editorial discreta. */
.sec-tex-lines::after {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 26px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}

/* Reveal global: recorrido más corto y curva expo — se siente más
   "prolijo"/moderno que el fade largo de 32px, sin cambiar el sistema. */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Stagger por sección: los hijos directos de un [data-reveal-stagger]
   entran en cascada cuando el contenedor se revela. Delays por CSS
   (nth-child) en vez de JS — cero observers nuevos. */
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
[data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-revealed > :nth-child(1) { transition-delay: .04s; }
[data-reveal-stagger].is-revealed > :nth-child(2) { transition-delay: .12s; }
[data-reveal-stagger].is-revealed > :nth-child(3) { transition-delay: .20s; }
[data-reveal-stagger].is-revealed > :nth-child(4) { transition-delay: .28s; }
[data-reveal-stagger].is-revealed > :nth-child(5) { transition-delay: .36s; }
[data-reveal-stagger].is-revealed > :nth-child(6) { transition-delay: .44s; }
[data-reveal-stagger].is-revealed > :nth-child(n+7) { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
}
/* Elementos con data-split animan sus propias palabras via GSAP;
   el reveal a nivel de contenedor debe quedar neutralizado o el
   texto se queda invisible para siempre (ver gotcha A.4.5). */
[data-reveal][data-split] { opacity: 1; transform: none; }
/* El marco del webinar usa fade + escala en vez de fade + translateY. */
.reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.reveal-zoom.is-revealed { opacity: 1; transform: scale(1); }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans-display);
  font-weight: 700;
  font-size: .95rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background-color .3s, color .3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,150,255,.35), 0 2px 6px rgba(0,150,255,.25);
}
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 18px 40px rgba(0,150,255,.42), 0 4px 10px rgba(0,150,255,.3); }

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

.btn-ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; }

.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }
.btn-xl { padding: 1.15rem 2.4rem; font-size: 1.08rem; }
.btn-block { width: 100%; }

/* Botones magnéticos — el contenido interno sigue el cursor, el botón
   conserva su propio hover (lift + glow). Nunca en submits (ver C.2). */
.has-magnetic { isolation: isolate; }
.magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .7s var(--ease-soft);
}

/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), box-shadow .4s var(--ease-out), height .3s var(--ease-out);
}
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav.is-scrolled {
  background: rgba(7,25,49,.9);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.3);
  height: 66px;
}

.nav-logo { display: flex; align-items: center; gap: .55rem; font-family: var(--sans-display); font-weight: 800; font-size: 1.15rem; color: #fff; flex-shrink: 0; }
.nav-logo img { border-radius: 6px; }

.nav-links { display: none; gap: 1.8rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; padding: .3rem 0;
  font-size: .92rem; font-weight: 600; color: var(--text-on-dark-mute);
  transition: color .3s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Link "Regalos": pequeño acento verde para que destaque como algo
   especial dentro del nav sin gritar. */
.nav-link-gift { color: #4fe0a8; }
.nav-link-gift::after { background: var(--success); }
.nav-link-gift::before {
  content: "🎁"; margin-right: .35rem; font-size: .9em;
}

/* Scroll-spy: la sección visible ilumina su link (JS añade .is-active
   vía IntersectionObserver — ver initNavSpy). Mismo subrayado que el
   hover, pero persistente mientras la sección esté en pantalla. */
.nav-link.is-active { color: #fff; }
.nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Barra de progreso de lectura — un hilo de luz bajo el nav que avanza
   con el scroll. transform: scaleX (compositor-friendly), nunca width. */
.nav-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--success));
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 8px rgba(0,150,255,.6);
  pointer-events: none;
}

.nav-cta { display: none; }
@media (min-width: 960px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; align-items: center;
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger span { display: block; width: 22px; height: 2px; background: #fff; transition: transform .35s var(--ease-out), opacity .35s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: var(--navy-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile nav { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.nav-mobile-link { font-family: var(--sans-display); font-size: 1.6rem; font-weight: 700; color: #fff; }

/* Entrada escalonada de los links del menú móvil: cada uno sube y
   aparece con un pequeño delay incremental cuando el menú se abre. */
.nav-mobile-link, .nav-mobile > .btn {
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.nav-mobile[data-open="true"] .nav-mobile-link,
.nav-mobile[data-open="true"] > .btn { opacity: 1; transform: none; }
.nav-mobile[data-open="true"] .nav-mobile-link:nth-child(1) { transition-delay: .12s; }
.nav-mobile[data-open="true"] .nav-mobile-link:nth-child(2) { transition-delay: .18s; }
.nav-mobile[data-open="true"] .nav-mobile-link:nth-child(3) { transition-delay: .24s; }
.nav-mobile[data-open="true"] .nav-mobile-link:nth-child(4) { transition-delay: .30s; }
.nav-mobile[data-open="true"] .nav-mobile-link:nth-child(5) { transition-delay: .36s; }
.nav-mobile[data-open="true"] .nav-mobile-link:nth-child(6) { transition-delay: .42s; }
.nav-mobile[data-open="true"] > .btn { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .nav-mobile-link, .nav-mobile > .btn { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 960px) { .nav-mobile { display: none; } }

/* =============================================================
   5b. Menú de navegación organizado (dropdown en computadora /
   panel a pantalla completa en teléfono). Un solo menú por
   secciones, accesible desde el botón "Menú" superior derecho,
   optimizado para ratón y para dedo.
   ============================================================= */
.nav-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

/* La CTA aparece desde móvil grande hacia arriba; en móvil chico vive
   dentro del menú para no saturar la barra. */
.nav-cta { display: none; }
@media (min-width: 560px) { .nav-cta { display: inline-flex; } }

/* Botón que abre el menú — visible siempre (computadora y teléfono) */
.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 40px; padding: 0 .85rem; cursor: pointer;
  border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-family: var(--sans-display); font-weight: 700; font-size: .88rem;
  transition: background-color .3s, border-color .3s;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav-toggle-label { display: none; }
@media (min-width: 420px) { .nav-toggle-label { display: inline; } }
.nav-toggle-bars { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; height: 14px; }
.nav-toggle-bars span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .35s var(--ease-out), opacity .3s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panel del menú */
.nav-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 190;
  padding: 0 clamp(1rem, 4vw, 2rem);
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s .35s;
  pointer-events: none;
}
.nav.is-scrolled ~ .nav-menu { top: 66px; max-height: calc(100dvh - 66px); }
.nav-menu[data-open="true"] {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s 0s;
}
.nav-menu-card {
  margin: .5rem 0 1rem;
  background: rgba(9,26,48,.98);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--navy-line); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
/* En pantallas grandes es una tarjeta acotada, anclada a la derecha (dropdown). */
@media (min-width: 720px) { .nav-menu-card { max-width: 720px; margin-left: auto; } }

.nav-menu-cols { display: grid; grid-template-columns: 1fr; gap: 1.4rem 2rem; }
@media (min-width: 720px) { .nav-menu-cols { grid-template-columns: repeat(3, 1fr); } }
.nav-col-title {
  font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 .4rem; padding-inline: .7rem;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .62rem .7rem; border-radius: 10px;
  color: var(--text-on-dark-mute); font-family: var(--sans-display); font-weight: 600; font-size: .98rem;
  transition: background-color .22s, color .22s;
}
.nav-item::after {
  content: "\203A"; font-size: 1.15em; line-height: 1; color: var(--blue);
  opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s;
}
.nav-item:hover, .nav-item:focus-visible { background: rgba(255,255,255,.07); color: #fff; }
.nav-item:hover::after, .nav-item:focus-visible::after { opacity: 1; transform: none; }
.nav-item-gift { color: #4fe0a8; }
.nav-item-gift::before { content: "🎁"; margin-right: .35rem; }
.nav-menu-cta { display: inline-flex; width: 100%; margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: opacity .01s, visibility 0s; transform: none; }
  .nav-menu[data-open="true"] { transform: none; }
}

/* =============================================================
   6. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  background: var(--navy);
  overflow: clip;
  padding-block: calc(var(--nav-h) + 2rem) 4rem;
  isolation: isolate;
}
.hero-gradient {
  position: absolute; inset: -10%; z-index: -2;
  background:
    radial-gradient(circle 620px at var(--mx, 30%) var(--my, 30%), rgba(0,150,255,.55) 0%, transparent 55%),
    radial-gradient(circle 720px at calc(var(--mx, 30%) + 25%) calc(var(--my, 30%) + 30%), rgba(31,183,126,.24) 0%, transparent 55%),
    radial-gradient(circle 900px at 80% 90%, rgba(0,119,204,.4) 0%, transparent 60%),
    var(--navy);
  filter: blur(60px) saturate(130%);
}
.hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; }
.shape-1 { width: 10px; height: 10px; background: var(--blue); top: 18%; left: 12%; animation: floatY 7s ease-in-out infinite; }
.shape-2 { width: 6px; height: 6px; background: #fff; top: 68%; left: 22%; animation: floatY 9s ease-in-out infinite 1s; }
.shape-3 { width: 14px; height: 14px; background: var(--success); top: 30%; right: 14%; animation: floatY 8s ease-in-out infinite .5s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

.hero-inner { position: relative; text-align: center; max-width: 880px; margin-inline: auto; }
.hero-tagline { color: #7fc4ff; font-weight: 700; font-size: .95rem; letter-spacing: .02em; margin-bottom: 1.1rem; }
.hero-title {
  color: #fff;
  font-size: clamp(2.1rem, 6vw, 4rem);
  font-weight: 800;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero-sub {
  color: var(--text-on-dark-mute);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  max-width: 52ch;
  margin: 1.4rem auto 0;
}
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Patrón de marca: "Medicina" / "Ciencias de la Salud" siempre en Fraunces
   itálica + azul + glow sutil, en cualquier titular importante del sitio. */
.accent-word {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  color: var(--blue);
  text-shadow: 0 0 26px rgba(0,150,255,.45);
}

.split-word { display: inline-block; }

/* =============================================================
   7. Webinar de bienvenida
   ============================================================= */
.webinar { position: relative; background: linear-gradient(180deg, var(--navy), var(--navy-2) 16%); padding-block: 5rem; overflow: clip; text-align: center; }
.webinar-glow {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(45% 45% at 50% 20%, rgba(0,150,255,.28), transparent 70%);
  filter: blur(80px);
}
.webinar-inner { position: relative; z-index: 1; }
.webinar .section-head { max-width: 620px; margin-inline: auto; }

.video-frame {
  position: relative;
  max-width: 900px;
  margin: 2.6rem auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0,150,255,.4);
  box-shadow: 0 0 0 1px rgba(0,150,255,.12), 0 40px 90px -30px rgba(0,0,0,.65), 0 0 90px -15px rgba(0,150,255,.4);
  background: linear-gradient(135deg, var(--navy-3), var(--navy-deep));
}
.video-thumb {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(0,150,255,.28), transparent 70%),
    linear-gradient(135deg, var(--navy-3), var(--navy));
}
.video-thumb-logo { opacity: .55; }
.video-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 40px rgba(0,150,255,.55);
  transition: transform .35s var(--ease-soft), background-color .3s;
}
.video-play-btn::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1.5px solid rgba(0,150,255,.55);
  animation: playPulse 2.4s ease-out infinite;
}
.video-play-btn svg { margin-left: 4px; }
.video-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--blue-dark); }
@keyframes playPulse {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
.video-pending-msg {
  display: none;
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: .82rem; color: var(--text-on-dark-mute);
  background: rgba(7,25,49,.75); padding: .4rem 1rem; border-radius: 999px;
}
.video-frame.is-pending .video-pending-msg { display: block; }
.video-frame iframe { width: 100%; height: 100%; border: 0; position: relative; z-index: 1; }

.webinar-cta { margin-top: 2.4rem; }

@media (prefers-reduced-motion: reduce) {
  .video-play-btn::before { animation: none; }
}

/* =============================================================
   8. Selector de modalidad
   ============================================================= */
.selector { padding-block: 5.5rem 4.5rem; background: linear-gradient(180deg, var(--navy-2), var(--navy) 16%); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 2.6rem; }
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); color: #fff; }
.section-head p { margin-top: .7rem; color: var(--text-on-dark-mute); font-size: 1.05rem; }

.selector-grid { display: grid; gap: 1.8rem; max-width: 920px; margin-inline: auto; }
@media (min-width: 720px) { .selector-grid { grid-template-columns: 1fr 1fr; } }

.selector-card {
  --rx: 0deg; --ry: 0deg;
  background: var(--navy-3);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  padding: 2.6rem 2.2rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.5);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .3s;
  position: relative;
}
.selector-card:hover { transition-duration: .15s; border-color: rgba(0,150,255,.5); box-shadow: 0 30px 60px -20px rgba(0,150,255,.35), 0 0 0 1px rgba(0,150,255,.25); }
.selector-card.is-chosen { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue), 0 30px 60px -20px rgba(0,150,255,.35); }

.selector-card-icon {
  width: 54px; height: 54px; border-radius: var(--radius-sm);
  background: var(--blue-soft); color: var(--blue);
  display: grid; place-items: center; margin-bottom: 1.4rem;
}
.selector-card h3 { font-size: 1.4rem; color: #fff; margin-bottom: 1.3rem; }
/* align-items:flex-start (no center) — con texto de 2-3 líneas como
   "Grupos de máximo [N] alumnos: el profe sabe tu nombre...", centrar
   verticalmente hacía que el check flotara raro respecto al bloque
   completo. Más gap + line-height para que no se sienta amontonado. */
.selector-bullets { display: grid; gap: .9rem; margin-bottom: 1.8rem; }
.selector-bullets li { display: flex; align-items: flex-start; gap: .65rem; color: var(--text-on-dark-mute); font-size: .95rem; line-height: 1.55; }
.selector-bullets svg { color: var(--success); flex-shrink: 0; margin-top: .2rem; }
.selector-btn { width: 100%; }

/* =============================================================
   9. Presencial y En Línea — secciones propias y separadas
   ============================================================= */
/* Cada modalidad es ahora su propia <section> permanente (no una pestaña
   que JS esconde/muestra) — el selector de arriba solo hace scroll suave
   hasta la que corresponda. Más padding-block que antes para que cada
   una respire como su propio momento en vez de sentirse apretada contra
   la siguiente. */
.modalidad-vista { padding-block: 6rem; }
.modalidad-vista-presencial { background: linear-gradient(180deg, var(--navy), var(--navy-2) 14%); }

/* ---------- En Línea: sección de alta producción (bloque 1) ---------- */
.en-linea-hero {
  position: relative; overflow: clip;
  padding-block: 6.5rem;
  background: linear-gradient(180deg,
    var(--navy-2) 0%,
    var(--navy-deep) 20%,
    var(--navy-deep) 80%,
    var(--navy) 100%
  );
}
.en-linea-hero .container { position: relative; z-index: 1; }

/* Aurora de fondo: 3 manchas de color muy difuminadas que derivan muy
   lento (transform únicamente — compositor-friendly). Ambiental, así que
   se congela con prefers-reduced-motion en vez de solo bajar velocidad. */
.en-linea-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.en-linea-blob { position: absolute; border-radius: 50%; filter: blur(75px); opacity: .32; will-change: transform; }
.en-linea-blob-1 { width: 420px; height: 420px; background: var(--blue); top: -8%; left: 4%; animation: enLineaDrift1 22s ease-in-out infinite; }
.en-linea-blob-2 { width: 360px; height: 360px; background: var(--success); bottom: -14%; right: 6%; animation: enLineaDrift2 27s ease-in-out infinite; }
.en-linea-blob-3 { width: 280px; height: 280px; background: var(--blue-2); top: 32%; right: 26%; animation: enLineaDrift3 31s ease-in-out infinite; }
@keyframes enLineaDrift1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.15); } }
@keyframes enLineaDrift2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-32px, -24px) scale(1.1); } }
@keyframes enLineaDrift3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px, -34px) scale(.9); } }

/* El panel de vidrio flotante: glow que respira detrás + flotación muy
   sutil del panel entero — el "momento" protagonista de la sección. */
.en-linea-card {
  position: relative; isolation: isolate; z-index: 1;
  max-width: 720px; margin-inline: auto;
  padding: 3.4rem 2.8rem; border-radius: var(--radius-lg);
  text-align: center;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 90px -34px rgba(0,150,255,.4), inset 0 1px 0 rgba(255,255,255,.09);
  animation: enLineaFloat 7s ease-in-out infinite;
}
/* El marco de vidrio en sí siempre visible — solo su CONTENIDO interno
   hace el stagger de entrada (ver reglas más abajo). Mismo patrón que
   [data-reveal][data-split] para no pelear con el reveal por palabras. */
.en-linea-card[data-reveal] { opacity: 1; transform: none; transition: none; }
.en-linea-card-glow {
  position: absolute; inset: -35% -25%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,150,255,.38), transparent 70%);
  filter: blur(55px); pointer-events: none;
  animation: enLineaBreathe 5s ease-in-out infinite;
}
@keyframes enLineaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes enLineaBreathe { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.08); } }

.en-linea-card .vista-head { margin-bottom: 0; }
/* Stagger de entrada: eyebrow → (título vía GSAP/data-split) → subtítulo
   → CTA, cada uno con su propio delay una vez que el panel entra en
   viewport (.en-linea-card recibe .is-revealed del sistema genérico
   [data-reveal], pero el frame ya está opaco — ver regla de arriba). */
.en-linea-card .eyebrow,
.en-linea-card .vista-head > p,
.en-linea-card .vista-cta {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.en-linea-card.is-revealed .eyebrow { opacity: 1; transform: none; transition-delay: .05s; }
.en-linea-card.is-revealed .vista-head > p { opacity: 1; transform: none; transition-delay: .55s; }
.en-linea-card.is-revealed .vista-cta { opacity: 1; transform: none; transition-delay: .78s; }
.en-linea-card .vista-cta { margin-top: 2.2rem; }

/* CTA con hover potente — glow más fuerte + micro-scale + flecha que se
   desplaza. Es una micro-interacción funcional (responde al puntero),
   así que NO se apaga con prefers-reduced-motion (solo lo ambiental de
   arriba sí se congela). */
.en-linea-cta { transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background-color .3s; }
.en-linea-cta:hover { transform: translateY(-4px) scale(1.035); box-shadow: 0 22px 50px -14px rgba(0,150,255,.65), 0 6px 16px rgba(0,150,255,.4); }
.en-linea-cta-arrow { transition: transform .3s var(--ease-soft); }
.en-linea-cta:hover .en-linea-cta-arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .en-linea-blob, .en-linea-card, .en-linea-card-glow { animation: none; }
  .en-linea-card .eyebrow, .en-linea-card .vista-head > p, .en-linea-card .vista-cta {
    opacity: 1; transform: none; transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .en-linea-card { background: var(--navy-3); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.vista-head { text-align: center; max-width: 620px; margin: 0 auto 2.4rem; }
.vista-head h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: #fff; margin-top: .3rem; }
.vista-head p { color: var(--text-on-dark-mute); margin-top: .6rem; }

/* Sedes */
.sedes-grid { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 720px) { .sedes-grid { grid-template-columns: 1fr 1fr; } }
.sede-card {
  background: var(--navy-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--navy-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -28px rgba(0,0,0,.5);
  transition: box-shadow .4s var(--ease-soft), border-color .3s;
}
.sede-card:hover { border-color: rgba(0,150,255,.35); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 28px 55px -28px rgba(0,150,255,.28); }

/* Carrusel de fotos por sede — vanilla, sin librerías. Marco con glow
   azul persistente; overflow:hidden en el track recorta los slides. */
.sede-carousel {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--navy-deep);
  box-shadow: inset 0 0 0 1px rgba(0,150,255,.28);
}
.sede-carousel-track {
  display: flex; height: 100%;
  transition: transform .5s var(--ease-soft);
}
.sede-carousel-slide { flex: 0 0 100%; min-width: 0; height: 100%; }
.sede-carousel-slide img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.92);
}
.sede-carousel-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px);
  border: 1px dashed var(--navy-line);
  color: var(--text-on-dark-mute); font-size: .82rem; text-align: center; padding: 1rem;
}
.sede-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(7,25,49,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.sede-carousel-arrow:hover { background: var(--blue); box-shadow: 0 0 18px rgba(0,150,255,.6); transform: translateY(-50%) scale(1.08); }
.sede-carousel-prev { left: .6rem; }
.sede-carousel-next { right: .6rem; }
/* Dots refinados: el botón es un hit-area de 28px (accesible al tap) con
   un punto visual mucho más chico dentro, vía ::before. El activo se
   estira a una cápsula en vez de solo crecer — más elegante que un
   círculo grande. */
.sede-carousel-dots { position: absolute; bottom: .5rem; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; align-items: center; }
.sede-carousel-dot { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.sede-carousel-dot::before {
  content: "";
  width: 5px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.38);
  transition: width .25s var(--ease-soft), background-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.sede-carousel-dot:hover::before { background: rgba(255,255,255,.6); }
.sede-carousel-dot.is-active::before {
  width: 18px;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(0,150,255,.65);
}
@media (prefers-reduced-motion: reduce) {
  /* sin "morphing" de ancho; el color y el glow sí pueden transicionar */
  .sede-carousel-dot::before { transition: background-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft); }
}

.sede-card-body { padding: 1.5rem 1.6rem 1.8rem; }
.sede-card-body h4 { display: flex; align-items: center; gap: .4rem; font-size: 1.15rem; color: #fff; }
.sede-card-body h4 svg { color: var(--blue); }
.sede-lugar { color: var(--text-on-dark-mute); font-size: .92rem; margin-top: .3rem; }
.sede-precio { font-family: var(--sans-display); font-size: 2rem; font-weight: 800; color: var(--blue); margin-top: .7rem; }
.sede-precio span { font-size: 1rem; color: var(--text-on-dark-mute); font-weight: 600; }
.sede-fechas { font-size: .85rem; color: var(--text-on-dark-mute); margin-top: .3rem; }
.sede-card-body .badge { margin-top: .8rem; }
.sede-card-body .btn { margin-top: 1.1rem; }

.check-list { display: grid; gap: .6rem; }
.check-list li { display: flex; align-items: flex-start; gap: .55rem; color: var(--text-on-dark-mute); font-size: .95rem; }
.check-list svg { color: var(--success); flex-shrink: 0; margin-top: .15rem; }

/* =============================================================
   Proceso "Cómo apartar tu lugar" — timeline con conector vertical
   que se dibuja al scroll. Más aire entre título, pasos y CTA.
   ============================================================= */
.proceso { max-width: 620px; margin: 5rem auto 0; }
.proceso-head { text-align: center; margin-bottom: 3rem; }
.proceso-head h4 { font-size: clamp(1.35rem, 3vw, 1.8rem); color: #fff; letter-spacing: -.01em; }
.proceso-head p { margin-top: .6rem; font-size: .95rem; color: var(--text-on-dark-mute); }

.proceso-timeline { display: grid; gap: 2.4rem; }
.proceso-timeline li {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: 1.2rem; align-items: start;
}
/* Conector: cada paso dibuja el tramo que baja hacia el siguiente.
   scaleY(0)→1 con origen arriba = la línea "crece" hacia abajo. */
.proceso-timeline li::before {
  content: ""; position: absolute; left: 21px; top: 46px;
  width: 2px; height: calc(100% + 2.4rem - 46px);
  background: linear-gradient(180deg, var(--blue), rgba(0,150,255,.15));
  transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--ease-out) .15s;
}
.proceso-timeline li:last-child::before { display: none; }
.proceso-timeline li.is-revealed::before { transform: scaleY(1); }

.proceso-num {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: var(--sans-display); font-weight: 800; font-size: 1.05rem;
  display: grid; place-items: center;
  box-shadow: 0 0 0 5px rgba(0,150,255,.13), 0 8px 22px -6px rgba(0,150,255,.7);
  transition: transform .4s var(--ease-bounce);
}
.proceso-timeline li:hover .proceso-num { transform: scale(1.08); }

.proceso-body { padding-top: .35rem; }
.proceso-timeline h5 { font-size: 1.06rem; color: #fff; margin-bottom: .4rem; }
.proceso-timeline p { font-size: .92rem; color: var(--text-on-dark-mute); line-height: 1.6; }

.proceso-cta { margin-top: 3.5rem; }

@media (max-width: 560px) {
  .proceso { margin-top: 4rem; }
  .proceso-timeline { gap: 2rem; }
  .proceso-timeline li { grid-template-columns: 38px 1fr; gap: 1rem; }
  .proceso-timeline li::before { left: 18px; top: 40px; height: calc(100% + 2rem - 40px); }
  .proceso-num { width: 38px; height: 38px; font-size: .95rem; }
  .proceso-cta .btn { width: 100%; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .proceso-timeline li::before { transform: scaleY(1); transition: none; }
}

.vista-cta { text-align: center; margin-top: 2.5rem; }
.cta-note { margin-top: .8rem; font-size: .85rem; color: var(--text-on-dark-mute); }

/* Curva del olvido */
.forgetting-curve {
  margin-top: 1.6rem; background: var(--navy-deep); border: 1px solid var(--navy-line);
  border-radius: var(--radius-md); padding: 1.1rem 1rem .8rem;
}
.forgetting-curve-svg { width: 100%; height: auto; display: block; }
.fc-axis { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.fc-label { fill: var(--text-on-dark-mute); font-size: 9px; font-family: var(--sans-body); }
.fc-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fc-path-forget { stroke: rgba(255,255,255,.3); stroke-width: 2; stroke-dasharray: 4 4; }
.fc-path-method {
  stroke: var(--blue); stroke-width: 2.6;
  filter: drop-shadow(0 0 5px rgba(0,150,255,.75)) drop-shadow(0 0 12px rgba(0,150,255,.35));
}
/* Relleno degradado bajo la curva del método — aparece con el reveal */
.fc-area-method { fill: url(#fcMethodFill); opacity: 0; transition: opacity .9s var(--ease-out); }
.forgetting-curve.is-revealed .fc-area-method { opacity: 1; transition-delay: .9s; }
/* Título del eje X: en su propia línea, un poco más pequeño y sutil */
.fc-axis-title { font-size: 8px; opacity: .8; }
/* Dibujado (stroke-dashoffset) al entrar en viewport — reusa el sistema
   [data-reveal]/.is-revealed compartido, sin observers nuevos. */
.fc-path-forget, .fc-path-method { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.6s var(--ease-out); }
.forgetting-curve.is-revealed .fc-path-forget { stroke-dashoffset: 0; transition-delay: .1s; }
.forgetting-curve.is-revealed .fc-path-method { stroke-dashoffset: 0; transition-delay: .55s; }
.fc-dot { fill: var(--blue); filter: drop-shadow(0 0 4px rgba(0,150,255,.8)); opacity: 0; transition: opacity .4s var(--ease-out); }
.forgetting-curve.is-revealed .fc-dot {
  opacity: 1; transition-delay: 1.5s;
  animation: fcPulse 2.2s ease-in-out 1.7s infinite;
}
@keyframes fcPulse { 0%, 100% { r: 3.5; } 50% { r: 5; } }
@media (prefers-reduced-motion: reduce) {
  .fc-path-forget, .fc-path-method { stroke-dashoffset: 0; transition: none; }
  .fc-dot { opacity: 1; animation: none; }
  .fc-area-method { opacity: 1; transition: none; }
}
.forgetting-curve-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .7rem; }
.fc-legend-item { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-on-dark-mute); }
.fc-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.fc-swatch-forget { background: rgba(255,255,255,.3); }
.fc-swatch-method { background: var(--blue); box-shadow: 0 0 6px rgba(0,150,255,.6); }
.forgetting-curve-copy { margin-top: 1rem; font-size: .92rem; color: var(--text-on-dark); line-height: 1.5; }

/* =============================================================
   10. Método (InClass / OffClass) — "El Curso"
   ============================================================= */
.metodo { background: linear-gradient(180deg, var(--navy), var(--navy-2) 16%); padding-block: 5rem; position: relative; overflow: clip; }
.metodo::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(0,150,255,.2), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.metodo .section-head { max-width: 720px; }

.metodo-grid { display: grid; gap: 1.5rem; margin: 2.6rem 0 3rem; position: relative; }
@media (min-width: 820px) { .metodo-grid { grid-template-columns: 1fr 1fr; } }

/* Las dos cajas comparten estructura, tamaño y tipografía exactos.
   Lo único que cambia entre InClass y OffClass es el color de acento. */
.metodo-card {
  background: var(--navy-3);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--metodo-accent, var(--blue));
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
/* InClass ("En vivo") en rojo tenue y OffClass ("A tu ritmo") en el verde
   ya establecido en el resto del sitio (--success) — mismo patrón de
   acento por tarjeta que ya existía, solo se cambia el color. Todo lo
   demás (borde superior, fondo del tag) se recalcula solo vía
   color-mix() a partir de esta variable. */
.metodo-card-inclass { --metodo-accent: #FF6B6B; }
.metodo-card-offclass { --metodo-accent: var(--success); }

.metodo-tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--metodo-accent, var(--blue));
  background: rgba(0,150,255,.16); /* fallback si color-mix() no está soportado */
  background: color-mix(in srgb, var(--metodo-accent, var(--blue)) 16%, transparent);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem;
}
.metodo-card h3 { color: #fff; font-size: 1.6rem; margin-bottom: 1.4rem; }
.metodo-card .check-list li { color: var(--text-on-dark-mute); }

.metodo-closing {
  text-align: center; max-width: 760px; margin-inline: auto;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--text-on-dark); line-height: 1.5; position: relative;
}
.metodo-closing em { color: var(--blue); font-style: normal; font-weight: 700; }

/* =============================================================
   11. Qué incluye (general) — patrón editorial + comunidad de Discord
   ============================================================= */
.incluye { padding-block: 6rem; background: var(--navy); }

/* Patrón editorial: numeración discreta + un riel vertical corto por
   renglón que "se llena" (crece de 0 a 100% de alto) al mismo tiempo que
   se dibuja el check — reusa el sistema [data-reveal]/.is-revealed, sin
   observers nuevos. Dos columnas equilibradas en desktop. */
.incluye-grid {
  display: grid; gap: 0;
  max-width: 940px; margin: 3rem auto 0;
}
@media (min-width: 820px) {
  .incluye-grid { grid-template-columns: 1fr 1fr; column-gap: 3.2rem; }
}

.incluye-item {
  display: grid; grid-template-columns: 28px 30px 1fr; align-items: start; column-gap: .9rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--navy-line);
  cursor: default;
}

.incluye-marker { display: flex; flex-direction: column; align-items: center; gap: .5rem; align-self: stretch; }
.incluye-num {
  font-family: var(--sans-display); font-size: .7rem; font-weight: 800;
  color: var(--text-on-dark-mute); letter-spacing: .02em;
}
.incluye-rail { flex: 1; width: 2px; min-height: 16px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.incluye-rail-fill {
  display: block; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--success), var(--blue));
  transition: height .6s var(--ease-out) .15s;
}
.incluye-item.is-revealed .incluye-rail-fill { height: 100%; }

.incluye-check {
  flex-shrink: 0; width: 30px; height: 30px; margin-top: .05rem;
  border-radius: 50%; background: rgba(31,183,126,.12);
  display: grid; place-items: center;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.incluye-check svg { width: 16px; height: 16px; }
.check-path {
  fill: none; stroke: var(--success); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset .55s var(--ease-out) .2s;
}
.incluye-item.is-revealed .check-path { stroke-dashoffset: 0; }

.incluye-body { min-width: 0; padding-top: .1rem; }
.incluye-body h4 { font-size: 1.04rem; color: #fff; font-weight: 700; }
.check-desc-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease-soft);
}
.check-desc {
  overflow: hidden;
  font-style: italic; font-size: .88rem; line-height: 1.5;
  color: var(--text-on-dark-mute);
  padding-top: .45rem;
}

.incluye-item:hover .check-desc-wrap,
.incluye-item:focus-visible .check-desc-wrap { grid-template-rows: 1fr; }
.incluye-item:hover .incluye-check,
.incluye-item:focus-visible .incluye-check {
  background: rgba(31,183,126,.22);
  box-shadow: 0 0 16px rgba(31,183,126,.55);
}

/* Táctil: sin hover, la descripción queda visible en gris tenue debajo
   del título (sin necesidad de tap). Área del renglón ya supera 44px. */
@media (hover: none) {
  .check-desc-wrap { grid-template-rows: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .check-path { stroke-dashoffset: 0; transition: none; }
  .incluye-rail-fill { transition: none; height: 100%; }
}

/* Vitrina de materiales — mockups con leve tilt al hover. El tilt es una
   micro-interacción funcional (responde al puntero), así que NO se
   apaga con prefers-reduced-motion — mismo criterio que .selector-card. */
.material-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 3rem auto 0; max-width: 1080px;
}
.material-card {
  background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-lg);
  overflow: hidden; cursor: default;
  box-shadow: 0 20px 44px -30px rgba(0,0,0,.55);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .3s;
}
.material-card:hover, .material-card:focus-visible {
  transform: perspective(800px) rotateX(2deg) translateY(-5px);
  border-color: rgba(0,150,255,.4);
  box-shadow: 0 30px 60px -26px rgba(0,150,255,.32);
}
.material-mockup { aspect-ratio: 3 / 2; background: var(--navy-deep); overflow: hidden; }
.material-mockup img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-soft); }
.material-card:hover .material-mockup img, .material-card:focus-visible .material-mockup img { transform: scale(1.05); }

.material-body { display: flex; align-items: flex-start; gap: .7rem; padding: 1.2rem 1.3rem 1.4rem; }
.material-check {
  flex-shrink: 0; width: 26px; height: 26px; margin-top: .15rem; border-radius: 50%;
  background: rgba(31,183,126,.16); color: var(--success);
  display: grid; place-items: center;
}
.material-body h4 { font-size: .98rem; color: #fff; font-weight: 700; line-height: 1.3; }
.material-body p { font-size: .86rem; color: var(--text-on-dark-mute); margin-top: .3rem; line-height: 1.45; }

/* Los 3 beneficios restantes (no son "material" descargable) en un
   renglón compacto de chips, en vez de repetir el mismo tratamiento
   grande de la vitrina de arriba. */
.incluye-extra {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.8rem;
  max-width: 820px; margin: 2.8rem auto 0;
}
.incluye-extra li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--text-on-dark-mute); }
.incluye-extra svg { color: var(--success); flex-shrink: 0; }

/* Lead magnet (bloque opcional — ver comentario en index.html) */
.lead-magnet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  max-width: 820px; margin: 2.8rem auto 0;
  padding: 2rem 2.2rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--navy-3), var(--navy-2));
  border: 1px solid rgba(0,150,255,.25);
}
.lead-magnet-body { flex: 1 1 260px; }
.lead-magnet-body h3 { font-size: 1.15rem; color: #fff; margin-top: .3rem; }
.lead-magnet-body p { font-size: .88rem; color: var(--text-on-dark-mute); margin-top: .4rem; }
.lead-magnet-form { display: flex; flex-wrap: wrap; gap: .7rem; flex: 1 1 280px; }
.lead-magnet-form input {
  flex: 1 1 160px; min-height: 46px; padding: .6rem .9rem; font: inherit; font-size: .9rem; color: #fff;
  background: var(--navy-deep); border: 1.5px solid var(--navy-line); border-radius: 999px;
}

/* =============================================================
   Comunidad de Discord — el blurple (#5865F2) entra como halo y
   acento sobre el navy del sitio, sin romper el tema oscuro.
   ============================================================= */
.discord-card {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 640px; margin: 3.2rem auto 0;
  padding: 2.4rem 2.2rem;
  text-align: center;
  background: linear-gradient(160deg, rgba(88,101,242,.14), rgba(11,37,69,0) 58%), var(--navy-3);
  border: 1px solid rgba(88,101,242,.4);
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 80px -34px rgba(88,101,242,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.discord-card-halo {
  position: absolute; inset: -45% -25% auto -25%; height: 80%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 0%, rgba(88,101,242,.4), transparent 70%);
  filter: blur(55px); pointer-events: none;
  animation: discordBreathe 6.5s ease-in-out infinite;
}
@keyframes discordBreathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.08); }
}

.discord-card-top { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: 1.2rem; }
.discord-mark {
  width: 54px; height: 54px; border-radius: var(--radius-md);
  display: grid; place-items: center; flex-shrink: 0;
  background: rgba(88,101,242,.18); border: 1px solid rgba(88,101,242,.35);
  transition: transform .45s var(--ease-bounce);
}
/* El SVG del isotipo es monocromo: se tiñe con el blurple vía filtro
   para no depender de un archivo por color. */
.discord-mark img { width: 30px; height: auto; filter: brightness(0) saturate(100%) invert(52%) sepia(72%) saturate(3200%) hue-rotate(226deg) brightness(101%) contrast(94%); }
.discord-card:hover .discord-mark { transform: scale(1.07) rotate(-5deg); }
.discord-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #aab0ff; background: rgba(88,101,242,.16);
  border: 1px solid rgba(88,101,242,.3);
  padding: .32rem .7rem; border-radius: 999px;
}

.discord-card-title { font-size: clamp(1.25rem, 2.8vw, 1.6rem); color: #fff; letter-spacing: -.01em; }
.discord-card-text { margin-top: .7rem; font-size: .94rem; color: var(--text-on-dark-mute); line-height: 1.6; max-width: 44ch; margin-inline: auto; }

/* Prueba social: fila de avatares superpuestos + contador */
.discord-social { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.5rem; flex-wrap: wrap; }
.discord-avatars { display: inline-flex; }
.discord-avatars img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--navy-3);
  margin-left: -10px;
  transition: transform .35s var(--ease-soft);
}
.discord-avatars img:first-child { margin-left: 0; }
.discord-card:hover .discord-avatars img { transform: translateY(-2px); }
.discord-count { font-size: .84rem; font-weight: 600; color: var(--text-on-dark-mute); }

.discord-cta { margin-top: 1.8rem; }
.discord-cta-arrow { transition: transform .3s var(--ease-soft); }
.discord-cta:hover .discord-cta-arrow { transform: translateX(4px); }
.discord-cta-icon { transition: transform .4s var(--ease-bounce); }
.discord-cta:hover .discord-cta-icon { transform: scale(1.15) rotate(-8deg); }

.discord-close-pending { display: none; width: 100%; margin-top: .9rem; font-size: .84rem; color: var(--text-on-dark-mute); font-style: italic; }
.discord-card.is-pending .discord-close-pending { display: block; }
.discord-card.is-pending .btn-discord { pointer-events: none; opacity: .55; }

.btn-discord {
  background: var(--discord); color: #fff;
  box-shadow: 0 10px 26px rgba(88,101,242,.4);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background-color .3s;
}
.btn-discord:hover {
  background: var(--discord-dark);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 50px -14px rgba(88,101,242,.75), 0 6px 16px rgba(88,101,242,.5);
}

/* =============================================================
   Comunidad en 2 columnas — a la izquierda las características con
   iconos y líneas divisorias; a la derecha, la tarjeta de Discord.
   En móvil se apila: features arriba, tarjeta abajo.
   ============================================================= */
.discord-split {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-top: 3.2rem;
}
@media (min-width: 860px) {
  .discord-split { grid-template-columns: 1fr 1fr; gap: 3.2rem; }
}
/* Dentro del grid, la tarjeta ocupa toda su columna (sin el centrado
   ni el ancho máximo que usa cuando va suelta). */
.discord-split .discord-card { margin: 0; max-width: none; }

.discord-features { display: flex; flex-direction: column; }
.discord-features li {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--navy-line);
}
.discord-features li:first-child { padding-top: 0; }
.discord-features li:last-child { border-bottom: 0; }
.discord-feature-ic {
  flex-shrink: 0; width: 24px; height: 24px;
  display: grid; place-items: center; color: var(--blue);
}
.discord-feature-label {
  font-family: var(--sans-display);
  font-weight: 600; font-size: clamp(1rem, 1.2vw, 1.08rem);
  color: #fff; letter-spacing: -.01em; line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .discord-card-halo { animation: none; }
}

/* =============================================================
   12. Resultados
   ============================================================= */
.resultados { background: linear-gradient(180deg, var(--navy), var(--navy-2) 14%); padding-block: 5rem; }

/* Estrellas — relleno POR ESTRELLA, no por fila completa. Cada .star-unit
   tiene su propia estrella vacía (base) y una llena encima recortada con
   clip-path según --star-fill (0/50/100%…). Al ser por-estrella, ni los
   gaps entre iconos ni la forma del pentágono distorsionan el porcentaje:
   una calificación de 4.5 SIEMPRE se ve como 4 llenas + 1 exactamente a
   la mitad, sin importar el ancho total de la fila. */
.star-rating { display: inline-flex; gap: 2px; line-height: 0; }
.star-unit { position: relative; display: inline-block; }
.star-unit svg { display: block; }
.star-empty { color: rgba(255,255,255,.18); }
.star-fill {
  position: absolute; inset: 0;
  color: #FFB800;
  clip-path: inset(0 calc(100% - var(--star-fill, 0%)) 0 0);
}
.testimonio-card .star-rating { margin-bottom: .8rem; }

.rating-summary {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-bottom: 2.2rem;
}
.rating-summary .star-rating { gap: 4px; }
.rating-summary-text { font-size: .95rem; color: var(--text-on-dark-mute); }
.rating-summary-text strong { font-family: var(--sans-display); font-size: 1.4rem; color: #fff; }

.universidades-tira { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 3rem; }

/* auto-fit en vez de un conteo de columnas fijo: la última fila nunca
   deja huecos vacíos sin importar cuántos testimonios haya. */
.testimonios-grid {
  display: grid; gap: 1.2rem; margin-bottom: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 1100px; margin-inline: auto;
}
.testimonio-card {
  background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 36px -26px rgba(0,0,0,.5);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .35s var(--ease-soft);
}
.testimonio-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,150,255,.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 26px 50px -26px rgba(0,150,255,.32), 0 0 0 1px rgba(0,150,255,.16);
}
.testimonio-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; background: var(--blue-soft);
  margin-bottom: 1rem;
  transition: transform .4s var(--ease-bounce);
}
.testimonio-card:hover .testimonio-avatar { transform: scale(1.08); }
.testimonio-card blockquote { color: var(--text-on-dark); font-size: .92rem; line-height: 1.5; }
.testimonio-card figcaption { margin-top: 1rem; font-size: .82rem; color: var(--text-on-dark-mute); font-weight: 600; }

/* 6 slots → 3 columnas en desktop (2 filas exactas, sin huecos). */
/* Galería de matrículas — filmstrip con scroll-snap nativo (funciona con
   touch/trackpad sin JS) + flechas y contador para navegación explícita.
   Se prefiere sobre un grid fijo porque el número de comprobantes crece
   con el tiempo sin dejar huecos ni exigir rediseño. */
.matriculas-gallery { position: relative; max-width: 100%; }
.matriculas-track {
  display: flex; gap: 1rem;
  overflow-x: auto; overflow-y: visible; /* si no, overflow-x:auto recorta el hover en Y */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scroll-padding-inline: 1.25rem;
  padding: .3rem 1.25rem 1rem;
  margin-inline: -1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Fundido en los bordes: revela el navy real de fondo (no un color
     pintado encima), así que nunca desentona. mask-image no afecta el
     hit-test — clic/swipe siguen funcionando bajo la zona difuminada. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.matriculas-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .matriculas-track { scroll-behavior: auto; } }
@media (max-width: 640px) {
  .matriculas-track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
}
.matricula-slide {
  flex: 0 0 auto; width: 200px; aspect-ratio: 9/16;
  scroll-snap-align: start;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--navy-deep);
  border: 1px solid var(--navy-line);
  box-shadow: inset 0 0 0 1px rgba(0,150,255,.22);
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.matricula-slide:hover { box-shadow: inset 0 0 0 1px rgba(0,150,255,.45), 0 16px 34px -18px rgba(0,150,255,.35); transform: translateY(-3px); }
.matricula-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 640px) { .matricula-slide { width: 230px; } }

.matriculas-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(7,25,49,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 1.35rem; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.matriculas-arrow:hover { background: var(--blue); box-shadow: 0 0 18px rgba(0,150,255,.6); transform: translateY(-50%) scale(1.08); }
.matriculas-prev { left: -6px; }
.matriculas-next { right: -6px; }
@media (min-width: 640px) { .matriculas-prev { left: -18px; } .matriculas-next { right: -18px; } }
.matriculas-counter { text-align: center; margin-top: .4rem; font-size: .8rem; color: var(--text-on-dark-mute); }

/* =============================================================
   14. Equipo
   ============================================================= */
.equipo { padding-block: 5rem; background: var(--navy-2); }
/* 2 tarjetas placeholder mientras se confirma el resto del equipo. */
.equipo-grid { display: grid; gap: 1.3rem; max-width: 640px; margin-inline: auto; }
@media (min-width: 640px) { .equipo-grid { grid-template-columns: repeat(2, 1fr); } }
.equipo-card {
  text-align: center; padding: 2rem 1.4rem; border-radius: var(--radius-lg);
  border: 1px solid var(--navy-line); background: var(--navy-3);
}
.equipo-avatar {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 1rem;
  object-fit: cover; background: var(--blue-soft);
}
.equipo-card h4 { font-size: 1.1rem; color: #fff; }
.equipo-merito { font-size: .85rem; color: var(--blue); font-weight: 700; margin-top: .3rem; }

/* =============================================================
   15. FAQ
   ============================================================= */
/* El checkout que precede a esta sección también usaba var(--navy) plano
   — sin transición entre ambas. Mismo recurso de degradado + glow que
   .modalidad-vista[online] y .webinar, para que el FAQ se lea como su
   propio cierre del recorrido y no como una continuación del checkout. */
.faq {
  position: relative; overflow: clip;
  background: linear-gradient(180deg, var(--navy), var(--navy-2) 18%, var(--navy) 90%);
  padding-block: 5.5rem;
}
.faq::before {
  content: ""; position: absolute; inset: -15% -10% auto -10%; height: 55%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(0,150,255,.14), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.faq .container { position: relative; }
.faq-list { max-width: 780px; margin: 2.4rem auto 0; display: grid; gap: .7rem; }
.faq-item {
  background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-md);
  padding: 0;
}
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem; font-weight: 700; color: #fff; font-size: .98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* svg es display:block por el reset global — sin este wrapper con
   flex:1/min-width:0, el texto de la pregunta (un nodo de texto suelto
   dentro de un flex container) puede negarse a encoger y desbordar en
   vez de envolver en varias líneas junto al ícono. */
.faq-q { flex: 1; min-width: 0; overflow-wrap: break-word; }
.faq-item summary svg { color: var(--blue); flex-shrink: 0; transition: transform .35s var(--ease-out); }
.faq-item[open] summary svg { transform: rotate(45deg); }

/* Apertura/cierre animado (altura real, no el salto instantáneo nativo
   de <details>) — script.js intercepta el clic en <summary> y anima
   .faq-answer.style.height entre 0 y scrollHeight; ver initFaqAnimado.
   Sin JS o con prefers-reduced-motion, <details> sigue funcionando con
   su comportamiento nativo (overflow:hidden simplemente recorta el salto
   en vez de animarlo). */
.faq-answer { overflow: hidden; }
.faq-answer p { padding: 0 1.4rem 1.3rem; color: var(--text-on-dark-mute); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none !important; }
}

/* =============================================================
   16. CTA final
   ============================================================= */
.cta-final { position: relative; background: linear-gradient(180deg, var(--navy), var(--navy-2) 22%); padding-block: 5.5rem; overflow: clip; text-align: center; }
.cta-final-glow {
  position: absolute; inset: -20%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,150,255,.32), transparent 70%);
  filter: blur(70px);
}
.cta-final-inner { position: relative; }
.cta-final h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); max-width: 18ch; margin-inline: auto; }
.cta-final-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* =============================================================
   17. Footer
   ============================================================= */
.footer { background: linear-gradient(180deg, var(--navy-2), var(--navy-deep) 30%); padding-block: 3.5rem 1.5rem; }
.footer-inner { display: grid; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--navy-line); }
@media (min-width: 780px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; } }
.footer-brand p { color: var(--text-on-dark-mute); font-size: .88rem; margin-top: .8rem; max-width: 30ch; }
.footer-links { display: grid; gap: .6rem; }
.footer-links a { color: var(--text-on-dark-mute); font-size: .9rem; transition: color .3s; }
.footer-links a:hover { color: #fff; }
.footer-contact { display: grid; gap: .8rem; align-content: start; }
.footer-whatsapp { display: inline-flex; align-items: center; gap: .5rem; color: var(--success); font-weight: 700; font-size: .92rem; }
.footer-social { color: var(--text-on-dark-mute); font-size: .88rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; padding-top: 1.4rem; font-size: .78rem; color: var(--text-on-dark-mute); }
.footer-credits a { color: #7fc4ff; }

/* =============================================================
   18. Sticky CTA (móvil)
   ============================================================= */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(7,25,49,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px rgba(0,0,0,.3);
}
@media (min-width: 960px) { .sticky-cta { display: none; } }

/* =============================================================
   19. Créditos page
   ============================================================= */
.page-credits { padding: calc(var(--nav-h) + 3rem) 0 5rem; max-width: 720px; margin-inline: auto; }
.page-credits h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-bottom: .6rem; color: #fff; }
.page-credits > .container > p { color: var(--text-on-dark-mute); margin-bottom: 2rem; }
.credits-list { display: grid; gap: 1rem; }
.credits-list li { background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-sm); padding: 1rem 1.25rem; font-size: .88rem; color: var(--text-on-dark-mute); }
.credits-list a { color: var(--blue); }
.credits-list a:hover { text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 2rem; color: var(--text-on-dark-mute); }

/* =============================================================
   20. Video de bienvenida — miniatura real + línea de duración
   ============================================================= */
.video-thumb-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.85); }
.video-duration-line {
  max-width: 900px; margin: .9rem auto 0; text-align: center;
  font-size: .9rem; color: var(--text-on-dark-mute);
}

/* =============================================================
   21. Diagnóstico por estado (bloque 3)
   ============================================================= */
.diagnostico { background: var(--navy-2); padding-block: 6rem; }

/* El <select> es el control protagonista de la sección: una sola pieza
   grande, centrada, en forma de píldora. Se quitó la línea de ayuda
   repetida debajo (decía lo mismo que el subtítulo de arriba, dos veces
   la misma frase es justo el tipo de "amontonado" que no queremos). */
.diagnostico-form { max-width: 420px; margin: 0 auto 3.5rem; }
.diagnostico-select-wrap { position: relative; }
.diagnostico-select-icon {
  position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%);
  color: var(--blue); pointer-events: none;
}
.diagnostico-form select {
  width: 100%; min-height: 58px; padding: .9rem 2.6rem .9rem 3.2rem;
  font: inherit; font-size: 1.02rem; font-weight: 700; color: #fff;
  background: var(--navy-3); border: 1.5px solid var(--navy-line); border-radius: 999px;
  appearance: none; text-align: center; text-align-last: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 1.3rem center; background-size: 16px;
  transition: border-color .3s, box-shadow .3s;
}
.diagnostico-form select:hover { border-color: rgba(0,150,255,.5); }
.diagnostico-form select:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,150,255,.16); }

/* Panel de resultados — se reserva una altura mínima para que no haya
   salto de layout entre estados con distinta cantidad de tarjetas. Cada
   vez que se re-renderiza (cambio de estado) es contenido NUEVO en el
   DOM, así que la animación de entrada se dispara sola sin JS extra. */
.diagnostico-panel { max-width: 860px; margin: 0 auto; min-height: 200px; }
.diag-estado-nombre {
  text-align: center; font-family: var(--sans-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: #7fc4ff; margin-bottom: 1.6rem;
}
.diag-contexto-nota {
  max-width: 540px; margin: 0 auto 1.8rem; text-align: center;
  font-size: .875rem; color: var(--text-on-dark-mute); line-height: 1.6;
}
.diag-cards {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  animation: diagPanelIn .45s var(--ease-soft);
}
@keyframes diagPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .diag-cards { animation: none; } }

/* Sin borde — la separación entre tarjeta y fondo viene solo de una
   sombra suave. Una línea menos por tarjeta es, multiplicado por 2–5
   tarjetas por estado, la diferencia entre "ordenado" y "amontonado". */
.diag-card {
  background: var(--navy-3); border-radius: var(--radius-lg);
  padding: 1.9rem 1.8rem;
  box-shadow: 0 20px 44px -30px rgba(0,0,0,.55);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.diag-card:hover, .diag-card:focus-visible { transform: translateY(-3px); box-shadow: 0 30px 60px -26px rgba(0,150,255,.26); }

.diag-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: 1.2rem; }
.diag-card-top h4 { font-size: 1.05rem; color: #fff; line-height: 1.3; letter-spacing: -0.01em; }

.diag-info-btn {
  flex-shrink: 0; width: 26px; height: 26px; margin-top: -.2rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-on-dark-mute);
  transition: color .2s, background-color .2s;
}
.diag-info-btn:hover, .diag-info-btn:focus-visible { color: var(--blue); background: var(--blue-soft); }

/* El corte es el dato héroe de la tarjeta: el número más grande, con
   tracking ligeramente negativo (a mayor tamaño, menos espacio entre
   letras — ver guía tipográfica). */
.diag-hero { margin-bottom: 1.1rem; }
.diag-hero-value {
  display: block; font-family: var(--sans-display); font-size: 2.6rem; font-weight: 800;
  color: var(--blue); line-height: 1; letter-spacing: -0.02em;
}
.diag-hero-value small { font-size: 1.15rem; color: var(--text-on-dark-mute); font-weight: 600; margin-left: .2rem; }
.diag-hero-label { display: block; font-size: .8rem; color: var(--text-on-dark-mute); margin-top: .35rem; }
.diag-corte-pending { font-size: .92rem; color: var(--text-on-dark); line-height: 1.6; margin-bottom: 1.1rem; }

/* Competencia + fecha viven en un solo renglón discreto en vez de dos
   párrafos separados — mismo dato, menos volumen visual. */
.diag-meta { font-size: .86rem; color: var(--text-on-dark-mute); line-height: 1.6; }
.diag-meta strong { color: var(--blue); font-weight: 700; }
.diag-meta-sep { opacity: .4; margin: 0 .15rem; }
.diag-bar-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: .65rem; }
.diag-bar-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--blue); border-radius: 999px; box-shadow: 0 0 6px rgba(0,150,255,.45); }

.diag-notas { font-size: .82rem; color: var(--text-on-dark-mute); margin-top: .85rem; line-height: 1.6; font-style: italic; }

/* Confianza: un punto de color + texto discreto, sin caja — es un
   metadato de confianza, no el mensaje principal, y no debe competir
   visualmente con el número grande de arriba. */
.diag-confianza {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.2rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-on-dark-mute);
}
.diag-confianza i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.diag-confianza-verificado { color: #3fe0a5; }
.diag-confianza-estimado, .diag-confianza-parcial { color: #ffc773; }

/* Calculadora UdeG (bloque 5.3) — una línea con guía inferior, no una
   caja anidada dentro de la tarjeta (menos "caja dentro de caja"). */
.diag-calc { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--navy-line); }
.diag-calc label { display: block; font-size: .76rem; font-weight: 700; color: var(--text-on-dark-mute); margin-bottom: .55rem; text-transform: uppercase; letter-spacing: .03em; }
.diag-calc input {
  width: 100%; padding: .4rem 0; font: inherit; font-size: 1.15rem; font-weight: 700; color: #fff;
  background: transparent; border: 0; border-bottom: 1.5px solid var(--navy-line);
  transition: border-color .3s;
}
.diag-calc input:focus { outline: none; border-color: var(--blue); }
.diag-calc-result { margin-top: .85rem; font-size: .88rem; color: var(--text-on-dark); line-height: 1.6; }
.diag-calc-result strong { color: var(--success); }
.diag-calc-result.is-warn strong { color: #ffc773; }

/* =============================================================
   Tarjeta del examen simulacro — "recurso protegido" que invita a
   desbloquearse: preview velado + sello de candado, borde azul con
   shimmer y badges de valor. Dos estados (próximamente / disponible)
   controlados por MEDCORE_CONFIG.simulacroDisponible.
   ============================================================= */
.simulacro-card {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 780px; margin: 3rem auto 0;
  display: grid; gap: 1.8rem;
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(0,150,255,.10), rgba(11,37,69,0) 55%),
    var(--navy-3);
  border: 1px solid rgba(0,150,255,.42);
  box-shadow:
    0 0 0 1px rgba(0,150,255,.12),
    0 34px 80px -34px rgba(0,150,255,.5),
    inset 0 1px 0 rgba(255,255,255,.07);
}
@media (min-width: 700px) {
  .simulacro-card { grid-template-columns: 200px 1fr; align-items: center; gap: 2.2rem; padding: 2.4rem 2.6rem; }
}
.simulacro-glow {
  position: absolute; inset: -40% -20% auto -20%; height: 80%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 0%, rgba(0,150,255,.34), transparent 70%);
  filter: blur(55px); pointer-events: none;
  animation: simulacroBreathe 6s ease-in-out infinite;
}
@keyframes simulacroBreathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.07); }
}

/* Preview velado: la imagen va difuminada + oscurecida bajo un velo,
   así se intuye que hay contenido real sin poder leerlo. */
.simulacro-preview {
  position: relative; overflow: hidden;
  aspect-ratio: 1000 / 1400; max-width: 200px; margin-inline: auto; width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
.simulacro-preview img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  filter: blur(4px) saturate(.75) brightness(.62);
  transform: scale(1.06); /* evita bordes translúcidos por el blur */
}
.simulacro-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,37,69,.55), rgba(7,25,49,.9));
}
.simulacro-seal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: rgba(0,150,255,.9);
  box-shadow: 0 0 0 8px rgba(0,150,255,.16), 0 10px 26px rgba(0,150,255,.5);
}
.simulacro-seal::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid rgba(0,150,255,.6);
  animation: simulacroPulse 2.6s ease-out infinite;
}
@keyframes simulacroPulse {
  0% { transform: scale(.9); opacity: .9; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { opacity: 0; }
}

.simulacro-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.simulacro-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px;
  color: var(--text-on-dark-mute);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.simulacro-badge-free {
  color: #3fe0a5; background: var(--success-soft); border-color: rgba(31,183,126,.4);
}
.simulacro-body h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); color: #fff; line-height: 1.2; letter-spacing: -.01em; }
.simulacro-body > p { margin-top: .7rem; font-size: .92rem; color: var(--text-on-dark-mute); line-height: 1.6; }
.simulacro-cta { margin-top: 1.5rem; }
.simulacro-cta:hover { box-shadow: 0 22px 50px -14px rgba(0,150,255,.7), 0 6px 16px rgba(0,150,255,.45); }
.simulacro-cta:hover .simulacro-cta-icon { animation: simulacroBounce .55s var(--ease-bounce); }
@keyframes simulacroBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(4px); }
  70% { transform: translateY(-2px); }
}

/* Estado "próximamente": mismo peso visual que el botón real, pero
   inerte y con un shimmer que lo hace ver como algo que aún no abre. */
.simulacro-soon { margin-top: 1.5rem; }
.simulacro-soon-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.7rem; border-radius: 999px;
  font-family: var(--sans-display); font-weight: 700; font-size: .95rem;
  color: var(--text-on-dark-mute); cursor: not-allowed;
  background: rgba(255,255,255,.05); border: 1px solid rgba(0,150,255,.32);
}
.simulacro-soon-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(0,150,255,.28) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: simulacroShimmer 3.4s ease-in-out infinite;
}
@keyframes simulacroShimmer {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
.simulacro-soon-note { margin-top: .8rem; font-size: .84rem; color: var(--text-on-dark-mute); font-style: italic; }

/* En móvil las etiquetas de estos CTAs son largas y .btn trae
   white-space:nowrap, así que no pueden encoger: forzaban el ancho de
   la tarjeta y quedaban recortadas por su overflow:hidden. Aquí se les
   permite envolver y ocupar el ancho completo. */
@media (max-width: 620px) {
  .simulacro-cta, .simulacro-soon-btn {
    white-space: normal; text-align: center;
    width: 100%; padding-inline: 1.1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   Botones a prueba de móvil: por defecto .btn trae white-space:nowrap,
   por lo que un texto largo se desbordaba del contenedor o de la
   pantalla. En pantallas chicas se permite que el texto envuelva, el
   botón nunca supera el ancho disponible y las palabras largas se
   parten antes que desbordar. Aplica a TODOS los botones del sitio.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .btn {
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
    height: auto;
    text-align: center;
  }
  /* el texto interno puede encoger dentro del flex sin empujar al ícono */
  .btn > * { min-width: 0; }
  /* padding horizontal un poco más compacto para dar aire al texto */
  .btn-lg, .btn-xl { padding-inline: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .simulacro-glow, .simulacro-seal::after, .simulacro-soon-btn::after { animation: none; }
  .simulacro-cta:hover .simulacro-cta-icon { animation: none; }
}

/* =============================================================
   22. Método — curva del olvido (bloque 4)
   ============================================================= */
.metodo-olvido { background: linear-gradient(180deg, var(--navy-2), var(--navy) 16%); padding-block: 5rem; }
.metodo-olvido .section-head p { color: var(--blue); font-weight: 600; }
.metodo-olvido .forgetting-curve { max-width: 720px; margin-inline: auto; }
.fc-tick { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.metodo-olvido-cta { text-align: center; max-width: 640px; margin: 2.2rem auto 0; }
.metodo-olvido-cta .forgetting-curve-copy { font-size: 1.05rem; margin-bottom: 1.4rem; }

/* =============================================================
   23. Selector — botón preferido igual altura (bloque 2)
   ============================================================= */
.selector-card { display: flex; flex-direction: column; }
.selector-bullets { flex: 1; }

/* =============================================================
   25. Comparativa (bloque 5) — sección con identidad propia
   ============================================================= */
.comparativa { position: relative; overflow: clip; background: var(--navy-2); padding-block: 6rem; }
.comparativa-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 55%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 0%, rgba(0,150,255,.16), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.comparativa .container { position: relative; z-index: 1; }
.comparativa-head { max-width: 680px; }
.comparativa-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.comparativa-head p { margin-top: .5rem; }
.comparativa-table-wrap { max-width: 780px; margin: 2.4rem auto 0; overflow-x: auto; }
.comparativa-table { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; }
.comparativa-table thead th {
  text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-on-dark-mute); padding: 0 1rem .4rem;
}
.comparativa-table tbody tr { background: var(--navy-3); }
.comparativa-table th[scope="row"] {
  text-align: left; font-weight: 700; color: #fff; font-size: .86rem;
  padding: .7rem .9rem; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-left: 1px solid var(--navy-line); border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line);
}
.comparativa-table td { padding: .7rem .9rem; font-size: .84rem; border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); }
.comparativa-table td:last-child { border-right: 1px solid var(--navy-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.comp-rival { color: var(--text-on-dark-mute); }
.comp-medcore { color: var(--text-on-dark); font-weight: 700; }

/* svg es display:block por el reset global — sin .comp-cell como wrapper
   flex, el ícono se sale del renglón de texto y el checkmark/X queda
   "desfasado" en su propia línea en vez de compartir renglón con el
   texto. align-items:flex-start (no center) para que, si el texto sí
   envuelve a una segunda línea, el ícono quede alineado con la primera
   palabra en vez de centrado a media altura del bloque completo. */
.comp-cell { display: flex; align-items: flex-start; gap: .5rem; }
.comp-x-icon { color: #FF5C5C; flex-shrink: 0; margin-top: .15rem; }
.comp-check-icon {
  color: var(--success); flex-shrink: 0; margin-top: .15rem;
  filter: drop-shadow(0 0 5px rgba(31,183,126,.75)) drop-shadow(0 0 10px rgba(31,183,126,.35));
}

.comp-cell-precio { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.comp-precio-btn { align-self: flex-start; }

/* Filas escalonadas al entrar en viewport (JS añade .is-revealed con
   delay incremental — ver initComparativa en script.js). Un toque de
   scale además del fade/translate le da más vida a la entrada. */
[data-comparativa-row] { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft); }
[data-comparativa-row].is-revealed { opacity: 1; transform: none; }

.comparativa-closing { text-align: center; max-width: 620px; margin: 1.8rem auto 0; font-size: 1.05rem; color: #fff; font-weight: 600; }

/* En móvil, cada característica es su propia tarjeta de vidrio, con las
   dos columnas (rival / MedCore) apiladas de ancho completo en vez de
   una junto a otra — la versión de 2 columnas lado a lado se veía
   apretada con textos largos como "Presencial y en línea, con acceso a
   ambas". Ancho completo deja que el texto respire y envuelva normal. */
@media (max-width: 640px) {
  .comparativa-table-wrap { margin-top: 1.4rem; }
  .comparativa-table { border-spacing: 0 .8rem; }
  .comparativa-table thead { display: none; }
  .comparativa-table, .comparativa-table tbody, .comparativa-table tr, .comparativa-table th, .comparativa-table td { display: block; width: 100%; }
  .comparativa-table tr {
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.2rem 1.2rem;
  }
  .comparativa-table th[scope="row"] {
    border: 0; border-radius: 0;
    padding: 0 0 .75rem; margin-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.09);
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-on-dark-mute);
  }
  .comparativa-table td { border: 0; padding: 0 0 .9rem; font-size: .88rem; }
  .comparativa-table td:last-child { padding-bottom: 0; }
  .comparativa-table td::before {
    content: attr(data-label); display: block; font-size: .64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.4); margin-bottom: .35rem;
  }
  .comp-cell-precio { align-items: flex-start; }
  .comp-precio-btn { margin-top: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-comparativa-row] { transition: opacity .01s linear; transform: none; }
}
@media (prefers-reduced-transparency: reduce) and (max-width: 640px) {
  .comparativa-table tr { background: var(--navy-3); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* =============================================================
   26. Checkout (bloque 6)
   ============================================================= */
.checkout { background: linear-gradient(180deg, var(--navy-2), var(--navy) 14%); padding-block: 5rem; }
.checkout-grid { display: grid; gap: 1.5rem; max-width: 1080px; margin: 2.6rem auto 0; }
@media (min-width: 860px) { .checkout-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.checkout-card {
  display: flex; flex-direction: column;
  background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-lg);
  padding: 1.8rem 1.7rem; position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -30px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(20px);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.checkout-card.is-revealed { opacity: 1; transform: none; }
.checkout-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -26px rgba(0,150,255,.28), 0 0 0 1px rgba(0,150,255,.2); }
.checkout-card.is-revealed:hover { transform: translateY(-4px); }

/* Borde con gradiente animado muy lento — casi imperceptible, tal como
   pide el encargo ("nada de rotaciones ni escalados agresivos"). */
.checkout-card.is-recomendada {
  border-color: transparent;
  background:
    linear-gradient(var(--navy-3), var(--navy-3)) padding-box,
    linear-gradient(120deg, var(--blue), var(--success), var(--blue)) border-box;
  background-size: 100% 100%, 240% 240%;
  border: 1.5px solid transparent;
  animation: checkoutGradientShift 9s ease-in-out infinite;
}
@keyframes checkoutGradientShift {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}
.checkout-card.is-recomendada::before {
  content: "Recomendada"; position: absolute; top: -12px; left: 1.6rem;
  background: var(--blue); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,150,255,.5);
}

/* Tarjeta "En Línea" — trato visual premium propio, distinto del anillo
   .is-recomendada (que depende de MEDCORE_CONFIG.checkoutRecomendado, aún
   ⚠️ DATO PENDIENTE). Este es solo un tratamiento de diseño: fondo con
   degradado más rico + borde animado sutil, no una etiqueta de "mejor
   opción" — el texto de la insignia ("Mejor precio") es un hecho, no una
   recomendación editorial. */
.checkout-card-premium {
  background:
    linear-gradient(var(--navy-3), var(--navy-3)) padding-box,
    linear-gradient(135deg, rgba(0,150,255,.65), rgba(31,183,126,.5), rgba(0,150,255,.65)) border-box;
  background-size: 100% 100%, 220% 220%;
  border: 1.5px solid transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px -28px rgba(0,150,255,.4);
  animation: checkoutGradientShift 10s ease-in-out infinite;
}
.checkout-card-premium:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 36px 80px -26px rgba(0,150,255,.5), 0 0 0 1px rgba(0,150,255,.25);
}
.checkout-premium-badge {
  position: absolute; top: -12px; left: 1.6rem;
  background: linear-gradient(120deg, var(--blue), var(--success));
  color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,150,255,.5);
}
.checkout-card-premium .checkout-card-precio { color: #fff; text-shadow: 0 0 22px rgba(0,150,255,.55); }

.checkout-card-head { margin-bottom: .9rem; }
.checkout-card-head h3 { font-size: 1.2rem; color: #fff; }
.checkout-card-precio { font-family: var(--sans-display); font-size: 2.1rem; font-weight: 800; color: var(--blue); margin-top: .5rem; }
.checkout-card-precio span { font-size: 1rem; color: var(--text-on-dark-mute); font-weight: 600; }
.checkout-card-plazo { font-size: .875rem; color: var(--text-on-dark-mute); margin-top: .35rem; }

/* Insignia MSI — un detalle "fancy" con degradado propio (distinto del
   badge "Mejor precio" de arriba) para que Meses Sin Intereses destaque
   como un beneficio concreto de pago, no solo texto suelto. */
.checkout-msi-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .8rem; padding: .35rem .75rem .35rem .6rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em; color: #fff;
  background: linear-gradient(120deg, rgba(0,150,255,.28), rgba(31,183,126,.22));
  border: 1px solid rgba(0,150,255,.35);
  border-radius: 999px;
}
.checkout-msi-badge svg { flex-shrink: 0; color: var(--blue); }
.checkout-card-fecha { font-size: .9rem; color: var(--text-on-dark-mute); margin-top: .8rem; }
.checkout-card .badge { margin-top: .7rem; align-self: flex-start; }
.checkout-bullets { margin: 1.2rem 0 1.4rem; flex: 1; }
.checkout-bullets li { font-size: .9rem; }

.checkout-btn { margin-top: auto; }
.checkout-btn:active { transform: scale(.97); transition-duration: .1s; }

.checkout-trust-row { display: flex; justify-content: center; gap: 1rem; margin-top: .9rem; flex-wrap: wrap; }
.checkout-trust-row span { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text-on-dark-mute); }
.checkout-trust-row svg { color: var(--blue); flex-shrink: 0; }

.checkout-risk {
  max-width: 780px; margin: 3rem auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.6rem;
  text-align: center;
}
.checkout-risk-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--text-on-dark-mute); }
.checkout-risk-item svg { color: var(--blue); flex-shrink: 0; }
.checkout-risk-whatsapp { color: var(--success); font-weight: 700; }
.checkout-risk-whatsapp svg { color: var(--success); }
.checkout-risk-whatsapp:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .checkout-card { transition: opacity .01s linear; transform: none; opacity: 1; }
  .checkout-card.is-recomendada, .checkout-card-premium { animation: none; }
  .checkout-btn:active { transform: none; }
}

/* =============================================================
   20 bis. Reduced motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .shape { animation: none; }
  html { scroll-behavior: auto; }
  /* NO se desactivan: reveals, hover, tilt, barras, underline */
}

/* =============================================================
   Página REGALOS (regalos.html) — exámenes simulacro gratis
   ============================================================= */
.page-regalos { padding-bottom: 0; }

.regalos-hero {
  position: relative; overflow: clip;
  padding: calc(var(--nav-h) + 4rem) 0 4.5rem;
  background: linear-gradient(180deg, var(--navy-deep), var(--navy) 70%);
  text-align: center;
}
.regalos-hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.regalos-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.regalos-hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.2rem); color: #fff; font-weight: 800;
  letter-spacing: -.02em; margin-top: .4rem;
}
.regalos-hero p { margin: 1.2rem auto 0; max-width: 56ch; color: var(--text-on-dark-mute); font-size: clamp(1rem, 2vw, 1.12rem); }
.regalos-hero-meta {
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: center; margin-top: 1.8rem;
}
.regalos-hero-meta span { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--text-on-dark); }
.regalos-hero-meta svg { color: var(--success); flex-shrink: 0; }

.regalos-listado { background: var(--navy); padding-block: 4.5rem 5.5rem; position: relative; }
.regalos-grid {
  display: grid; gap: 1.6rem; margin: 2.6rem auto 0; max-width: 1080px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.regalo-card {
  display: flex; flex-direction: column;
  background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-lg);
  padding: 1.9rem 1.8rem;
  box-shadow: 0 22px 48px -30px rgba(0,0,0,.55);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .3s;
}
.regalo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,150,255,.42);
  box-shadow: 0 32px 64px -28px rgba(0,150,255,.34);
}
.regalo-card.is-locked { opacity: .72; }
.regalo-card.is-locked:hover { transform: none; border-color: var(--navy-line); box-shadow: 0 22px 48px -30px rgba(0,0,0,.55); }

.regalo-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.regalo-num { font-family: var(--sans-display); font-size: 1.6rem; font-weight: 800; color: rgba(255,255,255,.22); letter-spacing: -.02em; }
.regalo-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
  color: #3fe0a5; background: var(--success-soft); border: 1px solid rgba(31,183,126,.4);
}
.regalo-badge-soon { color: #ffc773; background: var(--warn-soft); border-color: rgba(232,163,61,.4); }

.regalo-card h3 { font-size: 1.14rem; color: #fff; line-height: 1.3; }
.regalo-card > p { margin-top: .55rem; font-size: .9rem; color: var(--text-on-dark-mute); line-height: 1.6; flex: 1; }

.regalo-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 1.4rem; }
.regalo-tags li {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: var(--text-on-dark-mute);
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--navy-line);
}
.regalo-tags svg { color: var(--blue); flex-shrink: 0; }

.regalo-cta { margin-top: auto; }
.regalo-cta-arrow { transition: transform .3s var(--ease-soft); }
.regalo-cta:hover .regalo-cta-arrow { transform: translateX(4px); }
.regalo-cta-locked {
  background: rgba(255,255,255,.05); color: var(--text-on-dark-mute);
  border: 1px solid var(--navy-line); cursor: not-allowed;
}
.regalo-cta-locked:hover { transform: none; }

.regalos-cta { text-align: center; margin-top: 3.5rem; }
.regalos-cta p { color: var(--text-on-dark-mute); margin-bottom: 1.1rem; font-size: 1rem; }

/* =============================================================
   Regalos — HUB de categorías (regalos.html)
   ============================================================= */
.regalos-hub { background: var(--navy); padding-block: 4rem 5.5rem; position: relative; }
.hub-grid {
  display: grid; gap: 1.6rem; max-width: 1080px; margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.hub-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-lg);
  padding: 2rem 1.9rem; color: inherit; text-decoration: none;
  box-shadow: 0 22px 48px -30px rgba(0,0,0,.55);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .3s;
}
.hub-card:hover { transform: translateY(-6px); border-color: rgba(0,150,255,.45); box-shadow: 0 34px 66px -28px rgba(0,150,255,.36); }
.hub-card-glow {
  position: absolute; inset: -40% -30% auto -30%; height: 70%; z-index: -1;
  background: radial-gradient(50% 60% at 50% 0%, rgba(0,150,255,.28), transparent 70%);
  filter: blur(45px); opacity: 0; transition: opacity .4s var(--ease-soft);
}
.hub-card:hover .hub-card-glow { opacity: 1; }

.hub-icon {
  width: 58px; height: 58px; border-radius: var(--radius-md);
  display: grid; place-items: center; margin-bottom: 1.3rem;
  background: var(--blue-soft); color: var(--blue);
  transition: transform .4s var(--ease-bounce);
}
.hub-card:hover .hub-icon { transform: scale(1.08) rotate(-4deg); }
.hub-icon-green { background: var(--success-soft); color: var(--success); }
.hub-icon-discord { background: var(--discord-soft); color: var(--discord); }

.hub-tag {
  align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px; margin-bottom: .9rem;
  color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(0,150,255,.3);
}
.hub-tag-green { color: #3fe0a5; background: var(--success-soft); border-color: rgba(31,183,126,.36); }
.hub-tag-discord { color: #aab1f7; background: var(--discord-soft); border-color: rgba(88,101,242,.36); }

.hub-card h2 { font-size: 1.3rem; color: #fff; letter-spacing: -.01em; }
.hub-card > p { margin-top: .6rem; font-size: .92rem; color: var(--text-on-dark-mute); line-height: 1.6; flex: 1; }
.hub-go {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem;
  font-family: var(--sans-display); font-weight: 700; font-size: .92rem; color: var(--blue);
}
.hub-go svg { transition: transform .3s var(--ease-soft); }
.hub-card:hover .hub-go svg { transform: translateX(5px); }
.hub-card-discord .hub-go { color: #aab1f7; }

.hub-note {
  max-width: 640px; margin: 2.8rem auto 0; text-align: center;
  font-size: .92rem; color: var(--text-on-dark-mute); line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-icon, .hub-go svg, .hub-card-glow { transition: none; }
}

/* =============================================================
   Regalos — subpáginas (simulacros.html · material.html)
   ============================================================= */
.regalos-breadcrumb { font-size: .82rem; color: var(--text-on-dark-mute); margin-bottom: .8rem; }
.regalos-breadcrumb a { color: #7fc4ff; text-decoration: none; }
.regalos-breadcrumb a:hover { text-decoration: underline; }
.regalos-breadcrumb span { opacity: .5; margin: 0 .35rem; }

/* Banda de "renovación cada 3 meses" */
.rotacion-band { background: var(--navy-2); padding-block: 2.6rem; position: relative; }
.rotacion-inner {
  max-width: 820px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding: 1.9rem 2.1rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,150,255,.12), rgba(31,183,126,.06));
  border: 1px solid rgba(0,150,255,.26);
}
.rotacion-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(0,150,255,.34);
  padding: .3rem .7rem; border-radius: 999px;
}
.rotacion-inner p { color: var(--text-on-dark); font-size: 1rem; line-height: 1.6; }
.rotacion-inner strong { color: #fff; }

/* Lista de material (material.html) */
.material-grid-r {
  display: grid; gap: 1.3rem; max-width: 1080px; margin: 2.6rem auto 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.material-item {
  display: flex; flex-direction: column; gap: 1rem; align-items: stretch;
  min-width: 0; position: relative;
  background: var(--navy-3); border: 1px solid var(--navy-line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.7rem;
  box-shadow: 0 20px 44px -30px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .3s;
}
.material-item:hover { transform: translateY(-4px); border-color: rgba(0,150,255,.4); box-shadow: 0 28px 56px -28px rgba(0,150,255,.3); }
.material-item.is-soon { opacity: .82; }
.material-item.is-soon:hover { transform: none; border-color: var(--navy-line); box-shadow: 0 20px 44px -30px rgba(0,0,0,.5); }

.material-ic {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--blue-soft); color: var(--blue);
}
.material-ic-green { background: var(--success-soft); color: var(--success); }
/* Scoped al grid de recursos: evita la colision con .material-body de la
   vitrina (linea ~1007, display:flex en fila). Aqui el contenido se apila. */
.material-item .material-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: stretch; gap: .55rem; padding: 0;
}
.material-head { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.material-head h3 { font-size: 1.04rem; color: #fff; line-height: 1.3; min-width: 0; }
.material-state {
  flex-shrink: 0; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .24rem .55rem; border-radius: 999px;
  color: #3fe0a5; background: var(--success-soft); border: 1px solid rgba(31,183,126,.36);
}
.material-state-soon { color: #ffc773; background: var(--warn-soft); border-color: rgba(232,163,61,.36); }
.material-body > p { font-size: .88rem; color: var(--text-on-dark-mute); line-height: 1.55; margin: .55rem 0 1rem; }
.material-item .material-body > p { margin: 0; } /* el grid usa gap; no doble margen */
.material-dl { font-size: .86rem; margin-top: auto; align-self: flex-start; }
@media (max-width: 380px) { .material-item .material-dl { align-self: stretch; justify-content: center; } }
.material-soon {
  display: inline-flex; align-items: center; font-size: .82rem; font-weight: 700; color: var(--text-on-dark-mute);
  padding: .5rem .95rem; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px dashed var(--navy-line); cursor: not-allowed;
}


/* =============================================================
   LANDING DE MARCA (index.html) — secciones nuevas
   Recorrido, Pilares, Selector de cursos y Comunidad.
   Reutiliza los tokens existentes (:root) y el sistema oscuro.
   Agregado en modo bisturi: no altera reglas previas.
   ============================================================= */

/* ---- El recorrido (linea firma) ---- mobile-first: vertical ---- */
.recorrido { padding-block: 6rem; background: var(--navy); }
.recorrido-track { position: relative; margin-top: 2.8rem; }

.recorrido-nodes { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.7rem; }
.recorrido-line {
  position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px;
  background: var(--navy-line); border-radius: 2px; overflow: hidden;
}
.recorrido-line i {
  display: block; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--blue), var(--blue-2));
  transform-origin: top; transform: scaleY(var(--p, 0));
  transition: transform .18s linear;
}
.rnode {
  position: relative; display: grid; grid-template-columns: 16px 1fr;
  column-gap: 1rem; align-items: start;
}
.rnode-dot {
  grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%; background: var(--navy-3);
  border: 2px solid var(--navy-line);
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.rnode-label { grid-column: 2; font-family: var(--sans-display); font-weight: 700; color: var(--text-on-dark-mute); font-size: 1.02rem; transition: color .4s var(--ease-out); }
.rnode-tag { grid-column: 2; margin-top: .15rem; font-family: var(--sans-body); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-on-dark-mute); opacity: .65; }

/* nodo alcanzado por el scroll */
.rnode.on .rnode-dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 6px var(--blue-soft); }
.rnode.on .rnode-label { color: #fff; }

/* tramos donde MedCore SI tiene producto: marcados en azul siempre */
.rnode.product .rnode-dot { border-color: var(--blue); background: var(--navy-3); }
.rnode.product.on .rnode-dot { background: var(--blue); }
.rnode.product .rnode-tag { color: var(--blue); opacity: 1; font-weight: 700; font-family: var(--sans-display); }
.rnode.product.soon .rnode-tag { color: var(--blue-2); }

@media (min-width: 820px) {
  .recorrido-nodes { grid-template-columns: repeat(6, 1fr); gap: 1rem; padding-top: 2px; }
  .recorrido-line { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .recorrido-line i { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .rnode { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: .55rem; }
  .rnode-dot { grid-row: auto; margin: 0 0 .3rem; }
  .rnode-label, .rnode-tag { grid-column: auto; }
}

/* ---- Pilares ---- */
.pilares { padding-block: 6rem; background: var(--navy-2); }
.pilar-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.pilar-card {
  background: var(--navy-3); border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg); padding: 1.9rem 1.7rem;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out);
}
.pilar-card:hover { transform: translateY(-4px); border-color: rgba(0,150,255,.32); }
.pilar-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); margin-bottom: 1.1rem; }
.pilar-card h3 { font-size: 1.16rem; margin-bottom: .45rem; color: #fff; }
.pilar-card p { color: var(--text-on-dark-mute); }
@media (min-width: 760px) { .pilar-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }

/* ---- Selector de cursos (corazon) ---- */
.cursos { padding-block: 6rem; background: linear-gradient(180deg, var(--navy-2), var(--navy) 18%); }
.cursos-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.curso-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); padding: 2rem 1.9rem;
  border: 1px solid var(--navy-line); overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.curso-open { background: linear-gradient(158deg, #0d345f, var(--navy-3)); border-color: rgba(0,150,255,.38); }
.curso-open:hover { transform: translateY(-6px); box-shadow: 0 26px 64px rgba(0,150,255,.20); border-color: rgba(0,150,255,.6); }
.curso-soon { background: var(--navy-2); border-style: dashed; border-color: var(--navy-line); }
.curso-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,31,59,0) 40%, rgba(7,25,49,.55)); }
.curso-soon > *:not(.curso-veil) { position: relative; }
.curso-badge { align-self: flex-start; font-family: var(--sans-body); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .42rem .85rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); margin-bottom: 1.1rem; }
.curso-badge-soon { background: rgba(255,255,255,.06); color: var(--text-on-dark-mute); }
.curso-title { font-family: var(--sans-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: #fff; margin-bottom: .6rem; }
.curso-desc { color: var(--text-on-dark-mute); margin-bottom: 1.3rem; }
.curso-soon .curso-title, .curso-soon .curso-desc { color: var(--text-on-dark-mute); }
.curso-meta { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.7rem; }
.curso-meta li { display: flex; align-items: center; gap: .55rem; font-size: .96rem; color: var(--text-on-dark); }
.curso-meta svg { color: var(--blue); flex-shrink: 0; }
.curso-materias { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.7rem; }
.curso-materias li { font-size: .84rem; padding: .34rem .72rem; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--text-on-dark-mute); border: 1px solid var(--navy-line); }
.curso-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; }
.curso-cta svg { transition: transform .3s var(--ease-out); }
.curso-card:hover .curso-cta svg { transform: translateX(3px); }
@media (min-width: 820px) { .cursos-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }

/* ---- Comunidad (reusa .discord-card del sistema) ---- */
.comunidad { padding-block: 6rem; background: var(--navy); }
.comunidad-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.comunidad-list { display: flex; flex-direction: column; gap: 1rem; }
.comunidad-list li { display: flex; align-items: center; gap: .8rem; font-size: 1.04rem; color: var(--text-on-dark); padding-bottom: 1rem; border-bottom: 1px solid var(--navy-line); }
.comunidad-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.comunidad-list svg { color: var(--blue); flex-shrink: 0; }
@media (min-width: 820px) { .comunidad-grid { grid-template-columns: 1.05fr .95fr; gap: 2.6rem; } }


/* =============================================================
   MATERIAS BASICAS (materias-basicas.html) — teaser
   Deliberadamente mas oscuro y contenido. Sin fondos claros.
   ============================================================= */
.mb-hero {
  min-height: 74vh; display: grid; place-items: center; text-align: center;
  padding-block: calc(var(--nav-h) + 3rem) 3rem;
  background: radial-gradient(120% 90% at 50% 25%, var(--navy-2), var(--navy-deep) 72%);
}
.mb-hero .container { max-width: 780px; }
.mb-hero h1 { font-size: clamp(2rem, 5.2vw, 3.2rem); }
.mb-hero .hero-sub { color: var(--text-on-dark-mute); font-size: 1.1rem; margin-top: 1rem; }
.mb-materias { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.8rem; }
.mb-materias li { font-size: .88rem; padding: .42rem .95rem; border-radius: 999px; border: 1px solid var(--navy-line); color: var(--text-on-dark-mute); background: rgba(255,255,255,.03); }

.mb-section { padding-block: 3.5rem 5rem; background: var(--navy-deep); }
.mb-wait {
  max-width: 540px; margin: 0 auto; text-align: center;
  background: var(--navy-2); border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg); padding: 2.3rem 2rem;
}
.mb-wait .eyebrow { color: var(--blue-2); }
.mb-wait h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.mb-wait > p { color: var(--text-on-dark-mute); margin-top: .5rem; }
.wait-form { display: flex; gap: .6rem; margin-top: 1.3rem; }
.wait-form input {
  flex: 1; min-width: 0; padding: .85rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--navy-line); background: var(--navy-deep); color: #fff; font: inherit;
}
.wait-form input::placeholder { color: var(--text-on-dark-mute); }
.wait-msg { margin-top: .9rem; font-size: .92rem; min-height: 1.2em; }
.wait-msg.ok { color: var(--success); }
.wait-msg.err { color: var(--warn); }
@media (max-width: 520px) { .wait-form { flex-direction: column; } }