/* ==========================================================================
   Site público novo — Amantes de Trinca
   Home desperta interesse · Landing convence · Checkout finaliza

   Arquivo estático de propósito: dentro de <style> em template Django o "&"
   das URLs vira "&amp;" e decimais viram vírgula no locale pt-BR.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --forest: #073c28;
  --forest-2: #0e5037;
  --cream: #f7efdf;
  --cream-2: #fffaf0;
  /* Amarelo da marca. Um degrau mais fundo que o #ffd800 original — que sobre
     o creme estourava sem virar cor —, mas ainda amarelo de sol: o #f7b900 da
     referência puxava para mostarda e brigava com o verde. Aqui a diferença é
     de intensidade, não de família. */
  --yellow: #fdc500;
  /* O mesmo amarelo lavado, para fundo de faixa. Aviso sobre --yellow cheio
     grita mais que o produto ao lado; aqui ele avisa sem disputar. */
  --yellow-suave: #fff6d9;
  --ink: #183124;
  --muted: #647267;
  --white: #fff;
  --line: rgba(7, 60, 40, .18);
  --radius: 24px;

  /* Hierarquia dos títulos de produto e de página. Cada um tem um trabalho:
     a home precisa parar a rolagem (quem chega ainda não decidiu nada), a
     landing só confirma o que a pessoa já clicou, e o guia é consulta — título
     grande ali atrasa quem veio buscar um número.
     O `vw` do meio é calculado para o tamanho cheio aparecer já em 1280px, e
     não só em monitor largo: assim o número escolhido é o número que se vê. */
  --titulo-home:    clamp(2.1rem, 4.7vw, 3.75rem);   /* 60px */
  --titulo-landing: clamp(1.95rem, 3.6vw, 2.875rem); /* 46px */
  --titulo-guia:    clamp(1.8rem, 3.15vw, 2.5rem);   /* 40px */
  --shadow: 0 20px 50px rgba(7, 60, 40, .12);
  --container: min(1180px, calc(100% - 64px));

  /* Caixa da foto do produto na home. Fica em token porque o valor muda por
     breakpoint: com os numeros soltos dentro de cada @media, corrigir o desktop
     deixava o mobile para tras em silencio. Um lugar so para mudar. */
  --foto-largura: 430px;
  --foto-altura: 500px;

  /* Inclinacao da foto. So o ANGULO fica no token -- o SINAL vem da linha:
     negativo na normal, positivo na .reverse. Assim a alternancia nao depende
     do breakpoint (o mobile ja repetiu o mesmo sinal nos dois e ficou tudo
     pendendo para o mesmo lado) nem da ordem dos produtos no admin. */
  --foto-giro: 8deg;
  --foto-giro-hover: 5deg;
  --foto-sobe: -10px;
  --foto-zoom: 1.025;

  /* Foto da lista: menor e menos inclinada que a da home, de proposito. */
  --foto-lista: 320px;
  --foto-lista-giro: 4deg;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream-2);
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.container { width: var(--container); margin-inline: auto; }
section { padding: 96px 0; }

/* Existe para leitor de tela e para o buscador, invisível na tela. Usado no
   <h1> da lista, que abre direto no primeiro produto. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Traço dos ícones (sprite em _icones.html). currentColor faz o desenho seguir
   a cor do texto ao redor — um ícone só serve no menu claro e no rodapé escuro. */
.ico {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .2s ease;
}

/* Quem navega por teclado so tem o :hover para se orientar, e o anel padrao do
   navegador some no .btn (que tem borda transparente). Anel proprio, e amarelo
   sobre os fundos verdes escuros -- verde sobre verde nao se enxerga. */
:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
  border-radius: 4px;
}
footer :focus-visible { outline-color: var(--yellow); }

h1, h2, h3 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.035em;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 5.4rem); }
h2 { font-size: clamp(2.2rem, 4.2vw, 4.4rem); }
h3 { font-size: clamp(1.45rem, 2.3vw, 2rem); }
p { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest);
}
.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(253, 197, 0, .22);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* Sem brilho. O halo amarelo de 24px sob um botão amarelo não separava nada
   do fundo creme — só engordava o botão e datava a página. O que destaca o
   botão é a cor, que já é a mais forte da tela. */
.btn-primary { background: var(--yellow); color: var(--forest); }
.btn-outline { border-color: var(--forest); color: var(--forest); background: transparent; }
.btn-lg { min-height: 56px; padding: 1rem 1.8rem; font-size: 1.05rem; }

.text-link { font-weight: 800; }

/* ── Topo ─────────────────────────────────────────────────────────────────── */
.announcement {
  background: var(--forest);
  color: var(--white);
  text-align: center;
  padding: .62rem 1rem;
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .02em;
}

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 240, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(7, 60, 40, .08);
}
.nav {
  position: relative;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-logo { width: auto; height: 52px; max-width: 190px; object-fit: contain; }

/* Um menu só, em qualquer largura: painel ancorado no ☰. Decisão do usuário —
   o gesto é o mesmo no celular e no computador, e nenhum link precisa existir
   em dois lugares para caber nos dois tamanhos.
   ATENÇÃO: `.mobile-toggle` NUNCA pode voltar a ser display:none fora do mobile.
   Já aconteceu, e o menu ficou inalcançável no desktop — sem erro, sem aviso. */
.nav-links {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  min-width: 264px;
  margin-top: 8px;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  padding: 14px 16px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--forest);
}
.nav-links.open { display: flex; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .92rem .7rem;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}
.nav-links a:hover { background: var(--cream); color: var(--forest-2); }
.nav-links .ico { width: 22px; height: 22px; opacity: .75; }
.nav-links a:hover .ico { opacity: 1; }

.nav-sep { height: 1px; background: var(--line); margin: .2rem 0; }
.nav-actions { display: flex; gap: .55rem; align-items: center; }

/* Com um menu só, o que era exclusivo de cada largura passa a conviver: os
   itens do painel aparecem sempre, e os atalhos de ícone do topo somem. */
.nav-so-mobile { display: inline-flex; }
.nav-so-desktop { display: none; }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .55);
  color: var(--forest);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.icon-btn:hover {
  background: var(--white);
  border-color: var(--forest);
  transform: translateY(-2px);
}
/* 19px do .ico base ficam perdidos dentro de um botao de 46px. */
.icon-btn .ico { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--cream-2);
}
/* `hidden` sozinho nao vence o display do .icon-btn — precisa ser explicito. */
.icon-btn[hidden] { display: none; }

/* O carrinho entrando em cena depois do primeiro "Adicionar". */
.icon-btn.entrando { animation: carrinho-entra .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes carrinho-entra {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.mobile-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--forest);
}
/* O maior dos tres: e o unico controle do menu no celular. */
.mobile-toggle .ico { width: 26px; height: 26px; stroke-width: 2.2; }

/* ── Vitrine de produtos (home) ───────────────────────────────────────────── */
.products-showcase { background: var(--cream-2); overflow: hidden; }
.products-intro { text-align: center; max-width: 760px; margin: 0 auto 64px; }
/* O título da home é <h1> por ser a raiz do domínio, mas o TAMANHO é o do
   h2: promovido sem isto, ele herda o `h1` global (clamp até 5.4rem) e a
   home ganha um título gigante que ninguém pediu. Estrutura muda, desenho
   não. */
.products-intro h1 {
  color: var(--forest);
  margin: .9rem 0 1rem;
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
}
.products-intro p { color: var(--muted); }

.product-row {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  margin: 0 0 112px;
}
.product-row.reverse { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.product-row.reverse .product-visual { order: 2; }
.product-row.reverse .product-copy { order: 1; }

.product-visual { min-height: 540px; display: grid; place-items: center; position: relative; }
.product-image {
  /* Largura em 100% (e nao 78%) para a ALTURA voltar a ser o limite: o produto
     e um pote mais alto que largo, e a 78% a caixa era limitada pela largura --
     entao a folga transparente lateral do arquivo virava perda de tamanho. */
  width: min(100%, var(--foto-largura));
  max-height: var(--foto-altura);
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 34px 28px rgba(7, 60, 40, .16));
  transform: rotate(calc(var(--foto-giro) * -1));
  transform-origin: center center;
  transition: transform .35s ease, filter .35s ease;
}
.product-row.reverse .product-image { transform: rotate(var(--foto-giro)); }
.product-visual:hover .product-image {
  transform: rotate(calc(var(--foto-giro-hover) * -1)) translateY(var(--foto-sobe)) scale(var(--foto-zoom));
  filter: drop-shadow(0 42px 34px rgba(7, 60, 40, .2));
}
.product-row.reverse .product-visual:hover .product-image {
  transform: rotate(var(--foto-giro-hover)) translateY(var(--foto-sobe)) scale(var(--foto-zoom));
}

.product-copy { max-width: 560px; }
.product-number { color: var(--forest); opacity: .42; font-weight: 800; letter-spacing: .14em; font-size: .76rem; text-transform: uppercase; }
.product-copy h3 { color: var(--forest); font-size: var(--titulo-home); margin: .75rem 0 1rem; }
.product-copy > p { color: var(--muted); font-size: 1.04rem; }
.product-points { display: grid; gap: .8rem; margin: 1.7rem 0 2rem; }
.product-point { display: flex; align-items: flex-start; gap: .75rem; color: var(--ink); font-weight: 600; }
.product-point::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(253, 197, 0, .20);
  flex: 0 0 auto;
}
.products-cta { display: flex; justify-content: center; margin-top: -28px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { background: #fffdf7; }
.faq-list { max-width: 860px; margin: 42px auto 0; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 20px 0; }
summary { cursor: pointer; list-style: none; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.4rem; color: var(--forest); }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); padding-top: 12px; }

/* ── Lista completa de produtos ───────────────────────────────────────────── */

/* Uma linha por produto, foto SEMPRE à esquerda — sem alternar lado. O
   zig-zag faz o olho pular de um lado ao outro a cada produto; com a foto
   sempre no mesmo lugar a leitura vira uma coluna só e a lista fica de
   varredura, não de descoberta.
   Mais apertada que a home de propósito: a home é cinema (3 produtos, foto de
   500px), a lista é ritmo (8 produtos, foto de 320px). Se fossem iguais, "Ver
   todos os produtos" pareceria não ter feito nada. */
.lista-produtos { padding: 78px 0 96px; }

.produto-linha {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.produto-linha + .produto-linha { margin-top: 64px; }

.produto-linha-foto { display: grid; place-items: center; min-height: var(--foto-lista); }
.produto-linha-img {
  width: min(100%, var(--foto-lista));
  max-height: var(--foto-lista);
  object-fit: contain;
  filter: drop-shadow(0 22px 20px rgba(7, 60, 40, .14));
  transform: rotate(calc(var(--foto-lista-giro) * -1));
  transition: transform .3s ease;
}
.produto-linha-foto:hover .produto-linha-img { transform: rotate(0deg) scale(1.03); }
.produto-linha-foto .sem-foto { color: var(--muted); font-size: .85rem; font-weight: 600; }

.produto-linha-copy h2 { color: var(--forest); font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
/* Mais leve que o nome: informa o conteúdo sem competir com o título. */
.produto-linha-peso {
  font-family: "DM Sans", sans-serif;
  font-size: .5em;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  white-space: nowrap;
}
.produto-linha-headline { color: var(--muted); font-size: 1.05rem; margin-top: .7rem; max-width: 520px; }

.produto-linha-preco {
  font-family: "Fraunces", serif;
  font-size: 1.85rem;
  color: var(--forest);
  margin-top: 1.2rem;
}
.produto-linha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.3rem; }
.produto-linha-acoes .text-link { color: var(--forest); }
.produto-linha-acoes .text-link:hover { color: var(--forest-2); }
.btn-adicionar { min-width: 168px; }
.btn-adicionar.adicionado { background: var(--forest); color: var(--white); box-shadow: none; }

/* Fecho da lista: borda suave, sem sombra pesada — é um convite, não um alerta. */
.ajuda-box {
  margin-top: 92px;
  padding: clamp(34px, 5vw, 54px);
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ajuda-box h2 { color: var(--forest); font-size: clamp(1.6rem, 3vw, 2.3rem); }
.ajuda-box p {
  color: var(--muted);
  max-width: 520px;
  margin: .9rem auto 1.8rem;
  font-size: 1.04rem;
}
.ajuda-box .ico { width: 22px; height: 22px; }

.grid-produtos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card-produto {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card-produto:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card-produto-media {
  /* Quadrado, não 4/3 deitado: os produtos são potes e frascos mais altos que
     largos, e numa caixa deitada eles ficavam limitados pela altura e pequenos. */
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 22px;
  background: linear-gradient(145deg, #f2f0e6, #e4e8dd);
}
.card-produto-media img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.card-produto-media .sem-foto { color: var(--muted); font-size: .85rem; font-weight: 600; }
.card-produto-body { padding: 22px; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-produto h2 { font-size: 1.4rem; color: var(--forest); }
.card-produto-preco { font-family: "Fraunces", serif; font-size: 1.5rem; color: var(--forest); }
.card-produto .btn { margin-top: auto; }

/* ── Páginas de compra ────────────────────────────────────────────────────
   O fundo é o do resto do site (`--cream-2`, herdado do body). Tentei descer a
   página para `--cream` como faz o checkout, para o card se destacar por
   contraste — e escureceu a tela inteira para resolver um problema que era do
   card, não da página.

   Quem separa o card do papel aqui é a MOLDURA: mesma borda, mesmo raio e
   mesma sombra do `.card-produto`, que é o card padrão da loja. Assim o
   carrinho parece a mesma loja, e não uma tela emprestada de outro lugar. */

/* ── Topo das páginas de compra ───────────────────────────────────────────
   Cabeçalho enxuto do carrinho: logo e selo, e mais nada. Não é `sticky` como
   o do resto do site — quem acompanha a rolagem aqui é a barra do total, e
   dois blocos grudados nas duas pontas da tela só encolhem o meio. */
.topo-compra {
  /* Cópia fiel do `.ck-header` do checkout: mesmo fundo translúcido, mesmo
     desfoque, mesmo fio embaixo, e gruda no topo como lá. Era estático, e a
     diferença aparecia no pior lugar — o topo mudava de comportamento no meio
     do caminho para o pagamento. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 240, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(7, 60, 40, .08);
}
.topo-compra .brand-logo { width: auto; height: 34px; }
.topo-compra-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}
/* Idêntico ao `.ck-seguro`: cinza e discreto, não verde e em negrito. Ele
   tranquiliza, não anuncia. */
.selo-seguro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.selo-seguro .ico { width: 15px; height: 15px; flex: none; }

/* ── Carrinho ─────────────────────────────────────────────────────────────── */
/* O recuo de baixo devolve a altura que a barra fixa do total ocupa: sem ele,
   ela cobre o último card e o cliente pensa que o item sumiu. */
.carrinho-pagina { padding: 30px 0 calc(190px + env(safe-area-inset-bottom)); }
.container-estreito { max-width: 640px; }

/* O carrinho é mais estreito que os 640px do texto corrido, e por um motivo
   medido: o item veio do resumo do checkout, onde a coluna tem 380px. Esticado
   para 640, o mesmo grid abria 311px de vão entre o seletor de quantidade e o
   preço — três quartos da linha sem nada. Estreitar resolve na raiz e mantém o
   item idêntico ao do checkout; mexer no layout dele quebraria o padrão.

   Vale só aqui: as páginas de texto (termos, privacidade, como usar) continuam
   nos 640px, que é a medida de linha confortável para leitura. */
.frete-faixa > .container-estreito,
.carrinho-pagina > .container-estreito,
.barra-fechar > .container-estreito { max-width: 560px; }

/* Título e "Continuar comprando" na mesma linha: a saída para a loja fica ao
   lado do nome da página, e não competindo com o botão de pagar lá embaixo. */
.carrinho-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* `wrap: nowrap` é o ponto: o "Continuar comprando" fica no lado OPOSTO ao
     título em qualquer largura. Empilhado embaixo dele (que era o que o celular
     fazia), vira mais um item da coluna e some no meio do carrinho. */
  flex-wrap: nowrap;
  gap: .8rem;
  margin-bottom: 1.1rem;
}
.carrinho-cabeca h1 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  color: var(--forest);
}
/* Peso de link, não de botão. Em negrito 700 e verde cheio ele disputava
   atenção com o título ao lado e com o "Finalizar compra" lá embaixo — mas
   isto é uma SAÍDA: precisa estar achável, não convincente. */
.carrinho-continuar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.carrinho-continuar .ico { width: 16px; height: 16px; flex: none; opacity: .8; }
.carrinho-continuar:hover { color: var(--forest); }
.carrinho-continuar:hover .ico { opacity: 1; }

.carrinho-lista { list-style: none; margin: 0; padding: 0; }

/* Superfície única, igual à do resumo do checkout (`.ck-resumo`): os dois são
   a mesma coisa em duas telas, e ler diferente faz o cliente conferir de novo
   o que já conferiu. */
.carrinho-card {
  overflow: hidden;
  padding: 0 20px;
  border: 1px solid rgba(7, 60, 40, .16);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(7, 60, 40, .06);
}

.carrinho-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
/* O último item não leva fio: encostado na borda do card, ele vira linha
   dupla. */
.carrinho-item:last-child { border-bottom: 0; }

/* Solta, sem moldura. A caixinha em volta criava um card dentro do card e
   roubava 10px do produto para virar borda. `contain` e não `cover`: foto de
   pote alto recortada em quadrado perde tampa e base, e o cliente não
   reconhece o que comprou. O `multiply` funde o fundo branco da foto ao do
   card, para as fotos parecerem da mesma família mesmo vindo com
   enquadramentos diferentes. */
.carrinho-item-foto {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: contain;
  background: none;
  mix-blend-mode: multiply;
}
.carrinho-item-copy { min-width: 0; }
.carrinho-item-nome {
  margin: 0 0 9px;
  font-size: .98rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.3;
}

/* Seletor de quantidade embaixo do nome, e não junto da lixeira à direita:
   mexer na quantidade é ação de compra, remover é desistência — misturadas no
   mesmo canto, o dedo erra a que não tem volta. */
.carrinho-qtd {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  /* O fundo branco fica no controle inteiro e não em cada botão: só as pontas
     brancas deixavam o número no meio herdando o creme, e ele virava um buraco
     exatamente onde está o dado que importa. */
  background: var(--white);
}
.carrinho-qtd button {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.carrinho-qtd button:hover { background: var(--cream); }
.carrinho-qtd output {
  min-width: 36px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* O total da linha em cima, o preço unitário abaixo dele e a lixeira por
   último: de cima para baixo, do que se lê ao que raramente se usa. */
.carrinho-item-fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.carrinho-item-total { margin: 0; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.carrinho-item-unit { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.carrinho-item-remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 34px de alvo para um ícone de 19px: menor que isso, o dedo erra — e errar
     aqui apaga um produto do carrinho. */
  width: 34px;
  height: 34px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}
/* 1.8 e não os 2 da classe `.ico`: é o traço que o checkout desenha à mão,
   e a espessura é metade do que faz duas lixeiras parecerem ícones
   diferentes. */
.carrinho-item-remover .ico { width: 19px; height: 19px; stroke-width: 1.8; }
.carrinho-item-remover:hover { color: #b42318; background: rgba(180, 35, 24, .08); }

/* ── Faixa do frete grátis ────────────────────────────────────────────────
   Logo abaixo do cabeçalho e da largura inteira da tela. É o único aviso que
   vale interromper a leitura: diz o que a pessoa ganha levando mais um item,
   e é a única coisa aqui capaz de mudar o que ela decide.

   Só aparece depois do CEP — antes dele a cota mostrada seria a de São Paulo
   chutada para o país inteiro, e no Norte ela é outra. */
.frete-faixa {
  padding: .85rem 0 .95rem;
  background: var(--yellow-suave);
  border-bottom: 1px solid rgba(7, 60, 40, .08);
}
/* Atingido NÃO pinta o fundo (pedido do usuário, e correto): a faixa inteira
   de verde vira um bloco que compete com o produto ao lado e some com a
   sensação de barra de progresso. Quem comemora é a barra, que enche. */
.frete-faixa-msg {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--forest);
}
.frete-faixa-msg .ico { width: 18px; height: 18px; flex: none; }
.frete-faixa.atingido .frete-faixa-msg { color: #1a7f4e; }

.frete-barra {
  height: 6px;
  border-radius: 99px;
  background: rgba(7, 60, 40, .12);
  overflow: hidden;
}
.frete-barra span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--yellow);
  transition: width .4s ease;
}
.frete-faixa.atingido .frete-barra span { background: #1a7f4e; }
.frete-gratis { color: #1a7f4e; }

/* ── Sugestão para fechar a cota ──────────────────────────────────────────
   Uma linha, depois dos itens, e só quando falta UMA unidade — o caso em que
   um clique dá o frete. Faltando duas ou mais, isto vira catálogo no meio do
   carrinho. */
.frete-sugestao {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: .7rem;
  align-items: center;
  margin-top: 1rem;
  padding: .55rem .7rem;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: left;
}
.frete-sugestao img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.frete-sugestao-copy { min-width: 0; }
.frete-sugestao-nome { display: block; font-size: .87rem; font-weight: 600; line-height: 1.3; }
.frete-sugestao-preco { display: block; color: var(--muted); font-size: .8rem; }
.frete-sugestao-add {
  padding: .45rem .8rem;
  border: 1.5px solid var(--forest);
  border-radius: 10px;
  background: transparent;
  color: var(--forest);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.frete-sugestao-add:hover { background: var(--forest); color: var(--white); }

/* ── Card de entrega ──────────────────────────────────────────────────────
   Nasce fechado: uma linha dizendo "Entrega" e oferecendo "Calcular". O campo
   de CEP só aparece para quem pediu.

   É um <details> e não um painel controlado por JavaScript — assim abre e
   fecha sozinho, funciona com teclado por definição, e a página inteira segue
   de pé se o JS falhar. O único JS aqui é a máscara do hífen, que é conforto.

   O CEP saiu do topo da página de propósito: dois blocos de frete antes dos
   produtos faziam o carrinho parecer um formulário de correios. Aqui ele vem
   depois do que a pessoa está comprando, que é a ordem em que ela pensa. */
.entrega-card {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(7, 60, 40, .16);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(7, 60, 40, .06);
}
/* ATENÇÃO: `details { border-bottom; padding: 20px 0 }` e
   `summary::after { content: "+" }` lá em cima são do acordeão de dúvidas, mas
   estão escritos como seletor de ELEMENTO — valem para todo <details> do site
   e vazaram inteiros para este card: 40px de recuo que ninguém pediu, um risco
   embaixo e um "+" solto empurrando o "Calcular" para o meio da linha.

   Aqui eles são desfeitos de propósito, e não por acaso. Qualquer <details>
   novo fora do FAQ vai precisar do mesmo — o certo, um dia, é aquelas regras
   passarem a valer só dentro de `.faq-list` e companhia. */
.entrega-abre { padding: 0; border-bottom: 0; }
.entrega-abre > p { padding-top: 0; }

.entrega-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* O "+" tem de morrer aqui. `summary::after { content: "+" }` lá em cima é do
   acordeão de dúvidas da home, e vale para TODO <summary> do site — ele vazava
   para este card e aparecia como um terceiro item na linha, empurrando o
   "Calcular" para o meio. Quem indica que abre aqui é a própria palavra. */
.entrega-topo::after,
/* O aberto precisa da própria linha: `details[open] summary::after` tem uma
   classe E um atributo, e vence `.entrega-topo::after` sozinho — o "+" sumia
   fechado e voltava como "−" no instante em que o cliente abria o card. */
.entrega-abre[open] > .entrega-topo::after { content: none; }
.entrega-topo::-webkit-details-marker { display: none; }
.entrega-topo::marker { content: ""; }
.entrega-topo:hover .entrega-acao { color: var(--forest-2); }
.entrega-titulo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--forest);
}
.entrega-titulo .ico { width: 19px; height: 19px; flex: none; }
.entrega-acao {
  font-size: .87rem;
  font-weight: 800;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entrega-abre[open] .entrega-acao { text-decoration: none; opacity: .55; }

.entrega-form {
  display: flex;
  gap: .5rem;
  padding: 0 20px;
}
.entrega-form input {
  flex: 1;
  min-width: 0;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  /* 16px cravados: abaixo disso o iOS dá zoom ao focar o campo e a página
     inteira sai do lugar. */
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.entrega-form .btn { flex: none; padding: .7rem 1.2rem; box-shadow: none; }
.entrega-erro { margin: .6rem 20px 0; color: #b42318; font-size: .85rem; }
.entrega-ajuda { margin: .7rem 20px 18px; color: var(--muted); font-size: .8rem; }
.entrega-ajuda a { color: var(--forest); font-weight: 700; }

/* ── Modalidades de entrega ───────────────────────────────────────────────
   O que o CEP respondeu. Fica fora do <details>: fechar o formulário não pode
   esconder o frete que ele acabou de calcular.

   Antes aqui vinham o endereço e UMA opção, a mais barata. Virou a lista
   inteira por decisão do usuário — quem quer SEDEX quer saber no carrinho
   quanto custa chegar antes, e não na última tela. O endereço saiu: o cliente
   acabou de digitar o CEP, e repeti-lo gastava a linha mais visível do card
   com o que não muda decisão nenhuma. */
.entrega-opcoes { border-top: 1px solid var(--line); }
.entrega-opcoes.ocupado { opacity: .55; pointer-events: none; }

/* Cada opção é um <button> de submit, então tudo aqui desfaz aparência de
   botão: sem fundo, sem borda, largura inteira, texto alinhado como linha de
   lista. O que sobra de botão é o que interessa — a área de clique inteira e
   o foco de teclado de graça. */
.entrega-opcao {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 13px 20px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.entrega-opcao:first-child { border-top: 0; }
.entrega-opcao:hover { background: var(--cream-2); }
.entrega-opcao.marcada { background: var(--cream-2); }

/* Bolinha de rádio desenhada à mão — o <button> não tem uma, e é ela que diz
   "isto é uma escolha, e esta é a que está valendo". Sem ela a lista parece
   três informações, não três alternativas. */
.entrega-opcao-marca {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
}
.entrega-opcao.marcada .entrega-opcao-marca { border-color: var(--forest); }
.entrega-opcao.marcada .entrega-opcao-marca::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--forest);
}

.entrega-opcao-copy { flex: 1; min-width: 0; }
.entrega-opcao-nome { display: block; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.entrega-opcao-prazo { display: block; color: var(--muted); font-size: .8rem; }
.entrega-opcao-valor { font-weight: 700; font-size: .95rem; white-space: nowrap; }

/* Dito uma vez, no topo da lista, em vez de repetido em cada linha. */
.entrega-aviso-gratis {
  margin: 0;
  padding: 11px 20px;
  color: #1a7f4e;
  font-size: .84rem;
  font-weight: 600;
}
/* Com tudo grátis o prazo ocupa a coluna do valor. Fica em peso normal e cor
   de texto comum: é informação de conferência, não preço. */
.entrega-aviso-gratis ~ .entrega-opcao .entrega-opcao-valor {
  font-weight: 500;
  color: var(--muted);
  font-size: .86rem;
}
.entrega-aviso-gratis + .entrega-opcao { border-top: 1px solid var(--line); }
.entrega-opcao-valor.gratis { color: #1a7f4e; }

.entrega-nota {
  margin: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
}

/* O CEP ao lado do título: presente para ancorar os preços, apagado para não
   competir com a palavra "Entrega". */
.entrega-cep {
  margin-left: .1rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Espera visível ───────────────────────────────────────────────────────
   Calcular o CEP consulta até quatro serviços de endereço e depois cota o
   frete nos Correios. Sem sinal nenhum, a página fica parada como se o clique
   não tivesse pegado — e o que o cliente faz então é clicar de novo, o que
   manda dois POSTs para o mesmo carrinho de sessão.

   O rótulo some com `color: transparent` em vez de ser trocado por texto: o
   botão mantém a largura exata, e o bloco não pula quando a roda entra. */
.btn-girando {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-girando::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 2px solid rgba(7, 60, 40, .28);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: girar .6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* O carrinho inteiro para de aceitar clique enquanto um +/−/remover está no
   ar. Continua legível — trocar por um esqueleto faria a lista piscar a cada
   toque —, mas não aceita um segundo POST por cima do primeiro. */
.carrinho-card.ocupado { opacity: .55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-girando::after { animation-duration: 2.4s; }
}

/* ── Barra do total ───────────────────────────────────────────────────────
   Gruda no rodapé da janela. Antes o botão de pagar ficava no fim da lista, e
   com quatro itens no carrinho era preciso rolar até o fim para achá-lo — o
   preço e a decisão ficavam em telas diferentes.

   Duas faixas: o total numa linha, o botão de largura inteira embaixo. A
   versão anterior punha os dois lado a lado, e o detalhe da conta ("Subtotal
   R$ 189,70 + frete grátis") não cabia — quebrava em duas linhas no celular e
   engordava a barra. Agora esse detalhe mora dentro do acordeão.

   O recuo de baixo do `.carrinho-pagina` devolve a altura que ela ocupa. */
.barra-fechar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(7, 60, 40, .1);
  padding: .55rem 0 calc(.85rem + env(safe-area-inset-bottom));
}

/* De novo o `details` do acordeão de dúvidas vazando: 20px de recuo, um risco
   embaixo e o "+"/"−" da direita. As DUAS linhas do ::after são necessárias —
   `details[open] summary::after` tem uma classe e um atributo, e vence uma
   classe sozinha. Ver a mesma nota no card de entrega. */
.barra-resumo {
  display: flex;
  /* O detalhe abre ACIMA da linha do total, e não abaixo: assim o total
     continua colado no botão, que é o par que decide. */
  flex-direction: column-reverse;
  padding: 0;
  border-bottom: 0;
}
.barra-resumo-linha::after,
.barra-resumo[open] > .barra-resumo-linha::after { content: none; }
.barra-resumo-linha::-webkit-details-marker { display: none; }
.barra-resumo-linha::marker { content: ""; }
.barra-resumo > p { padding-top: 0; }

.barra-resumo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0 .55rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.barra-resumo-rotulo {
  font-family: "Fraunces", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--forest);
}
/* A contagem de itens é conferência, não o título: fica no corpo do texto e
   em cinza para "Total" continuar sendo a palavra que se lê. */
.barra-resumo-itens {
  font-family: "DM Sans", sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
}
.barra-resumo-valor {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: "Fraunces", serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
}
.barra-resumo-seta {
  width: 17px;
  height: 17px;
  color: var(--muted);
  transition: transform .2s ease;
}
.barra-resumo[open] .barra-resumo-seta { transform: rotate(180deg); }

.barra-resumo-detalhe {
  padding: .1rem 0 .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .5rem;
}
.barra-resumo-detalhe p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .3rem;
  color: var(--muted);
  font-size: .87rem;
}
.barra-resumo-detalhe p:last-child { margin-bottom: 0; }

/* Largura inteira: o botão é a única ação da barra, e um botão que ocupa a
   linha toda não pede mira nenhuma do dedo. */
.barra-fechar .carrinho-finalizar { width: 100%; }


/* ── Landing do produto ───────────────────────────────────────────────────── */
.landing-hero { padding: 40px 0 56px; }

/* Duas colunas: decidir e comprar na mesma tela. A caixa de compra vivia depois
   da descrição inteira — quem já tinha decidido rolava a página atrás do botão.

   Foto à esquerda, compra à direita: é a ordem de leitura — a imagem prende, o
   preço decide. Para inverter, troque os dois `order` abaixo; é o único lugar
   que decide o lado, e o mobile tem a própria regra mais adiante. */
.landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.landing-col-foto   { order: 1; }
.landing-col-compra { order: 2; }

/* No hero a compra não é mais um bloco centrado no meio da página: é coluna. */
.landing-grid .landing-topo { text-align: left; margin: 0 0 22px; }
.landing-grid .landing-topo h1 { margin-top: 0; }
.landing-grid .landing-visual { margin: 0; }

/* Foto do produto. `object-fit: contain` com altura de teto: o rótulo é retrato
   e sem isto a imagem esticava para preencher a coluna. */
.landing-visual { display: grid; place-items: center; margin: 28px 0 40px; }
.landing-visual img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 26px 26px rgba(7, 60, 40, .16));
}

.landing-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.landing-thumb {
  width: 68px;
  height: 68px;
  padding: 6px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.landing-thumb:hover { transform: translateY(-2px); }
.landing-thumb.ativo { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(7, 60, 40, .12); }
.landing-thumb img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

.landing-topo { text-align: center; max-width: 760px; margin: 0 auto; }
/* "Para quê", acima do nome. Vem antes de propósito: quem chega pela busca ou
   pelo QR do rótulo não conhece o nome do produto — conhece o problema. */
.landing-paraque {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--forest-2);
}
.landing-topo h1 { color: var(--forest); margin: .5rem 0 1rem; font-size: var(--titulo-landing); }
.landing-topo .headline { color: var(--muted); font-size: 1.12rem; }

/* Sem caixa em volta: os cards já são caixas. Moldura dentro de moldura vira
   ruído e rouba a borda destacada que marca a opção escolhida. */
.compra {
  max-width: 620px;
  margin: 0;
  display: grid;
  gap: 18px;
  text-align: center;
}
/* Na coluna do hero a caixa não tem teto próprio: quem define a largura é a
   coluna. Com os 620px de fora, os cards de oferta ficavam mais estreitos que
   o "Sobre o produto" logo abaixo — duas larguras de leitura empilhadas, e a
   de cima, que é a que decide a compra, parecendo a menor das duas. */
.landing-grid .compra { max-width: none; }
.compra .btn-primary { box-shadow: none; }
.compra .btn-primary.feito { background: var(--forest); color: var(--white); }

/* ── Cards de oferta ─────────────────────────────────────────────────────── */

/* Empilhados, um por linha, com um botão só embaixo de todos. Empilhar em vez
   de lado a lado é o que torna a comparação possível: os preços ficam alinhados
   na mesma coluna e o olho desce por eles. */
.compra-opcoes { display: grid; gap: 10px; }

/* Separa "quantas" de "com o quê" — duas perguntas diferentes na mesma pilha. */
.compra-grupo {
  margin: 8px 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
.compra-grupo:first-child { margin-top: 0; }

.compra-op {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.compra-op:hover { border-color: var(--forest); }

/* A marcada muda borda, fundo E ganha o ponto cheio — três sinais, nenhum
   deles só de cor. Quem não distingue as cores ainda vê qual está escolhida. */
.compra-op.ativo {
  border-color: var(--forest);
  border-width: 2px;
  background: var(--cream-2);
  padding: 13px 15px;
}

.compra-op-marca {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
}
.compra-op.ativo .compra-op-marca { border-color: var(--forest); }
.compra-op.ativo .compra-op-marca::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--forest);
}

.compra-op-corpo { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.compra-op-titulo { font-weight: 700; color: var(--ink); font-size: .97rem; line-height: 1.3; }
.compra-op-detalhe { color: var(--muted); font-size: .82rem; line-height: 1.35; }

.compra-op-preco {
  flex: 0 0 auto;
  font-family: "Fraunces", serif;
  font-size: 1.28rem;
  color: var(--forest);
  text-align: right;
  line-height: 1.2;
}

/* Slot do desconto. Fica vazio até o carrinho, o pedido e o Mercado Pago
   calcularem o mesmo número — badge sem cálculo é preço errado na tela. */
.compra-op-badge {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--forest-2);
  background: var(--yellow);
  border-radius: 999px;
  padding: 2px 8px;
  margin-bottom: 3px;
}
.compra .aviso { color: var(--muted); font-size: .86rem; }
.compra .feedback { font-weight: 700; color: var(--forest-2); min-height: 1.2em; }

.landing-corpo { padding: 84px 0; }
/* A primeira seção depois do hero chega mais cedo. Os 84px de cima somavam com
   os 56px de baixo do hero: 140px de nada entre o "Sobre o produto" e o
   primeiro parágrafo — e mais ainda desde que a apresentação passou a vir
   fechada, deixando só uma linha de título antes do vazio. */
.landing-hero + .landing-corpo { padding-top: clamp(34px, 4vw, 52px); }
.landing-descricao {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.06rem;
  color: #3d4f44;
}
.landing-descricao > * + * { margin-top: 1.2rem; }
/* Parágrafo único de apresentação: mais estreito e centralizado, porque é a
   única coisa entre os benefícios e a faixa de uso — coluna larga com três
   linhas soltas parece sobra de texto. */
.landing-apresentacao { max-width: 620px; margin: 0 auto; text-align: center; font-size: 1.12rem; line-height: 1.7; }

/* No hero ela vira um toggle, igual aos de ingrediente: mesma mecânica de
   abrir e fechar na mesma página. Fechado por padrão — o argumento fica a um
   clique, logo abaixo do preço, em vez de empurrar a página inteira para baixo
   para quem já decidiu. */
.landing-sobre {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.landing-sobre summary span { color: var(--forest); font-weight: 700; }
.landing-grid .landing-apresentacao {
  max-width: none;
  margin: 0;
  padding-top: 12px;
  text-align: left;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink);
}
.landing-descricao h2 { font-size: 1.9rem; color: var(--forest); margin-top: 2.4rem; }
.landing-descricao h3 { font-size: 1.4rem; color: var(--forest); margin-top: 2rem; }
.landing-descricao ul, .landing-descricao ol { padding-left: 1.3rem; }
.landing-descricao li + li { margin-top: .5rem; }
.landing-descricao img { border-radius: 18px; margin: 1.6rem 0; }
.landing-descricao table { width: 100%; border-collapse: collapse; }
.landing-descricao th, .landing-descricao td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }


/* ── Ingredientes (landing de produto) ───────────────────────────────────── */
.ingredientes { margin-top: 32px; }

.ingredientes-tese {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 20px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--forest);
}

.selos-naturais {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 36px;
}
.selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 16px;
  background: var(--cream);
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--forest);
}
.selo .ico { width: 17px; height: 17px; opacity: .85; }

.ingredientes .section-copy { margin-bottom: 8px; }

.ingredientes-list { max-width: 760px; margin: 28px auto 0; border-top: 1px solid var(--line); }
.ingredientes-list summary span { color: var(--ink); font-weight: 700; }
.ingredientes-list summary i { color: var(--muted); font-weight: 500; }
.ingredientes-list details p { max-width: 58ch; color: var(--muted); margin-top: 10px; }

.ingredientes-base summary span { color: var(--forest); }
.ingredientes-base-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; margin-top: 16px; }
.ingrediente-base-item .ingrediente-nome { font-weight: 700; color: var(--forest); }
.ingrediente-base-item .ingrediente-nome i { display: block; font-weight: 500; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.ingrediente-base-item .ingrediente-beneficio { margin-top: 6px; color: var(--muted); font-size: .9rem; line-height: 1.5; max-width: 40ch; }

/* ── Benefícios ──────────────────────────────────────────────────────────── */

/* Três cards lado a lado, logo abaixo do hero. Antes os mesmos textos viviam
   soltos dentro da descrição, em lista, misturados ao texto corrido — liam-se
   como detalhe, não como argumento. */
.beneficios { padding: 0 0 clamp(36px, 5vw, 56px); }
.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.beneficio {
  padding: 22px 22px 24px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
}
/* Acento, não símbolo: marca a leitura sem fingir que significa alguma coisa. */
.beneficio-marca {
  display: block;
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--yellow);
  margin-bottom: 14px;
}
.beneficio-titulo {
  margin: 0;
  color: var(--forest);
  font-family: "Fraunces", serif;
  font-size: 1.14rem;
  line-height: 1.3;
}
/* A explicação é o que separa benefício de slogan — por isso não é opcional no
   visual: nasce logo abaixo, no mesmo bloco, e não escondida atrás de clique. */
.beneficio-texto {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}

/* ── Como usar, na landing ───────────────────────────────────────────────── */

/* Reaproveita .uso-tabela e .uso-resumo da página /como-usar/: é a mesma
   informação, da mesma fonte, e duas aparências para o mesmo dado fariam o
   criador achar que são coisas diferentes. */
/* Faixa de largura inteira, e não um card dentro do container: "como usar" é
   o único bloco da página que não está vendendo nada — é a instrução. Ocupando
   a tela toda ele vira uma parada na rolagem, com começo e fim visíveis, em vez
   de mais uma caixa na mesma coluna das outras.

   Da seção "Compare e entenda a diferença" do site de referência vieram duas
   IDEIAS: fundo quente ocupando a tela e uma coluna pintada — a que o leitor
   veio conferir. Aqui essa coluna é a DOSE, não a do peso: o peso ajuda a achar
   a linha, a dose é o destino.

   Sem sombra em nada aqui, por decisão do usuário: a faixa já se separa do
   resto pelo fundo, e sombra dentro de um bloco que é ele mesmo uma camada
   empilha relevo sobre relevo. A borda fina basta para fechar a tabela.

   As CORES são as nossas. O degradê é o creme da marca (#fffaf0 → #f4e8d0), e
   não o creme amarelado deles; bordas e sombras seguem o verde de rgba(7,60,40)
   que o site inteiro usa; texto secundário é --muted e rótulo é --forest. A
   primeira versão desta faixa herdou os marrons de lá (#59240e, #6b4a2f,
   rgba(89,36,14)) — castanha é a cor da marca DELES, e aqui era o único lugar
   do site com sombra e texto secundário marrons. Funcionava sozinha e destoava
   no conjunto. */
/* A margem de cima é da FAIXA, e não da seção anterior: enquanto o "como usar"
   era um card, o respiro dele vinha do padding das seções vizinhas — que estão
   zeradas por causa disso. Agora que ele tem fundo próprio, a borda colorida
   encostava direto no último parágrafo de cima. O afastamento pertence a quem
   tem a cor. */
.uso-faixa {
  margin-top: clamp(44px, 6.5vw, 78px);
  padding: clamp(48px, 7vw, 84px) 0;
  background: radial-gradient(60% 75% at 50% 42%, #fffaf0 0%, #f4e8d0 100%);
  border-top: 1px solid rgba(7, 60, 40, .12);
  border-bottom: 1px solid rgba(7, 60, 40, .12);
}

/* O card saiu: dentro da faixa colorida ele seria uma moldura dentro de outra.
   Só a largura de leitura fica de pé — tabela esticada em monitor largo faz o
   olho atravessar a tela inteira entre a ave e a dose dela. */
.uso-produto {
  max-width: 660px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
}

.uso-produto .section-copy { margin-bottom: clamp(18px, 3vw, 26px); }
.uso-produto .eyebrow { color: var(--forest-2); }
.uso-produto h2 { color: var(--forest); }
.uso-produto .uso-resumo { color: var(--muted); }

/* O que se repetia em toda linha da tabela ("em 50ml de água"), dito uma vez.
   Vem de `separar_complemento` (site_publico/uso.py) — nada escrito à mão. */
.uso-dose-complemento {
  margin: 0 0 12px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}
.uso-dose-complemento strong { color: var(--forest); font-weight: 700; }

/* A tabela vira uma caixa fechada: o criador procura UMA linha aqui — a ave
   dele — e a moldura diz onde essa busca começa e termina. Sem zebra: com a
   linha fina entre as espécies o olho já anda sozinho, e zebra mais borda
   viram dois rastros para a mesma leitura. */
.uso-produto .uso-tabela-wrap {
  max-width: 660px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
/* `separate` e não `collapse`: é o que permite arredondar a ponta da coluna
   amarela. Com as bordas colapsadas o raio é ignorado e a coluna sai quadrada. */
.uso-produto .uso-tabela {
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.uso-produto .uso-tabela thead th {
  background: transparent;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.uso-produto .uso-tabela td {
  color: var(--ink);
  padding: 13px 16px;
  border-bottom: 1px solid rgba(7, 60, 40, .1);
  font-size: .98rem;
}
.uso-produto .uso-tabela tbody tr:nth-child(odd) { background: transparent; }
.uso-produto .uso-tabela tbody tr:last-child td { border-bottom: 0; }
.uso-produto .uso-tabela td:first-child { font-weight: 600; }

/* Folga própria nas duas pontas do miolo. O padding igual em todas as células
   não serve aqui: a primeira coluna encosta na moldura da caixa, e a do peso
   encosta na faixa amarela — que é uma borda de cor, e cor encostada em texto
   aperta mais que uma linha. Então a espécie ganha recuo à esquerda e o peso
   ganha à direita, empurrando o centro dele para longe do amarelo. */
.uso-produto .uso-tabela th:first-child,
.uso-produto .uso-tabela td:first-child { padding-left: 24px; }
.uso-produto .uso-tabela th:nth-child(2),
.uso-produto .uso-tabela td.uso-peso { padding-right: 22px; }

.uso-produto .uso-tabela td.uso-peso {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A coluna da dose é o que a pessoa veio buscar — então é ela que recebe a cor,
   como faixa contínua do topo à última linha. E não o peso: o peso é o dado que
   ajuda a ACHAR a linha certa; a dose é o destino. Pintar o peso destacaria o
   meio do caminho.

   Peso e dose centralizados nas suas colunas. Antes a dose ia para a direita,
   para os números caírem na mesma vertical — o que só vale em coluna sem cor
   de fundo. Com a faixa amarela, o texto encostado na borda dela fica torto:
   dentro de uma coluna pintada o eixo é o centro dela, não a margem. Só a
   espécie continua à esquerda, que é onde o olho começa a procurar. */
.uso-produto .uso-tabela th:nth-child(2),
.uso-produto .uso-tabela td.uso-peso,
.uso-produto .uso-tabela th:last-child,
.uso-produto .uso-tabela td.uso-dose { text-align: center; }
.uso-produto .uso-tabela thead th:last-child {
  background: var(--yellow);
  color: var(--forest);
  border-bottom: 1px solid rgba(7, 60, 40, .14);
  border-radius: 14px 14px 0 0;
}
.uso-produto .uso-tabela td.uso-dose {
  background: var(--yellow);
  color: var(--forest);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-bottom-color: rgba(7, 60, 40, .14);
}
.uso-produto .uso-tabela tbody tr:last-child td.uso-dose { border-radius: 0 0 14px 14px; }
/* A nota fica FORA da caixa da tabela. Dentro, como <caption>, ela dependia de
   `caption-side` — que só existe enquanto o elemento é tabela, e some no
   instante em que qualquer regra mexe no `display`. */
.uso-nota-tabela {
  max-width: 660px;
  margin: 12px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

/* Dose única (produtos de ração): uma linha, não uma tabela de uma linha. */
.uso-dose-unica {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  color: var(--forest);
  background: var(--yellow);
  border: 1px solid rgba(7, 60, 40, .14);
  border-radius: 18px;
  padding: clamp(16px, 4vw, 20px);
  font-size: clamp(1rem, 3.6vw, 1.15rem);
}

.uso-observacao {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
}

/* ── Quando usar ──────────────────────────────────────────────────────────
   Era uma fileira de cartões centrados. No celular viravam uma coluna de
   caixas, cada uma com borda e fundo próprios — muito contorno para pouca
   informação, e o olho tinha que entrar e sair de cada caixa.

   Lista: uma linha por caso, separadas por um fio. O nome carrega o peso, o
   tempo é etiqueta. Sem caixa, sem sombra — dentro de uma faixa que já é um
   bloco, mais bordas só cansam.

   A cor da etiqueta é o VERDE da marca, não o amarelo. O amarelo é a cor de
   AÇÃO deste site — é o botão de comprar. Gastá-lo numa etiqueta que ninguém
   clica ensina o olho errado e enfraquece o botão logo acima. */
.uso-quando { max-width: 560px; margin: 26px auto 0; }

.uso-casos { list-style: none; margin: 10px 0 0; padding: 0; }
.uso-caso { padding: 14px 0; border-top: 1px solid var(--line); }
.uso-caso:first-child { border-top: 0; padding-top: 4px; }

.uso-caso-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}
.uso-caso-nome {
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.35;
}
.uso-caso-tempo {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(7, 60, 40, .07);
  color: var(--forest);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
}
.uso-caso-texto {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

@media (max-width: 560px) {
  /* A etiqueta desce para baixo do nome. Lado a lado numa tela estreita, um
     tempo comprido ("5 dias de uso, depois 25 de descanso") espremia o nome
     em duas ou três linhas de uma palavra. */
  .uso-caso-topo { justify-content: flex-start; }
  .uso-caso-tempo { order: 2; width: 100%; align-self: flex-start; width: fit-content; }
  .uso-caso-nome { width: 100%; }
}


/* Por que é assim. O mecanismo, não a alegação — por isso ganha destaque de
   citação e não de selo. */
.uso-porque {
  max-width: 660px;
  margin: 26px auto 0;
  padding-left: 18px;
  border-left: 3px solid var(--yellow);
  text-align: left;
}
.uso-porque-rotulo {
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--forest);
}
.uso-porque p:last-child { margin: 0; color: var(--ink); line-height: 1.65; }

.uso-link { text-align: center; margin: 22px 0 0; }

/* Celular: a tabela CONTINUA tabela. A versão anterior desmontava tudo —
   `display: block`, cabeçalho escondido, cada espécie virando uma linha flex
   com a dose numa pastilha — e era isso que estragava o bloco: sem cabeçalho o
   leitor não sabe o que é o número do meio, e a faixa amarela contínua, que é o
   que guia o olho até a coluna que importa, virava sete pastilhas soltas.

   O site que serviu de referência não quebra nada no celular: mantém o grid de
   três colunas e só o encolhe (`1fr 200px 160px` vira `1fr 80px 80px`, fonte
   menor, célula mais baixa). É o que está feito aqui: espécie ocupa o que
   sobra, peso e dose ficam com largura fixa, e o que muda é o tamanho — não a
   estrutura.

   Isso só cabe em 360px porque a dose foi encurtada antes de chegar aqui: com
   "5 gotas em 50ml de água" repetido linha a linha não haveria encolhimento que
   resolvesse. O trecho repetido está uma vez só, acima da tabela. */
@media (max-width: 600px) {
  /* A faixa é de largura inteira, então a tabela dentro dela pode respirar mais
     que o resto da página: 16px de folga em vez de 32px. São 32px a mais de
     largura útil — a diferença entre "Sabiá-laranjeira" caber ou quebrar. */
  .uso-faixa .container { width: min(1180px, calc(100% - 32px)); }

  .uso-produto .uso-tabela thead th {
    font-size: .62rem;
    letter-spacing: .06em;
    padding: 10px 8px;
  }
  .uso-produto .uso-tabela td {
    padding: 11px 8px;
    font-size: .86rem;
    line-height: 1.3;
  }
  /* Peso e dose com largura fixa; a espécie fica com o que sobra, que é a
     coluna que precisa de espaço para o nome comprido. Os recuos das pontas
     acompanham em escala: menores que no desktop, mas presentes — sem eles a
     espécie cola na moldura e o peso cola no amarelo, que é onde o aperto
     aparece primeiro numa tela estreita. */
  .uso-produto .uso-tabela th:first-child,
  .uso-produto .uso-tabela td:first-child { padding-left: 15px; }
  .uso-produto .uso-tabela th:nth-child(2),
  .uso-produto .uso-tabela td.uso-peso { width: 66px; padding-right: 13px; }
  .uso-produto .uso-tabela th:last-child,
  .uso-produto .uso-tabela td.uso-dose { width: 84px; }
  .uso-produto .uso-tabela td.uso-dose { font-size: .84rem; }
  .uso-produto .uso-tabela td.uso-peso { font-size: .76rem; }

  /* Cartão de modo em coluna única: dois lado a lado em 360px viram duas
     palavras por linha. */
  .uso-produto .uso-modo { flex: 1 1 100%; max-width: none; }
  .uso-produto .uso-porque { margin-top: 22px; }
}

/* Telas bem estreitas (iPhone SE, 320px): o padding some quase todo antes de
   qualquer coluna quebrar. */
@media (max-width: 360px) {
  .uso-faixa .container { width: calc(100% - 20px); }
  .uso-produto .uso-tabela td { padding: 10px 6px; font-size: .82rem; }
  .uso-produto .uso-tabela thead th { padding: 9px 6px; }
  .uso-produto .uso-tabela th:first-child,
  .uso-produto .uso-tabela td:first-child { padding-left: 12px; }
  .uso-produto .uso-tabela th:nth-child(2),
  .uso-produto .uso-tabela td.uso-peso { width: 58px; padding-right: 10px; }
  .uso-produto .uso-tabela th:last-child,
  .uso-produto .uso-tabela td.uso-dose { width: 76px; }
}

/* O card do uso já traz o respiro dele; o das seções em volta sairia dobrado. */
.landing-corpo-topo { padding-bottom: 0; }
.landing-corpo-fim { padding-top: clamp(48px, 6vw, 72px); }
.landing-corpo-ingredientes { padding-bottom: 0; }
.landing-corpo-ingredientes .ingredientes { margin-top: 0; }

.entendimento-natural { max-width: 620px; margin: 48px auto 0; text-align: center; }
.entendimento-natural p { color: var(--muted); font-size: 1rem; line-height: 1.7; }

.relacionados { background: var(--cream); }
.relacionados h2 { color: var(--forest); text-align: center; margin-bottom: 42px; font-size: clamp(1.8rem, 3vw, 2.6rem); }

.rascunho-aviso {
  background: var(--forest);
  color: var(--yellow);
  text-align: center;
  padding: .7rem 1rem;
  font-weight: 700;
  font-size: .85rem;
}

/* ── Rodapé (uma linha só) ────────────────────────────────────────────────── */
footer { background: var(--forest); color: var(--white); padding: 30px 0 26px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.9rem;
  margin-bottom: 18px;
  font-size: .88rem;
  font-weight: 600;
}
.footer-links a { color: rgba(255, 255, 255, .82); transition: color .2s ease; }
.footer-links a:hover { color: var(--yellow); }
.footer-sep { color: rgba(255, 255, 255, .35); }
.copyright {
  text-align: center;
  color: rgba(255, 255, 255, .62);
  font-size: .82rem;
  line-height: 1.7;
}

/* ── Responsivo ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --foto-largura: 340px;
    --foto-altura: 370px;
    --foto-giro: 6deg;
    --foto-giro-hover: 4deg;
    --foto-sobe: -7px;
    --foto-zoom: 1.018;
  }

  /* No celular o painel ocupa a largura toda — 264px de largura mínima
     sobrando ao lado ficaria estranho numa tela estreita. */
  .nav-links { left: 0; min-width: 0; }
  .nav-sep { display: block; margin: .35rem .6rem; }

  .product-row,
  .product-row.reverse { grid-template-columns: 1fr; }
  .product-row.reverse .product-visual,
  .product-row.reverse .product-copy { order: initial; }
  .product-row { gap: 26px; margin-bottom: 80px; }
  .product-copy { max-width: none; }
  .product-visual { min-height: 410px; }

  .grid-produtos { grid-template-columns: repeat(2, 1fr); }

  /* Foto em cima, texto embaixo: em uma coluna só não cabe a foto ao lado. */
  .produto-linha { grid-template-columns: 1fr; gap: 22px; }
  .produto-linha + .produto-linha { margin-top: 54px; }
}

@media (max-width: 600px) {
  :root {
    --container: min(100% - 40px, 1180px);
    --foto-largura: 285px;
    --foto-altura: 310px;
    --foto-giro: 5deg;
    --foto-lista: 250px;
    --foto-lista-giro: 3deg;
  }
  section { padding: 72px 0; }

  .brand-logo { height: 43px; max-width: 155px; }
  .grid-produtos { grid-template-columns: 1fr; }

  .products-intro { margin-bottom: 44px; }
  .product-row { margin-bottom: 76px; }
  .product-visual { min-height: 330px; }
  .product-image { filter: drop-shadow(0 24px 22px rgba(7, 60, 40, .16)); }
  .product-copy h3 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); }

  /* [REMOVIDO] `.compra { padding: 22px }` vivia aqui, sobra de quando a caixa
     de compra tinha moldura em volta. Sem a moldura ele virou só um recuo: os
     cards de oferta começavam 22px para dentro enquanto o "Sobre o produto"
     logo abaixo ia de ponta a ponta, e a caixa que decide a compra parecia a
     mais estreita da coluna. */
  /* As três colunas ficam também no celular — o que muda é o tamanho, não a
     estrutura. A versão anterior jogava as ações para uma quarta linha inteira
     abaixo do item, e aí cada produto ocupava o dobro da altura: com três no
     carrinho, o total já nascia fora da tela. */
  .carrinho-card { padding: 0 15px; }
  .carrinho-item { grid-template-columns: 76px 1fr auto; gap: 12px; }
  .carrinho-item-foto { width: 76px; height: 76px; }
  .carrinho-item-nome { font-size: .94rem; margin-bottom: 8px; }
  .carrinho-qtd button { width: 32px; height: 32px; }
  .carrinho-qtd output { min-width: 30px; }

  /* Título e "Continuar comprando" continuam nos lados opostos da MESMA linha
     — foi pedido do usuário, e é o certo: empilhado, o link vira mais um item
     da coluna e some no meio do carrinho. O que encolhe é a fonte dos dois. */
  .carrinho-cabeca h1 { font-size: 1.3rem; }
  .carrinho-continuar { font-size: .8rem; gap: .3rem; }
  .carrinho-continuar .ico { width: 15px; height: 15px; }

  /* O topo NÃO tem regra de celular — o checkout também não tem, e é assim
     que os dois continuam idênticos em qualquer largura. Havia aqui uma logo
     de 40px e um selo menor: o cabeçalho encolhia ao trocar de tela.
  */

  .entrega-topo, .entrega-form { padding-left: 15px; padding-right: 15px; }
  .entrega-erro { margin-left: 15px; margin-right: 15px; }
  .entrega-ajuda { margin-left: 15px; margin-right: 15px; }
  .entrega-opcao { padding-left: 15px; padding-right: 15px; }
  .entrega-nota { padding-left: 15px; padding-right: 15px; }

  /* A barra empilha nas duas larguras — não é regra de celular. O que encolhe
     aqui é só o tamanho do número. */
  .barra-resumo-valor { font-size: 1.3rem; }
  .barra-resumo-rotulo { font-size: 1.05rem; }
  .landing-visual img { max-height: 380px; }

  /* Uma coluna. A foto sobe para o topo: numa tela estreita quem chega precisa
     ver o produto antes do preço — o lado escolhido no desktop não se traduz em
     "primeiro" aqui, vira ordem de leitura. */
  .landing-grid { grid-template-columns: 1fr; gap: 26px; }
  .landing-col-foto   { order: 1; }
  .landing-col-compra { order: 2; }
  .landing-grid .landing-topo { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---- Página pública "Como e quando usar" ------------------------------------
   Reaproveita os tokens e o <details> já definidos acima. Coluna estreita porque
   é página de leitura: linha longa demais faz perder a linha entre uma dose e a
   seguinte, que é exatamente o erro que a página existe para evitar. */
.como-usar .section-copy { margin-bottom: 40px; }

/* O h1 do site é de página de venda — 86px no desktop, feito para parar a
   rolagem. Aqui é página de consulta: o visitante já decidiu entrar, e o título
   compete com o que ele veio ler. */
.como-usar h1 { font-size: var(--titulo-guia); }
.como-usar .section-copy p { max-width: 60ch; }

/* A forma de adição fica fora dos toggles: vale para todos os pós e precisa ser
   lida antes, não descoberta dentro de um deles. */
.uso-medida {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 12px;
}

.uso-medida-titulo {
  margin: 0 0 10px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.uso-medida-dose { font-weight: 700; color: var(--forest); margin: 0; }
.uso-medida-nota { color: var(--muted); margin: 8px 0 0; }

.uso-lista summary { align-items: flex-start; }
.uso-titulo { display: flex; flex-direction: column; gap: 3px; }
.uso-resumo { color: var(--muted); font-weight: 500; font-size: .94rem; }

.uso-subtitulo {
  margin: 16px 0 0;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.uso-preparo { color: var(--muted); margin: 8px 0 0; }

.uso-modos { list-style: none; margin: 10px 0 0; padding: 0; }
.uso-modos li { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.uso-modos li:last-child { border-bottom: 0; }
.uso-modos strong { display: block; color: var(--ink); font-weight: 600; }
.uso-tempo { display: block; color: var(--forest); font-weight: 700; margin-top: 2px; }
.uso-nota { display: block; color: var(--muted); margin-top: 3px; }

/* A ressalva é o que mais gera erro de uso — ganha marca à esquerda para não ser
   lida como continuação da lista de cima. */
/* A observação é o texto mais longo do bloco e o que explica o porquê do prazo.
   Ganha marca à esquerda e linha mais solta: é parágrafo para ler, não instrução
   para conferir de relance. */
.uso-ressalva {
  margin: 8px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--yellow);
  color: var(--ink);
  line-height: 1.62;
}

.uso-link { margin: 14px 0 0; }
.uso-link a { color: var(--forest); font-weight: 600; }

.uso-tabela-wrap { overflow-x: auto; margin-top: 10px; }
.uso-tabela { width: 100%; border-collapse: collapse; min-width: 300px; }
.uso-tabela th, .uso-tabela td { text-align: left; padding: 10px 12px; }
.uso-tabela thead th {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.uso-tabela tbody tr:nth-child(odd) { background: var(--cream-2); }
.uso-tabela tbody th { font-weight: 600; color: var(--ink); }
.uso-peso { color: var(--muted); white-space: nowrap; }
.uso-tabela tbody td:last-child { color: var(--forest); font-weight: 700; white-space: nowrap; }

.uso-referencia { color: var(--muted); margin: 12px 0 0; }

.uso-rodape {
  color: var(--muted);
  margin: 40px 0 0;
  text-align: center;
}

@media (max-width: 720px) {
  .uso-medida { padding: 20px; }
  .uso-tabela th, .uso-tabela td { padding: 9px 10px; }
}

/* Chamada da home para o guia. Sem foto e sem preço: é convite para ler, não
   para comprar — e não pode competir com os cards de produto acima. */
.como-usar-card { padding: 0 0 96px; }

.uso-chamada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--forest);
  color: var(--cream-2);
  border-radius: var(--radius);
  padding: 34px 38px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.uso-chamada:hover,
.uso-chamada:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }

.uso-chamada-copy { display: flex; flex-direction: column; gap: 6px; }
.uso-chamada .eyebrow { color: var(--yellow); }
.uso-chamada .eyebrow::before { background: var(--yellow); }
.uso-chamada strong { font-size: 1.5rem; line-height: 1.2; }
.uso-chamada-nota { color: rgba(255, 250, 240, .78); max-width: 54ch; }
.uso-chamada-seta { font-size: 1.6rem; color: var(--yellow); flex: none; }

@media (max-width: 720px) {
  .como-usar-card { padding-bottom: 64px; }
  .uso-chamada { padding: 26px 24px; gap: 16px; }
  .uso-chamada strong { font-size: 1.25rem; }
}

/* ── Recomendação da Ana ────────────────────────────────────────────────────
   Conversa em balões, respostas em botão. O criador não digita nada nas três
   primeiras perguntas — digitar é o atrito que faz desistir no meio. */

.reco {
  padding: 40px 0 64px;
}

.reco-wrap {
  max-width: 680px;
}

.reco-topo {
  text-align: center;
  margin-bottom: 28px;
}

.reco-topo h1 {
  font-size: var(--titulo-guia);
  margin: 8px 0 10px;
}

.reco-sub {
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto;
}

/* ── Questionário ────────────────────────────────────────────────────────── */

/* Tudo num cartão só, rolando. Uma pergunta por tela obrigava a esperar a IA
   entre cada uma; aqui o criador vê o tamanho do compromisso de cara e responde
   no ritmo dele. A IA entra uma vez, no fim, com o quadro completo. */
.reco-form {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 30px);
}

.reco-perguntas {
  list-style: none;
  counter-reset: pergunta;
  margin: 0;
  padding: 0;
}

/* Pergunta escondida (`[hidden]` = display:none) não gera caixa e por isso não
   incrementa o contador — a numeração se conserta sozinha. */
.reco-pergunta { counter-increment: pergunta; }
.reco-pergunta + .reco-pergunta {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.reco-pergunta-texto {
  font-family: "DM Sans", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.4;
}
.reco-pergunta-texto::before {
  content: counter(pergunta) ". ";
  color: var(--forest);
}

/* A condicional é desdobramento da pergunta acima, não uma pergunta nova: não
   entra na numeração e fica recuada, presa visualmente a quem a abriu. */
.reco-pergunta-filha { counter-increment: none; }

/* Escrito com o irmão adjacente de propósito: `.reco-pergunta + .reco-pergunta`
   acima também vale para ela, e uma regra de classe só (menos específica)
   perderia o padding e a borda para aquela. */
.reco-pergunta + .reco-pergunta-filha {
  margin-top: 16px;
  padding-top: 0;
  padding-left: 18px;
  border-top: 0;
  border-left: 2px solid var(--line);
}
.reco-pergunta-filha .reco-pergunta-texto {
  font-weight: 600;
  color: var(--muted);
}
.reco-pergunta-filha .reco-pergunta-texto::before { content: none; }

.reco-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.reco-op {
  font-family: inherit;
  font-size: .93rem;
  font-weight: 500;
  padding: 10px 17px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  min-height: 44px;
}
.reco-op:hover,
.reco-op:focus-visible { border-color: var(--forest); color: var(--forest); }

/* A escolhida muda preenchimento E borda, não só a cor do texto: quem não
   distingue as duas cores ainda vê qual está marcada pelo contraste. */
.reco-op.ativo {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
  font-weight: 600;
}

.reco-form-pe {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.reco-form-pe .btn { width: 100%; max-width: 340px; }
.reco-form-pe .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Diz o que falta em vez de só travar o botão: botão apagado sem explicação
   deixa a pessoa procurando o que fez de errado. */
.reco-falta {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  min-height: 1.2em;
}

/* ── Resumo das respostas ────────────────────────────────────────────────── */

/* Depois que o formulário sai da tela, isto lembra o que foi respondido — sem
   ele a recomendação aparece solta, sem a pergunta que a gerou. */
.reco-recap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
}
.reco-recap-rotulo {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 3px;
}
.reco-recap-item {
  font-size: .85rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
}

.reco-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 240px;
  max-height: 62vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.msg {
  max-width: 84%;
  padding: 12px 15px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: .97rem;
  animation: reco-entra .22s ease-out;
}

.msg p { margin: 0 0 .7em; }
.msg p:last-child { margin-bottom: 0; }
.msg strong { font-weight: 600; }

/* Ana à esquerda, criador à direita — a convenção que todo mundo já leu mil
   vezes no WhatsApp. Não há nada a aprender aqui. */
.msg-ana {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  color: var(--ink);
}

.msg-eu {
  align-self: flex-end;
  background: var(--forest);
  color: var(--cream);
  border-bottom-right-radius: 6px;
}

@keyframes reco-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.msg-digitando {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 15px;
}

.msg-digitando span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .45;
  animation: reco-pulso 1.1s infinite;
}

.msg-digitando span:nth-child(2) { animation-delay: .18s; }
.msg-digitando span:nth-child(3) { animation-delay: .36s; }

@keyframes reco-pulso {
  0%, 60%, 100% { opacity: .25; transform: none; }
  30%           { opacity: .9;  transform: translateY(-3px); }
}

/* ── Respostas em botão ──────────────────────────────────────────────────── */

.reco-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-end;
}

.reco-chip {
  font-family: inherit;
  font-size: .93rem;
  font-weight: 500;
  padding: 10px 17px;
  border-radius: 999px;
  border: 1.5px solid var(--forest);
  background: transparent;
  color: var(--forest);
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
}

.reco-chip:hover,
.reco-chip:focus-visible {
  background: var(--forest);
  color: var(--cream);
}

/* ── Campo de texto ──────────────────────────────────────────────────────── */

.reco-campo {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.reco-campo input {
  flex: 1;
  font-family: inherit;
  /* 16px trava o zoom automático do iOS ao focar o campo. */
  font-size: 16px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  min-width: 0;
}

.reco-campo input:focus {
  outline: none;
  border-color: var(--forest);
}

.reco-campo button {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.reco-campo .ico {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reco-rodape {
  margin-top: 18px;
  font-size: .84rem;
  color: var(--muted);
  text-align: center;
}

/* ── Produtos dentro da conversa ─────────────────────────────────────────── */

.reco-produtos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  margin-top: 4px;
}

.reco-produto {
  display: flex;
  gap: 13px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  align-items: center;
}

.reco-produto-foto {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream);
}

.reco-produto-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reco-produto-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.reco-produto-nome {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  font-size: .97rem;
}

.reco-produto-resumo {
  font-size: .84rem;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reco-produto-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.reco-produto-preco {
  font-weight: 600;
  color: var(--forest);
}

.btn-sm {
  padding: 7px 14px;
  font-size: .85rem;
  min-height: 38px;
}

.reco-add-todos {
  width: 100%;
  margin-top: 2px;
}

.reco-produto button.feito,
.reco-add-todos.feito {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}

@media (max-width: 640px) {
  .reco { padding: 26px 0 48px; }
  .reco-chat { padding: 16px; max-height: 58vh; }
  .msg { max-width: 90%; }
  .reco-opcoes { justify-content: stretch; }
  .reco-chip { flex: 1 1 calc(50% - 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .msg, .msg-digitando span { animation: none; }
  .reco-chat { scroll-behavior: auto; }
}

/* O card da recomendação abre a home. Segue o desenho do card do guia de uso —
   é a mesma promessa, feita duas vezes no site: aqui a gente te orienta. */
/* ══════════════════════════════════════════════════════════════════════════
   INSTITUCIONAIS E RASTREIO
   Páginas de texto e a consulta de encomenda. Reaproveitam os tokens, o
   .container-estreito e o <details> já definidos acima — aqui só entra o que
   não existia: o corpo de texto longo, os cartões de valor e a linha do tempo.
   ══════════════════════════════════════════════════════════════════════════ */

.inst { padding: 48px 0 96px; }
.inst .section-copy { margin-bottom: 40px; }
.inst .section-copy h1 { font-size: var(--titulo-guia); }
.inst .section-copy p { max-width: 60ch; color: var(--muted); }

/* Corpo de texto longo. A medida curta (66ch) é o que separa um documento
   legível de um paredão — vale mais aqui do que em qualquer outra página. */
.inst-texto { max-width: 66ch; }
.inst-texto h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  color: var(--forest);
  margin: 44px 0 14px;
}
.inst-texto h3 {
  font-size: 1.05rem;
  color: var(--ink);
  margin: 26px 0 8px;
}
.inst-texto p { color: var(--muted); line-height: 1.75; margin-bottom: 14px; }
.inst-texto ul, .inst-texto ol { margin: 0 0 16px 1.15rem; color: var(--muted); }
.inst-texto li { line-height: 1.7; margin-bottom: 8px; }
.inst-texto strong { color: var(--ink); }

.inst-citacao {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--yellow);
  background: var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--forest);
}

/* Valores e direitos LGPD: mesma grade, dois conteúdos diferentes. */
.inst-valores, .legal-direitos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}
.inst-valores article, .legal-direitos article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.inst-valores h3, .legal-direitos h3 {
  color: var(--forest);
  font-size: 1rem;
  margin-bottom: 8px;
}
.inst-valores p, .legal-direitos p {
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
}

/* Canais de atendimento. O WhatsApp ganha fundo cheio porque é o canal que
   resolve — os outros existem para quem prefere escrever. */
.inst-canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.inst-canal {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.inst-canal.destaque { background: var(--forest); border-color: var(--forest); }
.inst-canal h2 { font-size: 1.15rem; color: var(--forest); margin-top: 6px; }
.inst-canal p { color: var(--muted); font-size: .94rem; line-height: 1.6; }
.inst-canal .ico-lg { width: 30px; height: 30px; color: var(--forest); }
.inst-canal.destaque h2,
.inst-canal.destaque .ico-lg { color: var(--yellow); }
.inst-canal.destaque p { color: rgba(255, 255, 255, .82); }
.inst-canal .btn { margin-top: 14px; }
.inst-horario { font-size: .85rem !important; opacity: .85; }

/* Atalho para o rastreio dentro do contato: a dúvida mais comum resolvida
   antes de a conversa começar. */
.inst-atalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 40px;
}
.inst-atalho h2 { font-size: 1.05rem; color: var(--forest); margin-bottom: 4px; }
.inst-atalho p { color: var(--muted); font-size: .94rem; }

.inst-cta {
  margin-top: 48px;
  padding: 32px;
  background: var(--forest);
  border-radius: var(--radius);
  text-align: center;
}
.inst-cta p {
  color: var(--cream);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  margin-bottom: 20px;
}
.inst-cta-botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.inst-cta .btn-outline { border-color: var(--cream); color: var(--cream); }
.inst-cta .btn-outline:hover { background: rgba(247, 239, 223, .12); }

/* ── Documentos legais ──────────────────────────────────────────────────── */

.legal-versao { font-size: .9rem; color: var(--muted); }

.legal-indice {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 8px;
}
.legal-indice-titulo {
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 10px;
}
.legal-indice ol { margin: 0 0 0 1.1rem; columns: 2; column-gap: 28px; }
.legal-indice li { margin-bottom: 6px; break-inside: avoid; }
.legal-indice a { color: var(--muted); font-size: .93rem; }
.legal-indice a:hover { color: var(--forest); }

/* Compensa o cabeçalho fixo quando se chega por âncora do índice. */
.legal-corpo h2 { scroll-margin-top: 90px; }

.legal-destaque {
  padding: 16px 20px;
  background: var(--cream);
  border-left: 4px solid var(--forest);
  border-radius: 0 12px 12px 0;
  color: var(--ink) !important;
}

/* ── Rastreio ───────────────────────────────────────────────────────────── */

.rastreio-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.rastreio-form input {
  flex: 1 1 240px;
  min-height: 56px;
  padding: 0 20px;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.rastreio-form input::placeholder { letter-spacing: normal; text-transform: none; color: var(--muted); }
.rastreio-form input:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.rastreio-form .btn { min-height: 56px; padding-inline: 2rem; }

.rastreio-aviso {
  padding: 20px 24px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 28px;
}
.rastreio-aviso p { color: var(--ink); line-height: 1.65; }
.rastreio-aviso-ajuda { color: var(--muted) !important; font-size: .92rem; margin-top: 8px; }

.rastreio-codigo { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.rastreio-codigo strong { color: var(--ink); letter-spacing: .06em; }

/* Linha do tempo: um traço contínuo com uma marca por evento. O traço é um
   pseudo-elemento do <li>, e não um fundo da lista, para não sobrar linha
   depois do último item. */
.rastreio-linha { list-style: none; margin: 0; padding: 0; }
.rastreio-evento {
  position: relative;
  padding: 0 0 26px 34px;
}
.rastreio-evento::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.rastreio-evento:last-child { padding-bottom: 0; }
.rastreio-evento:last-child::before { display: none; }

.rastreio-marca {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--muted);
  background: var(--cream-2);
}
.rastreio-evento.atual .rastreio-marca {
  border-color: var(--forest);
  background: var(--forest);
  box-shadow: 0 0 0 5px rgba(7, 60, 40, .12);
}

/* A cor carrega o estado, mas nunca sozinha: o evento atual também é o único
   em negrito, e a descrição diz o que aconteceu por extenso. */
.rastreio-evento.estado-entregue .rastreio-marca { border-color: var(--forest); }
.rastreio-evento.estado-entregue.atual .rastreio-marca { background: var(--forest); }
.rastreio-evento.estado-problema .rastreio-marca { border-color: #b3541e; }
.rastreio-evento.estado-problema.atual .rastreio-marca { background: #b3541e; box-shadow: 0 0 0 5px rgba(179, 84, 30, .14); }

.rastreio-descricao { color: var(--muted); line-height: 1.5; }
.rastreio-evento.atual .rastreio-descricao { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.rastreio-local { color: var(--muted); font-size: .9rem; margin-top: 3px; }
.rastreio-data { color: var(--muted); font-size: .85rem; margin-top: 3px; opacity: .8; }

.rastreio-ajuda {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.rastreio-ajuda h2 { font-size: 1.1rem; color: var(--forest); margin-bottom: 10px; }
.rastreio-ajuda p { color: var(--muted); line-height: 1.7; margin-bottom: 10px; }

@media (max-width: 640px) {
  .inst { padding: 32px 0 64px; }
  .inst .section-copy { margin-bottom: 28px; }
  .legal-indice ol { columns: 1; }
  .inst-atalho { flex-direction: column; align-items: flex-start; }
  .inst-cta { padding: 26px 20px; }
  .rastreio-form .btn { width: 100%; }
}

/* ── Onde a loja também vende ─────────────────────────────────────────────
   No FIM da landing, nunca junto do preço: quem está aqui é tráfego que a loja
   pagou para trazer, e um botão de marketplace ao lado do "Comprar" entrega
   12-19% de comissão numa venda que já era sem comissão nenhuma.

   Discreto de propósito. Ele não disputa com o "Comprar" — é uma saída para
   quem não compraria direto de jeito nenhum. Se ele chamar mais atenção que o
   botão da loja, está errado. */
.mkt { padding: 0 0 72px; }
.mkt-caixa {
  max-width: 640px;
  margin-inline: auto;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream-2);
  text-align: center;
}
.mkt-titulo {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.mkt-sub { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }

.mkt-lojas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 0;
}
.mkt-loja {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.mkt-loja:hover { border-color: var(--forest); transform: translateY(-2px); }
.mkt-loja-copy { display: grid; text-align: left; line-height: 1.25; }
.mkt-loja-copy strong { font-size: .97rem; font-weight: 700; }
.mkt-loja-copy span { color: var(--muted); font-size: .78rem; }

/* A marca de cada loja é só um ponto colorido: o suficiente para ser
   reconhecida de relance, sem trazer a paleta deles para dentro da nossa. */
.mkt-marca { width: 12px; height: 12px; flex: none; border-radius: 50%; }
.mkt-marca-ml { background: #ffe600; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.mkt-marca-shopee { background: #ee4d2d; }

.mkt-nota {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .mkt-caixa { padding: 22px 18px; }
  .mkt-loja { width: 100%; justify-content: center; }
}

/* ── Fecho de página: "não sabe por onde começar?" ────────────────────────
   O mesmo card no fim da home e da lista de produtos. Era `.ajuda-box` com um
   botão de WhatsApp na lista e, logo abaixo, um segundo card de recomendação
   dizendo quase a mesma frase — dois cards para uma pergunta só.

   Agora é um, com duas saídas: a recomendação responde na hora e por isso é o
   botão cheio; o WhatsApp é gente de verdade, mas custa esperar, e fica como
   contorno. */
.ajuda-fecho { padding: 0 0 96px; }
/* Sem a margem de 92px do uso antigo: quem dá o respiro agora é a seção. */
.ajuda-fecho .ajuda-box { margin-top: 0; }

.ajuda-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* O botão da recomendação é `<button>`, não `<a>`: abre um overlay, não navega.
   O `.btn` do site foi escrito para o `<a>`, e num `<button>` o navegador traz
   fundo, borda e fonte próprios — daí os três zeros abaixo. */
.ajuda-acoes button.btn {
  border: 1px solid transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 560px) {
  .ajuda-fecho { padding-bottom: 64px; }
  /* Regra de quando havia dois botões: mantida porque o `wrap` já resolve um
     só, e se um segundo voltar ele não nasce apertado ao lado do primeiro. */
  .ajuda-acoes { flex-direction: column; }
  .ajuda-acoes .btn { width: 100%; }
}

/* ── Avaliação de produto ────────────────────────────────────────────────────
   Página `/avaliar`, o endereço que vai para o grupo.

   A regra que organiza a tela: escrever é difícil, tocar não é. Então a lista
   inteira de produtos aparece de uma vez, cada um com cinco estrelas, e a
   pessoa toca só nos que usou. O campo de texto nasce escondido e só aparece
   no produto que ela avaliou — nove caixas de texto abertas de cara parecem
   dever de casa e fazem a pessoa desistir antes de começar.

   Onde ficam as estrelas: no celular, embaixo do nome e alinhadas à esquerda,
   grandes o bastante para o dedo. No desktop, à direita do nome — e como todas
   as linhas têm a mesma estrutura, elas formam UMA COLUNA, que é o que deixa
   varrer a lista de cima a baixo sem o olho procurar. */
.av-form { display: flex; flex-direction: column; gap: 26px; }

.av-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.av-produto {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Avaliado muda de cara: é o retorno visual de que o toque valeu. */
.av-produto:has(input:checked) {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px var(--yellow) inset;
}

.av-produto-topo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-produto-nome { font-weight: 600; color: var(--forest); font-size: 1.04rem; }

/* As estrelas são radios de verdade: teclado, leitor de tela e sem JS. A ordem
   no HTML é 5→1 porque em CSS só dá para mirar o que vem DEPOIS (`~`); o
   row-reverse devolve a leitura da esquerda para a direita. */
.av-estrelas {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  border: 0; margin: 0; padding: 0;
}

.av-estrelas input { position: absolute; opacity: 0; width: 0; height: 0; }

.av-estrelas label {
  /* 44px é o alvo de toque mínimo confortável no celular. O ★ é menor que a
     caixa de propósito: quem erra por um fio ainda acerta. */
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1;
  color: var(--line);
  cursor: pointer;
  transition: color .12s ease, transform .1s ease;
}

.av-estrelas label:hover,
.av-estrelas label:hover ~ label,
.av-estrelas input:checked ~ label { color: var(--yellow); }
.av-estrelas label:active { transform: scale(.92); }
.av-estrelas input:focus-visible + label {
  outline: 2px solid var(--forest); outline-offset: -4px; border-radius: 8px;
}

.av-texto-curto {
  width: 100%;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream-2, #fbfaf6);
  font-family: inherit;
  /* 16px é o mínimo que o iOS aceita sem dar zoom ao focar o campo. */
  font-size: 16px;
  color: var(--ink);
}

/* O campo só existe depois da estrela. Dentro de @supports porque navegador
   sem `:has()` não conseguiria mostrá-lo de volta — lá ele fica sempre
   visível, que é pior de olhar e continua funcionando. */
@supports selector(:has(*)) {
  .av-texto-curto { display: none; }
  .av-produto:has(input:checked) .av-texto-curto { display: block; }
}

.av-nota-lista { color: var(--muted); font-size: .9rem; margin: -12px 0 0; }

.av-campo { display: flex; flex-direction: column; gap: 7px; }
.av-campo label { font-weight: 600; color: var(--forest); font-size: 1.02rem; }
.av-campo small { color: var(--muted); font-size: .88rem; line-height: 1.45; }

.av-campo input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
}

.av-campo input:focus-visible,
.av-texto-curto:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }

/* A isca do robô. `position:absolute` e não `display:none`: alguns robôs
   ignoram campo escondido por display, poucos ignoram um que está no fluxo. */
.av-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.av-erro {
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #8c2f2f;
  padding: 13px 16px;
  border-radius: 12px;
}

.av-enviar { align-self: flex-start; }
.av-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* Do tablet para cima o nome e as estrelas dividem a linha, e as estrelas de
   todos os produtos passam a formar uma coluna só. */
@media (min-width: 720px) {
  .av-produto-topo { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .av-produto-nome { flex: 1; }
  .av-estrelas label { min-width: 40px; min-height: 40px; font-size: 1.75rem; }
}

@media (max-width: 640px) {
  .av-enviar { align-self: stretch; text-align: center; }
  .av-produto { padding: 14px 15px; }
}

/* ── Estrelas de avaliação na vitrine ────────────────────────────────────────
   Só aparecem quando o produto passa de `MINIMO_PARA_MOSTRAR` — abaixo disso
   a view não manda nada e nem este CSS é alcançado. Ver avaliacoes/models.py. */
.nota-estrelas { letter-spacing: 1px; white-space: nowrap; }
.nota-estrelas .cheia { color: var(--yellow); }
.nota-estrelas .vazia { color: var(--line); }

.nota-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 10px;
  font-size: .95rem;
}
.nota-num { font-weight: 700; color: var(--forest); }
.nota-qtd { color: var(--muted); font-size: .88rem; }

/* ── Mural na página do produto ──────────────────────────────────────────── */
.av-mural { padding: clamp(38px, 6vw, 64px) 0; background: var(--cream-2, #fbfaf6); }

.av-mural-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(22px, 3vw, 32px);
}

.av-mural-media {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 1.5rem;
}
.av-mural-media strong { font-weight: 700; color: var(--forest); }
.av-mural-qtd { font-size: .95rem; color: var(--muted); }

.av-mural-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}

.av-depo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}

.av-depo-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }

.av-verificado {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--forest);
  background: var(--cream);
  border-radius: 5px;
  padding: 3px 7px;
}

.av-depo-texto { margin: 0 0 12px; line-height: 1.6; color: var(--ink); }
.av-depo-quem { margin: 0; font-size: .88rem; color: var(--muted); }

/* A nota no topo da landing é um link para o mural. Herda `.nota-inline` e só
   acrescenta o que a torna clicável sem parecer um botão. */
.nota-link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.nota-link:hover { border-bottom-color: var(--line); }
/* `scroll-margin` para o cabeçalho fixo não cobrir o título ao ancorar. */
.av-mural { scroll-margin-top: 88px; }

/* Tarja da prévia de avaliações. Só o staff chega a ver isto — a decisão está
   na view (`user.is_staff`), não aqui. */
.av-previa {
  background: var(--yellow-suave);
  border: 1px solid var(--yellow);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: .92rem;
  color: var(--forest);
}