/* ==========================================================================
   Trinca — o sistema de peças do site (15/09/2026)

   Nasceu do modelo de home que o Thiago montou (limpo, muito branco, cards
   cinza de canto grande). Um arquivo, em três camadas e nesta ordem:

     1. Tokens — cor, letra, espaço, canto e sombra. Mudar aqui muda o site.
     2. Peças  — botão, card de produto, vitrine, carrossel, avaliação,
                 caixa, perguntas e rodapé.
     3. Páginas — o pouco que é só de uma página (intro da home, vitrine de
                 peças).

   Regras da casa:
   - Toda classe começa com `t-`. O site.css continua carregado por causa do
     cabeçalho, e ele estiliza ELEMENTOS soltos (section, h1–h3, footer,
     details, summary, img). Sem prefixo, uma peça daqui herdaria regra de lá
     sem ninguém ver. Por isso cada peça declara o que usa desses elementos.
   - Número solto mora em token. Peça usa var().
   - Peça nova entra também em /previa/pecas/, a vitrine de todas.
   ========================================================================== */

[hidden] { display: none !important; }

/* ── 1. Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Cor */
  --t-verde: #173d2b;
  --t-verde-hover: #13291f;
  --t-verde-2: #2f6044;
  --t-verde-claro: #e8f0e9;
  --t-verde-escuro: #10291e;
  --t-texto: #17201b;
  --t-texto-2: #343b36;
  --t-suave: #66716b;
  --t-linha: #e4e9e5;
  --t-borda: #d9dfda;
  --t-fundo: #fff;
  --t-cinza: #f5f7f5;
  --t-cinza-2: #f1f3f2;
  --t-card: #f7f8f7;
  --t-card-borda: #e5e9e5;
  --t-preco: #606760;
  --t-dourado: #b08a42;

  /* Em cima do verde escuro (a faixa do diferencial). */
  --t-sobre-escuro: #eef4f0;
  --t-sobre-escuro-2: #b3c7ba;
  --t-linha-escura: rgba(255, 255, 255, .15);
  --t-verde-vivo: #8ed4ac;

  /* Letra */
  --t-fonte: Inter, "DM Sans", Arial, sans-serif;
  --t-titulo-1: clamp(38px, 5vw, 64px);
  --t-titulo-2: clamp(34px, 4.5vw, 52px);
  --t-titulo-3: clamp(28px, 4vw, 44px);
  --t-lead: 17px;

  /* Espaço. Largura e margem são as MESMAS do cabeçalho (site.css), para a
     borda da logo e a borda dos cards caírem na mesma linha. */
  --t-largura: 1180px;
  /* Onde a linha de texto para. A página pode ser larga; a leitura, não. */
  --t-leitura: 900px;
  --t-faixa: #f1f5f3;
  --t-margem: 32px;
  --t-secao: 96px;
  --t-gap: 16px;

  /* Canto */
  --t-raio-g: 28px;
  --t-raio: 24px;
  --t-raio-p: 13px;
  --t-pilula: 999px;

  /* Sombra */
  --t-sombra-card: 0 16px 35px rgba(23, 40, 30, .09);
  --t-sombra-leve: 0 8px 28px rgba(22, 42, 31, .045);

  --t-rapido: .2s ease;
}

@media (max-width: 900px) {
  :root { --t-margem: 20px; }
}

@media (max-width: 600px) {
  :root {
    --t-secao: 64px;
    --t-lead: 15px;
  }
}

/* ── Base da página ───────────────────────────────────────────────────────── */
.t-pagina,
.t-rodape {
  font-family: var(--t-fonte);
  color: var(--t-texto);
  line-height: 1.45;
}

.t-container {
  width: min(var(--t-largura), 100% - 2 * var(--t-margem));
  margin-inline: auto;
}

.t-secao { padding-block: var(--t-secao); }
.t-secao--colada { padding-top: 0; }
.t-secao--cinza { background: var(--t-cinza); }

.t-centro {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* ── Títulos e textos ─────────────────────────────────────────────────────── */
.t-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t-verde-2);
}

.t-titulo-1,
.t-titulo-2,
.t-titulo-3 {
  margin: 0;
  font-family: var(--t-fonte);
  font-weight: 800;
  color: var(--t-texto);
}
.t-titulo-1 { font-size: var(--t-titulo-1); line-height: 1.03; letter-spacing: -3px; }
.t-titulo-2 { font-size: var(--t-titulo-2); line-height: 1.04; letter-spacing: -2.5px; }
.t-titulo-3 { font-size: var(--t-titulo-3); line-height: 1.05; letter-spacing: -2px; }

.t-lead {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--t-suave);
}

/* Cabeça de seção: kicker, título e uma linha de apoio, centralizados. */
.t-cabeca {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}
.t-cabeca .t-lead { margin-top: 16px; font-size: 15px; }

@media (max-width: 600px) {
  .t-titulo-1 { letter-spacing: -2px; }
  .t-titulo-2 { letter-spacing: -1.8px; }
  .t-titulo-3 { letter-spacing: -1.4px; }
}

/* ── 2. Peças ─────────────────────────────────────────────────────────────── */

/* Marca do topo: passarinho + nome em texto -------------------------------- */
.t-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--t-fonte);
  white-space: nowrap;
}
.t-marca__icone {
  display: block;
  width: 40px;
  height: 40px;
}
.t-marca__texto { display: grid; gap: 1px; }
.t-marca__nome {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.1;
  color: var(--t-texto);
}
/* Slogan da logo: minúscula e itálico, escuro — é assinatura, não título. */
.t-marca__slogan {
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--t-texto-2);
}
.t-marca__nome span { color: var(--t-verde-2); }

@media (max-width: 600px) {
  .t-marca { gap: 8px; }
  .t-marca__icone { width: 34px; height: 34px; }
  .t-marca__nome { font-size: 17px; }
}

/* Botão ------------------------------------------------------------------- */
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--t-pilula);
  font: 700 14px/1 var(--t-fonte);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-rapido), color var(--t-rapido),
              border-color var(--t-rapido), transform var(--t-rapido);
}
.t-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.t-btn--primario { background: var(--t-verde); color: #fff; }
.t-btn--primario:hover { background: var(--t-verde-hover); transform: translateY(-2px); }

.t-btn--contorno { border-color: var(--t-verde); color: var(--t-verde); background: transparent; }
.t-btn--contorno:hover { background: var(--t-verde); color: #fff; }

.t-btn--g { min-height: 54px; padding: 0 24px; }
.t-btn--p { min-height: 42px; padding: 0 18px; font-size: 13px; }

/* Vitrine: 3 cards em grade no computador, carrossel de arrastar abaixo de
   900px. No computador só os 3 primeiros aparecem — o resto está a um clique,
   em "Ver todos os produtos". No celular todos entram no carrossel. -------- */
.t-vitrine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--t-gap);
}
.t-vitrine > :nth-child(n+4) { display: none; }

@media (max-width: 900px) {
  .t-vitrine {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 12px;
    /* O carrossel encosta na borda direita da tela: o card cortado ali é o
       que avisa que dá para arrastar. */
    margin-right: calc(-1 * var(--t-margem));
    padding-right: var(--t-margem);
  }
  .t-vitrine::-webkit-scrollbar { display: none; }
  /* Mesma força do :nth-child(n+4) acima, e vem depois: devolve os cards. */
  .t-vitrine > :nth-child(n) {
    display: flex;
    flex: 0 0 320px;
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .t-vitrine { gap: 12px; scroll-snap-type: x proximity; }
  .t-vitrine > :nth-child(n) { flex-basis: 84%; }
}

/* Card de produto ---------------------------------------------------------
   O card inteiro é clicável: o "Ver produto" estica um ::after sobre ele. Só
   o link é lido pelo leitor de tela — um <a> embrulhando o card todo leria
   nome, preço e descrição como uma frase só. */
.t-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: 38px 28px 0;
  overflow: hidden;
  text-align: center;
  background: var(--t-card);
  border: 1px solid var(--t-card-borda);
  border-radius: var(--t-raio);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.t-produto:hover {
  transform: translateY(-4px);
  box-shadow: var(--t-sombra-card);
  border-color: #dce3dd;
}

.t-produto__nome {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--t-texto);
}
.t-produto__preco { margin: 10px 0 0; font-size: 14px; color: var(--t-preco); }
.t-produto__desc {
  max-width: 270px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--t-texto-2);
  /* Três linhas no máximo: a frase do cadastro tem até 155 caracteres e,
     inteira, empurraria a foto para fora do card. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Base do card: foto e link ocupam a MESMA célula da grade, um sobre o outro.
   Sem `position` aqui de propósito — o ::after do link precisa medir o card
   inteiro, e não esta caixa. */
.t-produto__base {
  flex-shrink: 0;
  display: grid;
  height: 315px;
  margin: auto -28px 0;
}
.t-produto__base > * { grid-area: 1 / 1; }

.t-produto__foto {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(232, 237, 233, .7));
}
.t-produto__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 72%;
  max-height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .14));
  transition: transform .4s ease;
}
.t-produto:hover .t-produto__img { transform: translateY(-8px) scale(1.03); }

.t-produto__link {
  align-self: end;
  justify-self: center;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t-verde);
}
.t-produto__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (max-width: 560px) {
  .t-produto { min-height: 500px; padding: 26px 22px 0; border-radius: 23px; }
  .t-produto__nome { font-size: 23px; }
  .t-produto__base { height: 285px; margin-inline: -22px; }
  .t-produto__img { max-height: 215px; }
  /* No toque não existe "passar o mouse": o card subindo ficaria preso no ar
     depois do toque. */
  .t-produto:hover { transform: none; box-shadow: none; }
}

/* Carrossel ---------------------------------------------------------------
   A rolagem é do navegador (scroll-snap): arrastar com o dedo funciona mesmo
   se o JS não carregar. O trinca.js só liga setas e pontos, que nascem
   escondidos até ele rodar. Quantos cards por vez sai de --t-por-vista. */
.t-carrossel { --t-por-vista: 3; }

.t-carrossel__trilho {
  display: flex;
  gap: var(--t-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block: 5px 14px;
}
.t-carrossel__trilho::-webkit-scrollbar { display: none; }
.t-carrossel__trilho > * {
  flex: 0 0 calc((100% - (var(--t-por-vista) - 1) * var(--t-gap)) / var(--t-por-vista));
  scroll-snap-align: start;
}

.t-carrossel__controles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.t-seta {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--t-borda);
  border-radius: 50%;
  background: #fff;
  color: var(--t-verde);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--t-rapido), background var(--t-rapido);
}
.t-seta:hover { border-color: var(--t-verde); background: #f4f7f4; }

.t-pontos { display: flex; gap: 7px; }
/* O ponto é pequeno no desenho e grande no dedo: a área de toque cresce pelo
   padding, e o background-clip deixa a pintura só no miolo. */
.t-ponto {
  box-sizing: content-box;
  width: 7px;
  height: 7px;
  padding: 10px 0;
  border: 0;
  border-radius: var(--t-pilula);
  background: #cbd2cd;
  background-clip: content-box;
  cursor: pointer;
  transition: width var(--t-rapido), background-color var(--t-rapido);
}
.t-ponto[aria-current="true"] { width: 20px; background-color: var(--t-verde); }

@media (max-width: 900px) { .t-carrossel { --t-por-vista: 2; } }
@media (max-width: 600px) { .t-carrossel { --t-por-vista: 1; } }

/* Estrelas ---------------------------------------------------------------- */
.t-estrelas {
  color: var(--t-dourado);
  font-size: 14px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.t-estrelas--g { font-size: 17px; letter-spacing: 3px; }
.t-estrelas__cheia { color: var(--t-dourado); }
.t-estrelas__vazia { color: var(--t-linha); }
/* "avaliou 4 produtos da linha" — em itálico, abaixo do nome. */
.t-avaliacao__quantos { font-style: italic; }

/* Nota geral: "4,9 / 5  ★★★★★  |  185 avaliações" */
.t-nota {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}
.t-nota__valor {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
}
.t-nota__valor small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--t-suave); }
.t-nota__total {
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid var(--t-linha);
  font-size: 13px;
  color: var(--t-suave);
}

@media (max-width: 600px) {
  .t-nota { gap: 12px; flex-wrap: wrap; }
  .t-nota__total { width: 100%; padding-left: 0; border-left: 0; }
}

/* Card de avaliação ------------------------------------------------------- */
.t-avaliacao {
  display: flex;
  flex-direction: column;
  min-height: 255px;
  padding: 27px 26px;
  background: #fff;
  border: 1px solid #e1e6e2;
  border-radius: var(--t-raio);
  box-shadow: var(--t-sombra-leve);
}
/* Cartão de quem só deu estrela: sem a frase, ele não precisa da altura. */
.t-avaliacao--curto { min-height: 0; }
.t-avaliacao__texto {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #2e3530;
  overflow-wrap: anywhere;
}
.t-avaliacao__autor { margin-top: auto; padding-top: 24px; }
.t-avaliacao__autor strong { display: block; font-size: 13px; color: var(--t-verde); }
.t-avaliacao__autor span { display: block; margin-top: 5px; font-size: 12px; color: var(--t-suave); }
.t-avaliacao__autor .t-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--t-verde-2);
}
.t-selo__check {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
}

/* Convite para avaliar, no pé da seção. */
.t-convite {
  margin-top: 44px;
  padding-top: 27px;
  border-top: 1px solid var(--t-linha);
  text-align: center;
}
.t-convite strong { display: block; font-size: 14px; color: var(--t-verde); }
.t-convite span { display: block; margin-top: 5px; font-size: 13px; color: var(--t-suave); }
.t-convite .t-btn { margin-top: 16px; }

/* Caixa: bloco cinza com texto de um lado e botão do outro ---------------- */
.t-caixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 52px;
  background: #f3f5f3;
  border-radius: var(--t-raio-g);
}
.t-caixa__texto { max-width: 700px; }
.t-caixa__nota { max-width: 650px; margin: 15px 0 0; font-size: 15px; color: var(--t-suave); }
.t-caixa > .t-btn { flex-shrink: 0; }

@media (max-width: 700px) {
  .t-caixa { flex-direction: column; align-items: flex-start; gap: 25px; padding: 34px 25px; }
  .t-caixa > .t-btn { width: 100%; }
}

/* Perguntas frequentes ----------------------------------------------------
   O site.css pinta `details`, `summary` e `details p` soltos (com um "+"
   próprio). Tudo que importa é redeclarado aqui, com a classe na frente. */
.t-faq {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--t-linha);
}
.t-faq__item { padding: 0; border-bottom: 1px solid var(--t-linha); }
.t-faq__item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 2px;
  list-style: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--t-texto);
  cursor: pointer;
}
.t-faq__item > summary::-webkit-details-marker { display: none; }
.t-faq__item > summary::after {
  content: "+";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--t-borda);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 500;
  color: var(--t-verde);
}
.t-faq__item[open] > summary::after { content: "−"; }
.t-faq__item > p {
  margin: 0;
  padding: 0 44px 22px 2px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t-suave);
}

/* Rodapé ------------------------------------------------------------------
   `footer` solto no site.css é verde-escuro com letra branca; a classe
   devolve fundo, cor e respiro. */
.t-rodape {
  padding: 65px 0 35px;
  background: var(--t-cinza-2);
  color: var(--t-texto);
}
.t-rodape :focus-visible { outline-color: var(--t-verde); }

.t-rodape__topo {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 50px;
}
.t-rodape__marca { max-width: 320px; }
.t-rodape__nome { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.8px; }
.t-rodape__sobre { margin: 15px 0 0; font-size: 14px; color: var(--t-suave); }

.t-rodape__colunas {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 70px;
}
.t-rodape__titulo { margin: 0 0 20px; font-size: 14px; font-weight: 700; }
.t-rodape__col a {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--t-suave);
  transition: color var(--t-rapido);
}
/* Ícone de traço do sprite: some um pouco para o nome vir primeiro. */
.t-rodape__col .ico,
.t-rodape__linha .ico { width: 16px; height: 16px; opacity: .7; }
.t-rodape__col a:hover .ico { opacity: 1; }
.t-rodape__linha { display: flex; align-items: center; gap: 9px; }
.t-rodape__col a:hover,
.t-rodape__base a:hover { color: var(--t-verde); }

.t-rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 25px;
  border-top: 1px solid #dce0dd;
  font-size: 12px;
  color: var(--t-suave);
}

@media (max-width: 900px) {
  .t-rodape__topo { flex-direction: column; }
  .t-rodape__colunas { width: 100%; gap: 25px; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .t-rodape__colunas { grid-template-columns: 1fr 1fr; }
  .t-rodape__base { flex-direction: column; }
}

/* Ícone do sprite (_icones.html) dentro de botão e de lista. */
.t-btn .ico { width: 18px; height: 18px; }

/* Aviso de retorno (formulário enviado, erro) ------------------------------ */
.t-aviso {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--t-raio-p);
  background: var(--t-verde-claro);
  color: var(--t-verde);
  font-size: 14px;
  font-weight: 500;
}
.t-aviso--erro { background: #fbeceb; color: #8a2c22; }

/* Tabela ------------------------------------------------------------------ */
.t-tabela-rolagem { overflow-x: auto; }
.t-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.t-tabela th {
  padding: 0 12px 10px 0;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--t-suave);
  border-bottom: 1px solid var(--t-borda);
}
.t-tabela td {
  padding: 13px 12px 13px 0;
  vertical-align: top;
  color: var(--t-texto-2);
  border-bottom: 1px solid var(--t-linha);
}
.t-tabela tr:last-child td { border-bottom: 0; }
.t-tabela strong { font-weight: 700; color: var(--t-verde); }
.t-tabela small { display: block; margin-top: 2px; font-size: 12px; color: var(--t-suave); }

/* Formulário -------------------------------------------------------------- */
.t-form {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 28px;
  background: var(--t-fundo);
  border: 1px solid var(--t-linha);
  border-radius: var(--t-raio);
  box-shadow: var(--t-sombra-leve);
}
.t-form__titulo {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--t-texto);
}
.t-form__nota { margin: 0; font-size: 14px; color: var(--t-suave); }
.t-form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t-form > .t-btn { justify-self: start; }

.t-campo { display: grid; gap: 6px; }
.t-campo label { font-size: 13px; font-weight: 600; color: var(--t-texto); }
.t-campo label small { font-size: 12px; font-weight: 500; color: var(--t-suave); }
.t-campo input,
.t-campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--t-borda);
  border-radius: 12px;
  background: #fff;
  font: 400 15px/1.45 var(--t-fonte);
  color: var(--t-texto);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.t-campo textarea { min-height: 110px; resize: vertical; }
.t-campo input:focus,
.t-campo textarea:focus {
  outline: none;
  border-color: var(--t-verde-2);
  box-shadow: 0 0 0 3px rgba(47, 96, 68, .16);
}

/* Isca para robô: fora da tela, fora do Tab. */
.t-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
  .t-form { padding: 22px; }
  .t-form__linha { grid-template-columns: 1fr; }
  .t-form > .t-btn { justify-self: stretch; }
  /* 16px: abaixo disso o iPhone dá zoom no campo ao tocar. */
  .t-campo input,
  .t-campo textarea { font-size: 16px; }
}

/* Lista com check ---------------------------------------------------------- */
.t-lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.t-lista li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--t-suave);
}
.t-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--t-verde-claro);
  color: var(--t-verde);
  font-size: 11px;
  font-weight: 800;
}
.t-lista strong { display: block; font-weight: 600; color: var(--t-texto); }
.t-lista--caixa {
  gap: 18px;
  padding: 26px;
  background: var(--t-card);
  border: 1px solid var(--t-card-borda);
  border-radius: 20px;
}

/* ── Página de produto ────────────────────────────────────────────────────── */

/* Topo: galeria à esquerda, decisão à direita. */
.t-pdp { padding-block: 40px 72px; }
.t-pdp__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.t-pdp__galeria {
  padding: 8px 24px 14px;
  background: linear-gradient(180deg, var(--t-card), var(--t-verde-claro));
  border: 1px solid var(--t-card-borda);
  border-radius: var(--t-raio-g);
}
.t-pdp__galeria .landing-visual { margin: 18px 0 12px; }
.t-pdp__galeria .landing-visual .slide img { max-height: 440px; }

.t-pdp__info { display: grid; gap: 18px; align-content: start; }
.t-pdp__info .t-kicker { margin: 0; }
.t-pdp__nome {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2.2px;
  color: var(--t-texto);
  text-wrap: balance;
}
.t-pdp__nota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 14px;
  color: var(--t-suave);
}
.t-pdp__nota strong { color: var(--t-texto); }
.t-pdp__nota:hover span:last-child { text-decoration: underline; }
.t-pdp__frase { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--t-suave); }

.t-pdp__preco {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 0;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--t-texto);
  font-variant-numeric: tabular-nums;
}
.t-pdp__preco span {
  padding: 4px 10px;
  border-radius: var(--t-pilula);
  background: var(--t-cinza);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--t-suave);
}

.t-pdp__acoes { display: grid; gap: 10px; max-width: 460px; }
.t-pdp__acoes .t-btn { width: 100%; }
.t-pdp__retorno { margin: 0; min-height: 1.45em; font-size: 14px; color: var(--t-verde); }
.t-pdp__retorno a { font-weight: 700; text-decoration: underline; }
.t-pdp__indisponivel { margin: 0; font-size: 15px; color: var(--t-suave); }

.t-pdp__garantias { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--t-suave); }
.t-pdp__garantias li { display: flex; align-items: center; gap: 10px; }
.t-pdp__garantias strong { font-weight: 600; color: var(--t-texto-2); }
.t-pdp__garantias .ico { width: 17px; height: 17px; color: var(--t-verde-2); }

@media (max-width: 860px) {
  .t-pdp { padding-top: 20px; }
  .t-pdp__grade { grid-template-columns: 1fr; }
  .t-pdp__acoes { max-width: none; }
}

/* Bloco de leitura. No celular, tudo empilhado: título, texto, e o resto
   embaixo. No computador (16/09, pedido dele, a partir da Northfin), duas
   colunas — à esquerda o título e o texto que se LÊ, à direita o que se
   CONSULTA (cards, espécies, ingredientes, tabela). Um texto nunca é partido
   entre as duas; quando só há uma coisa, a seção fica numa coluna. Um fio
   separa um bloco do outro. */
.t-bloco { padding-block: 56px; border-top: 1px solid var(--t-linha); }
.t-bloco__grade { display: grid; gap: 24px; }
.t-bloco__titulo {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: var(--t-texto);
  text-wrap: balance;
}
.t-bloco__principal,
.t-bloco__lado { display: grid; gap: 20px; align-content: start; min-width: 0; }
.t-bloco__principal { max-width: 720px; }
@media (min-width: 900px) {
  .t-bloco__grade--lado {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
}
.t-texto { max-width: 70ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--t-texto-2); }

@media (max-width: 760px) {
  .t-bloco { padding-block: 40px; }
  .t-bloco__grade { gap: 18px; }
}

/* Ritmo da página. Os blocos não valem todos o mesmo: dois vendem — "o que é"
   e "por que é diferente" — e ficam com o título grande; os outros são de
   consulta (espécie, composição, dose), onde o criador entra para conferir
   uma coisa, e recebem título menor. O que separa um bloco do outro é o TOM
   do fundo, alternado entre o branco e o cinza da paleta — e não uma cor por
   seção, que viraria cartilha. Colorido de verdade é um só, o diferencial:
   é o argumento de marca da página, e a única faixa que corta a leitura. */
.t-bloco--vende { padding-block: 80px; }
.t-bloco--consulta .t-bloco__titulo {
  font-size: clamp(22px, 2.3vw, 29px);
  letter-spacing: -.9px;
}

.t-bloco--cinza {
  padding-block: 72px;
  background: var(--t-cinza);
  border-top: 0;
}
/* Card cinza em cima de fundo cinza desaparece: aqui ele vira branco. */
.t-bloco--cinza .t-especie,
.t-bloco--cinza .t-base { background: var(--t-fundo); }

.t-bloco--escuro {
  padding-block: 88px;
  background: var(--t-verde-escuro);
  border-top: 0;
  color: var(--t-sobre-escuro);
}
.t-bloco--escuro .t-bloco__titulo,
.t-bloco--escuro .t-compara__aqui { color: #fff; }
.t-bloco--escuro .t-compara__par { border-bottom-color: var(--t-linha-escura); }
.t-bloco--escuro .t-compara__aqui::before {
  border-left-color: var(--t-verde-vivo);
  border-bottom-color: var(--t-verde-vivo);
}
.t-bloco--escuro .t-compara__mercado,
.t-bloco--escuro .t-compara__fecho { color: var(--t-sobre-escuro-2); }

/* Depois de uma faixa de tom o fio é ruído: a troca de fundo já separou. */
.t-bloco--cinza + .t-bloco,
.t-bloco--escuro + .t-bloco { border-top: 0; }

@media (max-width: 760px) {
  .t-bloco--vende { padding-block: 52px; }
  .t-bloco--cinza { padding-block: 48px; }
  .t-bloco--escuro { padding-block: 56px; }
}

/* Espécies */
.t-especies { display: grid; gap: 12px; }
.t-especie {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 20px;
  background: var(--t-card);
  border: 1px solid var(--t-card-borda);
  border-radius: 18px;
}
.t-especie__grupo {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t-verde-2);
}
.t-especie__aves { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--t-texto); }
.t-especie__texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--t-suave); }

/* Por que é diferente — cada par numa linha: o que é aqui, em cima e com o
   check; o que é no mercado, embaixo e riscado. A comparação mora na coluna
   da direita, estreita demais para dividir o par ao meio — e o risco é o que
   diz, sem precisar de coluna ao lado, qual dos dois é o ruim. */
.t-compara { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.t-compara__par {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--t-linha);
}
.t-compara__par:first-child { padding-top: 0; }
.t-compara__aqui {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--t-texto);
}
.t-compara__aqui::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--t-verde-2);
  border-bottom: 2px solid var(--t-verde-2);
  transform: rotate(-45deg);
}
.t-compara__mercado {
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t-suave);
  text-decoration: line-through;
}
/* `max-width: 40ch` (~430px) era do desenho de ontem, quando este bloco era
   uma faixa escura estreita. No cartão ele partia a frase no meio — "É o que"
   numa linha, "foi feito para funcionar." na outra. Segue a coluna de leitura. */
.t-compara__fecho { margin: 0; max-width: var(--t-leitura); font-size: 17px; line-height: 1.6; color: var(--t-texto-2); }

/* Rótulo dos blocos do "Quando?" — "Quando começar", "Por quanto tempo",
   "Atenção". Pequeno e em maiúsculas, o mesmo tratamento do grupo de espécies,
   para não competir com o "Quanto? / Como? / Quando?" que está acima. */
.t-uso__rotulo {
  margin: 14px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t-verde-2);
}
.t-uso__rotulo:first-child { margin-top: 0; }

/* Composição */
.t-ingredientes { display: grid; margin: 0; }
.t-ingrediente {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--t-linha);
}
.t-ingrediente:first-child { padding-top: 0; }
.t-ingrediente dt { font-size: 15px; font-weight: 600; color: var(--t-texto); }
.t-ingrediente dt i { display: block; font-size: 12px; font-weight: 400; color: var(--t-suave); }
.t-ingrediente dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--t-suave); }
.t-base {
  margin: 0;
  padding: 16px 18px;
  background: var(--t-cinza);
  border-radius: var(--t-raio-p);
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-texto-2);
}
.t-base strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t-verde-2);
}

@media (max-width: 600px) {
  .t-ingrediente { grid-template-columns: 1fr; }
}

/* Como usar — o desenho que ele trouxe do Claude web (16/09).

   A seção nasceu das perguntas que chegam repetidas no WhatsApp — "posso usar
   junto com os outros?", "vai na ração ou na água?", "posso dar todo dia?".
   Elas já eram respondidas, e em texto corrido: a informação existia e não
   estava onde se procura. A FICHA resolve: rótulo numa coluna escura, resposta
   ao lado. O olho desce pela coluna de rótulos e para no que quer.

   Cor: o verde da marca, e não uma cor por produto. O modelo dele usava vinho
   no Vermidol e verde no Fertiferol; com sete produtos, sete cores viram
   cartilha, e o criador que compra dois deixa de reconhecer a loja. */
/* Empilhado no celular, a ficha e a tabela de dose são duas peças: precisam
   de mais ar entre si do que o título e o texto. */
.t-uso .t-bloco__grade { row-gap: 36px; }
.t-uso__abertura { margin: -6px 0 0; font-size: 15px; line-height: 1.55; color: var(--t-suave); }

.t-ficha {
  display: grid;
  margin: 0;
  overflow: hidden;
  background: var(--t-fundo);
  border: 1px solid var(--t-card-borda);
  border-radius: 16px;
  box-shadow: var(--t-sombra-leve);
}
.t-ficha__linha {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  border-bottom: 1px solid var(--t-linha);
}
.t-ficha__linha:last-child { border-bottom: 0; }
/* A borda da linha não pode cortar a coluna escura em faixas: nela, o fio
   vira o tom um pouco mais claro do mesmo verde. */
.t-ficha__linha:not(:last-child) dt { box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }
.t-ficha dt {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--t-verde);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.t-ficha dd {
  align-self: center;
  margin: 0;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t-texto);
}
.t-ficha dd small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--t-suave);
}

/* A observação: o aviso que vale para a ficha inteira, ou para a tabela ("sua
   espécie não está na lista?"). Dourado da marca, fio à esquerda.

   Chamava-se `.t-nota` e colidia com a nota das avaliações (4,8 / 5), que tem
   esse nome desde a home: a regra de baixo vencia e a nota saía pintada de
   creme, com cara de aviso. Nome diferente, trabalho diferente. */
.t-observacao {
  margin: 0;
  padding: 13px 16px;
  background: #faf5ea;
  border-left: 3px solid var(--t-dourado);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5b4a24;
}

/* Tabela de dose por espécie: cabeçalho no mesmo verde da ficha, uma linha
   sim outra não levemente tingida, a dose em destaque. */
.t-dose__titulo {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--t-texto);
}
.t-dose {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--t-fundo);
  border: 1px solid var(--t-card-borda);
  border-radius: 16px;
  box-shadow: var(--t-sombra-leve);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.t-dose th {
  padding: 12px 16px;
  background: var(--t-verde);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.t-dose td {
  padding: 13px 16px;
  line-height: 1.4;
  color: var(--t-texto);
  border-top: 1px solid var(--t-linha);
}
.t-dose tbody tr:first-child td { border-top: 0; }
.t-dose tbody tr:nth-child(even) td { background: #f3f7f4; }
.t-dose th:not(:first-child),
.t-dose td:not(:first-child) { text-align: center; white-space: nowrap; }
.t-dose td:last-child { font-weight: 700; color: var(--t-verde); }

@media (max-width: 560px) {
  .t-ficha__linha { grid-template-columns: 108px minmax(0, 1fr); }
  .t-ficha dt { padding: 14px 12px; font-size: 12px; }
  .t-ficha dd { padding: 14px 14px; font-size: 14px; }
  .t-dose th, .t-dose td { padding-inline: 12px; }
}

.t-uso__item { display: grid; gap: 10px; }
.t-uso__item p { max-width: 70ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--t-texto-2); }
.t-uso .t-tabela { font-size: 15px; }
.t-uso .t-tabela td small { display: inline; margin-left: 6px; }
.t-uso__titulo {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-verde-2);
}

/* GIF ou vídeo de uso */
.t-midia {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0;
}
.t-midia img,
.t-midia video {
  display: block;
  width: 100%;
  border-radius: var(--t-raio);
  background: var(--t-verde-escuro);
}
.t-midia figcaption { font-size: 13px; text-align: center; color: var(--t-suave); }
.t-midia--vazia {
  place-items: center;
  align-content: center;
  gap: 6px;
  max-width: none;
  min-height: 200px;
  padding: 24px;
  border: 2px dashed var(--t-borda);
  border-radius: var(--t-raio);
  text-align: center;
  font-size: 14px;
  color: var(--t-suave);
}
.t-midia--vazia strong { font-size: 16px; color: var(--t-texto); }

/* Perguntas: as respondidas e, embaixo, o formulário — uma coluna, como o
   resto da página. */
.t-perguntas { display: grid; gap: 32px; }
.t-perguntas > * { max-width: 880px; }
.t-perguntas .t-bloco__titulo { margin-bottom: 20px; }
.t-perguntas .t-faq { max-width: none; margin: 0; }
.t-perguntas__vazio {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--t-linha);
  color: var(--t-suave);
}

@media (max-width: 900px) {
  .t-perguntas { grid-template-columns: 1fr; }
}

/* Marketplaces, com as logos oficiais. */
.t-mkt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 880px;
  padding: 36px 44px;
  background: #f3f5f3;
  border-radius: var(--t-raio-g);
}
.t-mkt__titulo {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--t-texto);
}
.t-mkt__lojas { display: flex; gap: 12px; flex-shrink: 0; }
.t-mkt__loja {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  width: 180px;
  height: 118px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--t-card-borda);
  border-radius: 18px;
  transition: transform var(--t-rapido), box-shadow var(--t-rapido);
}
.t-mkt__loja:hover { transform: translateY(-2px); box-shadow: var(--t-sombra-card); }
.t-mkt__loja img { width: auto; height: 46px; max-width: 100%; }
.t-mkt__loja--shopee img { height: 60px; }
.t-mkt__loja span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--t-suave);
}

@media (max-width: 760px) {
  .t-mkt { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  .t-mkt__lojas { width: 100%; }
  .t-mkt__loja { flex: 1; width: auto; }
}

/* ── Paleta viva (16/09/2026) ──────────────────────────────────────────────
   Ele trouxe um modelo com verde mais claro e cinzas azulados, e pediu "tudo
   com esse verde". Os tokens abaixo trocam a paleta nas páginas da prévia —
   o site no ar continua com o verde escuro até ele aprovar.

   `body.t-vivo` também repinta os tokens do site.css (`--forest`), que é o que
   colore a faixa do topo e o cabeçalho: sem isso a prévia teria dois verdes. */
body.t-vivo {
  --t-verde: #1b5e20;
  --t-verde-hover: #144417;
  --t-verde-2: #2e7d32;
  --t-verde-claro: #e8f5e9;
  --t-verde-escuro: #144417;

  --t-texto: #1e293b;
  --t-texto-2: #334155;
  --t-suave: #475569;
  --t-linha: #e2e8f0;
  --t-borda: #cbd5e1;
  --t-card: #f8fafc;
  --t-card-borda: #e2e8f0;
  --t-cinza: #f8fafc;
  --t-cinza-2: #f1f5f9;
  --t-preco: #475569;

  --t-fundo-pagina: #f4f6f8;
  /* Um tom abaixo do card (#f8fafc): sobre a faixa, card branco se destaca. */
  --t-faixa: #eef2f6;
  /* Rodapé: cinza-chumbo, escolha dele em 17/09 entre o verde da marca, o
     azul-marinho do modelo e o claro. Escuro sem disputar com o verde. */
  --t-rodape: #1e293b;
  --t-alerta: #fffbeb;
  --t-alerta-borda: #d97706;
  --t-alerta-texto: #92400e;
  --t-whatsapp: #25d366;
  --t-whatsapp-texto: #128c7e;
  --t-whatsapp-fundo: #f0fdf4;

  /* Tokens do site.css — cabeçalho, faixa do topo e rodapé antigo. */
  --forest: #1b5e20;
  --forest-2: #2e7d32;
  --forest-deep: #144417;
}
/* Fundo da página atrás do cartão. Só a página de produto pede esta classe. */
body.t-fundo-cinza { background: var(--t-fundo-pagina); }

/* ── Página de produto (17/09/2026) ───────────────────────────────────────
   Do modelo definitivo dele: cartão branco sobre fundo cinza claro, foto e
   compra lado a lado no topo, o resto numa coluna, cada seção aberta por um
   título com fio embaixo.

   O cartão já tinha sido recusado em 16/09 — mas ali ele tinha 980px embaixo
   de um cabeçalho de 1180 e parecia uma caixa flutuando dentro da página. Com
   1140 ele acompanha o cabeçalho e lê como o próprio site. */
.t-solto {
  width: min(1140px, 100% - 2 * var(--t-margem));
  margin: 20px auto 40px;
  padding: clamp(20px, 3vw, 40px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
}

/* Rodapé escuro do modelo definitivo (17/09). No modelo dele o fundo era
   azul-marinho (#0f172a); aqui é o verde escuro da marca — um segundo tom
   escuro brigaria com o verde. Só na página que carrega a paleta viva. */
body.t-vivo .t-rodape {
  margin-top: 0;
  padding: 45px 0 20px;
  background: var(--t-rodape);
  color: #cbd5e1;
}
body.t-vivo .t-rodape__nome,
body.t-vivo .t-rodape__titulo { color: #fff; }
body.t-vivo .t-rodape__sobre,
body.t-vivo .t-rodape__linha { color: #94a3b8; }
body.t-vivo .t-rodape__col a { color: #cbd5e1; }
body.t-vivo .t-rodape__col a:hover,
body.t-vivo .t-rodape__base a:hover { color: #fff; }
body.t-vivo .t-rodape__base {
  border-top-color: rgba(255, 255, 255, .12);
  color: #94a3b8;
}
body.t-vivo .t-rodape :focus-visible { outline-color: #fff; }
.t-rodape__linha { margin: 12px 0 0; font-size: 14px; }

/* Só o TEXTO CORRIDO para em 900px. Card, tabela e formulário usam a largura
   cheia do cartão: o que cansa numa linha de 1060px é o parágrafo, não uma
   lista de ingredientes em duas colunas. */
.t-pp__texto { max-width: var(--t-leitura); }

.t-pp__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 8px;
}
.t-pp__galeria { display: grid; align-content: start; }
.t-pp__galeria .landing-visual { margin: 0 0 8px; }
.t-pp__galeria .landing-visual .slide img { max-height: 380px; }

.t-pp__info { display: grid; gap: 12px; align-content: start; }
.t-pp__tag {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--t-verde);
}
.t-pp__nome {
  margin: 0;
  font-family: var(--t-fonte);
  font-size: clamp(1.7rem, 3.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: var(--t-texto);
}
.t-pp__nota { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: .88rem; color: var(--t-suave); }
.t-pp__nota strong { color: var(--t-texto); }
.t-pp__frase { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--t-suave); }

/* Preço solto, sem caixa nem barra verde (pedido dele, 17/09): o número já é
   a coisa maior da coluna, não precisa de moldura para ser achado. */
.t-pp__preco {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-block: 4px;
}
.t-pp__valor { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--t-verde); font-variant-numeric: tabular-nums; }
.t-pp__peso { padding: 2px 8px; border-radius: 6px; background: var(--t-linha); font-size: .95rem; font-weight: 600; color: var(--t-suave); }

.t-pp__destaques { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--t-texto); }
.t-pp__destaques li { display: flex; gap: 8px; }
.t-pp__destaques li::before { content: "✓"; color: var(--t-verde-2); font-weight: 700; }

.t-pp__acoes { display: grid; gap: 10px; }
.t-btn--comprar {
  width: 100%;
  padding: 16px;
  border-radius: 10px;
  background: var(--t-verde);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(27, 94, 32, .2);
}
.t-btn--comprar:hover { background: var(--t-verde-hover); }
.t-btn--wsp {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--t-whatsapp);
  border-radius: 10px;
  background: #fff;
  color: var(--t-whatsapp-texto);
  font-size: 1rem;
  font-weight: 700;
}
.t-btn--wsp:hover { background: var(--t-whatsapp-fundo); color: #075e54; }

.t-pp__retorno { margin: 0; min-height: 1.4em; font-size: .88rem; color: var(--t-verde); }
.t-pp__retorno a { font-weight: 700; text-decoration: underline; }
.t-pp__indisponivel { margin: 0; font-size: .95rem; color: var(--t-suave); }
.t-pp__garantias { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--t-suave); }
.t-pp__garantias li { display: flex; align-items: center; gap: 8px; }
.t-pp__garantias strong { color: var(--t-texto-2); }
.t-pp__garantias .ico { width: 16px; height: 16px; color: var(--t-verde-2); }

/* Título de seção: fio embaixo, conteúdo logo depois. */
.t-solto .t-pp__titulo {
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--t-linha);
  font-family: var(--t-fonte);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--t-texto);
}
.t-solto .t-pp__subtitulo {
  margin: 22px 0 8px;
  font-family: var(--t-fonte);
  font-size: 1rem;
  font-weight: 700;
  color: var(--t-texto);
}
.t-pp__texto { margin: 0 0 10px; font-size: .95rem; line-height: 1.65; color: var(--t-texto); }
.t-solto .t-lista { margin-top: 14px; }

/* Aves: card com espaço de foto, pílulas e a regra de época. */
.t-aves { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.t-ave {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--t-card);
  border: 1px solid var(--t-card-borda);
  border-radius: 12px;
}
/* Foto do grupo: deitada, cortada no centro — todas do mesmo tamanho, para os
   cards ficarem iguais mesmo com fotos de proporções diferentes. */
.t-ave__img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .t-ave__img { height: 220px; }
}
.t-ave__foto {
  display: grid;
  place-items: center;
  gap: 6px;
  height: 150px;
  padding: 12px;
  border-bottom: 1px dashed var(--t-borda);
  background: repeating-linear-gradient(45deg, #eef2f6, #eef2f6 10px, #e6ecf2 10px, #e6ecf2 20px);
  font-size: .82rem;
  text-align: center;
  color: var(--t-suave);
}
.t-ave__corpo { display: flex; flex-direction: column; flex-grow: 1; padding: 18px; }
.t-ave__grupo { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: var(--t-verde); }
.t-ave__pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.t-pilula {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--t-linha);
  font-size: .8rem;
  font-weight: 600;
  color: var(--t-texto);
}
.t-ave__regra {
  margin: auto 0 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--t-card-borda);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--t-suave);
}

/* Ingredientes: um card por ingrediente. */
.t-ings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.t-ing { padding: 16px; background: var(--t-card); border: 1px solid var(--t-card-borda); border-radius: 10px; }
.t-ing h3 { margin: 0 0 6px; font-family: var(--t-fonte); font-size: .95rem; font-weight: 700; color: var(--t-verde); }
.t-ing h3 i { font-weight: 400; font-size: .85rem; color: var(--t-suave); }
.t-ing p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--t-suave); }
.t-ing--base { grid-column: 1 / -1; }

/* Aviso âmbar, embaixo da ficha de uso. */
.t-alerta {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--t-alerta-borda);
  border-radius: 0 8px 8px 0;
  background: var(--t-alerta);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--t-alerta-texto);
}

/* Marketplaces: na mesma coluna de leitura do resto da página. Tinha
   `max-width: none` da época do cartão e a caixa escapava para a borda,
   mais larga que o formulário logo acima. */
.t-solto .t-mkt {
  /* Dentro do cartão ela ocupa a largura toda e centraliza: o `max-width:880`
     e o `align-items:flex-start` da versão empilhada deixavam a caixa
     encostada num lado, com o conteúdo desalinhado do resto da página. */
  max-width: none;
  margin-inline: auto;
  margin-top: 36px;
  padding: 24px;
  background: var(--t-card);
  border: 1px solid var(--t-card-borda);
  border-radius: 14px;
  text-align: center;
  align-items: center;
}
.t-solto .t-mkt__titulo { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.t-mkt__nota { margin: 4px 0 0; font-size: .88rem; color: var(--t-suave); }
.t-solto .t-mkt__lojas { justify-content: center; }

@media (max-width: 768px) {
  /* No celular o cartão VIRA a página: sem margem, sem canto, sem sombra e
     sem o cinza atrás. Dentro do cartão o conteúdo pagava dois respiros —
     o da página e o do cartão — e sobravam ~310px numa tela de 390. */
  .t-solto {
    width: 100%;
    margin: 0;
    padding: 16px var(--t-margem) 40px;
    border-radius: 0;
    box-shadow: none;
  }
  body.t-fundo-cinza { background: #fff; }

  .t-pp__grade,
  .t-aves,
  .t-ings { grid-template-columns: 1fr; }
  .t-ing--base { grid-column: auto; }
  .t-solto .t-pp__titulo { font-size: 1.2rem; margin-top: 30px; }
}

/* ── 3. Páginas ───────────────────────────────────────────────────────────── */

/* Faixa de prévia: só existe nas páginas de staff em /previa/. */
.t-previa-aviso {
  padding: 10px var(--t-margem);
  background: #fff6db;
  color: #5c4a12;
  font-size: 13px;
  text-align: center;
}
.t-previa-aviso a { font-weight: 700; text-decoration: underline; }

/* Home: a abertura. */
.t-intro {
  padding-block: 92px 60px;
  text-align: center;
}
.t-intro .t-titulo-1 { max-width: 920px; margin-inline: auto; }

@media (max-width: 600px) {
  .t-intro { padding-block: 62px 40px; }
}

/* Vitrine de peças (/previa/pecas/). */
.t-guia { padding-block: 56px 96px; }
.t-guia > .t-lead { margin-left: 0; }
.t-guia__bloco { padding-block: 44px; border-top: 1px solid var(--t-linha); }
.t-guia__bloco:first-of-type { margin-top: 48px; }
.t-guia__titulo {
  margin: 0 0 6px;
  font-family: var(--t-fonte);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.t-guia__uso { margin: 0 0 20px; max-width: 720px; font-size: 14px; color: var(--t-suave); }
.t-guia__classe {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--t-cinza);
  font: 500 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: var(--t-verde-2);
}
.t-guia__cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.t-guia__cor {
  overflow: hidden;
  border: 1px solid var(--t-linha);
  border-radius: var(--t-raio-p);
  font-size: 12px;
}
.t-guia__amostra { height: 64px; border-bottom: 1px solid var(--t-linha); }
.t-guia__cor p { margin: 0; padding: 8px 10px 0; }
.t-guia__cor p:last-child { padding-bottom: 10px; color: var(--t-suave); }
.t-guia__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.t-guia__pilha > * + * { margin-top: 18px; }