/* ==========================================================================
   Focinhoso — tema WordPress
   Seções 1 a 10: CSS do design (design/focinhoso-site/assets/css/style.css),
   sem alterações. Seção 0: fontes locais. Seção 11: blocos do WordPress.
   ========================================================================== */

/* ---------- 0. Fontes (hospedadas no tema, licença OFL em assets/fonts) ---------- */
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/comfortaa-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); }

/* ==========================================================================
   Focinhoso — folha de estilo
   Mobile-first. Cores e fontes em variáveis. Sem framework.
   Estrutura pensada para virar tema WordPress (header.php / footer.php /
   index.php / category.php / single.php / page.php).
   ========================================================================== */

/* ---------- 1. Variáveis (tokens) ---------- */
:root {
  /* Cores da marca */
  --verde-agua: #DDEFEC;          /* fundo principal */
  --verde-agua-claro: #EEF7F5;    /* superfícies suaves */
  --verde-agua-linha: #BFDDD7;    /* bordas sobre verde-água */
  --caramelo: #D9822B;            /* botões, selos, áreas grandes (texto escuro por cima) */
  --caramelo-claro: #F7E2CB;      /* fundo de caixas de dica */
  --caramelo-escuro: #8F4C10;     /* links e textos em destaque (AA sobre verde-água, creme e branco) */
  --grafite: #2E3440;             /* traço do logo: títulos, linhas fortes */
  --creme: #F4E7D6;               /* fundo do logo creme: rodapé, faixas alternadas */
  --creme-claro: #FBF1E4;         /* fundo do ícone em círculo: placeholders de imagem */
  --branco: #FFFFFF;              /* fundo do logo branco: cabeçalho e cards */

  /* Neutros quentes para texto */
  --texto: #3B2A1F;               /* marrom escuro quente: texto corrido */
  --texto-suave: #6B5848;         /* metadados, legendas (AA em todos os fundos) */
  --texto-sobre-caramelo: #2B1D12;

  /* Tipografia */
  --fonte-marca: "Comfortaa", "Nunito", system-ui, sans-serif;
  --fonte-texto: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px — leitura confortável no celular */
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;

  /* Espaço, raio, sombra */
  --gutter: 1rem;
  --largura: 72rem;
  --largura-texto: 42rem;
  --raio: 14px;
  --raio-sm: 8px;
  --raio-pilula: 999px;
  --sombra: 0 1px 2px rgba(46, 52, 64, .06), 0 6px 18px rgba(46, 52, 64, .07);

  color-scheme: light;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 1.5rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.875rem;
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--verde-agua);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--fs-base);
  line-height: 1.65;
}

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

h1, h2, h3, h4 {
  color: var(--grafite);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

h1, h2, .titulo-marca { font-family: var(--fonte-marca); font-weight: 700; letter-spacing: -0.01em; }
h3, h4 { font-family: var(--fonte-texto); font-weight: 800; }

p { margin: 0; }

a { color: var(--caramelo-escuro); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--grafite); }

:focus-visible { outline: 3px solid var(--grafite); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pular-link {
  position: absolute; left: var(--gutter); top: -3rem; z-index: 50;
  background: var(--grafite); color: var(--branco); padding: .5rem 1rem; border-radius: var(--raio-sm);
}
.pular-link:focus { top: .5rem; color: var(--branco); }

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

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.container-texto { max-width: calc(var(--largura-texto) + 2 * var(--gutter)); }

.secao { padding-block: 2.5rem; }
.secao--creme { background: var(--creme); }
.secao--branca { background: var(--branco); }

.secao__topo { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.secao__titulo { font-size: var(--fs-xl); }
.secao__desc { color: var(--texto-suave); margin-top: .25rem; }
.secao__link { font-weight: 700; white-space: nowrap; }

@media (min-width: 48rem) {
  .secao { padding-block: 3.5rem; }
  .secao__titulo { font-size: var(--fs-2xl); }
}

.grade { display: grid; gap: 1rem; }
@media (min-width: 36rem) { .grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade { gap: 1.5rem; }
}

/* ---------- 4. Cabeçalho ---------- */
.cabecalho {
  background: var(--branco);
  border-bottom: 1px solid var(--verde-agua-linha);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
}
.cabecalho__barra { display: flex; align-items: center; gap: .75rem; min-height: 4rem; }

.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--grafite); }
.logo img { width: 4.25rem; height: auto; }
.logo__nome { font-family: var(--fonte-marca); font-weight: 700; font-size: 1.5rem; line-height: 1; padding-top: .55rem; letter-spacing: 0; }
.logo:hover { color: var(--grafite); }

.cabecalho__acoes { margin-left: auto; display: flex; align-items: center; gap: .25rem; }

.botao-icone {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; background: transparent; color: var(--grafite); border-radius: var(--raio-pilula); cursor: pointer;
}
.botao-icone:hover { background: var(--verde-agua-claro); }
.botao-icone svg { width: 1.4rem; height: 1.4rem; }

/* Busca: no celular abre abaixo da barra; no desktop fica sempre visível */
.busca { display: none; padding-bottom: .75rem; }
.busca.aberta { display: block; }
.busca__campo { display: flex; align-items: center; background: var(--verde-agua-claro); border: 1.5px solid var(--verde-agua-linha); border-radius: var(--raio-pilula); padding-inline: 1rem .25rem; }
.busca__campo:focus-within { border-color: var(--grafite); }
.busca input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--texto); padding-block: .6rem; outline: none; }
.busca input::placeholder { color: var(--texto-suave); }
.busca button { border: 0; background: var(--caramelo); color: var(--texto-sobre-caramelo); font: inherit; font-weight: 800; font-size: var(--fs-sm); border-radius: var(--raio-pilula); padding: .45rem .9rem; cursor: pointer; }

/* Menu */
.menu { display: none; border-top: 1px solid var(--verde-agua-linha); }
.menu.aberto { display: block; }
.menu ul { list-style: none; margin: 0; padding: .5rem 0 1rem; display: grid; }
.menu a { display: block; padding: .7rem 0; font-weight: 800; text-decoration: none; color: var(--grafite); border-bottom: 1px solid var(--verde-agua-claro); }
.menu a[aria-current="page"] { color: var(--caramelo-escuro); }

@media (min-width: 60rem) {
  .cabecalho__barra { min-height: 5rem; gap: 1.5rem; }
  .logo img { width: 5.25rem; }
  .logo__nome { font-size: 1.75rem; }
  .botao-menu, .botao-busca { display: none; }
  .busca { display: block; padding: 0; width: 15rem; }
  .menu { display: block !important; border-top: 1px solid var(--verde-agua-linha); }
  .menu ul { display: flex; gap: 2rem; padding: 0; }
  .menu a { border: 0; padding: .85rem 0; position: relative; }
  .menu a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--caramelo); }
}

/* ---------- 5. Botões, chips, selos ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: .6rem 1.15rem; border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto); font-weight: 800; font-size: var(--fs-sm); line-height: 1.2;
  text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.botao:hover { transform: translateY(-1px); }
.botao--primario { background: var(--caramelo); color: var(--texto-sobre-caramelo); }
.botao--primario:hover { background: #E3934A; color: var(--texto-sobre-caramelo); }
.botao--secundario { background: var(--branco); color: var(--grafite); border-color: var(--grafite); }
.botao--secundario:hover { background: var(--verde-agua-claro); color: var(--grafite); }
.botao svg { width: 1rem; height: 1rem; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; padding: 0; margin: 0; }
.chip { display: inline-block; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; color: var(--grafite); background: var(--verde-agua-claro); border: 1px solid var(--verde-agua-linha); padding: .25rem .6rem; border-radius: var(--raio-pilula); }

.selo {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  background: var(--caramelo); color: var(--texto-sobre-caramelo); padding: .3rem .65rem; border-radius: var(--raio-pilula);
}
.selo svg { width: .85rem; height: .85rem; }
.selo--grafite { background: var(--grafite); color: var(--branco); }
.selo--claro { background: var(--branco); color: var(--grafite); border: 1px solid var(--grafite); }

.rotulo { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--caramelo-escuro); }

/* ---------- 6. Cards ---------- */
.card { position: relative; background: var(--branco); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra); min-width: 0; }
.card__imagem { background: var(--creme-claro); aspect-ratio: 16 / 9; display: grid; place-items: center; position: relative; max-width: 100%; }
.card__imagem img { width: 30%; }
@media (min-width: 36rem) { .card__imagem { aspect-ratio: 4 / 3; } .card__imagem img { width: 46%; } }
.card__imagem .selo { position: absolute; top: .75rem; left: .75rem; }
.card__corpo { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card__titulo { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.card__titulo a { color: var(--grafite); text-decoration: none; }
.card__titulo a:hover { text-decoration: underline; }
.card__texto { color: var(--texto-suave); font-size: var(--fs-sm); line-height: 1.55; }
.card__meta { font-size: var(--fs-xs); color: var(--texto-suave); font-weight: 600; }

/* Vitrine com rolagem lateral no celular (mais vendidos) */
@media (max-width: 35.99rem) {
  .vitrine { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem var(--gutter) 1rem; margin-inline: calc(var(--gutter) * -1); scrollbar-width: thin; }
  .vitrine > * { scroll-snap-align: start; }
}

/* Card de produto */
.produto .card__corpo { gap: .7rem; }
.produto__lojas { display: grid; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.produto__lojas .botao { width: 100%; }
.produto__nota { font-size: var(--fs-xs); color: var(--texto-suave); }

/* Card de guia por ocasião */
.ocasiao { background: var(--branco); border-radius: var(--raio); padding: 1.1rem; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); transition: transform .15s ease; }
.ocasiao:hover { transform: translateY(-2px); color: var(--texto); }
.ocasiao__ilu { background: var(--creme-claro); border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; }
.ocasiao__ilu img { width: 70%; }
.ocasiao h3 { font-size: 1.0625rem; }
.ocasiao p { font-size: var(--fs-sm); color: var(--texto-suave); line-height: 1.5; margin-top: .2rem; }

/* Item de lista editorial (horizontal) */
.post-linha { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--verde-agua-linha); }
.post-linha:last-child { border-bottom: 0; }
.post-linha__ilu { background: var(--creme-claro); border-radius: var(--raio-sm); aspect-ratio: 1; display: grid; place-items: center; }
.post-linha__ilu img { width: 66%; }
.post-linha h3 { font-size: 1.0625rem; line-height: 1.3; }
.post-linha h3 a { color: var(--grafite); text-decoration: none; }
.post-linha h3 a:hover { text-decoration: underline; }
.post-linha p { font-size: var(--fs-sm); color: var(--texto-suave); margin-top: .25rem; line-height: 1.5; }

/* ---------- 7. Home ---------- */
.abertura { padding-block: 2.25rem 2.5rem; }
.abertura__grade { display: grid; gap: 1.75rem; }
.abertura h1 { font-size: var(--fs-3xl); }
.abertura h1 em { font-style: normal; color: var(--caramelo-escuro); }
.abertura__texto { font-size: 1.125rem; margin-top: .9rem; max-width: 34rem; }
.abertura__busca { margin-top: 1.25rem; display: block; max-width: 30rem; }
.abertura__busca .busca__campo { background: var(--branco); padding-block: .2rem; }

.portas { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.porta { position: relative; background: var(--branco); border-radius: var(--raio); padding: 1rem; text-decoration: none; color: var(--grafite); display: grid; gap: .5rem; box-shadow: var(--sombra); transition: transform .15s ease; }
.porta:hover { transform: translateY(-2px); color: var(--grafite); }
.porta__ilu { background: var(--creme-claro); border-radius: var(--raio-sm); aspect-ratio: 5 / 4; display: grid; place-items: center; overflow: hidden; }
.porta__ilu img { width: 82%; }
.porta strong { font-family: var(--fonte-marca); font-size: 1.375rem; }
.porta span { font-size: var(--fs-sm); color: var(--texto-suave); line-height: 1.4; }
.porta--wide { grid-column: 1 / -1; grid-template-columns: 1fr; }

.atalhos { position: relative; display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; list-style: none; margin: 0; padding-left: 0; }
.atalhos a { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; background: var(--branco); border: 1.5px solid var(--verde-agua-linha); border-radius: var(--raio-pilula); padding: .45rem .9rem .45rem .5rem; font-weight: 800; font-size: var(--fs-sm); color: var(--grafite); text-decoration: none; }
.atalhos a:hover { border-color: var(--grafite); }
.atalhos img { width: 1.9rem; height: 1.9rem; background: var(--creme-claro); border-radius: 50%; padding: .15rem; }

@media (min-width: 60rem) {
  .abertura { padding-block: 3.5rem 4rem; }
  .abertura__grade { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; }
}

.faixa-instagram { background: var(--grafite); color: var(--branco); border-radius: var(--raio); padding: 1.5rem; display: grid; gap: 1rem; align-items: center; }
.faixa-instagram h2 { color: var(--branco); font-size: var(--fs-xl); }
.faixa-instagram p { color: #E6E9EE; }
@media (min-width: 48rem) { .faixa-instagram { grid-template-columns: 1fr auto; padding: 2rem 2.25rem; } }

/* ---------- 8. Categoria ---------- */
.migalhas { font-size: var(--fs-sm); color: var(--texto-suave); padding-top: 1.25rem; }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.migalhas li + li::before { content: "›"; margin-right: .35rem; color: var(--texto-suave); }
.migalhas a { color: var(--texto-suave); }
.migalhas [aria-current] { color: var(--texto); font-weight: 700; }

.topo-categoria { padding-block: 1rem 1.75rem; display: grid; gap: 1rem; }
.topo-categoria h1 { font-size: var(--fs-3xl); }
.topo-categoria p { max-width: var(--largura-texto); }
.topo-categoria__ilu { display: none; }
@media (min-width: 48rem) {
  .topo-categoria { grid-template-columns: 1fr auto; align-items: center; }
  .topo-categoria__ilu { display: grid; place-items: center; width: 9rem; aspect-ratio: 1; border-radius: 50%; background: var(--creme-claro); }
  .topo-categoria__ilu img { width: 66%; }
}

.filtros { position: relative; display: flex; gap: .5rem; overflow-x: auto; list-style: none; padding: 0 0 .5rem; margin: 0 0 1.5rem; }
.filtros a { display: inline-block; white-space: nowrap; padding: .45rem .95rem; border-radius: var(--raio-pilula); background: var(--branco); color: var(--grafite); font-weight: 800; font-size: var(--fs-sm); text-decoration: none; border: 1.5px solid var(--verde-agua-linha); }
.filtros a:hover { border-color: var(--grafite); }
.filtros a[aria-current="page"] { background: var(--grafite); color: var(--branco); border-color: var(--grafite); }

.paginacao { display: flex; justify-content: center; gap: .4rem; margin-top: 2rem; list-style: none; padding: 0; }
.paginacao a, .paginacao span { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: .75rem; border-radius: var(--raio-pilula); background: var(--branco); color: var(--grafite); font-weight: 800; text-decoration: none; }
.paginacao [aria-current] { background: var(--grafite); color: var(--branco); }

/* ---------- 9. Post (guia, comparativo, artigo) ---------- */
.post__topo { padding-block: 1rem 1.5rem; }
.post__topo h1 { font-size: var(--fs-2xl); margin-top: .5rem; }
.post__linha-fina { font-size: 1.125rem; margin-top: .75rem; color: var(--texto); }
.post__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .9rem; font-size: var(--fs-sm); color: var(--texto-suave); }

.aviso-afiliado { font-size: var(--fs-xs); color: var(--texto-suave); border-top: 1px solid var(--verde-agua-linha); border-bottom: 1px solid var(--verde-agua-linha); padding-block: .6rem; margin-top: 1rem; display: flex; gap: .5rem; align-items: flex-start; line-height: 1.5; }
.aviso-afiliado svg { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; color: var(--caramelo-escuro); }
.aviso-afiliado a { color: var(--texto-suave); font-weight: 700; }

.conteudo { display: flex; flex-direction: column; gap: 1.1rem; }
.conteudo > h2 { font-size: var(--fs-xl); margin-top: 1.5rem; }
.conteudo > h3 { font-size: var(--fs-lg); margin-top: .75rem; }
.conteudo > ul, .conteudo > ol, .indice ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .4rem; }
.conteudo > ul li::marker, .conteudo > ol li::marker { color: var(--caramelo-escuro); font-weight: 800; }
.conteudo strong { color: var(--grafite); }

.indice { background: var(--branco); border-radius: var(--raio); padding: 1rem 1.25rem; }
.indice summary { font-weight: 800; color: var(--grafite); cursor: pointer; }
.indice ol { margin-top: .6rem; }

/* Caixa de dica */
.dica { background: var(--caramelo-claro); border-radius: var(--raio); padding: 1.1rem 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.dica__icone { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--caramelo); display: grid; place-items: center; color: var(--texto-sobre-caramelo); }
.dica__icone svg { width: 1.3rem; height: 1.3rem; }
.dica strong:first-child { display: block; font-family: var(--fonte-marca); font-size: 1.0625rem; margin-bottom: .2rem; }
.dica p { font-size: var(--fs-sm); line-height: 1.6; }
.dica--vet { background: var(--branco); border: 1.5px solid var(--verde-agua-linha); }
.dica--vet .dica__icone { background: var(--verde-agua); color: var(--grafite); }

/* Resumo rápido: escolhas do guia */
.escolhas { display: grid; gap: .75rem; }
.escolha { background: var(--branco); border-radius: var(--raio); padding: .9rem; display: grid; grid-template-columns: 4.5rem 1fr; gap: .9rem; align-items: center; box-shadow: var(--sombra); }
.escolha__ilu { background: var(--creme-claro); border-radius: var(--raio-sm); aspect-ratio: 1; display: grid; place-items: center; }
.escolha__ilu img { width: 72%; }
.escolha strong { display: block; color: var(--grafite); line-height: 1.3; margin-top: .3rem; }
.escolha a { font-size: var(--fs-sm); font-weight: 800; }

/* Tabela comparativa responsiva */
.tabela-wrap { position: relative; background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabela caption { text-align: left; padding: 1rem 1.1rem .25rem; font-weight: 800; color: var(--grafite); }
.tabela th, .tabela td { padding: .8rem 1rem; text-align: left; vertical-align: top; }
.tabela thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); border-bottom: 2px solid var(--verde-agua-linha); }
.tabela tbody tr + tr { border-top: 1px solid var(--verde-agua-claro); }
.tabela tbody th { color: var(--grafite); font-weight: 800; }
.tabela .selo { margin-top: .35rem; white-space: nowrap; font-size: .6875rem; padding: .2rem .5rem; }
.tabela .botao { min-height: 2.5rem; padding: .45rem .8rem; font-size: var(--fs-xs); white-space: nowrap; }
.tabela__lojas { display: grid; gap: .4rem; }

/* No celular, cada linha da tabela vira um cartão empilhado */
@media (max-width: 47.99rem) {
  .tabela-wrap { background: transparent; box-shadow: none; overflow: visible; }
  .tabela caption { padding-inline: 0; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; width: 100%; }
  .tabela tbody tr { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: .4rem 0; margin-top: .75rem; }
  .tabela tbody tr + tr { border-top: 0; }
  .tabela tbody th { font-size: 1.0625rem; padding-bottom: .35rem; }
  .tabela td { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding: .45rem 1rem; }
  .tabela td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding-top: .15rem; }
  .tabela td.tabela__acoes { grid-template-columns: 1fr; padding-top: .75rem; }
  .tabela td.tabela__acoes::before { display: none; }
  .tabela .botao { min-height: 2.75rem; font-size: var(--fs-sm); }
}

/* Produto detalhado (dentro do post) */
.produto-detalhe { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; display: grid; }
.produto-detalhe__imagem { background: var(--creme-claro); aspect-ratio: 16 / 7; display: grid; place-items: center; position: relative; max-width: 100%; }
.produto-detalhe__imagem img { width: 24%; }
.produto-detalhe__imagem .selo { position: absolute; top: .9rem; left: .9rem; }
.produto-detalhe__corpo { padding: 1.15rem 1.2rem 1.35rem; display: grid; gap: .8rem; }
.produto-detalhe h3 { font-size: var(--fs-lg); }
.produto-detalhe__posicao { font-family: var(--fonte-marca); color: var(--caramelo-escuro); font-weight: 700; font-size: var(--fs-sm); }
.pros-contras { display: grid; gap: .75rem; font-size: var(--fs-sm); }
.pros-contras h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin-bottom: .3rem; }
.pros-contras ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.pros-contras li { padding-left: 1.4rem; position: relative; line-height: 1.5; }
.pros-contras .pros li::before { content: "+"; position: absolute; left: 0; font-weight: 900; color: var(--caramelo-escuro); }
.pros-contras .contras li::before { content: "–"; position: absolute; left: 0; font-weight: 900; color: var(--texto-suave); }
.produto-detalhe .produto__lojas { grid-template-columns: 1fr; }

@media (min-width: 48rem) {
  .escolhas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .escolha { grid-template-columns: 1fr; text-align: left; }
  .escolha__ilu { aspect-ratio: 16 / 10; }
  .escolha__ilu img { width: 40%; }
  .produto-detalhe { grid-template-columns: 15rem 1fr; }
  .produto-detalhe__imagem { aspect-ratio: auto; min-height: 100%; }
  .produto-detalhe__imagem img { width: 60%; }
  .pros-contras { grid-template-columns: 1fr 1fr; }
  .produto-detalhe .produto__lojas { grid-template-columns: 1fr 1fr; }
}

/* Perguntas frequentes */
.faq { display: grid; gap: .5rem; }
.faq details { background: var(--branco); border-radius: var(--raio-sm); padding: .9rem 1.1rem; }
.faq summary { font-weight: 800; color: var(--grafite); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--caramelo-escuro); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .6rem; font-size: var(--fs-sm); }

/* Destaque de citação no artigo editorial */
.destaque { font-family: var(--fonte-marca); font-size: var(--fs-lg); line-height: 1.45; color: var(--grafite); border-left: 4px solid var(--caramelo); padding: .25rem 0 .25rem 1.1rem; margin: .5rem 0; }

.ilu-artigo { background: var(--creme-claro); border-radius: var(--raio); aspect-ratio: 16 / 9; display: grid; place-items: center; max-width: 100%; }
.ilu-artigo img { width: 26%; }
.ilu-artigo + figcaption { font-size: var(--fs-xs); color: var(--texto-suave); margin-top: .4rem; }
figure { margin: 0; }

.compartilhar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--fs-sm); color: var(--texto-suave); padding-top: 1.25rem; border-top: 1px solid var(--verde-agua-linha); margin-top: 1rem; }

/* Páginas institucionais */
.pagina h1 { font-size: var(--fs-2xl); }
.pagina__corpo { background: var(--branco); border-radius: var(--raio); padding: 1.5rem 1.25rem; }
@media (min-width: 48rem) { .pagina__corpo { padding: 2.25rem 2.5rem; } }
.pagina__nota { font-size: var(--fs-xs); color: var(--texto-suave); background: var(--creme-claro); border-radius: var(--raio-sm); padding: .6rem .8rem; }

/* ---------- 10. Rodapé ---------- */
.rodape { background: var(--creme); padding-block: 2.5rem 1.5rem; margin-top: 3rem; border-top: 1px solid #E6D3BA; }
.rodape__grade { display: grid; gap: 2rem; }
.rodape .logo img { width: 4.75rem; }
.rodape__sobre { font-size: var(--fs-sm); margin-top: .9rem; max-width: 22rem; }
.rodape h2 { font-family: var(--fonte-texto); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: .6rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.rodape ul a { display: inline-block; padding-block: .35rem; color: var(--grafite); font-weight: 700; text-decoration: none; font-size: var(--fs-sm); }
.rodape ul a:hover { text-decoration: underline; }
.instagram { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--grafite); text-decoration: none; background: var(--branco); padding: .55rem 1rem .55rem .65rem; border-radius: var(--raio-pilula); margin-top: 1rem; }
.instagram svg { width: 1.35rem; height: 1.35rem; }
.instagram:hover { color: var(--grafite); background: var(--creme-claro); }
.rodape__legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #E6D3BA; font-size: var(--fs-xs); color: var(--texto-suave); display: grid; gap: .5rem; }
.rodape__legal a { color: var(--texto-suave); }

@media (min-width: 48rem) {
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* Em telas largas, a tabela comparativa ganha mais espaço que a coluna de texto */
@media (min-width: 64rem) {
  .conteudo > .tabela-wrap { margin-inline: -6rem; }
}


/* ==========================================================================
   11. WordPress: templates, blocos e plugins
   Os componentes dos posts são blocos nativos com as classes do design.
   ========================================================================== */

/* Ícones usados em pseudo-elementos (mesmos traços do design) */
:root {
  --icone-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M17 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4'/%3E%3C/svg%3E");
  --icone-dica: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1D12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
  --icone-vet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E3440' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v5a4 4 0 0 0 8 0V3M10 12v3a5 5 0 0 0 10 0v-1'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3C/svg%3E");
  --icone-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6 6.6 19.5l1.2-6L3.3 9.3l6.1-.7Z'/%3E%3C/svg%3E");
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Templates --- */
.abertura__atalhos { margin-top: 1.75rem; }
.secao--sem-topo { padding-top: 0; }
@media (min-width: 48rem) { .secao--sem-topo { padding-top: 0; } }
.secao__titulo--solto { margin-bottom: 1.25rem; }
.topo-categoria__desc { max-width: var(--largura-texto); }
.topo-categoria__desc p + p { margin-top: .5rem; }
.busca--aberta { display: block; max-width: 30rem; }
.busca--aberta .busca__campo { background: var(--branco); padding-block: .2rem; }
.vazio { background: var(--branco); border-radius: var(--raio); padding: 1.5rem 1.25rem; display: grid; gap: 1rem; }
.rodape__email { margin-top: .9rem; font-size: var(--fs-sm); }
.rodape__email a { color: var(--grafite); font-weight: 700; }
.menu .current-menu-item > a { color: var(--caramelo-escuro); }

.erro-404 { text-align: center; display: grid; gap: 1rem; justify-items: center; padding-block: 1.5rem 1rem; }
.erro-404 h1 { font-size: var(--fs-2xl); }
.erro-404__ilu { width: 8rem; aspect-ratio: 1; border-radius: 50%; background: var(--creme-claro); display: grid; place-items: center; }
.erro-404__ilu img { width: 66%; }
.erro-404 .busca--aberta { width: 100%; text-align: left; }
.atalhos--centro { justify-content: center; flex-wrap: wrap; }

/* Fotos (imagem destacada ou do produto) no lugar das ilustrações */
.card__imagem img.foto,
.post-linha__ilu--foto img,
.ocasiao__ilu--foto img { width: 100%; height: 100%; object-fit: cover; }
.card__imagem--foto, .post-linha__ilu--foto, .ocasiao__ilu--foto { overflow: hidden; }
.post__capa img { width: 100%; border-radius: var(--raio); }
.post__capa figcaption { font-size: var(--fs-xs); color: var(--texto-suave); margin-top: .4rem; }

/* Migalhas do Rank Math */
.migalhas--rank-math p { margin: 0; }
.migalhas--rank-math .separator { margin-inline: .35rem; }
.migalhas--rank-math .last { color: var(--texto); font-weight: 700; }

/* --- Conteúdo dos posts (editor de blocos) --- */
.conteudo > * { margin-block: 0; }
.conteudo > h2 { scroll-margin-top: 6rem; }
.conteudo img { border-radius: var(--raio-sm); }
.conteudo figure.wp-block-image figcaption,
.conteudo .wp-element-caption { font-size: var(--fs-xs); color: var(--texto-suave); margin-top: .4rem; }
.alignleft { float: left; margin: .25rem 1rem .5rem 0; }
.alignright { float: right; margin: .25rem 0 .5rem 1rem; }
.aligncenter { margin-inline: auto; }
.paginas-post { font-weight: 800; }

/* Botões genéricos dentro do texto */
.conteudo .wp-block-button__link,
.pagina__corpo .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: .6rem 1.15rem; border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto); font-weight: 800; font-size: var(--fs-sm); line-height: 1.2;
  text-decoration: none; text-align: center; border: 2px solid transparent;
  background: var(--caramelo); color: var(--texto-sobre-caramelo);
  transition: transform .15s ease, background-color .15s ease;
}
.conteudo .wp-block-button__link:hover { transform: translateY(-1px); background: #E3934A; color: var(--texto-sobre-caramelo); }

/* Botões por loja (card de produto, produto em detalhe, vitrine).
   A primeira loja sai em caramelo, as outras em contorno. */
.wp-block-buttons.produto__lojas { display: grid; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.produto__lojas .wp-block-button { width: 100%; margin: 0; }
.produto__lojas .wp-block-button__link {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  min-height: 2.875rem; padding: .6rem 1.15rem; border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto); font-weight: 800; font-size: var(--fs-sm); line-height: 1.2;
  text-decoration: none; text-align: center; border: 2px solid var(--grafite);
  background: var(--branco); color: var(--grafite);
  transition: transform .15s ease, background-color .15s ease;
}
.produto__lojas .wp-block-button__link:hover { transform: translateY(-1px); background: var(--verde-agua-claro); color: var(--grafite); }
.produto__lojas .wp-block-button:first-child .wp-block-button__link { background: var(--caramelo); color: var(--texto-sobre-caramelo); border-color: transparent; }
.produto__lojas .wp-block-button:first-child .wp-block-button__link:hover { background: #E3934A; }
.produto__lojas .wp-block-button__link::after,
.tabela__acoes a::after {
  content: ""; width: 1rem; height: 1rem; flex: none; background: currentColor;
  -webkit-mask: var(--icone-externo) center / contain no-repeat; mask: var(--icone-externo) center / contain no-repeat;
}

/* Componentes montados com grupos: sem margens extras do WordPress */
.card .wp-block-group, .produto-detalhe .wp-block-group, .escolhas .wp-block-group { margin: 0; }
.card figure, .produto-detalhe figure, .escolha figure { margin: 0; }
.card__corpo > *, .produto-detalhe__corpo > * { margin: 0; }
.card__imagem > figure, .produto-detalhe__imagem > figure { width: 100%; height: 100%; display: grid; place-items: center; }
.card__imagem > figure img, .produto-detalhe__imagem > figure img { border-radius: 0; }
.card__imagem > figure img[src$=".svg"] { width: 30%; }
@media (min-width: 36rem) { .card__imagem > figure img[src$=".svg"] { width: 46%; } }
.produto-detalhe__imagem > figure img[src$=".svg"] { width: 24%; }
@media (min-width: 48rem) { .produto-detalhe__imagem > figure img[src$=".svg"] { width: 60%; } }
.card__imagem > figure img:not([src$=".svg"]),
.produto-detalhe__imagem > figure img:not([src$=".svg"]) { width: 100%; height: 100%; object-fit: contain; padding: .75rem; background: var(--branco); }
.card__imagem > .selo, .produto-detalhe__imagem > .selo { z-index: 1; }

/* Selo em parágrafo (cards) e no formato "Selo" do editor (tabelas e textos) */
p.selo, span.selo { width: fit-content; }
p.selo::before {
  content: ""; width: .85rem; height: .85rem; background: currentColor;
  -webkit-mask: var(--icone-estrela) center / contain no-repeat; mask: var(--icone-estrela) center / contain no-repeat;
}
p.selo.selo--claro::before { display: none; }

/* Chips (estilo "Chips" do bloco Lista) */
ul.is-style-chips, .conteudo > ul.is-style-chips { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; padding: 0; margin: 0; }
.is-style-chips li { display: inline-block; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; color: var(--grafite); background: var(--verde-agua-claro); border: 1px solid var(--verde-agua-linha); padding: .25rem .6rem; border-radius: var(--raio-pilula); }
.is-style-chips li::marker { content: none; }

/* Destaque, nota da loja e índice */
p.is-style-destaque { font-family: var(--fonte-marca); font-size: var(--fs-lg); line-height: 1.45; color: var(--grafite); border-left: 4px solid var(--caramelo); padding: .25rem 0 .25rem 1.1rem; margin: .5rem 0; }
p.is-style-nota { font-size: var(--fs-xs); color: var(--texto-suave); }
.is-style-indice { background: var(--branco); border-radius: var(--raio); padding: 1rem 1.25rem; }
.is-style-indice summary { font-weight: 800; color: var(--grafite); cursor: pointer; }
.is-style-indice ol, .is-style-indice ul { margin: .6rem 0 0; padding-left: 1.25rem; display: grid; gap: .4rem; }

/* Caixa de dica e "fale com o veterinário" (estilos do bloco Grupo) */
.wp-block-group.is-style-dica, .wp-block-group.is-style-dica-vet {
  position: relative; background: var(--caramelo-claro); border-radius: var(--raio);
  padding: 1.1rem 1.2rem 1.1rem 4.55rem; min-height: 4.7rem;
}
.wp-block-group.is-style-dica-vet { background: var(--branco); border: 1.5px solid var(--verde-agua-linha); }
.is-style-dica::before, .is-style-dica-vet::before {
  content: ""; position: absolute; left: 1.2rem; top: 1.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--caramelo) var(--icone-dica) center / 1.3rem no-repeat;
}
.is-style-dica-vet::before { background: var(--verde-agua) var(--icone-vet) center / 1.3rem no-repeat; }
.is-style-dica > *, .is-style-dica-vet > * { margin: 0; }
.is-style-dica > * + *, .is-style-dica-vet > * + * { margin-top: .2rem; }
.is-style-dica > :first-child, .is-style-dica-vet > :first-child { font-family: var(--fonte-marca); font-weight: 700; font-size: 1.0625rem; color: var(--grafite); }
.is-style-dica p, .is-style-dica-vet p { font-size: var(--fs-sm); line-height: 1.6; }
.is-style-dica > p:first-child, .is-style-dica-vet > p:first-child { font-size: 1.0625rem; line-height: 1.4; }

/* Perguntas frequentes (blocos Detalhes dentro de um grupo .faq) */
.faq > * { margin: 0; }
.faq details > *:not(summary) { margin-top: .6rem; font-size: var(--fs-sm); }

/* Resumo rápido (escolhas) */
.escolha > figure.escolha__ilu img[src$=".svg"] { width: 72%; }
.escolha > figure.escolha__ilu img:not([src$=".svg"]) { width: 100%; height: 100%; object-fit: contain; padding: .4rem; background: var(--branco); }
.escolha > figure.escolha__ilu { overflow: hidden; }
.escolha p { margin: 0; }
.escolha p a { font-size: var(--fs-sm); font-weight: 800; }
@media (min-width: 48rem) { .escolha > figure.escolha__ilu img[src$=".svg"] { width: 40%; } }

/* Prós e contras dentro do produto em detalhe */
.pros-contras > * { margin: 0; }

/* Tabela comparativa (estilo "Tabela comparativa" do bloco Tabela) */
.wp-block-table.is-style-comparativa { position: relative; background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); overflow-x: auto; margin: 0; }
.is-style-comparativa table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); table-layout: auto; }
.is-style-comparativa th, .is-style-comparativa td { padding: .8rem 1rem; text-align: left; vertical-align: top; border: 0; }
.is-style-comparativa thead { border-bottom: 2px solid var(--verde-agua-linha); }
.is-style-comparativa thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.is-style-comparativa tbody tr + tr { border-top: 1px solid var(--verde-agua-claro); }
.is-style-comparativa .tabela__modelo { color: var(--grafite); font-weight: 800; }
.is-style-comparativa .selo { margin-top: .35rem; white-space: nowrap; font-size: .6875rem; padding: .2rem .5rem; }
.is-style-comparativa figcaption { text-align: left; padding: 0 1.1rem 1rem; font-size: var(--fs-xs); color: var(--texto-suave); }
.tabela__acoes { display: flex; flex-direction: column; gap: .4rem; }
.is-style-comparativa td.tabela__acoes { display: table-cell; }
.tabela__acoes br { display: none; }
.tabela__acoes a {
  display: flex; align-items: center; justify-content: center; gap: .4rem; margin-bottom: .4rem;
  min-height: 2.5rem; padding: .45rem .8rem; border-radius: var(--raio-pilula);
  font-weight: 800; font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; text-decoration: none;
  background: var(--branco); color: var(--grafite); border: 2px solid var(--grafite);
}
.tabela__acoes a:first-of-type { background: var(--caramelo); color: var(--texto-sobre-caramelo); border-color: transparent; }
.tabela__acoes a:hover { color: var(--grafite); background: var(--verde-agua-claro); }
.tabela__acoes a:first-of-type:hover { color: var(--texto-sobre-caramelo); background: #E3934A; }

@media (max-width: 47.99rem) {
  .wp-block-table.is-style-comparativa { background: transparent; box-shadow: none; overflow: visible; }
  .is-style-comparativa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .is-style-comparativa table, .is-style-comparativa tbody, .is-style-comparativa tr, .is-style-comparativa td, .is-style-comparativa tbody th { display: block; width: 100%; }
  .is-style-comparativa tbody tr { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: .4rem 0; margin-top: .75rem; }
  .is-style-comparativa tbody tr + tr { border-top: 0; }
  .is-style-comparativa .tabela__modelo { font-size: 1.0625rem; padding-bottom: .35rem; }
  .is-style-comparativa td[data-label] { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding: .45rem 1rem; }
  .is-style-comparativa td[data-label]::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding-top: .15rem; }
  .is-style-comparativa td.tabela__acoes { display: flex; padding-top: .75rem; }
  .tabela__acoes a { min-height: 2.75rem; font-size: var(--fs-sm); margin-bottom: 0; }
  .is-style-comparativa figcaption { padding: .5rem 0 0; }
}
@media (min-width: 64rem) {
  .conteudo > .wp-block-table.is-style-comparativa { margin-inline: -6rem; }
}


/* --- Editor de blocos: mesmo fundo e largura de leitura --- */
.editor-styles-wrapper { background: var(--verde-agua); color: var(--texto); font-family: var(--fonte-texto); }
.editor-styles-wrapper .wp-block { max-width: var(--largura-texto); }
.editor-styles-wrapper .wp-block[data-align="wide"] { max-width: 56rem; }

/* Vitrine no celular: o primeiro card respeita o recuo lateral ao encaixar a rolagem */
@media (max-width: 35.99rem) {
  .vitrine { scroll-padding-inline: var(--gutter); }
}

/* Produto em detalhe no computador: "Ver no Mercado Livre" em uma linha */
@media (min-width: 48rem) {
  .produto-detalhe .produto__lojas .wp-block-button__link { padding-inline: .75rem; white-space: nowrap; }
}

/* Busca da abertura, da 404 e da página vazia: no computador ocupa a largura dela
   (no design, a regra de 15rem do cabeçalho valia para todas as buscas) */
@media (min-width: 60rem) {
  .busca.abertura__busca, .busca.busca--aberta { width: 100%; max-width: 30rem; }
}

/* Aviso de cookies (CookieYes, versão grátis): cores e fonte do site.
   O plugin grava as cores no próprio HTML, por isso o !important. */
.cky-consent-container, .cky-preference-center, .cky-modal { font-family: var(--fonte-texto) !important; }
.cky-consent-bar, .cky-preference-center { border-color: var(--verde-agua-linha) !important; }
.cky-title, .cky-preference-title, .cky-accordion-btn { color: var(--grafite) !important; font-family: var(--fonte-texto) !important; font-weight: 800 !important; }
.cky-notice-des, .cky-notice-des *, .cky-preference-content-wrapper, .cky-preference-content-wrapper *, .cky-accordion-header-des, .cky-accordion-header-des * { color: var(--texto) !important; }
.cky-notice-des a, .cky-preference-content-wrapper a, .cky-show-desc-btn { color: var(--caramelo-escuro) !important; }
.cky-btn {
  border-radius: var(--raio-pilula) !important; font-family: var(--fonte-texto) !important; font-weight: 800 !important;
  min-height: 2.75rem; border-width: 2px !important;
}
.cky-btn-accept { background: var(--caramelo) !important; color: var(--texto-sobre-caramelo) !important; border-color: var(--caramelo) !important; }
.cky-btn-accept:hover { background: #E3934A !important; border-color: #E3934A !important; }
.cky-btn-reject, .cky-btn-customize, .cky-btn-preferences {
  background: var(--branco) !important; color: var(--grafite) !important; border-color: var(--grafite) !important;
}
.cky-btn-reject:hover, .cky-btn-customize:hover, .cky-btn-preferences:hover { background: var(--verde-agua-claro) !important; }
.cky-btn-revisit-wrapper { background: var(--grafite) !important; }
.cky-switch input[type="checkbox"]:checked { background: var(--caramelo) !important; }
.cky-btn:focus-visible { outline: 3px solid var(--grafite) !important; outline-offset: 3px !important; }