Como son custom properties, cascadean solas hacia adentro. */ [data-accent="verde"] { --c-accent: var(--p-verde); } [data-accent="morado"] { --c-accent: var(--p-morado); } [data-accent="amarillo"] { --c-accent: var(--p-amarillo); } [data-accent="naranja"] { --c-accent: var(--p-naranja); } [data-accent="rosa"] { --c-accent: var(--p-rosa); } [data-accent="azul"] { --c-accent: var(--p-azul); } [data-accent="turquesa"] { --c-accent: var(--p-turquesa); } /* ---------- 2b. TEMA INVERTIDO ---------------------------- */ /* Fondo blanco / texto negro. Mismo criterio: aplica a body (página Los Resultados) o a una sección suelta (bloque de casos en el home). Solo reasigna roles, nada más. */ [data-theme="light"] { --c-bg: var(--p-blanco); --c-bg-invert: var(--p-negro); --c-text: var(--p-negro); --c-text-muted: var(--p-gris); --c-text-soft: #4A4A4A; /* ⚠️ PENDIENTE: gris de texto en claro */ --c-text-invert: var(--p-blanco); --c-line: rgba(11, 11, 11, 0.14); } /* Un elemento con data-theme pinta su propio fondo */ [data-theme] { background-color: var(--c-bg); color: var(--c-text); } /* ---------- 3. TIPOGRAFÍA --------------------------------- */ :root { --f-display: "Newsreader", Georgia, serif; --f-body: "Roboto", system-ui, -apple-system, sans-serif; --f-ui: var(--f-body); --fw-regular: 400; --fw-medium: 500; /* el "semibold" del sistema — Roboto Medium */ /* Escala. h1 ajustado 36 → 44 por el cliente. h2 ajustado 28 → 34 por el cliente. ⚠️ h3–h5 tal cual Figma: NO se reescalaron sin confirmar. */ --fs-h1: 44px; --fs-h2: 34px; --fs-h3: 24px; --fs-h4: 18px; --fs-h5: 14px; --fs-body-xl: 16px; --fs-body-l: 14px; --fs-body-m: 13px; --fs-body-s: 12px; --fs-body-xs: 10px; /* Interlínea — "auto" por ahora. Para ajustar después: cambiar `normal` por el número que sea. Cada nivel tiene su propia variable, así se afina uno sin tocar los demás. Ej: --lh-h1: 1.05; */ --lh-h1: normal; --lh-h2: normal; --lh-h3: normal; --lh-h4: normal; --lh-h5: normal; --lh-body: normal; /* Tracking — mismo criterio. ⚠️ PENDIENTE valores reales. */ --ls-display: 0; --ls-body: 0; --ls-ui: 0; } /* ---------- 4. LAYOUT (specs del cliente) ----------------- */ :root { --maxw: 1120px; /* contenedor */ --gutter: 20px; /* 12 columnas */ /* Alto del header. Vive en :root (no en .nav-main) porque .nav-panel — el panel móvil— es hermano de

, no descendiente: si esta variable solo existiera dentro de .nav-main, .nav-panel nunca la heredaría y su position:fixed quedaba inválido (colapsaba al tamaño de su contenido en vez de tapar la pantalla). */ --nav-h: 60px; } /* ---------- 5. ESPACIADO ---------------------------------- */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 96px; /* Figma marca 120px. Se respeta en desktop, baja a 64 en móvil. */ --sp-section: clamp(64px, 8vw, 120px); } /* ---------- 6. FORMA Y MOVIMIENTO ------------------------- */ :root { /* Esquinas rectas por indicación del cliente. Las variables quedan para meter un radio ligero si se decide. */ --radius-sm: 0; --radius-md: 0; --radius-img: 0; --radius-pill: 999px; /* solo botones */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.45s; } /* ---------- 7. OVERRIDES DE BOOTSTRAP --------------------- */ /* BS trae container 1140 / gutter 24. Specs: 1120 / 20. */ :root { --bs-body-bg: var(--c-bg); --bs-body-color: var(--c-text); --bs-body-font-family: var(--f-body); --bs-body-font-size: var(--fs-body-l); --bs-gutter-x: var(--gutter); --bs-border-color: var(--c-line); --bs-primary: var(--c-accent); --bs-link-color: var(--c-text); --bs-link-hover-color: var(--c-accent); } .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: var(--gutter); max-width: var(--maxw); } .row { --bs-gutter-x: var(--gutter); } /* ---------- 8. RESET / BASE ------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--c-bg); color: var(--c-text); font-family: var(--f-body); font-size: var(--fs-body-l); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5 { font-family: var(--f-display); font-weight: var(--fw-regular); letter-spacing: var(--ls-display); margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); } h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); } p { margin: 0; } a { text-decoration: none; color: inherit; transition: color var(--dur) var(--ease); } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; } /* ---------- 9. HELPERS ------------------------------------ */ .sec { padding-block: var(--sp-section); position: relative; } .em { font-style: italic; } .muted { color: var(--c-text-muted); } .soft { color: var(--c-text-soft); } .fw-med { font-weight: var(--fw-medium); } .t-xl { font-size: var(--fs-body-xl); } .t-l { font-size: var(--fs-body-l); } .t-m { font-size: var(--fs-body-m); } .t-s { font-size: var(--fs-body-s); } .t-xs { font-size: var(--fs-body-xs); } /* Oculta temporalmente sin borrar: para links/secciones que se van a retomar más adelante (ej. "Los Resultados" en nav/footer). [class].is-hidden (no solo .is-hidden) a propósito: sube la especificidad a (0,2,0) sin usar !important, para que siempre gane sobre el display de un solo-clase (.nav-panel__link, .nav-main__link, etc.) sin importar en qué archivo se cargue después en la cascada. */ [class].is-hidden { display: none; } /* ---------- 10. ACCESIBILIDAD ----------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }