/* Header, navegación, selectores y footer compartidos por las 5 páginas del sitio. */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); background-color: var(--color-nav-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } @media (min-width: 768px) { .site-header { padding: var(--space-2) var(--space-6); } } .wordmark { display: flex; align-items: center; gap: 10px; order: 1; text-decoration: none; padding: var(--space-1) 0; } .wordmark img { width: 34px; height: 34px; } .wordmark-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.2px; color: var(--color-text); } /* "Sense" iba en cian puro (spec del rediseño): aunque el wordmark podría considerarse exento de AA por ser parte del logotipo (WCAG 1.4.3), a 20px/700 el cian sobre fondo claro da solo 2.29:1 — se prefiere --color-link (igual patrón que el resto del sitio) para que sea legible sin depender de esa excepción: cian real en oscuro, navy en claro. */ .wordmark-text span { color: var(--color-link); } .header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); order: 2; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); order: 3; width: 100%; font-size: 0.9375rem; font-weight: 500; } @media (min-width: 768px) { .site-nav { order: 2; width: auto; margin-inline: auto; } .header-actions { order: 3; } } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 4px; color: var(--color-text-muted); text-decoration: none; border-bottom: 2px solid transparent; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--color-text); } .site-nav a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-secondary); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Selector de idioma: grupo pill con dos segmentos ES/EN */ .lang-selector { display: flex; align-items: center; gap: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px; font-size: 0.75rem; font-weight: 600; } .lang-selector a { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; border-radius: var(--radius-pill); color: var(--color-text-muted); text-decoration: none; } .lang-selector a:hover, .lang-selector a:focus-visible { color: var(--color-text); } .lang-selector a[aria-current="true"] { background-color: var(--color-surface-alt); color: var(--color-text); cursor: default; } /* Interruptor de modo claro/oscuro: pill 46x26 con círculo deslizante. El color/posición del círculo depende únicamente de [data-theme] (CSS), theme-toggle.js solo alterna el atributo aria-pressed y el atributo data-theme del — sin cambios de lógica JS. */ .theme-toggle { position: relative; flex-shrink: 0; width: 46px; height: 26px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background-color: var(--color-surface-alt); cursor: pointer; } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-primary); transition: left 0.2s ease; } [data-theme="dark"] .theme-toggle-knob { left: 22px; } .site-footer { padding: var(--space-3) var(--space-3); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: 0.8125rem; border-top: 1px solid var(--color-border); text-align: center; } @media (min-width: 640px) { .site-footer { justify-content: space-between; padding: var(--space-3) var(--space-6); text-align: left; } } .site-footer p { margin: 0; } .site-footer nav a { color: var(--color-text-muted); text-decoration: none; } .site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--color-text); } /* Contenedor de contenido compartido por páginas de texto simples (privacidad). Las páginas con layout propio (contacto, noticias, gracias, home) definen su propio contenedor en su CSS específico. */ .section { padding: var(--space-6) var(--space-3) var(--space-8); max-width: 47.5rem; margin: 0 auto; } @media (min-width: 768px) { .section { padding: var(--space-8) var(--space-6) 100px; } }