/* ══════════════════════════════════════════════════════════════════════
   Lexia — landing
   Dirección: "las balizas". El choque pasa de noche: azul profundo de
   madrugada y ámbar de baliza, el único color cálido de la página.
   Dos gestos y nada más: el resaltador ámbar sobre lo que importa, y el
   resplandor de baliza que late detrás de las secciones oscuras.
   Ver comercial/01-landing/diseno.md
   ══════════════════════════════════════════════════════════════════════ */

/* ── reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
ol, ul { list-style: none; padding: 0; }

/* ── tokens ────────────────────────────────────────────────────────── */
:root {
  /* papel */
  --papel:       #F4F6FC;
  --papel-alto:  #FFFFFF;
  --papel-hondo: #E9EDF8;

  /* tinta */
  --tinta:       #101B36;
  --tinta-media: #4A5A76;
  --tinta-suave: #8C99AE;

  /* noche: el fondo de las secciones oscuras */
  --noche:       #0A1230;

  /* marca */
  --marca-1:     #4f46e5;
  --marca-2:     #2563eb;

  /* baliza: el ámbar. Segundo color de marca, no un acento decorativo. */
  --baliza:      #F59E0B;
  --baliza-2:    #FB6A2A;
  --resalta:     #fbbf24;

  --whatsapp:    #25D366;
  --whatsapp-2:  #1eb855;
  --linea:       #DBE2EE;
  --rojo:        #DC2626;

  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-cuerpo:  'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --t-display: clamp(2.05rem, 4.6vw, 3.5rem);
  --t-h2:      clamp(1.8rem, 3.6vw, 2.75rem);
  --t-h3:      clamp(1.15rem, 2vw, 1.4rem);
  --t-body:    clamp(1rem, 1.2vw, 1.125rem);

  --ancho:     1180px;
  --ritmo:     clamp(4rem, 8vw, 7rem);

  /* radios deliberadamente distintos por tipo de pieza */
  --r-tarjeta: 14px;
  --r-chico:   10px;
  --r-boton:   12px;

  --sombra:     0 1px 0 rgba(16, 27, 54, .04), 0 10px 26px -14px rgba(16, 27, 54, .28);
  --sombra-alta: 0 2px 4px rgba(16, 27, 54, .04), 0 22px 48px -22px rgba(16, 27, 54, .32);

  --degrade: linear-gradient(118deg, var(--marca-1) 0%, var(--marca-2) 58%, #1d4ed8 100%);

  /* Curvas propias: las de CSS son flojas y se nota. --sal para cosas que
     entran (arranca rápido, se siente inmediato), --mueve para lo que se
     desplaza estando ya en pantalla. Nunca ease-in en interfaz. */
  --sal:   cubic-bezier(.23, 1, .32, 1);
  --mueve: cubic-bezier(.77, 0, .175, 1);
}

/* ── base ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

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

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 100;
}
.saltar:focus { left: 0; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.mono {
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
}

/* ── tipografía ────────────────────────────────────────────────────── */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.h2--claro { color: #fff; }

.h3-grande {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin-bottom: .9rem;
}

/* el chip del hero: la ecuación de la propuesta, en una línea */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .95rem .42rem .75rem;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(79, 70, 229, .1), rgba(245, 158, 11, .14));
  border: 1px solid rgba(79, 70, 229, .2);
  font-size: .82rem;
  font-weight: 600;
  color: var(--marca-1);
  letter-spacing: -.005em;
  margin-bottom: 1.4rem;
}
.chip__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--baliza);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
  flex: none;
  animation: latir-baliza 2.4s ease-in-out infinite;
}
@keyframes latir-baliza { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 1.4rem;
}

.entrada {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--tinta-media);
  max-width: 40em;
  margin-top: 1.4rem;
}

.parrafo-ancho { max-width: 62ch; }
.parrafo-ancho > p + p { margin-top: 1.1rem; }

.entrada-chica {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--tinta-media);
}

.parrafo-fuerte {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
}

/* ── el resaltador ─────────────────────────────────────────────────── */
/* El trazo es un SVG de bordes ondulados —como un fibra real, que no arranca
   ni termina prolijo— estirado por background-size. Se hace así y no con un
   pseudo-elemento absoluto para que el resaltado se corte y siga bien cuando
   la frase se parte en dos líneas en pantallas angostas. */
.hl {
  color: inherit;
  /* <mark> trae amarillo sólido por defecto y tapaba el trazo: se apaga. */
  background-color: transparent;
  padding: 0 .12em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 2.6Q26 .2 52 1.4T100 .4L100 17.4Q73 20 47 18.4T0 19.6Z' fill='%23fbbf24' fill-opacity='.68'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 0 34%;
  transition: background-size .55s cubic-bezier(.22, .61, .36, 1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl.pintado { background-size: 100% 34%; }

/* En títulos grandes el trazo proporcional quedaba como un bloque de
   resaltador de Word. Más bajo: se ve el trazo, no el bloque. */
.display .hl,
.h2 .hl {
  background-position: 0 94%;
  background-size: 0 26%;
  white-space: nowrap;
}
.display .hl.pintado,
.h2 .hl.pintado { background-size: 100% 26%; }

/* sobre fondo oscuro el ámbar se satura y el texto pasa a tinta */
.oscuro .hl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 2.6Q26 .2 52 1.4T100 .4L100 17.4Q73 20 47 18.4T0 19.6Z' fill='%23F59E0B' fill-opacity='.9'/%3E%3C/svg%3E"); }

/* ── secciones oscuras: la baliza ──────────────────────────────────── */
/* Dos resplandores: uno índigo (el sistema) y uno ámbar que late lento
   (la baliza del auto parado en la banquina). Es el único movimiento
   ambiental de la página. */
.oscuro {
  position: relative;
  background: var(--noche);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.oscuro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(48rem 28rem at 12% 10%, rgba(79, 70, 229, .48), transparent 66%),
    radial-gradient(36rem 24rem at 92% 88%, rgba(37, 99, 235, .34), transparent 64%);
}
.oscuro::after {
  content: '';
  position: absolute;
  right: -8rem;
  top: -8rem;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, rgba(251, 146, 60, .34), rgba(245, 158, 11, .12) 45%, transparent 68%);
  animation: baliza 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes baliza { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* ── botones ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.5rem;
  border: none;
  border-radius: var(--r-boton);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--sal), box-shadow .18s ease, background-color .14s ease;
}
/* que se sienta apretado: el botón tiene que acusar recibo al instante */
.btn:active { transform: scale(.97); }

.btn--primario {
  width: 100%;
  color: #fff;
  background: var(--degrade);
  box-shadow: 0 8px 22px -10px rgba(79, 70, 229, .85);
}
.btn--primario:hover { box-shadow: 0 12px 28px -10px rgba(79, 70, 229, .95); }
.btn--primario[aria-busy='true'] { opacity: .6; pointer-events: none; }

.btn--wa {
  width: 100%;
  color: #fff;
  background: var(--whatsapp);
  box-shadow: 0 8px 22px -12px rgba(37, 211, 102, .9);
}
.btn--wa:hover { background: var(--whatsapp-2); }

.btn--grande {
  width: auto;
  padding: 1.15rem 2.25rem;
  font-size: 1.0625rem;
}
.btn--chico {
  width: auto;
  padding: .58rem 1rem;
  font-size: .875rem;
  border-radius: 999px;
}

/* ── barra ─────────────────────────────────────────────────────────── */
.barra {
  border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--papel) 84%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.barra__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
}
.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.marca__texto {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.03em;
}
.barra__acciones { display: flex; align-items: center; gap: 1rem; }
.barra__link {
  font-size: .9rem;
  font-weight: 600;
  color: var(--tinta-media);
  text-decoration: none;
  padding-block: .5rem;
}
.barra__link:hover { color: var(--tinta); }

/* En mobile el link de cliente sobra: el botón es lo único que importa. */
@media (max-width: 519px) { .barra__link { display: none; } }

/* ── hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--ritmo);
  overflow: hidden;
}
/* atmósfera: índigo arriba a la derecha, ámbar bajo el titular */
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(46rem 30rem at 82% 4%, rgba(79, 70, 229, .16), transparent 62%),
    radial-gradient(34rem 24rem at 2% 26%, rgba(245, 158, 11, .16), transparent 60%);
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  align-items: start;
}

/* ── prueba visual: chat + tarjeta del tablero ─────────────────────── */
.prueba {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  align-items: start;
}

.chat {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.chat__barra {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, #FBFCFE, #F3F6FB);
}
.chat__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--whatsapp);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .2);
  flex: none;
}
.chat__nombre { font-size: .82rem; font-weight: 600; color: var(--tinta-media); }
.chat__hora { margin-left: auto; color: var(--tinta-suave); font-size: .75rem; }

/* Alto fijo con scroll propio: la conversación corre adentro del "teléfono"
   y no empuja el resto de la página hacia abajo mientras se escribe. */
.chat__hilo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .9rem;
  height: clamp(19rem, 44vh, 23rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #C9D3E2 transparent;
  background:
    radial-gradient(1200px 400px at 50% 0%, rgba(79, 70, 229, .04), transparent 70%),
    var(--papel-alto);
}
.chat__hilo::-webkit-scrollbar { width: 6px; }
.chat__hilo::-webkit-scrollbar-thumb { background: #C9D3E2; border-radius: 3px; }

.burbuja {
  max-width: 86%;
  padding: .55rem .8rem;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.45;
  flex: none;
  animation: aparece .28s ease both;
}
.burbuja--ellos {
  align-self: flex-start;
  background: #EFF2F8;
  border-bottom-left-radius: 4px;
}
.burbuja--nos {
  align-self: flex-end;
  background: #DCF8C6;
  border-bottom-right-radius: 4px;
}
.burbuja__hora {
  display: block;
  margin-top: .2rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  color: var(--tinta-suave);
}
.burbuja--escribiendo { display: flex; gap: 4px; padding: .75rem .85rem; }
.burbuja--escribiendo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta-suave);
  animation: latir 1.1s infinite;
}
.burbuja--escribiendo i:nth-child(2) { animation-delay: .16s; }
.burbuja--escribiendo i:nth-child(3) { animation-delay: .32s; }

@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
@keyframes latir { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ── la tarjeta del tablero ────────────────────────────────────────── */
.crm__eti {
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-size: .68rem;
  letter-spacing: .11em;
  margin-bottom: .55rem;
}
.crm__tarjeta {
  background: var(--papel-alto);
  border: 1px solid #F0D9DC;
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-alta);
  padding: 1rem 1.05rem 1.05rem;
  display: grid;
  gap: .7rem;
}

.crm__fila1 {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.crm__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #B4232B;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  flex: none;
}
.crm__avatar--chico {
  width: 1.5rem;
  height: 1.5rem;
  font-size: .58rem;
  background: #157F4B;
}
.crm__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.crm__estado {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--baliza), var(--baliza-2));
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
.crm__tag {
  justify-self: start;
  padding: .22rem .65rem;
  border-radius: 8px;
  background: #EDEBFE;
  color: var(--marca-1);
  font-size: .75rem;
  font-weight: 700;
}
.crm__resumen {
  font-size: .87rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

.crm__barra { display: flex; align-items: center; gap: .6rem; }
.crm__barra-riel {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--papel-hondo);
  overflow: hidden;
}
.crm__barra-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--baliza-2), var(--baliza));
}
.crm__barra-cifra { color: var(--baliza-2); font-weight: 600; font-size: .75rem; }

.crm__dato,
.crm__alerta {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
}
.crm__dato { color: var(--tinta-media); }
.crm__dato svg, .crm__alerta svg { flex: none; }
.crm__alerta { color: var(--rojo); font-weight: 600; }

.crm__pie {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
}
.crm__asignado {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--tinta-media);
}
.crm__wa {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #E4F8EC;
  color: var(--whatsapp-2);
  flex: none;
}
.crm__pie-nota {
  margin-top: .6rem;
  color: var(--tinta-suave);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ── formulario ────────────────────────────────────────────────────── */
.tarjeta-form {
  position: relative;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-alta);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  overflow: hidden;
}
/* filo de marca arriba, con la baliza cortando el índigo */
.tarjeta-form::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marca-1), var(--marca-2) 62%, var(--baliza));
}
/* Cuando un CTA de "probar el agente" trae al lector hasta acá, la tarjeta
   parpadea una vez. Sin esto el scroll termina y no queda claro qué pasó. */
.tarjeta-form--senala { animation: senala 1.1s var(--sal); }
@keyframes senala {
  0%   { box-shadow: var(--sombra-alta), 0 0 0 0 rgba(79, 70, 229, .45); }
  35%  { box-shadow: var(--sombra-alta), 0 0 0 .55rem rgba(79, 70, 229, 0); }
  100% { box-shadow: var(--sombra-alta), 0 0 0 0 rgba(79, 70, 229, 0); }
}

.form__tit {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.18;
  letter-spacing: -.025em;
}
.form__sub {
  color: var(--tinta-media);
  font-size: .92rem;
  margin-top: .5rem;
}
.form { display: grid; gap: .9rem; margin-top: 1.3rem; }

.campo { display: grid; gap: .35rem; }
.campo label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta-media);
}
.campo input,
.campo select {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: #FBFCFE;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: #B4BECD; }
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--marca-2);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.campo input[aria-invalid='true'] { border-color: var(--rojo); }

.error { color: var(--rojo); font-size: .8rem; }

.form__nota {
  font-size: .8rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}
.form__estado {
  font-size: .88rem;
  font-weight: 600;
  color: var(--marca-2);
}
.form__estado:empty { display: none; }
.form__nota a { color: var(--marca-2); font-weight: 600; }

/* ── secciones ─────────────────────────────────────────────────────── */
.seccion { padding-block: var(--ritmo); }
.seccion--clara { background: var(--papel-alto); }

/* ── rompe scroll ──────────────────────────────────────────────────── */
.rompe { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.rompe__int { max-width: 44rem; }
.rompe__linea {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  color: rgba(255, 255, 255, .72);
}
.rompe__linea--grande {
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 4rem);
  color: #fff;
  margin-bottom: 1.25rem;
}
.rompe__linea--remate { color: #fff; margin-top: 1.25rem; }

/* ── el giro dentro del problema ───────────────────────────────────── */
/* ── el problema, en dos actos animados ───────────────────────────── */
/* Acto 1: tres estudios corren por el mismo caso y gana el que contesta.
   Acto 2: ese momento cae a cualquier hora y ninguna te encuentra libre.
   Todo arranca solo al entrar en pantalla. Nadie tiene que tocar nada. */

.acto {
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--tinta-suave);
  margin-bottom: .9rem;
}

.carrera {
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
  max-width: 46rem;
}

.carrera__cabeza {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-tarjeta);
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
  font-size: .95rem;
}
.carrera__chispa {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--baliza-2), var(--baliza));
  color: #fff;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .5);
  animation: chispazo 2.6s ease-out infinite;
}
.carrera__chispa svg { width: 1.25rem; height: 1.25rem; }
@keyframes chispazo {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
  35%           { box-shadow: 0 0 0 .7rem rgba(245, 158, 11, 0); }
}
.carrera__hora { color: var(--baliza-2); font-weight: 600; margin-right: .35rem; }

.carrera__lista {
  display: grid;
  gap: .7rem;
  margin-top: 1rem;
}

.pista {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'quien sello'
    'riel  riel'
    'tiempo tiempo';
  gap: .45rem .75rem;
  align-items: center;
  padding: .9rem 1.1rem;
  border-radius: var(--r-tarjeta);
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  /* entrada escalonada; el estado final lo pone .corre */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--sal), transform .45s var(--sal);
}
.pista__quien { grid-area: quien; font-weight: 700; font-size: .95rem; }
.pista__tiempo { grid-area: tiempo; color: var(--tinta-suave); font-size: .72rem; }
.pista__sello { grid-area: sello; }

.pista__riel {
  grid-area: riel;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--papel-hondo);
  overflow: hidden;
}
/* scaleX y no width: el ancho toca layout, la transformada va por GPU */
.pista__avance {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tinta-suave);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) linear .35s;
}
.pista--gana .pista__avance { background: linear-gradient(90deg, var(--marca-1), var(--marca-2)); }

.pista__sello {
  justify-self: end;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--papel-hondo);
  color: var(--tinta-suave);
  /* nunca desde scale(0): aparece desde algo que ya existe */
  opacity: 0;
  transform: scale(.92);
  transition: opacity .3s var(--sal), transform .3s var(--sal);
  transition-delay: calc(var(--dur) + .35s);
}
.pista--gana .pista__sello {
  background: linear-gradient(100deg, var(--marca-1), var(--marca-2));
  color: #fff;
}
.pista--gana {
  border-color: rgba(79, 70, 229, .35);
  box-shadow: var(--sombra-alta);
}

/* el disparo */
.carrera.corre .pista { opacity: 1; transform: none; }
.carrera.corre .pista:nth-child(2) { transition-delay: .07s; }
.carrera.corre .pista:nth-child(3) { transition-delay: .14s; }
.carrera.corre .pista__avance { transform: scaleX(1); }
.carrera.corre .pista__sello { opacity: 1; transform: scale(1); }

.carrera__remate {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.4;
  color: var(--tinta-media);
}
.carrera__remate strong { color: var(--tinta); }

/* ── acto 2: el reloj ──────────────────────────────────────────────── */
.reloj {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 46rem;
}
.reloj__intro { color: var(--tinta-media); margin-bottom: 1.5rem; }

.reloj__pista { position: relative; padding-top: 2.6rem; }

.reloj__pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  display: grid;
  place-items: center;
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .55s var(--mueve);
}
.reloj__pin::after {
  content: '';
  position: absolute;
  bottom: -.35rem;
  left: 50%;
  width: 2px;
  height: .5rem;
  margin-left: -1px;
  background: var(--baliza-2);
  border-radius: 1px;
}
.reloj__pin svg {
  width: 1.15rem;
  height: 1.15rem;
  padding: .35rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--baliza-2), var(--baliza));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(251, 106, 42, .9);
}

.reloj__franjas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 12px;
  background: var(--papel-hondo);
}
.franja {
  display: grid;
  place-items: center;
  padding: .85rem 0;
  border-radius: 10px;
  color: var(--tinta-suave);
  background: transparent;
  transition: background-color .35s var(--sal), color .35s var(--sal);
}
.franja svg { width: 1.35rem; height: 1.35rem; }
.franja.activa {
  background: var(--papel-alto);
  color: var(--tinta);
  box-shadow: var(--sombra);
}

.reloj__leyenda {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-top: 1rem;
  min-height: 1.6rem;
}
.reloj__hora { color: var(--baliza-2); font-weight: 600; }
.reloj__que {
  font-weight: 600;
  transition: opacity .2s var(--sal);
}
.reloj__que.cambiando { opacity: 0; }

.reloj__remate {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
}
.giro p { color: var(--tinta-media); }

/* ── flujo: los cuatro pasos se encienden solos ────────────────────── */
.flujo {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  counter-reset: paso;
}

.flujo__paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--papel);
  position: relative;
  overflow: hidden;
  opacity: .62;
  transition: opacity .45s ease, border-color .45s ease, background-color .45s ease, box-shadow .45s ease;
}
.flujo__paso.activo {
  opacity: 1;
  border-color: rgba(79, 70, 229, .35);
  background: var(--papel-alto);
  box-shadow: var(--sombra-alta);
}

.flujo__icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 12px;
  background: var(--papel-hondo);
  color: var(--tinta-media);
  transition: background .45s ease, color .45s ease, box-shadow .45s ease;
}
.flujo__icono svg { width: 1.7rem; height: 1.7rem; }
.flujo__paso.activo .flujo__icono {
  background: var(--degrade);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .95);
}

.flujo__cuerpo h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}
.flujo__cuerpo h3::before {
  counter-increment: paso;
  content: counter(paso) " · ";
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .78rem;
  color: var(--baliza-2);
}
.flujo__cuerpo p { color: var(--tinta-media); font-size: .93rem; }

/* En pantallas angostas los cuatro pasos completos comen media pantalla.
   Los inactivos se quedan en el título y el activo se abre solo. */
@media (max-width: 719px) {
  .flujo { gap: .6rem; }
  .flujo__paso { padding: .9rem 1rem; align-items: center; }
  .flujo__icono { width: 2.5rem; height: 2.5rem; }
  .flujo__icono svg { width: 1.4rem; height: 1.4rem; }

  .flujo__cuerpo p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
  }
  .flujo__paso.activo .flujo__cuerpo p {
    max-height: 14rem;
    opacity: 1;
    margin-top: .4rem;
  }
}

/* barra de avance del paso activo */
.flujo__paso::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--marca-1), var(--baliza));
}
.flujo__paso.activo::after {
  animation: avanzar var(--paso-ms, 2600ms) linear forwards;
}
@keyframes avanzar { to { width: 100%; } }

.cierre-seccion {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: 1.1rem;
  font-weight: 600;
}

/* ── banda de CTA entre secciones ──────────────────────────────────── */
.banda {
  padding-block: clamp(2.25rem, 4vw, 3rem);
  background: linear-gradient(100deg, #EEF0FE, #FDF3E3);
  border-block: 1px solid var(--linea);
}
.banda__int {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  text-align: center;
}
.banda__texto {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: -.02em;
}
.banda .btn--wa { width: auto; }

/* ── comparativa sin / con ─────────────────────────────────────────── */
.comparativa {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.25rem, 5vw, 3rem);
}
.compara {
  border-radius: var(--r-tarjeta);
  padding: clamp(1.35rem, 3vw, 1.85rem);
}
.compara__tit {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}
.compara__lista { display: grid; gap: .75rem; }
.compara__lista li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .65rem;
  align-items: start;
  font-size: .95rem;
  line-height: 1.5;
}
.compara__lista li::before {
  content: '';
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  margin-top: .1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: .8rem;
}

.compara--sin {
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  color: var(--tinta-media);
}
.compara--sin .compara__tit { color: var(--tinta-suave); }
.compara--sin .compara__lista li::before {
  background-color: #DFE5F0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8AA3' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.compara--con {
  position: relative;
  background: var(--papel-alto);
  border: 1px solid rgba(79, 70, 229, .22);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.compara--con::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marca-1), var(--marca-2) 60%, var(--baliza));
}
.compara--con .compara__tit { color: var(--marca-1); }
.compara--con .compara__lista li::before {
  background-color: #E6F7EE;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157F4B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ── carrusel de reseñas: se mueve solo, sin controles ─────────────── */
.seccion--resenas .h2 { color: #fff; }

.carrusel {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  overflow: hidden;
  /* se desvanece en los bordes: sugiere que sigue, sin cortar en seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carrusel__pista {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: desfilar 56s linear infinite;
}
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista { animation-play-state: paused; }

@keyframes desfilar {
  /* la pista lleva el contenido duplicado: al -50% el bucle es invisible */
  to { transform: translateX(-50%); }
}

.resena {
  flex: 0 0 auto;
  width: min(21rem, 78vw);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 3px solid var(--baliza);
  border-radius: var(--r-tarjeta);
  padding: 1.4rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.resena__texto {
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .93);
}
.resena__quien {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.resena__nombre { font-weight: 700; font-size: .9rem; }
.resena__donde {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: #9DAAC4;
  letter-spacing: .04em;
  margin-top: .15rem;
}

/* ── la cuenta ─────────────────────────────────────────────────────── */
.cuenta {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: 42ch;
}
.cuenta__linea {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  font-weight: 600;
  padding: .8rem 0;
}
.cuenta__linea--fuerte {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.025em;
  border-bottom: 1px solid var(--linea);
}
.cuenta__pie {
  margin-top: 1.25rem;
  color: var(--tinta-media);
  font-size: .95rem;
}

/* ── demo ──────────────────────────────────────────────────────────── */
.demo__int { text-align: center; }
.demo__texto {
  color: rgba(255, 255, 255, .9);
  max-width: 54ch;
  margin: 0 auto 1rem;
}
.demo__texto strong { color: #fff; }
.demo__texto--chico {
  font-size: .9rem;
  color: rgba(255, 255, 255, .78);
  margin-top: 2rem;
}
.demo__int .btn--grande { margin-top: 1.5rem; }
.demo__pie {
  margin-top: 1rem;
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
}

/* ── faq ───────────────────────────────────────────────────────────── */
.faq {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  max-width: 68ch;
  border-top: 1px solid var(--linea);
}
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary {
  padding: 1.15rem 2rem 1.15rem 0;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 1.05rem;
  font-family: var(--f-mono);
  font-size: 1.2rem;
  color: var(--baliza-2);
}
.faq__item[open] summary::after { content: '–'; }
.faq__item p {
  padding-bottom: 1.35rem;
  color: var(--tinta-media);
  max-width: 60ch;
}
.faq__item strong { color: var(--tinta); }

/* ── asesor: la salida para el que no quiere probar nada ───────────── */
/* Va centrada a propósito: es el último bloque de la página y no compite con
   nada. `.contenedor` ya la centra por el max-width. */
.asesor { max-width: 46rem; text-align: center; }
.asesor__tit {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: 1.75rem;
}
.asesor__nota { margin-top: .9rem; color: var(--tinta-suave); font-size: .75rem; }

/* ── pie ───────────────────────────────────────────────────────────── */
.pie {
  background: var(--noche);
  color: #A9B6CC;
  padding-block: 3rem;
  font-size: .88rem;
}
.pie__int { display: grid; gap: 1.75rem; }
.pie__marca {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: .4rem;
}
.pie a { color: #fff; }
/* Los links de texto del pie miden 18 px de alto: en el celular se erran.
   El padding no cambia cómo se ven, solo agranda dónde se puede tocar. */
.pie__int p a { display: inline-block; padding-block: .7rem; }
.pie__int p { margin-block: -.35rem; }
.pie__redes { display: flex; gap: .6rem; margin-top: .9rem; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.pie__redes a:hover {
  background: rgba(245, 158, 11, .2);
  border-color: rgba(245, 158, 11, .5);
}
.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 1.5rem;
  font-size: .8rem;
  color: #7E8CA5;
  max-width: 62ch;
}

/* ══ 720px arriba ══════════════════════════════════════════════════ */
@media (min-width: 720px) {
  .prueba { grid-template-columns: 1.15fr 1fr; }
  .comparativa { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .flujo { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .pie__int { grid-template-columns: 2fr 1fr; }
  .pie__legal { grid-column: 1 / -1; }
}

/* ══ 980px arriba: el hero se parte ════════════════════════════════ */
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.3fr .7fr; }
  .flujo { grid-template-columns: repeat(4, 1fr); }
  /* Las tarjetas se estiran a la más alta. Sin filas explícitas, el sobrante
     se reparte entre el ícono y el texto y cada tarjeta arranca a distinta
     altura: toda la sobra va a la última fila. */
  .flujo__paso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1rem; }
  /* Y con los títulos de distinto largo, se reserva el alto de tres líneas
     para que los párrafos empiecen parejos. */
  .flujo__cuerpo h3 { min-height: 3.7em; }
}

/* En mobile el formulario sube por encima del chat, pero nunca por encima del
   headline: alguien que llega de un mail en frío tiene que saber qué es esto
   antes de que le pidan el teléfono. Orden: promesa → formulario → prueba. */
@media (max-width: 979px) {
  .hero__grid { display: flex; flex-direction: column; gap: 0; }
  .hero__texto { display: contents; }
  .hero__form { order: 2; margin-top: 2rem; }
  .prueba { order: 3; margin-top: 2.5rem; }
}

/* ── movimiento reducido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hl { background-size: 100% 34%; }
  .display .hl, .h2 .hl { background-size: 100% 26%; }
  .chat__hilo { scroll-behavior: auto; }
  .oscuro::after { opacity: .7; }

  /* el carrusel se vuelve una lista con scroll manual */
  .carrusel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .carrusel__pista { animation: none; }

  /* los cuatro pasos quedan encendidos a la vez, sin secuencia */
  .flujo__paso { opacity: 1; }
  .flujo__paso::after { display: none; }

  /* La carrera se muestra terminada: se entiende igual, sin nada moviéndose.
     Movimiento reducido es menos movimiento, no menos información. */
  .pista { opacity: 1; transform: none; }
  .pista__avance { transform: scaleX(1); }
  .pista__sello { opacity: 1; transform: none; }
  .carrera__chispa { animation: none; }
  .reloj__pin { transition: none; }
  .tarjeta-form--senala { animation: none; }
}