/* NLT Funding -- fondo de la sección #nlt-funding: orbes de luz azul eléctrico y morado que recorren TODA la pantalla mientras se hace scroll + textura granulada.
El efecto vive SOLO dentro de #nlt-funding (position: relative + overflow recortado + isolation): no toca el body ni el resto de la página.
Los orbes van en una capa pegajosa (sticky) del alto de la ventana: se quedan detrás del contenido y viajan por toda la página mientras se baja. */
#nlt-funding {
position: relative;
isolation: isolate; /* su propio contexto de apilamiento: nada se escapa */
min-height: 100vh;
background: radial-gradient(120% 70% at 50% 0%, #11226b 0%, #0a1442 45%, #070d2e 100%); /* azul marino, no negro */
overflow: hidden;
}
@supports (overflow: clip) { #nlt-funding { overflow: clip; } } /* recorta igual, pero no crea un contenedor de scroll: así la capa de orbes puede ser sticky */
/* ── Capa de orbes: del alto de la ventana, pegada arriba mientras se hace scroll, sin ocupar espacio ── */
#nlt-funding .nlt-fondo {
position: sticky; top: 0;
height: 100vh; height: 100svh;
margin-bottom: -100vh; margin-bottom: -100svh;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
/* ── Orbes de luz ── */
#nlt-funding .nlt-orbe { position: absolute; border-radius: 50%; will-change: transform; pointer-events: none; }
/* anillo de humo azul (la forma grande de la referencia): centro más oscuro y borde luminoso */
#nlt-funding .nlt-orbe--anillo {
width: 85vmax; height: 70vmax; left: -22vmax; top: -18vmax;
background: radial-gradient(closest-side, rgba(7, 13, 46, .0) 28%, rgba(36, 62, 255, .95) 52%, rgba(30, 52, 235, .55) 70%, transparent 100%);
filter: blur(36px); opacity: .95;
animation: nlt-viaja-1 38s ease-in-out infinite alternate;
}
#nlt-funding .nlt-orbe--azul {
width: 60vmax; height: 60vmax; right: -20vmax; top: 10vh;
background: radial-gradient(circle at 40% 40%, #2f6bff 0%, #1d3bd8 42%, transparent 72%);
filter: blur(70px); opacity: .85;
animation: nlt-viaja-2 44s ease-in-out infinite alternate;
}
#nlt-funding .nlt-orbe--morado {
width: 52vmax; height: 52vmax; left: 10vw; bottom: -26vmax;
background: radial-gradient(circle at 60% 40%, #9b4dff 0%, #5b25d6 46%, transparent 72%);
filter: blur(80px); opacity: .7;
animation: nlt-viaja-3 50s ease-in-out infinite alternate;
}
#nlt-funding .nlt-orbe--cian {
width: 34vmax; height: 34vmax; right: 8vw; bottom: -6vmax;
background: radial-gradient(circle, #3ad1ff 0%, #2a7bff 45%, transparent 72%);
filter: blur(60px); opacity: .5;
animation: nlt-viaja-4 32s ease-in-out infinite alternate;
}
/* cada orbe recorre la pantalla entera (de una esquina a la otra) respirando y girando despacio */
@keyframes nlt-viaja-1 {
0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
33% { transform: translate3d(38vw, 30vh, 0) rotate(40deg) scale(1.12); }
66% { transform: translate3d(12vw, 62vh, 0) rotate(95deg) scale(.92); }
100% { transform: translate3d(58vw, 18vh, 0) rotate(160deg) scale(1.08); }
}
@keyframes nlt-viaja-2 {
0% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(-48vw, 22vh, 0) scale(1.18); }
66% { transform: translate3d(-22vw, 58vh, 0) scale(.9); }
100% { transform: translate3d(-60vw, -4vh, 0) scale(1.1); }
}
@keyframes nlt-viaja-3 {
0% { transform: translate3d(0, 0, 0) scale(1.05); }
33% { transform: translate3d(52vw, -34vh, 0) scale(.9); }
66% { transform: translate3d(70vw, -64vh, 0) scale(1.2); }
100% { transform: translate3d(24vw, -48vh, 0) scale(1); }
}
@keyframes nlt-viaja-4 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-56vw, -52vh, 0) scale(1.25); }
100% { transform: translate3d(-26vw, -70vh, 0) scale(.9); }
}
/* ── Textura granulada: ruido SVG (feTurbulence + feColorMatrix) sobre todo el fondo ── */
#nlt-funding::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .3;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 300px;
}
/* ── Contenido: siempre por encima del fondo y del grano ── */
#nlt-funding .nlt-contenido { position: relative; z-index: 2; }
/* Pantallas táctiles: sin desenfoque pesado (los degradados ya son suaves); el movimiento sigue siendo solo transform */
@media (hover: none), (pointer: coarse) {
#nlt-funding .nlt-orbe { filter: none; }
#nlt-funding::before { opacity: .26; }
}
@media (prefers-reduced-motion: reduce) { #nlt-funding .nlt-orbe { animation: none; } }
body.fd-quieto #nlt-funding .nlt-orbe { animation: none; }
/* ── Legibilidad: sobre un fondo brillante los textos grises y el vidrio transparente se perdían. Aquí los textos son más claros y las tarjetas más sólidas ── */
#nlt-funding { --fx-mute: #DCE4F7; --fx-dim: #C6D1EC; --fx-line: rgba(255, 255, 255, .16); }
#nlt-funding .fx-card { background: linear-gradient(180deg, rgba(10, 16, 46, .84), rgba(7, 11, 34, .92)); border-color: rgba(255, 255, 255, .13); }
#nlt-funding .fx-card.flat { background: rgba(8, 13, 40, .76); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .13); }
#nlt-funding .fx-strip > div { background: rgba(8, 13, 40, .8); }
#nlt-funding .fd-card, #nlt-funding .fd-nav { background: linear-gradient(180deg, rgba(10, 16, 46, .86), rgba(7, 11, 34, .93)); border-color: rgba(255, 255, 255, .13); }
#nlt-funding .fx-lead, #nlt-funding .fx-muted { color: #DCE4F7; }
#nlt-funding .fx-disc, #nlt-funding .fx-dim, #nlt-funding footer { color: #CBD6EF; }
/* ── Capas vivas (assets/js/nlt-fondo.js): partículas de luz que se funden, su luz sobre el contenido y el grano animado ── */
#nlt-funding.nlt-js .nlt-orbe { display: none; } /* el JS reemplaza a los orbes de CSS */
/* grano del FONDO: pegado a la ventana, animado, DEBAJO del contenido (más marcado); el de encima es mucho más suave para no ensuciar los textos */
#nlt-funding.nlt-js::before { position: sticky; top: 0; inset: auto; width: 100%; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; opacity: .34; animation: nlt-grano .9s steps(1) infinite; }
#nlt-funding .nlt-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; filter: blur(8px); transform: scale(1.04); }
/* la luz roza el contenido: la misma imagen, por encima, en mezcla suave */
#nlt-funding .nlt-luz { position: fixed; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; opacity: .2; filter: blur(10px); }
/* grano animado por encima de todo: cambia de posición ~8 veces por segundo (como el grano de película) */
#nlt-funding .nlt-grano {
position: fixed; z-index: 4; pointer-events: none; mix-blend-mode: overlay; opacity: .09;
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 300px;
animation: nlt-grano .9s steps(1) infinite;
}
@keyframes nlt-grano {
0% { background-position: 0 0; } 12% { background-position: -70px 40px; } 25% { background-position: 120px -90px; } 37% { background-position: -150px -30px; }
50% { background-position: 60px 110px; } 62% { background-position: -40px -130px; } 75% { background-position: 140px 70px; } 87% { background-position: -100px 150px; }
}
@media (hover: none), (pointer: coarse) { #nlt-funding .nlt-lienzo, #nlt-funding .nlt-luz { filter: none; } #nlt-funding .nlt-grano { animation-duration: 1.4s; opacity: .07; } #nlt-funding.nlt-js::before { opacity: .28; animation-duration: 1.4s; } }
@media (prefers-reduced-motion: reduce) { #nlt-funding .nlt-grano, #nlt-funding.nlt-js::before { animation: none; } }
body.fd-quieto #nlt-funding .nlt-grano, body.fd-quieto #nlt-funding.nlt-js::before { animation: none; }
/* ── Legibilidad garantizada en cualquier página o tarjeta ──
1) Un velo azul marino sobre las partículas: aunque pase la luz más brillante por detrás, el blanco de los textos mantiene contraste AA.
2) El pie de página (sus estilos inline eran grises) se lee sobre una banda sólida.
3) Una sombra fina rodea los textos sueltos (fuera de tarjetas), excepto los de degradado. */
#nlt-funding .nlt-fondo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(4, 8, 30, .26), rgba(4, 8, 30, .34)); pointer-events: none; }
#nlt-funding footer { background: rgba(5, 9, 32, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#nlt-funding footer, #nlt-funding footer a, #nlt-funding footer p, #nlt-funding footer span, #nlt-funding footer div { color: #D3DCF2 !important; }
#nlt-funding :is(h1, h2, p, li, small, label, a, span, b, em):not(.fx-grad):not(.fx-grad *) { text-shadow: 0 1px 3px rgba(3, 6, 28, .5); }
#nlt-funding :is(.fx-btn, .fx-badge, .fx-size, .fx-seg button, .fx-input, .fx-select, code) { text-shadow: none; }
#nlt-funding .fx-seg { background: rgba(6, 10, 32, .84); border: 1px solid rgba(255, 255, 255, .12); }
#nlt-funding .fx-seg button.on { background: rgba(var(--fx-em-rgb), .2); }
/* ── Superficies sólidas: todo lo que lleva texto va sobre un fondo oscuro propio (nada translúcido sobre la luz) ── */
#nlt-funding { --fx-ok: #4ADE80; --fx-bad: #FF7B7B; --fx-warn: #FBBF24; }
#nlt-funding .fd-item { background: rgba(7, 12, 38, .88); border-color: rgba(255, 255, 255, .14); }
#nlt-funding .fd-item.on { background: linear-gradient(rgba(var(--fx-em-rgb), .1), rgba(var(--fx-em-rgb), .1)), rgba(7, 12, 38, .92); }
#nlt-funding .fd-hola { background: radial-gradient(120% 90% at 100% 0%, rgba(var(--fx-em-rgb), .12), transparent 60%), rgba(7, 12, 38, .9); border-color: rgba(255, 255, 255, .14); }
#nlt-funding .fx-select, #nlt-funding .fx-input { background: rgba(6, 10, 32, .9); color: #fff; border-color: rgba(255, 255, 255, .18); }
#nlt-funding a.fd-comprar { color: #04130D; text-shadow: none; } /* `.fx a { color: inherit }` le quitaba el texto oscuro sobre el verde */
#nlt-funding .fd-cta { background: linear-gradient(120deg, rgba(var(--fx-em-rgb), .16), rgba(59, 130, 246, .22)), rgba(7, 12, 38, .92); }
#nlt-funding .fx-badge { background-color: rgba(7, 12, 38, .8); }
#nlt-funding .fx-badge.ok { color: #6EE7A0; } #nlt-funding .fx-badge.bad { color: #FF9B9B; } #nlt-funding .fx-badge.info { color: #A9C4FF; } #nlt-funding .fx-badge.warn { color: #FCD34D; } #nlt-funding .fx-badge.em { color: #5BFF3C; }
#nlt-funding .fx-banner { background: rgba(7, 12, 38, .9) !important; }
#nlt-funding .fx-banner.ok { background: linear-gradient(rgba(var(--fx-em-rgb), .12), rgba(var(--fx-em-rgb), .12)), rgba(7, 12, 38, .9) !important; }
#nlt-funding .fx-banner.bad { background: linear-gradient(rgba(239, 68, 68, .14), rgba(239, 68, 68, .14)), rgba(7, 12, 38, .9) !important; }
#nlt-funding .fx-banner.info { background: linear-gradient(rgba(67, 120, 255, .16), rgba(67, 120, 255, .16)), rgba(7, 12, 38, .9) !important; }
#nlt-funding .fx-banner.warn { background: linear-gradient(rgba(250, 204, 21, .12), rgba(250, 204, 21, .12)), rgba(7, 12, 38, .9) !important; }
#nlt-funding .fx-banner p, #nlt-funding .fx-banner h3 { color: #E8EEFB; }
#nlt-funding .fx-table-wrap { background: rgba(7, 12, 38, .86); border-radius: 16px; }
#nlt-funding .nc small, #nlt-funding .nc-id, #nlt-funding .nc-pie, #nlt-funding .nc-pie span { color: #AEBAD6; }
#nlt-funding .fd-crumbs, #nlt-funding .fd-crumbs button { color: #D6DFF3; }
#nlt-funding .fx-tabs { background: rgba(6, 10, 32, .84); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; }
#nlt-funding .fx-tabs button.on { background: rgba(var(--fx-em-rgb), .2); color: #6CFF4D; }
#nlt-funding .fx-grad, #nlt-funding .fx-grad * { text-shadow: none !important; } /* el texto con degradado hereda la sombra del título y se ensuciaba */