/* publico.css — modo escuro do TEMPLATE das páginas públicas (index, pacotes, sobre, depoimentos, dúvidas,
   políticas, termos, tutorial, simulados-pdf). Origem: inc/dark/index.css (30/09/2026). */

/* ==========================================================================
   HANGAR MMA — Modo noturno da PÁGINA INICIAL (index.php + inc/menu.php + inc/rodape.php)
   Carregado DEPOIS de bootstrap.css, style.css, dos <style> do index.php e do hangar-dark.css.
   Tudo escopado em html.dark. Não mexe em: degradês coloridos, CTAs sólidos, fotos/parallax,
   badges sólidos, blocos .context-dark.
   Ritmo das seções no escuro (mantém a alternância do claro):
     hero --hg-bg · recursos --hg-soft · sobre/contadores (foto) · pacotes (foto) ·
     bônus --hg-bg · FAQ --hg-soft · depoimentos --hg-bg · rodapé --hg-soft
   Cards (box-modern, contadores, pacotes, bônus, depoimentos) = --hg-surface.
   ========================================================================== */

/* ---------- Base: texto corrido e títulos ----------
   Corpo no claro era #8491a5 (cinza apagado) → --hg-muted preserva a hierarquia título × texto.
   Títulos: :where() deixa a especificidade em (0,1,1) para os títulos coloridos abaixo
   poderem ser reafirmados sem brigar. */
html.dark .page { color: var(--hg-muted); }
html.dark :where(h1, h2, h3, h4, h5, h6, .heading) { color: var(--hg-text); }
html.dark :where(.context-dark, .bg-gray-900, .bg-accent) :where(h1, h2, h3, h4, h5, h6, .heading) { color: #ffffff; }

/* ==========================================================================
   MENU (inc/menu.php — RD Navbar classic)
   ========================================================================== */
/* Faixa do cabeçalho (navbar transparente em cima dela) */
html.dark .page-header-3 { background-color: var(--hg-bg); }

/* Desktop (rd-navbar-static, ≥1200px): links escuros → claros (inclui .active/.focus/.opened) */
html.dark .rd-navbar-static .rd-nav-item .rd-nav-link { color: var(--hg-text); }
html.dark .rd-navbar-static .rd-nav-item .rd-nav-link:hover { color: #ffffff; }
html.dark .rd-navbar-classic.rd-navbar-static,
html.dark .rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck,
html.dark .rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone { border-bottom-color: var(--hg-border); }
html.dark .rd-navbar-classic.rd-navbar-static * + .rd-navbar-element,
html.dark .rd-navbar-classic.rd-navbar-static * + .rd-navbar-link { border-left-color: var(--hg-border); }

/* Estado "stuck" (fixo ao rolar): no claro é azul #6090f7 com links quase pretos → barra escura translúcida */
html.dark .rd-navbar-static.rd-navbar--is-stuck,
html.dark .rd-navbar-static.rd-navbar--is-clone {
  background: rgba(15, 23, 42, .94);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .7);
}

/* Ícone social (Facebook) */
html.dark .link-social-2 { color: var(--hg-text-2); }
html.dark .link-social-2:hover { color: #82a8fa; }

/* Celular/tablet (rd-navbar-fixed, <1200px): barra do topo + painel lateral */
html.dark .rd-navbar-fixed .rd-navbar-panel { background: var(--hg-surface); color: var(--hg-text); border-bottom-color: var(--hg-border); }
html.dark .rd-navbar-fixed .rd-navbar-nav-wrap { background: var(--hg-surface); border-color: var(--hg-border); box-shadow: 8px 0 30px -10px rgba(0, 0, 0, .7); }
html.dark .rd-navbar-fixed .rd-nav-link { color: var(--hg-text-2); border-top-color: var(--hg-border); }
html.dark .rd-navbar-fixed .rd-nav-item:last-child .rd-nav-link { border-bottom-color: var(--hg-border); }
html.dark .rd-navbar-fixed .rd-navbar-nav-wrap::-webkit-scrollbar-track { background: var(--hg-soft); }
html.dark .rd-navbar-fixed .rd-navbar-dummy { background: rgba(0, 0, 0, .5); }
/* Hambúrguer: barra do meio só quando fechado (aberto ela fica transparente para formar o X) */
html.dark .rd-navbar-toggle { color: var(--hg-text); }
html.dark .rd-navbar-toggle:not(.active) span,
html.dark .rd-navbar-toggle span::before,
html.dark .rd-navbar-toggle span::after { background-color: var(--hg-text); }

/* Logo (images/logo.png): se ele for escuro e sumir no fundo escuro, descomente UMA das opções.
html.dark .rd-navbar-brand .brand img { filter: brightness(0) invert(1); }                          (logo todo branco)
html.dark .rd-navbar-brand .brand img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255,255,255,.35)); }  (contorno claro)
*/

/* ==========================================================================
   HERO (.bog-g-bandit.context-dark) — texto branco sobre a mancha azul (imagem);
   só o fundo cinza-claro #f8f8f8 em volta vira escuro. Botões ficam como estão.
   ========================================================================== */
html.dark .bog-g-bandit,
html.dark .bog-g-bandit.context-dark { background: var(--hg-bg); }

/* ==========================================================================
   "O QUE VOCÊ ENCONTRA AQUI?" (bg-gray-100 + carrossel de .box-modern)
   ========================================================================== */
html.dark .bg-gray-100 { background-color: var(--hg-soft); }
html.dark .box-modern {
  background: var(--hg-surface);
  box-shadow: 0 0 0 1px var(--hg-border), 0 12px 28px -10px rgba(0, 0, 0, .6);
}
html.dark .box-modern-title { color: var(--hg-text); }
html.dark .box-modern-icon { color: #82a8fa; }
/* Pontos do carrossel (inativos #ebebeb; ativo/hover continuam azuis) */
html.dark .owl-dot:not(.active):not(:hover):not(:focus) { background: var(--hg-border); }

/* ==========================================================================
   SOBRE NÓS (parallax com foto, fica) + CAIXA DE CONTADORES (.box-custom-3, branca)
   ========================================================================== */
html.dark .box-custom-3 {
  background: var(--hg-surface);
  box-shadow: 0 0 0 1px var(--hg-border), 0 20px 50px -12px rgba(0, 0, 0, .7);
}
html.dark .counter-classic-main { color: var(--hg-text); }
html.dark .layout-bordered-1-item::before { background: radial-gradient(circle, #475569 0%, rgba(71, 85, 105, 0) 100%); }

/* ==========================================================================
   PACOTES (parallax com foto, fica) — cards .pt-classic brancos
   A borda superior colorida vem inline do banco (cor_borda_box) e fica.
   ========================================================================== */
html.dark .pt-classic {
  background: var(--hg-surface);
  box-shadow: 0 0 0 1px var(--hg-border), 0 18px 40px -12px rgba(0, 0, 0, .7);
}
html.dark .pt-classic-title { color: #82a8fa; }          /* azul #6090f7 clareado p/ fundo escuro */
html.dark .pt-classic-price { color: var(--hg-text); }
html.dark .pt-classic-divider { background: radial-gradient(circle, #475569 0%, rgba(71, 85, 105, 0) 100%); }
/* Listas de benefícios (<style> do index: .pt-classic-list1/2/3 li { color:#262f3c }) */
html.dark :is(.pt-classic-list1, .pt-classic-list2, .pt-classic-list3) li { color: var(--hg-text-2); }
html.dark :is(.pt-classic-list1, .pt-classic-list2, .pt-classic-list3) li[aria-disabled='true'] { color: #64748b; }
html.dark .pt-classic-note { color: var(--hg-muted); opacity: .8; }
/* Botão contornado "COMPRAR"/"CADASTRE-SE" (borda #ebebeb, texto cinza). Hover amarelo do template fica. */
html.dark .pt-classic .button-default-outline:not(:hover):not(:active) { color: var(--hg-text-2); border-color: #475569; }
/* Setas do carrossel de pacotes */
html.dark .owl-carousel_type-2 :is(.owl-prev, .owl-next) {
  background: var(--hg-surface);
  color: var(--hg-text);
  box-shadow: 0 0 0 1px var(--hg-border), 0 6px 18px rgba(0, 0, 0, .5);
}
html.dark .owl-carousel_type-2 :is(.owl-prev, .owl-next):hover { color: #82a8fa; }

/* ==========================================================================
   BÔNUS / COMBO MASTER (fundo da página; card .hg-bonus-card branco)
   Selo em degradê, botão azul .botao-harmonioso e texto em degradê .exclusive ficam.
   ========================================================================== */
html.dark .hg-bonus-card {
  background-color: var(--hg-surface);
  border-color: rgba(96, 165, 250, .28);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);
}
html.dark .hg-bonus-card:hover { box-shadow: 0 22px 48px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(96, 165, 250, .35); }
html.dark .hg-bonus-media img { box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
html.dark .hg-bonus-body ul li { color: var(--hg-text-2); }
html.dark .hg-bonus-price-row .price { color: var(--hg-muted); }
html.dark .hg-bonus-price-row .free { color: #60a5fa; }
/* Caixa "Você economiza R$87,97" (#f8f9fa) */
html.dark .destaque-economia {
  background-color: var(--hg-surface);
  box-shadow: 0 0 0 1px var(--hg-border), 0 10px 26px -10px rgba(0, 0, 0, .6);
}
html.dark .destaque-economia h2 { color: #60a5fa; }
html.dark .valor-riscado::after { background-color: #f87171; }

/* ==========================================================================
   FAQ (#sessao-tutorial, bg-gray-100 → já coberto acima) — acordeão .card-classic
   ========================================================================== */
html.dark .card-classic { border-color: var(--hg-border); }
html.dark .card-classic.active {
  background: var(--hg-surface);
  border-color: var(--hg-border);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6);
}
html.dark .card-classic .card-title a { color: var(--hg-text); }
html.dark .card-classic .card-title a:hover { color: #82a8fa; }
html.dark .card-classic .card-body { color: var(--hg-text-2); }
html.dark .card-classic .card-title a.collapsed .card-arrow::before,
html.dark .card-classic .card-title a.collapsed .card-arrow::after { color: var(--hg-muted); }

/* ==========================================================================
   DEPOIMENTOS (.section sem fundo → herda --hg-bg) — balões .quote-modern
   O "rabinho" do balão é feito com bordas: ::before = contorno, ::after = preenchimento.
   ========================================================================== */
html.dark .quote-modern {
  background: var(--hg-surface);
  box-shadow: 0 0 0 1px var(--hg-border);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
html.dark .quote-modern::before { border-color: var(--hg-border) transparent transparent transparent; }
html.dark .quote-modern::after  { border-color: var(--hg-surface) transparent transparent transparent; }
html.dark .quote-modern-cite { color: var(--hg-text); }
html.dark .quote-modern-position { color: #82a8fa; }
html.dark .quote-modern-header + .quote-modern-main { border-top-color: var(--hg-border); }
html.dark .quote-modern-text { color: var(--hg-text-2); }
html.dark .button-load-icon { color: var(--hg-muted); }
html.dark .button-load-icon:hover { color: #82a8fa; }

/* ==========================================================================
   RODAPÉ (inc/rodape.php — .footer-light branco)
   ========================================================================== */
html.dark .footer-light { background: var(--hg-soft); border-top: 1px solid var(--hg-border); }
html.dark .footer-light-list a { color: var(--hg-text-2); }
html.dark .footer-light-list a:hover { color: #82a8fa; }
html.dark p.rights { color: var(--hg-muted); }

/* ---------- Cards e blocos próprios de páginas públicas (pacotes, tutorial) ---------- */
html.dark .card1 { background-color: var(--hg-surface); border: 1px solid var(--hg-border); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
html.dark .card1 h2 { color: var(--hg-text); }
html.dark .card1 ul li { color: var(--hg-text-2); }
html.dark .card-content { background: var(--hg-surface); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
html.dark .video-section { background: var(--hg-soft); }
html.dark .modal-footer { border-top-color: var(--hg-border); }

/* ---------- Páginas legais (politica-de-privacidade --priv-*, termos-de-servico --legal-*) ----------
   --*-primary NÃO muda: é fundo do topo escuro E cor dos títulos — os títulos ganham regra própria. */
html.dark {
  --priv-bg: var(--hg-bg);  --priv-text: var(--hg-text-2);  --priv-text-light: var(--hg-muted);  --priv-border: var(--hg-border);
  --legal-bg: var(--hg-bg); --legal-text: var(--hg-text-2); --legal-text-light: var(--hg-muted); --legal-border: var(--hg-border);
}
html.dark :is(.privacy-content, .privacy-toc, .legal-content, .legal-toc) { background: var(--hg-surface); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
html.dark :is(.privacy-content h2, .privacy-content h3, .privacy-toc h3, .legal-content h2, .legal-content h3, .legal-toc h3) { color: var(--hg-text); }
html.dark :is(.privacy-contact-info, .legal-intro) { background: var(--hg-surface-2); }
html.dark .legal-intro { border-left-color: #64748b; }
html.dark .legal-toc::-webkit-scrollbar-track { background: var(--hg-surface-2); }

/* ---------- Acordeão do template (politica-de-cookies) e listas (simulados-pdf) ---------- */
html.dark .card-corporate .card-link { color: var(--hg-text); }
html.dark .list-style-2 li { color: var(--hg-text-2); }

/* ---------- Abas do Bootstrap 4 (duvidas: GERAL / …) ---------- */
html.dark .nav-tabs { border-bottom-color: var(--hg-border); }
html.dark .nav-tabs .nav-link { color: var(--hg-muted); }
html.dark .nav-tabs .nav-link:hover { color: var(--hg-text-2); border-color: var(--hg-border) var(--hg-border) transparent; }
html.dark :is(.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link) { color: var(--hg-text); background-color: var(--hg-surface); border-color: var(--hg-border) var(--hg-border) var(--hg-surface); }

/* ---------- Preloader do template (tela "Carregando..." de cada página pública): sem flash branco no escuro ---------- */
html.dark .preloader { background: var(--hg-bg); }
html.dark .preloader-body, html.dark .preloader-body p { color: var(--hg-muted); }

/* ---------- Faixa de navegação "Home / Página" do template (todas as públicas menos a index) ---------- */
html.dark .breadcrumbs-custom-aside { background: var(--hg-bg); }
html.dark .breadcrumbs-custom-path { background: var(--hg-surface); border: 1px solid var(--hg-border); }
html.dark :is(.breadcrumbs-custom-path a, .breadcrumbs-custom-path a:active, .breadcrumbs-custom-path a:focus) { color: var(--hg-text-2); }
html.dark .breadcrumbs-custom-path a:hover { color: #93c5fd; }
html.dark .breadcrumbs-custom-path li.active { color: var(--hg-muted); }
html.dark section.breadcrumbs-custom + section { border-top-color: var(--hg-border); }

/* ---------- Cards do template: produtos (simulados-pdf .profile-modern) e carrossel (sobre .owl-carousel_type-1) ---------- */
html.dark .profile-modern { background: var(--hg-surface); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
html.dark .profile-modern-main-item { background: var(--hg-surface); }
html.dark .profile-modern-main { color: var(--hg-muted); }
html.dark .owl-carousel_type-1 { background: var(--hg-surface); box-shadow: 0 0 29px 0 rgba(0, 0, 0, .5); }
/* Citações dentro do carrossel escurecido (sobre: depoimentos) */
html.dark .quote-classic-cite { color: var(--hg-text); }
html.dark .quote-classic-text { color: var(--hg-text-2); }
html.dark .quote-classic-position { color: #93c5fd; }

/* ---------- Home: a forma azul do topo é uma IMAGEM (images/bg-header-1762x1762.png) — o CSS de cores não a alcança.
   Opção A escolhida pelo Diego (01/10/2026): azul-marinho profundo, mantendo a forma. Só no escuro. ---------- */
html.dark img[src*="bg-header-1762"] { filter: brightness(.42) saturate(1.25) hue-rotate(4deg); }
/* Mesma opção A nas seções azuis de parallax (o plugin desenha o fundo como <img>): index "Sobre nós" (bg-image-1.jpg)
   e "Pacotes" (bg-image-1-1.jpg); sobre.php "Depoimentos" (bg-image-1-1.jpg). Conteúdo (texto, contadores, cards) não é afetado. */
html.dark img[src*="images/bg-image-1"] { filter: brightness(.42) saturate(1.25) hue-rotate(4deg); }