/* ============================================================
   sections/bcockpit.css
   CSS específico da página n-bcockpit-overview.html.

   Efeitos compartilhados (text-glow, glow-card, glow-border,
   hover-lift, hover-glow, hover-float, ambient-light, is-floating,
   is-glowing, reveal via [data-animate]) vivem em
   styles/animations.css e styles/components.css — não duplicar aqui.

   Este arquivo contém APENAS:
   - Layout único de elementos da página (main-nav, pgbar, hero-grid)
   - Componentes não-DS de uso local (ico-box, img-ph, tag-on/off,
     glass, grad-text animado, ambient-a/b posicionados)
   - Scrollbar custom desta página
   ============================================================ */

/* === Tag hover (efeito autoral para chips/keywords) === */
.tag-hover {
  transition: var(--transition-color), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.tag-hover:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--brand-500-rgb), 0.2),
    rgba(var(--brand-600-rgb), 0.1)
  );
  border-color: rgba(var(--brand-500-rgb), 0.6);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(var(--brand-500-rgb), 0.2);
}

/* === Logo hover === */
.logo-hover { transition: transform var(--duration-slow) var(--ease-out); }
.logo-hover:hover { transform: rotate(-5deg) scale(1.1); }

/* === Button shimmer custom (overflow sweep) === */
.button-hover {
  transition: transform var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.button-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--text-dark-rgb), 0.2),
    transparent
  );
  transition: left var(--duration-slow) var(--ease-out);
}
.button-hover:hover::before { left: 100%; }
.button-hover:hover { transform: translateY(-2px) scale(1.05); }

/* === Gradient text animado === */
.grad-text {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-200), var(--brand-500));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kfGradientShift 3s linear infinite;
}
@keyframes kfGradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* === Ambient lights posicionadas (específicas desta página) === */
.ambient-a {
  position: fixed;
  top: 20%;
  left: 8%;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(var(--brand-500-rgb), 0.09) 0%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(50px);
  animation: ambA 9s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.ambient-b {
  position: fixed;
  bottom: 15%;
  right: 8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(var(--brand-600-rgb), 0.07) 0%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(70px);
  animation: ambB 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes ambA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(90px, -40px) scale(1.1); }
}
@keyframes ambB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, 55px) scale(0.9); }
}

/* === Navigation interna da bcockpit (página interna, sem navbar DS) === */
.main-nav {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: var(--z-sticky, 100);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(var(--bg-base-dark-rgb), 0.82);
  border-bottom: 1px solid rgba(var(--brand-500-rgb), 0.18);
}
.main-nav a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-color);
}
.main-nav a:focus { outline: none; }
.main-nav a:focus-visible {
  outline: 2px solid rgba(var(--brand-500-rgb), 0.6);
  outline-offset: 4px;
  border-radius: 4px;
}
.main-nav a:hover {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(var(--brand-500-rgb), 0.5);
}
.main-nav a.active {
  color: var(--brand-500);
  text-shadow: 0 0 10px rgba(var(--brand-500-rgb), 0.5);
}

/* === Progress bar (scroll indicator) === */
#pgbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  z-index: 200;
  background: var(--brand-grad-signature);
  box-shadow: 0 0 8px rgba(var(--brand-500-rgb), 0.6);
  transition: width 0.1s linear;
}

/* === Hero grid background === */
.hero-grid {
  background-image:
    linear-gradient(rgba(var(--brand-500-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-500-rgb), 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* === Badge tags (status on/off da página interna) === */
.tag-on {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #86efac;
  font-size: 0.68rem;
  padding: 0.22rem 0.6rem;
  border-radius: 9999px;
  white-space: nowrap;
}
.tag-off {
  background: rgba(var(--brand-500-rgb), 0.1);
  border: 1px solid rgba(var(--brand-500-rgb), 0.3);
  color: var(--brand-200);
  font-size: 0.68rem;
  padding: 0.22rem 0.6rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* === Feature icon box (depende de .glow-card do DS) === */
.ico-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(var(--brand-650-rgb), 0.18);
  border: 1px solid rgba(var(--brand-500-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.glow-card:hover .ico-box {
  background: rgba(var(--brand-650-rgb), 0.32);
  box-shadow: 0 0 20px rgba(var(--brand-500-rgb), 0.25);
}

/* === Image placeholder === */
.img-ph {
  background: linear-gradient(
    135deg,
    rgba(10, 31, 64, 0.8),
    rgba(var(--bg-base-dark-rgb), 0.9)
  );
  border: 1px solid rgba(var(--brand-500-rgb), 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* === Section divider === */
.s-sep {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--brand-500-rgb), 0.25),
    transparent
  );
  max-width: 240px;
  margin: 0 auto;
}

/* === Scrollbar custom (apenas desta página) === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: rgba(var(--brand-500-rgb), 0.35);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--brand-500-rgb), 0.6);
}

/* === Backdrop glass === */
.glass {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* === Inline lucide SVGs === */
.lucide {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
   Helpers da página — substitutos de utilities Tailwind ausentes
   ============================================================ */

/* Container 1280px (substitui max-w-7xl mx-auto px-6) */
.bcp-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Section padding default da página (py-20) */
.bcp-section { padding-block: var(--space-20, 80px); }
.bcp-section-lg { padding-block: var(--section-lg, 96px); }
.bcp-section-xl { padding-block: var(--section-xl, 128px); }

/* Cor de texto: variações de opacidade do branco F6F6F6 */
.txt-65  { color: rgba(246,246,246,0.65); }
.txt-60  { color: rgba(246,246,246,0.60); }
.txt-55  { color: rgba(246,246,246,0.55); }
.txt-50  { color: rgba(246,246,246,0.50); }
.txt-45  { color: rgba(246,246,246,0.45); }
.txt-40  { color: rgba(246,246,246,0.40); }
.txt-35  { color: rgba(246,246,246,0.35); }
.txt-30  { color: rgba(246,246,246,0.30); }
.txt-28  { color: rgba(246,246,246,0.28); }
.txt-25  { color: rgba(246,246,246,0.25); }
.txt-20  { color: rgba(246,246,246,0.20); }
.txt-18  { color: rgba(246,246,246,0.18); }
.txt-75  { color: rgba(246,246,246,0.75); }
.txt-brand { color: var(--brand-500); }
.txt-brand-200 { color: var(--brand-200); }

/* Tamanhos de texto curtos (mapas tailwind comuns) */
.t-10  { font-size: 10px; }
.t-11  { font-size: 11px; }
.t-xs  { font-size: var(--text-xs); }
.t-sm  { font-size: var(--text-sm); }
.t-base{ font-size: var(--text-base); }
.t-lg  { font-size: var(--text-lg); }
.t-xl  { font-size: var(--text-xl); }
.t-2xl { font-size: var(--text-2xl); }
.t-3xl { font-size: var(--text-3xl); }
.t-4xl { font-size: var(--text-4xl); }
.t-5xl { font-size: 3rem; }
.t-6xl { font-size: 3.75rem; }

/* Pesos */
.fw-medium    { font-weight: 500; }
.fw-semibold  { font-weight: 600; }
.fw-bold      { font-weight: 700; }

/* Letter-spacing helpers */
.ls-tight   { letter-spacing: -0.02em; }
.ls-wide    { letter-spacing: 0.05em; }
.ls-wider   { letter-spacing: 0.1em;  }
.ls-widest  { letter-spacing: 0.15em; }
.ls-hero    { letter-spacing: 0.2em; }

/* Leading helpers */
.lh-tight   { line-height: 1.12; }
.lh-snug    { line-height: 1.25; }
.lh-relaxed { line-height: 1.65; }
.lh-none    { line-height: 1; }

/* Radius helpers */
.rd-full { border-radius: 9999px; }
.rd-3xl  { border-radius: 24px; }
.rd-2xl  { border-radius: 20px; }
.rd-xl   { border-radius: 16px; }
.rd-lg   { border-radius: 12px; }

/* Posição & camadas */
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }
.z-10    { z-index: 10; }
.ovf-hidden { overflow: hidden; }
.ovf-x-auto { overflow-x: auto; }

/* Espaçamento vertical entre itens (substitui space-y) */
.stack-2  > * + * { margin-top: var(--space-2); }
.stack-3  > * + * { margin-top: var(--space-3); }
.stack-3-5 > * + * { margin-top: 14px; }

/* Stat cards do mockup */
.kpi-card {
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Divisor vertical 1px do hero */
.div-v {
  width: 1px;
  background: rgba(255,255,255,0.10);
  align-self: stretch;
}

/* Card escuro do módulo */
.module-card {
  border-radius: 24px;
  padding: var(--space-8);
  background: linear-gradient(145deg, rgba(10,31,64,0.65), rgba(1,14,34,0.9));
  border: 1px solid rgba(237,184,82,0.18);
}

/* Card dourado (para-quem / closing) */
.audience-card {
  border-radius: 24px;
  padding: var(--space-8);
  background: linear-gradient(135deg, rgba(237,184,82,0.07), rgba(216,152,48,0.03));
}

/* Card de acesso (admin/equipe) */
.access-card {
  border-radius: 24px;
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out);
}
.access-card:hover { transform: translateY(-8px); }
.access-card--highlight {
  background: linear-gradient(135deg, rgba(237,184,82,0.11), rgba(216,152,48,0.05));
  border: 1px solid rgba(237,184,82,0.28);
}
.access-card--default {
  background: linear-gradient(135deg, rgba(10,31,64,0.55), rgba(1,14,34,0.8));
  border: 1px solid rgba(246,246,246,0.09);
}

/* Bullet item (dot + textos) usado em listas de módulos */
.bullet-li { display: flex; align-items: flex-start; gap: var(--space-3); }
.bullet-li .dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: rgba(237,184,82,0.5);
  margin-top: 8px; flex-shrink: 0;
}
.bullet-li.is-soft .dot { background: rgba(237,184,82,0.3); }
.bullet-li .label { font-size: var(--text-sm); color: rgba(246,246,246,0.75); font-weight: 500; }
.bullet-li.is-soft .label { color: rgba(246,246,246,0.55); }
.bullet-li .desc  { font-size: var(--text-xs); color: rgba(246,246,246,0.35); margin-top: 2px; }
.bullet-li.is-soft .desc { color: rgba(246,246,246,0.28); }

/* Check item das listas de acesso */
.check-li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: rgba(246,246,246,0.65); }
.check-li svg { color: var(--brand-500, #EDB852); flex-shrink: 0; }

/* Eyebrow título de coluna (Identidade e marca, Produção, etc.) */
.col-eyebrow {
  font-size: 11px; font-weight: 600;
  color: rgba(237,184,82,0.7);
  text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}
.col-eyebrow.is-soft { color: rgba(237,184,82,0.5); }

/* Feature table row hover */
.feature-table { width: 100%; border-collapse: collapse; }
.feature-table thead tr { border-bottom: 1px solid rgba(255,255,255,0.08); }
.feature-table tbody tr { border-top: 1px solid rgba(255,255,255,0.05); transition: background var(--duration-base) var(--ease-out); }
.feature-table tbody tr:first-child { border-top: 0; }
.feature-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.feature-table th {
  text-align: left; font-size: var(--text-xs); font-weight: 500;
  color: rgba(246,246,246,0.40);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding-bottom: var(--space-4); padding-right: var(--space-4);
}
.feature-table th.is-center { text-align: center; width: 112px; padding-right: 0; }
.feature-table td { padding-block: 14px; padding-right: var(--space-4); font-size: var(--text-sm); color: rgba(246,246,246,0.75); }
.feature-table td.is-center { text-align: center; padding-right: 0; }

/* Hero stats bar (substitui o grid-cols-4 do original) */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}
@media (min-width: 640px) {
  .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* Grid responsivo do hero (lg:grid-cols-2) */
.hero-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12, 48px);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-2col { grid-template-columns: 1.1fr 1fr; gap: 48px; }
}

/* Grid 3 col responsivo (md:grid-cols-3) */
.grid-md-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Grid 2 col responsivo (lg:grid-cols-2) */
.grid-lg-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .grid-lg-2 { grid-template-columns: 1fr 1fr; }
}

/* Grid 2 col compacto interno (md:grid-cols-2) */
.grid-md-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .grid-md-2 { grid-template-columns: 1fr 1fr; }
}

/* Nav links — visibilidade mobile/desktop */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-sm);
  color: rgba(246,246,246,0.6);
}
.nav-mob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #010E22;
  padding: 8px;
  background: var(--brand-500);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-mob-btn { display: none; }
}

/* Mobile menu drawer (premium — dark variant) */
.nav-mob-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding-top: 80px;
  background: rgba(1,14,34,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .3s cubic-bezier(0.4,0,0.2,1), transform .3s cubic-bezier(0.4,0,0.2,1);
}
.nav-mob-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-mob-menu a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 1rem 2rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(246,246,246,0.85);
  border-bottom: 1px solid rgba(237,184,82,0.12);
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
  transition: color .2s ease;
}
.nav-mob-menu a:hover { color: var(--brand-500); }
@media (min-width: 768px) {
  .nav-mob-menu { display: none; }
}

/* Hover-glow para links de nav */
.hover-glow { transition: color var(--duration-base) var(--ease-out), text-shadow var(--duration-base) var(--ease-out); }
.hover-glow:hover { color: rgba(246,246,246,1); text-shadow: 0 0 10px rgba(237,184,82,0.5); }

/* Hero text gradient block */
.text-glow { text-shadow: 0 0 30px rgba(237,184,82,0.15); }

/* Mock window do dashboard */
.mock-window {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(10,31,64,0.92), rgba(1,14,34,0.97));
  border: 1px solid rgba(237,184,82,0.22);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 80px rgba(237,184,82,0.08);
}
.mock-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mock-dot { width: 10px; height: 10px; border-radius: 9999px; }

/* Funnel bar */
.bar-track {
  flex: 1; height: 8px; border-radius: 9999px;
  background: rgba(255,255,255,0.05);
}
.bar-fill { height: 100%; border-radius: 9999px; background: rgba(237,184,82,0.55); }

/* Closing CTA card */
.closing-card {
  border-radius: 24px;
  padding: var(--space-12);
  text-align: center;
  background: linear-gradient(135deg, rgba(237,184,82,0.07), rgba(216,152,48,0.03), rgba(237,184,82,0.05));
  border: 1px solid rgba(237,184,82,0.18);
}
@media (min-width: 768px) {
  .closing-card { padding: 64px; }
}

/* Pill simples (status badges genéricos) */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
}
.pill--blue   { background: rgba(59,130,246,0.10); border: 1px solid rgba(96,165,250,0.25); color: #93c5fd; }
.pill--purple { background: rgba(168,85,247,0.10); border: 1px solid rgba(192,132,252,0.25); color: #d8b4fe; }

/* Hero scroll hint */
.scroll-hint {
  position: absolute; bottom: var(--space-8); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0.35;
  pointer-events: none;
}

/* ============================================================
   Reduced motion fallback (cobre só animações declaradas aqui)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ambient-a,
  .ambient-b,
  .grad-text {
    animation: none !important;
  }
  .tag-hover:hover,
  .logo-hover:hover,
  .button-hover:hover {
    transform: none !important;
  }
}