/*
 * La landing pública de Atlas AI.
 *
 * ─── HEREDA EL SISTEMA DEL PANEL, NO LO REINVENTA ───────────────────────────
 *
 * Los mismos tokens que `apps/api/public/assets/panel.css`: misma escala
 * tipográfica, mismo espaciado, mismos colores. Quien entre desde aquí al panel
 * no debe notar que cambió de sitio, y hoy sí lo nota: la puerta era clara y lo
 * de dentro oscuro.
 *
 * ⚠️ Son DOS archivos en dos Workers distintos, así que un token que cambie en
 * uno hay que cambiarlo en el otro. No hay build que los una, y unirlos exigiría
 * que `apps/web` dependiera de `apps/api`, que es justo lo que prohíbe la regla
 * de dependencias del proyecto.
 *
 * ─── SIN JAVASCRIPT, Y NO ES UNA LIMITACIÓN QUE HAYA QUE SORTEAR ────────────
 *
 * La CSP de `apps/web/public/_headers` declara `script-src 'none'`. Esta página
 * es la que revisa Meta junto a las legales, y no ejecuta nada. Todo lo de aquí
 * es HTML y CSS: sin acordeones, sin carrusel, sin animaciones de entrada.
 *
 * También prohíbe estilos en línea (`style-src 'self'`), así que NADA de
 * `style=""` en el HTML: se rompería en silencio.
 *
 * ─── LAS TIPOGRAFÍAS SE SIRVEN DESDE AQUÍ ───────────────────────────────────
 *
 * Nada de CDN. `font-src 'self'` ya estaba en la política, así que alojarlas
 * evita abrir un origen nuevo, evita dos conexiones antes de ver una letra y no
 * le cuenta a nadie quién visita el sitio. Si el archivo falta, cae al respaldo
 * del sistema y la página sigue leyéndose.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS · espejo de panel.css
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sans:
    'Instrument Sans', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.875rem;
  --t-base: 0.9375rem;
  --t-lg: 1.125rem;
  --t-xl: 1.3125rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.5rem;

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-14: 3.5rem;
  --e-20: 5rem;

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;

  --canal: clamp(1rem, 4vw, 2rem);
  --ancho: 62rem;
  --transicion: 110ms ease-out;

  --bg: #0b0c0e;
  --panel: #141518;
  --hover: #1b1d21;
  --linea: #23252a;
  --linea2: #33363d;
  --tx: #f2f3f5;
  --tx2: #8b8f9a;
  --ac: #7c86ff;
  --ac-bg: #1a1d34;
  --ac-tx: #0b0c0e;
  --ok: #3ecf8e;
  --ok-bg: #10261d;
  --ok-bd: #265c42;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p {
  margin: 0;
}

a {
  color: var(--ac);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
.boton:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.salto {
  position: absolute;
  left: -9999px;
}

.salto:focus {
  left: var(--canal);
  top: var(--e-2);
  z-index: 10;
  padding: var(--e-2) var(--e-4);
  background: var(--ac);
  color: var(--ac-tx);
  border-radius: var(--r);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA · el botón de entrar es lo único accionable, y se ve
   ═══════════════════════════════════════════════════════════════════════════ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 3.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--tx);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marca:hover {
  text-decoration: none;
}

.marca__punto {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--r-sm);
  background: var(--ac);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px de alto mínimo: es el objetivo táctil que se puede pulsar sin fallar. */
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-weight: 550;
  font-size: var(--t-md);
  transition: background var(--transicion);
}

.boton:hover {
  text-decoration: none;
}

.boton--primario {
  background: var(--ac);
  color: var(--ac-tx);
}

.boton--primario:hover {
  background: color-mix(in srgb, var(--ac) 85%, white);
}

.boton--fantasma {
  border-color: var(--linea2);
  color: var(--tx);
}

.boton--fantasma:hover {
  background: var(--hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA
   ═══════════════════════════════════════════════════════════════════════════ */

.portada {
  padding-block: var(--e-20) var(--e-14);
  border-bottom: 1px solid var(--linea);
}

.portada__titulo {
  font-size: var(--t-3xl);
  max-width: 20ch;
}

.portada__entrada {
  margin-top: var(--e-5);
  font-size: var(--t-lg);
  color: var(--tx2);
  max-width: 54ch;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

.portada__nota {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--tx2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIONES
   ═══════════════════════════════════════════════════════════════════════════ */

.seccion {
  padding-block: var(--e-14);
  border-bottom: 1px solid var(--linea);
}

.seccion__titulo {
  font-size: var(--t-2xl);
}

.seccion__entrada {
  margin-top: var(--e-2);
  color: var(--tx2);
  max-width: 62ch;
}

/* El recorrido: numerado, porque el orden ES la información. */
.pasos {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-8) 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.paso {
  padding: var(--e-5);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
}

.paso__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-sm);
  background: var(--ac-bg);
  color: var(--ac);
  font-family: var(--mono);
  font-size: var(--t-xs);
}

.paso__titulo {
  margin-top: var(--e-3);
  font-size: var(--t-base);
  font-weight: 600;
}

.paso__texto {
  margin-top: var(--e-2);
  font-size: var(--t-md);
  color: var(--tx2);
}

/* Cifras: lo que el producto hace, en números y no en adjetivos. */
.cifras {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-8) 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.cifra {
  padding: var(--e-5);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
}

.cifra__valor {
  font-family: var(--mono);
  font-size: var(--t-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.cifra__etiqueta {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--tx2);
}

/* La garantía. Es lo que más se pregunta, así que se destaca. */
.garantia {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  margin-top: var(--e-8);
  padding: var(--e-5);
  background: var(--ok-bg);
  border: 1px solid var(--ok-bd);
  border-radius: var(--r-lg);
}

.garantia__marca {
  flex: none;
  color: var(--ok);
  font-size: var(--t-lg);
  line-height: 1.2;
}

.garantia__titulo {
  font-weight: 600;
}

.garantia__texto {
  margin-top: var(--e-1);
  font-size: var(--t-md);
  color: var(--tx2);
}

.datos {
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-2);
}

.datos li {
  padding-left: var(--e-5);
  position: relative;
  color: var(--tx2);
  font-size: var(--t-md);
}

.datos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--linea2);
}

.datos strong {
  color: var(--tx);
  font-weight: 550;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIE · las legales van aquí y son las que revisa Meta
   ═══════════════════════════════════════════════════════════════════════════ */

.pie {
  padding-block: var(--e-8) var(--e-10);
}

.pie__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: baseline;
  justify-content: space-between;
}

.pie__nota {
  font-size: var(--t-sm);
  color: var(--tx2);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  /* Sin viñetas y sin subrayado por omisión: un pie con puntos azules
     subrayados es el aspecto de un documento sin estilar. */
  list-style: none;
  font-size: var(--t-sm);
}

.pie__enlaces a {
  color: var(--tx2);
}

.pie__enlaces a:hover {
  color: var(--tx);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 34rem) {
  :root {
    --t-3xl: 1.875rem;
    --t-2xl: 1.375rem;
  }

  .portada {
    padding-block: var(--e-10) var(--e-8);
  }

  .seccion {
    padding-block: var(--e-10);
  }

  /* El botón ocupa el ancho: en un pulgar, un objetivo estrecho se falla. */
  .portada__acciones .boton {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Quien tenga el sistema en claro ve la página en claro, con los mismos
   tokens del panel para que la transición entre ambos no cambie de tono. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --panel: #fafafa;
    --hover: #f2f3f5;
    --linea: #e6e8ec;
    --linea2: #d2d6dd;
    --tx: #14161a;
    --tx2: #626873;
    --ac: #4f46e5;
    --ac-bg: #eef0ff;
    --ac-tx: #ffffff;
    --ok: #0f7a4d;
    --ok-bg: #e3f7ed;
    --ok-bd: #9ad4b8;
  }
}