/* =============================================================================
   M Rocha Corretora de Seguros, LP
   Gramática medida no c6bank.com.br em 18/09/2026, registrada em
   docs/DESIGN_SYSTEM.md §6. Arquivo escrito de uma vez, na ordem em que a
   página acontece. Regra de manutenção: ajuste mora no bloco da peça, nunca
   numa regra nova empilhada no fim do arquivo.

   1. Fonte          8. Botão flutuante   15. Passos
   2. Tokens         9. Herói             16. Avaliações
   3. Base          10. Abas              17. Perguntas
   4. Layout        11. Vitrine e cartão  18. Chamada final
   5. Realces       12. Listas e notas    19. Rodapé
   6. Botões        13. Bloco com foto    20. Entrada ao rolar
   7. Topo          14. Prova             21. Telas menores
                                          22. Movimento reduzido
   ========================================================================== */

/* 1. Fonte ================================================================= */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens ================================================================ */
:root {
  /* cor */
  --marinho: #0f1526;
  --marinho-2: #171e33;
  --bege: #bb9a70;
  --bege-claro: #d9be95;
  --bege-texto: #86663f;
  --neutro: #f1f1f1;
  --claro: #fafafa;
  --branco: #ffffff;
  --texto: #0f1526;
  --texto-suave: #4a5063;

  /* Superfície da seção e do cartão dentro dela. Regra única: o cartão é um
     passo a partir do fundo da seção, como na referência (cartão 242 sobre
     seção 251). */
  --fundo: var(--claro);
  --superficie: var(--neutro);
  --cor-texto: var(--texto);
  --cor-texto-suave: var(--texto-suave);
  --cor-realce: var(--bege-texto);
  --cor-linha: rgba(15, 21, 38, 0.12);
  --cor-aba: rgba(15, 21, 38, 0.45);
  --toque: rgba(15, 21, 38, 0.04);

  /* medida */
  --container: 1224px;
  --conteudo: 1144px;
  --respiro: 96px;
  --recuo-heroi: 40px;
  --raio-card: 8px;
  --raio-botao: 16px;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);

  /* Vidro fosco: uma receita só, usada pela barra e pelo painel que sai dela.
     O que muda é o tema, não a densidade. */
  --vidro: rgba(250, 250, 250, 0.72);
  --vidro-escuro: rgba(15, 21, 38, 0.72);
  --desfoque: blur(18px) saturate(140%);

  /* tipo: todo título grande é peso 300 */
  --t-heroi: clamp(2.75rem, 6.6vw, 6.25rem);
  --t-secao: clamp(2rem, 4vw, 4rem);
  --t-bloco: clamp(1.875rem, 3.2vw, 3.4375rem);
  --t-cartao: clamp(1.5rem, 2.2vw, 2rem);
  --t-numero: clamp(4.5rem, 11vw, 10rem);
  --t-passo: clamp(2.5rem, 4vw, 3.5rem);
  --t-lead: 1.125rem;
}

/* 3. Base ================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
/* Menu do celular aberto: a página atrás não rola junto. O recuo que devolve a
   largura da barra de rolagem é escrito pelo script, porque só ele sabe quanto
   ela mede; sem isso a área útil cresce ao travar e a página dá um salto, que é
   a piscada que se vê no clique (18/09/2026). `scrollbar-gutter` não resolve
   este caso: ele não vale para `overflow: hidden`. */
html.menu-aberto {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--claro);
  color: var(--texto);
  font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}

/* Título grande é sempre leve e com letra fechada: a Satoshi é mais aberta
   que a fonte da referência e sem isso o título fica frouxo. */
h1,
h2,
h3 {
  font-weight: 300;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

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

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--marinho);
  color: var(--branco);
  padding: 12px 20px;
  border-radius: var(--raio-card);
}
.pular:focus {
  left: 16px;
  top: 16px;
}

/* 4. Layout ================================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

.secao {
  padding: var(--respiro) 0;
  background: var(--fundo);
  color: var(--cor-texto);
}

/* Três fundos, e cada um já diz qual é a cor do cartão que vive nele. */
.secao--neutra {
  --fundo: var(--neutro);
  --superficie: var(--branco);
}
.secao--escura {
  --fundo: var(--marinho);
  --superficie: var(--marinho-2);
  --cor-texto: var(--branco);
  --cor-texto-suave: rgba(255, 255, 255, 0.8);
  --cor-realce: var(--bege-claro);
  --cor-linha: rgba(255, 255, 255, 0.18);
  --cor-aba: rgba(255, 255, 255, 0.45);
  --toque: rgba(255, 255, 255, 0.08);
}

/* Cabeça de seção: só título, ou título com um texto abaixo. Sem rótulo
   pequeno em caixa alta, que não existe em nenhuma das referências.
   Centrada quando abaixo vem grade ou fila; à esquerda quando abaixo vem
   composição assimétrica. */
.cabeca {
  max-width: var(--conteudo);
  margin: 0 auto 48px;
}
.cabeca--centro {
  text-align: center;
}
.cabeca--centro .cabeca__texto {
  margin-left: auto;
  margin-right: auto;
}

.cabeca__titulo {
  font-size: var(--t-secao);
  line-height: 1.1;
}

.cabeca__texto {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--cor-texto-suave);
  max-width: 68ch;
  margin-top: 16px;
  text-wrap: pretty;
}

/* 5. Realces =============================================================== */
/* O destaque pega parte da frase, nunca a frase inteira.
   O recuo vertical existe por um motivo técnico: com `background-clip: text` o
   degradê só é pintado dentro da caixa do span, e com entrelinha curta o acento
   do "ê" fica fora dela e some. Em elemento em linha esse recuo pinta sem mexer
   no layout. */
.destaque {
  background: linear-gradient(90deg, var(--bege) 0%, var(--bege-texto) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* O recuo de cima e de baixo salva o acento; o dos lados salva a última
     letra, que o espaço entre letras negativo empurra para fora da caixa. A
     margem negativa devolve o espaço, para o layout não mudar. */
  padding: 0.18em 0.06em;
  margin: 0 -0.06em;
}
.secao--escura .destaque,
.heroi .destaque {
  background: linear-gradient(90deg, var(--bege-claro) 0%, var(--bege) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Segunda linha do título esmaece, como nos blocos com foto da referência. */
.esmaecido {
  color: rgba(15, 21, 38, 0.38);
}
.secao--escura .esmaecido,
.heroi .esmaecido {
  color: rgba(255, 255, 255, 0.45);
}

/* 6. Botões e link com seta ================================================ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--raio-botao);
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s var(--curva),
    border-color 0.25s var(--curva),
    color 0.25s var(--curva);
}
.botao svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.botao--principal {
  background: var(--marinho);
  color: var(--branco);
}
.botao--principal:hover {
  background: var(--marinho-2);
}

.botao--secundario {
  background: transparent;
  color: var(--texto);
  border: 0.8px solid rgba(15, 21, 38, 0.4);
}
.botao--secundario:hover {
  background: rgba(15, 21, 38, 0.04);
  border-color: var(--marinho);
}

/* Em fundo escuro os dois invertem. */
.secao--escura .botao--principal,
.heroi .botao--principal,
.topo--escuro .botao--principal {
  background: var(--branco);
  color: var(--marinho);
}
.secao--escura .botao--principal:hover,
.heroi .botao--principal:hover,
.topo--escuro .botao--principal:hover {
  background: rgba(255, 255, 255, 0.86);
}
.secao--escura .botao--secundario,
.heroi .botao--secundario {
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.5);
}
.secao--escura .botao--secundario:hover,
.heroi .botao--secundario:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--branco);
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.botoes--centro {
  justify-content: center;
}
/* No herói os dois botões têm a mesma largura e viram um bloco só. Medido na
   referência em 18/09/2026: 342 px cada, iguais, lado a lado. A grade em coluna
   com `1fr` dá a largura do maior texto aos dois, sem número fixo. */
.heroi .botoes--centro {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* Assinatura da referência: a seta anda 12 px no hover. */
.seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cor-realce);
  text-decoration: none;
}
.seta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--curva);
}
.seta:hover svg {
  transform: translateX(12px);
}

/* Botão de carrossel. Borda fina, que é controle, não moldura de cartão. */
.seta-botao {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  color: inherit;
  border: 0.8px solid var(--cor-linha);
  border-radius: var(--raio-card);
  cursor: pointer;
  transition:
    background-color 0.25s var(--curva),
    border-color 0.25s var(--curva);
}
.seta-botao svg {
  width: 20px;
  height: 20px;
}
.seta-botao:hover {
  background: var(--toque);
  border-color: var(--cor-texto);
}
.seta-botao[disabled] {
  opacity: 0.3;
  cursor: default;
}
.seta-botao[disabled]:hover {
  background: transparent;
  border-color: var(--cor-linha);
}

.setas {
  display: flex;
  gap: 8px;
}

/* 7. Topo ================================================================== */
/* Vidro: fundo translúcido com desfoque, e o tema acompanha a seção que
   estiver debaixo da barra. */
/* 🔴 O vidro da barra mora numa camada atrás dela, e não nela.
   Elemento com `backdrop-filter` vira raiz de fundo e **anula o desfoque de
   todos os filhos**: era isso que deixava o painel de seguros transparente,
   sem desfoque nenhum. Com o vidro no `::before`, a barra deixa de ser raiz e
   o painel consegue desfocar a página. */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  color: var(--texto);
}
.topo--escuro {
  color: var(--branco);
}
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vidro);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  box-shadow: 0 0.8px 0 rgba(15, 21, 38, 0.08);
  transition:
    background-color 0.25s var(--curva),
    box-shadow 0.25s var(--curva);
}
.topo--escuro::before {
  background: var(--vidro-escuro);
  box-shadow: 0 0.8px 0 rgba(255, 255, 255, 0.12);
}

/* No alto da página nada passa por baixo da barra: aí ela é sólida e sem
   linha, para virar uma coisa só com o herói. O vidro entra na primeira
   rolagem. */
.topo--solido::before {
  background: var(--claro);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.topo--solido.topo--escuro::before {
  background: var(--marinho);
}

.topo__barra {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 80px;
}

.topo__logo img {
  height: 34px;
  width: auto;
}
.topo__logo .logo--claro,
.topo--escuro .topo__logo .logo--escuro {
  display: none;
}
.topo--escuro .topo__logo .logo--claro {
  display: block;
}

.topo__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.topo__menu > li > a,
.topo__item > button {
  text-decoration: none;
  color: var(--texto-suave);
  transition: color 0.25s var(--curva);
}
.topo__menu > li > a:hover,
.topo__item > button:hover {
  color: var(--texto);
}
.topo--escuro .topo__menu > li > a,
.topo--escuro .topo__item > button {
  color: rgba(255, 255, 255, 0.75);
}
.topo--escuro .topo__menu > li > a:hover,
.topo--escuro .topo__item > button:hover {
  color: var(--branco);
}

/* No topo o botão é mais baixo e menos redondo que no conteúdo. */
.topo .botao {
  height: 48px;
  padding: 12px 20px;
  border-radius: var(--raio-card);
}

/* Lista de seguros que abre no menu, no formato da referência: painel de
   vidro, duas colunas com rótulo, e a lista inteira à vista. */
.topo__item {
  position: relative;
}
.topo__item > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.topo__item > button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--curva);
}
.topo__item[data-aberto="true"] > button svg {
  transform: rotate(180deg);
}

/* O painel é o mesmo material da barra: mesma receita de vidro, mesmo tema.
   A leitura é resolvida na cor do texto, nunca fechando o vidro. */
.lista-seguros {
  position: absolute;
  top: calc(100% + 20px);
  left: -24px;
  width: 620px;
  max-width: calc(100vw - 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 32px;
  row-gap: 2px;
  padding: 24px;
  background: var(--vidro);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
  border: 0.8px solid rgba(15, 21, 38, 0.08);
  border-radius: var(--raio-botao);
  box-shadow: 0 24px 60px rgba(15, 21, 38, 0.18);
  color: var(--texto);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.25s var(--curva),
    transform 0.25s var(--curva),
    visibility 0.25s;
}
.topo__item[data-aberto="true"] .lista-seguros {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Sobre seção escura o painel acompanha a barra, como qualquer vidro faria. */
.topo--escuro .lista-seguros {
  background: var(--vidro-escuro);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: var(--branco);
}
.topo--escuro .lista-seguros__grupo {
  color: rgba(255, 255, 255, 0.6);
}
.topo--escuro .lista-seguros a:hover {
  background: rgba(255, 255, 255, 0.1);
}
.topo--escuro .lista-seguros a svg {
  color: var(--bege-claro);
}

/* Cada lado é uma coluna própria: as listas têm tamanhos diferentes e uma não
   pode empurrar a linha da outra. */
.lista-seguros__coluna {
  display: grid;
  align-content: start;
  row-gap: 2px;
}

.lista-seguros__grupo {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding: 0 12px 12px;
}

.lista-seguros a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  border-radius: var(--raio-card);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s var(--curva);
}
.lista-seguros a:hover {
  background: rgba(15, 21, 38, 0.05);
}
.lista-seguros a svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--bege-texto);
  opacity: 0;
  transition:
    opacity 0.25s var(--curva),
    transform 0.3s var(--curva);
}
.lista-seguros a:hover svg {
  opacity: 1;
  transform: translateX(6px);
}

/* Instagram no topo, do lado do botão. */
.topo__social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: inherit;
  transition: background-color 0.25s var(--curva);
}
.topo__social:hover {
  background: var(--toque);
}
.topo__social svg {
  width: 20px;
  height: 20px;
}

.topo__abrir {
  display: none;
  height: 48px;
  width: 48px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: transparent;
  color: inherit;
  border: 0.8px solid rgba(15, 21, 38, 0.15);
  border-radius: var(--raio-card);
  cursor: pointer;
}
.topo__abrir svg {
  width: 22px;
  height: 22px;
}
.topo--escuro .topo__abrir {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--branco);
}

/* 8. Botão flutuante do WhatsApp =========================================== */
/* Verde oficial do WhatsApp e logo oficial. Fica no canto inferior direito,
   acima de tudo, e só aparece depois que a pessoa passa do herói, para não
   cobrir o botão principal logo na chegada. */
.flutuante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(15, 21, 38, 0.22);
  transition:
    transform 0.3s var(--curva),
    opacity 0.25s var(--curva),
    box-shadow 0.25s var(--curva);
}
.flutuante svg {
  width: 32px;
  height: 32px;
}
.flutuante:hover {
  box-shadow: 0 10px 28px rgba(15, 21, 38, 0.3);
}
.js .flutuante {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
}
.js .flutuante.visivel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* 9. Herói ================================================================= */
.heroi {
  background: var(--marinho);
  color: var(--branco);
  /* Meio respiro: o cabeçalho já ocupa a faixa de cima, e na referência o título
     começa logo abaixo dele. Respiro inteiro aqui joga a faixa de foto para
     baixo e faz a foto dominar a tela (18/09/2026). */
  padding-top: calc(var(--respiro) / 2);
}
/* Sem a faixa de foto não existe divisão: o respiro embaixo é que separa o
   herói da próxima seção. */
.heroi--sem-faixa {
  padding-bottom: var(--respiro);
}

.heroi__texto {
  max-width: var(--conteudo);
  margin: 0 auto;
  text-align: center;
}

.heroi__titulo {
  font-size: var(--t-heroi);
  line-height: 1.05;
}

.heroi__lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  max-width: 64ch;
  margin: 24px auto 0;
  text-wrap: pretty;
}

/* Selo do parceiro: o texto fica acima e menor, e o logo embaixo, sozinho.
   Logo e texto na mesma linha nunca alinham pela base. */
/* A faixa de foto é a divisão entre o herói e o que vem depois: fica colada no
   fim da seção, sem raio, com recuo mínimo nos lados. Medido na referência: foto
   de 1440 px, 607 px de altura, 64 px de distância dos botões e sobra zero até o
   fim da seção.
   🔴 A faixa PARA em 1440 px e se centra. Conferido em 18/09/2026 numa janela de
   1903: a referência manteve os mesmos 1440 px, com 231 px sobrando de cada lado.
   Os 40 px de recuo são o mínimo das telas estreitas, não a regra das largas:
   deixar a faixa crescer com a janela faz a foto virar um paredão. */
.heroi__faixa {
  width: min(100% - 2 * var(--recuo-heroi), 1440px);
  margin: 64px auto 0;
  overflow: hidden;
  aspect-ratio: 1440 / 607;
}
.heroi__faixa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* 10. Abas ================================================================= */
/* Medidas da referência: 18 px peso 400, ativa com borda de 0,8 px embaixo,
   inativa com o texto a 45%. */
.abas {
  display: flex;
  /* `safe center` centra quando cabe e vira início quando não cabe, em vez de
     cortar a primeira aba, que é o que `center` faz em fila que rola. */
  justify-content: safe center;
  gap: 8px;
  max-width: var(--conteudo);
  margin: 0 auto 40px;
  /* A régua é sombra interna, não borda: assim a borda da aba ativa cai
     exatamente sobre ela, sem margem negativa para compensar, que a fila com
     rolagem cortava no celular (18/09/2026). */
  box-shadow: inset 0 -0.8px 0 var(--cor-linha);
}
.aba {
  padding: 12px 16px;
  background: none;
  border: 0;
  border-bottom: 0.8px solid transparent;
  font: inherit;
  font-size: var(--t-lead);
  color: var(--cor-aba);
  cursor: pointer;
  transition:
    color 0.25s var(--curva),
    border-color 0.25s var(--curva);
}
.aba:hover,
.aba[aria-selected="true"] {
  color: var(--cor-texto);
}
.aba[aria-selected="true"] {
  border-bottom-color: var(--cor-texto);
}

/* 11. Vitrine e cartão de produto ========================================== */
/* A fila sai da margem: o primeiro cartão alinha com o texto e a fila segue
   até a borda da tela. 100% e não 100vw, que inclui a barra de rolagem. */
.vitrine {
  --margem: max(20px, calc((100% - var(--conteudo)) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 360px;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--margem);
  scrollbar-width: none;
  padding: 0 var(--margem) 8px;
}
.vitrine::-webkit-scrollbar {
  display: none;
}
.vitrine[hidden] {
  display: none;
}

/* Pé do carrossel, igual na vitrine e nas avaliações: setas embaixo, alinhadas
   com o primeiro cartão, e o que houver de link na outra ponta. */
.carrossel__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--conteudo);
  margin: 32px auto 0;
}

/* Cartão com superfície própria, foto no topo e o link com seta no pé. */
.produto {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--superficie);
  border-radius: var(--raio-card);
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.25s var(--curva);
}
.produto__foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.produto__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--curva);
}
.produto:hover .produto__foto img {
  transform: scale(1.04);
}
.produto__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.produto__titulo {
  font-size: var(--t-cartao);
  font-weight: 400;
  line-height: 1.2;
}
.produto__texto {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--cor-texto-suave);
  margin-top: 8px;
}
.produto .seta {
  margin-top: auto;
  padding-top: 24px;
}
.produto:hover .seta svg {
  transform: translateX(12px);
}

.vitrine__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  max-width: var(--conteudo);
  margin: 48px auto 0;
  font-size: var(--t-lead);
  color: var(--cor-texto-suave);
}

/* 12. Listas e notas ====================================================== */
/* Peças que nascem com as páginas de produto e valem para todas elas. */

/* Nota legal, sempre menor e mais apagada que o texto que ela acompanha.
   Sem margem lateral automática: dentro de uma coluna flexível, margem `auto`
   nos lados centraliza o elemento e desalinha a nota do texto. */
.nota {
  max-width: var(--conteudo);
  margin-top: 32px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cor-texto-suave);
}

/* Cartão de cobertura: título curto e uma linha de explicação. Sem foto, sem
   moldura, com a superfície da seção, três por linha. */
.coberturas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--conteudo);
  margin: 0 auto;
}
/* O modificador vem depois da base: com a mesma especificidade, quem ganha é a
   última regra do arquivo, e não a que parece mais específica pelo nome. */
.coberturas--quatro {
  grid-template-columns: repeat(4, 1fr);
}
/* `display: grid` vence o atributo `hidden`, então a grade escondida pela aba
   precisa dizer isso de novo. */
.coberturas[hidden] {
  display: none;
}
/* Anatomia medida na referência: ícone de 40 px no topo, título, uma linha de
   texto, recuo de 32 px e nenhuma sombra. Cada cartão tem o seu próprio ícone,
   porque repetir o mesmo símbolo em todos é o que deixa a grade pobre. */
.cobertura {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: var(--raio-card);
  padding: 32px;
  transition: background-color 0.25s var(--curva);
}
.cobertura__icone {
  width: 40px;
  height: 40px;
  color: var(--cor-realce);
  margin-bottom: 24px;
}
.cobertura__titulo {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.cobertura__texto {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cor-texto-suave);
  margin-top: 12px;
}

/* Linha de alcance local, discreta, no meio da página. */
.local {
  max-width: var(--conteudo);
  margin: 48px auto 0;
  font-size: var(--t-lead);
  color: var(--cor-texto-suave);
  text-align: center;
}

/* 13. Bloco com foto ======================================================= */
/* 🔴 A foto nunca pode ser mais baixa que o texto ao lado: texto sobrando em
   cima e embaixo da moldura desorganiza o bloco. Por isso a foto não tem altura
   própria, ela acompanha a altura da coluna de texto, com um mínimo para não
   achatar quando o texto for curto. O texto fica centrado na vertical. */
.bloco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  max-width: var(--conteudo);
  margin: 0 auto;
}
.bloco__conteudo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bloco__foto {
  min-height: 380px;
  border-radius: var(--raio-card);
  overflow: hidden;
}
.bloco__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bloco__titulo {
  font-size: var(--t-bloco);
  line-height: 1.1;
}
.bloco__texto {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--cor-texto-suave);
  margin-top: 20px;
}
.bloco--inverso .bloco__foto {
  order: 2;
}

/* 14. Prova com número ===================================================== */
.prova {
  max-width: var(--conteudo);
  margin: 0 auto;
  text-align: center;
}
.prova__rotulo {
  font-size: clamp(1.5rem, 2.8vw, 2.8125rem);
  font-weight: 300;
  line-height: 1.1;
}
.prova__numero {
  display: block;
  font-size: var(--t-numero);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 8px 0;
}
.prova__frase {
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 300;
  line-height: 1.25;
  max-width: 24ch;
  margin: 0 auto;
}
.prova__texto {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--cor-texto-suave);
  max-width: 62ch;
  margin: 24px auto 0;
}

/* 15. Passos =============================================================== */
/* Linha do tempo: uma linha fina atravessa os três marcos e se preenche de
   bege quando a seção entra na tela. */
.passos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--conteudo);
  margin: 0 auto;
}
.passos::before,
.passos::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 36px;
  right: 36px;
  height: 0.8px;
}
.passos::before {
  background: var(--cor-linha);
}
.passos::after {
  background: var(--bege);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--curva);
}
.passos.visivel::after {
  transform: scaleX(1);
}

.passo {
  position: relative;
}
.passo__marco {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--fundo);
  border: 0.8px solid var(--cor-linha);
  border-radius: 50%;
  font-size: var(--t-passo);
  font-weight: 300;
  line-height: 1;
  color: var(--cor-realce);
  transition: border-color 0.25s var(--curva);
}
.passo:hover .passo__marco {
  border-color: var(--bege);
}
.passo__titulo {
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: 28px;
}
.passo__texto {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--cor-texto-suave);
  margin-top: 8px;
}

/* 16. Avaliações =========================================================== */
.avaliacoes {
  max-width: var(--conteudo);
  margin: 0 auto;
}
.avaliacoes__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.avaliacoes__trilho::-webkit-scrollbar {
  display: none;
}

/* Cartão com a mesma superfície do cartão de produto, na ordem do Google:
   foto e nome, data, estrelas, comentário. */
.avaliacao {
  scroll-snap-align: start;
  background: var(--superficie);
  border-radius: var(--raio-card);
  padding: 28px;
}
.avaliacao__autor {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avaliacao__inicial {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(15, 21, 38, 0.06);
  color: var(--bege-texto);
  border-radius: 50%;
}
.avaliacao__foto {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.avaliacao__data {
  display: block;
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}
.avaliacao__estrelas {
  display: flex;
  gap: 3px;
  color: var(--bege);
  margin-top: 20px;
}
.avaliacao__estrelas svg {
  width: 18px;
  height: 18px;
}
.avaliacao__texto {
  line-height: 1.6;
  color: var(--cor-texto-suave);
  margin-top: 12px;
}

/* Aviso temporário, sai quando entrarem as avaliações reais. */
.aviso {
  max-width: var(--conteudo);
  margin: 0 auto 32px;
  padding: 12px 16px;
  background: var(--neutro);
  color: var(--bege-texto);
  border-radius: var(--raio-card);
  font-size: 0.9375rem;
  text-align: center;
}

/* 17. Perguntas ============================================================ */
.perguntas {
  max-width: var(--conteudo);
  margin: 0 auto;
}
.pergunta {
  border-top: 0.8px solid var(--cor-linha);
}
.pergunta:last-child {
  border-bottom: 0.8px solid var(--cor-linha);
}
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: 1.25rem;
  list-style: none;
  cursor: pointer;
  transition: color 0.25s var(--curva);
}
.pergunta summary::-webkit-details-marker {
  display: none;
}
.pergunta summary:hover {
  color: var(--cor-realce);
}
.pergunta summary svg {
  width: 22px;
  height: 22px;
  flex: none;
  transition: transform 0.3s var(--curva);
}
.pergunta[open] summary svg {
  transform: rotate(45deg);
}
.pergunta__resposta {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--cor-texto-suave);
  max-width: 78ch;
  padding-bottom: 24px;
}

/* 18. Chamada final ======================================================== */
.chamada {
  max-width: var(--conteudo);
  margin: 0 auto;
}
.chamada__titulo {
  font-size: var(--t-secao);
  line-height: 1.1;
  max-width: 20ch;
}
.chamada__texto {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--cor-texto-suave);
  max-width: 60ch;
  margin-top: 16px;
}

/* 19. Rodapé =============================================================== */
.rodape {
  background: var(--marinho);
  color: rgba(255, 255, 255, 0.72);
  padding: 72px 0 40px;
  font-size: 0.9375rem;
}
.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--conteudo);
  margin: 0 auto;
}
.rodape__logo {
  height: 32px;
  width: auto;
  margin-bottom: 20px;
}
.rodape h2 {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bege-claro);
  margin-bottom: 16px;
}
.rodape ul {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.rodape a {
  text-decoration: none;
  transition: color 0.25s var(--curva);
}
.rodape a:hover {
  color: var(--branco);
}
.rodape__parceiro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.rodape__parceiro img {
  height: 26px;
  width: auto;
}
.rodape__base {
  display: grid;
  gap: 8px;
  max-width: var(--conteudo);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 0.8px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

/* 20. Entrada ao rolar ===================================================== */
.js .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s var(--curva),
    transform 0.5s var(--curva);
}
.js .revelar.visivel {
  opacity: 1;
  transform: none;
}

/* 21. Telas menores ======================================================== */
@media (max-width: 1000px) {
  :root {
    --respiro: 72px;
    --recuo-heroi: 24px;
  }
  .coberturas,
  .coberturas--quatro {
    grid-template-columns: repeat(2, 1fr);
  }
  .cobertura {
    padding: 24px;
  }
  .rodape__grade {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --respiro: 56px;
    --recuo-heroi: 16px;
  }
  .container {
    padding: 0 20px;
  }

  /* Cabeçalho no celular: barra de 80 px e, ao abrir, um painel que ocupa o
     resto da tela com rolagem própria. Painel absoluto não rolava e cortava a
     lista, que hoje tem 11 produtos (18/09/2026).
     Aberto, o cabeçalho não tem tema: o script tira `topo--escuro` e
     `topo--solido` enquanto o painel está no ar, então aqui não existe disputa
     de regra, e logo, ícone e botão voltam sozinhos ao estado claro. */
  .topo__menu,
  .topo .botao,
  .topo__social {
    display: none;
  }
  .topo__abrir {
    display: flex;
  }
  /* No celular a barra troca de cor no toque, não só na rolagem: 0,25 s de
     transição aí viram piscada. A troca de estado é instantânea. */
  .topo::before {
    transition: none;
  }
  .topo--aberto::before {
    background: var(--claro);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .topo--aberto .topo__menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: 0;
    padding: 8px 20px 104px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--claro);
  }
  .topo--aberto .topo__menu > li > a,
  .topo--aberto .topo__item > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    font-size: 1.125rem;
    border-bottom: 0.8px solid var(--cor-linha);
  }

  /* A lista de seguros vira sanfona: fechada por padrão, abre no mesmo botão
     do desktop. Aberta sempre, 11 produtos empurram o resto do menu para fora
     da tela. */
  .lista-seguros {
    position: static;
    display: none;
    width: auto;
    padding: 0 0 8px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .topo__item[data-aberto="true"] .lista-seguros {
    display: block;
  }
  .lista-seguros__coluna {
    row-gap: 0;
  }
  .lista-seguros__grupo {
    padding: 16px 0 4px;
  }
  .lista-seguros a {
    padding: 12px 0;
  }
  .lista-seguros a svg {
    opacity: 1;
  }

  /* O botão de WhatsApp fica fixo no pé do painel, sempre à mão. */
  .topo--aberto .topo__barra > .botao {
    display: inline-flex;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 24px;
    height: 56px;
  }

  .heroi {
    padding-top: 72px;
  }
  .heroi__faixa {
    margin-top: 48px;
    aspect-ratio: 4 / 3;
  }

  .abas {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vitrine {
    grid-auto-columns: 78%;
    gap: 16px;
  }
  .carrossel__pe .setas {
    display: none;
  }

  .bloco,
  .coberturas {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bloco--inverso .bloco__foto {
    order: 0;
  }
  .bloco__foto {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  /* No celular a linha do tempo fica em pé, à esquerda dos marcos. */
  .passos {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .passos::before,
  .passos::after {
    top: 36px;
    bottom: 36px;
    left: 36px;
    right: auto;
    width: 0.8px;
    height: auto;
  }
  .passos::after {
    transform: scaleY(0);
    transform-origin: top;
  }
  .passos.visivel::after {
    transform: scaleY(1);
  }
  .passo {
    padding-left: 96px;
    min-height: 72px;
  }
  .passo__marco {
    position: absolute;
    left: 0;
    top: 0;
  }
  .passo__titulo {
    margin-top: 0;
  }

  .avaliacoes__trilho {
    grid-auto-columns: 84%;
  }
  .flutuante {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }
  .flutuante svg {
    width: 30px;
    height: 30px;
  }
  .heroi .botoes--centro {
    display: flex;
  }
  .botoes .botao {
    width: 100%;
  }
  .rodape__grade {
    grid-template-columns: 1fr;
  }
}

/* 22. Movimento reduzido =================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .js .revelar {
    opacity: 1;
    transform: none;
  }
  .passos::after {
    transform: none;
  }
}