/* ══════════════════════════════════════════════════════════════════════════
   AURA AGRO — sistema de diseño. Fuente única de verdad para todas las
   páginas de public/.

   POR QUÉ EXISTE: hasta 2026-09-10 no había NI UNA hoja de estilos. Siete
   páginas, siete bloques <style> independientes, y el verde de marca escrito
   a mano en siete archivos. Es el mismo fallo que ya costó dinero dos veces
   en el código (dos tablas de planes divergentes, dos tablas de precios
   divergentes), esta vez en el CSS.

   CÓMO SE USA: <link rel="stylesheet" href="/tokens.css"> antes de cualquier
   <style> propio de la página. Nunca escribas un color en hexadecimal dentro
   de una página: si te falta un token, añádelo AQUÍ.

   ── DE DÓNDE SALEN ESTOS COLORES ────────────────────────────────────────
   NO están inventados. Se extrajeron del logotipo real
   (PLAY_RECURSOS/ICONO_PLAY_512x512.png) muestreando sus píxeles:

       azul marino del badge  #0C182A   ← el fondo del logo
       verde lima del trazo   #78C03C
       azul del trazo         #3078B4 → #48B4F0

   Ese #0C182A es, casi exactamente, el #0D1B2A que usaban las páginas antes.
   Es decir: el diseño oscuro anterior no era arbitrario, copiaba el fondo
   del logo.

   ── LA DECISIÓN CENTRAL ─────────────────────────────────────────────────
   El lector es un ganadero con un teléfono barato A PLENO SOL, y una
   pantalla casi negra al sol se convierte en un espejo. Pero el azul marino
   ES la marca y no se puede tirar.

   Solución: el azul marino de la marca pasa a ser la TINTA (el color del
   texto) en vez del fondo. La marca sigue presente en cada letra de la
   página, y la página se lee al sol.

   ── QUÉ PUEDE HACER CADA COLOR (contraste medido, no supuesto) ──────────
   Sobre el fondo #F5F7F8:
       --tinta       16,57:1  → todo
       --marca        6,20:1  → texto normal
       --zinc         5,46:1  → texto secundario
       --marca-viva   2,16:1  → SOLO relleno o marca. NUNCA texto.
       --verde        2,08:1  → SOLO relleno o marca. NUNCA texto.
   Texto sobre relleno de color:
       blanco sobre --marca   6,66:1  ✓
       --tinta sobre --verde  7,97:1  ✓
       blanco sobre --tinta  17,80:1  ✓

   ── UN SOLO RADIO DE ESQUINA ────────────────────────────────────────────
   Había SEIS valores distintos (20, 16, 12, 11, 10 y 9 px) en una sola
   página de 296 líneas. Nadie decidió eso; se fue acumulando.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color ──────────────────────────────────────────────────────────── */
  --fondo:      #F5F7F8;  /* blanco frío, acompaña al azul marino */
  --superficie: #EBEFF2;  /* el mismo, un tono por debajo */
  --tinta:      #0C182A;  /* AZUL MARINO DE LA MARCA — ahora es el texto */
  --marca:      #26608F;  /* el azul del logo, oscurecido hasta que se lee */
  --marca-viva: #48B4F0;  /* el azul brillante del logo — relleno, no texto */
  --marca-suave:#E4EEF5;  /* el mismo azul lavado — fondos de acento */
  --verde:      #78C03C;  /* el verde lima del logo — relleno, no texto */
  --verde-suave:#EDF5E2;  /* lima lavado */
  --zinc:       #5A6672;  /* gris frío — texto secundario */
  --borde:      #DDE3E7;

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  /* Bitter: serif de palo, robusta, legible. Ancla en algo tangible una
     marca que por nombre suena a tecnología ("AGRO-IA"), y el lector es un
     ganadero, no un comprador de software.
     Source Sans 3: humanista, limpia a tamaño pequeño, buenos acentos.
     Ninguna de las dos es Inter ni Roboto. */
  --tipo-titular: 'Bitter', Georgia, 'Times New Roman', serif;
  --tipo-cuerpo:  'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;

  --t-xs:   13px;
  --t-s:    15px;
  --t-m:    17px;
  --t-l:    21px;
  --t-xl:   28px;
  --t-2xl:  38px;

  --alto-apretado: 1.2;   /* titulares */
  --alto-normal:   1.55;  /* cuerpo */

  /* ── Espaciado — base de 4 px ───────────────────────────────────────── */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-6:  24px;
  --e-8:  32px;
  --e-12: 48px;
  --e-16: 64px;

  /* ── Estructura ─────────────────────────────────────────────────────── */
  --r: 4px;             /* UN radio. Solo uno. */
  --barra: 4px;         /* grosor de la barra que marca lo destacado */
  --ancho-lectura: 660px;

  /* ── PORTADA 2026-10-08 (web premium) ───────────────────────────────────
     Referencias que se miraron: Halter (ganadería; fotos reales a sangre,
     titular grande a la izquierda y explicación a la derecha, un solo botón
     verde), AgriWebb (programa ganadero para teléfono y computador; calcula
     el plan por número de animales) y Linear (enseña el programa abierto).

     --verde-campo es el botón que DESCARGA o ENTRA: blanco encima 6,4:1 ✓.
     Es más oscuro que el lima del logo porque el lima no admite texto.
     --r-foto: el ÚNICO segundo radio, solo para fotos y marcos de pantalla;
     botones y tablas siguen con --r. */
  --verde-campo: #1F6B3A;
  --verde-hondo: #164F2B;  /* el mismo al pasar el ratón */
  --noche:       #0C182A;  /* = --tinta; velo sobre fotos para leer encima */
  --tipo-display: 'Bricolage Grotesque', 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
  --t-hero: clamp(44px, 7.2vw, 100px);
  --t-gigante: clamp(32px, 4.6vw, 60px);
  --r-foto: 18px;
  --ancho-pagina: 1240px;
}

/* ── Reinicio mínimo ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo-cuerpo);
  font-size: var(--t-s);
  line-height: var(--alto-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--tipo-titular);
  line-height: var(--alto-apretado);
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

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

/* Foco visible siempre: se usa con guantes y con sol de frente. */
:where(a, button, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}