/* ============================================================
   COMFORT BIOHACK — site.css
   Versão: 3.0 | Maio 2026
   ============================================================ */

/* ============================================================
   1. VARIÁVEIS GLOBAIS
   ============================================================ */
:root {
  --gold:        #C5A059;
  --gold-dark:   #A8883E;
  --forest:      #223322;
  --cream:       #F8F4E3;
  --cream-dark:  #EDE8D5;
  --white:       #FFFFFF;
  --text:        #333333;
  --text-light:  #666666;
  --text-muted:  #999999;
  --border:      #E0DAC8;
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --radius:      10px;
  --max-width:   900px;
  --max-header:  1200px;
}

/* ============================================================
   2. RESET UNIVERSAL
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

/* ============================================================
   3. BASE
   ============================================================ */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--forest);
  line-height: 1.25;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.4em; margin-bottom: 1em; }
li { margin-bottom: 0.4em; }

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

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: var(--forest); }

hr.soft-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   5. HEADER
   ============================================================ */
header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--max-header);
  margin: 0 auto;
  padding: 10px 20px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--forest);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0; /* Impede que o logo encolha */
}

.logo-area img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

/* Links Sociais */
.social-links {
    display: flex;
    align-items: center;
    gap: 15px;
  
}
.social-links a {
  color: var(--text-muted); /* Cor padrão dos ícones */
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.social-links a:hover {
  color: var(--gold); /* Cor ao passar o mouse */
}

/* Menu Principal (Desktop) */
.main-nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  gap: 25px; /* Espaçamento entre os itens do menu principal */
}

.main-nav li {
  position: relative;
}

.main-nav a {
  text-decoration: none;
  color: var(--forest);
  font-weight: 500;
  padding: 8px 0; /* Padding vertical para área de clique */
  transition: color 0.2s;
  display: block; /* Para que o padding funcione */
}

.main-nav a:hover {
  color: var(--gold);
}

/* Seta para indicar submenu */
.main-nav li.has-submenu > a::after {
  content: ' \25BE'; /* Seta para baixo */
  font-size: 0.8em;
  vertical-align: middle;
  margin-left: 5px;
  transition: transform 0.2s;
}

.main-nav li.has-submenu:hover > a::after {
  transform: rotate(180deg); /* Gira a seta ao passar o mouse */
}

/* --- Submenu (Desktop) --- */
.main-nav .submenu {
  position: absolute;
  top: 100%; /* Posiciona abaixo do item pai */
  right: 0; /* Alinha à direita do item pai */
  left: auto; /* Garante que não haja alinhamento à esquerda */
  display: none; /* Esconde o submenu por padrão */
  min-width: 220px; /* Largura mínima para o submenu */
  z-index: 1001; /* Garante que o submenu apareça acima de outros elementos */

  /* Propriedades para transparência total e sem caixas */
  background-color: rgba(255, 250, 240, 0.95);
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0; /* Garante que não haja margem externa */
}

.main-nav li:hover > .submenu {
  display: block; /* Mostra o submenu ao passar o mouse no item pai */
}

.main-nav .submenu li {
  /* Propriedades para itens individuais do submenu (desktop) */
  background-color: rgba(255, 250, 240, 0.95); 
  border-bottom: none; /* Sem borda inferior */
  margin: 0; /* Remove margem entre os itens */
  padding: 0; /* Remove padding do li */
  text-align: right; /* Alinha o texto à direita */
}

.main-nav .submenu li a {
  color: var(--forest); /* Cor do texto padrão */
  padding: 4px 0; /* Espaçamento vertical mínimo entre os itens do submenu */
  white-space: nowrap; /* Impede que o texto quebre */
  font-size: 0.95rem;
  display: block; /* Para que o padding e o hover funcionem em toda a área */
  transition: color 0.2s;
}

.main-nav .submenu li a:hover {
  color: var(--gold); /* Cor dourada ao passar o mouse */
  background-color: rgba(255, 250, 240, 0.95); /* Garante que não haja fundo no hover */
}

/* ============================================================
   RESPONSIVIDADE (MOBILE E DESKTOP NAV)
   ============================================================ */

/* --- 1. AJUSTE DESKTOP (Telas grandes) --- */
@media (min-width: 769px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: 30px; /* Espaço entre os links do menu e as redes sociais */
  }
}

/* --- 2. AJUSTE MOBILE (Telas até 768px) --- */
@media (max-width: 768px) {
  .header-inner {
    padding: 10px 15px;
  }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1002;
  }

  .menu-toggle .hamburger {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--forest);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .menu-toggle.active .hamburger:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
  }
  .menu-toggle.active .hamburger:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active .hamburger:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
  }

  .main-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background-color: var(--white);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 999;
    flex-direction: column;
    padding-top: 60px;
    overflow-y: auto;
  }

  .main-nav.active {
    display: flex;
    right: 0;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .main-nav li {
    border-bottom: 1px solid var(--border);
  }

  .main-nav li:last-child {
    border-bottom: none;
  }

  .main-nav a {
    padding: 15px 20px;
    font-size: 1.1rem;
    text-align: left;
  }

  .main-nav .submenu {
    position: static;
    display: none;
    background-color: var(--cream-light);
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
  }

  .main-nav li.has-submenu.submenu-open > .submenu {
    display: flex;
    flex-direction: column;
  }

  .main-nav .submenu li {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  }

  .main-nav .submenu li a {
    padding-left: 40px;
    font-size: 1rem;
    padding: 5px 40px;
  }

  .main-nav li.has-submenu > a::after {
    content: ' \25B8';
    float: right;
    transition: transform 0.3s ease;
  }

  .main-nav li.has-submenu.submenu-open > a::after {
    transform: rotate(90deg);
  }

  /* Aqui os ícones sociais aparecem no mobile */
  .social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
  }

  .social-links a {
    font-size: 1.5rem;
    color: var(--forest);
  }
}


/* ============================================================
   6. FOOTER
   ============================================================ */
footer {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 5px 0;
  text-align: center;
}

.footer-inner {
  max-width: var(--max-header);
  margin: 0 auto;
  padding: 0 20px;
}

.footer-disclaimer {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text);
}

/* ============================================================
   7. HOME — HERO (faixa verde)
   ============================================================ */
.home-hero {
  background: var(--forest);
  padding: 48px 20px;
}

.home-hero-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.home-hero-left { flex: 1; }
.home-hero-right { flex: 1; }

.home-hero-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}

.home-hero h1 {
  font-size: 1.7rem;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 6px;
}

.home-hero-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin-bottom: 8px;
}

.btn-scroll {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 5px 14px;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s;
}

.btn-scroll:hover {
  background: var(--gold);
  color: var(--forest);
  text-decoration: none;
}

/* ============================================================
   8. HOME — AVATAR / DEBORAH
   ============================================================ */
.avatar-section {
  background: var(--cream);
  padding: 40px 20px;
  border-bottom: 1px solid var(--border);
}

.avatar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.avatar-photo img {
  width: 280px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--gold);
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.avatar-name {
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 2px;
  font-size: 1rem;
}

.avatar-role {
  color: var(--gold);
  font-size: 0.85rem;
  margin-bottom: 10px;
  font-weight: 500;
}

.avatar-text p {
  color: var(--text-light);
  font-size: 0.92rem;
}

/* ============================================================
   9. HOME — PRODUTO DESTAQUE
   ============================================================ */
.featured-section {
  background: var(--white);
  padding: 20px 20px;
  border-bottom: 1px solid var(--border);
}

.featured-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.featured-img {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-img img {
  max-height: 200px;
  width: auto;
  object-fit: contain;
}

.featured-text { flex: 1; }

.featured-text h3 {
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 8px;
}

.featured-text p {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 8px;
}

.featured-bullets {
  margin: 8px 0 0;
  padding-left: 1.2em;
}

.featured-bullets li {
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 3px;
}

.featured-ctas-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.featured-ctas-row .btn-buy {
  min-width: 280px;
  text-align: center;
}

.featured-ctas-row .product-guarantee {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   12. REVIEW — corpo do artigo
   ============================================================ */
/* ============================================================
   12. REVIEW — corpo do artigo
   ============================================================ */
/* ... (código existente) ... */
.primary-cta {
  display: block; /* Garante que o botão ocupe sua própria linha */
  background: var(--gold);
  color: var(--white); /* Cor do texto do botão */
  text-align: center; /* Centraliza o texto dentro do botão */
  padding: 15px 24px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
  max-width: 300px; /* Define a largura máxima para o botão */
  margin: 20px auto; /* Centraliza o botão horizontalmente e dá espaçamento vertical */
  transition: background 0.2s;
  /* Adicione estas duas propriedades para garantir que o botão se centralize corretamente */
  /* Se o elemento pai for um flex container, isso também ajuda */
  justify-content: center;
  align-items: center;
}

.primary-cta:hover {
  background: var(--gold-dark);
  text-decoration: none;
}


/* Nova regra para um contêiner de botão para forçar a centralização */
.button-container {
  text-align: center; /* Centraliza o conteúdo inline/inline-block */
  margin: 20px 0; /* Adiciona a margem vertical ao contêiner */
}/* ============================================================
   10. HOME — GRID DE PRODUTOS
   ============================================================ */
.products-section {
  background: var(--cream);
  padding: 48px 20px;
}

.section-title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}

.section-subtitle {
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-light);
  max-width: 680px;
  margin: 0 auto 40px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-image {
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
}

.card-image img {
  max-height: 150px;
  width: auto;
  object-fit: contain;
}

.card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
}

.card-title {
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 0.88rem;
  color: var(--text-light);
  flex: 1;
  margin-bottom: 14px;
}

.card-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-review {
  display: block;
  text-align: center;
  font-size: 0.88rem;
  color: var(--forest);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s, color 0.2s;
}

.btn-review:hover {
  border-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
}

.btn-review-disabled {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 0;
}

/* ============================================================
   11. HOME — DISCLAIMER FINAL
   ============================================================ */
.home-disclaimer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 24px 20px;
}

.home-disclaimer p {
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}

/* ============================================================
   12. REVIEW — hero
   ============================================================ */
.review-hero {
  background: var(--cream);
  padding: 48px 0;
}

.review-hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: center;
}

.review-hero-text { flex: 2; min-width: 280px; }

.review-label {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}

.review-hero-text h1 {
  font-size: 1.7rem;
  color: var(--forest);
  line-height: 1.2;
  margin: 0 0 6px;
}

.review-hero-text p {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 8px;
}

.review-hero-product {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

.review-hero-product img {
  max-height: 280px;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}

.review-hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}


.product-guarantee {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   13. REVIEW — corpo do artigo
   ============================================================ */
.review-body {
  background: var(--white);
  padding: 40px 0;
}

.review-body figure.review-image {
  margin: 2em auto;
  max-width: 100%;
  text-align: center;
}

.review-body figure.review-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.review-body figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
  font-style: italic;
}

/* Regras para o layout de duas colunas (onde as imagens aparecem lado a lado) */
.two-column-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 30px auto;
  max-width: 900px;
}

.two-column-images__item {
  flex: 1 1 calc(50% - 20px);
  max-width: calc(50% - 20px);
  text-align: center;
}

.two-column-images__item img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* Estilos adicionais para o corpo do artigo (consolidado) */
.article-toc {
  background-color: var(--cream);
  border: 1px solid var(--gold); /* Borda dourada clara */
  border-left: 5px solid var(--gold-dark); /* Borda dourada mais forte à esquerda */
  padding: 1.5em;
  margin: 2em 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.article-toc .toc-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.1em;
  margin-bottom: 1em;
  color: var(--forest);
}

.article-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-toc li {
  margin-bottom: 0.5em;
}

.article-toc a {
  text-decoration: none;
  color: var(--forest);
  transition: color 0.3s ease;
}

.article-toc a:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* Estilo para a caixa "About Deborah" (consolidado) */
.author-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background-color: var(--cream);
  border: 1px solid var(--gold); /* Borda dourada clara */
  border-left: 5px solid var(--gold-dark); /* Borda dourada mais forte à esquerda */
  padding: 1.5em;
  margin: 3em 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.author-box img {
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--gold);
}

.author-box h4 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-family: 'Playfair Display', serif;
  color: var(--forest);
}

.author-box p {
  margin-bottom: 0;
  font-size: 0.95em;
  color: var(--text-light);
}

/* --- 6. Estilo para a lista de referências --- */
/* REMOVA AS REGRAS ANTIGAS PARA #references ul, #references li, #references a */
/* E SUBSTITUA POR ESTAS: */

.scientific-references { /* Usamos a classe para maior especificidade */
  list-style: none;
  padding: 0;
}

.scientific-references li {
  margin-bottom: 0.8em;
  font-size: 0.95em;
  color: var(--forest) !important; /* FORÇA A COR PRETA (ou verde escuro) */
}

.scientific-references li a {
  color: var(--gold) !important; /* Garante que APENAS o link seja dourado */
  text-decoration: underline; /* Adiciona sublinhado para indicar que é um link */
}

.scientific-references li a:hover {
  color: var(--gold-dark) !important; /* Cor no hover */
}


/* 12. SCIENTIFIC REFERENCES COLOR FIX */
/* Garante que o texto das referências seja preto, mas o link ainda seja clicável */
#references li a {
  color: var(--forest) !important; /* Força a cor preta para o texto do link */
  text-decoration: none; /* Remove o sublinhado padrão do link */
}

#references li a:hover {
  color: var(--gold) !important; /* Cor dourada no hover */
  text-decoration: underline; /* Adiciona sublinhado no hover para indicar que é um link */
}



/* Remova as regras duplicadas ou conflitantes que estavam em:
   #references ul, #references li, #references a
   Mantenha apenas as regras para .scientific-references
*/

/* Estilo para o disclaimer final (consolidado) */
.disclaimer-box {
  background-color: var(--white);
  border: 1px solid var(--gold); /* Borda dourada clara */
  border-left: 5px solid var(--gold-dark); /* Borda dourada mais forte à esquerda */
  padding: 1.5em;
  margin: 2em 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.disclaimer-box strong {
  color: var(--gold-dark);
}

/* Ajustes para H1 e H2 no corpo do artigo */
.review-body h1 { text-align: center; }
.review-body h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
  text-align: left;
}
.review-body h3 { text-align: left; }

/* Ajustes para p */
.review-body p { text-align: left; }

/* Ajustes para listas */
.review-body ul, .review-body ol { text-align: left; }

/* ============================================================
   14. ESTILOS ESPECÍFICOS PARA PÁGINAS DE ARTIGO/BLOG
   ============================================================ */
.article-page .article-title { /* Estilo para o H1 principal da página de artigo */
  color: var(--gold); /* Título principal dourado */
  text-align: center;
  margin-bottom: 1.5em;
}

.article-page h2 { /* Estilo para H2s dentro do corpo do artigo */
  color: var(--gold); /* H2s dourados */
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
  text-align: left;
}

.article-page h3 { /* Estilo para H3s dentro do corpo do artigo */
  color: var(--forest); /* H3s em cor forest */
  text-align: left;
}

.article-page p { text-align: left; }
.article-page ul, .article-page ol { text-align: left; }

/* Estilos para figuras e legendas dentro de artigos */
.article-page figure.review-image {
  margin: 2em auto; /* Centraliza e adiciona margem */
  max-width: 100%;
  text-align: center;
}

.article-page figure.review-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.article-page figcaption {
  font-size: 0.85rem; /* Um pouco maior para melhor legibilidade */
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
  font-style: italic;
}

/* Estilos para a caixa de sumário (TOC) */
/* JÁ AJUSTADO ACIMA NA SEÇÃO 13 */

/* Estilo para a caixa "About Deborah" */
/* JÁ AJUSTADO ACIMA NA SEÇÃO 13 */

/* Estilo para a lista de referências */
#references ul {
  list-style: none;
  padding: 0;
}

#references li {
  margin-bottom: 0.8em;
  font-size: 0.95em;
}

#references a {
  color: var(--gold);
  text-decoration: none;
}

#references a:hover {
  text-decoration: underline;
}

/* Estilo para o disclaimer final */
/* JÁ AJUSTADO ACIMA NA SEÇÃO 13 */

/* ============================================================
   RESPONSIVIDADE GERAL
   ============================================================ */
@media (max-width: 768px) {
  .home-hero-inner { flex-direction: column; text-align: center; }
  .home-hero h1 { text-align: center; } /* Centraliza H1 do hero em mobile */
  .home-hero-left, .home-hero-right { width: 100%; }

  .avatar-inner { flex-direction: column; text-align: center; }
  .avatar-photo img { width: 120px; height: 120px; } /* Ajusta tamanho do avatar em mobile */

  .products-grid { grid-template-columns: 1fr; }

  .featured-inner { flex-direction: column; text-align: center; }
  .featured-img { flex: 0 0 auto; }

  .review-hero-inner { flex-direction: column; text-align: center; }
  .review-hero-text h1 { text-align: center; } /* Centraliza H1 do hero do review em mobile */
  .review-hero-product { width: 100%; }

  .pros-cons-grid { grid-template-columns: 1fr; }

  .author-box { flex-direction: column; align-items: center; text-align: center; }
  .verdict-box { padding: 28px 20px; }
}

@media (max-width: 560px) {
  .products-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  .main-nav ul { gap: 10px; }
  .main-nav a { font-size: 0.85rem; }
}

.two-col-images {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaçamento uniforme entre as imagens */
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Garante que empilhem no celular */
}

.two-col-images__item {
    flex: 1 1 320px; /* Base de 320px, permitindo ajuste flexível */
    max-width: 320px; /* Trava a largura máxima */
    margin: 0; /* Remove margens extras do figure */
}

.two-col-images__item img {
    width: 100%;
    height: 380px; /* Força a altura exata que você deseja */
    object-fit: cover; /* Preenche o quadro cortando as sobras, sem amassar a foto */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block;
}}
/* Controla o contêiner individual da imagem */
.two-col-images__item {
    flex: 1 1 320px; /* Permite crescer e encolher, com base de 320px */
    max-width: 320px; /* Trava o crescimento máximo */
    display: flex;
    flex-direction: column;
    align-items: center;
.two-col-images {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaçamento uniforme entre as imagens */
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Garante que empilhem no celular */
}

.two-col-images__item {
    flex: 1 1 320px; /* Base de 320px, permitindo ajuste flexível */
    max-width: 320px; /* Trava a largura máxima */
    margin: 0; /* Remove margens extras do figure */
}

.two-col-images__item img {
    width: 100%;
    height: 380px; /* Força a altura exata que você deseja */
    object-fit: cover; /* Preenche o quadro cortando as sobras, sem amassar a foto */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block;
}
}

/* Torna a imagem responsiva e impede que ela estoure */
.two-col-images__item img {
    max-width: 100%;
    height: auto; /* Mantém a proporção correta */
    object-fit: cover;
    border-radius: 8px; /* Opcional: deixa as bordas arredondadas e mais elegantes */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Opcional: adiciona uma sombra leve */
}

/* Se você tinha um .single-image-centered__item img, ele pode estar em conflito.
   É melhor usar as classes específicas do seu template (.two-col-images__item img)
   para evitar sobrescrever regras de forma indesejada.
   Se a regra abaixo ainda existir e estiver causando problemas, remova-a ou ajuste-a.
*/
/*
.single-image-centered__item img {
    display: block;
    margin: 0 auto;
    max-width: 320px; /* Adicione 'px' */
    height: 380px;   /* Adicione 'px' */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
}

/* ============================================================
   BOTÃO FLUTUANTE — VOLTAR AO TOPO
   ============================================================ */
.btn-top {
  position: fixed;
  bottom: 28px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, background 0.2s;
  z-index: 999;
}

.btn-top.visible {
  opacity: 1;
  visibility: visible;
}

.btn-top:hover { background: var(--gold-dark); }

/* ============================================================
   12. REVIEW — VERDICT BOX
   ============================================================ */
.verdict-box {
  background: var(--forest);
  color: var(--white);
  border-radius: var(--radius);
  padding: 16px 32px; /* <-- ESTÁ AQUI O PROBLEMA */
  text-align: center;
}

.verdict-box h2,
.verdict-box h3,
.verdict-box h4 {
  color: var(--cream); /* Cor bege claro para o título */
  margin-bottom: 0.5em;; /* Mantém o espaçamento inferior */
  text-align: center; /* <-- ADICIONE ESTA LINHA */
}
.verdict-box h4,
.verdict-box h5,
.verdict-box h6 {
  color: var(--cream); /* Garante que os títulos dentro do verdict-box sejam bege */
}

.verdict-box p {
  color: var(--cream); /* Garante que todos os parágrafos, incluindo o disclaimer, sejam bege */
}

.verdict-box strong {
  color: var(--cream); /* Garante que o strong dentro do verdict-box seja bege */
}


/* ============================================================
   11. CTA & FAQ
   ============================================================ */
.faq-section {
  margin: 40px 0;
}

/* A moldura agora vai direto na tag details */
details.faq-item {
  background: var(--white);
  border: 1px solid #ddd; /* Substitua por var(--border) se tiver essa variável */
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: block !important;
}

details.faq-item[open] p {
  display: block !important;
  margin-top: 15px;
}

/* Estilo da pergunta */
details.faq-item summary {
  color: var(--forest);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  list-style: none; /* Remove a seta padrão do navegador */
  position: relative;
  padding-right: 30px;
}

/* Remove a seta padrão no Chrome/Safari */
details.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Cria o sinal de + */
details.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
}

/* Troca para o sinal de - quando estiver aberto */
details.faq-item[open] summary::after {
  content: '-';
}

/* Estilo da resposta */
details.faq-item p {
  color: var(--forest);
  margin-top: 15px;
  margin-bottom: 0;
  line-height: 1.6;
}

/* Estilos para links dentro do FAQ */
details.faq-item p a {
  color: var(--gold);
  text-decoration: underline;
}

details.faq-item p a:hover {
  color: var(--gold-dark);
}

/* Estilos para links dentro do FAQ */
.faq-item p a {
  color: var(--gold); /* Links dourados */
  text-decoration: underline;
}

.faq-item p a:hover {
  color: var(--gold-dark);
}

/* Media Queries para responsividade do CTA e FAQ */
@media (max-width: 768px) {
  .cta-box {
    padding: 20px;
    margin: 30px 0;
  }
  .cta-box h3 {
    font-size: 1.5rem;
  }
  .cta-box p {
    font-size: 1rem;
  }
  .cta-box .btn-primary {
    padding: 10px 25px;
  }
  .faq-item h4 {
    font-size: 1.1rem;
  }
}

/* =========================================
   QUADRO DE PRÓS E CONTRAS (GLOBAL)
   ========================================= */
.pros-cons-grid {
    background-color: #ffffff !important;
    border: 2px solid #D4AF37 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin: 24px 0 !important;
}

.pros-cons-grid .pros h3, 
.pros-cons-grid .pros ul li {
    color: #2e7d32 !important; 
}

.pros-cons-grid .cons h3, 
.pros-cons-grid .cons ul li {
    color: #c62828 !important; 
}

/* Responsividade para celular */
@media (max-width: 768px) {
    .pros-cons-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Estilos para centralizar uma única imagem */
.single-image-centered {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    margin: 20px 0; /* Adiciona um pouco de margem acima e abaixo */
}

.single-image-centered__item {
    text-align: center; /* Centraliza a figcaption se houver */
}

.single-image-centered__item img {
    display: block; /* Garante que a imagem se comporte como um bloco para centralização */
    margin: 0 auto; /* Centraliza a imagem dentro do seu contêiner */
    max-width: 320; /* Garante que a imagem não exceda a largura do contêiner */
    height: 380; /* Mantém a proporção da imagem */
    border-radius: 8px; /* Opcional: para um visual mais suave */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Opcional: para um efeito de profundidade */
}

.single-image-centered__item figcaption {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

/* Estilo base do botão invisível */
.btn-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #D4AF37; /* Cor dourada */
  color: #ffffff; /* Cor da seta */
  border: none;
  border-radius: 50%; /* Deixa o botão redondo */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0; /* Começa invisível */
  visibility: hidden;
  transition: all 0.3s ease; /* Animação suave ao aparecer */
  z-index: 9999; /* Garante que fique por cima de tudo */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Classe adicionada pelo JavaScript quando rola a página */
.btn-top.visible {
  opacity: 1;
  visibility: visible;
}

/* Efeito ao passar o mouse */
.btn-top:hover {
  background-color: #b5952f; /* Dourado um pouco mais escuro */
  transform: translateY(-3px); /* Leve saltinho para cima */
}

/* Container do Hub */
.review-hub-section {
  margin: 40px 0;
  padding: 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Grid de cards */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

/* Estilo do Card */
.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #333;
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  transition: transform 0.2s;
}

.hub-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Container do Hub - Adotando o estilo da author-box */
.review-hub-section {
  background-color: #fdfbf7; /* Cor --cream */
  border: 1px solid #d4af37; /* Cor --gold */
  border-left: 5px solid #b5952f; /* Cor --gold-dark à esquerda */
  padding: 2em;
  margin: 3em 0;
  border-radius: 8px; /* Cor --radius aproximada */
  box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Shadow suave */
}

/* Título e texto interno */
.review-hub-section h2 {
  font-family: 'Playfair Display', serif;
  color: #2c4233; /* Cor --forest aproximada */
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* Grid de cards */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Estilo do Card individual */
.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #555; /* --text-light aproximada */
  padding: 15px;
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.hub-card:hover {
  transform: translateY(-5px);
  border-color: #d4af37;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* Imagem miniatura */
.hub-card img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 4px;
}

.hub-card span {
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.2;
}

.hub-grid {
  display: grid;
  /* auto-fit faz os itens se ajustarem ao tamanho, justify-content centraliza o bloco todo */
  grid-template-columns: repeat(auto-fit, 150px); 
  justify-content: center; 
  gap: 20px;
  margin-top: 20px;
}

.review-hub-section h2 {
    color: #d4af37; /* Cor dourada (mesma da sua borda) */
    text-align: center;
    font-family: 'Playfair Display', serif; /* Mantendo a elegância do tema */
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8em; /* Ajuste leve para ficar imponente mas proporcional */
}

/* 1. Centraliza e pinta o label do TOC */
.article-toc .toc-label {
  display: block;        /* Garante que o span ocupe a linha toda para centralizar */
  text-align: center;
  color: #b5952f;        /* Tom dourado */
  font-weight: bold;
  margin-bottom: 10px;
}

/* 2. Centraliza e pinta o título dentro do Hub de Reviews (no hub-reviews.php) */
.review-hub-section h2 {
  text-align: center;
  color: #b5952f;        /* Mesma tonalidade dourada */
  font-family: 'Playfair Display', serif; /* Mantendo o estilo elegante */
  margin-bottom: 20px;
}

/* Botão secundário (Review) */
.secondary-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    border: 2px solid #d4af37; /* Borda dourada */
    background: transparent;
    color: #d4af37;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.secondary-cta:hover {
    background: #d4af37;
    color: #fff;
}

/* Ajuste para o container dos botões não ficarem "apertados" */
.card-ctas {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre o botão de compra e o de review */
    margin-top: 15px;
}

/* O envelopador garante que o vídeo sempre fique no centro da tela */
.video-outer-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

/* O container limita o tamanho e mantém a proporção 16:9 */
.video-review-container {
    width: 90%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    background: #000;
}

.video-review-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Referência científica discreta — após ingredient-takeaway */
.science-ref {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  font-style: normal;
}

.science-ref a {
  color: #9ca3af;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.science-ref a:hover {
  color: #6b7280;
}