/* LATITUDEX — site institucional. Brutalismo sobre a identidade: grafite, névoa, petróleo, gelo; cantos retos; Urbanist + Inter + Cascadia Mono. */
@font-face { font-family: "Urb"; src: url("../fonts/Urbanist-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Int"; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Mono"; src: url("../fonts/CascadiaMono.ttf") format("truetype"); font-display: swap; }

:root {
  --preto: #050506;
  --g0: #0A0C0D;
  --g1: #0E1011;
  --g2: #15191B;
  --g3: #1E2427;
  --nevoa: #E9ECEC;
  --nevoa2: #DADFE0;
  --gelo: #DCE6EE;
  --azul-gelo: #A8BECF;
  --pet: #0F2B2F;
  --pet-m: #4E6C6F;
  --sinal: #7FD6E6;
  --line: rgba(233, 236, 236, .14);
  --line-strong: rgba(233, 236, 236, .32);
  --mu: rgba(233, 236, 236, .58);
  --gut: clamp(16px, 2.2vw, 36px);
  --nav: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--g0); color: var(--nevoa); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font-family: "Int", system-ui, sans-serif; font-size: 16px; line-height: 1.55; background: var(--g0); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--sinal); color: var(--g0); }
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 3px; }

.mono { font-family: "Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mu { color: var(--mu); }
.disp { font-family: "Urb", sans-serif; font-weight: 500; letter-spacing: -.045em; line-height: .92; }
.w { display: inline-block; }
.line-mask { display: block; overflow: hidden; padding: .04em .12em .24em; margin: -.04em -.12em -.24em; }
.line-mask > span { display: inline-block; }

/* ---------------------------------------------------------------- grão fixo */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------------------------------------------------------------- navegação */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav); z-index: 80; display: grid; grid-template-columns: auto 1fr auto auto; align-items: stretch;
  background: rgba(10, 12, 13, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav > * { display: flex; align-items: center; padding: 0 var(--gut); }
.nav .brand { border-right: 1px solid var(--line); }
.nav .brand svg { height: 17px; width: auto; fill: var(--nevoa); }
.nav .links { gap: 30px; font-size: 14px; font-weight: 500; }
.nav .links a { position: relative; color: var(--mu); transition: color .3s var(--ease); }
.nav .links a:hover, .nav .links a.on { color: var(--nevoa); }
.nav .links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--sinal); transition: right .4s var(--ease); }
.nav .links a.on::after { right: 0; }
.nav .lang { gap: 2px; border-left: 1px solid var(--line); }
.nav .lang button { font-family: "Mono"; font-size: 12px; letter-spacing: .1em; padding: 6px 8px; color: var(--mu); }
.nav .lang button[aria-pressed="true"] { color: var(--g0); background: var(--nevoa); }
.nav .client { border-left: 1px solid var(--line); font-size: 14px; font-weight: 600; gap: 10px; transition: background .3s var(--ease), color .3s var(--ease); }
.nav .client:hover { background: var(--nevoa); color: var(--g0); }
.progress { position: fixed; top: var(--nav); left: 0; right: 0; height: 2px; z-index: 81; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--sinal); transform-origin: 0 50%; transform: scaleX(0); }
.menu-btn { display: none !important; }

/* ---------------------------------------------------------------- botões */
.btn { --bg: var(--nevoa); --fg: var(--g0); position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px; font-weight: 600; font-size: 15px; white-space: nowrap;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg); overflow: hidden; isolation: isolate; transition: transform .2s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--sinal); transform: translateY(101%); transition: transform .45s var(--ease); z-index: -1; }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn i { font-size: 18px; }
.btn.ghost { --bg: transparent; --fg: var(--nevoa); border-color: var(--line-strong); }
.btn.ghost:hover { color: var(--g0); }
.btn.dark { --bg: var(--g0); --fg: var(--nevoa); }
.btn.dark:hover { color: var(--g0); }

/* ---------------------------------------------------------------- palco do hero + respiro */
.stage { position: relative; background: var(--g0); display: flex; flex-direction: column; }
html.motion .stage { display: block; height: 100dvh; min-height: 640px; overflow: hidden; }
.hero { position: relative; min-height: 100dvh; order: 1; padding-top: var(--nav); display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto; }
html.motion .hero { position: absolute; inset: 0; min-height: 0; }
.hero-copy { grid-column: 1 / 7; grid-row: 1; padding: clamp(28px, 5vh, 64px) var(--gut) 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.hero h1 { font-size: clamp(44px, 5vw, 88px); margin-top: auto; }
.hero .sub { max-width: 30ch; font-size: clamp(16px, 1.15vw, 19px); color: var(--mu); margin-top: 28px; }
.hero .ctas { display: flex; gap: 10px; margin: 34px 0 clamp(28px, 5vh, 56px); flex-wrap: wrap; }
.hero-media { grid-column: 7 / 13; grid-row: 1; position: relative; overflow: hidden; }
.hero-media img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: 70% 50%; }
.hero-media .tag { position: absolute; left: var(--gut); bottom: 22px; z-index: 2; color: var(--g1); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,13,.55), rgba(10,12,13,0) 40%); pointer-events: none; }
.wordmark { position: absolute; left: var(--gut); right: var(--gut); top: calc(100dvh - (100vw - 2 * var(--gut)) * 0.1431 - var(--gut) * .6); z-index: 5; pointer-events: none; }
html.motion .wordmark { top: auto; bottom: calc(var(--gut) * .6); }
.wordmark svg { display: block; width: 100%; height: auto; fill: var(--nevoa); overflow: visible; }
.wm-band { grid-column: 1 / 13; grid-row: 2; border-top: 1px solid var(--line); height: calc((100vw - 2 * var(--gut)) * 0.1431 + var(--gut) * 1.2); }

.respiro { position: relative; order: 3; min-height: 90vh; z-index: 4; background: radial-gradient(70% 90% at 50% 40%, #16393E 0%, var(--pet) 45%, #0B1D20 100%); display: flex; align-items: center; }
html.motion .respiro { position: absolute; inset: 0; min-height: 0; clip-path: inset(0 0 0 100%); }
.respiro .beam { position: absolute; top: 0; bottom: 0; width: 2px; left: var(--gx, 92%); background: linear-gradient(180deg, transparent, rgba(220,230,238,.95) 50%, transparent); box-shadow: 0 0 60px 18px rgba(127,214,230,.18); }
.respiro .r-inner { position: relative; padding: 0 var(--gut); width: 100%; }
.respiro h2 { font-size: clamp(40px, 7.4vw, 128px); max-width: 14ch; }
.respiro p { margin-top: 30px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 21px); color: rgba(233,236,236,.72); }

/* ---------------------------------------------------------------- manifesto */
.manifesto { position: relative; background: #0B1D20; padding: clamp(80px, 14vh, 160px) var(--gut) 0; }
.manifesto .big { font-family: "Urb"; font-weight: 500; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(30px, 3.9vw, 66px); max-width: 26ch; }
.manifesto .big .w { opacity: .16; }
.stats { margin-top: clamp(80px, 12vh, 140px); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-top: 1px solid var(--line); margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); }
.stat { padding: 34px var(--gut) 40px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; }
.stat:last-child { border-right: 0; }
.stat .n { font-family: "Urb"; font-weight: 500; letter-spacing: -.05em; line-height: .9; font-size: clamp(64px, 8.4vw, 150px); }
.stat:first-child { background: var(--gelo); color: var(--g0); }
.stat:first-child .mu { color: rgba(14,16,17,.6); }

/* ---------------------------------------------------------------- produtos */
.products { position: relative; background: var(--g0); overflow: hidden; }
.shutter { position: absolute; inset: 0; z-index: 6; display: none; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.shutter i { background: #0B1D20; transform-origin: 50% 0; }
html.motion .shutter { display: grid; }
.p-track { display: flex; height: 100dvh; min-height: 640px; padding-top: var(--nav); overflow-x: auto; }
html.motion .p-track { overflow: visible; }
.p-intro { flex: 0 0 min(46vw, 760px); border-right: 1px solid var(--line); padding: clamp(32px, 6vh, 70px) var(--gut) calc(clamp(24px, 4vh, 48px) + 50px); display: flex; flex-direction: column; justify-content: space-between; }
.p-intro h2 { font-size: clamp(52px, 6.2vw, 112px); }
.p-intro p { max-width: 34ch; color: var(--mu); font-size: 17px; }
.panel { position: relative; flex: 0 0 min(78vw, 1320px); border-right: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.1fr; }
.panel .info { padding: clamp(28px, 5vh, 70px) var(--gut) calc(clamp(24px, 4vh, 48px) + 96px); min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.panel .cat { display: flex; justify-content: space-between; gap: 12px; }
.panel .name { margin-top: auto; padding-top: 16px; font-size: clamp(60px, 7.6vw, 140px); }
.panel .name svg { height: clamp(44px, 5.4vw, 92px); width: auto; max-width: 100%; fill: var(--nevoa); display: block; }
.panel .desc { margin-top: clamp(14px, 2.4vh, 26px); font-size: clamp(17px, 1.25vw, 21px); max-width: 30ch; }
.panel .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(14px, 2.4vh, 26px); }
.panel .facts span { font-family: "Mono"; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 7px 10px; }
.panel .interest { margin-top: clamp(16px, 2.8vh, 30px); align-self: flex-start; flex: none; }
.panel .media { position: relative; overflow: hidden; background: var(--g1); }
.panel .media img { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; object-fit: cover; }
.p-end { flex: 0 0 34vw; display: flex; align-items: flex-end; padding: clamp(32px, 6vh, 70px) var(--gut) calc(clamp(24px, 4vh, 48px) + 50px); }
.p-end p { font-family: "Urb"; font-weight: 500; font-size: clamp(30px, 3vw, 54px); letter-spacing: -.03em; line-height: 1; }
.p-rail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; border-top: 1px solid var(--line); background: rgba(10,12,13,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.p-rail button { flex: 1; padding: 14px var(--gut); text-align: left; font-family: "Mono"; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); border-right: 1px solid var(--line); position: relative; transition: color .3s; }
.p-rail button:last-child { border-right: 0; }
.p-rail button.on { color: var(--nevoa); }
.p-rail button::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--sinal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.p-rail button.on::before { transform: scaleX(1); }

/* ---------------------------------------------------------------- mercados (bloco claro, único) */
.markets { position: relative; background: var(--nevoa); color: var(--g1); overflow: hidden; }
.markets .stripes { position: absolute; inset: 0; z-index: 6; display: none; grid-template-rows: repeat(10, 1fr); pointer-events: none; }
.markets .stripes i { background: var(--g0); }
html.motion .markets .stripes { display: grid; }
.m-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; padding-top: var(--nav); }
.m-left { padding: clamp(40px, 8vh, 90px) var(--gut); border-right: 1px solid rgba(14,16,17,.14); display: flex; flex-direction: column; }
.m-left h2 { font-size: clamp(48px, 5.8vw, 104px); }
.m-left .lead { margin-top: 26px; max-width: 40ch; color: rgba(14,16,17,.68); font-size: 18px; }
.certs { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(14,16,17,.18); }
.cert { padding: 20px 18px 22px; border-right: 1px solid rgba(14,16,17,.18); }
.cert:last-child { border-right: 0; }
.cert b { display: block; font-family: "Urb"; font-weight: 600; font-size: clamp(28px, 2.6vw, 44px); letter-spacing: -.03em; line-height: 1; }
.cert span { display: block; margin-top: 10px; color: rgba(14,16,17,.62); }
.m-right { position: relative; display: grid; grid-template-columns: 110px 1fr; }
.ruler { position: relative; border-right: 1px solid rgba(14,16,17,.14); }
.ruler .tick { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); font-family: "Mono"; font-size: 11px; letter-spacing: .06em; color: rgba(14,16,17,.55); padding-left: 14px; }
.ruler .tick::after { content: ""; flex: 1; height: 1px; background: rgba(14,16,17,.25); }
.ruler .tick.major { color: var(--g1); }
.meter { position: relative; }
.meter .lat-line { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px solid var(--g1); z-index: 2; }
.meter .lat-line::before { content: ""; position: absolute; left: -110px; width: 110px; top: -2px; border-top: 2px solid var(--g1); }
.meter .capricornio { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(14,16,17,.4); z-index: 1; }
.meter .capricornio span { position: absolute; right: 18px; top: 6px; }
.meter .equador { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(14,16,17,.4); }
.meter .equador span { position: absolute; right: 18px; top: 6px; }
.readout { position: absolute; left: 28px; z-index: 3; transform: translateY(calc(-100% - 14px)); }
.readout .deg { font-family: "Urb"; font-weight: 500; font-size: clamp(56px, 6vw, 110px); letter-spacing: -.05em; line-height: .9; }
.readout .city { margin-top: 8px; }
.cities { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(14,16,17,.14); background: var(--nevoa); }
.cities button { min-width: 0; text-align: left; padding: 16px 18px; border-right: 1px solid rgba(14,16,17,.14); border-bottom: 1px solid rgba(14,16,17,.14); transition: background .3s var(--ease), color .3s var(--ease); }
.cities button:nth-child(3n) { border-right: 0; }
.cities button b { display: block; font-family: "Urb"; font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.cities button span { display: block; font-family: "Mono"; font-size: 11px; letter-spacing: .08em; color: rgba(14,16,17,.55); margin-top: 2px; }
.cities button.on, .cities button:hover { background: var(--g1); color: var(--nevoa); }
.cities button.on span, .cities button:hover span { color: rgba(233,236,236,.6); }

/* ---------------------------------------------------------------- faixa de marca */
.faixa { position: relative; z-index: 2; background: var(--g0); }
.ev-hero { position: relative; aspect-ratio: 16 / 9; max-height: 100dvh; width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); }
.ev-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- contato */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; border-bottom: 1px solid var(--line); min-height: min(86vh, 820px); }
.ct-left { position: relative; padding: clamp(60px, 12vh, 140px) var(--gut); border-right: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.ct-left h2 { font-size: clamp(52px, 6.6vw, 118px); position: relative; z-index: 2; }
.ct-left p { margin-top: 26px; margin-bottom: 64px; max-width: 34ch; color: var(--mu); position: relative; z-index: 2; font-size: 18px; }
.ct-left .bg { position: absolute; inset: 0; opacity: .38; }
.ct-left .bg img { width: 100%; height: 100%; object-fit: cover; }
.ct-left .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--g0) 10%, rgba(10,12,13,.35) 60%, var(--g0)); }
.channels { margin-top: auto; position: relative; z-index: 2; border-top: 1px solid var(--line); }
.channels a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-weight: 500; transition: padding .4s var(--ease), color .3s; }
.channels a:hover { padding-left: 12px; color: var(--sinal); }
form.ct-form { padding: clamp(60px, 12vh, 140px) var(--gut); display: grid; grid-template-columns: 1fr 1fr; gap: 28px 28px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: "Mono"; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(233,236,236,.78); }
.field input, .field select, .field textarea { font: inherit; font-size: 17px; color: var(--nevoa); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 12px 0; border-radius: 0; outline: none; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--nevoa) 50%), linear-gradient(135deg, var(--nevoa) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 24px; }
.field select option { background: var(--g1); color: var(--nevoa); }
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(233,236,236,.42); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--sinal); }
.field .err { font-size: 13px; color: #F0A9A0; min-height: 18px; }
.field.bad input, .field.bad select, .field.bad textarea { border-bottom-color: #F0A9A0; }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.form-foot .note { color: var(--mu); font-size: 14px; max-width: 40ch; }
.btn[disabled] { opacity: .7; cursor: progress; }
.sent { grid-column: 1 / -1; border: 1px solid var(--line-strong); padding: 40px; display: none; }
.sent.show { display: block; }
.sent b { font-family: "Urb"; font-weight: 500; font-size: clamp(32px, 3.4vw, 56px); letter-spacing: -.03em; display: block; line-height: 1; }
.sent p { margin-top: 14px; color: var(--mu); }

/* ---------------------------------------------------------------- rodapé */
footer { position: relative; overflow: hidden; }
.f-cols { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.f-col { padding: 40px var(--gut) 48px; border-right: 1px solid var(--line); }
.f-col:last-child { border-right: 0; }
.f-col h3 { font-family: "Mono"; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); font-weight: 400; margin-bottom: 18px; }
.f-col a { display: block; padding: 5px 0; font-size: 15px; transition: color .25s, transform .35s var(--ease); }
.f-col a:hover { color: var(--sinal); transform: translateX(4px); }
.f-word { padding: clamp(30px, 6vh, 60px) var(--gut) 0; }
.f-word svg { width: 100%; height: auto; fill: var(--nevoa); display: block; transform: translateY(18%); }
.f-word svg path { will-change: transform; }
.f-base { display: flex; justify-content: space-between; padding: 18px var(--gut); border-top: 1px solid var(--line); position: relative; z-index: 2; background: var(--g0); }

.f-cols.f-cols-4 { grid-template-columns: repeat(4, 1fr); }
.f-col .social { display: flex; flex-wrap: wrap; gap: 8px; }
.f-col .social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); transition: background .3s var(--ease), color .3s, border-color .3s; }
.f-col .social a:hover { background: var(--nevoa); color: var(--g0); border-color: var(--nevoa); transform: none; }
.f-col .social svg { width: 20px; height: 20px; display: block; }
.f-base a { transition: color .25s; }
.f-base a:hover { color: var(--sinal); }

/* ---------------------------------------------------------------- páginas de política */
.legal-page .nav-legal { display: flex; justify-content: space-between; }
.legal-page .nav-legal .client { display: flex !important; }
.legal { max-width: 860px; padding: calc(var(--nav) + clamp(56px, 11vh, 130px)) var(--gut) clamp(70px, 12vh, 140px); }
.legal h1 { font-size: clamp(46px, 6vw, 104px); margin-top: 18px; max-width: 12ch; }
.legal .legal-lead { margin-top: 40px; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55; max-width: 60ch; }
.legal section { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal h2 { font-family: "Urb"; font-weight: 500; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.025em; line-height: 1.1; }
.legal section p { margin-top: 14px; color: var(--mu); font-size: 17px; line-height: 1.65; max-width: 68ch; }
.legal a { color: var(--nevoa); text-decoration: underline; text-decoration-color: var(--sinal); text-underline-offset: 3px; }
.legal .legal-other { margin-top: 60px; }
.legal .legal-other a { text-decoration: none; color: var(--sinal); }
.legal-page footer .f-base { flex-wrap: wrap; gap: 8px 24px; }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1100px) {
  .nav .links { gap: 20px; }
  .panel { flex-basis: 88vw; }
}
@media (max-width: 899px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav .links, .nav .lang { display: none; }
  .nav .client { display: none; }
  .menu-btn { display: flex !important; justify-content: flex-end; font-size: 24px; }
  .nav.open .links { display: flex; position: fixed; top: var(--nav); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; background: var(--g0); border-bottom: 1px solid var(--line); }
  .nav.open .links a { width: 100%; padding: 18px var(--gut); border-top: 1px solid var(--line); font-size: 22px; color: var(--nevoa); }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { border-right: 0; padding-bottom: 0; }
  .hero h1 { margin-top: 24px; }
  .hero-media { position: relative; height: 56vw; min-height: 240px; border-top: 1px solid var(--line); }
  .wordmark { position: relative; order: 2; left: auto; right: auto; top: auto; bottom: auto; padding: 18px var(--gut); }
  .wm-band { display: none; }
  .respiro { min-height: 80vh; padding: 80px 0; }
  .respiro .beam { left: 50%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 200px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .p-track { flex-direction: column; height: auto; min-height: 0; }
  .p-intro, .panel, .p-end { flex: none; width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .p-intro { min-height: 60vh; gap: 30px; }
  .panel { grid-template-columns: 1fr; }
  .panel .info { border-right: 0; min-height: 70vh; }
  .panel .media { height: 70vw; }
  .p-rail { display: none; }
  .p-end { min-height: 30vh; }
  .m-inner, .contact { grid-template-columns: 1fr; }
  .m-left, .ct-left { border-right: 0; border-bottom: 1px solid rgba(14,16,17,.14); }
  .m-left { gap: 40px; }
  .m-right { min-height: 92vh; grid-template-columns: 64px 1fr; }
  .ruler .tick { padding-left: 8px; font-size: 10px; }
  .meter .lat-line::before { left: -64px; width: 64px; }
  .readout { left: 16px; }
  .cities { grid-template-columns: 1fr 1fr; }
  .cities button:nth-child(3n) { border-right: 1px solid rgba(14,16,17,.14); }
  .cities button:nth-child(2n) { border-right: 0; }
  .cities button b { font-size: 18px; }
  form.ct-form { grid-template-columns: 1fr; }
  .f-cols, .f-cols.f-cols-4 { grid-template-columns: 1fr 1fr; }
  .f-col { border-bottom: 1px solid var(--line); }
  .f-col:nth-child(2n) { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
html:not(.motion) .manifesto .big .w { opacity: 1; }

/* formulário JotForm: embutido no contato e em popup */
.ct-embed { padding: clamp(40px, 9vh, 110px) var(--gut); display: flex; flex-direction: column; gap: 18px; }
.ct-embed iframe { display: block; border-radius: 10px; }
.ct-embed .note { color: var(--mu); font-size: 13px; }
.jf-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,6,7,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; }
.jf-modal[hidden] { display: none; }
.jf-modal.on { opacity: 1; }
.jf-box { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--g1, #0E1011); border: 1px solid var(--line-strong); border-radius: 14px; transform: translateY(18px); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.jf-modal.on .jf-box { transform: none; }
.jf-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: inherit; border-bottom: 1px solid var(--line); }
.jf-close { background: none; border: 0; color: var(--nevoa); font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.jf-close:hover { background: rgba(233,236,236,.08); }
html.jf-open, html.jf-open body { overflow: hidden; }

/* o bloco de mercados fica fixo enquanto a faixa passa por cima: as seções seguintes precisam cobri-lo */
.faixa, .contact, footer { position: relative; z-index: 3; background-color: var(--g0); }

/* formulário próprio (envio para o JotForm) */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { font-family: "Mono"; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(233,236,236,.78); padding: 0; margin-bottom: 14px; }
.chks { display: flex; flex-wrap: wrap; gap: 8px; }
.chk { position: relative; cursor: pointer; }
.chk input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chk span { display: inline-block; font-family: "Mono"; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 9px 12px; color: rgba(233,236,236,.8); transition: background .2s, color .2s, border-color .2s; }
.chk:hover span { border-color: var(--nevoa); }
.chk input:checked + span { background: var(--nevoa); color: var(--g0); border-color: var(--nevoa); }
.chk input:focus-visible + span { outline: 2px solid var(--sinal); outline-offset: 2px; }
.field.bad .chk span { border-color: #F0A9A0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jf-sink { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.form-err { grid-column: 1 / -1; color: #F0A9A0; font-size: 14px; margin: 0; }
.jf-box form.ct-form { padding: 28px 24px 32px; }
@media (max-width: 700px) { .jf-box form.ct-form { grid-template-columns: 1fr; } }

/* robô que segue o mouse: o canvas cobre a foto estática quando os quadros carregam */
.hero-media canvas#robo { position: absolute; inset: -4%; width: 108%; height: 108%; opacity: 0; transition: opacity .5s; pointer-events: none; }
.hero-media.robo-on canvas#robo { opacity: 1; }

/* assinatura do topo: o A e o i pulsam na cor da marca (animação em site.js) */
.wordmark .wm-glowl { pointer-events: none; }