/* ============================================================
   GOLDEN GATE INVEST — SITE COMERCIAL

   Segue o manual de identidade v2. As decisões abaixo não são de
   gosto: estão escritas lá, e cada uma tem o motivo anotado.

   PROPORÇÃO DE TINTA — 72% areia · 22% grafite · 4% latão · 2% laranja.
   "Se laranja e latão passam de um décimo da área, a cor está
   decorando em vez de indicar."
   É por isso que o site virou claro. O grafite ficou onde o manual
   manda: capa e rodapé. O miolo inteiro é areia — o papel do documento.

   NENHUM AZUL. "Azul é a cor de todo banco." O marinho #0F1039 da
   versão anterior saiu inteiro, inclusive das variáveis.

   SEM CANTO ARREDONDADO, SEM CÁPSULA, SEM GRADIENTE.
   As tintas são chapadas.

   Folha separada da do dashboard de propósito. São dois produtos com
   públicos diferentes: um é lido por quem está conhecendo o fundo, o
   outro é operado por quem já trabalha nele.
   ============================================================ */

:root {
  /* As quatro tintas, nos valores exatos do manual */
  --grafite: #11161B;
  --laranja: #C0392C;
  --latao:   #C39B4A;
  --areia:   #F5F2EC;

  /* Escala do grafite. Hierarquia de texto sem inventar cor nova:
     cinza aqui é sempre grafite diluído, nunca um cinza neutro. */
  --grafite-80: #3A4047;
  --grafite-60: #6A7076;
  --grafite-40: #9BA0A5;
  --grafite-15: #DCDAD5;

  /* Variações das quentes, só para estado (hover, foco) */
  --laranja-fundo: #8E2A20;
  --latao-claro:   #DCC48A;

  --papel: #FAF8F4;   /* areia um tom acima, para alternar seções */
  --regua: rgba(17, 22, 27, 0.14);

  /* Três famílias, três funções — e nada além disso. */
  --voz:   'Newsreader', Georgia, 'Times New Roman', serif;
  --texto: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dado:  'IBM Plex Mono', Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--texto);
  background: var(--areia);
  color: var(--grafite);
  font-size: 16.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.envelope { max-width: 1120px; margin: 0 auto; padding: 0 34px; }

/* ------------------------------------------------------------
   RÓTULO DE DADO

   Mono, caixa alta, entreletra aberta. O manual reserva a IBM Plex
   Mono a "números, datas, códigos e rótulos em caixa alta — nunca em
   texto corrido". É o que separa, no olho, informação de prosa, sem
   precisar de caixa nem de linha divisória.
   ------------------------------------------------------------ */
.selo-divulgacao,
.abertura-etiqueta,
.secao-etiqueta,
.faixa-item-rotulo,
.contato-rotulo,
.pessoa-cargo,
.formulario label > span,
.marca-sub,
.btn-plataforma,
.btn-principal,
.btn-secundario,
.formulario button,
.risco-titulo {
  font-family: var(--dado);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================
   TOPO
   ============================================================ */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grafite);
  border-bottom: 1px solid rgba(195, 155, 74, 0.28);
  transition: box-shadow .3s;
}
.topo.rolou { box-shadow: 0 6px 24px rgba(17, 22, 27, 0.28); }

.topo-interno {
  max-width: 1120px;
  margin: 0 auto;
  padding: 13px 34px;
  display: flex;
  align-items: center;
  gap: 30px;
  position: relative;
}

/* Assinatura horizontal: símbolo + nome. A margem livre à direita do
   símbolo é a largura da travessa superior, como pede o manual. */
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.marca svg, .marca img { height: 36px; width: auto; color: var(--latao); }
.marca-nome {
  font-family: var(--voz);
  font-size: 21px;
  font-weight: 400;
  color: var(--areia);
  line-height: 1.05;
  letter-spacing: .005em;
}
.marca-sub {
  font-size: 8.5px;
  letter-spacing: 0.34em;
  color: var(--latao);
  display: block;
  margin-top: 3px;
}

.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a {
  font-size: 14px;
  color: rgba(245, 242, 236, 0.78);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.menu a:hover { color: var(--areia); border-bottom-color: var(--laranja); }

/* "Uma ação primária por tela, em laranja cheio." É esta. */
.btn-plataforma {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--areia);
  background: var(--laranja);
  border: 1px solid var(--laranja);
  padding: 11px 19px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, border-color .18s, transform .18s;
}
.btn-plataforma:hover {
  background: var(--laranja-fundo);
  border-color: var(--laranja-fundo);
  transform: translateY(-2px);
}

.menu-botao {
  display: none;
  background: none;
  border: 1px solid rgba(195, 155, 74, 0.45);
  color: var(--areia);
  padding: 7px 11px;
  font-size: 15px;
  cursor: pointer;
  margin-left: auto;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--latao);
  outline-offset: 3px;
}

/* ============================================================
   ABERTURA — a capa

   Grafite chapado. Na versão anterior havia um halo em gradiente
   radial fazendo parallax; saiu, porque o manual é explícito: as
   tintas são chapadas. O movimento que restou é o símbolo se
   erguendo, que diz a mesma coisa sem pintar nada.
   ============================================================ */

.abertura {
  background: var(--grafite);
  color: var(--areia);
  /* Sem respiro em cima: ele passou para o texto, logo abaixo. Enquanto
     estava aqui, empurrava a foto para baixo junto e sobrava uma tira de
     grafite entre o cabeçalho e a imagem — que é justamente o contrário
     de sangrar. Embaixo ele fica, para separar a faixa de números da
     seção seguinte. */
  padding: 0 0 70px;
  overflow: hidden;
  /* Referência de posicionamento: a foto e o véu ficam por baixo de
     tudo, em posição absoluta em relação a esta seção. */
  position: relative;
}

/* O respiro que saiu da seção. Fica no texto, e não no bloco inteiro,
   porque a foto é posicionada em relação ao bloco: qualquer padding ali
   a empurraria para dentro. */
.abertura-principal > .envelope {
  padding-top: 78px;
  padding-bottom: 78px;
}

/* ------------------------------------------------------------
   A TORRE, EM FOTO — sangrando até a borda

   A foto ocupa a metade direita da capa, colada no topo, na base e na
   borda da tela. Sangrada, ela deixa de ser uma ilustração dentro da
   página e vira uma das paredes dela.

   Está fora do .envelope de propósito: aquele tem largura máxima e se
   centraliza, que é exatamente o oposto do que uma imagem sangrada
   precisa. O texto continua dentro do envelope, então segue alinhado
   com todas as outras seções.

   O texto não passa por baixo da foto porque os blocos da esquerda têm
   largura máxima em ch — o mais largo, a lista de pilares, mede 52
   caracteres. Mesmo numa tela de 1900px sobram uns 100px entre o fim do
   texto e o começo da imagem.
   ------------------------------------------------------------ */
.abertura-principal {
  position: relative;
  /* A altura não depende mais da foto — ela agora ocupa a seção inteira
     por baixo. Acompanha a janela para a primeira tela ter presença, com
     teto: numa tela muito alta, uma capa de mil pixels vira pôster e
     enterra o resto da página. */
  min-height: clamp(560px, 74vh, 820px);
  display: flex;
  align-items: center;
}
.abertura-principal > .envelope { width: 100%; }

.abertura-foto {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  z-index: 0;
}

/* Camada do parallax. Mais alta que o quadro que a contém — é essa
   sobra que dá espaço para deslizar sem mostrar buraco nas pontas. */
.abertura-foto-desliza {
  position: absolute;
  left: 0;
  right: 0;
  top: -6%;
  bottom: -6%;
  will-change: transform;
}

.abertura-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A torre tomada pela neblina fica à direita do centro, e o tabuleiro
     desce da esquerda para a direita. Ancorar em 58% mantém a torre no
     quadro quando a tela estreita e o recorte aperta pelos lados. */
  object-position: 58% center;
  display: block;
}

/* O véu de grafite sobre a foto.

   0,86 não foi escolhido no olho: saiu de medir os pixels da imagem
   exatamente sob a área onde o texto cai. Essa região é céu de neblina,
   clara por inteiro — mediana 0,73 de luminância, com 13% acima de 0,80.
   Não são alguns pontos brilhantes que dê para ignorar.

   Contra o texto em areia, o véu necessário sai assim:
     0,78  ->  3,4:1 no pior caso   (reprova)
     0,82  ->  4,0:1                (reprova por pouco)
     0,86  ->  4,8:1                (passa o mínimo de 4,5:1)

   É pesado, e a foto fica escura. Vale porque a imagem tem alto
   contraste com assunto escuro: mesmo a 14% de opacidade a ponte
   continua se destacando do céu numa razão de 5 para 1. Perde-se o cinza
   claro do fundo; o desenho da estrutura fica.

   Opacidade chapada, não degradê. */
.abertura-veu {
  position: absolute;
  inset: 0;
  background: rgba(17, 22, 27, 0.86);
  z-index: 1;
}

/* Todo o conteúdo sobe acima da foto e do véu. */
.abertura-principal,
.abertura > .envelope {
  position: relative;
  z-index: 2;
}

.selo-divulgacao {
  display: inline-block;
  justify-self: start;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.6);
  border: 1px solid rgba(245, 242, 236, 0.25);
  padding: 5px 12px;
  margin-bottom: 30px;
}

.abertura-etiqueta {
  font-size: 10.5px;
  color: var(--latao);
  margin-bottom: 20px;
}

/* Newsreader 300 acima de 40px — o peso que o manual pede para a voz
   em tamanho grande. Em 400 o título fica pesado demais para a
   quantidade de areia que vem logo abaixo. */
.abertura h1 {
  font-family: var(--voz);
  font-size: clamp(38px, 6.2vw, 64px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.008em;
  margin-bottom: 22px;
  max-width: 15ch;
}
.abertura h1 b { font-weight: 300; color: var(--latao); }

/* Cada linha vive dentro de uma máscara: o texto sobe de baixo dela. */
.abertura h1 .linha { display: block; overflow: hidden; padding-bottom: 4px; }

.abertura-tese {
  font-family: var(--voz);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--latao-claro);
  max-width: 44ch;
  margin-bottom: 14px;
}

/* A frase de fato que vem logo depois da assinatura. O manual pede
   "fato antes de adjetivo": a linha de marca não fica sozinha. */
.abertura-descricao {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.8);
  max-width: 50ch;
  margin-bottom: 34px;
}

.pilares { list-style: none; max-width: 52ch; margin-bottom: 38px; }
.pilares li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.76);
}
/* Fio de latão, não bolinha. Forma arredondada e cápsula estão
   proibidas no manual, e isso vale para marcador de lista. */
.pilares li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 14px; height: 1px;
  background: var(--latao);
}

.abertura-acoes { display: flex; flex-wrap: wrap; gap: 14px; }

.btn-principal, .btn-secundario {
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 15px 30px;
  text-decoration: none;
  border: 1px solid;
  display: inline-block;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn-principal {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--areia);
}
.btn-principal:hover { background: var(--laranja-fundo); border-color: var(--laranja-fundo); }
.btn-secundario {
  background: transparent;
  border-color: rgba(245, 242, 236, 0.38);
  color: var(--areia);
}
.btn-secundario:hover { border-color: var(--latao); color: var(--latao); }
.btn-principal:hover, .btn-secundario:hover { transform: translateY(-2px); }

/* Mesmo botão, tingido de grafite, para quando estiver sobre areia. */
.btn-secundario.claro { border-color: var(--regua); color: var(--grafite); }
.btn-secundario.claro:hover { border-color: var(--laranja); color: var(--laranja); }

/* faixa de dados — latão nos números, como manda o manual */
.faixa {
  border-top: 1px solid rgba(245, 242, 236, 0.18);
  margin-top: 56px;
  padding-top: 30px;
  display: grid;
  /* Quatro por fileira, fixo — e não auto-fit, que deixaria buraco à
     direita quando o número de itens não fecha a linha. Eram seis em três
     colunas; com a saída da subordinação média e do administrador, quatro
     em quatro fecham uma fileira só. */
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 30px;
}
.faixa-item-rotulo {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(245, 242, 236, 0.45);
  margin-bottom: 10px;
}
.faixa-item-valor {
  font-family: var(--voz);
  font-size: 31px;
  font-weight: 300;
  color: var(--latao);
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.faixa-item-nota {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(245, 242, 236, 0.52);
  margin-top: 7px;
}

@media (max-width: 940px) {
  /* No celular a foto vira faixa no topo, em vez de fundo da seção.

     O motivo é a forma da imagem: ela é panorâmica, 2:1. Esticada por
     uma capa de 1500px de altura numa tela de 375px, o recorte mostra
     uma tira vertical de 19% da largura — deixa de ser uma ponte e vira
     textura escura. Como faixa de 268px, a proporção do quadro fica em
     1,4 e a estrutura aparece de novo.

     Abaixo da faixa fica o grafite chapado da seção, que é o fundo que o
     manual dá à capa de qualquer jeito. */
  .abertura-foto,
  .abertura-veu {
    bottom: auto;
    height: 268px;
  }
  .abertura-foto { border-bottom: 1px solid rgba(195, 155, 74, 0.45); }
  .abertura-foto img { object-position: center center; }
  .abertura-veu { background: rgba(17, 22, 27, 0.5); }

  /* O texto começa abaixo da faixa. */
  .abertura-principal { min-height: 0; display: block; }
  .abertura-principal > .envelope { padding-top: 300px; padding-bottom: 54px; }

  /* Sem parallax: o ganho não compensa o trabalho de pintura no
     aparelho mais fraco. */
  .abertura-foto-desliza { transform: none !important; }

  .ponte { min-height: 300px; }
  .ponte-texto { padding-top: 52px; padding-bottom: 52px; }
}

/* ============================================================
   A PONTE — faixa de respiro

   Uma imagem inteira, do lado esquerdo ao direito da tela, entre duas
   seções densas de texto. É o único lugar da página onde a assinatura
   da marca aparece.

   A foto original tem céu roxo e rosa — cores que não existem na
   identidade — e muito azul, que o manual proíbe como cor de marca. O
   véu de grafite por cima devolve a imagem à paleta: escurece o roxo,
   apaga o azul e deixa em pé o que importa, que é a silhueta da ponte.
   É tinta chapada, uma opacidade só, não degradê.
   ============================================================ */

.ponte {
  position: relative;
  /* A altura cresce com a largura da tela, e o motivo é o recorte: com
     altura fixa, quanto mais larga a janela, mais fina fica a fatia
     visível da foto. Numa tela de 1900px, 380px de faixa mostravam 35%
     da imagem — e 35% de uma foto de baía dá água, não ponte. */
  min-height: clamp(380px, 28vw, 600px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--grafite);
}

.ponte-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 25%, e o número não é palpite: lendo os pixels da foto, a estrutura
     laranja da ponte ocupa de 21% a 52,5% da altura, com o tabuleiro em
     41,5%. Ancorar em 25% põe essa faixa no meio do recorte em qualquer
     largura de tela.

     O valor anterior, 62%, ancorava na metade de baixo — que nessa foto
     é só água. Numa tela larga, onde o recorte é mais apertado, a ponte
     saía inteira do quadro. */
  object-position: center 25%;
}

.ponte-veu {
  position: absolute;
  inset: 0;
  background: rgba(17, 22, 27, 0.62);
}

.ponte-texto {
  position: relative;
  /* width: 100% é obrigatório aqui, e o motivo não é óbvio: o .envelope
     usa `margin: 0 auto`, e margem automática num item de grade desliga
     o esticamento padrão. Sem esta linha o bloco encolhe até o tamanho
     do texto e se centraliza, e a frase deixa de alinhar com a margem
     esquerda de todas as outras seções — 334px em vez de 73px. */
  width: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
}

/* Itálico verdadeiro, como o manual pede para citação — a Newsreader
   tem o desenho itálico de fato, não a versão inclinada por software. */
.ponte-frase {
  font-family: var(--voz);
  font-size: clamp(26px, 4.6vw, 46px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.22;
  color: var(--areia);
  max-width: 20ch;
  text-wrap: balance;
  /* A foto por baixo tem partes claras. A sombra garante a leitura em
     cima delas sem precisar escurecer mais o véu e matar a imagem. */
  text-shadow: 0 2px 20px rgba(17, 22, 27, 0.6);
}

.ponte-nota {
  font-family: var(--dado);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--latao);
  margin-top: 20px;
}

/* ============================================================
   SEÇÕES — o papel
   ============================================================ */

.secao { padding: 86px 0; background: var(--areia); }
.secao.alternada { background: var(--papel); }

/* O laranja sinalizando a seção: fio em cima, etiqueta embaixo. É uma
   das três funções que o manual dá a ele. */
.secao-etiqueta {
  /* Era 10.5px. Em mono, caixa alta e 0,16em de entreletra, esse corpo fica
     no limite do legível e some ao lado do h2. Vale para todas as seções, e
     não só para "O Fundo", onde o problema foi notado. */
  font-size: 12.5px;
  color: var(--laranja);
  border-top: 2px solid var(--laranja);
  padding-top: 15px;
  display: inline-block;
  margin-bottom: 20px;
}

.secao h2 {
  font-family: var(--voz);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--grafite);
  max-width: 21ch;
  margin-bottom: 26px;
}

.secao-intro {
  font-size: 17px;
  line-height: 1.78;
  color: var(--grafite-80);
  max-width: 66ch;
  margin-bottom: 44px;
}

/* ------------------------------------------------------------
   A TESE — a única seção narrativa da página

   Todo o resto do site é informação em blocos: cartões, listas, ficha.
   Esta é prosa, e prosa se lê de outro jeito — linha mais longa, corpo
   um pouco maior, parágrafos com respiro entre si.

   A medida fica em 60 caracteres. Abaixo disso o olho salta de linha
   cedo demais e o texto fica picado; acima, perde o começo da linha
   seguinte. É a faixa em que se lê sem esforço.
   ------------------------------------------------------------ */
.tese-texto {
  max-width: 60ch;
}
.tese-texto p {
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--grafite-80);
}
.tese-texto p + p {
  margin-top: 24px;
}

/* A primeira frase carrega o leitor para dentro, então entra um pouco
   maior — é o único destaque tipográfico dentro da narrativa. */
.tese-texto p:first-child {
  font-size: 19px;
  line-height: 1.72;
  color: var(--grafite);
}

/* A linha de fecho: o número que a história inteira sustenta. Fio de
   latão em cima para separá-la da prosa, e a voz da marca no número. */
.tese-fecho {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 2px solid var(--latao);
  max-width: 60ch;
  font-size: 19px;
  line-height: 1.5;
  color: var(--grafite-80);
}
.tese-fecho b {
  display: block;
  margin-top: 8px;
  font-family: var(--voz);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .tese-texto p { font-size: 16.5px; line-height: 1.76; }
  .tese-texto p:first-child { font-size: 17.5px; }
  .tese-texto p + p { margin-top: 20px; }
  .tese-fecho { margin-top: 32px; font-size: 17px; }
}

/* --- cartões: cantos vivos, fio de régua, sem sombra --- */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--regua);
  border: 1px solid var(--regua);
}
/* Cinco cartões.
   Na grade automática eles caem como 3 + 2, e a célula que sobra não fica
   vazia: o fundo do contêiner é o que desenha os fios de 1px entre os
   cartões, então a sobra aparece como um bloco cinza chapado — parece
   deliberado, e é só falta de conteúdo.

   Aqui a grade tem seis colunas: três cartões de duas em cima, dois de três
   embaixo. As duas fileiras fecham, e a de baixo com cartões mais largos lê
   como escolha de composição, não como resto. */
.cartoes.cinco { grid-template-columns: repeat(6, 1fr); }
.cartoes.cinco > .cartao:nth-child(-n+3) { grid-column: span 2; }
.cartoes.cinco > .cartao:nth-child(n+4)  { grid-column: span 3; }

/* Esta grade não colapsa sozinha como a automática — seis colunas são seis
   colunas em qualquer largura —, então as quebras são explícitas.

   Em duas colunas a sobra voltaria no quinto cartão, sozinho na última
   fileira; por isso ele atravessa as duas. */
@media (max-width: 900px) {
  .cartoes.cinco { grid-template-columns: repeat(2, 1fr); }
  .cartoes.cinco > .cartao:nth-child(-n+3),
  .cartoes.cinco > .cartao:nth-child(n+4) { grid-column: span 1; }
  .cartoes.cinco > .cartao:nth-child(5)   { grid-column: span 2; }
}
@media (max-width: 560px) {
  .cartoes.cinco { grid-template-columns: 1fr; }
  .cartoes.cinco > .cartao:nth-child(-n+3),
  .cartoes.cinco > .cartao:nth-child(n+4),
  .cartoes.cinco > .cartao:nth-child(5) { grid-column: auto; }
}

.cartao {
  background: var(--areia);
  padding: 30px 28px;
  transition: transform .3s cubic-bezier(.16, .84, .38, 1);
}
.secao.alternada .cartao { background: var(--papel); }
.cartao:hover { transform: translateY(-4px); }
.cartao h3 {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--grafite);
  margin-bottom: 12px;
}
.cartao p { font-size: 15px; line-height: 1.7; color: var(--grafite-60); }

/* --- lista da tese --- */
.lista-tese { list-style: none; max-width: 72ch; }
.lista-tese li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 24px;
  font-size: 16.5px;
  line-height: 1.76;
  color: var(--grafite-80);
}
.lista-tese li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 18px; height: 2px;
  background: var(--laranja);
}
.lista-tese b { color: var(--grafite); font-weight: 600; }

/* --- equipe --- */
/* Coluna com teto, e não 1fr.

   Com 1fr as colunas dividem toda a largura disponível: com três pessoas
   dava 330px cada, mas com duas passava de 500px e a linha de texto ia a
   mais de oitenta caracteres — longe demais para o olho achar o começo da
   linha seguinte. O teto de 360px segura a medida em torno de 55
   caracteres, seja qual for a quantidade de gente na seção. */
.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  justify-content: start;
  gap: 32px 40px;
}
.pessoa {
  border-top: 2px solid var(--latao);
  padding-top: 20px;
  transition: transform .3s cubic-bezier(.16, .84, .38, 1);
}
.pessoa:hover { transform: translateY(-4px); }

/* ------------------------------------------------------------
   RETRATOS

   Largura de 168px, e o limite vem do arquivo menor: a foto do Daniel
   tem 262x300, que é o que existe publicado no site da Fortune. A 168px
   ela ainda tem 1,5 vez a densidade da tela; num cartão inteiro de
   360px ficaria esticada e mole. Quando chegar uma foto maior, este
   número pode subir.

   O corte em 4:5 iguala os dois retratos, que chegaram em proporções
   diferentes (0,87 e 0,71). `top` no eixo vertical porque o que não
   pode sair do quadro é a cabeça.

   O filtro de cinza é redundante hoje — as duas já vieram em preto e
   branco — e existe como rede: uma foto colorida acrescentada depois
   entraria em desacordo com as outras, e a seção inteira perderia a
   unidade por descuido de quem só trocou um arquivo.
   ------------------------------------------------------------ */
.pessoa-foto {
  width: 168px;
  /* height: auto é obrigatório, e o motivo não é óbvio. Os atributos
     width/height no HTML existem para o navegador reservar o espaço
     antes da imagem chegar, e evitar o salto de layout. Mas eles valem
     como altura definida — e `aspect-ratio` só age quando uma das duas
     dimensões é automática. Sem esta linha os retratos saíam em 168x300
     e 168x594, cada um com uma proporção, em vez dos 4:5 iguais. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
  margin-bottom: 20px;
}
.pessoa-nome {
  font-family: var(--voz);
  font-size: 22px;
  font-weight: 400;
  color: var(--grafite);
  margin-bottom: 5px;
}
.pessoa-cargo { font-size: 9.5px; color: var(--laranja); margin-bottom: 13px; }
.pessoa p { font-size: 14.5px; line-height: 1.7; color: var(--grafite-60); }

/* --- passos: a numeração é informação, e por isso é mono --- */
.passos { counter-reset: passo; max-width: 74ch; }
.passo {
  counter-increment: passo;
  position: relative;
  padding-left: 62px;
  padding-bottom: 36px;
  border-left: 1px solid var(--grafite-15);
  margin-left: 18px;
}
.passo:last-child { border-left-color: transparent; padding-bottom: 0; }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: -18px; top: -2px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: var(--grafite);
  color: var(--latao);
  font-family: var(--dado);
  font-size: 12px;
  font-weight: 500;
}
.passo h3 { font-size: 14.5px; font-weight: 600; color: var(--grafite); margin-bottom: 8px; }
.passo p { font-size: 15.5px; line-height: 1.74; color: var(--grafite-60); }

/* ------------------------------------------------------------
   FICHA DO FUNDO

   Identificação, classificação e caminho para os documentos. É a parte
   mais regulatória da página, e por isso a mais sóbria: sem cor de
   destaque, sem cartão, só um fio de latão em cima e a informação em
   duas colunas. Quem procura isto não está sendo convencido de nada —
   está conferindo.
   ------------------------------------------------------------ */
.ficha {
  margin-top: 46px;
  border-top: 2px solid var(--latao);
  padding-top: 24px;
}

.ficha-titulo {
  font-family: var(--dado);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite-60);
  margin-bottom: 22px;
}

.ficha-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 40px;
  max-width: 80ch;
}
.ficha-lista > div {
  border-top: 1px solid var(--regua);
  padding-top: 10px;
}
.ficha-lista dt {
  font-family: var(--dado);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafite-60);
  margin-bottom: 5px;
}
.ficha-lista dd {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--grafite);
}

.ficha-nota {
  margin-top: 26px;
  max-width: 74ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--grafite-60);
}
.ficha-nota a {
  color: var(--grafite);
  border-bottom: 1px solid var(--latao);
  text-decoration: none;
}
.ficha-nota a:hover { color: var(--laranja); border-bottom-color: var(--laranja); }

/* Selo de autorregulação da ANBIMA, no arquivo oficial dela — o manual não
   admite recortar nem recolorir, e por isso ele não leva o tratamento de
   cinza que o resto das imagens da página leva.

   A largura caiu de 274px para 128px porque a imagem deixou de ser dupla:
   o arquivo novo é 400×300, e 128px devolve ao selo uma altura de 96px,
   quase a mesma que cada um dos dois tinha antes (102px). */
.selos-anbima {
  margin-top: 20px;
  width: 128px;
  height: auto;
  max-width: 100%;
}

/* --- aviso de risco ---
   "O único lugar onde a cor vira barra: risco. Um aviso por peça." */
.risco {
  border-left: 5px solid var(--laranja);
  background: rgba(192, 57, 44, 0.05);
  padding: 26px 30px;
  max-width: 74ch;
  margin-top: 46px;
}
.risco-titulo { font-size: 10px; color: var(--laranja); margin-bottom: 12px; }
.risco p { font-size: 15px; line-height: 1.74; color: var(--grafite-80); }
.risco p + p { margin-top: 12px; }

/* ============================================================
   CONTATO — em areia

   Na versão anterior esta seção era escura. Virou clara para manter a
   proporção de tinta: o grafite fica na capa e no rodapé, que é
   exatamente o que o manual chama de capa.
   ============================================================ */

.secao.escura { background: var(--papel); color: var(--grafite); }

.contato-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contato-dados { list-style: none; }
.contato-dados li {
  margin-bottom: 24px;
  border-top: 1px solid var(--regua);
  padding-top: 16px;
}
.contato-rotulo { font-size: 9.5px; color: var(--laranja); margin-bottom: 8px; }
.contato-valor { font-size: 15.5px; line-height: 1.62; color: var(--grafite-80); }
.contato-valor a {
  color: var(--grafite);
  text-decoration: none;
  border-bottom: 1px solid var(--latao);
}
.contato-valor a:hover { color: var(--laranja); border-bottom-color: var(--laranja); }

.formulario { display: grid; gap: 15px; }
.formulario label { display: grid; gap: 7px; }
.formulario label > span { font-size: 9.5px; color: var(--grafite-60); }
.formulario input, .formulario textarea {
  font-family: var(--texto);
  font-size: 15.5px;
  color: var(--grafite);
  background: var(--areia);
  border: 1px solid var(--regua);
  padding: 13px 15px;
  width: 100%;
}
.formulario input:focus, .formulario textarea:focus {
  outline: none;
  border-color: var(--latao);
  box-shadow: inset 0 0 0 1px var(--latao);
}
.formulario textarea { resize: vertical; min-height: 118px; }
.formulario button {
  font-size: 11px;
  letter-spacing: 0.14em;
  background: var(--laranja);
  color: var(--areia);
  border: 1px solid var(--laranja);
  padding: 16px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.formulario button:hover:not(:disabled) {
  background: var(--laranja-fundo);
  border-color: var(--laranja-fundo);
}
.formulario button:disabled { opacity: .5; cursor: default; }

/* Campo de isca: fora da tela. Gente não preenche o que não vê;
   robô preenche tudo. */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso-form { font-size: 14.5px; min-height: 20px; }
.aviso-form.ok   { color: #2F6B4F; }
.aviso-form.erro { color: var(--laranja); }

@media (max-width: 880px) { .contato-grade { grid-template-columns: 1fr; gap: 44px; } }

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  background: var(--grafite);
  color: rgba(245, 242, 236, 0.58);
  border-top: 1px solid rgba(195, 155, 74, 0.22);
  padding: 48px 0 42px;
  font-size: 13.5px;
  line-height: 1.76;
}
.rodape-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 28px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(245, 242, 236, 0.13);
}
.rodape a { color: rgba(245, 242, 236, 0.85); }
.rodape a:hover { color: var(--latao); }

.rodape-marca {
  font-family: var(--voz);
  font-size: 20px;
  font-weight: 400;
  color: var(--areia);
  line-height: 1.2;
  margin-bottom: 10px;
}

/* Endosso da gestora, como no manual: mono, discreto, latão. */
.endosso {
  font-family: var(--dado);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--latao);
  margin-top: 14px;
}

.rodape-legal { max-width: 88ch; font-size: 12px; line-height: 1.85; }
.rodape-legal p + p { margin-top: 12px; }

/* ============================================================
   TELAS ESTREITAS
   ============================================================ */

/* O rótulo curto do botão só existe em tela estreita. */
.rotulo-curto { display: none; }

@media (max-width: 820px) {
  /* O cabeçalho é fixo, então sua altura é tirada de toda rolagem até uma
     âncora. Aqui ele mede cerca de 64px; o valor abaixo dá uma folga para
     o título não encostar nele. Antes eram 84px fixos, herdados do
     desktop, e o cabeçalho passava por cima do conteúdo. */
  html { scroll-padding-top: 76px; }

  .topo-interno { gap: 12px; padding: 10px 20px; }

  .menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--grafite);
    border-bottom: 2px solid var(--laranja);
    padding: 8px 20px 18px;
    box-shadow: 0 14px 28px rgba(17, 22, 27, 0.4);
  }
  .menu.aberto { display: flex; }
  /* 15px de altura de toque de cada lado: o mínimo em que um dedo acerta
     o item certo sem precisar mirar. */
  .menu a { padding: 15px 0; font-size: 15px; border-bottom: 1px solid rgba(245, 242, 236, 0.09); }

  .menu-botao { display: block; min-height: 44px; min-width: 44px; padding: 0 12px; }

  /* A marca não quebra em duas linhas. Quebrada, empurra tudo para baixo
     e o cabeçalho fixo passa de 60 para quase 100px — um oitavo da tela
     de um telefone, ocupado permanentemente. */
  .marca { gap: 10px; min-width: 0; }
  .marca svg, .marca img { height: 28px; flex: none; }
  .marca-nome { font-size: 17px; white-space: nowrap; }
  .marca-sub { font-size: 8px; letter-spacing: 0.26em; }

  /* min-height em vez de mais padding: 44px é a medida em que um dedo
     adulto acerta o botão sem mirar, e fixá-la direto não depende de
     quanto o texto dentro mede. */
  .btn-plataforma {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    font-size: 10px;
    white-space: nowrap;
  }
  .rotulo-largo { display: none; }
  .rotulo-curto { display: inline; }

  .secao { padding: 56px 0; }
  .abertura { padding: 44px 0 46px; }
  .envelope { padding-left: 20px; padding-right: 20px; }

  /* Duas colunas no tablet e no celular grande: seis itens fecham em três
     fileiras, sem sobra. */
  .faixa { margin-top: 40px; gap: 26px 22px; grid-template-columns: repeat(2, 1fr); }

  .ponte { min-height: 240px; }
  .ponte-texto { padding-top: 44px; padding-bottom: 44px; }
  .ponte-nota { font-size: 9.5px; letter-spacing: 0.22em; margin-top: 16px; }

  /* Os rótulos em mono têm entreletra larga, que é da marca. Mas abaixo
     de 10px, com essa entreletra, viram desenho em vez de palavra — o
     olho para de ler e passa a decifrar. O piso vale só aqui: no desktop
     a distância de leitura é outra. */
  .selo-divulgacao { font-size: 10px; letter-spacing: 0.18em; }
  .abertura-etiqueta,
  /* Subiu junto com a regra de desktop. Antes a base era 10.5px e esta aqui
     aumentava a etiqueta no celular; com a base em 12.5px, manter 11px aqui
     a encolheria — o contrário do que se queria. */
  .secao-etiqueta { font-size: 12px; letter-spacing: 0.14em; }
  .faixa-item-rotulo,
  .contato-rotulo,
  .pessoa-cargo,
  .formulario label > span { font-size: 10.5px; letter-spacing: 0.12em; }

  /* Os dados de contato são links de tocar, não texto corrido: cada um
     precisa de alvo, não só de sublinhado. */
  .contato-dados li { padding-top: 14px; padding-bottom: 6px; }
  .contato-valor { font-size: 16px; line-height: 1.75; }
  .contato-valor a { display: inline-block; padding: 9px 0; }

  /* O :not() existe por um erro real: sem ele esta regra vence a do botão
     por especificidade (0,1,1 contra 0,1,0) e esmaga o "Acessar
     plataforma" do rodapé de 44px para 25px de altura. Regra de link
     genérica dentro de um container é uma armadilha comum — pega tudo,
     inclusive o que já tinha estilo próprio. */
  /* O padding vertical de um inline-block transborda a linha em vez de
     empurrá-la, então o alvo de toque cresce sem abrir buraco no
     endereço. */
  .rodape a:not(.btn-plataforma) { display: inline-block; padding: 11px 0; }

  /* Botão de ação ocupa a largura toda: no telefone, meia largura vira
     alvo pequeno sem ganhar nada em troca. */
  .abertura-acoes { flex-direction: column; align-items: stretch; }
  .btn-principal, .btn-secundario { text-align: center; padding: 16px 20px; }
}

/* Telefone pequeno (iPhone SE e afins). */
@media (max-width: 400px) {
  .envelope { padding-left: 16px; padding-right: 16px; }
  .topo-interno { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .marca-nome { font-size: 15.5px; }
  .marca svg, .marca img { height: 25px; }
  .btn-plataforma { padding: 10px 12px; font-size: 9.5px; }
  .abertura h1 { font-size: 34px; }
  /* Uma coluna: em 320px, duas colunas dariam 140px cada, e "CDI + 3%
     a.a." quebraria em duas linhas no meio do valor. */
  .faixa { grid-template-columns: 1fr; }
}

/* ============================================================
   MOVIMENTO
   ============================================================ */

.js-anim .revela { opacity: 0; transform: translateY(40px); }
.js-anim .revela.visivel {
  opacity: 1;
  transform: none;
  transition:
    opacity .9s cubic-bezier(.16, .84, .38, 1),
    transform .9s cubic-bezier(.16, .84, .38, 1);
  transition-delay: var(--atraso, 0ms);
}

@keyframes sobe { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
.js-anim .abertura .entra {
  opacity: 0;
  animation: sobe .95s cubic-bezier(.16, .84, .38, 1) forwards;
  animation-delay: var(--atraso, 0ms);
}

/* Título em cortina: cada linha sobe de trás da sua máscara. */
.js-anim .abertura h1 .linha > span {
  display: block;
  transform: translateY(105%);
  animation: sobe-cortina 1.05s cubic-bezier(.16, .84, .38, 1) forwards;
}
.js-anim .abertura h1 .linha:nth-child(1) > span { animation-delay: 240ms; }
.js-anim .abertura h1 .linha:nth-child(2) > span { animation-delay: 370ms; }
@keyframes sobe-cortina { from { transform: translateY(105%); } to { transform: translateY(0); } }
/* O h1 em si não desvanece: quem se move são as linhas dentro dele. Se
   os dois animassem, a cortina subiria de um texto já apagado. */
.js-anim .abertura h1.entra { opacity: 1; animation: none; }

/* O símbolo se ergue de baixo para cima, como a torre sendo construída.
   É o único movimento que a marca faz — o manual não admite que ela
   seja inclinada, contornada nem deformada, e isto não faz nada disso:
   apenas descobre a forma. */
@keyframes ergue { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.js-anim .abertura-foto {
  clip-path: inset(100% 0 0 0);
  animation: ergue 1.4s cubic-bezier(.16, .84, .38, 1) 420ms forwards;
}

/* O assentar.

   A imagem entra 4% maior e volta ao tamanho certo em seis segundos. É
   lento de propósito: ninguém deve reparar acontecendo, só sentir que a
   capa não está parada. Um zoom em laço infinito faria o contrário —
   chama atenção para si e lê como banner de agência de viagem.

   Roda uma vez e para. `forwards` guarda o estado final, então não volta
   a saltar se o navegador recalcular o estilo. */
@keyframes assenta { from { transform: scale(1.02); } to { transform: scale(1); } }
.js-anim .abertura-foto img {
  transform: scale(1.02);
  animation: assenta 6s cubic-bezier(.16, .84, .38, 1) 420ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js-anim .revela, .js-anim .abertura .entra {
    opacity: 1 !important;
    transform: none !important;
  }
  .js-anim .abertura h1 .linha > span { transform: none; }
  .js-anim .abertura-foto { clip-path: none; }
  .js-anim .abertura-foto img { transform: none; }
  .abertura-foto-desliza { transform: none !important; }
  .cartao:hover, .pessoa:hover,
  .btn-plataforma:hover, .btn-principal:hover, .btn-secundario:hover { transform: none; }
}