/* ============================================================
   Juan Hun · Landing — dark premium fintech
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --maxw: 1140px;
  --pad-x: clamp(20px, 4vw, 24px);          /* margen lateral, algo menor en móvil */
  --section-gap: clamp(64px, 9vw, 104px);   /* separación vertical entre secciones (uniforme) */
  --space-half: calc(var(--section-gap) / 2);

  /* Escala tipográfica */
  --fs-h1: clamp(33px, 5vw, 55px);
  --fs-h2: clamp(28px, 4vw, 40px);          /* H2 de sección unificado */
  --fs-h2-lg: clamp(30px, 4.4vw, 44px);     /* H2 de cierre (agenda) */
  --fs-lead: clamp(16px, 2.1vw, 20px);

  /* Tokens de movimiento. Las curvas nativas de CSS son flojas: no tienen el
     tirón que hace que una animación se sienta intencional. Todo el sitio usa
     estas dos para que el movimiento tenga un mismo ritmo. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;   /* feedback de presión */
  --dur-fast: 200ms;    /* hover, iconos */
  --dur-base: 260ms;    /* cards, acordeón */
  --dur-slow: 500ms;    /* entradas al hacer scroll */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Evita viudas (una sola palabra suelta en la última línea) en todo el cuerpo
   de texto. El navegador empuja una palabra más abajo antes de dejarla sola. */
p, li { text-wrap: pretty; }

/* ---------- Accesibilidad ---------- */
/* Anillo de foco visible en todo lo interactivo. Antes no había ninguno:
   navegando con teclado no se veía dónde estabas parado. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid #7DD3FC;
  outline-offset: 3px;
  border-radius: 8px;
}
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 10px;
  background: #2563EB;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Canvas de partículas: fijo detrás de todo el contenido */
#bg-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

body {
  margin: 0;
  background: #070B14;
  color: #E8EDF5;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Frena el scroll horizontal. `clip` en vez de `hidden` a propósito: hidden
     convierte al body en contenedor de scroll (le fuerza overflow-y: auto), y
     eso rompe position: sticky, que necesita scrollear contra el viewport.
     clip recorta igual sin crear ese contenedor. Los navegadores viejos que
     no soporten clip caen en el hidden de arriba. */
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: rgba(56,189,248,0.3); }

/* ---------- Keyframes ---------- */
@keyframes meshFloat {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(4%,-3%) scale(1.08); }
  66%  { transform: translate(-3%,4%) scale(0.96); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes meshFloat2 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-5%,5%) scale(1.12); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes pulseRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.4); }
  50% { box-shadow: 0 0 0 16px rgba(56,189,248,0); }
}
/* El desplazamiento lo calcula el JS según el ancho real del set de capturas
   (--marquee-w), porque cada una tiene una proporción distinta. */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-w, 1548px))); }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* base reveal state is VISIBLE; the animation is layered on top when in view */
[data-reveal].is-revealing {
  animation: revealUp var(--dur-slow) var(--ease-out) both;
}
/* Las cards de una misma grilla entran escalonadas (--stagger lo pone el JS).
   Escalonar da sensación de orden; que entren todas juntas se siente plano. */
[data-reveal].is-revealing .metric-card,
[data-reveal].is-revealing .testimonial-card,
[data-reveal].is-revealing .step-card,
[data-reveal].is-revealing .agenda-list li {
  animation: revealUp 440ms var(--ease-out) both;
  animation-delay: var(--stagger, 0ms);
}

/* ---------- Shared ---------- */
.grad {
  background: linear-gradient(120deg,#3B82F6,#7DD3FC);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.container { max-width: var(--maxw); margin: 0 auto; }
.container--center { text-align: center; }
/* Ritmo vertical uniforme: cada sección aporta medio gap arriba y abajo,
   así la separación entre dos secciones contiguas siempre es exactamente --section-gap. */
.section { padding: var(--space-half) var(--pad-x); }
.section-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 clamp(32px, 4.5vw, 48px);
  color: #E8EDF5;
  text-wrap: balance;
}
.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7DD3FC;
}
.placeholder-tag {
  font-family: monospace;
  font-size: 12px;
  color: #7C8AA0;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: 13px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary {
  font-size: 16px;
  color: #fff;
  padding: 16px 30px;
  background: linear-gradient(135deg,#2563EB,#3B82F6);
  box-shadow: 0 10px 36px rgba(37,99,235,0.4);
}
/* Barrido de brillo que cruza el botón al pasar el mouse */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-18deg);
  transition: left 600ms var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 54px rgba(56,189,248,0.6);
}
.btn-primary:hover::before { left: 130%; }

/* Feedback de presión. Sin esto el botón no confirma que escuchó el click:
   es de las cosas que nadie nota conscientemente y todas se notan juntas. */
.btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.nav-cta:active,
.lightbox-close:active,
.faq-q:active { transform: scale(0.97); }
.result-card:active { transform: scale(0.98); }
.play-btn:active { transform: scale(0.94); }
/* La flecha avanza al hover */
.btn-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform .25s ease;
}
.btn-primary:hover .btn-arrow { transform: translateX(5px); }
.btn-lg {
  font-size: 17px;
  padding: 18px 34px;
  border-radius: 14px;
  /* Glow pulsante sutil para atraer la mirada al CTA principal */
  animation: ctaGlow 2.8s ease-in-out infinite;
}
.btn-lg:hover { animation: none; }
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 10px 36px rgba(37,99,235,0.4); }
  50%      { box-shadow: 0 12px 46px rgba(56,189,248,0.55); }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(7,11,20,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: box-shadow .3s ease, background .3s ease;
}
/* Al despegarse del top el nav gana peso y se separa del contenido */
.nav.is-stuck {
  background: rgba(7,11,20,0.88);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Isotipo NC en PNG con fondo transparente (el original venía sobre un
   azul casi negro que dejaba un recuadro visible sobre el fondo del sitio) */
.brand-mark {
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
.brand-name {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #E8EDF5;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* touch target mínimo (antes ~37px) */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #E8EDF5;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  /* Propiedades explícitas: `all` anima también layout y cosas no buscadas */
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.nav-cta:hover {
  border: 1px solid rgba(56,189,248,0.5);
  background: rgba(56,189,248,0.1);
  box-shadow: 0 0 24px rgba(56,189,248,0.25);
}

/* Latido de atención: cada 5s el botón se "aprieta" y el glow se enciende y
   se apaga. El ciclo es largo y la acción corta, así que llama la atención
   sin quedar parpadeando encima. Se frena al interactuar, porque ahí el
   feedback lo dan hover y :active. */
.nav-cta { animation: navCtaLatido 5s var(--ease-in-out) infinite; }
.nav-cta:hover,
.nav-cta:focus-visible,
.nav-cta:active { animation: none; }

@keyframes navCtaLatido {
  0%, 62%, 100% {
    transform: scale(1);
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 0 rgba(56,189,248,0);
  }
  70% {   /* se aprieta y enciende */
    transform: scale(0.955);
    border-color: rgba(56,189,248,0.55);
    background: rgba(56,189,248,0.16);
    box-shadow: 0 0 26px rgba(56,189,248,0.4);
  }
  78% {   /* suelta con un rebote apenas perceptible */
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(56,189,248,0.28);
  }
  88% {   /* y se apaga */
    transform: scale(1);
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 0 rgba(56,189,248,0);
  }
}

/* ---------- Nav en móvil ----------
   A 390px quedan 350px útiles y no entraba todo: el nombre de marca y el
   texto del botón partían en dos líneas cada uno. Se achica el isotipo, se
   baja la tipografía y se prohíbe el corte de línea en ambos. */
@media (max-width: 560px) {
  .nav-inner { padding: 10px var(--pad-x); }
  .brand-mark { height: 30px; }

  /* El badge del hero a 13px partía en 3 líneas y dejaba "retiro" solo.
     A 12px entra mejor y el balance reparte las líneas parejas.
     Va con .hero delante porque la regla base de .eyebrow está más abajo en
     la hoja y, con igual especificidad, le ganaría por orden. */
  .hero .eyebrow {
    font-size: 12px;
    line-height: 1.45;
    text-wrap: balance;
  }

  /* Se oculta el nombre y queda solo el isotipo. No se usa display:none:
     el <img> tiene alt vacío, así que sin este texto el enlace del logo se
     quedaría sin nombre accesible. Se esconde a la vista pero sigue estando
     para lectores de pantalla. */
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Con el espacio liberado el botón vuelve a un tamaño cómodo */
  .nav-cta {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 14px;
    padding: 11px 18px;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(36px, 4.5vw, 56px) var(--pad-x) 0;
  text-align: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mesh { position: absolute; }
.mesh-1 {
  top: -18%;
  left: 50%;
  width: 780px;
  height: 780px;
  margin-left: -390px;
  background: radial-gradient(circle at center, rgba(37,99,235,0.45), rgba(37,99,235,0) 62%);
  filter: blur(20px);
  animation: meshFloat 16s ease-in-out infinite;
}
.mesh-2 {
  top: 6%;
  left: 8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at center, rgba(56,189,248,0.28), rgba(56,189,248,0) 65%);
  filter: blur(20px);
  animation: meshFloat2 20s ease-in-out infinite;
}
.mesh-3 {
  top: 0;
  right: 4%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at center, rgba(125,211,252,0.18), rgba(125,211,252,0) 65%);
  filter: blur(24px);
  animation: meshFloat 22s ease-in-out infinite reverse;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(7,11,20,0) 0%, #070B14 78%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(56,189,248,0.07);
  color: #7DD3FC;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
  cursor: default;
}
.eyebrow:hover {
  border-color: rgba(56,189,248,0.45);
  background: rgba(56,189,248,0.14);
  box-shadow: 0 0 22px rgba(56,189,248,0.22);
  transform: translateY(-1px);
}
.eyebrow-dot {
  /* Sin esto flexbox lo comprimía: quedaba de 3,13 x 6px, un óvalo en vez
     de un círculo, apenas el texto ocupaba varias líneas. */
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38BDF8;
  box-shadow: 0 0 10px #38BDF8;
  /* Sin pulso: el hero ya tiene el glow del CTA y el del botón de play
     latiendo. Tres cosas parpadeando a la vez se anulan entre sí. */
}
.hero-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 24px auto 0;
  max-width: 880px;           /* a 55px el copy entra en ~2 líneas */
  color: #E8EDF5;
  text-wrap: balance;
}
.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #94A3B8;
  max-width: 680px;
  margin: 26px auto 0;
  text-wrap: pretty;
}

/* ---------- Hero VSL ---------- */
.hero-vsl { margin: 40px auto 0; max-width: 660px; }
.vsl-frame {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  background: #0F1729;
  background-image: repeating-linear-gradient(45deg,rgba(255,255,255,0.035) 0 12px,rgba(255,255,255,0.008) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.vsl-frame:active { transform: scale(0.99); }
.vsl-frame:hover .play-btn--lg { transform: scale(1.08); }
/* Portada real (primer cuadro del video). Queda de placeholder detrás del
   iframe hasta que el video empieza a reproducirse. */
.vsl-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 400ms var(--ease-out);
}
/* El iframe llena el marco, por encima de la portada */
.vsl-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 2;
}
/* Cuando el video arranca de verdad, se desvanece la portada */
.vsl-frame.is-playing .vsl-poster { opacity: 0; pointer-events: none; }
.vsl-play { position: relative; z-index: 3; }

/* Aviso "toca para activar el sonido": el autoplay arranca mudo por regla
   del navegador; un toque lo desmutea. Se va tras el primer toque. */
.vsl-unmute {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(37,99,235,0.92);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  animation: unmutePulse 2s ease-in-out infinite;
}
.vsl-unmute svg { width: 17px; height: 17px; }
@keyframes unmutePulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37,99,235,0.35); }
  50%      { box-shadow: 0 6px 26px rgba(56,189,248,0.6); }
}
/* El atributo hidden de HTML pone display:none, pero acá lo pisa el display
   flex/inline-flex de estos elementos. Esta regla, más específica, gana: sin
   ella ni el play ni el cartel se ocultaban al setear .hidden desde el JS. */
.vsl-play[hidden],
.vsl-unmute[hidden] { display: none !important; }
.vsl-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(37,99,235,0.2), transparent 70%);
}
.play-btn {
  position: relative;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg,#2563EB,#3B82F6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.play-btn--lg {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(37,99,235,0.5);
  animation: pulseRing 2.6s ease-in-out infinite;
}
.play-btn--lg:hover { transform: scale(1.08); }
.play-ico {
  display: block;
  width: 30px;
  height: 30px;
  margin-left: 4px;   /* centra ópticamente el triángulo en el círculo */
  color: #fff;
}
.play-ico--sm { width: 20px; height: 20px; margin-left: 3px; }
.vsl-tag { position: absolute; bottom: 14px; }
.vsl-caption { margin: 14px 0 0; font-size: 14px; color: #94A3B8; }

/* ---------- Hero actions ---------- */
.hero-actions {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* Firma de credibilidad, debajo del texto de "Sobre mí".
   Estaba en el hero, pero repetía la misma info que las cards de métricas
   que van justo abajo. Acá refuerza la bio en vez de duplicar. */
.rating-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  color: #94A3B8;
}
.rating-badge strong { color: #E8EDF5; font-weight: 600; }
.stars { display: inline-flex; gap: 2px; color: #FBBF24; }
.stars svg { width: 16px; height: 16px; }
/* En móvil: estrellas arriba y el texto debajo, para que no se corte feo */
@media (max-width: 540px) {
  .rating-badge { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.hero-fineprint {
  font-size: 13px;
  color: #7C8AA0;   /* 5.5:1 sobre el fondo — #64748B quedaba en 4.0:1 (falla AA) */
  max-width: 480px;
  margin: 2px 0 0;
  line-height: 1.55;
}

/* ---------- Métricas ---------- */
/* Barra informativa compacta: sube cerca del hero (poco aire arriba) y
   deja el gap completo de sección antes de Testimonios. La sección contigua
   no añade su top para que esta barra controle del todo la separación inferior. */
.metrics {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 32px) var(--pad-x) var(--section-gap);
}
.metrics + .section { padding-top: 0; }
.metrics-grid {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
  gap: 14px;
}
.metric-card {
  text-align: center;
  padding: 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg,rgba(15,23,41,0.9),rgba(15,23,41,0.5));
}
.metric-num {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(26px,3vw,34px);
  line-height: 1;
  background: linear-gradient(120deg,#3B82F6,#7DD3FC);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-label { margin-top: 6px; font-size: 13px; color: #94A3B8; }

/* ---------- Testimonios ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(290px,1fr));
  gap: 22px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg,rgba(15,23,41,0.85),rgba(15,23,41,0.45));
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56,189,248,0.45);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(56,189,248,0.2);
}
/* 16:9 porque los tres videos son 1920x1080 / 640x360 */
.testimonial-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: #0B1322;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* La portada llena la tarjeta; el botón de play queda encima */
.testimonial-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}
.testimonial-thumb .play-btn--sm { position: relative; z-index: 1; }
.testimonial-thumb:active { transform: scale(0.98); }
.testimonial-thumb:hover .play-btn--sm { transform: scale(1.08); }
/* Acercamiento apenas perceptible al pasar el mouse: da señal de que es
   clickeable sin mover el layout. */
@media (hover: hover) and (pointer: fine) {
  .testimonial-thumb:hover .testimonial-poster { transform: scale(1.03); }
}
.testimonial-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.play-btn--sm {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(37,99,235,0.85);
  box-shadow: 0 6px 20px rgba(37,99,235,0.5);
}
.play-tri--sm {
  margin-left: 3px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
}
.testimonial-thumb .placeholder-tag {
  position: absolute;
  bottom: 10px;
  font-size: 11px;
}
/* La tarjeta y el cuerpo son columnas flexibles para que el nombre quede
   anclado abajo. Si no, cada autor arranca donde termina su cita y los
   nombres quedan a distinta altura según el largo del texto. */
.testimonial-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}
.testimonial-quote {
  font-size: 15px;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0 0 18px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  margin-top: auto;   /* empuja el nombre al pie de la tarjeta */
  padding-top: 4px;
}
.testimonial-name {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #E8EDF5;
}

/* ---------- Resultados (marquee) ---------- */
.marquee-wrap { position: relative; overflow: hidden; margin: 0 -8px; }
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee var(--marquee-dur, 36s) linear infinite;
  padding: 6px 8px;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
/* Altura fija y ancho automático: cada captura conserva su proporción y no se
   recorta nada. Son conversaciones, cortarlas mutilaría el texto. */
.result-card {
  flex: 0 0 auto;
  height: clamp(230px, 24vw, 320px);
  width: auto;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0B1322;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.result-card img {
  display: block;
  height: 100%;
  width: auto;
}
/* En móvil la tarjeta se agranda un poco (las capturas son texto y a 230px
   no se leía nada).

   Antes había acá un max-width con object-fit: contain para que las
   apaisadas no superaran el ancho de pantalla. Era peor el remedio: las
   verticales quedaban encajadas en una caja ancha, chiquitas y con el fondo
   de la tarjeta asomando a los costados. Como esto es un carrusel que se
   desplaza, que una captura ancha no entre entera no es un problema. */
@media (max-width: 700px) {
  .result-card { height: clamp(270px, 62vw, 330px); }
}
.result-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56,189,248,0.45);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}

/* ---------- Lightbox de capturas ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(3,6,12,0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.lightbox.is-open { opacity: 1; }
/* La salida va más rápida que la entrada: al cerrar el usuario ya decidió,
   y esperar la misma animación se siente lento. */
.lightbox.is-closing { opacity: 0; transition-duration: 150ms; }

.lightbox-inner {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  /* Arranca en 0.98, nunca en 0: nada en el mundo real aparece de la nada */
  transform: scale(0.98);
  transition: transform 240ms var(--ease-out);
}
.lightbox.is-open .lightbox-inner { transform: scale(1); }
.lightbox.is-closing .lightbox-inner { transform: scale(0.98); transition-duration: 150ms; }
.lightbox img {
  display: block;
  max-width: min(560px, 100%);
  max-height: 88vh;
  width: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: #0F1729;
  color: #E8EDF5;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.lightbox-close:hover { background: #1B2740; border-color: rgba(56,189,248,0.5); }
.marquee-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.marquee-fade--left { left: 0; background: linear-gradient(90deg,#070B14,rgba(7,11,20,0)); }
.marquee-fade--right { right: 0; background: linear-gradient(270deg,#070B14,rgba(7,11,20,0)); }
.results-fineprint {
  font-size: 13px;
  color: #7C8AA0;   /* 5.5:1 sobre el fondo — #64748B quedaba en 4.0:1 (falla AA) */
  max-width: 620px;
  margin: 28px auto 0;
  line-height: 1.6;
}
.results-cta { margin-top: 36px; }

/* ---------- Cómo funciona ---------- */
.how .container { max-width: 1100px; }
.how .section-title { margin-bottom: 0; }   /* el aire lo da el margin-top del grid */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 22px;
  margin-top: clamp(36px, 5vw, 48px);
}
.step-card {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg,rgba(15,23,41,0.85),rgba(15,23,41,0.45));
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Acento superior en degradado (tenue en reposo, intenso al hover) */
.step-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#2563EB,#38BDF8);
  opacity: .45;
  transition: opacity .3s ease;
}
.step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56,189,248,0.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}
.step-card:hover::before { opacity: 1; }
.step-card:hover .step-ghost { opacity: .14; }
/* Número fantasma de fondo: da profundidad y diferencia de otras cards */
.step-ghost {
  position: absolute;
  top: -14px;
  right: 6px;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 120px;
  line-height: 1;
  color: #38BDF8;
  opacity: .08;
  pointer-events: none;
  user-select: none;
  transition: opacity .3s ease;
}
.step-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.step-num {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg,#2563EB,#38BDF8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37,99,235,0.4);
}
.step-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7DD3FC;
}
.step-title {
  position: relative;
  z-index: 1;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 20px;
  margin: 22px 0 10px;
  color: #E8EDF5;
}
.step-text {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.6;
  color: #94A3B8;
  margin: 0;
}

/* ---------- 3 pasos: apilado sticky en móvil ----------
   Cada card se clava debajo del nav y la siguiente se desliza por encima,
   dejando asomar una franja de la anterior. Es CSS puro (position: sticky),
   funciona en iOS. Solo en móvil: en desktop van en fila. */
@media (max-width: 640px) {
  .how-grid {
    display: block;   /* una debajo de otra, sin gap de grilla */
    margin-top: 26px;
  }
  .step-card {
    position: sticky;
    /* despeja el nav (~64px) con un respiro */
    top: 78px;
    /* separación en el flujo = distancia de scroll del efecto */
    margin-bottom: 20px;
    /* Opaca sí o sí: si fuera translúcida, la card de atrás se vería a
       través y el apilado quedaría sucio. */
    background: linear-gradient(180deg, #16223A, #0E1626);
    box-shadow: 0 -14px 30px rgba(0,0,0,0.45), 0 20px 44px rgba(0,0,0,0.5);
  }
  /* Cada una se clava un poco más abajo → la anterior asoma unos 18px */
  .step-card:nth-child(2) { top: 96px; }
  .step-card:nth-child(3) { top: 114px; }
  /* La última no necesita empujar nada debajo */
  .step-card:last-child { margin-bottom: 0; }
  /* En el apilado el hover no aplica (es táctil); se anula el desplazamiento
     para que no pelee con el sticky. */
  .step-card:hover { transform: none; }

  /* Realce progresivo donde el navegador lo soporta (Chrome/Android): la
     card se hunde apenas mientras la siguiente la tapa. En iOS se ignora y
     queda el apilado plano, que ya es el efecto pedido. */
  @supports (animation-timeline: view()) {
    .step-card {
      animation: cardHundir linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 60%;
      transform-origin: center top;
    }
    @keyframes cardHundir {
      to { transform: scale(0.94); filter: brightness(0.72); }
    }
    .step-card:last-child { animation: none; }
  }
}

/* ---------- Sobre Juan ---------- */
/* Móvil (base): una columna en orden del DOM → kicker, foto, descripción. */
.about-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.about-kicker { margin: 0; }
/* Desktop: foto a la izquierda (ocupa ambas filas), kicker + texto a la derecha. */
@media (min-width: 760px) {
  .about-grid {
    grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
    /* Las filas vacías de arriba y abajo absorben el alto sobrante de la
       foto. Sin ellas ese espacio se reparte entre las filas de contenido y
       separa el título del texto. */
    grid-template-areas:
      "photo ."
      "photo kicker"
      "photo title"
      "photo copy"
      "photo .";
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(32px, 5vw, 56px);
    row-gap: 14px;
  }
  .about-kicker { grid-area: kicker; align-self: end; }
  /* Con .about-grid delante: la regla base de .about-title está más abajo en
     la hoja y con igual especificidad le ganaría el margin: 0. */
  .about-grid .about-title { grid-area: title; align-self: start; margin-bottom: 6px; }
  .about-photo  { grid-area: photo;  align-self: center; }
  .about-copy   { grid-area: copy;   align-self: start; }
}
/* La foto ya trae su propio degradado de fondo (se le quitó el gris de
   estudio al recortarla), así que el contenedor no necesita relleno ni el
   brillo que antes compensaba el marcador vacío. */
.about-photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0B1322;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Arranca en blanco y negro y pasa a color cuando la sección entra en
     pantalla. Es lento a propósito (1.1s): no es una respuesta a una acción
     del usuario, es un momento de la página, y a 300ms ni se registra. */
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.005);   /* evita que se vea el borde al escalar en hover */
  transition: filter 1100ms var(--ease-out) 180ms,
              transform var(--dur-slow) var(--ease-out);
}
.about-grid.is-revealing .about-photo img {
  filter: grayscale(0) contrast(1);
}

/* El contenedor reacciona igual que las demás tarjetas del sitio */
.about-photo {
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .about-photo:hover {
    transform: translateY(-5px);
    border-color: rgba(56,189,248,0.42);
    box-shadow: 0 34px 78px rgba(0,0,0,0.55), 0 0 0 1px rgba(56,189,248,0.16);
  }
  .about-photo:hover img { transform: scale(1.035); }
}
.kicker.agenda-kicker { margin-bottom: 18px; }
/* El título es hijo directo de la grilla (ya no vive dentro de .about-copy)
   para poder ubicarlo arriba de la foto en móvil: era la única sección que
   no abría con su H2. La separación la da el gap de la grilla. */
.about-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: #E8EDF5;
}
.about-text { font-size: 17px; line-height: 1.7; color: #94A3B8; margin: 0; }

/* ---------- Agenda ---------- */
.agenda {
  position: relative;
  padding: var(--space-half) var(--pad-x);
  scroll-margin-top: 80px;
}
.agenda-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.agenda-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 480px;
  margin: -240px 0 0 -380px;
  background: radial-gradient(ellipse at center, rgba(37,99,235,0.22), transparent 70%);
  filter: blur(20px);
}
/* Una sola columna a lo ancho: el widget de Calendly necesita ~900px para
   usar su layout ancho (calendario + horarios lado a lado). En una columna
   angosta cae al layout vertical y genera scroll interno. */
.agenda-grid {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 40px);
}
.agenda-head { text-align: center; }
.agenda-value { text-align: center; }
.agenda-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: var(--fs-h2-lg);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 18px;
  color: #E8EDF5;
}
.agenda-sub {
  font-size: 17px;
  line-height: 1.6;
  color: #94A3B8;
  /* El texto pide 661px: con los 640px de antes se partía y dejaba "retiro."
     solo abajo. A 720px entra en una sola línea en desktop, y el balance
     actúa como red cuando la pantalla es más angosta y sí tiene que partir. */
  max-width: 720px;
  margin: 0 auto;
  text-wrap: balance;
}
/* Los 3 beneficios en fila (se apilan solos en móvil) */
.agenda-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 18px 26px;
  text-align: left;
}
.agenda-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15px;
  color: #CBD5E1;
  line-height: 1.55;
}
.agenda-note {
  max-width: 640px;
  margin: 26px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  line-height: 1.55;
  color: #94A3B8;
}
.check {
  flex-shrink: 0;
  margin-top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56,189,248,0.15);
  border: 1px solid rgba(56,189,248,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38BDF8;
}
.check svg { width: 12px; height: 12px; }
/* Widget de Calendly, sin contenedor propio.
   Antes iba dentro de una tarjeta con fondo, borde y sombra, y como Calendly
   centra su contenido de ~800px, la diferencia de ancho quedaba como un
   marco vacío evidente. Angostar el contenedor no servía: por debajo de
   ~900px Calendly apila sus paneles y vuelve el scroll interno.
   La solución es al revés: se le pasa el color de fondo del sitio en la URL
   (background_color=070b14) y se saca toda la tarjeta, así el aire sobrante
   se funde con la página y deja de leerse como padding. */
.calendly-embed {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
}
/* ---------- Esqueleto de carga de Calendly ----------
   Ocupa el lugar exacto del widget para que no haya salto cuando aparece.
   Esperar sobre algo que ya tiene forma se siente más corto que esperar
   sobre un rectángulo vacío. */
.cal-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  /* Antes iba en #070B14, el mismo color de la página, con los círculos en
     blanco al 5%: el estado de carga se veía idéntico a un hueco vacío y
     parecía que el sitio estaba roto. Ahora es una superficie apenas más
     clara y con borde, para que se lea como "acá va a haber algo". */
  background: #0D1526;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: opacity 350ms var(--ease-out);
}
.cal-skeleton.is-hidden { opacity: 0; pointer-events: none; }
.cal-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  width: min(340px, 68%);
}
.cal-skeleton-grid span {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  animation: calPulse 1.4s ease-in-out infinite;
}
/* Escalonado para que se lea como un barrido y no como un parpadeo global */
.cal-skeleton-grid span:nth-child(7n+2) { animation-delay: .1s; }
.cal-skeleton-grid span:nth-child(7n+3) { animation-delay: .2s; }
.cal-skeleton-grid span:nth-child(7n+4) { animation-delay: .3s; }
.cal-skeleton-grid span:nth-child(7n+5) { animation-delay: .4s; }
.cal-skeleton-grid span:nth-child(7n+6) { animation-delay: .5s; }
.cal-skeleton-grid span:nth-child(7n)   { animation-delay: .6s; }
@keyframes calPulse {
  0%, 100% { background: rgba(255,255,255,0.10); }
  50%      { background: rgba(56,189,248,0.45); }
}
.cal-skeleton-text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #B4C2D8;
}
/* Anillo girando: deja claro que está trabajando, no colgado */
.cal-skeleton-text::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(56,189,248,0.25);
  border-top-color: #38BDF8;
  animation: calSpin 700ms linear infinite;
}
@keyframes calSpin { to { transform: rotate(360deg); } }

/* El alto se define acá (ya no inline en el HTML) para que la altura exacta
   que reporta Calendly por postMessage, que el JS aplica como estilo inline,
   le gane a estos valores sin necesidad de !important. Estos son el piso por
   si ese aviso nunca llega (bloqueadores, cambios de su API). */
.calendly-embed .calendly-inline-widget { height: 780px; }

/* En pantallas angostas Calendly apila calendario y horarios, y necesita
   bastante más alto para no scrollear por dentro. */
@media (max-width: 900px) {
  .calendly-embed .calendly-inline-widget { height: 1120px; }
}

/* El widget trae min-width:320px en línea. En pantallas de 320px, donde
   quedan 280 útiles, eso estiraba toda la sección Agenda y le metía scroll
   horizontal a la página entera. Necesita !important por ser estilo inline. */
@media (max-width: 560px) {
  .calendly-embed .calendly-inline-widget {
    min-width: 0 !important;
    width: 100%;
  }
}

/* ---------- FAQ ---------- */
.faq-container { max-width: 820px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,41,0.6);
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.faq-item:hover {
  border-color: rgba(56,189,248,0.35);
  background: rgba(15,23,41,0.85);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 22px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #E8EDF5;
}
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38BDF8;
  transition: transform .3s ease;
  transform: rotate(0deg);
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-rows {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .35s ease;
}
.faq-item.is-open .faq-rows { grid-template-rows: 1fr; opacity: 1; }
.faq-rows-inner { overflow: hidden; }
.faq-a {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.65;
  color: #94A3B8;
}
.faq-cta { text-align: center; margin-top: 44px; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: clamp(48px, 6vw, 56px) var(--pad-x) clamp(40px, 5vw, 48px);
  background: #0A0E1A;
}
.footer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
/* En el footer entra el lockup completo: hay espacio y el nombre ya está
   en la imagen, así que no se repite en texto. */
.footer-logo { display: block; height: 55px; width: auto; }
.footer-disclaimer {
  font-size: 13px;
  line-height: 1.75;
  color: #7C8AA0;   /* 5.5:1 sobre el fondo — #64748B quedaba en 4.0:1 (falla AA) */
  max-width: 680px;
  margin: 0 auto 22px;
}
.footer-copy { font-size: 13px; color: #74829A; margin: 0; }   /* 4.8:1 — antes 2.5:1 */

/* El CTA del hero es más grande que el resto (17px y padding 34) para pesar
   en desktop. En pantallas angostas ese extra hace que el texto no entre y
   parta en dos líneas, mientras los demás botones quedan en una. Acá abajo
   toma las mismas medidas que el resto y todos se ven igual. */
@media (max-width: 430px) {
  .btn-lg {
    font-size: 16px;
    padding: 16px 30px;
  }
}

/* ============================================================
   Escala tipográfica en móvil
   ------------------------------------------------------------
   Había 11 tamaños distintos, varios separados por 1px: eso no se lee como
   jerarquía, se lee como desprolijidad. Se colapsa a 6 niveles, cada uno con
   un rol único. Dos textos con la misma función tienen el mismo tamaño.

     33px  título principal
     28px  títulos de sección y números de métrica
     19px  títulos de card
     16px  TODO el cuerpo de texto
     14px  metadatos, etiquetas de apoyo y letra legal
     12px  kickers y etiquetas en mayúscula

   Solo aplica en móvil: el desktop conserva su escala.
   ============================================================ */
@media (max-width: 560px) {
  /* Título de agenda al mismo nivel que el resto de las secciones. */
  .agenda-title { font-size: 28px; }
  .step-title { font-size: 19px; }

  /* Métricas en móvil: tres tarjetas apiladas ocupaban demasiado y se leían
     como tres cajas sueltas. Se pasa a un solo panel con las tres en filas
     (número a la izquierda, texto a la derecha), separadas por una línea.
     Mismo contenido, la mitad de alto y sin ruido de bordes repetidos. */
  .metrics-grid {
    display: block;
    max-width: 400px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: linear-gradient(180deg,rgba(15,23,41,0.9),rgba(15,23,41,0.5));
    overflow: hidden;
  }
  .metric-card {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .metric-card + .metric-card { border-top: 1px solid rgba(255,255,255,0.07); }
  /* nowrap: "2 horas" se partía en dos líneas y desnivelaba la fila */
  .metric-num { font-size: 23px; text-align: right; white-space: nowrap; }
  .metric-label { margin-top: 0; font-size: 12.5px; line-height: 1.25; }

  /* Cuerpo unificado en 16px. Venían en 17 (about, agenda-sub) y en 15
     (citas, pasos, FAQ, bullets). 16px además es el mínimo cómodo de
     lectura en teléfono. */
  .about-text,
  .agenda-sub,
  .hero-sub,
  .testimonial-quote,
  .step-text,
  .faq-a { font-size: 16px; }

  /* Bloque "Qué te llevas de la llamada": el kicker y los bullets van al
     mismo tamaño, a pedido del cliente. */
  .kicker.agenda-kicker,
  .agenda-list li { font-size: 14px; }

  /* Letra legal y textos finos: suben de 13 a 14 y se juntan con el resto
     de los metadatos. Siguen leyéndose como secundarios por el color, no
     por tener un tamaño propio. */
  .results-fineprint,
  .footer-disclaimer,
  .footer-copy { font-size: 14px; }

  /* Etiquetas en mayúscula, el único uso legítimo de 12px */
  .kicker { font-size: 12px; }

  /* Legales del footer: letra chica a pedido del cliente */
  .footer-disclaimer,
  .footer-copy { font-size: 11px; }

  /* Alineación por rol: centrado solo para títulos y textos de 1 o 2 líneas.
     Todo párrafo más largo va a la izquierda, porque centrado deja el margen
     izquierdo irregular y el ojo pierde el punto de arranque en cada salto
     de línea. El descargo del footer eran 8 líneas centradas. */
  .footer-disclaimer,
  .results-fineprint,
  .agenda-note { text-align: left; }

  /* Aire entre secciones.
     El gap era de 64px (32 abajo + 32 arriba) para secciones de entre 580 y
     1700px de alto: no alcanzaba para que se leyera dónde termina una y
     empieza la otra. Se sube a 96px, más cerca de la proporción que tiene
     en desktop respecto del contenido. */
  :root { --section-gap: 96px; }
}

/* ---------- CTA fijo en móvil ----------
   El objetivo de la página es una sola acción; en el celular quedaba lejos
   entre sección y sección. Solo aparece fuera del hero y de Agenda. */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom));
  background: rgba(7,11,20,0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,0.1);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-out);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta-btn {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  animation: none;   /* sin glow pulsante acá: distrae fijo en pantalla */
}
/* En desktop no hace falta: los CTA de sección quedan siempre a la vista */
@media (min-width: 861px) {
  .mobile-cta { display: none; }
}
/* Que la barra no tape el final de la página */
@media (max-width: 860px) {
  .footer { padding-bottom: calc(clamp(40px, 5vw, 48px) + 84px); }
}

/* ---------- Touch: sin efectos de hover ----------
   En pantallas táctiles el tap dispara :hover y el estado queda pegado
   después de soltar. El feedback ahí lo da :active, no el hover. */
@media (hover: none) {
  .btn-primary:hover,
  .testimonial-card:hover,
  .step-card:hover,
  .result-card:hover,
  .play-btn--lg:hover,
  .eyebrow:hover { transform: none; }
  .btn-primary:hover { box-shadow: 0 10px 36px rgba(37,99,235,0.4); }
  .btn-primary:hover::before { left: -120%; }
  .btn-primary:hover .btn-arrow { transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mesh, .play-btn--lg, .marquee-track,
  .btn-lg, .eyebrow-dot, .nav-cta { animation: none !important; }
  [data-reveal].is-revealing,
  [data-reveal].is-revealing .metric-card,
  [data-reveal].is-revealing .testimonial-card,
  [data-reveal].is-revealing .step-card,
  [data-reveal].is-revealing .agenda-list li { animation: none !important; }
  .btn-primary::before { display: none; }
  .mobile-cta, .skip-link, .lightbox { transition: none !important; }
  .cal-skeleton-grid span { animation: none !important; }
  .cal-skeleton-text::before { animation: none !important; }
  /* La foto de "Sobre mí" pasa a color igual, pero sin transición ni
     movimiento: el cambio de color no molesta, el desplazamiento sí. */
  .about-photo, .about-photo img { transition: none !important; }
  .about-photo img { filter: grayscale(0) !important; transform: none !important; }
  .about-photo:hover { transform: none !important; }
  .about-photo:hover img { transform: none !important; }
}