/* NLT Infrastructure -- marca, parte 2: orbe iridiscente y haz de luz del héroe, banda de ondas y globo de red. Se carga después de marca.css. */

/* ---------- héroe: haz de luz y orbe ---------- */
.haz { position: absolute; left: 22%; top: -8%; width: 56%; height: 62%; pointer-events: none; transform: translateZ(10px); mix-blend-mode: screen;
    background: conic-gradient(from 168deg at 50% 4%, transparent 0deg, rgba(var(--cyan-rgb), .30) 12deg, rgba(var(--blue-rgb), .34) 24deg, rgba(var(--cyan-rgb), .30) 36deg, transparent 48deg);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%); animation: respira 6s ease-in-out infinite; }
.esfera { position: absolute; right: 3%; top: 6%; width: 17%; aspect-ratio: 1; transform: translateZ(120px); animation: flotaDato 8s ease-in-out infinite; animation-delay: -2s; border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 40px rgba(var(--cyan-rgb), .45), 0 0 80px rgba(var(--violet-rgb), .35); }
.esfera i { position: absolute; inset: -30%; border-radius: 50%; background: conic-gradient(from 0deg, #00e5ff, #3a6bff, #8a5cff, #3a6bff, #00ff7a 80%, #00e5ff); animation: giraOrbe 12s linear infinite; }
.esfera::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, .25) 14%, transparent 30%), radial-gradient(circle at 70% 78%, rgba(0, 10, 50, .7), transparent 60%); }
@keyframes giraOrbe { to { transform: rotate(360deg); } }

/* ---------- ondas: SCALABLE. SECURE. PROFESSIONAL. ---------- */
.ondas { padding: clamp(40px, 6vw, 80px) 0; }
.lienzo-ondas { position: relative; overflow: hidden; min-height: clamp(280px, 34vw, 420px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: clamp(28px, 5vw, 70px); isolation: isolate; border-radius: 34px;
    background: radial-gradient(70% 120% at 0% 100%, rgba(0, 255, 122, .16), transparent 55%), radial-gradient(80% 120% at 100% 0%, rgba(var(--violet-rgb), .28), transparent 60%), linear-gradient(135deg, #07122e, #0a1c4f 55%, #0b1230); }
.olas { position: absolute; left: -8%; bottom: 0; width: 116%; height: 100%; z-index: -1; overflow: visible; }
.ola { transform-box: fill-box; animation: oleaje 14s ease-in-out infinite alternate; }
.ola.o2 { animation-duration: 19s; animation-delay: -6s; } .ola.o3 { animation-duration: 24s; animation-delay: -11s; }
@keyframes oleaje { 0% { transform: translateX(-4%) translateY(6px); } 100% { transform: translateX(4%) translateY(-12px); } }
.lema { display: grid; gap: 6px; font: 600 clamp(15px, 2.4vw, 30px) Inter, sans-serif; letter-spacing: .42em; text-transform: uppercase; color: #dbe7ff; }
.lema span { display: block; } .lema span:nth-child(3) { color: #fff; }
.raya { display: block; width: 64px; height: 3px; margin-top: 24px; border-radius: 3px; background: linear-gradient(90deg, #00ff7a, #00e5ff); transform-origin: 0 50%; animation: subraya 4.5s var(--ease) infinite; }
.pildoras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; justify-items: stretch; }
.pildoras li { padding: 9px 26px; border-radius: 999px; text-align: center; font: 600 12px Inter, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #cfe0ff; border: 1px solid rgba(150, 180, 255, .4); background: rgba(8, 16, 42, .55); animation: pildora 6s ease-in-out infinite; }
.pildoras li:nth-child(2) { animation-delay: .5s; } .pildoras li:nth-child(3) { animation-delay: 1s; } .pildoras li:nth-child(4) { animation-delay: 1.5s; } .pildoras li:nth-child(5) { animation-delay: 2s; }
@keyframes pildora { 0%, 100% { border-color: rgba(150, 180, 255, .35); box-shadow: none; } 50% { border-color: rgba(var(--cyan-rgb), .8); box-shadow: 0 0 22px -6px rgba(var(--cyan-rgb), .6); } }
@media (max-width: 760px) { .lienzo-ondas { grid-template-columns: 1fr; } .pildoras { grid-template-columns: repeat(2, 1fr); } .lema { letter-spacing: .28em; } }

/* ---------- globo de red ---------- */
.globo-sec { padding: clamp(60px, 9vw, 120px) 0; }
.globo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.cifras-globo { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(18px, 3vw, 40px); margin-top: 34px; }
.cifras-globo b { display: block; font: 800 clamp(32px, 4.4vw, 52px) Geist, Inter, sans-serif; letter-spacing: -.04em; background: linear-gradient(95deg, #00ff7a, #00e5ff 60%, #6f8dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cifras-globo small { display: block; max-width: 17ch; margin-top: 4px; color: var(--mute); font-size: 13.5px; line-height: 1.4; }
.globo-caja { position: relative; width: min(560px, 100%); margin-inline: auto; aspect-ratio: 1; }
.globo-caja canvas { position: relative; width: 100%; height: 100%; display: block; }
.atmosfera { position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--blue-rgb), 0) 62%, rgba(var(--blue-rgb), .35) 82%, rgba(var(--violet-rgb), .12) 94%, transparent); filter: blur(10px); animation: respira 8s ease-in-out infinite; }
@media (max-width: 880px) { .globo-grid { grid-template-columns: 1fr; text-align: center; } .globo-texto .lead { margin-inline: auto; } .cifras-globo { justify-content: center; text-align: left; } .globo-caja { width: min(440px, 92%); } }
@media (max-width: 480px) { .cifras-globo { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .cifras-globo small { font-size: 12px; } }
@media (hover: none), (pointer: coarse) { .haz, .esfera, .esfera i, .ola, .raya, .pildoras li, .atmosfera { animation: none; } .haz { filter: none; } }
@media (prefers-reduced-motion: reduce) { .haz, .esfera, .esfera i, .ola, .raya, .pildoras li, .atmosfera { animation: none !important; } }
.marca .logo { width: 42px; height: 42px; margin: -4px 0; }
.teja img { width: 66%; height: 66%; }