/*
Theme Name: OMEGA Review
Theme URI: https://example.com/omega-review
Author: OMEGA
Description: Tema limpo para paginas de review e pre-sell de afiliado. Cores e
 tipografia medidas em veiculo de saude de referencia. ZERO CDN de terceiros,
 sem rastreador, sem builder.
Version: 1.12.0
Requires at least: 5.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: omega-review
*/

:root{
  --fundo:#ffffff; --texto:#231f20; --titulo:#231f20;
  --acento:#02838d; --acento-escuro:#08565c; --pilula:#e6f2f3;
  --cartao:#f7fbfb; --cartao-borda:#dcdbdb; --suave:#767474;
  --linha:#dcdbdb; --branco:#ffffff; --raio:4px;
  --largura:750px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--acento)}

.env{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.artigo{max-width:var(--largura);margin:0 auto}

/* ---- cabecalho ---- */
.topo{background:var(--branco);border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:20}
.topo .env{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:68px;flex-wrap:wrap}
/* ---- logotipo ----
   selo + nome + linha de funcao editorial. Zero recurso externo: o SVG e
   inline. flex-shrink:0 no selo porque, sem ele, o cabeçalho apertado
   achata o quadrado e o check vira um risco (ja aconteceu em outra pagina
   deste mesmo dono). */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--titulo);min-width:0}
.marca-selo{flex-shrink:0;color:var(--acento);display:block;
  width:32px;height:32px}
.marca-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.marca-nome{font-weight:700;font-size:20px;letter-spacing:-.3px;
  color:var(--titulo);line-height:1.15}
.marca-linha{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--suave);font-weight:600;line-height:1.2;white-space:nowrap}
.marca:hover .marca-nome{color:var(--acento-escuro)}
.menu ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;
  flex-wrap:wrap}
.menu a{color:var(--texto);text-decoration:none;font-size:15px}
.menu a:hover,.menu .current-menu-item>a{color:var(--acento)}

/* ---- titulos: CAIXA ALTA nos dois primeiros niveis, como o padrao ---- */
h1,h2{text-transform:none;color:var(--titulo);font-weight:700;
  line-height:1.15}
h1{font-size:clamp(30px,6vw,34px);letter-spacing:-.5px;margin:0 0 20px}
h2{font-size:clamp(24px,4.5vw,25px);margin:38px 0 14px}
h3,h4,h5,h6{color:var(--titulo);font-weight:700;line-height:1.3}
h3{font-size:22px;margin:28px 0 10px}
h4{font-size:19px;margin:22px 0 8px}
p{margin:0 0 20px}
ul,ol{margin:0 0 20px;padding-left:22px}
li{margin:0 0 10px}
blockquote{margin:22px 0;padding:16px 20px;background:var(--cartao);
  border:1px solid var(--cartao-borda);border-left:4px solid var(--acento);
  border-radius:var(--raio)}
hr{border:0;border-top:1px solid var(--linha);margin:34px 0}
figure{margin:0 0 30px}
figcaption{font-size:13px;color:var(--suave);text-align:center;margin-top:8px}

/* ---- pilula / selo ---- */
.pilula{display:inline-block;background:var(--pilula);color:var(--titulo);
  border-radius:999px;padding:7px 16px;font-size:14px;font-weight:600;
  margin:0 0 16px}
.selos{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding:0;
  list-style:none}
.selos li{border:1px solid var(--cartao-borda);background:var(--branco);
  border-radius:999px;padding:7px 14px;font-size:14px;margin:0}

/* ---- botao ---- */
.botao{display:inline-block;background:var(--acento);color:var(--branco);
  text-decoration:none;font-weight:700;font-size:17px;padding:16px 34px;
  border-radius:999px;border:0;cursor:pointer}
.botao:hover{background:var(--acento-escuro);color:var(--branco)}

/* ---- cards ---- */
.grade{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:26px 0}
.cartao{background:var(--cartao);border:1px solid var(--cartao-borda);
  border-radius:var(--raio);padding:22px}
.cartao h3{margin-top:0}

/* ---- lista de posts ---- */
.entrada{background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);padding:24px;margin:0 0 22px}
.entrada h2{font-size:26px;margin:0 0 10px}
.entrada h2 a{color:var(--titulo);text-decoration:none}
.entrada h2 a:hover{color:var(--acento)}
.meta{font-size:14px;color:var(--suave);margin:0 0 12px}

.conteudo{padding:40px 0 60px}

/* ---- migalhas + satelites (pillar/cluster) ---- */
.migalhas{font-size:14px;color:var(--suave);margin:0 0 14px}
.migalhas a{color:var(--suave)}
.migalhas span{margin:0 6px}
.satelites{margin:44px 0 0;padding:24px;background:var(--cartao);
  border:1px solid var(--cartao-borda);border-radius:var(--raio)}
.satelites h2{margin-top:0;font-size:24px}
.satelites ul{list-style:none;padding:0;margin:0}
.satelites li{margin:0 0 12px}
.satelites a{font-weight:600}

/* ---- rodape ---- */
.rodape{background:var(--branco);border-top:1px solid var(--linha);
  padding:30px 0;margin-top:40px;font-size:14px;color:var(--suave)}
.rodape .aviso{max-width:var(--largura);margin:0 auto 14px}
/* menu do rodape: as paginas que o visitante — e o Google Ads — procuram */
.rodape-menu{max-width:var(--largura);margin:0 auto 18px}
.rodape-menu ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;
  margin:0;padding:0}
.rodape-menu li{margin:0}
.rodape-menu a{color:var(--texto);text-decoration:none;font-size:14px}
.rodape-menu a:hover{color:var(--acento);text-decoration:underline}

/* acessibilidade: pular para o conteudo (leitor de tela e teclado) */
.pular{position:absolute;left:-9999px}
.pular:focus{left:16px;top:16px;background:var(--branco);padding:10px 16px;
  border-radius:var(--raio);z-index:99}

@media (max-width:600px){
  .conteudo{padding:24px 0 40px}
  .entrada{padding:18px}
}
/* Em 360px, nome + linha + menu nao cabem na mesma faixa: a linha
   editorial some primeiro. Ela existe para o leitor que esta decidindo se
   confia; quem ja esta no celular rolando o artigo nao depende dela. */
/* Medido em 18/08/2026: a linha ocupa ~205px e sobram 292px num iPhone de
   375px, entao 400px escondia credibilidade a toa. So some quando de fato
   nao cabe. */
@media (max-width:344px){
  .marca-linha{display:none}
  .marca-selo{width:28px;height:28px}
  .marca-nome{font-size:18px}
}