/* ============================================================ MBI HOME — VERSIÓN FINAL Composición elegida por el usuario a partir de las 3 variantes exploratorias. Se carga DESPUÉS de style-home.css y solo actúa bajo . La página desciende la noche sin salirse nunca de lo oscuro — una progresión gradual que se aclara hacia el CTA: Hero NEGRO cálido crepúsculo (foto noche + overlay ámbar) Cifras NEGRO crepúsculo (glow ámbar) Cómo empezar NEGRO crepúsculo (wash cálido) + video ── hasta aquí, la mitad superior aprobada tal cual ── Tarjetas menú #0C121C azul noche (del light: sección AUM) Research #1B2432 slate (del light: "Empieza en minutos") Confianza #1B2432 slate (continúa con sus vecinas) API #1B2432 slate CTA final FOTO amanecer.jpg (de la variante fotográfico) + cursor "_" parpadeante (de terminal) Footer sin cambios Autocontenida a propósito: NO depende de style-home-crepusculo.css (esa carpeta se elimina). El bloque 1-3 de abajo es el crepúsculo original, copiado aquí íntegro. El HEADER no se toca: no se sobreescribe .main-header, .sidebar-*, .btn-orange ni .btn-outline-orange en ningún selector. ============================================================ */ .home-final { /* Paleta cálida del crepúsculo (mitad superior) */ --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.4); --cr-amber: #FFB86B; --cr-amber-deep: #FF9D42; --cr-cream: #F5E9D8; --cr-muted-warm: #C9BBA6; /* Progresión fría de la mitad inferior (tomada del light) */ --fn-noche: #0C121C; /* azul noche — tarjetas menú */ --fn-slate: #1B2432; /* slate — research / confianza / API */ } /* ============================================================ 1 · HERO — crepúsculo (sin cambios) ============================================================ */ .home-final .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%; } .home-final .hero-overlay { background: linear-gradient(to bottom, rgba(5, 4, 2, 0.82) 0%, rgba(10, 7, 4, 0.35) 45%, rgba(20, 12, 5, 0.55) 75%, rgba(8, 5, 2, 0.92) 100%); } .home-final .hero-kicker { color: var(--cr-muted-warm); } .home-final .hero-subtitle { color: var(--cr-muted-warm); } /* Cursor de terminal, igual que el CTA final: "Invertir / con criterio_". Va en el span (no en el

) porque .hero-title span es display:block — si el ::after fuera del

el "_" caería en una línea nueva en vez de pegarse al final de "criterio". Reusa @keyframes fn-cursor (final-cta). / .home-final .hero-title .text-orange::after { content: '_'; color: var(--cr-amber); animation: fn-cursor 1.1s step-end infinite; } @media (prefers-reduced-motion: reduce) { .home-final .hero-title .text-orange::after { animation: none; opacity: 1; } } / ============================================================ 2 · CIFRAS — crepúsculo (sin cambios) ============================================================ / .home-final .key-figures::before { background: radial-gradient(ellipse at center, rgba(255, 184, 107, 0.16) 0%, transparent 70%); } .home-final .stat-cell::before { background: var(--cr-amber); } .home-final .stat-cell p { color: var(--cr-muted-warm); } / ============================================================ 3 · CÓMO EMPEZAR + VIDEO — crepúsculo (sin cambios) ============================================================ / .home-final .how-to-start { background: radial-gradient(ellipse 70% 50% at 15% 100%, rgba(255, 157, 66, 0.09) 0%, transparent 70%), var(--mbi-dark); } .home-final .step-text p { color: var(--cr-muted-warm); } / --- Demo en video de la app · vertical 1080×2338 (9:19.5) --- El video ya trae el mock de iPhone sobre fondo negro, así que el marco no dibuja un teléfono: solo redondea, recorta y aporta el halo ámbar para que el negro del video no corte en seco contra el fondo cálido. / .home-final .app-demo { margin: 4.5rem auto 0; / más ancho que el video: si no, el caption se parte en "…en menos de / 2 minutos" / max-width: min(460px, 88vw); display: flex; flex-direction: column; align-items: center; gap: 1.6rem; } .home-final .app-demo-caption { margin: 0; text-align: center; text-wrap: balance; color: var(--cr-muted-warm); font-weight: 300; font-size: 0.95rem; } .home-final .app-demo-frame { position: relative; width: min(170px, 46vw); border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--cr-glass-border); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 70px rgba(255, 157, 66, 0.13); cursor: pointer; } .home-final .app-demo-video { display: block; width: 100%; height: auto; / reserva el alto desde el primer paint: sin CLS aunque el mp4 aún no cargue. Hasta el clic el