/* ==========================================================================
   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 {
  /* Paleta de 11/09/2026 — a do modelo de página de produto que o Thiago
     trouxe: muito branco, verde floresta calmo e UM destaque, dourado, no
     lugar do amarelo #fdc500. O amarelo gritava mais que o produto; o dourado
     marca sem disputar. */
  /* 17/09/2026: o verde passou a ser o vivo do modelo novo (#1b5e20), decisão
     dele — "tudo com esse verde". Os três tokens abaixo pintam o site público
     inteiro e a tela de pagamento; o checkout tem cópia própria, em novo.html,
     que foi trocada junto para não existirem dois verdes na mesma compra.

     21/09/2026: ele pediu para escurecer — "esse verde do valor é cansativo"
     — e escolheu #175019 entre três tons que viu na tela. Mesmo matiz, mesma
     saturação, 15% menos luz. Todos os verdes ESCUROS do site desceram na
     mesma proporção; os claros de fundo ficaram como estavam, porque
     escurecê-los tiraria justamente a leveza que ele quer. */
  --forest: #175019;
  --forest-2: #276a2b;
  --forest-deep: #113a14;
  --sage: #527d5e;
  --mist: #eef4ee;
  --sand: #f5f1e7;
  --cream: var(--sand);
  --cream-2: #fff;
  /* O dourado dá 2,7:1 sobre branco: serve para estrela, traço e fundo, não
     para letra. Letra dourada em fundo claro usa --gold-texto (≥4,5:1 no
     branco, na areia e na névoa); em fundo verde, --gold-soft (7,4:1). */
  --gold: #b59a58;
  --gold-soft: #d8c99b;
  --gold-texto: #806b36;
  --sage-texto: #466f52;
  --ink: #26332b;
  --muted: #626d66;
  --white: #fff;
  --line: #e3e9e2;
  --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 18px 45px rgba(23, 60, 43, .1);
  --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(--gold-soft); }

h1, h2, h3 {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 0;
}
/* Escala para a letra sem serifa em peso 700: a antiga (até 5.4rem) era do
   Fraunces, que é fino — em DM Sans bold ela gritava. */
h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
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(--gold);
  box-shadow: 0 0 0 5px rgba(181, 154, 88, .22);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.3rem;
  border-radius: 10px;
  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(--forest); color: var(--white); }
.btn-primary:hover { background: var(--forest-2); }
.btn-outline { border-color: var(--forest); color: var(--forest); background: transparent; }
.btn-outline:hover { background: var(--mist); }
.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, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(23, 60, 43, .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(23, 60, 43, .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(23, 60, 43, .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(--gold);
  box-shadow: 0 0 0 4px rgba(181, 154, 88, .20);
  flex: 0 0 auto;
}
.products-cta { display: flex; justify-content: center; margin-top: -28px; }

/* Os dois botões da linha do produto na home, lado a lado. */
.product-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 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(23, 60, 43, .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: "DM Sans", sans-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; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { background: var(--mist); }
.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; }

/* 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; }
.container-estreito { max-width: 640px; }
/* 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. */

/* O aberto precisa da própria linha: `details[open] summary::after` tem uma
   classe E um atributo { content: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* A foto do produto agora vive dentro de um slide do carrossel — as regras
   estão em "Carrossel do hero", mais abaixo. `object-fit: contain` com altura
   de teto continua valendo: o rótulo é retrato e esticava para preencher. */

/* --- Carrossel do hero: fotos + vídeo -------------------------------------
   Quem rola é o CSS. `scroll-snap` dá o arrastar com inércia nativa no celular,
   funciona sem JavaScript e não precisa de biblioteca. O script só acende o
   ponto e leva ao slide no clique. */
.landing-visual {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* A barra de rolagem apareceria por cima da foto e entregaria a mecânica. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* iOS: sem isto o arrastar horizontal às vezes rola a página junto. */
  overscroll-behavior-x: contain;
  margin: 28px 0 16px;
  gap: 0;
}
.landing-visual::-webkit-scrollbar { display: none; }

.landing-visual .slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  min-width: 0;
}
.landing-visual .slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 26px 26px rgba(23, 60, 43, .16));
}

/* Um slide só: o carrossel não existe. É o estado de hoje (cada produto tem
   uma foto e nenhum vídeo), e a página tem de ficar idêntica à de antes. */
.landing-visual:not(:has(.slide + .slide)) { overflow-x: visible; }

/* --- Pontos --------------------------------------------------------------- */
.landing-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.landing-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background .15s, transform .15s;
  /* Alvo de toque de 44px sem bolinha de 44px: a área cresce por fora. */
  position: relative;
}
.landing-dot::after {
  content: '';
  position: absolute;
  inset: -16px;
}
.landing-dot.ativo { background: var(--forest); transform: scale(1.25); }

/* O ponto do vídeo é um ▶. É a única pista de que existe vídeo quando ele não
   é o primeiro slide — sem ela, quem não arrasta nunca descobre. */
.landing-dot.dot-video {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: transparent;
  display: grid;
  place-items: center;
  transform: none;
}
.landing-dot.dot-video svg { width: 9px; height: 11px; }
.landing-dot.dot-video svg path { fill: var(--line); transition: fill .15s; }
.landing-dot.dot-video.ativo { background: transparent; transform: scale(1.15); }
.landing-dot.dot-video.ativo svg path { fill: var(--forest); }

/* --- Vídeo: a fachada ----------------------------------------------------- */
.video-fachada {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 520px;
  max-height: 460px;
  /* A proporção vem do próprio vídeo, escrita no `style` do elemento: vídeo de
     celular em pé e vídeo deitado ficam ambos inteiros, sem corte. */
  border-radius: 14px;
  overflow: hidden;
  background: #0b1a13;
}
/* Quadro tirado do próprio vídeo: mesma proporção da moldura, preenche tudo.
   Foto do produto: é retrato e tem de caber INTEIRA — cortar deixaria o pote
   partido no meio, que é o oposto de vender. */
.video-fachada .video-capa {
  width: 100%;
  height: 100%;
  max-height: none !important;
  filter: none !important;
}
.video-fachada.encaixe-cover  .video-capa { object-fit: cover; }
.video-fachada.encaixe-contain .video-capa { object-fit: contain; padding: 6px; }
.video-fachada .video-tocando {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.video-play {
  position: absolute;
  width: 74px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .15s;
}
.video-play svg { width: 100%; height: 100%; display: block; }
.video-play-fundo { fill: rgba(23, 60, 43, .82); transition: fill .15s; }
.video-play-seta  { fill: #fff; }
.video-play:hover { transform: scale(1.06); }
.video-play:hover .video-play-fundo { fill: var(--forest); }
.video-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 12px; }

.video-tempo {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Só aparece quando a conexão não deu conta do adiantamento. Botão que não
   responde é pior que qualquer spinner. */
.video-carregando {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: video-girando .8s linear infinite;
}
@keyframes video-girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .video-carregando { animation-duration: 2.4s; }
  .landing-visual { scroll-behavior: auto; }
}

@media (max-width: 600px) {
  /* No celular o alvo do play cresce: dedo não é ponteiro. */
  .video-play { width: 84px; height: 60px; }
  .landing-visual .slide img { max-height: 340px; }
}

/* 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;
}
.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: "DM Sans", sans-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(--white);
  background: var(--forest);
  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; }


/* ── Ingredientes (landing de produto) ───────────────────────────────────── */
.ingredientes { margin-top: 32px; }
.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; }

/* ── 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); }
.beneficio {
  padding: 22px 22px 24px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
}

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

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

/* ── Rodapé (uma linha só) ────────────────────────────────────────────────── */
footer { background: var(--forest-deep); 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(--gold-soft); }
.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;
  }

  .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; }

  /* 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; }

  /* 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; }
}

@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; }

  .products-intro { margin-bottom: 44px; }
  .product-row { margin-bottom: 76px; }
  .product-visual { min-height: 330px; }
  .product-image { filter: drop-shadow(0 24px 22px rgba(23, 60, 43, .16)); }
  .product-copy h3 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
  .product-acoes .btn { width: 100%; }
  .landing-visual img { max-height: 380px; }
}

@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(--gold);
  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(--gold-soft); }
.uso-chamada .eyebrow::before { background: var(--gold-soft); }
.uso-chamada strong { font-size: 1.5rem; line-height: 1.2; }
.uso-chamada-nota { color: rgba(255, 255, 255, .8); max-width: 54ch; }
.uso-chamada-seta { font-size: 1.6rem; color: var(--gold-soft); 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);
}

@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: "DM Sans", sans-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(--gold);
  background: var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: "DM Sans", sans-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(--gold-soft); }
.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: "DM Sans", sans-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(--gold);
  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(23, 60, 43, .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: "DM Sans", sans-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; }
/* Na home o card vem logo depois das perguntas frequentes, que têm fundo
   próprio: sem respiro em cima, ele encostava na faixa (12/09/2026). Só neste
   encontro — na lista de produtos o que vem antes já dá o espaço. */
.faq + .ajuda-fecho { padding-top: 96px; }

.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; }
  .faq + .ajuda-fecho { padding-top: 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(--gold);
  box-shadow: 0 0 0 1px var(--gold) 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(--gold); }
.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);
}

/* `hidden` tem de ganhar de qualquer `display` escrito depois — foi assim que
   um botão sumiu por engano em 25/08: a regra da classe vinha depois no
   arquivo e o atributo perdia calado. Uma linha, o site inteiro. */
[hidden] { display: none !important; }

/* ── Espera de botão (`.is-ocupado`) ──────────────────────────────────────

   Enquanto o servidor responde, o botão vira uma roda girando SEM perder o
   rótulo: a palavra continua lá, transparente, segurando a largura da caixa.
   Quem é dono do texto é o template — o JS nunca escreve rótulo.

   Nasceu no checkout e subiu para cá quando a página de avaliação precisou:
   formulário que dá POST e recarrega a página fica segundos mudo, e quem não
   vê sinal nenhum toca no botão de novo.

   A cor vem de variáveis, não de `currentColor`: com `color: transparent` o
   `currentColor` some junto com o texto e a roda ficaria invisível. O padrão
   (verde sobre claro) serve ao CTA amarelo do site; botão de fundo escuro
   redefine `--ck-roda` — ver `checkout/css/rapido.css`. Regra: mexeu na cor de
   um botão, confira a roda dele. */
.is-ocupado {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
/* Ícone ou <span> dentro do botão some junto — senão aparece por trás da roda. */
.is-ocupado > * { visibility: hidden; }
.is-ocupado::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--ck-roda-fundo, var(--line));
  border-top-color: var(--ck-roda, var(--forest));
  border-radius: 50%;
  animation: ck-girar .6s linear infinite;
}
@keyframes ck-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .is-ocupado::after { animation-duration: 1.6s; }
}

/* 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; }

  /* O campo de comentário só existe depois da estrela: antes dela não há o que
     comentar, e nove caixas na tela de saída fazem a página parecer dever de
     casa — foi por isso que o campo por produto saiu daqui em 28/08.

     É esta regra que resolve aquele problema, e não o botão que ficava na
     frente dele: quem dá estrela em dois produtos vê duas caixas, não nove. */
  .av-comentario { display: none; }
  .av-produto:has(input:checked) .av-comentario { display: block; }

  /* A palavra é leitura da nota, escrita pela FOLHA e não pelo JS: quem está
     sem JS toca a estrela e lê "Excelente" do mesmo jeito. O seletor mira o
     valor do radio marcado dentro do fieldset e escreve no irmão seguinte. */
  /* O topo é entusiasmo, o fundo é constatação — nunca julgamento. "Péssimo"
     e "Ruim" dão nota ao produto; "Não gostei" é a pessoa falando dela, e num
     nicho onde todo mundo se conhece isso muda quem tem o dedo em cima do 2.
     "Muito bom" no 4 abre espaço real entre o 4 e o 5: com "Bom" ali, quem
     gostou bastante sente que precisa dar cinco. */
  .av-estrelas:has(input[value="5"]:checked) + .av-palavra::after { content: "Excelente"; }
  .av-estrelas:has(input[value="4"]:checked) + .av-palavra::after { content: "Muito bom"; }
  .av-estrelas:has(input[value="3"]:checked) + .av-palavra::after { content: "Regular"; }
  .av-estrelas:has(input[value="2"]:checked) + .av-palavra::after { content: "Não gostei"; }
  .av-estrelas:has(input[value="1"]:checked) + .av-palavra::after { content: "Ruim"; }
}

.av-palavra {
  font-size: .86rem;
  font-weight: 700;
  color: var(--forest);
  /* Segura a linha mesmo vazia: sem isto a lista pula quando a palavra chega. */
  min-height: 1.2em;
}

/* O botão "+ Adicionar comentário" saiu em 20/09/2026 junto com o seu CSS: ele
   cobrava um toque a mais de quem já tinha tocado a estrela, que é justamente
   quem decidiu participar. O campo agora abre com a estrela — a regra que o
   mostra está no bloco `@supports` acima. */
/* "Ainda não consigo avaliar — preciso de mais tempo de uso."

   Discreto de propósito: é a saída, não o caminho. Mas existe, tem alvo de
   polegar e não se esconde — a alternativa, para quem ainda não usou, era
   fechar a página, e fechar a página é o que a gente não consegue distinguir
   de número errado. */
.av-depois {
  margin-top: 18px;
  text-align: center;
}
.av-depois-btn {
  padding: 12px 6px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--texto2, #5b5b5b);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.av-depois-btn:hover { color: var(--forest); }
.av-depois-btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

.av-comentario { margin-top: 10px; }
.av-comentario-campo { margin-top: 8px; }
.av-comentario-campo label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.av-comentario-campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream-2, #fbfaf6);
  color: var(--ink);
  font-family: inherit;
  /* 16px é o mínimo que o iOS aceita sem dar zoom ao focar o campo. */
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.av-comentario-campo textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }

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

/* O recado do fim: um campo só para o envio inteiro. Ele fica DEPOIS da lista
   de produtos e antes do nome — a pessoa já decidiu as notas, e escrever passa
   a ser um extra, não um pedágio. */
.av-recado textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  /* 16px é o mínimo que o iOS aceita sem dar zoom ao focar o campo. */
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.av-recado textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.av-opcional {
  font-weight: 500;
  font-size: .82rem;
  color: var(--muted);
  background: var(--cream-2, #fbfaf6);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
  vertical-align: 1px;
}

.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(--gold); }
.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; }

.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-depo-texto { margin: 0 0 12px; line-height: 1.6; color: var(--ink); }
.av-depo-quem { margin: 0; font-size: .88rem; color: var(--muted); }

/* "avaliou 4 produtos da linha" — em itálico e miúdo de propósito: é uma nota
   de rodapé sobre a pessoa, não uma fala dela. Foi ideia dele, e é o detalhe
   que faz o cartão parecer gente: quem avaliou quatro é cliente da casa. */
.av-depo-quantos {
  margin: 3px 0 0;
  font-size: .82rem;
  font-style: italic;
  color: var(--muted);
}

/* Cartão de quem deu a estrela e não escreveu: sem texto, ele não precisa da
   mesma altura — encolhe em vez de deixar um vazio no meio da grade. */
.av-depo-curto { padding: 15px 18px; }
.av-depo-curto .av-depo-topo { margin-bottom: 7px; }

/* 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(--sand);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: .92rem;
  color: var(--forest);
}