/* Estilos das páginas internas. Carregado depois de _tokens.css. */

/* Quebra de linha. Ate 21/09/2026 o site nao tinha nenhuma regra disso, e so
   os   escritos a mao seguravam palavra curta no fim da linha, um a um.
   Resultado: sobrava corte no meio de expressao ("danos / eletricos",
   "pelo seguro / fianca", "Zona / Oeste"). O navegador equilibra melhor que
   qualquer   manual:
   - balance nos titulos, que sao curtos e onde a linha orfã aparece mais
   - pretty no corpo, que evita a ultima linha com uma palavra so
   Os   continuam validos para o que o navegador nao tem como adivinhar
   (nome de produto, sigla, endereco). */
h1, h2, h3, h4, .destaque b, .numero b { text-wrap: balance; }
p, li, summary, .abre, .abre-secao, .microcopy, .rotulo,
.credencial, .numero span, .destaque span, td, th { text-wrap: pretty; }
.topo { border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); z-index: 10; }
.topo-inner { display: flex; align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px; }
.marca { font-family: var(--titulo); font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.02em; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--tinta-2); font-size: .95rem; font-weight: 500; }
.menu a:hover, .menu a[aria-current] { color: var(--marca); }
.btn-topo { padding: 10px 18px; font-size: .92rem; }
/* Capa escura nas internas, no mesmo tom da hero da home: a analise-visual
   pede azul-marinho como base dominante, e capa branca deixava a primeira
   dobra sem peso nenhum. */
/* Capa das internas: mesma receita da hero da home. Foto a direita, camada
   azul por cima mais opaca a esquerda (onde mora o texto branco) e mais leve
   a direita, onde a foto aparece. Cada pagina aponta a sua em `background-image`
   no <style> proprio; sem foto, continua o azul chapado de antes. */
/* Mesma altura da hero da home (554px), para a capa das internas ter o mesmo
   peso na primeira dobra. La os 554px saem de 92px de topo + conteudo + a faixa
   de numeros (122px) fechando embaixo; aqui, sem essa faixa, os 150px que
   faltavam viram respiro: 190 em cima, 184 embaixo, com h1 + abertura (180px)
   no meio. Foi o padding antigo (76/68) que espremia a foto numa faixa fina. */
.capa {
  background: var(--fundo-escuro);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  color: var(--tinta-clara);
  padding: 190px 0 184px;
}
@media (max-width: 720px) {
  /* Sem a foto (ver regra abaixo) o respiro grande vira so vazio. */
  .capa { padding: 72px 0 64px; }
}
.capa-foto {
  background-image:
    linear-gradient(100deg,
      rgba(10,70,86,.97) 0%,
      rgba(10,70,86,.94) 32%,
      rgba(10,70,86,.82) 58%,
      rgba(10,70,86,.68) 100%),
    var(--capa-foto);
}
/* Foto com pessoa em interior nao tem area lisa: a textura fica alta nos dois
   lados (desvio ~45-50, contra ~5 de uma foto de ceu). O gradiente denso que
   estava aqui resolvia a leitura cobrindo a foto quase inteira — e o resultado
   era um bloco chapado com uma silhueta fantasma atras, que lia como defeito
   e nao como foto. Era a queixa das capas das internas, aberta desde 14/09.

   A saida nao e afrouxar o gradiente (o texto voltaria a cair sobre pessoa e
   parede), e sim parar de sobrepor: a capa vira duas faixas. A esquerda e
   petroleo solido e e onde mora o texto; a direita e a foto, sem vendagem
   nenhuma, com so uma emenda curta entre as duas para o corte nao ficar duro.
   Cada elemento fica inteiro no seu lado. */
.capa-foto-densa {
  background-image:
    linear-gradient(90deg,
      var(--fundo-escuro) 0%,
      var(--fundo-escuro) 52%,
      rgba(10,70,86,.55) 61%,
      rgba(10,70,86,0) 70%),
    var(--capa-foto);
  background-position: center right;
}
/* O padding 190/184 foi calculado em 14/09 para uma capa sem foto visivel, onde
   o respiro era o unico conteudo. Com a foto ocupando a direita ela ja sustenta
   a altura, e manter aquele valor passava de 900px de capa. */
@media (min-width: 721px) {
  .capa-foto-densa { padding: 128px 0 124px; }
}
/* Em tela estreita o recorte lateral nao funciona: a parte util da foto sai do
   enquadramento. Mas apagar a imagem deixava um bloco azul chapado, sem vida.
   A saida e girar a composicao: a foto sobe para o topo, o gradiente passa a
   ser vertical e o texto fica sobre a parte solida de baixo. Mesma foto, outro
   enquadramento. */
@media (max-width: 720px) {
  .capa-foto,
  .capa-foto-densa {
    background-image:
      linear-gradient(to bottom,
        rgba(10, 70, 86, .55) 0%,
        rgba(10, 70, 86, .80) 38%,
        rgba(10, 70, 86, .96) 62%,
        rgba(10, 70, 86, .99) 100%),
      var(--capa-foto);
    background-position: center top;
    background-size: cover;
    padding-top: 150px;
  }
}
/* Pastilhas de credencial acima do h1, licao do X5 ("+ de 15 anos de
   experiencia", "+ de 200 milhoes sob gestao"). Resolvem o peso antes do
   leitor rolar um pixel, e usam o que a Chancela ja tem de verdade: o registro
   SUSEP, que ate 16/09 so aparecia no rodape, e os 10 anos.
   Nao confundir com a .tag que saiu das capas em 14/09: aquela repetia o que o
   h1 ja dizia ("Para sindico e administradora"); esta traz informacao que nao
   esta em lugar nenhum da dobra. */
.credenciais { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.credencial {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--linha-escura); border-radius: 999px;
  padding: 7px 15px; font-size: .88rem; color: var(--tinta-clara-2);
  background: rgba(255,255,255,.04);
}
.credencial b { color: var(--tinta-clara); font-weight: 600; }
.capa h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 700; margin-bottom: 16px; max-width: 22ch; }
.capa .abre { font-size: 1.12rem; color: var(--tinta-clara-2); max-width: 42rem; }
/* Na capa dividida o texto tem que caber na faixa solida da esquerda: passando
   de ~48% ele entra na emenda e volta a cair sobre a foto, que e exatamente o
   problema que a divisao veio resolver. */
@media (min-width: 721px) {
  .capa-foto-densa h1 { max-width: 19ch; }
  .capa-foto-densa .abre { max-width: 31rem; }
  /* as pastilhas seguem a mesma largura, mas sem forcar empilhamento */
  .capa-foto-densa .credenciais { max-width: 34rem; }
}
/* Topo escuro ENQUANTO esta sobre a capa, para nao cortar o bloco em dois.
   Depois que a capa sai da tela ele volta ao claro da regra la de cima: barra
   navy flutuando sobre faixa clara lia como defeito (o print pegou ela
   cortando o card do Home equity ao meio). O JS de cada pagina poe e tira
   .sobre-capa; sem JS, a barra fica escura, que e o estado seguro no topo. */
.topo.sobre-capa { background: var(--fundo-escuro); border-bottom-color: var(--linha-escura); }
.topo.sobre-capa .marca { color: var(--tinta-clara); }
.topo.sobre-capa .menu a { color: var(--tinta-clara-2); }
.topo.sobre-capa .menu a:hover, .topo.sobre-capa .menu a[aria-current] { color: #fff; }
/* Sobre a capa o botao do topo fica de contorno, nao solido: com ele turquesa
   cheio, a primeira dobra tinha duas cores de acao disputando com o CTA da
   pagina. O ambar e reservado para a acao principal. */
.topo.sobre-capa .btn-topo { background: transparent; color: var(--tinta-clara); border: 1px solid var(--linha-escura); }
.topo.sobre-capa .btn-topo:hover { background: var(--fundo-escuro-2); border-color: var(--marca-clara); }
/* Estado claro (fora da capa): o menu precisa de contraste proprio, senao
   herda o cinza claro e some no branco. */
.topo .menu a[aria-current] { color: var(--marca); }
.topo { transition: background .25s ease, border-color .25s ease; }
@media (prefers-reduced-motion: reduce) { .topo { transition: none; } }
/* Rotulo em caixa alta acima do h2, no traco do "QUEM SOMOS" / "POR QUE
   EXISTIMOS" da Andar. Da ritmo a pagina e nomeia a secao sem acrescentar
   moldura. Nao confundir com a .tag que saiu das capas em 14/09: aquela ficava
   sobre a foto e repetia o h1; esta e marcador de secao no corpo da pagina. */
.rotulo {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 10px;
}
.secao-escura .rotulo { color: var(--marca-clara); }
/* ---- Tira de seguradoras dentro do conteudo ----
   Mesma ideia da tira da hero da home, mas para usar no corpo da pagina, onde
   substitui a frase que enumerava as marcas. As alturas por marca repetem o
   calculo da hero: igualam a ALTURA DA TINTA de cada logo (~29,5px), nao a
   altura da <img>, porque cada PNG tem margem interna propria. Ao trocar uma
   logo, recalcular: max-height = 29,5 / fracao_de_tinta_vertical. */
.selos-bloco { margin: 28px 0 4px; }
.selos-rotulo { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 14px; }
.secao-escura .selos-rotulo { color: var(--marca-clara); }
/* gap horizontal 0: a caixa de 96px ja tem folga interna, e com 6px as sete
   passavam 4px da largura do .bloco e quebravam a fileira */
.selos-lista { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; margin: 0; padding: 0; }
/* Caixa menor que a da hero (118px): aqui a tira vive dentro do .wrap estreito,
   que descontado o padding deixa 656px uteis. 7 x 92 = 644, entao as sete cabem
   em uma fileira com folga. A altura acompanha na mesma proporcao, e os
   max-height percentuais abaixo continuam valendo. */
.selos-lista li { flex: 0 0 92px; height: 36px; display: flex; align-items: center; justify-content: center; }
.selos-lista img { max-height: 100%; max-width: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; opacity: .7; transition: opacity .15s ease; }
.selos-lista li:hover img { opacity: 1; }
/* em faixa escura a logo colorida briga com a paleta: vai a branco por filtro */
.secao-escura .selos-lista img { filter: brightness(0) invert(1); opacity: .72; }
.selos-lista img[alt="Porto Seguro"] { max-height: 69%; }
.selos-lista img[alt="Allianz"] { max-height: 81%; }
.selos-lista img[alt="Tokio Marine"] { max-height: 65%; }
.selos-lista img[alt="Bradesco Seguros"] { max-height: 70%; }
.selos-lista img[alt="SulAmérica"] { max-height: 68%; }
.selos-lista img[alt="Mapfre"] { max-height: 69%; }
.selos-lista img[alt="HDI Seguros"] { max-height: 65%; }
@media (max-width: 560px) {
  .selos-lista li { flex: 0 0 104px; height: 40px; }
}
/* ---- Objecao como citacao, nao como paragrafo (22/09/2026) ----
   A secao de objecao e o fecho vinham como dois .bloco identicos, um embaixo
   do outro: coluna estreita de texto, faixa de cor alternada, nada onde o olho
   para. Aqui a pergunta do corretor vira fala (aspas grandes, tipo maior) com
   a foto ao lado, e o fecho desce para faixa escura: o ritmo da pagina passa a
   alternar texto -> foto -> escuro em vez de texto -> texto -> texto. */
.objecao-bloco {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.objecao-fala { position: relative; padding-top: 34px; }
.objecao-fala::before {
  content: "\201C"; position: absolute; top: -18px; left: -6px;
  font-family: var(--titulo); font-size: 5.5rem; line-height: 1;
  color: var(--acento); opacity: .32;
}
/* A aspa fecha na propria frase citada, nao solta no fim do bloco: quem fala
   e o corretor, e a fala e so o h2. Aspa que abre e nao fecha ficou pendente
   na primeira versao. */
.objecao-fala h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 18px; text-wrap: balance; }
.objecao-fala h2::after {
  content: "\201D"; margin-left: 2px;
  color: var(--acento); opacity: .32;
}
.objecao-fala p { color: var(--tinta-2); margin-bottom: 14px; max-width: 46ch; }
.objecao-fala p:last-child { margin-bottom: 0; }
.objecao-foto { border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 4 / 3; }
.objecao-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Espaco reservado de foto: a secao ja nasce com o lugar da imagem, e o
   arquivo entra depois sem mexer no layout. Sem <img>, e um retangulo de
   marca com a nota do que vai ali, nunca um quadrado vazio. */
.objecao-foto:not(:has(img)),
.foto-reservada {
  border-radius: var(--raio-g); aspect-ratio: 4 / 3;
  background: var(--marca-lavada);
  border: 1px dashed var(--linha-forte);
  display: grid; place-items: center; text-align: center;
  padding: 24px; color: var(--tinta-3); font-size: .88rem;
}
.secao-escura .foto-reservada { background: var(--fundo-escuro-2); border-color: var(--linha-escura); color: var(--tinta-clara-2); }
@media (max-width: 860px) {
  .objecao-bloco { grid-template-columns: 1fr; gap: 28px; }
  .objecao-foto { aspect-ratio: 16 / 9; order: -1; }
}

.bloco { max-width: 44rem; }
.bloco h2 { font-size: 1.65rem; margin-bottom: 14px; }
.bloco h3 { font-size: 1.12rem; margin-bottom: 6px; }
.bloco p { color: var(--tinta-2); margin-bottom: 16px; }
/* Subtitulo que agrupa cards de produto. Fica entre o h2 e os cards, entao
   pesa menos que o h2 e mais que o h3 de dentro do card. */
/* Convite no meio da pagina, depois do argumento e antes do proximo assunto.
   Sobre faixa escura o .btn padrao (petroleo) sumiria, entao vai de ambar,
   como o CTA da hero. */
.cta-meio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 30px; }
.cta-meio span { color: var(--tinta-3); font-size: .95rem; }
.secao-escura .cta-meio span { color: var(--tinta-clara-2); }
.secao-escura .cta-meio .btn { background: var(--acento); color: #062E38; }
.secao-escura .cta-meio .btn:hover { background: var(--acento-claro); }
.grupo-titulo { font-size: 1.15rem; font-weight: 700; margin-top: 30px; }
.grupo-abre { color: var(--tinta-3); font-size: .97rem; margin-top: 4px; }
.grupo-abre + .produtos { margin-top: 14px; }
.produtos { display: grid; gap: 16px; margin: 26px 0; }
.produto { border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; background: var(--ground); }
.produto p { margin: 0; font-size: .98rem; }
.lista { list-style: none; display: grid; gap: 12px; margin: 22px 0; }
.lista li { display: flex; gap: 11px; align-items: flex-start; color: var(--tinta-2); }
.lista li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); flex: none; margin-top: .55em; }
.aviso-lei { border: 1px solid var(--linha-forte); background: var(--marca-lavada); padding: 18px 22px; border-radius: var(--raio); margin: 26px 0; }
.aviso-lei p { margin: 0; color: var(--tinta); }
/* O fecho tem cor propria (azul lavado da marca, o mesmo do .destaque e do
   .aviso-lei) em vez de herdar cinza. Antes ele vinha com .secao-cinza e
   colava na secao cinza anterior: 1.00:1 de contraste, um bloco so. Resolver
   por padding nao funcionava, porque a media de 640px reduz o padding de todas
   as secoes e no celular a divisa sumia de novo. Cor propria resolve em
   qualquer largura, e ainda marca que ali e o fechamento com a chamada. */
/* A regra generica de emenda (.secao + .secao, no _tokens.css) tambem pega o
   fecho e aplica --linha, mais clara. Aqui a borda e o segundo sinal da divisa
   (o primeiro e a troca de matiz, de cinza neutro para azul), entao vale a
   linha mais forte. O seletor duplicado sobe a especificidade sem !important. */
/* O fecho e o fim da pagina, entao ganha peso de fim: faixa escura, texto
   centrado e botao grande. Antes era mais um bloco claro de texto a esquerda,
   igual ao que vinha acima, e o CTA lia como paragrafo em vez de chamada. */
.fecho,
.secao + .fecho,
.secao-cinza + .fecho {
  text-align: center;
  padding: clamp(64px, 9vw, 104px) 0;
  /* O tom claro (--fundo-escuro-2), nao o --fundo-escuro: o rodape usa esse
     ultimo, e os dois juntos viravam um bloco escuro unico sem divisa. */
  background: var(--fundo-escuro-2);
  color: var(--tinta-clara);
  border-top: none;
}
.fecho .bloco { max-width: 38rem; margin-inline: auto; }
.fecho h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 16px; color: #fff; text-wrap: balance; }
/* No fecho a quebra segue o SENTIDO, nao a largura: cada frase do paragrafo
   vai num <span class="frase"> e o inline-block impede que ela seja partida no
   meio enquanto couber. Decisao do Ramon em 22/09, depois de ver as duas
   opcoes medidas: balance iguala as linhas (379/368px) mas corta no meio da
   frase; por frase as linhas ficam desiguais (200/546px) e le melhor.
   Sem <br>, que no celular forcaria a quebra onde nao cabe — ali os spans
   voltam a fluir sozinhos. */
.fecho p { color: var(--tinta-clara-2); text-wrap: pretty; }
.fecho .frase { display: inline-block; }
/* No celular a frase inteira nao cabe numa linha, entao mante-la indivisivel so
   empurra o resto e deixa um toco de 50px no fim (medido a 390px). Ali o span
   volta a ser texto corrido e o `pretty` cuida da orfa. */
@media (max-width: 620px) { .fecho .frase { display: inline; } }
.fecho .btn { background: var(--acento); color: #062E38; margin-top: 10px; padding: 15px 30px; font-size: 1.02rem; }
.fecho .btn:hover { background: var(--acento-claro); }
/* Ver a nota da mesma regra no site-consorcios: a caixa de 30rem do .microcopy
   generico encosta na esquerda dentro do fecho centrado e desalinha a ultima
   linha em relacao ao h2 e ao botao. */
.fecho .microcopy { color: var(--tinta-clara-2); opacity: .82; margin-top: 18px; margin-inline: auto; }
.fecho .bloco > p { margin-bottom: 0; }
/* Faixa de numeros dentro da capa escura, como na home: prova na primeira
   dobra em vez de argumento solto no meio do texto. */
/* A capa das internas nao tem mais numero nem tag: so h1 e abertura. Os numeros
   desceram para uma faixa `.numeros` no corpo (regra clara no _tokens.css), e a
   tag ("Para sindico e administradora") saiu porque o proprio h1 ja nomeia o
   leitor, entao ela repetia e impunha mais uma estrutura fixa igual nas tres. */
/* Destaque do argumento que a analise-visual diz estar discreto demais:
   a receita do corretor e o motivo de ele trazer o contrato. */
.destaque { display: grid; gap: 6px; border: 1px solid var(--linha-forte); border-radius: var(--raio-g); background: var(--marca-lavada); padding: 26px 28px; margin: 26px 0; }
.destaque b { font-family: var(--titulo); font-size: 2.2rem; font-weight: 700; color: var(--marca-escura); line-height: 1.05; letter-spacing: -0.03em; }
.destaque span { color: var(--tinta-2); font-size: 1.02rem; }
/* Microcopy abaixo do botao de fecho: responde "vou receber ligacao de
   vendedor?" no ponto exato em que a duvida aparece. */
.microcopy { margin-top: 14px; color: var(--tinta-3); font-size: .88rem; max-width: 30rem; }

/* ---- Faixa escura nas internas ----
   A classe existia so no <style> da home; as internas carregam este arquivo,
   entao precisa morar aqui tambem. E todo texto de dentro tem que trocar de
   cor junto: .bloco p e .lista li usam --tinta-2, que sobre fundo escuro
   ficaria ilegivel (foi o defeito de contraste 1,15:1 que ja apareceu antes). */
.secao-escura { background: var(--fundo-escuro); color: var(--tinta-clara); }
.secao-escura h2,
.secao-escura h3 { color: #fff; }
.secao-escura p,
.secao-escura .lista li { color: var(--tinta-clara-2); }
.secao-escura .lista li strong { color: #fff; }
.secao-escura .lista li::before { background: var(--marca-clara); }
.secao-escura .btn { background: var(--marca-clara); color: var(--fundo-escuro); }
.secao-escura .btn:hover { background: var(--acento-claro); }
.secao-escura .produto { border-color: var(--linha-escura); background: var(--fundo-escuro-2); }
.secao-escura .produto-icone { color: var(--marca-clara); }
.secao-escura .aviso-lei { background: var(--fundo-escuro-2); border-color: var(--linha-escura); }
.secao-escura .aviso-lei p { color: var(--tinta-clara); }

/* ---- Foto com texto ao lado, nas internas ----
   Antes a imagem era uma faixa solta entre a capa e o conteudo: decoracao,
   nao secao. Agora ela divide o bloco com um argumento, e cada foto entra
   onde faz sentido com o que esta escrito ao lado. */
/* Bloco de faixa escura com foto ao lado. Mesmo desenho do .vantagens-bloco da
   home (que continua no <style> dela), generalizado aqui para as internas: o
   bloco escuro sem imagem ficava com metade da faixa vazia a direita. */
.escuro-bloco { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 52px; align-items: center; }
.escuro-bloco.invertido .escuro-foto { order: 2; }
.escuro-foto {
  aspect-ratio: 1 / 1;
  border-radius: 50% 8px 8px 8px;
  overflow: hidden;
  background: var(--fundo-escuro-2);
}
.escuro-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Em uma coluna a foto precisa de LARGURA, nao so de max-width: com
   aspect-ratio 1/1 num item de grid 1fr ela estica para a largura inteira do
   .wrap (1060px) antes do limite morder, e vira um quadrado gigante com o
   texto espremido embaixo. `width` resolve nos dois sentidos. */
@media (max-width: 860px) {
  .escuro-bloco { grid-template-columns: 1fr; gap: 32px; justify-items: center; text-align: left; }
  .escuro-bloco.invertido .escuro-foto { order: 0; }
  .escuro-foto { width: min(280px, 72vw); max-width: 280px; margin: 0 auto; }
  .escuro-bloco > div:not(.escuro-foto) { width: 100%; }
}

.foto-bloco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.foto-bloco.invertido .foto-lado { order: 2; }
.foto-lado { border-radius: var(--raio-g); overflow: hidden; background: var(--ground-2); aspect-ratio: 4 / 3; }
.foto-lado img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-texto h2 { font-size: 1.55rem; margin-bottom: 12px; }
.foto-texto p { color: var(--tinta-2); margin-bottom: 14px; }
.foto-texto p:last-child { margin-bottom: 0; }
.foto-texto .destaque-linha { font-weight: 600; color: var(--tinta); }
@media (max-width: 860px) {
  .foto-bloco { grid-template-columns: 1fr; gap: 30px; }
  .foto-bloco.invertido .foto-lado { order: 0; }
  .foto-lado { aspect-ratio: 16 / 9; }
}

/* ---- Rodape em faixa escura e colunas ----
   Mesmo padrao do resto da pagina: marca e resumo, links, contato e endereco,
   com a linha legal isolada embaixo. Sem botao de loja: a Chancela nao tem app. */
.rodape { background: var(--fundo-escuro); color: var(--tinta-clara-2); padding: 56px 0 0; font-size: .93rem; border-top: none; }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr; gap: 40px; padding-bottom: 44px; }
.rodape-marca { font-family: var(--titulo); font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; display: block; text-decoration: none; margin-bottom: 12px; }
.rodape-resumo { max-width: 22rem; line-height: 1.6; }
.rodape h3 { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-clara); margin-bottom: 16px; }
.rodape ul { list-style: none; display: grid; gap: 11px; }
.rodape a { color: var(--tinta-clara-2); text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape-contato { display: grid; gap: 11px; }
.rodape-sociais { display: flex; gap: 14px; margin-top: 16px; }
.rodape-sociais a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--linha-escura); border-radius: 50%; color: var(--tinta-clara-2); }
.rodape-sociais a:hover { border-color: var(--marca-clara); color: #fff; }
.rodape-legal { border-top: 1px solid var(--linha-escura); padding: 22px 0 26px; text-align: center; font-size: .86rem; color: var(--tinta-clara-2); }
@media (max-width: 900px) { .rodape-grade { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .rodape-grade { grid-template-columns: 1fr; } .rodape-legal { text-align: left; } }

/* ---- Tabela comparativa ----
   O cartao em texto corrido nao responde "qual dos tres serve para mim":
   para comparar, o leitor precisa ver os mesmos criterios lado a lado.
   Em tela estreita vira cartao empilhado, com o nome do criterio no ::before,
   porque tabela de 4 colunas em 360px fica ilegivel por mais scroll que tenha. */
.comparativo { margin: 30px 0 8px; }
.comparativo table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.comparativo th, .comparativo td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.comparativo thead th { font-family: var(--titulo); font-size: 1.02rem; font-weight: 700; color: var(--tinta); border-bottom: 2px solid var(--linha-forte); }
.comparativo thead th:first-child { color: var(--tinta-3); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.comparativo tbody th { font-weight: 600; color: var(--tinta-3); font-size: .9rem; width: 11rem; }
.comparativo td { color: var(--tinta-2); }
.comparativo tbody tr:last-child th, .comparativo tbody tr:last-child td { border-bottom: none; }
.comparativo caption { caption-side: bottom; margin-top: 14px; color: var(--tinta-3); font-size: .88rem; text-align: left; }
@media (max-width: 760px) {
  .comparativo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comparativo table, .comparativo tbody, .comparativo tr, .comparativo th, .comparativo td { display: block; }
  .comparativo tbody tr { border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 0; margin-bottom: 14px; }
  .comparativo tbody th { width: auto; padding-bottom: 4px; color: var(--tinta); font-size: .95rem; border-bottom: none; }
  .comparativo tbody td { border-bottom: none; padding-top: 4px; padding-bottom: 10px; }
  .comparativo tbody td::before { content: attr(data-col); display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 3px; }
}

/* ---- Passos numerados nas internas ----
   Mesmo componente da home, que vivia so no <style> dela. As internas
   terminavam em FAQ sem nunca dizer como o processo anda. */
/* Passos em linha, nao em quatro colunas de card.
   Em coluna o texto de cada passo raramente tem o mesmo tamanho, e a grade
   igualava a altura pelo maior: o passo curto ficava com um vazio enorme
   embaixo e o longo quebrava a cada tres palavras, porque 4 colunas em 1060px
   dao ~230px cada (piorado pelos &nbsp; da regra de palavra curta).
   Em linha cada passo ocupa a largura toda, a altura acompanha o proprio
   texto, e a sequencia fica mais obvia: le-se de cima para baixo. */
.passos { counter-reset: passo; margin-top: 36px; display: grid; gap: 0; }
/* O numero e ::before, entao h3 e p sao dois filhos diretos. Com grid de duas
   colunas o p caia de volta na coluna de 46px e quebrava palavra por palavra —
   foi o que aconteceu na primeira tentativa. Flex resolve: o ::before e um
   item, e um wrapper implicito nao existe, entao o texto e alinhado por
   padding-left no h3 e no p, que ficam ambos apos o numero. */
.passo {
  counter-increment: passo; position: relative;
  padding: 24px 0 26px 66px;
  border-top: 1px solid var(--linha);
}
.passo:last-child { border-bottom: 1px solid var(--linha); }
.passo::before {
  content: counter(passo); position: absolute; left: 0; top: 22px;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--marca-lavada); color: var(--marca-escura);
  font-family: var(--titulo); font-weight: 700; font-size: 1.35rem;
}
.passo h3 { font-size: 1.12rem; margin-bottom: 6px; padding-top: 10px; }
.passo p { color: var(--tinta-2); font-size: .97rem; margin: 0; max-width: 62ch; }
.secao-escura .passo { border-color: var(--linha-escura); }
@media (max-width: 560px) {
  .passo { padding-left: 52px; }
  .passo::before { width: 38px; height: 38px; font-size: 1.15rem; top: 20px; }
  .passo h3 { padding-top: 6px; }
}
/* sem fundo: em linha o passo e separado por fio, nao por caixa */
.secao-escura .passo::before { background: rgba(79,209,206,.16); color: var(--marca-clara); }
.secao-escura .passo h3 { color: #fff; }
.secao-escura .passo p { color: var(--tinta-clara-2); }

/* ---- Titulo e abertura de secao, fora do .bloco estreito ----
   O .bloco trava em 44rem, que serve para texto corrido mas espreme
   tabela e grade de tres colunas. */
.titulo-secao { font-size: 1.7rem; margin-bottom: 10px; }
.abre-secao { color: var(--tinta-2); max-width: 44rem; margin-bottom: 12px; }
.secao-escura .titulo-secao { color: #fff; }
.secao-escura .abre-secao { color: var(--tinta-clara-2); }

.rodape-antigo { border-top: 1px solid var(--linha); padding: 34px 0; color: var(--tinta-3); font-size: .9rem; }
.lacuna { background: #FFF6E5; border: 1px dashed #D9A441; color: #6A4B12; padding: 12px 16px; border-radius: var(--raio); font-size: .9rem; margin: 18px 0; }

/* ---- Comparacao em barras ao longo do tempo ----
   Formato das LPs de alavancagem que o Caio mandou em 16/09. La as barras
   mostram rentabilidade projetada; aqui mostram so a estrutura da comparacao,
   porque projecao de rendimento e responsabilidade da corretora perante a
   SUSEP. A altura de cada barra vem de --h (0 a 100), entao quando os valores
   reais chegarem e so trocar esses numeros. */
/* duas colunas fixas: com auto-fit sobrava uma terceira coluna de 0px */
.evolucao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 26px 0 18px; }
@media (max-width: 660px) { .evolucao { grid-template-columns: 1fr; } }
.evolucao-item { border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--ground); padding: 24px 24px 20px; }
.evolucao-rotulo { display: block; font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.evolucao-valor { display: block; font-family: var(--titulo); font-size: 2rem; font-weight: 700; color: var(--marca); letter-spacing: -0.03em; line-height: 1.15; margin-top: 6px; }
.evolucao-nota { display: block; font-size: .92rem; color: var(--tinta-3); margin-top: 2px; }
/* align-items:end faz as barras crescerem de baixo para cima */
.barras { display: flex; align-items: end; gap: 8px; height: 150px; margin-top: 22px; }
.barra {
  flex: 1; display: block; border-radius: 4px 4px 0 0;
  height: calc(var(--h) * 1%);
  background: linear-gradient(to top, var(--marca), var(--marca-clara));
}
/* o caminho que se quer contrastar fica em cinza, sem competir pela atencao */
.barra-fria { background: var(--linha-forte); }
.evolucao-eixo { display: flex; gap: 8px; margin-top: 8px; }
.evolucao-eixo span { flex: 1; font-size: .75rem; color: var(--tinta-3); text-align: center; }
.evolucao-aviso { font-size: .88rem; color: var(--tinta-3); max-width: 62ch; margin-top: 4px; }
.secao-escura .evolucao-item { background: var(--fundo-escuro-2); border-color: var(--linha-escura); }
.secao-escura .evolucao-valor { color: #fff; }
.secao-escura .evolucao-rotulo,
.secao-escura .evolucao-nota,
.secao-escura .evolucao-eixo span,
.secao-escura .evolucao-aviso { color: var(--tinta-clara-2); }
.secao-escura .barra-fria { background: var(--linha-escura); }
@media (max-width: 560px) {
  .barras { height: 120px; gap: 6px; }
  .evolucao-eixo span { font-size: .68rem; }
}
@media (max-width: 720px) { .menu { display: none; } .btn-topo { margin-left: auto; } }
/* FAQ visivel. O texto tem que estar na pagina, nao so no JSON-LD:
   e o que buscador e IA leem pra citar a resposta. */
.faq { max-width: 44rem; }
.faq h2 { margin-bottom: 20px; }
.faq details { border-bottom: 1px solid var(--linha); padding: 16px 0; }
.faq details:first-of-type { border-top: 1px solid var(--linha); }
.faq summary { font-weight: 600; font-size: 1.03rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--marca); font-weight: 700; font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--tinta-2); margin: 12px 0 0; }

/* ============================================================
   RODADA DE 22/09/2026 (noite). Mesmo bloco no _pagina.css do
   site-consorcios: ao mexer aqui, mexer la tambem.
   ============================================================ */

/* <button> nao herda a fonte da pagina. O botao do formulario de contato saia
   em Arial, com a borda cinza de 2px que o navegador poe por padrao. */
button.btn { font-family: inherit; border: 0; cursor: pointer; line-height: inherit; }

/* Foco visivel na cor de acao, para quem navega pelo teclado. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 3px;
}

/* Botao na capa das internas. Ate aqui a capa era so h1 + abertura, e a
   primeira dobra nao tinha acao nenhuma alem do botao pequeno do topo. Ambar,
   como o CTA da hero da home: e a acao principal da pagina. */
.capa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.capa .btn-claro { background: var(--acento); color: #062E38; }
.capa .btn-claro:hover { background: var(--acento-claro); }
.capa-acoes .nota { font-size: .92rem; color: var(--tinta-clara-2); }

/* Topo no celular. Com "Falar com a Chancela" o botao quebrava em duas linhas
   e levava a marca junto (58px de marca e 69px de botao, medido a 390px). No
   estreito o botao usa o rotulo curto, e nada ali quebra linha. */
.topo .marca, .topo .btn-topo { white-space: nowrap; }
.texto-curto { display: none; }
@media (max-width: 520px) {
  .texto-largo { display: none; }
  .texto-curto { display: inline; }
}
@media (max-width: 360px) {
  .topo .topo-inner { gap: 12px; }
  .topo .marca { font-size: 1rem; }
  .topo .btn-topo { padding: 8px 12px; }
}

/* Bloco escuro com foto: h2, paragrafo e botao vinham colados, porque a margem
   mora em .bloco e este bloco nao e .bloco (visto no condominio). */
.escuro-bloco h2 { font-size: 1.55rem; margin-bottom: 12px; }
.escuro-bloco p { margin-bottom: 14px; }
.escuro-bloco p:last-child { margin-bottom: 0; }

/* ============================================================
   MOVIMENTO (25/09/2026)
   Saiu o fade de secao inteira ao rolar (o mesmo gesto em tudo, e que ja
   deixou faixa em branco no ar). No lugar, movimento que prova a frase ao
   lado, na regra da skill animacao-procedural. O que depende de rolagem mora
   em _movimento.js; aqui fica o que roda sem JS.
   Nada aqui parte de invisivel por classe: a entrada da capa e animacao CSS
   com fill "both", que termina sozinha mesmo se o JS nao carregar.
   ============================================================ */
:root { --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); }

/* O selo da Chancela na pastilha do registro SUSEP. O C e o mesmo path do
   favicon, nao redesenhado de olho. */
.selo { width: 18px; height: 18px; flex: none; margin-left: -3px; overflow: visible; }
/* Simbolo N da marca no lugar do "C" provisorio (21/10/2026). E preenchido, nao
   tracado, entao nao tem mais a animacao de traco; ficam o carimbo e a onda. */
.selo-n { fill: var(--acento); }
.selo-anel { fill: none; stroke: var(--acento); stroke-width: 3; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Capa: uma entrada so, em ordem de leitura. Primeiro a pastilha, e o selo
     e "carimbado" nela; depois o titulo sobe de tras de uma mascara; depois o
     texto e os botoes. Numeros contam em seguida (JS). */
  .credenciais { animation: mov-aparece .5s var(--ease-expo) both; }
  .selo { animation: mov-carimbo .45s var(--ease-expo) .1s both; }
  .selo-anel { animation: mov-onda .9s var(--ease-expo) .3s both; transform-origin: 32px 32px; }
  .credencial:first-child { animation: mov-chancelado 1.6s ease-out .3s both; }

  .hero h1, .capa h1 { animation: mov-mascara .95s var(--ease-expo) .15s both; }
  .hero .wrap > p, .capa .abre { animation: mov-sobe .8s var(--ease-expo) .32s both; }
  .hero-acoes, .capa-acoes { animation: mov-sobe .8s var(--ease-expo) .44s both; }
  .hero .numeros-grade { animation: mov-aparece .8s var(--ease-expo) .56s both; }

  /* Seta dos cards de caminho anda na direcao do clique. */
  .caminho span { display: inline-block; transition: transform .25s var(--ease-expo); }
  .caminho:hover span { transform: translateX(4px); }

  /* Botao principal: resposta ao toque em 120ms. */
  .btn { transition: background .15s ease, transform .12s ease; }
  .btn:active { transform: scale(.97); }
}
@keyframes mov-aparece { from { opacity: 0; } }
@keyframes mov-sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes mov-mascara {
  from { opacity: 0; transform: translateY(.5em); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(-20% -5% -30% -5%); }
}
@keyframes mov-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mov-carimbo { from { opacity: 0; transform: scale(1.8); filter: blur(2px); } }
@keyframes mov-onda {
  0% { opacity: .9; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes mov-chancelado {
  0%, 30% { border-color: var(--acento); }
  100% { border-color: var(--linha-escura); }
}

/* Passos: trilho que liga os numeros e cresce com a leitura (_movimento.js
   mede e poe --p). Sem JS, a classe .trilho nao entra e nada disso aparece. */
.passos.trilho { position: relative; }
.passos.trilho::before,
.passos.trilho::after {
  content: ""; position: absolute; width: 2px;
  left: calc(var(--trilho-x) - 1px); top: var(--trilho-topo); height: var(--trilho-alt);
  background: var(--linha-forte); pointer-events: none;
}
.passos.trilho::after {
  background: var(--marca); transform-origin: top; transform: scaleY(var(--p, 0));
}
.secao-escura .passos.trilho::before { background: var(--linha-escura); }
.secao-escura .passos.trilho::after { background: var(--marca-clara); }
.passos.trilho .passo::before { z-index: 1; transition: background .35s var(--ease-expo), color .35s var(--ease-expo), transform .35s var(--ease-expo); }
.passos.trilho .passo.passou::before { background: var(--marca); color: #fff; }
.secao-escura .passos.trilho .passo.passou::before { background: var(--marca-clara); color: var(--fundo-escuro); }

/* Logo (21/10/2026): duas imagens, a de cor na barra clara e a branca quando a
   barra esta sobre a capa escura. Trocar por display evita SVG inline repetido
   em toda pagina. */
.marca { display: block; line-height: 0; }
.marca img { height: 34px; width: auto; }
.marca .marca-branca, .topo.sobre-capa .marca .marca-cor { display: none; }
.topo.sobre-capa .marca .marca-branca { display: block; }
.rodape-marca img { height: 40px; width: auto; }
@media (max-width: 640px) { .marca img { height: 28px; } }

/* Rodape redistribuido (22/10/2026). Em quatro colunas a marca e o resumo
   ficavam espremidos numa coluna de 220px (cinco linhas de texto) e o
   endereco quebrava no meio do numero. Agora a marca ocupa uma faixa propria
   no alto, com o resumo ao lado em largura de leitura, e as tres colunas de
   informacao ficam embaixo com mais ar entre elas e entre os itens. */
.rodape { padding-top: 64px; }
.rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 40px; padding-bottom: 56px; }
.rodape-grade > div:first-child {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 48px;
  padding-bottom: 40px; border-bottom: 1px solid var(--linha-escura);
}
.rodape-grade > div:first-child .rodape-marca { margin-bottom: 0; flex: none; }
.rodape-grade > div:first-child .rodape-resumo { max-width: 36rem; text-align: right; line-height: 1.65; text-wrap: balance; }
.rodape h3 { margin-bottom: 18px; }
.rodape ul, .rodape-contato { gap: 14px; }
.rodape-contato span { font-size: .85rem; margin-top: -8px; opacity: .8; }
.rodape-endereco { line-height: 1.75; }
.rodape-legal { padding: 24px 0 28px; font-size: .82rem; }
@media (max-width: 900px) {
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-grade > div:first-child { flex-direction: column; align-items: flex-start; gap: 18px; }
  .rodape-grade > div:first-child .rodape-resumo { text-align: left; }
}
@media (max-width: 560px) { .rodape-grade { grid-template-columns: 1fr; row-gap: 34px; } }

/* Icones (22/10/2026): Phosphor duotone (MIT) no lugar dos desenhados a mao,
   que tinham traco fino e nivel de detalhe diferente entre si. Contorno na cor
   do texto (petroleo), camada de fundo em turquesa, dentro de um ladrilho
   suave. Em faixa escura o ladrilho vira turquesa translucido. */
.produto-icone { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--marca-lavada); }
.produto-icone svg { width: 28px; height: 28px; }
.produto-icone .icone-duo { fill: var(--acento); opacity: .45; }
.secao-escura .produto-icone { background: rgba(79,209,206,.12); }
.secao-escura .produto-icone .icone-duo { opacity: .35; }

/* Mapa do rodape (22/10/2026), logo abaixo do endereco. */
.rodape-mapa { position: relative; display: block; margin-top: 0; height: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--linha-escura); background: var(--fundo-escuro-2); }
.rodape-mapa iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: saturate(.85); transition: filter .2s ease; }
.rodape-mapa:hover iframe { filter: saturate(1) brightness(1.04); }
.rodape-mapa-cta { position: absolute; right: 10px; top: 10px; background: var(--acento); color: #062E38; font-weight: 600; font-size: .82rem; line-height: 1; padding: 8px 14px; border-radius: 999px; }
.rodape-mapa:hover .rodape-mapa-cta, .rodape-mapa:focus-visible .rodape-mapa-cta { background: var(--acento-claro); }
.rodape .rodape-mapa:hover { color: inherit; }
.rodape-mapa + .rodape-endereco { margin-top: 12px; font-size: .84rem; line-height: 1.5; opacity: .85; }

/* ============================================================
   29/10/2026: movimentos, calculadora e layout de computador
   ============================================================ */

/* FAQ que abre deslizando. So CSS: navegador sem ::details-content abre seco,
   como antes, e quem pede menos movimento tambem. */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .faq details, .faq-home details { interpolate-size: allow-keywords; }
    .faq details::details-content, .faq-home details::details-content {
      block-size: 0; overflow: hidden; opacity: 0;
      transition: block-size .45s var(--ease-expo), opacity .3s ease, content-visibility .45s allow-discrete;
    }
    .faq details[open]::details-content, .faq-home details[open]::details-content { block-size: auto; opacity: 1; }
    .faq summary::after, .faq-home summary::after { transition: transform .35s var(--ease-expo); }
    .faq details[open] summary::after, .faq-home details[open] summary::after { transform: rotate(180deg); }
  }
}

/* Cartao que acompanha os passos (leitura da apolice no condominio, contrato
   no corretor). E ilustracao (o texto dos passos ja diz tudo), entao e
   aria-hidden. Sem JS ou com movimento reduzido fica no estado final, tudo a
   mostra; o _movimento.js poe data-etapa no .leitura conforme a leitura desce. */
.apolice { display: none; --meia: 215px; }
.contrato { --meia: 205px; }
@media (min-width: 940px) {
  .leitura { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
  /* Cada passo alto o bastante para o cartao ter caminho: ele desce ao lado
     da lista e fica junto do passo que esta sendo lido. */
  .leitura .passo { min-height: 240px; }
  /* O cartao gruda com o meio na mesma linha em que o passo acende (62% da
     tela, a "agulha" do _movimento.js), entao o passo ativo fica sempre ao
     lado dele. --meia e metade da altura de cada cartao; o max segura abaixo
     do topo em tela baixa. */
  .apolice { display: block; position: sticky; top: max(96px, calc(62vh - var(--meia))); margin: 36px 0 0; }
}
/* 31px no topo: a linha do PDF fica na altura do passo 1, que e o passo do
   PDF, e o cartao continua comecando no primeiro fio dos passos. */
.apolice-cartao { background: var(--ground); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 31px 18px 16px; }
.apolice-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.apolice-arquivo { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
.apolice-arquivo::before { content: "PDF"; font-size: .6rem; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--alerta); border-radius: 4px; padding: 3px 5px; }
.apolice-selo { font-size: .72rem; font-weight: 700; color: var(--marca); background: var(--marca-lavada); border-radius: 999px; padding: 4px 10px; }
.apolice-tabela { width: 100%; border-collapse: collapse; font-size: .8rem; }
.apolice-tabela th { text-align: left; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); padding: 0 6px 6px; }
.apolice-tabela td { padding: 9px 6px; border-top: 1px solid var(--linha); color: var(--tinta); }
/* Primeira coluna sem recuo: o texto comeca na mesma linha do selo PDF. */
.apolice-tabela th:first-child, .apolice-tabela td:first-child { padding-left: 0; }
.apolice-tabela .col-cot { text-align: center; width: 40px; }
.apolice-tabela td.col-cot { color: var(--ok); font-weight: 700; }
.apolice-tabela .cot-rotulo th { text-align: center; padding-bottom: 2px; }
.hoje { position: relative; white-space: nowrap; }
.st { display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 3px 8px; }
.st-ok { color: var(--ok); background: #E3F2E9; }
.st-falta { color: var(--alerta); background: #FBE7E3; }
.st-curta { color: #8A5A00; background: #FFF1D6; }
.st-pendente { color: var(--tinta-3); background: var(--ground-2); }
.apolice-rodape { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: .78rem; color: var(--tinta-2); white-space: nowrap; }
.prazo { flex: 1; height: 4px; border-radius: 2px; background: var(--linha); position: relative; overflow: hidden; }
.prazo i { position: absolute; inset: 0; background: var(--acento); transform-origin: left; transform: scaleX(.8); }
.apolice figcaption { font-size: .72rem; color: var(--tinta-3); margin-top: 8px; text-align: right; }
.hoje::after { content: ""; position: absolute; left: 6px; top: 50%; width: 52px; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--linha); opacity: 0; transition: opacity .3s; pointer-events: none; }

/* Contrato (corretor) */
.contrato-dados { margin: 0 0 14px; font-size: .8rem; }
.contrato-dados > div { display: grid; grid-template-columns: 84px 1fr; align-items: center; min-height: 40px; border-top: 1px solid var(--linha); }
.contrato-dados dt { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.contrato-dados dd { color: var(--tinta); }
.contrato-dados small { font-size: .72rem; color: var(--tinta-3); margin-left: 6px; }
/* Os dois selos da garantia ocupam o mesmo lugar: "A definir" sai, "Apolice
   emitida" entra. */
.contrato-garantia { display: grid; }
.contrato-garantia > * { grid-area: 1 / 1; justify-self: start; }
.contrato-cotacao th:last-child, .contrato-cotacao td:last-child { text-align: right; padding-right: 0; }
.contrato-cotacao td:last-child { color: var(--ok); font-weight: 700; }
.contrato .apolice-rodape { justify-content: space-between; }

/* Estados. desde-N aparece na etapa N; ate-2 some na 3. Sem data-etapa (sem
   JS) vale o estado final: tudo de desde-N a mostra, ate-2 escondido. */
.leitura[data-etapa] :is(.desde-2, .desde-3, .desde-4, .ate-2) { transition: opacity .45s var(--ease-expo), transform .45s var(--ease-expo); }
.leitura[data-etapa="1"] .desde-2,
.leitura:is([data-etapa="1"], [data-etapa="2"]) .desde-3,
.leitura:is([data-etapa="1"], [data-etapa="2"], [data-etapa="3"]) .desde-4 { opacity: 0; transform: translateY(4px); }
.ate-2 { opacity: 0; }
.leitura:is([data-etapa="1"], [data-etapa="2"]) .ate-2 { opacity: 1; }
/* Apolice: barra cinza de "ainda nao lida" na etapa 1, e o prazo que corre na 4 */
.leitura[data-etapa="1"] .hoje::after { opacity: 1; }
.leitura[data-etapa] .prazo i { transition: transform 1.1s var(--ease-expo) .25s; }
.leitura:is([data-etapa="1"], [data-etapa="2"], [data-etapa="3"]) .prazo i { transform: scaleX(0); }
/* Uma linha depois da outra, de cima para baixo: e a leitura item por item. */
.apolice-tabela tbody tr:nth-child(2) :is(.desde-2, .desde-3), .apolice-tabela tbody tr.desde-2:nth-child(2) { transition-delay: .08s; }
.apolice-tabela tbody tr:nth-child(3) :is(.desde-2, .desde-3), .apolice-tabela tbody tr.desde-2:nth-child(3) { transition-delay: .16s; }
.apolice-tabela tbody tr:nth-child(4) :is(.desde-2, .desde-3), .apolice-tabela tbody tr.desde-2:nth-child(4) { transition-delay: .24s; }
.apolice-tabela tbody tr:nth-child(5) :is(.desde-2, .desde-3), .apolice-tabela tbody tr.desde-2:nth-child(5) { transition-delay: .32s; }

/* Calculadora do seguro fianca (corretor). Os p levam .calc na frente para
   vencer o ".bloco p" da pagina. */
.calc { margin: 28px 0 36px; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--ground); padding: 22px 22px 18px; }
.calc .calc-titulo { font-size: 1.12rem; margin: 0 0 16px; }
.calc-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
@media (max-width: 640px) { .calc-corpo { grid-template-columns: 1fr; } }
.calc-entrada label { display: block; font-size: .8rem; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }
.calc-campo { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 10px 12px; background: #fff; }
.calc-campo:focus-within { border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 1px; }
.calc-campo span { color: var(--tinta-3); font-weight: 600; }
.calc-campo input { border: 0; outline: 0; font: inherit; font-size: 1.25rem; font-weight: 700; color: var(--tinta); width: 100%; min-width: 0; background: transparent; }
.calc-entrada input[type="range"] { width: 100%; margin-top: 14px; accent-color: var(--marca); }
.calc .calc-nota { font-size: .78rem; color: var(--tinta-3); margin: 8px 0 0; }
.calc-saida { display: grid; gap: 10px; }
.calc-linha { border-radius: var(--raio); padding: 12px 14px; background: var(--ground-2); display: grid; gap: 2px; }
.calc-linha > span { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.calc-linha b { font-size: 1.05rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.calc-linha small { font-size: .78rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.calc-destaque { background: var(--marca-lavada); }
.calc-destaque b { color: var(--marca-escura); font-size: 1.2rem; }
.calc .calc-rodape { font-size: .8rem; color: var(--tinta-3); margin: 14px 0 0; }
.calc .calc-rodape a { color: var(--marca); font-weight: 600; }

/* ============================================================
   COMPUTADOR (29/10): distribuir o espaco. As paginas eram uma coluna de
   44rem com metade da tela vazia. Regra unica: titulo a esquerda, conteudo a
   direita. No celular nada muda: o que mexe em layout mora em min-width
   940px, e os wrappers novos no HTML sao blocos simples na ordem de antes.
   ============================================================ */
/* O wrapper separou .grupo-abre do .produtos; segura a mesma distancia. */
.resolve-titulo + .produtos { margin-top: 14px; }
/* FAQ da home: o centrado era style inline e passou para ca (celular igual). */
.faq-lado .titulo-secao, .faq-lado .abre-secao { text-align: center; }
.faq-lado .abre-secao { margin-left: auto; margin-right: auto; }

@media (min-width: 940px) {
  /* Corretor, "O que a Chancela resolve" */
  .bloco.resolve { max-width: 1060px; }
  .resolve-linha { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); column-gap: 56px; align-items: start; margin-top: 48px; }
  .resolve > h2 + .resolve-linha { margin-top: 28px; }
  .resolve-titulo .grupo-titulo { margin-top: 0; }
  .resolve-titulo h2 { font-size: 1.15rem; margin: 0 0 4px; }
  .resolve-titulo p { color: var(--tinta-3); font-size: .97rem; }
  .resolve-linha > .produtos { margin: 0; grid-template-columns: 1fr 1fr; }
  /* Dois cartoes lado a lado: o icone sobe, o texto fica com a largura toda. */
  .resolve-linha .produto { flex-direction: column; gap: 14px; }
  .comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .comparacao p { margin: 0; padding-top: 14px; border-top: 1px solid var(--linha-forte); }
  .resolve .calc { margin: 48px 0 0; }

  /* Corretor, "Por que trazer para a Chancela" */
  .bloco.trazer { max-width: 1060px; }
  .trazer-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; margin-top: 28px; }
  .trazer-grade .destaque { margin: 0; }
  .trazer-grade .lista { margin: 0; gap: 16px; }
  .trazer .selos-bloco { margin-top: 48px; }

  /* Condominio, "O que a Chancela resolve": texto e lei a esquerda, os tres
     produtos a direita. A 4a linha (1fr) absorve a altura da coluna dos
     produtos, para o texto nao espalhar. */
  .bloco.resolve-cond { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 56px; align-items: start; }
  .resolve-cond > h2 { grid-column: 1; grid-row: 1; }
  .resolve-cond > p { grid-column: 1; grid-row: 2; }
  .resolve-cond > .aviso-lei { grid-column: 1; grid-row: 3; margin: 6px 0 0; }
  .resolve-cond > .produtos { grid-column: 2; grid-row: 1 / span 4; margin: 0; }

  /* FAQ do condominio e do corretor: titulo a esquerda, perguntas a direita */
  .faq { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; align-items: start; }
  .faq > h2 { grid-column: 1; grid-row: 1 / span 12; }
  .faq > details { grid-column: 2; }

  /* FAQ da home */
  .faq-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto auto auto 1fr; column-gap: 56px; align-items: start; }
  .faq-lado > .titulo-secao, .faq-lado > .abre-secao, .faq-lado > .faq-rodape { grid-column: 1; text-align: left; }
  .faq-lado > .titulo-secao { grid-row: 1; }
  .faq-lado > .abre-secao { grid-row: 2; margin: 0; }
  .faq-lado > .faq-rodape { grid-row: 3; margin-top: 20px; }
  .faq-lado > .faq-home { grid-column: 2; grid-row: 1 / span 4; max-width: none; margin: 0; }

  /* Home, seguradoras: texto a esquerda, os 7 logos a direita (4 + 3) */
  .seguradoras-lado { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: center; }
  .seguradoras-lado > .titulo-secao { grid-column: 1; grid-row: 1; align-self: end; }
  .seguradoras-lado > .abre-secao { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 0; }
  .seguradoras-lado > .seguradoras { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 0; justify-content: flex-start; }
  .seguradoras-lado .seguradora { flex-basis: 142px; height: 104px; padding: 18px 20px; }
}