/**
 * Los valores de diseño del sitio. Única fuente de verdad.
 * Ningún otro archivo contiene colores hex.
 *
 * El sitio es oscuro sobre grafito. Las secciones claras van en Tender Light
 * Blue y ahí el texto es el azul de marca.
 */

@layer base, patrones;

:root {
  /* Base oscura */
  --color-fondo: #0e0e10;
  --color-superficie-1: #16161a;
  --color-superficie-2: #1e1e23;

  /* Marca */
  --color-primario: #0d2549;
  --color-guinda: #590606;
  --color-guinda-vivo: #a61b1b;
  --color-guinda-claro: #d8514b;
  --color-apoyo: #c8d3e6;
  --color-texto: #f1f1f1;
  --color-blanco: #ffffff;
  --color-negro: #000000;

  /* Derivados, para no sumar hex fuera de la paleta */
  --color-texto-suave: color-mix(in srgb, var(--color-texto) 66%, var(--color-fondo));
  --color-guinda-vivo-hover: color-mix(in srgb, var(--color-guinda-vivo) 82%, var(--color-blanco));
  --color-linea: color-mix(in srgb, var(--color-blanco) 10%, transparent);
  --color-linea-fuerte: color-mix(in srgb, var(--color-blanco) 18%, transparent);
  --color-fondo-hover: color-mix(in srgb, var(--color-blanco) 6%, transparent);
  --color-velo: color-mix(in srgb, var(--color-fondo) 78%, transparent);

  /* Franja clara en Medium Seashell (Servicios del home): el mismo valor que
     el texto sobre oscuro, con nombre de fondo. Tarjetas blancas encima. */
  --color-fondo-claro: var(--color-texto);
  --color-primario-suave: color-mix(in srgb, var(--color-primario) 72%, var(--color-blanco));
  --color-linea-clara: color-mix(in srgb, var(--color-primario) 14%, transparent);
  --color-linea-clara-fuerte: color-mix(in srgb, var(--color-primario) 30%, transparent);
  /* Borde de una tarjeta que ya parte de --color-linea-fuerte, al activarse. */
  --color-linea-activa: color-mix(in srgb, var(--color-blanco) 32%, transparent);

  /* Header translúcido: deja ver el contenido que pasa por debajo. */
  --color-header: color-mix(in srgb, var(--color-fondo) 72%, transparent);
  /* Degradado para texto sobre foto: oscurece solo detrás del texto,
     centrado, y deja limpias las orillas. El radio horizontal sigue al ancho
     de lectura. Con el fondo al 84 % el párrafo en gris suave cumple AA sobre
     las fotos de obra. Lo usan el hero interior (ud-hero) y las ramas del
     home. */
  --degradado-texto-foto: radial-gradient(
    ellipse calc(var(--ancho-texto) * 1.1) 90% at 50% 50%,
    color-mix(in srgb, var(--color-fondo) 84%, transparent) 0%,
    color-mix(in srgb, var(--color-fondo) 84%, transparent) 50%,
    transparent 100%
  );
  --desenfoque-header: blur(14px);

  /* Tipografía
     Títulos (H1, H2, H3 y títulos de tarjeta): Archivo Bold semi expandida.
     Cifras, botones, menú y etiquetas: Archivo SemiBold de ancho normal.
     Manrope en párrafos y textos largos. */
  --fuente-titulos: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --peso-titulo: 600;
  --peso-encabezado: 700;
  --ancho-encabezado: 112.5%;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;

  /* Escala de títulos. Para subir o bajar todos los títulos se ajusta aquí,
     no en cada hoja. */
  --titulo-hero: clamp(1.75rem, 1.15rem + 2.65vw, 3.1rem);
  --titulo-seccion: clamp(1.75rem, 1.2rem + 2.25vw, 2.8rem);
  --titulo-subseccion: clamp(1.55rem, 1.2rem + 1.2vw, 2.25rem);
  --titulo-bloque: clamp(1.55rem, 1.2rem + 1.2vw, 2rem);
  --titulo-tarjeta: 1.125rem;
  --titulo-tarjeta-sm: 1rem;

  --interlinea-apretada: 1.05;
  --interlinea-normal: 1.65;
  --espaciado-letra-amplio: 0.12em;
  --espaciado-letra-titulo: -0.02em;

  /* Espaciado */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-12: 3rem;
  --espacio-16: 4rem;
  --espacio-24: 6rem;

  /* Medidas
     El sitio es de ancho completo: --margen-lateral es el único respiro contra
     el borde de la ventana y vale igual en todo el sitio. */
  --margen-lateral: 1.5rem;

  /* Relleno interior de la tarjeta del hero. De él sale --margen-seccion, el
     margen lateral de las secciones que se alinean con el texto del hero:
     margen del sitio + relleno de la tarjeta. Los dos cambian juntos. */
  --relleno-hero: var(--espacio-6);
  --margen-seccion: calc(var(--margen-lateral) + var(--relleno-hero));

  /* Margen de las secciones que piden aire y crecen con la pantalla:
     3rem en celular (lo mismo que --margen-seccion), ~150px en 1440 y tope de
     12rem para que no se dispare en monitores grandes. */
  --margen-seccion-amplio: clamp(3rem, 10.4vw, 12rem);
  --ancho-texto: 34rem;
  --ancho-contenido: 44rem;
  --ancho-modal: 58rem;
  --ancho-modal-compacto: 26rem;
  --alto-franja-modal: 9rem;
  --ancho-submenu: 15rem;
  --area-toque: 2.75rem;
  --altura-header: 4.5rem;
  --altura-logo: 2rem;
  /* Logotipo del footer: aparte del header, para poder agrandarlo solo aquí. */
  --altura-logo-footer: 2rem;
  --altura-sello: 1.0625rem;
  --icono-grande: 2.5rem;
  --borde: 1px;

  /* Radios: todo va redondeado */
  --radio-sm: 12px;
  --radio-md: 20px;
  --radio-lg: 32px;
  --radio-pildora: 999px;

  /* Elevación y movimiento */
  --sombra-submenu: 0 16px 32px color-mix(in srgb, var(--color-negro) 45%, transparent);
  --sombra-modal: 0 24px 60px color-mix(in srgb, var(--color-negro) 55%, transparent);
  --z-header: 100;
  /* Botón flotante de WhatsApp: sobre el contenido, bajo el header. Los
     modales van en la capa superior del navegador, por encima de todo. */
  --z-flotante: 90;
  --transicion: 150ms ease;
  --opacidad-atenuada: 0.7;

  /* Hover de tarjetas (patrón ud-tarjeta en patrones.css). */
  --elevacion-tarjeta: 0.25rem;
  --zoom-imagen-tarjeta: 1.04;
  --sombra-tarjeta: 0 8px 24px color-mix(in srgb, var(--color-negro) 45%, transparent);
  --sombra-tarjeta-clara: 0 8px 24px color-mix(in srgb, var(--color-primario) 16%, transparent);
  --transicion-tarjeta: 200ms ease;
  /* Vuelta completa de la barra de clientes del home: lenta a propósito. */
  --duracion-clientes: 60s;
  /* Vuelta completa del realce de las cifras del hero: 2.5 s por tarjeta. */
  --duracion-cifras: 10s;
}

@media (min-width: 64rem) {
  :root {
    --relleno-hero: var(--espacio-12);
    /* Footer en escritorio: logotipo más grande para que su bajotítulo se lea
       (a 3rem sus mayúsculas miden ~6 px). El sello crece en la misma
       proporción que el logotipo respecto a celular (2rem → 3rem, × 1.5). */
    --altura-logo-footer: 3rem;
    --altura-sello: calc(1.0625rem * 1.5);
  }
}