/* ===== FitAchado — Design DNA (review fitness) =====
   Paleta própria (não usa verde-emerald/laranja-500 padrão de template): verde-oliva +
   terracota, tipografia self-hosted (Fraunces nos títulos, Source Sans 3 no corpo) — decisão
   de contrato §8/§13 (governanca/PRINCIPIOS.md): o entregável não pode parecer feito por IA.
   Objetivo: leitura confortável de texto longo, rápido (Core Web Vitals). */

@font-face{
  font-family:"Fraunces";
  font-weight:600 700;
  font-style:normal;
  font-display:swap;
  src:url("fonts/fraunces-var.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3";
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  src:url("fonts/source-sans-3-var.woff2") format("woff2");
}

:root{
  --cor-primaria:#4a6b3f;      /* verde-oliva (não emerald padrão) */
  --cor-primaria-esc:#35502c;
  --cor-acao:#a8502e;          /* terracota — cor de ação/destaque autêntica */
  --cor-texto:#1f2328;
  --cor-suave:#5b6470;
  --cor-linha:#e6e8eb;
  --cor-fundo:#ffffff;
  --cor-caixa:#f4f8f6;
  --radius:12px;
  --largura:760px;
  --fonte:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fonte-titulo:"Fraunces","Source Sans 3",Georgia,serif;
}

*{box-sizing:border-box}
body{
  margin:0;font-family:var(--fonte);color:var(--cor-texto);
  background:var(--cor-fundo);line-height:1.65;font-size:18px;
}
a{color:var(--cor-primaria-esc)}
h1,h2,h3,.marca,.nota-grande,.pr-nota,.nota-fitachado{font-family:var(--fonte-titulo)}

/* Cabeçalho */
.topo{
  display:flex;align-items:center;flex-wrap:wrap;gap:24px;
  max-width:var(--largura);margin:0 auto;padding:16px 20px;
}
.marca{display:inline-flex;text-decoration:none;line-height:0}
.marca img{height:60px;width:auto;display:block}
.menu{margin-left:auto}
.menu a{margin-left:16px;text-decoration:none;color:var(--cor-primaria);font-weight:600;font-size:.95rem}
.menu a:first-child{margin-left:0}
.menu a:hover{color:var(--cor-primaria-esc)}

.breadcrumb{
  max-width:var(--largura);margin:0 auto;padding:0 20px;
  font-size:.85rem;color:var(--cor-suave);
}
.breadcrumb a{color:var(--cor-suave);text-decoration:none}

/* Conteúdo */
.conteudo{max-width:var(--largura);margin:0 auto;padding:8px 20px 48px}
h1{font-size:2rem;line-height:1.25;margin:.6em 0 .2em}
h2{font-size:1.4rem;margin:1.6em 0 .4em;padding-top:.4em;border-top:3px solid var(--cor-acao)}
h3{font-size:1.1rem;margin:1em 0 .3em}

/* Cards de destaque (home + hubs) — o traço/width:max-content do h2 acima é pensado pra
   título de artigo, não pra título de card estreito; achado: suplementos.html/equipamentos.html
   usam <h2> pro título do card (a home usa <h3> pro mesmo componente) e herdavam a regra errada,
   estourando a largura do card sem quebrar linha. Reseta pros dois casos, de propósito. */
.card-destaque h2,.card-destaque h3{width:auto;border-top:none;padding-top:0;margin:0}
.card-destaque h2 a,.card-destaque h3 a{text-decoration:none;color:var(--cor-primaria-esc)}
.card-destaque h2 a:hover,.card-destaque h3 a:hover{color:var(--cor-primaria-esc)}
.atualizado{color:var(--cor-suave);font-size:.9rem;margin-top:0}

/* Answer-First */
.resposta-rapida{
  background:var(--cor-caixa);border:1px solid var(--cor-linha);
  border-left:5px solid var(--cor-primaria);border-radius:var(--radius);
  padding:16px 20px;margin:20px 0;
}
.resposta-rapida .rotulo{
  margin:0 0 6px;font-size:.75rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cor-primaria-esc);
}
.resposta-rapida p{margin:.2em 0}

/* Avisos */
.aviso-saude{background:#fff8e6;border:1px solid #ffe08a;border-radius:var(--radius);padding:12px 16px;font-size:.95rem}
.aviso-afiliado{background:#eef4ff;border:1px solid #cfe0ff;border-radius:var(--radius);padding:12px 16px;font-size:.9rem;color:#33415c}

/* Tabela comparativa */
.tabela-wrap{overflow-x:auto;margin:16px 0}
.comparativo{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.comparativo th,.comparativo td{padding:12px 10px;border-bottom:1px solid var(--cor-linha);text-align:left;vertical-align:middle}
.comparativo th{background:var(--cor-primaria);color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
.nota{display:inline-block;background:var(--cor-primaria);color:#fff;font-weight:800;border-radius:8px;padding:2px 10px}
.lojas{display:flex;flex-direction:column;gap:6px}

/* Botões de compra */
.btn-comprar{
  display:inline-block;text-align:center;text-decoration:none;font-weight:700;font-size:.85rem;
  padding:8px 12px;border-radius:8px;white-space:nowrap;transition:filter .15s;
}
.btn-comprar:hover{filter:brightness(1.07)}
.btn-ml{background:#ffe600;color:#2d3277}
.btn-amz{background:#ff9900;color:#111}
/* placeholder: link ainda não preenchido (o script marca com aria-disabled) */
.btn-comprar[aria-disabled="true"]{background:#e6e8eb;color:#98a1ac;pointer-events:none}

/* Prós e contras */
.pros-contras{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
.pros,.contras{border:1px solid var(--cor-linha);border-radius:var(--radius);padding:6px 18px}
.pros{background:#f1faf4}
.contras{background:#fdf3f2}
.pros h3{color:var(--cor-primaria-esc)}
.contras h3{color:#c0392b}

/* Veredito */
.veredito{display:flex;gap:18px;align-items:center;background:var(--cor-caixa);border-radius:var(--radius);padding:16px 20px;margin:12px 0}
.nota-grande{font-size:2.6rem;font-weight:800;color:var(--cor-primaria);line-height:1}
.nota-grande span{font-size:1rem;color:var(--cor-suave)}

/* FAQ */
.faq details{border:1px solid var(--cor-linha);border-radius:10px;padding:8px 14px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin:.5em 0 .2em}

.fontes{font-size:.9rem;color:var(--cor-suave)}
.autor{background:var(--cor-caixa);border-radius:var(--radius);padding:8px 20px;margin-top:24px}

/* AdSense slots (invisível enquanto placeholder) */
.ads-slot:empty{display:none}

/* Rodapé */
.rodape{border-top:1px solid var(--cor-linha);padding:24px 20px;text-align:center;color:var(--cor-suave);font-size:.9rem}
.rodape a{color:var(--cor-suave);text-decoration:none}

/* Responsivo: tabela vira cartões no celular */
@media (max-width:600px){
  body{font-size:17px}
  h1{font-size:1.6rem}
  .pros-contras{grid-template-columns:1fr}
  .comparativo{min-width:0}
  .comparativo thead{display:none}
  .comparativo,.comparativo tbody,.comparativo tr,.comparativo td{display:block;width:100%}
  .comparativo tr{border:1px solid var(--cor-linha);border-radius:var(--radius);margin-bottom:12px;padding:6px 12px}
  .comparativo td{border:none;padding:6px 0}
  .comparativo td::before{content:attr(data-rotulo) ": ";font-weight:700;color:var(--cor-suave)}
  .comparativo td.lojas::before{content:""}
  .lojas{flex-direction:row;flex-wrap:wrap}

  /* Tabela "ranking-fit" (resumo no topo dos comparativos) — cabe mais coluna sem cortar
     texto e ganha sinal visual de que dá pra arrastar (achado: cortava a última coluna sem
     nenhuma pista de que havia mais conteúdo pro lado). !important porque cada review define
     esta classe de novo no próprio <style> inline — sem isso a regra local vence a regra
     responsiva por ordem de cascata. */
  .ranking-fit{position:relative}
  .ranking-fit::after{
    content:"";position:absolute;top:1px;right:0;bottom:8px;width:22px;pointer-events:none;
    background:linear-gradient(to right, transparent, var(--cor-fundo));
  }
  .ranking-fit table{min-width:0 !important;font-size:13px !important}
  .ranking-fit th,.ranking-fit td{padding:8px 6px !important;white-space:normal !important}
  .ranking-fit th:first-child,.ranking-fit td:first-child{width:20px !important}
}