/* Atlas Trade · site institucional · direção "Carta Náutica" do manual de marca v1.0 */
:root {
  --azul: #0F2038; --noite: #0A1628; --ouro: #A48953; --ouro-claro: #BCA880; --tinta: #7E6940;
  --papel: #F2F4F7; --linha: #D8DEE6; --grafite: #5B6472; --nevoa: #9FB0C8; --branco: #FFFFFF;
  --lado: clamp(20px, 6vw, 96px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--papel); color: var(--azul); font: 300 17px/1.6 'Lexend', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { display: block; max-width: 100% }
a { color: inherit }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0 }
ol, ul { padding: 0; list-style: none }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px }
.pular { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--ouro); color: var(--azul); padding: 10px 14px }
.pular:focus { left: 12px }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--lado) }
.secao { padding-block: clamp(84px, 11vw, 156px); position: relative }
.papel { background: var(--papel) }
.azul { background: var(--azul); color: var(--papel) }
.noite { background: var(--noite); color: var(--papel) }
.grade-fundo { background-image: linear-gradient(rgba(15, 32, 56, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 32, 56, .06) 1px, transparent 1px); background-size: 56px 56px }
.grade-fundo-escuro { background-image: linear-gradient(rgba(242, 244, 247, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 244, 247, .045) 1px, transparent 1px); background-size: 56px 56px }

.sobrelinha { font: 500 12px/1.5 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta) }
.azul .sobrelinha, .noite .sobrelinha, .hero .sobrelinha, .faixa .sobrelinha { color: var(--ouro-claro) }
.titulo-xl { font: 600 clamp(40px, 6vw, 86px)/1.02 'Lexend', sans-serif; letter-spacing: -.022em; margin-top: 18px; text-wrap: balance }
.titulo-l { font: 600 clamp(32px, 4vw, 56px)/1.07 'Lexend', sans-serif; letter-spacing: -.016em; margin-top: 16px; text-wrap: balance }
.texto-grande { font: 300 clamp(19px, 1.7vw, 24px)/1.55 'Lexend', sans-serif; color: #2A3A52 }
.icone { font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal; line-height: 1; display: inline-block; white-space: nowrap; overflow: hidden; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 2px; font: 500 15px/1 'Lexend', sans-serif; white-space: nowrap; text-decoration: none; border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s, transform .3s }
.botao:hover { transform: translateY(-1px) }
.botao-ouro { background: var(--ouro); color: var(--azul) }
.botao-ouro:hover { background: var(--ouro-claro) }
.botao-linha { border-color: rgba(242, 244, 247, .38); color: var(--papel) }
.botao-linha:hover { border-color: var(--ouro-claro); color: var(--ouro-claro) }
.botao-azul { background: var(--azul); color: var(--papel) }
.botao-azul:hover { background: var(--noite) }
.botao-p { padding: 11px 16px; font-size: 14px }

/* revelação no scroll */
.js .revela { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease) }
.js .revela.visivel { opacity: 1; transform: none }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-inline: var(--lado); color: var(--papel); transition: height .4s var(--ease), background .4s, color .4s, border-color .4s; border-bottom: 1px solid transparent }
.topo.rolado { height: 72px; background: rgba(242, 244, 247, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--azul); border-bottom-color: var(--linha) }
.marca { position: relative; display: block; width: 168px; height: 42px; flex: none }
.marca img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s }
.marca-cor, .topo.rolado .marca-neg { opacity: 0 }
.topo.rolado .marca-cor { opacity: 1 }
.menu { display: flex; gap: clamp(18px, 2.2vw, 34px) }
.menu a { font-size: 14.5px; font-weight: 400; white-space: nowrap; text-decoration: none; opacity: .86; position: relative; padding: 6px 0 }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .35s var(--ease) }
.menu a:hover { opacity: 1 }
.menu a:hover::after { right: 0 }
.topo-acoes { display: flex; align-items: center; gap: 18px }
.idiomas { display: flex; gap: 2px }
.idiomas button { background: none; border: 0; padding: 6px 7px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .06em; white-space: nowrap; opacity: .55; border-bottom: 1px solid transparent }
.idiomas button.ativo { opacity: 1; border-bottom-color: var(--ouro) }
.menu-botao { display: none; width: 42px; height: 42px; background: none; border: 1px solid currentColor; border-radius: 2px; position: relative }
.menu-botao i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s }
.menu-botao i:first-child { top: 16px }
.menu-botao i:last-child { top: 24px }
.menu-botao[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg) }
.menu-botao[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg) }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(100svh, 720px); background: var(--noite); color: var(--papel); overflow: hidden; display: flex; align-items: center }
.foto-slot { position: relative; overflow: hidden; background: linear-gradient(135deg, #1A2E52 0%, #0F2038 48%, #243A5E 100%) }
.foto-slot::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-20.5deg, rgba(188, 168, 128, .07) 0 1px, transparent 1px 26px) }
.foto-slot img { position: relative; width: 100%; height: 100%; object-fit: cover }
/* enquadramento de cada foto: o assunto fica fora da área do texto */
.hero-foto img { object-position: 60% 50% }
.impacto .faixa-foto img { object-position: 90% 50% }
.sobre-foto .foto-slot img { object-position: 60% 50% }
.foto-slot:not(:has(img))::after { content: "FOTO · " attr(data-foto); position: absolute; right: 18px; bottom: 16px; font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; color: rgba(188, 168, 128, .75) }
.hero-foto.foto-slot:not(:has(img))::after { top: 104px; bottom: auto }
.faixa-foto.foto-slot:not(:has(img))::after { top: calc(7.63% + 30px); bottom: auto; left: var(--lado); right: auto }
.hero-foto { position: absolute; top: 0; bottom: 0; right: 0; left: 36% }
.hero-foto img { animation: aproxima 22s var(--ease) both }
@keyframes aproxima { from { transform: scale(1.1) } to { transform: scale(1) } }
/* véu: faixa escura no alto para o topo, sólido até onde a foto começa (sem emenda), mais fechado à direita para os rótulos das rotas */
.hero-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 22, 40, .8) 0%, rgba(10, 22, 40, 0) 17%), linear-gradient(0deg, rgba(10, 22, 40, .85) 0%, rgba(10, 22, 40, 0) 26%), linear-gradient(90deg, #0A1628 0%, #0A1628 36%, rgba(10, 22, 40, .8) 46%, rgba(10, 22, 40, .4) 68%, rgba(10, 22, 40, .32) 84%, rgba(10, 22, 40, .5) 100%) }
.carta { position: absolute; inset: 22px; border: 1px solid rgba(188, 168, 128, .22); pointer-events: none; z-index: 2 }
.carta i { position: absolute; background-repeat: repeat }
.carta-topo { left: 0; right: 0; top: 0; height: 7px; background-image: repeating-linear-gradient(90deg, rgba(188, 168, 128, .55) 0 1px, transparent 1px 48px) }
.carta-lado { top: 0; bottom: 0; left: 0; width: 7px; background-image: repeating-linear-gradient(180deg, rgba(188, 168, 128, .55) 0 1px, transparent 1px 48px) }
.hero-rotas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible }
.hero-rotas .rota { stroke: var(--ouro-claro); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0; transition: opacity 1.2s var(--ease) var(--d) }
.hero-rotas .rota.principal { stroke: var(--ouro); stroke-width: 2.2; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); opacity: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.65, .05, .25, 1) .3s }
.hero-rotas.desenhado .rota { opacity: .62 }
.hero-rotas.desenhado .rota.principal { stroke-dashoffset: 0; opacity: 1 }
.hero-rotas .ponto, .hero-rotas .rotulo { opacity: 0; transition: opacity .8s var(--ease) var(--d) }
.hero-rotas.desenhado .ponto, .hero-rotas.desenhado .rotulo { opacity: 1 }
.hero-rotas .ponto { fill: var(--ouro) }
.hero-rotas .rotulo { font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .1em; fill: rgba(242, 244, 247, .92); paint-order: stroke; stroke: rgba(10, 22, 40, .82); stroke-width: 3px; stroke-linejoin: round }
.hero-rotas .origem { fill: var(--papel) }
.hero-rotas .origem-anel { fill: none; stroke: var(--papel); stroke-width: 1; animation: pulsa 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center }
.hero-rotas .pulso { fill: var(--ouro-claro) }
@keyframes pulsa { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(2.2); opacity: 0 } }
.hero-conteudo { position: relative; z-index: 3; width: 100%; padding: 124px var(--lado) 132px }
.hero-slides { display: grid; max-width: 860px }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s .9s }
.slide.ativo { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s, visibility 0s }
.hero-titulo { font: 600 clamp(44px, 5.8vw, 92px)/.98 'Lexend', sans-serif; letter-spacing: -.028em; margin: 22px 0 26px; text-wrap: balance }
.hero .sobrelinha { text-shadow: 0 1px 12px rgba(10, 22, 40, .85) }
.hero-sub { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: rgba(242, 244, 247, .8); max-width: 560px }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px }
.hero-indicador { display: flex; gap: 20px; margin-top: 44px }
.hero-indicador button { background: none; border: 0; padding: 0; width: 92px; display: grid; gap: 9px; text-align: left; opacity: .5; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; transition: opacity .3s }
.hero-indicador button.ativo { opacity: 1 }
.hero-indicador i { display: block; height: 1px; background: rgba(242, 244, 247, .28); position: relative; overflow: hidden }
.hero-indicador i::after { content: ""; position: absolute; inset: 0; background: var(--ouro); transform: scaleX(0); transform-origin: left }
.hero-indicador .ativo i::after { animation: enche 7s linear forwards }
@keyframes enche { to { transform: scaleX(1) } }
.hero-rodape { position: absolute; z-index: 3; left: var(--lado); right: max(var(--lado), 96px); bottom: 44px; display: flex; justify-content: space-between; gap: 24px; font: 500 11px/1.5 'IBM Plex Mono', monospace; letter-spacing: .1em; color: var(--nevoa); text-transform: uppercase }
.hero-rede b { color: var(--ouro-claro); font-weight: 500; margin-right: 12px }
.mira { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s }
.hero.mira-on .mira { opacity: 1 }
.mira i { position: absolute; background: rgba(188, 168, 128, .3) }
.mira-h { left: 0; right: 0; top: 0; height: 1px; transform: translateY(var(--my, 0)) }
.mira-v { top: 0; bottom: 0; left: 0; width: 1px; transform: translateX(var(--mx, 0)) }
.mira-coord { position: absolute; left: 0; top: 0; transform: translate(calc(var(--mx, 0) + 14px), calc(var(--my, 0) + 12px)); font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; color: var(--ouro-claro); background: rgba(10, 22, 40, .72); padding: 5px 7px; white-space: nowrap }

/* ---------- posicionamento ---------- */
.duas-colunas { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 7vw, 110px); align-items: end }
.fluxo { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 8vw, 110px); padding-top: 40px }
.fluxo::before { content: ""; position: absolute; top: 7px; left: 7px; right: 20%; height: 2px; background: var(--ouro); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.65, .05, .25, 1) .3s }
.fluxo.visivel::before { transform: scaleX(1) }
.fluxo li { position: relative; padding-right: 20px }
.fluxo li::before { content: ""; position: absolute; top: -40px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--papel); border: 2px solid var(--ouro) }
.fluxo li:first-child::before { background: var(--azul); border-color: var(--azul); box-shadow: 0 0 0 5px var(--papel), 0 0 0 6px var(--azul) }
.fluxo .fluxo-atlas::before { background: var(--ouro) }
.fluxo span { display: block; font: 500 11.5px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta) }
.fluxo strong { display: block; margin-top: 12px; font: 500 clamp(18px, 1.8vw, 24px)/1.25 'Lexend', sans-serif }
.fluxo .fluxo-atlas strong { font-family: 'Lexend Exa', sans-serif; font-weight: 600; letter-spacing: .02em }

/* ---------- faixas com foto ---------- */
.faixa { position: relative; min-height: clamp(460px, 58vw, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--noite); color: var(--papel) }
.faixa-foto { position: absolute; inset: -9% 0; will-change: transform }
.faixa-veu { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 22, 40, .94) 0%, rgba(10, 22, 40, .5) 50%, rgba(10, 22, 40, .34) 100%) }
.faixa-veu.forte { background: linear-gradient(90deg, rgba(10, 22, 40, .95) 0%, rgba(10, 22, 40, .74) 48%, rgba(10, 22, 40, .32) 100%) }
.faixa-texto { position: relative; z-index: 2; padding-block: clamp(56px, 7vw, 96px) }
.titulo-faixa { font: 600 clamp(32px, 4.8vw, 68px)/1.04 'Lexend', sans-serif; letter-spacing: -.02em; margin-top: 16px; max-width: 17ch; text-wrap: balance }
.faixa-coord { position: absolute; z-index: 2; top: 30px; right: var(--lado); font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--ouro-claro); text-shadow: 0 1px 10px rgba(10, 22, 40, .9) }

/* ---------- soluções ---------- */
.cabeca { max-width: 780px; margin-bottom: clamp(48px, 6vw, 84px) }
.grade-solucoes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linha) }
.solucao { position: relative; padding: 40px 34px 46px; border-bottom: 1px solid var(--linha); border-right: 1px solid var(--linha); transition: background .4s }
.solucao:nth-child(3n) { border-right: 0 }
.solucao:nth-child(3n + 1) { padding-left: 0 }
.solucao::after { content: ""; position: absolute; left: 34px; bottom: -1px; height: 2px; width: 0; background: var(--ouro); transition: width .6s var(--ease) }
.solucao:nth-child(3n + 1)::after { left: 0 }
@media (hover: hover) { .solucao:hover::after { width: 42% } }
.sol-num { font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--tinta) }
.solucao .icone { display: block; font-size: 38px; margin: 30px 0 20px; color: var(--azul); transition: color .3s, transform .5s var(--ease) }
@media (hover: hover) { .solucao:hover .icone { color: var(--tinta); transform: translateY(-3px) } }
.solucao h3 { font: 500 23px/1.25 'Lexend', sans-serif; margin-bottom: 10px }
.solucao p { font-size: 16px; color: var(--grafite) }

/* ---------- como funciona ---------- */
.como-grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px) }
.como-fixo { position: sticky; top: 130px; align-self: start }
.como-contador { display: flex; align-items: baseline; gap: 16px; margin-top: 54px }
.como-num { font: 600 clamp(100px, 13vw, 190px)/.85 'Lexend Exa', sans-serif; letter-spacing: -.02em; color: var(--papel) }
.como-total { font: 500 14px/1 'IBM Plex Mono', monospace; color: var(--ouro-claro); letter-spacing: .1em }
.como-trilho { max-width: 380px; height: 2px; margin-top: 34px; background: rgba(242, 244, 247, .14); overflow: hidden }
.como-trilho i { display: block; height: 100%; background: var(--ouro); transform: scaleX(0); transform-origin: left; transition: transform .25s linear }
.etapa { padding: 46px 0 50px; border-bottom: 1px solid rgba(188, 168, 128, .2); opacity: .34; transition: opacity .6s var(--ease) }
.etapa:first-child { padding-top: 0 }
.etapa.ativa { opacity: 1 }
.etiqueta { display: inline-block; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--azul); background: var(--ouro); padding: 7px 24px 7px 10px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 5px, 100% 100%, 0 100%) }
.etapa h3 { font: 600 clamp(28px, 2.8vw, 40px)/1.12 'Lexend', sans-serif; margin: 20px 0 10px; letter-spacing: -.01em }
.etapa p { font-size: 18px; color: var(--nevoa); max-width: 470px }

/* ---------- diferenciais ---------- */
.dif-grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 110px); align-items: start }
.dif-foto { position: sticky; top: 110px }
.dif-foto .foto-slot { aspect-ratio: 4 / 5 }
.dif-foto figcaption { margin-top: 14px; font: 500 11px/1.4 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--tinta) }
.dif-lista { border-top: 1px solid var(--linha) }
.dif-lista li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; padding: 30px 0; border-bottom: 1px solid var(--linha) }
.dif-num { font: 600 15px/1.6 'Lexend Exa', sans-serif; color: var(--tinta) }
.dif-lista h3 { font: 500 24px/1.25 'Lexend', sans-serif; margin-bottom: 8px }
.dif-lista p { font-size: 16.5px; color: var(--grafite) }

/* ---------- impacto ---------- */
.impacto { min-height: clamp(540px, 64vw, 820px); align-items: center }
.impacto-linha { font: 600 clamp(36px, 5.6vw, 86px)/1.03 'Lexend', sans-serif; letter-spacing: -.024em; max-width: 15ch; text-wrap: balance }
.impacto-linha.ouro { color: var(--ouro-claro); margin-top: 6px }
.impacto .botao { margin-top: 44px }
.impacto-texto { position: relative; z-index: 2; padding-block: clamp(72px, 9vw, 120px) }

/* ---------- sobre ---------- */
.sobre-grade { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 110px); align-items: center }
.sobre-meta { display: flex; flex-wrap: wrap; gap: 14px 48px; margin: 30px 0 32px; padding: 18px 0; border-block: 1px solid var(--linha) }
.sobre-meta dt { font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta) }
.sobre-meta dd { font: 500 18px/1.3 'Lexend', sans-serif; margin-top: 8px }
.sobre p + p { margin-top: 16px }
.sobre p { color: #33445E }
.sobre .sobre-destaque { font: 500 21px/1.45 'Lexend', sans-serif; color: var(--azul); border-left: 2px solid var(--ouro); padding-left: 20px; margin-top: 26px }
.sobre-foto { position: relative }
.sobre-foto .foto-slot { aspect-ratio: 4 / 5 }
.sobre-simbolo { position: absolute; left: -30px; bottom: -30px; width: 136px; height: auto; background: var(--azul); padding: 28px }

/* ---------- chamada ---------- */
.cta { padding-block: clamp(84px, 9vw, 136px) }
.cta-grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end }
.cta-grade .titulo-l { margin-top: 0 }
.cta p { color: var(--nevoa); font-size: 19px; margin-bottom: 30px; max-width: 520px }

/* ---------- contato ---------- */
.contato-grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 110px); align-items: start }
.contato-sub { margin-top: 18px; color: var(--grafite); max-width: 440px }
.contato-dados { margin-top: 44px; border-bottom: 1px solid var(--linha) }
.contato-dados li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--linha) }
.contato-dados span { font: 500 11px/1.8 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta) }
.contato-dados a { text-decoration: none; border-bottom: 1px solid var(--linha) }
.contato-dados a:hover { border-color: var(--ouro) }
.contato-dados address { font-style: normal }
.formulario { background: var(--branco); border: 1px solid var(--linha); padding: clamp(26px, 4vw, 52px) }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px }
.campos label { display: grid; gap: 8px }
.campos label span { font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--grafite) }
.campos input, .campos textarea { width: 100%; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: transparent; padding: 9px 0 11px; font: 400 16px/1.4 'Lexend', sans-serif; color: var(--azul); resize: vertical; transition: border-color .3s }
.campos input:focus, .campos textarea:focus { outline: none; border-bottom-color: var(--ouro); box-shadow: 0 1px 0 var(--ouro) }
.campos .largo { grid-column: 1 / -1 }
.campos label.erro input { border-bottom-color: #A3362E; box-shadow: 0 1px 0 #A3362E }
.formulario .botao { margin-top: 32px }
.form-nota { margin-top: 14px; font-size: 13.5px; color: var(--grafite) }
.form-ok { margin-top: 20px; padding: 14px 16px; background: var(--papel); border-left: 3px solid var(--ouro) }
.form-ok p { font-size: 15px; color: var(--grafite); margin-top: 4px }

/* ---------- rodapé ---------- */
.rodape { padding: 84px 0 34px }
.rodape-grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px }
.rodape-logo { width: 112px; height: auto }
.rodape-tag { margin-top: 24px; font: 500 11px/1.7 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--nevoa); max-width: 260px }
.rodape .rotulo { font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); margin-bottom: 16px }
.rodape p { font-size: 15px; line-height: 1.85; color: rgba(242, 244, 247, .8) }
.rodape a { text-decoration: none }
.rodape a:hover { color: var(--ouro-claro) }
.rodape-fim { display: flex; justify-content: space-between; gap: 20px; margin-top: 64px; padding-top: 26px; border-top: 1px solid rgba(242, 244, 247, .1); font: 500 11px/1.5 'IBM Plex Mono', monospace; letter-spacing: .08em; color: var(--nevoa) }

/* ---------- WhatsApp ---------- */
.wa-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; background: #25D366; color: #FFFFFF; border-radius: 999px; padding: 13px; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(10, 22, 40, .55); transition: transform .3s }
.wa-flutuante .icone { font-size: 26px }
.wa-rotulo { max-width: 0; overflow: hidden; white-space: nowrap; font: 500 14px/1 'Lexend', sans-serif; transition: max-width .45s var(--ease), margin .45s var(--ease) }
.wa-flutuante:hover { transform: translateY(-2px) }
@media (hover: hover) { .wa-flutuante:hover .wa-rotulo { max-width: 220px; margin: 0 8px } }

/* ---------- responsivo ---------- */
/* topo: menu inteiro + botão só a partir de 1366px; entre 1100 e 1365 o botão sai (o WhatsApp flutuante fica); abaixo de 1100 o menu recolhe */
@media (max-width: 1365px) {
  .idiomas button { padding: 6px 5px }
  .menu a { font-size: 14px }
}
@media (min-width: 1100px) and (max-width: 1365px) {
  .topo-acoes .botao-p { display: none }
}
@media (max-width: 1099px) {
  .menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 8px; padding: 110px var(--lado) 40px; background: var(--noite); color: var(--papel); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s }
  .menu.aberto { opacity: 1; visibility: visible; transition: opacity .4s }
  .menu a { font: 600 34px/1.35 'Lexend', sans-serif; opacity: 1 }
  .menu-botao { display: block }
  /* backdrop-filter vira bloco de contenção do position:fixed: com ele o menu ficaria preso aos 72px do topo */
  .topo:has(.menu.aberto) { color: var(--papel); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none }
  .topo:has(.menu.aberto) .marca-neg { opacity: 1 }
  .topo:has(.menu.aberto) .marca-cor { opacity: 0 }
}
/* hero em telas baixas (1366x768, 1536x864): cabe inteiro na primeira dobra */
@media (min-width: 981px) and (max-height: 880px) {
  .hero-titulo { font-size: clamp(44px, 5vw, 76px); margin: 18px 0 20px }
  .hero-conteudo { padding-block: 108px 118px }
  .hero-botoes { margin-top: 30px }
  .hero-indicador { margin-top: 34px }
}
@media (max-width: 980px) {
  .duas-colunas, .como-grade, .dif-grade, .sobre-grade, .cta-grade, .contato-grade { grid-template-columns: 1fr }
  .como-fixo, .dif-foto { position: static }
  .etapa { opacity: 1 }
  .como-contador, .como-trilho { display: none }
  .grade-solucoes { grid-template-columns: 1fr 1fr }
  .solucao, .solucao:nth-child(3n + 1) { padding: 34px 26px 38px }
  .solucao:nth-child(3n) { border-right: 1px solid var(--linha) }
  .solucao:nth-child(2n) { border-right: 0 }
  .solucao:nth-child(2n + 1) { padding-left: 0 }
  .solucao::after, .solucao:nth-child(3n + 1)::after { left: 0 }
  .dif-foto .foto-slot { aspect-ratio: 16 / 10 }
  .dif-foto .foto-slot img { object-position: 50% 42% }
  .sobre-foto { margin-left: 30px }
  .sobre-foto .foto-slot { aspect-ratio: 4 / 3 }
  .sobre-foto .foto-slot img { object-position: 100% 50% }
  .rodape-grade { grid-template-columns: 1fr 1fr }
}
@media (max-width: 680px) {
  .topo { height: 70px }
  .marca { width: 136px; height: 34px }
  .topo-acoes { gap: 10px }
  .topo-acoes .botao-p { display: none }
  .hero { align-items: flex-end }
  .hero-foto { left: 0; bottom: 38% }
  /* --corte = topo do texto, medido no JS: a foto aparece entre o topo e as rotas e o véu fecha antes das letras */
  .hero-veu { background: linear-gradient(180deg, rgba(10, 22, 40, .66) 0, rgba(10, 22, 40, .26) 76px, rgba(10, 22, 40, .32) calc(var(--corte, 30%) - 70px), rgba(10, 22, 40, .9) calc(var(--corte, 30%) + 4px), #0A1628 calc(var(--corte, 30%) + 110px)) }
  .carta { inset: 12px }
  .hero-conteudo { padding: 212px var(--lado) 84px }
  .hero-titulo { font-size: clamp(40px, 11vw, 56px) }
  .hero-botoes .botao { flex: 1 1 auto }
  .hero-botoes .botao-linha { display: none }
  .hero-indicador { margin-top: 32px }
  .hero-rodape { bottom: 30px; right: 88px; font-size: 10px }
  .hero-rede { display: none }
  .fluxo { grid-template-columns: 1fr; padding-top: 0; padding-left: 38px; gap: 30px }
  .fluxo::before { top: 8px; bottom: 30px; left: 7px; right: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: top }
  .fluxo.visivel::before { transform: scaleY(1) }
  .fluxo li::before { top: 2px; left: -38px }
  .grade-solucoes { grid-template-columns: 1fr }
  .solucao, .solucao:nth-child(n) { padding: 30px 0 34px; border-right: 0 }
  .dif-lista li { grid-template-columns: 48px 1fr; gap: 10px }
  .campos { grid-template-columns: 1fr }
  .contato-dados li { grid-template-columns: 1fr; gap: 4px }
  .rodape-grade { grid-template-columns: 1fr }
  .rodape-fim { flex-direction: column }
  .faixa-coord { top: 20px }
  .sobre-foto { margin: 0 0 30px 20px }
  .sobre-foto .foto-slot { aspect-ratio: 4 / 5 }
  .sobre-foto .foto-slot img { object-position: 60% 50% }
  .hero-foto img { object-position: 70% 30% }
  .faixa-foto img { object-position: 45% 50% }
  .impacto .faixa-foto img { object-position: 80% 50% }
  .sobre-simbolo { left: -20px; bottom: -20px; width: 100px; padding: 20px }
}
@media (hover: none), (pointer: coarse) { .mira { display: none } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important }
  .js .revela { opacity: 1; transform: none }
}