/* ========================================================================== PRECISO · Tema oscuro Se activa con data-theme="dark" en . Redefine los tokens de superficie y texto; el resto del sistema no se toca. Lo que sí necesita excepción son las piezas que dan por hecho un fondo claro (cápsulas de logotipo, tintes de datos, subrayado de marca). ========================================================================== */ :root[data-theme="dark"] { /* --- Superficies (antes claras) -------------------------------------- */ --paper: #0B111C; --paper-warm: #12141C; /* Equivalente oscuro del crema */ --paper-soft: #101826; --paper-blue: #0E1A2E; /* El azul de separación, invertido */ --rule: rgba(255, 255, 255, .10); --rule-strong: rgba(255, 255, 255, .22); /* --- Superficies de acento (las secciones .on-dark) ------------------- En claro eran las bandas oscuras. Aquí pasan a ser el nivel MÁS profundo, para que sigan leyéndose como un cambio de plano. */ --ink: #05080F; --ink-deep: #03060B; --ink-raised: #101826; /* --- Texto ------------------------------------------------------------ */ --on-light: #FFFFFF; --on-light-soft: #BAC4D6; /* 9,6:1 sobre --paper */ --on-light-faint: #8895AC; /* 5,3:1 sobre --paper */ /* --- Marca ------------------------------------------------------------ */ --brand-soft: #2A2411; /* Tinte ámbar oscuro para fondos y halos */ --brand-deep: #FFE58A; /* La versión legible pasa a ser la clara */ /* --- Datos ------------------------------------------------------------ */ --abs-soft: #0A2620; --abs-ink: #4BE0B4; --pre-soft: #2A130D; --pre-ink: #FF9A80; /* --- Elevación -------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-card: 0 20px 44px -28px rgba(0, 0, 0, .8); --shadow-lift: 0 34px 68px -28px rgba(0, 0, 0, .9); --focus-ring: 3px solid var(--brand); } /* ========================================================================== Excepciones ========================================================================== */ /* El subrayado amarillo dejaría texto blanco sobre amarillo. Sobre oscuro el resalte funciona mejor como color de texto. */ :root[data-theme="dark"] .hl { background-image: none; color: var(--brand); } /* Los logotipos de terceros son artes oscuras sobre fondo claro: la cápsula se queda blanca en los dos temas. */ :root[data-theme="dark"] .logo-chip { background: #FFFFFF; border-color: rgba(255, 255, 255, .14); } :root[data-theme="dark"] .logo-chip:hover { border-color: rgba(255, 255, 255, .35); } /* La cabecera translúcida debe teñir de oscuro, no de blanco. */ :root[data-theme="dark"] .header { background: rgba(11, 17, 28, .82); } :root[data-theme="dark"] .nav { background: var(--paper); } /* Las bandas de confianza y el pie comparten fondo con la página. */ :root[data-theme="dark"] .trust { background: var(--paper); } :root[data-theme="dark"] .footer { background: var(--ink); border-top: 1px solid var(--rule); } /* El botón fantasma sobre fondo oscuro necesita borde y texto claros. */ :root[data-theme="dark"] .btn--ghost { color: var(--on-light); border-color: var(--rule-strong); } :root[data-theme="dark"] .btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--on-light); } /* El degradado del hero se apaga para no convertirse en un foco. */ :root[data-theme="dark"] .hero { background: radial-gradient(60rem 32rem at 88% -10%, rgba(251, 212, 90, .10), transparent 62%), linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%); } /* La tarjeta de valor destacada pierde el degradado crema. */ :root[data-theme="dark"] .value__major--euros { background: linear-gradient(150deg, rgba(251, 212, 90, .14), var(--paper) 70%); border-color: rgba(251, 212, 90, .45); } :root[data-theme="dark"] .value__major--foco { background: linear-gradient(150deg, var(--paper-soft), var(--paper) 70%); } /* Número de paso de la metodología: círculo ámbar apagado con cifra clara. */ :root[data-theme="dark"] .method__index { background: var(--brand-soft); border-color: rgba(251, 212, 90, .55); color: var(--brand); } /* La sección de cierre ya era la más oscura; se separa con un filete. */ :root[data-theme="dark"] .closing { border-top: 1px solid var(--rule); } /* En la llamada intermedia el fondo ámbar ya es oscuro, así que el botón recupera el amarillo de marca en lugar del oscuro. */ :root[data-theme="dark"] .cta-strip { border-color: rgba(251, 212, 90, .45); } :root[data-theme="dark"] .cta-strip .btn--ink { background: var(--brand); color: var(--on-brand); } :root[data-theme="dark"] .cta-strip .btn--ink:hover { background: var(--brand-bright); }