/*
 * Loja MESHBOX — folha de estilo única (mobile-first, sem framework).
 *
 * Redesenho de 19/10/2026: o sistema visual é o do MODELO aprovado pelo cliente (a prévia estática de
 * página única entregue ao Antônio). O modelo passa a VESTIR o e-commerce de 13 páginas — o e-commerce
 * não vira a landing. Direção de arte do modelo: papel cru, tinta verde-escura, ouro só na ação;
 * Manrope nos títulos (tracking muito fechado, h1 em duas vozes), DM Sans no corpo, Georgia itálico no
 * <em>; fotografia grande e escura; linha fina de 1px separando os blocos.
 *
 * COR: os seis tokens do modelo vieram do HEX para OKLCH com a cor percebida IDÊNTICA (cada conversão
 * foi conferida de volta para HEX, byte a byte — o valor original está no comentário de cada linha).
 * Duas exceções, declaradas: `--tinta-suave` e `--foco` são um passo mais escuros no MESMO tom, porque
 * os valores do modelo (#777b70 em texto corrido = 3,83:1; #b58e42 no anel de foco = 2,69:1) reprovam
 * no AA e no 1.4.11 — a loja tem texto legal, formulário de checkout e página de pedido. O valor exato
 * do modelo continua no sistema (`--pedra`), para o uso decorativo em que ele nasceu.
 *
 * FONTE: DM Sans e Manrope servidas pela PRÓPRIA loja (woff2 variável, subset latin). A CSP é
 * `font-src 'self'` e `default-src 'self'`: o @import do Google Fonts do modelo não carregaria e seria
 * recusado. Nenhuma requisição a domínio externo nesta folha.
 *
 * NOMES: a loja mantém o vocabulário dela (português, BEM) onde o contrato dos testes e o
 * public/assets/vitrine.js já o exigem (.secao__cabeca, .uso, .pergunta, .atacado__titulo,
 * .rodape__cartao, .botao, .revela, .atraso-N, .mb-movimento…). Os componentes que o modelo traz e a
 * loja não tinha entram com o nome do modelo (.eyebrow, .text-link, .circle-button, .detail-row,
 * .last-cta, .hero-*). Onde os dois existem, a regra aceita OS DOIS seletores (.secao e .section,
 * .faixa e .trust-strip, .botao e .button), para que o template escrito a partir do modelo também
 * nasça vestido.
 *
 * Regras da casa que seguem valendo: a CSP é `style-src 'self'` — nada de `style=` no HTML nem de
 * `<style>` inline; por isso o fim deste arquivo repete as regras do formulário antes do WhatsApp
 * (lead-gate.js, kit ciclo 5), que o kit tentaria injetar num <style> próprio. Todo movimento em
 * transform/opacity, com saída por `prefers-reduced-motion`.
 */

/* ───────────── fontes locais (sem domínio externo) ───────────── */

/* Um arquivo VARIÁVEL por família, com a faixa de peso declarada — o padrão que a loja já usava. */
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fontes/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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: 'Manrope';
  src: url('/assets/fontes/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* ───── cor: os tokens do modelo, de HEX para OKLCH sem mudar a cor percebida ───── */
  --tinta: oklch(0.2572 0.0132 140.5); /* #20251f — --ink do modelo */
  --escuro: oklch(0.2227 0.0131 150); /* #171d18 — --dark */
  --papel: oklch(0.9583 0.0111 89.7); /* #f4f1e9 — --paper */
  --ouro: oklch(0.8085 0.0967 82.8); /* #dfbb76 — --gold */
  --linha: oklch(0.8787 0.0136 111.3); /* #d7d8ce — --line */
  --pedra: oklch(0.5761 0.0172 123.3); /* #777b70 — --muted (uso decorativo: numeral, legenda grande) */

  /* os outros valores do modelo, também exatos */
  --papel-2: oklch(0.9668 0.0095 93.6); /* #f6f4ed — fundo do configurador */
  --papel-3: oklch(0.9282 0.0133 106.7); /* #e8e8de — fundo da essência */
  --papel-4: oklch(0.9089 0.0192 119.8); /* #dfe3d5 — último chamado */
  --tinta-2: oklch(0.2931 0.0174 131.2); /* #292e25 — fundo do espécime */
  --tinta-3: oklch(0.294 0.027 144.9); /* #243024 — botão do último chamado */
  --ouro-claro: oklch(0.861 0.0834 83.1); /* #eccd92 — ouro no hover */
  --areia: oklch(0.8378 0.0478 89.6); /* #d6c9a7 — apoio sobre a foto escura */
  --sobre-tinta: oklch(0.9763 0.011 89.7); /* #faf7ef — texto no escuro */
  --sobre-tinta-suave: oklch(0.8372 0.0127 121.7); /* #c8cbc2 — apoio no escuro */
  --sobre-tinta-tenue: oklch(0.7457 0.0268 126.7); /* #a8b09e — apoio fraco no escuro */

  /* dois passos derivados, pelo contraste (ver cabeçalho): mesmo tom, um degrau mais escuro */
  --tinta-suave: oklch(0.5 0.0172 123.3); /* #61655a — 5,29:1 no papel · 4,84:1 no papel-3 */
  --foco: oklch(0.58 0.105 82.8); /* #987423 — 3,83:1 no papel (o #b58e42 do modelo dá 2,69:1) */
  --ouro-tenue: oklch(0.955 0.045 88); /* #fdefcf — linha escolhida, aviso de atacado */

  /* linha fina sobre o escuro: o #ffffff24 do modelo, sem valor cravado */
  --linha-no-escuro: color-mix(in oklch, var(--sobre-tinta) 14%, transparent);
  --linha-no-escuro-forte: color-mix(in oklch, var(--sobre-tinta) 33%, transparent);

  /* campos de cor dos espécimes (a mesma caixa sobre uma cor lisa) */
  --campo-a: var(--papel-3);
  --campo-b: var(--papel-4);
  --campo-c: var(--tinta-2);
  --campo-c-2: var(--tinta-3);

  /* semânticas (não são da marca) */
  --erro: oklch(0.47 0.16 29);
  --erro-fundo: oklch(0.95 0.028 29);
  --sucesso: oklch(0.45 0.1 148);
  --sucesso-fundo: oklch(0.95 0.032 148);

  /* ───── letra: Manrope nos títulos, DM Sans no corpo, Georgia no <em> ───── */
  --fonte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-titulo: 'Manrope', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fonte-serif: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  /* glifos do modelo (▧ ↗ ☰ ◇ ↺): fora do subset latin, caem no símbolo do sistema de propósito */
  --fonte-simbolo: 'DM Sans', 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', sans-serif;

  --passo-mini: 0.625rem; /* 10px — eyebrow do modelo, tracking 2px */
  --passo-micro: 0.6875rem; /* 11px — faixa de confiança, crédito de foto */
  --passo-legenda: 0.75rem; /* 12px — legenda, nota, rótulo de campo */
  --passo-pequeno: 0.8125rem; /* 13px — apoio e lead do modelo */
  --passo-funcional: 0.875rem; /* 14px — informação que decide compra: prazo, garantia, erro de campo,
     identificação da empresa. A escala editorial do modelo (12px e 11px) é boa para legenda e crédito,
     e pequena demais para o que o comprador lê antes de pagar, no celular. */
  --passo-corpo: 1rem; /* 16px — leitura (descrição, institucional, checkout) */
  --passo-destaque: 1.375rem; /* 22px — h3 do modelo */
  --passo-sub: clamp(1.75rem, 1.35rem + 1.7vw, 2.4375rem); /* subtítulo de bloco */
  --passo-titulo: clamp(2.1875rem, 4.1vw, 3.875rem); /* h2 do modelo: 35 → 62px */
  --passo-display: clamp(3.625rem, 6.1vw, 5.625rem); /* h1 do modelo: 58 → 90px */

  /* ───── espaço: a margem de 7,5% do modelo, com teto; o vão de seção de 100px ───── */
  --margem: clamp(1.5rem, 7.5vw, 8.5rem);
  --vao-secao: clamp(4.0625rem, 7vw, 6.25rem);
  --vao: 1rem;
  --largura-max: 96rem;
  --texto-max: 68ch;
  --altura-cabecalho: 4.6875rem; /* 75px — a barra do modelo no celular */

  /* ───── movimento ───── */
  --saida: cubic-bezier(0.22, 1, 0.36, 1);
  --macia: cubic-bezier(0.33, 1, 0.68, 1);
  --t-toque: 140ms;
  --t-passar: 200ms;
  --t-ui: 300ms;
  --t-entrada: 800ms;
}

/* ───────────── base ───────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--passo-corpo);
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

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

ul,
ol {
  padding: 0;
}

fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

/* A segunda voz do título do modelo: a mesma frase em Georgia itálico, no ouro quando está no escuro. */
em {
  font-family: var(--fonte-serif);
  font-weight: 400;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklch, currentColor 42%, transparent);
  transition: text-decoration-color var(--t-passar) ease;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-color: currentColor;
  }
}

button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
summary {
  touch-action: manipulation;
}

/* O anel do modelo: 3px, afastado 6px da peça (nos campos o afastamento cai, senão invade o vizinho). */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 6px;
}

::selection {
  background: var(--ouro);
  color: var(--tinta);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px; /* taste-skill-ignore: utilitário de leitor de tela, não é linha */
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: fixed;
  left: var(--margem);
  top: -10rem;
  z-index: 100;
  padding: 0.8125rem 1.25rem;
  background: var(--ouro);
  color: var(--tinta);
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.pular:focus {
  top: 0.9375rem;
}

.principal:focus {
  outline: none;
}

/* Barra de leitura do modelo: 2px de ouro no topo. O casca.js escreve --progresso pelo CSSOM. */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 2px;
  background: var(--ouro);
  transform: scaleX(var(--progresso, 0));
  transform-origin: 0 50%;
}

.conteiner {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.icone {
  flex: none;
}

/* ───────────── peças do modelo: eyebrow, text-link, circle-button ───────────── */

.eyebrow {
  margin-bottom: 1.5rem;
  color: var(--tinta-suave);
  font-size: var(--passo-mini);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-transform: uppercase;
}

.eyebrow--no-escuro {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--sobre-tinta-suave);
}

/* O ponto de ouro que abre o eyebrow do herói. */
.eyebrow__ponto {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ouro);
}

.text-link,
.link-texto {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--tinta-suave);
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: gap var(--t-ui) var(--saida), border-color var(--t-passar) ease;
}

.text-link .seta,
.link-texto .seta {
  font-family: var(--fonte-simbolo);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover,
  .link-texto:hover {
    gap: 2rem;
    border-color: var(--tinta);
  }
}

.circle-button,
.botao-circulo {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4375rem;
  height: 2.4375rem;
  padding: 0;
  border: 1px solid var(--pedra);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-family: var(--fonte-simbolo);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-passar) ease, border-color var(--t-passar) ease;
}

@media (hover: hover) and (pointer: fine) {
  .circle-button:hover,
  .botao-circulo:hover {
    border-color: var(--ouro);
    background: var(--ouro);
  }
}

/* ───────────── cabeçalho: a barra escura do modelo ───────────── */

.cabecalho {
  --foco: var(--ouro);
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--escuro);
  color: var(--sobre-tinta);
  border-bottom: 1px solid var(--linha-no-escuro);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--altura-cabecalho);
}

.cabecalho__marca {
  margin-right: auto;
  text-decoration: none;
}

/* A assinatura do modelo: ▧ MESHBOX®, em Manrope, 24px, tracking aberto. */
.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fonte-titulo);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: 0.0625em;
  line-height: 1;
  text-transform: uppercase;
}

.marca__icone {
  color: var(--ouro);
  font-family: var(--fonte-simbolo);
  font-size: 2.0625rem;
  font-weight: 400;
  line-height: 1;
}

.marca__registro {
  align-self: flex-start;
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Sem script, a barra de categorias fica sempre à vista (empilha no celular). */
.menu {
  display: block;
}

.menu__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  list-style: none;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--sobre-tinta);
  font-size: var(--passo-legenda);
  letter-spacing: 0.02em;
  opacity: 0.8;
  text-decoration-color: transparent;
  transition: opacity var(--t-passar) ease;
}

.menu__link[aria-current='page'] {
  opacity: 1;
  text-decoration-color: var(--ouro);
  text-decoration-thickness: 0.15em;
}

@media (hover: hover) and (pointer: fine) {
  .menu__link:hover {
    opacity: 1;
    text-decoration-color: var(--sobre-tinta);
  }
}

/* A ação do cabeçalho do modelo (.header-cta), que na loja é o carrinho. */
.cabecalho__carrinho,
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid var(--linha-no-escuro-forte);
  color: var(--sobre-tinta);
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--t-passar) ease, border-color var(--t-passar) ease, transform var(--t-toque) var(--saida);
}

.cabecalho__carrinho:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .cabecalho__carrinho:hover,
  .header-cta:hover {
    border-color: var(--ouro);
    background: color-mix(in oklch, var(--ouro) 14%, transparent);
  }
}

/* No celular sobra só o ícone, mas o rótulo continua NA ÁRVORE (display:none o tiraria, e o link
   ficaria sem nome acessível — o ícone é aria-hidden e o contador nasce hidden). */
.cabecalho__carrinho-texto {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: utilitário de leitor de tela, não é linha */
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contador {
  min-width: 1.375rem;
  padding: 0 0.3125rem;
  background: var(--ouro);
  color: var(--tinta);
  font-size: var(--passo-mini);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.375rem;
  text-align: center;
}

/* Botão ☰: só existe com script (o casca.js marca o <html>); sem script o menu fica à vista. */
.cabecalho__menu {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sobre-tinta);
  font-family: var(--fonte-simbolo);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.cabecalho__rotulo {
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Painel do lojista, homologação e manutenção: a barra não precisa acompanhar a rolagem. */
.cabecalho--interno {
  position: static;
}

/* A faixa de confiança do modelo (.trust-strip): logo abaixo da barra, no papel, com linha fina de
   ponta a ponta — por isso a margem é dela, não de um `.conteiner` por dentro. */
.faixa,
.trust-strip {
  padding: 0.9375rem var(--margem);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-suave);
  font-size: var(--passo-micro);
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

/* Com script: no celular o menu recolhe atrás do ☰ e volta como painel por baixo da barra — o desenho
   do modelo. O painel é absoluto dentro do cabeçalho (que é `sticky`, logo é o bloco de contenção):
   assim a ordem do DOM continua igual à ordem visual, em qualquer largura. */
.mb-casca .cabecalho__menu {
  display: grid;
  place-items: center;
}

.mb-casca .menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 0.5rem var(--margem) 1.25rem;
  border-bottom: 1px solid var(--linha-no-escuro);
  background: var(--tinta-2);
}

.mb-casca .menu.esta-aberto {
  display: block;
}

.mb-casca .menu.esta-aberto .menu__lista {
  flex-direction: column;
  gap: 0;
}

/* O modelo troca o ☰ pela barra em 700px porque tem TRÊS links. A loja tem cinco, e mais longos: em
   1100px eles quebravam em duas linhas (medido). A barra só aparece onde os cinco cabem numa linha. */
@media (min-width: 1200px) {
  :root {
    --altura-cabecalho: 5.6875rem; /* 91px — a barra do modelo no desktop */
  }

  .mb-casca .menu,
  .mb-casca .menu.esta-aberto {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }

  .mb-casca .cabecalho__menu {
    display: none;
  }

  .mb-casca .menu.esta-aberto .menu__lista,
  .menu__lista {
    flex-direction: row;
    gap: 0 clamp(1.25rem, 1.8vw, 2rem);
  }

  .marca {
    font-size: 1.5rem;
  }

  .cabecalho__marca {
    margin-right: clamp(1.5rem, 4vw, 4rem);
  }

  .menu {
    margin-right: auto;
  }

  .cabecalho__carrinho-texto {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  .faixa,
  .trust-strip {
    display: flex;
    justify-content: center;
    gap: 2rem;
    letter-spacing: 0.14em;
  }
}

/* ───────────── botões ───────────── */

.botao,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.375rem;
  min-height: 3.1875rem;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-family: var(--fonte);
  font-size: var(--passo-pequeno);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-ui) var(--saida);
}

.botao .seta,
.button span {
  font-family: var(--fonte-simbolo);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1;
}

.botao:active:not([disabled]) {
  transform: scale(0.98);
}

.botao[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.botao--primario,
.button.gold {
  background: var(--ouro);
  color: var(--tinta);
}

.botao--secundario,
.botao--whatsapp {
  background: var(--tinta);
  color: var(--sobre-tinta);
}

/* O outline do modelo: borda clara sobre a foto escura. */
.botao--contorno,
.button.outline {
  border-color: var(--linha-no-escuro-forte);
  background: transparent;
  color: var(--sobre-tinta);
}

.botao--neutro {
  border-color: var(--linha);
  background: var(--papel-2);
  color: var(--tinta);
}

.botao--largo {
  width: 100%;
  /* ⛔ Sem `space-between`: o botao de pagamento tem so o rotulo, e um item flex solto iria para
     flex-start, colando o texto na esquerda de um botao de largura total. O `center` do `.botao`
     base vale, e o `gap` (38px, do modelo) separa rotulo e seta onde a seta existe. */
  font-size: var(--passo-corpo);
}

@media (hover: hover) and (pointer: fine) {
  .botao:hover:not([disabled]) {
    transform: translateY(-3px);
  }

  .botao--primario:hover:not([disabled]),
  .button.gold:hover {
    background: var(--ouro-claro);
  }

  .botao--secundario:hover:not([disabled]),
  .botao--whatsapp:hover {
    background: var(--tinta-2);
  }

  .botao--contorno:hover,
  .button.outline:hover {
    background: color-mix(in oklch, var(--sobre-tinta) 12%, transparent);
  }

  .botao--neutro:hover {
    background: var(--papel-3);
  }
}

.botao-texto {
  min-height: 2.75rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--passo-pequeno);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* ───────────── títulos e seções ───────────── */

.secao,
.section {
  padding-block: var(--vao-secao);
}

/* A cabeça de seção do modelo: o título à esquerda, o parágrafo curto alinhado pelo pé, à direita. */
.secao__cabeca,
.section-head {
  display: grid;
  gap: 1.375rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.secao__titulo {
  font-size: var(--passo-titulo);
  letter-spacing: -0.0435em;
  line-height: 1.16;
}

.secao__texto {
  max-width: 45ch;
  color: var(--tinta-suave);
  font-size: var(--passo-pequeno);
}

.secao__mais {
  margin-top: 2.5rem;
}

@media (min-width: 960px) {
  .secao__cabeca,
  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: end;
    gap: 2.1875rem;
    margin-bottom: 3rem;
  }

  .secao__texto {
    padding-bottom: 0.375rem;
  }
}

.pagina__titulo {
  font-size: var(--passo-titulo);
  letter-spacing: -0.0435em;
  line-height: 1.1;
}

.pagina__subtitulo {
  margin-top: 1rem;
  max-width: 48ch;
  color: var(--tinta-suave);
  font-size: var(--passo-pequeno);
}

.trilha {
  padding-block: 1.25rem 1.5rem;
  font-size: var(--passo-legenda);
}

.trilha__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  color: var(--tinta-suave);
}

.trilha__lista li:not(:last-child)::after {
  content: '/';
  margin-left: 0.375rem;
  color: var(--tinta-suave);
}

/* ───────────── herói: a fotografia escura e a copy do modelo ───────────── */

.heroi,
.hero {
  position: relative;
  overflow: hidden;
  min-height: 34rem;
  height: max(34rem, calc(100svh - var(--altura-cabecalho) - 3.5rem));
  max-height: 54.375rem;
  background: var(--escuro);
  color: var(--sobre-tinta);
  --foco: var(--ouro);
}

/* O fundo do herói: uma foto só (`.heroi__foto`, o desenho do modelo) ou a parede de espécimes que a
   home já monta (`.heroi__parede`). Os dois ocupam a mesma caixa e recebem a mesma sombra. */
.heroi__foto,
.heroi__parede,
.hero-art {
  position: absolute;
  inset: 0 0 0 15%;
  overflow: hidden;
}

.heroi__foto img,
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
  filter: brightness(0.65) saturate(0.6);
}

/* Parede: fileiras deslizadas de meio bloco, como no catálogo de espécimes. O escurecido é UM filtro,
   na parede inteira — pôr o filtro em cada foto criava ~100 superfícies de composição e travava o
   navegador (medido: a captura da primeira tela estourava 30s). */
.heroi__parede {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  filter: brightness(0.82) saturate(0.6);
  --bloco: 22vw;
}

.heroi__fileira {
  display: flex;
  flex: none;
  gap: 6px;
}

.heroi__fileira:nth-child(even) {
  margin-left: calc(var(--bloco) / -2);
}

.bloco {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--bloco);
  height: var(--bloco);
  overflow: hidden;
}

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

/* Os três campos de cor lisos por onde o produto aparece. */
.bloco--a {
  background: var(--campo-a);
}

.bloco--b {
  background: var(--campo-b);
}

.bloco--c {
  background: var(--campo-c);
}

/* A sombra que deixa a copy legível sobre a foto (o gradiente do modelo, nos tokens). Mora no
   pseudo-elemento do herói: o template NÃO precisa de um elemento só para ela. */
.heroi::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--escuro) 0%, color-mix(in oklch, var(--escuro) 88%, transparent) 62%, transparent 100%),
    linear-gradient(0deg, var(--escuro) 0%, transparent 62%);
}

.heroi__painel,
.heroi__copo,
.hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  max-width: 46rem;
  padding: 3.75rem var(--margem) 0;
}

.heroi__titulo {
  font-size: var(--passo-display);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.035;
}

.heroi__titulo em {
  color: var(--ouro);
  line-height: 1.08;
}

.heroi__texto {
  margin: 1.5625rem 0;
  max-width: 30ch;
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-pequeno);
}

.heroi__acao .botao {
  width: 100%;
  justify-content: space-between;
}

/* A legenda do canto, encostada na linha fina — a assinatura editorial do modelo. */
.heroi__legenda {
  position: absolute;
  left: var(--margem);
  bottom: 4.5rem;
  display: flex;
  gap: 1.375rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha-no-escuro-forte);
  font-size: var(--passo-micro);
}

.heroi__legenda > span {
  padding-top: 0.1875rem;
  color: var(--ouro);
  font-size: var(--passo-mini);
  font-variant-numeric: tabular-nums;
}

.heroi__legenda p {
  color: var(--sobre-tinta-suave);
  line-height: 1.8;
}

.heroi__legenda strong {
  color: var(--sobre-tinta);
  font-weight: 400;
}

.heroi__desca {
  position: absolute;
  left: var(--margem);
  bottom: 1.6875rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-mini);
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.heroi__desca .seta {
  font-family: var(--fonte-simbolo);
  font-size: 1.25rem;
}

.heroi__lado {
  position: absolute;
  right: 1.375rem;
  top: 43%;
  color: var(--areia);
  font-size: var(--passo-mini);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

@media (max-width: 700px) {
  .heroi__lado {
    display: none;
  }
}

@media (min-width: 701px) {
  .heroi__foto,
  .heroi__parede,
  .hero-art {
    inset: 0 0 0 41%;
  }

  .heroi__foto img,
  .hero-art img {
    object-position: 50% 42%;
    filter: brightness(0.76) saturate(0.65);
  }

  .heroi__parede {
    --bloco: clamp(5.5rem, 12vw, 9rem);
  }

  .heroi::after {
    background:
      linear-gradient(90deg, var(--escuro) 12%, color-mix(in oklch, var(--escuro) 95%, transparent) 33%,
        color-mix(in oklch, var(--escuro) 44%, transparent) 58%, transparent 85%),
      linear-gradient(0deg, color-mix(in oklch, var(--escuro) 64%, transparent), transparent 30%);
  }

  .heroi__painel,
  .heroi__copo,
  .hero-copy {
    padding-top: 5.5rem;
  }

  .heroi__acao .botao {
    width: auto;
    justify-content: center;
  }

  .heroi__legenda {
    left: auto;
    right: var(--margem);
    bottom: 3.375rem;
  }
}

@media (min-width: 1500px) {
  .heroi__painel,
  .heroi__copo,
  .hero-copy {
    padding-top: 7rem;
  }
}

/* ───────────── escolha pelo uso: as categorias do modelo (.category) ───────────── */

.usos,
.category-grid {
  display: grid;
  gap: 1.1875rem;
  list-style: none;
}

/* O cartão do modelo: a foto inteira, o rótulo e o nome no pé, sobre o degradê. Três camadas, sem
   depender da forma da marcação: foto (z 0, primeiro na árvore), degradê (z 0, por último) e texto
   (z 1). Funciona com o texto solto dentro do link e com o texto dentro de um `.uso__corpo`. */
.uso__link,
.category {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 1.02;
  overflow: hidden;
  padding: 1.5rem;
  border: 0;
  background: var(--tinta-2);
  color: var(--sobre-tinta);
  text-align: left;
  text-decoration: none;
}

.uso__quadro,
.category > img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.uso__quadro img,
.category > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 43%;
  filter: saturate(0.65) brightness(0.8);
  transition: transform 800ms var(--macia), filter 800ms ease;
}

.uso__link::after,
.category::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, color-mix(in oklch, var(--escuro) 91%, transparent), transparent 70%);
}

.uso__indice,
.category-index {
  position: absolute;
  top: 1.4375rem;
  left: 1.5rem;
  z-index: 1;
  font-size: var(--passo-mini);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.uso__corpo,
.category-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.uso__descricao,
.uso__nome,
.uso__faixa,
.category-body small,
.category-body strong,
.category-body > span {
  position: relative;
  z-index: 1;
}

/* O rótulo curto abre o cartão, como no modelo — mesmo quando vem depois do nome na marcação. */
.uso__descricao,
.category-body small {
  order: -1;
  margin-bottom: 0.75rem;
  color: var(--areia);
  font-size: var(--passo-mini);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.uso__nome,
.category-body strong {
  margin-bottom: 1.5625rem;
  font-family: var(--fonte-titulo);
  font-size: 1.8125rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.uso__faixa,
.category-body > span {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha-no-escuro-forte);
  font-size: var(--passo-micro);
  font-variant-numeric: tabular-nums;
}

.uso__faixa .seta,
.category-body b {
  font-family: var(--fonte-simbolo);
  font-size: 1.1875rem;
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
  .uso__link:hover .uso__quadro img,
  .category:hover img {
    transform: scale(1.05);
    filter: saturate(0.9) brightness(0.9);
  }
}

@media (min-width: 701px) {
  .usos,
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uso__link,
  .category {
    aspect-ratio: 0.78;
  }

  .uso__nome,
  .category-body strong {
    font-size: 1.625rem;
  }
}

/* ───────────── a essência: a foto grande e as linhas de detalhe (.detail-row) ───────────── */

.essencia,
.essence {
  display: grid;
  gap: 2.1875rem;
  background: var(--papel-3);
}

.essencia__foto,
.detail-picture {
  position: relative;
  height: 26.875rem;
  overflow: hidden;
}

.essencia__foto img,
.detail-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65);
}

.essencia__nota,
.picture-note {
  position: absolute;
  left: 1.5625rem;
  bottom: 1.75rem;
  padding: 0.8125rem;
  background: color-mix(in oklch, var(--escuro) 86%, transparent);
  color: var(--sobre-tinta);
  font-size: var(--passo-mini);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.essencia__copo,
.essence-copy {
  display: grid;
  align-content: start;
}

.essencia__copo h2 {
  font-size: var(--passo-sub);
  letter-spacing: -0.035em;
  line-height: 1.16;
}

.lead {
  margin: 1.375rem 0 1.8125rem;
  max-width: 34ch;
  color: var(--tinta-suave);
  font-size: var(--passo-pequeno);
}

.detail-row,
.detalhe {
  display: flex;
  gap: 1.25rem;
  padding: 1.375rem 0;
  border-top: 1px solid var(--linha);
}

.detail-row > span,
.detalhe__numero {
  flex: none;
  padding-top: 0.3125rem;
  color: var(--tinta-suave);
  font-size: var(--passo-mini);
  font-variant-numeric: tabular-nums;
}

.detail-row h3,
.detalhe h3 {
  margin-bottom: 0.5rem;
  font-size: var(--passo-corpo);
  letter-spacing: -0.01em;
}

.detail-row p,
.detalhe p {
  max-width: 44ch;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

.essencia .text-link,
.essence .text-link {
  margin-top: 1.25rem;
}

@media (min-width: 960px) {
  .essencia,
  .essence {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9%;
  }

  .essencia__foto,
  .detail-picture {
    height: auto;
    min-height: 38rem;
  }

  .essencia__copo,
  .essence-copy {
    padding: var(--vao-secao) var(--margem) var(--vao-secao) 0;
  }
}

/* ───────────── configurador: o seletor de lote e a prancha em escala ───────────── */

.escolha__tamanhos {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(4rem, 8vw, 7rem);
}

.escolha__pergunta {
  font-size: var(--passo-titulo);
  letter-spacing: -0.0435em;
  line-height: 1.16;
}

.escolha__pranchas {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.seletor {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5625rem, 3vw, 2.6875rem);
  border: 1px solid var(--linha);
  background: var(--papel-2);
}

.seletor__ajuda {
  max-width: 48ch;
  color: var(--tinta-suave);
  font-size: var(--passo-pequeno);
}

.seletor__usos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.seletor__usos legend {
  margin-bottom: 1.1875rem;
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.seletor__opcao {
  position: relative;
  flex: 1 1 7rem;
  cursor: pointer;
}

.seletor__opcao input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* As abas do modelo: caixa de linha fina; a escolhida vira tinta cheia. */
.seletor__opcao span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border: 1px solid var(--linha);
  background: transparent;
  font-size: var(--passo-legenda);
  transition: background-color var(--t-passar) ease, color var(--t-passar) ease, border-color var(--t-passar) ease;
}

.seletor__opcao input:checked + span {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--sobre-tinta);
}

.seletor__opcao input:focus-visible + span {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.seletor__kg {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.75rem;
}

.seletor__kg .rotulo {
  grid-column: 1 / -1;
  font-size: var(--passo-legenda);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.seletor__faixa {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  accent-color: var(--tinta);
  cursor: pointer;
}

/* O número grande do modelo (58px em Manrope), com o "kg" ao lado. */
.seletor__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.875rem, 6vw, 3.625rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
}

.seletor__resposta {
  max-width: 52ch;
  font-size: var(--passo-pequeno);
}

.seletor__link {
  font-weight: 600;
  white-space: nowrap;
}

.prancha {
  display: grid;
  gap: 1.5rem;
}

.prancha__titulo {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.prancha__legenda {
  margin-top: 0.75rem;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

.prancha__desenhos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  max-width: 44rem;
  list-style: none;
}

.prancha__caixa {
  display: grid;
  gap: 0.5rem;
}

.prancha__nome {
  font-size: var(--passo-legenda);
  font-weight: 600;
}

.desenho__topo {
  fill: var(--linha);
}

.desenho__lado {
  fill: oklch(0.74 0.015 118);
}

.desenho__frente {
  fill: oklch(0.83 0.014 112);
  transition: fill var(--t-ui) ease;
}

.desenho__tela {
  fill: var(--pedra);
  transition: fill var(--t-ui) ease;
}

.is-escolhida .desenho__frente {
  fill: var(--ouro);
}

.is-escolhida .desenho__tela {
  fill: var(--tinta);
}

.tabela--tamanhos tr.is-escolhida > * {
  background: var(--ouro-tenue);
  font-weight: 600;
}

/* O preço nunca quebra; "até 18 kg · 18 peças" quebra no celular para o preço caber sem rolar de lado. */
.tabela--tamanhos td:last-child {
  white-space: nowrap;
}

@media (min-width: 640px) {
  .tabela--tamanhos td:nth-child(2) {
    white-space: nowrap;
  }

  .seletor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: 3rem;
  }

  .seletor__ajuda,
  .seletor__resposta {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .escolha__tamanhos {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4rem;
    align-items: start;
  }

  .escolha__pergunta,
  .seletor {
    grid-column: 1;
  }

  .escolha__pranchas {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .seletor {
    grid-template-columns: 1fr;
    position: sticky;
    top: calc(var(--altura-cabecalho) + 1.5rem);
  }
}

/* ───────────── veja de perto: a mesma caixa em vários quadros ───────────── */

.de-perto {
  overflow: hidden;
}

.de-perto__grade {
  display: grid;
  gap: 2rem;
}

.de-perto__lado {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.de-perto__titulo {
  font-size: var(--passo-titulo);
  letter-spacing: -0.0435em;
  line-height: 1.16;
}

.de-perto__produto {
  font-size: var(--passo-pequeno);
  font-weight: 600;
}

.de-perto__notas {
  display: grid;
  gap: 0.875rem;
  margin-top: 1rem;
  max-width: 32ch;
  list-style: none;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

.de-perto__quadros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
}

.de-perto__quadro {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--campo-a);
}

.de-perto__quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7);
}

.de-perto__quadro--alto {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 4 / 5;
}

@media (min-width: 960px) {
  .de-perto__grade {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 3rem;
  }

  .de-perto__notas {
    margin-top: auto;
  }

  .de-perto__lado {
    grid-template-rows: auto auto 1fr;
  }

  .de-perto__quadros {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    width: max-content;
  }

  .de-perto__quadro {
    aspect-ratio: auto;
    height: 30vh;
    min-height: 13rem;
    background: none;
  }

  .de-perto__quadro img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }

  .de-perto__quadro--alto {
    height: 66vh;
    min-height: 28rem;
  }
}

/* ───────────── todos os modelos: a lista do catálogo e a grade de espécimes ───────────── */

.catalogo__atalhos {
  position: sticky;
  top: var(--altura-cabecalho);
  z-index: 5;
  margin-inline: calc(var(--margem) * -1);
  margin-bottom: 1.5rem;
  padding: 0.625rem var(--margem);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.catalogo__atalhos ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  list-style: none;
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.catalogo__atalhos a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.catalogo__corpo {
  display: grid;
  gap: 3rem;
}

.catalogo__grupos {
  display: grid;
  gap: clamp(4.5rem, 9vw, 7rem);
}

.catalogo__grupo {
  scroll-margin-top: calc(var(--altura-cabecalho) + 3rem);
}

.catalogo__nome {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--linha);
  font-size: clamp(1.9375rem, 1.6rem + 1.5vw, 2.9375rem);
  letter-spacing: -0.04em;
}

.catalogo__conta {
  flex: none;
  white-space: nowrap;
  color: var(--tinta-suave);
  font-family: var(--fonte);
  font-size: var(--passo-legenda);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.grade {
  display: grid;
  gap: 1.75rem 4rem;
  list-style: none;
}

.cartao__link {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  grid-template-areas: 'foto nome preco' 'foto fato fato';
  align-items: baseline;
  column-gap: 1.125rem;
  row-gap: 0.125rem;
  text-decoration: none;
  transition: color var(--t-passar) ease;
}

.cartao__foto {
  grid-area: foto;
  align-self: start;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  background: var(--campo-a);
  transition: opacity var(--t-passar) ease;
}

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

.cartao__nome {
  grid-area: nome;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--t-passar) ease;
}

.cartao__preco {
  grid-area: preco;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cartao__capacidade {
  grid-area: fato;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

@media (hover: hover) and (pointer: fine) {
  .cartao__link:hover .cartao__nome {
    text-decoration-color: currentColor;
  }

  /* As outras linhas recuam sem perder o contraste do texto (AA): a foto esmaece e o nome vai para a tinta suave. */
  .catalogo__corpo.is-apontando .cartao__link:not(.is-apontada) {
    color: var(--tinta-suave);
  }

  .catalogo__corpo.is-apontando .cartao__link:not(.is-apontada) .cartao__foto {
    opacity: 0.4;
  }
}

.catalogo__quadro {
  display: none;
}

/* Categoria: a grade de espécimes no desenho do cartão do modelo (foto escura, nome e preço no pé). */
.grade--especimes {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1875rem;
}

.grade--especimes .cartao__link {
  position: relative;
  display: block;
  aspect-ratio: 1.02;
  overflow: hidden;
  background: var(--tinta-2);
  color: var(--sobre-tinta);
}

.grade--especimes .cartao__foto {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
}

.grade--especimes .cartao__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(0.65) brightness(0.8);
  transition: transform 800ms var(--macia), filter 800ms ease;
}

.grade--especimes .cartao__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in oklch, var(--escuro) 91%, transparent), transparent 70%);
}

.grade--especimes .cartao__nome {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 3.75rem;
  z-index: 1;
  font-family: var(--fonte-titulo);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-decoration-color: transparent;
}

.grade--especimes .cartao__preco,
.grade--especimes .cartao__capacidade {
  position: absolute;
  bottom: 1.5rem;
  z-index: 1;
  padding-top: 1rem;
  border-top: 1px solid var(--linha-no-escuro-forte);
  font-size: var(--passo-micro);
}

.grade--especimes .cartao__capacidade {
  left: 1.5rem;
  right: 7rem;
  color: var(--sobre-tinta-suave);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grade--especimes .cartao__preco {
  right: 1.5rem;
  color: var(--sobre-tinta);
  font-size: var(--passo-pequeno);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .grade--especimes .cartao__link:hover .cartao__foto img {
    transform: scale(1.05);
    filter: saturate(0.9) brightness(0.9);
  }

  .grade--especimes .cartao__link:hover .cartao__nome {
    text-decoration-color: currentColor;
  }
}

@media (min-width: 701px) {
  .grade--especimes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grade--especimes .cartao__link {
    aspect-ratio: 0.78;
  }

  .catalogo__atalhos {
    position: static;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 960px) {
  /* A lista do catálogo só vira duas colunas quando o nome cabe em até duas linhas. */
  .grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grade--especimes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .catalogo__corpo {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
    column-gap: 4rem;
  }

  .catalogo__quadro {
    display: grid;
    place-items: center;
    position: sticky;
    top: calc(var(--altura-cabecalho) + 2rem);
    aspect-ratio: 4 / 5;
    background: var(--campo-a);
    overflow: hidden;
  }

  .catalogo__quadro img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    transition: opacity var(--t-ui) ease;
  }

  .catalogo__quadro.is-trocando img {
    opacity: 0;
  }
}

/* ───────────── do pedido à bancada: os passos do modelo (.steps) ───────────── */

.processo__titulo {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  max-width: 16ch;
  font-size: var(--passo-titulo);
  letter-spacing: -0.0435em;
  line-height: 1.16;
}

.processo__etapas,
.steps {
  display: grid;
  gap: 1.875rem;
  list-style: none;
}

.processo__etapa,
.steps article {
  display: grid;
  grid-template-columns: 3.125rem 1fr;
  column-gap: 0.9375rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--linha);
}

.processo__numero,
.steps article > span {
  grid-row: 1 / 3;
  color: var(--pedra);
  font-family: var(--fonte-serif);
  font-size: 2.25rem;
  font-style: italic;
  line-height: 1;
}

/* O modelo não tem foto no passo; a loja tem. Fica como vinheta pequena, ao lado do numeral. */
.processo__quadro {
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  order: 1;
  aspect-ratio: 4 / 3;
  margin-top: 1.25rem;
  overflow: hidden;
}

.processo__quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65) brightness(0.92);
}

.processo__nome,
.steps h3 {
  margin-bottom: 0.75rem;
  font-size: var(--passo-corpo);
  letter-spacing: -0.01em;
}

.processo__texto,
.steps p {
  max-width: 36ch;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

@media (min-width: 701px) {
  .processo__etapas,
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.8125rem;
  }

  .processo__etapa,
  .steps article {
    grid-template-columns: 1fr;
    padding-top: 1.5625rem;
  }

  .processo__numero,
  .steps article > span {
    grid-row: auto;
    font-size: 2.625rem;
  }

  .processo__nome,
  .steps h3 {
    margin: 1.5625rem 0 0.875rem;
    font-size: 1.1875rem;
  }
}

/* ───────────── feita por quem vende: a origem do modelo (.origin) ───────────── */

/* A seção da origem do modelo (.origin): bloco escuro de ponta a ponta, com a foto do Cerrado. */
.quem-faz {
  position: relative;
  overflow: hidden;
  background: var(--escuro);
  color: var(--sobre-tinta);
  --foco: var(--ouro);
}

.quem-faz__lead {
  margin-top: 1.375rem;
  max-width: 40ch;
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-pequeno);
}

.quem-faz__mosaico {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.quem-faz__foto {
  position: relative;
  display: grid;
  gap: 1rem;
}

/* A foto desliza com a rolagem: o quadro corta o excesso, senão ela invade a coluna ao lado. */
.quem-faz__moldura {
  overflow: hidden; /* reserva: Safari antes do 16 não conhece clip */
  overflow: clip;
}

.quem-faz__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.6);
}

.quem-faz__nota {
  max-width: 36ch;
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-legenda);
}

.quem-faz__lado {
  display: grid;
  gap: 1.5rem;
}

.quem-faz__mapa {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  aspect-ratio: 3 / 2;
  padding: 1.5rem;
  border: 1px solid var(--linha-no-escuro);
  background: var(--tinta-2);
}

.mapa-df {
  width: min(100%, 18rem);
}

.mapa-df__terra {
  fill: color-mix(in oklch, var(--sobre-tinta) 16%, transparent);
}

.mapa-df__ponto {
  fill: var(--ouro);
}

.quem-faz__lugar {
  font-size: var(--passo-mini);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.vantagens {
  display: grid;
  gap: 1rem 1.5rem;
  list-style: none;
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-legenda);
}

.quem-faz__mais {
  margin-top: 2rem;
}

.quem-faz .text-link,
.quem-faz .link-texto {
  border-color: var(--linha-no-escuro-forte);
  color: var(--sobre-tinta);
}

.credito {
  margin-top: 1rem;
  color: var(--sobre-tinta-tenue);
  font-size: var(--passo-micro);
}

.credito a {
  color: inherit;
}

@media (min-width: 640px) {
  .vantagens {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .quem-faz__mosaico {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
  }

  .quem-faz__foto img {
    aspect-ratio: 16 / 10;
  }

  .quem-faz__nota {
    position: absolute;
    top: 0;
    right: 0;
    width: 20rem;
    max-width: none;
    padding: 1.25rem;
    background: var(--escuro);
  }

  /* 60% da altura da foto (16:10 em 8 colunas) numa coluna de 4: dá a proporção 4:3. */
  .quem-faz__mapa {
    aspect-ratio: 4 / 3;
  }

  .vantagens {
    grid-template-columns: 1fr;
  }
}

/* ───────────── perguntas: o acordeão do modelo (.faq) ───────────── */

.perguntas__grade {
  display: grid;
  gap: 2rem;
  padding-top: 1.875rem;
}

.perguntas__titulo {
  font-size: clamp(2.0625rem, 3.2vw, 2.4375rem);
  letter-spacing: -0.0435em;
  line-height: 1.16;
}

.perguntas__lista {
  display: grid;
  border-top: 1px solid var(--linha);
}

.pergunta,
.faq-list details {
  border-bottom: 1px solid var(--linha);
}

.pergunta__q,
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  min-height: 4rem;
  padding: 1.375rem 0;
  font-size: var(--passo-pequeno);
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.pergunta__q::-webkit-details-marker,
.faq-list summary::-webkit-details-marker {
  display: none;
}

/* O "+" do modelo, que gira 45° e vira "×" quando abre. */
.pergunta__q::after,
.faq-list summary::after {
  content: '+';
  flex: none;
  font-family: var(--fonte-simbolo);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--t-ui) var(--saida);
}

.pergunta[open] .pergunta__q::after,
.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.pergunta__r {
  padding: 0 1.25rem 1.375rem 0;
}

.pergunta__r p {
  max-width: 56ch;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

@media (min-width: 960px) {
  .perguntas__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 9%;
  }

  .perguntas__titulo {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 2rem);
  }
}

/* ───────────── atacado: a faixa de fotos e as três células ───────────── */

.atacado {
  --foco: var(--ouro);
  /* clip vence o hidden: hidden cria contêiner de rolagem e prende a linha do tempo da faixa. */
  overflow: hidden; /* reserva: Safari antes do 16 não conhece clip */
  overflow: clip;
  padding-block: 2.5rem var(--vao-secao);
  background: var(--tinta-2);
  color: var(--sobre-tinta);
  scroll-margin-top: var(--altura-cabecalho);
}

.atacado__faixa {
  overflow: hidden; /* reserva: Safari antes do 16 não conhece clip */
  overflow: clip;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.atacado__fotos {
  display: flex;
  gap: 8px;
  width: max-content;
  list-style: none;
}

.atacado__fotos li {
  flex: none;
  height: 110px;
  background: var(--campo-c-2);
}

.atacado__fotos img {
  width: auto;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65);
}

.atacado__titulo {
  max-width: 18ch;
  font-size: var(--passo-titulo);
  letter-spacing: -0.0435em;
  line-height: 1.16;
}

.atacado__titulo em {
  color: var(--areia);
}

.atacado__texto {
  margin-top: 1.375rem;
  max-width: 48ch;
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-pequeno);
}

.atacado__celulas {
  display: grid;
  gap: 8px;
  margin-top: 2.5rem;
  list-style: none;
}

.atacado__celula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linha-no-escuro);
  background: transparent;
  color: var(--sobre-tinta);
  font-size: var(--passo-legenda);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color var(--t-passar) ease, transform var(--t-toque) var(--saida);
}

.atacado__celula--acao {
  border-color: var(--ouro);
  background: var(--ouro);
  color: var(--tinta);
  font-weight: 600;
}

a.atacado__celula:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  a.atacado__celula:hover {
    background: color-mix(in oklch, var(--sobre-tinta) 12%, transparent);
  }

  a.atacado__celula--acao:hover {
    background: var(--ouro-claro);
  }
}

@media (min-width: 640px) {
  .atacado__fotos li {
    height: 150px;
  }
}

@media (min-width: 960px) {
  .atacado__celulas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .atacado__celula {
    min-height: 6rem;
  }
}

/* ───────────── último chamado (.last-cta do modelo) ───────────── */

.ultimo-chamado,
.last-cta {
  padding: 5.3125rem var(--margem);
  background: var(--papel-4);
  text-align: center;
}

.ultimo-chamado .eyebrow,
.last-cta .eyebrow {
  color: var(--tinta-suave);
}

.ultimo-chamado__titulo,
.last-cta h2 {
  margin-bottom: 1.875rem;
  font-size: var(--passo-titulo);
  letter-spacing: -0.0435em;
  line-height: 1.16;
}

.ultimo-chamado .botao--primario,
.last-cta .gold {
  background: var(--tinta-3);
  color: var(--sobre-tinta);
}

@media (hover: hover) and (pointer: fine) {
  .ultimo-chamado .botao--primario:hover,
  .last-cta .gold:hover {
    background: var(--tinta);
  }
}

/* ───────────── páginas de lista (categoria) ───────────── */

.pagina-lista__topo {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.pagina-lista__texto {
  display: grid;
  align-content: end;
  gap: 0.25rem;
}

/* O nome da categoria lidera a primeira tela: tamanho de vitrine. */
.pagina-lista__texto .pagina__titulo {
  font-size: var(--passo-display);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.035;
}

.pagina-lista__faixa {
  margin-top: 1rem;
  font-size: var(--passo-pequeno);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.pagina-lista__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--campo-a);
}

.pagina-lista__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7);
}

/* Trio: fotos em pé, uma de cada tamanho, inteiras e lado a lado sobre o campo de cor. */
.pagina-lista__foto--trio {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.25rem);
  padding: 6% 4%;
}

.pagina-lista__foto--trio img {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 960px) {
  .pagina-lista__topo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    gap: 3rem;
  }

  .pagina-lista__foto {
    aspect-ratio: auto;
    height: min(66vh, 40rem);
    min-height: 24rem;
  }
}

.pagina-lista .prancha {
  margin-top: var(--vao-secao);
}

.duvida {
  margin-block: var(--vao-secao);
}

/* ───────────── ficha do produto ───────────── */

.produto {
  display: grid;
  grid-template-areas: 'topo' 'galeria' 'info';
  gap: 1.5rem;
}

.produto__topo {
  grid-area: topo;
  display: grid;
  gap: 0.5rem;
}

.galeria {
  grid-area: galeria;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.galeria__fotos {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--campo-a);
}

.galeria__fotos::-webkit-scrollbar {
  display: none;
}

.galeria__lista {
  display: flex;
  list-style: none;
}

.galeria__item {
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  height: min(72svh, 44rem);
  padding: 0.75rem;
  scroll-snap-align: start;
}

.galeria__foto {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.galeria__miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.galeria__miniatura {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  background: var(--campo-a);
  opacity: 0.62;
  transition: opacity var(--t-passar) ease;
}

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

.galeria__miniatura[aria-current='true'] {
  opacity: 1;
  outline: 3px solid var(--ouro);
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .galeria__miniatura:hover {
    opacity: 1;
  }
}

.galeria--vazia {
  display: grid;
  place-items: center;
  min-height: 18rem;
  background: var(--campo-a);
  color: var(--tinta-suave);
}

.produto__info {
  grid-area: info;
  display: grid;
  align-content: start;
  gap: 1rem;
}

.produto__nome {
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3.125rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.produto__capacidade {
  color: var(--tinta-suave);
  font-size: var(--passo-mini);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.produto__preco {
  margin-top: 0.25rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.produto__parcelas,
.produto__prazo {
  color: var(--tinta-suave);
  font-size: var(--passo-funcional);
}

.produto__prazo strong {
  color: var(--tinta);
  font-weight: 600;
}

.comprar {
  display: grid;
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.comprar__linha {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: end;
  gap: 0.75rem;
}

.comprar__linha .botao {
  min-height: 3.1875rem;
  gap: 1rem;
}

.comprar__status:empty {
  margin: 0;
}

.comprar__status {
  font-weight: 600;
}

.produto__garantias {
  display: grid;
  gap: 0.75rem;
  padding-left: 1.125rem;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

.produto__descricao {
  display: grid;
  gap: 1rem;
  max-width: var(--texto-max);
  margin-top: var(--vao-secao);
}

.produto__descricao h2 {
  font-size: var(--passo-sub);
  letter-spacing: -0.035em;
}

.produto__descricao h3 {
  margin-top: 1rem;
  font-size: var(--passo-destaque);
}

.pagina-ficha > .prancha {
  margin-top: var(--vao-secao);
  margin-bottom: var(--vao-secao);
}

@media (min-width: 960px) {
  .produto {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'galeria topo' 'galeria info';
    align-items: start;
    column-gap: 3.5rem;
    row-gap: 1.5rem;
  }

  /* Todas as fotos à vista, em grade (a primeira dobrada); sem carrossel nem miniaturas. */
  .galeria__fotos {
    overflow: visible;
    scroll-snap-type: none;
    background: none;
  }

  .galeria__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .galeria__item {
    height: auto;
    aspect-ratio: 4 / 5;
    padding: 1rem;
    background: var(--campo-a);
  }

  .galeria__item:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 1;
  }

  .galeria__foto {
    width: 100%;
    height: 100%;
  }

  .galeria__miniaturas {
    display: none;
  }
}

/* ───────────── formulários ───────────── */

.rotulo {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.opcional {
  color: var(--tinta-suave);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.campo {
  display: block;
  width: 100%;
  min-height: 3.1875rem;
  padding: 0.75rem 0.9375rem;
  border: 1px solid var(--pedra);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: max(16px, 1rem);
  transition: border-color var(--t-passar) ease, box-shadow var(--t-passar) ease;
}

select.campo {
  cursor: pointer;
}

.comprar__campo select.campo {
  appearance: none;
  padding-right: 2.5rem;
  background-image: none;
}

.comprar__campo,
.campo-grupo,
.frete__campo {
  position: relative;
}

.comprar__campo::after {
  content: '';
  position: absolute;
  right: 1rem;
  bottom: 1.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

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

.campo[aria-invalid='true'] {
  border-color: var(--erro);
  box-shadow: inset 0 0 0 1px var(--erro); /* taste-skill-ignore: borda dupla do campo inválido, sem deslocar o layout */
}

.campo-grupo {
  display: grid;
  gap: 0.25rem;
}

.campo-grupo + .campo-grupo,
.campos-cnpj {
  margin-top: 1rem;
}

.campo-grupo--caixa {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.campo-grupo--caixa .erro-campo {
  grid-column: 1 / -1;
}

.caixa {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--tinta);
}

.ajuda {
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

.erro-campo {
  color: var(--erro);
  font-size: var(--passo-funcional);
  font-weight: 600;
}

.alerta {
  padding: 1rem 1.25rem;
  border: 1px solid var(--linha);
  background: var(--papel-2);
  font-size: var(--passo-pequeno);
}

.alerta--erro {
  border-color: var(--erro);
  background: var(--erro-fundo);
  color: var(--erro);
  font-weight: 500;
}

.nota {
  color: var(--tinta-suave);
  font-size: var(--passo-funcional);
}

/* ───────────── frete ───────────── */

.frete {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--linha);
  background: var(--papel-2);
}

.frete__titulo {
  font-family: var(--fonte);
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.frete__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  align-items: end;
  gap: 0.75rem;
}

.frete__resultado:empty {
  margin: 0;
}

.opcoes-frete,
.opcoes-frete__grupo {
  display: grid;
  gap: 6px;
  list-style: none;
}

.opcoes-frete__grupo legend {
  margin-bottom: 0.5rem;
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.opcao-frete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--linha);
  background: var(--papel);
  font-size: var(--passo-pequeno);
  cursor: pointer;
}

.opcao-frete--consulta {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: default;
}

.opcao-frete input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--tinta);
}

.opcao-frete:has(input:checked) {
  border-color: var(--tinta);
  background: var(--ouro-tenue);
}

.opcao-frete__nome {
  font-weight: 600;
}

.opcao-frete__prazo {
  grid-column: 2;
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
}

.opcao-frete--consulta .opcao-frete__prazo {
  grid-column: 1;
}

/* No celular o valor desce para baixo do nome, que é longo e ganha a largura toda. */
.opcao-frete__valor {
  grid-column: 2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.opcao-frete--consulta .opcao-frete__valor {
  grid-column: 1;
}

@media (min-width: 560px) {
  .opcao-frete__valor {
    grid-row: 1;
    grid-column: 3;
  }

  .opcao-frete--consulta .opcao-frete__valor {
    grid-column: 2;
  }
}

.frete__combinar,
.atacado-aviso {
  display: grid;
  gap: 0.75rem;
}

.atacado-aviso {
  padding: 1.25rem;
  border: 1px solid var(--ouro);
  background: var(--ouro-tenue);
  font-size: var(--passo-pequeno);
}

/* ───────────── carrinho, finalizar e revisão ───────────── */

.pagina-compra {
  display: grid;
  gap: 1.5rem;
  max-width: 52rem;
  padding-bottom: var(--vao-secao);
}

.pagina-compra .pagina__titulo {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.carrinho,
.finalizar {
  display: grid;
  gap: 1.5rem;
}

.carrinho__itens {
  display: grid;
  gap: 1rem;
  list-style: none;
}

.item-carrinho {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--linha);
  background: var(--papel-2);
}

.item-carrinho__foto {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  background: var(--campo-a);
}

.item-carrinho__info {
  display: grid;
  gap: 0.375rem;
}

.item-carrinho__nome {
  font-weight: 600;
}

.item-carrinho__preco,
.item-carrinho__subtotal {
  font-variant-numeric: tabular-nums;
}

.item-carrinho__preco {
  color: var(--tinta-suave);
  font-size: var(--passo-pequeno);
}

.item-carrinho__subtotal {
  font-weight: 600;
}

.item-carrinho__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.item-carrinho__acoes .campo {
  width: auto;
  min-width: 5.5rem;
}

.carrinho__vazio {
  display: grid;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid var(--linha);
  background: var(--papel-2);
}

.carrinho__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.carrinho__carregando {
  color: var(--tinta-suave);
  font-size: var(--passo-pequeno);
}

.totais {
  display: grid;
  gap: 0.5rem;
}

.totais > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.totais dt {
  color: var(--tinta-suave);
}

.totais dd {
  font-variant-numeric: tabular-nums;
}

.totais__detalhe {
  font-size: var(--passo-funcional);
}

.totais__total {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: var(--passo-destaque);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.totais__total dt {
  color: var(--tinta);
}

.resumo:empty,
.revisao:empty {
  margin: 0;
  padding: 0;
}

.etapas {
  display: grid;
  gap: 1rem;
  list-style: none;
}

.etapa {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--linha);
  background: var(--papel-2);
}

.etapa__titulo {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.endereco {
  display: grid;
  gap: 0;
}

.endereco legend {
  margin-bottom: 0.75rem;
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lista-revisao {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  font-size: var(--passo-pequeno);
}

.revisao {
  display: grid;
  gap: 1rem;
}

.politica-resumo {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--papel);
  font-size: var(--passo-funcional);
}

.politica-resumo__titulo {
  font-family: var(--fonte);
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.aviso-retirada {
  padding: 1rem 1.25rem;
  border: 1px solid var(--ouro);
  background: var(--ouro-tenue);
  font-size: var(--passo-pequeno);
}

/* ───────────── pedido ───────────── */

/* O body também leva a classe pagina-pedido: o bloco é o de dentro do main. */
.principal > .pagina-pedido {
  display: grid;
  gap: 2rem;
  max-width: 52rem;
  padding-block: clamp(1.5rem, 4vw, 3rem) var(--vao-secao);
}

.situacao {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--ouro);
  background: var(--ouro-tenue);
}

.situacao--pago {
  border-color: var(--sucesso);
  background: var(--sucesso-fundo);
}

.situacao--expirado,
.situacao--cancelado {
  border-color: var(--linha);
  background: var(--papel-2);
}

.situacao--estornado {
  border-color: var(--erro);
  background: var(--erro-fundo);
}

.situacao__titulo {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.pedido-itens {
  display: grid;
  gap: 1rem;
}

.pedido-itens h2,
.desistencia h2 {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.pedido-itens__prazo {
  color: var(--tinta-suave);
  font-size: var(--passo-pequeno);
}

.desistencia {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--linha);
  background: var(--papel-2);
}

.desistencia__form {
  display: grid;
  gap: 1rem;
  max-width: 28rem;
}

/* ───────────── tabelas ───────────── */

.tabela-rolavel {
  overflow-x: auto;
  padding: 5px;
  margin: -5px;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--passo-pequeno);
  font-variant-numeric: tabular-nums;
}

.tabela th,
.tabela td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  color: var(--tinta-suave);
  font-size: var(--passo-legenda);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tabela tbody th {
  font-weight: 600;
}

.tabela__linha--alerta > * {
  background: var(--ouro-tenue);
}

/* ───────────── atendimento, 404 e manutenção ───────────── */

.texto-longo {
  display: grid;
  gap: 2.5rem;
  max-width: 52rem;
  padding-bottom: var(--vao-secao);
}

.institucional {
  display: grid;
  gap: 1rem;
  max-width: var(--texto-max);
}

.institucional h2 {
  margin-top: 1.5rem;
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.institucional ul,
.texto-longo ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
}

.pagina-404 .texto-longo,
.pagina-manutencao .texto-longo {
  padding-top: clamp(2rem, 6vw, 4rem);
}

.lista-links {
  font-weight: 600;
}

.contato-caixa {
  --foco: var(--ouro);
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--escuro);
  color: var(--sobre-tinta);
}

.contato-caixa__titulo {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.contato-caixa p {
  color: var(--sobre-tinta-suave);
  font-size: var(--passo-pequeno);
}

.contato-caixa .botao--whatsapp {
  background: var(--ouro);
  color: var(--tinta);
}

@media (hover: hover) and (pointer: fine) {
  .contato-caixa .botao--whatsapp:hover {
    background: var(--ouro-claro);
  }
}

/* ───────────── admin e homologação (painel do lojista) ───────────── */

.secao-admin {
  display: grid;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.secao-admin h2 {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.ficha {
  display: grid;
  gap: 0.5rem;
  font-size: var(--passo-pequeno);
}

.form-admin {
  display: grid;
  gap: 0.75rem;
  max-width: 28rem;
}

.simulacao {
  display: grid;
  gap: 0.75rem;
  margin-block: 1.5rem;
  padding: 1.25rem;
  background: var(--ouro);
  color: var(--tinta);
}

.simulacao__titulo {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.botoes-simulacao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pagina-admin .principal > .conteiner,
.pagina-homologacao .principal > .conteiner {
  padding-bottom: var(--vao-secao);
}

/* ───────────── rodapé: o rodapé escuro do modelo ───────────── */

.rodape {
  --foco: var(--ouro);
  padding-block: clamp(2.5rem, 6vw, 3.75rem) 1.5625rem;
  background: var(--escuro);
  color: var(--sobre-tinta);
}

/* A linha de cima do rodapé do modelo: marca, recado e contato, separados por linha fina. */
.rodape__cartao {
  display: grid;
  gap: 2.1875rem;
  padding-bottom: 3.125rem;
}

.rodape__marca {
  text-decoration: none;
}

.rodape__mensagem,
.rodape__endereco {
  display: grid;
  align-content: start;
  gap: 0.875rem;
}

.rodape__titulo {
  font-size: var(--passo-destaque);
  letter-spacing: -0.02em;
}

.rodape__titulo--pequeno {
  color: var(--sobre-tinta-tenue);
  font-family: var(--fonte);
  font-size: var(--passo-mini);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rodape__mensagem p {
  max-width: 40ch;
  color: var(--sobre-tinta-tenue);
  font-size: var(--passo-pequeno);
}

/* O selo e a plaqueta são adesivos claros: no rodapé escuro ganham a mesma moldura, para parecerem
   objeto pregado na caixa e não um retângulo que escapou do fundo. */
.rodape__selo {
  width: 179px;
  margin-top: 0.5rem;
  padding: 6px;
  background: var(--tinta-2);
}

.rodape__carimbo {
  width: 88px;
  padding: 6px;
  background: var(--tinta-2);
}

.rodape__contatos {
  display: grid;
  gap: 0.5625rem;
  list-style: none;
  font-size: var(--passo-pequeno);
  line-height: 1.5;
}

.rodape__contatos a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.rodape__contatos li:last-child {
  color: var(--sobre-tinta-tenue);
  font-size: var(--passo-micro);
}

.rodape__link {
  overflow-wrap: anywhere;
}

.rodape__fundo {
  display: grid;
  gap: 2rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--linha-no-escuro);
  font-size: var(--passo-legenda);
}

.rodape__bloco {
  display: grid;
  align-content: start;
  gap: 0.5625rem;
}

.rodape__lista {
  display: grid;
  list-style: none;
}

.rodape__lista .rodape__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--sobre-tinta);
  text-decoration-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .rodape__lista .rodape__link:hover {
    text-decoration-color: currentColor;
  }
}

.rodape__fundo .rodape__link {
  color: var(--sobre-tinta);
}

.rodape__empresa {
  display: grid;
  gap: 0.5rem;
  color: var(--sobre-tinta-tenue);
  font-size: var(--passo-pequeno);
  line-height: 1.7;
}

.rodape__empresa .botao-texto {
  color: var(--sobre-tinta);
  font-size: var(--passo-micro);
}

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

@media (min-width: 960px) {
  .rodape__cartao {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 2.1875rem;
  }

  .rodape__endereco {
    justify-items: end;
    text-align: right;
  }

  .rodape__contatos {
    justify-items: end;
  }
}

/* ───────────── aviso de medição (flutua: pode ter sombra) ───────────── */

/* No topo, por cima do cabeçalho, até a escolha: assim nunca cobre o botão do herói (que fica embaixo). */
.consentimento {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 10px 32px oklch(0.22 0.013 150 / 0.26); /* taste-skill-ignore: aviso fixo sobre a página (sobreposição real) */
}

.consentimento__caixa {
  display: grid;
  gap: 0.625rem;
  padding-block: 0.75rem;
  font-size: var(--passo-legenda);
  line-height: 1.5;
}

.consentimento__titulo {
  font-weight: 600;
}

.consentimento__texto {
  max-width: 66ch;
}

.consentimento__botoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.consentimento__botoes .botao {
  min-height: 2.75rem;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--passo-legenda);
}

@media (min-width: 720px) {
  .consentimento__caixa {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
  }

  .consentimento__botoes .botao {
    padding-inline: 1.25rem;
  }
}

html:has(.consentimento:not([hidden])) {
  scroll-padding-top: calc(var(--altura-aviso, 12rem) + var(--altura-cabecalho) + 1rem);
}

/* O aviso é FIXO no topo: enquanto está aberto, a página reserva a altura dele, medida pelo
   `consentimento.js`. Sem essa reserva ele cobriria o cabeçalho (que é `sticky`) e a faixa — e
   empurrar só o cabeçalho não resolve, porque `sticky` desloca a barra POR CIMA do que vem depois. */
html:has(.consentimento:not([hidden])) body {
  padding-top: var(--altura-aviso, 0px);
}

/* E a barra gruda ABAIXO do aviso: com a reserva acima, a posição natural dela já é essa, então o
   `top` não desloca nada parado — só impede que a rolagem leve a barra para debaixo do aviso. */
html:has(.consentimento:not([hidden])) .cabecalho {
  top: var(--altura-aviso, 0px);
}

html:has(.consentimento:not([hidden])) .progresso {
  top: var(--altura-aviso, 0px);
}

html:has(.consentimento:not([hidden])) .pular:focus {
  top: calc(var(--altura-aviso, 0px) + 0.9375rem);
}

/* ───────────── movimento ───────────── */

@media (prefers-reduced-motion: no-preference) {
  /* Herói: só CSS (roda mesmo sem script). A aproximação lenta do modelo, mas UMA vez, na entrada: o
     `infinite alternate` dele deixaria a primeira tela em movimento para sempre (WCAG 2.2.2, conteúdo
     que se move sozinho por mais de cinco segundos e não tem como pausar). */
  .heroi__foto img,
  .hero-art img {
    animation: cinema 4s var(--macia) both;
  }

  .heroi__copo > *,
  .hero-copy > * {
    animation: subir var(--t-entrada) var(--saida) both;
  }

  .heroi__copo > :nth-child(1) {
    animation-delay: 120ms;
  }

  .heroi__copo > :nth-child(2) {
    animation-delay: 210ms;
  }

  .heroi__copo > :nth-child(3) {
    animation-delay: 300ms;
  }

  .heroi__copo > :nth-child(4) {
    animation-delay: 390ms;
  }

  .heroi__desca .seta {
    animation: descer 2s infinite;
  }

  .pagina-lista__texto > *,
  .pagina-lista__foto,
  .produto__topo > *,
  .galeria__item:first-child {
    animation: subir var(--t-entrada) var(--saida) both;
  }

  .pagina-lista__texto > :nth-child(2),
  .pagina-lista__foto,
  .produto__topo > :nth-child(2) {
    animation-delay: 90ms;
  }

  .produto__topo > :nth-child(3),
  .galeria__item:first-child {
    animation-delay: 180ms;
  }

  .produto__topo > :nth-child(4) {
    animation-delay: 240ms;
  }

  /* Entradas das seções: o vitrine.js marca as peças e a ordem; sem script, nada fica escondido. */
  .mb-movimento .revela {
    opacity: 0;
    transform: translateY(1.5625rem);
    transition: opacity 800ms ease, transform 800ms ease;
  }

  .mb-movimento .revela.is-in {
    opacity: 1;
    transform: none;
  }

  .mb-movimento .revela--foto {
    transform: translateY(1rem) scale(1.03);
  }

  .mb-movimento .revela--foto.is-in {
    transform: none;
  }

  .mb-movimento .atraso-1 {
    transition-delay: 70ms;
  }

  .mb-movimento .atraso-2 {
    transition-delay: 140ms;
  }

  .mb-movimento .atraso-3 {
    transition-delay: 210ms;
  }

  .mb-movimento .atraso-4 {
    transition-delay: 280ms;
  }

  .mb-movimento .atraso-5 {
    transition-delay: 350ms;
  }

  /* A faixa de fotos do atacado e a foto do Cerrado andam com a ROLAGEM (quem rola controla; nada corre
     sozinho, WCAG 2.2.2), onde o navegador sabe fazer isso; sem esse suporte, ficam paradas. */
  @supports (animation-timeline: view()) {
    .atacado__fotos {
      animation: correr linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    .quem-faz__foto img {
      animation: derivar linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

@keyframes cinema {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.065);
  }
}

@keyframes descer {
  50% {
    transform: translateY(5px);
  }
}

@keyframes correr {
  to {
    transform: translateX(-18%);
  }
}

@keyframes derivar {
  from {
    transform: scale(1.06) translateY(-2%);
  }

  to {
    transform: scale(1.06) translateY(2%);
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Impressão (e qualquer leitor que não rode a entrada): nada fica escondido. */
@media print {
  .revela {
    opacity: 1 !important;
    transform: none !important;
  }

  .consentimento,
  .progresso,
  .heroi__foto,
  .atacado__faixa {
    display: none !important;
  }
}

/* ───────────── formulário antes do WhatsApp (lead-gate.js, kit ciclo 5) ─────────────
 * Cópia das regras que o kit injeta num <style> próprio — barrado pela CSP `style-src 'self'`.
 * Ao atualizar o kit (vendor/lead-gate.kit.js), conferir estas regras com a variável `css` dele.
 * A cor do botão vem de `--lg-cor`, que o kit define pelo CSSOM (permitido pela CSP) a partir de
 * `window.LEAD_GATE.cor`; o valor abaixo é o padrão se a configuração não carregar. Na loja, os cantos
 * seguem a casa (retos) e a letra é a da loja.
 */
.lg-dialog {
  --lg-cor: #0f7a43;
  margin: auto;
  border: 0;
  border-radius: var(--lg-raio-caixa, 0);
  padding: 0;
  width: min(92vw, 420px);
  max-height: 92vh;
  overflow: auto;
  color: var(--tinta);
  background: var(--papel);
  font-family: var(--fonte);
  box-shadow: 0 24px 64px oklch(0.22 0.013 150 / 0.3); /* taste-skill-ignore: diálogo (sobreposição real) */
}

.lg-dialog::backdrop {
  background: rgba(23, 29, 24, 0.72);
  backdrop-filter: blur(9px);
}

.lg-box {
  margin: 0;
  padding: 26px 22px 20px;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  position: relative;
  text-align: left;
}

.lg-box .lg-titulo {
  margin: 0 34px 6px 0;
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: inherit;
}

.lg-box .lg-texto {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.lg-box .lg-rotulo {
  display: block;
  margin: 14px 0 6px;
  font-weight: 600;
  font-size: 0.92rem;
  color: inherit;
}

.lg-box .lg-campo {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--pedra);
  border-radius: var(--lg-raio, 0);
  background: var(--papel);
  color: var(--tinta);
}

.lg-box .lg-campo:focus-visible,
.lg-box button:focus-visible,
.lg-box input[type='checkbox']:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.lg-box .lg-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 0;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.4;
  cursor: pointer;
}

.lg-box .lg-consent input {
  margin: 2px 0 0;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--tinta);
}

.lg-dialog .lg-box .lg-consent input[type='checkbox'] {
  -webkit-appearance: checkbox;
  appearance: auto;
  display: inline-block;
  visibility: visible;
  opacity: 1;
  position: static;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  clip-path: none;
  pointer-events: auto;
}

.lg-box .lg-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px; /* taste-skill-ignore: campo-isca invisível do kit (anti-robô), não é linha */
  opacity: 0;
}

.lg-box .lg-erro {
  color: var(--erro);
  font-size: 0.9rem;
  margin: 10px 0 0;
}

.lg-box .lg-enviar {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: 15px 16px;
  min-height: 48px;
  border: 0;
  border-radius: var(--lg-raio, 0);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  background: var(--lg-cor, #1f7a4d);
}

.lg-box .lg-enviar[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.lg-box .lg-fechar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--tinta-suave);
  border-radius: 0;
}

.lg-box .lg-priv {
  font-size: 0.8125rem;
  margin: 12px 0 0;
  color: var(--tinta-suave);
}

.lg-box .lg-priv a {
  color: inherit;
  text-decoration: underline;
}

/* Painel final do kit (ciclo 5): botão "Abrir o WhatsApp" e o caminho alternativo. `hidden` com
 * !important: regra de tema como `div{display:block}` não pode mostrar o formulário e o painel juntos. */
.lg-dialog [hidden] {
  display: none !important;
}

.lg-box .lg-abrir {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: 15px 16px;
  min-height: 48px;
  border-radius: var(--lg-raio, 10px);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--lg-cor, #1f7a4d);
}

.lg-box .lg-abrir:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.lg-box .lg-alt {
  font-size: 0.9rem;
  margin: 12px 0 0;
  color: var(--tinta-suave);
}

.lg-box .lg-alt a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}