/*
Theme Name:   Lar Mais Fácil
Template:     generatepress
Description:  Tema filho do GeneratePress para o Lar Mais Fácil. A paleta vem da logo da marca (azul #004D7B + âmbar #FEB005) — ver o bloco de tokens abaixo.
Author:       Lar Mais Fácil
Version:      2.0.0
*/

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

   A paleta vem da LOGO, não de uma escolha de tema: azul #004D7B e âmbar
   #FEB005 são as duas cores da marca, medidas do arquivo (as duas cores
   dominantes saturadas de logo.png).

   Isto SUBSTITUI a regra antiga de "não parecer com os outros dois sites do
   portfólio". Aquela regra existia porque não havia marca — o cabeçalho
   deste arquivo dizia "NOME E IDENTIDADE VISUAL SÃO PLACEHOLDER". Agora há,
   e marca real vence diretriz de diferenciação.

   Assumindo a colisão de propósito: o âmbar #FEB005 daqui fica muito perto
   do âmbar #FCA413 do Leitor Esperto. Quem for mexer nisso precisa saber que
   é conhecido e aceito, não descuido.

   DOIS PARES QUE NÃO PODEM SER SEPARADOS:

   1. `--casa-ambar` é FUNDO. O texto em cima dele é `--casa-sobre-ambar`,
      nunca branco: branco sobre #FEB005 dá 1,7:1 e é ilegível. O tema antigo
      usava telha (tijolo escuro) com texto branco, e trocar só o valor da
      variável teria quebrado todo botão do site em silêncio.
   2. `--casa-ambar-texto` é o âmbar escurecido para virar TEXTO sobre fundo
      claro. Âmbar de marca como texto dá 1,9:1. São papéis diferentes e por
      isso são tokens diferentes.

   Todo par de cor deste bloco foi conferido contra WCAG AA (4,5:1). O menor
   é 4,54:1 (`--casa-footer-muted` sobre o rodapé).

   Prefixo `--casa-` mantido de propósito: renomear 97 usos em três arquivos
   para `--lmf-` não muda um pixel e só cria risco.
   ========================================================================== */
:root {
  /* Marca */
  --casa-azul:         #004D7B; /* estrutural: headings, blocos escuros, strong */
  --casa-azul-link:    #0A6699; /* links no corpo do texto */
  --casa-azul-fundo:   #003A5C; /* rodapé — o azul mais fundo */

  --casa-ambar:        #FEB005; /* CTA e acento vivo — SEMPRE como fundo ou filete */
  --casa-ambar-dark:   #E09B00; /* hover do CTA */
  --casa-ambar-texto:  #92670A; /* o âmbar quando precisa ser TEXTO sobre claro */
  --casa-sobre-ambar:  #00304D; /* o texto que vai EM CIMA do âmbar */
  --casa-ambar-claro:  #FFE0A1; /* âmbar diluído: fundo de pílula, nunca texto */

  /* Superfícies */
  --casa-fundo:        #F7F9FB; /* fundo geral do site */
  --casa-fundo-card:   #E9EFF5; /* fundo de tag/badge/callout */
  --casa-white:        #FFFFFF;

  --casa-text:         #1F2933; /* corpo de texto */
  --casa-text-muted:   #4A5764; /* texto secundário */
  --casa-text-soft:    #657181; /* metadados, legendas */
  --casa-border:       #D8E2EA; /* borda padrão de card */
  --casa-border-soft:  #E8EEF4; /* divisórias internas */

  --casa-footer-text:  #CFE0EC;
  --casa-footer-muted: #9EBDD1;
  --casa-footer-border:#10618F;

  --casa-positive:     #2A6E52; /* "para quem é" */
  --casa-negative:     #A34A3C; /* "para quem NÃO é" */

  /* Tipografia.

     Bitter (slab serif) saiu: dava um ar editorial impresso que briga com a
     logo, que é uma geométrica de terminais arredondados. Plus Jakarta Sans
     tem a mesma família de formas da marca — 'a' de dois andares, contornos
     geométricos, terminais macios — então título e logo passam a parecer o
     mesmo sistema em vez de dois.

     Inter no corpo porque é desenhada para tela em tamanho pequeno, que é
     onde este site vive: parágrafo longo de ficha técnica. */
  --casa-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --casa-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica. Existiam como número solto espalhado pelo CSS e pelo
     style= do front-page.php, o que fazia "aumentar um pouco o título" virar
     caça a hexadecimal. Agora o passo é o mesmo em todo lugar. */
  --casa-fs-hero:   clamp(38px, 5.2vw, 60px);
  --casa-fs-h2:     30px;
  --casa-fs-h3:     20px;
  --casa-fs-body:   18px;
  --casa-fs-small:  14px;
  --casa-fs-label:  12px;   /* caixa alta com tracking */

  /* Superfícies. Raio maior e sombra baixa no lugar de borda marcada: a
     borda de 1px em cada card somava um retângulo visível atrás de cada
     bloco e era o que mais deixava a página com cara de formulário. */
  --casa-radius-card: 14px;
  --casa-radius-btn:  10px;
  --casa-shadow-card: 0 1px 2px rgba(0, 48, 77, .04), 0 10px 28px -16px rgba(0, 48, 77, .18);
  --casa-shadow-hover:0 2px 4px rgba(0, 48, 77, .06), 0 18px 40px -20px rgba(0, 48, 77, .26);

  --casa-content-width: 1180px;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background: var(--casa-fundo);
  color: var(--casa-text);
  font-family: var(--casa-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(--casa-azul-link); }
a:hover, a:focus { color: var(--casa-ambar-texto); }

/* O GeneratePress sublinha todo link por padrão. Dentro do TEXTO do artigo
   isso é correto e fica — sublinhado é o sinal de link mais reconhecível
   que existe. Nos blocos montados por nós (home, cards, destaque, ficha) o
   próprio card já é o alvo de clique, e o sublinhado só suja a tipografia. */
.casa-sem-sublinhado a,
.site-content .casa-produto-cabecalho a,
.site-content .casa-veredito a,
.site-content .casa-tabela-decisao a,
.home .site-content a:not(.entry-content a) { text-decoration: none; }

.home .site-content a:hover,
.casa-sem-sublinhado a:hover { text-decoration: underline; }

h1, h2, h3, h4,
.entry-title,
.entry-title a {
  font-family: var(--casa-font-heading);
  font-weight: 700;
  color: var(--casa-azul);
  letter-spacing: -0.02em;
  /* Geométrica em peso 700 aguenta tracking negativo mais forte que o slab
     serif que estava aqui — é o que dá o aperto de título moderno sem virar
     letra colada. */
  text-wrap: balance;
}

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

/* ==========================================================================
   Header.

   Barra azul da marca. O <nav> é FILHO de .site-header no GeneratePress
   (conferido no HTML renderizado), então o azul cobre header e menu de uma
   vez e o `background: transparent` do nav herda a barra em vez de cair no
   fundo claro da página.

   A logo entra na versão BRANCA (img/logo-lar-mais-facil-branco.png): a
   colorida tem o "Lar" e o "Fácil" no mesmo azul do fundo e sumiria.
   ========================================================================== */
.site-header,
.site-header .inside-header { background: var(--casa-azul); }

/* Filete de 2px, não 3: a barra já é um bloco de cor cheio e a linha grossa
   embaixo somava um segundo peso. E `sticky` porque o menu é o único caminho
   de navegação em página de artigo longa — sem isso o leitor rola 8.000px
   até o rodapé para trocar de categoria. */
.site-header {
  border-bottom: 2px solid var(--casa-ambar);
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }

.site-logo img { height: 40px; width: auto; max-width: 100%; }

/* O GeneratePress deixa de emitir o título textual quando há custom_logo, e
   agora há. Estas duas regras cobrem o caso de alguém remover a logo pelo
   painel: o nome volta legível sobre a barra azul em vez de sumir nela. */
.site-header .main-title a,
.site-header .main-title a:hover {
  font-family: var(--casa-font-heading);
  font-weight: 600;
  color: var(--casa-white);
  letter-spacing: -0.01em;
  font-size: 25px;
}
.site-logo + .site-branding .main-title { display: none; }
.site-header .main-title a .casa-marca-2 { color: var(--casa-ambar); font-weight: 400; }

/* Menu sobre o azul: repouso em azul-claro legível (6,6:1), ativo em branco
   com filete âmbar. Cor sozinha não marcaria o item ativo com contraste
   suficiente sobre um fundo já colorido. */
.main-navigation,
.main-navigation .inside-navigation { background: transparent; }

.main-navigation .main-nav ul li a {
  color: var(--casa-footer-text);
  font-family: var(--casa-font-body);
  font-weight: 500;
  font-size: 15px;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a {
  color: var(--casa-white);
  background: transparent;
}

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-post-ancestor > a {
  color: var(--casa-white);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--casa-ambar);
}

/* Submenu volta ao fundo claro: é um painel sobre o conteúdo, não parte da
   barra — herdar o azul deixaria o menu flutuando sem limite visível. */
.main-navigation .main-nav ul ul {
  background: var(--casa-white);
  border: 1px solid var(--casa-border);
  border-radius: 8px;
  overflow: hidden;
}
.main-navigation .main-nav ul ul li a { color: var(--casa-text-muted); }
.main-navigation .main-nav ul ul li a:hover { color: var(--casa-azul); }

/* Botão do menu no mobile fica sobre o azul. */
.main-navigation .menu-toggle,
.main-navigation .mobile-menu-control-wrapper .menu-toggle { color: var(--casa-white); }

/* ==========================================================================
   Footer.

   #footer-widgets e .site-footer são IRMÃOS no HTML do GeneratePress, não
   pai/filho — regra que só mira .site-footer nunca alcança os widgets de
   rodapé (achado real no Leitor Esperto: a área de widgets ficava clara com
   texto quase invisível). Por isso os dois seletores aparecem juntos.
   ========================================================================== */
.site-footer,
.site-footer .site-info,
#footer-widgets,
#footer-widgets .footer-widgets-container {
  background: var(--casa-azul-fundo);
  color: var(--casa-footer-text);
}

#footer-widgets .widget-title,
#footer-widgets h2, #footer-widgets h3 {
  color: var(--casa-fundo);
  font-family: var(--casa-font-heading);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}

#footer-widgets a { color: var(--casa-footer-text); }
#footer-widgets a:hover { color: var(--casa-ambar); }
#footer-widgets .widget { margin: 0; }

.site-footer a { color: var(--casa-footer-text); }
.site-footer a:hover { color: var(--casa-ambar); }
.site-footer .copyright-bar {
  border-top: 1px solid var(--casa-footer-border);
  padding-top: 18px;
}

.casa-copyright {
  display: block;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--casa-footer-muted);
}

.site-footer .widget-title,
.site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--casa-fundo);
  font-family: var(--casa-font-heading);
}

/* ==========================================================================
   Conteúdo — blocos do Gutenberg gerados pelo pipeline (parágrafo, h2, h3).
   ========================================================================== */
.entry-content {
  max-width: 720px;
  font-size: var(--casa-fs-body);
  line-height: 1.72;
  /* 720px em 18px dá ~68 caracteres por linha; 760 em 17 dava ~76, acima da
     faixa em que o olho volta sem perder a linha. */
}

/* Evita a última linha do parágrafo sozinha com uma palavra. Só o parágrafo:
   em título o `balance` acima já resolve, e os dois juntos brigam. */
.entry-content p { text-wrap: pretty; }

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

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

.entry-content h2 {
  font-size: var(--casa-fs-h2);
  line-height: 1.2;
  margin: 64px 0 18px;
  padding-top: 8px;
}

.entry-content h3 {
  font-size: var(--casa-fs-h3);
  line-height: 1.35;
  color: var(--casa-azul);
  margin: 34px 0 10px;
}

/* Espaço ANTES da seção é o que separa assunto; espaço depois só afasta o
   título do próprio texto. Por isso a margem é assimétrica, e não um valor
   igual dos dois lados. */
.entry-content > h2:first-child { margin-top: 0; }

.entry-content hr,
.entry-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--casa-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(--casa-azul); font-weight: 600; }

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

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

.casa-affiliate-slot--ativo:hover,
.casa-affiliate-slot--ativo:focus {
  background: var(--casa-ambar-dark);
  color: var(--casa-sobre-ambar);
}

/* 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(--casa-fundo-card);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--casa-text-soft);
  line-height: 1.6;
  margin-top: 32px;
}

/* Aviso de medição — [casa_aviso_medicao]. Inserido pelo publish.py só nas
   categorias em que o encaixe físico é o motivo real de devolução
   (colchão, air fryer, TV, prateleira, varal), não em todo post.

   Borda AZUL, contra o âmbar do aviso de voltagem logo abaixo. Os dois
   avisos tinham acentos diferentes de propósito no tema antigo (carvalho x
   telha); a troca de paleta colapsou os dois no mesmo âmbar e apagou a
   distinção sem querer. Ela é restaurada aqui: azul = confira, âmbar =
   pode impedir o uso. Se os dois voltarem à mesma cor, um leitor que já
   ignorou um aviso ignora o outro. */
.casa-medida-notice {
  border-left: 3px solid var(--casa-azul-link);
  background: var(--casa-fundo-card);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--casa-text-muted);
  margin: 8px 0 28px;
}

/* ==========================================================================
   Componentes editoriais do artigo (mockup aprovado 05/09/2026).

   Estes blocos são emitidos pelo publish.py dentro do post_content. O CSS
   mora aqui, e não inline no bloco, porque um ajuste visual depois não pode
   exigir reprocessar dezenas de posts — mesma razão do shortcode de
   afiliado (Fase 7.4).
   ========================================================================== */

/* --- Tabela de decisão -----------------------------------------------------
   A Fase 2.3 do plano pede "tabela de decisão" e o tema não tinha nenhuma:
   o leitor precisava ler três seções inteiras pra comparar capacidade.
   Rola horizontalmente em tela estreita em vez de espremer as colunas. */
.casa-tabela-decisao {
  margin: 8px 0 36px;
  border: 1px solid var(--casa-border-soft);
  border-radius: var(--casa-radius-card);
  background: var(--casa-white);
  box-shadow: var(--casa-shadow-card);
  /* `overflow: hidden` (e não `auto`) para o border-radius recortar o
     cabeçalho escuro. O scroll horizontal entra só onde a tabela realmente
     não cabe — ver o media query no fim do arquivo; `auto` aqui reservava
     calha de scrollbar e deixava uma faixa branca sob a última linha. */
  overflow: hidden;
}

.casa-tabela-decisao table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 560px;
}

/* Cabeçalho claro no lugar da faixa azul sólida. A faixa escura pesava mais
   que a própria informação e competia com o filete âmbar da linha escolhida,
   que é o único destaque que a tabela deveria ter. */
.casa-tabela-decisao thead th {
  background: var(--casa-fundo-card);
  color: var(--casa-azul);
  border-bottom: 1px solid var(--casa-border);
  font-family: var(--casa-font-body);
  font-size: var(--casa-fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 18px;
}

.casa-tabela-decisao thead th:last-child,
.casa-tabela-decisao td.casa-col-nota { text-align: right; }

.casa-tabela-decisao td {
  padding: 18px 20px;
  border-top: 1px solid var(--casa-border-soft);
  color: var(--casa-text-muted);
  vertical-align: top;
}

.casa-tabela-decisao td.casa-col-modelo {
  font-weight: 600;
  color: var(--casa-azul);
}

.casa-tabela-decisao td.casa-col-nota {
  font-family: var(--casa-font-heading);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

/* A linha do vencedor: fundo claro e um filete âmbar à esquerda. É o
   único destaque de cor da tabela — se tudo fosse destacado, nada seria. */
.casa-tabela-decisao tr.casa-linha-escolha { background: var(--casa-fundo-card); }
.casa-tabela-decisao tr.casa-linha-escolha td.casa-col-modelo {
  box-shadow: inset 3px 0 0 var(--casa-ambar);
}
.casa-tabela-decisao tr.casa-linha-escolha td.casa-col-nota {
  color: var(--casa-ambar-texto);
  font-size: 19px;
  font-weight: 700;
}

/* --- Cabeçalho numerado do produto ---------------------------------------- */
.casa-produto-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 46px 0 0;
  padding-top: 28px;
  border-top: 2px solid var(--casa-azul);
}

.casa-produto-cabecalho h2 {
  margin: 0;
  font-size: 27px;
  line-height: 1.25;
}

.casa-produto-cabecalho-main { min-width: 0; }
.casa-produto-titulo { display: flex; align-items: baseline; gap: 14px; }

.casa-produto-num {
  font-family: var(--casa-font-heading);
  font-size: 34px;
  font-weight: 400;
  color: var(--casa-ambar-texto);
  line-height: 1;
  flex-shrink: 0;
}

.casa-nota-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--casa-fundo-card);
  border-radius: 8px;
  padding: 8px 16px;
}

.casa-nota-badge b {
  font-family: var(--casa-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--casa-azul);
  line-height: 1.1;
}

.casa-nota-badge span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--casa-text-soft);
}

/* O produto escolhido inverte o badge — azul da marca com a nota em âmbar. */
.casa-nota-badge--escolha { background: var(--casa-azul); }
.casa-nota-badge--escolha b { color: var(--casa-ambar); }
.casa-nota-badge--escolha span { color: var(--casa-footer-muted); }

.casa-selo-escolha {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--casa-sobre-ambar);
  background: var(--casa-ambar);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 9px;
}

/* Ficha técnica resumida, logo abaixo do nome do produto. */
/* Ficha técnica: era mais uma caixa branca com moldura logo abaixo do nome
   do produto, competindo com os dois cartões de perfil que vêm em seguida.
   Vira faixa apoiada no fundo, sem borda: é dado de apoio, não bloco. */
.casa-resumo-tecnico {
  font-size: var(--casa-fs-small);
  line-height: 1.6;
  color: var(--casa-text-muted);
  background: var(--casa-fundo-card);
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 14px 0 24px;
}

/* --- "Para quem é" / "Para quem NÃO é" -------------------------------------
   Os dois lado a lado, com peso visual IGUAL. Antes eram dois <h3> que
   sumiam no texto corrido — e "para quem NÃO serve" é o diferencial
   editorial declarado do site, então precisa parecer o diferencial. */
.casa-perfil-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 26px 0;
}

.casa-perfil {
  background: var(--casa-white);
  border: 1px solid var(--casa-border-soft);
  border-radius: var(--casa-radius-card);
  box-shadow: var(--casa-shadow-card);
  padding: 20px 22px;
}

.casa-perfil-titulo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.casa-perfil p { font-size: 14.5px; line-height: 1.6; color: var(--casa-text); margin: 0; }

/* O sinal de "serve"/"não serve" passou do topo para a LATERAL. No topo, com
   o raio de 14px, a faixa de 3px virava uma sobrancelha que dobrava nos
   cantos; na lateral ela acompanha a leitura e some do caminho do título. */
.casa-perfil--sim { box-shadow: var(--casa-shadow-card), inset 3px 0 0 var(--casa-positive); }
.casa-perfil--sim .casa-perfil-titulo { color: var(--casa-positive); }
.casa-perfil--nao { box-shadow: var(--casa-shadow-card), inset 3px 0 0 var(--casa-negative); }
.casa-perfil--nao .casa-perfil-titulo { color: var(--casa-negative); }

/* --- Bloco de veredito ----------------------------------------------------- */
.casa-veredito {
  background: var(--casa-azul);
  border-radius: var(--casa-radius-card);
  padding: 44px 46px;
  margin: 60px 0 36px;
}

.casa-veredito .casa-veredito-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--casa-ambar);
}

.casa-veredito h2 {
  font-size: 30px;
  line-height: 1.25;
  color: var(--casa-fundo);
  margin: 14px 0 16px;
}

.casa-veredito p { font-size: 16px; line-height: 1.7; color: var(--casa-footer-text); margin: 0 0 16px; }
.casa-veredito .casa-affiliate-slot { margin-bottom: 0; }
.casa-veredito .casa-affiliate-slot:not(.casa-affiliate-slot--ativo) {
  border-color: var(--casa-footer-border);
  color: var(--casa-footer-muted);
}

/* Aviso de voltagem — [casa_aviso_voltagem]. Inserido pelo publish.py só
   quando algum produto citado tem ASIN separado por voltagem. Borda em
   ÂMBAR (e não azul como o de medição) porque comprar a voltagem errada é
   erro que impede o uso, não só um aperto de encaixe. */
.casa-voltagem-notice {
  border-left: 3px solid var(--casa-ambar);
  background: var(--casa-fundo-card);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--casa-text-muted);
  margin: 8px 0 28px;
}

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

/* ==========================================================================
   Cartão. Uma classe só, em vez do mesmo `border:1px solid` repetido no
   style= de cada bloco do front-page.php.

   A moldura de 1px em volta de cada cartão era o que mais dava cara de
   formulário à home: com seis cartões, a página virava seis retângulos
   desenhados. Aqui a separação vem de sombra baixa sobre fundo levemente
   acinzentado — o cartão flutua em vez de ser cercado.
   ========================================================================== */
.casa-card {
  background: var(--casa-white);
  border: 1px solid var(--casa-border-soft);
  border-radius: var(--casa-radius-card);
  box-shadow: var(--casa-shadow-card);
}

/* Só o cartão que é LINK reage ao mouse. Cartão que não leva a lugar nenhum
   e mesmo assim levanta no hover promete clique que não existe. */
.casa-card--link {
  transition: box-shadow .18s ease, transform .18s ease;
}
.casa-card--link:hover {
  box-shadow: var(--casa-shadow-hover);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .casa-card--link { transition: none; }
  .casa-card--link:hover { transform: none; }
}

/* ==========================================================================
   Banner do hero da home.

   Geometria vinda de docs/referencias/referencia-banner.html: proporções,
   espaçamentos, tamanhos e o recorte da foto são os de lá.

   As CORES não são. A referência traz uma paleta própria (#12355d no título,
   #52657c no texto de apoio, #ffe0a1 na pílula) que é vizinha da nossa mas
   não igual — o azul dela, #21456e, não é o #004D7B que pinta o header e a
   logo. Adotar os hexadecimais da referência criaria um segundo sistema de
   cor competindo com o bloco de Tokens, e o título do hero deixaria de ser
   o azul da marca. Cada valor foi mapeado no token de papel equivalente.

   A única cor que veio da referência é a pílula: #FFE0A1 no lugar do
   #FFF1CC anterior, que quase não se lia contra o painel. Conferido em
   9,6:1 (referência) e 10,9:1 (com o nosso --casa-sobre-ambar por cima).

   Não há filete âmbar no topo aqui: na referência o âmbar do hero é a
   pílula e o filete da nota lateral. Um terceiro âmbar competia com os dois.
   A página de categoria mantém o filete porque lá não existe nota lateral e
   o painel ficaria sem nenhum acento (ver o modificador --arquivo abaixo).
   ========================================================================== */
.casa-hero-banner {
  position: relative;
  overflow: hidden;
  /* `isolation` cria contexto de empilhamento próprio: sem ele o z-index da
     foto disputa com o header sticky, que é z-30. */
  isolation: isolate;
  border-radius: 16px;
  border: 1px solid var(--casa-border);
  box-shadow: 0 8px 24px rgba(0, 48, 77, .06);
  background: linear-gradient(110deg, var(--casa-white) 0%, var(--casa-fundo) 50%, var(--casa-fundo-card) 100%);
}

.casa-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr);
  gap: 46px;
  align-items: end;
  padding: 34px 44px;
  min-height: 330px;
}

/* 345px e não uma porcentagem: a foto tem largura fixa de 285px, então a
   reserva também precisa ser fixa — em porcentagem o texto invadiria a foto
   em viewport larga e sobraria vão em viewport estreita. */
.casa-hero-banner--foto .casa-hero { padding-right: 345px; }

.casa-hero-tag {
  display: inline-block;
  margin-bottom: 15px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--casa-ambar-claro);
  color: var(--casa-sobre-ambar);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.casa-hero-titulo {
  margin: 0 0 16px;
  font-family: var(--casa-font-heading);
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--casa-azul);
}

.casa-hero-descricao {
  margin: 0;
  max-width: 570px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--casa-text);
}

.casa-hero-nota {
  border-top: 1.5px solid var(--casa-ambar-dark);
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--casa-text-soft);
}

.casa-hero-nota p { margin: 0; }

/* A foto é ancorada embaixo e à direita, no tamanho em que foi cortada — não
   esticada para cobrir o painel. `object-position` mantém a poltrona no
   canto quando a altura do painel cresce.

   A máscara não é enfeite: o PNG tem, na borda esquerda, um resto do mockup
   de onde foi recortado (um "na" e um risco amarelo). O degradê até 26% come
   essa faixa. A referência usa 18% e o resto ainda aparece de leve. */
.casa-hero-foto {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 285px;
  height: 331px;
  object-fit: cover;
  object-position: right bottom;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
          mask-image: linear-gradient(to right, transparent 0%, #000 26%);
}

/* --------------------------------------------------------------------------
   Os três critérios.

   Eram um cartão só dividido por filetes internos. Viram três cartões
   separados com o ícone em coluna própria, como na referência: o filete
   interno fazia os três lerem como uma tabela de uma linha, e o que eles são
   é três perguntas independentes.
   -------------------------------------------------------------------------- */
.casa-criterios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.casa-criterio {
  display: flex;
  gap: 15px;
  padding: 25px 22px;
  background: var(--casa-white);
  border: 1px solid var(--casa-border);
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(0, 48, 77, .035);
}

/* `flex: 0 0 30px` trava a coluna do ícone: sem isso o flex encolhe o SVG
   quando o título ao lado tem palavra longa, e os três ícones saem em
   tamanhos diferentes. */
.casa-criterio__icone {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  /* --casa-ambar-texto (5,0:1) no lugar do #ba7807 da referência (3,6:1). */
  color: var(--casa-ambar-texto);
}

.casa-criterio__icone svg { width: 100%; height: 100%; }

.casa-criterio h2 {
  margin: 1px 0 8px;
  font-family: var(--casa-font-heading);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--casa-azul);
}

.casa-criterio p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--casa-text-muted);
}

/* ==========================================================================
   Página de categoria.

   O cabeçalho é o MESMO .casa-hero-banner do hero (a classe entra pelo
   filtro casa_banner_no_arquivo, no functions.php) — só muda o gradiente e a
   altura. Por isso não há aqui nada de raio, sombra, borda ou filete âmbar:
   tudo isso já vem do componente.

   O gradiente corre no sentido contrário ao da home, começando no
   --casa-fundo-card e clareando para a direita. É o mesmo par de cores, na
   ordem trocada: reconhece-se como a mesma família sem que as duas páginas
   pareçam a mesma página.
   ========================================================================== */

/* Pseudo-elemento e não `border-top`: com as outras três bordas em
   --casa-border, o navegador desenha a emenda dos cantos em diagonal e as
   pontas do filete sairiam cortadas em bisel. */
.casa-hero-banner--arquivo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--casa-ambar);
  z-index: 3;
}

/* `.site-content` na frente só para passar dos 0,2,0 de
   `.separate-containers .page-header`, que é quem pinta o fundo branco e o
   padding de 40px do GeneratePress. Sem isso seria !important. */
.site-content .page-header.casa-hero-banner--arquivo {
  padding: 30px 34px 32px;
  margin-bottom: 26px;
  background:
    radial-gradient(85% 180% at 100% 0%, rgba(0, 77, 123, .09) 0%, rgba(0, 77, 123, 0) 62%),
    linear-gradient(115deg, var(--casa-border) 0%, var(--casa-fundo-card) 45%, var(--casa-white) 100%);
}

/* Faixa baixa e larga: o título do arquivo é uma palavra ou duas, e o corpo
   de 60px do hero da home aqui só empurraria a lista para baixo da dobra. */
.casa-hero-banner--arquivo .page-title {
  font-size: clamp(27px, 3.1vw, 36px);
  line-height: 1.12;
  margin: 12px 0 0;
  letter-spacing: -.02em;
}

.casa-hero-banner--arquivo .taxonomy-description {
  margin-top: 10px;
  max-width: 62ch;
}

.casa-hero-banner--arquivo .taxonomy-description p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--casa-text-muted);
}

/* --------------------------------------------------------------------------
   Listagem de artigos (categoria, busca, tag).

   Escopo em `.archive`/`.search` de propósito: `.entry-title` sem escopo
   pegaria também o h1 do post aberto e encolheria o título do artigo de 30
   para 24px. O corpo do post tem escala própria, no bloco de Conteúdo.
   -------------------------------------------------------------------------- */
.archive .site-main > article .inside-article,
.search .site-main > article .inside-article {
  border-radius: var(--casa-radius-card);
  box-shadow: var(--casa-shadow-card);
  padding: 26px 30px 24px;
}

.archive .site-main > article .entry-title,
.search .site-main > article .entry-title {
  font-size: 24px;
  line-height: 1.28;
  letter-spacing: -.015em;
  margin: 0 0 6px;
}

/* 16,5px e não os 18px do --casa-fs-body: aqui é resumo de varredura, lido
   em diagonal ao lado de outros seis. O corpo cheio é do artigo aberto. */
.archive .site-main > article .entry-summary p,
.search .site-main > article .entry-summary p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--casa-text-muted);
  margin: 12px 0 0;
}

.archive .site-main > article .entry-meta,
.search .site-main > article .entry-meta {
  font-size: 13px;
}

/* O "continuar lendo" do GeneratePress sai no meio do parágrafo do resumo e
   se perde: sem peso é só mais uma palavra sublinhada no fim da frase. */
.archive .site-main > article .read-more,
.search .site-main > article .read-more {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--casa-azul-link);
}

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

.button:hover, .wp-block-button__link:hover {
  background: var(--casa-ambar-dark);
  color: var(--casa-sobre-ambar);
}

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

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

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

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

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

.casa-cat-cloud-body a:hover,
.casa-cat-cloud-body a:focus { color: var(--casa-ambar-texto); }

/* ==========================================================================
   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) {
  .casa-produto-layout { grid-template-columns: 1fr !important; }

  /* Título e nota empilham, e a reserva da foto cai de 345 para 225px. A
     foto NÃO some: escondê-la aqui deixaria o painel oco justo na largura em
     que ele fica mais alto. É o que a referência faz. */
  .casa-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px;
  }
  .casa-hero-banner--foto .casa-hero { padding-right: 225px; }

  /* Empilhada, a nota herda a largura inteira da coluna e o filete âmbar
     corre por baixo da foto. O mesmo teto da descrição faz os dois blocos
     terminarem na mesma vertical e o filete parar antes da imagem. */
  .casa-hero-nota { max-width: 570px; }

  .casa-criterios { grid-template-columns: 1fr; }
}

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

  /* Estreito demais para a foto ficar ao LADO do texto: ela desce para o pé
     do painel (daí o padding-bottom de 190px) e encolhe para 170px. A
     referência corta em 650px; aqui fica em 640 para não abrir um terceiro
     ponto de quebra a 10px do que o arquivo já usa. */
  .casa-hero {
    padding: 28px 24px;
    gap: 20px;
  }
  .casa-hero-banner--foto .casa-hero { padding: 28px 24px 190px; }

  .casa-hero-titulo { font-size: 33px; }
  .casa-hero-descricao { font-size: 14px; }
  .casa-hero-foto { width: 170px; height: auto; }

  .casa-criterio { padding: 20px; }
  /* Os dois perfis empilham: lado a lado em 320px cada card vira uma
     coluna de palavras soltas. */
  .casa-perfil-grid { grid-template-columns: 1fr; }
  .casa-produto-cabecalho { flex-direction: column; gap: 14px; }
  .casa-produto-cabecalho h2 { font-size: 23px; }
  .casa-produto-num { font-size: 28px; }
  .casa-veredito { padding: 28px 24px; }
  .casa-veredito h2 { font-size: 25px; }
}

/* Abaixo da largura em que as 4 colunas cabem, a tabela rola sozinha em vez
   de espremer "Melhor para" numa coluna de uma palavra por linha. */
@media (max-width: 720px) {
  .casa-tabela-decisao { overflow-x: auto; }
}

/* Sidebar: "Como avaliamos" (widget montado por configure-branding.php). */
.casa-metodo-lateral { display: flex; flex-direction: column; gap: 12px; }

.casa-metodo-item {
  position: relative;
  margin: 0;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--casa-text-muted);
}

.casa-metodo-item strong { color: var(--casa-text); font-weight: 600; }

/* Marcador de checagem desenhado em CSS — evita emoji (que não é da marca)
   e evita um SVG por item dentro do conteúdo do widget. */
.casa-metodo-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 6px;
  height: 10px;
  border: solid var(--casa-positive);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.widget-area .widget-title,
.sidebar .widget-title {
  font-family: var(--casa-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--casa-azul);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--casa-ambar);
}


/* 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. */
.casa-divulgacao-topo {
	margin: 0 0 1.6rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--casa-border);
	font-size: .82rem;
	line-height: 1.5;
	color: var(--casa-text-muted);
}