/* ==========================================================================
   RACE — Representação e Assessoria em Comércio Exterior
   O marinho e o azul vieram do site antigo (#003147 e #0B93D5, medidos no
   style.css deles). O amarelo e o laranja vieram do logo (#FFF200 e #FF4A0D).
   Marinho com amarelo é a paleta de quem trabalha em porto e aeroporto — e
   dá o contraste que um site institucional de 1995 nunca teve.
   ========================================================================== */
:root{
  --breu:#050C13;
  --marinho:#08182A;
  --marinho-2:#0D2338;
  --aco:#123049;
  --aco-2:#1B4463;

  --ouro:#FFD400;
  --ouro-cl:#FFE968;
  --laranja:#FF4A0D;
  --agua:#0B93D5;
  --agua-cl:#5CC6F5;

  --papel:#F5F8FA;
  --branco:#FFFFFF;
  --texto:#0E1B25;
  --suave:#5D6E7C;
  --suave-cl:rgba(226,238,247,.66);
  --linha:rgba(120,160,190,.22);
  --linha-f:rgba(255,212,0,.45);

  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --env:min(1280px,92vw);
  --r:4px;
  --r-g:14px;
  --curva:cubic-bezier(.2,.7,.3,1);
  --sombra:0 30px 70px -34px rgba(5,12,19,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--sans);font-size:clamp(1rem,.97rem + .16vw,1.06rem);
  line-height:1.68;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--display);font-weight:800;line-height:1.04;
  letter-spacing:-.028em;margin:0;color:var(--texto)
}
h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,4.6rem)}
h2{font-size:clamp(1.95rem,1.2rem + 2.9vw,3.2rem)}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem);letter-spacing:-.018em}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

.env{width:var(--env);margin-inline:auto}
.env--mid{width:min(900px,92vw)}
.sec{padding:clamp(4.4rem,9vw,8rem) 0;position:relative}
.centro{text-align:center}

/* ------------------------------------------------------------- etiquetas */
.rot{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--agua);margin:0 0 1.1rem;font-weight:500
}
.rot::before{content:"";width:26px;height:2px;background:var(--ouro)}
.escuro .rot{color:var(--ouro)}
.escuro .rot::before{background:var(--laranja)}

.olho{font-size:clamp(1.02rem,1rem + .28vw,1.16rem);color:var(--suave);
  line-height:1.72;max-width:62ch}
.escuro .olho{color:var(--suave-cl)}
.centro .olho{margin-inline:auto}

/* ---------------------------------------------------------------- botões */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.02rem 1.9rem;border-radius:var(--r);
  font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  border:2px solid transparent;position:relative;overflow:hidden;line-height:1;
  transition:transform .35s var(--curva),box-shadow .35s var(--curva),
             background .3s,color .3s,border-color .3s
}
.bt svg{width:18px;height:18px;flex:none}
.bt:hover{transform:translateY(-2px)}
.bt--ouro{background:var(--ouro);color:#12160A;border-color:var(--ouro)}
.bt--ouro:hover{background:var(--ouro-cl);border-color:var(--ouro-cl);
  box-shadow:0 16px 34px -16px rgba(255,212,0,.6)}
.bt--fio{border-color:var(--linha);color:var(--texto)}
.bt--fio:hover{border-color:var(--texto);background:var(--texto);color:var(--papel)}
.escuro .bt--fio{border-color:rgba(226,238,247,.28);color:var(--papel)}
.escuro .bt--fio:hover{background:var(--papel);color:var(--marinho);border-color:var(--papel)}
.bt--zap{background:#1FA855;border-color:#1FA855;color:#fff}
.bt--zap:hover{background:#178A45;border-color:#178A45}

/* ================================================================= topo */
.topo{
  position:fixed;inset:0 0 auto;z-index:70;
  border-bottom:1px solid transparent;transition:background .45s var(--curva),
  border-color .45s var(--curva),backdrop-filter .45s
}
.topo__in{width:var(--env);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:1.4rem;padding:1rem 0;transition:padding .45s var(--curva)}
.topo.colado{background:rgba(8,24,42,.92);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(120,160,190,.18)}
.topo.colado .topo__in{padding:.6rem 0}

.marca{display:flex;align-items:center;gap:.85rem;min-width:0}
.marca img{width:104px;transition:width .45s var(--curva)}
.topo.colado .marca img{width:86px}
.marca__t{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--suave-cl);line-height:1.45;max-width:23ch;
  padding-left:.85rem;border-left:1px solid rgba(226,238,247,.22)
}

.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{
  font-size:.86rem;font-weight:500;color:rgba(226,238,247,.82);
  position:relative;padding:.35rem 0;transition:color .3s
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ouro);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--curva)}
.nav a:hover{color:var(--branco)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.nav a.on{color:var(--ouro)}

.topo__acao{display:flex;align-items:center;gap:.8rem}
.topo .bt{padding:.72rem 1.25rem;font-size:.82rem}

/* hambúrguer: flex em coluna com gap fixo — grid com place-items faz as três
   barras virarem três linhas iguais e o X do fechar não fecha */
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;flex:none}
.burger span{display:block;width:24px;height:2px;background:var(--papel);
  transition:transform .4s var(--curva),opacity .25s}
.burger.aberto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.aberto span:nth-child(2){opacity:0}
.burger.aberto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.gaveta{
  position:fixed;inset:0;z-index:65;background:var(--marinho);
  display:flex;flex-direction:column;justify-content:center;padding:6rem 8vw 3rem;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .7s var(--curva);pointer-events:none
}
.gaveta.on{clip-path:circle(150% at calc(100% - 44px) 44px);pointer-events:auto}
.gaveta a{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,8vw,2.6rem);
  color:var(--papel);padding:.34rem 0;opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--curva),transform .5s var(--curva),color .3s}
.gaveta.on a{opacity:1;transform:none}
.gaveta.on a:nth-child(1){transition-delay:.14s}
.gaveta.on a:nth-child(2){transition-delay:.19s}
.gaveta.on a:nth-child(3){transition-delay:.24s}
.gaveta.on a:nth-child(4){transition-delay:.29s}
.gaveta.on a:nth-child(5){transition-delay:.34s}
.gaveta.on a:nth-child(6){transition-delay:.39s}
.gaveta a:hover{color:var(--ouro)}
.gaveta__pe{margin-top:2.4rem;display:grid;gap:.9rem;opacity:0;transform:translateY(16px);
  transition:all .5s var(--curva) .46s}
.gaveta.on .gaveta__pe{opacity:1;transform:none}
.gaveta__pe .bt{white-space:normal;text-align:center}

.progresso{position:fixed;top:0;left:0;height:2px;z-index:80;width:0;
  background:linear-gradient(90deg,var(--laranja),var(--ouro))}

/* ================================================================ capa */
.capa{
  position:relative;isolation:isolate;color:var(--papel);
  background:
    radial-gradient(120% 100% at 82% 6%,rgba(11,147,213,.24),transparent 58%),
    radial-gradient(90% 70% at 8% 96%,rgba(255,74,13,.14),transparent 62%),
    linear-gradient(165deg,var(--marinho-2) 0%,var(--marinho) 44%,var(--breu) 100%);
  padding:clamp(8rem,15vw,11.5rem) 0 clamp(3.5rem,7vw,5.5rem);
  overflow:hidden
}
.capa h1,.capa h2,.capa h3{color:var(--papel)}
/* a malha de rotas: linhas finas cruzando o fundo, como um mapa de fretes */
.capa::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    linear-gradient(rgba(120,170,210,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,210,.08) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 60% 20%,#000 20%,transparent 78%)
}
.capa__g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2.4rem,5vw,4.6rem);align-items:center;position:relative;z-index:2}
.capa h1 em{font-style:normal;color:var(--ouro)}
.capa .olho{margin-top:1.4rem;max-width:48ch}
.capa__acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}

.capa .olho{color:var(--suave-cl)}
.capa .bt--fio{border-color:rgba(226,238,247,.28);color:var(--papel)}
.capa .bt--fio:hover{background:var(--papel);color:var(--marinho);border-color:var(--papel)}
.selos{display:flex;flex-wrap:wrap;gap:.55rem 1.7rem;margin-top:2.4rem;
  padding-top:1.6rem;border-top:1px solid rgba(226,238,247,.16)}
.selos span{display:flex;align-items:center;gap:.55rem;font-size:.8rem;
  color:var(--suave-cl)}
.selos svg{width:16px;height:16px;color:var(--ouro);flex:none}
.selos img{height:26px;width:auto;opacity:.9}

/* o painel dos números, na coluna da direita da capa */
.painel{
  background:linear-gradient(160deg,rgba(18,48,73,.92),rgba(8,24,42,.86));
  border:1px solid rgba(120,170,210,.2);border-radius:var(--r-g);
  padding:clamp(1.6rem,3vw,2.3rem);backdrop-filter:blur(6px);
  box-shadow:var(--sombra)
}
.painel__cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-bottom:1.1rem;margin-bottom:1.3rem;
  border-bottom:1px solid rgba(120,170,210,.2)}
.painel__cab b{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ouro);font-weight:500}
.painel__cab span{font-size:.74rem;color:var(--suave-cl)}
.numeros{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
.numero b{display:inline-block;font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,1.4rem + 1.7vw,2.8rem);line-height:1;color:var(--papel);
  letter-spacing:-.03em}
.numero>i{font-style:normal;color:var(--ouro);font-family:var(--display);font-weight:800;
  font-size:1.15rem;margin-left:.22rem;vertical-align:.42rem}
.numero span{display:block;margin-top:.4rem;font-size:.8rem;color:var(--suave-cl);
  line-height:1.4}

/* ------------------------------------------------------- relógios do mundo */
.relogios{
  position:relative;z-index:2;margin-top:clamp(2.6rem,5vw,4rem);
  padding-top:1.6rem;border-top:1px solid rgba(120,170,210,.18);
  display:grid;grid-template-columns:repeat(6,1fr);gap:1rem
}
.relogio{text-align:left}
.relogio b{display:block;font-family:var(--mono);font-size:clamp(.95rem,1.5vw,1.15rem);
  font-weight:500;color:var(--papel);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.relogio span{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--suave-cl);margin-top:.25rem}
.relogio i{font-style:normal;font-size:.62rem;color:var(--ouro);margin-left:.3rem}

/* =============================================================== seções */
.escuro{background:var(--marinho);color:var(--papel)}
.escuro h1,.escuro h2,.escuro h3{color:var(--papel)}
.claro-2{background:var(--branco)}

.cab2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.4rem);align-items:end;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.cab2 .olho{margin-bottom:0}

/* ------------------------------------------------------------- serviços */
.servicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.15rem}
@media (min-width:1100px){.servicos,.casos{grid-template-columns:repeat(3,1fr)}}
.servico{
  position:relative;padding:1.9rem 1.7rem 1.7rem;border-radius:var(--r-g);
  background:var(--branco);border:1px solid var(--linha);text-align:left;
  display:flex;flex-direction:column;min-height:230px;overflow:hidden;
  transition:transform .45s var(--curva),box-shadow .45s var(--curva),
             border-color .45s var(--curva)
}
.escuro .servico{background:rgba(18,48,73,.5);border-color:rgba(120,170,210,.2)}
.servico::after{content:"";position:absolute;inset:auto 0 0;height:3px;
  background:linear-gradient(90deg,var(--ouro),var(--laranja));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--curva)}
.servico:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:var(--linha-f)}
.servico:hover::after{transform:scaleX(1)}
.servico__ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--aco),var(--marinho));color:var(--ouro);
  margin-bottom:1.15rem;flex:none}
.servico__ico svg{width:22px;height:22px}
.servico h3{margin-bottom:.45rem}
.servico p{font-size:.93rem;color:var(--suave);margin:0}
.escuro .servico p{color:var(--suave-cl)}
.servico__mais{margin-top:auto;padding-top:1.2rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--agua);
  display:flex;align-items:center;gap:.5rem}
.escuro .servico__mais{color:var(--ouro)}
.servico__mais svg{width:14px;height:14px;transition:transform .35s var(--curva)}
.servico:hover .servico__mais svg{transform:translateX(4px)}

/* -------------------------------------------------------------- casos */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.2rem}
.chip{padding:.55rem 1.15rem;border-radius:99px;border:1px solid var(--linha);
  font-size:.8rem;font-weight:500;color:var(--suave);transition:.3s var(--curva)}
.escuro .chip{color:var(--suave-cl);border-color:rgba(120,170,210,.24)}
.chip:hover{border-color:var(--texto);color:var(--texto)}
.escuro .chip:hover{border-color:var(--papel);color:var(--papel)}
.chip.on{background:var(--ouro);border-color:var(--ouro);color:#12160A;font-weight:700}

.casos{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem}
.caso{
  position:relative;border-radius:var(--r-g);overflow:hidden;text-align:left;
  background:var(--marinho);border:1px solid rgba(120,170,210,.2);
  display:flex;flex-direction:column;
  transition:transform .45s var(--curva),box-shadow .45s var(--curva),border-color .45s
}
.caso:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:var(--linha-f)}
.caso.oculto{display:none}
.caso__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--breu)}
.caso__foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--curva),filter .5s}
.caso:hover .caso__foto img{transform:scale(1.06)}
.caso__foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,24,42,.92),rgba(8,24,42,.1) 60%)}
.caso__ano{position:absolute;left:1rem;top:1rem;z-index:2;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  background:var(--ouro);color:#12160A;padding:.3rem .6rem;border-radius:3px}
.caso__txt{padding:1.3rem 1.4rem 1.5rem;color:var(--papel);display:flex;
  flex-direction:column;flex:1}
.caso__txt h3{color:var(--papel);font-size:1.14rem;margin-bottom:.35rem}
.caso__tipo{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--agua-cl);margin-bottom:.7rem}
.caso__txt p{font-size:.88rem;color:var(--suave-cl);margin:0}
.marcas{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:1.1rem}
.marcas span{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  padding:.22rem .55rem;border-radius:3px;
  border:1px solid rgba(120,170,210,.3);color:var(--suave-cl)}

/* gaveta do caso */
.fundo{position:fixed;inset:0;z-index:88;background:rgba(5,12,19,.72);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .45s}
.fundo.on{opacity:1;pointer-events:auto}
.ficha{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);z-index:90;
  background:var(--branco);transform:translateX(101%);
  transition:transform .58s var(--curva);display:flex;flex-direction:column;
  box-shadow:-30px 0 80px -40px rgba(5,12,19,.7)}
.ficha.on{transform:none}
.ficha__topo{padding:1.3rem clamp(1.4rem,4vw,2.4rem);border-bottom:1px solid var(--linha);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ficha__topo span{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--agua)}
.ficha__x{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linha);transition:.3s}
.ficha__x:hover{background:var(--texto);color:var(--papel);border-color:var(--texto)}
.ficha__x svg{width:15px;height:15px}
.ficha__c{padding:0 0 2rem;overflow-y:auto;flex:1}
.ficha__foto{width:100%;aspect-ratio:4/3;object-fit:cover}
.ficha__in{padding:1.7rem clamp(1.4rem,4vw,2.4rem) 0}
.ficha__in h3{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:.6rem}
.ficha__bloco{margin-top:1.6rem}
.ficha__bloco h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--agua);margin-bottom:.7rem;font-weight:500}
.ficha__bloco ul{margin:0;padding-left:1.1rem;color:var(--suave);font-size:.94rem}
.ficha__bloco li{margin-bottom:.35rem}
.ficha__pe{padding:1.2rem clamp(1.4rem,4vw,2.4rem);border-top:1px solid var(--linha);
  background:var(--papel)}
.ficha__pe .bt{width:100%}

/* ------------------------------------------------------------- passos */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.6vw,2.2rem);
  counter-reset:p}
.passo{counter-increment:p;position:relative;padding-top:2.9rem}
.passo::before{content:counter(p,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;
  color:var(--ouro);opacity:.9}
.passo::after{content:"";position:absolute;top:1.3rem;left:3.2rem;right:-1rem;height:1px;
  background:var(--linha)}
.passo:last-child::after{display:none}
.escuro .passo::after{background:rgba(120,170,210,.24)}
.passo h3{font-size:1.1rem;margin-bottom:.45rem}
.passo p{font-size:.9rem;color:var(--suave);margin:0}
.escuro .passo p{color:var(--suave-cl)}

/* ------------------------------------------------------------ valores */
.valores{display:flex;flex-wrap:wrap;gap:.6rem}
.valores span{
  font-family:var(--display);font-weight:700;font-size:1rem;
  padding:.7rem 1.25rem;border-radius:99px;border:1px solid var(--linha);
  transition:.35s var(--curva)
}
.escuro .valores span{border-color:rgba(120,170,210,.26)}
.valores span:hover{border-color:var(--ouro);color:var(--ouro);transform:translateY(-2px)}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.bloco{padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--r-g);
  border:1px solid var(--linha);background:var(--branco)}
.escuro .bloco{background:rgba(18,48,73,.44);border-color:rgba(120,170,210,.2)}
.bloco h3{margin-bottom:.8rem}
.bloco p{margin:0;color:var(--suave)}
.escuro .bloco p{color:var(--suave-cl)}

/* --------------------------------------------------------------- FAQ */
.faq{max-width:900px;margin-inline:auto}
.item{border-bottom:1px solid var(--linha)}
.escuro .item{border-color:rgba(120,170,210,.2)}
.item__b{width:100%;text-align:left;display:flex;align-items:center;
  justify-content:space-between;gap:1.4rem;padding:1.4rem 0;
  font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1rem + .35vw,1.2rem);
  line-height:1.35}
.item__b i{flex:none;width:24px;height:24px;position:relative;border-radius:50%;
  border:1px solid var(--linha);transition:.35s var(--curva)}
.item__b i::before,.item__b i::after{content:"";position:absolute;inset:50% 6px auto;
  height:1.5px;background:currentColor;transition:transform .35s var(--curva)}
.item__b i::after{transform:rotate(90deg)}
.item.on .item__b i{background:var(--ouro);border-color:var(--ouro);color:#12160A}
.item.on .item__b i::after{transform:rotate(0)}
.item__c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--curva)}
.item.on .item__c{grid-template-rows:1fr}
.item__c>div{overflow:hidden}
.item__c p{padding-bottom:1.4rem;color:var(--suave);font-size:.97rem;max-width:72ch}
.escuro .item__c p{color:var(--suave-cl)}

/* ---------------------------------------------------------- formulário */
.form{display:grid;gap:1rem}
.campo{display:grid;gap:.4rem}
.campo label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--suave)}
.escuro .campo label{color:var(--suave-cl)}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.9rem 1rem;border-radius:var(--r);
  border:1px solid var(--linha);background:var(--branco);color:var(--texto);
  font:inherit;font-size:.96rem;transition:border-color .3s,box-shadow .3s
}
.escuro .campo input,.escuro .campo textarea,.escuro .campo select{
  background:rgba(8,24,42,.6);color:var(--papel);border-color:rgba(120,170,210,.28)}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(255,212,0,.16)}
.campo textarea{min-height:130px;resize:vertical}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.aviso-form{font-size:.84rem;color:var(--suave);margin:0}
.escuro .aviso-form{color:var(--suave-cl)}

.contatos{display:grid;gap:1.3rem}
.contato-i{display:flex;gap:1rem;align-items:flex-start}
.contato-i svg{width:20px;height:20px;color:var(--ouro);flex:none;margin-top:.28rem}
.contato-i b{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem}
.contato-i span{display:block;font-size:.92rem;color:var(--suave);line-height:1.6}
.escuro .contato-i span{color:var(--suave-cl)}
.contato-i a:hover{color:var(--ouro)}

/* ------------------------------------------------------------- chamada */
.chamada{
  background:
    radial-gradient(90% 130% at 50% 0%,rgba(11,147,213,.22),transparent 62%),
    linear-gradient(var(--marinho),var(--breu));
  color:var(--papel);text-align:center;position:relative;overflow:hidden
}
.chamada h2{color:var(--papel)}
.chamada__acoes{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* -------------------------------------------------------------- rodapé */
.rodape{background:var(--breu);color:var(--suave-cl);padding:clamp(3.4rem,7vw,5rem) 0 2rem;
  font-size:.9rem}
.rodape__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.4rem;
  padding-bottom:2.4rem;border-bottom:1px solid rgba(120,170,210,.16)}
.rodape img.logo{width:120px;margin-bottom:1rem}
.rodape h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:1rem;font-weight:500}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.rodape a:hover{color:var(--ouro)}
.rodape__pe{padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:.7rem;font-size:.78rem;color:rgba(226,238,247,.4)}

.zap-fixo{position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;width:54px;height:54px;
  border-radius:50%;background:#1FA855;display:grid;place-items:center;
  box-shadow:0 14px 34px -12px rgba(31,168,85,.7);transform:translateY(120%);
  transition:transform .5s var(--curva)}
.zap-fixo.on{transform:none}
.zap-fixo svg{width:26px;height:26px;color:#fff}

/* ----------------------------------------------------- reveal on scroll */
[data-rev]{opacity:0;transform:translateY(22px)}
[data-rev].ver{opacity:1;transform:none;
  transition:opacity .8s var(--curva),transform .8s var(--curva)}

/* --------------------------------------------------------- responsivo */
@media (max-width:1080px){
  .capa__g{grid-template-columns:1fr}
  .relogios{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .passos{grid-template-columns:1fr 1fr;gap:2rem}
  .passo::after{display:none}
  .cab2{grid-template-columns:1fr;align-items:start}
  .rodape__g{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav,.topo__acao .bt{display:none}
  .burger{display:flex}
  .dupla{grid-template-columns:1fr}
}
@media (max-width:600px){
  .relogios{grid-template-columns:1fr 1fr}
  .numeros{grid-template-columns:1fr 1fr;gap:1.1rem .8rem}
  .servicos,.casos{grid-template-columns:1fr}
  .dois{grid-template-columns:1fr}
  .rodape__g{grid-template-columns:1fr;gap:2rem}
  .capa__acoes .bt{width:100%}
  .marca__t{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  [data-rev]{opacity:1;transform:none}
}

/* ==========================================================================
   PEÇAS DAS PÁGINAS INTERNAS
   ========================================================================== */

/* O herói anima em CSS puro. Com GSAP ele pisca no primeiro quadro e o LCP
   passa a depender de um script de CDN — não vale a pena. */
@keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
[data-sobe]{animation:sobe .9s var(--curva) both}
[id]{scroll-margin-top:96px}

.capa--peq{padding:clamp(7.5rem,13vw,9.5rem) 0 clamp(3rem,6vw,4.5rem)}
.capa--peq h1{font-size:clamp(2.2rem,1.3rem + 3.6vw,3.9rem);max-width:18ch}
.capa--peq .olho{margin-top:1.3rem;max-width:58ch}
.capa--peq em{font-style:normal;color:var(--ouro)}

.trilha{display:flex;align-items:center;gap:.55rem;margin-bottom:1.6rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--suave-cl)}
.trilha a:hover{color:var(--ouro)}
.trilha b{color:var(--papel);font-weight:500}

/* a malha de rotas do herói da home */
.rota{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.55}
.rota path{fill:none;stroke:var(--agua);stroke-width:1.5;stroke-dasharray:5 11;
  animation:corre 26s linear infinite}
@keyframes corre{to{stroke-dashoffset:-320}}

/* atalhos no topo da página de serviços */
.atalhos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.2rem;position:relative;z-index:2}
.atalhos a{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  border-radius:99px;border:1px solid rgba(120,170,210,.3);font-size:.84rem;
  color:var(--suave-cl);transition:.3s var(--curva)}
.atalhos a svg{width:16px;height:16px;color:var(--ouro)}
.atalhos a:hover{border-color:var(--ouro);color:var(--papel);transform:translateY(-2px)}

/* bloco de detalhe de um serviço */
.detalhe{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.4rem);align-items:center}
.servico__ico--g{width:56px;height:56px;border-radius:14px;margin-bottom:1.4rem}
.servico__ico--g svg{width:27px;height:27px}
.escuro .servico__ico{background:linear-gradient(150deg,#1B4463,#0B1B2B);color:var(--ouro)}
.detalhe__b h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--agua);margin-bottom:1.1rem;font-weight:500}
.escuro .detalhe__b h4{color:var(--ouro)}

.lista{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.lista li{position:relative;padding-left:1.75rem;font-size:.96rem;color:var(--suave);
  padding-bottom:.85rem;border-bottom:1px solid var(--linha)}
.escuro .lista li{color:var(--suave-cl);border-color:rgba(120,170,210,.18)}
.lista li:last-child{border-bottom:none;padding-bottom:0}
.lista svg{position:absolute;left:0;top:.34rem;width:17px;height:17px;color:var(--ouro)}
.lista--g li{font-size:1rem}
.lista b{color:var(--texto);font-weight:600}
.escuro .lista b{color:var(--papel)}

/* contador de resultados do portfólio */
.conta{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--suave);margin:0 0 1.4rem}

/* grade de links úteis */
.uteis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.uteis a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;border-radius:var(--r);border:1px solid var(--linha);
  background:var(--branco);font-weight:500;font-size:.94rem;transition:.35s var(--curva)}
.uteis a svg{width:16px;height:16px;color:var(--agua);flex:none;transition:transform .35s var(--curva)}
.uteis a:hover{border-color:var(--ouro);transform:translateY(-2px);box-shadow:var(--sombra)}
.uteis a:hover svg{transform:translateX(4px)}

.ficha__bloco ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.ficha__bloco li{font-family:var(--mono);font-size:.74rem;padding:.4rem .75rem;border-radius:4px;
  background:var(--papel);border:1px solid var(--linha);color:var(--texto);margin:0}

@media (max-width:1080px){
  .detalhe{grid-template-columns:1fr;gap:2rem}
  .dupla[style*="repeat(3"]{grid-template-columns:1fr!important}
}
@media (max-width:600px){
  .capa--peq h1 br{display:none}
  .uteis{grid-template-columns:1fr}
}

/* a camada de clique do cartão do portfólio: o texto do botão é só para leitor
   de tela e para quem navega no teclado */
.caso__bt{position:absolute;inset:0;z-index:4;width:100%;text-indent:-9999px;
  overflow:hidden;white-space:nowrap;border-radius:var(--r-g)}
.caso__bt:focus-visible{outline:2px solid var(--ouro);outline-offset:-3px}

/* Filho de grid nasce com min-width:auto, ou seja, não encolhe abaixo do
   min-content — a 320px o e-mail do recrutamento empurrava a coluna inteira
   para fora da tela. Isto libera todas as grades a encolher. */
.dupla>*,.servicos>*,.casos>*,.capa__g>*,.cab2>*,.detalhe>*,.numeros>*,
.passos>*,.uteis>*,.rodape__g>*,.polos>*{min-width:0}
p,li,h1,h2,h3,td{overflow-wrap:break-word}
.lista b,.contato-i span{overflow-wrap:anywhere}

/* revisão de 16/10/2026 ------------------------------------------------------- */
/* operações novas do portfólio: a foto é ilustrativa e o cartão diz isso */
.caso__ilus{position:absolute;right:.7rem;bottom:.7rem;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.88);background:rgba(8,24,42,.62);padding:.25rem .5rem;border-radius:3px}
.ficha__moldura{position:relative}
.ficha__foto{display:block}
.ficha__moldura .caso__ilus[hidden]{display:none}
/* onde atuamos: os quatro polos da 8ª Região Aduaneira */
.polos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.4rem)}
.polos .bloco{display:flex;flex-direction:column;gap:.2rem}
.polos .bloco h3{margin:1rem 0 .4rem;font-size:1.12rem}
@media (max-width:1080px){.polos{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.polos{grid-template-columns:1fr}}
/* área restrita: link com cadeado no topo e a tela de login (ainda sem entrar).
   As regras do cartão levam .login na frente: .bloco p (elemento dentro de classe) vencia. */
.topo__restrito{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:500;
  color:rgba(226,238,247,.82);padding:.35rem .15rem;transition:color .3s;white-space:nowrap}
.topo__restrito svg{width:17px;height:17px;color:var(--ouro);flex:none}
.topo__restrito:hover,.topo__restrito.on{color:var(--branco)}
@media (max-width:1279px){.topo__restrito span{display:none}}
/* entre 901 e ~1180 px o menu não cabia: "A empresa" quebrava em duas linhas (antes do cadeado já) */
.nav a{white-space:nowrap}
@media (max-width:1180px) and (min-width:901px){.marca__t{display:none}.nav{gap:1.3rem}}
@media (max-width:900px){.topo__restrito{display:none}}
.gaveta.on a:nth-child(7){transition-delay:.44s}
.login__t{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:1.1rem 0 .4rem}
.login .login__sub{margin:0 0 1.5rem}
.login .login__aviso{margin:0;padding:.85rem 1rem;border-radius:var(--r);font-size:.9rem;color:var(--texto);
  background:rgba(255,212,0,.13);border:1px solid rgba(255,212,0,.5)}
.login__aviso:empty{display:none}
.login .login__aviso--erro{border:1px solid #c0392b;background:#fdecea;color:#7a1f15}
.login .login__ajuda{margin:1.4rem 0 0;font-size:.9rem}
.login__ajuda a{color:var(--texto);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--ouro);text-decoration-thickness:2px;text-underline-offset:.22em}