/* ================================================================
   NEXA TECHNOLOGY
   Fontes: Space Grotesk (títulos) · Figtree (texto) · JetBrains Mono (painel)
   Índice: 01 base · 02 componentes · 03 abertura e camadas · 04 cabeçalho
           05 hero · 06 criação · 07 processo · 08 padrão · 09 terminal
           10 engenharia · 11 sobre · 12 dúvidas · 13 briefing · 14 rodapé
           15 páginas internas · 16 telas menores · 17 movimento reduzido
================================================================ */

/* 01 — BASE */
/* Fontes hospedadas no próprio site (licença OFL), só o subconjunto latino. */
@font-face { font-family: 'Space Grotesk'; font-weight: 500 700; font-style: normal; font-display: swap; src: url(/assets/fonts/space-grotesk.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400 600; font-style: normal; font-display: swap; src: url(/assets/fonts/figtree.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(/assets/fonts/jetbrains-mono.woff2) format('woff2'); }
:root {
  --bg: #04060B; --bg2: #070B15; --panel: #0A101D;
  --line: rgba(125, 175, 255, .14); --line2: rgba(125, 175, 255, .3);
  --tx: #E9EEF9; --mut: #97A4C0; --dim: #5F6B88;
  --blue: #3083FF; --cyan: #27D7FF; --vio: #A44BFF; --ok: #2DFFB3; --amb: #FFB224; --red: #FF4D6A;
  --fd: 'Space Grotesk', system-ui, sans-serif;
  --fb: 'Figtree', system-ui, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --w: min(92vw, 92rem);
  --hh: 4.6rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --cut: .7rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 1rem); -webkit-text-size-adjust: 100%; }
/* No desktop o site inteiro acompanha a largura da tela (equivale ao navegador em ~75–95%). */
@media (min-width: 1024px) { html { font-size: clamp(13px, .45vw + 6.9px, 16px); } }
body {
  font: 400 1.0625rem/1.65 var(--fb); color: var(--tx); background: var(--bg);
  overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html.booting, html.booting body { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--cyan); }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: #021018; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 2000; background: var(--cyan); color: #021018; padding: .7rem 1rem; font: 600 .85rem var(--fm); transition: top .2s; }
.skip:focus { top: 1rem; }
.wrap { width: var(--w); margin-inline: auto; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

h1, h2, h3, h4 { font-family: var(--fd); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
h2 { font-size: clamp(2rem, 4.1vw, 3.6rem); letter-spacing: -.035em; line-height: 1.03; text-wrap: balance; }
h2 em, h1 em { font-style: normal; color: var(--cyan); }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--mut); max-width: 40rem; text-wrap: pretty; }
.lead strong { color: var(--tx); font-weight: 600; }

/* 02 — COMPONENTES */
.eyebrow, .tag {
  font: 500 .76rem/1.2 var(--fm); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
}
.eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.3rem; }
.eyebrow::before { content: ""; width: .5rem; height: .5rem; background: var(--cyan); box-shadow: 0 0 .8rem var(--cyan); animation: blink 1.6s steps(2) infinite; }
.tag { font-size: .68rem; margin-bottom: .9rem; }
@keyframes blink { 50% { opacity: .25; } }

.sec { position: relative; padding: clamp(4.5rem, 11vh, 8rem) 0; }
.sec-alt { background: linear-gradient(180deg, #080D19, #05080F); border-block: 1px solid var(--line); }
.sec-alt::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(125,175,255,.035) 1px, transparent 1px) 0 0/4.5rem 4.5rem, linear-gradient(90deg, rgba(125,175,255,.035) 1px, transparent 1px) 0 0/4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.sec > .wrap { position: relative; }
.sec-head { max-width: 50rem; margin-bottom: 3.2rem; }
.sec-head h2 + .lead { margin-top: 1.4rem; }
.sec-head .lead + .lead { margin-top: 1rem; }

/* Botões com cantos chanfrados */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem 1.6rem; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 .82rem/1 var(--fm); letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: transform .25s var(--ease), filter .25s, background .25s;
}
.btn .ic { width: 1.1rem; height: 1.1rem; transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(.25rem); }
.btn-p { background: var(--cyan); color: #021018; }
.btn-p::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); transform: translateX(-120%); }
.btn-p:hover { filter: drop-shadow(0 0 1.2rem rgba(39,215,255,.55)); transform: translateY(-2px); }
.btn-p:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn-g { background: var(--line2); color: var(--tx); }
.btn-g::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #070C17; clip-path: inherit; transition: background .25s; }
.btn-g:hover { background: var(--cyan); transform: translateY(-2px); }
.btn-g:hover::before { background: #0A1626; }
.btn-sm { padding: .72rem 1.1rem; font-size: .72rem; --cut: .5rem; }

.lnk { display: inline-flex; align-items: center; gap: .6rem; font: 700 .76rem var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.lnk .ic { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.lnk:hover .ic { transform: translateX(.3rem); }

/* Painel com cantoneiras de mira e brilho que segue o cursor */
.hud {
  position: relative; border: 1px solid var(--line);
  background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 0%), rgba(39,215,255, calc(.11 * var(--on, 0))), transparent 62%), linear-gradient(180deg, rgba(14,22,38,.92), rgba(7,11,21,.92));
  transition: border-color .3s;
}
.hud::before, .hud::after { content: ""; position: absolute; z-index: 2; width: .85rem; height: .85rem; border: 1px solid var(--cyan); opacity: .75; pointer-events: none; transition: width .3s var(--ease), height .3s var(--ease), opacity .3s; }
.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hud.spot:hover { --on: 1; border-color: var(--line2); }
.hud.spot:hover::before, .hud.spot:hover::after { width: 1.7rem; height: 1.7rem; opacity: 1; }

.dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 .7rem var(--ok); animation: blink 1.8s steps(2) infinite; }

/* Entrada ao rolar */
.js .rv { opacity: 0; transform: translateY(1.6rem); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.qa .rv { opacity: 1 !important; transform: none !important; transition: none !important; }

details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; cursor: pointer; font: 600 1.12rem/1.3 var(--fd); letter-spacing: -.01em; transition: color .2s; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--cyan); }
summary .ic { color: var(--cyan); transition: transform .3s var(--ease); }
details[open] > summary .ic { transform: rotate(45deg); }
details > div { padding-bottom: 1.3rem; color: var(--mut); max-width: 46rem; }
details > div strong { color: var(--tx); font-weight: 600; }

/* 03 — ABERTURA E CAMADAS DE TELA */
.boot { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; background: #020308; }
.booting .boot, .boot.out { display: grid; }
.boot-in { width: min(34rem, 86vw); }
.boot-mark { width: 4.2rem; height: 3rem; margin-bottom: 1.8rem; filter: drop-shadow(0 0 1.2rem rgba(48,131,255,.8)); }
.boot-log { font: 400 .8rem/1.85 var(--fm); color: #9FB2D6; min-height: 10.5em; white-space: pre-wrap; }
.boot-log .ok { color: var(--ok); } .boot-log .hl { color: var(--cyan); } .boot-log .big { color: #fff; font-weight: 700; letter-spacing: .2em; }
.boot-bar { height: 2px; margin-top: 1.2rem; background: rgba(125,175,255,.15); }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 1rem var(--cyan); transition: width .3s linear; }
.boot-skip { margin-top: 1.5rem; background: none; border: 0; cursor: pointer; color: var(--dim); font: 400 .68rem var(--fm); letter-spacing: .18em; text-transform: uppercase; }
.boot-skip:hover { color: var(--tx); }
.boot.out { animation: bootout .75s var(--ease) forwards; }
@keyframes bootout { to { clip-path: inset(0 0 100% 0); } }

.fx-scan { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(170,205,255,.022) 0 1px, transparent 1px 3px); }
.fx-scan::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.5)); }

.hudf { position: fixed; z-index: 80; display: none; pointer-events: none; font: 400 .62rem var(--fm); letter-spacing: .24em; color: var(--dim); }
.hudf-l { left: 1.1rem; bottom: 1.8rem; writing-mode: vertical-rl; transform: rotate(180deg); align-items: center; gap: .9rem; }
.hudf-l i { width: 1px; height: 1.6rem; background: var(--line2); }
.hudf-r { right: 1.1rem; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: center; gap: .7rem; }
.hudf-r span { writing-mode: vertical-rl; }
.hudf-r #depth { color: var(--cyan); }
.hudf-r b { position: relative; width: 2px; height: 7rem; background: var(--line); }
.hudf-r b i { position: absolute; inset: 0 0 auto; height: 0; background: var(--cyan); box-shadow: 0 0 .6rem var(--cyan); }
@media (min-width: 1200px) and (min-height: 540px) { .hudf { display: flex; } }

/* 04 — CABEÇALHO */
.hdr { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hh); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.hdr.scrolled { background: rgba(4,6,11,.8); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-color: var(--line); }
.hdr-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--tx); text-decoration: none; }
.brand-mark { width: 2.8rem; height: 1.96rem; filter: drop-shadow(0 0 .7rem rgba(48,131,255,.55)); }
.brand-tx { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: 700 1.28rem/1 var(--fd); letter-spacing: .24em; }
.brand-sub { margin-top: .32rem; font: 400 .56rem/1 var(--fm); letter-spacing: .46em; text-transform: uppercase; color: var(--mut); }
.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a:not(.btn) { position: relative; padding: .45rem 0; font: 500 .74rem var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); text-decoration: none; transition: color .2s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--cyan); box-shadow: 0 0 .5rem var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:not(.btn):hover, .nav a.on { color: var(--tx); }
.nav a:not(.btn):hover::after, .nav a.on::after { transform: scaleX(1); }
.nav-cta { display: none; }
.hdr-r { display: flex; align-items: center; gap: 1.3rem; }
.clock { display: none; align-items: center; gap: .5rem; font: 400 .72rem var(--fm); letter-spacing: .1em; color: var(--mut); font-variant-numeric: tabular-nums; }
.clock i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 .6rem var(--ok); }
@media (min-width: 1280px) { .clock { display: inline-flex; } }
.burger { display: none; width: 2.8rem; height: 2.8rem; place-items: center; background: none; border: 1px solid var(--line2); cursor: pointer; }
.burger .ic { width: 1.4rem; height: 1.4rem; grid-area: 1/1; }
.burger .ic-close, .burger[aria-expanded="true"] .ic-open { display: none; }
.burger[aria-expanded="true"] .ic-close { display: block; }

/* 05 — HERO */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--hh) 0 5.5rem; overflow: clip; }
.hero-bg { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60rem 42rem at 76% 46%, rgba(48,131,255,.17), transparent 62%),
    radial-gradient(36rem 28rem at 4% 100%, rgba(164,75,255,.11), transparent 62%),
    linear-gradient(rgba(125,175,255,.05) 1px, transparent 1px) 0 0/4.5rem 4.5rem,
    linear-gradient(90deg, rgba(125,175,255,.05) 1px, transparent 1px) 0 0/4.5rem 4.5rem;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.globe-wrap { position: absolute; z-index: -1; right: -8%; top: 50%; width: min(66vw, 122vh); aspect-ratio: 1; transform: translateY(-48%); }
#globe { width: 100%; height: 100%; }
.g-tag { position: absolute; display: grid; gap: .45rem; font: 400 .66rem var(--fm); letter-spacing: .14em; color: var(--mut); }
.g-tag span { display: flex; align-items: center; gap: .6rem; padding-left: .7rem; border-left: 1px solid var(--cyan); }
.g-tag b { color: var(--cyan); font-weight: 500; min-width: 3.6rem; }
.g-tag-a { left: 10%; top: 16%; }
.g-tag-b { left: 16%; bottom: 17%; }
.hero-in { position: relative; }
.h1 { margin: .2rem 0 1.5rem; font-size: clamp(3.1rem, min(7.3vw, 12.4vh), 7.6rem); font-weight: 600; line-height: .97; letter-spacing: -.045em; }
.h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.h1 .ln > span { display: block; transition: transform 1.1s var(--ease); }
.h1 .ln:nth-child(2) > span { transition-delay: .09s; }
.h1 .ln:nth-child(3) > span { transition-delay: .18s; }
.hero-lead { max-width: 33rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }
.hero .eyebrow, .hero-lead, .cta-row, .hero-facts, .globe-wrap { transition: opacity 1s var(--ease) .35s, transform 1s var(--ease) .35s; }
.globe-wrap { transition-duration: 1.6s; transition-delay: .1s; }
.js:not(.booted) .h1 .ln > span { transform: translateY(112%); }
.js:not(.booted) .hero .eyebrow, .js:not(.booted) .hero-lead, .js:not(.booted) .cta-row, .js:not(.booted) .hero-facts { opacity: 0; transform: translateY(1rem); }
.js:not(.booted) .globe-wrap { opacity: 0; }
.hero-facts { position: absolute; left: 0; right: 0; bottom: 1.7rem; display: flex; gap: 2.6rem; }
.hero-facts div { display: grid; gap: .25rem; padding-left: 1rem; border-left: 1px solid var(--line2); }
.hero-facts b { font: 600 1.02rem/1.1 var(--fd); }
.hero-facts span { font: 400 .68rem/1.2 var(--fm); letter-spacing: .08em; color: var(--mut); }
@media (max-height: 560px) and (min-width: 1024px) { .hero-facts { display: none; } .hero { padding-bottom: 1rem; } }

.glitch { position: relative; display: inline-block; text-shadow: 0 0 2.4rem rgba(39,215,255,.45); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; text-shadow: none; }
.glitch::before { color: var(--red); animation: gl1 7s steps(1) infinite; }
.glitch::after { color: #fff; animation: gl2 7s steps(1) infinite; }
@keyframes gl1 { 0%, 100% { opacity: 0; } 91% { opacity: .85; transform: translate(-.07em, .02em); clip-path: inset(8% 0 58% 0); } 93% { opacity: .85; transform: translate(.05em, -.02em); clip-path: inset(62% 0 6% 0); } 95% { opacity: 0; } }
@keyframes gl2 { 0%, 100% { opacity: 0; } 92% { opacity: .75; transform: translate(.06em, 0); clip-path: inset(34% 0 32% 0); } 94% { opacity: .75; transform: translate(-.04em, 0); clip-path: inset(4% 0 72% 0); } 96% { opacity: 0; } }

.ticker { overflow: hidden; padding: 1.15rem 0; border-block: 1px solid var(--line); background: rgba(7,11,21,.7); }
.ticker-track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 2.6rem; padding-left: 2.6rem; font: 600 1.45rem/1 var(--fd); letter-spacing: .03em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(170,200,255,.55); white-space: nowrap; }
.ticker span::after { content: "//"; font: 500 .95rem var(--fm); color: var(--cyan); -webkit-text-stroke: 0; }
@keyframes tick { to { transform: translateX(-50%); } }

/* 06 — CRIAÇÃO */
.dossies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.dossie { display: flex; flex-direction: column; }
.bp { position: relative; overflow: hidden; background: #050912; border-bottom: 1px solid var(--line); }
.bp-bar { display: flex; align-items: center; gap: .35rem; padding: .6rem .85rem; border-bottom: 1px solid var(--line); font: 400 .64rem var(--fm); color: var(--dim); }
.bp-bar i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(125,175,255,.28); }
.bp-bar span { margin-left: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-svg { width: 100%; height: auto; }
.bp-svg .f { fill: rgba(39,215,255,.8); } .bp-svg .d { fill: rgba(151,164,192,.36); } .bp-svg .b { fill: var(--cyan); }
.bp-svg .o { fill: none; stroke: rgba(39,215,255,.5); } .bp-svg .l { stroke: var(--line2); }
.bp-scan { position: absolute; inset: 0 0 auto; height: 34%; pointer-events: none; background: linear-gradient(transparent, rgba(39,215,255,.1)); border-bottom: 1px solid rgba(39,215,255,.55); animation: scan 5s linear infinite; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(310%); } }
.bp-inst .navs rect { fill: rgba(151,164,192,.4); animation: navp 4s steps(1) infinite; }
.bp-inst .navs rect:nth-child(2) { animation-delay: 1s; } .bp-inst .navs rect:nth-child(3) { animation-delay: 2s; } .bp-inst .navs rect:nth-child(4) { animation-delay: 3s; }
@keyframes navp { 0%, 25% { fill: var(--cyan); } 25.1%, 100% { fill: rgba(151,164,192,.4); } }
.bp-inst .cards rect { fill: rgba(39,215,255,.07); stroke: rgba(39,215,255,.42); }
.bp-hot .rings circle { fill: none; stroke: rgba(164,75,255,.5); transform-box: fill-box; transform-origin: center; animation: ringp 3.6s ease-out infinite; }
.bp-hot .rings circle:nth-child(2) { animation-delay: .5s; } .bp-hot .rings circle:nth-child(3) { animation-delay: 1s; }
@keyframes ringp { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.bp-hot .count rect { fill: rgba(5,9,18,.85); stroke: rgba(39,215,255,.55); }
.bp-hot .digits text { font: 700 15px var(--fm); fill: #fff; text-anchor: middle; }
.bp-hot .lbl text { font: 500 5px var(--fm); fill: var(--mut); text-anchor: middle; letter-spacing: .12em; }
.bp-hot .tick { animation: blink 1s steps(2) infinite; }
.bp-lp .ticks path { fill: none; stroke: var(--ok); stroke-width: 1.6; }
.bp-lp .fields rect { fill: rgba(125,175,255,.06); stroke: rgba(125,175,255,.38); }
.bp-lp .route { fill: none; stroke: rgba(39,215,255,.5); stroke-dasharray: 3 4; }
.bp-lp .lead-dot { fill: var(--ok); filter: drop-shadow(0 0 3px var(--ok)); }
.bp-lp .cta { animation: ctap 3.2s linear infinite; }
@keyframes ctap { 0%, 68% { fill: var(--cyan); } 72%, 88% { fill: var(--ok); } 100% { fill: var(--cyan); } }

.dossie-body { display: flex; flex-direction: column; flex: 1; padding: 1.7rem 1.6rem 1.6rem; }
.dossie h3 { font-size: 1.85rem; }
.dossie-claim { margin: .5rem 0 .9rem; font: 500 1.08rem/1.3 var(--fd); color: var(--tx); }
.dossie-body > p:not(.tag):not(.dossie-claim) { color: var(--mut); font-size: 1rem; }
.specs { margin: auto 0 1.6rem; padding-top: 1.4rem; }
.specs div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .9rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.specs dt { font: 500 .64rem/1.6 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.specs dd { font-size: .93rem; line-height: 1.45; }
.dossie .lnk { align-self: flex-start; }

.pick { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); margin-top: 1.5rem; }
.pick-q { padding: 2rem; }
.pick-q h3 { font-size: 1.5rem; max-width: 26rem; }
.pick-ask { margin: 1.4rem 0 .8rem; font: 500 .74rem var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.pick-opts { display: grid; gap: .5rem; }
.pick-opts button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .78rem 1rem; text-align: left; cursor: pointer; background: transparent; border: 1px solid var(--line); color: var(--mut); font-size: .98rem; line-height: 1.3; transition: border-color .2s, color .2s, background .2s; }
.pick-opts button::before { content: ""; flex: none; width: .6rem; height: .6rem; border: 1px solid var(--dim); transition: .2s; }
.pick-opts button:hover { color: var(--tx); border-color: var(--line2); }
.pick-opts button[aria-checked="true"] { color: var(--tx); border-color: var(--cyan); background: rgba(39,215,255,.07); }
.pick-opts button[aria-checked="true"]::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 .7rem var(--cyan); }
.pick-a { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .9rem; padding: 2rem; border-left: 1px solid var(--line); background: rgba(3,5,10,.55); }
.pick-k { font: 500 .68rem var(--fm); letter-spacing: .2em; text-transform: uppercase; color: var(--ok); }
.pick-k::before { content: "▸ "; }
.pick-t { font: 600 2.3rem/1.05 var(--fd); letter-spacing: -.03em; color: var(--cyan); }
.pick-d { color: var(--mut); margin-bottom: .6rem; min-height: 5em; }
.pick-a.swap .pick-t, .pick-a.swap .pick-d { animation: swap .45s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(.6rem); filter: blur(4px); } }

.sub-head { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin: 4.5rem 0 1.6rem; }
.sub-head h3 { font-size: 1.9rem; }
.sub-head p { color: var(--mut); }
.arsenal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.mini { padding: 1.5rem 1.4rem; }
.mini .ic { width: 1.7rem; height: 1.7rem; color: var(--cyan); margin-bottom: 1rem; }
.mini h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.mini p { font-size: .93rem; line-height: 1.55; color: var(--mut); }
.apoio { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.apoio .tag { margin: 0; }
.apoio ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.apoio li { padding: .5rem .85rem; border: 1px solid var(--line); font: 400 .74rem var(--fm); color: var(--mut); }

/* 07 — PROCESSO (cena fixa que avança com a rolagem) */
/* Sem JavaScript a cena vira uma seção comum, com as cinco fases abertas. */
html:not(.js) .build { height: auto; }
html:not(.js) .build-sticky { position: static; height: auto; padding: 7rem 0 5rem; }
html:not(.js) .ph-d { grid-template-rows: 1fr; }
.build { position: relative; height: calc(100vh + 5 * 68vh); height: calc(100svh + 5 * 68svh); background: linear-gradient(180deg, var(--bg), #060A14 30%, #060A14 70%, var(--bg)); }
.build-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--hh); overflow: hidden; }
.build-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: center; }
.build-l h2 { font-size: clamp(1.9rem, min(3.6vw, 6.4vh), 3.2rem); }
.phases { margin-top: clamp(.8rem, 3vh, 1.8rem); }
.ph { border-top: 1px solid var(--line); }
.ph:last-child { border-bottom: 1px solid var(--line); }
.ph button { display: flex; align-items: baseline; gap: 1.1rem; width: 100%; padding: clamp(.5rem, 1.5vh, .85rem) 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--dim); font: 600 1.3rem/1.2 var(--fd); letter-spacing: -.02em; transition: color .3s; }
.ph button:hover { color: var(--mut); }
.ph-n { font: 500 .72rem var(--fm); letter-spacing: .14em; }
.ph.on button { color: var(--tx); }
.ph.on .ph-n { color: var(--cyan); }
.ph-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.ph-d p { min-height: 0; overflow: hidden; padding-left: 2.35rem; max-width: 31rem; color: var(--mut); font-size: 1rem; line-height: 1.55; }
.ph-d p::after { content: ""; display: block; height: 1rem; }
.ph.on .ph-d { grid-template-rows: 1fr; }
.build-dots { display: none; gap: .5rem; justify-content: center; }
.build-dots i { width: 1.4rem; height: 2px; background: var(--line2); transition: background .3s; }
.build-dots i.on { background: var(--cyan); box-shadow: 0 0 .6rem var(--cyan); }

.bm { background: #050912; border-color: var(--line2); box-shadow: 0 2rem 6rem rgba(0,0,0,.6), 0 0 6rem rgba(48,131,255,.13); transition: border-color .6s, box-shadow .6s; }
.bm-bar { display: flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .9rem; border-bottom: 1px solid var(--line); font: 400 .72rem var(--fm); color: var(--mut); }
.bm-bar > i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(125,175,255,.28); }
.bm-url { flex: 1; display: flex; align-items: center; gap: .5rem; margin: 0 .8rem; padding: .32rem .7rem; background: rgba(125,175,255,.06); border: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.bm-url .ic { width: .8rem; height: .8rem; opacity: .3; transition: opacity .4s, color .4s; }
.bm-on { font-weight: 700; letter-spacing: .16em; color: var(--ok); opacity: 0; transition: opacity .4s; }
.bm-on::before { content: "● "; }
.bm-view { position: relative; aspect-ratio: 16/9.4; overflow: hidden; }
.bm-notes { position: absolute; inset: 0; transition: opacity .5s; }
.bm-notes .n { position: absolute; max-width: 46%; padding: .5rem .7rem; border: 1px dashed rgba(39,215,255,.5); background: rgba(39,215,255,.045); font: 400 .72rem/1.45 var(--fm); color: var(--tx); animation: float 6s ease-in-out infinite; }
.bm-notes .n b { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .18em; color: var(--cyan); }
.n1 { left: 7%; top: 11%; } .n2 { right: 7%; top: 21%; animation-delay: -1.5s !important; } .n3 { left: 11%; bottom: 17%; animation-delay: -3s !important; } .n4 { right: 9%; bottom: 9%; animation-delay: -4.5s !important; }
@keyframes float { 50% { transform: translateY(-.4rem); } }
.cross { position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem; border: 1px solid rgba(39,215,255,.55); border-radius: 50%; animation: spin 12s linear infinite; }
.cross::before, .cross::after { content: ""; position: absolute; background: rgba(39,215,255,.7); }
.cross::before { left: 50%; top: -35%; bottom: -35%; width: 1px; } .cross::after { top: 50%; left: -35%; right: -35%; height: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.bm-page { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 6%; padding: 5% 6%; opacity: 0; transform: scale(.96); transition: opacity .5s, transform .6s var(--ease), left .6s var(--ease); }
.w { display: block; border: 1px dashed rgba(39,215,255,.5); transition: background .6s, border-color .6s, box-shadow .6s; }
.bm-nav { display: flex; align-items: center; justify-content: space-between; }
.bm-nav b { width: 14%; height: .9rem; }
.bm-nav span { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; width: 55%; }
.bm-nav span i { width: 13%; height: .32rem; } .bm-nav span u { width: 24%; height: 1.05rem; }
.bm-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6%; align-items: center; min-height: 0; }
.bm-copy { display: grid; gap: .55rem; }
.t1 { width: 92%; height: 1.25rem; } .t2 { width: 64%; height: 1.25rem; } .p1 { width: 84%; height: .32rem; margin-top: .3rem; } .p2 { width: 58%; height: .32rem; }
.bm-copy u { width: 42%; height: 1.55rem; margin-top: .5rem; }
.bm-art { height: 100%; min-height: 5rem; }
.bm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.bm-cards i { height: 2.6rem; }
.st2 .bm-notes { opacity: 0; }
.st2 .bm-page { opacity: 1; transform: none; }
.st3 .w { border-style: solid; border-color: transparent; }
.st3 .bm-nav b { background: var(--cyan); }
.st3 .bm-nav span i { background: rgba(233,238,249,.35); }
.st3 .bm-nav span u { background: rgba(39,215,255,.14); border-color: var(--cyan); }
.st3 .t1, .st3 .t2 { background: #E9EEF9; }
.st3 .p1, .st3 .p2 { background: rgba(151,164,192,.5); }
.st3 .bm-copy u { background: var(--cyan); box-shadow: 0 0 1.4rem rgba(39,215,255,.55); }
.st3 .bm-art { background: radial-gradient(circle at 28% 30%, rgba(39,215,255,.75), transparent 55%), radial-gradient(circle at 76% 72%, rgba(164,75,255,.75), transparent 55%), #0B1730; }
.st3 .bm-cards i { background: rgba(125,175,255,.1); border-color: var(--line2); }
.bm-code { position: absolute; inset: 0 54% 0 0; padding: 4%; overflow: hidden; background: #03060C; border-right: 1px solid var(--line2); transform: translateX(-101%); transition: transform .6s var(--ease); }
.bm-code pre { font: 400 .66rem/1.7 var(--fm); color: #B7C3DD; }
.bm-code .k { color: #6FB6FF; } .bm-code .a { color: #B48CFF; } .bm-code .s { color: #7CF2C3; } .bm-code .c { color: var(--dim); }
[data-stage="4"] .bm-code { transform: none; }
[data-stage="4"] .bm-page { left: 46%; }
.bm-checks { position: absolute; right: 4%; bottom: 6%; display: grid; gap: .35rem; }
.bm-checks li { padding: .35rem .6rem; background: rgba(3,6,12,.92); border: 1px solid rgba(45,255,179,.5); color: var(--ok); font: 500 .62rem var(--fm); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(1rem); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.bm-checks li::before { content: "✓ "; }
[data-stage="4"] .bm-checks li { opacity: 1; transform: none; }
[data-stage="4"] .bm-checks li:nth-child(1) { transition-delay: .5s; } [data-stage="4"] .bm-checks li:nth-child(2) { transition-delay: .7s; }
[data-stage="4"] .bm-checks li:nth-child(3) { transition-delay: .9s; } [data-stage="4"] .bm-checks li:nth-child(4) { transition-delay: 1.1s; }
.bm-live { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.bm-live i { position: absolute; left: 50%; top: 50%; width: 6%; aspect-ratio: 1; border: 1px solid var(--ok); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; animation: live 2.7s ease-out infinite; }
.bm-live i:nth-child(2) { animation-delay: .9s; } .bm-live i:nth-child(3) { animation-delay: 1.8s; }
@keyframes live { 0% { width: 6%; opacity: .9; } 100% { width: 125%; opacity: 0; } }
.st5 .bm-live { opacity: 1; }
.st5 .bm-url .ic { opacity: 1; color: var(--ok); }
.st5 .bm-on { opacity: 1; }
.st5 .bm { border-color: rgba(45,255,179,.55); box-shadow: 0 2rem 6rem rgba(0,0,0,.6), 0 0 7rem rgba(45,255,179,.16); }
.bm-log { display: flex; align-items: center; gap: .3rem; margin-top: 1.1rem; min-height: 1.5em; font: 400 .78rem var(--fm); color: var(--mut); }
.caret { width: .5rem; height: 1em; background: var(--cyan); animation: blink 1s steps(2) infinite; }

/* 08 — PADRÃO */
.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.chk { padding: 1.6rem 1.5rem 1.7rem; overflow: hidden; }
.chk .ic { width: 1.8rem; height: 1.8rem; color: var(--cyan); margin-bottom: 1.1rem; }
.chk h3 { font-size: 1.22rem; margin-bottom: .55rem; }
.chk p { font-size: .95rem; line-height: 1.55; color: var(--mut); }
.chk-s { position: absolute; top: 1.3rem; right: 1.3rem; padding: .22rem .5rem; border: 1px solid rgba(45,255,179,.5); color: var(--ok); font: 700 .64rem var(--fm); letter-spacing: .16em; opacity: 0; transform: scale(.7); transition: opacity .4s var(--ease) calc(var(--d, 0s) + 1s), transform .4s var(--ease) calc(var(--d, 0s) + 1s); }
.chk-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--ok)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--d, 0s) + .2s); }
.chk.in .chk-s, .qa .chk-s { opacity: 1; transform: none; }
.chk.in .chk-bar, .qa .chk-bar { transform: scaleX(1); }

/* 09 — TERMINAL */
.term-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: center; }
.term-grid .sec-head { margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.chips button { padding: .55rem .9rem; cursor: pointer; background: rgba(39,215,255,.05); border: 1px solid var(--line2); color: var(--cyan); font: 500 .78rem var(--fm); transition: background .2s, color .2s; }
.chips button::before { content: "$ "; color: var(--dim); }
.chips button:hover { background: var(--cyan); color: #021018; }
.chips button:hover::before { color: #021018; }
.term { background: #03050A; border-color: var(--line2); box-shadow: 0 2rem 6rem rgba(0,0,0,.6), 0 0 6rem rgba(48,131,255,.1); }
.term-bar { display: flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .9rem; border-bottom: 1px solid var(--line); font: 400 .72rem var(--fm); color: var(--mut); }
.term-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(125,175,255,.28); }
.term-bar span { margin-left: .8rem; flex: 1; }
.term-bar b { font-weight: 500; letter-spacing: .16em; color: var(--ok); }
.term-out { height: 23rem; overflow-y: auto; padding: 1.1rem 1.3rem; font: 400 .84rem/1.75 var(--fm); color: #B7C3DD; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.term-out .cmd { color: var(--tx); }
.term-out .cmd::before { content: "visitante@nexa:~$ "; color: var(--ok); }
.term-out .hl { color: var(--cyan); } .term-out .ok { color: var(--ok); } .term-out .warn { color: var(--amb); } .term-out .dim { color: var(--dim); }
.term-out a { color: var(--cyan); }
.term-in { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.3rem; border-top: 1px solid var(--line); font: 400 .84rem var(--fm); }
.term-in label { color: var(--ok); white-space: nowrap; }
.term-in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--tx); caret-color: var(--cyan); }
.term-in input::placeholder { color: var(--dim); }

/* 10 — ENGENHARIA */
.fronts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.front { padding: 1.7rem 1.5rem; }
.front > .ic { width: 1.9rem; height: 1.9rem; color: var(--cyan); margin-bottom: 1.1rem; }
.front h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.front li, .op li { position: relative; padding: .28rem 0 .28rem 1.2rem; font-size: .95rem; line-height: 1.45; color: var(--mut); }
.front li::before, .op li::before { content: "▸"; position: absolute; left: 0; color: var(--cyan); font-size: .8em; top: .42rem; }
.eng-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; margin-top: 4rem; }
.op p { margin-bottom: .7rem; }
.op li { color: var(--tx); }
.modes ol { counter-reset: m; border-top: 1px solid var(--line); }
.modes ol li { counter-increment: m; display: grid; grid-template-columns: 2.4rem 1fr; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.modes ol li::before { content: "0" counter(m); grid-row: span 2; font: 500 .72rem/1.9 var(--fm); letter-spacing: .12em; color: var(--cyan); }
.modes ol b { font: 600 1.02rem/1.3 var(--fd); }
.modes ol span { font-size: .92rem; color: var(--mut); line-height: 1.45; }
.stack-tag { margin-top: 2rem; }
.stack { display: flex; flex-wrap: wrap; gap: .45rem; }
.stack li { padding: .42rem .75rem; border: 1px solid var(--line); font: 400 .74rem var(--fm); color: var(--mut); transition: color .2s, border-color .2s; }
.stack li:hover { color: var(--cyan); border-color: var(--cyan); }

/* 11 — SOBRE */
.about { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 4.5rem; align-items: start; }
.file { padding: 1.7rem; position: sticky; top: calc(var(--hh) + 2rem); }
.file-h { display: flex; justify-content: space-between; font: 500 .66rem var(--fm); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.file-h span:last-child { color: var(--cyan); }
.file-av { position: relative; display: grid; place-items: center; height: 11rem; margin: 1.3rem 0 1.5rem; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 50%, rgba(48,131,255,.22), transparent 62%), linear-gradient(rgba(125,175,255,.06) 1px, transparent 1px) 0 0/1.2rem 1.2rem, linear-gradient(90deg, rgba(125,175,255,.06) 1px, transparent 1px) 0 0/1.2rem 1.2rem; }
.file-av svg { width: 6.5rem; height: 4.55rem; filter: drop-shadow(0 0 1.4rem rgba(48,131,255,.8)); }
.file-av i { position: absolute; inset: 0 0 auto; height: 2px; background: var(--cyan); box-shadow: 0 0 1rem var(--cyan); animation: idscan 3.4s ease-in-out infinite alternate; }
@keyframes idscan { to { transform: translateY(11rem); } }
.file dl div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .9rem; padding: .62rem 0; border-top: 1px solid var(--line); }
.file dt { font: 500 .64rem/1.7 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.file dd { font-size: .95rem; line-height: 1.4; }
.file dd.ok { display: flex; align-items: center; gap: .55rem; color: var(--ok); }
.file .lnk { margin-top: 1.3rem; }
.about .sec-head { margin-bottom: 2.6rem; }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.val { padding: 1.6rem 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.val .ic { width: 1.6rem; height: 1.6rem; color: var(--cyan); margin-bottom: .9rem; }
.val h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.val p { font-size: .95rem; line-height: 1.55; color: var(--mut); }

/* 12 — DÚVIDAS */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4.5rem; align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--hh) + 2rem); margin-bottom: 0; }
.faq-grid .sec-head .btn { margin-top: 1.8rem; }

/* 13 — BRIEFING */
.brief { overflow: clip; }
.brief::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50rem 32rem at 85% 30%, rgba(48,131,255,.14), transparent 62%), radial-gradient(34rem 26rem at 0% 90%, rgba(164,75,255,.1), transparent 62%); }
.brief-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4.5rem; align-items: start; }
.brief .sec-head { margin-bottom: 2.4rem; }
.channels li + li { border-top: 1px solid var(--line); }
.channels a, .channels .ch { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 0; color: var(--tx); text-decoration: none; transition: color .2s; }
.channels a:hover { color: var(--cyan); }
.channels .ic { width: 1.5rem; height: 1.5rem; color: var(--cyan); }
.channels b { display: block; font: 500 .64rem var(--fm); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.form { padding: 2rem; display: grid; gap: 1.15rem; }
.form-h { display: flex; justify-content: space-between; align-items: center; font: 500 .68rem var(--fm); letter-spacing: .2em; text-transform: uppercase; color: var(--mut); }
.form-id { padding: .22rem .55rem; border: 1px solid var(--red); color: var(--red); letter-spacing: .22em; transform: rotate(-2deg); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fld { display: grid; gap: .45rem; }
.fld > span, .fmt legend { font: 500 .66rem var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.fld input, .fld textarea { width: 100%; padding: .85rem .95rem; background: rgba(125,175,255,.05); border: 1px solid var(--line); border-radius: 0; color: var(--tx); font: 400 1rem/1.4 var(--fb); transition: border-color .2s, box-shadow .2s, background .2s; }
.fld textarea { resize: vertical; min-height: 6.5rem; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--dim); }
.fld input:focus, .fld textarea:focus { outline: 0; border-color: var(--cyan); background: rgba(39,215,255,.06); box-shadow: 0 0 0 3px rgba(39,215,255,.12); }
.fld input.bad { border-color: var(--red); }
.fmt { border: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fmt legend { margin-bottom: .6rem; }
.fmt label { cursor: pointer; }
.fmt input { position: absolute; opacity: 0; pointer-events: none; }
.fmt span { display: block; padding: .55rem .9rem; border: 1px solid var(--line); font: 400 .8rem var(--fm); color: var(--mut); transition: .2s; }
.fmt label:hover span { color: var(--tx); border-color: var(--line2); }
.fmt input:checked + span { color: #021018; background: var(--cyan); border-color: var(--cyan); }
.fmt input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
.consent { display: flex; gap: .8rem; align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--mut); cursor: pointer; }
.consent input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--cyan); }
.form-msg { padding: .7rem .9rem; border: 1px solid var(--amb); color: var(--amb); font: 400 .82rem/1.5 var(--fm); }
.form-msg.good { border-color: var(--ok); color: var(--ok); }
.form-btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.form-btns .btn { flex: 1 1 14rem; }
.form-btns .btn:hover .ic { transform: none; }

/* 14 — RODAPÉ */
.ftr { border-top: 1px solid var(--line); background: #03050A; padding: 4rem 0 0; }
.ftr-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 3rem; padding-bottom: 3rem; }
.ftr-a p { margin-top: 1.2rem; max-width: 22rem; font-size: .95rem; color: var(--mut); }
.ftr h4 { margin-bottom: 1rem; font: 500 .68rem var(--fm); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ftr nav a { display: block; padding: .3rem 0; font-size: .95rem; color: var(--mut); text-decoration: none; transition: color .2s; }
.ftr nav a:hover { color: var(--cyan); }
.ftr-b { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; padding: 1.4rem 0 1.6rem; border-top: 1px solid var(--line); font: 400 .7rem var(--fm); letter-spacing: .08em; color: var(--dim); }
.ftr-b a { color: var(--mut); text-decoration: none; }
.ftr-b a:hover { color: var(--cyan); }
.ftr-st { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; margin-right: 4.5rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ok); }

.wa { position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 95; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25D366; color: #04130A; box-shadow: 0 .6rem 2rem rgba(37,211,102,.4); transition: transform .25s var(--ease); }
.wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #25D366; animation: wap 2.6s ease-out infinite; }
@keyframes wap { to { transform: scale(1.7); opacity: 0; } }
.wa:hover { transform: scale(1.08); }
.wa .ic { width: 1.8rem; height: 1.8rem; }

/* 15 — PÁGINAS INTERNAS (privacidade, 404) */
.page-inner .hdr { background: rgba(4,6,11,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--line); }
.page { padding: calc(var(--hh) + 4.5rem) 0 6rem; min-height: 80vh; }
.prose { max-width: 46rem; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.035em; margin-bottom: 1.5rem; }
.prose h2 { font-size: 1.4rem; letter-spacing: -.02em; margin: 2.4rem 0 .7rem; }
.prose p, .prose li { color: var(--mut); }
.prose p + p { margin-top: .9rem; }
.prose ul { margin: .6rem 0; }
.prose li { position: relative; padding: .2rem 0 .2rem 1.3rem; }
.prose li::before { content: "▸"; position: absolute; left: 0; color: var(--cyan); }
.prose strong { color: var(--tx); }
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--hh) 0 3rem; position: relative; overflow: clip; }
.lost::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(125,175,255,.05) 1px, transparent 1px) 0 0/4.5rem 4.5rem, linear-gradient(90deg, rgba(125,175,255,.05) 1px, transparent 1px) 0 0/4.5rem 4.5rem; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); }
.lost-in { position: relative; display: grid; justify-items: center; gap: 1.2rem; }
.lost-n { font: 700 clamp(6rem, 22vw, 15rem)/.9 var(--fd); letter-spacing: -.06em; }
.lost-n em { font-style: normal; color: var(--cyan); }
.lost p { color: var(--mut); max-width: 30rem; }
.lost pre { font: 400 .8rem/1.8 var(--fm); color: var(--dim); text-align: left; }

/* 16 — TELAS MENORES */
@media (max-width: 1199px) {
  .arsenal, .checks, .fronts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 1.3rem; }
}
@media (max-width: 1023px) {
  :root { --hh: 4.2rem; }
  .nav { position: fixed; inset: var(--hh) 0 0; z-index: 99; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 4vw 2rem; overflow-y: auto; background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(-.8rem); transition: opacity .25s, transform .25s var(--ease), visibility .25s; }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav a:not(.btn) { padding: 1.05rem 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)::after { display: none; }
  .nav-cta { display: inline-flex; margin-top: 1.6rem; }
  .burger { display: grid; }
  .hdr-r .btn-sm { display: none; }
  .hdr.menu-open { background: rgba(4,6,11,.98); }

  .globe-wrap { right: -26%; width: min(86vw, 100vh); opacity: .75; }
  .g-tag { display: none; }
  .dossies { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; }
  .pick, .term-grid, .eng-grid, .about, .faq-grid, .brief-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pick { gap: 0; }
  .pick-a .btn { white-space: normal; text-align: center; line-height: 1.4; max-width: 100%; }
  .pick-a { border-left: 0; border-top: 1px solid var(--line); }
  .file, .faq-grid .sec-head { position: static; }
  .file { max-width: 30rem; }
  .ftr-in { grid-template-columns: 1fr 1fr; }
  .ftr-a { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .build { height: calc(100svh + 5 * 60svh); }
  .build-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .build-l { display: contents; }
  .build-l .eyebrow { order: 1; margin-bottom: 0; }
  .build-l h2 { order: 2; font-size: clamp(1.6rem, 6.4vw, 2.2rem); }
  .build-r { order: 3; }
  .phases { order: 4; margin-top: 0; min-height: 9.5rem; }
  .build-dots { order: 5; display: flex; }
  .ph, .ph:last-child { display: none; border: 0; }
  .ph.on { display: block; }
  .ph button { padding: 0 0 .3rem; pointer-events: none; font-size: 1.35rem; }
  .ph-d p { padding-left: 0; max-width: none; }
  .ph-d { grid-template-rows: 1fr; }
  .bm-view { aspect-ratio: 16/10.6; }
  .bm-notes .n { font-size: .6rem; padding: .35rem .5rem; }
  .bm-code pre { font-size: .48rem; }
  .bm-checks li { font-size: .52rem; padding: .25rem .4rem; }
  .bm-log { font-size: .68rem; margin-top: .7rem; }
  .t1, .t2 { height: .8rem; } .bm-copy u { height: 1.1rem; } .bm-cards i { height: 1.6rem; } .bm-art { min-height: 3.5rem; }
}
@media (max-width: 767px) {
  h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .lead { font-size: 1.08rem; }
  .sec-head { margin-bottom: 2.2rem; }
  .hero { justify-content: flex-start; padding: calc(var(--hh) + 5vh) 0 0; min-height: max(100svh, 40rem); }
  .h1 { font-size: min(13.2vw, 4.2rem); }
  .globe-wrap { right: auto; left: 50%; top: auto; bottom: -24%; width: 128vw; transform: translateX(-50%); opacity: .9; }
  .hero-facts { display: none; }
  .hero .eyebrow { font-size: .64rem; letter-spacing: .15em; gap: .6rem; }
  .cta-row .btn { flex: 1 1 auto; }
  .ticker span { font-size: 1.15rem; }
  .arsenal, .checks, .fronts, .values, .row { grid-template-columns: minmax(0, 1fr); }
  .pick-q, .pick-a, .form { padding: 1.4rem; }
  .pick-t { font-size: 1.9rem; }
  .pick-d { min-height: 0; }
  .sub-head { margin-top: 3.2rem; }
  .eng-grid { margin-top: 2.8rem; }
  .term-out { height: 19rem; font-size: .76rem; padding: .9rem 1rem; }
  .term-in { padding: .8rem 1rem; }
  .term-in input { font-size: 16px; }
  .term-in label span[aria-hidden] { font-size: 0; }
  .term-in label span[aria-hidden]::after { content: "$"; font-size: .9rem; }
  .ftr-in { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ftr-st { margin: 0; }
  .ftr-b { padding-bottom: 5.5rem; }
}

/* Imagem de compartilhamento (?og): só marca, título e globo */
.og .nav, .og .hdr-r, .og .wa, .og .hero-facts, .og .hudf, .og .g-tag, .og .cta-row { display: none !important; }
.og .hero-lead { font-size: 1.5rem; max-width: 30rem; }
.og .glitch::before, .og .glitch::after { display: none; }

/* 17 — MOVIMENTO REDUZIDO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
}