@font-face{font-family:'Raleway';font-style:normal;font-weight:200 500;font-display:swap;src:url('/assets/fonts/raleway-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Raleway';font-style:normal;font-weight:200 500;font-display:swap;src:url('/assets/fonts/raleway-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/fonts/sourceserif-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/fonts/sourceserif-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* =========================================================================
   T3 Capital Group
   Paleta: design system do Carvalho e Trois, a pedido do cliente.
   Tipografia: Raleway (voz da marca, ecoa o lettering do logotipo, peso de
   traco 0,085 contra 0,084 do logo) e Source Serif 4 (voz de leitura).

   O sistema inteiro roda em cima de tres variaveis por banda:
     --fg      texto principal
     --fg2     texto secundario
     --acento  cor de enfase, ja escolhida para passar contraste NAQUELA banda
     --regra   linha e borda
   Componente nenhum usa cor fixa. Trocar a banda troca o componente inteiro.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root{
  /* cores da marca */
  --escuro:#222C3A;
  --navy:#344052;
  --acoFundo:#2F5D6E;
  --aco:#89B4C4;
  --sage:#D3D8C3;
  --creme:#EDEFE1;
  --cremeClaro:#F5F6EC;
  --tinta:#172941;          /* navy do logotipo, o texto mais escuro que existe aqui */

  /* Padrao de banda. Sem isto, qualquer elemento FORA de .banda/.topo/.capa fica
     com var(--acento) indefinido, a declaracao inteira vira invalida e some sem
     avisar. Foi o que apagou o anel de foco do link de pular. */
  --acento:var(--acoFundo);
  --sobreAcento:var(--creme);

  /* tipografia */
  --marca:'Raleway','Helvetica Neue',Arial,sans-serif;
  --leitura:'Source Serif 4','Iowan Old Style','Palatino Linotype',Georgia,serif;

  /* escala fluida, entre 380px e 1440px de viewport */
  --t--1:clamp(.75rem,.71rem + .18vw,.83rem);
  --t-0 :clamp(.94rem,.90rem + .19vw,1.03rem);
  --t-1 :clamp(1.06rem,.99rem + .30vw,1.22rem);
  --t-2 :clamp(1.25rem,1.13rem + .50vw,1.56rem);
  --t-3 :clamp(1.55rem,1.32rem + .96vw,2.25rem);
  --t-4 :clamp(1.95rem,1.52rem + 1.80vw,3.25rem);
  --t-5 :clamp(2.40rem,1.60rem + 3.35vw,4.75rem);

  /* ritmo vertical */
  --gutter:clamp(1.25rem,.85rem + 1.7vw,2.5rem);
  --banda-y:clamp(4.5rem,3rem + 6.2vw,9.5rem);
  --env:78rem;
  /* piso de 3.5rem, nao zero: a grade de duas colunas liga em 56em, e ali
     8vw - 4rem dava 8px para uma coluna que carrega 55px de tinta. O numero da
     secao encostava no titulo de 896 a 1060px, sem estourar, porque o
     overflow-x:hidden do body recortava em silencio. */
  --rail:clamp(3.5rem,-4rem + 8vw,6.5rem);
  --medida:34em;

  --t:520ms;
  --curva:cubic-bezier(.2,0,0,1);

  /* duotone: um tratamento de imagem so no site inteiro. A capa e as fotos do
     corpo leem os mesmos tres valores, entao nao existem duas gramaticas. */
  --duo-tinta:linear-gradient(180deg,#3a4a5f 0%,#26313f 100%);
  --duo-tinta-op:.78;
  --duo-luz-op:.55;

  /* grao sutil, usado nas faixas escuras. SVG inline, ~250 bytes, nao e imagem */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:1ms!important;
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
  }
}

body{
  margin:0;
  background:var(--creme);
  color:var(--navy);
  font-family:var(--leitura);
  font-size:var(--t-1);
  line-height:1.68;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}

::selection{background:var(--acoFundo);color:var(--creme)}

/* ------------------------------------------------------------------ bandas */
.banda{
  --fg:var(--escuro);
  --fg2:var(--navy);
  --acento:var(--acoFundo);
  --regra:#C8CEBB;
  --sup:var(--cremeClaro);
  position:relative;
  background:var(--creme);
  color:var(--fg);
}
.banda--sage{
  --regra:#B6BFA4;
  --sup:#DDE1D1;
  background:var(--sage);
}
.banda--navy{
  --fg:var(--creme);
  --fg2:#C4CBD6;
  --acento:var(--aco);
  --sobreAcento:var(--escuro);
  --regra:rgba(237,239,225,.20);
  --sup:rgba(237,239,225,.06);
  background:var(--navy);
}
.banda--escuro{
  --fg:var(--creme);
  --fg2:#B7BFCB;
  --acento:var(--aco);
  --sobreAcento:var(--escuro);
  --regra:rgba(237,239,225,.16);
  --sup:rgba(237,239,225,.05);
  background:var(--escuro);
}
/* grao nas bandas com cor: da materia sem custo de imagem */
.banda--sage::before,.banda--navy::before,.banda--escuro::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--grao);
  opacity:.035;
  pointer-events:none;
  mix-blend-mode:overlay;
}

/* --------------------------------------------------------------- utilidades */
.env{
  width:min(100% - var(--gutter)*2,var(--env));
  margin-inline:auto;
}
.so-leitor{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* as tres barras do logotipo, o motivo proprio da marca */
.barras{
  display:inline-flex;
  gap:.30em;
  vertical-align:baseline;
  color:var(--acento);
}
.barras i{
  display:block;
  width:.13em;
  height:.86em;
  background:currentColor;
  transform:skewX(-16deg);
}
.barras--g{font-size:1.6em}

/* foco de teclado, um so em todo o site */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--acento);
  outline-offset:4px;
  border-radius:1px;
}

.pular{
  position:absolute;
  left:var(--gutter);top:-100%;
  z-index:200;
  background:var(--creme);
  color:var(--escuro);
  padding:.78rem 1.1rem;
  font-family:var(--marca);
  font-size:var(--t--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:top 160ms var(--curva);
}
.pular:focus{top:.75rem}

/* ------------------------------------------------------------- tipografia */
.rotulo{
  font-family:var(--marca);
  font-weight:500;
  font-size:var(--t--1);
  letter-spacing:.20em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--acento);
  font-feature-settings:'lnum' 1;
}

.titulo{
  font-family:var(--leitura);
  font-weight:400;
  font-size:var(--t-3);
  line-height:1.16;
  letter-spacing:-.014em;
  color:var(--fg);
  text-wrap:balance;
}
.titulo--g{font-size:var(--t-4)}

.prosa p + p{margin-top:1.05em}
.prosa{color:var(--fg2);max-width:var(--medida)}
.prosa--larga{max-width:44em}

.abertura{
  font-size:var(--t-2);
  line-height:1.5;
  font-weight:340;
  color:var(--fg);
  letter-spacing:-.004em;
  max-width:30em;      /* sem isto a linha passa de 100 caracteres no desktop */
}

/* ------------------------------------------------------------------ botoes */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  font-family:var(--marca);
  font-weight:500;
  font-size:var(--t--1);
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05em 1.6em;
  min-height:44px;   /* piso de alvo de toque: o botao do mapa dava 41px */
  border:1px solid var(--acento);
  color:var(--acento);
  background:transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color 320ms var(--curva),border-color 320ms var(--curva);
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--acento);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 420ms var(--curva);
}
.btn:focus-visible::after{transform:scaleX(1)}
/* o preenchimento do hover e var(--acento); o texto tem que ser o par dele.
   Escrito com token e nao com lista de bandas: a lista esquecia .capa e .topo,
   e os dois CTAs principais ficavam creme sobre aco, 1,92:1. */
.btn:focus-visible{color:var(--sobreAcento)}
.btn .barras{color:currentColor;font-size:.9em}

.btn--cheio{
  background:var(--acento);
  color:var(--sobreAcento);
  border-color:var(--acento);
}
.btn--cheio::after{background:var(--creme)}
.btn--cheio:focus-visible{color:var(--escuro)}

/* ============================================================== CABECALHO */
.topo{
  position:fixed;
  inset:0 0 auto 0;
  z-index:120;
  color:var(--creme);
  --acento:var(--aco);
  --sobreAcento:var(--escuro);
  transition:background-color 420ms var(--curva),
             border-color 420ms var(--curva),
             backdrop-filter 420ms var(--curva);
  border-bottom:1px solid transparent;
}
.topo[data-rolou="sim"]{
  background:rgba(34,44,58,.92);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(237,239,225,.14);
}
.topo__linha{
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  min-height:clamp(4.25rem,3.4rem + 2.2vw,5.5rem);
}
.marca{
  display:block;
  flex:0 0 auto;
  margin-right:auto;
  line-height:0;
}
.marca img{
  height:clamp(1.5rem,1.1rem + 1.25vw,2.05rem);
  width:auto;
}

.menu{display:flex;align-items:center;gap:clamp(1.1rem,2vw,2.1rem)}
.menu a{
  font-family:var(--marca);
  font-weight:400;
  font-size:var(--t--1);
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(237,239,225,.86);
  padding:.4em 0;
  position:relative;
  white-space:nowrap;
  transition:color 260ms var(--curva);
}
.menu a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--aco);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 340ms var(--curva);
}
.menu a:focus-visible{color:var(--creme)}
.menu a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* seletor de idioma */
.idiomas{
  display:flex;
  align-items:center;
  border:1px solid rgba(237,239,225,.26);
  flex:0 0 auto;
}
.idiomas a{
  font-family:var(--marca);
  font-weight:500;
  font-size:var(--t--1);
  letter-spacing:.12em;
  text-decoration:none;
  color:rgba(237,239,225,.72);
  padding:.55em .72em;
  line-height:1;
  transition:background-color 260ms var(--curva),color 260ms var(--curva);
}
.idiomas a + a{border-left:1px solid rgba(237,239,225,.20)}
.idiomas a:focus-visible{color:var(--creme);background:rgba(237,239,225,.10)}
.idiomas a[aria-current]{background:var(--aco);color:var(--escuro)}

.topo .btn{padding:.85em 1.3em}

/* botao do menu no celular */
.hamburguer{
  display:none;
  flex:0 0 auto;
  width:2.75rem;height:2.75rem;
  align-items:center;justify-content:center;
  background:none;
  border:1px solid rgba(237,239,225,.26);
  color:var(--creme);
  cursor:pointer;
  padding:0;
}
.hamburguer span{
  display:block;
  width:1.15rem;height:1px;
  background:currentColor;
  position:relative;
  transition:background-color 220ms var(--curva);
}
.hamburguer span::before,.hamburguer span::after{
  content:'';position:absolute;left:0;
  width:100%;height:1px;background:currentColor;
  transition:transform 320ms var(--curva);
}
.hamburguer span::before{top:-.34rem}
.hamburguer span::after{top:.34rem}
.hamburguer[aria-expanded="true"] span{background:transparent}
.hamburguer[aria-expanded="true"] span::before{transform:translateY(.34rem) rotate(45deg)}
.hamburguer[aria-expanded="true"] span::after{transform:translateY(-.34rem) rotate(-45deg)}

@media (max-width:63.99em){
  .hamburguer{display:flex}
  /* o painel e irmao posterior dentro do mesmo contexto de empilhamento, entao
     cobria o logo E o proprio botao de fechar. Estes dois sobem. */
  .marca,.hamburguer{position:relative;z-index:2}
  .topo__nav{
    position:fixed;
    inset:0;
    background:var(--escuro);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2.25rem;
    padding:5.5rem var(--gutter) 3rem;
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform 480ms var(--curva),visibility 0s linear 480ms;
    overflow-y:auto;
  }
  .topo[data-menu="aberto"] .topo__nav{
    transform:translateY(0);
    visibility:visible;
    transition:transform 480ms var(--curva),visibility 0s;
  }
  .menu{flex-direction:column;align-items:flex-start;gap:1.35rem}
  .menu a{font-size:var(--t-2);letter-spacing:.06em}
  .topo__acoes{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
  .topo .btn{padding:1em 1.5em}
}
@media (min-width:64em){
  .topo__nav{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.5rem);margin-left:auto}
  .topo__acoes{display:flex;align-items:center;gap:clamp(.85rem,1.4vw,1.4rem)}
}
/* Entre 64em e 75em nao cabe menu + idiomas + CTA. Em espanhol o
   "PÓNGASE EN CONTACTO" quebrava em TRES linhas e o cabecalho inchava para 91px.
   O CTA do topo e o quarto controle apontando para #contato, e "Contato" ja esta
   no menu ao lado: some o redundante justamente onde ele quebra. */
@media (min-width:64em) and (max-width:74.99em){
  .topo__acoes > .btn{display:none}
}

/* =================================================================== CAPA */
.capa{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:clip;
  isolation:isolate;
  color:var(--creme);
  --acento:var(--aco);
  --sobreAcento:var(--escuro);
  background:var(--escuro);
}
.capa__fundo{
  position:absolute;
  inset:-2% -2% -8% -2%;
  z-index:-3;
  width:104%;
  height:110%;
  object-fit:cover;
  /* duotone: dessatura a foto e devolve so a temperatura da paleta */
  filter:grayscale(1) contrast(1.12) brightness(1.02);
  will-change:transform;
}
/* camada de cor: multiply puxa a foto para o navy da marca */
.capa__tinta{
  position:absolute;inset:0;z-index:-2;
  background:var(--duo-tinta);
  mix-blend-mode:multiply;
  opacity:var(--duo-tinta-op);
}
/* camada de luz: devolve o aco nas altas, fechando o duotone */
.capa__luz{
  position:absolute;inset:0;z-index:-2;
  background:var(--aco);
  mix-blend-mode:soft-light;
  opacity:var(--duo-luz-op);
}
/* cortina de leitura: e ela que garante o contraste do texto.
   O canto inferior esquerdo, onde o texto vive, fecha em quase opaco. */
.capa__cortina{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(24,32,44,.66) 0%,rgba(24,32,44,.06) 30%,rgba(24,32,44,.62) 74%,rgba(24,32,44,.90) 100%),
    linear-gradient(96deg,rgba(24,32,44,.86) 0%,rgba(24,32,44,.34) 52%,rgba(24,32,44,0) 100%);
}
.capa__grao{
  position:absolute;inset:0;z-index:-1;
  background-image:var(--grao);
  opacity:.05;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.capa__env{
  padding-block:clamp(9rem,7rem + 8vw,12rem) clamp(3.5rem,2.5rem + 3.5vw,5.5rem);
  display:grid;
  gap:clamp(1.75rem,1.2rem + 2vw,2.75rem);
}
.capa__eyebrow{
  display:flex;
  align-items:flex-start;
  gap:.9em;
  color:var(--aco);
  max-width:48em;
}
/* com o rotulo em duas linhas, as barras centralizadas ficam no meio do bloco.
   Alinham na primeira linha, nao no centro. */
.capa__eyebrow .barras{margin-top:.22em}
.capa h1{
  font-family:var(--marca);
  font-weight:200;
  font-size:var(--t-5);
  line-height:1.02;
  letter-spacing:-.012em;
  color:var(--creme);
  max-width:16ch;
  text-wrap:balance;
}
.capa__acoes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.5rem 2.5rem;
  margin-top:.5rem;
}
.capa__rolar{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  font-family:var(--marca);
  font-size:var(--t--1);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(237,239,225,.66);
  text-decoration:none;
}
.capa__rolar .tracinho{
  display:block;
  width:3.5rem;height:1px;
  background:linear-gradient(90deg,var(--aco),rgba(137,180,196,0));
  position:relative;
  overflow:hidden;
}
.capa__rolar .tracinho::after{
  content:'';
  position:absolute;inset:0;
  background:var(--aco);
  animation:corre 2.6s var(--curva) infinite;
}
@keyframes corre{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}

/* ============================================================ IMAGEM (.duo)
   O tratamento unico de foto do site. As webp ja sobem em escala de cinza,
   entao o filter so ajusta o ponto; a cor vem toda das duas camadas. */
.duo{position:relative;overflow:clip;isolation:isolate;background:var(--escuro)}
.duo > img{width:100%;height:100%;object-fit:cover;filter:contrast(1.10) brightness(1.02)}
.duo__tinta,.duo__luz{position:absolute;inset:0;pointer-events:none}
.duo__tinta{background:var(--duo-tinta);mix-blend-mode:multiply;opacity:var(--duo-tinta-op)}
.duo__luz{background:var(--aco);mix-blend-mode:soft-light;opacity:var(--duo-luz-op)}

/* ================================================================ SECOES */
.secao{padding-block:var(--banda-y)}

/* Duas bandas da MESMA cor coladas somam dois respiros e viram um buraco.
   A de baixo encolhe o topo e ganha uma regra, para a emenda ser de proposito. */
[data-fundo="creme"] + [data-fundo="creme"]{padding-top:calc(var(--banda-y) * .48)}
[data-fundo="creme"] + [data-fundo="creme"]::after{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100% - var(--gutter)*2,var(--env));
  height:1px;
  background:var(--regra);
}
.secao__grade{
  display:grid;
  gap:clamp(1.5rem,1rem + 2.2vw,3rem);
}
@media (min-width:56em){
  .secao__grade{
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:clamp(1.5rem,3.5vw,4rem);
  }
  .secao__rail{grid-column:1;grid-row:1 / span 2}
  .secao__cabeca{grid-column:2}
  .secao__corpo{grid-column:2}
}
.secao__rail{
  display:flex;
  align-items:flex-start;
  gap:.7em;
  font-family:var(--marca);
  font-weight:300;
  font-size:var(--t-1);
  letter-spacing:.1em;
  color:var(--acento);
  font-feature-settings:'lnum' 1;
  padding-top:.35em;
}
.secao__cabeca{display:grid;gap:clamp(.75rem,.5rem + 1vw,1.25rem)}
.secao__corpo{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem)}

/* regra fina que separa cabeca de corpo, no tom da banda */
.regra{
  height:1px;
  background:var(--regra);
  border:0;
  margin:0;
}

/* ------------------------------------------------------------- quem somos */
.assinatura{
  display:flex;
  align-items:center;
  gap:1.1em;
  font-family:var(--marca);
  font-weight:300;
  font-size:var(--t-2);
  letter-spacing:.06em;
  color:var(--acento);
  margin-top:.4em;
}
.assinatura .tracinho{
  flex:0 0 auto;
  width:clamp(1.75rem,4vw,3.5rem);
  height:1px;
  background:currentColor;
  opacity:.5;
}

/* --------------------------------------------------------- area de atuacao */
.atuacao{
  display:grid;
  gap:clamp(2rem,1.4rem + 2.6vw,3.5rem);
}
.atuacao__texto{display:grid;gap:clamp(1.75rem,1.2rem + 2vw,2.75rem);align-content:start}
.atuacao__figura{
  position:relative;
  margin:0;
}
.atuacao__figura > img{
  width:100%;
  /* height:auto e obrigatorio: o atributo height do <img> entra como dica de
     apresentacao, e com largura E altura definidas o aspect-ratio nunca vale.
     A foto saia 350x695 no celular, quase uma tela inteira de branco. */
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}

/* Duas colunas so a partir de 68em, nao de 56em: entre as duas larguras a
   coluna de texto fica estreita e alta, e a foto ao lado virava uma tira
   vertical de 333x751 (razao 0,44). Abaixo disso empilha, com a foto em 3:2. */
@media (min-width:68em){
  .atuacao{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:stretch}
  /* a figura e esticada pelo grid, mas a altura dela nao e definida para o
     percentual do filho resolver: o height:100% da imagem virava altura
     automatica e sobrava o fundo do .duo aparecendo embaixo. Absoluta resolve
     contra a caixa esticada, que ai sim tem altura. */
  .atuacao__figura{min-height:26rem;max-height:40rem}
  .atuacao__figura > img{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto}
}


.lista-barras{display:grid;gap:.9rem;max-width:var(--medida)}
.lista-barras li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.9em;
  align-items:baseline;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--regra);
  color:var(--fg2);
  font-size:var(--t-0);
  line-height:1.55;
}
.lista-barras li:last-child{border-bottom:0;padding-bottom:0}
.lista-barras .barras{font-size:.8em;transform:translateY(.05em)}

/* ------------------------------------------------------------ modalidades */
.cards{
  display:grid;
  gap:clamp(1.25rem,.9rem + 1.4vw,2rem);
}
@media (min-width:56em){
  /* .85/1.15 e nao 1/1: o texto do card II tem quatro vezes o do card I, e com
     colunas iguais sobravam 289px vazios no I, que lia como conteudo faltando.
     A proporcao e a mesma de .duas, e a coluna maior passa a dizer qual
     modalidade a empresa prefere, que e o que o proprio texto diz. */
  .cards{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
}
.card{
  background:var(--sup);
  border:1px solid var(--regra);
  padding:clamp(1.6rem,1.2rem + 1.7vw,2.75rem);
  display:grid;
  gap:1.15rem;
  align-content:start;
  position:relative;
  transition:border-color 420ms var(--curva),transform 420ms var(--curva);
}
/* o card NAO e clicavel: levantar e acender a borda prometia um link que nao
   existe. Sai o hover falso; a guarda (hover:hover) vai para os interativos
   de verdade, no fim do arquivo. */
.card__topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--regra);
}
.card__icone{color:var(--acento)}
.card__icone svg{width:2.4rem;height:2.4rem;stroke:currentColor;fill:none}
.card__n{
  font-family:var(--marca);
  font-weight:400;
  font-size:var(--t-3);
  line-height:1;
  letter-spacing:.14em;
  color:var(--acento);
}
.card h3{
  font-family:var(--leitura);
  font-weight:500;
  font-size:var(--t-2);
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--fg);
  text-wrap:balance;
}
.card p{color:var(--fg2);font-size:var(--t-0);line-height:1.65}

.modalidades__pe{
  display:flex;
  justify-content:flex-start;
  margin-top:clamp(.5rem,1.5vw,1.25rem);
}

/* ---------------------------------------------------------------- missao */
.missao{
  padding-block:var(--banda-y);   /* era um clamp proprio, 5px fora da regua */
  text-align:center;
}
.missao__env{
  display:grid;
  justify-items:center;
  gap:clamp(1.5rem,1rem + 2vw,2.5rem);
  max-width:46rem;
  margin-inline:auto;
}
/* a Missao e a unica banda centrada, entao o numero dela nao vai na coluna
   lateral: vai centralizado acima do rotulo, fechando a espinha 01 a 06 */
.secao__rail--centro{padding-top:0;justify-content:center}
/* so a frase da missao, nao o rotulo acima dela */
.missao__frase{
  font-family:var(--leitura);
  font-weight:300;
  font-size:var(--t-3);
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--creme);
  text-wrap:balance;
}

/* ------------------------------------------------------- visao e valores */
.duas{
  display:grid;
  gap:clamp(2rem,1.4rem + 2.8vw,3.75rem);
}
@media (min-width:56em){
  .duas{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.bloco{display:grid;gap:1rem;align-content:start}
.bloco h3{
  font-family:var(--marca);
  font-weight:500;
  font-size:var(--t--1);
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--acento);
  padding-bottom:.85rem;
  border-bottom:1px solid var(--regra);
}
.bloco .lead{
  font-family:var(--leitura);
  font-weight:400;
  font-size:var(--t-2);
  line-height:1.38;
  letter-spacing:-.01em;
  color:var(--fg);
  text-wrap:balance;
}

/* --------------------------------------------------------------- contato */
.contato__grade{
  display:grid;
  gap:clamp(2rem,1.4rem + 2.6vw,3.5rem);
}
@media (min-width:56em){
  /* dados na esquerda, mapa na direita e da altura da coluna toda */
  .contato__grade{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
  .contato__mapa{min-height:23rem}
}
.dados{display:grid;gap:0}
.dado{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1.1rem;
  align-items:start;
  padding-block:clamp(1.1rem,.9rem + .8vw,1.6rem);
  border-top:1px solid var(--regra);
}
.dado:last-child{border-bottom:1px solid var(--regra)}
.dado__icone{color:var(--acento);padding-top:.15rem}
.dado__icone svg{width:1.6rem;height:1.6rem;stroke:currentColor;fill:none}
.dado dt{
  font-family:var(--marca);
  font-weight:500;
  font-size:var(--t--1);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--acento);
  margin-bottom:.4rem;
}
.dado dd{
  margin:0;
  color:var(--fg);
  font-size:var(--t-0);
  line-height:1.55;
}
.dado a{
  text-decoration:none;
  border-bottom:1px solid var(--regra);
  padding-bottom:.08em;
  font-feature-settings:'lnum' 1;
  transition:border-color 260ms var(--curva),color 260ms var(--curva);
}

.contato__coluna{display:grid;gap:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);align-content:start}
.contato__chamada{display:grid;gap:clamp(1.25rem,1rem + 1.2vw,2rem);align-content:start}

/* ------------------------------------------------------------------ mapa */
.contato__mapa{
  margin:0;
  display:grid;
  grid-template-rows:1fr auto;
  border:1px solid var(--regra);
  background:var(--sup);
  min-height:16rem;
}
.contato__mapa iframe{
  width:100%;
  height:100%;
  min-height:16rem;
  border:0;
  display:block;
  /* o mapa do Google e colorido e chapado; a dessaturacao leve o encosta na
     paleta sem tirar a legibilidade das ruas e dos rotulos */
  filter:saturate(.72) contrast(1.02);
}
.contato__mapa figcaption{
  padding:.85rem clamp(.9rem,.8rem + .4vw,1.2rem);
  border-top:1px solid var(--regra);
}
.contato__mapa figcaption a{
  font-family:var(--marca);
  font-size:var(--t--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acento);
  text-decoration:none;
  position:relative;
  display:inline-block;
}
.contato__mapa figcaption a::after{
  content:'';position:absolute;left:0;right:0;top:50%;
  translate:0 -50%;height:max(44px,100%);
}
.contato__nome{
  font-family:var(--marca);
  font-weight:200;
  font-size:var(--t-4);
  line-height:1.05;
  letter-spacing:-.005em;
  color:var(--creme);
}

/* ---------------------------------------------------------------- rodape */
.rodape{
  background:#1B2430;
  color:#B7BFCB;
  --fg:var(--creme);
  --fg2:#B7BFCB;
  --acento:var(--aco);
  --regra:rgba(237,239,225,.14);
  padding-block:clamp(2.5rem,2rem + 2.4vw,4rem);
  font-size:var(--t-0);
}
.rodape__linha{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem 2.5rem;
}
/* escopado ao logo: solto, esta regra pegava tambem a previa do mapa e a
   reduzia para 72x24 */
.rodape__marca img{height:1.5rem;width:auto}
.rodape__legal{
  display:flex;
  flex-wrap:wrap;
  gap:.35em .8em;
  font-size:var(--t--1);
  letter-spacing:.03em;
  color:#98A2B1;
  font-feature-settings:'lnum' 1;
}
.rodape__idiomas{display:flex;gap:1.25rem;font-family:var(--marca);font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase}
.rodape__idiomas a{text-decoration:none;color:#98A2B1;transition:color 240ms var(--curva)}
.rodape__idiomas a[aria-current]{color:var(--aco)}

/* Assinatura do autor. Mais discreta ainda depois do pedido de 01/09/2026:
   perdeu a fileira propria e o filete separador, que eram justamente o que
   chamava o olho, e virou o fim da linha de copyright. Aparece "JP"; o nome
   inteiro fica no title e no aria-label, para quem for atras. Nao da para
   escurecer muito mais sem reprovar contraste. Calculado, nao chutado: sobre o
   #1B2430 do rodape, o #7F8998 que eu tinha posto da 4,42:1 e REPROVA; este da
   4,72:1, contra o minimo de 4,5, e ainda e visivelmente mais apagado que o
   #98A2B1 do copyright ao lado (6,07:1). */
.rodape__assinatura{color:#848E9D}
.rodape__assinatura a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(132,142,157,.28);
  padding-bottom:.08em;
  position:relative;
  transition:color 240ms var(--curva),border-color 240ms var(--curva);
}
/* o alvo cresce nos DOIS eixos: "JP" tem uns 20px de largura, e so a altura
   nao bastaria para o minimo de toque */
.rodape__assinatura a::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  translate:-50% -50%;
  width:max(44px,100%);
  height:max(44px,100%);
}
@media (hover:hover) and (pointer:fine){
  .rodape__assinatura a:hover{color:var(--creme);border-bottom-color:rgba(237,239,225,.45)}
  .contato__mapa figcaption a:hover{color:var(--creme)}
}

/* =========================================================== BOTAO FLUTUANTE
   Fica na paleta da marca, nao no verde do WhatsApp. O site inteiro existe para
   parecer instituicao num setor com golpe documentado, e uma bolha verde neon
   no canto e a assinatura visual de pagina de captura, que e exatamente a
   leitura que este site precisa evitar. O que torna o botao reconhecivel e o
   GLIFO, e esse vai no desenho oficial. */
.zap{
  position:fixed;
  z-index:130;
  right:max(var(--gutter),env(safe-area-inset-right));
  bottom:max(var(--gutter),env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:.85rem 1.15rem;
  background:rgba(34,44,58,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border:1px solid rgba(137,180,196,.55);
  color:var(--creme);
  text-decoration:none;
  font-family:var(--marca);
  font-weight:500;
  font-size:var(--t--1);
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  box-shadow:0 10px 30px rgba(23,41,65,.28);
  /* Entra de baixo depois que a capa sai de cena. Comeca invisivel E inerte ao
     ponteiro: opacity:0 sozinho deixaria um alvo clicavel no canto.
     Sem JavaScript o botao aparece direto (regra .sem-js abaixo), senao a unica
     acao alternativa da pagina dependeria de script. */
  opacity:0;
  pointer-events:none;
  translate:0 14px;
  transition:opacity 420ms var(--curva),translate 420ms var(--curva),
             background-color 300ms var(--curva),border-color 300ms var(--curva),
             color 300ms var(--curva);
}
.zap[data-visivel]{opacity:1;translate:0 0;pointer-events:auto}
.sem-js .zap{opacity:1;translate:0 0;pointer-events:auto}
/* sem esta linha o SVG cai no tamanho padrao de elemento substituido e aparece
   gigante: ele so tem viewBox, nao tem width nem height */
.zap__glifo{width:1.5rem;height:1.5rem;flex:0 0 auto;color:var(--aco);transition:color 300ms var(--curva)}
.zap:focus-visible{outline:2px solid var(--aco);outline-offset:4px}

@media (hover:hover) and (pointer:fine){
  .zap:hover{background:var(--aco);border-color:var(--aco);color:var(--escuro)}
  .zap:hover .zap__glifo{color:var(--escuro)}
}

/* no celular vira circulo: a barra de rotulo comeria a largura da tela */
@media (max-width:47.99em){
  .zap{
    width:3.5rem;height:3.5rem;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }
  .zap__rotulo{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

/* com o menu de tela cheia aberto o botao ficaria boiando sobre ele */
.topo[data-menu="aberto"] ~ .zap{opacity:0;pointer-events:none;translate:0 14px}

/* ------------------------------------------------------------- revelacao */
.rev{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 900ms var(--curva),transform 900ms var(--curva);
  transition-delay:var(--atraso,0ms);
}
.rev.dentro{opacity:1;transform:none}
/* atrasos em classe, nao em style inline: o CSP do site nao tem unsafe-inline */
.d1{--atraso:80ms}.d2{--atraso:170ms}.d3{--atraso:260ms}.d4{--atraso:350ms}
/* sem JS, nada fica escondido */
.sem-js .rev{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none}
}

/* ancoras nao ficam debaixo do cabecalho fixo */
[id]{scroll-margin-top:clamp(5rem,4rem + 3vw,7rem)}

/* ------------------------------------------------------- alvos de toque
   Estes links sao pequenos DE PROPOSITO: sao dado secundario, e engorda-los
   estragaria a hierarquia. O que engorda e so a AREA CLICAVEL, por pseudo,
   sem mexer num pixel do que aparece. Menor deles era o telefone, 23px. */
.idiomas a,.rodape__idiomas a,.dado a,.capa__rolar,.marca,.rodape__marca{position:relative}
.idiomas a::after,.rodape__idiomas a::after,.dado a::after,
.capa__rolar::after,.marca::after,.rodape__marca::after{
  content:'';
  position:absolute;
  left:0;right:0;top:50%;
  translate:0 -50%;
  height:max(44px,100%);
}

/* -------------------------------------------------------- hover de verdade
   Sem a guarda, o navegador de toque emula :hover e o estado GRUDA depois do
   toque: o botao fica preenchido ate voce tocar em outro lugar. */
@media (hover:hover) and (pointer:fine){
  .btn:hover::after{transform:scaleX(1)}
  .btn:hover{color:var(--sobreAcento)}
  .btn--cheio:hover{color:var(--escuro)}
  .menu a:hover{color:var(--creme)}
  .menu a:hover::after{transform:scaleX(1);transform-origin:left}
  .idiomas a:hover{color:var(--creme);background:rgba(237,239,225,.10)}
        }

@media print{
  .topo,.capa__rolar,.btn{display:none}
  body{background:#fff;color:#000}
}