@layer base, patrones;

/*
 * Valores de diseño del sitio: la única fuente de verdad.
 * Solo se declaran los valores que se usan.
 */

:root {
  /* Colores */
  --color-primario: #173248;        /* fondo de cabecera, pie y popup; texto de botones */
  --color-secundario: #54595F;      /* gris base de los grises del formulario */
  --color-acento: #FF914D;          /* hover de enlaces, iconos y botones */
  --color-blanco: #FFFFFF;
  --color-negro: #000000;
  --color-texto: #212529;           /* texto por defecto */
  --color-fondo-suave: #F4F4F4;
  --color-icono-suave: #E6E6E6;     /* iconos sociales del pie */
  --color-texto-claro: color-mix(in srgb, var(--color-blanco) 80%, transparent);  /* texto secundario sobre azul */
  --color-gris-claro: color-mix(in srgb, var(--color-secundario) 25%, var(--color-blanco));  /* bordes de campos */
  --color-gris-medio: color-mix(in srgb, var(--color-secundario) 70%, var(--color-blanco));  /* placeholders y textos auxiliares */
  --color-fondo-modal: color-mix(in srgb, var(--color-primario) 80%, transparent);  /* fondo tras el popup */
  --color-linea-clara: color-mix(in srgb, var(--color-blanco) 30%, transparent);  /* líneas y bordes sobre azul */
  --color-error: #FF0000;           /* mensaje del formulario de contacto */

  /* Familias tipográficas

     Carga, solo los pesos que se usan; Archivo en ancho semiexpandido (112,5 %):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@112.5,300;112.5,400;112.5,500;112.5,600;112.5,700&family=Work+Sans:wght@400;500&display=swap"> */
  --fuente-titulos: "Archivo", sans-serif;     /* títulos, navegación, botones y etiquetas */
  --fuente-texto: "Work Sans", sans-serif;     /* textos, listas, campos y pie */
  --ancho-fuente-titulos: 112.5%;              /* Archivo semiexpandida */

  /* Tamaños de texto */
  --texto-xs: 12px;
  --texto-sm: 14px;
  --texto-base: 16px;
  --texto-md: 18px;
  --texto-lg: 20px;
  --texto-xl: 24px;
  --texto-2xl: 30px;
  --texto-3xl: 40px;
  --texto-display: clamp(var(--texto-2xl), 5vw, 72px);  /* titular del hero: 72px a 1440 y escala con la pantalla */

  /* Pesos */
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-bold: 700;

  /* Interlineado */
  --interlineado-titulo: 1;         /* títulos y botones */
  --interlineado-compacto: 1.2;      /* títulos del pie */
  --interlineado-base: 1.5;
  --interlineado-texto: 1.6;
  --interlineado-amplio: 1.7;
  --interlineado-lista: 1.8;

  /* Espaciado entre letras */
  --tracking-amplio: 0.5px;
  --tracking-extra: 1px;

  /* Espaciado fijo */
  --espacio-xs: 8px;
  --espacio-sm: 10px;
  --espacio-md: 20px;
  --espacio-lg: 30px;
  --espacio-xl: 40px;
  --espacio-parrafo: 1rem;

  /* Espaciado relativo al ancho del contenedor (rellenos de sección) */
  --espacio-p1: 1%;
  --espacio-p2: 2%;
  --espacio-p4: 4%;
  --espacio-p5: 5%;
  --espacio-p6: 6%;

  /* Grosores de línea y borde */
  --grosor-fino: 1px;
  --grosor-grueso: 2px;

  /* Sombras */
  --sombra-flotante: 0 4px 24px color-mix(in srgb, var(--color-negro) 8%, transparent);  /* cabecera fija y popup */

  /* Radios */
  --radio-0: 0;
  --radio-sm: 4px;
  --radio-md: 10px;
  --radio-circulo: 50%;
  --radio-pastilla: 999px;

  /* Bloques: borde exterior (también el espacio entre dos tarjetas seguidas), relleno
     de tarjeta y ancho máximo del contenido dentro de una tarjeta */
  --margen-pagina: var(--espacio-p2);
  --relleno-tarjeta: var(--espacio-xl);
  --ancho-maximo-contenido: 1280px;
  /* Relleno lateral de una tarjeta a ancho completo: reparte a ambos lados lo que
     sobra de --ancho-maximo-contenido. Sus % se resuelven contra el ancho de la página
     allí donde se usa, así que vale también para alinear bloques sin fondo. */
  --relleno-lateral-tarjeta: max(var(--relleno-tarjeta), (100% - 2 * var(--margen-pagina) - var(--ancho-maximo-contenido)) / 2);

  /* Cabecera */
  --ancho-logo-cabecera: 250px;
  --ancho-logo-cabecera-fija: 147px;
  --ancho-logo-cabecera-fija-movil: 160px;
  --posicion-cabecera-fija-oculta: -1000%;  /* fuera de pantalla hasta pasar 500px de scroll */
  --alto-cabecera-fija: 63px;               /* enlaces de 43px más --espacio-sm arriba y abajo */

  /* Pie */
  --columnas-pie: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));  /* escritorio: la marca algo más ancha */
  --ancho-logo-pie: 80%;
  --ancho-firma-agencia: 200px;
  --espacio-columna-pie-movil: 25px;
  --espacio-lista-servicios-pie: 3px;
  --espacio-lista-informacion-pie-movil: 2px;

  /* Popups */
  --ancho-popup: 1000px;
  --alto-maximo-popup: 90vh;
  --ancho-logo-popup: 140px;
  --ancho-lateral-popup: 40%;
  --desenfoque-modal: 4px;
  --alto-minimo-toque: 44px;                /* campos y botones cómodos de pulsar */
  --opacidad-desactivado: 0.5;

  /* Botón flotante de WhatsApp */
  --margen-whatsapp-flotante: var(--espacio-md);
  --tamano-whatsapp-flotante: calc(var(--texto-2xl) + 2 * var(--espacio-sm));  /* ícono más su relleno */
  --ciclo-pulso-whatsapp: 4s;               /* un pulso de 1,6s (el 40 % del ciclo) y pausa hasta el siguiente */
  --escala-pulso-whatsapp: 1.6;             /* tamaño final del anillo */
  --escala-rebote-whatsapp: 1.08;           /* rebote del ícono al empezar cada pulso */
  --escala-hover-whatsapp: 1.05;

  /* Capas */
  --capa-cabecera: 2;
  --capa-flotante: 3;               /* botón de WhatsApp */
  --capa-salto: 4;

  /* Breakpoints: tablet 1024px y móvil 767px. Las @media usan esos números
     literales: @media (max-width: 1024px) y @media (max-width: 767px). */

  /* Transiciones */
  --duracion-base: 0.3s;
  --duracion-lenta: 0.5s;
  --duracion-minima: 0.01ms;        /* "reducir movimiento": casi instantáneo, pero los eventos de fin siguen llegando */
}

/* En móvil la cabecera fija tiene dos filas: logo arriba y navegación debajo */
@media (max-width: 767px) {
  :root {
    --alto-cabecera-fija: 130px;
    --relleno-tarjeta: var(--espacio-lg);
  }
}