/* ============================================================
   Carne Já — folha de estilo única
   Sistema definido em ../DESIGN_SYSTEM.md
   Nenhum valor cru fora dos blocos de token. Sempre usar var().
   ============================================================ */

/* ---------- 0. Fontes, servidas por nós ----------
   Vinham do fonts.googleapis.com. Sai de propósito: aquela folha de
   estilo é de terceiro e bloqueia a renderização, então o texto do hero
   só aparecia depois de DNS, TLS e resposta de dois domínios que não são
   nossos. Aqui é o mesmo servidor que já entregou o HTML, na conexão que
   já está aberta.

   `unicode-range` não é enfeite: o navegador só baixa o arquivo latin-ext
   se a página usar um caractere que só existe lá. Como o site é todo em
   português, na prática ele nunca é pedido, e mesmo assim continua ali
   para o dia em que um nome próprio precisar.

   O Inter é fonte variável: um arquivo só cobre 400, 500 e 600, e por
   isso a declaração traz a faixa `400 600` em vez de três blocos. O
   Poppins ainda é estático, um arquivo por peso.

   font-display: swap mantém o texto legível durante o carregamento. Sem
   ele o hero fica em branco até a fonte chegar, que é exatamente o que
   o LCP mede.

   Os arquivos são os mesmos que o Google servia (Inter e Poppins são
   OFL, redistribuir é permitido), baixados em 28/08/2026. Para
   atualizar, baixe de novo e RENOMEIE o arquivo: o nginx serve
   /assets/fontes/*.woff2 como `immutable` por um ano, então trocar o
   conteúdo mantendo o nome deixa quem já visitou com a versão velha. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fontes/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fontes/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fontes/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fontes/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fontes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fontes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens primitivos ---------- */
:root {
  /* Cor: família carmim */
  --carmim-900: #6a111b;
  --carmim-800: #7e1520;
  --carmim-700: #8f1926;
  --carmim-600: #a81d2c;
  --carmim-500: #c2233a;
  --carmim-100: #f3dddf;

  /* Cor: família creme */
  --creme-100: #f5f0e1;
  --creme-200: #ede6d4;
  --creme-300: #dfd5be;

  /* Cor: neutros e apoio */
  --grafite-900: #2b2320;
  --grafite-600: #6b5d56;
  --verde-700: #1f5c41;
  --verde-600: #2a7a56;
  --branco: #ffffff;

  /* Espaço */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 112px;

  /* Raio */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* Tipografia */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fs-hero: 44px;
  /* O titulo de uma pagina de TEXTO nao e o hero da home. Com --fs-hero
     (76px no desktop) um titulo de seis palavras vira tres linhas que
     empurram o conteudo para fora da primeira tela, e o texto abaixo
     parece legenda. Escala propria, e ela vale para o blog e para as
     paginas juridicas. */
  --fs-titulo: 34px;
  --fs-h2: 32px;
  --fs-h3: 19px;
  --fs-nome: 26px;
  --fs-promessa: 18px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-label: 13px;
  --fs-btn: 17px;

  /* Layout */
  --gutter: 20px;
  --container-text: 680px;
  --container-wide: 1160px;
  --bar-h: 64px;

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid: 260ms;
  --dur-slow: 520ms;

  /* Textura de grão: dá acabamento tátil ao creme chapado */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Tokens semânticos ---------- */
:root {
  --bg: var(--creme-100);
  --bg-alt: var(--creme-200);
  --bg-brand: var(--carmim-600);
  --bg-dark: var(--grafite-900);

  --divider: var(--creme-300);
  /* Filete de dentro de bloco. O --divider é creme sobre creme e fica em
     1,17:1: serve para separar superfícies, não para ser visto. Este é
     grafite transparente e aparece sobre creme-100 e creme-200. */
  --linha: rgba(43, 35, 32, 0.12);
  /* Borda de campo de formulário, e ela precisa de outra medida.
     Filete de bloco é decoração e pode ficar em 1,25:1, mas a borda de um
     campo é o que diz onde se clica: a WCAG pede 3:1 para o contorno de
     elemento de interface. O --divider dá 1,17 sobre creme-200 e some, o
     --linha dá 1,25 e some junto. Este dá 3,37 sobre creme-200 e 3,46
     sobre creme-100, e continua sendo cinza quente e não preto. */
  --borda-campo: rgba(43, 35, 32, 0.55);

  --text: var(--grafite-900);
  --text-muted: var(--grafite-600);
  --text-on-brand: var(--branco);
  --text-on-dark: var(--creme-100);
  --text-muted-on-dark: var(--creme-300);

  --brand: var(--carmim-600);
  /* Carmim-600 sobre grafite da 2,11:1 e some. Sobre fundo escuro,
     so o carmim-500, e nunca como texto: so como superficie. */
  --brand-on-dark: var(--carmim-500);
  --brand-hover: var(--carmim-700);
  --brand-active: var(--carmim-800);
  --brand-deep: var(--carmim-900);

  --focus: var(--carmim-600);
  --focus-on-brand: var(--creme-100);
  --seal: var(--verde-700);
  --seal-claro: var(--verde-600);

  --shadow-cta: 0 6px 20px rgba(168, 29, 44, 0.28);
  --shadow-cta-hover: 0 10px 28px rgba(168, 29, 44, 0.34);
  --shadow-card: 0 2px 4px rgba(43, 35, 32, 0.06),
    0 12px 32px rgba(43, 35, 32, 0.08);
  --shadow-card-hover: 0 4px 8px rgba(43, 35, 32, 0.08),
    0 20px 44px rgba(43, 35, 32, 0.14);
  --shadow-seal: 0 10px 22px rgba(43, 35, 32, 0.32);
  --shadow-bar: 0 6px 24px rgba(43, 35, 32, 0.07);
  --shadow-garantia: 0 18px 48px rgba(106, 17, 27, 0.28);
  --shadow-inverse: 0 6px 20px rgba(43, 35, 32, 0.22);

  /* Véus e listras, sempre derivados das cores da marca */
  --veu-escuro: rgba(43, 35, 32, 0.92);
  --veu-medio: rgba(43, 35, 32, 0.72);
  --veu-zero: rgba(43, 35, 32, 0);
  --listra-carmim: rgba(168, 29, 44, 0.07);
  --listra-clara: rgba(255, 255, 255, 0.045);
  --borda-clara: rgba(255, 255, 255, 0.22);
  --borda-tenue: rgba(255, 255, 255, 0.14);
  --superficie-clara: rgba(255, 255, 255, 0.1);
  --superficie-tenue: rgba(255, 255, 255, 0.04);

  /* Selo do hero. Sete camadas precisam de cor própria, e a regra 4
     do site vale aqui igual: tudo derivado do carmim e do creme. */
  --selo-serra: rgba(168, 29, 44, 0.26);
  --selo-aro: rgba(168, 29, 44, 0.3);
  --selo-aro-fraco: rgba(168, 29, 44, 0.2);
  --selo-disco-topo: rgba(255, 252, 240, 0.62);
  --selo-disco-base: rgba(168, 29, 44, 0.055);
  --selo-luz: rgba(255, 252, 240, 0.55);
  --selo-corte: rgba(168, 29, 44, 0.68);

  /* A faca deixou de ser silhueta chapada: ganhou volume do topo
     para a base, realce no dorso e luz que corre pelo fio. */
  --faca-topo: var(--carmim-500);
  --faca-base: var(--carmim-800);
  --faca-dorso: rgba(255, 252, 240, 0.2);
  --faca-fio: rgba(255, 252, 240, 0.32);
  --faca-brilho: rgba(255, 252, 240, 0.95);
  --faca-sombra: rgba(106, 17, 27, 0.2);
}

/* ---------- 3. Tokens de componente ---------- */
:root {
  /* O ritmo vertical da página, num token só. Antes era --space-8 no
     celular e --space-9 acima de 768px, num degrau seco: o respiro
     parava de crescer e num monitor largo a página lia com a mesma
     folga de um tablet. O clamp faz o respiro acompanhar a viewport
     entre 64 e 112px, e o degrau some junto com a media query. */
  --section-pad: clamp(var(--space-8), 7vw, var(--space-10));

  /* Distância do cabeçalho de seção ao conteúdo dela. Existia em três
     valores diferentes para a mesma relação (32px nos padrões, cortes,
     quem e perguntas; 48px na garantia e nos passos; 64px na garantia
     no desktop). Um valor só, e ele escala junto com o resto. */
  --section-head-gap: clamp(var(--space-6), 3.4vw, var(--space-7));

  /* O hero ocupa a primeira dobra inteira, descontadas a barra fixa e a
     faixa corrida que fecha o rodapé dele. Sem isso o hero media 639px
     numa tela de 840 e a seção seguinte invadia a primeira impressão.
     svh, e não vh, porque no iOS a vh conta a barra do navegador que
     ainda vai recolher e o hero nasceria alto demais.
     O max() é a trava para tela baixa: numa janela de 600px de altura,
     100svh daria um hero espremido, então ele volta ao fluxo natural. */
  --hero-min: max(560px, calc(100svh - var(--bar-h)));
  --faixa-h: 66px;
  --bar-linha: 1px;

  --btn-h: 58px;
  --btn-h-compact: 44px;
  --btn-pad-x: 30px;
  --tap-min: 44px;
  --icon-padrao: 28px;
  --seal-circle: 116px;
  --faixa-gap: var(--space-6);
  --passo-num: 44px;
  --conversa-w: 380px;
  /* Retrato 3:4 do bloco "quem esta do outro lado", e nao avatar redondo.
     A largura define, a altura sai do aspect-ratio: 193 x 257 no mobile e
     292 x 389 acima de 1000px. Maior que o avatar de 112px que havia antes
     porque este bloco existe para provar que tem gente de verdade atras da
     marca, e rosto pequeno demais nao prova nada. Subiu 15% em 27/08, a
     pedido, nas tres larguras de uma vez.
     O arquivo tem 600px de largura, que cobre ate 300px de exibicao em
     tela 2x, e os 292px do desktop ja consomem 584 desses 600. Se este
     token passar de 300px, gerar a imagem de novo. */
  --quem-foto-w: 193px;
  --selo: 288px;

  /* A partitura do selo. Ciclo e fase são compartilhados por todas as
     animações do corte: são seis animações separadas que só leem como
     uma cena porque batem no mesmo instante. Mexer aqui move a cena
     inteira; mexer em uma delas sozinha desmonta. */
  --selo-ciclo: 7.2s;
  --selo-fase: -2.35s;
  --selo-giro: 26s;
}

/* ---------- 4. Reset e base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A barra fica fixa em 64px e cobria o topo de todo alvo de âncora,
     inclusive o #topo do clique na logo. No container de rolagem, e não
     em cada seção, para valer também para âncora criada depois. */
  scroll-padding-top: calc(var(--bar-h) + var(--space-4));
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grão sobre a página inteira, sem interceptar clique */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--grao);
  opacity: 0.05;
  mix-blend-mode: multiply;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.02;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.08;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--brand);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-text);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

.section--alt {
  background: var(--bg-alt);
}

.section--brand {
  background: var(--bg-brand);
  color: var(--text-on-brand);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

/* Marca d'água: a logo em opacidade mínima, girada no ângulo da faca.
   Ela vivia embaixo à direita e caía exatamente atrás do último parágrafo da
   seção. Agora mora na faixa vazia à direita do h2, que é o único lugar da
   seção onde não há texto, e só existe onde essa faixa existe: abaixo de
   1024px o h2 ocupa a largura toda. Cabendo inteira dentro do container, ela
   não empurra mais a largura do documento, e a seção não precisa clipar,
   o que devolve a sombra do cartão. */
@media (min-width: 1024px) {
  .section--watermark::before {
    content: "";
    position: absolute;
    top: var(--space-8);
    right: var(--gutter);
    width: 34%;
    max-width: 380px;
    aspect-ratio: 520 / 171;
    background: url("../img/logo.png") center / contain no-repeat;
    opacity: 0.035;
    transform: rotate(-12deg);
    pointer-events: none;
  }
}

/* ---------- Bloco editorial: título à esquerda, conteúdo à direita ----------
   Resolve o efeito de "tudo grudado no meio" das seções que usavam
   só a coluna estreita centralizada. Empilha no celular. */
.bloco {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .bloco {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: var(--space-9);
    align-items: start;
  }

  .bloco__titulo {
    position: sticky;
    top: calc(var(--bar-h) + var(--space-6));
  }
}

.bloco__conteudo {
  min-width: 0;
}

.bloco__conteudo > :first-child {
  margin-top: 0;
}


.section__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}

.section--dark .section__lead {
  color: var(--text-muted-on-dark);
}

/* ---------- 6. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--btn-h);
  padding-inline: var(--btn-pad-x);
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-mid) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
}

.btn--primary {
  background: var(--brand);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}

.btn--primary:active {
  background: var(--brand-active);
  transform: translateY(0) scale(0.985);
}

/* Para uso sobre fundo carmim ou grafite */
.btn--inverse {
  background: var(--creme-100);
  color: var(--brand-deep);
  box-shadow: var(--shadow-inverse);
}

.btn--inverse:hover {
  background: var(--branco);
  transform: translateY(-1px);
}

.btn--inverse:active {
  transform: translateY(0) scale(0.985);
}

.btn--inverse:focus-visible {
  outline-color: var(--focus-on-brand);
}

.btn--compact {
  min-height: var(--btn-h-compact);
  padding-inline: var(--space-5);
  font-size: var(--fs-sm);
  gap: var(--space-2);
  box-shadow: none;
}

.btn--compact svg {
  width: 18px;
  height: 18px;
}

.btn--block {
  display: flex;
  width: 100%;
}

@media (min-width: 640px) {
  .btn--block {
    display: inline-flex;
    width: auto;
  }
}

/* ---------- 8. C1 Barra fixa ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-mid) var(--ease),
    box-shadow var(--dur-mid) var(--ease);
}

.bar.is-stuck {
  border-bottom-color: var(--divider);
  box-shadow: var(--shadow-bar);
}

.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* A linha de baixo entra na conta: --bar-h é a altura total da barra,
     que é o que --hero-min desconta da dobra. Sem isto a barra media
     65px e o hero nascia 1px curto. */
  height: calc(var(--bar-h) - var(--bar-linha));
}

.bar__logo {
  height: 40px;
  width: auto;
}

/* ---------- 9. Hero ----------
   Seletor duplo de propósito. O `.hero` sozinho tinha a mesma
   especificidade de `.section` e perdia para a media query de desktop,
   que reescrevia `padding-block` mais abaixo no arquivo: o padding-top
   menor que alguém escreveu aqui nunca chegou a valer no desktop.
   Com `.section.hero` a intenção do hero vence em qualquer largura. */
.section.hero {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-7);
  /* Sem padding embaixo: quem fecha o hero é a faixa corrida, colada
     na base. O respiro dela para o conteúdo vem do margin-top abaixo. */
  padding-bottom: 0;
  overflow: hidden;
}

/* Cresce para ocupar a dobra e mantém o texto e o selo no centro
   óptico, em vez de empurrados para o topo por um bloco esticado. */
.hero__grid {
  display: grid;
  flex: 1;
  gap: var(--space-8);
  align-items: center;
  align-content: center;
}

/* A faixa era um <div> solto entre o hero e a seção seguinte, sem
   pertencer a nenhum dos dois: por isso lia como um corte no meio da
   primeira tela. Agora é o rodapé do hero e marca onde a dobra acaba. */
.hero__faixa {
  margin-top: var(--space-7);
}

@media (min-width: 768px) {
  /* O hero fecha a primeira dobra. A faixa corrida é o rodapé dele e
     entra na conta, então o que a pessoa vê ao abrir é exatamente
     barra, hero e faixa, sem a seção seguinte vazando por cima. */
  .section.hero {
    /* Navegador sem svh (Safari anterior a 15.4) invalida o calc inteiro
       e o hero perderia a altura de dobra. A primeira declaração é o
       piso; a segunda sobrescreve onde svh existe. */
    min-height: max(560px, calc(100vh - var(--bar-h)));
    min-height: var(--hero-min);
  }
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) auto;
    gap: var(--space-9);
  }
}

/* min-width: 0 evita que um item de grid com texto estoure a coluna */
.hero__texto {
  min-width: 0;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin-top: var(--space-5);
  max-width: 34ch;
}

.hero__cta {
  margin-top: var(--space-6);
}

.hero__nota {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-label);
  color: var(--text-muted);
}

/* ---------- Selo do hero: o carimbo e o corte ----------
   Sete camadas no mesmo viewBox de 200. O que dá vida não é o giro,
   que qualquer badge da internet tem: é a consequência. Quando a faca
   bate, o anel leva impulso, o disco pulsa, o fio acende e ficam três
   riscos no ar. A partitura inteira está em ESTUDO_SELO_HERO.md.
--------------------------------------------------------------------- */

.hero__selo {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--selo);
  height: var(--selo);
  justify-self: center;
}

/* O grão por baixo do disco, que é semitransparente de propósito:
   dá superfície para a faca ter sobre o que cortar. */
.selo__grao {
  position: absolute;
  width: 57%;
  height: 57%;
  border-radius: var(--radius-full);
  background-image: var(--grao);
  /* Sem o multiply o ruído entra como cinza chapado e o disco
     inteiro dessatura, que é o mesmo motivo do multiply lá em cima. */
  mix-blend-mode: multiply;
  opacity: 0.04;
  pointer-events: none;
}

.selo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Sem isto o transform-origin cai no border-box do elemento SVG e
   cada camada gira em torno de um centro diferente. */
.selo__serra,
.selo__aro,
.selo__kick,
.selo__anel,
.selo__pontos,
.selo__disco,
.selo__cortes,
.selo__sombra,
.selo__faca,
.selo__gesto {
  transform-box: view-box;
  transform-origin: 100px 100px;
}

/* ---- 1. Serrilha de carimbo ----
   Vem da mesma linguagem do selo verde da garantia. Gira ao contrário
   do texto: contra-rotação é o jeito mais barato de criar profundidade
   num selo circular, sem sombra e sem blur. */
.selo__serra {
  fill: none;
  stroke: var(--selo-serra);
  stroke-width: 3.4;
  /* 72 dentes na circunferência de 590,6: 1,9 de dente, 6,303 de vão */
  stroke-dasharray: 1.9 6.303;
  animation: girar-atras 72s linear infinite;
  will-change: transform;
}

/* ---- 2. Aro externo: é ele que se desenha na entrada ---- */
.selo__aro {
  fill: none;
  stroke: var(--selo-aro);
  stroke-width: 1.1;
}

/* ---- 3. Anel de texto ----
   O giro base fica na camada de dentro e o impulso do corte na de
   fora, para um não atropelar o outro. */
.selo__anel {
  animation: girar var(--selo-giro) linear infinite;
  will-change: transform;
}

.selo__kick {
  animation: anel-impulso var(--selo-ciclo) var(--ease) infinite;
  animation-delay: var(--selo-fase);
}

/* O letter-spacing aqui não é a última palavra sobre a abertura do
   anel: o textPath no HTML tem textLength, e ele estica a frase até
   fechar a volta sem deixar buraco na emenda. Na prática o
   espaçamento renderizado é maior que este valor, e mexer aqui muda
   a distribuição, não o total. Mudou? o textLength lá tem que ser
   recalculado junto, senão a emenda desiguala de novo. */
.selo__texto {
  fill: var(--brand);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.235em;
  text-transform: uppercase;
}

/* ---- 4. Aro pontilhado interno ---- */
.selo__pontos {
  fill: none;
  stroke: var(--selo-aro-fraco);
  stroke-width: 1.6;
  stroke-linecap: round;
  /* dash de zero com ponta redonda vira ponto: 48 na volta de 389,6 */
  stroke-dasharray: 0.01 8.11;
  animation: girar 44s linear infinite;
  will-change: transform;
}

/* ---- 5. Disco central ---- */
.selo__disco {
  animation: disco-pulso var(--selo-ciclo) var(--ease) infinite;
  animation-delay: var(--selo-fase);
}

.selo__luz {
  fill: none;
  stroke: var(--selo-luz);
  stroke-width: 1;
  opacity: 0.38;
  animation: luz-flash var(--selo-ciclo) linear infinite;
  animation-delay: var(--selo-fase);
}

/* ---- 6. Marcas do fio ----
   Nascem no impacto, desenhadas da ponta para trás, e somem em menos
   de meio segundo. São elas que provam que houve corte. */
.selo__risco {
  fill: none;
  stroke: var(--selo-corte);
  stroke-width: 1.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: risco var(--selo-ciclo) var(--ease) infinite;
  animation-delay: var(--selo-fase);
}

/* Alguns milissegundos de diferença entre os três, sem sair do ciclo */
.selo__risco:nth-child(2) {
  animation-delay: calc(var(--selo-fase) + 55ms);
}

.selo__risco:nth-child(3) {
  animation-delay: calc(var(--selo-fase) + 25ms);
}

/* ---- 7. A faca ----
   Camada de fora respira, camada de dentro corta. A sombra fica fora
   das duas porque precisa se separar do corpo quando a lâmina levanta,
   que é o que dá volume ao gesto. */
.selo__faca {
  animation: faca-respirar 6.8s ease-in-out infinite;
}

.selo__gesto {
  animation: faca-cortar var(--selo-ciclo) infinite;
  animation-delay: var(--selo-fase);
  will-change: transform;
}

.selo__sombra {
  animation: sombra-cortar var(--selo-ciclo) infinite;
  animation-delay: var(--selo-fase);
}

.faca__corpo {
  fill: url(#lamina);
}

/* O borrão vem de um filtro no HTML, num grupo que não anima. Sem
   ele a sombra lê como uma segunda faca, e com ele aplicado no grupo
   que se move seria recalculado a cada frame. */
.faca__sombra {
  fill: var(--faca-sombra);
}

.faca__dorso {
  fill: none;
  stroke: var(--faca-dorso);
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.faca__fio {
  fill: none;
  stroke: var(--faca-fio);
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* A faísca que corre pelo gume. Passa fraca antes do golpe,
   anunciando, e forte no impacto. */
.faca__brilho {
  fill: none;
  stroke: var(--faca-brilho);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.3 1.2;
  stroke-dashoffset: 0.3;
  opacity: 0;
  animation: fio-brilho var(--selo-ciclo) linear infinite;
  animation-delay: var(--selo-fase);
}

/* ---- A partitura ---- */

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@keyframes girar-atras {
  to {
    transform: rotate(-360deg);
  }
}

/* O gesto. Três tempos, que é o que separa um corte de um
   deslocamento: recua, ataca em 180ms sobre o eixo real da lâmina
   (23,6 graus, medido no vetor), e assenta passando do ponto. */
@keyframes faca-cortar {
  0%,
  57% {
    transform: translate(0, 0) rotate(0deg);
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  }
  61.5% {
    transform: translate(-3.2px, 1.4px) rotate(-1.8deg);
    animation-timing-function: cubic-bezier(0.16, 0.9, 0.3, 1);
  }
  64% {
    transform: translate(14.2px, -6.2px) rotate(1.4deg);
    animation-timing-function: ease-out;
  }
  65.2% {
    transform: translate(12.6px, -5.5px) rotate(0.5deg);
    animation-timing-function: cubic-bezier(0.25, 1, 0.4, 1);
  }
  76% {
    transform: translate(-1.3px, 0.55px) rotate(-0.4deg);
    animation-timing-function: var(--ease);
  }
  86% {
    transform: translate(0.4px, -0.18px) rotate(0.12deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* A sombra segue o gesto, mas atrasada e mais aberta: no ataque a
   lâmina levanta, então a sombra se afasta e alivia. */
@keyframes sombra-cortar {
  0%,
  57% {
    transform: translate(1.5px, 2.1px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  }
  61.5% {
    transform: translate(-1.9px, 3.3px);
    animation-timing-function: cubic-bezier(0.16, 0.9, 0.3, 1);
  }
  64% {
    transform: translate(17.4px, -3px);
    opacity: 0.6;
    animation-timing-function: ease-out;
  }
  65.2% {
    transform: translate(14.9px, -2.6px);
    opacity: 0.82;
    animation-timing-function: cubic-bezier(0.25, 1, 0.4, 1);
  }
  76% {
    transform: translate(0.4px, 2.7px);
    opacity: 1;
    animation-timing-function: var(--ease);
  }
  100% {
    transform: translate(1.5px, 2.1px);
    opacity: 1;
  }
}

/* Respiração no repouso. 6,8s de propósito: não é múltiplo de 7,2,
   então os dois nunca caem no mesmo lugar duas vezes. */
@keyframes faca-respirar {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(0.4px, -1.1px) rotate(-0.5deg);
  }
}

/* O empurrão que o corte dá no anel. É o que amarra a faca ao
   carimbo: sem isto, os dois convivem sem se conhecer. */
@keyframes anel-impulso {
  0%,
  63.5% {
    transform: rotate(0deg);
  }
  65.2% {
    transform: rotate(-3.2deg);
  }
  78% {
    transform: rotate(1.1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes disco-pulso {
  0%,
  63.8% {
    transform: scale(1);
  }
  65.5% {
    transform: scale(1.017);
  }
  74% {
    transform: scale(0.998);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes luz-flash {
  0%,
  63.8% {
    opacity: 0.38;
  }
  65% {
    opacity: 0.95;
  }
  73%,
  100% {
    opacity: 0.38;
  }
}

@keyframes risco {
  0%,
  62.8% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  63.6% {
    opacity: 0.95;
  }
  66.5% {
    stroke-dashoffset: 0;
    opacity: 0.95;
  }
  72% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  72.1%,
  100% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
}

/* Duas passagens no mesmo ciclo: a fraca por volta dos 40%, que
   anuncia, e a forte no impacto. */
@keyframes fio-brilho {
  0%,
  38% {
    stroke-dashoffset: 0.3;
    opacity: 0;
  }
  41% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.42;
  }
  54% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
  63.6% {
    stroke-dashoffset: 0.3;
    opacity: 0;
  }
  64.2% {
    opacity: 0.95;
  }
  66.8% {
    opacity: 0.9;
  }
  69% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0.3;
    opacity: 0;
  }
}

/* ---- Entrada ----
   Só sob .js. Quem está sem JavaScript, ou pediu menos movimento,
   recebe o selo já montado, que é o estado padrão do HTML.
   O primeiro corte não é um keyframe extra: ele cai por volta de
   1,8s porque --selo-fase adianta o ciclo em 2,35s. */
.js .selo,
.js .selo__grao {
  animation: surgir 520ms var(--ease) both;
}

.js .selo__aro {
  stroke-dasharray: 552.9;
  stroke-dashoffset: 552.9;
  animation: aro-desenhar 900ms var(--ease) forwards;
}

.js .selo__texto {
  animation: surgir 600ms var(--ease) 400ms backwards;
}

/* A entrada e a respiração encaixam: 550 + 780 = 1330ms, que é
   exatamente o atraso da segunda. */
.js .selo__faca {
  animation: faca-entrar 780ms cubic-bezier(0.18, 0.86, 0.28, 1) 550ms
      backwards,
    faca-respirar 6.8s ease-in-out 1330ms infinite;
}

@keyframes surgir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aro-desenhar {
  to {
    stroke-dashoffset: 0;
  }
}

/* A faca entra pelo próprio eixo, vinda de fora, e corrige a
   inclinação ao pousar. */
@keyframes faca-entrar {
  from {
    transform: translate(-42px, 18px) rotate(-9deg);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* ---- Fora da tela, o selo para ----
   Sete animações contínuas rodando atrás do rodapé é bateria à toa. */
.hero__selo.is-parado * {
  animation-play-state: paused;
}

/* ---- Movimento ligado ao scroll ----
   Nativo, sem listener e sem biblioteca. O range começa em zero, então
   no carregamento o selo está sempre no estado neutro. Onde não houver
   suporte, nada muda e nada quebra. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__selo {
      animation: selo-sair linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 620px;
    }
  }
}

@keyframes selo-sair {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-24px) rotate(8deg);
  }
}

/* ---------- 10. Faixa corrida ---------- */
.faixa {
  /* Altura travada no token porque a faixa é o último bloco da primeira
     dobra: se ela flutuasse com a fonte, o rodapé do hero mudaria de
     lugar e a seção seguinte voltaria a espiar por baixo, que é
     exatamente o que esta rodada corrigiu. */
  display: flex;
  align-items: center;
  min-height: var(--faixa-h);
  overflow: hidden;
  background: var(--bg-brand);
  color: var(--text-on-brand);
  padding-block: var(--space-4);
  user-select: none;
}

.faixa__trilho {
  display: flex;
  /* flex-shrink zerado: a faixa virou um container flex e sem isto o
     trilho encolheria em vez de correr por baixo do overflow. */
  flex: 0 0 auto;
  width: max-content;
}

/* A animação depende da montagem, e não da existência de JavaScript: quem
   duplica o grupo até o trilho cobrir a tela é o script, e um grupo só
   correndo -50% deixa buraco na direita no fim de cada ciclo. Era o que
   acontecia antes desta rodada, com o grupo em 1362px e qualquer monitor
   a partir de 1440. Enquanto a classe não entra, a faixa fica parada e o
   sortimento continua legível. A duração vem do script. */
.faixa.is-cheia .faixa__trilho {
  animation: correr 36s linear infinite;
}

.faixa__grupo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.faixa__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.faixa__item::after {
  content: "";
  width: 12px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
  transform: skewX(-24deg);
}

@keyframes correr {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 11. C4 Item de padrão ----------
   Lista vertical, e não grade de duas colunas. A grade dividia a coluna
   de conteúdo do bloco editorial mais uma vez, e o texto de cada item
   caía para 108px por volta de 900px de viewport, com título em quatro
   linhas de duas palavras. Em coluna única o item usa a faixa inteira e
   título e apoio cabem em uma linha cada acima de 1160px, com altura
   igual por construção, sem precisar alinhar entre colunas.
   Ver DESIGN_SYSTEM.md, seção 29. */
.padroes {
  display: grid;
  gap: var(--space-5);
  margin: var(--section-head-gap) 0 0;
  padding: 0;
  /* Com list-style: none o Safari deixa de anunciar a lista no VoiceOver.
     O role="list" no HTML devolve o que o CSS tirou. */
  list-style: none;
}

.padrao {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: start;
}

/* Filete entre os itens, e não moldura em volta de cada um. Sobre o creme
   qualquer borda da própria família fica em 1,17:1 e desaparece; o que a
   moldura entregava era ruído, não estrutura. O filete é grafite
   transparente, aparece sem virar caixa, e só entre itens: nada de linha
   solta abrindo ou fechando a lista. */
.padrao + .padrao {
  border-top: 1px solid var(--linha);
  padding-top: var(--space-5);
}

/* Sem bolha: o disco de carmim-100 dava 1,04:1 contra o fundo, então não
   era forma, era mancha, e eram quatro manchas competindo com o h2. */
.padrao__icon {
  grid-row: span 2;
  color: var(--brand);
  /* Encosta o ícone na primeira linha do título, e não no topo da caixa. */
  margin-top: 3px;
}

.padrao__icon svg {
  width: var(--icon-padrao);
  height: var(--icon-padrao);
}

.padrao__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0;
}

/* Corpo de texto da página, e não --fs-sm: isto é o conteúdo da seção. O
   texto menor é o recurso que faz um objeto recuar, e aqui nada recua. */
.padrao__desc {
  grid-column: 2;
  font-size: var(--fs-body);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ---------- 12. C5 Cortes ---------- */
.cortes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--section-head-gap);
}

/* No desktop a grade ocupa 90% da largura do container e fica centrada
   nele: cada card sai 10% menor sem furar o alinhamento das duas linhas,
   e o respiro entre eles encolhe junto, senão a grade abre buraco.
   No celular a tela já é estreita, então lá o card continua cheio. */
@media (min-width: 900px) {
  .cortes {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--space-5) * 0.9);
    width: 90%;
    margin-inline: auto;
  }
}

.corte {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-mid) var(--ease),
    box-shadow var(--dur-mid) var(--ease);
}

.corte:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.corte__media {
  position: absolute;
  inset: 0;
}

.corte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O nome vive sobre a foto, com véu escuro só na base */
.corte__info {
  position: absolute;
  inset: auto 0 0 0;
  padding: calc(var(--space-7) * 0.9) calc(var(--space-4) * 0.9)
    calc(var(--space-4) * 0.9);
  background: linear-gradient(
    to top,
    var(--veu-escuro),
    var(--veu-medio) 34%,
    var(--veu-zero) 78%
  );
  color: var(--creme-100);
}

.corte__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.corte__origem {
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--creme-300);
  margin-top: var(--space-1);
}

/* ---------- 13. Placeholder de foto ----------
   Vestido com o grafismo da marca, e não com um retângulo
   tracejado: precisa dar para julgar o design antes da foto.
   A etiqueta continua avisando que a foto falta.
--------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background-color: var(--carmim-100);
  background-image: repeating-linear-gradient(
    114deg,
    transparent 0 18px,
    var(--listra-carmim) 18px 21px
  );
}

.ph::after {
  content: "foto pendente";
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--branco);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- 14. C6 Garantia ----------
   Certificado em tres faixas empilhadas: masthead (selo, nome e promessa),
   as tres coberturas lado a lado, e o rodape de acionamento com o CTA.

   Antes eram duas colunas de alturas muito diferentes. A coluna da esquerda
   terminava na metade do cartao e deixava um quarto do bloco vazio no
   desktop, e as coberturas empilhadas com regua entre elas liam como tabela.
   Faixa horizontal enche a largura inteira e da ao bloco ritmo de documento.
------------------------------------------ */
.garantia {
  position: relative;
  margin-top: var(--section-head-gap);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  background: linear-gradient(
    152deg,
    var(--carmim-600) 0%,
    var(--carmim-800) 100%
  );
  color: var(--text-on-brand);
  overflow: hidden;
  box-shadow: var(--shadow-garantia);
}

/* Faixa 1: promessa a esquerda, selo a direita.

   Centrado, o cartao desperdicava a largura inteira: o texto ficava numa
   coluna de 46ch no meio e sobrava um terco de vermelho vazio de cada lado.

   O selo e dimensionado para ficar perto da altura do bloco de texto. Se ele
   passar muito disso, e ele que define a altura da faixa, e sobra ar em volta
   do texto que nao existe em volta do selo. */
.garantia__topo {
  display: grid;
  gap: var(--space-5);
  padding-bottom: var(--faixa-gap);
  border-bottom: 1px solid var(--borda-tenue);
}

/* No celular o selo cai como carimbo no pe da promessa */
.garantia__selo {
  justify-self: end;
}

@media (min-width: 768px) {
  .garantia__topo {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-7);
  }
}

.garantia__promessa {
  min-width: 0;
}

.garantia__nome + .garantia__frase {
  margin-top: var(--space-4);
}

.garantia__selo {
  display: block;
  flex: 0 0 auto;
  width: var(--seal-circle);
  height: var(--seal-circle);
}

/* ---- O selo em si ----
   Serrilha de moeda na borda, anel com o nome da garantia correndo em volta
   e disco verde com a marca de aprovado. O verde tem um unico lugar no site,
   que e este, entao ele pode carregar o peso de sinalizar seguranca sozinho. */
.selo-g {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(var(--shadow-seal));
}

/* Circulo tracejado no lugar de 38 dentes desenhados um a um */
.selo-g__serra {
  fill: none;
  stroke: var(--creme-100);
  stroke-width: 5;
  stroke-dasharray: 3.4 8.7;
  opacity: 0.34;
}

.selo-g__aro {
  fill: none;
  stroke: var(--creme-100);
  stroke-width: 1.4;
  opacity: 0.42;
}

.selo-g__aro--interno {
  opacity: 0.3;
}

/* textLength trava a volta exata do anel: sem ele, metrica de fonte diferente
   faz o texto sobrar na emenda ou deixar um buraco */
.selo-g__texto {
  fill: var(--creme-100);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
}

.selo-g__topo {
  stop-color: var(--seal-claro);
}

.selo-g__base {
  stop-color: var(--seal);
}

.selo-g__disco {
  fill: url(#selo-verde);
}

.selo-g__marca {
  fill: none;
  stroke: var(--branco);
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.garantia__nome {
  font-size: var(--fs-nome);
  font-weight: 700;
  line-height: 1.15;
  color: var(--branco);
}

.garantia__frase {
  font-size: var(--fs-promessa);
  line-height: 1.6;
  color: var(--creme-100);
  max-width: 42ch;
}

/* Faixa 2: as tres coberturas */
.garantia__coberturas {
  padding-block: var(--faixa-gap);
  border-bottom: 1px solid var(--borda-tenue);
}

.coberturas {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cobertura {
  min-width: 0;
  text-align: center;
}

.cobertura + .cobertura {
  padding-top: var(--space-5);
  border-top: 1px solid var(--borda-tenue);
}

/* Tres colunas separadas por filete vertical. Regua horizontal entre itens
   fazia o bloco parecer planilha.

   O corte e 1000px, e nao os 900px do resto do cartao: abaixo disso a coluna
   fica estreita demais e um dos tres textos quebra em duas linhas, o que
   desiguala as alturas. Empilhado le melhor que coluna torta. */
@media (min-width: 1000px) {
  .coberturas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .cobertura {
    padding-inline: var(--space-4);
  }

  .cobertura + .cobertura {
    padding-top: 0;
    border-top: 0;
    border-inline-start: 1px solid var(--borda-tenue);
  }

  .cobertura:first-child {
    padding-inline-start: 0;
  }

  .cobertura:last-child {
    padding-inline-end: 0;
  }
}

.cobertura__titulo {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--branco);
}

/* A resposta e o que tira o medo, entao ela e a unica linha do caso */
.cobertura__desfecho {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--creme-300);
  margin-top: var(--space-2);
}

/* Faixa 3: como aciona */
.garantia__acionar {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--faixa-gap);
}

@media (min-width: 768px) {
  .garantia__acionar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-7);
  }
}

.garantia__como-texto {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--creme-100);
  max-width: 46ch;
}

.garantia__acionar .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .garantia__acionar .btn {
    width: auto;
  }
}

/* ---------- 15. C7 Passos e C11 Conversa ----------
   A secao escura e a unica que comunica ordem. Ordem nao se diagrama
   em colunas paralelas: e escada vertical com conector.
   Um passo, uma linha. Detalhe que nao cabe aqui vai para o FAQ. */
.funciona {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--section-head-gap);
}

@media (min-width: 900px) {
  .funciona {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
  }
}

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  align-content: center;
}

.passo {
  position: relative;
  display: grid;
  grid-template-columns: var(--passo-num) 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* O fio que liga uma pastilha a proxima. Nunca depois da ultima. */
.passo:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--passo-num) / 2 - 1px);
  top: calc(var(--passo-num) + var(--space-2));
  bottom: calc((var(--space-6) + var(--space-2)) * -1);
  width: 2px;
  background: var(--borda-tenue);
}

.passo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--passo-num);
  height: var(--passo-num);
  border-radius: var(--radius-full);
  background: var(--brand-on-dark);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.passo__texto {
  align-self: center;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-on-dark);
  text-wrap: pretty;
  max-width: 46ch;
}

/* C11. Amostra de conversa
   E um objeto com largura propria dentro da secao, nunca uma coluna
   de conteudo: texto menor que o da pagina, para ler como amostra. */
.conversa {
  margin: 0;
  max-width: var(--conversa-w);
  padding: var(--space-5);
  border: 1px solid var(--borda-tenue);
  border-radius: var(--radius-lg);
  background: var(--superficie-tenue);
}

.conversa__fio {
  display: grid;
  gap: var(--space-3);
}

.conversa__rotulo {
  margin-top: var(--space-4);
  font-size: var(--fs-label);
  font-style: italic;
  color: var(--text-muted-on-dark);
  opacity: 0.65;
}

.bolha {
  margin: 0;
  max-width: 90%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-wrap: pretty;
}

.bolha--voce {
  justify-self: end;
  background: var(--creme-100);
  color: var(--text);
  border-bottom-right-radius: var(--radius-sm);
}

.bolha--nos {
  justify-self: start;
  background: var(--superficie-clara);
  color: var(--text-on-dark);
  border-bottom-left-radius: var(--radius-sm);
}

/* Faixa de acionamento: fecha o bloco escuro em vez de deixar
   vazio embaixo, e da saida para quem ja entendeu que e simples. */
.funciona__acionar {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--borda-tenue);
}

.funciona__frase {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-on-dark);
  text-wrap: balance;
}

.funciona__acionar .btn {
  width: 100%;
}

@media (min-width: 900px) {
  .funciona__acionar {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-7);
  }

  .funciona__acionar .btn {
    width: auto;
  }
}

/* ---------- 16. C8 Quem faz ----------
   O cartao e o componente, e nao a moldura da foto. Antes desta rodada a
   secao era a unica da pagina sem superficie propria: 522px de texto solto
   entre a faixa escura e o FAQ, com 195px de creme morto embaixo do titulo.
   Ver DESIGN_SYSTEM secao 29.

   Sao tres irmaos e tres mapas de area, do celular ao desktop, sem duplicar
   marcacao: tudo empilhado; identidade ao lado do retrato; e o retrato
   descendo pelas duas linhas com o texto em coluna. Um DOM so. */
.quem {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "foto"
    "id"
    "corpo";
  column-gap: var(--space-5);
  row-gap: var(--space-5);
  margin-top: var(--section-head-gap);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--branco);
  box-shadow: var(--shadow-card);
}

.quem__foto {
  grid-area: foto;
  position: relative;
  /* A largura vem do token e nao da coluna, senao no celular, onde o grid tem
     uma coluna so, o retrato estica para a largura inteira do cartao. */
  width: var(--quem-foto-w);
  aspect-ratio: 3 / 4;
  /* Mesmo raio dos cartoes do site, e nao circulo. Avatar redondo lê como
     perfil de rede social; moldura de retrato lê como foto de alguem que
     trabalha ali, que e o que esta secao precisa dizer. Dentro do cartao a
     foto perde a sombra: duas sombras empilhadas leem como adesivo colado. */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-alt);
}

/* O fundo do estudio e cinza claro e o cartao e branco: sem filete, a borda
   da foto some e o retrato le como mancha, e nao como objeto emoldurado.
   Precisa ser ::after porque a imagem esta em position: absolute e cobriria
   qualquer borda posta no proprio .quem__foto. */
.quem__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--divider);
  border-radius: inherit;
}

/* A imagem sai do fluxo para nao levar a altura natural dela (600x800) para
   dentro do grid. No fluxo, ela mandaria na altura da faixa, que e exatamente
   o que a regra da secao 27 proibe. Mesmo recurso do .corte__media. */
.quem__foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* No desktop a moldura deixa de ser 3:4 e passa a ter a altura do texto ao
     lado, entao o cover corta de verdade. Com origem no topo, o que sai e
     barra do jaleco, e nunca o rosto. */
  object-fit: cover;
  object-position: center top;
}

.quem__id {
  grid-area: id;
  min-width: 0;
}

/* Ate 640px a identidade fica embaixo do retrato, e nao ao lado dele. Ao lado,
   a coluna nao passa de 166px num iPhone, e "[FUNCAO], Carne Ja" quebra em
   duas linhas com o "Ja" sozinho. Nome de socio de verdade quebraria pior. */
@media (min-width: 640px) {
  .quem {
    grid-template-columns: var(--quem-foto-w) minmax(0, 1fr);
    grid-template-areas:
      "foto  id"
      "corpo corpo";
  }

  .quem__id {
    align-self: center;
  }
}

.quem__name {
  font-family: var(--font-display);
  font-size: var(--fs-nome);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.quem__role {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.quem__body {
  grid-area: corpo;
  display: grid;
  gap: var(--space-5);
  align-content: start;
  justify-items: start;
  min-width: 0;
}

/* Sem filete vertical. Ele custava 27px de recuo e dava tres bordas esquerdas
   diferentes no mesmo bloco, e em carmim-100 sobre creme nem aparecia (1,1:1).
   O que separa a fala do apoio agora e peso e cor, nao ornamento. */
.quem__fala {
  margin: 0;
  font-size: var(--fs-promessa);
  line-height: 1.6;
  max-width: 46ch;
}

.quem__acionar {
  justify-self: stretch;
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
}

.quem__acionar .btn {
  width: 100%;
}

.quem__apoio {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 54ch;
}

@media (min-width: 640px) {
  .quem__acionar .btn {
    width: auto;
    justify-self: start;
  }
}

/* Duas colunas ja no tablet. Empilhado ate 1000px deixava meia tela de branco
   a direita do retrato, e isso e o buraco da secao 26 deitado. O que fazia a
   coluna de texto colapsar naquela faixa nao era o breakpoint: era o respiro
   de desktop (48/64) dentro de um cartao de 688px. Com o respiro de celular
   ela fecha em 408px, que da tres linhas de fala. */
@media (min-width: 768px) {
  .quem {
    /* Sobe junto com a janela para o retrato nao ficar fatiado: a foto e
       recortada pela altura do texto ao lado, entao quanto mais estreito o
       cartao, mais alta e magra ela fica. Aos 768px a razao fecha em 1:2, que
       e o limite do que ainda le como retrato. */
    --quem-foto-w: clamp(240px, 29vw, 290px);
    grid-template-areas:
      "foto id"
      "foto corpo";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-6);
  }

  /* O retrato sangra ate as bordas do cartao. Ele ocupava 23% da area com 64px
     de respiro ate a borda esquerda, e o respiro lia como moldura de tabela.
     Sangrando, ele passa a 35% sem o cartao crescer um pixel: o que a foto
     ganha e exatamente o padding que ja estava ali, parado. */
  .quem__foto {
    aspect-ratio: auto;
    margin: calc(var(--space-6) * -1) 0 calc(var(--space-6) * -1)
      calc(var(--space-5) * -1);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  /* So a borda direita faz fronteira com o branco do cartao. As outras tres
     encostam na borda do proprio cartao, e filete em cima de borda lê como
     risco. */
  .quem__foto::after {
    border-width: 0 1px 0 0;
  }

  .quem__id {
    align-self: start;
  }
}

@media (min-width: 1000px) {
  .quem {
    /* O retrato deixou de ser recortado pela coluna de texto. Ate 27/08 a
       largura era calculada para que a altura ditada pelo texto caisse em
       3:4 (338 x 3/4 = 253,5, dai os 254px). Com o pedido de aumentar o
       retrato em 15% essa amarra nao servia mais: crescer so na largura
       daria 292 x 338, ou seja 1:1,16, que nao le como retrato. Agora a
       proporcao e declarada e a foto manda na altura do cartao.
       292 x 4/3 = 389, e sobram ~51px abaixo da coluna de texto. */
    --quem-foto-w: 346px;
    max-width: 1000px;
    column-gap: var(--space-7);
    padding: var(--space-7) var(--space-8);
  }

  /* O respiro do cartao dobra aqui (48/64), entao a sangria dobra junto.
     E aqui NAO entra aspect-ratio: a altura do retrato e a do cartao, que por
     sua vez e a do texto ao lado. Fixar 3:4 devolveria o comando da faixa para
     a foto, que e o que a regra da secao 27 proibe. O 3:4 sai do par
     346 x 460, medido, e nao de uma declaracao. */
  .quem__foto {
    margin: calc(var(--space-7) * -1) 0 calc(var(--space-7) * -1)
      calc(var(--space-8) * -1);
  }
}

/* ---------- 17. C9 Perguntas ---------- */
.faq {
  margin-top: var(--section-head-gap);
  border-top: 1px solid var(--divider);
}

.faq__item {
  border-bottom: 1px solid var(--divider);
  /* Cada pergunta é endereçável por link. Sem isto a barra fixa come
     o topo do item quando alguém chega por /#faq-regiao. */
  scroll-margin-top: calc(var(--bar-h) + var(--space-5));
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding-block: var(--space-5);
  /* A faixa de hover cobre a linha inteira, e não só o texto: o alvo
     clicável é a linha, então o retorno visual também tem que ser. */
  padding-inline: var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    padding-bottom var(--dur-mid) var(--ease);
}

@media (hover: hover) {
  .faq__q:hover {
    color: var(--brand);
    background: var(--listra-carmim);
  }
}

/* No celular não existe hover. O toque precisa devolver alguma coisa
   no instante em que o dedo encosta, senão a lista parece travada. */
.faq__q:active {
  background: var(--listra-carmim);
}

/* O foco global tem offset positivo e vazaria por cima dos divisores.
   Aqui ele fica por dentro da faixa, no mesmo raio dela. */
.faq__q:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

/* A pergunta aberta fica carmim: é o que diz de relance qual resposta
   está na tela, sem depender só do sentido da seta. */
.faq__item[open] > .faq__q {
  color: var(--brand);
  /* A resposta sobe e encosta na sua pergunta. O respiro grande fica
     depois dela, antes do próximo item: é isso que faz pergunta e
     resposta se lerem como um par, e não como duas linhas soltas. */
  padding-bottom: var(--space-2);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--brand);
  transition: transform var(--dur-mid) var(--ease);
}

.faq__item[open] .faq__q svg {
  transform: rotate(180deg);
}

/* Abertura animada com o elemento nativo, sem uma linha de JavaScript.
   Onde o navegador não conhece ::details-content nem interpolate-size,
   a resposta simplesmente aparece de uma vez, como antes. Quem pediu
   menos movimento cai no `transition: none` global da seção 20. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size var(--dur-mid) var(--ease),
      opacity var(--dur-mid) var(--ease),
      content-visibility var(--dur-mid) allow-discrete;
  }

  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  /* O `transition: none` da seção 20 usa `*, *::before, *::after`, e o
     seletor universal não alcança ::details-content. Sem esta regra, é a
     única coisa do site que continuaria se mexendo para quem pediu menos
     movimento. Verificado no Chrome com reduced-motion emulado. */
  @media (prefers-reduced-motion: reduce) {
    .faq__item::details-content {
      transition: none;
    }
  }
}

/* Proximidade: a resposta cola na sua pergunta e o respiro grande fica
   entre um item e outro. Antes eram 24px dos dois lados e os pares não
   se liam como pares. */
.faq__a {
  margin-top: 0;
  padding-bottom: var(--space-6);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 60ch;
}

/* Cor sozinha não pode ser o único sinal de que ali tem um link, ainda
   mais carmim dentro de um parágrafo já colorido de cinza. */
.faq__a a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}

/* Rota de saída: quem chegou até aqui com uma dúvida que a lista não
   cobre precisa de um caminho. É link de texto, e não botão, porque o
   CTA cheio da seção seguinte vem logo abaixo e os dois brigariam. */
.faq__saida {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.faq__saida a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* Link em linha herda a altura da linha e fica com 20px de alvo. A
     exceção de alvo em linha do WCAG cobre isso, mas este é o CTA de
     quem não achou a resposta, e no celular ele precisa ser fácil de
     acertar. Padding em elemento de linha aumenta a área de toque sem
     empurrar o layout, e não há outro alvo por perto para conflitar. */
  padding-block: var(--space-2);
}

/* ---------- 18. Fechamento ---------- */
.fechamento {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.fechamento::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    114deg,
    transparent 0 34px,
    var(--listra-clara) 34px 40px
  );
  pointer-events: none;
}

.fechamento .container {
  position: relative;
}

.fechamento h2 {
  margin-inline: auto;
  max-width: 18ch;
}

.fechamento .btn {
  margin-top: var(--space-6);
}

.fechamento__nota {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--creme-300);
}

/* ---------- 19. C10 Rodapé ---------- */
.rodape {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-6);
}

.rodape__topo {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rodape__logo {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: var(--space-4);
}

.rodape__legal {
  font-size: var(--fs-sm);
  color: var(--text-muted-on-dark);
}

.rodape__legal > * + * {
  margin-top: var(--space-1);
}

.rodape__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--grafite-600);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.rodape__legal a:hover {
  text-decoration-color: currentColor;
}

.rodape__legal a:focus-visible {
  outline-color: var(--focus-on-brand);
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--grafite-600);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.rodape__links a:hover {
  text-decoration-color: currentColor;
}

.rodape__links svg {
  width: 18px;
  height: 18px;
}

.rodape__links a:focus-visible {
  outline-color: var(--focus-on-brand);
}

.rodape__base {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--grafite-600);
  font-size: var(--fs-label);
  color: var(--text-muted-on-dark);
}

/* ---------- 19b. Páginas legais ----------
   Política de privacidade e trocas e devoluções. São páginas de texto
   corrido, e é a única parte do site que se lê de cima a baixo em vez de
   percorrer.

   Por isso a coluna é a estreita (--container-text, 680px) e não a larga:
   linha longa demais faz o olho perder a volta, e aqui a leitura é
   sequencial de verdade. O resto (barra, rodapé, tipografia, cor) é o
   mesmo da home, reaproveitado, para o visitante não sentir que saiu do
   site ao clicar num link do rodapé. */

.legal {
  padding-block: var(--space-9) var(--space-8);
}

.legal__cabecalho {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--space-7);
}

.legal__data {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Cada bloco numerado. A margem grande em cima é o que separa um assunto
   do outro sem precisar de régua entre eles. */
.legal h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p,
.legal li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
}

.legal p + p,
.legal ul + p,
.legal p + ul {
  margin-top: var(--space-4);
}

.legal ul {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.legal li::marker {
  color: var(--brand);
}

.legal a:not(.btn) {
  color: var(--brand);
  font-weight: 600;
}

/* Aviso destacado: o que muda a vida do visitante e ele não pode perder
   folheando. Fundo e não só negrito, porque negrito no meio de texto
   corrido some. */
.legal__nota {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  border-left: 3px solid var(--brand);
}

.legal__nota p {
  font-size: var(--fs-sm);
}

.legal__voltar {
  display: inline-block;
  margin-top: var(--space-8);
  font-weight: 600;
  color: var(--brand);
}

/* ---------- 19c. Blog ----------

   Herda quase tudo das páginas legais: a mesma coluna estreita, a mesma
   escala de título, o mesmo bloco de aviso. O que o blog acrescenta é a
   tabela de preço e a assinatura, e nada além disso ganhou componente
   novo de propósito: post é texto, e o sistema já sabe emoldurar texto.

   A coluna é estreita porque a leitura é longa. 68ch é a medida clássica
   de linha confortável, e aqui ela cai antes do container padrão. */
.post {
  padding-block: var(--space-9) var(--space-8);
}

.post__cabecalho h1,
.legal__cabecalho h1 {
  font-size: var(--fs-titulo);
  line-height: 1.12;
}

.post__cabecalho {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--space-7);
}

.post__data {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* A resposta direta, logo abaixo do H1. Ela existe por dois motivos que
   apontam para o mesmo lugar: é o que a pessoa apressada lê, e é o
   parágrafo que os motores de busca e as IAs extraem para montar a
   resposta. Por isso é maior que o corpo e vem antes de qualquer
   contexto. Mudar isso para "introdução" quebra as duas coisas. */
/* Dois seletores de classe de proposito: `.post p` vem depois no arquivo
   e empata em forca com `p.post__resposta`, entao a regra generica de
   paragrafo ganhava e a resposta saia com 16px, do tamanho do corpo. */
.post p.post__resposta {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}

.post h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

/* `.prosa` entra aqui junto: é o mesmo texto corrido, servido fora do
   `.post` (nas seções das páginas de kit). Compartilhar o seletor evita
   as duas divergirem no primeiro ajuste de entrelinha. */
.post p,
.post li,
.prosa p,
.prosa li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
}

.post p + p,
.post ul + p,
.post p + ul,
.prosa p + p,
.prosa ul + p,
.prosa p + ul {
  margin-top: var(--space-4);
}

.post ul {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.post li::marker {
  color: var(--brand);
}

/* O `:not(.btn)` nao e preciosismo, e conserto de um defeito que esteve
   no ar: `.post a` tem especificidade 0,1,1 e vence `.btn--primary`, que
   e 0,1,0 e ainda vem antes no arquivo. O resultado era texto carmim
   sobre fundo carmim, 1:1 de contraste, botao com a forma certa e sem
   uma palavra legivel. A mesma armadilha vale para qualquer componente
   com cor propria que caia dentro de uma pagina de texto, entao a regra
   de link so governa link de texto. */
.post a:not(.btn),
.prosa a:not(.btn) {
  color: var(--brand);
  font-weight: 600;
}

/* A tabela é o produto do observatório, e ela tem 5 colunas num celular de
   360px. Rolagem lateral no contêiner, nunca na página: a alternativa é
   empilhar cada linha em cartão, e aí some justamente a comparação entre
   cortes, que é o motivo de a tabela existir. */
.post__tabela {
  margin-top: var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post__tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.post__tabela th,
.post__tabela td {
  padding: var(--space-3) var(--space-2);
  text-align: right;
  border-bottom: 1px solid var(--linha);
}

/* Nowrap SO no numero. Com nowrap na tabela inteira, "Filé de peito de
   frango" e "Mais barato" viravam colunas de 185px e a tabela media
   1057px dentro de uma coluna de 606px: rolava lateralmente num desktop
   com meia tela sobrando. O numero e curto e nunca deve quebrar; o resto
   pode. */
.post__tabela td,
.post__tabela thead th {
  white-space: nowrap;
}

.post__tabela th:first-child,
.post__tabela td:first-child,
.post__tabela thead th:first-child {
  text-align: left;
  white-space: normal;
  padding-left: 0;
}

.post__tabela th:last-child,
.post__tabela td:last-child {
  padding-right: 0;
}

.post__tabela thead th {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom-width: 2px;
}

/* A mediana é a coluna que a pessoa procura. Ela é a única em carmim, e
   por isso o resto da tabela é grafite: dois destaques é nenhum. */
.post__tabela td.mediana {
  font-weight: 700;
  color: var(--brand);
}

/* A tabela de composicao de kit tem coluna de TEXTO, que a tabela de preco
   do blog nao tem.

   O `white-space: nowrap` do bloco acima existe para numero nao quebrar, e
   e a regra certa para uma tabela de cinco colunas de preco. Aplicado a uma
   frase, ele transforma "Peca inteira, com capa de gordura" numa coluna de
   400px: a tabela sai rolando no celular e a coluna que explica o item fica
   escondida fora da tela. Foi o que aconteceu na primeira versao destas
   paginas.

   O alinhamento tambem muda: numero se le alinhado a direita, texto nao. */
.post__tabela--texto th,
.post__tabela--texto td {
  white-space: normal;
  text-align: left;
}

/* A unica coluna em que o nowrap continua ganhando: a quantidade. "3,5 kg"
   partido entre duas linhas nao ajuda ninguem. */
.post__tabela--texto td:nth-child(2) {
  white-space: nowrap;
}

.post__tabela caption {
  caption-side: bottom;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: left;
}

.post__nota {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  border-left: 3px solid var(--brand);
}

.post__nota p {
  font-size: var(--fs-sm);
}

/* Assinatura. Não é enfeite: post sem autor identificável é o formato de
   que o Google e os modelos mais desconfiam, e num texto sobre preço de
   comida é o nome de alguém que responde pelo número. */
.post__assinatura {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--linha);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.post__foto {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
}

.post__assinatura p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.post__assinatura strong {
  color: var(--text);
}

.post__voltar {
  display: inline-block;
  margin-top: var(--space-8);
  font-weight: 600;
  color: var(--brand);
}

/* O índice do blog. Lista, não grade: são poucos posts e a data importa
   mais que a miniatura, que nem existe.

   Ele já foi compartilhado com o índice de kits, e deixou de ser: o card
   de kit ganhou foto e passou a ser outra coisa. Componente compartilhado
   só se sustenta enquanto os dois usos são a mesma coisa. */
.blog__lista {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.blog__item {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--linha);
}

.blog__item:last-child {
  border-bottom: 0;
}

.blog__item h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

/* Sem sublinhado permanente: numa lista curta, titulo grifado em bloco
   e ruido, e o item inteiro ja se le como link. O grifo volta no hover,
   que e onde ele informa alguma coisa. */
.blog__item h2 a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.blog__item h2 a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* A data e uma linha propria acima do resumo, nao um pedaco do titulo. */
.blog__item .post__data {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.blog__item p {
  font-size: var(--fs-body);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .post__tabela table {
    font-size: var(--fs-body);
  }

  .post__tabela th,
  .post__tabela td {
    padding: var(--space-3) var(--space-4);
  }

  /* Se ainda faltar espaço, quem quebra é o cabeçalho, não o dado. */
  .post__tabela thead th {
    white-space: normal;
  }
}

/* ---------- 19d. Páginas de kit ----------

   A página de kit não é uma página de texto com foto: é uma página de
   produto num site cuja regra nº 1 diz que aparência é o atributo nº 1 de
   decisão de compra de carne, e que o sistema existe para emoldurar foto.

   Por isso ela usa o vocabulário da home, e não o do blog: seções de
   largura cheia com fundo alternado, a grade `.corte`, a lista `.padroes`,
   o certificado da garantia e o fechamento em carmim. O que entra aqui é
   só o que faltava, e nada disso tem fundo próprio de card, pela regra da
   seção 2.3 do DESIGN_SYSTEM.

   A primeira versão destas páginas era uma coluna de texto de 680px com
   nove `h2` iguais em fila e uma foto. Está registrado na seção 33.
--------------------------------------------------------------- */

/* ---- O hero ----
   Texto à esquerda, a caixa montada à direita. O CTA fica dentro da
   primeira dobra: numa página de produto o caminho de compra não pode
   depender de a pessoa chegar ao fim. */
.kit-hero {
  padding-bottom: var(--space-8);
}

.kit-hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .kit-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-9);
  }
}

.kit-hero__texto {
  min-width: 0;
}

/* A linha de medida vem ANTES do H1, e é o único lugar do site que faz
   isso. Numa página de produto ela é a etiqueta da caixa: peso, itens e
   para quantos dá, lidos antes do nome. O eyebrow saiu do site em 27/08
   e isto não é o eyebrow de volta: aquele era rótulo de seção em caixa
   alta, este é dado. */
.kit-hero__medida {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
}

/* Entre o título do blog e o hero da home. Com `--fs-titulo` (46px) o
   H1 saía MENOR que o h2 das seções (48px), que é hierarquia invertida:
   numa página de produto o nome do produto tem que ser a maior coisa da
   tela. O clamp evita um token novo para um uso só. */
.kit-hero h1 {
  font-size: clamp(34px, 1.6rem + 2.2vw, 58px);
  line-height: 1.06;
}

.kit-hero__resposta {
  margin-top: var(--space-5);
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.kit-hero__cta {
  margin-top: var(--space-6);
}

.kit-hero__nota {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* A foto do kit montado. Quadrada porque as quatro são flat-lay do
   cardápio, e porque quadrado é o que equilibra uma coluna de texto ao
   lado sem virar o assunto da tela. */
.kit-hero__foto img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* No índice o hero é só texto, e a faixa de foto vem logo abaixo. */
.kit-hero--indice {
  padding-bottom: 0;
}

.kit-hero--indice .kit-hero__resposta {
  max-width: 62ch;
}

/* ---- A grade de itens ----
   Um card por item da caixa: foto quadrada, nome, peso e como o corte
   vem. É o mesmo desenho do card de kit, uma medida menor.

   ⚠️ A primeira versão usou o `.corte` da home, que põe o nome sobre a
   foto com véu escuro na base. Não funcionou, e o motivo é a foto, não o
   componente: as 19 fotos de corte são de estúdio, com a peça centrada
   sobre creme liso. O véu que na home cai sobre bancada de madeira e se
   dissolve, aqui vira uma barra preta sobre creme, e ainda cobre a base
   da peça. Sobre foto clara e chapada, o texto vai embaixo.

   Quadrado e não 4:5 porque as fotos foram assadas entre 1,00 e 1,36, e
   o 4:5 cortaria 40% da largura de uma peça que ocupa o meio do quadro.
   A proporção do quadro é parâmetro do tratamento, e não propriedade do
   arquivo: é a mesma lição que está no README das peças de kit. */
.kit__grade--itens {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
}

@media (min-width: 720px) {
  .kit__grade--itens {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* O número de colunas do desktop é função do número de itens, e é a mesma
   conta das peças de kit em PDF: a grade tem que fechar sem sobrar célula
   solta. Quatro colunas para 7 e 8 itens; cinco para 5 e 10, que assim
   fecham em uma e em duas linhas cheias. Com quatro colunas fixas, o Kit
   Churrasco terminava com o pão de alho sozinho ao lado de três células
   vazias. */
@media (min-width: 1024px) {
  .kit__grade--itens {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6) var(--space-5);
  }

  .kit__grade--c5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.kit__grade--itens .kit__card {
  gap: var(--space-3);
}

.kit__grade--itens .kit__card-texto h3 {
  font-size: var(--fs-body);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.kit__grade--itens .kit__card-texto p {
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* O peso em carmim, e não em cinza: é o dado que a pessoa procura no
   card, e é o mesmo tratamento da linha de medida do hero. */
.kit__peso {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
}

/* ---- "Os outros kits", no pé da página de kit ----
   Card deitado, e não a mesma coluna do índice. Em pé, com duas colunas
   de 556px, dois quadrados de 516px de altura fecham a página com mais
   foto do que o kit que a pessoa veio ver. Deitado, o bloco inteiro cabe
   numa dobra e continua sendo uma saída, não um segundo assunto. */
.kit__grade--compacta .kit__card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .kit__grade--compacta .kit__card {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .kit__grade--compacta .kit__card {
    grid-template-columns: 152px minmax(0, 1fr);
  }
}

/* ---- Os três números ---- */
.kit__numeros {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.kit__numero {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.kit__numero b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
}

.kit__numero span {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-muted);
}

/* Serve à legenda de foto e à nota de cálculo: é a mesma coisa nos dois
   lugares, uma linha de apoio em cinza, menor que o corpo. */
.kit__legenda {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---- A faixa de foto de largura total ----
   Não explica nada, e não precisa: separa o inventário do argumento, e é
   onde a página respira. Sem `100vw` e sem margem negativa, que é o
   truque que devolve rolagem horizontal na largura da barra de rolagem:
   ela é um irmão das seções, e ocupa a largura do próprio pai. */
.kit__faixa-foto img {
  width: 100%;
  height: clamp(180px, 30vw, 380px);
  object-fit: cover;
  object-position: center 55%;
}

.kit__faixa-foto--topo {
  margin-top: var(--section-pad);
}

/* ---- Os cards de kit ----
   Foto em cima, nome, medida e resumo embaixo. Difere do card de corte
   de propósito: ali a foto é o conteúdo e o nome é etiqueta; aqui o
   texto é metade do argumento e não cabe sobre um véu. */
.kit__grade {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--section-head-gap);
}

@media (min-width: 720px) {
  .kit__grade--dois {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

.kit__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.kit__card-foto {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-mid) var(--ease),
    box-shadow var(--dur-mid) var(--ease);
}

a.kit__card-foto:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.kit__card-foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.kit__card-texto h3 {
  font-size: var(--fs-h3);
}

/* Sem sublinhado permanente: com a foto logo acima, o card inteiro já se
   lê como um destino. O grifo volta no hover, que é onde ele informa. */
.kit__card-texto h3 a {
  color: var(--text);
  text-decoration: none;
}

.kit__card-texto h3 a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.kit__card-texto .post__data {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.kit__card-texto p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-muted);
}

.kit__saida {
  margin-top: var(--space-7);
  max-width: 68ch;
}

/* ---- A grade de quatro, que é a da home ----
   Não é `--dois`. Com duas colunas, os quatro kits fecham em dois pares de
   cards de 556px, e a seção passa a ocupar quatro dobras no meio de uma
   página que ainda tem cinco seções pela frente: o kit vira o assunto da
   home inteira, e não a seção mais importante dela. Em quatro colunas o
   bloco cabe numa dobra e lê como a prateleira que é.

   O passo do meio é 560px e não os 720px do `--dois`: em duas colunas o
   card fica com 260px na largura em que o `--dois` ainda estaria numa
   coluna só, e 260px é a mesma medida que o card tem no desktop. */
@media (min-width: 560px) {
  .kit__grade--quatro {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .kit__grade--quatro {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

/* ---- A saída da seção de kits ----
   A frase à esquerda, o botão à direita. É a mesma faixa de acionamento da
   garantia, do "Como funciona" e do "Quem está do outro lado", e por isso
   não inventa desenho: o que muda entre elas é o fundo, não a estrutura. */
.kit__acionar {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 720px) {
  .kit__acionar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
  }
}

.kit__acionar .kit__saida {
  margin-top: 0;
}

/* ---- Prosa dentro de seção ----
   `.prosa` não tem regra própria de parágrafo: ela entra nos seletores do
   `.post`, lá em cima, porque é literalmente o mesmo texto corrido. Se um
   dia a entrelinha do blog mudar, ela muda aqui junto, que é o
   comportamento certo. O que sobra é o respiro depois da tabela. */
.prosa .post__tabela + p {
  margin-top: var(--space-6);
}

/* ---------- 19e. A calculadora de churrasco ----------

   Uma página-ferramenta, e não uma página de texto: o que a pessoa veio
   fazer é digitar um número e receber outro. Por isso o instrumento vive
   numa seção `--alt` inteira, logo abaixo do H1, e não dentro de um card
   com fundo próprio: a família creme é vizinha (seção 2.3 do
   DESIGN_SYSTEM), superfície clara sobre fundo claro não separa nada, e
   quem separa aqui é a alternância de seção e um filete.

   Nada aqui depende de JavaScript para existir. O painel de resultado já
   vem preenchido no HTML com o caso dos campos padrão, e a tabela de
   referência logo abaixo responde a pergunta inteira sem uma linha de
   script: crawler de IA lê o HTML e não executa nada.
--------------------------------------------------------------- */

.calc {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

/* Campos à esquerda, resposta à direita, e o filete entre as duas
   colunas é o que faz o papel que um fundo de card faria. Abaixo de
   900px eles empilham e o filete vira horizontal, porque na vertical a
   resposta vem depois da pergunta, que é a ordem de leitura certa. */
@media (min-width: 900px) {
  .calc {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-9);
    align-items: start;
  }
}

.calc__campos {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.calc__campo {
  display: grid;
  gap: var(--space-2);
}

.calc__campo label,
.calc__grupo legend {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.calc__apoio {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* O campo de número usa o controle nativo, com os degraus do próprio
   navegador. Um par de botões de mais e menos seria mais bonito e
   morreria sem JavaScript, que é justamente o visitante que esta página
   não pode perder. */
.calc__num {
  width: 100%;
  max-width: 160px;
  min-height: 56px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-nome);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.calc__num:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--brand);
}

.calc__grupo {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.calc__grupo legend {
  padding: 0;
  margin-bottom: var(--space-3);
}

.calc__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* O rádio de verdade continua lá, escondido pelo `.sr-only` e não pelo
   `display: none`: assim ele recebe foco, teclado e leitor de tela de
   graça, e a pastilha ao lado é só a roupa dele. */
.calc__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--radius-full);
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  touch-action: manipulation;
}

.calc__chip:hover {
  border-color: var(--brand);
}

.calc__radio:checked + .calc__chip {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
}

.calc__radio:focus-visible + .calc__chip {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- A resposta ---- */
.calc__resultado {
  padding-top: var(--space-6);
  border-top: 1px solid var(--linha);
  min-width: 0;
}

@media (min-width: 900px) {
  .calc__resultado {
    padding-top: 0;
    padding-left: var(--space-8);
    border-top: 0;
    border-left: 1px solid var(--linha);
  }
}

.calc__rotulo {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* O número é a página inteira em um elemento só. Ele cresce com a tela
   pelo mesmo clamp do H1 da página de kit, e não por um token novo. */
.calc__total {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(40px, 2rem + 3vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--brand);
}

/* A entrelinha de 1,05 do número não serve para a linha de baixo: com 68px
   em cima, o rabo do "g" de "kg" encostava em "de carne para 8 adultos". */
.calc__total span {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--text);
}

.calc__frase {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}

/* Os quatro tipos de carne. Duas colunas no celular e quatro a partir de
   560px: com uma coluna só a lista vira uma escada de oito linhas e
   afasta o kit sugerido da resposta. */
.calc__tipos {
  /* `ul` sem reset chega com 40px de recuo e margem de 1em embaixo. O
     `role="list"` no HTML devolve a semântica que o `list-style: none`
     tira do VoiceOver, que é a mesma regra da lista do padrão. */
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  padding-top: var(--space-5);
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 560px) {
  .calc__tipos {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Sem grupo nenhum na conta, a lista some em vez de mostrar quatro zeros.
   `display: grid` vence o `display: none` que o atributo carrega. */
.calc__tipos[hidden] {
  display: none;
}

.calc__tipo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.calc__tipo b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.calc__tipo span {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-muted);
}

/* ---- Os desfechos ----
   São cinco, todos escritos no HTML, cada um com o seu `wa.me` completo
   e o seu `data-wa`. O JavaScript só troca qual está `hidden`: ele não
   monta link nenhum, que é a regra do site desde 09/09/2026, e é o que
   faz um crawler que não executa script encontrar o número mesmo assim.

   O `[hidden]` precisa da regra explícita porque `display: grid` vence
   o `display: none` que o atributo carrega por padrão. */
.calc__painel {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--linha);
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.calc__painel[hidden] {
  display: none;
}

.calc__painel p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}

.calc__painel .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .calc__painel .btn {
    width: auto;
  }
}

/* A nota de cálculo fica embaixo das duas colunas, e sem teto ela atravessa
   os 1160px do container: 130 caracteres por linha, contra os 60 que a
   seção 3.2 do DESIGN_SYSTEM permite. */
.calc__nota {
  max-width: 70ch;
}

/* ---- A tabela de referência ----
   Ela é o conteúdo que sobrevive sem JavaScript, e é também de onde saem
   as páginas "para N pessoas". Três colunas de propósito: com a coluna do
   kit junto, a tabela passava de 360px e saía rolando, que foi o defeito
   nº 34 das páginas de kit. O kit vira uma linha de texto embaixo. */
.calc__tabela td:first-child,
.calc__tabela th:first-child {
  font-weight: 600;
}

/* O cabeçalho quebra desde o celular, e não só a partir de 768px como no
   resto do site. "Com acompanhamento" em nowrap vira uma coluna de 140px
   e a tabela inteira estoura os 280px que sobram numa tela de 320px. Aqui
   o dado é curto ("8 kg") e o rótulo é longo: quem quebra é o rótulo. */
.calc__tabela thead th {
  white-space: normal;
}

/* ---------- 20. Movimento ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .faixa__trilho {
    animation: none;
    transform: none;
  }

  /* O selo não pode parar pela metade. Sem isto ele congela na posição
     inicial de cada camada, que não é composição nenhuma: aro pela
     metade, sombra escondida atrás do corpo, fio apagado. Quem pediu
     menos movimento recebe o selo parado num estado desenhado. */
  .selo__aro {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .selo__sombra {
    transform: translate(1.5px, 2.1px);
  }

  .faca__brilho {
    stroke-dashoffset: -0.5;
    opacity: 0.5;
  }

  .selo__luz {
    opacity: 0.45;
  }

  .selo__risco {
    opacity: 0;
  }
}

/* ---------- 21. Desktop ---------- */
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --fs-hero: 76px;
    --fs-titulo: 46px;
    --fs-h2: 48px;
    --fs-h3: 21px;
    --fs-nome: 30px;
    --fs-promessa: 21px;
    --seal-circle: 120px;
    --faixa-gap: var(--space-7);
    --fs-lead: 20px;
    --selo: 396px;
  }

  .hero__lead {
    max-width: 42ch;
  }

  .garantia {
    padding: var(--space-7) var(--space-8);
  }

  .rodape {
    padding-block: var(--space-7);
  }

  .rodape__topo {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
  }

  .rodape__links {
    justify-content: flex-end;
    gap: var(--space-2) var(--space-6);
  }

  /* No desktop o alvo de toque de 44px desalinharia os links da linha da logo */
  .rodape__links a {
    min-height: auto;
    padding-block: var(--space-1);
  }
}