/* ===========================================================================
   ALVI · BASE
   Tipografía, escala, espaciado, foco y movimiento.

   AQUÍ NO HAY NI UN COLOR ESCRITO. Todos salen de theme.css como var(--...).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TIPOGRAFÍA
   El archivo está en /fonts y se sirve desde el propio servidor: la web
   arranca y se ve bien sin conexión a internet, y no se le cuenta a nadie de
   fuera quién entra en la web de ALVI.

   Es una fuente variable: un solo archivo cubre todos los pesos que usa el
   sitio. 55 KB, subconjunto latino, con el eje de peso recortado a 400-700
   por herramientas/preparar-tipografia.py. Licencia libre (SIL OFL).
   --------------------------------------------------------------------------- */

/* UNA SOLA FAMILIA: Roboto Flex, variable, autoalojada.

   Antes eran dos —Archivo para titulares y Source Sans 3 para el texto—, 35 y
   29 KB: 64 en total. Ahora es una de 55 KB, así que además de simplificar,
   pesa menos. El archivo que da Google Fonts trae 82 KB con el eje de peso de
   100 a 1000; el recorte al rango que se usa se hace en herramientas/.

   El eje de tamaño óptico (opsz) hace parte del trabajo que antes hacían dos
   familias distintas: el navegador ajusta el dibujo de la letra según el
   cuerpo, sin que haya que pedírselo.

   Va autoalojada, como las anteriores: la web tiene que arrancar sin conexión
   y la política de contenido no admite orígenes de terceros. */
@font-face {
  font-family: "Roboto Flex";
  src: url("/fonts/roboto-flex-latin-var-abd52131bef1e7fb27105bd9a2f47ee1.woff2") format("woff2");

  /* 400-700 y no 100-1000: el archivo que se sirve lleva el eje recortado a
     ese rango, que es el que usa el sitio (400 texto, 600 destacado, 700
     titular). Lo recorta herramientas/preparar-tipografia.py y baja el peso
     de 82 a 55 KB. Este número TIENE que coincidir con el del script.

     Y no se declara font-stretch: este subconjunto no trae eje de anchura,
     así que anunciar un rango que no existe solo puede confundir al
     navegador. */
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------------
   FICHAS DE MEDIDA
   --------------------------------------------------------------------------- */

:root {
  /* ---- Familias ----
     Los dos tokens siguen existiendo y apuntan a la misma familia. No es
     pereza: la distinción entre "esto es un titular" y "esto es texto" sigue
     siendo verdad en el CSS, y si mañana vuelve a haber dos familias se
     cambia aquí y en ningún otro sitio.
     Detrás va una pila de respaldo por si la fuente tardase en cargar. */
  --font-title: "Roboto Flex", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto Flex", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ---- Escala ----
     La raíz va al 112,5 %, así que 1rem = 18px. Todo el sitio (texto Y
     espaciado) sube de golpe respecto a una web normal, que es justo lo que
     necesita alguien de 55 años mirando el móvil al sol. El zoom del navegador
     sigue funcionando porque el valor es un porcentaje, no una medida fija. */
  /* LOS MÍNIMOS BAJAN UN PUNTO, y solo el mínimo: el 5,5vw y el 4vw no se
     tocan, así que de 640px para arriba no cambia nada.

     A 320px el titular del hero partía en CINCO líneas y el de página también.
     Con 2,2rem el del hero baja a cuatro y con 1,7rem el de página, también.

     NO SE BAJA MÁS, y esto es una decisión con su número: para que el titular
     del hero entre en TRES líneas a 320 haría falta bajarlo a 28px desde 43, y
     el de página a 27 desde 36. Eso deja el titular más importante del sitio a
     un pelo del cuerpo de texto, y el público de esta web mira el móvil al sol
     y con prisa. Cuatro líneas de un titular grande se leen; tres de uno
     pequeño, no. */
  --fs-display: clamp(2.2rem, 5.5vw, 3.9rem);   /*  40 -> 70px  titular del hero */
  --fs-h1: clamp(1.7rem, 4vw, 2.9rem);          /*  31 -> 52px  título de página */
  --fs-h2: clamp(1.6rem, 3vw, 2.1rem);          /*  29 -> 38px  sección */
  --fs-h3: 1.35rem;                             /*  24px        subsección */
  --fs-ref: 1.55rem;                            /*  28px        referencia de pieza */
  --fs-lead: 1.22rem;                           /*  22px        entradilla */
  --fs-body: 1rem;                              /*  18px        texto corrido */
  --fs-meta: 0.89rem;                           /*  16px        SUELO ABSOLUTO */

  /* El teléfono tiene cuerpo propio en cada sitio donde sale, porque es el
     dato más importante de la web y a la vez el que más fácil desborda.
     Medido sobre la propia fuente: el número real ocupa 5,97 em, así que a
     320px de pantalla ocupa 215px de los 275px disponibles. */
  --fs-tel-hero: clamp(1.9rem, 7vw, 2.9rem);    /*  34 -> 52px */

  /* 6,5vw y no 8vw: a partir de 768px el pie pasa a dos columnas y la del
     teléfono se queda en unos 356px. Con 8vw el número medía 366px y partía
     en dos líneas justo ahí. Medido sobre la fuente: el teléfono real ocupa
     5,97 em y el marcador 6,32 em. */
  --fs-tel-footer: clamp(2rem, 6.5vw, 3.9rem);  /*  36 -> 70px */
  --fs-tel-header: 1.35rem;                     /*  24px */

  /* ---- Interlineado ---- */
  --lh-display: 1.05;
  --lh-title: 1.18;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  /* ---- Anchos: LA ESCALERA DE MEDIDAS ----

     Titular, entradilla y texto NO miden lo mismo, y la diferencia entre los
     tres tiene que verse como una decisión y no como un descuadre. Por eso son
     tres pasos con la misma proporción entre ellos (x1,4), medidos de verdad:

         --w-text    1080px   el ancho del titular y del contenedor de texto
         --w-lead     774px   la entradilla
         --w-prose    555px   el texto corrido

     555px son los 62 caracteres de medida de lectura: en Source Sans 3 a 18px,
     1ch mide 8,95px. Queda por debajo de los 75 caracteres que marcan el límite
     de lo cómodo.

     --w-content (1296px) sigue existiendo para lo que NO es texto: rejillas de
     catálogo, franjas y el hero, que sí quieren todo el ancho. */
  --w-prose: 62ch;
  --w-lead: 43rem;
  --w-text: 60rem;
  --w-content: 72rem;
  --w-narrow: 44rem;
  --sp-page-x: clamp(1rem, 4vw, 3rem);

  /* ---- Espaciado ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---- Esquinas ----
     Casi rectas a propósito. Las esquinas muy redondeadas son de aplicación
     de móvil; esto es una empresa que lleva desde 1996. */
  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;

  /* ---- Área táctil ----
     El mínimo recomendado son 48px. Aquí se usan 54px porque el público entra
     con guantes, con prisa o con las manos sucias. */
  --touch: 3rem;

  /* Alto de la barra pegajosa. Lo usan el scroll-margin de los anclajes y la
     cuenta del pliegue del hero: si cambia aquí, cambia en los dos sitios. */
  /* ALTO DE LA CABECERA. Lo publica nav.js midiendo la barra de verdad; esto
     es el respaldo para cuando el JavaScript no llega. Los valores están
     medidos: 72px en móvil (solo la barra principal), 125 con la barra
     superior puesta y 136 cuando la principal crece en escritorio ancho.
     Importa porque de aquí sale cuánto crece la foto del hero para pasar por
     debajo de la barra translúcida. */
  --alto-cabecera: 4rem;

  /* ---- Movimiento ---- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}


/* ---------------------------------------------------------------------------
   PUESTA A CERO
   --------------------------------------------------------------------------- */

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

html {
  font-size: 112.5%;               /* 1rem = 18px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;

  /* Nada puede empujar la página de lado. Si algún día un contenido no cabe,
     que se corte él y no que aparezca una barra horizontal. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: var(--lh-title);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p, ul, ol, dl {
  margin: 0 0 var(--sp-4);
}

p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   COLUMNA DE TEXTO

   La medida de lectura se pone AQUÍ, en el contenedor de la columna, y no en
   cada párrafo suelto.

   Ponerla en el selector "p" parecía cómodo pero estaba mal: el texto de apoyo
   de un componente (el pie del buscador, el resumen de una tarjeta, la nota de
   un hueco de imagen) heredaba los 555px y se partía a 40 caracteres dentro de
   una caja que tenía el triple de ancho. La medida de un texto la marca el
   componente que lo contiene, no una regla global.
   --------------------------------------------------------------------------- */

.prosa > p,
.prosa > ul,
.prosa > ol {
  max-width: var(--w-prose);
}

a {
  color: var(--text-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--text-accent);
}

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

/* Los iconos heredan el color del texto. Ningún SVG lleva color escrito. */
svg {
  fill: currentColor;
}

strong, b {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--sp-8) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}


/* ---------------------------------------------------------------------------
   CIFRAS
   Teléfonos, precios y referencias con cifras de ancho fijo: así una columna
   de precios queda alineada y un teléfono no baila al cambiar de dígito.
   --------------------------------------------------------------------------- */

/* Entradilla: el párrafo grande que va justo debajo de un título.
   Es el escalón intermedio: más ancha que el texto corrido y más estrecha que
   el titular. Sin ella, del titular al texto hay un salto que se lee como un
   fallo de maquetación. */
.u-lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: var(--w-lead);
}

/* Etiquetas que cambian de longitud según el ancho. Solo se pinta una de las
   dos, así que el lector de pantalla también lee una sola. */
.en-ancho { display: none; }
.en-estrecho { display: inline; }

@media (min-width: 48rem) {
  .en-ancho { display: inline; }
  .en-estrecho { display: none; }
}

.u-cifras {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ---------------------------------------------------------------------------
   FOCO DE TECLADO
   Quien navega con el tabulador tiene que ver dónde está, siempre.
   El color del anillo lo decide theme.css y se invierte solo dentro de .on-dark.
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Se quita el anillo del navegador solo cuando ya hay uno propio puesto. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}


/* ---------------------------------------------------------------------------
   SALTO AL CONTENIDO
   Primer elemento de la página. Invisible hasta que se pulsa el tabulador.
   --------------------------------------------------------------------------- */

.salto-contenido {
  position: absolute;
  left: var(--sp-2);
  top: var(--sp-2);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
}

.salto-contenido:focus {
  transform: translateY(0);
}


/* ---------------------------------------------------------------------------
   SOLO PARA LECTORES DE PANTALLA
   --------------------------------------------------------------------------- */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------------------------
   REJILLA DE PÁGINA
   --------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-page-x);
}

.contenedor--estrecho {
  max-width: var(--w-narrow);
}

/* Páginas de texto: servicios, nosotros, legales. Más estrecho que el
   contenedor general, que se reserva para rejillas y franjas. */
.contenedor--texto {
  max-width: var(--w-text);
}

/* DENSIDAD, y es una corrección de rumbo.

   El aire de más lo pedí yo y se pasó de frenada: con 72px arriba y abajo de
   cada sección, en cada pantalla de escritorio cabía UN elemento. La página
   se leía como una sucesión de diapositivas en vez de como un documento.

   Ahora son 54px, un 25 % menos, y el objetivo es que en cada pantalla haya
   dos cosas. Lo que NO se toca para ganar densidad: el cuerpo de texto, el
   teléfono y las áreas táctiles. La densidad se gana en los huecos, nunca en
   la legibilidad. */
.seccion {
  padding-block: var(--sp-12);
}

.seccion--apretada {
  padding-block: var(--sp-8);
}

/* EN MÓVIL SOBRA MÁS AIRE TODAVÍA, y el motivo es que ahí el scroll es caro:
   cada píxel de hueco es un dedo más de recorrido. De 54 a 36 y de 36 a 27.

   Lo que NO se toca para ganar espacio: el cuerpo de texto se queda en 18px,
   el teléfono en su tamaño y las áreas táctiles en 54px. El aire se recorta en
   los huecos, nunca en la legibilidad. */
@media (max-width: 47.99rem) {
  .seccion {
    padding-block: var(--sp-8);
  }

  .seccion--apretada {
    padding-block: var(--sp-6);
  }
}


/* ---------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   Quien lo pide en su sistema no ve NINGUNA animación. Sin excepciones.
   Es un ajuste de accesibilidad, no una preferencia estética: hay gente a la
   que el movimiento en pantalla le produce mareo.
   --------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }
}


/* Escalones del alto de cabecera. nav.js los pisa con la medida real. */
@media (min-width: 48rem) {
  :root { --alto-cabecera: 125px; }
}

@media (min-width: 80rem) {
  :root { --alto-cabecera: 136px; }
}