:root {
  --bg: #0e0f0f;
  --off: #1b1c1c;
  --lime: #c6ff36;
  --white: #eaeaea;
  --mute: #9a9d9b;
  --line: rgba(234, 234, 234, .14);
  --g1: 3px;
  --g2: 14px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --wide: 'Michroma', sans-serif;
  --sans: 'Space Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
html.lock, html.lock body { overflow: hidden; }
body { background: var(--bg); color: var(--white); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.wm { position: relative; display: block; width: 100%; }
.wm > span, .grp > span { position: absolute; top: 0; height: 100%; }
.grp, .pl-mark { transform-origin: 0 0; }
.wm svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.st { fill: none; stroke: currentColor; stroke-width: 21; stroke-linejoin: round; stroke-linecap: butt; }
.gl { color: var(--white); }
.i-off { color: var(--off); }
.i-on { color: var(--lime); opacity: 0; filter: drop-shadow(0 0 var(--g1) rgba(198, 255, 54, .95)) drop-shadow(0 0 var(--g2) rgba(198, 255, 54, .5)); }
.lit .i-on { opacity: 1; }
.lit .i-off { opacity: 0; }

.tagw { display: block; }
.tag { display: block; width: 100%; height: auto; overflow: visible; }
.tag text { font-family: var(--wide); font-size: 86px; fill: var(--white); }

.pl { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; --g1: 6px; --g2: 34px; }
.pl-bg { position: absolute; inset: 0; background: var(--bg); }
.pl-halo { position: absolute; inset: 0; background: radial-gradient(circle var(--hr, 40vmax) at var(--hx, 50%) var(--hy, 50%), rgba(198, 255, 54, .14), rgba(198, 255, 54, 0)); opacity: 0; }
.pl-mark { position: relative; z-index: 2; transform-origin: 0 0; }
.pl-iso { width: 180px; }
.pl-word { width: 760px; }
.ignite .i-on, .ignite .pl-halo { animation: neon 1.8s linear forwards; }

@keyframes neon {
  0% { opacity: 0; }
  8% { opacity: .85; }
  10% { opacity: .05; }
  22% { opacity: .05; }
  24% { opacity: 1; }
  27% { opacity: .2; }
  36% { opacity: .2; }
  38% { opacity: 1; }
  48% { opacity: .55; }
  51% { opacity: 1; }
  100% { opacity: 1; }
}

.rv { opacity: 0; transform: translateY(18%); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.in .rv { opacity: 1; transform: none; }

.hd { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 40px; }
.hd-logo { position: relative; width: 210px; display: block; }
.hd-3d { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 0 3px rgba(198, 255, 54, .8)) drop-shadow(0 0 12px rgba(198, 255, 54, .35)); }
.hd-3d.on { opacity: 1; }
.hd-3d canvas { display: block; width: 100%; height: 100%; }
.iso.swap { opacity: 0; transition: opacity .6s ease; }
.hd-logo .tag { margin-top: 9px; }
.hd-nav { display: flex; gap: 38px; font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding-top: 6px; }
.hd-nav a { opacity: .85; transition: opacity .2s, color .2s; }
.hd-nav a:hover { opacity: 1; color: var(--lime); }

.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px 40px 90px; }
.stack { width: 1040px; max-width: 100%; margin: 0 auto; }
.l-somos { font: 400 64px/1 var(--wide); letter-spacing: .04em; margin-bottom: 4.5%; }
.hero-wm { margin-bottom: 4.5%; }
.hero h1 { font: 600 92px/.98 var(--sans); letter-spacing: -.035em; max-width: 1200px; }
.hero h1 span { display: block; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero-2 { position: relative; overflow: hidden; align-items: flex-end; padding-bottom: 120px; }
.hero-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-3d canvas { display: block; width: 100%; height: 100%; }
.hero-2 .stack { position: relative; z-index: 1; }
.hero-2 .stack { width: 1200px; margin: 0; }

.ft { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 32px 44px; overflow: hidden; }
.ft-lines { position: absolute; top: 0; left: 0; right: 0; height: 115px; pointer-events: none; }
.ft-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.ft-lines i:nth-child(1) { left: 22.5%; }
.ft-lines i:nth-child(2) { left: 41.5%; }
.ft-lines i:nth-child(3) { left: 60.4%; }
.ft-lines i:nth-child(4) { left: 79.3%; }
.ft-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.ft-logo { display: block; width: 112px; }
.ft-social { display: flex; gap: 22px; margin-top: 12px; padding-left: 4px; }
.ft-social a { display: block; width: 22px; height: 22px; transition: color .2s; }
.ft-social a:hover, .ft-nav a:hover, .ft-bot a:hover { color: var(--lime); }
.ft-social svg { width: 100%; height: 100%; display: block; }
.ft-nav { display: flex; gap: 38px; font: 500 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.ft-nav a { transition: color .2s; }
.ft-name { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 0 8px; }
.ft-big { flex: 1; }
.ft-sup { font: 400 30px/1 var(--wide); letter-spacing: .06em; margin-top: -6px; }
.ft-bot { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font: 400 14px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ft-bot span:last-child { text-align: right; }

.sel { min-height: 100vh; display: grid; place-content: center; gap: 28px; padding: 40px; text-align: center; }
.sel h1 { font: 400 22px/1.3 var(--wide); letter-spacing: .08em; }
.sel p { font: 400 14px/1.6 var(--mono); color: var(--mute); max-width: 560px; }
.sel nav { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.sel a { font: 500 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line); padding: 18px 26px; transition: border-color .2s, color .2s; }
.sel a:hover { border-color: var(--lime); color: var(--lime); }

/*Tablet*/
@media (min-width:768px) and (max-width:1024px){
  .pl{--g1:0.7vw;--g2:4.1vw;}
  .pl-iso{width:19.2vw;}
  .pl-word{width:79.1vw;}
  .hd{padding:3.4vw 4.8vw;}
  .hd-logo{width:21.6vw;}
  .hd-logo .tag{margin-top:1.1vw;}
  .hd-nav{gap:3.4vw;font-size:1.4vw;padding-top:0.7vw;}
  .hero{padding:16.8vw 4.8vw 10.8vw;}
  .hero-2{padding-bottom:14.4vw;}
  .l-somos{font-size:6.2vw;}
  .hero h1{font-size:7.2vw;}
  .ft{padding:3.1vw 3.8vw 5.3vw;}
  .ft-lines{height:13.8vw;}
  .ft-logo{width:13.4vw;}
  .ft-social{gap:2.6vw;margin-top:1.4vw;padding-left:0.5vw;}
  .ft-social a{width:2.9vw;height:2.9vw;}
  .ft-nav{gap:3.4vw;font-size:1.4vw;padding-top:0.2vw;}
  .ft-name{gap:1.4vw;padding:0 1vw;}
  .ft-sup{font-size:2.6vw;margin-top:-0.5vw;}
  .ft-bot{font-size:1.4vw;}
  .sel{gap:3.4vw;padding:4.8vw;}
  .sel h1{font-size:2.6vw;}
  .sel p{font-size:1.7vw;max-width:67.1vw;}
  .sel nav{gap:1.9vw;}
  .sel a{font-size:2.2vw;padding:2.2vw 3.1vw;}
}
/*Celular*/
@media (max-width:767px){
  .pl{--g1:1.5vw;--g2:7.7vw;}
  .pl-iso{width:33.3vw;}
  .pl-word{width:85vw;}
  .hd{padding:5.1vw 5.1vw;}
  .hd-logo{width:38.5vw;}
  .hd-logo .tag{margin-top:1.5vw;}
  .hd-nav{display:none;}
  .hero{padding:30.8vw 5.1vw 15.4vw;}
  .hero-2{padding-bottom:20.5vw;}
  .l-somos{font-size:8.2vw;}
  .hero h1{font-size:11.3vw;}
  .ft{padding:5.1vw 5.1vw 8.2vw;}
  .ft-lines{display:none;}
  .ft-top{flex-direction:column;gap:8.2vw;}
  .ft-logo{width:28.7vw;}
  .ft-social{gap:5.6vw;margin-top:3.1vw;padding-left:1vw;}
  .ft-social a{width:6.2vw;height:6.2vw;}
  .ft-nav{flex-direction:column;gap:4.6vw;font-size:4.1vw;}
  .ft-name{flex-direction:column;align-items:flex-end;gap:2.1vw;padding:0;}
  .ft-big{width:100%;}
  .ft-sup{font-size:5.1vw;margin-top:0;}
  .ft-bot{grid-template-columns:1fr;gap:3.1vw;font-size:3.1vw;text-align:center;}
  .ft-bot span:last-child{text-align:center;}
  .sel{gap:7.2vw;padding:10.3vw 5.1vw;}
  .sel h1{font-size:5.6vw;}
  .sel p{font-size:3.6vw;max-width:100%;}
  .sel nav{flex-direction:column;gap:4.1vw;}
  .sel a{width:85vw;font-size:4.4vw;font-weight:700;padding:4.4vw 0;}
}

@media (prefers-reduced-motion: reduce){
  .rv{transition:none;}
}