/* ============================================================
RVOLUCION — CAPA DE TEMA CLARO
Se activa con
NO modifica rvolucion.css — solo redefine variables y hace
overrides puntuales donde el diseño asume fondo oscuro.
Cargar DESPUÉS de rvolucion.css en el .
============================================================ */
/* ── 1. REDEFINICIÓN DE VARIABLES BASE ──
Al invertir estas, ~85% del sitio cambia solo porque usa var(). */
html[data-theme="light"] {
/* Paleta Kushim modo claro: Stone + Jade */
--ink: #E7E4DE; /* Stone — fondo principal */
--ink-2: #F5F3EF; /* Stone Light — superficie elevada */
--ink-3: #DEDAD2; /* superficie hundida */
--line: #D0CCC2; /* bordes */
/* Texto: Obsidian sobre Stone */
--white: #111315; /* texto principal (Obsidian) */
--gray: #5B6572; /* Slate — texto secundario */
--gray-dim: #8A8578; /* texto terciario cálido */
/* Jade se mantiene idéntico en ambos modos — contrasta bien sobre Stone */
--cyan: #00A886;
--cyan-deep: #00966F;
--fire: #00A886;
--fire-bright:#00966F;
--coral: #00A886;
--lime: #00A886;
/* Degradados Jade conservados */
}
/* ── 2. FONDO GLOBAL Y TEXTURAS ──
body::before es el grid; body::after es el viñeteado.
En claro, suavizamos el grid y quitamos el viñeteado oscuro. */
html[data-theme="light"] body::before {
/* En modo claro el grano se ve mejor con opacity más baja y blend multiply */
opacity: 0.2;
mix-blend-mode: multiply;
}
html[data-theme="light"] body::after {
background: radial-gradient(circle at 50% 0%, transparent 55%, rgba(230,235,244,0.6) 100%);
}
/* ── 3. NAV ── */
html[data-theme="light"] .nav {
background: rgba(247,248,251,0.72);
}
html[data-theme="light"] .nav.scrolled {
background: rgba(247,248,251,0.9);
border-bottom-color: var(--line);
}
/* ── 4. TRANSPARENCIAS "VIDRIO" ──
rgba(255,255,255,0.02/0.03) sobre oscuro creaba paneles sutiles.
Sobre claro son invisibles → las cambiamos a tinte oscuro sutil. */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .node,
html[data-theme="light"] .cf-input,
html[data-theme="light"] .cf-select,
html[data-theme="light"] .cf-textarea,
html[data-theme="light"] .ccard-tags span {
background: rgba(13,18,32,0.03);
}
/* Inputs del formulario: texto oscuro y placeholder legible */
html[data-theme="light"] .cf-input,
html[data-theme="light"] .cf-select,
html[data-theme="light"] .cf-textarea {
color: var(--white);
}
html[data-theme="light"] .cf-input::placeholder,
html[data-theme="light"] .cf-textarea::placeholder {
color: var(--gray-dim);
}
/* ── 5. GLOWS Y SOMBRAS ──
Las sombras negras intensas (rgba(0,0,0,0.5-0.6)) sobre claro
se ven pesadas → las aligeramos. */
html[data-theme="light"] .hero-panel {
background: linear-gradient(160deg, #ffffff, #eef1f6);
box-shadow: 0 30px 80px rgba(13,18,32,0.12);
}
html[data-theme="light"] .ccard,
html[data-theme="light"] .contact-card {
background: linear-gradient(160deg, #ffffff, #f2f5fa);
}
html[data-theme="light"] .ccard:hover {
box-shadow: 0 24px 60px rgba(13,18,32,0.12);
}
html[data-theme="light"] .plans-foot {
background: #ffffff;
}
html[data-theme="light"] .plan.feat {
background: linear-gradient(170deg, rgba(0,168,134,0.06), #ffffff);
}
/* ── 6. CELDAS DE INTEGRACIONES ──
Ya eran claras (#f4f6fa) — sobre fondo claro necesitan borde e
invertir texto placeholder. */
html[data-theme="light"] .integ-cell {
background: #ffffff;
border: 1px solid var(--line);
box-shadow: 0 2px 8px rgba(13,18,32,0.04);
}
html[data-theme="light"] .integ-cell:hover {
box-shadow: 0 12px 30px rgba(13,18,32,0.1), 0 0 26px rgba(0,168,134,0.12);
}
html[data-theme="light"] .integ-cell .ph {
color: #55607a;
}
/* ── 7. PLANES ── */
html[data-theme="light"] .plans-toggle .tg.active {
color: #ffffff;
}
html[data-theme="light"] .plan-badge {
color: #ffffff;
}
/* ── 8. FOOTER ──
El footer usa #06080d hardcodeado (línea 1561) y glows.
Lo pasamos a superficie oscura suave para contraste, o claro:
optamos por mantenerlo OSCURO como pie de página de contraste. */
html[data-theme="light"] footer {
background: #0b0e16;
color: #f3f6fb;
}
html[data-theme="light"] footer .footer-col h4,
html[data-theme="light"] footer .footer-brand-col p,
html[data-theme="light"] footer .footer-col a,
html[data-theme="light"] footer .contact-line,
html[data-theme="light"] footer .footer-copy,
html[data-theme="light"] footer .footer-legal a,
html[data-theme="light"] footer .footer-made {
color: #a1a9bd;
}
html[data-theme="light"] footer .footer-logo-text {
color: #f3f6fb;
}
/* ── 9. MODALES Y OVERLAYS OSCUROS ──
El overlay del modal usa rgba(0,0,0,0.5) → en claro lo suavizamos. */
html[data-theme="light"] .modal-overlay {
background: rgba(13,18,32,0.45);
}
/* ── 10. MARQUEE / SEPARADORES ──
Las líneas divisorias con rgba blanco se ajustan. */
html[data-theme="light"] .marquee {
border-color: var(--line);
}
/* ── 11. INTERRUPTOR (toggle) ── */
.theme-toggle {
width: 44px;
height: 24px;
border-radius: 50px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
position: relative;
cursor: pointer;
flex-shrink: 0;
transition: background 0.3s, border-color 0.3s;
margin-left: 0.5rem;
}
.theme-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--fire);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s;
}
.theme-toggle-knob svg {
width: 11px;
height: 11px;
stroke: #fff;
fill: none;
stroke-width: 2;
}
html[data-theme="light"] .theme-toggle-knob {
transform: translateX(20px);
background: var(--cyan);
}
/* Iconos: mostramos luna en oscuro, sol en claro */
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
html[data-theme="light"] .theme-toggle .ic-sun { display: block; }
html[data-theme="light"] .theme-toggle .ic-moon { display: none; }
/* Transición global suave al cambiar de tema */
body, .nav, .hero-panel, .ccard, .contact-card, .plan, .integ-cell,
.cf-input, .node, footer {
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
/* ============================================================
FIXES v2 — 3 ajustes pendientes
============================================================ */
/* ── FIX 1: LOGO NAV — cambiar a versión oscura en modo claro ──
El ![]()
con clase nav-logo-img se oculta y se usa un content
CSS para mostrar logov2.png mediante un elemento hermano oculto.
Como el HTML ya tiene el src fijo, la forma más limpia sin editar
nav.php es usar filter para invertir el logo claro a oscuro,
o pedir que se agregue un ![]()
alternativo.
Usamos la solución CSS pura: filter que invierte el logo blanco
a versión oscura + content override si logov2 existe. */
/* Solución sin tocar nav.php: */
html[data-theme="light"] .nav-logo-img {
content: url('../imagenes/logov2.png');
}
html[data-theme="light"] .megamenu-logo {
content: url('../imagenes/logov2.png');
}
/* ── FIX 2: SECCIÓN MANIFIESTO ──
El overlay usa rgba(6,8,13,…) que en claro sigue siendo oscuro
(correcto para leer sobre el video). Pero los contenedores
.mf-era deben verse claros. */
/* Overlay: en modo claro lo aclaramos para ver el video
pero mantener legibilidad */
html[data-theme="light"] .manifesto {
background:
radial-gradient(circle at 50% 0%, rgba(0,168,134,0.06), transparent 55%),
var(--ink-2);
}
html[data-theme="light"] .manifesto-overlay {
background:
radial-gradient(circle at 50% 40%, rgba(247,248,251,0.55), rgba(247,248,251,0.80) 80%),
linear-gradient(180deg, var(--ink-2) 0%, transparent 18%, transparent 82%, var(--ink-2) 100%);
}
html[data-theme="light"] .manifesto-watermark {
-webkit-text-stroke: 1px rgba(13,18,32,0.05);
}
/* Contenedores de era (Revolución Industrial / Inteligente) */
html[data-theme="light"] .mf-era {
background: rgba(255,255,255,0.85);
border: 1px solid var(--line);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .mf-era h3 {
color: var(--white); /* var(--white) ya fue redefinido a #0d1220 en modo claro */
}
html[data-theme="light"] .mf-era p {
color: var(--gray);
}
/* Tags de era (AYER · ~1800 / HOY · LA NUEVA ERA) */
html[data-theme="light"] .mf-era-tag {
color: var(--gray-dim);
}
html[data-theme="light"] .mf-era.now {
background: rgba(255,255,255,0.92);
border-color: var(--cyan);
}
/* Bloque de cierre del manifiesto */
html[data-theme="light"] .mf-close .q,
html[data-theme="light"] .mf-declaration .mf-line {
color: var(--white);
}
html[data-theme="light"] .mf-declaration .mf-line.dim {
color: var(--gray);
}
/* ── FIX 3: MEGAMENÚ — fondo claro, texto oscuro ── */
html[data-theme="light"] .megamenu-bg {
background:
radial-gradient(circle at 80% 20%, rgba(0,168,134,0.06), transparent 55%),
radial-gradient(circle at 20% 90%, rgba(0,168,134,0.06), transparent 55%),
rgba(247,248,251,0.98);
}
/* Botón cerrar X */
html[data-theme="light"] .megamenu-close {
border-color: rgba(13,18,32,0.15);
background: rgba(13,18,32,0.04);
color: var(--white); /* #0d1220 en claro */
}
html[data-theme="light"] .megamenu-close svg {
stroke: #0d1220;
}
html[data-theme="light"] .megamenu-close:hover {
border-color: var(--fire);
background: rgba(0,168,134,0.08);
}
/* Palabras de navegación */
html[data-theme="light"] .mm-word {
color: #0d1220;
}
html[data-theme="light"] .mm-desc {
color: var(--gray);
}
/* Hover: el gradiente fuego→cyan funciona igual en claro */
html[data-theme="light"] .megamenu-item:hover .mm-word {
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Separador del footer del megamenú */
html[data-theme="light"] .megamenu-foot {
border-top-color: rgba(13,18,32,0.1);
}
html[data-theme="light"] .mm-foot-item,
html[data-theme="light"] .mm-foot-sep {
color: var(--gray);
}
/* ============================================================
FIX v3 — Hero brutalista en modo claro
============================================================ */
/* El hero v2 (brutalista) invierte a blanco: título negro,
grid oscuro sutil, outline gris. El fondo usa var(--ink) que
ya se redefine claro arriba, así que casi todo cae solo. */
/* Grid: líneas oscuras muy sutiles sobre blanco */
html[data-theme="light"] .gt-grid {
background-image:
linear-gradient(rgba(13,18,32,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,18,32,0.04) 1px, transparent 1px);
}
/* Título: fill negro, outline gris medio */
html[data-theme="light"] .gt-l1,
html[data-theme="light"] .gt-fill { color: var(--white); }
html[data-theme="light"] .gt-out {
-webkit-text-stroke: 2px #b8bfce;
}
/* Botón ghost: borde e hover oscuros sobre blanco */
html[data-theme="light"] .gt-btn { border-color: #0d1220; color: #0d1220; }
html[data-theme="light"] .gt-btn-main { border-color: var(--fire); color: #fff; }
html[data-theme="light"] .gt-btn-ghost:hover { background: #0d1220; color: #fff; }
html[data-theme="light"] .gt-btn-ghost { border-left: none; }
/* Metadata y eyebrow un poco más oscuros para contraste */
html[data-theme="light"] .gt-meta,
html[data-theme="light"] .gt-eyebrow { color: #55607a; }
/* Logos tech: en claro no invertir a grayscale tan fuerte */
html[data-theme="light"] .hero-tech-logos img { opacity: 0.7; }
/* Oro del manifiesto en modo claro — más oscuro para contraste sobre Stone */
html[data-theme="light"] .mf-line.dim { color: #A8842E; }
/* Logo de Metodología en modo claro → versión texto oscuro */
html[data-theme="light"] .metodo-logo-img {
content: url('../imagenes/logov2.png');
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
}