/* ═══════════════════════════════════════════════════════════════
   DSA MULTICOM — reprodução do layout aprovado (DSA_2.pdf)
   Cores medidas no próprio layout, não no brandbook.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk-Bold.otf") format("opentype");font-weight:700;font-display:swap}

:root{
  --base:    #D9D6CE;   /* fundo do layout */
  --laranja: #EE4B2F;   /* única cor viva  */
  --azul:    #004BF0;
  --preto:   #000000;
  --branco:  #FFFFFF;

  --preto-68: rgba(0,0,0,.68);
  --preto-16: rgba(0,0,0,.16);
  --branco-72: rgba(255,255,255,.72);

  --disp: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --corpo: "Inter", ui-sans-serif, system-ui, sans-serif;

  --rail: 26%;      /* onde a foto começa, medido no layout */
  --marg: 3.4%;     /* margem cinza à esquerda */
  --barra-h: 58px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--base);color:var(--preto);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,p,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

body{
  background:var(--base);
  font-family:var(--corpo);
  font-size:clamp(14px,.5vw + 12.6px,16px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:var(--barra-h);
}
::selection{background:var(--laranja);color:var(--branco)}
:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-180%);
  background:var(--laranja);color:var(--branco);padding:10px 16px;
  font-family:var(--disp);font-size:13px;transition:transform .18s var(--ease);
}
.skip:focus{transform:none}

/* ── A tela ─────────────────────────────────────────────────── */
.tela{
  position:relative;
  min-height:calc(100svh - var(--barra-h));
  background:var(--base);
  overflow:hidden;
  isolation:isolate;
}

.foto{position:absolute;inset:0 0 0 var(--rail);z-index:0}
.foto img,.foto video{width:100%;height:100%;object-fit:cover}
.foto--hero img{object-position:60% 50%}
.foto--dna img{object-position:50% 30%}
.foto__video{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.foto__video.tocando{opacity:1}

/* ── Lockup Disruptive / Strategy / Agency ──────────────────── */
h1.lockup{margin:0}
.lockup{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(19px,2.1vw,34px);
  line-height:1.02;letter-spacing:-.005em;
  color:var(--preto);
}
.lockup span{display:block}
.lockup b{font-weight:700}
.lockup--branco{color:var(--branco)}

/* ── Monograma ──────────────────────────────────────────────── */
.mono{width:100%;height:auto}

.marca{position:absolute;z-index:2}
.marca .lockup{position:absolute;left:103.5%;bottom:2%;top:auto;font-size:clamp(16px,2vw,36px);line-height:1.1;margin:0;padding:0;color:var(--preto);white-space:nowrap}
.marca--hero{left:var(--marg);top:31%;width:52%}
.marca--rep{left:var(--marg);top:31%;width:52%}

/* ── Tela 1 — abertura (cinza puro, sem foto) ───────────────── */
.tela--abre{display:none}
.tela--hero{display:none}
.marca--abre{left:var(--marg);top:26%;width:52%}
.marca--abre .lockup{margin-left:5.5%}

/* ── Tela 2 — hero ──────────────────────────────────────────── */
.frase{
  position:absolute;z-index:3;
  left:var(--marg);bottom:calc(9% + 12px);
  font-family:var(--disp);font-weight:300;
  font-size:clamp(21px,2.5vw,40px);
  line-height:1.08;letter-spacing:-.01em;
}
.frase span{display:block}
.frase .frase__hl{display:inline;background:var(--laranja);color:var(--branco);padding:0 .12em}
.frase__c{color:var(--preto)}

/* ── Tela 3 — repertório ────────────────────────────────────── */
.faixa{
  position:absolute;z-index:2;
  left:var(--rail);right:0;top:15%;
  background:rgba(238,75,47,.55);
  overflow:hidden;
  border-block:1px solid rgba(255,255,255,.18);
}
.faixa__track{
  display:flex;width:max-content;
  /* Parada até o JS confirmar que as 64 logos carregaram: enquanto elas
     chegam, o trilho vai de 2.560 a 10.771px, e animar nesse meio-tempo
     faz a barra saltar a cada imagem que entra. */
  animation:roll 58s linear infinite paused;
  /* Joga a animação para a GPU e isola a camada — sem isso o navegador
     redesenha a faixa inteira, sobre o laranja translúcido, a cada quadro. */
  will-change:transform;
  backface-visibility:hidden;
}
.faixa--pronta .faixa__track{animation-play-state:running}
/* Depois da regra acima, para o hover continuar tendo a palavra final */
.faixa:hover .faixa__track{animation-play-state:paused}
/* translate3d em vez de translateX: força a composição na GPU */
@keyframes roll{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.faixa__set{display:flex;align-items:center}
.faixa__set li{
  flex:0 0 auto;
  height:clamp(66px,7vw,96px);
  display:grid;place-items:center;
  padding-inline:clamp(20px,2.4vw,44px);
}
.faixa__set img{
  /* --k é o multiplicador por logo, calculado no main.js para igualar
     a área percebida. Sem ele (JS bloqueado) tudo volta ao antigo. */
  height:calc(clamp(28px,3vw,44px) * var(--k, 1));
  width:auto;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.rep__texto{
  position:absolute;z-index:3;
  left:64%;top:33%;width:33%;
  padding:.8em 1em 1em;
  background:radial-gradient(120% 130% at 30% 50%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,0) 100%);
  text-shadow:0 1px 14px rgba(0,0,0,.55);
  font-family:var(--disp);font-weight:300;
  font-size:clamp(15px,1.5vw,25px);
  line-height:1.18;color:var(--branco);
}
/* ── Revezamento dos dois textos no mesmo ponto ───────────────
   Os dois filhos caem na MESMA célula do grid, então ficam
   sobrepostos e o contêiner ganha a altura do maior — nada pula
   quando um troca pelo outro. Vale igual no desktop e no celular. */
.reveza{
  position:absolute;z-index:3;
  left:6.8%;top:13.85%;
  display:grid;width:max-content;max-width:88%;
}
.reveza > *{grid-area:1/1;align-self:start}

/* Um só keyframe para os dois; o segundo entra defasado em meio ciclo */
@keyframes reveza-texto{
  0%,  42% {opacity:1}
  50%, 92% {opacity:0}
  100%     {opacity:1}
}
.rep__titulo,.frase--rep{animation:reveza-texto 8s ease-in-out infinite}
.frase--rep{animation-delay:-4s}

.rep__titulo{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(20px,2.3vw,37px);
  line-height:1.06;letter-spacing:-.012em;
}
.rep__hl{display:inline;background:var(--laranja);color:var(--branco);padding:0 .12em}

/* Frase "Desafiar o óbvio" — sobreposta ao título dentro de .reveza,
   por isso abre mão do posicionamento absoluto que herda de .frase */
.frase--rep{position:static;left:auto;bottom:auto}

/* ── Tela 4 — Nosso DNA ─────────────────────────────────────── */
.tela--dna{background:var(--base)}
.dna__watermark{
  position:absolute;z-index:1;
  left:33%;bottom:6%;width:42%;opacity:.34;
}
.dna__painel{
  position:absolute;z-index:3;
  left:3.5%;top:4%;bottom:4%;width:43%;
  background:var(--preto);color:var(--branco);
  padding:clamp(28px,3.2vw,52px) clamp(32px,4vw,66px);
  display:flex;flex-direction:column;
}
.dna__titulo{display:flex;align-items:flex-start;gap:6px;margin-bottom:2px}
.dna__nosso{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(16px,1.5vw,24px);
  color:var(--laranja);
  writing-mode:vertical-rl;transform:rotate(180deg);
  line-height:1;
}
.dna__dna{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(24px,2.4vw,40px);line-height:1;
}
.dna__texto{
  /* min(vw, vh): o painel encolhe com a ALTURA da janela, então a fonte
     precisa obedecer às duas dimensões — só com vw ela transbordava
     138px numa janela de 700px de altura. */
  font-size:clamp(15px,min(1.4vw,2.3vh),22px);
  line-height:1.5;
  display:flex;flex-direction:column;gap:1.2em;
  margin-top:clamp(12px,1.4vw,22px);
}
.frase--dna{display:none}

.lockup--dna{
  position:absolute;z-index:3;
  right:14.75%;bottom:7.44%;
}

/* ── Telas 5-7 — DSA faz ────────────────────────────────────── */
.grade{
  position:absolute;z-index:2;
  left:var(--marg);top:5%;width:42.5%;height:90.5%;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:1%;
}

.peca{
  position:relative;overflow:hidden;
  display:block;text-align:left;
  background:var(--tom, #2a2724);
}
#faz-comunicacao{--tom:#1C0801}
.peca__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.peca:hover .peca__img,.peca.aberta .peca__img{transform:scale(1.04)}

.peca__seta{
  position:absolute;left:0;top:50%;z-index:3;
  transform:translateY(-50%);
  width:0;height:0;
  border-block:15px solid transparent;
  border-left:26px solid var(--branco);
  transition:transform .34s var(--ease);
}
/* Compõe com o translateY(-50%) da centralização — só translateX apagaria */
.peca:hover .peca__seta,.peca.aberta .peca__seta{transform:translate(5px,-50%)}

.peca__titulo{
  position:absolute;z-index:2;
  left:13%;top:50%;right:7%;
  transform:translateY(-50%);   /* centralizado no card, não no topo */
  font-family:var(--disp);font-weight:300;
  font-size:clamp(32px,3.51vw,59px);
  line-height:.92;letter-spacing:-.012em;
  color:var(--branco);
  /* Sai mais rápido do que a descrição entra (.5s), para os dois não
     ficarem semitransparentes ao mesmo tempo no meio da transição. */
  transition:opacity .7s ease;
}
/* Ao abrir o card, o título dá lugar à descrição — nunca convivem na tela */
.peca:hover .peca__titulo,
.peca:focus-visible .peca__titulo,
.peca.aberta .peca__titulo{opacity:0}
.peca__titulo span{display:block}

.peca__desc{
  position:absolute;z-index:2;
  /* Centralizada no card. O translateY(-50%) tem de estar nos DOIS estados,
     senão a entrada deslizante apaga a centralização e o texto pula. */
  left:13%;right:8%;top:50%;
  font-family:var(--corpo);font-weight:700;
  font-size:clamp(14px,1.15vw,18px);
  line-height:1.4;color:var(--branco);
  opacity:0;transform:translate(-36px,-50%);
  transition:opacity .9s ease, transform 1.1s var(--ease);
}
.peca:hover .peca__desc,
.peca:focus-visible .peca__desc,
.peca.aberta .peca__desc{opacity:1;transform:translateY(-50%)}

.faz__marca{
  position:absolute;z-index:3;
  right:5%;bottom:11%;text-align:left;
  padding:.5em .9em 1em;
  background:radial-gradient(130% 140% at 62% 60%, rgba(0,0,0,.46) 0%, rgba(0,0,0,.26) 58%, rgba(0,0,0,0) 100%);
}
.faz__titulo,.fazlogo{text-shadow:0 1px 16px rgba(0,0,0,.5)}
.fazlogo img{filter:drop-shadow(0 1px 12px rgba(0,0,0,.5))}
.faz__titulo{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(20px,2.5vw,42px);
  line-height:1.08;letter-spacing:-.012em;
  color:var(--branco);
  margin-bottom:.24em;
}
.fazlogo{display:flex;align-items:center;gap:.02em}
.fazlogo img{
  height:clamp(46px,5.4vw,96px);width:auto;
  transform:translate(-30px, 2px);
  transform-origin:left center;
}
.fazlogo span{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(38px,4.5vw,80px);
  line-height:1;color:var(--laranja);
  margin-left:-.06em;
  transform:translate(-44px, 4px) scale(1.5);
  transform-origin:left center;
}

/* ── Barra fixa ─────────────────────────────────────────────── */
.barra{
  position:fixed;left:0;right:0;top:0;z-index:100;
  height:var(--barra-h);
  display:flex;align-items:stretch;
  font-family:var(--disp);font-weight:300;
  background:var(--base);
  border-bottom:1px solid rgba(0,0,0,.14);
}
.barra__quadro{flex:0 0 var(--marg);background:var(--laranja)}
.barra__marcas{
  display:flex;align-items:center;gap:6px;
  padding-inline:clamp(12px,1.6vw,26px);
  font-size:clamp(18px,2vw,32px);line-height:1;
}
.barra__marcas i,.barra__marcas em,.barra__marcas s{font-style:normal;text-decoration:none}
.barra__marcas{gap:3px}
.barra__marcas em{margin-left:13px}
.barra__marcas em + em{margin-left:3px}
.barra__marcas s{margin-left:13px}

.barra__nav{display:flex;align-items:stretch}
.barra__nav a{
  position:relative;
  display:flex;align-items:center;
  padding-inline:clamp(10px,1.5vw,26px);
  font-size:clamp(14px,1.5vw,26px);
  line-height:1;
  border-left:1px solid var(--preto);
  transition:color .2s ease;
}
.barra__nav a:first-child{border-left:0}
.barra__espera{
  display:flex;align-items:center;
  padding-inline:clamp(10px,1.5vw,26px);
  font-size:clamp(14px,1.5vw,26px);line-height:1;
  border-left:1px solid var(--preto);
  color:var(--preto);opacity:.42;cursor:default;
}
.barra__nav a:hover,.barra__nav a.aqui{color:var(--laranja)}

.barra__tel{
  margin-left:auto;align-self:stretch;
  display:flex;align-items:center;
  padding-inline:clamp(14px,2vw,30px);
  font-size:clamp(12.5px,1.1vw,17px);
  color:var(--preto-68);
  transition:color .2s ease;
}
.barra__tel:hover{color:var(--laranja)}

/* ── Entrada ────────────────────────────────────────────────── */
[data-sobe]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.vista [data-sobe]{opacity:1;transform:none}

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:1100px){
  .rep__texto{left:56%;width:40%}
}

@media (max-width:880px){
  :root{--rail:0%;--marg:5%;--barra-h:56px}

  .tela{min-height:auto;padding-bottom:0}
  .tela--hero{min-height:calc(100svh - var(--barra-h))}

  .foto,.foto--dna{inset:0}
  .foto::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}

  /* Lockup ao LADO do monograma, alinhado pela base — mesmo arranjo do
     desktop. No HTML o lockup vem antes do <img>, por isso o order:2. */
  .marca{display:flex;align-items:flex-end;gap:3%}
  .marca .mono{width:auto;flex:1 1 auto;min-width:0}
  .marca .lockup{position:static;left:auto;bottom:auto;order:2;
                 flex:0 0 auto;white-space:normal;
                 font-size:clamp(13px,3.5vw,20px);line-height:1.05;margin:0;
                 padding-bottom:2%}
  .marca--hero,.marca--rep{width:82%;top:auto;bottom:26%}
  .marca--hero .lockup,.marca--rep .lockup{color:var(--branco)}
  /* Preto como no desktop: o "é" fica solto entre os dois trechos e
     destoava em branco, enquanto "o que nos move." já era preto. */
  .frase{color:var(--preto);bottom:11%}

  /* repertório empilha */
  /* Os 55px que o texto desce saem do respiro de baixo, não da altura
     total — senão a seção estica e a foto de fundo estica junto. */
  .tela--rep{padding:clamp(64px,12vh,110px) 0
             max(24px, calc(clamp(64px,12vh,110px) - 55px))}
  /* Sobe 40px puxando o respiro de cima, e devolve os mesmos 40px abaixo
     dela — assim só a barra se move; o dSA e os textos ficam onde estão.
     Opacidade 72%: mais alta que os 55% do desktop porque aqui a foto já
     leva uma camada preta de 34%, e translúcido sobre escuro vira mancha. */
  .faixa{position:relative;z-index:3;left:auto;top:auto;right:auto;
         background:rgba(238,75,47,.72);
         margin-top:-40px;
         margin-bottom:calc(clamp(26px,5vw,44px) + 40px)}
  .rep__texto{display:none}
  .marca--rep{position:relative;z-index:3;left:auto;top:auto;
              width:auto;padding:0 var(--marg);margin-bottom:clamp(22px,4vw,36px)}
  /* O revezamento continua igual: o grid segue sobrepondo os dois,
     agora dentro do fluxo empilhado da seção. */
  .reveza{position:relative;z-index:3;left:auto;top:auto;
          width:auto;max-width:none;padding:0 var(--marg);
          /* 22px já vêm da margem do monograma acima (margens irmãs
             colapsam, vale a maior) — 77 aqui = 55px de descida real. */
          margin-top:77px}
  .rep__titulo{font-size:clamp(24px,6.4vw,38px)}

  /* DNA empilha */
  .tela--dna{padding:0}
  .dna__watermark{display:none}
  .dna__painel{position:relative;z-index:3;left:auto;top:auto;bottom:auto;width:auto;padding:clamp(30px,7vw,52px) 7% clamp(34px,7vw,56px)}
  .dna__texto{font-size:clamp(15.5px,4.2vw,19px);line-height:1.5}
  /* right/bottom vêm do desktop; em position:relative eles DESLOCAM o
     elemento em vez de ancorá-lo, jogando-o para fora da tela. */
  .lockup--dna{position:relative;z-index:3;right:auto;bottom:auto;
               padding:clamp(20px,5vw,34px) var(--marg);background:var(--preto)}
  .frase--dna{display:none}

  /* DSA faz empilha */
  .tela--faz{padding:clamp(58px,11vh,96px) 0 clamp(30px,6vw,52px)}
  .grade{
    position:static;width:auto;height:auto;
    padding:0 var(--marg);gap:8px;
    margin-bottom:clamp(28px,6vw,48px);
  }
  .peca{aspect-ratio:3/4}
  /* No celular o card abre sozinho ao entrar na tela, durante a rolagem —
     sem espera, o título some antes de o visitante chegar nele. Segura os
     DOIS por 1,2s (atrasar só um deixaria os textos sobrepostos). A regra
     mora no estado .aberta, então só atrasa a ida: na volta é imediato. */
  .peca.aberta .peca__titulo,
  .peca.aberta .peca__desc{transition-delay:1.2s}
  /* O véu escuro do desktop, refeito para o bloco estreito: sem ele o
     branco e o laranja somem na parte clara da foto. A caixa abraça o
     texto (max-content) em vez de esticar na largura toda, senão o
     degradê se dilui e não escurece nada. */
  .faz__marca{
    /* relative, não static: z-index só vale em elemento posicionado, e
       sem isso a foto (absolute, z-index 0) pinta por cima do véu e do
       texto — sobrava só o dSA, que escapa por ter um filter próprio. */
    position:relative;z-index:3;
    width:max-content;max-width:calc(100% - 2 * var(--marg));
    margin-inline:var(--marg);
    /* Sobe 40px puxando o respiro do topo da seção e devolve os mesmos
       40px abaixo: o bloco sobe, abre folga do primeiro card (que antes
       encostava) e nada mais se desloca. */
    margin-top:-40px;
    margin-bottom:40px;
    padding:.45em .8em .7em;
    background:radial-gradient(130% 150% at 38% 55%,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.2) 100%);
  }
  .faz__titulo{color:var(--branco)}
  /* deslocamentos em px são calibrados no desktop; no mobile o logo é menor */
  .fazlogo img,.fazlogo span{transform:none}
}

@media (max-width:640px){
  .barra{flex-wrap:nowrap;overflow:hidden}
  .barra__preto,.barra__marcas{display:none}
  .barra__quadro{flex-basis:14px}
  .barra__nav{flex:1 1 auto;justify-content:space-around}
  .barra__espera{display:none}
  .barra__nav a{
    font-size:clamp(12px,3.4vw,15px);
    padding-inline:clamp(6px,2vw,14px);
    white-space:nowrap;
  }
  .barra__tel{
    font-size:clamp(12px,3.2vw,15px);
    padding-inline:clamp(8px,2.4vw,16px);
    white-space:nowrap;
  }
  .grade{grid-template-columns:1fr}
  .peca{aspect-ratio:16/10}
  .peca__desc{bottom:auto;top:50%}
  .peca__titulo{top:50%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .faixa__track{animation:none;transform:none}
  [data-sobe]{opacity:1;transform:none}
  /* Sem o revezamento os dois ficariam visíveis um sobre o outro:
     congela no título e esconde a frase. */
  .rep__titulo,.frase--rep{animation:none!important}
  .rep__titulo{opacity:1}
  .frase--rep{opacity:0}
}

/* ── Contato ────────────────────────────────────────────────── */
.contato{overflow:hidden}

.contato__cta{
  background:var(--laranja);
  padding:clamp(52px,9vw,110px) var(--marg) clamp(52px,9vw,110px) calc(var(--marg) + var(--rail));
}
.contato__titulo{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(30px,4.2vw,70px);
  line-height:1.04;letter-spacing:-.016em;
  color:var(--branco);
  margin-bottom:.4em;
}
.contato__sub{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(15px,1.3vw,21px);
  color:rgba(255,255,255,.82);
}

.contato__corpo{
  background:var(--preto);
  padding:clamp(52px,8vw,100px) var(--marg) clamp(52px,8vw,100px) calc(var(--marg) + var(--rail));
}

.contato__form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(22px,2.8vw,40px) clamp(28px,4vw,60px);
  max-width:900px;
}
.campo{display:flex;flex-direction:column;gap:8px}
.campo--full{grid-column:1/-1}
.campo label{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(11px,.82vw,13px);
  color:rgba(255,255,255,.55);
  letter-spacing:.06em;text-transform:uppercase;
}
.campo label abbr{
  text-decoration:none;
  color:var(--laranja);
  margin-left:2px;
}
.campo__opt{font-size:.88em;opacity:.6;text-transform:none;letter-spacing:0}
.campo input,
.campo textarea{
  background:transparent;
  border:0;border-bottom:1px solid rgba(255,255,255,.22);
  color:var(--branco);
  font-family:var(--disp);font-weight:300;
  font-size:clamp(15px,1.1vw,18px);
  padding:.5em 0;
  outline:none;
  transition:border-color .22s ease;
  width:100%;
}
.campo input::placeholder,
.campo textarea::placeholder{color:rgba(255,255,255,.22)}
.campo input:focus,
.campo textarea:focus{border-bottom-color:var(--laranja)}
.campo input.erro,
.campo textarea.erro{border-bottom-color:#ff6b6b}
.campo textarea{resize:none;line-height:1.5}
.campo--enviar{margin-top:clamp(8px,1.5vw,18px);display:flex;align-items:center;gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.contato__btn{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--laranja);color:var(--branco);
  font-family:var(--disp);font-weight:300;
  font-size:clamp(14px,1.1vw,18px);
  letter-spacing:-.01em;
  padding:.78em 2.2em;
  cursor:pointer;border:0;
  transition:background .22s ease,color .22s ease;
  white-space:nowrap;
}
.contato__btn:hover{background:var(--branco);color:var(--laranja)}
.contato__aviso{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(12px,.88vw,14px);
  color:rgba(255,255,255,.46);
  margin:0;
}

/* ── Rodapé ─────────────────────────────────────────────────── */
.rodape{
  background:var(--preto);
  border-top:1px solid rgba(255,255,255,.1);
  padding:clamp(16px,2.2vh,26px) var(--marg);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
  font-family:var(--disp);font-weight:300;
  font-size:clamp(11px,.82vw,13px);
  color:rgba(255,255,255,.38);
}
.rodape__links{display:flex;gap:clamp(14px,2.2vw,32px)}
.rodape__links a{color:rgba(255,255,255,.38);transition:color .2s ease}
.rodape__links a:hover{color:var(--laranja)}

/* contato responsivo */
@media (max-width:880px){
  .contato__cta{padding-left:var(--marg);padding-right:var(--marg)}
  .contato__corpo{padding-left:var(--marg);padding-right:var(--marg)}
  .contato__form{grid-template-columns:1fr}
  .campo--full{grid-column:1}
  .campo--enviar{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .contato__btn{width:100%;justify-content:center}
}