/* ── Tipografía autoalojada ─────────────────────────────────────────────
   Se sirven desde el propio dominio a propósito: cargarlas desde
   fonts.googleapis.com envía la IP de cada visitante a Google sin
   consentimiento. No vuelvas a meter el <link> de Google Fonts.

   Son fuentes VARIABLES: un solo fichero cubre todos los pesos que usamos
   (68 KB los dos juntos, menos que cinco ficheros estáticos). El rango
   declarado es el que la página usa de verdad, no el que la fuente
   soporta.                                                             */
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("assets/fonts/figtree-variable.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-variable.woff2") format("woff2");
}

:root {
  --texto: #102A43;
  --texto-suave: #486581;
  --azul: #00497E;
  --cta: #D50045;
  --borde: #C3D2E0;
  --fondo: #FFFFFF;
  --fondo-suave: #F2F6FA;
  --fondo-azulado: #E3EEF7;
  --oscuro: #022A47;
  --verde: #1E9E56;

  --titulo: Figtree, system-ui, sans-serif;
  --cuerpo: Inter, system-ui, sans-serif;

  --ancho: 1312px;   /* 1440 del diseño menos los 64 de margen a cada lado */
  --margen: 64px;
  --radio: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 800; line-height: 1.1; margin: 0; }
h1 { font-size: 52px; }
h2 { font-size: 40px; }
h3 { font-size: 20px; font-weight: 700; }
p  { margin: 0; }

a { color: var(--azul); }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 2.5px;
  color: var(--azul); text-transform: uppercase;
}

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cta); color: #FFFFFF;
  font-family: var(--cuerpo); font-size: 15px; font-weight: 600;
  padding: 15px 22px; border: 0; border-radius: var(--radio);
  cursor: pointer; text-decoration: none;
}
.boton:hover { filter: brightness(0.93); }
.boton:disabled { opacity: .6; cursor: default; }

/* Foco visible: el diseño original no lo contemplaba y sin esto la página
   no se puede recorrer con el teclado. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--azul); outline-offset: 2px;
}

/* ── Navegación ─────────────────────────────────────────────────────── */
.nav { padding-block: 20px; }
.nav__interior { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto); }
.nav__producto { font-family: var(--titulo); font-size: 22px; font-weight: 800; }
.nav__enlaces { display: flex; align-items: center; gap: 36px; }
.nav__enlaces a { color: var(--texto); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav__enlaces a:hover { color: var(--azul); }
.nav__enlaces .boton { color: #FFFFFF; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: 72px 88px; }
.hero__interior { display: flex; align-items: center; gap: 64px; }
.hero__texto { flex: 1 1 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero__sub { color: var(--texto-suave); }
.hero__specs { color: var(--texto-suave); font-size: 14px; }

.hero__mock { flex: 0 1 560px; position: relative; margin: 0; }
.hero__mock img { border-radius: 20px; }
/* Velo oscuro para que el texto blanco del overlay tenga contraste suficiente
   sobre cualquier zona de la foto. */
.hero__mock::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  background: linear-gradient(180deg, rgba(2,42,71,.55) 0%, rgba(2,42,71,.15) 45%, rgba(2,42,71,.75) 100%);
}
.mock__hud, .mock__marca, .mock__grafica { position: absolute; z-index: 1; color: #FFFFFF; }
.mock__hud { top: 20px; left: 20px; display: flex; flex-direction: column; gap: 4px; }
.mock__distancia { font-family: var(--titulo); font-size: 36px; font-weight: 800; line-height: 1; }
.mock__tiempo { font-size: 16px; font-weight: 600; color: #C9DCEC; }
.mock__cinematica { font-size: 15px; font-weight: 600; margin-top: 4px; }
.mock__cinematica em { font-style: normal; color: #66FF99; }
.mock__marca { top: 20px; right: 20px; font-family: var(--titulo); font-weight: 700; font-size: 14px; opacity: .75; }
.mock__grafica {
  left: 20px; right: 20px; bottom: 20px; height: 72px;
  border-radius: 10px; background: rgba(10,28,48,.55);
}
.mock__curva { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock__area { fill: rgba(52, 211, 153, .22); }
.mock__linea { fill: none; stroke: #34D399; stroke-width: 2; stroke-linejoin: round; }
/* Fuera de la franja, encima: dentro competía con la curva y el playhead la
   atravesaba por la mitad. */
.mock__stats {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 8px;
  font-size: 12px; font-weight: 500; color: #FFFFFF; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(2,42,71,.9);
}
/* 32,6 % = t de 1,76 s sobre los 5,41 s de la carrera: el instante de los 8 m. */
.mock__playhead { position: absolute; top: 0; bottom: 0; left: 32.6%; width: 2px; background: #34D399; }
.mock__playhead::after {
  content: ""; position: absolute; top: 30.3%; left: -4px;  /* sobre la curva, no en el suelo */
  width: 10px; height: 10px; border-radius: 50%; background: #34D399;
  box-shadow: 0 0 0 2px rgba(2,42,71,.65);
}

/* ── Formulario de alta ─────────────────────────────────────────────── */
.alta { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.alta__fila { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.alta__etiqueta {
  /* Visible solo para lectores de pantalla: el diseño usa el placeholder,
     pero un input sin etiqueta asociada es inaccesible. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.alta__input {
  flex: 1 1 300px; min-width: 0;
  padding: 15px 18px; border: 1.5px solid var(--borde); border-radius: var(--radio);
  font-family: var(--cuerpo); font-size: 15px; color: var(--texto); background: #FFFFFF;
}
.alta__input::placeholder { color: #8FA7BC; }
.alta__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alta__consentimiento {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--texto-suave); line-height: 1.45;
}
.alta__consentimiento input { margin-top: 3px; flex-shrink: 0; }
.alta__micro { font-size: 14px; color: var(--texto-suave); }
.alta__estado:empty { display: none; }
.alta__estado { font-size: 15px; font-weight: 500; }
.alta__estado[data-tono="ok"] { color: var(--verde); }
.alta__estado[data-tono="error"] { color: var(--cta); }

/* ── Cómo funciona ──────────────────────────────────────────────────── */
.pasos { padding-block: 72px; background: var(--fondo-suave); }
.pasos h2 { margin-bottom: 40px; }
.pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
.paso { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.paso__num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--azul); color: #FFFFFF; font-family: var(--titulo); font-weight: 800;
}
.paso p { color: var(--texto-suave); }

/* ── Pilares ────────────────────────────────────────────────────────── */
.pilares { padding-block: 72px; }
.pilares__sub { color: var(--texto-suave); margin-top: 16px; max-width: 720px; }
.pilares__rejilla {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr);
}
.pilar { border: 1px solid var(--borde); border-radius: 16px; padding: 28px; background: #FFFFFF; }
.pilar h3 { margin-bottom: 10px; }
.pilar p { color: var(--texto-suave); font-size: 16px; }

/* ── Análisis ───────────────────────────────────────────────────────── */
.analisis { padding-block: 72px; background: var(--fondo-azulado); }
.analisis h2 { margin-top: 12px; max-width: 780px; }
.analisis__cifras {
  margin: 40px 0 0; display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr);
}
.cifra { background: #FFFFFF; border-radius: 14px; padding: 22px; text-align: center; }
.cifra dt { font-family: var(--titulo); font-size: 19px; font-weight: 700; color: var(--azul); }
.cifra dd { margin: 0; }
.cifra__valor { font-family: var(--titulo); font-size: 26px; font-weight: 800; margin-top: 6px; }
.cifra__pie { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }
.analisis__nota { font-size: 13px; color: var(--texto-suave); margin-top: 14px; }
.analisis__lista { margin: 32px 0 0; padding-left: 22px; display: grid; gap: 14px; color: var(--texto-suave); }

/* ── Comparativa ────────────────────────────────────────────────────── */
.comparativa { padding-block: 72px; }
.comparativa__rejilla {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr);
}
.comparativa__col { border-top: 3px solid var(--azul); padding-top: 20px; }
.comparativa__col p { color: var(--texto-suave); font-size: 16px; margin-top: 10px; }

/* ── Estado ─────────────────────────────────────────────────────────── */
.estado { padding-block: 72px; background: var(--fondo-suave); }
.estado__sub { color: var(--texto-suave); margin-top: 16px; max-width: 720px; }
.estado__rejilla { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
.estado__col { background: #FFFFFF; border-radius: 16px; padding: 28px; }
.estado__col ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 12px; color: var(--texto-suave); font-size: 16px; }
.estado__col h3 { color: var(--verde); }
.estado__col--wip h3 { color: #E86A2B; }

/* ── Cierre ─────────────────────────────────────────────────────────── */
.cierre { padding-block: 88px; background: var(--oscuro); color: #FFFFFF; }
.cierre h2 { color: #FFFFFF; }
.cierre__sub { color: #C9DCEC; margin-top: 16px; max-width: 680px; }
.alta--cierre { margin-top: 32px; max-width: 640px; }
.cierre .alta__consentimiento { color: #C9DCEC; }
.cierre .alta__consentimiento a { color: #9FC3E0; }
.cierre__correo { margin-top: 24px; color: #C9DCEC; font-size: 15px; }
.cierre__correo a { color: #FFFFFF; }

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie { background: #0A1C30; color: #C9DCEC; padding-block: 32px; }
.pie__interior { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.pie a { color: #C9DCEC; }

/* ── Páginas legales / de confirmación ──────────────────────────────── */
.legal { padding-block: 56px 88px; }
.legal h1 { font-size: 40px; }
.legal h2 { font-size: 22px; margin-top: 36px; }
.legal p { margin-top: 14px; color: var(--texto-suave); max-width: 720px; }
.legal p strong { color: var(--texto); }
.legal__fecha, .legal__intro { margin-top: 10px; }
.legal__intro { font-size: 19px; }
.legal .boton { margin-top: 12px; }

/* ── Responsive ────────────────────────────────────────────────────────
   El export de Pencil tenía 1440px fijos. Estos dos cortes son el motivo
   entero de haber reescrito el HTML: con estilos inline no se pueden
   aplicar sin !important en cada regla.                                */
@media (max-width: 900px) {
  :root { --margen: 24px; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  body { font-size: 16px; }

  .nav__enlaces { gap: 20px; }
  .nav__enlaces a:not(.boton) { display: none; } /* en móvil manda el CTA */

  .hero { padding-block: 40px 56px; }
  .hero__interior { flex-direction: column; gap: 40px; }
  .alta__fila { flex-direction: column; align-items: stretch; }
  .alta__fila .boton { width: 100%; }

  .pasos__lista, .pilares__rejilla { grid-template-columns: 1fr; }
  .analisis__cifras { grid-template-columns: repeat(2, 1fr); }
  .comparativa__rejilla, .estado__rejilla { grid-template-columns: 1fr; }

  .pasos, .pilares, .analisis, .comparativa, .estado { padding-block: 48px; }
  .cierre { padding-block: 56px; }
  .legal { padding-block: 32px 56px; }
  .legal h1 { font-size: 30px; }
}

@media (max-width: 600px) {
  :root { --margen: 20px; }
  h1 { font-size: 29px; }

  .analisis__cifras { grid-template-columns: 1fr; }
  .mock__distancia { font-size: 26px; }
  .mock__grafica { height: 48px; }
  .mock__stats { font-size: 11px; }
}