/* cybox-theme.css — tema "Cybox adaptado" (público) com CLARO + ESCURO.
   Carregado por último; sobrescreve o tema base. Não editar o CSS original.
   Modo controlado por html[data-theme="light|dark"] (setado pelo cybox-theme-toggle.js).
   Sem atributo -> cai no escuro (fallback seguro). */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ===================== TOKENS POR TEMA ===================== */
/* ESCURO (padrão/fallback) */
html[data-theme="dark"], html:not([data-theme]) {
  --sa-bg-900: #0E1220;
  --sa-bg-800: #141A31;
  --sa-surface: #161C34;
  --sa-border: rgba(255,255,255,.08);
  --sa-text-1: #E7E9F0;
  --sa-text-2: #9AA0B4;
  --sa-header-bg: rgba(14,18,32,.9);
  --sa-footer-bg: #0B0F1C;
  --sa-footer-text: #c9cede;
  --sa-scroll-track: #141A31;
  --sa-scroll-thumb: #2a3350;
  --sa-img-shadow: 0 30px 80px rgba(0,0,0,.45);
  --sa-icon-filter: brightness(0) invert(1); /* inverte ícone escuro -> claro */
  --sa-placeholder: #6b7180;
}
/* CLARO */
html[data-theme="light"] {
  --sa-bg-900: #FFFFFF;
  --sa-bg-800: #F4F7FB;
  --sa-surface: #FFFFFF;
  --sa-border: rgba(16,24,40,.10);
  --sa-text-1: #16203A;
  --sa-text-2: #5B6478;
  --sa-header-bg: rgba(255,255,255,.92);
  --sa-footer-bg: #0E1220;   /* footer escuro mesmo no claro (contraste elegante) */
  --sa-footer-text: #c9cede;
  --sa-scroll-track: #EEF1F6;
  --sa-scroll-thumb: #C7CEDB;
  --sa-img-shadow: 0 24px 60px rgba(16,24,40,.14);
  --sa-icon-filter: none;    /* ícone escuro fica escuro no claro */
  --sa-placeholder: #9aa2b3;
}

/* ===================== TOKENS COMUNS + REMAPS ===================== */
:root {
  --sa-accent:   #14C2A3;   /* teal (Cybox) em ambos os modos */
  --sa-accent-2: #14C2A3;
  --sa-glow: 0 0 32px rgba(20,194,163,.28);
  --sa-corner: 10px;
  --body-font-family: 'Chakra Petch', sans-serif;
}
/* Reescreve as CSS variables dos DOIS stylesheets base, referenciando tokens
   (funcionam nos dois modos). NÃO tocamos --white/--primary-color/--secondary-color. */
:root {
  --navbar-bg: var(--sa-bg-900);
  --white-color: var(--sa-bg-800);
  --bg-primary: var(--sa-bg-900);
  --bg-secondary: var(--sa-bg-800);
  --heading-color: var(--sa-text-1);
  --body-font-color: var(--sa-text-2);
  --border-color: var(--sa-border);
  --border-color-2: var(--sa-border);
  --blue-color-transparent: rgba(20,194,163,.10);
  --grey-rectangle: var(--sa-bg-800);
  --para-text: var(--sa-text-2);
  --stroke: var(--sa-border);
  --light-blue: rgba(20,194,163,.10);
  --scroll-track: var(--sa-scroll-track);
  --scroll-thumb: var(--sa-scroll-thumb);
  --button-text: #ffffff;
  --footer-bg: var(--sa-footer-bg);
  --footer-text-color: var(--sa-footer-text);
}

html, body {
  background-color: var(--sa-bg-900);
  color: var(--sa-text-2);
  font-family: 'Chakra Petch', sans-serif;
}

h1,h2,h3,h4,h5,h6,
.title,.sub-title,.heroBanner-content .title,
.section-content-wrap .title {
  font-family: 'Chakra Petch', sans-serif;
  color: var(--sa-text-1);
  letter-spacing: -0.01em;
}

/* Botão primário */
.theme-btn {
  background: var(--sa-accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--sa-corner);
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.theme-btn:hover {
  background: var(--sa-accent);
  filter: brightness(1.08);
  box-shadow: 0 8px 28px rgba(20,194,163,.35), var(--sa-glow);
  transform: translateY(-2px);
  color: #fff;
}
.theme-btn.theme-btn-outline,
.theme-btn-border {
  background: transparent;
  color: var(--sa-text-1);
  border-color: var(--sa-border);
}
.theme-btn.theme-btn-outline:hover,
.theme-btn-border:hover {
  border-color: var(--sa-accent);
  box-shadow: var(--sa-glow);
}
a { color: var(--sa-text-1); }
a:hover { color: var(--sa-accent); }

/* Header sticky (bg por token -> claro/escuro) */
.ld-header-section,
.ld-header-section:has(~ main .heroBanner-section),
.ld-header-section.sticky-on {
  background: var(--sa-header-bg) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sa-border);
  position: sticky; top: 0; z-index: 1030;
}
.ld-header-section .nav-link,
.ld-header-section .nav-link.text-para-text {
  color: var(--sa-text-2) !important;
  transition: color .15s ease;
}
.ld-header-section .nav-link:hover,
.ld-header-section .nav-link.active {
  color: var(--sa-accent) !important;
}
.ld-header-section .dropdown-menu {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-corner);
}
.ld-header-section .dropdown-item { color: var(--sa-text-2); }
.ld-header-section .dropdown-item:hover {
  background: rgba(20,194,163,.08); color: var(--sa-accent);
}
#offcanvasNavbar { background: var(--sa-bg-900); }

/* (O estilo do botão de alternância é auto-injetado pelo cybox-theme-toggle.js —
   interruptor deslizante vertical, idêntico no site e no painel.) */

/* Hero (bg por token) */
.heroBanner-section {
  background: radial-gradient(1200px 500px at 80% -10%, rgba(20,194,163,.12), transparent 60%),
              radial-gradient(900px 500px at 10% 10%, rgba(20,194,163,.14), transparent 55%),
              var(--sa-bg-900) !important;
  border-bottom: 1px solid var(--sa-border);
}
.heroBanner-content .title { color: var(--sa-text-1); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.08; }
.heroBanner-content .info { color: var(--sa-text-2); }
.heroBanner-content .right img { border-radius: 14px; box-shadow: var(--sa-img-shadow); }

/* Títulos de seção */
.section-content-wrap .sub-title { color: var(--sa-accent-2); letter-spacing:.08em; text-transform:uppercase; }
.section-content-wrap .title { color: var(--sa-text-1); }

/* Cards de feature */
.features-section { background: var(--sa-bg-800); }
.features-item { transition: transform .2s ease, box-shadow .2s ease; }
.features-item:hover { transform: translateY(-4px); box-shadow: var(--sa-glow); }
.features-item .wrap-inner { background: var(--sa-surface); }
.features-item .wrap { background: transparent; }
.features-item .wrap .title { color: var(--sa-text-1); }
.features-item .wrap .info { color: var(--sa-text-2); }
/* Chip do ícone da feature (teal wash + o ícone teal por cima) */
.features-item .wrap .icon {
  box-sizing: border-box;
  width: 68px; height: 68px; padding: 14px;
  background: rgba(20,194,163,.10);
  border: 1px solid var(--sa-border);
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.features-item .wrap .icon img { width: 100%; height: 100%; object-fit: contain; }

/* Advance features */
.moreFeatures-item-content .title { color: var(--sa-text-1); }
.moreFeatures-item-content .info { color: var(--sa-text-2); }
.moreFeatures-item-img img { border-radius: 14px; border:1px solid var(--sa-border); box-shadow: var(--sa-img-shadow); }

/* ---- Tratamento de marca nas imagens (coesão teal, sutil) ---- */
.moreFeatures-item-img,
.heroBanner-content .right { position: relative; }
.moreFeatures-item-img::after,
.heroBanner-content .right::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background: linear-gradient(140deg, rgba(20,194,163,.20), transparent 46%, rgba(14,18,32,.24));
  mix-blend-mode: soft-light;
}
.moreFeatures-item-img img,
.heroBanner-content .right img { filter: saturate(1.06) contrast(1.02); }

/* Pricing */
.pricing-section { background: var(--sa-bg-900); }
.price-plan-one {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.price-plan-one:hover { transform: translateY(-4px); box-shadow: var(--sa-glow); }
/* Card destaque: gradiente teal->escuro FIXO nos dois modos (base força texto branco,
   então o fundo precisa ser escuro p/ legibilidade). Vira o "featured" em ambos. */
.price-plan-one.active {
  background: linear-gradient(180deg, #14C2A3 0%, #0E1220 65%) !important;
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 1px var(--sa-accent), 0 20px 60px rgba(20,194,163,.20);
}

/* Process / Testimonial / FAQ */
#howItWork { background: var(--sa-bg-800); }
.landing-testimonial-item { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: 16px; }
.zAccordion-one .accordion-item { background: var(--sa-surface); border: 1px solid var(--sa-border); }
.zAccordion-one .accordion-item:has(.accordion-collapse.show) {
  border-color: var(--sa-accent);
  background: rgba(20,194,163,.06);
}
.zAccordion-one .accordion-button::after { filter: var(--sa-icon-filter); opacity: .8; }

/* Footer (bg por token; escuro nos dois modos) */
.footer-section { background: var(--footer-bg); border-top: 1px solid var(--sa-border); }

/* Forms */
.zForm-control { background: var(--sa-surface); color: var(--sa-text-1); border-color: var(--sa-border); }
.zForm-control::placeholder { color: var(--sa-placeholder); }
.zForm-control:focus, .zForm-control:hover {
  background: var(--sa-surface) !important;
  color: var(--sa-text-1);
  border-color: var(--sa-accent);
}
.zForm-label { color: var(--sa-text-2); }
.form-control, .form-select, textarea.form-control { background: var(--sa-surface); color: var(--sa-text-1); border-color: var(--sa-border); }
.form-control:focus, .form-select:focus {
  background: var(--sa-surface); color: var(--sa-text-1);
  border-color: var(--sa-accent); box-shadow: 0 0 0 .2rem rgba(20,194,163,.15);
}
.form-control::placeholder, textarea::placeholder { color: var(--sa-placeholder); }

/* Page title / breadcrumb */
.breadcrumb-section { background: var(--sa-bg-800); border-bottom: 1px solid var(--sa-border); }