/* ============================================================================
   Alio · Sistema de diseño del website
   ----------------------------------------------------------------------------
   La paleta es «Pizarra y Latón» v3.0 (docs de identidad). El website es un
   canal de COMUNICACIÓN, así que puede usar la gama expresiva y los degradados
   —cosa que el producto no puede—, con UNA excepción importante:

     La maqueta del teléfono que aparece en el héroe ES el producto dibujado
     dentro de una pieza de comunicación. Se rige por las reglas de producto:
     base + latón + semántico, sin gama expresiva y sin degradados. Vive en
     css/alio-home.css y toma los tokens `--p-*` y `--sem-*`, nunca los `--x-*`.

   La arquitectura (nav transparente sobre héroe a sangre, controles píldora,
   ritmo espacioso, separación por valor) sigue siendo la de Mercury; la escala
   display, la de PayPal; el detalle ambiental, el de Wealthsimple. Lo que
   cambió es el color y la tipografía, no la composición.
   ========================================================================== */

:root {
  /* ==========================================================================
     NIVEL PRODUCTO · lo único que puede aparecer dentro de la app
     ====================================================================== */

  /* Base · modo claro */
  --p-bg: #f6f7f8; /* Papel */
  --p-surface: #ffffff; /* Superficie */
  --p-text: #171c22; /* Texto — 16,2:1 sobre papel */
  --p-sub: #5c6773; /* Secundario — 5,3:1 sobre papel */
  --p-border: #e1e5ea;
  --p-slate: #2f3e4e; /* Pizarra — 10,9:1 con blanco */
  --p-slate-deep: #1e2a36; /* Profundo */
  --p-slate-soft: #e3e8ed; /* Suave */
  --p-on-slate: #ffffff;

  /* Base · modo oscuro */
  --p-bg-d: #101419;
  --p-surface-d: #1a2028;
  --p-text-d: #e9edf2; /* 14:1 sobre el fondo oscuro */
  --p-sub-d: #94a0ae; /* 7,0:1 */
  --p-border-d: #28323d;
  --p-slate-d: #9fb4c9; /* 8,7:1 — la pizarra se aclara para seguir siendo acción */
  --p-slate-deep-d: #c2d2e0;
  --p-slate-soft-d: #232d38;
  --p-on-slate-d: #131a21;

  /* Acento · Latón. Escaso a propósito: es la celebración de un logro.
     NUNCA lleva texto blanco (medido: 3,6:1). Siempre tinta oscura. */
  --p-brass: #a9803a; /* 4,8:1 con la tinta de latón */
  --p-brass-d: #d2a85f; /* 8,4:1 sobre el fondo oscuro */
  --p-brass-soft: #f3eada;
  --p-brass-soft-d: #33280f;
  --p-on-brass: #241905;

  /* Semántico · fijo y ajeno a la marca: su función es informativa.
     El gasto va en ARCILLA, no en rojo: un mes en negativo es un hecho, no un
     error. El rojo queda para los fallos del sistema y nada más. */
  --sem-in: #2e7d5b;
  --sem-out: #a85b45;
  --sem-save: #3a6fa8;
  --sem-warn: #b0842b;
  --sem-error: #b3402f;
  --sem-in-d: #5fbf95;
  --sem-out-d: #d08a72;
  --sem-save-d: #7fade0;
  --sem-warn-d: #dcaf52;
  --sem-error-d: #e07a66;

  /* ==========================================================================
     NIVEL COMUNICACIÓN · solo fuera de la app
     ====================================================================== */

  /* Gama expresiva. Tres niveles de valor × dos temperaturas, más el latón
     claro cerrando por arriba. Cada uno lleva anotada la tinta que admite,
     medida: por debajo de 4,5:1 no se usa para texto de cuerpo. */
  --x-peltre: #96a2ad; /* frío medio — tinta oscura (6,7:1); blanco NO (2,6:1) */
  --x-eucalipto: #6f8c88; /* frío medio-oscuro — tinta oscura (4,8:1); blanco NO (3,6:1) */
  --x-lino: #e6e0d4; /* cálido claro — tinta oscura (13,2:1) */
  --x-arena: #c2ae92; /* cálido medio — tinta oscura (8,0:1) */
  --x-laton-claro: #d4b269; /* cálido brillante — tinta de latón (8,5:1) */

  /* Degradados. El de tres paradas es la firma del sistema. */
  --g-acero: linear-gradient(135deg, #2f3e4e, #96a2ad);
  --g-crepusculo: linear-gradient(135deg, #1e2a36, #a9803a);
  --g-marea: linear-gradient(135deg, #2f3e4e, #6f8c88);
  --g-duna: linear-gradient(160deg, #c2ae92, #f6f7f8);
  --g-aleacion: linear-gradient(135deg, #1e2a36, #6f8c88 52%, #d4b269);

  /* ==========================================================================
     LA BANDA · el sitio alterna claro y oscuro, y cada sección declara cuál.
     --------------------------------------------------------------------------
     Por defecto la banda es CLARA (papel), que es como está definido el
     sistema. `.band--dark` la voltea. Todo lo que cambia de color entre las
     dos —texto, líneas, botones— lee de estos seis tokens y de ningún otro,
     así que una sección se cambia de bando con una clase.
     ====================================================================== */

  --canvas: var(--p-bg);
  --surface: var(--p-surface);
  --fg: var(--p-text);
  --fg-soft: var(--p-sub);
  --hairline: rgba(23, 28, 34, 0.12);
  --kicker: var(--p-sub);

  --cta-bg: var(--p-slate);
  --cta-bg-hover: var(--p-slate-deep);
  --cta-fg: var(--p-on-slate);
  --ghost-line: rgba(47, 62, 78, 0.45);
  --ghost-wash: rgba(47, 62, 78, 0.07);
  --focus: var(--p-brass);

  /* ---- Cielo del crepúsculo (paisaje del héroe) -----------------------
     Derivado del sistema, no inventado: es el degradado Crepúsculo abierto en
     siete paradas — cenit en el fondo oscuro, pizarra, peltre, y arena y latón
     claro en el horizonte. */
  --sky-0: #101419;
  --sky-1: #1e2a36;
  --sky-2: #2f3e4e;
  --sky-3: #5c6773;
  --sky-4: #96a2ad;
  --sky-5: #c2ae92;
  --sky-6: #d4b269;

  /* ---- Tipografía -----------------------------------------------------
     DM Sans sostiene el sistema completo: la jerarquía se construye por peso y
     tamaño, no por cambio de familia. Space Grotesk aparece en dosis mínimas y
     en dos funciones —etiquetas de sección en versalitas y el logotipo—, con
     un uso por pieza. En el sitio, «pieza» = sección: cada una gasta el suyo
     en su propia etiqueta. */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);

  /* Escala: cuerpo con el ritmo de Mercury, display con la ambición de PayPal.
     Nada baja de 11 px (regla del sistema). */
  --text-caption: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-body: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.3125rem; /* 21 */
  --text-h3: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  /* El bloque «Por qué Alio» comparte viewport con el teléfono: manda la
     ALTURA de la ventana, no el ancho, o en un portátil de 700 px el titular
     se metía debajo de la barra de navegación. */
  --text-h2: clamp(1.5rem, 0.2rem + 3.6vh + 0.6vw, 2.6rem);
  /* El titular del héroe comparte viewport con la animación y el teléfono:
     el término en vh evita que en pantallas bajas se coma la composición. */
  --text-h1: clamp(1.9rem, 0.4rem + 3.2vh + 1.7vw, 3.5rem);

  --tracking-display: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.02em;
  --tracking-label: 0.14em; /* versalitas de sección, Space Grotesk */

  /* ---- Espaciado (base 4, densidad espaciosa de Mercury) -------------- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-56: 56px;
  --sp-72: 72px;
  --sp-112: 112px;

  /* ---- Formas --------------------------------------------------------- */
  --r-pill: 999px;
  --r-card: 16px;
  --r-sm: 10px;

  /* ---- Layout ---------------------------------------------------------- */
  --page-max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---- Duración del recorrido del héroe -------------------------------
     Son solo el respaldo por si el JS no llega a ejecutarse; en marcha los
     recalcula js/hero.js en píxeles a partir del alto real del escenario. */
  --zoom-scroll: 150vh; /* el vuelo hacia la pantalla */
  --shift-scroll: 55vh; /* el teléfono se corre a la derecha */
  --read-scroll: 75vh; /* reposo para leer el bloque */
  /* El cambio de pestaña no aparece aquí a propósito: no consume scroll
     propio, va montado sobre la salida de la sección (js/hero.js · L.turn). */
}

/* La banda oscura. Las secciones que la llevan son las que el sistema
   sanciona con sus propios degradados: el héroe (Crepúsculo abierto en cielo),
   Alio AI (Aleación) y el cierre (Crepúsculo). En ellas la acción principal no
   puede ser pizarra sólida —desaparecería—, así que se invierte igual que en
   el modo oscuro del producto: relleno claro, tinta oscura. */
.band--dark {
  --canvas: var(--p-bg-d);
  --surface: var(--p-surface-d);
  --fg: var(--p-text-d);
  --fg-soft: var(--p-sub-d);
  --hairline: rgba(233, 237, 242, 0.16);
  --kicker: var(--p-slate-d);

  --cta-bg: var(--p-text-d);
  --cta-bg-hover: #ffffff;
  --cta-fg: var(--p-on-slate-d);
  --ghost-line: rgba(233, 237, 242, 0.5);
  --ghost-wash: rgba(233, 237, 242, 0.08);
  --focus: var(--p-brass-d);

  color: var(--fg);
  background: var(--canvas);
}

@media (max-width: 720px) {
  :root {
    --zoom-scroll: 115vh;
    --read-scroll: 60vh;
  }
}

/* ============================================================================
   Base
   ========================================================================== */

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

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

/* El atributo `hidden` lo apaga el navegador con `display: none`, pero eso vive
   en SU hoja de estilos: cualquier `display` que declaremos nosotros le gana, y
   el elemento se queda a la vista con el atributo puesto — o sea, escondido
   para un lector de pantalla y visible para todos los demás, que es la peor de
   las dos mitades. Se vio en el campo de contraseña del diálogo de la cuenta,
   que es `display: grid`. El `!important` es la forma habitual de cerrarlo: no
   hay ningún caso en el que queramos que algo con `hidden` se vea. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sin esto, el margen por defecto de <p> (1em arriba y abajo) estiraba la
   recreación del Home ~160 px y la tarjeta de Recomendaciones terminaba
   metida por debajo de la barra de pestañas. */
p,
h1,
h2,
h3 {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Todo monto lleva numerales tabulares: sin ellos las columnas de cifras se
   desalinean al cambiar los dígitos (regla del sistema). */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* La etiqueta de sección: Space Grotesk en versalitas con tracking abierto.
   Es el ÚNICO uso de la segunda familia por sección. */
.label {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--kicker);
}

/* Solo visible para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Controles
   ----------------------------------------------------------------------------
   Regla de jerarquía del sistema: la llamada a la acción principal es SIEMPRE
   la pizarra en relleno sólido. El latón no es una acción — es la celebración
   de un logro, y su escasez es la condición de su significado. Por eso ningún
   botón de este sitio es dorado.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--cta-bg-hover);
}

/* Secundaria: contorno, nunca color */
.btn--ghost {
  border: 1px solid var(--ghost-line);
  color: var(--fg);
}

.btn--ghost:hover {
  border-color: var(--fg);
  background: var(--ghost-wash);
}

.btn--sm {
  padding: 9px 18px;
  font-size: var(--text-sm);
}

/* El foco sí usa el latón, y es la única licencia: es un estado transitorio
   del sistema que solo existe mientras se navega con teclado, y es el único
   color de la paleta que se ve tanto sobre papel como sobre pizarra. */
:where(a, button):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

/* ============================================================================
   Accesibilidad · movimiento reducido
   Con la preferencia activa el recorrido se desarma: nada se ancla, nada
   vuela. La misma información se lee apilada. Ver js/hero.js.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}