@import url('./layout/header.css'); /* ============================================================ IMPORT FONT ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap'); /* ============================================================ ROOT TOKENS (LIGHT MODE BASE) ============================================================ */ :root { /* ========================= BRAND ========================= */ --brand-azure: #00adee; --brand-navy: #2b3990; /* ========================= COLORS - LIGHT MODE ========================= */ --color-bg: #ffffff; --color-bg-subtle: #f0f6fb; --color-bg-emphasis: #ddeef8; --color-bg-dark: #222222; --color-text-primary: #1a2340; --color-text-body: #2e3f6b; --color-text-muted: #4a5f8a; --color-text-inverse: #ffffff; --color-brand-dark: #2b3990; --color-brand-mid: #0077b6; --color-brand-accent: #00adee; --color-link: #0077b6; --color-link-visited: #2b3990; --color-link-hover: #005a8e; --color-focus-ring: #00adee; --color-focus-bg: rgba(0, 173, 238, 0.15); --color-error: #b91c1c; --color-success: #166534; --color-warning: #92400e; --color-info: #0077b6; /* ========================= TYPOGRAPHY ========================= */ --font-family-base: 'Lexend', sans-serif; --font-family-mono: monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; --font-size-3xl: 2.25rem; --font-size-4xl: 3rem; --font-size-hero: 3.75rem; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-base: 1.6; --line-height-relaxed: 1.75; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; --letter-spacing-wider: 0.05em; /* ========================= FOOTER ========================= */ --color-footer-bg: #fff; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ FONT SCALING — LA CLAVE DEL SISTEMA El JS escala font-size en (ej: 110%). Esto hace que 1rem = 110% del tamaño base del navegador. Kadence usa rem en headings, párrafos, botones y menús, así que TODO escala automáticamente — sin tocar cada elemento. IMPORTANTE: No forzamos font-size en html aquí con CSS, lo dejamos al valor por defecto del navegador (16px / 100%) para que el JS tenga control total. ============================================================ */ html { /* Sin font-size aquí — el JS lo gestiona dinámicamente */ } body { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-text-body); background: var(--color-bg); letter-spacing: var(--letter-spacing-normal); } /* Forzamos la fuente Lexend en todo el sitio, respetando el tamaño de Kadence */ body, .entry-content, .site-main, .kb-rich-text, .wp-block-kadence-advancedheading, .kb-adv-text, nav, .header-navigation, .site-header, .site-footer { font-family: 'Lexend', sans-serif !important; } /* ============================================================ HEADINGS ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-base) !important; font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } /* Tamaños relativos en rem — escalan con html font-size */ h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-md); text-transform: uppercase; } p { max-width: 65ch; line-height: var(--line-height-base); } .site-footer { background: var(--color-footer-bg); } .site-footer p { max-width: none; } /* ============================================================ DARK MODE ============================================================ */ html[data-theme="dark"] { --color-bg: #0d1526; --color-bg-subtle: #152040; --color-bg-emphasis: #1c2f5a; --color-text-primary: #e8f0fc; --color-text-body: #c5d3ee; --color-text-muted: #8ea4c8; --color-text-inverse: #0d1526; --color-brand-dark: #7b93e8; --color-brand-mid: #48b8f0; --color-link: #48b8f0; --color-link-hover: #7dd3fc; --color-focus-ring: #48b8f0; --color-focus-bg: rgba(72,184,240,.12); --color-footer-bg: #222222; } html[data-theme="dark"] body { background: var(--color-bg) !important; color: var(--color-text-body) !important; } /* Dark mode: forzar colores en elementos de Kadence */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .main-navigation, html[data-theme="dark"] .site-footer { background: var(--color-bg) !important; color: var(--color-text-body) !important; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--color-text-primary) !important; } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] .entry-content { color: var(--color-text-body) !important; } html[data-theme="dark"] a { color: var(--color-link) !important; } /* ============================================================ HIGH CONTRAST MODE ============================================================ */ html[data-contrast="high"] { --color-bg: #000000; --color-bg-subtle: #0a0a0a; --color-bg-emphasis: #111111; --color-text-primary: #ffffff; --color-text-body: #f2f2f2; --color-text-muted: #cccccc; --color-text-inverse: #000000; --color-brand-dark: #ffffff; --color-brand-mid: #ffd400; --color-brand-accent: #ffd400; --color-link: #ffd400; --color-link-hover: #ffffff; --color-link-visited: #b3b3b3; --color-focus-ring: #ffd400; --color-focus-bg: rgba(255, 212, 0, 0.18); --color-footer-bg: #000000; } html[data-contrast="high"] body { background: #000000 !important; color: #f2f2f2 !important; } html[data-contrast="high"] h1, html[data-contrast="high"] h2, html[data-contrast="high"] h3, html[data-contrast="high"] h4, html[data-contrast="high"] h5, html[data-contrast="high"] h6 { color: #ffffff !important; } html[data-contrast="high"] p, html[data-contrast="high"] li, html[data-contrast="high"] .entry-content, html[data-contrast="high"] .site-main { color: #f2f2f2 !important; } html[data-contrast="high"] a { color: #ffd400 !important; text-decoration: underline !important; } html[data-contrast="high"] .site-header, html[data-contrast="high"] .site-footer, html[data-contrast="high"] .main-navigation { background: #000000 !important; color: #f2f2f2 !important; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Controlado por el botón del panel */ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ============================================================ LINKS ============================================================ */ a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--color-link-hover); } /* ============================================================ FOCUS (WCAG) ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; background: var(--color-focus-bg); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); padding: 12px 24px; min-height: 44px; border-radius: 8px; border: 2px solid transparent; } .btn-primary { background: var(--color-brand-dark); color: var(--color-text-inverse); } .btn-secondary { background: transparent; border-color: var(--color-brand-dark); color: var(--color-brand-dark); } /* ============================================================ LISTS ============================================================ */ ul, ol { padding-left: 24px; } li { line-height: var(--line-height-base); margin-bottom: 6px; } /* ============================================================ FORMS ============================================================ */ input, textarea, select { font-size: var(--font-size-base); padding: 10px 12px; border-radius: 8px; border: 2px solid #9db4d0; width: 100%; } /* ============================================================ CARDS ============================================================ */ .card { background: var(--color-bg); border: 1px solid #c2d8ed; padding: 24px; border-radius: 12px; } /* ============================================================ UTILITIES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* Asegura que el atributo [hidden] funcione siempre */ [hidden] { display: none !important; } /* ============================================================ ACCESSIBILITY WIDGET ============================================================ */ .accessibility-widget { position: fixed; right: 24px; bottom: 24px; z-index: 99999; } /* ============================================================ FLOATING BUTTON ============================================================ */ .accessibility-fab { width: 56px; height: 56px; border: none; border-radius: 999px; background: var(--color-brand-dark); color: white; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.15); transition: transform .2s ease, background-color .2s ease; } .accessibility-fab:hover { transform: translateY(-2px); } /* ============================================================ PANEL ============================================================ */ .accessibility-panel { position: absolute; right: 0; bottom: 72px; width: 320px; background: var(--color-bg); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.15); display: flex; flex-direction: column; gap: 20px; } /* ============================================================ HEADER DEL PANEL ============================================================ */ .accessibility-panel-header { display: flex; align-items: center; justify-content: space-between; } .accessibility-panel-header h2 { font-size: 18px; margin: 0; /* Importante: no escalar el widget con el sistema de fuentes */ font-size: 1.125rem !important; } .accessibility-close { border: none; background: transparent; cursor: pointer; font-size: 18px; } /* ============================================================ SECTIONS ============================================================ */ .accessibility-section { display: flex; flex-direction: column; gap: 12px; } .accessibility-label { font-size: 14px; font-weight: 600; margin: 0; } /* ============================================================ BOTONES DEL PANEL ============================================================ */ .accessibility-row { display: flex; gap: 8px; } .accessibility-panel button { min-height: 44px; border: none; border-radius: 10px; padding: 10px 14px; background: var(--color-bg-subtle); color: var(--color-text-primary); cursor: pointer; /* Tamaño fijo para los botones del widget — no escalan con el sistema */ font-size: 14px !important; font-family: 'Lexend', sans-serif !important; transition: background-color .2s ease, transform .2s ease; } .accessibility-panel button:hover { background: var(--color-bg-emphasis); } .accessibility-panel button:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; } /* Reset button */ #global-reset { width: 100%; background: var(--color-error) !important; color: white !important; } #global-reset:hover { background: #991b1b !important; } /* Indicador de tamaño de fuente actual */ #font-size-value { font-size: 12px; color: var(--color-text-muted); text-align: center; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 480px) { .accessibility-panel { width: calc(100vw - 32px); right: -8px; } } /* ============================================================ FONT SCALING — Forzar herencia en elementos de contenido Kadence no asigna font-size a párrafos (hereda del UA), pero el body tampoco lo propaga bien. Forzamos con em para que escalen con el html font-size que gestiona el JS. ============================================================ */ /* Elementos de texto general */ p, li, td, th, dt, dd, figcaption, blockquote, input, textarea, select, label, button, .wp-block-paragraph, .entry-content p, .entry-content li, .site-main p, .site-main li { font-size: 1rem !important; } /* Kadence blocks específicos */ .kb-rich-text p, .kb-adv-text, .kb-adv-text p, .wp-block-kadence-advancedheading, .kb-blocks-text-align-left, .kt-blocks-testimonial-text, .kt-svg-icon-list-item-text { font-size: 1rem !important; } /* Navegación y UI */ .main-navigation a, .site-header a, .site-footer p, .site-footer li, .widget p, .widget li { font-size: 1rem !important; } /* Navegación entre paginas */ .pagination .nav-links { text-align: center; }