/* ═══════════════════════════════════════════════════════════
   Milan Contabilidade — style.css
   Sistema de temas via CSS Custom Properties
   Paleta: Grafite · Vermelho #CC2222 · Cappuccino #B8A99A
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   VARIÁVEIS — MODO CLARO (padrão)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Cores fixas da marca (nunca mudam) ── */
  --red:            #CC2222;
  --red-lt:         #E03333;
  --red-dim:        #8C1818;
  --red-bg:         rgba(204,34,34,.09);
  --cappuccino:     #B8A99A;
  --cappuccino-lt:  #D4C9BE;
  --cappuccino-dk:  #8C7B6E;

  /* ── Fundos ── */
  --bg:             #FFFFFF;
  --bg-alt:         #F5F4F2;
  --bg-alt2:        #ECEAE7;

  /* ── Superfícies / cards ── */
  --card-bg:        #FFFFFF;
  --card-bg-alt:    #F5F4F2;
  --card-border:    #E2DED9;
  --card-shadow:    rgba(26,26,26,.09);

  /* ── Textos ── */
  --text-primary:   #1C1A18;
  --text-secondary: #4A4641;
  --text-muted:     #7A7570;
  --heading:        #111111;

  /* ── Hero — CLARO: fundo off-white, textos escuros ── */
  --hero-bg-start:  #F5F4F2;
  --hero-bg-end:    #ECEAE7;
  --hero-h1:        #111111;
  --hero-sub:       #4A4641;
  --hero-star:      var(--red);
  --hero-eyebrow:   var(--cappuccino-dk);
  --hero-stat-num:  #111111;
  --hero-stat-lbl:  #7A7570;
  --hero-grid-line: rgba(26,26,26,.05);
  --hero-glow-red:  rgba(204,34,34,.07);
  --hero-glow-cap:  rgba(184,169,154,.12);
  --hero-diag:      rgba(204,34,34,.08);
  --hero-scroll:    rgba(26,26,26,.3);
  --hero-scroll-ln: rgba(204,34,34,.4);

  /* ── Navbar (sempre escura para contraste com o logo) ── */
  --nav-bg:         #1A1A1A;
  --nav-text:       rgba(255,255,255,.78);
  --nav-text-hover: var(--cappuccino);
  --nav-shadow:     rgba(0,0,0,.18);

  /* ── Botão outline (contextual) ── */
  --btn-outline-color:  #1C1A18;
  --btn-outline-border: rgba(26,26,26,.35);
  --btn-outline-hover:  var(--red);

  /* ── Seção Gráfico / KPI (sempre escura por design) ── */
  --chart-bg:       #1A1A1A;
  --chart-surface:  rgba(255,255,255,.04);
  --chart-border:   rgba(255,255,255,.08);
  --chart-title:    #FFFFFF;
  --chart-sub:      rgba(255,255,255,.32);
  --chart-legend:   rgba(255,255,255,.48);
  --chart-label:    rgba(255,255,255,.38);
  --chart-grid:     rgba(184,169,154,.04);
  --kpi-num:        #FFFFFF;
  --kpi-label:      rgba(255,255,255,.4);
  --kpi-card-bg:    rgba(255,255,255,.04);
  --kpi-card-bord:  rgba(255,255,255,.07);

  /* ── Seção CTA (sempre escura por design) ── */
  --cta-bg-start:   #111111;
  --cta-bg-end:     #1D1D1D;
  --cta-h2:         #FFFFFF;
  --cta-p:          rgba(255,255,255,.52);

  /* ── Footer (sempre escuro por design) ── */
  --footer-bg:      #141414;
  --footer-text:    rgba(255,255,255,.36);
  --footer-link:    rgba(255,255,255,.42);
  --footer-link-hv: var(--cappuccino);
  --footer-border:  rgba(255,255,255,.07);

  /* ── Bordas, sombras, utils ── */
  --border:         #E2DED9;
  --shadow:         rgba(26,26,26,.11);
  --shadow-red:     rgba(204,34,34,.22);
  --radius:         6px;
  --trans:          .32s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════
   VARIÁVEIS — MODO ESCURO
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* ── Fundos ── */
  --bg:             #111111;
  --bg-alt:         #181818;
  --bg-alt2:        #1E1E1E;

  /* ── Superfícies / cards ── */
  --card-bg:        #1E1E1E;
  --card-bg-alt:    #252525;
  --card-border:    #303030;
  --card-shadow:    rgba(0,0,0,.35);

  /* ── Textos ── */
  --text-primary:   #F0EDE8;
  --text-secondary: #B0AAA4;
  --text-muted:     #6B6560;
  --heading:        #F0EDE8;

  /* ── Hero — ESCURO: gradiente profundo ── */
  --hero-bg-start:  #0E0E0E;
  --hero-bg-end:    #1A1A1A;
  --hero-h1:        #FFFFFF;
  --hero-sub:       rgba(255,255,255,.55);
  --hero-star:      var(--red);
  --hero-eyebrow:   var(--cappuccino);
  --hero-stat-num:  #FFFFFF;
  --hero-stat-lbl:  rgba(255,255,255,.42);
  --hero-grid-line: rgba(184,169,154,.05);
  --hero-glow-red:  rgba(204,34,34,.14);
  --hero-glow-cap:  rgba(184,169,154,.07);
  --hero-diag:      rgba(204,34,34,.18);
  --hero-scroll:    rgba(255,255,255,.25);
  --hero-scroll-ln: rgba(204,34,34,.5);

  /* ── Navbar ── */
  --nav-bg:         #0E0E0E;
  --nav-shadow:     rgba(0,0,0,.4);

  /* ── Botão outline ── */
  --btn-outline-color:  rgba(255,255,255,.85);
  --btn-outline-border: rgba(255,255,255,.3);
  --btn-outline-hover:  var(--cappuccino);

  /* ── Seção Gráfico / KPI ── */
  --chart-bg:       #0E0E0E;

  /* ── Seção CTA ── */
  --cta-bg-start:   #0A0A0A;
  --cta-bg-end:     #141414;

  /* ── Footer ── */
  --footer-bg:      #0A0A0A;

  /* ── Bordas / sombras ── */
  --border:         #2E2E2E;
  --shadow:         rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }

/* Transição suave global ao trocar tema */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .3s ease !important;
}
body {
  font-family:'DM Sans', sans-serif;
  color:var(--text-primary);
  background:var(--bg);
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
img { display:block; max-width:100%; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }

/* ═══════════════════════════════════════════════════════════
   TIPOGRAFIA
   ═══════════════════════════════════════════════════════════ */
h1,h2,h3 {
  font-family:'Cormorant Garamond',serif;
  line-height:1.15;
  color:var(--heading);
}
h1 { font-size:clamp(2.2rem,5vw,4rem); font-weight:700; }
h2 { font-size:clamp(1.8rem,3.5vw,2.9rem); font-weight:600; }
h3 { font-size:1.15rem; font-weight:600; }
p  { line-height:1.75; color:var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   UTILITÁRIOS
   ═══════════════════════════════════════════════════════════ */
.container { max-width:1160px; margin:0 auto; padding:0 24px; }
.accent    { color:var(--red); }
.cap       { color:var(--cappuccino); }
section    { padding:96px 0; }

.tag {
  display:inline-block;
  font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cappuccino);
  border:1px solid var(--cappuccino-dk);
  padding:4px 14px; border-radius:30px; margin-bottom:16px;
}

/* ═══════════════════════════════════════════════════════════
   BOTÕES
   ═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 28px; border-radius:var(--radius);
  font-family:'DM Sans',sans-serif; font-size:.9rem;
  font-weight:600; cursor:pointer;
  transition:var(--trans); border:none;
  text-decoration:none; letter-spacing:.01em; white-space:nowrap;
}
/* Vermelho — igual nos dois temas */
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover {
  background:var(--red-lt); transform:translateY(-2px);
  box-shadow:0 8px 24px var(--shadow-red);
}
/* Outline — adapta ao contexto via variáveis */
.btn-outline {
  background:transparent;
  color:var(--btn-outline-color);
  border:1.5px solid var(--btn-outline-border);
}
.btn-outline:hover {
  border-color:var(--btn-outline-hover);
  color:var(--btn-outline-hover);
  transform:translateY(-2px);
}
/* WhatsApp — igual nos dois temas */
.btn-whatsapp { background:#25D366; color:#fff; }
.btn-whatsapp:hover {
  background:#1ebe5a; transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,211,102,.35);
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR — sempre escura (contraste com logo)
   ═══════════════════════════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; padding:13px 0;
  background:var(--nav-bg);
  transition:background var(--trans), padding var(--trans), box-shadow var(--trans);
}
#navbar.scrolled {
  padding:9px 0;
  box-shadow:0 4px 24px var(--nav-shadow);
}
.nav-inner {
  display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}

/* Logo */
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.nav-logo-img {
  height:44px; width:auto; max-width:180px;
  object-fit:contain; display:block;
  border-radius:6px;
  transition:opacity var(--trans);
}
.nav-logo-img:hover { opacity:.85; }

/* Links */
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a {
  font-size:.84rem; font-weight:500;
  color:var(--nav-text);
  letter-spacing:.03em; white-space:nowrap;
  transition:color var(--trans);
}
.nav-links a:hover { color:var(--nav-text-hover); }

/* Direita: CTA + toggle + hamburger */
.nav-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-cta-btn { display:inline-flex; }

/* Toggle de tema */
#themeToggle {
  width:38px; height:38px; border-radius:8px;
  border:1.5px solid rgba(255,255,255,.22);
  background:transparent;
  color:rgba(255,255,255,.75); font-size:1.1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:var(--trans); flex-shrink:0;
}
#themeToggle:hover { border-color:var(--cappuccino); color:var(--cappuccino); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column;
  gap:5px; cursor:pointer; padding:4px; flex-shrink:0;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:#fff; border-radius:2px; transition:var(--trans);
}

/* ═══════════════════════════════════════════════════════════
   MENU MOBILE
   ═══════════════════════════════════════════════════════════ */
.mobile-menu {
  display:none; position:fixed; inset:0;
  background:var(--nav-bg);
  z-index:1100; flex-direction:column;
  align-items:center; justify-content:center;
  gap:28px; padding:40px 24px;
}
.mobile-menu.open { display:flex; }
.mobile-menu-logo {
  position:absolute; top:20px; left:24px;
  height:40px; width:auto; max-width:160px;
  object-fit:contain; border-radius:6px;
}
.mobile-close {
  position:absolute; top:20px; right:24px;
  font-size:1.8rem; color:rgba(255,255,255,.7);
  cursor:pointer; line-height:1; transition:color var(--trans);
  background:none; border:none;
}
.mobile-close:hover { color:var(--cappuccino); }
.mobile-menu a {
  font-family:'Cormorant Garamond',serif;
  font-size:1.9rem; font-weight:600;
  color:rgba(255,255,255,.85); transition:color var(--trans);
}
.mobile-menu a:hover { color:var(--cappuccino); }
.mobile-menu .btn { font-size:.9rem; padding:14px 28px; }

/* ═══════════════════════════════════════════════════════════
   HERO — fundo e textos controlados por variáveis de tema
   ═══════════════════════════════════════════════════════════ */
#hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding:0;
}

/* Fundo principal — muda com o tema via variáveis */
.hero-bg {
  position:absolute; inset:0; z-index:0;
  transition:background-color .4s ease, opacity .4s ease;
}
/* Modo CLARO: fundo quente off-white */
:root .hero-bg {
  background: linear-gradient(150deg, #F5F4F2 0%, #ECEAE7 60%, #E4E0DA 100%);
}
/* Modo ESCURO: fundo grafite profundo */
[data-theme="dark"] .hero-bg {
  background: linear-gradient(135deg, #0E0E0E 0%, #1A1A1A 55%, #212121 100%);
}

/* Grade sutil — linhas adaptadas ao tema */
.hero-grid {
  position:absolute; inset:0; z-index:1;
  background-size:64px 64px;
}
:root .hero-grid {
  background-image:
    linear-gradient(rgba(26,26,26,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,.06) 1px, transparent 1px);
}
[data-theme="dark"] .hero-grid {
  background-image:
    linear-gradient(rgba(184,169,154,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,169,154,.05) 1px, transparent 1px);
}

/* Manchas de luz — explícitas por tema */
.hero-glow {
  position:absolute; width:520px; height:520px;
  border-radius:50%; top:-60px; right:5%; z-index:1;
}
:root .hero-glow {
  background:radial-gradient(circle, rgba(204,34,34,.09) 0%, transparent 68%);
}
[data-theme="dark"] .hero-glow {
  background:radial-gradient(circle, rgba(204,34,34,.16) 0%, transparent 68%);
}

.hero-glow2 {
  position:absolute; width:340px; height:340px;
  border-radius:50%; bottom:-40px; left:-40px; z-index:1;
}
:root .hero-glow2 {
  background:radial-gradient(circle, rgba(184,169,154,.14) 0%, transparent 70%);
}
[data-theme="dark"] .hero-glow2 {
  background:radial-gradient(circle, rgba(184,169,154,.07) 0%, transparent 70%);
}

.hero-diagonal {
  position:absolute; top:0; right:30%;
  width:1px; height:100%; z-index:1;
}
:root .hero-diagonal {
  background:linear-gradient(to bottom,
    transparent,
    rgba(204,34,34,.1) 30%,
    rgba(184,169,154,.12) 70%,
    transparent);
}
[data-theme="dark"] .hero-diagonal {
  background:linear-gradient(to bottom,
    transparent,
    rgba(204,34,34,.2) 30%,
    rgba(184,169,154,.1) 70%,
    transparent);
}

/* Layout interno */
.hero-layout {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 400px;
  gap:60px; align-items:center;
  padding-top:110px; padding-bottom:60px; min-height:100vh;
}
.hero-content { max-width:600px; }

/* Eyebrow */
.hero-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hero-eyebrow-line { width:32px; height:1.5px; background:var(--red); flex-shrink:0; }
.hero-eyebrow-text {
  font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hero-eyebrow);
}
/* Modo claro: eyebrow text mais escuro para contraste */
:root .hero-eyebrow-text { color:var(--cappuccino-dk); }
[data-theme="dark"] .hero-eyebrow-text { color:var(--cappuccino); }

/* Estrelas */
.hero-stars { display:flex; align-items:center; gap:4px; margin-bottom:14px; flex-wrap:wrap; }
.star { color:var(--hero-star); font-size:.9rem; }
.hero-stars > span:last-child {
  font-size:.78rem;
  color:var(--text-muted);
  margin-left:6px;
}

/* Título H1 */
.hero h1 { color:var(--hero-h1); margin-bottom:22px; letter-spacing:-.01em; }
.hero h1 em { font-style:italic; color:var(--red); }
/* Terceira linha do H1 — adapta ao tema */
:root       .hero-h1-light { color:#5A5550; font-weight:400; font-style:italic; }
[data-theme="dark"] .hero-h1-light { color:var(--cappuccino-lt); font-weight:400; font-style:italic; }

/* Subtítulo */
.hero-sub {
  font-size:1rem; color:var(--hero-sub);
  margin-bottom:36px; line-height:1.85; max-width:500px;
}

/* Botão outline dentro do hero — adapta ao tema */
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px; }

/* Modo CLARO: outline escuro sobre fundo claro */
.hero-actions .btn-outline {
  color:var(--text-primary);
  border-color:rgba(26,26,26,.35);
}
.hero-actions .btn-outline:hover {
  border-color:var(--red);
  color:var(--red);
}
/* Modo ESCURO: outline claro sobre fundo escuro */
[data-theme="dark"] .hero-actions .btn-outline {
  color:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.3);
}
[data-theme="dark"] .hero-actions .btn-outline:hover {
  border-color:var(--cappuccino);
  color:var(--cappuccino);
}

/* Stats */
.hero-stats { display:flex; gap:32px; flex-wrap:wrap; }
.stat-item { border-left:2px solid var(--red); padding-left:14px; }
.stat-num {
  font-family:'Cormorant Garamond',serif;
  font-size:1.9rem; font-weight:700;
  color:var(--hero-stat-num); line-height:1;
}
.stat-label { font-size:.7rem; color:var(--hero-stat-lbl); margin-top:4px; letter-spacing:.04em; }

/* Coluna direita: container do card logo flutuante */
.hero-logo-wrap {
  position:relative; display:flex;
  align-items:center; justify-content:center;
}

/* Anéis decorativos — explícitos por tema */
.hero-logo-ring {
  position:absolute; border-radius:50%;
  animation:spin-slow 18s linear infinite;
}
.hero-logo-ring-1 { width:320px; height:320px; }
.hero-logo-ring-2 { width:420px; height:420px; animation-duration:28s; animation-direction:reverse; }
:root .hero-logo-ring-1      { border:1px solid rgba(204,34,34,.18); }
:root .hero-logo-ring-2      { border:1px solid rgba(184,169,154,.2); }
[data-theme="dark"] .hero-logo-ring-1 { border:1px solid rgba(204,34,34,.22); }
[data-theme="dark"] .hero-logo-ring-2 { border:1px solid rgba(184,169,154,.12); }
@keyframes spin-slow { to { transform:rotate(360deg); } }

/* Card do logo — branco no claro, escuro translúcido no escuro */
.hero-logo-card {
  border-radius:20px; padding:40px 36px 32px;
  text-align:center; backdrop-filter:blur(12px);
  position:relative; z-index:2;
  transition:background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.hero-logo-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--cappuccino));
  border-radius:20px 20px 0 0;
}
:root .hero-logo-card {
  background:rgba(255,255,255,.92);
  border:1px solid rgba(26,26,26,.1);
  box-shadow:0 16px 52px rgba(26,26,26,.14);
}
[data-theme="dark"] .hero-logo-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.hero-logo-img {
  width:220px; height:auto; margin:0 auto 18px;
  object-fit:contain; border-radius:8px;
}
/* Modo claro: texto escuro sobre card branco */
:root .hero-logo-label    { color:var(--heading); }
:root .hero-logo-sublabel { color:var(--cappuccino-dk); }
/* Modo escuro: texto claro sobre card escuro translúcido */
[data-theme="dark"] .hero-logo-label    { color:#fff; }
[data-theme="dark"] .hero-logo-sublabel { color:var(--cappuccino); }

.hero-logo-label {
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem; font-weight:600; letter-spacing:.03em;
}
.hero-logo-sublabel {
  font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; margin-top:6px;
}

/* Scroll hint — cor explícita por tema */
.hero-scroll {
  position:absolute; bottom:24px; left:50%;
  transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  animation:bounce 2.4s infinite;
}
:root .hero-scroll         { color:rgba(26,26,26,.35); }
[data-theme="dark"] .hero-scroll { color:rgba(255,255,255,.28); }
.hero-scroll::after {
  content:''; width:1px; height:32px;
  background:linear-gradient(to bottom, var(--red), transparent);
}
@keyframes bounce {
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(7px); }
}

/* ═══════════════════════════════════════════════════════════
   SOBRE
   ═══════════════════════════════════════════════════════════ */
#sobre { background:var(--bg-alt); position:relative; overflow:hidden; }
.sobre-deco {
  position:absolute; top:-80px; right:-80px;
  width:380px; height:380px; border-radius:50%;
  border:1px solid rgba(204,34,34,.07);
}
.sobre-deco2 {
  position:absolute; bottom:-100px; left:-60px;
  width:280px; height:280px; border-radius:50%;
  border:1px solid rgba(184,169,154,.1);
}
.sobre-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.sobre-visual { position:relative; }

/* Card sobre — sempre escuro por design */
.sobre-card {
  background:#1A1A1A; border-radius:14px; padding:44px;
  position:relative; overflow:hidden;
}
[data-theme="dark"] .sobre-card { background:#0E0E0E; }
.sobre-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--cappuccino));
}
.sobre-card-icon { font-size:2.2rem; margin-bottom:16px; }
.sobre-card h3 { color:#fff; font-size:1.35rem; margin-bottom:12px; }
.sobre-card p  { color:rgba(255,255,255,.52); font-size:.9rem; line-height:1.8; }

.sobre-badge {
  position:absolute; bottom:-20px; right:28px;
  background:var(--red); color:#fff;
  border-radius:10px; padding:14px 18px;
  text-align:center; font-weight:700;
  box-shadow:0 8px 24px var(--shadow-red);
}
.sobre-badge-num { font-family:'Cormorant Garamond',serif; font-size:1.8rem; line-height:1; }
.sobre-badge-lbl { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }

.sobre-text .tag { margin-bottom:12px; }
.sobre-text h2   { margin-bottom:20px; }
.sobre-text p    { margin-bottom:16px; font-size:.94rem; }
.sobre-values    { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.value-chip {
  background:var(--card-bg-alt);
  color:var(--text-primary);
  border:1px solid var(--card-border);
  border-radius:30px; padding:6px 16px;
  font-size:.78rem; font-weight:500;
  display:flex; align-items:center; gap:6px;
}
.value-chip span { color:var(--cappuccino-dk); }
[data-theme="dark"] .value-chip span { color:var(--cappuccino); }

/* ═══════════════════════════════════════════════════════════
   SECTION HEADER (reutilizável)
   ═══════════════════════════════════════════════════════════ */
.section-header { text-align:center; max-width:580px; margin:0 auto 52px; }
.section-header h2 { margin-bottom:12px; }
.section-header p  { color:var(--text-muted); font-size:.92rem; }

/* ═══════════════════════════════════════════════════════════
   DIFERENCIAIS
   ═══════════════════════════════════════════════════════════ */
#diferenciais { background:var(--bg); }
.diff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.diff-card {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px; padding:32px 24px;
  transition:var(--trans); position:relative; overflow:hidden;
}
.diff-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--cappuccino));
  transform:scaleX(0); transform-origin:left; transition:var(--trans);
}
.diff-card:hover {
  transform:translateY(-5px);
  box-shadow:0 14px 44px var(--card-shadow); border-color:transparent;
}
.diff-card:hover::after { transform:scaleX(1); }
.diff-icon {
  width:48px; height:48px; background:var(--red-bg); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; margin-bottom:16px;
}
.diff-card h3 { font-size:1rem; margin-bottom:8px; color:var(--heading); }
.diff-card p  { font-size:.85rem; color:var(--text-muted); line-height:1.75; }

/* ═══════════════════════════════════════════════════════════
   GRÁFICO — intencionalmente escuro nos dois temas (seção premium)
   ═══════════════════════════════════════════════════════════ */
#grafico { background:var(--chart-bg); position:relative; overflow:hidden; }
.grafico-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size:48px 48px;
}
.grafico-glow {
  position:absolute; width:500px; height:280px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(204,34,34,.1) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
#grafico .section-header  { position:relative; z-index:1; }
#grafico .section-header h2 { color:var(--chart-title); }
#grafico .section-header p  { color:var(--chart-sub); }
#grafico .tag { color:var(--cappuccino); border-color:var(--cappuccino-dk); }

.chart-wrap {
  position:relative; z-index:1;
  background:var(--chart-surface);
  border:1px solid var(--chart-border);
  border-radius:16px; padding:36px 36px 28px;
  max-width:860px; margin:0 auto;
}
.chart-wrap::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--cappuccino));
  border-radius:16px 16px 0 0;
}
.chart-title-row {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:28px; flex-wrap:wrap; gap:12px;
}
.chart-title { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:600; color:var(--chart-title); }
.chart-subtitle { font-size:.76rem; color:var(--chart-sub); margin-top:4px; }
.chart-legend { display:flex; gap:18px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:7px; font-size:.73rem; color:var(--chart-legend); }
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ld-red { background:var(--red); }
.ld-cap { background:var(--cappuccino); }

.chart-bars {
  display:flex; align-items:flex-end; gap:14px;
  height:190px; padding-bottom:38px; position:relative;
}
.chart-bars::before {
  content:''; position:absolute; inset:0 0 38px 0;
  background-image:repeating-linear-gradient(
    to bottom, transparent, transparent calc(25% - 1px),
    rgba(255,255,255,.05) calc(25% - 1px), rgba(255,255,255,.05) 25%
  );
}
.bar-group {
  flex:1; display:flex; flex-direction:column;
  align-items:center; height:100%; justify-content:flex-end;
}
.bar-pair {
  display:flex; gap:4px; align-items:flex-end;
  width:100%; justify-content:center; height:calc(100% - 30px);
}
.bar {
  width:42%; border-radius:4px 4px 0 0; position:relative;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .8s cubic-bezier(.34,1.2,.64,1);
}
.bar.animated { transform:scaleY(1); }
.bar-red { background:linear-gradient(to top, var(--red-dim), var(--red)); }
.bar-cap { background:linear-gradient(to top, var(--cappuccino-dk), var(--cappuccino)); }
.bar-val {
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  font-size:.66rem; font-weight:700; color:#fff;
  white-space:nowrap; opacity:0; transition:opacity .4s ease .8s;
}
/* A seção gráfico é sempre escura — #fff é sempre correto aqui */
.bar.animated .bar-val { opacity:1; }
.bar-label { font-size:.7rem; color:var(--chart-label); text-align:center; margin-top:7px; white-space:nowrap; }

/* KPI cards */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; position:relative; z-index:1; }
.kpi-card {
  background:var(--kpi-card-bg);
  border:1px solid var(--kpi-card-bord);
  border-radius:10px; padding:20px 16px; text-align:center; transition:var(--trans);
}
.kpi-card:hover {
  background:rgba(204,34,34,.08); border-color:rgba(204,34,34,.2);
  transform:translateY(-3px);
}
.kpi-num { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:700; color:var(--kpi-num); line-height:1; }
.kpi-label { font-size:.73rem; color:var(--kpi-label); margin-top:6px; line-height:1.5; }

/* ═══════════════════════════════════════════════════════════
   SERVIÇOS
   ═══════════════════════════════════════════════════════════ */
#servicos { background:var(--bg-alt); position:relative; overflow:hidden; }
.servicos-deco {
  position:absolute; bottom:-60px; right:-60px;
  width:300px; height:300px; border-radius:50%;
  border:1px solid rgba(204,34,34,.07);
}
.servicos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.servico-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:12px; padding:30px 24px; transition:var(--trans);
}
.servico-card:hover {
  border-color:var(--red);
  box-shadow:0 10px 38px var(--card-shadow); transform:translateY(-4px);
}
.servico-num {
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem; font-weight:700;
  color:rgba(204,34,34,.15); line-height:1; margin-bottom:12px;
}
.servico-card:hover .servico-num { color:rgba(204,34,34,.28); }
.servico-card h3 { color:var(--heading); font-size:1rem; margin-bottom:8px; }
.servico-card p  { font-size:.83rem; color:var(--text-muted); line-height:1.75; }
.servico-arrow {
  display:inline-block; color:var(--red); margin-top:12px;
  font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transition:var(--trans);
}
.servico-card:hover .servico-arrow { opacity:1; }

/* ═══════════════════════════════════════════════════════════
   DEPOIMENTOS
   ═══════════════════════════════════════════════════════════ */
#depoimentos { background:var(--bg); }
.depo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.depo-card {
  background:var(--bg-alt); border:1px solid var(--card-border);
  border-radius:12px; padding:32px; transition:var(--trans);
}
.depo-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 40px var(--card-shadow); border-color:transparent;
}
.depo-quote {
  font-family:'Cormorant Garamond',serif;
  font-size:2.8rem; color:var(--red);
  line-height:.6; margin-bottom:12px;
}
.depo-text  { font-size:.87rem; line-height:1.8; color:var(--text-secondary); margin-bottom:20px; }
.depo-stars { margin-bottom:16px; }
.depo-stars .star { font-size:.82rem; }
.depo-author {
  display:flex; align-items:center; gap:12px;
  border-top:1px solid var(--border); padding-top:16px;
}
.depo-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--heading);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:1rem; font-weight:700; color:var(--cappuccino);
  flex-shrink:0;
}
[data-theme="dark"] .depo-avatar { background:#2A2A2A; }
.depo-name { font-weight:600; font-size:.85rem; color:var(--heading); }
.depo-role { font-size:.72rem; color:var(--text-muted); margin-top:2px; }

.google-badge {
  display:flex; align-items:center; gap:10px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:8px; padding:13px 20px;
  max-width:250px; margin:36px auto 0;
  box-shadow:0 4px 16px var(--shadow);
}
.google-g { font-size:1.25rem; font-weight:700; color:#4285F4; }
.google-g span:nth-child(2){ color:#EA4335; }
.google-g span:nth-child(3){ color:#FBBC05; }
.google-g span:nth-child(4){ color:#4285F4; }
.google-g span:nth-child(5){ color:#34A853; }
.google-g span:nth-child(6){ color:#EA4335; }
.google-info  { font-size:.78rem; }
.google-score { font-weight:700; color:var(--heading); }
.google-label { color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   CTA — intencionalmente escuro nos dois temas
   ═══════════════════════════════════════════════════════════ */
#cta {
  background:linear-gradient(135deg, var(--cta-bg-start) 0%, var(--cta-bg-end) 100%);
  text-align:center; position:relative; overflow:hidden;
}
.cta-glow {
  position:absolute; width:580px; height:280px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(204,34,34,.11) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.cta-cap-line {
  position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--cappuccino), transparent);
}
#cta .container { position:relative; z-index:1; }
#cta h2 { color:var(--cta-h2); margin-bottom:14px; }
#cta p  {
  color:var(--cta-p); font-size:.97rem;
  margin-bottom:36px; max-width:500px; margin-left:auto; margin-right:auto;
}
/* Botão outline dentro do CTA — sempre sobre fundo escuro */
#cta .btn-outline {
  color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.3);
}
#cta .btn-outline:hover { color:var(--cappuccino); border-color:var(--cappuccino); }
.cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ═══════════════════════════════════════════════════════════
   LOCALIZAÇÃO
   ═══════════════════════════════════════════════════════════ */
#localizacao { background:var(--bg-alt); }
.loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.loc-info h2   { margin-bottom:8px; }
.loc-info .tag { margin-bottom:12px; }
.loc-info > p  { margin-bottom:28px; color:var(--text-muted); font-size:.91rem; }
.loc-items     { display:flex; flex-direction:column; gap:16px; }
.loc-item      { display:flex; align-items:flex-start; gap:14px; }
.loc-icon {
  width:42px; height:42px; background:var(--red-bg);
  border:1px solid rgba(204,34,34,.15);
  border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:1rem; flex-shrink:0;
}
.loc-item-text strong { display:block; font-size:.83rem; font-weight:600; color:var(--heading); margin-bottom:3px; }
.loc-item-text span   { font-size:.83rem; color:var(--text-muted); }
.loc-map { border-radius:14px; overflow:hidden; box-shadow:0 8px 40px var(--shadow); height:370px; }
.loc-map iframe { width:100%; height:100%; border:none; }

/* ═══════════════════════════════════════════════════════════
   FOOTER — sempre escuro
   ═══════════════════════════════════════════════════════════ */
footer { background:var(--footer-bg); padding:56px 0 28px; position:relative; }
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), var(--cappuccino), transparent);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:56px; margin-bottom:44px; }
.footer-logo-img {
  height:44px; width:auto; max-width:180px;
  object-fit:contain; border-radius:6px;
  margin-bottom:16px; display:block;
}
.footer-brand p { color:var(--footer-text); font-size:.84rem; line-height:1.8; max-width:250px; }
.footer-col h4  { font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--cappuccino); margin-bottom:16px; }
.footer-col a   { display:block; color:var(--footer-link); font-size:.84rem; margin-bottom:9px; transition:color var(--trans); }
.footer-col a:hover { color:var(--footer-link-hv); }
.footer-bottom {
  border-top:1px solid var(--footer-border); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
}
.footer-bottom p { font-size:.74rem; color:rgba(255,255,255,.26); }
.social-links { display:flex; gap:9px; margin-top:16px; }
.social-link {
  width:34px; height:34px; border:1px solid rgba(255,255,255,.1);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.42); transition:var(--trans); font-size:.88rem;
}
.social-link:hover { border-color:var(--red); color:var(--cappuccino); }

/* ═══════════════════════════════════════════════════════════
   WHATSAPP FLUTUANTE
   ═══════════════════════════════════════════════════════════ */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.wa-tooltip {
  background:var(--card-bg); color:var(--text-primary);
  font-size:.76rem; font-weight:600;
  padding:7px 13px; border-radius:8px;
  box-shadow:0 4px 20px var(--shadow);
  opacity:0; transform:translateX(10px);
  transition:var(--trans); white-space:nowrap;
  border:1px solid var(--border);
}
.wa-float:hover .wa-tooltip { opacity:1; transform:translateX(0); }
.wa-btn {
  width:58px; height:58px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.42);
  cursor:pointer; transition:var(--trans); font-size:1.5rem;
}
.wa-btn:hover { transform:scale(1.1); box-shadow:0 8px 30px rgba(37,211,102,.52); }
.wa-pulse {
  position:absolute; width:58px; height:58px; border-radius:50%;
  background:rgba(37,211,102,.28); animation:pulse 2.2s infinite;
}
@keyframes pulse {
  0%  { transform:scale(1);   opacity:.8; }
  100%{ transform:scale(1.9); opacity:0;  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible  { opacity:1; transform:none; }
.reveal-delay-1  { transition-delay:.1s; }
.reveal-delay-2  { transition-delay:.2s; }
.reveal-delay-3  { transition-delay:.3s; }
.reveal-delay-4  { transition-delay:.4s; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVIDADE
   ═══════════════════════════════════════════════════════════ */

/* Tablet (≤1024px) */
@media(max-width:1024px){
  .hero-layout    { grid-template-columns:1fr; padding-top:100px; }
  .hero-logo-wrap { display:none; }
  .diff-grid      { grid-template-columns:repeat(2,1fr); }
  .servicos-grid  { grid-template-columns:repeat(2,1fr); }
  .depo-grid      { grid-template-columns:repeat(2,1fr); }
  .kpi-row        { grid-template-columns:repeat(2,1fr); }
  .sobre-grid     { gap:40px; }
  .footer-grid    { grid-template-columns:1fr 1fr; gap:36px; }
}

/* Mobile (≤768px) */
@media(max-width:768px){
  section { padding:64px 0; }

  /* Navbar */
  .nav-links   { display:none; }
  .nav-cta-btn { display:none; }
  .hamburger   { display:flex; }
  #themeToggle { width:34px; height:34px; font-size:.95rem; }
  .nav-logo-img { height:32px; max-width:140px; }

  /* Hero */
  .hero-content { max-width:100%; }
  .hero-logo-wrap { display:none; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .hero-stats   { gap:20px; }

  /* Grids */
  .sobre-grid    { grid-template-columns:1fr; }
  .sobre-visual  { display:none; }
  .diff-grid     { grid-template-columns:1fr; }
  .servicos-grid { grid-template-columns:1fr; }
  .depo-grid     { grid-template-columns:1fr; }
  .kpi-row       { grid-template-columns:repeat(2,1fr); }
  .loc-grid      { grid-template-columns:1fr; }
  .footer-grid   { grid-template-columns:1fr; gap:28px; }

  /* Gráfico */
  .chart-bars  { gap:8px; height:160px; }
  .bar-pair    { gap:2px; }
  .chart-wrap  { padding:24px 16px 20px; }
  .chart-title-row { flex-direction:column; align-items:flex-start; }

  /* CTA */
  .cta-actions { flex-direction:column; align-items:center; }
  .cta-actions .btn { width:100%; max-width:340px; justify-content:center; }

  /* Footer */
  .footer-bottom { flex-direction:column; align-items:flex-start; }

  /* WhatsApp */
  .wa-float { bottom:20px; right:16px; }
}

/* Mobile pequeno (≤420px) */
@media(max-width:420px){
  .hero-stats { gap:14px; }
  .stat-num   { font-size:1.6rem; }
  .kpi-row    { grid-template-columns:1fr 1fr; gap:10px; }
  .hero-actions .btn { font-size:.83rem; padding:13px 20px; }
}