/* J.Cordeiro Corretora de Seguros — estilo do site
   Cores e fontes da ficha de marca (etapa 1b). Contrastes conferidos na ficha. */

/* Fontes guardadas junto do site: nenhum dado do visitante vai para terceiros */
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fontes/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fontes/jakarta-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Paleta (ficha 1b) */
:root {
  --ameixa: #5B1F4F;      /* cor principal: logo, títulos, fundos de destaque */
  --coral: #F2674A;       /* botões, sempre com texto Tinta */
  --tinta: #1F1A1D;       /* texto principal */
  --areia: #FBF6F1;       /* fundo principal */
  --cinza: #6B6168;       /* texto secundário */
  --rosa: #F6E3EC;        /* fundo de cartões e destaques */
  --branco: #FFFFFF;

  --largura: 68rem;
  --raio: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ameixa);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

a { color: var(--ameixa); text-underline-offset: 3px; }

/* Contorno visível para quem navega pelo teclado */
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ameixa);
  outline-offset: 3px;
}

.container {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Atalho para pular direto ao conteúdo (leitores de tela e teclado) */
.pular {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--branco);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.pular:focus { left: 0.5rem; }

/* Cabeçalho */
/* Fica preso no alto da tela; ao rolar, vira uma "pílula" flutuante (ver "Movimento", no fim) */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--areia);
  border-bottom: 1px solid var(--rosa);
  view-transition-name: topo; /* não pisca na troca de página */
}
.topo .container {
  max-width: min(var(--largura), 100% - 1rem); /* folga dos lados para a pílula não encostar na borda */
  border-radius: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Logo provisório: nome escrito na fonte da marca, até o logo oficial ficar pronto */
.marca {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--ameixa);
  text-decoration: none;
  line-height: 1.1;
}
.marca small {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--cinza);
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  display: inline-block;
}
.menu a:hover, .menu a[aria-current="page"] {
  color: var(--ameixa);
  text-decoration: underline;
}

/* Botões: sempre Coral com texto Tinta (5.57:1). Nunca texto branco sobre Coral. */
.botao {
  display: inline-block;
  background: var(--coral);
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  min-height: 48px;
}
.botao {
  transition: translate 200ms ease-out, box-shadow 200ms ease-out;
}
.botao:hover {
  text-decoration: underline;
  translate: 0 -2px;
  box-shadow: 0 6px 16px rgba(31, 26, 29, 0.2);
  @media (prefers-reduced-motion: reduce) { translate: none; }
}
.botao:active { translate: 0 0; box-shadow: none; }
.botao:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* Botão de WhatsApp fixo no canto da tela, em todas as páginas */
.whatsapp-fixo {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(31, 26, 29, 0.25);
}

/* Seções */
.secao { padding: 3rem 0; }
.secao-rosa { background: var(--rosa); }

/* Faixa de topo em Ameixa: texto branco ou Areia */
.destaque {
  background: var(--ameixa);
  color: var(--branco);
  padding: 3.5rem 0;
}
.destaque h1, .destaque h2 { color: var(--branco); }
.destaque p { color: var(--areia); font-size: 1.1875rem; max-width: 40rem; }
.destaque a:not(.botao) { color: var(--branco); }

/* Etiqueta acima do título de abertura: diz onde a pessoa está (ou um fato da empresa).
   Só nas aberturas, não em todo título. Rosa sobre Ameixa: 9.2:1 */
.etiqueta {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ameixa);
  margin: 0 0 0.75rem;
}
.destaque .etiqueta { color: var(--rosa); font-size: 0.8125rem; }

.texto-curto { max-width: 44rem; }

/* Página inicial: abertura com a conversa de exemplo ao lado do título */
.abertura .container {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .abertura { padding: 4.5rem 0; }
  .abertura .container { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
  .abertura h1 { font-size: clamp(2.75rem, 4.5vw, 3.75rem); letter-spacing: -0.02em; }
}

/* Conversa de exemplo: cores da marca, não do WhatsApp (marca de terceiro) */
.conversa {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  border-radius: 1.5rem;
  padding: 1.25rem 1rem 1.5rem;
  box-shadow: 0 18px 40px rgba(31, 26, 29, 0.35);
  max-width: 26rem;
  width: 100%;
  justify-self: center;
}
.conversa figcaption {
  font-size: 0.8125rem;
  color: var(--cinza); /* 5.53:1 sobre Areia */
  text-align: center;
  margin-bottom: 1rem;
}
.mensagens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.msg {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  border-radius: 1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.msg.cliente {
  align-self: flex-end;
  background: var(--branco);
  border-bottom-right-radius: 0.25rem;
}
/* "Role a página para ver a conversa": só aparece onde a conversa anda com a rolagem (ver "Movimento") */
.dica-rolar { display: none; }
.msg.corretora {
  align-self: flex-start;
  background: var(--rosa);
  border-bottom-left-radius: 0.25rem;
}

/* Lista de seguros: uma linha por seguro, nome grande à esquerda e descrição ao lado.
   Cada linha tem a altura do próprio texto (nada de cartões iguais com buracos). */
.seguros {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 2px solid var(--ameixa);
}
.seguros a {
  display: grid;
  gap: 0.25rem 2rem;
  padding: 1.25rem 0.75rem;
  border-bottom: 1px solid var(--rosa);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color 200ms ease-out, padding-left 200ms ease-out;
}
.seguros h3 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 200ms ease-out;
}
.seguros p { margin: 0; max-width: 40rem; }
.seguros a:hover, .seguros a:focus-visible { background: var(--rosa); }
.seguros a:hover h3, .seguros a:focus-visible h3 { text-decoration-color: currentColor; }
@media (min-width: 48rem) {
  .seguros a { grid-template-columns: 16rem 1fr; align-items: baseline; }
  .seguros a:hover { padding-left: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .seguros a:hover { padding-left: 0.75rem; }
}

/* "O que a gente faz" e "Como funciona" lado a lado no computador */
.duas-colunas { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .duas-colunas { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* Como funciona: é uma sequência de verdade, então leva números (Ameixa com texto branco, 11.97:1) */
.etapas {
  list-style: none;
  counter-reset: etapa;
  margin: 0;
  padding: 0;
}
.etapas li {
  counter-increment: etapa;
  position: relative;
  padding: 0 0 1.5rem 3.25rem;
  min-height: 2.25rem;
}
.etapas li::before {
  content: counter(etapa);
  position: absolute;
  left: 0;
  top: -0.125rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--ameixa);
  color: var(--branco);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* Linha que liga um passo ao outro */
.etapas li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.125rem - 1px);
  top: 2.25rem;
  bottom: 0.125rem;
  width: 2px;
  background: var(--ameixa);
  opacity: 0.3;
}

/* Por que a J.Cordeiro: faixa Ameixa, motivos sem número (não são uma sequência) */
.secao-ameixa { background: var(--ameixa); color: var(--areia); } /* Areia sobre Ameixa: 11.15:1 */
.secao-ameixa h2, .secao-ameixa h3 { color: var(--branco); }
.motivos {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.motivos li { border-top: 3px solid var(--coral); padding-top: 1rem; } /* traço decorativo, não é texto */
.motivos h3 { font-size: 1.25rem; }
.motivos p { margin: 0; }
@media (min-width: 56rem) {
  .motivos { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* Seguradoras parceiras: nomes em texto até chegarem os arquivos de logo */
.parceiras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.parceiras li {
  background: var(--branco);
  border: 1px solid var(--rosa);
  border-radius: var(--raio);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

/* Chamada final */
.chamada { text-align: center; }
.chamada p { font-size: 1.25rem; max-width: 36rem; margin: 0 auto 1.5rem; }

/* Aviso de que coberturas dependem da seguradora */
.aviso {
  background: var(--rosa);
  border-left: 4px solid var(--ameixa);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--raio) var(--raio) 0;
  max-width: 44rem;
}

/* Âncoras: o cabeçalho fica preso no alto, então quem chega por um link (#vida, #sinistro)
   precisa de uma folga para o título não ficar escondido atrás dele */
[id] { scroll-margin-top: 7.5rem; }
@media (min-width: 48rem) { [id] { scroll-margin-top: 5.5rem; } }

/* Página Seguros: atalhos no topo para pular direto ao seguro */
.atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.atalhos a {
  color: var(--branco); /* 11.97:1 sobre Ameixa */
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--areia);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.atalhos a:hover, .atalhos a:focus-visible {
  background: var(--areia);
  color: var(--ameixa); /* 11.15:1 sobre Areia */
}
.destaque .atalhos a:focus-visible { outline: 3px solid var(--branco); outline-offset: 3px; }

/* Cada seguro: explicação à esquerda, quadro "cotar" à direita, que acompanha a rolagem */
.produto-grade { display: grid; gap: 2rem; }
.produto-texto > :last-child { margin-bottom: 0; }
.cotar {
  background: var(--rosa);
  border-radius: var(--raio);
  padding: 1.5rem;
  align-self: start;
}
.secao-rosa .cotar { background: var(--areia); }
.produto .cotar .aviso {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
}
@media (min-width: 56rem) {
  .produto-grade { grid-template-columns: minmax(0, 1fr) 22rem; gap: 4rem; }
  .produto-texto { max-width: 44rem; }
  .cotar { position: sticky; top: 6rem; }
}

/* Blocos de produto (página Seguros) */
.produto ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.produto li { margin-bottom: 0.5rem; }
.produto h3 { margin-top: 1.5rem; }
.produto .aviso { margin: 1.5rem 0; }
.nota {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--cinza);
}
.secao-rosa .aviso { background: var(--areia); }

/* Página Sobre: "Tudo às claras" em destaque, subindo sobre a faixa Ameixa */
.ficha {
  position: relative;
  background: var(--branco);
  border-top: 6px solid var(--ameixa);
  border-radius: var(--raio);
  padding: 1.5rem 1.25rem 0.5rem;
  box-shadow: 0 12px 30px rgba(31, 26, 29, 0.15);
}
.ficha .dados li:last-child { border-bottom: 0; }
@media (min-width: 56rem) {
  .ficha { padding: 2rem 2rem 1rem; }
  .ficha .dados { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .ficha .dados li:nth-last-child(2) { border-bottom: 0; }
}
.secao-portas .ficha { margin-top: -2rem; }
.grupo > p { margin: 0; max-width: 44rem; }

/* Dados da empresa (página Sobre) */
.dados { list-style: none; padding: 0; margin: 0; }
.dados li { padding: 0.75rem 0; border-bottom: 1px solid var(--rosa); }

.texto-curto h2 + p { margin-bottom: 2rem; }

/* Página Perguntas: um bloco por assunto; no computador, o título fica à esquerda e acompanha a rolagem */
.grupo + .grupo { margin-top: 2.5rem; }
.grupo-perguntas > .aviso { margin: 0 0 1rem; max-width: none; }
@media (min-width: 56rem) {
  .grupo { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; align-items: start; }
  .grupo h2 { position: sticky; top: 6rem; }
  .grupo-perguntas { max-width: 48rem; }
}
/* Porta de sinistro sozinha (sem a de cotação ao lado) */
.portas.portas-uma { grid-template-columns: 1fr; } /* vence a regra de duas colunas da página Contato */
.portas-uma .porta p { max-width: 44rem; }

/* Perguntas que abrem e fecham (página Perguntas) */
.texto-curto h2 ~ h2 { margin-top: 2.5rem; }
.pergunta {
  background: var(--branco);
  border-radius: var(--raio);
  margin-bottom: 0.75rem;
}
.pergunta summary {
  cursor: pointer;
  font-weight: 600;
  padding: 1rem 2.75rem 1rem 1.25rem;
  min-height: 48px;
  list-style: none;
  position: relative;
}
.pergunta summary::-webkit-details-marker { display: none; }
/* Sinal de + que vira − quando a pergunta está aberta */
.pergunta summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 0.8rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ameixa);
}
.pergunta[open] summary::after { content: "−"; }
.pergunta[open] summary { color: var(--ameixa); }
.pergunta p { padding: 0 1.25rem; }
.pergunta p:last-child { padding-bottom: 1rem; margin-bottom: 0; }
h2 + .aviso { margin-bottom: 1rem; }

/* Página Contato: duas portas lado a lado (sinistro primeiro, porque é urgente) */
.portas { display: grid; gap: 1.25rem; }
/* Topo mais baixo e portas subindo sobre a faixa Ameixa: no celular, o botão
   "Avisar sinistro" aparece na primeira tela, sem rolar */
.destaque-curto { padding: 2rem 0 3.5rem; }
.secao-portas { padding-top: 0; }
.secao-portas .portas { margin-top: -2rem; position: relative; }
.porta-sinistro { box-shadow: 0 12px 30px rgba(31, 26, 29, 0.25); }
@media (min-width: 56rem) {
  .portas { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
}
.porta {
  border-radius: var(--raio);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.porta h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.porta .botao { margin-top: auto; } /* botões das duas portas na mesma altura */
.porta .telefone { margin: 1rem 0 0; }
/* Sinistro: Ameixa com texto branco (11.97:1), borda Coral para chamar atenção */
.porta-sinistro {
  background: var(--ameixa);
  color: var(--branco);
  border-top: 6px solid var(--coral);
}
.porta-sinistro h2, .porta-sinistro a:not(.botao) { color: var(--branco); }
.porta-sinistro a:not(.botao):focus-visible { outline-color: var(--branco); }
.porta-cotacao { background: var(--rosa); } /* texto Tinta: 13.99:1 */
.porta p:not(.telefone) { margin-bottom: 1.25rem; }
@media (min-width: 56rem) {
  .porta { padding: 2rem; }
  .porta p:not(.telefone) { margin-bottom: 1.5rem; }
}

/* Página Contato */
.telefone { margin-top: 1rem; font-weight: 600; }

/* Bloco de sinistro em Ameixa: texto branco (11.97:1) */
.sinistro {
  background: var(--ameixa);
  color: var(--branco);
}
.sinistro h2 { color: var(--branco); }
.sinistro a:not(.botao) { color: var(--branco); }

/* Política de privacidade */
.politica h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.politica ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.politica li { margin-bottom: 0.5rem; }
.politica .dados { padding-left: 0; }

/* Rodapé: texto Cinza quente sobre Areia (5.53:1) */
.rodape {
  border-top: 1px solid var(--rosa);
  padding: 2rem 0 6rem; /* espaço extra para o botão fixo não cobrir o texto */
  color: var(--cinza);
  font-size: 0.875rem;
}
.rodape a { color: var(--cinza); }
.rodape p { margin: 0 0 0.5rem; }

/* ============================================================
   Movimento (padrão "Sites com vida")
   Tudo é enfeite: quem pediu menos movimento ao sistema não vê
   nenhuma animação, e navegador sem suporte mostra o site parado.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Troca de página com transição suave (todas as páginas usam este arquivo) */
  @view-transition { navigation: auto; }

  /* Perguntas abrem deslizando até a altura do próprio texto */
  :root { interpolate-size: allow-keywords; }
  @supports selector(::details-content) {
    .pergunta::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 300ms ease-out, content-visibility 300ms allow-discrete;
    }
    .pergunta[open]::details-content { block-size: auto; }
  }
  .pergunta summary::after { transition: rotate 300ms ease-out; }
  .pergunta[open] summary::after { rotate: 180deg; }

  /* Conversa de exemplo. Navegador sem animação ligada à rolagem: as mensagens chegam
     uma a uma ao abrir a página. Com suporte, elas chegam conforme a pessoa rola (abaixo). */
  @keyframes chega {
    from { opacity: 0; translate: 0 0.75rem; }
  }
  .msg { animation: chega 450ms ease-out backwards; }
  .msg:nth-child(1) { animation-delay: 300ms; }
  .msg:nth-child(2) { animation-delay: 1300ms; }
  .msg:nth-child(3) { animation-delay: 2300ms; }
  .msg:nth-child(4) { animation-delay: 3300ms; }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes aparece {
      from { opacity: 0; translate: 0 1.5rem; }
    }
    /* Seções entram de leve ao rolar. Nas que têm lista, quem entra é cada item,
       um depois do outro (em vez do bloco inteiro de uma vez). */
    .secao > .container:not(:has(.seguros, .etapas, .motivos, .parceiras)),
    .secao > .container:has(.seguros, .etapas, .motivos, .parceiras) :is(h2, .duas-colunas p),
    .seguros > li, .etapas > li, .motivos > li, .parceiras > li {
      animation: aparece auto linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    /* Itens lado a lado entram juntos na tela; um pequeno atraso por posição faz a sequência */
    .motivos > li, .parceiras > li {
      --passo: 8%;
      animation-range: entry 0% entry 60%;
      animation-range: entry calc((sibling-index() - 1) * var(--passo)) entry calc(60% + (sibling-index() - 1) * var(--passo));
    }
    .parceiras > li { --passo: 6%; }

    /* Celular: cada mensagem da conversa chega quando aparece na tela */
    .msg {
      animation: chega auto linear backwards;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }

    /* Computador: a abertura fica parada enquanto a pessoa rola, e a conversa vai acontecendo
       (inspirado na abertura da Pedra Coral). A 1ª mensagem chega sozinha, as outras com a rolagem. */
    @media (min-width: 56rem) and (min-height: 40rem) {
      .abertura {
        view-timeline: --abertura block;
        min-height: 140vh; /* 40% de tela para a conversa acontecer (180% ficou longo) */
        padding: 0;
      }
      .abertura .container {
        position: sticky;
        top: 4.5rem; /* altura do cabeçalho */
        min-height: calc(100svh - 4.5rem);
        padding-block: 2.5rem;
      }
      .msg:nth-child(1) {
        animation: chega 450ms ease-out 300ms backwards;
      }
      .msg:nth-child(n + 2) {
        animation: chega auto linear backwards;
        animation-timeline: --abertura;
      }
      .msg:nth-child(2) { animation-range: contain 0% contain 25%; }
      .msg:nth-child(3) { animation-range: contain 30% contain 55%; }
      .msg:nth-child(4) { animation-range: contain 60% contain 85%; }

      /* Aviso no espaço vazio da conversa; some assim que a pessoa começa a rolar */
      @keyframes some {
        to { opacity: 0; }
      }
      .conversa { position: relative; }
      .dica-rolar {
        display: block;
        position: absolute;
        inset: auto 0 1.25rem;
        margin: 0;
        text-align: center;
        font-size: 0.8125rem;
        color: var(--cinza); /* 5.53:1 sobre Areia */
        animation: some auto linear both;
        animation-timeline: --abertura;
        animation-range: contain 0% contain 12%;
      }
    }
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    /* Cabeçalho vira uma pílula flutuante depois que a página começa a rolar
       (a faixa some e o miolo ganha fundo, cantos redondos e sombra) */
    @keyframes topo-solto {
      to { background-color: transparent; border-bottom-color: transparent; }
    }
    @keyframes pilula {
      to {
        background-color: var(--areia); /* sólida: com transparência, o texto de trás aparecia através da pílula */
        box-shadow: 0 8px 24px rgb(31 26 29 / 0.18);
        translate: 0 0.5rem;
      }
    }
    .topo {
      animation: topo-solto auto linear both;
      animation-timeline: scroll(block root);
      animation-range: 0px 80px;
    }
    .topo .container {
      animation: pilula auto linear both;
      animation-timeline: scroll(block root);
      animation-range: 0px 80px;
    }
    @media (min-width: 48rem) {
      .topo .container { border-radius: 999px; }
    }
  }
}

/* Botão fixo do WhatsApp só aparece depois da primeira tela, onde já existe o botão grande
   (assim não cobre a conversa logo de cara). Fica fora do bloco acima porque aparecer não é
   movimento: quem pediu menos movimento também ganha, só que sem o deslize. */
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  @keyframes fixo-aparece {
    from { opacity: 0; translate: 0 1rem; visibility: hidden; }
  }
  @keyframes fixo-aparece-parado {
    from { opacity: 0; visibility: hidden; }
  }
  .whatsapp-fixo {
    animation: fixo-aparece linear both;
    animation-timeline: scroll(block root);
    animation-range: 50vh 70vh;
    @media (prefers-reduced-motion: reduce) {
      animation-name: fixo-aparece-parado;
    }
  }
}

/* Celular (04/11/2026): menu numa linha só. Antes quebrava em 3 linhas e o cabeçalho fixo
   ficava alto, cobrindo o começo das páginas. Se a tela for estreita demais, a linha rola de lado. */
@media (max-width: 47.99rem) {
  .topo .container { gap: 0.35rem 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .menu { width: 100%; }
  .menu ul {
    flex-wrap: nowrap;
    gap: 0 0.9rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .menu ul::-webkit-scrollbar { display: none; }
  .menu a { font-size: 0.875rem; white-space: nowrap; padding: 0.35rem 0; }
}
/* Links para uma seção (#porto, #vida…) param abaixo do cabeçalho fixo, não atrás dele */
html { scroll-padding-top: 7.5rem; }
@media (max-width: 23.5rem) { .menu ul { gap: 0 0.7rem; } }