/* ============================================================================ Ponécamaras — hoja de estilos base ============================================================================ Reemplaza la hoja heredada del proyecto anterior (132 KB de estilos de otro sitio, que además dependía de variables que el ya no inyecta). Criterios: · REGLA 60/30/10. Blanco domina la superficie, azul estructura (header, pie, secciones alternas) y el amarillo aparece SOLO en elementos clickeables de conversión. Si el amarillo se usa de adorno pierde su función: el ojo tiene que aprender que amarillo = se toca. · CONTRASTE. Los botones amarillos llevan texto oscuro (#0E1B2A sobre #FFC300 da 11:1). Con texto blanco no llegarían a AA. Todas las combinaciones de la hoja pasan WCAG 2.1 AA. · VERDE SOLO EN WHATSAPP. Es el único verde del sitio, para que ese botón no se camufle con el resto. · MÓVIL PRIMERO, y sin dependencias externas: las dos fuentes (Host Grotesk para el cuerpo, Barlow Condensed para títulos y botones) se sirven desde el propio dominio. No hay Google Fonts ni librería de iconos. · La única pieza fija de contacto es el botón flotante de WhatsApp, abajo a la derecha. No hay barra inferior en móvil. Orden del archivo: 1. Tokens 2. Reset y base 3. Tipografía 4. Utilidades de layout 5. Botones 6. Header y menú móvil 7. Migas 8. Hero y cabeceras de página 9. Bloques de contenido 10. Listas 11. Tarjetas 12. Tablas 13. Pasos 14. FAQ 15. CTA 16. Formularios 17. Páginas específicas 18. Pie 19. Conversión fija (WhatsApp flotante) 20. Accesibilidad e impresión ========================================================================== */ /* ── 1. Tokens ────────────────────────────────────────────────────────────── */ /* Fuente única de los tokens de diseño. config/variables.php tiene copias de algunos colores solo para lo que PHP necesita (la meta theme-color). */ :root { --blanco: #FFFFFF; --gris-hielo: #F4F6F8; --borde: #E3E8EE; --texto: #0E1B2A; --texto-suave: #5A6B7D; --azul: #123A5F; --azul-oscuro: #0C2843; /* Acento (CTA). Rojo: marca lo que se toca. Lleva texto blanco encima (4,83:1, AA; el hover 6,47:1) y no se confunde con el verde de WhatsApp. */ --rojo: #DC2626; --rojo-dark: #B91C1C; /* El mismo acento, aclarado, para TEXTO sobre azul (hero, pie). El rojo de arriba sobre el azul da 2,42:1 y no se lee; este da 6,16:1. */ --rojo-claro: #FCA5A5; --error: #B3261E; --exito: #1B7F4B; --whatsapp: #25D366; --whatsapp-dark: #1EB456; --ancho: 1140px; --gutter: 16px; --radio: 10px; --radio-chico: 6px; --sombra: 0 1px 2px rgba(14, 27, 42, .06), 0 4px 12px rgba(14, 27, 42, .06); --sombra-alta: 0 4px 10px rgba(14, 27, 42, .10), 0 12px 28px rgba(14, 27, 42, .12); /* Cuerpo en Host Grotesk, titulos y botones en Barlow Condensed. Las dos autoalojadas. */ --fuente: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Titulos en Barlow Condensed, autoalojada. El fallback es una condensada del sistema, para que el salto al cargar la fuente sea chico. */ --fuente-titulos: "Barlow Condensed", "Arial Narrow", "Segoe UI Semibold", system-ui, sans-serif; } /* ── 1b. Fuentes autoalojadas ──────────────────────────────────────────────── Host Grotesk para el cuerpo y Barlow Condensed para títulos y botones, las dos en woff2 servidas desde el propio dominio en lugar de Google Fonts: evita una conexión externa en el camino crítico. Solo el subconjunto latin (U+0000-00FF), que cubre todo el español incluidos á é í ó ú ñ ü ¿ ¡. Con eso Host Grotesk pesa 19,8 KB en lugar de ~200 KB. font-display: swap para que el texto se vea desde el primer paint. Pesos cargados: Host Grotesk 400-700 (un archivo variable) y Barlow Condensed 600 / 700, que son exactamente los que usa la hoja. Ni uno más. */ /* Host Grotesk es VARIABLE: un solo archivo cubre el eje de peso 400-700. Por eso hay una @font-face y no tres, y por eso el font-weight es un rango. Pesa 19,8 KB contra los 23,1 KB que sumaban los tres pesos estaticos de Poppins, y baja de tres peticiones a una. */ @font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/host-grotesk-var.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; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } /* ── 2. Reset y base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Las listas sin viñeta pierden tambien la sangria. Los navegadores le dan a