/* ══════════════════════════════════════
   THEME DARK — Alternating dark zones
   Zones: hero→anchor | mockup→about | price→guarantee
══════════════════════════════════════ */

:root {
  --dark-bg:     #06101f;
  --dark-bg2:    #0a1628;
  --dark-bg3:    #0d1e35;
  --dark-border: rgba(255, 255, 255, .08);
  --dark-text:   #f0f4ff;
  --dark-muted:  rgba(200, 215, 255, .65);
  --dark-subtle: rgba(160, 185, 230, .4);
}

/* ── Wrapper ── */
.dark-zone {
  position: relative;
  background: var(--dark-bg);
}

/* Full-height gradient — dark top → white bottom, spans 100% of zone */
.dark-zone--fade-out {
  background: linear-gradient(
    to bottom,
    #06101f  0%,
    #06101f  18%,
    #081828  35%,
    #0c2240  52%,
    #163a68  65%,
    #2e6099  75%,
    #6596c4  84%,
    #b2cfe6  91%,
    #f8f8f6 100%
  );
}

/* Remove old bottom overlay — no longer needed */
.dark-zone--fade-out::after { display: none; }

/* Sections sit above gradient */
.dark-zone > * { position: relative; z-index: 2; }

/* ── Body ambient on dark ── */
.dark-zone body::before { opacity: .4; }

/* ══════════════════════════
   HERO on dark
══════════════════════════ */
.dark-zone .hero {
  background: transparent;
}

.dark-zone .hero-h1 { color: var(--dark-text); }
.dark-zone .hero-h1 .stroke {
  -webkit-text-stroke: none;
  -webkit-text-fill-color: var(--dark-text);
  color: var(--dark-text);
}

.dark-zone .hero-sub  { color: var(--dark-muted); }

.dark-zone .hero-badge {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: var(--dark-muted);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}
.dark-zone .hero-badge strong { color: #4ade80; }

.dark-zone .htag {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(59, 130, 246, .2);
  color: var(--dark-muted);
  box-shadow: none;
}
.dark-zone .htag:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--dark-text);
  border-color: rgba(59, 130, 246, .4);
}

.dark-zone .cd-box {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.dark-zone .cd-n   { color: var(--dark-text); }
.dark-zone .cd-u   { color: var(--dark-subtle); }
.dark-zone .cd-sep { color: var(--dark-subtle); }
.dark-zone .cd-lbl { color: var(--dark-subtle); }

.dark-zone .btn-ghost { color: var(--dark-muted); }
.dark-zone .btn-ghost:hover { color: var(--dark-text); }

/* ══════════════════════════
   TICKER on dark
══════════════════════════ */
.dark-zone .ticker {
  background: rgba(255, 255, 255, .03);
  border-top-color:    var(--dark-border);
  border-bottom-color: var(--dark-border);
}
.dark-zone .ti { color: rgba(160, 185, 230, .45); }
.dark-zone .ti::after { background: rgba(59, 130, 246, .6); }

/* ══════════════════════════
   STATS on dark
══════════════════════════ */
.dark-zone .stats-sec { background: transparent; }

.dark-zone .stats-grid {
  background: rgba(255, 255, 255, .04);
  border-color: var(--dark-border);
  box-shadow: 0 4px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.06);
}

.dark-zone .stat-cell { border-right-color: var(--dark-border); }

@media (max-width: 700px) {
  .dark-zone .stat-cell:nth-child(3),
  .dark-zone .stat-cell:nth-child(4) { border-top-color: var(--dark-border); }
}

.dark-zone .stat-d { color: var(--dark-muted); }

/* ══════════════════════════
   SCROLL TEXT on dark
══════════════════════════ */
.dark-zone .sti { -webkit-text-stroke-color: rgba(255,255,255,.12); }
.dark-zone .sti.f { color: var(--dark-text); -webkit-text-stroke: none; }
.dark-zone .sti-sep { color: rgba(255,255,255,.2); }
.dark-zone .stext-sec { background: transparent; }

/* ══════════════════════════
   HR on dark
══════════════════════════ */
.dark-zone .hr {
  background: linear-gradient(90deg, transparent, var(--dark-border), transparent);
}

/* ══════════════════════════
   ANCHOR on dark
══════════════════════════ */
.dark-zone .sec-eye {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(59, 130, 246, .25);
}
.dark-zone .sec-h   { color: var(--dark-text); }
.dark-zone .sec-sub { color: var(--dark-muted); }

/* Anchor cards keep white card look — nice contrast on dark */
.dark-zone .anchor-card.bad  { background: rgba(255,255,255,.96); }
.dark-zone .anchor-card.good { background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(240,246,255,.97)); }
.dark-zone #anchor-head { color: var(--dark-text); }

/* ══════════════════════════
   MOCKUP section on dark
══════════════════════════ */
.dark-zone .mockup-outer { background: transparent; }
.dark-zone .mockup-head .sec-h   { color: var(--dark-text); }
.dark-zone .mockup-head .sec-sub { color: var(--dark-muted); }

/* Float badge on dark section */
.dark-zone .mockup-float-badge {
  background: rgba(10, 22, 40, .9);
  border-color: rgba(59, 130, 246, .25);
  box-shadow: 0 16px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(59,130,246,.12);
}
.dark-zone .mfb-label { color: var(--dark-muted); }
.dark-zone .mfb-stat  { color: var(--dark-text); }
.dark-zone .mfb-sub   { color: var(--dark-muted); }
.dark-zone .mfb-divider { background: var(--dark-border); }

/* ══════════════════════════
   ABOUT on dark
══════════════════════════ */
.dark-zone .about-sec { background: transparent; }

.dark-zone .about-tag {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(59, 130, 246, .25);
}
.dark-zone .about-h { color: var(--dark-text); }
.dark-zone .about-p { color: var(--dark-muted); }
.dark-zone .about-p strong { color: var(--dark-text) !important; }

.dark-zone .about-list li { color: var(--dark-muted); }

.dark-zone .aimg {
  border-color: var(--dark-border);
  box-shadow: 0 8px 60px rgba(0, 0, 0, .4);
}
.dark-zone .aimg::after {
  background: linear-gradient(to bottom, transparent 55%, rgba(6,16,31,.5));
}

.dark-zone .about-badge {
  background: rgba(10, 22, 40, .92);
  border-color: rgba(59, 130, 246, .3);
  box-shadow: 0 12px 48px rgba(0,0,0,.4), 0 0 24px rgba(59,130,246,.15);
}
.dark-zone .ab-l { color: var(--dark-muted); }
.dark-zone .ab-v { color: #4ade80; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.25); }

.dark-zone .alck {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .25);
}

/* ══════════════════════════
   PRICE on dark
══════════════════════════ */
.dark-zone .price-sec { background: transparent; }

.dark-zone .plan-card {
  background: rgba(255, 255, 255, .04);
  border-color: var(--dark-border);
}

.dark-zone .plan-intensivo {
  background: rgba(10, 22, 40, .6);
  border-color: rgba(59, 130, 246, .3);
  box-shadow: 0 0 0 1px rgba(59,130,246,.1), 0 20px 80px rgba(59,130,246,.15);
}

.dark-zone .plan-title { color: var(--dark-text); }
.dark-zone .plan-sub   { color: var(--dark-muted); }

.dark-zone .plan-top   { border-bottom-color: var(--dark-border); }
.dark-zone .plan-rows .pr-row { border-bottom-color: var(--dark-border); color: var(--dark-muted); }
.dark-zone .plan-bot   { border-top-color: var(--dark-border); }

.dark-zone .was-txt  { color: var(--dark-subtle); }
.dark-zone .p-big    { color: var(--dark-text); }
.dark-zone .p-pix    { color: var(--dark-muted); }
.dark-zone .p-guar   { color: var(--dark-muted); }

.dark-zone .plan-tag {
  background: rgba(59, 130, 246, .15);
  border-color: rgba(59, 130, 246, .3);
}

.dark-zone .nbtn-g {
  color: var(--dark-muted);
  border-color: var(--dark-border);
}
.dark-zone .nbtn-g:hover { color: var(--dark-text); border-color: rgba(255,255,255,.2); }

/* payment trust row */
.dark-zone .plan-bot [style*="color:var(--subtle)"] { color: var(--dark-subtle) !important; }

/* ══════════════════════════
   GUARANTEE on dark
══════════════════════════ */
.dark-zone .guar-sec { background: transparent; }

.dark-zone .guar-card {
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(34,197,94,.04));
  border-color: rgba(34, 197, 94, .25);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
}
.dark-zone .guar-h { color: var(--dark-text); }
.dark-zone .guar-p { color: var(--dark-muted); }
.dark-zone .guar-icon {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .3);
}

/* ── strong tags inside dark sections ── */
.dark-zone .about-p strong,
.dark-zone .tri-p strong,
.dark-zone .guar-p strong,
.dark-zone .faq-body strong { color: var(--dark-text) !important; }

/* guarantee green span stays green — readable on dark */
.dark-zone .guar-h span[style*="color:var(--green)"] { color: #4ade80 !important; }

/* ══════════════════════════
   NAV on dark (when stuck = transparent enough)
══════════════════════════ */