/**
 * 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.
 */
@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 {
  /* Auricular del tema como mascara. Lo consume el boton de llamada cuando el
     plugin «city contact» ha sustituido su contenido y se ha llevado el SVG en
     linea — ver global.css. */
  --sat-icono-telefono: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1%201%20.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.8.7a2%202%200%200%201%201.7%202z%27%2F%3E%3C%2Fsvg%3E");

  /* Bocadillo con el auricular RECORTADO. Lo consume `.wa-fa.fa-whatsapp`
     en global.css — el diagnostico completo esta alli.

     SILUETA RELLENA Y NO TRAZO (20-ago-2026, corregido tras verlo). El primer
     intento dibujaba las dos formas a trazo, y un trazo escala CON la figura:
     al subir la medida el icono se volvia pesado y tosco, que es justo lo que
     reporto el propietario. Una silueta no tiene ese problema: se ve igual de
     limpia a 16 px que a 48. El auricular es un HUECO —`fill-rule: evenodd`
     sobre un solo path— asi que deja pasar el color del boton, que es como
     esta hecho el icono real.

     Percent-encoded: con el SVG en crudo dentro de una custom property la
     mascara no resuelve, y una mascara invalida NO oculta el elemento, lo
     pinta ENTERO. El sintoma es un cuadrado de color, no un icono ausente. */
  --sat-icono-whatsapp: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%20d%3D%27M12%202.1c5.5%200%209.9%204.4%209.9%209.9%200%205.5-4.4%209.9-9.9%209.9-1.7%200-3.4-.4-4.9-1.2l-5%201.3%201.3-4.9C2.5%2015.5%202.1%2013.8%202.1%2012%202.1%206.5%206.5%202.1%2012%202.1zM9.1%207.3c-.2-.5-.4-.5-.6-.5h-.6c-.2%200-.6.1-.9.4-.3.3-1.2%201.1-1.2%202.7s1.2%203.2%201.4%203.4c.2.2%202.3%203.6%205.7%204.9%202.8%201.1%203.4.9%204%20.8.6-.1%202.1-.9%202.4-1.7.3-.8.3-1.5.2-1.7-.1-.2-.3-.3-.6-.4-.3-.2-2.1-1-2.4-1.2-.3-.1-.6-.2-.8.2-.2.3-.9%201.1-1.1%201.3-.2.2-.4.2-.7.1-.4-.2-1.6-.6-3-1.9-1.1-1-1.8-2.2-2.1-2.6-.2-.4%200-.6.2-.8l.5-.6c.2-.2.2-.4.3-.6.1-.2%200-.4-.1-.6l-.5-.9z%27%2F%3E%3C%2Fsvg%3E");

  /* ── Paleta (11 colores, decisión definitiva del propietario) ── */
  --sat-color-brand: #075985;
  --sat-color-brand-light: #0EA5E9;
  --sat-color-brand-dark: #0B253A;
  --sat-color-cta: #EA580C;
  --sat-color-cta-hover: #C2410C;
  --sat-color-success: #16A34A;
  --sat-color-bg: #FFFFFF;
  --sat-color-bg-alt: #F0F9FF;
  --sat-color-border: #E2E8F0;
  --sat-color-text: #172033;
  --sat-color-text-secondary: #475569;

  /* ── Tipografía ── */
  --sat-font-heading: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sat-font-base: 'Source Sans 3', 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 1px 2px rgba(11, 37, 58, 0.06), 0 4px 12px rgba(11, 37, 58, 0.08);
  /* 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);

}