/**
 * Variables del sistema de diseño de Induscore.
 *
 * Todo color, tamaño de fuente, espaciado, radio, transición y ancho
 * de contenido usado en el resto de los archivos CSS del tema se
 * define UNA sola vez aquí. Ningún otro archivo debe escribir un
 * color o una medida "a mano": siempre se referencia con var(--token).
 *
 * Nota técnica: los puntos de quiebre de @media no pueden usar
 * variables CSS (limitación del propio CSS), por eso se documentan
 * aquí como referencia y se repiten como números literales en cada
 * archivo. Enfoque mobile-first en todo el tema: los estilos sin
 * media query son la base para móvil, y las pantallas mayores se
 * declaran con min-width. Solo existen dos puntos de quiebre:
 *   - Móvil:      hasta 767px (estilos base, sin media query)
 *   - Tablet:     @media (min-width: 768px)  — 768px a 1023px
 *   - Escritorio: @media (min-width: 1024px) — desde 1024px
 * Excepción puntual: algún ajuste que solo tiene sentido MIENTRAS
 * dura la etapa tablet (nunca en escritorio) usa un segundo bloque
 * acotado con @media (max-width: 1023px) junto al de min-width:768px,
 * documentado en el propio archivo donde aparece.
 *
 * Segunda excepción, exclusiva del header (components.css): el menú
 * completo de escritorio y el logo a 56px solo aparecen desde
 * @media (min-width: 1200px) en vez de 1024px, para que el logo
 * nunca compita por espacio con el menú (desde 1200px
 * .encabezado__logo tiene flex-shrink:0; por debajo se achica en
 * proporción si no cabe). El header además compacta sus espacios
 * entre 1200px y 1299px y bajo 380px. Todo lo demás sigue la escala
 * 768/1024 de arriba.
 *
 * @package Induscore
 */

/* Fuente Inter (variable), auto-hospedada: cubre pesos 100-900 con
   un solo archivo. Subset "latin" incluye todo el español (ñ, tildes, ¿ ¡). */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-variable-latin.woff2') format('woff2');
}

/* Space Grotesk 500 (solo el header), auto-hospedada desde la Fase 7
   (antes venía de Google Fonts). Subset "latin" de Google Fonts, licencia
   SIL Open Font License. Inter y esta se precargan (inc/rendimiento.php). */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

	/* ---------------------------------------------------
	   Colores de marca
	   --------------------------------------------------- */
	--color-azul-oscuro: #0F2038;
	--color-azul-medio: #132C4A;
	/* Naranjo de marca: fondos, líneas, íconos y texto sobre fondos
	   oscuros. Sobre él, el texto va SIEMPRE en azul oscuro (6,2:1); el
	   blanco no alcanza contraste (2,64:1). */
	--color-naranjo: #F67F17;
	/* Hover y :focus-visible de los botones con fondo naranjo (azul
	   oscuro encima: 5,25:1). */
	--color-naranjo-hover: #E57210;
	--color-gris-claro: #F2F4F6;
	--color-blanco: #FFFFFF;
	--color-gris-borde: #D9DEE3;
	--color-texto-secundario: #4A5A6E;
	--color-texto-atenuado: #C8D2D7;
	/* Naranjo para TEXTO (y hover de enlaces/íconos) sobre fondos
	   claros: 5,42:1 sobre blanco y 4,91:1 sobre gris claro. */
	--color-naranjo-texto: #A8520A;
	/* Variante suave, solo para el botón Cotizar del header. */
	--naranjo-suave: #FDEBDC;
	--naranjo-borde: #F7B98A;
	/* Degradado azul muy suave de las tarjetas de "Nuestras unidades":
	   parte blanco en la zona del logo y termina en este par de azules
	   pálidos hacia la base de la tarjeta. */
	--color-tarjeta-degradado-medio: #E8EFF7;
	--color-tarjeta-degradado-final: #D3E0EF;
	/* Verde oficial de WhatsApp (solo el botón flotante). El ícono blanco
	   sobre este verde da 1,98:1: se acepta por ser el ícono oficial de
	   la marca (decisión registrada en docs/ESTADO.md). */
	--color-whatsapp: #25D366;
	/* Estados de mensajes y validaciones (tienda). Texto de estado sobre
	   su fondo: error 5,75:1 y éxito 4,72:1; sobre blanco 6,57 y 5,35. */
	--color-error: #B42318;
	--color-error-fondo: #FDECEA;
	--color-exito: #1E7A46;
	--color-exito-fondo: #E7F4EC;
	/* Pie de página (solo el footer; el resto del sitio sigue en azul
	   oscuro). Cuerpo y barra inferior en un azul más claro; la franja
	   superior de cotización, un tono más oscuro para leerse como bloque
	   aparte. Contraste AA de los textos del footer sobre el cuerpo:
	   blanco 11,5:1, blanco 75% 7,25:1, 65% 5,86:1, 55% 4,66:1. */
	--color-pie-fondo: #0F2038;
	--color-pie-franja: #13243B;
	/* Hover y foco de los enlaces del footer: el naranjo de marca da
	   4,36:1 sobre --color-pie-fondo (no llega a AA); este da 5,32:1. */
	--color-pie-enlace-activo: #F89A4A;

	/* Alias semánticos: qué rol cumple cada color, no solo su valor. */
	--texto-principal: var(--color-azul-oscuro);
	--texto-sobre-oscuro: var(--color-blanco);

	/* ---------------------------------------------------
	   Superposiciones (colores de marca con transparencia).
	   Cada opacidad usada en el tema se define una sola vez.
	   --------------------------------------------------- */
	--overlay-blanco-15: rgba(255, 255, 255, 0.15);
	--overlay-blanco-50: rgba(255, 255, 255, 0.5);
	--overlay-blanco-55: rgba(255, 255, 255, 0.55);
	--overlay-blanco-65: rgba(255, 255, 255, 0.65);
	--overlay-blanco-70: rgba(255, 255, 255, 0.7);
	--overlay-blanco-75: rgba(255, 255, 255, 0.75);
	--overlay-blanco-85: rgba(255, 255, 255, 0.85);
	--overlay-blanco-90: rgba(255, 255, 255, 0.9);
	--overlay-azul-oscuro-12: rgba(15, 32, 56, 0.12);
	--overlay-azul-oscuro-35: rgba(15, 32, 56, 0.35);
	--overlay-azul-oscuro-55: rgba(15, 32, 56, 0.55);
	--overlay-naranjo-13: rgba(246, 127, 23, 0.13);
	--overlay-naranjo-40: rgba(246, 127, 23, 0.4);

	/* ---------------------------------------------------
	   Bordes y líneas divisorias (1px, sistema plano sin sombras)
	   --------------------------------------------------- */
	--radio-base: 0;
	--linea-divisoria: 1px solid var(--color-gris-borde);
	--linea-divisoria-oscura: 1px solid var(--overlay-blanco-15);

	/* ---------------------------------------------------
	   Tipografía
	   --------------------------------------------------- */
	--fuente-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	/* Space Grotesk (auto-hospedada, @font-face al inicio de este archivo)
	   se usa solo en el encabezado del sitio;
	   el resto del tema sigue usando --fuente-base. */
	--fuente-header: 'Space Grotesk', var(--fuente-base);
	--peso-header: 500;

	/* Escala de tamaños de fuente */
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 14px;
	--fs-md: 15px;
	--fs-lg: 16px;
	--fs-xl: 18px;
	--fs-2xl: 20px;
	--fs-3xl: 22px;
	--fs-4xl: 24px;
	--fs-5xl: 26px;
	--fs-6xl: 32px;
	--fs-7xl: 40px;
	--fs-8xl: 56px;

	/* Escala de pesos */
	--peso-ligero: 300;
	--peso-normal: 400;
	--peso-medio: 500;
	--peso-semi: 600;
	--peso-negrita: 700;

	/* Espaciado entre letras */
	--letras-negativas-sm: -0.01em;
	--letras-negativas-md: -0.02em;
	--letras-abiertas-sm: 0.03em;
	--letras-abiertas-md: 0.04em;
	--letras-abiertas-lg: 0.05em;
	--letras-abiertas-xl: 0.06em;

	/* Interlineado */
	--interlineado-ajustado: 1.2;
	--interlineado-medio: 1.3;
	--interlineado-base: 1.6;

	/* ---------------------------------------------------
	   Escala de espaciado (paddings, márgenes, separaciones
	   y también medidas de componentes pequeños: íconos, barras
	   de acento, contadores, etc. reutilizan la misma escala).
	   --------------------------------------------------- */
	--e-2: 2px;
	--e-4: 4px;
	--e-5: 5px;
	--e-6: 6px;
	--e-8: 8px;
	--e-10: 10px;
	--e-12: 12px;
	--e-14: 14px;
	--e-16: 16px;
	--e-18: 18px;
	--e-20: 20px;
	--e-24: 24px;
	--e-28: 28px;
	--e-32: 32px;
	--e-40: 40px;
	--e-44: 44px;
	--e-48: 48px;
	--e-56: 56px;
	--e-60: 60px;
	--e-64: 64px;
	--e-80: 80px;
	--e-88: 88px;
	--e-90: 90px;
	--e-92: 92px;
	--e-110: 110px;
	--e-220: 220px;
	--e-260: 260px;
	--e-420: 420px;

	/* ---------------------------------------------------
	   Anchos de contenido (máximos de línea para bloques de texto)
	   --------------------------------------------------- */
	--ancho-maximo: 1280px;
	--ancho-contenido-xs: 230px;
	--ancho-contenido-sm: 340px;
	--ancho-contenido-md: 360px;
	--ancho-contenido-lg: 480px;
	--ancho-contenido-xl: 520px;
	--ancho-contenido-3xl: 640px;

	/* ---------------------------------------------------
	   Medidas de componentes fijos del encabezado y logos
	   --------------------------------------------------- */
	--alto-header: var(--e-92);
	--alto-header-fijo: var(--e-64);
	--alto-logo-header: 56px;
	--alto-logo-header-movil: 42px;
	--alto-logo-header-fijo: 44px;
	--alto-logo-footer: var(--e-44);
	/* Logo para fondo oscuro del footer (sin placa blanca): 40px en móvil
	   y tablet, 48px en escritorio. */
	--alto-logo-footer-oscuro: var(--e-40);
	--alto-logo-footer-oscuro-escritorio: var(--e-48);
	/* Logo del Grupo Multiaceros (hero y barra inferior del footer). */
	--alto-logo-grupo: 22px;
	--alto-logo-grupo-escritorio: 26px;
	--tamano-icono-header: var(--e-20);
	/* 44px: área táctil mínima recomendada para controles en pantallas
	   táctiles (regla general de responsive del tema). */
	--tamano-boton-menu: var(--e-44);
	/* Botón flotante de WhatsApp: 48px en móvil/tablet, 52px en escritorio. */
	--tamano-whatsapp: var(--e-48);
	--tamano-whatsapp-escritorio: 52px;
	/* Barra fija de compra de la ficha de producto (móvil/tablet). */
	--alto-barra-compra: 72px;
	/* Columna de filtros del catálogo y del resumen de carrito/checkout. */
	--ancho-filtros: var(--e-260);
	--ancho-resumen-compra: 380px;

	/* ---------------------------------------------------
	   Capas (z-index)
	   --------------------------------------------------- */
	--z-panel: 120;
	--z-header: 100;
	/* Banner de cookies (Fase 7): sobre el WhatsApp y la barra de compra, bajo los paneles. */
	--z-cookies: 110;
	--z-buscador: 90;
	--z-whatsapp: 80;
	--z-barra-compra: 70;
	--z-hero-contenido: 2;
	--z-franja-unidades: 3;

	/* ---------------------------------------------------
	   Transiciones
	   --------------------------------------------------- */
	--transicion-base: 0.2s ease-in-out;
}