/*
Theme Name:   Boa Escolha Pet
Template:     generatepress
Description:  Tema filho do GeneratePress para o blog de produtos pet. Identidade navy + verde da marca Boa Escolha Pet, implantada em 09/09/2026 a partir do pacote de referência visual em docs/referencia/ — ver SESSION_STATE.md.
Author:       Boa Escolha Pet
Version:      1.1.0
*/

/* ==========================================================================
   Tokens.

   Marca definida em 09/09/2026: navy + verde, sobre creme. Substitui a paleta
   verde-floresta/areia/terracota que era placeholder enquanto o nome não
   estava decidido (SESSION_STATE D-02/D-03/D-04).

   Os NOMES dos tokens não mudaram, só os valores. Isso é deliberado: as ~950
   linhas de componentes abaixo (ficha de produto, tabela de comparação, guia
   por situação) consomem esses nomes e são repintadas sem que nenhuma delas
   precise ser editada. Renomear token é churn que não entrega pixel nenhum.

   Por isso `--pet-clay` hoje guarda um verde, não uma terracota: o papel do
   token é "acento vivo de CTA", e o papel é que importa. O nome fica.

   Prefixo `--pet-`, não a inicial da marca: um prefixo derivado do nome
   comercial viraria churn no próximo rebrand. Este aqui já é o segundo.
   ========================================================================== */
:root {
  --pet-forest:      #183248; /* navy — blocos escuros, headings, footer */
  --pet-forest-soft: #0F2B40; /* navy profundo — títulos, hover */
  --pet-moss:        #278247; /* verde escuro — links, ícones, "para quem é" */
  --pet-clay:        #4DA85A; /* acento vivo — CTA, destaque */
  --pet-clay-dark:   #278247; /* hover do CTA */
  --pet-sand:        #FDFBF7; /* creme — fundo geral do site */
  --pet-sand-card:   #EEF8EC; /* verde claro — fundo de tag/badge/callout */
  --pet-white:       #FFFFFF;

  --pet-text:        #183248; /* corpo de texto */
  --pet-text-muted:  #5C6E7D; /* texto secundário */
  --pet-text-soft:   #74838E; /* metadados, legendas */
  --pet-border:      #E7E7E2; /* borda padrão de card */
  --pet-border-soft: #EDF0ED; /* divisórias internas */

  --pet-footer-text:  #C7D6E1;
  --pet-footer-muted: #8FA3B3;
  --pet-footer-border:#2A4A63;

  --pet-positive:   #278247; /* "para quem é" */
  --pet-negative:   #B4503C; /* "para quem NÃO é" — alerta, fora da paleta de marca de propósito */

  /* Tons de apoio da referência (docs/referencia/css/style.css). */
  --pet-mint-soft:  #F0F8F1; /* segundo tom de card de categoria */
  --pet-beige-soft: #FFF6E9; /* terceiro tom, quebra a monotonia do verde */
  --pet-hero-left:  #FFFDF9; /* fundo do hero */
  --pet-shadow:     0 10px 28px rgba(21, 48, 67, .06);
  --pet-shadow-sm:  0 6px 22px rgba(15, 43, 64, .025);

  /* Petrona (títulos) + Karla (corpo), aprovadas no mockup em 05/09/2026.
     Substituíram Fraunces + Inter: as duas anteriores são das faces mais
     usadas em interface gerada e davam ao site cara de template. Petrona é
     um serif humanista de baixo contraste, feito para texto longo e com
     acentuação boa para português; Karla é um grotesco com terminais
     levemente irregulares, que dá calor sem infantilizar. */
  --pet-font-heading: 'Petrona', Georgia, 'Times New Roman', serif;
  --pet-font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pet-border-strong: #AEBAC4; /* separadores de breadcrumb, texto sobre creme */
  --pet-ink-faint:     #8695A1; /* legenda dentro de bloco de imagem ausente */

  --pet-radius-card: 13px;
  --pet-radius-btn:  8px;
  /* 1280px: a largura do container da referência. O conteúdo de artigo segue
     mais estreito (--pet-prosa-width), porque linha longa demais não se lê. */
  --pet-content-width: 1280px;
  --pet-prosa-width:   760px;

  /* Distância entre a borda da viewport e a borda do container — a "calha".
     É o quanto um bloco precisa recuar para sangrar até a borda da tela.

     Espelha exatamente `width: min(100% - 48px, 1280px)`: acima de 1280px
     quem manda é a sobra dividida em dois; abaixo, é o próprio respiro de
     24px. Precisa ser redefinida em cada breakpoint que muda esse respiro.

     Por que não `calc(50% - 50vw)` no elemento: em item de grid, margem em
     porcentagem resolve contra a ÁREA DO GRID, não contra o container. No
     hero (coluna de 53%) isso rendia -393px em vez de -80px e jogava o
     conteúdo do painel para fora da tela. Erro real, corrigido em 09/09. */
  --pet-gutter: max(24px, (100vw - var(--pet-content-width)) / 2);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background: var(--pet-sand);
  color: var(--pet-text);
  font-family: var(--pet-font-body);
}

/* Reset básico de imagem responsiva — sem isto, uma mídia importada com
   width fixo estoura a largura do header em viewport estreita. Lição já
   paga no Leitor Esperto, não redescobrir. */
img { max-width: 100%; height: auto; }

a { color: var(--pet-forest); }
a:hover, a:focus { color: var(--pet-moss); }

h1, h2, h3, h4,
.entry-title,
.entry-title a {
  font-family: var(--pet-font-heading);
  font-weight: 600;
  color: var(--pet-forest);
  letter-spacing: -0.015em;
}

.site-content, .entry-content { color: var(--pet-text); }

/* ==========================================================================
   Header e rodapé do GeneratePress — DESACOPLADOS.

   As regras que existiam aqui pintavam o header e o rodapé padrão do tema
   pai (.site-header/.inside-header, .main-navigation, #footer-widgets).
   Desde 09/09/2026 nenhum dos dois é renderizado: `pet_desacopla_chrome_do_pai()`
   remove as ações do pai e o tema filho emite o seu próprio markup.

   O desenho atual vive no bloco "HEADER, HOME E RODAPÉ" mais abaixo. Manter
   as regras antigas aqui só criaria conflito de mesma especificidade com
   `.pet-header`/`.pet-footer`, decidido por ordem de arquivo — que é o tipo
   de dependência frágil que quebra no dia em que alguém reordena o CSS.
   ========================================================================== */

/* ==========================================================================
   Conteúdo — blocos do Gutenberg gerados pelo pipeline (parágrafo, h2, h3).
   ========================================================================== */
.entry-content {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.7;
}

.entry-content > .alignwide,
.entry-content > .alignfull { max-width: none; }

.entry-content p { color: var(--pet-text); margin: 0 0 22px; }

.entry-content h2 {
  font-size: 28px;
  line-height: 1.25;
  margin: 48px 0 16px;
  padding-top: 8px;
}

.entry-content h3 {
  font-size: 19px;
  line-height: 1.3;
  color: var(--pet-forest);
  margin: 28px 0 10px;
}

.entry-content hr,
.entry-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--pet-border);
  margin: 40px 0;
}

.entry-content ul, .entry-content ol { padding-left: 22px; line-height: 1.7; }
.entry-content li { margin-bottom: 6px; }
.entry-content strong { color: var(--pet-forest); font-weight: 600; }

/* ==========================================================================
   Afiliado. O shortcode [pet_afiliado] (functions.php) decide em tempo de
   EXIBIÇÃO qual dos dois estados renderiza: sem ASIN cadastrado, o
   placeholder tracejado; com ASIN, o botão terracota. Nada disso é gravado
   no post_content — é exatamente o erro que o Leitor Esperto cometeu e teve
   que desfazer (Fase 7.4 do plano).
   ========================================================================== */
.pet-affiliate-slot {
  display: block;
  border: 1px dashed var(--pet-border);
  color: var(--pet-text-soft);
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 4px 0 28px;
}

.pet-affiliate-slot--ativo {
  display: inline-block;
  border: none;
  background: var(--pet-clay);
  color: var(--pet-white);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 12px 24px;
}

.pet-affiliate-slot--ativo:hover,
.pet-affiliate-slot--ativo:focus {
  background: var(--pet-clay-dark);
  color: var(--pet-white);
}

/* Disclosure de afiliado: é sempre o último parágrafo do conteúdo gerado
   pelo pipeline (scripts/content/publish.py). Aviso, não texto corrido. */
.entry-content > p:last-of-type {
  background: var(--pet-sand-card);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--pet-text-soft);
  line-height: 1.6;
  margin-top: 32px;
}

/* Aviso veterinário — Princípio 18 do plano: ração e antiparasitário tocam
   saúde animal. O bloco é inserido pelo publish.py só nas categorias
   reguladas, nunca em produto puramente mecânico. */
.pet-vet-notice {
  border-left: 3px solid var(--pet-moss);
  background: var(--pet-sand-card);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pet-text-muted);
  margin: 8px 0 28px;
}

.entry-meta, .entry-meta a { color: var(--pet-text-soft); font-size: 14px; }

/* ==========================================================================
   Botões
   ========================================================================== */
.button, .wp-block-button__link, input[type="submit"] {
  background: var(--pet-clay);
  color: var(--pet-white);
  border-radius: var(--pet-radius-btn);
  font-weight: 600;
  border: none;
  padding: 12px 22px;
}

.button:hover, .wp-block-button__link:hover {
  background: var(--pet-clay-dark);
  color: var(--pet-white);
}

.page .entry-content,
.single-produto .entry-content { max-width: 760px; }

/* ==========================================================================
   Nuvem de categorias — widget da sidebar (functions.php)
   ========================================================================== */
.pet-cat-cloud {
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  overflow: hidden;
}

.pet-cat-cloud-title {
  margin: 0;
  padding: 14px 20px;
  background: var(--pet-forest);
  color: var(--pet-sand);
  font-family: var(--pet-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.pet-cat-cloud-body {
  padding: 20px 22px;
  background: var(--pet-white);
  line-height: 2.1;
  text-align: center;
}

.pet-cat-cloud-body a {
  display: inline-block;
  margin: 0 6px;
  color: var(--pet-forest);
  font-family: var(--pet-font-body);
  font-weight: 500;
  text-decoration: none;
}

.pet-cat-cloud-body a:hover,
.pet-cat-cloud-body a:focus { color: var(--pet-clay); }

/* ==========================================================================
   Responsivo. "display:grid" inline não colapsa sozinho: sem estas regras
   os cards da home ficam espremidos e a página ganha scroll horizontal em
   mobile — achado real testando em viewport 390px no Leitor Esperto, não
   visível só lendo o CSS.
   ========================================================================== */
@media (max-width: 768px) {
  .entry-content { font-size: 16px; }
  .entry-content h2 { font-size: 24px; }
}

@media (max-width: 900px) {
  .pet-produto-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .pet-grid-2, .pet-grid-3 { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   COMPONENTES DA LISTA — implementam o mockup aprovado em 05/09/2026
   (design/Lista.dc.html). A marcação vem do scripts/content/publish.py;
   qualquer classe abaixo precisa existir lá, e vice-versa.

   Por que estes blocos são estruturais e não decoração: a tabela de decisão
   responde a pergunta do leitor apressado sem ele rolar a página, e o par
   "para quem é / para quem NÃO é" com o MESMO peso visual é o diferencial
   editorial do site. Se o "não é" virar nota de rodapé no layout, o site
   vira mais um top 10.
   ========================================================================== */

/* --- tabela de decisão ---------------------------------------------------- */
.pet-decision {
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  overflow: hidden;
  background: var(--pet-white);
  margin: 0 0 40px;
}

.pet-decision__top {
  background: var(--pet-forest);
  padding: 15px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pet-decision__top strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pet-sand);
}

.pet-decision__top span {
  font-size: 13px;
  color: var(--pet-footer-muted);
}

.pet-decision table { width: 100%; border-collapse: collapse; }

.pet-decision th {
  background: var(--pet-sand-card);
  border-bottom: 1px solid var(--pet-border);
  font-family: var(--pet-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pet-text-soft);
  text-align: left;
  padding: 13px 18px;
}

.pet-decision th:first-child, .pet-decision td:first-child { padding-left: 26px; }
.pet-decision th:last-child, .pet-decision td:last-child { text-align: right; padding-right: 26px; }

.pet-decision td {
  border-bottom: 1px solid var(--pet-border-soft);
  padding: 20px 18px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--pet-text-muted);
  vertical-align: middle;
}

.pet-decision tr:last-child td { border-bottom: none; }

/* A linha da escolhida ganha fundo — é a resposta que a maioria procura. */
.pet-decision tr.is-pick td { background: #FDFAF6; }

.pet-decision__nome {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--pet-forest);
  line-height: 1.4;
}

.pet-decision__nome small {
  display: block;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--pet-text-soft);
  margin-top: 2px;
}

/* --- nota editorial ------------------------------------------------------- */
.pet-score {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background: var(--pet-sand-card);
  border: 1px solid var(--pet-border);
  border-radius: 12px;
  line-height: 1;
}

.pet-score b {
  font-family: var(--pet-font-heading);
  font-size: 27px;
  font-weight: 600;
  color: var(--pet-forest);
}

.pet-score small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pet-text-soft);
  margin-top: 4px;
}

/* Versão compacta da tabela + a variante da escolhida (fundo escuro). */
.pet-score--inline {
  width: auto; height: auto; min-width: 50px;
  flex-direction: row; padding: 5px 10px; border-radius: 7px;
}
.pet-score--inline b { font-size: 19px; }

.pet-score--pick { background: var(--pet-forest); border-color: var(--pet-forest); }
.pet-score--pick b { color: var(--pet-clay); }
.pet-score--pick small { color: var(--pet-footer-muted); }

/* --- cabeçalho de cada produto -------------------------------------------- */
.pet-produto-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--pet-border);
  margin: 48px 0 18px;
}

/* A escolhida abre seção com régua grossa: hierarquia visível na rolagem. */
.pet-produto-head.is-pick { border-top: 2px solid var(--pet-forest); }

.pet-produto-head__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pet-produto-head h2 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.pet-produto-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pet-clay);
}

.pet-produto-sub { font-size: 15px; color: var(--pet-text-soft); margin: 0; }

/* --- para quem é / para quem NÃO é ---------------------------------------- */
.pet-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 24px;
}

.pet-fit, .pet-unfit {
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-left-width: 3px;
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
}

.pet-fit { border-left-color: var(--pet-positive); }
.pet-unfit { border-left-color: var(--pet-negative); }

.pet-fit b, .pet-unfit b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pet-fit b { color: var(--pet-positive); }
.pet-unfit b { color: var(--pet-negative); }

.pet-fit p, .pet-unfit p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pet-text);
  margin: 0;
}

/* --- veredito ------------------------------------------------------------- */
.pet-verdict {
  background: var(--pet-forest);
  border-radius: 16px;
  padding: 40px 44px;
  margin: 48px 0 28px;
}

.pet-verdict span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pet-clay);
  margin-bottom: 14px;
}

.pet-verdict h2 {
  font-size: 30px;
  line-height: 1.22;
  color: var(--pet-sand);
  margin: 0 0 14px;
  padding: 0;
}

.pet-verdict p {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--pet-footer-text);
  margin: 0;
}

.pet-verdict strong { color: var(--pet-sand); }

/* O disclosure é o último parágrafo do conteúdo, já estilizado acima como
   aviso — mas dentro do veredito escuro a regra genérica erraria o alvo. */
.pet-verdict + .wp-block-paragraph { margin-top: 0; }

@media (max-width: 720px) {
  .pet-fit-grid { grid-template-columns: 1fr; }
  .pet-produto-head { flex-direction: column; gap: 14px; }
  .pet-produto-head h2 { font-size: 25px; }
  .pet-verdict { padding: 28px 24px; }
  .pet-verdict h2 { font-size: 24px; }
  /* Tabela larga rola no próprio container, nunca o corpo da página. */
  .pet-decision { overflow-x: auto; }
  .pet-decision table { min-width: 620px; }
}

/* ==========================================================================
   HEADER, HOME E RODAPÉ — referência visual de docs/referencia/ (09/09/2026).

   As medidas saíram da referência, não de um grid de 8px: arredondar aqui
   descola o site do que foi aprovado sem ninguém perceber.
   ========================================================================== */

/* --- a home escapa do container do tema pai --------------------------------
   O GeneratePress embrulha o conteúdo em `.grid-container` (largura máxima +
   padding) e, em `separate-containers`, dá a `.site-main` fundo, margem e
   sombra próprios. Isso é o certo para um artigo e o errado para uma home de
   faixas full-bleed: o hero herdaria a largura do container e o gradiente
   pararia no meio da tela.

   Aqui os wrappers do pai viram invólucros neutros SÓ na front page, e cada
   seção passa a controlar a própria largura (`width: min(...)`). Escopo em
   `body.home` de propósito — o layout do resto do site não muda. */
body.home .site.grid-container {
  max-width: none;
  padding: 0;
  margin: 0;
}
body.home .site-content { display: block; padding: 0; }
body.home .content-area { width: 100%; max-width: none; float: none; }
body.home .site-main {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* --- utilitários compartilhados ------------------------------------------- */
.pet-eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pet-moss);
}
.pet-eyebrow--clay { color: var(--pet-clay); }
.pet-eyebrow--sm { font-size: 11.5px; letter-spacing: .12em; }

/* Círculo com seta. Aparece em card de categoria e em card de artigo, então
   vive fora dos dois — duplicar viraria divergência na primeira alteração. */
.pet-seta {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pet-white);
  border: 1px solid #E5E8E5;
  color: var(--pet-forest);
  font-size: 17px;
  line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* Tons de fundo dos cards. Rotacionados pelo template só para o grid não
   virar um bloco monocromático. */
.pet-tom--verde { background: linear-gradient(135deg, #F1FAEF, #F8FBF5); }
.pet-tom--menta { background: linear-gradient(135deg, #F2FAF4, #EEF8F1); }
.pet-tom--bege  { background: linear-gradient(135deg, #FFF9EF, #FFF3E4); }

/* --- header --------------------------------------------------------------- */
.pet-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--pet-border);
  backdrop-filter: blur(10px);
}

.pet-header__inner {
  width: min(calc(100% - 48px), var(--pet-content-width));
  margin-inline: auto;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}

.pet-marca { display: flex; align-items: center; text-decoration: none; }
.pet-marca__img { display: block; width: 215px; height: auto; }

.pet-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 30px);
  font-family: var(--pet-font-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.pet-nav a {
  position: relative;
  padding: 23px 0 21px;
  color: var(--pet-text);
  text-decoration: none;
}
/* Sublinhado que cresce do centro. `transform` e não `width` de propósito:
   animar largura força layout a cada quadro. */
.pet-nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 16px;
  width: 18px;
  margin-left: -9px;
  height: 2px;
  border-radius: 2px;
  background: var(--pet-moss);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.pet-nav a:hover::after,
.pet-nav a.is-atual::after { transform: scaleX(1); }
.pet-nav a:hover { color: var(--pet-forest-soft); }

/* --- busca ---------------------------------------------------------------- */
.pet-busca svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--pet-forest);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pet-busca--header {
  width: 235px;
  height: 38px;
  display: flex;
  align-items: center;
  padding-left: 14px;
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .025);
}
.pet-busca--header input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--pet-font-body);
  font-size: 14px;
  color: var(--pet-text);
}
.pet-busca--header button {
  width: 43px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pet-busca--hero {
  width: min(620px, 100%);
  height: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--pet-white);
  border: 1px solid #DFE3DF;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(25, 49, 65, .05);
}
.pet-busca--hero .pet-busca__icone { display: flex; margin-left: 18px; }
.pet-busca--hero input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 18px 0 12px;
  border: 0;
  outline: 0;
  font-family: var(--pet-font-body);
  font-size: 15px;
  color: var(--pet-text);
}
.pet-busca--hero button {
  align-self: stretch;
  min-width: 135px;
  border: 0;
  background: var(--pet-clay);
  color: var(--pet-white);
  font-family: var(--pet-font-body);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease;
}
.pet-busca--hero button:hover { background: var(--pet-clay-dark); }
.pet-busca input::placeholder { color: #82909B; }

/* Hambúrguer: só existe no mobile (ver media query). */
.pet-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-content: center;
  gap: 5px;
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-radius: 9px;
  cursor: pointer;
}
.pet-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--pet-forest);
}

/* --- aviso de pré-visualização -------------------------------------------- */
.pet-aviso-preview {
  max-width: var(--pet-content-width);
  margin: 0 auto;
  padding: 10px 24px;
  background: var(--pet-beige-soft);
  border-bottom: 1px solid #EADFC9;
  color: #7A5B2E;
  font-size: 13px;
  text-align: center;
}

/* --- hero ----------------------------------------------------------------- */
.pet-hero {
  /* Fundo em cor única, não no degradê de duas metades da referência: lá a
     virada fica em 43% da viewport, mas a coluna da mídia começa em 47% do
     CONTAINER — a diferença aparecia como uma faixa cinza de ~60px entre as
     duas colunas. O painel já traz o próprio degradê e encosta na coluna. */
  background: var(--pet-hero-left);
  border-bottom: 1px solid var(--pet-border);
  /* Recorta a sangria do painel (abaixo). Sem isto, a diferença entre 100vw
     e a largura útil — a barra de rolagem — vira scroll horizontal. */
  overflow: hidden;
}
.pet-hero__inner {
  width: min(calc(100% - 48px), var(--pet-content-width));
  margin-inline: auto;
  /* 330px. A referência usava 485 para caber uma faixa de selos grande, que
     aqui virou uma linha só; sem ela, a altura sobrava e virava área vazia. */
  min-height: 330px;
  display: grid;
  grid-template-columns: 50% 50%;
}
.pet-hero__texto {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 22px 56px 22px 0;
}
.pet-hero h1 {
  margin: 0;
  font-family: var(--pet-font-heading);
  font-weight: 700;
  font-size: clamp(31px, 2.9vw, 45px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--pet-forest-soft);
}
.pet-hero h1 span { color: var(--pet-moss); }
.pet-hero__lead {
  max-width: 540px;
  margin: 12px 0 16px;
  font-size: 16.5px;
  line-height: 1.5;
  color: #415D70;
}

.pet-confianca {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--pet-text-muted);
}
.pet-confianca li { display: inline-flex; align-items: center; gap: 8px; }
.pet-confianca svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--pet-moss);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pet-hero__painel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Sangra até a borda direita da viewport, como no mockup: a mídia do hero
     não para na margem do container. Ver `--pet-gutter` nos tokens. */
  margin-right: calc(-1 * var(--pet-gutter));
}
.pet-hero__foto {
  /* Fora do fluxo, de propósito.
     Com a imagem no fluxo e `height:100%` numa linha de grid automática, quem
     passava a definir a altura do hero era a PROPORÇÃO NATURAL do arquivo
     (880×563 a 720px de largura = 461px), e o `min-height` do container virava
     letra morta — reduzir o texto não encurtava o banner. Posicionada em
     absoluto, a foto preenche a altura que a coluna de texto definir. */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Largura TRAVADA pela proporção, e não 100% do painel.
     O painel sangra até a borda da tela e fica muito mais largo que alto
     (1220×330 numa tela de 2500px, 3,7:1), e a foto é 880×563 (1,56:1). Com
     `cover` preenchendo tudo sobravam só os 40% de cima da foto: focinho do
     cachorro e orelhas do gato — o rosto do gato fica na metade de baixo.
     A 1,85:1 cabem os olhos do cachorro e o focinho do gato juntos. Em tela
     larga a foto termina antes da borda e o resto do painel fica no fundo do
     hero; em tela estreita o `max-width` a devolve à largura do painel e o
     `cover` passa a cortar dos lados, que é onde a foto tem sobra. */
  width: auto;
  max-width: 100%;
  aspect-ratio: 1.85;
  object-fit: cover;
  /* Enquadramento baixo: o pouco que a proporção ainda corta na vertical sai
     do alto da cabeça do cachorro, que é dispensável — o rosto do gato, na
     base da foto, não é. */
  object-position: 50% 85%;
}
/* Dissolve as bordas da mídia no fundo do hero, para o corte não virar uma
   linha dura. Era um `::before` só na esquerda; agora a foto também termina
   antes da borda da tela, numa posição que depende da largura — máscara na
   própria imagem acompanha isso, um pseudo-elemento não. */
.pet-hero__foto,
.pet-hero__grafico {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 90%, transparent);
}
/* Sem foto licenciada, o painel é gráfico: a marca sobre o gradiente da
   paleta. Ver comentário em front-page.php. */
.pet-hero__grafico {
  width: 100%;
  min-height: 330px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(77, 168, 90, .13), transparent 55%),
    radial-gradient(circle at 72% 68%, rgba(24, 50, 72, .10), transparent 55%),
    linear-gradient(135deg, #F3F8F2, #EAF3EC);
}

/* --- seções --------------------------------------------------------------- */
.pet-secao {
  width: min(calc(100% - 48px), var(--pet-content-width));
  margin-inline: auto;
  padding: 44px 0 10px;
}
.pet-secao--conteudo { padding-top: 40px; padding-bottom: 56px; }
.pet-secao--faixa { padding-bottom: 40px; }

.pet-secao__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.pet-secao__head h2 {
  margin: 0;
  font-family: var(--pet-font-heading);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pet-forest-soft);
}

/* --- categorias ----------------------------------------------------------- */
.pet-categorias {
  display: grid;
  /* auto-fit e não `repeat(4, …)`: a referência desenhou 4 categorias
     fictícias, este site tem 5 reais, e o número muda no dia em que alguém
     criar a sexta. Com 200px de mínimo, as 5 cabem numa linha em 1280px
     (5×200 + 4×18 = 1072) e o grid se reorganiza sozinho abaixo disso. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.pet-categoria {
  position: relative;
  /* Altura menor e uniforme. A descrição agora é de uma linha (front-page),
     então o card não precisa de espaço para três. */
  min-height: 132px;
  display: flex;
  flex-direction: column;
  padding: 18px 52px 16px 20px;
  border: 1px solid rgba(36, 93, 54, .09);
  border-radius: var(--pet-radius-card);
  box-shadow: var(--pet-shadow-sm);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pet-categoria:hover {
  transform: translateY(-3px);
  box-shadow: var(--pet-shadow);
  border-color: rgba(77, 168, 90, .24);
}
.pet-categoria__icone { display: block; width: 34px; height: 34px; color: var(--pet-moss); }
.pet-categoria__icone svg { width: 100%; height: 100%; }
.pet-categoria h3 {
  margin: 10px 0 3px;
  font-family: var(--pet-font-heading);
  font-size: 19px;
  line-height: 1.15;

  color: var(--pet-forest-soft);
}
.pet-categoria p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--pet-text-muted);
}
.pet-categoria .pet-seta { position: absolute; right: 15px; bottom: 15px; width: 32px; height: 32px; font-size: 15px; }
.pet-categoria:hover .pet-seta {
  background: var(--pet-clay);
  border-color: var(--pet-clay);
  color: var(--pet-white);
}

/* Alinha a descrição entre cards de nome curto ("Gatos") e longo ("Casa e
   Tecnologia Pet") reservando duas linhas ao título. Só vale enquanto os
   cards dividem uma fileira — em coluna única não há o que alinhar, e a
   reserva viraria um vão vazio. */
@media (min-width: 651px) {
  .pet-categoria h3 { min-height: 2.3em; }
}

/* --- grid de conteúdo ----------------------------------------------------- */
.pet-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 26px;
  align-items: start;
}
.pet-artigos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.pet-artigo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  box-shadow: 0 7px 25px rgba(19, 47, 66, .04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pet-artigo:hover { transform: translateY(-3px); box-shadow: var(--pet-shadow); }

.pet-artigo__img {
  display: block;
  aspect-ratio: 1.55 / 1;
  overflow: hidden;
}

/* Sem foto real, o painel encolhe: 1.55/1 de área vazia é altura gasta sem
   informação nenhuma, e no mobile empurra o texto do card para baixo da
   dobra. Com `:has()` a regra se desfaz sozinha no dia em que o post ganhar
   imagem destacada — nada a lembrar de reverter. */
.pet-artigo__img:has(.pet-thumb__vazio) { aspect-ratio: 3 / 1; }
.pet-artigo__img .pet-thumb__img,
.pet-artigo__img .pet-thumb__vazio {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.pet-artigo:hover .pet-artigo__img .pet-thumb__img { transform: scale(1.025); }

/* Painel do card sem imagem destacada: o ícone da categoria sobre o tom
   dela. Ver pet_thumb() em functions.php — hoje é o caminho normal, não a
   exceção, porque a biblioteca de mídia está vazia. */
.pet-thumb__vazio {
  display: grid;
  place-items: center;
  color: var(--pet-moss);
  background: linear-gradient(135deg, #F1FAEF, #E9F4EC);
}
.pet-thumb__vazio svg { opacity: .75; }
.pet-thumb__vazio.pet-tom--gatos { background: linear-gradient(135deg, #F2FAF4, #E8F3EC); }
.pet-thumb__vazio.pet-tom--higiene-e-cuidados { background: linear-gradient(135deg, #FFF9EF, #FBF0DF); }
.pet-thumb__vazio.pet-tom--passeio-e-viagem { background: linear-gradient(135deg, #EFF6FA, #E4EFF5); }
.pet-thumb__vazio.pet-tom--casa-e-tecnologia-pet { background: linear-gradient(135deg, #F4F3FA, #E9E8F3); }

.pet-artigo__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 250px;
  padding: 18px 18px 15px;
}
.pet-artigo__cat {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pet-moss);
  text-decoration: none;
}
.pet-artigo__cat:hover { text-decoration: underline; }
.pet-artigo__corpo h3 {
  margin: 9px 0 8px;
  font-family: var(--pet-font-heading);
  font-size: 20px;
  line-height: 1.15;
  color: var(--pet-forest-soft);
}
.pet-artigo__corpo h3 a { color: inherit; text-decoration: none; }
.pet-artigo__corpo h3 a:hover { color: var(--pet-moss); }
.pet-artigo__corpo > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #587080;
}
.pet-artigo__meta {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pet-artigo__meta time { font-size: 12px; color: var(--pet-text-soft); }
.pet-artigo:hover .pet-seta {
  background: var(--pet-clay);
  border-color: var(--pet-clay);
  color: var(--pet-white);
}

.pet-vazio {
  max-width: 620px;
  margin: 0;
  padding: 22px 24px;
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-left: 3px solid var(--pet-clay);
  border-radius: var(--pet-radius-card);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pet-text-muted);
}

/* --- coluna de recentes --------------------------------------------------- */
.pet-recentes {
  padding: 17px 18px;
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  box-shadow: 0 7px 25px rgba(19, 47, 66, .035);
}
.pet-recentes__head { margin-bottom: 10px; }
.pet-recentes__head h2 {
  margin: 0;
  font-family: var(--pet-font-heading);
  font-size: 26px;
  line-height: 1.1;
  color: var(--pet-forest-soft);
}
.pet-recente {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  text-decoration: none;
}
.pet-recente + .pet-recente { border-top: 1px solid var(--pet-border-soft); }
.pet-recente__img {
  display: block;
  width: 68px;
  height: 54px;
  overflow: hidden;
  border-radius: 8px;
}
.pet-recente__img .pet-thumb__img,
.pet-recente__img .pet-thumb__vazio { width: 100%; height: 100%; object-fit: cover; }
.pet-recente__img .pet-thumb__vazio svg { width: 26px; height: 26px; }
.pet-recente__texto strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pet-forest-soft);
}
.pet-recente:hover .pet-recente__texto strong { color: var(--pet-moss); }
.pet-recente__texto time {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--pet-text-soft);
}

/* --- faixa editorial ------------------------------------------------------ */
.pet-faixa {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 34px;
  min-height: 180px;
  padding-right: 30px;
  overflow: hidden;
  background: linear-gradient(90deg, #EDF7E8, #FBFDF8);
  border: 1px solid #E2ECDF;
  border-radius: 15px;
}
.pet-faixa__grafico {
  align-self: stretch;
  display: grid;
  place-items: center;
  color: var(--pet-moss);
  background: linear-gradient(135deg, #E4F2E2, #D7EAD9);
}
.pet-faixa__grafico svg { opacity: .8; }
.pet-faixa__texto { padding: 24px 0; }
.pet-faixa__texto h2 {
  margin: 0;
  font-family: var(--pet-font-heading);
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--pet-forest-soft);
}
.pet-faixa__texto > p:last-child {
  max-width: 480px;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #486574;
}

.pet-btn {
  display: inline-block;
  padding: 13px 26px;
  background: var(--pet-clay);
  border-radius: var(--pet-radius-btn);
  color: var(--pet-white);
  font-family: var(--pet-font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease;
}
.pet-btn:hover { background: var(--pet-clay-dark); color: var(--pet-white); }

/* --- rodapé --------------------------------------------------------------- */
.pet-footer { background: var(--pet-white); border-top: 1px solid var(--pet-border); }
.pet-footer__grid {
  width: min(calc(100% - 48px), var(--pet-content-width));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.45fr .7fr .8fr 1fr;
  gap: 60px;
  padding: 36px 0 34px;
}
.pet-footer__marca .pet-marca__img--footer { width: 230px; }
.pet-footer__marca p {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pet-text-muted);
}
.pet-footer__col h2 {
  margin: 0 0 10px;
  font-family: var(--pet-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--pet-forest-soft);
}
.pet-footer__col a {
  display: block;
  margin: 6px 0;
  font-size: 13px;
  color: var(--pet-text-muted);
  text-decoration: none;
}
.pet-footer__col a:hover { color: var(--pet-moss); }
.pet-footer__citacao {
  position: relative;
  margin: 0;
  padding-left: 40px;
  font-family: var(--pet-font-heading);
  font-size: 19px;
  line-height: 1.25;
  color: #547087;
}
.pet-footer__citacao > span {
  position: absolute;
  left: 0;
  top: -12px;
  font-size: 55px;
  color: #6C8496;
}
.pet-footer__base {
  width: min(calc(100% - 48px), var(--pet-content-width));
  margin-inline: auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--pet-border);
  font-size: 11.5px;
  color: var(--pet-text-soft);
}
/* A linha de divulgação da Amazon vem por aqui (filtro generate_copyright).
   Fica legível, não escondida: o contrato pede "clara e destacada". */
.pet-footer__base .pet-copyright { color: var(--pet-text-muted); }

/* --- sidebar --------------------------------------------------------------
   Os widgets da lateral vinham com o visual padrão do WordPress/GeneratePress
   (botão cinza-escuro, títulos fora da escala) e destoavam do resto do site
   depois do redesenho. Nada de novo é criado aqui: só a aparência dos blocos
   que já estavam na sidebar. */
.widget-area .widget {
  margin-bottom: 22px;
  padding: 18px;
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  box-shadow: 0 7px 25px rgba(19, 47, 66, .035);
}
.widget-area .widget h2,
.widget-area .widget .widget-title {
  margin: 0 0 12px;
  font-family: var(--pet-font-heading);
  font-size: 20px;
  line-height: 1.15;
  color: var(--pet-forest-soft);
}
.widget-area .wp-block-search__input {
  padding: 9px 12px;
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-btn);
  background: var(--pet-white);
  font-family: var(--pet-font-body);
  color: var(--pet-text);
}
.widget-area .wp-block-search__button {
  padding: 9px 16px;
  border: 0;
  border-radius: var(--pet-radius-btn);
  background: var(--pet-clay);
  color: var(--pet-white);
  font-family: var(--pet-font-body);
  font-weight: 700;
  cursor: pointer;
}
.widget-area .wp-block-search__button:hover { background: var(--pet-clay-dark); }
.widget-area ul { margin: 0; padding: 0; list-style: none; }
.widget-area li { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.widget-area li a { color: var(--pet-text-muted); text-decoration: none; }
.widget-area li a:hover { color: var(--pet-moss); }

/* --- foco visível --------------------------------------------------------- */
.pet-header a:focus-visible,
.pet-header button:focus-visible,
.pet-header input:focus-visible,
.pet-hero a:focus-visible,
.pet-hero button:focus-visible,
.pet-hero input:focus-visible,
.pet-secao a:focus-visible,
.pet-footer a:focus-visible {
  outline: 3px solid rgba(77, 168, 90, .35);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Responsivo da home.

   Os cortes acompanham a referência (1120 / 900 / 650). Acima de 1120 o
   layout é o de desktop cheio.
   ========================================================================== */
@media (max-width: 1120px) {
  .pet-header__inner { gap: 16px; }
  .pet-marca__img { width: 215px; }
  .pet-nav { gap: 15px; font-size: 13px; }
  .pet-busca--header { width: 205px; }
  .pet-hero__inner { grid-template-columns: 53% 47%; }
  .pet-hero__texto { padding-right: 26px; }
  .pet-conteudo { grid-template-columns: minmax(0, 1fr) 285px; }
  .pet-faixa { grid-template-columns: 170px 1fr auto; gap: 24px; }
  .pet-footer__grid { gap: 32px; }
}

@media (max-width: 900px) {
  :root { --pet-gutter: 18px; }
  .pet-header__inner,
  .pet-hero__inner,
  .pet-secao,
  .pet-footer__grid,
  .pet-footer__base { width: min(calc(100% - 36px), var(--pet-content-width)); }

  .pet-header__inner {
    position: relative;
    min-height: 67px;
    grid-template-columns: 1fr auto;
  }
  .pet-busca--header { display: none; }
  .pet-menu-toggle { display: grid; }

  /* Menu vira painel sobreposto. `display:none` e não `height:0`: item de
     menu escondido por altura continua focável pelo teclado. */
  .pet-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 18px 15px;
    background: var(--pet-white);
    border: 1px solid var(--pet-border);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--pet-shadow);
  }
  .pet-nav.is-aberto { display: flex; }
  .pet-nav a { padding: 11px 2px; }
  .pet-nav a::after { display: none; }

  .pet-hero { background: var(--pet-hero-left); }
  .pet-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .pet-hero__texto { padding: 32px 0 26px; }
  /* A quebra manual do título é composição de desktop. Em coluna estreita ela
     empurrava o "o" de "para o" sozinho para uma linha — órfão clássico. */
  .pet-hero h1 br { display: none; }
  /* Empilhado, a sangria lateral vira sangria dos dois lados — senão o
     painel ficaria deslocado para a esquerda. */
  .pet-hero__painel {
    margin-inline: calc(-1 * var(--pet-gutter));
    /* Altura acompanha a largura, na mesma proporção do desktop. Com altura
       fixa (era 260px), num tablet de 800px o painel voltava a ~3:1 e o gato
       sumia de novo. */
    aspect-ratio: 1.85;
  }
  /* Empilhado, a foto ocupa o painel inteiro: a proporção já vem dele. */
  .pet-hero__foto { width: 100%; aspect-ratio: auto; }
  /* A fusão passa a ser só com o texto de cima. 28px e não os 65px de antes:
     no celular 65px já cobriam os olhos do cachorro. */
  .pet-hero__foto,
  .pet-hero__grafico {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 28px);
            mask-image: linear-gradient(180deg, transparent, #000 28px);
  }
  .pet-hero__grafico { min-height: 260px; }

  .pet-conteudo { grid-template-columns: 1fr; }
  .pet-recente { grid-template-columns: 92px 1fr; }
  .pet-recente__img { width: 92px; height: 68px; }
  .pet-recente__texto strong { font-size: 14px; }

  .pet-faixa { grid-template-columns: 150px 1fr; padding: 0 24px 24px 0; }
  .pet-faixa__acao { grid-column: 2; padding-bottom: 4px; }

  .pet-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
  .pet-footer__citacao { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  :root { --pet-gutter: 14px; }
  .pet-header__inner,
  .pet-hero__inner,
  .pet-secao,
  .pet-footer__grid,
  .pet-footer__base { width: min(calc(100% - 28px), var(--pet-content-width)); }

  .pet-marca__img { width: 190px; }
  .pet-hero__texto { padding-top: 32px; }
  /* 8.2vw e não 10vw: a 390px o título de 39px deixava "pet." sozinho numa
     terceira linha. A 32px cabe em duas. */
  .pet-hero h1 { font-size: clamp(27px, 8.2vw, 40px); }
  .pet-hero__lead { font-size: 16px; }

  /* Busca do hero empilha: campo em cima, botão embaixo, ambos com alvo de
     toque de 48px+. Lado a lado, o campo ficaria estreito demais para ler o
     que se digitou. */
  .pet-busca--hero {
    height: auto;
    display: grid;
    grid-template-columns: 42px 1fr;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .pet-busca--hero .pet-busca__icone {
    grid-area: 1 / 1;
    align-self: center;
    z-index: 1;
    margin-left: 14px;
  }
  .pet-busca--hero input {
    grid-area: 1 / 1 / 2 / -1;
    min-height: 52px;
    padding-left: 46px;
    background: var(--pet-white);
    border: 1px solid #DFE3DF;
    border-radius: 10px;
  }
  .pet-busca--hero button {
    grid-column: 1 / -1;
    min-height: 50px;
    margin-top: 9px;
    border-radius: 10px;
  }

  .pet-confianca { gap: 10px 18px; font-size: 12px; }
  .pet-hero__grafico { min-height: 215px; }

  .pet-secao { padding-top: 26px; }
  .pet-secao__head { align-items: center; }
  .pet-secao__head h2 { font-size: 26px; }
  .pet-categorias { grid-template-columns: 1fr; gap: 12px; }
  .pet-categoria { min-height: 0; padding-bottom: 22px; }
  .pet-artigos { grid-template-columns: 1fr; gap: 14px; }
  .pet-artigo__corpo { min-height: 0; }

  .pet-faixa { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .pet-faixa__grafico { min-height: 130px; }
  .pet-faixa__texto { padding: 22px 20px 0; }
  .pet-faixa__texto h2 { font-size: 25px; }
  .pet-faixa__acao { grid-column: 1; padding: 16px 20px 24px; }
  .pet-btn { display: block; text-align: center; }

  .pet-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .pet-footer__marca { grid-column: 1 / -1; }
  .pet-footer__base {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 14px 0;
  }
}

/* ==========================================================================
   FICHA DE PRODUTO — mockup aprovado (design/Ficha.dc.html)
   ========================================================================== */

.pet-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--pet-text-soft);
  margin-bottom: 26px;
}

.pet-breadcrumb a { color: var(--pet-text-soft); text-decoration: none; }
.pet-breadcrumb a:hover { color: var(--pet-clay-dark); }
.pet-breadcrumb span[aria-hidden] { color: var(--pet-border-strong); }

/* Trilha do Rank Math em post e página (pet_breadcrumbs, functions.php).
   Mesmo desenho da trilha da ficha acima, que é a do mockup aprovado — as
   duas precisam parecer a mesma peça. O markup é do plugin: <nav> > <p> com
   <a>, <span class="separator"> e <span class="last">. */
.pet-trilha .rank-math-breadcrumb p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--pet-text-soft);
}
.pet-trilha a { color: var(--pet-text-soft); text-decoration: none; }
.pet-trilha a:hover { color: var(--pet-clay-dark); }
.pet-trilha .separator { color: var(--pet-border-strong); }

.pet-ficha__layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.pet-ficha__aside { display: flex; flex-direction: column; gap: 18px; }

.pet-ficha__compra {
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  overflow: hidden;
}

.pet-ficha__imagem {
  background: var(--pet-sand-card);
  height: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid var(--pet-border);
}

.pet-ficha__imagem span {
  font-size: 12.5px;
  color: var(--pet-ink-faint);
  text-align: center;
  line-height: 1.5;
  max-width: 200px;
}

.pet-ficha__cta { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
/* O shortcode devolve <a> ou <div>; ambos ocupam a largura do cartão aqui. */
.pet-ficha__cta .pet-affiliate-slot { display: block; width: 100%; margin: 0; text-align: center; }
.pet-ficha__cta p { font-size: 12.5px; line-height: 1.55; color: var(--pet-ink-faint); text-align: center; margin: 0; }

.pet-ficha__tecnica {
  background: var(--pet-white);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  padding: 22px;
}

.pet-ficha__rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pet-text-soft);
  margin: 0 0 4px;
}

.pet-ficha__tecnica dl { margin: 0; }

.pet-ficha__tecnica dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  border-top: 1px solid var(--pet-border-soft);
  padding: 11px 0;
}

.pet-ficha__tecnica dt { color: var(--pet-text-soft); margin: 0; flex: 0 0 auto; }
.pet-ficha__tecnica dd { color: var(--pet-text); font-weight: 600; text-align: right; margin: 0; }

.pet-ficha__verificado {
  display: flex;
  gap: 11px;
  background: var(--pet-sand-card);
  border-radius: 10px;
  padding: 16px 18px;
}

.pet-ficha__verificado svg { flex: 0 0 auto; margin-top: 1px; }
.pet-ficha__verificado p { font-size: 13px; line-height: 1.6; color: var(--pet-text-soft); margin: 0; }
.pet-ficha__verificado strong { color: var(--pet-text); }

.pet-ficha__corpo .entry-title { font-size: 44px; line-height: 1.1; margin: 12px 0 0; }
.pet-ficha__corpo .entry-content { max-width: none; margin-top: 30px; }

.pet-ficha__nota { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.pet-ficha__nota .pet-score--inline { padding: 11px 20px; border-radius: 10px; gap: 12px; }
.pet-ficha__nota .pet-score--inline b { font-size: 26px; }
.pet-ficha__nota .pet-score--inline small { margin-top: 0; text-align: left; line-height: 1.3; }
.pet-ficha__nota p { font-size: 15.5px; line-height: 1.6; color: var(--pet-text-muted); max-width: 380px; margin: 0; }

@media (max-width: 900px) {
  .pet-ficha__layout { grid-template-columns: 1fr; gap: 32px; }
  .pet-ficha__corpo .entry-title { font-size: 32px; }
}

/* --- links internos (Fase 10) --------------------------------------------
   Renderizado por [pet_relacionados], que só lista alvo já publicado. Some
   inteiro quando nenhum está no ar — nunca uma seção vazia na página. */
.pet-relacionados {
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-card);
  background: var(--pet-white);
  padding: 24px 26px;
  margin: 40px 0 28px;
}

.pet-relacionados__titulo {
  font-family: var(--pet-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--pet-forest);
  margin: 0 0 14px;
}

.pet-relacionados ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.pet-relacionados li { margin: 0; }

.pet-relacionados a {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--pet-forest);
  text-decoration: none;
  line-height: 1.45;
}

/* A seta é conteúdo gerado por CSS de propósito: não vira texto no copiar,
   nem é lida em voz alta por leitor de tela. */
.pet-relacionados a::before { content: "→"; color: var(--pet-clay); flex: 0 0 auto; }
.pet-relacionados a:hover { color: var(--pet-clay-dark); }

/* --- tabela PAREADA da Comparação (Fase 2.2) ------------------------------
   Herda .pet-decision e muda o eixo: ali a linha é um produto, aqui a linha é
   um CRITÉRIO. É a leitura pareada que faz a comparação valer. */
.pet-compare th[scope="col"] {
  font-family: var(--pet-font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--pet-forest);
  line-height: 1.3;
  vertical-align: bottom;
  width: auto;
}

.pet-compare th[scope="col"] small {
  display: block;
  font-family: var(--pet-font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--pet-text-soft);
  margin-top: 3px;
}

/* A coluna da escolha padrão fica marcada — o leitor sabe qual lado o texto
   defende antes de ler o veredito. */
.pet-compare th[scope="col"].is-pick {
  background: var(--pet-forest);
  color: var(--pet-sand);
  border-radius: 8px 8px 0 0;
}
.pet-compare th[scope="col"].is-pick small { color: var(--pet-footer-muted); }

.pet-compare th[scope="row"] {
  background: var(--pet-sand-card);
  border-bottom: 1px solid var(--pet-border-soft);
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
}

.pet-compare td { vertical-align: top; font-size: 14.5px; line-height: 1.55; }

/* A linha do "para quem NÃO é" é o fecho da tabela e a que mais importa —
   marcada em tijolo pelo mesmo motivo dos cartões da Lista. */
.pet-compare tr.is-unfit th[scope="row"] { color: var(--pet-negative); }
.pet-compare tr.is-unfit td { color: var(--pet-text); background: #FDF6F3; }

@media (max-width: 720px) { .pet-compare table { min-width: 700px; } }


/* Divulgação de afiliado no topo do post — a frase que o contrato da Amazon
   exige "perto de qualquer link", e não só no rodapé. Discreta de propósito:
   é aviso obrigatório, não chamada editorial, e não deve competir com o
   primeiro parágrafo. */
.pet-divulgacao-topo {
	margin: 0 0 1.6rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--pet-border);
	font-size: .82rem;
	line-height: 1.5;
	color: var(--pet-text-muted);
}

.pet-copyright {
	font-size: .82rem;
	line-height: 1.55;
	color: var(--pet-footer-muted);
}