/* ============================================================ SONRISA VIVA — PAGES OVERRIDE (subpáginas globales) + THEMING El sistema soporta dos temas controlados por `data-theme` en : - "dark" → paleta editorial premium (gold sobre negro azulado). Default. - "light" → paleta clínica (verde médico sobre crema). Para vista diurna. theme.js decide cuál aplicar (prefers-color-scheme + localStorage + toggle). Las reglas con `!important` que vienen después usan var(--token), así que con cambiar los valores de las vars al alternar tema, todo el sitio queda re-coloreado sin tocar selectores. ============================================================ */ /* ─────────── TOKENS — TEMA OSCURO (default) ─────────── */ :root, :root[data-theme="dark"]{ --void: #07080F; --void-2: #0D0F1B; --void-3: #161A2A; --void-4: #1F2438; --gold: #C9A86C; --gold-light: #E6CC8F; --gold-glow: rgba(201,168,108,0.18); --teal: #1FCFC6; --teal-light: #4DDDD2; --line-light: rgba(255,255,255,0.10); --line-light-2:rgba(255,255,255,0.18); --line-dark: rgba(255,255,255,0.08); /* Alias semánticos que el resto del CSS consume */ --off-white: #07080F; --cream: #0D0F1B; --warm-gray: #161A2A; --text: #F0F1F5; --text-muted: #B8BDD0; --text-light: #8B92A8; --border: rgba(255,255,255,0.10); --accent: #C9A86C; --accent-light:#E6CC8F; --accent-pale: rgba(201,168,108,0.10); /* Tokens semánticos extra (theming claro/oscuro) */ --surface-page: var(--void); /* fondo base de página */ --surface-elev: var(--void-2); /* secciones elevadas */ --surface-card: var(--void-3); /* tarjetas */ --hairline: var(--line-light); --hairline-strong:var(--line-light-2); --on-accent: var(--void); /* color sobre fondos de acento (texto/icono) */ --shadow-rest: 0 4px 16px rgba(0,0,0,.35); --shadow-elev: 0 12px 40px rgba(0,0,0,.45); --img-tint: brightness(.92); /* para imágenes muy claras se atenúan en dark */ --scheme: dark; } /* NOTA: en versiones previas aquí redefinía --cream-1/2/3 y --pure a valores oscuros para "dark" pensando que home.css los usaba solo como aliases del light. PERO home.css USA estos tokens INTENCIONALMENTE para crear bloques cream/blancos sobre el body dark (contraste editorial). Sobrescribirlos degradaba el look del modo oscuro. Mantenemos los valores de home.css intactos en dark. Para light theme se redefinen abajo en :root[data-theme="light"]. */ /* ─────────── TOKENS — TEMA CLARO ─────────── */ /* Filosofía: el dark NO se toca. Aquí solo redefinimos tokens cuando el sitio está en light. Las redefiniciones que más rinden son las semánticas globales: con cambiar `--t-light-1/2/3/4` (que home.css usa como "texto sobre fondo oscuro") arreglamos en cascada todos los textos hero, footer-logo, team-card, testimonios, etc. sin tocar selectores uno por uno. */ :root[data-theme="light"]{ /* Tokens cream/pure quedan como home.css los definió (claros). */ --cream-1: #FAF7F2; --cream-2: #F2EDE3; --cream-3: #E8E0D0; --pure: #FFFFFF; /* Textos que home.css declara como "sobre dark" pasan a oscuros en light. En dark, estos tokens conservan sus valores originales (#F0F1F5, #B8BDD0...) */ --t-light-1: #0E1220; /* equivalente a --t-dark-1 */ --t-light-2: #44495C; /* equivalente a --t-dark-2 */ --t-light-3: #6E7388; /* equivalente a --t-dark-3 */ --t-light-4: #8B92A8; /* meta tonal sutil sobre claro */ --void: #FAF7F2; /* "fondo base" sigue siendo el alias */ --void-2: #F2EDE3; --void-3: #E8E2D6; --void-4: #DCD4C4; --gold: #B8965A; /* gold un punto más profundo para contraste sobre claro */ --gold-light: #C9A86C; --gold-glow: rgba(184,150,90,0.20); --teal: #0E7C75; --teal-light: #1FCFC6; --line-light: rgba(14,18,32,0.10); --line-light-2:rgba(14,18,32,0.18); --line-dark: rgba(14,18,32,0.08); --off-white: #FAF7F2; --cream: #F2EDE3; --warm-gray: #E8E0D0; --text: #0E1220; --text-muted: #44495C; --text-light: #6E7388; --border: #E8E2D6; --accent: #1B4B3A; /* verde médico — refuerza confianza sanitaria */ --accent-light:#2A6B52; --accent-pale: #EBF2EE; --surface-page: #FAF7F2; --surface-elev: #FFFFFF; --surface-card: #FFFFFF; --hairline: #E8E2D6; --hairline-strong:#DDD4C2; --on-accent: #FFFFFF; --shadow-rest: 0 4px 14px rgba(14,18,32,.06); --shadow-elev: 0 16px 48px rgba(14,18,32,.10); --img-tint: none; --scheme: light; color-scheme: light; } /* Antes había una regla `:root[data-theme] body, nav, ... { transition: ... }` para animar el cambio de tema. Como el toggle ahora hace location.reload(), no hay transición que animar, y la regla añadía transiciones inesperadas a hover/focus en dark. Eliminada para que el dark quede idéntico al original. */ /* ─────────── BOOKING MODAL — siempre tema CLARO ────────── Decisión de diseño: el modal de reserva es el punto crítico de conversión. Mantener el tema claro sanitario aquí (verde + blanco) refuerza confianza sin importar el tema global. Anclado vía override de tokens dentro del scope. */ #modal-reserva{ --off-white: #FAF7F2; --cream: #F2EDE3; --warm-gray: #E8E0D0; --text: #0E1220; --text-muted: #44495C; --text-light: #6E7388; --border: #E8E2D6; --accent: #1B4B3A; --accent-light:#2A6B52; --accent-pale: #EBF2EE; --surface-page:#FAF7F2; --surface-elev:#FFFFFF; --surface-card:#FFFFFF; --hairline: #E8E2D6; --on-accent: #FFFFFF; color-scheme: light; } /* ─────────── CINEMATIC SHOWCASE — siempre tema OSCURO ───────── La sección .h-cinema tiene `background: #000` hardcoded + video con partículas gold superpuesto + gradients oscuros. Es un "frame cinematográfico" del diseño, intencionalmente fuera del flujo crema del resto del sitio. Aquí restauramos los tokens "sobre dark" originales para que el contenido siga siendo legible en cualquier theme global. Mismo patrón que #modal-reserva (anclado claro) pero invertido. */ .h-cinema{ --t-light-1: #F0F1F5; --t-light-2: #B8BDD0; --t-light-3: #8B92A8; --t-light-4: #5A6178; --text: #F0F1F5; --text-muted: #B8BDD0; --text-light: #8B92A8; color-scheme: dark; } /* En light theme, la regla global `section { background: var(--void) !important }` pisa el `background: #000` original de .h-cinema. Re-anclamos. */ :root[data-theme="light"] .h-cinema{ background: #000 !important; } /* ─────────── CTA BAND (.cta-band) FIX para LIGHT ────────── La sección `.cta-band` tiene gradient cream en ambos modos. - `.btn-fill-white`: bg blanco + `color: var(--void)` → en light queda crema sobre blanco (invisible). Forzamos texto oscuro literal. - `.btn-outline-white`: en dark tiene border blanco translúcido, en light desaparece sobre la cream. Le damos un estilo premium con borde verde marca y fill sutil para que case con el resto del sistema clínico. */ :root[data-theme="light"] .btn-fill-white{ color: #0E1220 !important; } :root[data-theme="light"] .btn-outline-white{ background: rgba(27,75,58,.05) !important; border-width: 2px !important; border-style: solid !important; border-color: var(--accent) !important; color: var(--accent) !important; font-weight: 500 !important; transition: background .2s ease, color .2s ease, border-color .2s ease; } :root[data-theme="light"] .btn-outline-white:hover{ background: var(--accent) !important; color: #FFFFFF !important; border-color: var(--accent) !important; } /* ─────────── BODY GLOBAL ─────────── */ body{ background: var(--void) !important; color: var(--text) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1, h2, h3, h4, h5, h6{color: var(--text)} p{color: var(--text-muted)} a:not(.h-btn):not(.nav-cta):not(.nav-tel):not(.fab-option):not(.bk-urgency-tel):not(.btn-primary):not(.btn-fill):not(.btn-fill-white):not(.btn-line):not(.btn-ghost):not(.svc-link):not(.h-svc-link){color: inherit} /* ─────────── BACKGROUNDS — overrides hardcoded ─────────── */ [style*="background: white"], [style*="background:white"], [style*="background: #FFF"], [style*="background:#FFF"]{background: var(--void-2) !important} /* ─────────── CONTAINER PADDING — confortable, no al filo ─────────── */ /* En subpáginas (blogs, tratamientos, contacto, etc.) el .container queda con 24px de padding que en algunas resoluciones queda demasiado al filo. Forzamos un padding lateral más generoso para que el texto y breadcrumbs respiren. */ .container{ padding-left: max(1.5rem, env(safe-area-inset-left, 1.5rem)) !important; padding-right: max(1.5rem, env(safe-area-inset-right, 1.5rem)) !important } @media (min-width: 768px){ .container{ padding-left: 2.5rem !important; padding-right: 2.5rem !important } } @media (min-width: 1280px){ .container{ padding-left: 3rem !important; padding-right: 3rem !important } } /* Breadcrumb — bug crítico: la regla genérica `nav{position:fixed}` de styles.css se aplicaba al