/* =========================================================================
   CasteloNET — TEMA COMPARTILHADO (todas as páginas)
   Carregado logo após main.css. Contém:
     1. Tokens claro/escuro (o tema é definido por js/theme.js no <head>)
     2. Base: corpo, rolagem suave, ícones, nav, botões, títulos, CTA, rodapé
     3. Componentes das páginas internas (hero de produto, navegação local,
        cards, escopo, SLA, dashboards, listas, políticas, contato, SofIA)
     4. Tema escuro
   Específico da home: home-3d.css e home-3d-dark.css.
   ========================================================================= */

:root {
  /* Tons de fundo: branco levemente acinzentado, mais confortável à leitura */
  --page: #F3F5F8;
  --page-2: #ECEFF4;
  --surface: #FFFFFF;
  --bg: var(--page-2);          /* sobrescreve o .bg-light de main.css */
  --heading: #0B1F3A;           /* cor de títulos (no escuro vira quase branco) */
  --text: #0F172A;
  --fill-from: #B8C2D0;         /* títulos com preenchimento por rolagem */
  --fill-to: #0B1F3A;
  --line: #E1E6ED;

  --sky: #60A5FA;
  --blue-500: #3B82F6;
  --ink-soft: #C3CCD8;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(26, 86, 219, 0.12);
  --shadow-soft: 0 1px 2px rgba(11, 31, 58, 0.04), 0 4px 14px -6px rgba(11, 31, 58, 0.08);
  --shadow-lift: 0 18px 40px -18px rgba(11, 31, 58, 0.22), 0 6px 16px -8px rgba(26, 86, 219, 0.10);
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
}

body { background: var(--page); }

/* Lenis (rolagem suave) — substitui o scroll-behavior nativo */
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Barra de progresso de leitura */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* =========================================================================
   ÍCONES (sprite SVG inline em cada página — fonte: images/icons.svg)
   ========================================================================= */
.ico { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.ico-sm { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }

/* =========================================================================
   NAV — vidro; some ao descer e volta ao subir
   ========================================================================= */
nav:not(.prod-nav) {
  background: rgba(243, 245, 248, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(225, 230, 237, 0.8);
  transition: transform .5s var(--ease-apple), box-shadow .3s, background .3s;
  will-change: transform;
}
nav:not(.prod-nav).nav-hidden { transform: translateY(-100%); box-shadow: none; }
.nav-link-diagnostic { display: inline-flex; align-items: center; gap: 6px; }
.nav-cta { background: var(--blue); border-radius: 999px; }
.nav-cta:hover { background: var(--blue-hover) !important; }

/* Palavras divididas para reveal */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wi { display: inline-block; will-change: transform; }

/* Logo: uma versão por tema (troca sem JavaScript, sem "piscar") */
.logo { display: inline-flex; align-items: center; }
.logo .logo-dark { display: none; }
html[data-theme="dark"] .logo .logo-light { display: none; }
html[data-theme="dark"] .logo .logo-dark { display: block; }
.nav-links { align-items: center; }

/* Botões */
.btn { border-radius: 999px; }
.btn-primary { box-shadow: 0 8px 24px -10px rgba(26, 86, 219, 0.55); }
.btn-outline { background: var(--surface); }

/* Títulos e rótulos */
.section-title { letter-spacing: -1.5px; color: var(--heading); }
.label { letter-spacing: 3px; }
[style*="font-family:'Syne'"] { font-family: 'Plus Jakarta Sans', sans-serif !important; }

/* Fases (processo) */
.fase-num { background: var(--surface); box-shadow: 0 0 0 6px var(--page-2); transition: background .4s, border-color .4s, color .4s, box-shadow .4s; }
.fase.is-active .fase-num { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 6px var(--page-2), 0 10px 24px -8px rgba(26, 86, 219, 0.5); }

/* =========================================================================
   CTA — expansão suave
   ========================================================================= */
.cta-section {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(96, 165, 250, 0.28) 0%, transparent 60%),
    radial-gradient(50% 70% at 90% 100%, rgba(59, 130, 246, 0.28) 0%, transparent 60%),
    linear-gradient(155deg, var(--blue) 0%, #1444BB 40%, var(--navy) 100%);
  padding: 130px 0;
}
.cta-section h2 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -2px; line-height: 1.04; }
.cta-section p { color: rgba(255, 255, 255, 0.78); }
.cta-section .btn-white { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.35); }
.cta-section .container { position: relative; z-index: 1; }

.wa-float { z-index: 500; }

/* Evita que transições CSS de main.css disputem com o GSAP */
.btn { transition: background .2s, box-shadow .3s, border-color .2s, color .2s; }
.btn-primary:hover { transform: none; }

/* Botões magnéticos */
.is-magnetic { position: relative; left: 0; top: 0; transition: left .5s var(--ease-apple), top .5s var(--ease-apple), background .2s, box-shadow .3s; }

/* =========================================================================
   RESPONSIVO (base)
   ========================================================================= */
@media (max-width: 960px) {
  .nav-cta { white-space: nowrap; padding: 8px 14px; font-size: 13px; margin-left: auto; margin-right: 8px; }
  .cta-section { padding: 96px 0; }
}
@media (max-width: 540px) {
  .logo img { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  nav:not(.prod-nav) { transition: none; }
}


/* =========================================================================
   TEMA ESCURO — base compartilhada
   ========================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;

  --page: #0A1220;
  --page-2: #0D1729;
  --surface: #111C30;
  --surface-2: #15223A;
  --bg: var(--page-2);
  --line: rgba(148, 163, 184, 0.14);
  --white: #111C30;              /* fundos "brancos" de main.css viram superfície escura */

  --text: #E6ECF5;
  --heading: #F1F5FB;
  --slate: #A3B1C6;
  --muted: #6E7E96;
  --ink-soft: #2A3A55;

  --blue: #3B82F6;
  --blue-hover: #2563EB;
  --blue-light: rgba(59, 130, 246, 0.12);
  --sky: #93C5FD;

  --glass: rgba(17, 28, 48, 0.72);
  --glass-border: rgba(147, 197, 253, 0.16);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 22px 44px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.18);

  /* Estados (verde/vermelho/âmbar) mais claros para contraste no escuro */
  --green: #34D399;
  --green-bg: rgba(16, 185, 129, 0.10);
  --green-border: rgba(52, 211, 153, 0.28);
  --red: #F87171;
  --red-bg: rgba(248, 113, 113, 0.08);
  --red-border: rgba(248, 113, 113, 0.26);
  --gold: #FBBF24;
  --gold-bg: rgba(251, 191, 36, 0.10);

  /* Títulos com preenchimento por rolagem (lidos pelo JS) */
  --fill-from: #2A3A55;
  --fill-to: #F1F5FB;
}

html[data-theme="dark"] body { background: var(--page); color: var(--text); }

/* Textos que em main.css usam --navy como cor de texto */
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .produto-name,
html[data-theme="dark"] .cli-name,
html[data-theme="dark"] .fase-title,
html[data-theme="dark"] .depo-name,
html[data-theme="dark"] .hero-kpi-val,
html[data-theme="dark"] .sofia-feat-title,
html[data-theme="dark"] .btn-outline { color: var(--heading); }
html[data-theme="dark"] .label { color: #60A5FA; }
html[data-theme="dark"] .depo-company,
html[data-theme="dark"] .produto-link { color: #60A5FA; }

/* NAV */
html[data-theme="dark"] nav:not(.prod-nav) {
  background: rgba(10, 18, 32, 0.72);
  border-bottom-color: rgba(148, 163, 184, 0.12);
}
html[data-theme="dark"] nav:not(.prod-nav).scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .nav-links a { color: var(--slate); }
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active { color: var(--heading); }
html[data-theme="dark"] .nav-link-diagnostic {
  background: rgba(16, 185, 129, 0.12) !important; color: #34D399 !important;
  border-color: rgba(52, 211, 153, 0.3);
}
html[data-theme="dark"] .nav-link-diagnostic:hover { background: #10B981 !important; color: #04120C !important; }
html[data-theme="dark"] .nav-mobile-btn { color: var(--heading); }
/* menu mobile (estilo inline aplicado por main.js) */
html[data-theme="dark"] .nav-links[style*="flex"] {
  background: #0D1729 !important; border-bottom-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Botões */
html[data-theme="dark"] .btn-primary { box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.7); }
html[data-theme="dark"] .btn-outline { background: rgba(255, 255, 255, 0.04); border-color: rgba(148, 163, 184, 0.25); }
html[data-theme="dark"] .btn-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(148, 163, 184, 0.45); }
html[data-theme="dark"] .tag { background: rgba(255, 255, 255, 0.04); color: var(--slate); border-color: var(--line); }
html[data-theme="dark"] .fase-num { color: var(--muted); border-color: rgba(148, 163, 184, 0.25); }
html[data-theme="dark"] .fase.is-active .fase-num { color: #fff; border-color: var(--blue); box-shadow: 0 0 0 6px var(--page-2), 0 0 24px rgba(59, 130, 246, 0.55); }
html[data-theme="dark"] .fase:first-child .fase-num { color: #fff; }
html[data-theme="dark"] .fases::before { background: rgba(148, 163, 184, 0.18); }
html[data-theme="dark"] .cta-section .btn-white { background: #fff; color: #0B1F3A; }
html[data-theme="dark"] footer { background: #070D18; border-top: 1px solid rgba(148, 163, 184, 0.1); }
html[data-theme="dark"] .scroll-progress { background: linear-gradient(90deg, #3B82F6, #93C5FD); }

html[data-theme="dark"] .btn-white { background: #fff; color: #0B1F3A; }
html[data-theme="dark"] [style*="color:var(--navy)"] { color: var(--heading) !important; }
html[data-theme="dark"] [style*="color:#6D28D9"] { color: #C4B5FD !important; }
html[data-theme="dark"] .logo { color: var(--heading); }

/* =========================================================================
   RODAPÉ (todas as páginas)
   ========================================================================= */
.footer-logo { display: inline-block; margin-bottom: 16px; }
.footer-logo img { height: 56px; width: auto; }
.footer-links a[target="_blank"]::after { content: ' ↗'; font-size: 11px; opacity: 0.5; }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } }

/* =========================================================================
   PÁGINAS INTERNAS — hero com profundidade
   ========================================================================= */
.prod-hero, .contact-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 72px 0 88px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(55% 75% at 85% 30%, rgba(96, 165, 250, 0.16) 0%, rgba(96, 165, 250, 0) 60%),
    radial-gradient(45% 60% at 5% 0%, rgba(26, 86, 219, 0.07) 0%, rgba(26, 86, 219, 0) 70%),
    linear-gradient(180deg, #EEF2F8 0%, var(--page) 80%);
}
.prod-hero::before, .contact-hero::before { /* grade sutil com fade */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000 10%, transparent 70%);
}
.prod-header-grid { margin-top: 0 !important; margin-bottom: 0; align-items: center; }
.prod-pill {
  gap: 8px; letter-spacing: 1px; background: rgba(232, 240, 254, 0.85);
  border: 1px solid var(--glass-border); color: var(--blue);
}
.prod-pill .ico { width: 15px; height: 15px; }
.prod-title { color: var(--heading); letter-spacing: -1.8px; }
.prod-desc-long { color: var(--slate); }
.sofia-pill { background: rgba(232, 240, 254, 0.85) !important; color: var(--blue) !important; }

/* Mock de dashboard em vidro, com profundidade (inclina levemente com o mouse) */
.dashboard-card {
  background: var(--surface); border-color: var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lift), 0 40px 80px -40px rgba(26, 86, 219, 0.25);
  transform-style: preserve-3d; will-change: transform;
}
.dash-bar { background: var(--navy); }
.dash-body { background: var(--surface); }
.kpi-card { background: var(--page); border-color: var(--line); border-radius: 12px; }
.kpi-label, .kpi-trend { color: var(--muted); }

/* Navegação local fixa (estilo Apple): título do produto + seções */
.local-nav {
  position: sticky; top: 68px; z-index: 150;
  background: rgba(243, 245, 248, 0.82);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: top .5s var(--ease-apple), background .3s;
}
html.is-nav-hidden .local-nav { top: 0; }
.local-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 52px; }
.local-nav-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px; color: var(--heading); white-space: nowrap; letter-spacing: -0.2px; }
.prod-nav { border: none; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.prod-nav a {
  padding: 7px 14px; border: none; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--slate); white-space: nowrap;
  transition: color .2s, background .2s;
}
.prod-nav a:hover { color: var(--heading); background: rgba(26, 86, 219, 0.06); }
.prod-nav a.active { color: var(--heading); background: var(--surface); box-shadow: var(--shadow-soft); border: none; }
.prod-nav a.local-cta { background: var(--blue); color: #fff; margin-left: 6px; }
.prod-nav a.local-cta:hover { background: var(--blue-hover); color: #fff; }

/* =========================================================================
   PÁGINAS INTERNAS — conteúdo
   ========================================================================= */
.card {
  background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-soft);
  transition: border-color .3s, box-shadow .3s;   /* sem transform: o GSAP cuida da entrada */
}
.card:hover { transform: none; border-color: rgba(26, 86, 219, 0.22); box-shadow: var(--shadow-lift); }
.val-icon, .feat-icon, .integra-icon, .risk-icon {
  width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 0;
  background: var(--blue-light); color: var(--blue); border: 1px solid rgba(26, 86, 219, 0.1);
}
.feat-icon { margin: 0 0 14px; }
.val-icon .ico, .feat-icon .ico, .integra-icon .ico, .risk-icon .ico { width: 24px; height: 24px; }
.risk-icon { width: 44px; height: 44px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card-title {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; color: var(--heading);
}
.card-title .ico-box {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light); color: var(--blue); border: 1px solid rgba(26, 86, 219, 0.1);
}
.card-title .ico-box .ico { width: 20px; height: 20px; }
.list-simple { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.list-simple li {
  font-size: 12.5px; color: var(--slate); padding: 5px 12px; border-radius: 999px;
  background: var(--page); border: 1px solid var(--line);
}
.fase-num .ico { width: 18px; height: 18px; }

.escopo-card { border-radius: 16px; }
.escopo-list li { border-bottom-color: var(--line); }
.sla-table { border-radius: 16px; box-shadow: var(--shadow-soft); }
.sla-table td { background: var(--surface); }
.sla-table tr:nth-child(even) td { background: var(--page); }

/* Textos corridos (políticas, termos) */
.section p:not([class]), .section-sm p:not([class]) { color: var(--slate); line-height: 1.85; max-width: 860px; margin-top: 14px; }
.section h3, .section-sm h3 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; color: var(--heading);
  margin: 28px 0 6px; letter-spacing: -0.2px;
}
.section strong, .section-sm strong { color: var(--heading); font-weight: 600; }
.section ul.escopo-list, .section-sm ul.escopo-list { max-width: 860px; }

/* Contato */
.contact-icon { background: var(--blue-light) !important; color: var(--blue); border: 1px solid rgba(26, 86, 219, 0.1); font-size: 0 !important; }
.contact-icon .ico { width: 20px; height: 20px; }
.contact-value { color: var(--heading) !important; }

/* SofIA */
.feat-card, .integra-card { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 16px !important; box-shadow: var(--shadow-soft); transition: border-color .3s, box-shadow .3s; }
.feat-card:hover, .integra-card:hover { border-color: rgba(26, 86, 219, 0.22) !important; box-shadow: var(--shadow-lift); }
.feat-title, .integra-name { color: var(--heading) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
.integra-icon { margin: 0 auto 10px; }

/* Grades com colunas fixas no HTML: adaptam no celular */
@media (max-width: 960px) {
  .prod-hero, .contact-hero { padding: 48px 0 64px; }
  .local-nav-title { display: none; }
  .local-nav-inner { height: 48px; }
  .grid-2 { grid-template-columns: 1fr; }
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .integra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .feat-grid { grid-template-columns: 1fr !important; }
  .sla-table th, .sla-table td { padding: 12px 14px; }
}
@media (max-width: 540px) {
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .prod-title { letter-spacing: -1px; }
}

/* =========================================================================
   PÁGINAS INTERNAS — tema escuro
   ========================================================================= */
html[data-theme="dark"] .prod-hero, html[data-theme="dark"] .contact-hero {
  background:
    radial-gradient(55% 75% at 85% 30%, rgba(59, 130, 246, 0.20) 0%, rgba(59, 130, 246, 0) 62%),
    radial-gradient(45% 60% at 5% 0%, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0) 70%),
    linear-gradient(180deg, #0B1526 0%, var(--page) 80%);
}
html[data-theme="dark"] .prod-hero::before, html[data-theme="dark"] .contact-hero::before { opacity: 0.9; }
html[data-theme="dark"] .prod-pill, html[data-theme="dark"] .sofia-pill { background: rgba(59, 130, 246, 0.12) !important; color: #93C5FD !important; border-color: rgba(147, 197, 253, 0.2); }
html[data-theme="dark"] .dashboard-card { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(96, 165, 250, 0.12); }
html[data-theme="dark"] .dash-bar { background: #0B1528; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .kpi-card { background: var(--page-2); }
html[data-theme="dark"] .local-nav { background: rgba(10, 18, 32, 0.78); }
html[data-theme="dark"] .prod-nav a:hover { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .prod-nav a.active { background: var(--surface-2); }
html[data-theme="dark"] .val-icon, html[data-theme="dark"] .feat-icon, html[data-theme="dark"] .integra-icon,
html[data-theme="dark"] .risk-icon, html[data-theme="dark"] .card-title .ico-box, html[data-theme="dark"] .contact-icon {
  color: #60A5FA; border-color: rgba(96, 165, 250, 0.18);
}
html[data-theme="dark"] .card:hover, html[data-theme="dark"] .feat-card:hover, html[data-theme="dark"] .integra-card:hover { border-color: rgba(96, 165, 250, 0.35) !important; }
html[data-theme="dark"] .list-simple li { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .sla-table th { background: #0B1528; color: rgba(255, 255, 255, 0.6); }
html[data-theme="dark"] .sla-table { box-shadow: 0 0 0 1px var(--line); }
html[data-theme="dark"] .escopo-list li { color: var(--slate); }
html[data-theme="dark"] .escopo-title { color: var(--heading); }
html[data-theme="dark"] .kv-blue { color: #60A5FA !important; }
html[data-theme="dark"] .fases::before { background: rgba(148, 163, 184, 0.18); }
html[data-theme="dark"] .prod-title { color: var(--heading); }