@charset "UTF-8";

/* =========================================================================
   EuropInvest — folha de estilo única
   Identidade: branco + dourado #C69E63 · Playfair Display / Archivo
   ========================================================================= */

/* --- Fontes (self-hosted, sem chamada externa) --------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/playfair-display-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/playfair-display-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;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Cor. O dourado é a assinatura da marca; nunca serve como texto pequeno
     sobre branco (2,5:1). Para texto dourado existe --ouro-tinta (5,2:1). */
  --papel: #ffffff;
  --superficie: #f7f6f3;
  --superficie-2: #efece6;
  --ouro: #c69e63;
  --ouro-tinta: #8a6524;
  /* O dourado mais escuro que ainda lê como dourado e cumpre os 3:1 do WCAG
     2.2 (1.4.11) para limites de controle. Borda do botão do cabeçalho. */
  --ouro-borda: #a48454;
  --tinta: #1a1a1a;
  --tinta-2: #4f4f4f;
  --tinta-3: #6b6b6b;
  --escuro: #14161a;
  --linha: color-mix(in oklab, var(--tinta) 12%, #ffffff);
  --linha-forte: color-mix(in oklab, var(--tinta) 22%, #ffffff);
  --claro: #f4f2ee;
  --claro-2: color-mix(in oklab, #ffffff 72%, transparent);

  /* Tipografia */
  --fonte-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --fonte-texto: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.7rem, 1.2rem + 5.2vw, 5.5rem);
  --fs-h2: clamp(1.95rem, 1.32rem + 2.4vw, 3.1rem);
  --fs-h3: clamp(1.3rem, 1.13rem + 0.66vw, 1.65rem);
  --fs-h4: clamp(1.08rem, 1.02rem + 0.24vw, 1.22rem);
  --fs-lead: clamp(1.06rem, 0.99rem + 0.3vw, 1.24rem);
  --fs-corpo: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Ritmo */
  --largura: 78rem;
  --largura-texto: 68ch;
  --goteira: clamp(1.25rem, 0.7rem + 2.4vw, 3.25rem);
  --pad-secao: clamp(4.5rem, 2.6rem + 7.4vw, 9.5rem);
  --altura-header: 5.25rem;
  --altura-header-min: 4.25rem;
  /* Cantos levemente arredondados: botões e anéis de foco em --raio; as
     superfícies grandes — os cartões de serviço — em --raio-g, sempre maior. */
  --raio: 6px;
  --raio-g: 9px;

  /* Profundidade */
  --sombra-1: 0 1px 2px rgb(20 22 26 / 0.05), 0 4px 12px rgb(20 22 26 / 0.05);
  --sombra-2: 0 2px 4px rgb(20 22 26 / 0.05), 0 18px 44px rgb(20 22 26 / 0.11);
  --sombra-header: 0 1px 0 rgb(20 22 26 / 0.06), 0 8px 28px rgb(20 22 26 / 0.07);

  /* Camadas */
  --z-base: 1;
  --z-header: 100;
  --z-veu: 200;
  --z-menu: 300;

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Entra e sai na mesma cadência — para movimentos de largura/acomodação,
     em que o arranque explosivo da expo lê como solavanco. */
  --ease-suave: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
  --dur-4: 920ms;
}

/* --- Base ---------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header-min) + 1.5rem);
}

body {
  background: var(--papel);
  color: var(--tinta-2);
  font-family: var(--fonte-texto);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

a { color: inherit; }

:where(h1, h2, h3, h4) {
  color: var(--tinta);
  font-family: var(--fonte-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--ouro-tinta);
  outline-offset: 3px;
  border-radius: var(--raio);
}

::selection {
  background: var(--ouro);
  color: #fff;
}

/* --- Primitivas de layout ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--goteira);
}

.secao { padding-block: var(--pad-secao); }
.secao--claro { background: var(--superficie); }

.pular-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100%;
  z-index: var(--z-menu);
  padding: 0.75rem 1.25rem;
  background: var(--tinta);
  color: #fff;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top var(--dur-1) var(--ease);
}
.pular-link:focus-visible { top: 1rem; }

/* Filete dourado: a marca registrada do site, agora com desenho de entrada. */
.filete {
  width: 3.5rem;
  height: 2px;
  margin-block: 1.5rem;
  background: var(--ouro);
  border: 0;
  transform-origin: left center;
}
.filete--centro { margin-inline: auto; transform-origin: center; }

.titulo-secao { max-width: 22ch; }
.titulo-secao--centro { margin-inline: auto; text-align: center; }

/* Cabeçalho editorial em duas colunas: título e filete à esquerda, lead à
   direita, alinhados pela base — o ritmo assimétrico das seções largas. */
.cabecalho-duplo {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 1rem + 2.5vw, 4.5rem);
  align-items: end;
}
.cabecalho-duplo .filete { margin-bottom: 0.4rem; }
/* Com um lead longo à direita (duas alturas de parágrafo), o alinhamento pela
   base afasta demais o título; a variante alinha pelo topo. */
.cabecalho-duplo--topo { align-items: start; }
.cabecalho-duplo--topo .filete { margin-bottom: 0; }
@media (max-width: 56rem) {
  .cabecalho-duplo {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    align-items: start;
  }
  .cabecalho-duplo .filete { margin-bottom: 0; }
}

.lead {
  max-width: 62ch;
  color: var(--tinta-2);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.6;
}
.lead--centro { margin-inline: auto; text-align: center; }

.prosa > * + * { margin-top: 1.15em; }
.prosa { max-width: var(--largura-texto); }

/* --- Botões -------------------------------------------------------------- */

.botao {
  --botao-fundo: var(--ouro);
  --botao-tinta: #201804;
  position: relative;
  /* Isola o contexto de empilhamento para que o preenchimento em ::before
     possa ficar atrás do rótulo sem escapar para trás do cabeçalho. */
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.65rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: var(--botao-fundo);
  color: var(--botao-tinta);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}
/* Só a seta solta, filha direta: a seta em revezamento vive dentro de uma
   janela recortada e tem movimento próprio. */
.botao > .icone {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--dur-2) var(--ease);
}
.botao:hover {
  --botao-fundo: color-mix(in oklab, var(--ouro) 88%, #000000);
  box-shadow: var(--sombra-1);
  transform: translateY(-1px);
}
.botao:hover > .icone { transform: translateX(3px); }
.botao:active { transform: translateY(0); }

/* Seta em revezamento: uma janela do tamanho exato de uma seta, com duas
   dentro. No hover a primeira sai pela direita e a segunda entra pela
   esquerda — mesmo sentido do preenchimento do botão e do sublinhado dos
   links, para que o gesto seja reconhecível e não mais um efeito avulso. */
.botao__seta {
  position: relative;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  overflow: hidden;
}
.botao__seta .icone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-2) var(--ease-expo);
}
.botao__seta .icone + .icone { transform: translateX(-135%); }
.botao:hover .botao__seta .icone,
.botao:focus-visible .botao__seta .icone { transform: translateX(135%); }
.botao:hover .botao__seta .icone + .icone,
.botao:focus-visible .botao__seta .icone + .icone { transform: none; }

/* Borda com presença suficiente para sobreviver por cima de fotografia —
   o cinza de formulário desaparecia no véu do hero. */
.botao--linha {
  --botao-fundo: transparent;
  --botao-tinta: var(--tinta);
  border-color: color-mix(in oklab, var(--tinta) 32%, transparent);
}
.botao--linha:hover {
  --botao-fundo: transparent;
  --botao-tinta: var(--ouro-tinta);
  border-color: var(--ouro);
  box-shadow: none;
}

.botao--claro {
  --botao-fundo: transparent;
  --botao-tinta: #fff;
  border-color: rgb(255 255 255 / 0.35);
}
.botao--claro:hover {
  --botao-fundo: rgb(255 255 255 / 0.09);
  border-color: var(--ouro);
}

/* Ação de conversão permanente do cabeçalho. Em repouso deixou de ser um
   contorno oco: um véu dourado de 10% dá-lhe corpo sobre o branco da barra,
   sem chegar ao peso do botão sólido do hero logo abaixo. No hover o dourado
   preenche da esquerda para a direita — o mesmo gesto do sublinhado dos links
   e do filete das seções, o vocabulário que o site já tinha. */
.botao--linha-ouro {
  --botao-fundo: color-mix(in oklab, var(--ouro) 10%, transparent);
  --botao-tinta: var(--tinta);
  border-color: var(--ouro-borda);
  font-weight: 500;
}
.botao--linha-ouro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-expo);
}
.botao--linha-ouro:hover,
.botao--linha-ouro:focus-visible {
  --botao-fundo: color-mix(in oklab, var(--ouro) 10%, transparent);
  --botao-tinta: #201804;
  border-color: var(--ouro);
  /* Sombra tingida da própria cor, não cinza: o botão parece assentar sobre a
     barra em vez de flutuar recortado dela. */
  box-shadow: 0 10px 22px -12px rgb(140 104 48 / 0.8);
  transform: translateY(-1px);
}
.botao--linha-ouro:hover::before,
.botao--linha-ouro:focus-visible::before { transform: scaleX(1); }

/* Link com sublinhado que cresce a partir da esquerda. */
.link-ouro {
  color: var(--ouro-tinta);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--ouro), var(--ouro));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-2) var(--ease);
}
.link-ouro:hover { background-size: 100% 1px; }

/* --- Cabeçalho ----------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
.header[data-rolado='true'] {
  border-bottom-color: var(--linha);
  box-shadow: var(--sombra-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--altura-header);
  transition: height var(--dur-2) var(--ease);
}
.header[data-rolado='true'] .header__inner { height: var(--altura-header-min); }

.header__marca { flex-shrink: 0; line-height: 0; }
.header__marca img {
  width: auto;
  height: clamp(2.15rem, 1.7rem + 1.4vw, 2.75rem);
  transition: height var(--dur-2) var(--ease);
}
.header[data-rolado='true'] .header__marca img {
  height: clamp(1.95rem, 1.6rem + 1.1vw, 2.3rem);
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 0.4rem + 1.7vw, 2.35rem); }

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 0.3rem + 1.6vw, 2.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current='true'] { color: var(--tinta); }
.nav__link:hover::after,
.nav__link[aria-current='true']::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Filete vertical antes da ação: separa navegação de conversão sem precisar
   de mais espaço numa barra que já é larga. */
.header__cta {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.4vw, 1.9rem);
  flex-shrink: 0;
}
.header__cta::before {
  content: '';
  width: 1px;
  height: 1.6rem;
  background: var(--linha);
}
.header__cta .botao { padding: 0.78rem 1.45rem; }
.header__cta .botao > .icone,
.header__cta .botao__seta { width: 0.95rem; height: 0.95rem; }

/* Pílula com rótulo e ícone, não um hambúrguer solto: a mesma família do
   botão de contorno do site. Só existe no móvel. */
.menu-btn {
  display: none;
  align-items: center;
  gap: 0.55rem;
  height: 2.75rem;
  padding: 0 1.05rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: none;
  color: var(--tinta);
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}
.menu-btn .icone { width: 1.15rem; height: 1.15rem; }
.menu-btn__rotulo {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-btn__fechar { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__abrir { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__fechar { display: block; }

@media (max-width: 60rem) {
  .menu-btn { display: inline-flex; }
  .header__cta { display: none; }

  /* Altura fixa no móvel: o menu em tela cheia ancora nela, e um cabeçalho
     que encolhe deixaria uma fresta entre os dois. */
  .header__inner,
  .header[data-rolado='true'] .header__inner { height: var(--altura-header-min); }

  /* Painel grafite em tela cheia: o mesmo mundo escuro do hero. O véu do
     painel só carrega a cor; quem entra em cena são os itens, um a um. */
  .nav {
    position: fixed;
    inset: var(--altura-header-min) 0 0;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    /* Anula o align-items:center da barra desktop: aqui cada item ocupa a
       largura toda do painel. */
    align-items: stretch;
    gap: 0;
    padding: clamp(1.75rem, 5vw, 3rem) var(--goteira)
      max(2rem, env(safe-area-inset-bottom));
    background: var(--escuro);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-2) var(--ease),
      visibility var(--dur-2) linear;
  }
  .nav[data-aberto='true'] {
    opacity: 1;
    visibility: visible;
  }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    counter-reset: item-menu;
  }
  .nav__lista li {
    counter-increment: item-menu;
    opacity: 0;
    transform: translateY(0.9rem);
    transition:
      opacity var(--dur-3) var(--ease),
      transform var(--dur-3) var(--ease-expo);
  }
  .nav__lista li + li { border-top: 1px solid rgb(255 255 255 / 0.12); }
  .nav[data-aberto='true'] .nav__lista li {
    opacity: 1;
    transform: none;
  }
  /* Escalonamento dos seis itens e do bloco de ação — decisão de design em
     classe/nth-child, nunca em style= (a CSP proíbe). */
  .nav[data-aberto='true'] .nav__lista li:nth-child(2) { transition-delay: 45ms; }
  .nav[data-aberto='true'] .nav__lista li:nth-child(3) { transition-delay: 90ms; }
  .nav[data-aberto='true'] .nav__lista li:nth-child(4) { transition-delay: 135ms; }
  .nav[data-aberto='true'] .nav__lista li:nth-child(5) { transition-delay: 180ms; }
  .nav[data-aberto='true'] .nav__lista li:nth-child(6) { transition-delay: 225ms; }

  .nav__link {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    padding-block: 1.05rem;
    font-family: var(--fonte-display);
    font-size: clamp(1.55rem, 5.6vw, 2.05rem);
    color: #fff;
  }
  /* Índice dourado à maneira da faixa de serviços: vocabulário do site. */
  .nav__link::before {
    content: counter(item-menu, decimal-leading-zero);
    flex-shrink: 0;
    font-size: 0.8rem;
    font-style: italic;
    letter-spacing: 0.14em;
    color: var(--ouro);
  }
  .nav__link::after { display: none; }
  .nav__link:hover,
  .nav__link[aria-current='true'] { color: var(--ouro); }

  .nav__cta-movel {
    display: block;
    margin-top: auto;
    padding-top: 2.5rem;
    opacity: 0;
    transform: translateY(0.9rem);
    transition:
      opacity var(--dur-3) var(--ease),
      transform var(--dur-3) var(--ease-expo);
  }
  .nav[data-aberto='true'] .nav__cta-movel {
    opacity: 1;
    transform: none;
    transition-delay: 280ms;
  }
  .nav__cta-movel .botao { width: 100%; justify-content: center; }

  .nav__contato-movel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.25rem;
    margin-top: 1.15rem;
    font-size: var(--fs-sm);
    font-weight: 300;
  }
  .nav__contato-movel a {
    padding-block: 0.25rem;
    color: rgb(255 255 255 / 0.82);
    text-decoration: none;
  }

  /* Com o menu aberto, a barra funde com o painel: fundo grafite, logo em
     branco e pílula clara — uma peça só, sem emenda branca no topo. */
  body.menu-aberto .header {
    background: var(--escuro);
    border-bottom-color: transparent;
    box-shadow: none;
  }
  body.menu-aberto .header__marca img { filter: brightness(0) invert(1); }
  body.menu-aberto .menu-btn {
    color: #fff;
    border-color: rgb(255 255 255 / 0.38);
  }
}

@media (min-width: 60.0625rem) {
  .nav__cta-movel,
  .nav__contato-movel { display: none; }
}

/* Trava a rolagem do fundo enquanto o menu móvel ocupa a tela. */
body.menu-aberto { overflow: hidden; }

/* --- Hero -----------------------------------------------------------------
   Banner escuro de borda a borda: a fotografia atravessa a janela inteira
   sob um véu grafite que abre da esquerda (texto claro) para a direita
   (imagem plena). O itálico dourado do título é o único ponto de cor.       */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(52rem, calc(100svh - var(--altura-header)));
  padding-block: clamp(4.5rem, 2rem + 8vw, 8.5rem) 0;
  overflow: hidden;
  background: var(--escuro);
  color: #fff;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__fundo picture,
.hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* Véu grafite denso atrás do texto, aberto à direita onde a fotografia
   respira; o degradê inferior assenta a faixa de credenciais. */
.hero__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgb(10 12 16 / 0.94) 0%,
      rgb(10 12 16 / 0.88) 32%,
      rgb(10 12 16 / 0.6) 58%,
      rgb(10 12 16 / 0.3) 80%,
      rgb(10 12 16 / 0.16) 100%
    ),
    linear-gradient(to top, rgb(10 12 16 / 0.6) 0%, rgb(10 12 16 / 0) 28%);
}

.hero__conteudo { max-width: 48rem; }

.hero__titulo {
  color: #fff;
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.026em;
}
.hero__titulo em {
  font-style: italic;
  font-weight: 400;
  color: var(--ouro);
}

.hero__sub {
  max-width: 46ch;
  margin-top: 1.9rem;
  color: rgb(255 255 255 / 0.87);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.62;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(2.1rem, 1.4rem + 1.8vw, 3rem);
}

/* Faixa de credenciais atravessando o banner: números em Playfair sobre
   vidro escuro com filete dourado — banda de fatos verificáveis, não
   vaidade. */
.hero__credenciais {
  margin-top: clamp(3.5rem, 1.5rem + 7vw, 7rem);
  border-top: 1px solid color-mix(in oklab, var(--ouro) 45%, transparent);
  background: rgb(10 12 16 / 0.52);
  backdrop-filter: blur(8px);
}
.hero__credenciais ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.25rem 2rem;
  margin: 0;
  padding: 1.6rem 0;
  list-style: none;
}
.hero__credenciais li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.35rem;
}
.hero__credenciais li + li {
  padding-left: 2rem;
  border-left: 1px solid rgb(255 255 255 / 0.16);
}
.hero__credenciais b {
  color: #fff;
  font-family: var(--fonte-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero__credenciais span {
  color: rgb(255 255 255 / 0.74);
  font-size: var(--fs-xs);
  letter-spacing: 0.015em;
}

@media (max-width: 48rem) {
  /* Altura mínima em vez de auto: reserva uma faixa inferior em que a
     fotografia aparece de fato sob um véu mais leve. */
  .hero {
    min-height: min(36rem, calc(100svh - var(--altura-header-min)));
    padding-block: 3.5rem 0;
  }
  /* O grafite segue quase pleno atrás do texto (topo) e só abre nos ~25%
     finais, onde não há mais texto solto sobre a imagem. */
  .hero__fundo::after {
    background:
      linear-gradient(
        to bottom,
        rgb(10 12 16 / 0.94) 0%,
        rgb(10 12 16 / 0.9) 46%,
        rgb(10 12 16 / 0.82) 64%,
        rgb(10 12 16 / 0.45) 82%,
        rgb(10 12 16 / 0.2) 100%
      );
  }
  /* Com a fotografia visível sob a faixa, o fundo dela precisa de mais
     corpo para manter a nota clara (0.74 de branco) nos 4,5:1. */
  .hero__credenciais {
    background: rgb(10 12 16 / 0.78);
  }
  .hero__credenciais ul { grid-template-columns: 1fr; padding-block: 1.25rem; gap: 0; }
  .hero__credenciais li {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    padding-block: 0.6rem;
  }
  .hero__credenciais li + li {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }
  .hero__credenciais b { font-size: 1.18rem; }
}

/* --- Sobre --------------------------------------------------------------- */

.sobre__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}

.sobre__texto p {
  color: var(--tinta-2);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.72;
}

/* Os três pilares assinados pelo traço dourado do site — a pílula de borda
   cinza saiu; o marcador é o mesmo filete curto das frentes da Capitalis. */
.pilares {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 2.2rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.pilares li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--tinta);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pilares li::before {
  content: '';
  flex-shrink: 0;
  width: 1.15rem;
  height: 2px;
  background: var(--ouro);
}

/* Moldura dourada deslocada: a única peça decorativa da seção. */
.sobre__figura { position: relative; }
.sobre__figura::before {
  content: '';
  position: absolute;
  inset: auto -1.15rem -1.15rem auto;
  width: min(62%, 17rem);
  height: min(58%, 14rem);
  border-right: 2px solid var(--ouro);
  border-bottom: 2px solid var(--ouro);
  pointer-events: none;
}
.sobre__figura picture,
.sobre__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 56rem) {
  .sobre__grade { grid-template-columns: 1fr; gap: 2.75rem; }
  .sobre__figura { order: -1; }
  .sobre__figura::before { inset: auto -0.75rem -0.75rem auto; }
}

/* --- Serviços ------------------------------------------------------------ */

.servicos__cabecalho { margin-bottom: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }

/* Faixa fotográfica de borda a borda: quatro colunas de altura plena, lado a
   lado, separadas por filetes claros. A coluna sob o cursor cresce e as
   vizinhas cedem — o ritmo assimétrico agora é vivo, não fixo. */
.servicos__grade {
  display: flex;
  height: clamp(30rem, 74vh, 42rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.servico {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  overflow: hidden;
  color: #fff;
  /* Curva simétrica e um pequeno atraso: a coluna acompanha o cursor sem
     solavanco, e varrer a faixa com o mouse não dispara uma dança de
     larguras — só o hover que se demora conta. */
  transition: flex-grow 680ms var(--ease-suave) 70ms;
}
.servico + .servico { border-left: 1px solid rgb(255 255 255 / 0.18); }
.servico:hover { flex-grow: 1.5; }
.servico picture,
.servico img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mesma cadência e atraso da largura: imagem e coluna se movem juntas. */
  transition: transform 680ms var(--ease-suave) 70ms;
}
.servico::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(12 14 17 / 0.9) 0%,
    rgb(12 14 17 / 0.62) 38%,
    rgb(12 14 17 / 0.26) 68%,
    rgb(12 14 17 / 0.16) 100%
  );
  transition: opacity var(--dur-3) var(--ease);
}
.servico:hover img { transform: scale(1.045); }
.servico:hover::after { opacity: 0.88; }

/* Índice à maneira dos departamentos numerados da Capitalis Partners: o
   dourado lê bem aqui porque assenta sobre a base escura do véu do cartão. */
.servico__num {
  color: var(--ouro);
  font-family: var(--fonte-display);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.14em;
  margin-bottom: 0.55rem;
}

.servico__titulo {
  color: #fff;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.servico__filete {
  width: 2.25rem;
  height: 2px;
  margin: 0.9rem 0 0.85rem;
  border: 0;
  background: var(--ouro);
  transition: width var(--dur-3) var(--ease);
}
.servico:hover .servico__filete { width: 3.75rem; }
.servico__desc {
  max-width: 46ch;
  color: rgb(255 255 255 / 0.87);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.6;
}

/* Sem cursor para expandir colunas, a faixa vira mosaico: duas colunas de
   azulejos fotográficos em tablets, uma única no telefone. */
@media (max-width: 56rem) {
  .servicos__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(15rem, 36vw, 19.5rem);
    gap: 1px;
    height: auto;
  }
  .servico + .servico { border-left: 0; }
  .servico:hover { flex-grow: 1; }
}
@media (max-width: 40rem) {
  .servicos__grade {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(15rem, 46vw, 20rem);
  }
}

/* --- Faixa de atuação ------------------------------------------------------
   Declaração tipográfica centrada: entre a faixa fotográfica dos serviços e
   a liderança, a página respira — o tipo em corpo grande é a imagem.        */

.faixa {
  padding-block: clamp(5rem, 3rem + 8vw, 10rem);
  background: var(--papel);
  text-align: center;
}

.faixa__conteudo {
  max-width: 56rem;
  margin-inline: auto;
}
.faixa__titulo {
  font-size: clamp(2.2rem, 1.25rem + 3.6vw, 4.1rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
.faixa .filete {
  margin-inline: auto;
  transform-origin: center;
}
.faixa__texto {
  max-width: 52ch;
  margin-inline: auto;
  margin-top: 0.5rem;
  color: var(--tinta-2);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
}
/* Ênfase assinada pelo dourado: sublinhado de 2px, não negrito gritado. */
.faixa__texto strong {
  color: var(--tinta);
  font-weight: 500;
  border-bottom: 2px solid var(--ouro);
}

/* --- Liderança ----------------------------------------------------------- */

.lideranca__cabecalho { margin-bottom: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }
.lideranca__cabecalho .lead { text-wrap: balance; }
.lideranca__intro {
  max-width: 66ch;
  margin-top: 1.2rem;
  color: var(--tinta-2);
  font-weight: 300;
  line-height: 1.72;
}

/* Dois retratos lado a lado, em cor: as fotografias vêm do mesmo estúdio
   escuro, e o nome assenta sobre a base da própria imagem, sob o mesmo véu
   grafite do hero e da faixa de serviços — vocabulário do site, não moldura
   nova. A mesma estrutura repetida pelo mesmo laço — o destaque visual dos
   dois perfis segue idêntico por construção, não por ajuste. */
.lideres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1rem + 4.5vw, 5rem);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lider__figura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 1.6rem;
  border-radius: var(--raio-g);
}
/* Os arquivos já vêm cortados em 4:5, na mesma altura de cabeça e na mesma
   linha de olhos; o aspect-ratio aqui é a garantia de que uma troca futura de
   fotografia não desalinhe o par. */
.lider__figura picture,
.lider__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Véu apenas no terço final, onde vive o nome; o rosto fica limpo. */
.lider__figura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(12 14 17 / 0.88) 0%,
    rgb(12 14 17 / 0.46) 24%,
    rgb(12 14 17 / 0) 46%
  );
}

.lider__id {
  position: absolute;
  inset-inline: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  bottom: clamp(1.1rem, 0.75rem + 1.2vw, 1.75rem);
  z-index: 1;
}

.lider__cargo {
  color: var(--ouro);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.lider__nome {
  margin-top: 0.5rem;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.lider__marca {
  display: inline-block;
  margin-top: 0.85rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--ouro);
  color: var(--tinta);
  font-size: var(--fs-h4);
  font-weight: 400;
}
.lider__texto {
  max-width: 58ch;
  margin-top: 1.8rem;
}
.lider__texto p {
  color: var(--tinta-2);
  font-weight: 300;
  line-height: 1.75;
}
.lider__texto p + p { margin-top: 1.1em; }

@media (max-width: 56rem) {
  .lideres { grid-template-columns: 1fr; gap: clamp(3rem, 8vw, 4.5rem); }
}

/* --- Capitalis (empresa do grupo) -----------------------------------------
   Perfil dedicado no lugar da antiga vitrine de logotipos: texto à esquerda,
   painel com a marca e as frentes de atuação à direita. A seção assume o
   fundo grafite — a empresa do grupo é um mundo próprio, e o escuro devolve
   o eco do hero no fim da página. O único rótulo em versalete acima de
   título do site inteiro — é informação ("empresa do grupo"), não gramática
   de seção.                                                                 */

.capitalis {
  background: var(--escuro);
  color: rgb(255 255 255 / 0.78);
}
.capitalis .titulo-secao { color: #fff; }
.capitalis .lead { color: rgb(255 255 255 / 0.87); }

.capitalis__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.75rem, 1.2rem + 5vw, 6rem);
  align-items: center;
}

.capitalis__kicker {
  margin-bottom: 1.1rem;
  color: var(--ouro);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.capitalis__prosa {
  max-width: 58ch;
  margin-top: 1.15em;
  color: rgb(255 255 255 / 0.78);
  font-weight: 300;
  line-height: 1.72;
}

.capitalis__cta { margin-top: 2.1rem; }
/* O botão de contorno herda o desenho claro sobre o grafite. */
.capitalis .botao--linha {
  --botao-tinta: #fff;
  border-color: rgb(255 255 255 / 0.4);
}
.capitalis .botao--linha:hover {
  --botao-fundo: rgb(255 255 255 / 0.09);
  --botao-tinta: #fff;
  border-color: var(--ouro);
}
.capitalis__cta .icone {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--dur-2) var(--ease);
}
.capitalis__cta:hover .icone { transform: translateX(3px); }

.capitalis__painel {
  position: relative;
  padding: clamp(1.85rem, 1.2rem + 2.2vw, 3rem);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--raio-g);
  background: rgb(255 255 255 / 0.045);
}
/* A mesma moldura dourada deslocada de "sobre" e dos retratos da liderança —
   vocabulário do site, não ornamento novo. */
.capitalis__painel::before {
  content: '';
  position: absolute;
  inset: auto -1.15rem -1.15rem auto;
  width: min(58%, 15rem);
  height: min(52%, 12rem);
  border-right: 2px solid var(--ouro);
  border-bottom: 2px solid var(--ouro);
  pointer-events: none;
}

/* O arquivo da marca vem com fundo branco, sem transparência; sobre o
   grafite, a placa branca com borda assume o fundo como moldura intencional. */
.capitalis__logo {
  display: inline-block;
  margin-bottom: 1.85rem;
  padding: 1.1rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--raio);
  background: #fff;
}
.capitalis__logo img {
  width: auto;
  height: clamp(2.6rem, 2.1rem + 1.6vw, 3.3rem);
  object-fit: contain;
}

.capitalis__frentes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.capitalis__frentes li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.95rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  color: #fff;
  font-size: var(--fs-corpo);
}
/* Filete curto como marcador: o traço dourado que assina o site inteiro. */
.capitalis__frentes li::before {
  content: '';
  flex-shrink: 0;
  width: 1.15rem;
  height: 2px;
  background: var(--ouro);
}

@media (max-width: 56rem) {
  .capitalis__grade { grid-template-columns: 1fr; gap: 2.75rem; }
  .capitalis__painel::before { inset: auto -0.75rem -0.75rem auto; }
}

/* --- Contato ---------------------------------------------------------------
   Um único cartão em duas colunas: trilho grafite com os dados e o mapa à
   esquerda, formulário sobre branco à direita. A mesma altura nas duas
   colunas é garantia da construção — o mapa estica para absorver a
   diferença, seja qual for o tamanho do formulário.                         */

.contato__cabecalho { margin-bottom: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }

.contato__cartao {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  overflow: hidden;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-2);
}

.contato__rail {
  display: flex;
  flex-direction: column;
  padding: clamp(1.85rem, 1.2rem + 2.2vw, 3rem);
  background: var(--escuro);
  color: #fff;
}

.contato__painel {
  padding: clamp(1.85rem, 1.2rem + 2.2vw, 3rem);
  background: var(--papel);
}

.contato__dados {
  display: grid;
  gap: 1.35rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}
.contato__dados li {
  display: grid;
  gap: 0.2rem;
}
.contato__rotulo {
  color: var(--ouro);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.contato__valor {
  color: #fff;
  font-size: var(--fs-h4);
  text-decoration: none;
}
a.contato__valor:hover { color: var(--ouro); }

/* Mapa da sede: o único conteúdo externo da página. Ocupa todo o resto do
   trilho e entra em meio-tom quente — peça da identidade, não um mapa
   colado. O tom volta ao natural quando o cursor o consulta de fato. */
.contato__mapa {
  flex: 1;
  min-height: 15rem;
  margin-top: auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--raio);
}
.contato__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(0.16) contrast(1.02);
  transition: filter var(--dur-2) var(--ease);
}
.contato__mapa:hover iframe { filter: none; }

/* --- Formulário ----------------------------------------------------------- */

.form {
  display: grid;
  gap: 1.15rem;
}
.form__par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.campo { display: grid; gap: 0.4rem; }
.campo label {
  color: var(--tinta);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.campo label small {
  color: var(--tinta-3);
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* Borda a 3,3:1 sobre o branco — o cinza claro de formulário (1,6:1) era a
   única reprovação de contraste do site antigo e não volta. */
.campo input:not([type='checkbox']),
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.78rem 1rem;
  border: 1px solid color-mix(in oklab, var(--tinta) 46%, #ffffff);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  transition: border-color var(--dur-1) var(--ease);
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: color-mix(in oklab, var(--tinta) 62%, #ffffff); }
.campo textarea { resize: vertical; min-height: 8rem; }
.campo [aria-invalid='true'] { border-color: #a02c2c; }

.campo__erro {
  color: #a02c2c;
  font-size: var(--fs-xs);
}

.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.5;
  cursor: pointer;
}
.consentimento input {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  accent-color: var(--ouro-tinta);
}

/* Fora da tela, não do DOM: robôs preenchem, pessoas nunca veem. */
.campo--armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__enviar { justify-self: start; }
.form__enviar[disabled] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.form__status,
.form__banner {
  padding: 0.9rem 1.15rem;
  border: 1px solid;
  border-radius: var(--raio);
  font-size: var(--fs-sm);
}
.form__banner { margin: 0 0 1.5rem; }
.form__status--ok,
.form__banner--ok {
  border-color: color-mix(in oklab, var(--ouro) 55%, transparent);
  background: color-mix(in oklab, var(--ouro) 10%, #ffffff);
  color: var(--tinta);
}
.form__status--erro,
.form__banner--erro {
  border-color: color-mix(in oklab, #a02c2c 45%, transparent);
  background: color-mix(in oklab, #a02c2c 6%, #ffffff);
  color: #7c2222;
}

@media (max-width: 56rem) {
  .contato__cartao { grid-template-columns: 1fr; }
  .contato__mapa { min-height: 16rem; }
}
@media (max-width: 34rem) {
  .form__par { grid-template-columns: 1fr; }
}

/* --- Rodapé -------------------------------------------------------------- */

.rodape {
  padding-block: clamp(3.25rem, 2rem + 4vw, 5rem) 0;
  border-top: 1px solid var(--linha);
  background: var(--superficie);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
}

.rodape__marca img {
  width: auto;
  height: 2.6rem;
}
.rodape__sobre {
  max-width: 34ch;
  margin-top: 1.25rem;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.65;
}

.rodape__titulo {
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.rodape__titulo + * { margin-top: 1.35rem; }

.rodape__lista {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Lista de links não é texto corrido: cada alvo precisa dos 24px do WCAG 2.2. */
.rodape__lista a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--tinta-2);
  font-size: var(--fs-sm);
  font-weight: 300;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease);
}
.rodape__lista a:hover { color: var(--ouro-tinta); }

.rodape__sociais { display: flex; gap: 0.6rem; margin-top: 1.35rem; }
.rodape__sociais a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  color: var(--tinta-2);
  transition:
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}
.rodape__sociais a:hover { color: var(--ouro-tinta); border-color: var(--ouro); }
.rodape__sociais .icone { width: 1.1rem; height: 1.1rem; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--linha);
  color: var(--tinta-3);
  font-size: var(--fs-xs);
}
.rodape__base a {
  display: inline-block;
  padding-block: 0.28rem;
  color: var(--tinta-3);
  text-decoration: none;
}
.rodape__base a:hover { color: var(--ouro-tinta); }

/* Um e-mail e um número de telefone anunciam sozinhos que são ação; um nome
   próprio no meio de uma frase, não. Daí o sublinhado permanente aqui e não
   nos vizinhos — ele é a única pista de que "PragmaSoft" é clicável. */
/* Precisa da mesma força de ".rodape__base a", que zera a decoração acima. */
.rodape__base .rodape__credito {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--tinta-3) 50%, transparent);
  text-underline-offset: 0.22em;
  transition:
    color var(--dur-2) var(--ease),
    text-decoration-color var(--dur-2) var(--ease);
}
.rodape__base .rodape__credito:hover { text-decoration-color: var(--ouro); }

@media (max-width: 56rem) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .rodape__grade { grid-template-columns: 1fr; }
}

/* --- Revelação ao rolar --------------------------------------------------
   O conteúdo é visível por padrão. O JS marca <html data-motion> e só então
   o estado inicial é aplicado, para que a página nunca fique em branco caso
   o script não rode (headless, aba oculta, erro de rede).                    */

html[data-motion] .revelar {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease);
  transition-delay: var(--atraso, 0ms);
}

/* Atrasos vivem no CSS, nunca em style= inline: a CSP do site não permite
   estilos inline, e o escalonamento é decisão de design, não de template. */
.revelar--tardio { --atraso: 120ms; }
.servicos__grade .servico:nth-child(2) { --atraso: 90ms; }
.servicos__grade .servico:nth-child(3) { --atraso: 180ms; }
.servicos__grade .servico:nth-child(4) { --atraso: 270ms; }
html[data-motion] .revelar.visivel {
  opacity: 1;
  transform: none;
}

html[data-motion] .filete {
  transform: scaleX(0);
  transition: transform var(--dur-3) var(--ease-expo) 120ms;
}
html[data-motion] .revelar.visivel .filete,
html[data-motion] .filete.visivel { transform: scaleX(1); }

/* Entrada orquestrada do hero: um gesto só, no carregamento. */
html[data-motion] .hero__titulo,
html[data-motion] .hero__sub,
html[data-motion] .hero__acoes,
html[data-motion] .hero__credenciais {
  opacity: 0;
  transform: translateY(1.5rem);
}
html[data-motion] .hero.pronto .hero__titulo,
html[data-motion] .hero.pronto .hero__sub,
html[data-motion] .hero.pronto .hero__acoes,
html[data-motion] .hero.pronto .hero__credenciais {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-4) var(--ease-expo),
    transform var(--dur-4) var(--ease-expo);
}
html[data-motion] .hero.pronto .hero__sub { transition-delay: 110ms; }
html[data-motion] .hero.pronto .hero__acoes { transition-delay: 200ms; }
html[data-motion] .hero.pronto .hero__credenciais { transition-delay: 300ms; }

html[data-motion] .hero__fundo img {
  transform: scale(1.06);
  transition: transform 1600ms var(--ease-expo);
}
html[data-motion] .hero.pronto .hero__fundo img { transform: none; }

/* --- Movimento reduzido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html[data-motion] .revelar,
  html[data-motion] .hero__titulo,
  html[data-motion] .hero__sub,
  html[data-motion] .hero__acoes,
  html[data-motion] .hero__credenciais {
    opacity: 1;
    transform: none;
  }
  html[data-motion] .filete { transform: scaleX(1); }
  html[data-motion] .hero__fundo img { transform: none; }
  .servico:hover img { transform: none; }
  /* Sem transição, a coluna saltaria de tamanho; melhor não crescer. */
  .servico:hover { flex-grow: 1; }
  .botao__seta .icone + .icone { transform: translateX(-135%); }
}

/* --- Impressão ------------------------------------------------------------
   Nenhum estado de animação pode sobreviver ao papel.                        */

@media print {
  html[data-motion] .revelar,
  html[data-motion] .hero__titulo,
  html[data-motion] .hero__sub,
  html[data-motion] .hero__acoes,
  html[data-motion] .hero__credenciais {
    opacity: 1 !important;
    transform: none !important;
  }
  html[data-motion] .filete { transform: none !important; }

  .header,
  .menu-btn { display: none; }

  /* Fundos não imprimem: as seções escuras voltam à tinta sobre papel, e as
     fotografias sob véu saem do caminho do texto. */
  .hero { background: none; color: var(--tinta); min-height: 0; }
  .hero__fundo { display: none; }
  .hero__titulo { color: var(--tinta); }
  .hero__titulo em { color: var(--ouro-tinta); }
  .hero__sub { color: var(--tinta-2); }
  .hero__credenciais { background: none; border-top-color: var(--linha-forte); }
  .hero__credenciais b { color: var(--tinta); }
  .hero__credenciais span { color: var(--tinta-3); }
  .hero__credenciais li + li { border-color: var(--linha); }

  .servico picture { display: none; }
  .servico { color: var(--tinta); border: 1px solid var(--linha); }
  .servico::after { display: none; }
  .servico__num { color: var(--ouro-tinta); }
  .servico__titulo { color: var(--tinta); }
  .servico__desc { color: var(--tinta-2); }

  .capitalis { background: none; color: var(--tinta-2); }
  .capitalis .titulo-secao { color: var(--tinta); }
  .capitalis .lead,
  .capitalis__prosa { color: var(--tinta-2); }
  .capitalis__kicker { color: var(--ouro-tinta); }
  .capitalis__painel { border-color: var(--linha); background: none; }
  .capitalis__frentes li { color: var(--tinta); border-top-color: var(--linha); }

  /* O véu dos retratos não imprime; nome e cargo descem para baixo da foto. */
  .lider__figura::after { display: none; }
  .lider__id { position: static; inset: auto; padding-top: 0.9rem; }
  .lider__cargo { color: var(--ouro-tinta); }
  .lider__nome { color: var(--tinta); }

  /* Um iframe de mapa não sobrevive ao papel; a morada já está nos dados. */
  .contato__mapa { display: none; }
  .contato__cartao { box-shadow: none; border: 1px solid var(--linha); }
  .contato__rail { background: none; color: var(--tinta); }
  .contato__rotulo { color: var(--ouro-tinta); }
  .contato__valor { color: var(--tinta); }
}

/* --- Utilitários --------------------------------------------------------- */

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}