/* ============================================================ HYPROX — Design tokens (sitio 4.0) Único archivo que se toca cuando cambia la identidad. Las páginas y estilos.css consumen estas variables; no usan valores de color/tipografía directos. Identidad Rosa Mango (entregada jul 2026), aplicada el 2026-07-28. Fuente de los valores: 02 MARCA E IDENTIDAD/1. ROSA MANGO BRANDING/ CONTEXTO-COLOR-E-IMAGENES.md ============================================================ */ /* --- Fuentes autohospedadas (woff2) --- Antes Afacad se cargaba desde Google Fonts (fonts.googleapis.com + fonts.gstatic.com); se autohospeda desde 2026-07-29 para quitar esas conexiones externas del critical path (menos DNS/TLS antes del primer render). Sewimple Pol se sumó el mismo día: Rosa Mango ya consiguió el permiso de uso web (antes era "all rights reserved" sin licencia de webfont). Archivos en ../assets/fonts/. */ @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Afacad'; src: url('../assets/fonts/Afacad-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Sewimple Pol'; src: url('../assets/fonts/SewimplePol-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* --- Paleta oficial Rosa Mango (los cinco colores tal cual) --- No usarlos directo en estilos.css: son la referencia de la que salen los tokens de abajo. */ --marca-tinta: #111B38; /* dark neutral */ --marca-neutro: #F7F7F7; /* light neutral */ --marca-azul: #6A8BFF; /* bold main — color de acción */ --marca-azul-comp: #A6BEED; /* complementary */ --marca-lima: #E2FF65; /* accent — SOLO sobre tinta, <5% de pantalla */ /* --- Color --- */ --color-titulo: #111B38; --color-texto: #111B38; --color-texto-suave: #4A5878; /* derivado del tinta (pendiente VoBo Rosa Mango) */ /* Azul de marca oscurecido: el #6A8BFF puro da 2.9:1 sobre el fondo claro y no pasa AA como color de texto. Mismo tono, sí accesible. */ --color-acento: #3E63D6; --color-acento-hover: #2F4EB0; --color-acento-claro: #6A8BFF; /* azul de marca puro: solo sobre fondo oscuro */ --color-fondo: #F7F7F7; --color-fondo-alterno: #ECECEE; /* derivado */ --color-fondo-suave: #E8EDFA; /* derivado del complementario, muy lavado */ --color-borde: #DEDEE2; /* derivado */ --color-texto-invertido: #FFFFFF; --color-fondo-oscuro: #111B38; /* bandas oscuras */ --color-fondo-oscuro-2: #0C1329; /* footer */ --color-texto-sobre-oscuro: #A6BEED; --color-linea-oscura: rgba(255, 255, 255, 0.16); --color-whatsapp: #25D366; /* botón flotante móvil (color del canal, no de la marca) */ --color-whatsapp-hover: #1EBE5B; /* --- Tipografía --- Afacad (licencia OFL) para cuerpo de texto y etiquetas, autohospedada arriba. Sewimple Pol entra en --fuente-display (títulos) desde 2026-07-29: Rosa Mango ya tiene el permiso de uso web, con Afacad como respaldo si algún corte de Sewimple Pol no trae el glifo. */ --fuente: 'Afacad', 'Segoe UI', Arial, sans-serif; --fuente-display: 'Sewimple Pol', 'Afacad', 'Segoe UI', Arial, sans-serif; --fuente-etiqueta: 'Afacad', 'Segoe UI', Arial, sans-serif; /* Cada tracking de título en estilos.css estaba en negativo (-0.01em a -0.02em), afinado para lo abierta que es Afacad a tamaño grande. Sewimple Pol ya viene con las letras muy juntas por diseño (es redonda y conectada); ese mismo negativo hace que se toquen entre sí. Un solo token positivo para que el ajuste no quede regado por todo el archivo si la fuente de título vuelve a cambiar. */ --letter-spacing-display: 0.05em; --peso-normal: 400; --peso-medio: 500; --peso-display: 600; --peso-fuerte: 700; /* Afacad tiene la caja más chica que Barlow, así que la escala va alta. Segundo ajuste al alza el 2026-07-28 a petición de Pedro. */ --texto-base: 1.24rem; --texto-chico: 1.05rem; --texto-mini: 0.9rem; --texto-grande: 1.4rem; --texto-nav: 1.21rem; /* menú del header, +15% sobre el chico */ /* Escala editorial: el tamaño ES la jerarquía */ --titulo-hero: clamp(2.8rem, 6.8vw, 5.4rem); --titulo-h1: clamp(2.15rem, 4.9vw, 3.45rem); --titulo-h2: clamp(2.15rem, 4vw, 3.35rem); --titulo-h3: 1.42rem; --titulo-pilar: clamp(1.6rem, 3.5vw, 2.4rem); --titulo-declaracion: clamp(2rem, 4.3vw, 3.55rem); /* Las cifras bajan mucho el 2026-07-28 (Pedro): la banda se lee como una ficha de datos, no como un cartel. */ --cifra-grande: clamp(1.85rem, 2.6vw, 2.4rem); --interlineado: 1.55; --interlineado-titulos: 1.06; /* --- Espaciado --- */ --esp-1: 0.5rem; --esp-2: 1rem; --esp-3: 1.5rem; --esp-4: 2.5rem; --esp-5: 4rem; --esp-6: 6rem; /* --- Layout --- */ --ancho-contenido: 1200px; --radio: 2px; /* botones rectos, industriales */ --radio-chico: 2px; --sombra: 0 1px 3px rgba(17, 27, 56, 0.06), 0 4px 16px rgba(17, 27, 56, 0.05); --alto-header: 80px; --alto-logo-header: 44px; /* +30% el 2026-07-28 (Pedro) */ --alto-logo-footer: 44px; /* --- Transiciones --- */ --transicion: 0.18s ease; }