/* NLT Infrastructure -- hoja de estilos del sitio. Oscuro, de cristal, con un solo acento (verde neón) sobre orbes de plasma. Sin frameworks. */
:root {
    --bg: #04070a;
    --ink: #f4f7f6;
    --mute: #bccac5;
    --dim: #8a9a95;
    --line: rgba(255, 255, 255, .10);
    --glass: rgba(255, 255, 255, .045);
    --glass-2: rgba(255, 255, 255, .075);
    --neon: #39ff14;
    --neon-rgb: 57, 255, 20;
    --teal: #2de2c4;
    --radius: 26px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-appearance: none; appearance: none; background-color: transparent; border: 0; padding: 0; margin: 0; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: Geist, Inter, system-ui, sans-serif; margin: 0; letter-spacing: -.035em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 8px; }

/* ---------- fondo ---------- */
#fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; background: var(--bg); }
.sin-webgl #fondo { display: none; }
.sin-webgl body::before { content: ""; position: fixed; inset: 0; z-index: -3; background:
    radial-gradient(60vmax 60vmax at 15% 10%, rgba(45, 226, 196, .35), transparent 60%), radial-gradient(55vmax 55vmax at 85% 30%, rgba(57, 255, 20, .22), transparent 60%),
    radial-gradient(60vmax 60vmax at 40% 95%, rgba(92, 66, 255, .30), transparent 60%), var(--bg); }
#grano { position: fixed; inset: -10%; z-index: -1; pointer-events: none; opacity: .9; mix-blend-mode: soft-light; background-size: 200px 200px; animation: granoMueve 9s steps(9) infinite; }
@keyframes granoMueve { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.vineta { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, .18) 40%, rgba(0, 0, 0, .62)), linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .10)); }
@media (pointer: coarse) { #grano { animation: none; } }
@media (prefers-reduced-motion: reduce) { #grano { animation: none; } html { scroll-behavior: auto; } }

/* ---------- cristal ---------- */
.glass { position: relative; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .05));
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .16); }
@media (hover: hover) and (pointer: fine) { .glass { backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5); } }
@media (pointer: coarse) { .glass { background: linear-gradient(160deg, rgba(14, 22, 22, .72), rgba(8, 14, 14, .66)); } }

/* ---------- estructura ---------- */
.wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }
section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; font: 600 12px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #d3dfdb; border: 1px solid rgba(255, 255, 255, .16); background: rgba(4, 9, 9, .5); }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px rgba(var(--neon-rgb), .7); }
.h2 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.04; font-weight: 700; }
.lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--mute); max-width: 640px; }
.grad { background: linear-gradient(95deg, #fff 8%, #c6ffe9 45%, var(--neon) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.centro { text-align: center; } .centro .lead { margin-inline: auto; }

/* ---------- navegación ---------- */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(1060px, 100% - 24px); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px 9px 20px; border-radius: 999px;
    border: 1px solid var(--line); background: rgba(8, 14, 14, .55); transition: background .3s, border-color .3s; }
@media (hover: hover) and (pointer: fine) { .nav { backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); } }
.nav.solid { background: rgba(6, 10, 10, .82); border-color: rgba(255, 255, 255, .14); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 15px Geist, Inter, sans-serif; letter-spacing: .01em; white-space: nowrap; }
.marca .logo { width: 34px; height: 34px; display: grid; place-items: center; filter: drop-shadow(0 0 14px rgba(60, 130, 255, .55)); }
.marca .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marca small { color: var(--mute); font-weight: 500; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav ul a { display: block; padding: 8px 14px; border-radius: 999px; font: 500 14px Inter, sans-serif; color: var(--mute); text-decoration: none; transition: color .2s, background .2s; }
.nav ul a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
@media (max-width: 820px) { .nav ul { display: none; } .nav { padding-left: 16px; } }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px Inter, sans-serif; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .3s, background .3s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn.neon { color: #04170a; background: linear-gradient(100deg, #2fcf14, #58de3b); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 8px 22px -12px rgba(var(--neon-rgb), .5); }
.btn.neon:hover { transform: translateY(-2px); background: linear-gradient(100deg, #36d819, #62e745); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 10px 26px -12px rgba(var(--neon-rgb), .6); }
.btn.vidrio { color: #fff; background: linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)), rgba(6, 12, 10, .6); border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn.vidrio:hover { background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .08)), rgba(6, 12, 10, .6); transform: translateY(-2px); }

/* ---------- portada ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 150px 0 90px; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; }
.hero h1 { background: linear-gradient(100deg, #f4f7f6 0%, #f4f7f6 38%, #b9f7c9 62%, #7dff5c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(46px, 8.6vw, 112px); line-height: .98; font-weight: 800; max-width: 15ch; letter-spacing: -.045em; }
.hero .lead { font-size: clamp(18px, 2.1vw, 23px); }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }
.hero small.nota { color: var(--dim); font-size: 13px; letter-spacing: .02em; }

/* maqueta de panel (vista previa) */
.vista { position: relative; width: min(1000px, 100%); margin-top: clamp(30px, 6vw, 70px); padding: 14px; border-radius: 30px; }
.vista::before { content: ""; position: absolute; inset: -1px; border-radius: 31px; padding: 1px; background: linear-gradient(140deg, rgba(var(--neon-rgb), .55), rgba(255, 255, 255, .08) 35%, rgba(45, 226, 196, .4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.panel { border-radius: 20px; padding: 22px; background: rgba(4, 9, 9, .72); border: 1px solid rgba(255, 255, 255, .07); text-align: left; display: grid; gap: 18px; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel-top b { font: 700 15px Geist, Inter, sans-serif; } .panel-top .puntos { display: flex; gap: 6px; } .panel-top .puntos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.kpi small { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.kpi b { display: block; margin-top: 6px; font: 800 clamp(22px, 3vw, 30px) Geist, Inter, sans-serif; letter-spacing: -.03em; }
.kpi b.up { color: var(--neon); }
.grafica { height: 170px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent); overflow: hidden; position: relative; }
.grafica svg { width: 100%; height: 100%; display: block; }
.trazo { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dibuja 2.6s var(--ease) .5s forwards; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
.filas { display: grid; gap: 8px; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); font-size: 14px; }
.fila span:first-child { color: var(--mute); } .etq { padding: 3px 10px; border-radius: 999px; font: 600 11.5px Inter, sans-serif; letter-spacing: .04em; }
.etq.ok { color: var(--neon); background: rgba(var(--neon-rgb), .12); } .etq.av { color: #7dd3fc; background: rgba(56, 189, 248, .12); } .etq.pe { color: #fcd34d; background: rgba(252, 211, 77, .12); }
@media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } .panel { padding: 14px; } .vista { padding: 8px; border-radius: 22px; } }

/* ---------- plataforma (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: clamp(40px, 6vw, 70px); }
.celda { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; grid-column: span 2; min-height: 260px; overflow: hidden; transition: transform .45s var(--ease), border-color .3s; }
.celda.ancha { grid-column: span 3; } .celda.doble { grid-column: span 4; }
.celda:hover { transform: translateY(-5px); border-color: rgba(var(--neon-rgb), .35); }
.celda .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--neon-rgb), .1); border: 1px solid rgba(var(--neon-rgb), .3); color: var(--neon); }
.celda .ico svg { width: 22px; height: 22px; }
.celda h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; }
.celda p { color: var(--mute); font-size: 16px; line-height: 1.55; }
.celda .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.celda .chips span { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--mute); border: 1px solid var(--line); background: var(--glass); }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .celda, .celda.ancha, .celda.doble { grid-column: span 1; } .celda.doble { grid-column: span 2; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .celda.doble { grid-column: span 1; } .celda { min-height: 0; } }

/* ---------- cómo funciona ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(40px, 6vw, 70px); counter-reset: paso; position: relative; }
.paso { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; counter-increment: paso; }
.paso::before { content: counter(paso, decimal-leading-zero); font: 800 44px Geist, Inter, sans-serif; letter-spacing: -.05em; background: linear-gradient(180deg, rgba(var(--neon-rgb), .9), rgba(var(--neon-rgb), .08)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.paso h3 { font-size: 21px; font-weight: 700; } .paso p { color: var(--mute); font-size: 15.5px; }
@media (max-width: 980px) { .pasos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- precios ---------- */
.precio { max-width: 980px; margin: clamp(40px, 6vw, 70px) auto 0; padding: clamp(28px, 4.5vw, 56px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 4vw, 56px); }
.precio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px rgba(var(--neon-rgb), .14) inset, 0 0 60px -34px rgba(var(--neon-rgb), .28); }
.cifras { display: grid; gap: 22px; align-content: start; }
.cifra small { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.cifra b { display: block; font: 800 clamp(44px, 6.6vw, 76px)/1 Geist, Inter, sans-serif; letter-spacing: -.05em; margin-top: 6px; }
.cifra b span { font-size: .38em; letter-spacing: -.01em; color: var(--mute); font-weight: 600; margin-left: 4px; }
.incluye { display: grid; gap: 13px; align-content: start; list-style: none; margin: 0; padding: 0; }
.incluye li { display: flex; gap: 12px; align-items: flex-start; color: #dbe6e2; font-size: 16px; }
.incluye li::before { content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(var(--neon-rgb), .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2339ff14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.precio .acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 26px; }
.precio .acciones small { color: var(--dim); font-size: 13px; max-width: 46ch; line-height: 1.5; }
@media (max-width: 820px) { .precio { grid-template-columns: 1fr; } }

/* ---------- preguntas ---------- */
.faq { max-width: 820px; margin: clamp(36px, 5vw, 60px) auto 0; display: grid; gap: 12px; }
.faq details { border-radius: 20px; border: 1px solid var(--line); background: var(--glass); padding: 0 24px; transition: border-color .3s, background .3s; }
.faq details[open] { border-color: rgba(var(--neon-rgb), .3); background: var(--glass-2); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; font: 600 18px Geist, Inter, sans-serif; letter-spacing: -.015em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; font-weight: 300; color: var(--neon); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--mute); font-size: 16px; }

/* ---------- cierre y pie ---------- */
.cierre { text-align: center; }
.cierre .glass { padding: clamp(40px, 7vw, 90px) 24px; display: grid; gap: 24px; justify-items: center; }
footer { padding: 46px 0 60px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13.5px; }
footer .wrap { display: grid; gap: 14px; }
footer .fila-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
footer a { color: var(--mute); text-decoration: none; margin-right: 18px; } footer a:hover { color: #fff; }

/* ---------- entradas suaves al hacer scroll ---------- */
.rev { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.rev.in { opacity: 1; transform: none; }
.sin-js .rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; transition: none; } .trazo { animation: none; stroke-dashoffset: 0; } }