/* ============================================================ MBI — CAPA "NOCHE" PARA PÁGINAS INTERIORES Lleva el lenguaje visual del Home (index.html, body.home-final) al resto del sitio, que hasta ahora era negro plano y cansador: · Descenso continuo de la noche al hacer scroll (negro cálido → azul noche #0C121C → slate #1B2432) · Hero superior igual al Home (hero-noche.jpg + crepúsculo ámbar) · Texto naranjo (.text-orange) usa el naranjo de marca #FF832A, igual que en todo el resto del sitio — sin override a ámbar · Foto de edificios (amanecer.jpg) + velo en el CTA final Se carga DESPUÉS del CSS propio de cada página y SOLO actúa bajo . NO toca el Home, ni el header/sidebar/ footer, ni la estructura o el contenido de las páginas. ============================================================ */ .mbi-night { /* mismas variables que el Home (home-final) */ --cr-amber: #FFB86B; --cr-amber-deep: #FF9D42; --cr-cream: #F5E9D8; --cr-muted-warm: #C9BBA6; --fn-noche: #0C121C; /* azul noche */ --fn-slate: #1B2432; /* slate */ --cr-glass: rgba(255, 189, 120, 0.07); --cr-glass-border: rgba(255, 178, 107, 0.22); --cr-glass-hover: rgba(255, 178, 107, 0.40); } /* ============================================================ 1 · FONDOS POR BLOQUE — como en el Home, cada sección tiene su propio fondo y la página desciende la noche al hacer scroll: sección 2 NEGRO cálido + glow ámbar (como Cifras) sección 3 AZUL NOCHE + glow superior (como Tarjetas menú) secciones 4,6,8… SLATE + glow inferior (como Research) secciones 5,7,9… AZUL NOCHE (alterna de vuelta) .final-cta FOTO amanecer (regla propia, más abajo) La asignación es por posición (nth-of-type) porque cada página tiene distinto número de secciones. Los glows van como capas del background (no pseudo-elementos) para no pisar ningún ::before/::after existente. Tarjetas y paneles internos conservan su propio fondo. ============================================================ */ body.mbi-night { background: #000; } /* Sección 2 — negro cálido con resplandor ámbar superior (Cifras del Home) */ .mbi-night main > section:nth-of-type(2) { background: radial-gradient(ellipse 75% 55% at 50% 0%, rgba(255, 157, 66, 0.07) 0%, transparent 65%) #000 !important; } /* Sección 3 — azul noche con glow naranjo superior (Tarjetas menú del Home) */ .mbi-night main > section:nth-of-type(3):not(.final-cta) { background: radial-gradient(ellipse 65% 320px at 50% 0%, rgba(255, 131, 42, 0.09) 0%, transparent 65%) var(--fn-noche) !important; } /* Secciones 4, 6, 8… — slate con resplandor naranjo inferior (Research) */ .mbi-night main > section:nth-of-type(2n+4):not(.final-cta) { background: radial-gradient(ellipse 65% 320px at 50% 100%, rgba(255, 131, 42, 0.12) 0%, transparent 65%) var(--fn-slate) !important; } /* Secciones 5, 7, 9… — de vuelta al azul noche: el ritmo noche/slate mantiene la página viva sin salirse de la familia fría del Home */ .mbi-night main > section:nth-of-type(2n+5):not(.final-cta) { background: radial-gradient(ellipse 65% 320px at 50% 0%, rgba(255, 131, 42, 0.07) 0%, transparent 65%) var(--fn-noche) !important; } /* Página de UNA sola banda de contenido (hero + contenido + CTA: glosario, aprendizaje, artículos de academia): la banda única hace el descenso completo dentro de sí misma, negro → noche → slate */ .mbi-night main > section:nth-of-type(2):nth-last-of-type(2) { background: radial-gradient(ellipse 75% 480px at 50% 0%, rgba(255, 157, 66, 0.06) 0%, transparent 65%), linear-gradient(180deg, #000000 0%, #05070d 22%, var(--fn-noche) 55%, var(--fn-slate) 100%) !important; } /* ============================================================ 2 · HERO — mismo cielo nocturno del Home + crepúsculo cálido ============================================================ */ .mbi-night .page-hero-bg { background-image: url('../img/hero-noche-1800.jpg'); background-image: image-set( url('../img/hero-noche-1800.avif') type('image/avif'), url('../img/hero-noche-1800.webp') type('image/webp'), url('../img/hero-noche-1800.jpg') type('image/jpeg')); background-position: center 80%; } .mbi-night .page-hero-overlay { background: linear-gradient(to bottom, rgba(5, 4, 2, 0.82) 0%, rgba(12, 9, 5, 0.40) 50%, rgba(20, 12, 5, 0.60) 78%, rgba(6, 5, 2, 0.94) 100%); } .mbi-night .page-hero .hero-kicker, .mbi-night .page-hero-sub { color: var(--cr-muted-warm); } /* ============================================================ 4 · CTA FINAL — foto del amanecer (edificios) + velo, igual que el Home (el velo radial oscurece solo el bolsillo del texto; ver home-final). ============================================================ */ .mbi-night .final-cta { background-color: #000 !important; position: relative; overflow: hidden; } .mbi-night .final-cta::before { content: ''; position: absolute; inset: 0; width: auto; height: auto; z-index: 0; background-image: radial-gradient(ellipse 78% 85% at 50% 42%, rgba(3, 3, 3, 0.72) 0%, rgba(3, 3, 3, 0.38) 60%, rgba(3, 3, 3, 0) 88%), linear-gradient(to bottom, rgba(3, 3, 3, 0.40) 0%, rgba(3, 3, 3, 0.28) 35%, rgba(3, 3, 3, 0.55) 65%, rgba(3, 3, 3, 0.93) 100%), url('../img/amanecer-1600.jpg'); background-image: radial-gradient(ellipse 78% 85% at 50% 42%, rgba(3, 3, 3, 0.72) 0%, rgba(3, 3, 3, 0.38) 60%, rgba(3, 3, 3, 0) 88%), linear-gradient(to bottom, rgba(3, 3, 3, 0.40) 0%, rgba(3, 3, 3, 0.28) 35%, rgba(3, 3, 3, 0.55) 65%, rgba(3, 3, 3, 0.93) 100%), image-set(url('../img/amanecer-1600.avif') type('image/avif'), url('../img/amanecer-1600.webp') type('image/webp'), url('../img/amanecer-1600.jpg') type('image/jpeg')); background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; } .mbi-night .final-cta > .container { position: relative; z-index: 1; } .mbi-night .final-cta-sub, .mbi-night .account-cta { color: #D8D2C6; } .mbi-night .account-cta a { color: var(--cr-amber); } .mbi-night .account-cta a:hover { color: var(--cr-amber-deep); } /* ============================================================ VISTA DE CONTACTO (2 COLUMNAS / SPLIT CARD) ============================================================ */ .contact-card-wrap { background: rgba(12, 18, 28, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65); overflow: hidden; } .contact-info-col { background: linear-gradient(180deg, rgba(18, 24, 36, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%); padding: 3rem 2.5rem; position: relative; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255, 255, 255, 0.08); } .contact-photo-box { border-radius: 16px; overflow: hidden; margin-bottom: 2rem; border: 1px solid rgba(255, 255, 255, 0.12); position: relative; max-height: 220px; } .contact-photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; } .contact-icon-badge { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 131, 42, 0.12); border: 1px solid rgba(255, 131, 42, 0.25); color: var(--mbi-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-form-col { padding: 3rem 2.5rem; } .contact-form-col .form-control, .contact-form-col .form-select { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #fff !important; border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.92rem; transition: all 0.3s ease; } .contact-form-col .form-control:focus, .contact-form-col .form-select:focus { background-color: rgba(255, 255, 255, 0.08) !important; border-color: var(--mbi-orange) !important; box-shadow: 0 0 0 0.25rem rgba(255, 131, 42, 0.25) !important; color: #fff !important; } .contact-form-col label { font-size: 0.88rem; font-weight: 500; color: #e2e8f0; margin-bottom: 0.4rem; } @media (max-width: 991px) { .contact-info-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 2rem 1.5rem; } .contact-form-col { padding: 2rem 1.5rem; } }