/* ==========================================================================
   Tay Soluções Patrimoniais — landing page de captação
   Tokens extraídos da marca real (CSS do site oficial + SVG do logo).
   Nenhuma cor inventada. Ver direcao-de-arte.md para as razões de contraste.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes (self-hosted, sem requisição externa)
   Display: Fraunces (OFL) — substituta livre da Bely, fonte paga da marca.
            Itálico é ARQUIVO DE VERDADE, não inclinação sintética.
   Texto:   Manrope (OFL) — a MESMA do site oficial dela
   -------------------------------------------------------------------------- */
/* Arquivos reduzidos ao alfabeto português completo (158 caracteres: A-Z, a-z,
   dígitos, todos os acentos do pt-BR e pontuação). O eixo óptico da Fraunces
   está fixado em 144, que é o desenho de display — a Fraunces só aparece em
   título, número grande e itálico de ênfase. 75 KB somados, contra 170 KB da
   versão completa. Caractere fora do conjunto cai no fallback serifado.
   Se for editar texto com símbolo incomum, ver README, seção "Medição". */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Paleta — todos os valores vieram do CSS do site dela e do SVG do logo.
     Contrastes conferidos em direcao-de-arte.md, seção "Contraste". */
  --floresta: #2b332a;        /* cor de marca (--color-forest do site dela) */
  --floresta-900: #212820;    /* neutra escura / texto sobre creme  14,0:1 */
  --floresta-800: #333c31;    /* superfície escura secundária */
  --sage: #4a5448;            /* apoio / texto secundário sobre creme 7,3:1 */
  --sage-600: #5b6557;        /* linhas e bordas sobre escuro */
  --bronze: #ad7f4e;          /* cor do logo — filete, ornamento, régua */
  --bronze-400: #c8a67e;      /* ação sobre fundo escuro (texto floresta 5,7:1) */
  --bronze-300: #d8c2a4;      /* texto de apoio sobre escuro           7,6:1 */
  --bronze-600: #7a5a33;      /* ação sobre fundo claro (texto creme   5,8:1) */
  --creme: #f9f8f6;           /* neutra clara / fundo padrão */
  --creme-100: #f3f1ea;       /* faixa alternada */
  --creme-200: #e9e5db;       /* borda sobre claro */
  --creme-quente: #f5f0e6;    /* fundo de destaque quente */
  --zap: #25d366;             /* só glifo do WhatsApp, nunca texto */

  /* Papéis — usar SEMPRE estes, nunca a cor crua, para não errar contraste */
  --fundo: var(--creme);
  --fundo-papel: var(--creme-quente);
  --fundo-escuro: var(--floresta);
  --texto: var(--floresta-900);
  --texto-suave: var(--sage);
  --texto-inv: var(--creme);
  --texto-inv-suave: var(--bronze-300);
  --borda: var(--creme-200);
  --borda-forte: #ddd6c6;
  --borda-escura: #3d463b;
  --acao-claro-fundo: var(--bronze-600);
  --acao-claro-texto: var(--creme);
  --acao-escuro-fundo: var(--bronze-400);
  --acao-escuro-texto: var(--floresta);
  --foco: var(--bronze-600);

  /* Tipografia — nenhum tamanho de texto em px fixo */
  --fonte-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-texto: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-micro: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-mini: clamp(0.81rem, 0.78rem + 0.15vw, 0.88rem);
  --t-corpo: clamp(1rem, 0.96rem + 0.20vw, 1.09rem);
  --t-corpo-g: clamp(1.09rem, 1.02rem + 0.34vw, 1.28rem);
  --t-titulo-p: clamp(1.28rem, 1.16rem + 0.58vw, 1.63rem);
  --t-titulo: clamp(1.55rem, 1.32rem + 1.14vw, 2.30rem);
  --t-secao: clamp(1.85rem, 1.45rem + 2.00vw, 3.00rem);
  --t-display: clamp(2.20rem, 1.52rem + 3.40vw, 4.10rem);
  --t-frase: clamp(2.00rem, 1.32rem + 3.40vw, 3.80rem);
  --t-numero: clamp(3.40rem, 2.20rem + 6.00vw, 7.00rem);

  --altura-apertada: 1.06;
  --altura-titulo: 1.14;
  --altura-texto: 1.62;
  --tracking-display: -0.022em;
  --tracking-caps: 0.13em;

  /* Espaçamento — progressão única, usada em tudo */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;
  --e10: 8rem;
  --secao-y: clamp(3.5rem, 2.2rem + 6.2vw, 7rem);
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
  --largura: 68rem;
  --largura-texto: 38rem;

  /* Raio, borda e sombra — definidos uma vez, reutilizados.
     Raio pequeno de propósito: régua de documento, não card de catálogo. */
  --raio-1: 0.125rem;
  --raio-2: 0.25rem;
  --raio-pill: 999px;
  --linha: 1px solid var(--borda);
  --linha-forte: 1px solid var(--borda-forte);
  --linha-escura: 1px solid var(--borda-escura);
  --sombra: 0 1px 2px rgba(33, 40, 32, 0.06), 0 8px 24px -14px rgba(33, 40, 32, 0.28);
  --sombra-alta: 0 2px 6px rgba(33, 40, 32, 0.08), 0 20px 44px -20px rgba(33, 40, 32, 0.34);

  /* Movimento */
  --rapido: 120ms;
  --medio: 240ms;
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);

  --barra-h: 3.75rem;

  /* Breakpoints (referência; @media usa os valores)
     sm 30rem/480px · md 48rem/768px · lg 64rem/1024px · xl 80rem/1280px */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--altura-texto);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-display);
  margin-block: 0 var(--e4);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display);
  line-height: var(--altura-apertada);
}
h2 {
  font-size: var(--t-secao);
  max-inline-size: 22ch;
}
h3 {
  font-size: var(--t-titulo-p);
}

p {
  margin-block: 0 var(--e4);
  text-wrap: pretty;
  max-inline-size: var(--largura-texto);
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
}

ul,
ol {
  margin-block: 0 var(--e4);
  padding-inline-start: var(--e5);
}

strong,
b {
  font-weight: 700;
}

img,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--raio-1);
}

::selection {
  background: var(--bronze-300);
  color: var(--floresta-900);
}

.pular {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--floresta);
  color: var(--texto-inv);
  padding: var(--e3) var(--e4);
  z-index: 100;
}
.pular:focus {
  inset-inline-start: 0;
}

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

/* --------------------------------------------------------------------------
   4. Estrutura
   -------------------------------------------------------------------------- */
.interno {
  inline-size: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
}

.secao,
.hero,
.virada,
.fechamento {
  scroll-margin-block-start: calc(var(--barra-h) + var(--e4));
}

.secao {
  padding-block: var(--secao-y);
}

.secao--claro {
  background: var(--fundo);
  color: var(--texto);
}

.secao--papel {
  background: var(--fundo-papel);
  color: var(--texto);
}

.secao--escuro {
  background: var(--fundo-escuro);
  color: var(--texto-inv);
}

/* Seções longas abaixo da dobra: pula o layout até chegar perto */
#objecoes,
#perguntas,
#ficha {
  content-visibility: auto;
  contain-intrinsic-size: auto 45rem;
}

.olho {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bronze-300);
  margin-block: 0 var(--e4);
  max-inline-size: none;
}

.olho--escuro {
  color: var(--bronze-600);
}

.texto-guia {
  font-size: var(--t-corpo-g);
  color: var(--texto-suave);
  max-inline-size: 46ch;
  margin-block-end: var(--e7);
}

.ressalva {
  font-size: var(--t-mini);
  line-height: 1.6;
  color: var(--texto-suave);
  max-inline-size: 62ch;
  border-inline-start: 2px solid var(--bronze-400);
  padding-inline-start: var(--e4);
  margin-block: var(--e5) var(--e7);
}

/* --------------------------------------------------------------------------
   5. Barra do topo e progresso de leitura
   -------------------------------------------------------------------------- */
.progresso {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 60;
  pointer-events: none;
}

.progresso__barra {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.barra {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--creme) 90%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: var(--linha);
}

.barra__interno {
  inline-size: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
  min-block-size: var(--barra-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
}

.barra__logo {
  display: flex;
  align-items: center;
  min-block-size: 44px;
}

.barra__logo img {
  inline-size: auto;
  block-size: clamp(1.45rem, 1.15rem + 1.4vw, 1.9rem);
}

/* --------------------------------------------------------------------------
   6. Botões e links
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido) var(--curva), background-color var(--medio) var(--curva),
    border-color var(--medio) var(--curva);
}

.botao--acao {
  background: var(--acao-claro-fundo);
  color: var(--acao-claro-texto);
  box-shadow: var(--sombra);
}
.botao--acao:hover {
  background: #684c2b;
}
.botao--acao:active {
  transform: scale(0.97);
}

.botao--acao-escuro {
  background: var(--acao-escuro-fundo);
  color: var(--acao-escuro-texto);
}
.botao--acao-escuro:hover {
  background: var(--bronze-300);
}
.botao--acao-escuro:active {
  transform: scale(0.97);
}

.botao--contorno {
  background: transparent;
  color: var(--texto);
  border-color: var(--borda-forte);
}
.botao--contorno:hover {
  background: var(--creme-100);
  border-color: var(--bronze-600);
}
.botao--contorno:active {
  transform: scale(0.97);
}

.botao--compacto {
  padding-inline: var(--e4);
  font-size: var(--t-mini);
}

.botao--grande {
  font-size: var(--t-corpo-g);
  padding: var(--e4) var(--e7);
}

.botao__icone {
  display: inline-flex;
  color: currentColor;
}

.botao--contorno .botao__icone {
  color: var(--zap);
}

.link-secundario {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-weight: 600;
  font-size: var(--t-corpo);
  color: var(--texto-suave);
  text-decoration: underline;
  text-decoration-color: var(--bronze-400);
  text-decoration-thickness: 1px;
}
.link-secundario:hover {
  color: var(--texto);
  text-decoration-color: var(--bronze-600);
}

/* --------------------------------------------------------------------------
   7. ATO 1 — Hero em campo claro
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--fundo);
  color: var(--texto);
  padding-block: clamp(2.25rem, 1.4rem + 4vw, 5rem) clamp(2.5rem, 1.8rem + 4vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__grafismo {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-end: -34%;
  inline-size: min(150vw, 44rem);
  aspect-ratio: 1;
  translate: 0 -50%;
  z-index: -1;
  pointer-events: none;
}

.hero__grafismo svg {
  inline-size: 100%;
  block-size: 100%;
}

.hero__interno {
  inline-size: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
}

.hero__titulo {
  font-size: var(--t-display);
  font-weight: 500;
  color: var(--texto);
  max-inline-size: 17ch;
  margin-block-end: var(--e5);
}

/* No celular a frase quebra sozinha; a partir de 48rem cada trecho vira uma
   linha desenhada, que é onde a revelação por linha faz sentido. */
.hero__titulo .linha {
  display: inline;
}

@media (min-width: 48rem) {
  .hero__titulo .linha {
    display: block;
  }
}

.grifo {
  font-style: italic;
  font-weight: 600;
  color: var(--bronze-600);
  background-image: linear-gradient(var(--bronze-400), var(--bronze-400));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 3px;
  padding-inline-end: 0.06em;
}

.hero__sub {
  font-size: var(--t-corpo-g);
  color: var(--texto-suave);
  max-inline-size: 46ch;
  margin-block-end: var(--e6);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e6);
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   8. Faixa de fatos verificáveis (ocupa o lugar da "barra de números vagos")
   -------------------------------------------------------------------------- */
.faixa {
  background: var(--floresta);
  color: var(--texto-inv);
  padding-block: var(--e6);
}

.faixa__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5) var(--e4);
}

.faixa__item {
  display: grid;
  gap: var(--e1);
  align-content: start;
}

.faixa__valor {
  font-family: var(--fonte-display);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--bronze-300);
  font-variant-numeric: tabular-nums;
}

.faixa__rotulo {
  font-size: var(--t-micro);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #b9c0b5;
}

/* --------------------------------------------------------------------------
   9. Régua — o padrão estrutural da página, no lugar do card
   -------------------------------------------------------------------------- */
.regua {
  list-style: none;
  margin: 0 0 var(--e7);
  padding: 0;
  border-block-start: var(--linha-forte);
}

.regua__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--e2) var(--e4);
  padding-block: var(--e5);
  border-block-end: var(--linha-forte);
}

.regua__num {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: var(--bronze-600);
  padding-block-start: 0.35em;
  font-variant-numeric: tabular-nums;
}

.regua__corpo > *:last-child {
  margin-block-end: 0;
}

.regua__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-titulo-p);
  font-weight: 600;
  color: var(--texto);
  margin-block-end: var(--e2);
  max-inline-size: 26ch;
}

.regua__corpo p {
  color: var(--texto-suave);
  max-inline-size: 54ch;
}

.regua--passos .regua__titulo {
  margin-block-end: var(--e3);
}

.regua--objecoes .objecao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-titulo-p);
  font-weight: 500;
  font-style: italic;
  color: var(--texto);
  margin-block: 0 var(--e3);
  max-inline-size: 30ch;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   10. ATO 2 — ancoragem
   -------------------------------------------------------------------------- */
.ancora {
  display: flex;
  gap: var(--e4);
  align-items: stretch;
}

.ancora__filete {
  flex: 0 0 2px;
  background: var(--bronze);
  border-radius: var(--raio-1);
  transform: scaleY(1);
  transform-origin: 50% 0;
}

.ancora__dados p {
  margin-block-end: var(--e3);
  font-size: var(--t-mini);
  line-height: 1.75;
  color: var(--texto-suave);
}

.ancora__dados p:last-child {
  margin-block-end: 0;
}

.ancora__dados strong {
  color: var(--texto);
}

.ancora__regiao {
  max-inline-size: 46ch;
}

/* --------------------------------------------------------------------------
   11. ATO 3 — Cena sticky do "como funciona"
   -------------------------------------------------------------------------- */
.cena__titulo {
  margin-block-end: var(--e6);
}

.cena__grade {
  display: grid;
  gap: var(--e4);
}

.cena__palco {
  position: sticky;
  inset-block-start: var(--barra-h);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding-block: var(--e3);
  background: var(--fundo-papel);
  border-block-end: var(--linha-forte);
}

.cena__numero {
  font-family: var(--fonte-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--bronze-600);
  font-variant-numeric: tabular-nums;
}

.cena__rotulo {
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--texto-suave);
}

.regua--passos {
  border-block-start: 0;
  margin-block-end: 0;
}

.cena__saida {
  margin-block-start: var(--e7);
  padding-block-start: var(--e6);
  border-block-start: var(--linha-forte);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e6);
}

.cena__chamada {
  font-family: var(--fonte-display);
  font-size: var(--t-titulo-p);
  color: var(--texto);
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. ATO 3 — Tabela comparativa
   -------------------------------------------------------------------------- */
.tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--linha-forte);
  border-radius: var(--raio-2);
  background: var(--fundo-papel);
}

.tabela {
  inline-size: 100%;
  min-inline-size: 32rem;
  border-collapse: collapse;
  font-size: var(--t-mini);
}

.tabela th,
.tabela td {
  padding: var(--e4);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--linha-forte);
  line-height: 1.55;
}

.tabela thead th {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 700;
  white-space: nowrap;
}

.tabela tbody th {
  inline-size: 10rem;
  font-weight: 700;
  color: var(--texto);
}

.tabela tbody td {
  color: var(--texto-suave);
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td {
  border-block-end: 0;
}

.linha-tabela--honesta {
  background: color-mix(in srgb, var(--bronze-300) 30%, transparent);
}

.linha-tabela--honesta td,
.linha-tabela--honesta th {
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   13. Ficha técnica — a letra miúda em corpo legível
   -------------------------------------------------------------------------- */
.ficha {
  margin: 0;
  border-block-start: var(--linha-forte);
}

.ficha__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e2);
  padding-block: var(--e5);
  border-block-end: var(--linha-forte);
}

.ficha dt {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bronze-600);
  padding-block-start: 0.2em;
}

.ficha dd {
  margin: 0;
  font-size: var(--t-mini);
  line-height: 1.7;
  color: var(--texto-suave);
  max-inline-size: 62ch;
}

.ficha dd strong {
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   14. ATO 4 — Virada
   -------------------------------------------------------------------------- */
.virada {
  background: var(--floresta-900);
  color: var(--texto-inv);
  padding-block: clamp(4.5rem, 2.8rem + 10vw, 10rem);
  text-align: center;
}

.virada__frase {
  font-family: var(--fonte-display);
  font-size: var(--t-frase);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--tracking-display);
  color: var(--texto-inv);
  max-inline-size: 20ch;
  margin-inline: auto;
  margin-block: 0;
  text-wrap: balance;
}

.virada__frase em {
  font-style: italic;
  color: var(--bronze-300);
}

/* --------------------------------------------------------------------------
   15. ATO 5 — Entrega, FAQ, fechamento
   -------------------------------------------------------------------------- */
.entrega {
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  display: grid;
  gap: var(--e4);
  max-inline-size: 54rem;
}

.entrega li {
  position: relative;
  padding-inline-start: var(--e6);
  padding-block-end: var(--e4);
  border-block-end: var(--linha-forte);
  color: var(--texto-suave);
  font-size: var(--t-corpo-g);
}

.entrega li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: var(--e4);
  block-size: 1px;
  background: var(--bronze-600);
}

.entrega li strong {
  color: var(--texto);
}

.entrega__nota {
  font-size: var(--t-mini);
  color: var(--texto-suave);
  margin-block-end: 0;
}

.faq {
  margin-block-end: var(--e7);
  border-block-start: var(--linha-forte);
}

.pergunta {
  border-block-end: var(--linha-forte);
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-block-size: 44px;
  padding-block: var(--e4);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

.pergunta summary::after {
  content: "";
  flex: 0 0 0.65rem;
  block-size: 0.65rem;
  border-inline-end: 2px solid var(--bronze-600);
  border-block-end: 2px solid var(--bronze-600);
  rotate: 45deg;
  translate: 0 -0.15rem;
  transition: rotate var(--medio) var(--curva);
}

.pergunta[open] summary::after {
  rotate: 225deg;
  translate: 0 0.15rem;
}

.pergunta summary:hover {
  color: var(--bronze-600);
}

.pergunta__corpo {
  padding-block-end: var(--e4);
}

.pergunta__corpo p {
  color: var(--texto-suave);
  margin-block-end: 0;
  max-inline-size: 64ch;
}

.fechamento {
  background: var(--fundo-escuro);
  color: var(--texto-inv);
  padding-block: clamp(4rem, 2.5rem + 8vw, 8rem);
}

.fechamento__titulo {
  font-size: var(--t-secao);
  color: var(--texto-inv);
  max-inline-size: 16ch;
}

.fechamento__texto {
  font-size: var(--t-corpo-g);
  color: var(--texto-inv-suave);
  max-inline-size: 48ch;
  margin-block-end: var(--e6);
}

.fechamento__zap {
  margin-block: var(--e4) 0;
  font-size: var(--t-mini);
  color: var(--texto-inv-suave);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   16. Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--floresta-900);
  color: var(--texto-inv-suave);
  padding-block: var(--e8) var(--e7);
  font-size: var(--t-mini);
}

.rodape__grade {
  display: grid;
  gap: var(--e6);
  margin-block-end: var(--e7);
}

.rodape__logo {
  inline-size: auto;
  block-size: 1.9rem;
  margin-block-end: var(--e3);
}

.rodape__assinatura {
  font-family: var(--fonte-display);
  font-style: italic;
  color: var(--bronze-300);
  max-inline-size: 24ch;
  margin-block-end: 0;
}

.rodape__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--creme);
  margin-block-end: var(--e3);
  max-inline-size: none;
}

.rodape p {
  line-height: 1.85;
  margin-block-end: 0;
}

.rodape a {
  color: var(--creme);
  text-decoration-color: var(--sage-600);
}

/* alvo de toque de 44px também nos links de contato do rodapé */
.rodape p a {
  display: inline-block;
  padding-block: 0.8rem;
}
.rodape a:hover {
  text-decoration-color: var(--bronze-400);
}

.rodape__legal {
  padding-block-start: var(--e5);
  border-block-start: 1px solid var(--floresta-800);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: #9aa397;
  max-inline-size: 92ch;
}

/* --------------------------------------------------------------------------
   17. Botão fixo do celular
   -------------------------------------------------------------------------- */
.fixo {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 55;
  padding: var(--e3) var(--gutter) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--creme) 64%, transparent);
  transform: translateY(130%);
  transition: transform var(--medio) var(--curva);
  pointer-events: none;
}

.fixo[data-visivel] {
  transform: translateY(0);
}

.botao--fixo {
  inline-size: 100%;
  box-shadow: var(--sombra-alta);
  pointer-events: auto;
}

/* O botão fixo entra sozinho, sem JavaScript, depois do ato 1 (efeito 10). */
@supports (animation-timeline: scroll()) {
  .fixo {
    animation: sobe-fixo linear both;
    animation-timeline: scroll(root block);
    animation-range: 14vh 32vh;
  }
}

@keyframes sobe-fixo {
  from { transform: translateY(130%); }
  to { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   18. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 30rem) {
  .regua__item {
    grid-template-columns: 4rem minmax(0, 1fr);
  }
}

@media (min-width: 48rem) {
  .fixo {
    display: none;
  }
  .faixa__grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ficha__linha {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--e5);
  }
  .rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tabela {
    font-size: var(--t-corpo);
    min-inline-size: 0;
  }
  .regua__item {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--e2) var(--e6);
  }
}

@media (min-width: 64rem) {
  .cena__grade {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--e8);
    align-items: start;
  }
  .cena__palco {
    display: grid;
    align-content: start;
    gap: var(--e2);
    inset-block-start: 24vh;
    padding-block: 0;
    background: transparent;
    border-block-end: 0;
  }
  .cena__numero {
    font-size: var(--t-numero);
  }
  .regua--passos .regua__item {
    padding-block: var(--e7);
  }
  .rodape__grade {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--e6);
  }
}

/* --------------------------------------------------------------------------
   19. Imersão — scroll-driven nativo.
   Tudo dentro de @supports: sem suporte, o conteúdo aparece normal.
   Anima só transform, opacity e background-size.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  .progresso__barra {
    animation: encher linear both;
    animation-timeline: scroll(root block);
  }
}

@supports (animation-timeline: view()) {
  /* efeito 1 — revelação por linha do h1 (ato 1) */
  .hero__titulo .linha {
    animation: sobe-linha linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
  .hero__titulo .linha:nth-child(2) { animation-range: entry 2% cover 26%; }
  .hero__titulo .linha:nth-child(3) { animation-range: entry 4% cover 30%; }
  .hero__titulo .linha:nth-child(4) { animation-range: entry 6% cover 34%; }

  /* efeito 2 — grifo que preenche (ato 1) */
  .grifo {
    animation: grifar linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 42%;
  }

  /* efeito 3 — fatos e itens de régua entrando em cascata (atos 2, 3, 4) */
  .faixa__item,
  .regua__item {
    animation: entra linear both;
    animation-timeline: view();
    animation-range: entry 6% cover 30%;
  }
  .faixa__item:nth-child(2) { animation-range: entry 10% cover 34%; }
  .faixa__item:nth-child(3) { animation-range: entry 14% cover 38%; }
  .faixa__item:nth-child(4) { animation-range: entry 18% cover 42%; }

  /* efeito 4 — filete que cresce ao lado da ancoragem (ato 2) */
  .ancora__filete {
    animation: cresce linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }

  /* efeito 6 — linhas da tabela e da ficha revelando (ato 3) */
  .linha-tabela,
  .ficha__linha {
    animation: entra-curto linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }

  /* efeito 7 — frase de virada (ato 4) */
  .virada__frase {
    animation: entra linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 45%;
  }

  /* efeito 8 — blocos de fecho (ato 5) */
  .entrega li,
  .cena__saida,
  .fechamento__titulo {
    animation: entra linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }
}

@keyframes encher {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes sobe-linha {
  from { opacity: 0; transform: translateY(0.45em); }
  to { opacity: 1; transform: none; }
}
@keyframes grifar {
  from { background-size: 0% 3px; }
  to { background-size: 100% 3px; }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}
@keyframes entra-curto {
  from { opacity: 0.2; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes cresce {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* --------------------------------------------------------------------------
   20. Movimento reduzido — página no estado final, sem animação
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__titulo .linha,
  .faixa__item,
  .regua__item,
  .entrega li,
  .cena__saida,
  .fechamento__titulo,
  .virada__frase,
  .linha-tabela,
  .ficha__linha {
    opacity: 1;
    transform: none;
  }
  .grifo {
    background-size: 100% 3px;
  }
  .ancora__filete {
    transform: scaleY(1);
  }
  .cena__palco {
    position: static;
  }
  /* botão fixo já entra no estado final, sem deslizar */
  .fixo {
    animation: none;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   21. Impressão — não precisa ser bonita, precisa não quebrar
   -------------------------------------------------------------------------- */
@media print {
  .barra,
  .fixo,
  .progresso,
  .hero__grafismo {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .faixa,
  .virada,
  .fechamento,
  .rodape,
  .secao--papel {
    background: #fff;
    color: #000;
  }
  .faixa__valor,
  .faixa__rotulo,
  .virada__frase,
  .fechamento__titulo,
  .rodape__titulo,
  .rodape__assinatura {
    color: #000;
  }
  .hero__sub,
  .entrega li,
  .rodape p,
  .rodape__legal,
  .fechamento__texto {
    color: #222;
  }
  .cena__palco {
    position: static;
  }
  .pergunta__corpo {
    display: block;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}