/* ============================================================================
   Sistema Financie
   ---------------------------------------------------------------------------
   Noite profunda, laranja so onde decide, Poppins do titulo ao corpo (o cliente
   rejeitou a serifa nos titulos: lia como coisa de outro site) e arquitetura ao
   anoitecer atras de tudo.

   Quatro regras de autoria valem no arquivo inteiro:

   1. O CSS PADRAO JA E O ESTADO FINAL. Nada nasce com opacity:0. O que some
      antes de aparecer so some sob html.js, ou seja, depois que o JavaScript
      assumiu. Sem JS, com JS quebrado ou em leitor de tela, a pagina aparece
      inteira.

   2. O LARANJA E O QUE DECIDE. Ele aparece no fio de abertura, na segunda
      linha do titulo, no botao primario e na figura da marca. Em mais nada.

   3. NENHUM NUMERAL DE ORNAMENTO. Sequencia se le por ordem, por fio de 1px e
      por estado ativo, nao por algarismo carimbado.

   4. ICONE SO ONDE NOMEIA UMA ETAPA, e sempre de linha fina. Sem sombra, sem
      canto arredondado, sem painel flutuante, sem logotipo de terceiro.

   Ordem: tokens / base / tipografia / pecas / secoes / rodape / movimento /
   telas estreitas / reducao de movimento.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Navy profundo no campo e laranja da familia Caixa como unico acento.
     O azul literal da Caixa fica reservado para a secao da parceria. */
  --noite: #071A31;           /* o campo escuro */
  --noite-2: #04111F;         /* rodape e barras */
  --caixa: #005CA9;           /* o azul da Caixa, literal */
  --laranja: #F39321;         /* so onde decide; familia do laranja da Caixa */
  --laranja-fundo: #9A5409;   /* o mesmo laranja legivel sobre claro */
  --osso: #F3F1ED;            /* o campo claro */
  --tinta: #141311;
  --tinta-2: #4A4842;
  --tinta-3: #5E5B54;
  --claro: #E6EAF0;
  --claro-2: #B9C3D1;
  --claro-3: #9AA6B8;
  --fio: rgba(20, 19, 17, .16);
  --fio-forte: rgba(20, 19, 17, .30);
  --fio-claro: rgba(255, 255, 255, .14);
  --fio-claro-forte: rgba(255, 255, 255, .30);

  /* uma familia so. Os titulos eram Instrument Serif e o cliente leu a troca
     de estilo como coisa de outro site; a variavel fica, para os titulos
     poderem mudar de novo num lugar so. */
  --display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --corpo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --marca-azul: #005DBE;      /* o azul da logo original, moda dos pixels do PNG */
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(20px, 4vw, 58px);
  --larg: 1324px;
  /* era 72 a 150px; o cliente mediu com o zoom do navegador quanto rolava para
     pouca informacao, e pediu menos altura entre as coisas */
  --respiro: clamp(52px, 5.5vw, 84px);
  --saida: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  /* clip, nunca hidden: hidden cria contexto de rolagem e mata todo o
     position:sticky descendente no Safari */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noite);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* O <picture> e o pai real do <img>. Sem altura nele, o height:100% do <img>
   resolve para auto e a foto para na altura natural, deixando faixa vazia
   embaixo. Todo quadro em sangria precisa da corrente de alturas completa. */
.heroi__fundo picture,
.especialista__foto picture,
.contato__foto picture { display: block; width: 100%; height: 100%; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--laranja); color: var(--tinta);
  padding: 14px 20px; font-size: .9rem; font-weight: 600;
}
.pular:focus { left: 0; }

:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

.caixa {
  width: 100%;
  max-width: calc(var(--larg) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A sentinela tem altura: e ela que define por quantos pixels o cabecalho fica
   transparente sobre o heroi. Com 1px de altura e rootMargin negativo no topo,
   ela nunca chega a intersectar e o cabecalho nasce ja com fundo, o que abre
   uma faixa chapada sobre a fotografia. */
#sentinela {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 130px;
  pointer-events: none;
}

/* ------------------------------------------------------------ tipografia -- */
/* Poppins e mais larga e mais pesada que a serifa que estava aqui: os corpos
   descem um degrau, o peso sobe para 600 e a entrelinha abre um pouco, senao
   os titulos viram blocos. */
.h0 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.2rem + 4.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #fff;
}

.h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.escuro .h1 { color: #fff; }

h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

p { margin: 0 0 1.05em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

/* titulo seguido de texto precisa de respiro: com margin:0 no titulo e sem
   margem de topo no paragrafo, os dois encostam */
.h1 + p, h3 + p, .h0 + p { margin-top: clamp(16px, 1.7vw, 28px); }

.em { color: var(--laranja); }

.cota {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: .71875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--claro-3);
}
.cota--claro { color: var(--laranja-fundo); letter-spacing: .26em; }

.fio-ouro {
  display: block; width: 54px; height: 1px;
  background: var(--laranja);
  margin-bottom: 18px;
}

.apoio { color: var(--tinta-2); font-size: clamp(1rem, .96rem + .35vw, 1.13rem); }
.escuro .apoio { color: var(--claro-2); }

/* ----------------------------------------------------------------- pecas -- */
.bt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: .78125rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .22s, color .22s, border-color .22s;
}
.bt--g { padding: 17px 28px; font-size: .8125rem; }
.bt--cheio { background: var(--laranja); color: var(--tinta); border-color: var(--laranja); }
.bt--cheio:hover { background: #D97F12; border-color: #D97F12; }
.bt--fio { border-color: var(--fio-forte); color: var(--tinta); }
.bt--fio:hover { border-color: var(--tinta); }
.escuro .bt--fio, .heroi .bt--fio, .barra .bt--fio {
  border-color: var(--fio-claro-forte); color: #fff;
}
.escuro .bt--fio:hover, .heroi .bt--fio:hover { border-color: #fff; }
.bt svg { flex: none; }

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; transition: color .3s; }
.marca__glifo { width: 36px; height: auto; flex: none; transition: color .3s; }
.marca__nome { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.marca__nome b { font-size: 1.0625rem; font-weight: 700; letter-spacing: .05em; }
.marca__nome i {
  font-style: normal; font-family: var(--mono);
  font-size: .5rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--claro-3);
}

/* o "+" das sanfonas: dois fios, a barra vertical gira e vira um "menos" */
.mais {
  position: relative; flex: none;
  width: 15px; height: 15px;
}
.mais::before, .mais::after {
  content: ""; position: absolute;
  top: 50%; left: 0; right: 0; height: 1px; background: currentColor;
}
.mais::after { transform: rotate(90deg); transition: transform .3s var(--saida); }
details[open] .mais::after { transform: rotate(0deg); }

.claro { background: var(--osso); color: var(--tinta); }
.escuro { background: var(--noite); color: var(--claro); }
.nivel { padding-block: var(--respiro); }

/* o cabecalho e fixo, entao a ancora precisa reservar a altura dele, senao o
   topo da secao para embaixo dele ao clicar no menu */
main > section { scroll-margin-top: 82px; }

.cabeca-sec { display: grid; gap: 22px; margin-bottom: clamp(26px, 3vw, 40px); }
.cabeca-sec .apoio { max-width: 46ch; }

/* =========================================================== cabecalho === */
.cabeca {
  position: sticky; top: 0; z-index: 30;
  transition: background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
/* Sobre o heroi o cabecalho e transparente e a marca e branca. Depois que a
   sentinela sai da tela ele fixa em BRANCO, com a casa da marca no azul da
   logo original e o texto em tinta: pedido do cliente, que via a marca branca
   como uma logo diferente da dele. Sem JavaScript ninguem poe .fixou, entao o
   cabecalho ja nasce nesse estado. */
.cabeca.fixou, html.sem-js .cabeca { background: rgba(243, 241, 237, .96); border-bottom-color: var(--fio); }
.cabeca.fixou .marca, html.sem-js .marca { color: var(--noite); }
.cabeca.fixou .marca__glifo, html.sem-js .marca__glifo { color: var(--marca-azul); }
.cabeca.fixou .marca__nome i, html.sem-js .marca__nome i { color: var(--tinta-3); }
.cabeca.fixou .cabeca__nav a, html.sem-js .cabeca__nav a { color: var(--tinta); }
.cabeca.fixou .cabeca__fone-rot, html.sem-js .cabeca__fone-rot { color: var(--tinta-3); }
.cabeca.fixou .cabeca__fone-num, html.sem-js .cabeca__fone-num { color: var(--noite); }
.cabeca.fixou .menu-bt, html.sem-js .menu-bt { color: var(--noite); border-color: var(--fio-forte); }
.cabeca__caixa {
  width: 100%;
  max-width: calc(var(--larg) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 82px;
  display: flex; align-items: center; gap: 30px;
}
.cabeca__nav { display: none; gap: 26px; margin-left: auto; }
.cabeca__nav a {
  font-size: .90625rem; font-weight: 500; color: var(--claro);
  text-decoration: none; padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .3s;
}
.cabeca__nav a:hover { border-bottom-color: var(--laranja); }

.cabeca__fone {
  display: none; align-items: baseline; gap: 10px;
  text-decoration: none; padding-bottom: 5px;
  border-bottom: 1px solid rgba(243, 147, 33, .5);
}
.cabeca__fone-rot {
  font-family: var(--mono); font-size: .59375rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--claro-3);
}
.cabeca__fone-num { font-size: .9375rem; font-weight: 600; color: #fff; }

.menu-bt {
  margin-left: auto;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--fio-claro-forte);
  color: var(--claro);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.menu {
  display: none;
  flex-direction: column;
  background: var(--noite-2);
  border-top: 1px solid var(--fio-claro);
  padding-block: 8px;
}
.menu.aberto { display: flex; }
.menu a {
  padding: 14px var(--gutter);
  font-size: 1rem; color: var(--claro); text-decoration: none;
  border-bottom: 1px solid var(--fio-claro);
}
.menu a:last-child { border-bottom: 0; color: var(--laranja); }

/* =============================================================== heroi === */
.heroi {
  position: relative;
  /* teto de altura: em monitor alto o heroi nao estica ate 100svh, senao o
     conteudo fica boiando num vazio escuro de asfalto */
  min-height: min(100svh, 940px);
  margin-top: -82px;
  padding-top: 82px;
  padding-bottom: clamp(40px, 5vh, 72px);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--noite);
  overflow: clip;
  color: var(--claro);
}
.heroi__fundo { position: absolute; inset: 0; }
/* em tela larga a foto e cortada em cima e embaixo; 34% mostra o telhado
   inteiro e deixa o asfalto de fora */
.heroi__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 34%; }

.veu { position: absolute; pointer-events: none; }
.veu--lado {
  inset: 0;
  background: linear-gradient(90deg,
    rgba(7, 26, 49, .96) 0%, rgba(7, 26, 49, .90) 25%, rgba(7, 26, 49, .56) 43%,
    rgba(7, 26, 49, .20) 58%, rgba(7, 26, 49, .18) 74%, rgba(7, 26, 49, .58) 100%);
}
.veu--topo {
  left: 0; right: 0; top: 0; height: 190px;
  background: linear-gradient(to bottom, rgba(7, 26, 49, .88) 0%, rgba(7, 26, 49, 0) 100%);
}
.veu--base {
  left: 0; right: 0; bottom: 0; height: 340px;
  background: linear-gradient(to top, rgba(4, 17, 31, .92) 0%, rgba(4, 17, 31, .30) 58%, rgba(4, 17, 31, 0) 100%);
}

.heroi__caixa {
  position: relative; z-index: 2;
  display: grid; align-items: center;
  gap: clamp(36px, 5vw, 64px);
  width: 100%;
  max-width: calc(var(--larg) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 92px) var(--gutter);
}
.heroi__lead {
  margin: 28px 0 0; max-width: 42ch;
  font-size: clamp(1rem, .95rem + .5vw, 1.18rem);
  line-height: 1.6; color: var(--claro-2);
}
.heroi__acoes { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 36px; }

/* folga embaixo para o descendente do "c" cedilha em Poppins; a linha entra
   de mais baixo (130%) para nao aparecer pela folga antes da hora */
.ln { display: block; clip-path: inset(-.4em 0 -.25em 0); }
.ln > span { display: block; }

/* As quatro provas ficam AO LADO do titulo, a direita, na altura dele. Sobre
   a fachada acesa o texto branco precisa de um campo: tinta translucida com
   desfoque, fio de 1px, sem canto, sem sombra. */
.provas {
  list-style: none; margin: 0; padding: clamp(6px, 1vw, 10px) clamp(22px, 2.4vw, 32px);
  background: rgba(7, 26, 49, .46);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(243, 147, 33, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.provas li {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.provas li:last-child { border-bottom: 0; }
.provas b { font-size: .96rem; font-weight: 600; color: #fff; letter-spacing: -.005em; }
.provas li > span { font-size: .84rem; line-height: 1.45; color: var(--claro-2); }

/* ============================================================ solucoes === */
.linhas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.linha { border-bottom: 1px solid var(--fio); }
/* Grade, e nao flex com margin-left:auto em dois filhos. Com duas margens
   automaticas o espaco livre se divide entre elas e o beneficio termina
   boiando no meio da linha, que era o defeito. */
.linha__cab {
  display: grid;
  /* tres colunas porque a linha tem tres filhos: nome, beneficio e o sinal.
     Com duas, o beneficio cai na coluna do sinal e quebra palavra a palavra. */
  grid-template-columns: minmax(0, 1fr) auto 15px;
  align-items: baseline;
  column-gap: clamp(14px, 2vw, 30px);
  padding-block: clamp(14px, 1.6vw, 18px);
  cursor: pointer; list-style: none;
  transition: color .22s;
}
.linha__cab::-webkit-details-marker { display: none; }
.linha__cab:hover { color: var(--laranja-fundo); }
.linha__nome {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem);
  line-height: 1.2; letter-spacing: -.01em;
}
.linha__ben {
  display: none;
  text-align: right; max-width: 34ch;
  font-size: .875rem; color: var(--tinta-2);
}
.linha__corpo { padding-bottom: clamp(14px, 1.6vw, 18px); }
.linha__corpo p { font-size: .9375rem; color: var(--tinta-2); max-width: 58ch; }
.linha__corpo b { color: var(--tinta); font-weight: 600; }


/* ======================================================== especialista === */
.especialista { position: relative; overflow: clip; padding-block: 0; }
.especialista__foto { margin: 0; position: relative; overflow: clip; }
.especialista__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% 26%;
}
.especialista__texto {
  position: relative;
  width: 100%;
  max-width: calc(var(--larg) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--respiro) var(--gutter);
}
.especialista__cargo {
  margin: 14px 0 24px;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; color: var(--laranja);
}
.especialista__texto > p { color: var(--claro-2); max-width: 46ch; }
.especialista__acoes { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }

/* Ficha de rotulo e valor. Uma grade so para todas as linhas: quando cada
   linha media o proprio rotulo, o valor de "certificacao profissional" caia
   mais a direita que os outros. O div de cada par vira display: contents e o
   fio fica nas duas celulas, sem vao entre elas. Em tela estreita o rotulo
   fica em cima do valor. */
.ficha { margin: 32px 0 0; border-top: 1px solid var(--fio-claro); display: grid; grid-template-columns: minmax(0, 1fr); }
.ficha > div { display: contents; }
.ficha dt {
  padding: 12px 18px 0 0;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--claro-3);
}
.ficha dd {
  margin: 0; padding: 4px 0 12px;
  font-size: .9375rem; font-weight: 600; color: #fff;
  border-bottom: 1px solid var(--fio-claro);
}

/* ============================================================= empresa === */
/* Campo escuro, e a propria casa da marca em escala arquitetonica ao fundo.
   Em campo claro, igual as vizinhas, esta secao nao tinha peso nenhum. */
.empresa { position: relative; }
.empresa__grade { display: grid; gap: clamp(30px, 4vw, 56px); }
.empresa__grade p { color: var(--claro-2); }
.empresa__lead {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.24rem);
  line-height: 1.6; color: var(--claro);
}

.mvv { margin: 0; border-top: 1px solid var(--fio-claro); }
.mvv > div { padding-block: clamp(16px, 1.8vw, 20px); border-bottom: 1px solid var(--fio-claro); }
.mvv dt {
  font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin-bottom: 8px;
  color: var(--laranja);
}
.mvv dd { margin: 0; font-size: .9375rem; color: var(--claro-2); max-width: 54ch; }

/* o lastro: tres fatos verificaveis, escritos por extenso */
.lastro {
  list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid rgba(243, 147, 33, .34);
}
.lastro li { padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--fio-claro); }
.lastro__d {
  display: block;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 1rem + .9vw, 1.7rem);
  line-height: 1.15; letter-spacing: -.015em; color: #fff;
}
.lastro__s {
  display: block; margin-top: 8px;
  font-size: .875rem; color: var(--claro-2);
}

/* ============================================================ parceria === */
.parceria { border-top: 1px solid var(--fio); }
.parceria__grade { display: grid; gap: clamp(26px, 4vw, 56px); }
.parceria__grade p { color: var(--tinta-2); }
.parceria__texto > p { max-width: 52ch; }
/* Os dois lados do processo em duas colunas: o que fica com a equipe e o que
   fica com a Caixa. E o que o texto dizia em prosa, agora lido num relance; e
   a coluna esquerda deixa de terminar num vazio ao lado do painel. */
.papeis {
  display: grid; gap: 22px;
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--fio);
}
.parceria__grade .papeis__t {
  margin: 0 0 6px;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-fundo);
}
.papeis ul { list-style: none; margin: 0; padding: 0; }
.papeis li { padding: 9px 0; border-top: 1px solid var(--fio); font-size: .9375rem; color: var(--tinta); }
.parceria__grade .parceria__fecho { margin-top: clamp(22px, 2.6vw, 30px); max-width: 48ch; }
/* O painel da Caixa: campo de tinta dentro da secao clara, com a marca
   oficial em negativo no alto, como papel timbrado, e a ficha de
   credenciamento em rotulo e valor. O vetor da marca e o oficial, embutido no
   sprite; as letras seguem currentColor e o X fica no laranja da pagina. O
   fio de 2px no topo e o azul literal da Caixa, porque este e o unico lugar
   da pagina em que o assunto e a Caixa. */
.parceria__painel {
  background: var(--noite);
  color: var(--claro);
  border-top: 2px solid var(--caixa);
  padding: clamp(24px, 2.8vw, 36px);
}
.parceria__marca {
  padding-bottom: clamp(20px, 2.4vw, 28px); margin-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--fio-claro);
}
.parceria__logo { display: block; width: clamp(124px, 11vw, 150px); height: auto; color: #fff; }
/* .parceria__grade p pinta todo paragrafo da secao com tinta escura; dentro do
   painel de tinta isso vira cinza sobre navy. O seletor composto ganha. */
.parceria__painel p { color: var(--claro-2); }
.parceria__painel .cota { margin-bottom: 8px; color: var(--claro-3); }
.parceria__painel .parceria__painel-t {
  margin: 0;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.9rem);
  line-height: 1.12; letter-spacing: -.015em; color: #fff;
}
.parceria__painel .ficha { margin-top: 24px; }
.parceria__painel .bt { margin-top: 28px; }

/* ============================================================= duvidas === */
.duvidas { border-top: 1px solid var(--fio); }
.duvidas__grade { display: grid; gap: clamp(30px, 4vw, 56px); }
.duvidas__cabeca .apoio { margin-top: 16px; }

.perguntas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.pergunta { border-bottom: 1px solid var(--fio); }
.pergunta summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 15px;
  align-items: baseline; column-gap: 20px;
  padding-block: clamp(13px, 1.4vw, 16px);
  cursor: pointer; list-style: none;
  font-size: clamp(1rem, .95rem + .35vw, 1.13rem);
  font-weight: 600; letter-spacing: -.01em; line-height: 1.34;
  transition: color .22s;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { color: var(--laranja-fundo); }
.pergunta p {
  margin: 0 0 clamp(13px, 1.4vw, 16px);
  font-size: .9375rem; color: var(--tinta-2); max-width: 66ch;
}

/* ============================================================= contato === */
.contato { position: relative; overflow: clip; padding-block: var(--respiro); }
.contato .caixa { position: relative; z-index: 2; }
.contato__foto { display: none; }
.contato__topo { display: grid; gap: clamp(30px, 4vw, 56px); }
.contato__acoes { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 13px; }
.contato__prova {
  width: 100%; margin: 12px 0 0;
  font-size: .84rem; line-height: 1.85; color: var(--claro-2);
}
.contato__prova b { font-weight: 600; color: #fff; }

/* o carimbo: faixa de largura total dividida por fios, no lugar da coluna
   estreita que deixava um vazio grande do outro lado */
.carimbo {
  margin: clamp(32px, 4vw, 52px) 0 0;
  display: grid; gap: 0;
  border-top: 1px solid rgba(243, 147, 33, .34);
}
.carimbo > div { padding: clamp(16px, 1.8vw, 20px) 0; border-bottom: 1px solid var(--fio-claro); }
.carimbo dt {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--claro-3);
  margin-bottom: 8px;
}
.carimbo dd { margin: 0; font-size: .9375rem; color: #fff; line-height: 1.6; }
.carimbo a { text-decoration: none; border-bottom: 1px solid var(--fio-claro-forte); }
.carimbo a:hover { border-bottom-color: var(--laranja); }

/* ============================================================== rodape === */
.rodape {
  background: var(--noite-2); color: var(--claro-2);
  border-top: 1px solid var(--fio-claro);
  padding-top: clamp(38px, 5vw, 60px);
}
.rodape__grade { display: grid; gap: 26px; }
.rodape__legal { font-size: .8125rem; max-width: 60ch; margin: 0; }
.rodape__acesso { margin: 0; font-size: .8125rem; }
.rodape__acesso a { text-decoration: none; border-bottom: 1px solid var(--fio-claro-forte); }
.rodape__base {
  margin-top: clamp(30px, 4vw, 50px);
  padding-block: 20px;
  border-top: 1px solid var(--fio-claro);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .75rem;
}
.rodape__base a { color: var(--claro); text-decoration: none; border-bottom: 1px solid var(--fio-claro-forte); }

/* ============================================= barra (telas estreitas) === */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 10px;
  padding: 10px var(--gutter);
  background: rgba(4, 17, 31, .96);
  border-top: 1px solid var(--fio-claro);
}
.barra__sim {
  flex-grow: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--laranja); color: var(--tinta);
  padding: 14px 16px;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.barra__zap {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 50px;
  border: 1px solid var(--fio-claro-forte); color: #fff;
  text-decoration: none;
}
body { padding-bottom: 68px; }

/* ====================================================== telas largas ==== */
@media (min-width: 700px) {
  .linha__ben { display: block; }
  .cabeca-sec { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  /* ficha em duas colunas: o rotulo ocupa o que precisa, ate 12.5rem, e o
     valor fica alinhado numa coluna so em todas as linhas */
  .ficha { grid-template-columns: fit-content(12.5rem) minmax(0, 1fr); align-items: baseline; }
  .ficha dt { padding-block: 13px; border-bottom: 1px solid var(--fio-claro); }
  .ficha dd { padding-block: 13px; }
  .papeis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); }
}

@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .barra { display: none; }
  .menu-bt { display: none; }
  .menu { display: none !important; }
  .cabeca__nav, .cabeca__fone { display: flex; }

  /* texto a esquerda, provas a direita, alinhadas pelo centro vertical */
  .heroi__caixa {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(48px, 6vw, 110px);
  }
  .provas { justify-self: end; width: 100%; max-width: 420px; }
  .h0 { max-width: 15ch; }
  .heroi__lead { max-width: 42ch; }


  .lastro { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 44px); }
  .lastro li:not(:first-child) { padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--fio-claro); }
  .empresa__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .parceria__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .duvidas__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .contato__topo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .carimbo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(26px, 3vw, 46px);
  }
  .carimbo > div:not(:nth-child(3n+1)) {
    padding-left: clamp(26px, 3vw, 46px);
    border-left: 1px solid var(--fio-claro);
  }

  /* a especialista: foto a esquerda, ficha a direita, uma tela cheia */
  .especialista { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
  .especialista__foto { grid-area: 1 / 1; height: 100%; min-height: 72svh; }
  /* a foto nao pode ditar a altura da secao pela proporcao natural dela (na
     tela do cliente isso dava 1139px de secao); ancorada na celula, quem manda
     na altura e a coluna de texto, e a foto cobre o que sobrar */
  .especialista__foto picture { position: absolute; inset: 0; }
  .especialista__foto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(97deg,
      rgba(7, 26, 49, .10) 0%, rgba(7, 26, 49, .26) 54%,
      rgba(7, 26, 49, .88) 88%, rgba(7, 26, 49, 1) 100%);
  }
  .especialista__texto {
    grid-area: 1 / 2; align-self: center;
    margin-inline: 0; max-width: 40rem;
    padding-inline: clamp(34px, 4vw, 62px) var(--gutter);
  }

  .contato__foto {
    display: block; margin: 0;
    position: absolute; top: 0; bottom: 0; right: 0; width: 31%;
    overflow: clip;
  }
  .contato__foto img { width: 100%; height: 100%; object-fit: cover; }
  .contato__foto::after {
    content: ""; position: absolute; inset: 0;
    /* piso alto mesmo na borda: com o campo mais claro, os paineis passaram a
       competir com o texto do carimbo em vez de ficar como atmosfera */
    background: linear-gradient(to left,
      rgba(7, 26, 49, .70) 0%, rgba(7, 26, 49, .93) 42%, rgba(7, 26, 49, 1) 86%);
  }

  .rodape__grade { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 44px; }
}

/* ============================================================ processo === */
/* A cena. Uma secao escura de largura total: a casa ao anoitecer atras de
   veus densos em navy, um trilho de 1px cruzando a tela inteira e as quatro
   etapas apresentadas como creditos de filme, com o nome da etapa no maior
   corpo de serifa da pagina. O marcador laranja no trilho diz em que etapa se
   esta. Sem JavaScript as quatro ficam abertas e empilhadas; com ele viram
   abas: uma etapa em cena de cada vez, e o marcador desliza. Nada aqui ouve a
   rolagem: o que acende, acende uma vez, por IntersectionObserver. */
.proc-cena {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--fio-claro);
}

/* a foto: a mesma casa do heroi, ja em cache, em outro corte e mais funda */
.proc-fundo { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.proc-fundo picture { position: absolute; inset: 0; display: block; }
.proc-fundo img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 40%;
}
.proc-veu { position: absolute; inset: 0; pointer-events: none; }
/* em tela estreita o texto ocupa a largura toda, entao a foto vira so
   textura: veu quase chapado, mais o topo e o pe solidos */
.proc-veu--campo { background: rgba(7, 26, 49, .85); }
.proc-veu--topo { background: linear-gradient(to bottom, rgba(7, 26, 49, .92) 0%, rgba(7, 26, 49, 0) 38%); }
.proc-veu--base {
  background: linear-gradient(to top,
    rgba(4, 17, 31, 1) 0%, rgba(4, 17, 31, .96) 30%,
    rgba(4, 17, 31, .55) 62%, rgba(4, 17, 31, 0) 100%);
}

.proc-caixa { position: relative; }
.proc-cabeca { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
/* em tela estreita a quebra forcada do titulo deixa uma palavra sozinha na
   terceira linha; sem o <br>, o text-wrap: balance do .h1 divide por igual */
.proc-cabeca .h1 br { display: none; }
.proc-cabeca .apoio { max-width: 46ch; }

/* --------------------------------------------------------------- trilho -- */
/* Vertical no celular, horizontal de 700px para cima. As quatro celulas tem a
   mesma medida de proposito: e isso que deixa o marcador deslizar por
   transform, sem medir nada em JavaScript. */
.proc-sequencia { position: relative; }
.proc-trilho {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  padding-left: 26px;
}
.proc-trilho::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--fio-claro-forte);
}
.proc-aba {
  position: relative;
  align-self: start;
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 13px 0;
  background: transparent; border: 0;
  font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--claro-3);
  transition: color .25s;
}
.proc-aba::before {
  content: ""; position: absolute;
  left: -26px; top: 50%; width: 9px; height: 1px;
  background: var(--fio-claro-forte);
}
.proc-aba:hover { color: #fff; }
.proc-aba--feita { color: var(--claro-2); }
.proc-aba[aria-selected="true"] { color: #fff; }

/* o marcador: um tique laranja cruzando o trilho e um rastro que se apaga na
   direcao do proximo passo */
.proc-marcador {
  position: absolute;
  left: 0; top: 0; width: 26px; height: 25%;
  pointer-events: none;
  transition: transform .6s var(--saida);
}
.proc-marcador::before {
  content: ""; position: absolute;
  left: 0; top: 50%; width: 1px; height: 50%;
  background: linear-gradient(to bottom, var(--laranja), rgba(243, 147, 33, 0));
}
.proc-marcador::after {
  content: ""; position: absolute;
  left: 0; top: 50%; width: 22px; height: 2px; margin-top: -1px;
  background: var(--laranja);
}
.proc-sequencia[data-ativa="2"] .proc-marcador { transform: translateY(100%); }
.proc-sequencia[data-ativa="3"] .proc-marcador { transform: translateY(200%); }
.proc-sequencia[data-ativa="4"] .proc-marcador { transform: translateY(300%); }

/* ---------------------------------------------------------------- palco -- */
.proc-palco { margin-top: clamp(28px, 3.5vw, 44px); }
.proc-etapa { display: flex; flex-direction: column; align-items: flex-start; }
.proc-etapa[hidden] { display: none !important; }
.proc-etapa + .proc-etapa {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--fio-claro);
}
.proc-etapa__corpo { max-width: 100%; }
.proc-etapa__rot {
  margin: 0 0 18px;
  font-family: var(--mono); font-size: .71875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--claro-3);
}
.proc-etapa__nome {
  margin: 0; max-width: 12ch;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem);
  line-height: 1.02; letter-spacing: -.025em;
  color: #fff; text-wrap: balance;
  clip-path: inset(-.4em 0 -.35em 0);
}
.proc-etapa__nome > span { display: block; }
.proc-etapa__texto {
  margin: 24px 0 0; max-width: 44ch;
  font-size: clamp(1rem, .96rem + .4vw, 1.2rem); line-height: 1.6;
  color: var(--claro-2);
}
/* o icone da etapa, em linha de 1.2px em qualquer tamanho: o traco e dado em
   unidades da viewBox e calibrado por faixa de tela. Cada caminho tem
   pathLength="1", entao o tracado vai de 1 a 0 seja qual for o comprimento. */
.proc-etapa__icone {
  order: -1;
  width: 64px; height: 64px; margin-bottom: 26px;
  color: rgba(255, 255, 255, .62);
  stroke-width: .45;
  overflow: visible;
}
.proc-etapa__icone path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- acoes -- */
.proc-acoes {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--fio-claro);
  display: grid; gap: 18px;
}
.proc-acoes__t {
  margin: 0; max-width: 24ch;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
  line-height: 1.2; letter-spacing: -.015em;
  color: #fff;
}
.proc-acoes__bts { display: flex; flex-wrap: wrap; gap: 13px; }

@media (min-width: 700px) {
  .proc-cabeca .h1 br { display: inline; }
  .proc-trilho {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    padding-left: 0;
  }
  /* o trilho sangra ate as bordas da tela; a cena recorta o excesso */
  .proc-trilho::before { top: 0; bottom: auto; left: -50vw; right: -50vw; width: auto; height: 1px; }
  .proc-aba { padding: 18px 20px 0 0; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
  .proc-aba::before { left: 0; top: 0; width: 1px; height: 9px; }
  .proc-marcador { top: -10px; width: 25%; height: 21px; }
  .proc-marcador::before {
    left: 0; top: 10px; width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--laranja), rgba(243, 147, 33, 0));
    transform-origin: 0 50%;
  }
  .proc-marcador::after { left: 0; top: 0; width: 2px; height: 100%; margin-top: 0; }
  .proc-sequencia[data-ativa="2"] .proc-marcador { transform: translateX(100%); }
  .proc-sequencia[data-ativa="3"] .proc-marcador { transform: translateX(200%); }
  .proc-sequencia[data-ativa="4"] .proc-marcador { transform: translateX(300%); }
  .proc-etapa__icone { width: 88px; height: 88px; stroke-width: .33; }
  .proc-acoes { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (min-width: 1000px) {
  .proc-cena {
    min-height: min(100svh, 860px);
    display: flex; flex-direction: column; justify-content: center;
  }
  /* a caixa da foto e mais alta que a cena: o asfalto fica fora, e a fachada
     acesa entra no canto superior direito, atras dos veus */
  .proc-fundo img { top: -28%; height: 128%; object-position: 76% 50%; }
  .proc-veu--campo {
    background: linear-gradient(90deg,
      rgba(7, 26, 49, .97) 0%, rgba(7, 26, 49, .95) 34%, rgba(7, 26, 49, .84) 54%,
      rgba(7, 26, 49, .66) 76%, rgba(7, 26, 49, .60) 100%);
  }
  .proc-veu--topo { background: linear-gradient(to bottom, rgba(7, 26, 49, .92) 0%, rgba(7, 26, 49, .5) 16%, rgba(7, 26, 49, 0) 44%); }
  .proc-veu--base {
    background: linear-gradient(to top,
      rgba(4, 17, 31, 1) 0%, rgba(4, 17, 31, .97) 34%, rgba(4, 17, 31, .82) 52%,
      rgba(4, 17, 31, .30) 72%, rgba(4, 17, 31, 0) 100%);
  }
  .proc-cabeca { max-width: 50rem; }
  /* altura reservada: trocar de etapa nao mexe no resto da cena. 22rem cabe
     o nome em duas linhas com o texto de tres, e nao sobra vazio quando o
     nome tem uma linha so */
  .proc-palco { min-height: 22rem; }
  .proc-etapa {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(48px, 6vw, 110px);
    align-items: start;
  }
  .proc-etapa__icone {
    order: 0; justify-self: end;
    width: clamp(160px, 14vw, 220px); height: auto; margin: .4rem 0 0;
    stroke-width: .16;
  }
  .proc-etapa__texto { margin-top: 30px; }
}

/* ------------------------------------------------- movimento (html.js) -- */
/* Tudo daqui para baixo so existe depois que o JavaScript assumiu. */
html.js .proc-cena .proc-etapa + .proc-etapa { margin-top: 0; padding-top: 0; border-top: 0; }

html.js .proc-cena .proc-cabeca,
html.js .proc-cena .proc-palco,
html.js .proc-cena .proc-acoes { opacity: 0; transform: translateY(18px); }
html.js .proc-cena .proc-aba,
html.js .proc-cena .proc-marcador { opacity: 0; }
html.js .proc-cena .proc-trilho::before { transform: scaleY(0); transform-origin: 50% 0; }
html.js .proc-cena .proc-fundo img { transform: scale(1.06); }

/* a cena acende uma vez: titulo, trilho que se desenha, nomes um a um,
   marcador, palco, e a foto assenta devagar */
html.js .proc-visto .proc-cabeca { opacity: 1; transform: none; transition: opacity .8s var(--saida), transform .8s var(--saida); }
html.js .proc-visto .proc-trilho::before { transform: none; transition: transform 1.2s var(--saida) .2s; }
html.js .proc-visto .proc-aba { opacity: 1; transition: opacity .6s var(--saida) .5s, color .25s; }
html.js .proc-visto .proc-aba:nth-child(2) { transition-delay: .62s, 0s; }
html.js .proc-visto .proc-aba:nth-child(3) { transition-delay: .74s, 0s; }
html.js .proc-visto .proc-aba:nth-child(4) { transition-delay: .86s, 0s; }
html.js .proc-visto .proc-marcador { opacity: 1; transition: opacity .5s var(--saida) 1s, transform .6s var(--saida); }
html.js .proc-visto .proc-palco { opacity: 1; transform: none; transition: opacity .9s var(--saida) .55s, transform .9s var(--saida) .55s; }
html.js .proc-visto .proc-acoes { opacity: 1; transform: none; transition: opacity .9s var(--saida) .95s, transform .9s var(--saida) .95s; }
html.js .proc-visto .proc-fundo img { transform: none; transition: transform 2.4s var(--saida); }

/* cada etapa entra como um credito: o bloco sobe, o nome sai do corte e o
   icone se traca. Como a etapa escondida e display:none, a animacao recomeca
   sozinha a cada troca de aba, sem o JavaScript reiniciar nada. */
html.js .proc-visto .proc-etapa { animation: proc-entrar .6s var(--saida) both; }
html.js .proc-visto .proc-etapa__nome > span { animation: proc-subir .85s var(--saida) .05s both; }
html.js .proc-visto .proc-etapa__icone path {
  stroke-dashoffset: 1;
  animation: proc-tracar 1.1s var(--saida) .1s forwards;
}

/* passagem automatica: o rastro do marcador cresce ate o proximo nome e,
   quando chega, o marcador anda. Dois nomes iguais de animacao, alternados
   pelo script, reiniciam o rastro sem ler layout. Sem a classe, o rastro
   fica inteiro. So existe em tela larga; e o script so a poe la. */
.proc-sequencia--contando .proc-marcador::before { animation: proc-avancar 7.5s linear .5s both; }
.proc-sequencia--contando[data-volta="b"] .proc-marcador::before { animation-name: proc-avancar-b; }

@media (min-width: 700px) {
  /* trilho horizontal: desenha da esquerda para a direita */
  html.js .proc-cena .proc-trilho::before { transform: scaleX(0); transform-origin: 0 50%; }
  html.js .proc-visto .proc-trilho::before { transform: none; }
}

@keyframes proc-entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes proc-subir { from { transform: translateY(140%); } to { transform: none; } }
@keyframes proc-tracar { to { stroke-dashoffset: 0; } }
@keyframes proc-avancar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes proc-avancar-b { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ========================================================== movimento === */
/* Tudo daqui para baixo so acontece depois que o JavaScript assumiu a pagina
   (html.js) ou dentro de @supports. O estado final ja esta escrito acima. */

html.js [data-rev] { opacity: 0; transform: translateY(22px); }
html.js [data-rev].visivel {
  opacity: 1; transform: none;
  transition: opacity .75s var(--saida), transform .75s var(--saida);
}

html.js .ln > span { transform: translateY(130%); }
html.js .abriu .ln > span { transform: none; transition: transform .8s var(--saida); }
html.js .abriu .ln:nth-child(2) > span { transition-delay: .1s; }

/* escopo no heroi, e so nele: .cota e .fio-ouro tambem existem nas outras
   secoes, e la quem revela e o [data-rev]. Sem o escopo, o olho de todas as
   secoes nasce invisivel e nunca acende. */
html.js .heroi__lead, html.js .heroi__acoes, html.js .provas,
html.js .heroi .cota, html.js .heroi .fio-ouro { opacity: 0; }
html.js .abriu .cota { opacity: 1; transition: opacity .6s var(--saida) .1s; }
html.js .abriu .fio-ouro { opacity: 1; transition: opacity .5s var(--saida); }
html.js .abriu .heroi__lead { opacity: 1; transition: opacity .7s var(--saida) .5s; }
html.js .abriu .heroi__acoes { opacity: 1; transition: opacity .7s var(--saida) .65s; }
html.js .abriu .provas { opacity: 1; transition: opacity .9s var(--saida) .85s; }

/* parallax por rolagem: so onde ficar preso no estado inicial e inofensivo,
   ou seja, deslocamento de camada e escala de imagem. nunca em opacidade de
   texto. teto de 64px em qualquer camada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    .heroi__fundo img {
      animation: afundar linear both;
      animation-timeline: view(block);
      animation-range: exit 0% exit 100%;
    }
    .especialista__foto img {
      animation: subir linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
    .contato__foto img {
      animation: subir-pouco linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes afundar { from { transform: none; } to { transform: translateY(-58px) scale(1.06); } }
@keyframes subir { from { transform: translateY(38px) scale(1.06); } to { transform: translateY(-38px) scale(1.06); } }
@keyframes subir-pouco { from { transform: translateY(24px) scale(1.05); } to { transform: translateY(-24px) scale(1.05); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ================================================ reducao de movimento === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    animation-timeline: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-rev] { opacity: 1 !important; transform: none !important; }
  html.js .ln > span { transform: none !important; }
  html.js .heroi__lead, html.js .heroi__acoes, html.js .provas, html.js .cota, html.js .fio-ouro { opacity: 1 !important; }
  .heroi__fundo img, .especialista__foto img, .contato__foto img { transform: none !important; }
\1  html.js .proc-cena .proc-cabeca, html.js .proc-cena .proc-palco, html.js .proc-cena .proc-acoes,
  html.js .proc-cena .proc-aba, html.js .proc-cena .proc-marcador { opacity: 1 !important; }
  /* o marcador fica de fora: o transform dele e a posicao */
  html.js .proc-cena .proc-cabeca, html.js .proc-cena .proc-palco, html.js .proc-cena .proc-acoes,
  html.js .proc-cena .proc-trilho::before, html.js .proc-cena .proc-fundo img { transform: none !important; }
  .proc-cena .proc-etapa__icone path { stroke-dashoffset: 0 !important; }
}