/* ==========================================================================
   Raja Growth — versão Clean
   Mesmo conteúdo, visual mais limpo: fundo claro em todas as páginas, títulos
   em sans-serif, sem grão, brilhos, grade de fundo, fitas inclinadas e cursor.
   Carregado depois de base.css quando <html data-theme="clean">.
   ========================================================================== */

html[data-theme="clean"] {
  --font-serif: "Inter", system-ui, -apple-system, sans-serif;
}

/* Todas as skins viram claras */
html[data-theme="clean"] body {
  --bg: #ffffff;
  --bg-2: var(--paper);
  --bg-deep: var(--paper);
  --fg: var(--ink);
  --fg-muted: rgba(35, 31, 32, 0.68);
  --fg-faint: rgba(35, 31, 32, 0.64);
  --line: rgba(35, 31, 32, 0.1);
  --line-strong: rgba(35, 31, 32, 0.2);
  --card: var(--paper);
  --accent: var(--red);
  --shadow: 0 24px 50px -30px rgba(35, 31, 32, 0.28);
  background: #fff;
  color: var(--ink);
}
html[data-theme="clean"] .on-deep,
html[data-theme="clean"] .on-paper { background: var(--paper); }
html[data-theme="clean"] body::after,
html[data-theme="clean"] .grid-lines,
html[data-theme="clean"] .glow,
html[data-theme="clean"] .badge-rot,
html[data-theme="clean"] .scroll-cue { display: none; }

/* Tipografia: sans-serif firme, destaque em vermelho sem itálico */
html[data-theme="clean"] h1, html[data-theme="clean"] h2, html[data-theme="clean"] h3,
html[data-theme="clean"] .h-hero, html[data-theme="clean"] .h1, html[data-theme="clean"] .h2 {
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; font-variation-settings: normal;
}
html[data-theme="clean"] .h-hero { font-size: clamp(2.6rem, 5.4vw, 5.2rem) !important; }
html[data-theme="clean"] em, html[data-theme="clean"] .it { font-style: normal; }
html[data-theme="clean"] .manifesto { font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 3rem); }
html[data-theme="clean"] .stat .n, html[data-theme="clean"] .case .big, html[data-theme="clean"] .big-n { font-weight: 600; letter-spacing: -0.04em; }

/* Logo escuro em todo lugar */
html[data-theme="clean"] .logo .l-light { display: none; }
html[data-theme="clean"] .logo .l-dark { display: block; }
html[data-theme="clean"] .ftr-logo .fl-on-dark { display: none; }
html[data-theme="clean"] .ftr-logo .fl-on-light { display: block; }

/* Hero mais compacto */
html[data-theme="clean"] .hero { min-height: auto; padding: 150px 0 90px; }

/* Faixas retas e discretas */
html[data-theme="clean"] .ribbons { height: auto; display: block; }
html[data-theme="clean"] .ribbons .band { position: relative; width: 100%; }
html[data-theme="clean"] .band.tilted { transform: none; background: transparent; color: var(--ink); border-block: 1px solid var(--line); --accent: var(--red); --fg-muted: var(--ink); }
html[data-theme="clean"] .band.tilted.alt { display: none; }

/* Cards de métrica e diagrama da home em versão clara */
html[data-theme="clean"] .metric { background: #fff; color: var(--ink); border-color: var(--line); backdrop-filter: none; }
html[data-theme="clean"] .metric .k { color: rgba(35, 31, 32, 0.66); }
html[data-theme="clean"] .metric .d { color: var(--red-deep); }
html[data-theme="clean"] .fl-node rect { fill: #fff; stroke: rgba(35, 31, 32, 0.15); }
html[data-theme="clean"] .fl-node text { fill: var(--ink); }
html[data-theme="clean"] .fl-line { stroke: rgba(172, 47, 36, 0.35); }
html[data-theme="clean"] .fl-pulse { fill: var(--red); filter: none; }
html[data-theme="clean"] .map-svg .wp text { fill: var(--ink); }
html[data-theme="clean"] .map-svg .wp circle { fill: #fff; }
html[data-theme="clean"] .map-svg .topo ellipse { stroke: rgba(172, 47, 36, 0.14); }
html[data-theme="clean"] .map-svg .route { filter: none; stroke: var(--red); }

/* Cards e botões */
html[data-theme="clean"] .card, html[data-theme="clean"] .case { box-shadow: none; }
html[data-theme="clean"] .spot::before { display: none; }
html[data-theme="clean"] .btn-ghost::before { background: var(--ink); }
html[data-theme="clean"] .btn-ghost:hover { color: #fff; }
html[data-theme="clean"] .form-card { background: #fff; }
html[data-theme="clean"] .icp-tabs button[aria-selected="true"] { background: var(--ink); }
html[data-theme="clean"] .fn-step { background: var(--paper); border-color: var(--line); }
html[data-theme="clean"] .fn-step:last-child { background: var(--red); color: #fff; }
html[data-theme="clean"] .lt-row .bar i { background: var(--red); }

/* CTA final em vermelho da marca, rodapé claro */
html[data-theme="clean"] .cta-final { background: var(--red); }
html[data-theme="clean"] .cta-final .arrow-bg { opacity: 0.14; }
html[data-theme="clean"] .cta-final .eyebrow, html[data-theme="clean"] .cta-final .eyebrow::before { color: #fff; background-color: transparent; }
html[data-theme="clean"] .cta-final .eyebrow::before { background: #fff; }
html[data-theme="clean"] .cta-final .accent { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
html[data-theme="clean"] .ftr { background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-muted: rgba(35, 31, 32, 0.7); --line: rgba(35, 31, 32, 0.1); --line-strong: rgba(35, 31, 32, 0.2); }
html[data-theme="clean"] .ftr ul a { color: var(--ink); }
html[data-theme="clean"] .ftr ul a:hover { color: var(--red); }
html[data-theme="clean"] .ftr .accent { color: var(--red); }
html[data-theme="clean"] .mnav { background: #fff; color: var(--ink); }
html[data-theme="clean"] .mnav a { border-color: var(--line); }
html[data-theme="clean"] .mnav .sub a { color: rgba(35, 31, 32, 0.7); }
html[data-theme="clean"] .burger i { background: var(--ink); }

/* Seções de assinatura escuras ficam claras */
html[data-theme="clean"] .cv-stage .chip { background: #fff; border-color: var(--line); color: var(--ink); }
html[data-theme="clean"] .cv-core b { color: var(--ink); }
html[data-theme="clean"] .vs .yes { background: var(--ink) !important; color: #fff !important; }


/* Rodada do Theo */
html[data-theme="clean"] .on-red { background: var(--red); color: #fff; }
html[data-theme="clean"] .hh-steps .metric { background: #fff; border-color: var(--line); }
html[data-theme="clean"] .hh-title { font-size: clamp(2.6rem, 6vw, 5.2rem) !important; }
html[data-theme="clean"] .cta-dock { transform: none; transition: opacity .3s; }
html[data-theme="clean"] .cta-dock .btn { box-shadow: none; }
@media (max-width: 899px) { html[data-theme="clean"] .cta-dock { background: #fff; border-top: 1px solid var(--line); } }
@media (min-width: 900px) { html[data-theme="clean"] .cta-dock { padding: 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); } }
html[data-theme="clean"] .svc-row::after, html[data-theme="clean"] .deliv-list li::after { transform: scaleX(1); transition: none; }
html[data-theme="clean"] .result-band .big { font-weight: 600; }
html[data-theme="clean"] #numeros .stat .n { font-weight: 600; }
html[data-theme="clean"] .ftr-cta .accent { color: var(--red); }

/* Contraste na Clean clara: botão de versão do menu, status de campanha e rótulo do BI */
html[data-theme="clean"] .mnav-ver { color: rgba(35, 31, 32, 0.72); }
html[data-theme="clean"] .st-win { background: rgba(31, 138, 76, 0.12); color: #17703c; }
html[data-theme="clean"] .st-test { background: rgba(172, 47, 36, 0.1); color: var(--red-deep); }
html[data-theme="clean"] .cv-core .mono { color: rgba(35, 31, 32, 0.7); }
/* Aviso de cookies na Clean clara */
html[data-theme="clean"] .cookie { --ck-fg: var(--ink); --ck-muted: rgba(35, 31, 32, 0.72); --ck-line: rgba(35, 31, 32, 0.12); background: rgba(255, 255, 255, 0.9); }
html[data-theme="clean"] .ck-btn { box-shadow: inset 0 0 0 1px rgba(35, 31, 32, 0.3); }
html[data-theme="clean"] .ck-btn:hover { background: rgba(35, 31, 32, 0.06); }
html[data-theme="clean"] .ck-btn.is-primary { background: var(--ink); color: #fff; }
html[data-theme="clean"] .ck-opt i { background: rgba(35, 31, 32, 0.16); }
html[data-theme="clean"] .ftr ul .ftr-link { color: var(--ink); }

/* ==========================================================================
   Modo escuro automático da versão Clean (segue o aparelho).
   A versão completa já é escura por natureza; aqui a Clean ganha uma paleta
   escura própria da marca: grafite quente, papel como texto, vermelho clareado
   (--red-hi) como acento para manter o contraste acima de 4,5:1.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html[data-theme="clean"] { color-scheme: dark; }
  html[data-theme="clean"] body,
  html[data-theme="clean"] .on-paper,
  html[data-theme="clean"] .on-deep,
  html[data-theme="clean"] .on-red .form-card,
  html[data-theme="clean"] .ftr {
    --bg: #171415; --bg-2: #211d1e; --bg-deep: #211d1e;
    --fg: var(--paper); --fg-muted: rgba(247, 243, 241, 0.72); --fg-faint: rgba(247, 243, 241, 0.56);
    --line: rgba(247, 243, 241, 0.12); --line-strong: rgba(247, 243, 241, 0.24);
    --card: #211d1e; --accent: var(--red-hi);
    --shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6);
  }
  html[data-theme="clean"] body { background: #171415; color: var(--paper); }
  html[data-theme="clean"] .on-deep, html[data-theme="clean"] .on-paper { background: #1d191a; color: var(--paper); }
  html[data-theme="clean"] .on-paper .btn::before { background: var(--paper); }
  html[data-theme="clean"] .logo .l-dark { display: none; }
  html[data-theme="clean"] .logo .l-light { display: block; }
  html[data-theme="clean"] .ftr-logo .fl-on-light { display: none; }
  html[data-theme="clean"] .ftr-logo .fl-on-dark { display: block; }
  html[data-theme="clean"] .band.tilted { color: var(--paper); --fg-muted: var(--paper); --accent: var(--red-hi); }
  html[data-theme="clean"] .metric, html[data-theme="clean"] .hh-steps .metric { background: #211d1e; color: var(--paper); border-color: var(--line); }
  html[data-theme="clean"] .metric .k { color: rgba(247, 243, 241, 0.66); }
  html[data-theme="clean"] .metric .d { color: var(--red-hi); }
  html[data-theme="clean"] .fl-node rect { fill: #211d1e; stroke: rgba(247, 243, 241, 0.16); }
  html[data-theme="clean"] .fl-node text { fill: var(--paper); }
  html[data-theme="clean"] .map-svg .wp text { fill: var(--paper); }
  html[data-theme="clean"] .map-svg .wp circle { fill: #211d1e; }
  html[data-theme="clean"] .btn-ghost::before { background: var(--paper); }
  html[data-theme="clean"] .btn-ghost:hover { color: var(--ink); }
  html[data-theme="clean"] .form-card { background: #211d1e; }
  html[data-theme="clean"] .icp-tabs button[aria-selected="true"] { background: var(--red); }
  html[data-theme="clean"] .fn-step { background: #211d1e; }
  html[data-theme="clean"] .ftr { background: #120f10; color: var(--paper); }
  html[data-theme="clean"] .ftr ul a { color: rgba(247, 243, 241, 0.82); }
  html[data-theme="clean"] .ftr ul a:hover, html[data-theme="clean"] .ftr .accent, html[data-theme="clean"] .ftr-cta .accent { color: var(--red-hi); }
  html[data-theme="clean"] .mnav { background: #171415; color: var(--paper); }
  html[data-theme="clean"] .mnav .sub a { color: rgba(247, 243, 241, 0.7); }
  html[data-theme="clean"] .burger i { background: var(--paper); }
  html[data-theme="clean"] .cv-stage .chip { background: #211d1e; color: var(--paper); }
  html[data-theme="clean"] .cv-core b { color: var(--paper); }
  html[data-theme="clean"] .vs .yes { background: var(--paper) !important; color: var(--ink) !important; }
  html[data-theme="clean"] .orbit-ring--outer { border-color: rgba(247, 243, 241, 0.16); }
  html[data-theme="clean"] .orbit-face img { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), 0 0 0 2px #2b2627; }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="clean"] .sheet {
    --fg: var(--paper); --fg-muted: rgba(247,243,241,.72); --fg-faint: rgba(247,243,241,.56);
    --line: rgba(247,243,241,.12); --line-strong: rgba(247,243,241,.24); --card: rgba(247,243,241,.06); --accent: var(--red-hi);
    background: #211d1e; color: var(--paper);
  }
  html[data-theme="clean"] .sheet-grab { background: #211d1e; }
  html[data-theme="clean"] .sheet-grab span { background: rgba(247,243,241,.25); }
  html[data-theme="clean"] .sheet-x { background: rgba(247,243,241,.1); color: var(--paper); }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="clean"] .bento .card { background: #211d1e; border-color: var(--line); }
  html[data-theme="clean"] .sig-feed-sec { background: #1d191a; }
  html[data-theme="clean"] .mini-kpis span { background: rgba(247, 243, 241, 0.08); }
  html[data-theme="clean"] .exp .up { color: var(--red-hi); }
  html[data-theme="clean"] .sig-serp .res { background: #fff; }
  html[data-theme="clean"] .mnav-ver { color: rgba(247, 243, 241, 0.72); }
  html[data-theme="clean"] .st-win { background: rgba(127, 212, 155, 0.15); color: #7fd49b; }
  html[data-theme="clean"] .st-test { background: rgba(232, 106, 92, 0.15); color: var(--red-hi); }
  html[data-theme="clean"] .cv-core .mono { color: rgba(247, 243, 241, 0.7); }
  html[data-theme="clean"] .cookie { --ck-fg: var(--paper); --ck-muted: rgba(247, 243, 241, 0.74); --ck-line: rgba(247, 243, 241, 0.16); background: rgba(33, 29, 30, 0.9); }
  html[data-theme="clean"] .ck-btn { box-shadow: inset 0 0 0 1px rgba(247, 243, 241, 0.4); }
  html[data-theme="clean"] .ck-btn.is-primary { background: var(--paper); color: var(--ink); }
  html[data-theme="clean"] .ck-opt i { background: rgba(247, 243, 241, 0.22); }
  html[data-theme="clean"] .ftr ul .ftr-link { color: rgba(247, 243, 241, 0.82); }
  /* Maquetes de tela (busca do Google, Perfil da Empresa, laboratório de velocidade)
     continuam claras, como um print da tela real dentro da página escura */
  html[data-theme="clean"] :is(.sig-serp, .sig-local, .sig-lab, .sig-lab-sec .compare) {
    --fg: var(--ink); --fg-muted: rgba(35, 31, 32, 0.7); --fg-faint: rgba(35, 31, 32, 0.64);
    --line: rgba(35, 31, 32, 0.12); --line-strong: rgba(35, 31, 32, 0.24); --accent: var(--red); color: var(--ink);
  }
}
@media (prefers-color-scheme: dark) and (max-width: 899px) { html[data-theme="clean"] .cta-dock { background: rgba(23, 20, 21, 0.86); border-top-color: var(--line); } }
@media (prefers-color-scheme: dark) and (min-width: 900px) { html[data-theme="clean"] .cta-dock { background: #211d1e; border-color: var(--line); } }

html[data-theme="clean"] .cta-final .lead { color: rgba(255, 255, 255, 0.92) !important; }
