/* ========================================================================== OSZILA — DESIGN TOKENS Fuente única de verdad para color, tipografía y espaciado. Cada bloque indica dónde se configura su equivalente en Elementor Pro. Ver CLAUDE.md y ELEMENTOR-HANDOFF.md ========================================================================== NOTA DE ACCESIBILIDAD — leer antes de tocar los azules. El azul de marca #0082CB NO llega a AA (4.5:1) para texto normal: · sobre blanco 4.15:1 · sobre crema 3.84:1 · sobre marino 4.14:1 · blanco sobre #0082CB 4.15:1 Por eso hay TRES azules con trabajos distintos y no intercambiables: --oszila-azul → SOLO gráfica: arcos, aros, iconos, filetes, cifras display grandes. Nunca texto pequeño. --oszila-azul-texto → texto pequeño, enlaces y RELLENO DE BOTÓN sobre fondos claros. Es #0082CB oscurecido al 90 %. --oszila-azul-claro → texto pequeño y enlaces sobre fondo marino. ========================================================================== */ :root { /* ------------------------------------------------------------------------ COLOR — Elementor: Site Settings > Global Colors ------------------------------------------------------------------------ */ /* Marca (valores del cliente, sin tocar) */ --oszila-azul: #0082CB; /* acento gráfico: arcos, aros, iconos */ --oszila-marino: #0B1B35; /* texto principal, secciones oscuras */ --oszila-crema: #F9F6EA; /* fondo cálido alterno */ --beige-tarjeta: #F4EED7; /* el mismo crema un 5 % más oscuro (L 90 %): tarjetitas sobre fondo crema. Marino encima da 14.77:1 y gris-60, 5.06:1. */ --oszila-blanco: #FFFFFF; /* texto sobre oscuro, tarjetas sobre crema */ /* Azules derivados que sí cumplen AA (ver nota de arriba) */ --oszila-azul-texto: #0075B7; /* 4.97:1 blanco · 4.59:1 crema */ --oszila-azul-claro: #1C9BD5; /* 5.48:1 sobre marino */ /* Grises TINTADOS hacia el marino — ningún gris neutro en todo el sitio. El número es la luminosidad relativa aproximada, no la opacidad. */ --gris-90: #1E2C45; /* 13.99:1 blanco — titulares alternativos */ --gris-75: #3B4860; /* 9.20:1 blanco — cuerpo largo */ --gris-60: #5A6578; /* 5.89:1 blanco — TEXTO SECUNDARIO ✓AA */ --gris-45: #7C8593; /* 4.61:1 marino — secundario sobre oscuro */ --gris-30: #A8AEB8; /* 7.70:1 marino — terciario sobre oscuro */ --gris-18: #CDD1D8; /* bordes y separadores sobre claro */ --gris-10: #E3E6EA; /* divisores suaves */ --gris-06: #EFF1F4; /* fondos sutiles */ /* Roles semánticos — usa SIEMPRE estos en las secciones, no los de arriba. Cambiar un rol aquí repinta todo el sitio de forma coherente. */ --texto-principal: var(--oszila-marino); --texto-secundario: var(--gris-60); --texto-sobre-oscuro: var(--oszila-crema); --texto-secundario-oscuro: var(--gris-45); --borde: var(--gris-18); --borde-sutil: var(--gris-10); --fondo-pagina: var(--oszila-blanco); --fondo-alterno: var(--oszila-crema); --fondo-oscuro: var(--oszila-marino); /* Velo sobre fotografía: garantiza contraste del texto del hero. Elementor: Container > Background Overlay > Color + Opacity. */ --velo-foto: rgba(11, 27, 53, 0.62); --velo-foto-suave: rgba(11, 27, 53, 0.40); /* ------------------------------------------------------------------------ TIPOGRAFÍA — Elementor: Site Settings > Global Fonts Las dos familias del moodboard (ozsila_mood.ai): Playfair Display en Regular, Italic y Black, y DM Sans Regular. Nada más. ------------------------------------------------------------------------ */ /* Titulares. Playfair Display: la Didone del moodboard. Tres pesos con tres trabajos distintos, no tres tamaños del mismo. */ --font-heading: "Playfair Display", "Times New Roman", Times, serif; /* Rótulos en versales y cuerpo de texto. DM Sans, también del moodboard. En versales con tracking abierto hace de firma de marca; en redonda a 18px es el cuerpo. Una familia, dos registros. */ --font-body: "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-brand: var(--font-body); /* Escala de tamaños — valores de ESCRITORIO. Se reajustan en los dos únicos breakpoints, al final de este archivo. Elementor: cada uno es un Global Font con su valor por dispositivo. */ --fs-hero: 80px; /* H1 del hero, DM Sans Bold + Playfair Italic */ --fs-display: 76px; /* titular grande fuera del hero */ --fs-h2: 48px; /* titular de sección, Playfair Regular */ --fs-h3: 34px; /* titular de servicio */ --fs-h4: 24px; /* titular de bloque o paso */ --fs-h5: 20px; /* subtítulo */ --fs-numero: 80px; /* cifra del proceso, Playfair BLACK */ --fs-label: 13px; /* versales de marca (DM Sans) */ --fs-boton: 14px; /* etiqueta de botón */ --fs-body-lg: 20px; /* párrafo destacado (hero, CTA) */ --fs-body: 18px; /* párrafo por defecto */ --fs-body-sm: 15px; /* pie, notas legales */ /* Interlineado: apretado en display, generoso en lectura */ --lh-display: 1.04; --lh-heading: 1.12; --lh-body: 1.62; --lh-ui: 1.2; /* Tracking. Playfair pide negativo en display; DM Sans pide muy positivo en versales, como el espaciado del propio wordmark. */ --tracking-display: -0.025em; --tracking-body: 0em; --tracking-label: 0.16em; /* Pesos. Los tres de Playfair vienen del moodboard. */ --peso-display: 400; /* Playfair Regular: titulares */ --peso-black: 900; /* Playfair Black: cifras y acentos */ --peso-body: 400; --peso-medio: 500; --peso-brand: 500; /* Medida de línea: 65–75 caracteres. Nunca un párrafo a todo el ancho. */ --medida: 68ch; --medida-corta: 46ch; /* ------------------------------------------------------------------------ ESPACIADO — base 8 px. El número ES el múltiplo. Elementor: valores directos en los sliders de padding / margin / gap. ------------------------------------------------------------------------ */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-12: 96px; /* Aire vertical de sección (Elementor: padding del Container raíz) */ --seccion-y: var(--space-12); --seccion-y-ancha: 160px; /* 20 × 8 */ /* ------------------------------------------------------------------------ GEOMETRÍA Y PROFUNDIDAD ------------------------------------------------------------------------ */ --ancho-contenido: 1200px; --altura-header: 88px; /* 11 x 8. El hero lo compensa con margin negativo */ --radio: 2px; /* casi recto: el logotipo no tiene curvas blandas */ --radio-card: 10px; /* tarjetitas de contenido (índice de resultados) */ --radio-media: 14px; /* SOLO tarjetas con fotografía, como la referencia. Botones y paneles de texto siguen a 2px. */ /* ---------------------------------------------------------------------- CRISTAL (glass) Superficie translúcida con desenfoque de lo que hay detrás. Se usa con moderación, en dos sitios y solo dos: la cabecera al bajar (con su propio rgba) y el sello de titulación. Las tarjetas de servicio NO usan estos tokens: llevan un velo degradado con desenfoque enmascarado, que es otra cosa (ver `.servicio__velo` en styles.css). ATENCIÓN ELEMENTOR: `backdrop-filter` NO tiene control nativo en el panel de Elementor. Cada uno de estos bloques necesita una línea en Advanced > Custom CSS (que Elementor Pro sí tiene): selector { backdrop-filter: blur(18px) saturate(130%); } El color de fondo translúcido y el borde sí se configuran nativos. ---------------------------------------------------------------------- */ --cristal-claro: rgba(249, 246, 234, 0.82); --cristal-borde: rgba(249, 246, 234, 0.18); --cristal-borde-claro: rgba(11, 27, 53, 0.10); --desenfoque: blur(18px) saturate(130%); /* Sombras con desplazamiento Y y difuminado, tintadas de marino. Nunca un halo de color sin offset. */ --sombra-1: 0 1px 2px rgba(11, 27, 53, 0.06), 0 2px 8px rgba(11, 27, 53, 0.05); --sombra-2: 0 2px 4px rgba(11, 27, 53, 0.07), 0 12px 32px rgba(11, 27, 53, 0.09); /* Movimiento. Salida exponencial desde un estado ya visible. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.5s; } /* -------------------------------------------------------------------------- BREAKPOINTS — exactamente los dos activos por defecto en Elementor Pro. Solo se reajusta la escala tipográfica; color y espaciado no cambian. -------------------------------------------------------------------------- */ /* Tablet */ @media (max-width: 1024px) { :root { --fs-hero: 58px; --fs-display: 56px; --fs-h2: 40px; --fs-h3: 29px; --fs-h4: 22px; --fs-h5: 19px; --fs-numero: 64px; --fs-body-lg: 19px; --fs-body: 17px; --seccion-y: var(--space-8); --seccion-y-ancha: 112px; } } /* Mobile */ @media (max-width: 767px) { :root { --fs-hero: 34px; --fs-display: 38px; --fs-h2: 31px; --fs-h3: 25px; --fs-h4: 20px; --fs-h5: 18px; --fs-numero: 48px; --fs-body-lg: 17px; --fs-body: 16px; --tracking-display: -0.015em; --seccion-y: var(--space-6); --seccion-y-ancha: var(--space-8); } } /* -------------------------------------------------------------------------- PREFERENCIA DE MOVIMIENTO REDUCIDO Elementor: recuerda desactivar las Entrance Animations si se respeta esto. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur: 0.01s; } /* Ni entrada del hero ni desplazamiento del yate al hacer scroll. js/main.js también se desengancha del scroll en este caso. Elementor: hay que desactivar a mano las Entrance Animations y los Scrolling Effects, porque no los condiciona a esta preferencia. */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }