/* NLT Infrastructure -- capa de MARCA (se carga después de site.css y components.css).
 * Paleta del tablero de marca: azul profundo de fondo, cian / azul / violeta de acento y el verde neón SOLO para lo importante (botón principal, «ok», dinero a favor).
 * Aquí viven: el héroe con la torre de cristal animada, la banda SIMULATE · MANAGE · SCALE, el aspecto de tarjetas, botones, íconos y líneas de datos. */
:root {
    --bg: #050a16; --ink: #f2f6ff; --mute: #a6b7cf; --dim: #7389a6;
    --line: rgba(150, 180, 255, .15); --glass: rgba(120, 150, 255, .05); --glass-2: rgba(120, 150, 255, .09);
    --neon: #00ff7a; --neon-rgb: 0, 255, 122;
    --blue: #3a6bff; --blue-rgb: 58, 107, 255; --cyan: #00e5ff; --cyan-rgb: 0, 229, 255; --violet: #8a5cff; --violet-rgb: 138, 92, 255;
    --surface: #101a2b;
    --grad-marca: linear-gradient(100deg, var(--cyan), var(--blue) 55%, var(--violet));
}

/* ---------- cristal: borde de luz azul-violeta ---------- */
.glass { border-color: rgba(150, 180, 255, .16); background: linear-gradient(160deg, rgba(130, 160, 255, .10), rgba(100, 130, 255, .035) 55%, rgba(140, 110, 255, .06));
    box-shadow: 0 30px 80px -40px rgba(0, 0, 8, .9), inset 0 1px 0 rgba(190, 210, 255, .20); }
@media (pointer: coarse) { .glass { background: linear-gradient(160deg, rgba(16, 26, 48, .78), rgba(8, 14, 30, .72)); } }
@media (hover: hover) and (pointer: fine) { .luz::after { background: radial-gradient(460px circle at var(--mx) var(--my), rgba(var(--blue-rgb), .17), rgba(var(--violet-rgb), .06) 45%, transparent 66%); } }
.eyebrow { color: #cfe0ff; border-color: rgba(150, 180, 255, .24); background: rgba(8, 16, 38, .55); }
.eyebrow i { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), .8); }
.nav { background: rgba(7, 13, 30, .6); border-color: rgba(150, 180, 255, .16); }
.nav.solid { background: rgba(5, 10, 24, .86); border-color: rgba(150, 180, 255, .2); }
.nav ul a.on { background: rgba(var(--blue-rgb), .2); }
.grad { background: linear-gradient(95deg, #fff 6%, #cfe2ff 42%, #7fb0ff 72%, #b69cff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:focus-visible { outline-color: var(--cyan); }

/* ---------- botones (como el tablero: Primary verde con flecha · Secondary azul · Ghost) ---------- */
.btn.neon { color: #02170c; background: linear-gradient(100deg, #00f27a, #3dffa0); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 10px 26px -14px rgba(var(--neon-rgb), .6); }
.btn.neon:hover { background: linear-gradient(100deg, #12ff8a, #5cffb2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 12px 30px -14px rgba(var(--neon-rgb), .7); }
.btn.neon:not(.sm)::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn.neon:hover::after { transform: translateX(4px); } }
.btn.vidrio { color: #fff; background: linear-gradient(180deg, rgba(58, 107, 255, .32), rgba(30, 60, 170, .22)), #0a1330; border-color: rgba(var(--blue-rgb), .75); box-shadow: inset 0 1px 0 rgba(190, 210, 255, .22), 0 10px 26px -16px rgba(var(--blue-rgb), .7); }
.btn.vidrio:hover { background: linear-gradient(180deg, rgba(70, 120, 255, .45), rgba(40, 75, 200, .30)), #0a1330; }
.btn.fantasma { border: 1px solid transparent; }
@media (hover: none), (pointer: coarse) {
    .btn.neon:hover { background: linear-gradient(100deg, #00f27a, #3dffa0); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 10px 26px -14px rgba(var(--neon-rgb), .6); }
    .btn.vidrio:hover { background: linear-gradient(180deg, rgba(58, 107, 255, .32), rgba(30, 60, 170, .22)), #0a1330; }
}

/* ---------- barra de progreso de lectura ---------- */
#progreso { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet), var(--neon)); pointer-events: none; opacity: .9; }

/* =====================================================================================
   HÉROE: texto a la izquierda, torre de cristal a la derecha (todo animado)
   ===================================================================================== */
.hero { min-height: 100svh; padding: 132px 0 70px; }
.hero .wrap { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: clamp(20px, 4vw, 60px); }
.hero .texto { flex: 1 1 52%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero h1 { max-width: 16ch; font-size: clamp(38px, 4.9vw, 72px); line-height: 1; background: none; -webkit-text-fill-color: initial; color: #f6f9ff; }
.hero h1 .g { background: linear-gradient(95deg, #00ff7a 0%, #00e5ff 48%, #6f8dff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline; padding-right: .06em; }
.hero .lead { max-width: 560px; }
.hero .acciones { justify-content: flex-start; }
.hero small.nota { max-width: 50ch; }
.rasgos { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(14px, 2.4vw, 30px); margin-top: 6px; }
.rasgo { display: grid; justify-items: center; gap: 8px; font: 600 12.5px Inter, sans-serif; color: #cfe0ff; text-align: center; letter-spacing: .01em; }
.rasgo svg { width: 38px; height: 38px; padding: 9px; box-sizing: content-box; border-radius: 14px; border: 1px solid rgba(var(--blue-rgb), .45); background: linear-gradient(160deg, rgba(var(--blue-rgb), .22), rgba(var(--violet-rgb), .12)); color: var(--cyan); stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .rasgos { grid-template-columns: repeat(2, 1fr); width: 100%; } .rasgo { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; text-align: left; } .rasgo svg { width: 24px; height: 24px; padding: 7px; } }

/* escena */
.escena { position: relative; flex: 1 1 46%; max-width: 560px; aspect-ratio: 560 / 640; --rx: 0deg; --ry: 0deg; perspective: 1400px; }
.escena .capa { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--ease); transform: rotateY(var(--ry)) rotateX(var(--rx)); }
.escena .torre-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.resplandor { position: absolute; left: 50%; top: 56%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--blue-rgb), .5), rgba(var(--violet-rgb), .22) 55%, transparent 72%); filter: blur(26px); animation: respira 7s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.torre-svg { animation: flota 8s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 10, 40, .6)) drop-shadow(0 0 28px rgba(var(--blue-rgb), .35)); }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.led { animation: parpadea 2.6s steps(1, end) infinite; animation-delay: var(--t, 0s); }
.led.v { fill: #00ff7a; } .led.c { fill: #00e5ff; } .led.b { fill: #5b8bff; }
@keyframes parpadea { 0%, 100% { opacity: 1; } 45% { opacity: .25; } 55% { opacity: 1; } 80% { opacity: .55; } }
.barra-led { animation: carga 4.4s var(--ease) infinite; animation-delay: var(--t, 0s); transform-box: fill-box; transform-origin: 0 50%; }
@keyframes carga { 0%, 100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } }
.barrido { animation: barre 5.2s linear infinite; }
@keyframes barre { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translateY(380px); opacity: 0; } }
.flujo { stroke-dasharray: 5 12; animation: fluye 1.6s linear infinite; }
.flujo.l2 { animation-duration: 2.1s; } .flujo.l3 { animation-duration: 1.3s; }
@keyframes fluye { to { stroke-dashoffset: -34; } }
.nube { animation: nubeflota 9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes nubeflota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.anillo { animation: gira 22s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; opacity: .95; }
@keyframes gira { to { stroke-dashoffset: -600; } }
.anillo.fino { animation-duration: 34s; animation-direction: reverse; opacity: .45; }
.pulso-base { animation: pulsoBase 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes pulsoBase { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }

/* elementos HTML flotantes sobre la escena */
.teja { position: absolute; left: 3%; top: 49%; width: 25%; aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center; transform: translateZ(60px) rotate(-8deg); animation: flotaTeja 7s ease-in-out infinite;
    background: linear-gradient(150deg, rgba(180, 210, 255, .30), rgba(90, 130, 255, .12) 55%, rgba(150, 110, 255, .18)); border: 1px solid rgba(200, 220, 255, .38); box-shadow: 0 24px 50px -18px rgba(0, 10, 50, .8), inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 40px -12px rgba(var(--blue-rgb), .6); }
@media (hover: hover) and (pointer: fine) { .teja { backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); } }
.teja img { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(var(--blue-rgb), .8)); }
@keyframes flotaTeja { 0%, 100% { transform: translateZ(60px) rotate(-8deg) translateY(0); } 50% { transform: translateZ(60px) rotate(-5deg) translateY(-14px); } }
.dato { position: absolute; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 16px; font: 600 12.5px Inter, sans-serif; color: #e6efff; white-space: nowrap; transform: translateZ(90px);
    background: linear-gradient(160deg, rgba(20, 34, 72, .85), rgba(10, 18, 44, .8)); border: 1px solid rgba(150, 180, 255, .3); box-shadow: 0 18px 40px -18px rgba(0, 6, 30, .9); animation: flotaDato 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.dato b { display: block; font: 800 15px Geist, Inter, sans-serif; letter-spacing: -.02em; color: #fff; }
.dato small { display: block; font: 500 11px Inter, sans-serif; color: var(--dim); }
.dato i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--blue-rgb), .25); color: var(--cyan); flex: none; }
.dato i svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dato.ok i { background: rgba(var(--neon-rgb), .16); color: var(--neon); }
.dato.d1 { right: -3%; top: 27%; } .dato.d2 { left: 6%; top: 17%; } .dato.d3 { right: -2%; bottom: 13%; }
@keyframes flotaDato { 0%, 100% { transform: translateZ(90px) translateY(0); } 50% { transform: translateZ(90px) translateY(-9px); } }
@media (max-width: 980px) {
    .hero .wrap { flex-direction: column; text-align: center; align-items: center; }
    .hero .texto { align-items: center; flex-basis: auto; }
    .hero .acciones { justify-content: center; } .rasgos { justify-items: center; }
    .escena { width: min(470px, 92%); flex-basis: auto; margin-top: 10px; }
    .dato.d2 { left: 0; top: 10%; } .dato.d1 { right: 0; top: 20%; }
}
@media (max-width: 560px) { .dato.d3 { display: none; } .teja { left: 0; } }

/* ---------- banda: Scalable · Secure · Professional (marquesina) ---------- */
.cinta { position: relative; padding: 0; overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--blue-rgb), .10), rgba(var(--violet-rgb), .10), rgba(var(--cyan-rgb), .08)); }
.cinta .pista { display: flex; gap: 0; width: max-content; animation: marquesina 38s linear infinite; padding: 20px 0; }
.cinta .pista span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: 700 13px Inter, sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #bcd0f0; white-space: nowrap; }
.cinta .pista span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-marca); box-shadow: 0 0 10px rgba(var(--cyan-rgb), .7); }
@keyframes marquesina { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta .pista { animation: none; } }

/* ---------- SIMULATE. MANAGE. SCALE. ---------- */
.trio { padding: clamp(70px, 9vw, 130px) 0 clamp(30px, 4vw, 50px); }
.trio .wrap { display: grid; gap: clamp(8px, 1.4vw, 18px); justify-items: start; }
.trio .palabra { font: 800 clamp(48px, 10.5vw, 150px)/.92 Geist, Inter, sans-serif; letter-spacing: -.045em; text-transform: uppercase; color: rgba(236, 244, 255, .92); }
.trio .palabra:nth-child(1) { color: rgba(236, 244, 255, .45); }
.trio .palabra:nth-child(2) { color: rgba(236, 244, 255, .7); }
.trio .palabra.g { background: linear-gradient(95deg, #00ff7a, #00e5ff 55%, #5b8bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; }
.trio .palabra.g::after { content: ""; position: absolute; left: 0; bottom: -.06em; height: .06em; width: 100%; background: linear-gradient(90deg, #00ff7a, #00e5ff, transparent); transform-origin: 0 50%; animation: subraya 4.5s var(--ease) infinite; border-radius: 4px; }
@keyframes subraya { 0% { transform: scaleX(0); } 45%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.trio p { color: var(--mute); font-size: clamp(16px, 1.8vw, 20px); max-width: 52ch; margin-top: 14px; }

/* ---------- vista previa del panel (sección propia) ---------- */
.vista-sec { padding: clamp(30px, 5vw, 60px) 0 clamp(40px, 6vw, 80px); }
.vista-sec .wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vista { margin-top: 0; }
.vista::before { background: linear-gradient(140deg, rgba(var(--cyan-rgb), .55), rgba(var(--blue-rgb), .18) 35%, rgba(var(--violet-rgb), .5)); }
.panel { background: rgba(5, 10, 26, .78); border-color: rgba(150, 180, 255, .1); }
.kpi { background: rgba(120, 150, 255, .05); border-color: rgba(150, 180, 255, .1); }
.grafica { border-color: rgba(150, 180, 255, .1); }
.fila { background: rgba(120, 150, 255, .04); border-color: rgba(150, 180, 255, .08); }

/* ---------- plataforma: tarjetas con ícono de gradiente y línea superior ---------- */
.celda { border-color: rgba(150, 180, 255, .15); }
.celda::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--cyan-rgb), .6), rgba(var(--violet-rgb), .5), transparent); opacity: .55; transition: opacity .4s; }
.celda:hover { border-color: rgba(var(--blue-rgb), .5); }
.celda:hover::before { opacity: 1; }
.celda .ico { background: linear-gradient(150deg, rgba(var(--blue-rgb), .3), rgba(var(--violet-rgb), .16)); border-color: rgba(var(--blue-rgb), .55); color: var(--cyan); box-shadow: 0 10px 26px -14px rgba(var(--blue-rgb), .8); }
.celda .chips span { border-color: rgba(150, 180, 255, .18); background: rgba(120, 150, 255, .06); }
.celda.doble { background-image: radial-gradient(60% 90% at 100% 0%, rgba(var(--violet-rgb), .16), transparent 65%), linear-gradient(160deg, rgba(130, 160, 255, .10), rgba(100, 130, 255, .035)); }

/* ---------- cómo funciona: línea de datos con un nodo que viaja ---------- */
.pasos::before { content: ""; position: absolute; left: 6%; right: 6%; top: 56px; height: 2px; background: linear-gradient(90deg, rgba(var(--cyan-rgb), .0), rgba(var(--cyan-rgb), .55), rgba(var(--blue-rgb), .55), rgba(var(--violet-rgb), .55), rgba(var(--violet-rgb), 0)); pointer-events: none; }
.pasos::after { content: ""; position: absolute; top: 51px; left: 6%; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), .25), 0 0 18px rgba(var(--cyan-rgb), .9); animation: nodo 7s var(--ease) infinite; pointer-events: none; }
@keyframes nodo { 0% { left: 6%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 94%; opacity: 0; } }
.paso { z-index: 1; } .paso::before { background: linear-gradient(180deg, #7fe9ff, rgba(var(--violet-rgb), .35)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 980px) { .pasos::before, .pasos::after { display: none; } }

/* ---------- precios y preguntas ---------- */
.precio::after { box-shadow: 0 0 0 1px rgba(var(--blue-rgb), .3) inset, 0 0 80px -30px rgba(var(--violet-rgb), .5); }
.precio { background-image: radial-gradient(70% 100% at 0% 0%, rgba(var(--blue-rgb), .16), transparent 60%), radial-gradient(60% 90% at 100% 100%, rgba(var(--violet-rgb), .14), transparent 60%), linear-gradient(160deg, rgba(130, 160, 255, .09), rgba(100, 130, 255, .03)); }
.cifra b { background: linear-gradient(180deg, #fff, #b9d0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cifra b span { -webkit-text-fill-color: var(--mute); }
.faq details { border-color: rgba(150, 180, 255, .14); background: rgba(120, 150, 255, .045); }
.faq details[open] { border-color: rgba(var(--blue-rgb), .5); background: rgba(120, 150, 255, .08); }
.faq summary::after { color: var(--cyan); }
.cierre .glass { background-image: radial-gradient(60% 120% at 50% 0%, rgba(var(--blue-rgb), .22), transparent 70%), linear-gradient(160deg, rgba(130, 160, 255, .09), rgba(100, 130, 255, .03)); }

/* ---------- formularios ---------- */
.campo input, .campo select, .campo textarea, .slug-fila { border-color: rgba(150, 180, 255, .2); background: rgba(5, 10, 26, .6); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .slug-fila:focus-within { border-color: rgba(var(--cyan-rgb), .65); box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), .12); }
.pa-tabs button.on { background: rgba(var(--blue-rgb), .22); border-color: rgba(var(--blue-rgb), .65); }
.pa-tabs button, .modelos button { background: rgba(10, 18, 44, .7); }
.modelos button.on { border-color: rgba(var(--blue-rgb), .7); background: rgba(var(--blue-rgb), .2); }

/* ---------- pie ---------- */
footer { border-top-color: rgba(150, 180, 255, .14); }

@media (prefers-reduced-motion: reduce) { .torre-svg, .resplandor, .teja, .dato, .nube, .anillo, .pulso-base, .led, .barra-led, .barrido, .flujo, .trio .palabra.g::after, .pasos::after { animation: none !important; } }

/* la barra no parte «Cómo funciona» en dos líneas */
.nav ul a { white-space: nowrap; padding-inline: 12px; }
.nav .der { flex: none; }

/* rejilla de puntos del tablero, que se desplaza muy despacio detrás del héroe */
.hero { isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image: radial-gradient(rgba(150, 190, 255, .55) 1.1px, transparent 1.6px); background-size: 30px 30px; animation: rejilla 40s linear infinite;
    -webkit-mask-image: radial-gradient(55% 62% at 74% 52%, #000 0%, transparent 72%); mask-image: radial-gradient(55% 62% at 74% 52%, #000 0%, transparent 72%); }
@keyframes rejilla { to { background-position: 30px 60px; } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
@media (max-width: 980px) { .hero::before { -webkit-mask-image: radial-gradient(70% 40% at 50% 78%, #000 0%, transparent 72%); mask-image: radial-gradient(70% 40% at 50% 78%, #000 0%, transparent 72%); } }

@media (max-width: 480px) { .marca small { display: none; } .nav { padding-left: 12px; } .nav .btn.neon.sm { padding: 0 14px; } .idioma { min-width: 36px; padding: 0 9px; } }
.nav { width: min(1120px, 100% - 24px); }
@media (min-width: 821px) { .nav ul a { padding-inline: 10px; font-size: 13.5px; } }

/* teléfonos y tabletas: nada de filtros caros ni animaciones que repinten sin parar (la torre queda quieta; solo parpadean sus luces y fluyen los datos) */
@media (hover: none), (pointer: coarse) {
    .torre-svg { animation: none; filter: none; }
    .resplandor { animation: none; filter: none; opacity: .9; }
    .teja, .dato, .nube, .anillo, .pulso-base, .barrido, .barra-led { animation: none; }
    .hero::before { animation: none; }
    .escena .capa { transition: none; transform: none; }
    .trio .palabra.g::after { animation: none; transform: none; }
    .pasos::after { animation: none; }
}