/* ==========================================================
   SB2 Turbo — RxBar Theme Override (carregar APÓS style.css)
   Re-tematiza site verde antigo pra paleta vermelho+preto+cream
   sem reescrever HTML. Aplica tipografia Archivo Black no display.
   ========================================================== */

:root {
  /* === Override paleta principal === */
  --green-900: #0A0A0A;          /* preto puro */
  --green-700: #D8232A;          /* vermelho carmim */
  --green-500: #D8232A;          /* vermelho carmim (mesmo) */
  --green-50:  #FAF7F2;          /* warm cream */

  --amber:     #F4E04D;
  --amber-700: #C9B73C;

  --red:       #D8232A;
  --red-700:   #B01418;

  --ink:    #0A0A0A;
  --ink-2:  #2F2D2A;
  --ink-3:  #6B6660;

  --line:    #E6E0D5;
  --bg:      #FAF7F2;
  --bg-soft: #F2EBDF;
  --bg-dark: #0A0A0A;

  /* === Tipografia RxBar-style (calibrado pelo real rxbar.com) === */
  --fs-h1:   clamp(34px, 5.2vw, 64px) !important;
  --fs-h2:   clamp(28px, 4vw, 52px) !important;
  --fs-h3:   clamp(20px, 2.4vw, 28px) !important;
  --fs-lede: clamp(16px, 1.5vw, 19px) !important;
}

/* === Fonte display Archivo Black + body Inter === */
h1, h2, h3, h4,
.section-title, .hero h1, .article-hero h1,
.tile-label, .footer-flogo, .logo {
  font-family: 'Archivo Black', 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 0.95 !important;
  text-transform: uppercase;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* === Tipografia RxBar-style: calibrada pelo real rxbar.com === */
.hero h1 {
  font-size: clamp(36px, 5.5vw, 64px) !important;
  line-height: 1.02 !important;
}
.hero .tg, .hero h1 span {
  font-size: 1em !important;
  margin-top: 4px;
}
.section-title, section h2 {
  font-size: clamp(30px, 4.2vw, 52px) !important;
  line-height: 1.05 !important;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}
section h3 {
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.15 !important;
}
.article-hero h1, article h1 {
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: 1.05 !important;
}
.article-body h2 {
  font-size: clamp(24px, 2.8vw, 36px) !important;
  line-height: 1.1 !important;
  margin: 48px 0 16px !important;
}
.article-body h3 {
  font-size: clamp(18px, 1.9vw, 22px) !important;
  margin: 32px 0 12px !important;
}
.post-card h3, .blog-card-rx h3 {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  line-height: 1.15 !important;
}
.eyebrow, .tag, .post-cat, .kicker, .label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.lede, .section-lede, p.lede {
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.5 !important;
  max-width: 56ch !important;
}
.hero-bullets li {
  font-size: 15px !important;
}
.btn, .btn-cta, .btn-ghost {
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  padding: 16px 28px !important;
}
.btn-lg {
  font-size: 15px !important;
  padding: 20px 36px !important;
}
.footer h4, .site-footer h4 {
  font-size: 12px !important;
}

/* === Buttons — RxBar style (sem border-radius round) === */
.btn-cta {
  background: #0A0A0A !important;
  color: #FAF7F2 !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.btn-cta:hover {
  background: #D8232A !important;
  color: #FAF7F2 !important;
  box-shadow: none !important;
}
.btn-ghost {
  border-color: #0A0A0A !important;
  color: #0A0A0A !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.btn-ghost:hover {
  background: #0A0A0A !important;
  color: #FAF7F2 !important;
}

/* === Header — fundo cream warm === */
.site-header {
  background: rgba(250, 247, 242, 0.92) !important;
  border-bottom: 1px solid #E6E0D5 !important;
}

/* === Eyebrow / Tag — vermelho === */
.eyebrow, .tag, .post-cat {
  color: #D8232A !important;
  background: rgba(216, 35, 42, 0.10) !important;
}

/* === Sections backgrounds === */
.s-cream { background: #FAF7F2 !important; }
.s-light { background: #F2EBDF !important; }
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(216, 35, 42, 0.10), transparent 60%),
    radial-gradient(1000px 400px at 0% 100%, rgba(244, 224, 77, 0.10), transparent 60%),
    linear-gradient(180deg, #FAF7F2, #fff) !important;
}

/* === Warning bar (RDC, etc.) === */
.warning-bar { border-top-color: #D8232A !important; }

/* === Hero bullets === */
.hero-bullets li::before {
  background: #D8232A !important;
}

/* === Highlights / spans destacados === */
.tg, .hero h1 span {
  color: #D8232A !important;
  display: block !important;
}

/* === Cards de produto === */
.product-card, .compare-card, .ing-card, .card, .quote-card, .aviso-card {
  border-radius: 0 !important;
  border: 1px solid #E6E0D5 !important;
}
.product-card:hover {
  border-color: #D8232A !important;
}

/* === Article body / Blog === */
.article-body h2 { color: #0A0A0A !important; }
.article-body h3 { color: #B01418 !important; }
.article-body blockquote {
  border-left-color: #D8232A !important;
  background: rgba(216, 35, 42, 0.05) !important;
  color: #0A0A0A !important;
}
.article-body .tldr {
  background: rgba(216, 35, 42, 0.06) !important;
  border-color: rgba(216, 35, 42, 0.30) !important;
}
.article-body .tldr strong { color: #B01418 !important; }
.article-body th {
  background: #0A0A0A !important;
  color: #FAF7F2 !important;
}
.article-body .inline-cta {
  background: linear-gradient(135deg, rgba(216, 35, 42, 0.06), #fff) !important;
  border-color: #D8232A !important;
  border-radius: 0 !important;
}
.article-body .inline-cta a {
  background: #0A0A0A !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.article-body .inline-cta a:hover { background: #D8232A !important; }
.article-body .faq-item summary::after {
  color: #D8232A !important;
}
.article-body .article-disclaimer {
  background: rgba(216, 35, 42, 0.05) !important;
  border-color: rgba(216, 35, 42, 0.20) !important;
}
.article-body .article-disclaimer strong { color: #B01418 !important; }
.article-body .article-sources a { color: #D8232A !important; }
.article-cta-end {
  background: linear-gradient(135deg, #D8232A, #0A0A0A) !important;
  border-radius: 0 !important;
}
.article-cta-end .btn { color: #0A0A0A !important; border-radius: 0 !important; }

/* === Audio player adapt para nova paleta === */
.audio-player {
  background:
    linear-gradient(135deg, rgba(216, 35, 42, 0.08), rgba(244, 224, 77, 0.04) 80%),
    #fff !important;
  border-color: rgba(216, 35, 42, 0.25) !important;
}
.audio-play-btn {
  background: linear-gradient(135deg, #D8232A, #B01418) !important;
}
.audio-player.is-playing .audio-play-btn {
  background: linear-gradient(135deg, #0A0A0A, #2F2D2A) !important;
}
.audio-label { color: #B01418 !important; }
.audio-time-current { color: #D8232A !important; }
.audio-equalizer span { background: #D8232A !important; }
.audio-progress-fill {
  background: linear-gradient(90deg, #D8232A, #F4E04D) !important;
}
.audio-progress-thumb { background: #B01418 !important; }
.audio-toast {
  background: linear-gradient(135deg, #D8232A, #0A0A0A) !important;
}

/* === Footer dark === */
.site-footer, footer.site-footer, .footer {
  background: #0A0A0A !important;
  color: #FAF7F2 !important;
}
.site-footer a { color: #FAF7F2 !important; }
.site-footer a:hover { color: #D8232A !important; }
.site-footer h4 { color: #D8232A !important; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; }

/* === Breadcrumbs === */
.breadcrumbs a { color: #D8232A !important; }
.article-hero .article-meta .last-updated { color: #B01418 !important; }

/* === Blog post-card === */
.post-card { border-radius: 0 !important; }
.post-card:hover { border-color: #D8232A !important; box-shadow: 0 16px 32px rgba(216, 35, 42, 0.12) !important; }
.post-card .post-cat {
  background: rgba(216, 35, 42, 0.10) !important;
  color: #D8232A !important;
}
.post-card .post-meta .audio-badge {
  background: rgba(216, 35, 42, 0.10) !important;
  color: #D8232A !important;
}

/* === Manifesto / Last updated badge === */
.last-updated { color: #B01418 !important; }

/* === Compare wrap (tabela canetas) === */
.compare-wrap th { background: #0A0A0A !important; color: #FAF7F2 !important; }

/* === Links inline em conteúdo === */
.article-body a { color: #D8232A !important; }
.article-body a:hover { color: #B01418 !important; }

/* === Espaçamentos generosos RxBar === */
section { padding: clamp(64px, 9vw, 128px) 0 !important; }
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 112px) !important; }
.section-lead, .section-lede {
  margin-bottom: clamp(40px, 5vw, 64px) !important;
}
.section-title + .section-lead,
.section-title + .section-lede,
h2 + .section-lede,
h2 + .section-lead {
  margin-top: 18px !important;
}
.tc { text-align: center !important; }

/* === Article body — leitura confortável tamanho RxBar === */
.article-body p {
  font-size: 18px !important;
  line-height: 1.65 !important;
  margin-bottom: 18px !important;
}
.article-body li {
  font-size: 17px !important;
  line-height: 1.55 !important;
}
.article-hero {
  padding: clamp(40px, 5vw, 80px) 24px clamp(20px, 2vw, 32px) !important;
}

/* === Section-head / kicker centralizada com mais ar === */
.section-head { margin-bottom: clamp(40px, 5vw, 72px) !important; }
.section-head .kicker, .section-head .eyebrow {
  margin-bottom: 16px !important;
  display: inline-block !important;
}

/* === Garantir que NAV/HEADER fica menor que sections === */
.site-header .header-cta {
  padding: 12px 22px !important;
  font-size: 13px !important;
}
.site-header .logo {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
}
.site-header .nav a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ==========================================================
   Hamburger menu (mobile) — estilo Femiliss
   ========================================================== */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #0A0A0A;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 998;
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 380px);
  background: #FAF7F2;
  z-index: 999;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  padding: 24px 28px 32px;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.20);
  overflow-y: auto;
}
.nav-drawer.is-open {
  transform: translateX(0);
}
.nav-drawer .drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.10);
  margin-bottom: 28px;
}
.nav-drawer .drawer-logo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #0A0A0A;
}
.nav-drawer .drawer-close {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  font-size: 22px;
  color: #0A0A0A;
  line-height: 1;
}
.nav-drawer .drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-drawer .drawer-nav a {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 28px !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: #0A0A0A !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
}
.nav-drawer .drawer-nav a:hover,
.nav-drawer .drawer-nav a:focus {
  color: #D8232A !important;
  opacity: 1 !important;
}
.nav-drawer .drawer-cta {
  margin-top: 28px;
  background: #0A0A0A !important;
  color: #FAF7F2 !important;
  padding: 18px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}
.nav-drawer .drawer-cta:hover {
  background: #D8232A !important;
}

/* Mobile: esconder nav inline + cta header, mostrar hamburger */
@media (max-width: 879px) {
  .site-header .nav { display: none !important; }
  .site-header .header-cta { display: none !important; }
  .nav-toggle { display: flex !important; }
}
/* Desktop: garantir drawer escondido */
@media (min-width: 880px) {
  .nav-toggle { display: none !important; }
  .nav-drawer { transform: translateX(100%) !important; }
  .nav-overlay { display: none !important; }
}

/* ==========================================================
   Sticky CTA bottom (mobile) — produtos
   ========================================================== */
.sticky-buy-mobile {
  display: none;
}
@media (max-width: 879px) {
  /* Em páginas de produto, esconder header fixo do topo */
  body.product-page .site-header {
    display: none !important;
  }
  body.product-page {
    padding-bottom: 78px;
  }
  .sticky-buy-mobile {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 14px 20px;
    background: #D8232A;
    color: #FAF7F2 !important;
    font-family: 'Archivo Black', 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    border-radius: 0 !important;
    transition: background .15s ease;
  }
  .sticky-buy-mobile:hover,
  .sticky-buy-mobile:active {
    background: #0A0A0A;
    opacity: 1 !important;
  }
  .sticky-buy-mobile::before {
    content: '🛒';
    font-size: 18px;
    margin-right: 4px;
  }
  /* Esconder também o whatsapp floating em product pages mobile (não conflito visual) */
  body.product-page .sb-wa-floating {
    bottom: 88px !important;
  }
}