/**
 * tokens.css — paleta y tokens de diseño (design D2, task 2.8).
 *
 * VALORES PLACEHOLDER. Pendientes de branding real de SAT Aire
 * Acondicionado (color primario, tipografía definitiva, radios). Se
 * exponen como custom properties para que todo el CSS futuro (por
 * plantilla) los consuma sin duplicar valores — el mismo principio de
 * "un solo origen" que rige los datos de negocio (D6), aplicado a diseño.
 */

/**
 * Fuentes auto-alojadas (12-ago-2026, Paso 2 — bloqueante de publicación).
 * Barlow y Source Sans 3, subset latin, servidas desde assets/fonts/: cero
 * hotlink a Google Fonts (RGPD — ver README.md) y cero Inter (huella del
 * sitio hermano). `font-display: swap` en las cinco declaraciones para que
 * el texto no quede invisible mientras la fuente carga.
 *
 * Source Sans 3 se sirve como fuente variable: Google entrega un único
 * archivo cuyo eje de peso cubre 400-700, así que una sola declaración con
 * `font-weight: 400 700` (rango) basta para los tres pesos que usa el
 * sitio (400 texto, 600 énfasis, 700 negrita) — no son tres descargas.
 */
/* INTER — la familia que pide la guía de diseño del propietario
   (01-sep-2026). Se AUTOALOJA, igual que las otras dos: es el criterio que
   ya tenía este tema y no se rompe por una fuente nueva. El fichero es el
   subconjunto LATIN de la variable de Google (48 KB, pesos 400-800 en una
   sola descarga), no el enlace a fonts.googleapis.com — que anadiria una
   conexion a un tercero en la ruta critica y mandaria la IP del visitante
   a Google en cada carga.

   Barlow y Source Sans 3 se quedan declaradas: hay CSS que las nombra por
   su nombre de familia y quitarlas ahora dejaria esos sitios en la fuente
   del sistema. Los tokens ya apuntan a Inter, asi que no se descargan
   salvo que algo las pida expresamente. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/Inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Barlow-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Barlow-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/SourceSans3-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * Design tokens definitivos (12-ago-2026, Paso 3 — bloqueante de
 * publicación). Decisión cerrada del propietario: paleta, tipografía y
 * escala de aquí en adelante.
 *
 * REGLA VERIFICABLE (Paso 6): ningún otro archivo de assets/css/ declara un
 * valor hexadecimal, `font-family` ni `font-size` — todo pasa por una de
 * estas custom properties. Un color, un tamaño o una fuente que aparece
 * hardcodeado en global.css o en una hoja de silo es, por definición, un
 * fallo de esta regla, no una excepción de estilo.
 */
:root {
  /* ── Paleta (decisión del propietario, 01-sep-2026) ─────────────────
     Azul confianza 60 % · gris claro 30 % · naranja urgencia 10 %.
     Se cambian los VALORES y no los nombres: 9.300 líneas de CSS ya
     consumen estos tokens, así que la paleta entera del sitio se muda
     sin tocar una sola regla de componente. */
  --sat-color-brand: #0A2540;          /* Slate Navy — cabeceras, hero, pies */
  --sat-color-brand-light: #2D5F8A;    /* tinte del primario, para realces sobre claro */
  --sat-color-brand-dark: #071A2E;     /* estado hover del primario */
  --sat-color-cta: #D14009;            /* Energetic Flame — llamada a la acción */
  --sat-color-cta-hover: #B03A0B;
  --sat-color-success: #0C865D;        /* Emerald — garantía, disponibilidad */
  --sat-color-bg: #FFFFFF;             /* SUPERFICIE: tarjetas, cabecera, desplegables */
  --sat-color-bg-page: #F8FAFC;        /* FONDO de página. Ver la nota de abajo */
  --sat-color-bg-alt: #F1F5F9;         /* banda alterna, en la familia del slate */
  --sat-color-border: #E2E8F0;
  --sat-color-text: #1E293B;
  --sat-color-text-secondary: #64748B;

  /* ── POR QUÉ EL NARANJA Y EL VERDE NO SON EXACTAMENTE LOS DE LA GUÍA ──
     La guía del propietario daba #FF5722 y #10B981. Medidos con el algoritmo
     de contraste de la WCAG ANTES de aplicarlos:

       · texto blanco sobre #FF5722  →  3,16:1
       · texto blanco sobre #10B981  →  2,54:1

     El umbral AA para texto normal es 4,5:1. O sea que el botón de llamada
     —el elemento que más importa que se lea en todo el sitio— no cumplía, y
     el verde no llegaba ni al 3:1 que necesita un icono.

     Decisión del propietario del 01-sep-2026: **mover el color, no partirlo
     en variantes.** Los dos se bajaron de luminosidad manteniendo su carácter,
     y quedan así:

       · #D14009  →  4,72:1 sobre blanco  ·  3,29:1 sobre el azul del hero
       · #0C865D  →  4,58:1 sobre blanco  ·  3,39:1 sobre el azul del hero

     El segundo número importa tanto como el primero: el CTA vive dentro del
     hero azul, y un naranja que solo funcione sobre blanco desaparece ahí.
     Estos dos cumplen en los dos fondos, que es lo que permite tener UNA sola
     paleta y no una excepción por contexto. */

  /* ── ALIAS DE LA DOCUMENTACIÓN DEL PROPIETARIO ─────────────────────
     La guía de diseño entregada el 01-sep-2026 nombra los tokens como
     `--color-primary`, `--color-accent`, `--color-surface`… Este bloque los
     declara como ALIAS de los del tema, de modo que:

       · esa documentación sigue siendo válida y se puede escribir CSS nuevo
         con los nombres que trae;
       · y NO se ha renombrado ni un token del tema, así que las 9.300 líneas
         de CSS existentes no se tocan.

     Los alias apuntan; no duplican. Cambiar un valor arriba lo cambia aquí. */
  --color-primary: var(--sat-color-brand);
  --color-primary-hover: var(--sat-color-brand-dark);
  --color-accent: var(--sat-color-cta);
  --color-accent-hover: var(--sat-color-cta-hover);
  --color-bg-main: var(--sat-color-bg-page);
  --color-surface: var(--sat-color-bg);
  --color-text-main: var(--sat-color-text);
  --color-text-muted: var(--sat-color-text-secondary);
  --color-success: var(--sat-color-success);
  --font-family-base: var(--sat-font-base);
  --shadow-card: var(--sat-shadow-card);
  --shadow-cta: var(--sat-shadow-cta);

  /* ── Tipografía ── */
  --sat-font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sat-font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sat-line-height-heading: 1.2;
  --sat-line-height-base: 1.6;

  /* Escala tipográfica fluida: clamp(mínimo móvil, preferido en vw, máximo
     escritorio). Ningún tamaño de texto se declara fuera de esta escala. */
  --sat-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --sat-text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --sat-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --sat-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --sat-text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  --sat-text-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem);
  --sat-text-3xl: clamp(2.25rem, 1.75rem + 2.2vw, 3rem);
  /* Un peldaño por encima del H1 normal, solo para el titular de la portada
     (18-ago-2026, petición del propietario: «el h1 más grande»). Vive aquí y
     no en la hoja de la portada porque la escala tipográfica tiene un único
     origen — la regla verificable del Paso 6 no admite un `font-size` fuera
     de este archivo. */
  --sat-text-4xl: clamp(2.75rem, 2rem + 3.2vw, 4rem);

  /* ── Espaciado (escala 1-6) ── */
  --sat-space-1: 0.25rem;
  --sat-space-2: 0.5rem;
  --sat-space-3: 1rem;
  --sat-space-4: 1.5rem;
  --sat-space-5: 2.5rem;
  --sat-space-6: 4rem;
  /* Séptimo peldaño (18-ago-2026). No es un tope inventado para el ritmo
     vertical: la escala crece ×2, ×2, ×1.5, ×1.67, ×1.6 y 6rem es 4rem ×1.5,
     o sea la misma progresión continuada un escalón más. Existe porque el
     contenedor pasó a 1360px y ningún valor de la escala anterior daba un
     aire de sección proporcionado a esa anchura. */
  --sat-space-7: 6rem;

  /* ── Ritmo vertical de sección ──────────────────────────────────────
     RELLENO ARRIBA Y ABAJO de `.sat-cuerpo section[class^="sat-"]`.
     Es un token propio y no un peldaño suelto de la escala porque el valor
     tiene que DEPENDER DEL ANCHO: la escala es fija, y un relleno fijo de
     2.5rem que valía con el contenedor de 1180px se queda corto en
     proporción ahora que mide 1360px — que es exactamente la queja.

     Los tres valores del clamp, medidos y no elegidos a ojo:

     · MÍNIMO `--sat-space-5` (40px). Es el valor de hoy: en móvil NO se
       añade ni un píxel. Medido a 390px, la página de provincia ya mide
       16 855px de alto; ahí el aire generoso de escritorio es scroll vacío,
       no respiración. Además `1rem + 4vw` vale 40px justo a 600px de
       ventana, así que el crecimiento arranca donde acaba un teléfono, sin
       escalón visible.

     · PENDIENTE `1rem + 4vw`. Escogida para que cruce `--sat-space-6` (64px)
       exactamente a 1200px de ventana — 16 + 0.04 × 1200 = 64 —, que es el
       mismo punto en el que `--sat-gutter` sube a `--sat-space-6`. A partir
       de ahí el relleno vertical deja de ser MENOR que la calle horizontal.
       Ese era el desequilibrio real: en el eje horizontal el tema ya se daba
       64px y en el vertical seguía dándose 40.

     · MÁXIMO `--sat-space-7` (96px), alcanzado a 2000px. Por encima de esa
       ventana la columna de lectura sigue midiendo 1360px, así que más aire
       vertical solo añadiría scroll sin mejorar el encuadre.

     `vw` y no `cqi` porque en `:root` no hay contenedor de consulta; la
     diferencia es el ancho de la barra de scroll, unos 0,6px de relleno. */
  --sat-space-seccion: clamp(var(--sat-space-5), 1rem + 4vw, var(--sat-space-7));

  /* Bandas de color sangradas a ancho de ventana. DERIVADO del valor de
     arriba, no un segundo clamp independiente, para que los dos no puedan
     divergir nunca: una sola decisión, «la banda respira medio peldaño más».

     POR QUÉ MÁS. Entre dos secciones sobre blanco el aire es ADITIVO —el
     relleno inferior de una se suma al superior de la siguiente, 40+40— y el
     ojo no ve dónde acaba cada caja. Una banda de color no tiene esa ayuda:
     el relleno del vecino cae FUERA del color, y lo único que separa su
     texto del borde duro de la banda es su propio relleno. Medido a 1905px:
     el texto de una banda queda a 272px del borde de color en horizontal y a
     40px en vertical, una anisotropía de 6,8:1. Con ×1.5 pasa a ~2:1.

     El factor es el mismo ×1.5 con el que la escala encadena sus peldaños
     altos (40 → 64 → 96), no un número suelto. */
  --sat-space-seccion-banda: calc(var(--sat-space-seccion) * 1.5);

  /* Espaciado propio del encabezado editorial. Se nombran por intención
     porque 20 px y 30 px no pertenecen a la escala base. */
  --sat-breadcrumb-offset-top: 1.25rem;
  --sat-portada-texto-padding-top: 1.875rem;

  /* ── Layout / superficie ── */
  --sat-radius: 0.625rem;
  --sat-shadow-card: 0 4px 6px -1px rgba(10, 37, 64, 0.05), 0 2px 4px -1px rgba(10, 37, 64, 0.03);
  /* La sombra del CTA lleva el propio naranja, no negro: eleva el botón sin
     ensuciarlo. Es lo que le da el aire de «pulsable» sin subir el tamaño. */
  --sat-shadow-cta: 0 10px 15px -3px rgba(255, 87, 34, 0.3);
  /* Ancho del CONTENEDOR: rejillas, tarjetas, bandas, cabecera y pie. */
  --sat-max-width-content: 1360px;
  --sat-max-width-narrow: 800px;
  /* MEDIDA DE LECTURA: ancho maximo de un parrafo de prosa. No es lo mismo
     que el ancho del contenedor y no crece porque la pantalla sea grande. */
  --sat-measure: 66ch;
  /* Calle lateral minima. Un solo origen: la rejilla de .sat-cuerpo y
     cualquier banda sangrada leen esta variable, nunca un valor suelto. */
  --sat-gutter: var(--sat-space-3);
}

@media (min-width: 48rem) {
  :root { --sat-gutter: var(--sat-space-5); }
}
@media (min-width: 75rem) {
  :root { --sat-gutter: var(--sat-space-6); }
}

/**
 * Base tipográfica GLOBAL: h1-h3 y p consumen la escala de arriba en TODO
 * el sitio (header, footer, hero, cuerpo) — no solo dentro de
 * .sat-cuerpo/.entry-content. Es la ÚNICA regla del sitio que fija
 * `font-family`/`font-size` fuera de :root — se queda en tokens.css
 * porque describe la escala misma, no un componente. Consecuencia directa
 * de la regla verificable del Paso 6: ningún otro archivo de assets/css/
 * vuelve a declarar `font-family` ni `font-size` — un elemento que
 * necesita tipografía de título usa un h1/h2/h3 real, o una de las clases
 * de utilidad de abajo (`.sat-stat-valor`, `.sat-text-sm`), nunca la
 * propiedad directamente.
 */
h1 {
  font-family: var(--sat-font-heading);
  font-weight: 800;
  font-size: var(--sat-text-3xl);
  line-height: var(--sat-line-height-heading);
  color: var(--sat-color-text);
}

h2 {
  font-family: var(--sat-font-heading);
  font-weight: 700;
  font-size: var(--sat-text-2xl);
  line-height: var(--sat-line-height-heading);
  color: var(--sat-color-text);
}

h3 {
  font-family: var(--sat-font-heading);
  font-weight: 600;
  font-size: var(--sat-text-lg);
  line-height: var(--sat-line-height-heading);
  color: var(--sat-color-text);
}

p {
  font-family: var(--sat-font-base);
  font-weight: 400;
  font-size: var(--sat-text-base);
  line-height: var(--sat-line-height-base);
  color: var(--sat-color-text);
}

body {
  font-family: var(--sat-font-base);
  font-size: var(--sat-text-base);
  line-height: var(--sat-line-height-base);
}

/**
 * Utilidades tipográficas: para el texto que necesita la escala pero no
 * es semánticamente un h1-h3 ni un párrafo (un valor destacado en una
 * tarjeta, una etiqueta pequeña). Viven aquí por la misma regla de "un
 * solo origen" — el resto del CSS las aplica por nombre de clase, nunca
 * repite la propiedad.
 */
.sat-stat-valor {
  font-family: var(--sat-font-heading);
  font-weight: 700;
  font-size: var(--sat-text-xl);
}

.sat-text-sm,
.sat-text-sm p {
  font-size: var(--sat-text-sm);
}

/* Titular de portada. Se aplica como CLASE al `<h1>` desde la plantilla, no
   como una regla `.sat-portada h1` en la hoja de la portada: así el único
   archivo que declara un tamaño de texto sigue siendo este. Gana al `h1` de
   arriba por especificidad de clase sobre elemento. */
.sat-text-4xl {
  font-size: var(--sat-text-4xl);
}

/* El escalón más pequeño de la escala. Lo usa la banda de confianza de encima
   de la cabecera, que tiene que caber en una fila estrecha. Vive aquí, como
   `.sat-text-sm`, porque la regla del Paso 6 prohíbe declarar `font-size`
   fuera de este archivo — una hoja de componente aplica la clase, nunca la
   propiedad. */
.sat-text-xs {
  font-size: var(--sat-text-xs);
}