/* Âncora Soluções Financeiras · página
   O eixo é documental. A página se lê como um documento que a pessoa
   confere: coluna alinhada à esquerda, fio de régua separando bloco de
   bloco, citação com a fonte embaixo, e nada de caixa flutuando. O selo
   da marca continua sendo o único círculo, porque ele é o lacre.     */

@font-face{font-family:Anton;src:url("fonts/anton.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap;}

.pular{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;}
.pular:focus{clip-path:none;width:auto;height:auto;top:var(--e-2);left:var(--e-2);
  background:var(--ouro-claro);color:var(--carvao-fundo);padding:var(--e-2);z-index:50;
  border-radius:var(--raio);}

.interno{max-width:var(--largura);margin:0 auto;padding-left:var(--e-3);padding-right:var(--e-3);}
section{padding-top:var(--e-10);padding-bottom:var(--e-10);position:relative;}
[id]{scroll-margin-top:var(--desvio-ancora);}

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

/* Célula de grelha tem largura mínima igual à palavra mais longa que
   ela contém. Zerando esse mínimo a coluna respeita a tela quando o
   leitor amplia a fonte do sistema, e a palavra quebra.              */
.garantias li,.bancos li,.fontes li,.passos li,.condicoes li,
.marcada li,.diferenca li,.lista-mandar li,.duas p,.prova li,
.abertura-texto,.cartao,.atende > *,.contato .interno > *,
.chamada-meio > *,.rodape .interno > *,
.cartao-marca > *,.marca-texto,.titulo-cond > *,.prova li > span{min-width:0;}

/* ── Superfícies ──────────────────────────────────────────────── */
.faixa-cinza{background:var(--papel-fundo);}
/* Superfície é cor, e nada além de cor. O recorte que esta classe
   carregava foi parar no cabeçalho junto com ela, e cortou o painel do
   menu de celular, que é posicionado e precisa sair da altura do topo.
   Quem sangra declara o próprio recorte, logo abaixo.                 */
.sobre-carvao{background:var(--carvao);color:var(--texto);}
.sobre-carvao h1,.sobre-carvao h2,.sobre-carvao h3{color:var(--branco);}
.carvao-fundo{background:var(--carvao-fundo);}

/* A marca d'água das faixas escuras. Antes era um anel de fio, que é um
   círculo qualquer; agora é o próprio selo, sangrando da borda e cortado
   pela seção. Mesmo gesto, forma da marca em vez de forma genérica.
   O arquivo é ouro monocromático derivado da luminância do selo, e não o
   selo colorido rebaixado: sobre carvão o azul da âncora vira mancha sem
   desenho, enquanto o ouro mantém anel, âncora e onda legíveis a 10%.
   `clip` e não `hidden`: `hidden` cria contêiner de rolagem e congela a
   linha do tempo do movimento sem erro visível.                        */
.com-agua{overflow:clip;}
.com-agua::after{content:"";position:absolute;pointer-events:none;z-index:0;
  width:clamp(320px, 54%, 760px);aspect-ratio:1;
  background:url("img/marca-agua.webp") center/contain no-repeat;
  opacity:0.10;}
.com-agua .interno{position:relative;z-index:1;}

/* Cada faixa recebe o selo de um lado e numa altura diferente. Repetido
   na mesma posição ele vira papel de parede; alternado, ele lê como a
   mesma marca vista de ângulos diferentes ao longo da descida.       */
.agua-dir::after{ right:-16%; top:-18%; }
.agua-esq::after{ left:-20%;  bottom:-22%; }
.agua-canto::after{ right:-12%; bottom:-30%; opacity:0.16; }

@media (max-width:759px){
  .com-agua::after{width:min(120%, 520px);opacity:0.07;}
  .agua-dir::after{ right:-34%; top:-4%; }
  .agua-esq::after{ left:-38%;  bottom:-6%; }
  .agua-canto::after{ right:-30%; bottom:-10%; opacity:0.11; }
}

/* ── Cabeçalho de seção. Alinhado à esquerda, sem sobrescrito: o
      título carrega o assunto sozinho, e a segunda linha em cor é o
      que separa a afirmação do contexto.                            */
.cabeca{margin-bottom:var(--e-8);}
.cabeca h2{max-width:26ch;}
/* A linha de apoio se distingue por corpo, e não por apagamento. Texto
   mais claro que o corpo abaixo dele inverte a hierarquia.
   A cor vem de uma variável que a superfície define, e não de uma regra
   que disputa especificidade com `.sobre-carvao .lede`. As duas tinham
   (0,2,0) e a que vinha depois no arquivo ganhava, o que jogava a tinta
   do papel sobre o carvão a 2,05:1.                                   */
.cabeca .lede{margin-top:var(--e-3);max-width:52ch;color:var(--apoio);
  font-size:var(--t-lede);line-height:1.45;}
@media (min-width:600px){ .cabeca .lede{font-size:var(--t-lede);} }

/* ── Topo ─────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:20;background:var(--carvao-fundo);
  border-bottom:var(--fio) solid var(--carvao-linha);color:var(--texto);}
.topo .interno{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;
  row-gap:var(--e-2);padding-top:var(--e-2);padding-bottom:var(--e-2);}
/* A assinatura horizontal preserva símbolo, nome e descriptor em uma linha. */
.marca{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.marca-lockup{display:grid;gap:0;justify-items:center;}
.marca img{width:clamp(9.5rem,48vw,12rem);height:auto;display:block;}
.marca-subtitulo{font-size:0.56rem;font-weight:600;letter-spacing:0.16em;line-height:1.1;
  text-align:left;text-transform:uppercase;color:var(--ouro);white-space:nowrap;
  width:70%;justify-self:end;margin-top:-1rem;position:relative;z-index:1;}

.menu{display:none;}
.menu a:not(.botao){font-size:var(--t-sm);color:var(--texto);text-decoration:none;
  border-bottom:2px solid transparent;padding:var(--e-h) 0;transition:var(--transicao);}
.menu a:not(.botao):hover{color:var(--branco);border-bottom-color:var(--ouro);}

.menu-movel{margin-left:auto;position:relative;}
.menu-movel summary{list-style:none;cursor:pointer;width:44px;height:44px;
  display:grid;place-items:center;border:var(--fio) solid var(--carvao-linha);
  border-radius:var(--raio);color:var(--ouro);}
.menu-movel summary::-webkit-details-marker{display:none;}
.menu-movel .ic-fechar,.menu-movel[open] .ic-abrir{display:none;}
.menu-movel[open] .ic-fechar{display:block;}
.menu-movel-lista{position:absolute;right:0;top:calc(100% + 12px);width:max-content;min-width:min(240px,calc(100vw - 48px));max-width:calc(100vw - 48px);max-height:calc(100dvh - 100px);overflow-y:auto;
  background:var(--carvao-fundo);border:var(--fio) solid var(--carvao-linha);
  border-radius:var(--raio);padding:var(--e-2);display:grid;gap:var(--e-h);z-index:30;}
.menu-movel-lista a:not(.botao){display:block;min-height:44px;display:flex;align-items:center;
  padding:0 var(--e-2);font-size:var(--t-sm);color:var(--texto);text-decoration:none;
  border-radius:var(--raio);}
.menu-movel-lista a:not(.botao):hover{background:var(--carvao);color:var(--branco);}
.menu-movel-lista .botao{margin-top:var(--e-1);}

/* ── Botões. Retângulo, e não pílula: a página é documento, e botão
      arredondado é a gramática de aplicativo.                        */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-1);
  min-height:48px;padding:var(--e-2) var(--e-4);border-radius:var(--raio);
  font-size:var(--t-sm);font-weight:600;text-decoration:none;border:var(--fio) solid transparent;
  transition:var(--transicao);font-family:var(--fonte-texto);cursor:pointer;}
/* O preenchimento é a face iluminada do metal, que é o ponto da rampa
   em que o ouro deixa de parecer laranja. O texto sobre ele mede 13,3:1. */
.botao-ouro{background:var(--ouro-claro);color:var(--carvao-fundo);}
.botao-ouro:hover{background:var(--ouro-brilho);}
.botao-carvao{background:var(--carvao-fundo);color:var(--branco);}
.botao-carvao:hover{background:var(--carvao-alto);}
.botao-carvao .ic{color:var(--ouro);}
.botao-linha{background:transparent;color:var(--tinta);border-color:var(--papel-linha);}
.botao-linha:hover{border-color:var(--tinta);}
.sobre-carvao .botao-linha{color:var(--branco);border-color:var(--carvao-linha);}
.sobre-carvao .botao-linha:hover{border-color:var(--ouro);color:var(--ouro);}
.botao-grande{min-height:56px;font-size:var(--t-base);padding:var(--e-2) var(--e-5);}

/* ── Abertura. Texto à esquerda, cartão de prova à direita. ────── */
.abertura{padding-top:var(--e-8);padding-bottom:var(--e-10);}
.abertura .interno{display:grid;gap:var(--e-8);align-items:start;}
/* Tamanhos em rem respeitam a ampliação de texto. Palavras longas
   podem quebrar; a fonte não é limitada pela largura da tela.       */
.abertura h1{max-width:16ch;margin-bottom:var(--e-4);
  font-family:Anton,sans-serif;font-size:3rem;font-weight:400;line-height:1.08;
  letter-spacing:0;text-transform:uppercase;text-wrap:balance;}
.abertura h1 em{display:block;color:var(--azul);font-style:normal;}
.abertura .apoio{font-size:var(--t-lede);line-height:1.45;
  color:var(--apoio);max-width:46ch;}
.abertura .apoio b{font-weight:400;color:var(--azul);}
/* No celular as duas ações têm a mesma largura: botão de tamanho
   diferente lê como importância diferente, e aqui as duas são
   caminhos legítimos. A partir de 600px voltam a medir pelo rótulo. */
.abertura .acoes{display:grid;gap:var(--e-2);margin-top:var(--e-5);}
@media (min-width:600px){
  .abertura .acoes{display:flex;flex-wrap:wrap;}
}
.abertura .nota{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--tinta-fraca);
  display:flex;align-items:flex-start;gap:var(--e-1);}
.abertura .nota .ic{width:17px;height:17px;color:var(--tinta-fraca);margin-top:5px;}

/* O cartão. É onde o carvão entra pela primeira vez, e onde o selo
   aparece em tamanho de assinatura, não de ilustração.               */
.cartao{background:var(--carvao);color:var(--texto);padding:var(--e-5);
  border-radius:var(--raio);position:relative;overflow:clip;}
.cartao::after{content:"";position:absolute;pointer-events:none;
  right:-26%;bottom:-40%;width:82%;aspect-ratio:1;
  background:url("img/marca-agua.webp") center/contain no-repeat;opacity:0.13;}
.cartao > *{position:relative;z-index:1;}
.cartao-marca{display:flex;align-items:center;}
.cartao-marca .marca-lockup{width:min(100%,15rem);justify-items:start;}
.cartao-marca img{width:100%;height:auto;display:block;}
.cartao-marca .marca-subtitulo{font-size:var(--t-xs);}
.cartao-fio{height:2px;background:var(--metal);margin:var(--e-4) 0;border:0;}
.cartao-lema{font-family:var(--fonte-titulo);font-size:var(--t-md);line-height:1.35;
  color:var(--branco);max-width:30ch;}
.prova{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;}
.prova li{display:grid;grid-template-columns:auto 1fr;gap:var(--e-2);
  padding:var(--e-3) 0;border-top:var(--fio) solid var(--carvao-linha);}
.prova .ic{width:20px;height:20px;color:var(--ouro);margin-top:3px;}
.prova b{display:block;font-size:var(--t-sm);font-weight:600;color:var(--branco);}
.prova span{display:block;font-size:var(--t-desc);color:var(--texto-fraco);
  line-height:1.5;margin-top:2px;}

/* ── Garantias. Faixa cinza, quatro colunas, rótulo em caixa alta. */
.garantias{padding-top:var(--e-8);padding-bottom:var(--e-8);}
.garantias ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-5) var(--e-5);}
/* O selo e o rótulo dividem a primeira linha, e a explicação ocupa a
   largura toda embaixo. Empilhados, os três ocupavam a altura de um
   parágrafo inteiro por item só para dizer quatro palavras.          */
.garantias li{display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--e-2);row-gap:var(--e-2);align-content:start;}
.garantias .selo-ic{width:38px;height:38px;border-radius:var(--raio-selo);
  border:var(--fio) solid var(--azul);display:grid;place-items:center;
  color:var(--azul);flex-shrink:0;}
.garantias .selo-ic .ic{width:18px;height:18px;}
.garantias b{align-self:center;font-size:var(--t-sm);font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--tinta);line-height:1.3;}
/* `:not(.selo-ic)` porque o próprio selo é um span: sem isso ele também
   pegava a linha inteira e o layout voltava a empilhar sem erro visível. */
.garantias span:not(.selo-ic){grid-column:1 / -1;font-size:var(--t-desc);
  color:var(--apoio);line-height:1.55;}

/* ── Blocos de texto em duas colunas ──────────────────────────── */
.duas{display:grid;gap:var(--e-5);max-width:none;}
.duas p{max-width:54ch;}
.sobre-carvao .duas p{color:var(--texto);}

/* ── Lista com marcador ───────────────────────────────────────── */
.sub-lista{margin:var(--e-8) 0 var(--e-4);font-size:var(--t-lg);}
/* Linha de documento: uma afirmação por linha, largura cheia. Em duas
   colunas a lista de quatro itens caía 3 + 1 e a de três caía 2 + 1.  */
.marcada{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3);}
.marcada li{display:grid;grid-template-columns:auto 1fr;gap:var(--e-2);align-items:start;}
.marcada li > span{max-width:86ch;}
.marcada .ic{width:20px;height:20px;color:var(--azul);margin-top:4px;}
.sobre-carvao .marcada .ic{color:var(--ouro);}
.marcada strong{font-weight:600;}
.marcada span{color:var(--apoio);}

/* ── Citações de fonte oficial. O título é o ponto de atenção; a fonte
      fica logo abaixo para quem quiser conferir a informação.       */
.fontes{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-5);}
.fontes li{border-left:3px solid var(--azul);padding:var(--e-1) 0 var(--e-1) var(--e-3);}
.citacao{font-family:var(--fonte-titulo);font-size:clamp(1.55rem,5vw,2rem);line-height:1.15;
  color:var(--tinta);margin-bottom:var(--e-3);max-width:28ch;}
.fontes li > p:not(.origem){font-size:var(--t-base);line-height:1.5;max-width:36ch;color:var(--tinta);}
.origem{font-size:var(--t-xs);font-weight:600;letter-spacing:0.03em;line-height:1.5;max-width:44ch;}

/* ── Instituições ─────────────────────────────────────────────── */
/* As marcas identificam exemplos de bancos. A régua visual e o aviso
   abaixo evitam leitura de parceria ou credenciamento. */
.bancos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--e-2);}
.bancos li{min-height:4.7rem;display:flex;align-items:center;overflow:hidden;
  border:var(--fio) solid var(--carvao-linha);border-radius:var(--raio);}
.bancos img{display:block;width:100%;height:auto;}
.aviso-bancos{margin-top:var(--e-6);padding:var(--e-3) var(--e-4);max-width:64ch;
  background:var(--carvao-alto);
  border:var(--fio) solid var(--carvao-linha);border-radius:var(--raio);
  display:grid;grid-template-columns:auto 1fr;gap:var(--e-2);align-items:start;
  font-size:var(--t-sm);color:var(--texto-fraco);line-height:1.55;}
.aviso-bancos .ic{width:19px;height:19px;color:var(--ouro-medio);margin-top:3px;}


/* ── Passos ───────────────────────────────────────────────────── */
.passos{list-style:none;margin:0;padding:0;counter-reset:passo;
  display:grid;gap:var(--e-5) var(--e-5);}
/* Mesmo princípio dos selos: o número entra na linha do título, e a
   descrição desce inteira embaixo.                                   */
.passos li{counter-increment:passo;border-top:var(--fio) solid var(--papel-linha);
  padding-top:var(--e-3);display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--e-2);row-gap:var(--e-2);align-content:start;}
.passos li::before{content:counter(passo);width:26px;height:26px;margin-top:3px;
  background:var(--metal);color:var(--carvao-fundo);display:grid;place-items:center;
  font-weight:700;font-size:var(--t-xs);border-radius:var(--raio);}
.passos h3{margin:0;align-self:start;}
.passos p{grid-column:1 / -1;}
.passos p{color:var(--apoio);font-size:var(--t-desc);line-height:1.55;}

/* ── Chamada do meio. Texto à esquerda, ação à direita, fio acima. */
/* A única aparição do metal sobre papel, e ela não é texto: é a régua
   que abre o momento em que a página pede a ação. No carvão o mesmo
   metal abre a admissão do que não se promete. Os dois lados da página
   marcam o compromisso com o mesmo traço.                            */
.chamada-meio{margin-top:var(--e-8);padding-top:var(--e-5);
  border-top:2px solid transparent;
  border-image:var(--metal) 1;
  display:grid;gap:var(--e-4);align-items:center;}
.chamada-meio p{max-width:46ch;color:var(--apoio);}

/* ── Cobrança ─────────────────────────────────────────────────── */
.condicoes{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-6) var(--e-5);}
.condicoes li{border-top:var(--fio) solid var(--papel-linha);padding-top:var(--e-3);
  display:grid;gap:var(--e-2);align-content:start;}
.condicoes .titulo-cond{display:flex;align-items:flex-start;gap:var(--e-2);}
.condicoes .ic{width:20px;height:20px;color:var(--azul);flex-shrink:0;margin-top:5px;}
.condicoes h3{margin:0;}
.condicoes p{color:var(--apoio);font-size:var(--t-desc);line-height:1.55;}
.aviso-cobranca{margin-top:var(--e-6);font-size:var(--t-sm);color:var(--tinta-fraca);
  max-width:60ch;}

/* ── Quem atende ──────────────────────────────────────────────── */
.atende{display:grid;gap:var(--e-8);align-items:start;}
.pessoa img{width:100%;max-width:320px;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--raio);display:block;margin-inline:auto;}
.pessoa-nome{display:block;margin-top:var(--e-3);font-family:var(--fonte-titulo);
  font-size:var(--t-lg);color:var(--tinta);line-height:1.2;}
.pessoa-cargo{display:block;margin-top:var(--e-h);font-size:var(--t-sm);
  color:var(--azul);}
.pessoa .botao{margin-top:var(--e-3);width:100%;max-width:320px;}
.pessoa-fala{margin-bottom:var(--e-6);max-width:56ch;color:var(--tinta-media);}
.diferenca{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-5);}
.diferenca li{border-top:var(--fio) solid var(--papel-linha);padding-top:var(--e-3);}
.diferenca h3{margin-bottom:var(--e-1);}
.diferenca p{color:var(--apoio);font-size:var(--t-desc);line-height:1.55;}

/* ── Dúvidas ──────────────────────────────────────────────────── */
.duvidas .lista-duvidas{max-width:840px;}
.duvidas details{border-top:var(--fio) solid var(--papel-linha);}
.duvidas details:last-of-type{border-bottom:var(--fio) solid var(--papel-linha);}
.duvidas summary{cursor:pointer;list-style:none;position:relative;
  padding:var(--e-3) var(--e-5) var(--e-3) 0;font-weight:500;color:var(--tinta);}
.duvidas summary::-webkit-details-marker{display:none;}
/* O marcador é um mais que vira menos: um sinal, não uma seta girando. */
.duvidas summary::before,.duvidas summary::after{content:"";position:absolute;
  right:4px;top:50%;background:var(--azul);transition:var(--transicao);}
.duvidas summary::before{width:14px;height:1.5px;margin-top:-0.75px;}
.duvidas summary::after{width:1.5px;height:14px;margin-top:-7px;right:10.25px;}
.duvidas details[open] summary::after{transform:scaleY(0);}
.duvidas .resposta{padding-bottom:var(--e-4);}
.duvidas .resposta p{color:var(--tinta-media);max-width:70ch;}
.duvidas .resposta p + p{margin-top:var(--e-2);}

/* ── Contato ──────────────────────────────────────────────────── */
.contato .interno{display:grid;gap:var(--e-8);align-items:start;}
.contato .lede{margin-bottom:var(--e-5);}
.contato .ou-fale{margin-top:var(--e-3);font-size:var(--t-sm);color:var(--texto-fraco);}
/* O número está no meio de uma frase, então ele é inline e a altura dele
   é a da linha: 19px. Padding vertical em elemento inline não empurra o
   texto ao redor, mas amplia a área de toque, que é o que este público
   precisa. Fica em 45px sem mudar uma vírgula do layout.              */
.contato .ou-fale a{display:inline;padding:13px 0;text-underline-offset:3px;}
.rotulo{font-size:var(--t-xs);font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ouro);margin:0 0 var(--e-3);}
.lista-mandar{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3);}
.lista-mandar li{display:grid;grid-template-columns:auto 1fr;gap:var(--e-2);align-items:start;}
.lista-mandar .ic{width:20px;height:20px;color:var(--ouro);margin-top:4px;}
.lista-mandar span{color:var(--texto);}
.lista-mandar strong{color:var(--branco);}
.caixa-aviso{margin-top:var(--e-4);padding:var(--e-3);
  background:var(--carvao-alto);
  border:var(--fio) solid var(--carvao-linha);border-radius:var(--raio);
  display:grid;grid-template-columns:auto 1fr;gap:var(--e-2);align-items:start;
  font-size:var(--t-sm);color:var(--texto-fraco);line-height:1.55;}
.caixa-aviso .ic{width:19px;height:19px;color:var(--ouro-medio);margin-top:3px;}

/* ── Rodapé ───────────────────────────────────────────────────── */
.rodape{background:var(--carvao-fundo);color:var(--texto);
  border-top:var(--fio) solid var(--carvao-linha);
  padding-top:var(--e-8);padding-bottom:var(--e-8);}
.rodape .interno{display:grid;gap:var(--e-6);}
.rodape .marca-lockup-rodape{width:min(100%,12rem);justify-items:start;}
.rodape .marca-lockup-rodape img{width:100%;height:auto;display:block;}
.rodape .marca-lockup-rodape .marca-subtitulo{font-size:var(--t-xs);}
.rodape .assinatura{margin-top:var(--e-3);font-family:var(--fonte-titulo);
  font-size:var(--t-base);color:var(--texto);line-height:1.45;max-width:30ch;}
.rodape h3{font-family:var(--fonte-texto);font-size:var(--t-xs);letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ouro);margin:0 0 var(--e-2);font-weight:600;}
.rodape p{font-size:var(--t-sm);color:var(--texto);margin:0 0 var(--e-h);}
.rodape a{color:var(--texto);display:inline-flex;align-items:center;min-height:44px;}
.rodape a:hover{color:var(--ouro);}

/* ── Ícones ───────────────────────────────────────────────────── */
svg[class^="ic"]{fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.ic{width:20px;height:20px;flex-shrink:0;}
.sprite{position:absolute;}

/* ── Telas maiores ────────────────────────────────────────────── */
/* As grelhas contam em rem, e não em número fixo de colunas: quem
   amplia a fonte do sistema recebe menos colunas em vez de texto fora
   da tela.                                                            */
@media (min-width:600px){
  .garantias ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
  .condicoes{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));}
  .passos{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));}
  .fontes{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--e-5) var(--e-4);}
  .diferenca{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));}
  .duas{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:var(--e-6);}
  .bancos{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-3);}
  .chamada-meio{grid-template-columns:1fr auto;gap:var(--e-6);}
}

@media (min-width:1000px){
  section{padding-top:var(--e-16);padding-bottom:var(--e-16);}
  .garantias{padding-top:var(--e-10);padding-bottom:var(--e-10);}
  .abertura{padding-top:var(--e-12);padding-bottom:var(--e-12);}
  .abertura .interno{grid-template-columns:1.05fr 0.95fr;gap:var(--e-10);}
  .abertura h1{font-size:4rem;max-width:18ch;}
  .abertura .apoio{font-size:var(--t-lede);}
  .cartao{padding:var(--e-6);}
  .menu{display:flex;gap:var(--e-3);align-items:center;margin-left:auto;
    flex-wrap:wrap;justify-content:flex-end;}
  .menu-movel{display:none;}
  .atende{grid-template-columns:320px 1fr;gap:var(--e-10);}
  .contato .interno{grid-template-columns:1fr 1fr;gap:var(--e-10);}
  .rodape .interno{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--e-8);align-items:start;}
}

/* ── Movimento ────────────────────────────────────────────────── */
/* Um gesto só, e é o da marca: o lacre sendo aplicado. Ele acontece uma
   vez no selo do cartão de abertura, e depois a página só revela os
   fios de régua conforme cada bloco entra. Duas saídas de segurança:
   navegador sem suporte e aparelho com movimento reduzido veem a
   página inteira, parada e completa.                                  */
@media (prefers-reduced-motion: no-preference){
  @keyframes aplicar-lacre{
    from{ transform:translateY(8px);opacity:0; }
    60% { opacity:1; }
    to  { transform: none; opacity:1; }
  }
  .cartao-marca img{
    animation: aplicar-lacre 760ms cubic-bezier(0.22,0.61,0.36,1) both;
  }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes tracar-fio{
      from{ transform: scaleX(0); }
      to  { transform: scaleX(1); }
    }
    /* Só régua recebe o traço. Um bloco de conteúdo com scaleX fica
       invisível enquanto a linha do tempo não roda, e isso é conteúdo
       sumindo, não movimento.                                         */
    .cartao-fio,.passos li::before{ transform-origin: left center; }
    .cartao-fio{
      animation-name: tracar-fio;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(0.22,0.61,0.36,1);
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
  }
}

/* ── Botão flutuante do WhatsApp ──────────────────────────────── */
/* Substituiu a barra fixa do rodapé. A barra tomava 92px de altura em
   toda a rolagem, o que num celular é um oitavo da tela, e ainda obrigava
   o corpo a reservar esse espaço embaixo.

   O verde é o da própria marca do WhatsApp, e é ele que faz este
   público reconhecer o botão antes de ler qualquer coisa. O verde puro
   mede 1,83:1 contra o papel, então o contorno do controle não se
   distinguiria do fundo; o anel mais escuro resolve a 3,83:1 sem trocar a
   cor que a pessoa reconhece.                                          */
.flutuante{position:fixed;right:var(--e-3);z-index:30;
  bottom:calc(var(--e-3) + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:var(--raio-selo);
  display:grid;place-items:center;
  background:var(--zap);border:2px solid var(--zap-fio);color:var(--carvao-fundo);
  text-decoration:none;transition:var(--transicao);}
.flutuante svg{width:30px;height:30px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.flutuante:hover{background:var(--zap-toque);transform:translateY(-2px);}
.flutuante:focus-visible{outline:3px solid var(--carvao-fundo);outline-offset:3px;border-color:var(--branco);}
.flutuante.leitura-livre{visibility:hidden;pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .flutuante:hover{transform:none;} }

/* O botão paira sobre o canto do rodapé, então o rodapé reserva a altura
   dele embaixo para nenhuma linha ficar coberta.                       */
.rodape{padding-bottom:calc(var(--e-8) + 76px);}
@media (min-width:1000px){ .rodape{padding-bottom:var(--e-8);} }


/* Revisão: conteúdo legível e dúvidas agrupadas. */
.publico{font-size:var(--t-base);color:var(--tinta);margin-top:var(--e-3);max-width:50ch;}
.contato-inicial{font-size:var(--t-sm);color:var(--tinta-media);margin-top:var(--e-2);}
.contato-inicial a{color:var(--azul);text-underline-offset:3px;}
.fontes .origem a{display:inline-block;padding:var(--e-1) 0;color:var(--azul);text-underline-offset:4px;}

/* No celular, os CTAs ficam no centro e com uma largura legível. */
@media (max-width:599px){
  .cartao{padding-bottom:calc(var(--e-5) + 11rem);}
  .abertura .acoes{justify-items:center;}
  .abertura .acoes .botao,
  .chamada-meio .botao,
  .contato .botao-grande,
  .pessoa .botao{width:min(100%,20rem);}
  .chamada-meio{justify-items:center;text-align:center;}
  .contato .botao-grande,.pessoa .botao{display:flex;margin-left:auto;margin-right:auto;}
  .cartao::after{right:-12%;bottom:-15%;width:78%;opacity:0.18;}
}