/* ==========================================================================
   nuked • Portal Minimalista 3D & Infraestrutura de Manufatura (v2.1.0)
   Menu Central Liquid Glass + Fundo Quadriculado Futurista + Benchy Runner
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 200vh;
  background-color: var(--bg-primary);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--duration-normal) var(--ease-expo), color var(--duration-normal) var(--ease-expo);
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Ocultação Total de Interface durante o Modo Jogo (Tecla N)
   -------------------------------------------------------------------------- */
body.game-active .hero-viewport,
body.game-active .unified-menu-anchor,
body.game-active .ecosystem-section,
body.game-active .filament-color-box,
body.game-active .scroll-hint,
body.game-active .medal-toast-container {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   Canvas 3D WebGL (Fixo em Segundo Plano)
   -------------------------------------------------------------------------- */
#webgl-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: auto;
  transition: opacity 0.35s var(--ease-expo);
  will-change: opacity;
}

/* Transparência ativa ao rolar a página (Foco total no conteúdo) */
body.page-scrolled:not(.game-active) #webgl-container {
  opacity: 0.18 !important;
}

[data-theme="light"] body.page-scrolled:not(.game-active) #webgl-container,
html[data-theme="light"] body.page-scrolled:not(.game-active) #webgl-container {
  opacity: 0.12 !important;
}

/* --------------------------------------------------------------------------
   Sistema de Estrelas de Fundo (Inspirado em Animate UI Stars)
   Substitui a grade de fundo por um céu estrelado dinâmico, discreto e de baixo contraste
   -------------------------------------------------------------------------- */
.stars-background {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--stars-container-opacity, 0.85);
  transition: opacity 0.5s ease;
}

body.page-scrolled:not(.game-active) .stars-background {
  opacity: calc(var(--stars-container-opacity, 0.85) * 0.65);
}

.stars-parallax-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.star-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2000px;
  will-change: transform;
}

.star-dots {
  position: absolute;
  background: transparent;
  border-radius: 50%;
}

/* Camada 1: Micro-estrelas (1px) - Deriva lenta a 70s */
.star-layer-1 {
  color: var(--star-color-1);
  animation: star-drift 70s linear infinite;
}
.star-layer-1 .star-dots {
  width: 1px;
  height: 1px;
}
.star-layer-1 .star-dots-1 {
  top: 0;
  left: 0;
}
.star-layer-1 .star-dots-2 {
  top: 2000px;
  left: 0;
}

/* Camada 2: Estrelas Médias (1.5px) - Deriva moderada a 115s */
.star-layer-2 {
  color: var(--star-color-2);
  animation: star-drift 115s linear infinite;
}
.star-layer-2 .star-dots {
  width: 1.5px;
  height: 1.5px;
}
.star-layer-2 .star-dots-1 {
  top: 0;
  left: 0;
}
.star-layer-2 .star-dots-2 {
  top: 2000px;
  left: 0;
}

/* Camada 3: Estrelas Sutis (2px) - Deriva serena a 170s */
.star-layer-3 {
  color: var(--star-color-3);
  animation: star-drift 170s linear infinite;
}
.star-layer-3 .star-dots {
  width: 2px;
  height: 2px;
}
.star-layer-3 .star-dots-1 {
  top: 0;
  left: 0;
}
.star-layer-3 .star-dots-2 {
  top: 2000px;
  left: 0;
}

@keyframes star-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* --------------------------------------------------------------------------
   Cluster de Controles Fixo no Topo Direito (Medalhas, Tema, Acessar Sistema)
   Alinhado rigorosamente no centro vertical (Y) com a navbar de 70px
   -------------------------------------------------------------------------- */
.top-control-cluster {
  position: fixed;
  top: 1.25rem;
  right: 2rem;
  height: 70px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.page-scrolled .top-control-cluster {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-8px);
}

body.game-active .top-control-cluster {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.btn-top-control {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--text-secondary);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
  position: relative;
}

.btn-top-control:hover {
  color: var(--nuked-laranja-explosao);
  border-color: rgba(255, 122, 0, 0.45);
  box-shadow: 0 0 16px var(--nuked-laranja-glow);
  transform: translateY(-1px) scale(1.05);
}

.btn-top-control svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  display: block;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.btn-medals-trophy:hover svg {
  transform: scale(1.1) rotate(-6deg);
}

.btn-theme-toggle:hover svg {
  transform: rotate(20deg);
}

.btn-access-system {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--nuked-laranja-explosao);
  color: #0A0E18;
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--nuked-laranja-glow), 0 0 0 1px rgba(255, 122, 0, 0.4);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-access-system:hover {
  background-color: var(--nuked-laranja-hover);
  box-shadow: 0 6px 24px rgba(255, 122, 0, 0.55), 0 0 0 1px rgba(255, 122, 0, 0.6);
  transform: translateY(-2px);
  color: #000000;
}

/* --------------------------------------------------------------------------
   Hero Central Inicial (Limpo & Monumental)
   -------------------------------------------------------------------------- */
.hero-viewport {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  pointer-events: none;
}

.hero-block {
  max-width: 1040px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.25rem;
}

.hero-title {
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 4.3vw, 3.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 1.15rem;
  /* Halo de isolamento difuso Dark Mode */
  filter: drop-shadow(0 0 20px rgba(7, 21, 43, 0.95))
          drop-shadow(0 4px 28px rgba(3, 8, 20, 0.85));
  transition: filter var(--duration-normal) var(--ease-expo), color var(--duration-normal) var(--ease-expo);
  text-wrap: balance;
}

.hero-title-line {
  display: block;
}

.hero-title-text,
.hero-title-dot {
  background: linear-gradient(135deg, #FFFFFF 10%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-brand-highlight {
  display: inline-block;
  color: var(--nuked-laranja-explosao, #FF7A00);
  background: linear-gradient(135deg, #FFA040 0%, #FF7A00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 122, 0, 0.55));
}

@media (min-width: 900px) {
  .hero-title-line {
    white-space: nowrap;
  }
}

/* Modo Claro: Halo iluminado suave + Azul Técnico Profundo de Alto Contraste */
[data-theme="light"] .hero-title {
  color: #0F233D;
  filter: drop-shadow(0 0 16px rgba(228, 238, 249, 0.98))
          drop-shadow(0 0 32px rgba(215, 230, 246, 0.90))
          drop-shadow(0 2px 20px rgba(255, 255, 255, 0.85));
}

[data-theme="light"] .hero-title-text,
[data-theme="light"] .hero-title-dot {
  background: linear-gradient(135deg, #0F233D 15%, #184C96 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .hero-brand-highlight {
  background: linear-gradient(135deg, #FF7A00 0%, #E65C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 122, 0, 0.4));
}

.hero-subtitle {
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 660px;
  text-wrap: pretty;
  /* Halo de leitura para Dark Mode */
  text-shadow: 
    0 0 16px rgba(7, 21, 43, 0.95),
    0 2px 12px rgba(3, 8, 20, 0.85);
  transition: text-shadow var(--duration-normal) var(--ease-expo), color var(--duration-normal) var(--ease-expo);
}

[data-theme="light"] .hero-subtitle {
  color: #1F3654;
  font-weight: 500;
  /* Halo de leitura nítido para Modo Claro */
  text-shadow: 
    0 0 16px rgba(228, 238, 249, 0.98),
    0 0 28px rgba(215, 230, 246, 0.90),
    0 1px 8px rgba(255, 255, 255, 0.90);
}

/* ==========================================================================
   Hero CTA Cluster & Botões de Download Oficial Windows
   ========================================================================== */
.hero-cta-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  pointer-events: auto;
  flex-wrap: wrap;
  z-index: 20;
}

.btn-hero-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--nuked-laranja-explosao);
  color: #0A0E18;
  font-family: var(--font-tech);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px var(--nuked-laranja-glow), 0 0 0 1px rgba(255, 122, 0, 0.4);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-hero-access:hover {
  background-color: var(--nuked-laranja-hover);
  box-shadow: 0 6px 28px rgba(255, 122, 0, 0.6), 0 0 0 1px rgba(255, 122, 0, 0.7);
  transform: translateY(-2px);
  color: #000000;
}

.btn-hero-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(7, 21, 43, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--nuked-ciano-tech);
  border: 1px solid rgba(0, 209, 255, 0.35);
  font-family: var(--font-tech);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 209, 255, 0.15);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-hero-download:hover {
  background: rgba(0, 209, 255, 0.15);
  border-color: rgba(0, 209, 255, 0.65);
  box-shadow: 0 6px 28px rgba(0, 209, 255, 0.3);
  transform: translateY(-2px);
  color: #FFFFFF;
}

[data-theme="light"] .btn-hero-download {
  background: rgba(255, 255, 255, 0.92);
  color: #184C96;
  border-color: rgba(24, 76, 150, 0.35);
  box-shadow: 0 4px 20px rgba(24, 76, 150, 0.10);
}

[data-theme="light"] .btn-hero-download:hover {
  background: #EDF3FA;
  border-color: rgba(24, 76, 150, 0.6);
  color: #0F233D;
  box-shadow: 0 6px 24px rgba(24, 76, 150, 0.18);
}

.btn-top-download {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(0, 209, 255, 0.10);
  border: 1px solid rgba(0, 209, 255, 0.35);
  border-radius: var(--radius-full);
  color: var(--nuked-ciano-tech);
  font-family: var(--font-tech);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-top-download:hover {
  background: rgba(0, 209, 255, 0.22);
  border-color: var(--nuked-ciano-tech);
  color: #FFFFFF;
  transform: translateY(-1px);
}

[data-theme="light"] .btn-top-download {
  background: #EDF3FA;
  border-color: rgba(24, 76, 150, 0.25);
  color: #184C96;
}

[data-theme="light"] .btn-top-download:hover {
  background: #E2ECF7;
  border-color: rgba(24, 76, 150, 0.5);
  color: #0F233D;
}

.btn-dock-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: rgba(0, 209, 255, 0.08);
  border: 1px solid rgba(0, 209, 255, 0.3);
  border-radius: var(--radius-full);
  color: var(--nuked-ciano-tech);
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-dock-download:hover {
  background: rgba(0, 209, 255, 0.2);
  border-color: var(--nuked-ciano-tech);
  color: #FFFFFF;
  transform: translateY(-1px);
}

[data-theme="light"] .btn-dock-download {
  background: #EDF3FA;
  border-color: rgba(24, 76, 150, 0.2);
  color: #184C96;
}

[data-theme="light"] .btn-dock-download:hover {
  background: #E2ECF7;
  border-color: rgba(24, 76, 150, 0.45);
  color: #0F233D;
}

.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  animation: float-hint 2.5s infinite ease-in-out;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  user-select: none;
}

.scroll-hint:hover {
  color: var(--nuked-laranja-explosao);
  background: rgba(255, 122, 0, 0.08);
}

.scroll-hint.scrolled-away {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 15px) !important;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

@keyframes float-hint {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* --------------------------------------------------------------------------
   Menu Central Sofisticado Liquid Glass & Transição Sticky on Scroll
   -------------------------------------------------------------------------- */
.unified-menu-anchor {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: none;
  z-index: 70;
  pointer-events: auto;
  transition: width 0.45s var(--ease-spring), max-width 0.45s var(--ease-spring), top 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
}

.unified-menu-anchor.pinned {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 4rem);
  max-width: 1040px;
}

.liquid-glass-dock {
  position: relative;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.65rem;
  background: var(--glass-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-full);
  gap: 1.5rem;
  transition: all 0.45s var(--ease-spring);
}

[data-theme="light"] .liquid-glass-dock {
  box-shadow: 0 20px 50px -10px rgba(24, 76, 150, 0.14), 0 0 0 1px rgba(24, 76, 150, 0.08);
}

.unified-menu-anchor.pinned .liquid-glass-dock {
  width: 100%;
  height: 70px;
  padding: 0 1rem 0 1.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo Oficial nuked */
.dock-brand-slot {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  padding-right: 1.15rem;
  border-right: 1px solid var(--border-subtle);
  flex-shrink: 0;
  transition: all 0.35s ease;
}

.dock-logo-img {
  height: 32px;
  width: auto;
  display: block;
  transition: height 0.35s ease, filter 0.25s ease, transform 0.25s ease;
}

.unified-menu-anchor.pinned .dock-logo-img {
  height: 38px;
}

/* Inversão Automática do Logo nuked por Tema */
[data-theme="dark"] .logo-light-mode {
  display: none !important;
}

[data-theme="light"] .logo-dark-mode {
  display: none !important;
}

.dock-brand-slot:hover .dock-logo-img {
  filter: drop-shadow(0 0 12px rgba(255, 122, 0, 0.55)) drop-shadow(0 0 2px rgba(255, 122, 0, 0.8));
  transform: scale(1.03);
}

.dock-signature {
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
  transition: all 0.35s ease;
}

.unified-menu-anchor.pinned .dock-signature {
  font-size: 0.875rem;
  letter-spacing: 0.22em;
}

.dock-brand-slot:hover .dock-signature {
  color: var(--nuked-laranja-explosao);
}

.dock-nav-items {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.35s ease;
}

.unified-menu-anchor.pinned .dock-nav-items {
  position: static;
  transform: none;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0 1rem;
}

.dock-link-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: font-size 0.35s ease, padding 0.35s ease, color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

/* Quando sobe para o topo: links com tipografia calibrada e sem quebra */
.unified-menu-anchor.pinned .dock-link-btn {
  font-size: 0.9375rem;
  padding: 0.55rem 1rem;
}

/* Bloco 3: Ao subir para o topo (.pinned), o botão Acessar Sistema e controles se UNEM na ponta direita da barra */
.dock-action-slot {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.unified-menu-anchor.pinned .dock-action-slot {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.unified-menu-anchor.pinned .dock-action-slot .btn-top-control {
  width: 38px;
  height: 38px;
}

.unified-menu-anchor.pinned .dock-action-slot .btn-top-control svg {
  width: 18px;
  height: 18px;
}

.btn-hamburger {
  display: none !important;
}

.dock-link-btn:hover {
  color: var(--nuked-laranja-explosao);
  background-color: var(--dock-highlight);
  transform: translateY(-1px) scale(1.02);
}

/* Dropdown nuked.hub */
.hub-dropdown-wrapper {
  position: relative;
}

.hub-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  width: 280px;
  background: var(--glass-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
  border-radius: var(--radius-lg);
  padding: 0.65rem;
  transition: transform var(--duration-normal) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-spring);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hub-dropdown-wrapper:hover .hub-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.hub-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  transition: all var(--duration-fast) ease;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.hub-item-row:hover {
  background: var(--dock-highlight);
  color: var(--nuked-laranja-explosao);
  transform: translateX(3px);
}

.hub-item-tag {
  font-weight: 700;
  color: var(--nuked-laranja-explosao);
}



/* Dropdown / Menu Hambúrguer Móvel */
.mobile-nav-dropdown {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 0;
  right: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 80;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-spring);
  pointer-events: none;
}

.mobile-nav-dropdown.active {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) ease;
}

.mobile-nav-row:hover {
  background: var(--dock-highlight);
  color: var(--nuked-laranja-explosao);
}

.mobile-nav-arrow {
  color: var(--nuked-laranja-explosao);
  font-weight: 800;
}

.mobile-nav-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.25rem 0;
}

.mobile-nav-label {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--nuked-laranja-explosao);
  padding: 0.25rem 1rem 0;
  text-transform: uppercase;
}

.mobile-nav-subrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) ease;
}

.mobile-nav-subrow:hover {
  background: var(--dock-highlight);
  color: var(--nuked-laranja-explosao);
}

/* Acordeon nuked.hub no Menu Móvel (Guardado por padrão, expande para baixo com animação suave) */
.mobile-nav-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 0.75rem 1rem;
}

.mobile-nav-hub-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--nuked-laranja-explosao);
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mobile-nav-hub-tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 122, 0, 0.15);
  border: 1px solid rgba(255, 122, 0, 0.35);
  color: var(--nuked-laranja-explosao);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mobile-accordion-chevron {
  color: var(--nuked-laranja-explosao);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  flex-shrink: 0;
}

.mobile-nav-accordion-btn.open .mobile-accordion-chevron,
.mobile-nav-accordion-btn[aria-expanded="true"] .mobile-accordion-chevron {
  transform: rotate(180deg);
}

.mobile-hub-sublist {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.75rem;
  margin: 0 0 0 0.5rem;
  border-left: 2px solid rgba(255, 122, 0, 0.3);
  transition: max-height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.25s ease,
              margin 0.3s ease,
              padding 0.3s ease;
}

.mobile-hub-sublist.open {
  max-height: 280px;
  opacity: 1;
  margin: 0.25rem 0 0.5rem 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Preferências Mobile: Linhas limpas, alinhadas horizontalmente, sem quebras de texto */
.mobile-pref-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: var(--radius-md) !important;
  white-space: nowrap !important;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: all var(--duration-fast) ease;
}

.mobile-pref-btn:hover {
  background: var(--dock-highlight);
  border-color: var(--border-subtle);
}

.mobile-pref-content {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-tech);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 0;
}

.mobile-pref-content .theme-label-slot,
.mobile-pref-content span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-pref-content .theme-icon-slot {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(0, 209, 255, 0.08);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

[data-theme="light"] .mobile-pref-content .theme-icon-slot {
  background: rgba(24, 76, 150, 0.06);
  border-color: rgba(24, 76, 150, 0.15);
}

.mobile-pref-content .theme-icon-slot.trophy-slot {
  color: #FBBF24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
}

.mobile-pref-content .theme-icon-slot svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

.mobile-pref-pill {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--dock-highlight);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  text-transform: uppercase;
  flex-shrink: 0;
}


.btn-medals-trophy {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all var(--duration-fast) ease;
}

.btn-medals-trophy:hover {
  color: #FBBF24;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
  transform: scale(1.08);
}

.btn-dock-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--nuked-laranja-explosao);
  color: #0A0E18;
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  box-shadow: 0 0 20px var(--nuked-laranja-glow);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-dock-cta:hover {
  background-color: var(--nuked-laranja-hover);
  transform: translateY(-1px);
}

.btn-theme-dock {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.btn-theme-dock:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.btn-theme-dock svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Modo Jogo Benchy Runner (HUD & Game Over)
   HUD Superior do Benchy Runner (Sleek Arcade Liquid Glass Pill)
   -------------------------------------------------------------------------- */
.game-hud-overlay {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: none;
  width: auto;
  max-width: 90%;
  font-family: var(--font-tech);
  pointer-events: none;
  white-space: nowrap !important;
}

.game-hud-overlay.active {
  display: block;
}

.game-header-bar {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 52px;
  background: rgba(7, 21, 43, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 209, 255, 0.22);
  border-radius: var(--radius-full);
  padding: 0 1.25rem;
  pointer-events: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 209, 255, 0.08);
  white-space: nowrap !important;
}

[data-theme="light"] .game-header-bar {
  background: rgba(240, 245, 252, 0.94);
  border-color: rgba(24, 76, 150, 0.2);
  box-shadow: 0 20px 50px rgba(24, 76, 150, 0.10), 0 0 0 1px rgba(24, 76, 150, 0.08);
}

.game-title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.game-status-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nuked-verde-nuclear);
  box-shadow: 0 0 10px var(--nuked-verde-nuclear);
  animation: pulse-glow 1.5s infinite;
  flex-shrink: 0;
}

.game-hud-title {
  font-family: var(--font-tech);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  white-space: nowrap !important;
}

.game-hud-hint {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  white-space: nowrap !important;
}

[data-theme="light"] .game-hud-hint {
  background: rgba(24, 76, 150, 0.06);
  color: var(--text-secondary);
}

.game-score-group {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.game-telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
  white-space: nowrap !important;
}

[data-theme="light"] .game-telemetry-badge {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(24, 76, 150, 0.15);
}

.game-telemetry-label {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  white-space: nowrap !important;
}

.game-score-val {
  color: var(--nuked-ciano-tech);
  font-weight: 800;
  font-size: 1.05rem;
  font-family: monospace;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap !important;
}

[data-theme="light"] .game-score-val {
  color: #184C96;
}

.game-telemetry-divider {
  width: 1px;
  height: 12px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.game-avoided-val {
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--nuked-laranja-explosao);
  letter-spacing: 0.04em;
  white-space: nowrap !important;
}

.btn-exit-game {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap !important;
  transition: all var(--duration-fast) ease;
}

.btn-exit-game:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #EF4444;
}

.btn-exit-game .key-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 800;
  transition: all var(--duration-fast) ease;
}

.btn-exit-game:hover .key-badge {
  background: rgba(239, 68, 68, 0.3);
  color: #fff;
}

/* Modal Game Over */
.game-over-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px);
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-family: var(--font-tech);
}

.game-over-modal-overlay.active {
  display: flex;
}

.game-over-card {
  background: var(--bg-surface);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.game-over-tag {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.game-over-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.game-over-score-box {
  background: rgba(0, 0, 0, 0.35);
  border: var(--border-tech);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin: 1.25rem 0;
}

.game-over-score-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--nuked-ciano-tech);
  font-family: monospace;
}

.game-over-trophy-alert {
  margin: 0.85rem 0 1.25rem 0;
  padding: 0.65rem 1rem;
  background: rgba(255, 122, 0, 0.15);
  border: 1px solid rgba(255, 122, 0, 0.5);
  color: var(--nuked-laranja-explosao);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 0 16px rgba(255, 122, 0, 0.2);
}

.game-over-actions {
  display: flex;
  gap: 0.75rem;
}

.btn-game-restart {
  flex: 1;
  padding: 0.75rem;
  background: var(--nuked-laranja-explosao);
  color: #0A0E18;
  font-weight: 700;
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
}

.btn-game-exit {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Notificação Toast de Medalhas
   -------------------------------------------------------------------------- */
.medal-toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--duration-normal) var(--ease-spring);
}

.medal-toast-container.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.medal-toast-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(10, 14, 24, 0.95);
  border: 1px solid rgba(0, 255, 157, 0.4);
  box-shadow: 0 16px 40px rgba(0, 255, 157, 0.2);
  border-radius: var(--radius-lg);
  padding: 1rem 1.35rem;
  backdrop-filter: blur(20px);
  font-family: var(--font-tech);
  max-width: 380px;
}

[data-theme="light"] .medal-toast-card {
  background: rgba(244, 248, 253, 0.95);
  border-color: rgba(24, 76, 150, 0.35);
  box-shadow: 0 16px 40px rgba(24, 76, 150, 0.08);
}

.medal-toast-icon {
  font-size: 1.75rem;
}

.medal-toast-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--nuked-verde-nuclear);
  letter-spacing: 0.1em;
  font-weight: 700;
}

.medal-xp {
  color: var(--nuked-laranja-explosao);
}

.medal-toast-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0.15rem 0;
}

.medal-toast-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}



/* --------------------------------------------------------------------------
   Seção Inferior (Ecossistema)
   -------------------------------------------------------------------------- */
.ecosystem-section {
  position: relative;
  z-index: 20;
  padding: 6rem 0 2rem 0;
  width: calc(100% - 4rem);
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.section-header-clean {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.section-tag {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  color: var(--nuked-laranja-explosao);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-brand);
  font-size: 2.25rem;
  font-weight: 700;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.pillar-card {
  background: var(--bg-surface);
  border: var(--border-tech);
  border-radius: var(--radius-lg);
  padding: 2rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-spring);
}

.pillar-card:hover {
  border-color: rgba(255, 122, 0, 0.4);
  transform: translateY(-3px);
}

.pillar-card-tag {
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nuked-laranja-explosao);
}

.pillar-card-title {
  font-family: var(--font-tech);
  font-size: 1.25rem;
  font-weight: 700;
}

.pillar-card-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Drawers / Modais (Quem Somos, Blog & Medalhas)
   -------------------------------------------------------------------------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 20, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-expo), visibility var(--duration-normal) var(--ease-expo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.drawer-backdrop:not(.active) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.drawer-backdrop:not(.active) * {
  pointer-events: none !important;
}

.drawer-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-tech);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 660px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.98);
  transition: transform var(--duration-normal) var(--ease-spring);
  overflow: hidden;
  position: relative;
}

.drawer-backdrop.active .drawer-content {
  transform: translateY(0) scale(1);
}

.drawer-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border-tech);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
}

.drawer-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.drawer-tag {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--nuked-laranja-explosao);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.drawer-title {
  font-family: var(--font-tech);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.btn-close-drawer {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all var(--duration-fast) ease;
  flex-shrink: 0;
}

.btn-close-drawer:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #EF4444;
}

.drawer-body {
  padding: 1.5rem 1.75rem 1.75rem;
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  -webkit-overflow-scrolling: touch;
}

.drawer-intro-text {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

.quote-box {
  border-left: 3px solid var(--nuked-laranja-explosao);
  padding: 0.75rem 1.25rem;
  background: rgba(255, 122, 0, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.25rem 0;
  font-style: italic;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Quem Somos: Modal Widescreen & Carrossel Interativo (Estilo Dribbble)
   -------------------------------------------------------------------------- */
.drawer-backdrop-immersive {
  background: rgba(3, 8, 20, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.drawer-content-wide {
  max-width: 980px;
  width: 95%;
  height: 85vh;
  min-height: 540px;
  max-height: 860px;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
  color: #111827;
}

@media (max-height: 640px) {
  .drawer-content-wide {
    height: 94vh;
    min-height: 420px;
  }
}

/* Base de Contraste e Tipografia do Modal Pastel */
#drawer-quem-somos .drawer-title {
  color: #111827;
}

#drawer-quem-somos .drawer-tag {
  color: #B84E00;
}

#drawer-quem-somos .btn-close-drawer {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #111827;
}

#drawer-quem-somos .btn-close-drawer:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #EF4444;
}

/* Esteira Líquida de Fundo (300% de largura total, 33.333% por slide) */
.qs-liquid-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  border-radius: inherit;
}

.qs-liquid-ribbon {
  width: 300%;
  height: 100%;
  display: flex;
  transform: translate3d(0, 0, 0);
  transition: transform 0.62s cubic-bezier(0.25, 1, 0.35, 1);
  will-change: transform;
}

.qs-liquid-pane {
  width: 33.33333%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}

.qs-pane-green {
  background: linear-gradient(135deg, #EEF9F2 0%, #DFF4E7 50%, #CEEED8 100%);
}

.qs-pane-blue {
  background: linear-gradient(135deg, #EEF5FC 0%, #DFEEF9 50%, #CDE3F5 100%);
}

.qs-pane-orange {
  background: linear-gradient(135deg, #FFF4EC 0%, #FDE7D7 50%, #FBDAC1 100%);
}

.qs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 5;
  transition: border-color 0.4s ease;
}

.qs-tabs-tracker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
  padding: 0.25rem;
  pointer-events: none;
  user-select: none;
  transition: all 0.4s ease;
}

[data-theme="light"] .qs-tabs-tracker {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(24, 76, 150, 0.15);
}

.qs-tab-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid transparent;
  background: transparent;
  color: #6B7280;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  cursor: default;
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
}

.qs-tab-step .qs-tab-num {
  font-size: 0.65rem;
  opacity: 0.65;
}

.qs-tab-step.active {
  background: #111827;
  color: #FFFFFF;
  border-color: #111827;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Viewport e Trilho do Carrossel com Sobreposição de Onda */
.qs-carousel-body {
  padding: 0 !important;
  overflow: hidden !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  z-index: 2;
}

.qs-viewport {
  width: 100%;
  height: 100%;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.qs-viewport.is-dragging {
  cursor: grabbing;
}

.qs-track {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.qs-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  display: none;
  will-change: clip-path;
}

.qs-slide.is-current {
  display: block;
  z-index: 2;
}

.qs-slide.is-incoming {
  display: block;
  z-index: 10;
  clip-path: url(#qs-wave-clip);
  -webkit-clip-path: url(#qs-wave-clip);
}

.qs-slide[data-slide="0"] {
  background: linear-gradient(135deg, #EEF9F2 0%, #DFF4E7 50%, #CEEED8 100%);
  color: #0A2418;
}

.qs-slide[data-slide="1"] {
  background: linear-gradient(135deg, #EEF5FC 0%, #DFEEF9 50%, #CDE3F5 100%);
  color: #081E38;
}

.qs-slide[data-slide="2"] {
  background: linear-gradient(135deg, #FFF4EC 0%, #FDE7D7 50%, #FBDAC1 100%);
  color: #3A1905;
}

.qs-slide-inner {
  padding: 1.75rem 2rem 2.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.qs-slide-header {
  margin-bottom: 1.5rem;
}

.qs-slide-badge {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-bottom: 0.35rem;
}

.qs-slide-title {
  font-family: var(--font-tech);
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.qs-slide-lead {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.6;
}

/* Slide 1: Timeline das 3 Fases da Estrutura (Verde Pastel & Cards Verde Tom sobre Tom) */
.qs-slide[data-slide="0"] .qs-slide-title {
  color: #0A2418;
}

.qs-slide[data-slide="0"] .qs-slide-lead {
  color: #1F4D38;
}

.qs-slide[data-slide="0"] .qs-slide-badge {
  color: #0E5E40;
}

.qs-timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.qs-phase-card {
  background: #D4EFE0;
  border: 1px solid rgba(14, 94, 64, 0.22);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 16px rgba(10, 36, 24, 0.05);
}

.qs-phase-card-highlight {
  background: #C4E8D3;
  border-color: rgba(14, 94, 64, 0.38);
  box-shadow: 0 6px 20px rgba(10, 36, 24, 0.08);
}

.qs-phase-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.qs-phase-tag {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(14, 94, 64, 0.14);
  color: #0A2418;
  letter-spacing: 0.06em;
}

.qs-phase-tag-accent {
  background: rgba(255, 122, 0, 0.2);
  color: #B84E00;
}

.qs-phase-tag-nuclear {
  background: rgba(0, 180, 100, 0.22);
  color: #084D2B;
}

.qs-phase-time {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  color: #427056;
  letter-spacing: 0.05em;
}

.qs-phase-title {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 700;
  color: #0A2418;
}

.qs-phase-desc {
  font-size: 0.85rem;
  color: #1F4733;
  line-height: 1.55;
}

.qs-phase-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.35rem;
}

.qs-gallery-single {
  grid-template-columns: 1fr;
}

.qs-img-wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  aspect-ratio: 16/10;
  background: #000;
}

.qs-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-spring);
}

.qs-img-wrapper:hover img {
  transform: scale(1.04);
}

.qs-img-caption {
  position: absolute;
  bottom: 0;
  inset-x: 0;
  background: linear-gradient(to top, rgba(3, 8, 20, 0.92) 0%, rgba(3, 8, 20, 0.6) 70%, transparent 100%);
  padding: 1.25rem 0.85rem 0.45rem;
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Slide 2: Os Fundadores (Azul Pastel & Cards Azul Tom sobre Tom) */
.qs-slide[data-slide="1"] .qs-slide-title {
  color: #081E38;
}

.qs-slide[data-slide="1"] .qs-slide-lead {
  color: #203854;
}

.qs-slide[data-slide="1"] .qs-slide-badge {
  color: #0B3D6B;
}

.qs-quote-banner {
  background: #D7EAF9;
  border-left: 3px solid #0088CC;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.15rem 1.35rem;
  margin-top: 1rem;
}

.qs-quote-tag {
  font-family: var(--font-tech);
  font-size: 0.625rem;
  font-weight: 800;
  color: #0B3D6B;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.35rem;
}

.qs-quote-text {
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 700;
  color: #081E38;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

.qs-quote-sub {
  font-size: 0.825rem;
  color: #203A58;
  line-height: 1.55;
  margin: 0;
}

.qs-founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.qs-founder-card {
  background: #D4E8F8;
  border: 1px solid rgba(11, 47, 90, 0.22);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 4px 16px rgba(11, 31, 58, 0.05);
}

.qs-founder-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.qs-founder-avatar-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.qs-founder-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(11, 47, 90, 0.2);
  display: block;
}

.qs-founder-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nuked-verde-nuclear);
  border: 2px solid #D4E8F8;
  box-shadow: 0 0 8px rgba(0, 229, 143, 0.8);
}

.qs-founder-id {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.qs-founder-badge {
  font-family: var(--font-tech);
  font-size: 0.625rem;
  font-weight: 800;
  color: #0B3D6B;
  letter-spacing: 0.08em;
}

.qs-founder-name {
  font-family: var(--font-tech);
  font-size: 1.15rem;
  font-weight: 800;
  color: #081E38;
  line-height: 1.2;
}

.qs-founder-role {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  color: #435E7D;
  font-weight: 600;
}

.qs-founder-quote {
  font-size: 0.84rem;
  font-style: italic;
  color: #081E38;
  line-height: 1.45;
  padding: 0.65rem 0.85rem;
  background: #C4DEF5;
  border-left: 2px solid #0088CC;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.qs-founder-bio {
  font-size: 0.825rem;
  color: #203854;
  line-height: 1.55;
}

.qs-founder-routine {
  padding-top: 0.65rem;
  border-top: 1px solid rgba(11, 47, 90, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.qs-routine-label {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 800;
  color: #0B3D6B;
  letter-spacing: 0.08em;
}

.qs-routine-text {
  font-size: 0.8rem;
  color: #243D5B;
  line-height: 1.45;
}

.qs-together-box {
  margin-top: 1.5rem;
  background: #D4E8F8;
  border: 1px solid rgba(11, 47, 90, 0.22);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}

.qs-together-title {
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0B3D6B;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.qs-together-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.qs-together-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.825rem;
  line-height: 1.5;
  color: #203854;
}

.qs-together-item strong {
  color: #081E38;
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-tech);
}

.qs-together-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Slide 3: A Marca nuked (Laranja Pastel & Cards Laranja Tom sobre Tom) */
.qs-slide[data-slide="2"] .qs-slide-title {
  color: #3A1905;
}

.qs-slide[data-slide="2"] .qs-slide-lead {
  color: #5C3117;
}

.qs-slide[data-slide="2"] .qs-slide-badge {
  color: #B84E00;
}

.qs-lineage-card {
  background: #FBDDC7;
  border: 1px solid rgba(184, 78, 0, 0.22);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  margin-top: 1.25rem;
  box-shadow: 0 4px 16px rgba(58, 25, 5, 0.05);
}

.qs-lineage-label {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 800;
  color: #B84E00;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.65rem;
}

.qs-lineage-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.85rem;
  font-family: var(--font-tech);
  font-weight: 700;
}

.qs-chain-step {
  padding: 0.3rem 0.65rem;
  background: #F7CFB2;
  border: 1px solid rgba(184, 78, 0, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.825rem;
  color: #3A1905;
}

.qs-chain-arrow {
  color: #B84E00;
  font-weight: 800;
}

.qs-chain-final {
  background: #0E5E40;
  border-color: #0E5E40;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.qs-lineage-desc {
  font-size: 0.85rem;
  color: #4A2610;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.qs-brand-anatomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.qs-anatomy-card {
  background: #FBDDC7;
  border: 1px solid rgba(184, 78, 0, 0.22);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 16px rgba(58, 25, 5, 0.05);
}

.qs-anatomy-icon-slot {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qs-atom-svg {
  width: 48px;
  height: 48px;
}

.qs-anatomy-title {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 800;
  color: #3A1905;
}

.qs-anatomy-desc {
  font-size: 0.825rem;
  color: #4A2610;
  line-height: 1.5;
}

.qs-anatomy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4A2610;
}

.qs-anatomy-list strong {
  color: #3A1905;
}

.qs-swatches-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.qs-swatch-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
}

.qs-swatch-color {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.qs-swatch-info strong {
  display: block;
  color: #3A1905;
  font-family: var(--font-tech);
  font-size: 0.8rem;
  margin-bottom: 0.1rem;
}

.qs-swatch-info span {
  color: #5C3117;
}

.qs-tolerance-callout {
  margin-top: 1.25rem;
  background: #F7D4BB;
  border: 1px solid rgba(184, 78, 0, 0.28);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.qs-tolerance-callout:hover {
  border-color: rgba(184, 78, 0, 0.45);
  box-shadow: 0 4px 20px rgba(184, 78, 0, 0.1);
}

.qs-tolerance-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.15rem;
  background: #B84E00;
  border: 1px solid #B84E00;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  text-align: center;
}

.qs-tolerance-val {
  font-family: monospace;
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.05em;
  line-height: 1.1;
  white-space: nowrap;
}

.qs-tolerance-sub {
  font-family: var(--font-tech);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.35rem;
  white-space: nowrap;
}

.qs-tolerance-content {
  flex: 1;
  min-width: 0;
}

.qs-tolerance-title {
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 700;
  color: #3A1905;
  margin: 0 0 0.35rem 0;
}

.qs-tolerance-motto {
  font-family: var(--font-tech);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
  color: #B84E00;
  margin: 0 0 0.45rem 0;
}

.qs-tolerance-desc {
  font-size: 0.825rem;
  color: #4A2610;
  line-height: 1.55;
  margin: 0;
}

.qs-metric-highlight {
  display: inline;
  font-family: monospace;
  font-weight: 700;
  color: #B84E00;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .qs-tolerance-callout {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
  }
  .qs-tolerance-badge {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.65rem 1rem;
  }
  .qs-tolerance-sub {
    margin-top: 0;
  }
}

/* Rodapé com Dica de Arraste e Indicador de Progresso */
.qs-footer {
  padding: 0.85rem 1.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 5;
  transition: border-color 0.4s ease;
}

.qs-drag-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 700;
  color: #6B7280;
  user-select: none;
  pointer-events: none;
  letter-spacing: 0.04em;
  transition: opacity 0.4s ease;
}

.qs-drag-icon {
  font-size: 0.95rem;
  display: inline-block;
  animation: qs-drag-hint-pulse 1.8s infinite ease-in-out;
}

@keyframes qs-drag-hint-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(4px); opacity: 1; }
}

.qs-dots-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qs-dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  display: inline-block;
  transition: all 0.35s ease;
}

.qs-dot-btn.active {
  width: 22px;
  border-radius: var(--radius-full);
  background: #111827;
}

.qs-slide-counter {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 800;
  color: #4B5563;
  user-select: none;
  letter-spacing: 0.05em;
}

.qs-counter-val {
  color: #111827;
  font-weight: 800;
}

.qs-counter-sep {
  opacity: 0.4;
  margin: 0 0.2rem;
}

/* ==========================================================================
   nuked • Transição Líquida Contínua: Cores Pastel Claras & Cards Sobre-Tom
   Paleta: Verde Pastel (#EEF9F2) -> Azul Pastel (#EEF5FC) -> Laranja Pastel (#FFF4EC)
   ========================================================================== */

/* 1. TEMA VERDE PASTEL: Slide 0 (A Estrutura / Origem) */
#drawer-quem-somos[data-slide-theme="green"] .drawer-content-wide {
  border-color: rgba(14, 58, 36, 0.15);
  box-shadow: 0 25px 80px rgba(14, 58, 36, 0.12), 0 10px 30px rgba(0, 0, 0, 0.35);
}

#drawer-quem-somos[data-slide-theme="green"] .qs-header,
#drawer-quem-somos[data-slide-theme="green"] .qs-footer {
  border-color: rgba(11, 37, 22, 0.08);
}

#drawer-quem-somos[data-slide-theme="green"] .drawer-title,
#drawer-quem-somos[data-slide-theme="green"] .qs-slide-title {
  color: #0B2416 !important;
  text-shadow: none;
}

#drawer-quem-somos[data-slide-theme="green"] .drawer-tag,
#drawer-quem-somos[data-slide-theme="green"] .qs-slide-badge {
  background: #B7ECCF !important;
  color: #062E19 !important;
  border: 1px solid #8DE0B2 !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-slide-lead {
  color: #1C3B29 !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-tab-step.active {
  background: #0B2516 !important;
  color: #EEF9F2 !important;
  border-color: #0B2516 !important;
  box-shadow: 0 3px 10px rgba(11, 37, 22, 0.25) !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-dot-btn.active {
  background: #0B2516 !important;
  box-shadow: 0 0 8px rgba(11, 37, 22, 0.35) !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-counter-val {
  color: #0B2516 !important;
}

/* Cards de Fase: Sobre tom verde mais forte */
#drawer-quem-somos[data-slide-theme="green"] .qs-phase-card {
  background: #CEF2DF !important;
  border: 1px solid #9CE1BB !important;
  box-shadow: 0 8px 24px rgba(11, 36, 22, 0.06) !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-phase-card .qs-phase-title {
  color: #092214 !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-phase-card .qs-phase-desc {
  color: #1B3E2A !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-phase-card .qs-phase-time {
  color: #2D6343 !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-phase-card .qs-phase-tag {
  background: #B3ECCF !important;
  color: #062E19 !important;
  border: 1px solid #8CE2B4 !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-phase-card .qs-phase-tag-accent {
  background: #FEDCC5 !important;
  color: #8F2D00 !important;
  border: 1px solid #FCBA8D !important;
}

#drawer-quem-somos[data-slide-theme="green"] .qs-phase-card .qs-img-wrapper {
  border: 1px solid #8FE0B4 !important;
}

/* 2. TEMA AZUL PASTEL: Slide 1 (Os Fundadores) */
#drawer-quem-somos[data-slide-theme="blue"] .drawer-content-wide {
  border-color: rgba(14, 46, 82, 0.15);
  box-shadow: 0 25px 80px rgba(14, 46, 82, 0.12), 0 10px 30px rgba(0, 0, 0, 0.35);
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-header,
#drawer-quem-somos[data-slide-theme="blue"] .qs-footer {
  border-color: rgba(10, 32, 56, 0.08);
}

#drawer-quem-somos[data-slide-theme="blue"] .drawer-title,
#drawer-quem-somos[data-slide-theme="blue"] .qs-slide-title {
  color: #081C33 !important;
  text-shadow: none;
}

#drawer-quem-somos[data-slide-theme="blue"] .drawer-tag,
#drawer-quem-somos[data-slide-theme="blue"] .qs-slide-badge {
  background: #B6D7F8 !important;
  color: #052850 !important;
  border: 1px solid #8ABFF2 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-slide-lead {
  color: #193657 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-tab-step.active {
  background: #0A2038 !important;
  color: #EEF5FC !important;
  border-color: #0A2038 !important;
  box-shadow: 0 3px 10px rgba(10, 32, 56, 0.25) !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-dot-btn.active {
  background: #0A2038 !important;
  box-shadow: 0 0 8px rgba(10, 32, 56, 0.35) !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-counter-val {
  color: #0A2038 !important;
}

/* Cards dos Fundadores e Banner: Sobre tom azul mais forte */
#drawer-quem-somos[data-slide-theme="blue"] .qs-founder-card,
#drawer-quem-somos[data-slide-theme="blue"] .qs-quote-banner,
#drawer-quem-somos[data-slide-theme="blue"] .qs-together-box {
  background: #CFE3F7 !important;
  border: 1px solid #9EC3ED !important;
  box-shadow: 0 8px 24px rgba(8, 28, 51, 0.06) !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-founder-name,
#drawer-quem-somos[data-slide-theme="blue"] .qs-founder-header h4 {
  color: #061A32 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-founder-role {
  color: #204975 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-founder-quote {
  color: #0E2C50 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-founder-badge,
#drawer-quem-somos[data-slide-theme="blue"] .qs-quote-tag {
  background: #B6D7F8 !important;
  color: #052850 !important;
  border: 1px solid #8ABFF2 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-quote-text {
  color: #081E38 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-quote-sub {
  color: #1A3B61 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-together-title {
  color: #061A32 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-together-item {
  color: #1A3B61 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-together-item strong {
  color: #061A32 !important;
}

#drawer-quem-somos[data-slide-theme="blue"] .qs-founder-avatar-wrap {
  border: 2px solid #89BAEB !important;
}

/* 3. TEMA LARANJA PASTEL: Slide 2 (A Marca nuked / Manifesto) */
#drawer-quem-somos[data-slide-theme="orange"] .drawer-content-wide {
  border-color: rgba(90, 36, 12, 0.15);
  box-shadow: 0 25px 80px rgba(90, 36, 12, 0.12), 0 10px 30px rgba(0, 0, 0, 0.35);
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-header,
#drawer-quem-somos[data-slide-theme="orange"] .qs-footer {
  border-color: rgba(54, 23, 9, 0.08);
}

#drawer-quem-somos[data-slide-theme="orange"] .drawer-title,
#drawer-quem-somos[data-slide-theme="orange"] .qs-slide-title {
  color: #241006 !important;
  text-shadow: none;
}

#drawer-quem-somos[data-slide-theme="orange"] .drawer-tag,
#drawer-quem-somos[data-slide-theme="orange"] .qs-slide-badge {
  background: #F8C9A6 !important;
  color: #431E0C !important;
  border: 1px solid #F3A874 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-slide-lead {
  color: #442211 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tab-step.active {
  background: #361709 !important;
  color: #FFF4EC !important;
  border-color: #361709 !important;
  box-shadow: 0 3px 10px rgba(54, 23, 9, 0.25) !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-dot-btn.active {
  background: #361709 !important;
  box-shadow: 0 0 8px rgba(54, 23, 9, 0.35) !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-counter-val {
  color: #361709 !important;
}

/* Cards da Marca e Callout: Sobre tom laranja/pêssego mais forte */
#drawer-quem-somos[data-slide-theme="orange"] .qs-lineage-card,
#drawer-quem-somos[data-slide-theme="orange"] .qs-anatomy-card,
#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-callout {
  background: #FEDCC5 !important;
  border: 1px solid #FDBB90 !important;
  box-shadow: 0 8px 24px rgba(36, 16, 6, 0.06) !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-anatomy-card .qs-anatomy-title,
#drawer-quem-somos[data-slide-theme="orange"] .qs-lineage-label,
#drawer-quem-somos[data-slide-theme="orange"] .qs-lineage-card strong {
  color: #210D04 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-anatomy-card .qs-anatomy-desc {
  color: #452414 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-anatomy-card .qs-anatomy-list li {
  color: #452414 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-anatomy-card .qs-anatomy-list strong {
  color: #210D04 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-chain-step {
  background: #F8C9A6 !important;
  border: 1px solid #F3A874 !important;
  color: #431E0C !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-swatch-info strong {
  color: #210D04 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-swatch-info span {
  color: #552D19 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-callout {
  background: #FDCEAE !important;
  border: 1px solid #FCA268 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-badge {
  background: #FB995A !important;
  border: 1px solid #E6762E !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.06) !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-val {
  color: #4A1700 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-sub {
  color: #381100 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-callout .qs-tolerance-title {
  color: #210D04 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-callout .qs-tolerance-motto {
  color: #7D2600 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-tolerance-callout .qs-tolerance-desc {
  color: #472515 !important;
}

#drawer-quem-somos[data-slide-theme="orange"] .qs-metric-highlight {
  color: #7D2600 !important;
}

/* Blog Cards */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog-card {
  padding: 1.25rem;
  background: var(--bg-surface-elevated);
  border: var(--border-tech);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
}

.blog-card:hover {
  border-color: rgba(255, 122, 0, 0.4);
  transform: translateY(-2px);
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  color: var(--nuked-laranja-explosao);
  margin-bottom: 0.4rem;
}

.blog-card-title {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.blog-card-summary {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Mini HUD de Conquistas no Canto Esquerdo (5 segundos com opção de salvar)
   -------------------------------------------------------------------------- */
.trophy-hud-container {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 250;
  pointer-events: auto;
  transition: transform 0.4s var(--ease-spring), opacity 0.35s ease;
  transform: translateY(120%) scale(0.95);
  opacity: 0;
  pointer-events: none;
}

.trophy-hud-container.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Quando o modal de autenticação estiver ativo, o HUD permanece com foco total */
.trophy-hud-container.modal-focused {
  z-index: 650 !important;
  box-shadow: 0 0 35px rgba(255, 122, 0, 0.5), 0 10px 40px rgba(0, 0, 0, 0.85);
}

.trophy-hud-container.modal-focused .trophy-hud-card {
  border-color: var(--nuked-laranja-explosao) !important;
}

.trophy-hud-card {
  background: var(--glass-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
}

.trophy-hud-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--nuked-laranja-explosao);
  width: 100%;
  transform-origin: left;
  animation: hud-progress 15s linear forwards;
}

.trophy-hud-progress.paused {
  animation-play-state: paused !important;
}

@keyframes hud-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.trophy-hud-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trophy-hud-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255, 122, 0, 0.6));
}

.trophy-hud-info {
  display: flex;
  flex-direction: column;
}

.trophy-hud-tag {
  font-family: var(--font-tech);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--nuked-laranja-explosao);
  text-transform: uppercase;
  font-weight: 700;
}

.trophy-hud-title {
  font-family: var(--font-tech);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.trophy-hud-xp {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.trophy-hud-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.btn-hud-register {
  background: var(--nuked-laranja-explosao);
  color: #0A0E18;
  border: none;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--duration-fast) ease;
}

.btn-hud-register:hover {
  background: var(--nuked-laranja-hover);
  transform: translateY(-1px);
}

.btn-hud-dismiss {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-hud-dismiss:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Modal de Login para Registro de Conquistas (Esmaecendo a tela toda)
   -------------------------------------------------------------------------- */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(3, 8, 20, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.auth-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.auth-modal-backdrop:not(.active) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.auth-modal-backdrop:not(.active) * {
  pointer-events: none !important;
}

.auth-modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-tech);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 122, 0, 0.2);
  border-radius: var(--radius-lg);
  max-width: 440px;
  width: 100%;
  padding: 2.25rem 2rem;
  position: relative;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s var(--ease-spring);
}

.auth-modal-backdrop.active .auth-modal-card {
  transform: translateY(0) scale(1);
}

.auth-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
  transition: color var(--duration-fast) ease;
}

.auth-modal-close:hover {
  color: var(--nuked-laranja-explosao);
}

.auth-modal-badge {
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  color: var(--nuked-laranja-explosao);
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.auth-modal-title {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.auth-modal-subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.auth-trophy-highlight-box {
  background: rgba(255, 122, 0, 0.08);
  border: 1px solid rgba(255, 122, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.auth-trophy-box-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.auth-trophy-box-text {
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  color: var(--text-primary);
  font-weight: 600;
}

.auth-trophy-box-xp {
  font-size: 0.75rem;
  color: var(--nuked-laranja-explosao);
  font-weight: 700;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.auth-input-group label {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.auth-input-group input {
  background: var(--bg-primary);
  border: 1px solid var(--border-tech);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.auth-input-group input:focus {
  border-color: var(--nuked-laranja-explosao);
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.2);
}

.btn-auth-submit {
  width: 100%;
  background: var(--nuked-laranja-explosao);
  color: #0A0E18;
  font-family: var(--font-tech);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  transition: all var(--duration-fast) ease;
}

.btn-auth-submit:hover {
  background: var(--nuked-laranja-hover);
  box-shadow: 0 4px 20px var(--nuked-laranja-glow);
}

.auth-modal-footer {
  margin-top: 1rem;
  font-family: var(--font-tech);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Galeria de Medalhas (Cards & Estrutura Anti-Quebra)
   -------------------------------------------------------------------------- */
.medals-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.medal-gallery-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.05rem 1.25rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-tech);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-spring);
  position: relative;
}

.medal-gallery-card.unlocked {
  border-color: rgba(0, 229, 143, 0.4);
  background: rgba(0, 229, 143, 0.04);
}

[data-theme="light"] .medal-gallery-card.unlocked {
  border-color: rgba(24, 76, 150, 0.35);
  background: rgba(24, 76, 150, 0.05);
}

.medal-gallery-card.locked {
  opacity: 0.72;
  border-style: dashed;
}

.medal-gallery-card.legendary.unlocked {
  border-color: rgba(255, 122, 0, 0.75);
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.1) 0%, rgba(24, 76, 150, 0.05) 100%);
  box-shadow: 0 0 20px rgba(255, 122, 0, 0.18);
}

.medal-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
}

.medal-badge-symbol {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-tech);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  line-height: 1;
}

.medal-gallery-card.locked .medal-badge-symbol {
  color: var(--text-tertiary);
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.18);
}

.medal-badge-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.medal-badge-tag {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--nuked-laranja-explosao);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.medal-gallery-card.unlocked .medal-badge-tag {
  color: var(--nuked-verde-nuclear);
}

[data-theme="light"] .medal-gallery-card.unlocked .medal-badge-tag {
  color: #184C96;
}

.medal-gallery-card.legendary .medal-badge-tag {
  color: var(--nuked-laranja-explosao) !important;
}

.medal-gallery-card.locked .medal-badge-tag {
  color: var(--text-tertiary);
}

.medal-badge-name {
  font-family: var(--font-tech);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}

.medal-gallery-card.locked .medal-badge-name {
  color: var(--text-secondary);
}

.medal-status-pill {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(0, 229, 143, 0.12);
  color: var(--nuked-verde-nuclear);
  border: 1px solid rgba(0, 229, 143, 0.3);
  flex-shrink: 0;
  white-space: nowrap;
}

[data-theme="light"] .medal-status-pill {
  background: rgba(24, 76, 150, 0.1);
  color: #184C96;
  border-color: rgba(24, 76, 150, 0.25);
}

.medal-gallery-card.locked .medal-status-pill {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
}

.medal-badge-info {
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.45;
  width: 100%;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .medal-badge-info {
  border-top-color: rgba(24, 76, 150, 0.08);
}

/* Paridade de Design System: Sombras e Superfícies em Modo Claro */
[data-theme="light"] .pillar-card {
  box-shadow: 0 12px 32px rgba(24, 76, 150, 0.08), 0 0 0 1px rgba(24, 76, 150, 0.06);
}

[data-theme="light"] .hub-dropdown-menu,
[data-theme="light"] .mobile-nav-dropdown {
  box-shadow: 0 16px 40px rgba(24, 76, 150, 0.12), 0 0 0 1px rgba(24, 76, 150, 0.08);
}

[data-theme="light"] .drawer-content {
  box-shadow: 0 24px 60px rgba(24, 76, 150, 0.16), 0 0 0 1px rgba(24, 76, 150, 0.10);
}

[data-theme="light"] .btn-close-drawer {
  background: rgba(24, 76, 150, 0.06);
  border-color: rgba(24, 76, 150, 0.15);
  color: var(--text-secondary);
}

[data-theme="light"] .auth-modal-card {
  box-shadow: 0 24px 60px rgba(24, 76, 150, 0.16), 0 0 0 1px rgba(255, 122, 0, 0.2);
}

/* --------------------------------------------------------------------------
   Responsividade Tablet / Telas Intermediárias (769px a 1080px — inclui 1024px)
   Mantém títulos visíveis e botão Acessar Sistema à direita SEM virar hambúrguer
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1080px) {
  .hero-title {
    font-size: 2.85rem;
  }

  #top-control-cluster {
    display: none !important;
  }

  /* Dock no Centro (Unpinned) em 1024px: Proporcional, com títulos e Acessar Sistema à direita */
  .unified-menu-anchor {
    top: 70%;
    width: auto;
    max-width: 95%;
  }

  .liquid-glass-dock {
    height: 64px;
    padding: 0 1.25rem;
    gap: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
  }

  .dock-brand-slot {
    padding-right: 0.85rem;
    gap: 0.6rem;
    border-right: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .dock-logo-img {
    height: 30px;
  }

  .dock-signature {
    font-size: 0.76rem;
  }

  /* Mantém títulos visíveis no centro com tipografia calibrada */
  .dock-nav-items {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
  }

  .dock-link-btn {
    font-size: 0.875rem;
    padding: 0.45rem 0.85rem;
  }

  /* Botão Acessar Sistema e controles no canto direito */
  .dock-action-slot {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.35rem;
    padding-left: 0.85rem;
    border-left: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .dock-action-slot #btn-open-medals-dock,
  .dock-action-slot #theme-toggle-btn-dock {
    display: flex !important;
    width: 36px;
    height: 36px;
  }

  .dock-action-slot #btn-open-medals-dock svg,
  .dock-action-slot #theme-toggle-btn-dock svg {
    width: 17px;
    height: 17px;
  }

  /* Botão Hambúrguer oculto em tablets/1024px */
  .btn-hamburger {
    display: none !important;
  }

  .btn-access-system {
    padding: 0.55rem 1.05rem;
    font-size: 0.75rem;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Quando subir para o topo (.pinned): ajusta proporção dos títulos sem quebra e sem hambúrguer */
  .unified-menu-anchor.pinned {
    width: calc(100% - 2rem);
    max-width: 1040px;
    top: 1rem;
  }

  .unified-menu-anchor.pinned .liquid-glass-dock {
    height: 68px;
    padding: 0 1rem 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .unified-menu-anchor.pinned .dock-nav-items {
    display: flex !important;
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 0.5rem;
  }

  .unified-menu-anchor.pinned .dock-link-btn {
    font-size: 0.875rem;
    padding: 0.45rem 0.75rem;
  }

  .ecosystem-section {
    width: calc(100% - 2rem);
    padding: 4.5rem 0;
  }
}

/* --------------------------------------------------------------------------
   Responsividade Mobile Real (<= 768px: Celulares e Telas Estreitas)
   Aqui sim ativa o menu hambúrguer com Acessar Sistema preservado à direita
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.25rem;
  }

  #top-control-cluster {
    display: none !important;
  }

  .unified-menu-anchor {
    top: 72%;
    width: calc(100% - 2rem);
  }

  .unified-menu-anchor.pinned {
    width: calc(100% - 1.25rem);
    top: 0.75rem;
  }

  .liquid-glass-dock,
  .unified-menu-anchor.pinned .liquid-glass-dock {
    height: 60px;
    padding: 0 0.85rem;
    gap: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-full);
    width: 100%;
  }

  .dock-brand-slot {
    padding-right: 0.65rem;
    gap: 0.5rem;
    border-right: none;
    flex-shrink: 0;
  }

  .dock-logo-img,
  .unified-menu-anchor.pinned .dock-logo-img {
    height: 26px;
  }

  .dock-signature {
    font-size: 0.72rem;
  }

  /* No mobile real (<= 768px), encurta os links horizontais para a gaveta hambúrguer */
  .dock-nav-items,
  .unified-menu-anchor.pinned .dock-nav-items {
    display: none !important;
  }

  /* Slot de ação ativo mantendo Acessar Sistema + Hambúrguer */
  .dock-action-slot,
  .unified-menu-anchor.pinned .dock-action-slot {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding-left: 0;
    border-left: none;
    flex-shrink: 0;
  }

  /* Oculta ícones soltos na barra mobile; eles estão completos na gaveta */
  .dock-action-slot #btn-open-medals-dock,
  .dock-action-slot #theme-toggle-btn-dock {
    display: none !important;
  }

  .btn-hamburger {
    display: flex !important;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .btn-access-system {
    padding: 0.5rem 0.85rem;
    font-size: 0.72rem;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .btn-top-control {
    width: 38px;
    height: 38px;
  }

  .btn-top-control svg {
    width: 18px;
    height: 18px;
  }

  .ecosystem-section {
    width: calc(100% - 1.5rem);
    padding: 3.5rem 0;
  }

  /* Drawers / Modais no Mobile: Bottom Sheet Nativo & Ergonômico */
  .drawer-backdrop {
    padding: 0;
    align-items: flex-end;
    background: rgba(3, 8, 20, 0.82);
  }

  .drawer-content {
    max-width: 100%;
    width: 100%;
    max-height: 86vh;
    border-radius: 22px 22px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    transform: translateY(100%);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.8);
  }

  .drawer-backdrop.active .drawer-content {
    transform: translateY(0);
  }

  /* Pílula tátil de arrasto no topo da gaveta */
  .drawer-content::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.22);
    margin: 0.65rem auto 0;
    flex-shrink: 0;
  }

  [data-theme="light"] .drawer-content::before {
    background: rgba(0, 0, 0, 0.16);
  }

  .drawer-header {
    padding: 0.75rem 1.15rem 0.85rem;
  }

  .drawer-title {
    font-size: 1.125rem;
  }

  .drawer-tag {
    font-size: 0.625rem;
  }

  .btn-close-drawer {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .drawer-body {
    padding: 0.85rem 1.15rem 2rem;
  }

  .drawer-intro-text {
    font-size: 0.78rem;
    line-height: 1.45;
    margin-bottom: 0.85rem;
  }

  /* Cards de Medalha sem Quebra de Linha em Celulares */
  .medals-gallery-grid {
    gap: 0.65rem;
  }

  .medal-gallery-card {
    padding: 0.75rem 0.95rem;
    gap: 0.45rem;
    border-radius: var(--radius-md);
  }

  .medal-card-top {
    gap: 0.65rem;
  }

  .medal-badge-symbol {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }

  .medal-badge-tag {
    font-size: 0.6rem;
  }

  .medal-badge-name {
    font-size: 0.92rem;
  }

  .medal-status-pill {
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
  }

  .medal-badge-info {
    font-size: 0.76rem;
    line-height: 1.4;
    padding-top: 0.3rem;
  }

  /* Quem Somos Mobile */
  .qs-header {
    flex-wrap: wrap;
    padding: 0.85rem 1.15rem;
    gap: 0.65rem;
  }

  .qs-tabs-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    padding: 0.2rem;
  }

  .qs-tab-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
    gap: 0.3rem;
    flex: 1;
    justify-content: center;
  }

  .qs-slide-inner {
    padding: 1.15rem 1.15rem 2rem;
  }

  .qs-slide-title {
    font-size: 1.15rem;
  }

  .qs-phase-card,
  .qs-founder-card,
  .qs-anatomy-card,
  .qs-lineage-card {
    padding: 1.15rem;
  }

  .qs-phase-gallery {
    grid-template-columns: 1fr;
  }

  .qs-founders-grid,
  .qs-brand-anatomy-grid,
  .qs-together-grid {
    grid-template-columns: 1fr;
  }

  .qs-tolerance-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.15rem;
  }

  .qs-tolerance-val {
    font-size: 1.4rem;
  }

  .qs-footer {
    padding: 0.75rem 1.15rem;
  }

  .btn-qs-nav {
    padding: 0.35rem 0.85rem;
    font-size: 0.7rem;
  }
}

.mobile-nav-item-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-tech);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  width: 100%;
}

.theme-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.theme-icon-slot svg,
.mobile-nav-item-content svg,
.mobile-nav-row svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block;
  flex-shrink: 0;
}

.mobile-nav-row:hover .mobile-nav-item-content {
  color: var(--nuked-laranja-explosao);
}

@media (max-width: 480px) {
  .dock-signature {
    display: none;
  }

  .dock-brand-slot {
    border-right: none;
    padding-right: 0;
  }

  .btn-access-system {
    padding: 0.48rem 0.78rem;
    font-size: 0.7rem;
  }

  .btn-hamburger {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 860px) {
  .filament-color-box {
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.6rem;
  }

  /* Benchy Runner HUD & Modal Mobile (Linha Única sem quebras) */
  .game-hud-overlay {
    top: 0.75rem;
    width: auto;
    max-width: calc(100% - 1.25rem);
  }

  .game-header-bar {
    height: 44px;
    padding: 0 0.85rem;
    gap: 0.75rem;
    flex-direction: row !important;
  }

  .game-hud-hint {
    display: none !important;
  }

  .game-score-group {
    gap: 0.5rem;
  }

  .game-telemetry-badge {
    padding: 0.2rem 0.6rem;
    gap: 0.4rem;
  }

  .game-score-val {
    font-size: 0.95rem;
  }

  .game-avoided-val {
    font-size: 0.65rem;
  }

  .btn-exit-game {
    padding: 0.25rem 0.65rem;
    font-size: 0.68rem;
  }

  .game-over-card {
    padding: 1.5rem;
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 480px) {
  .game-avoided-val,
  .game-telemetry-divider {
    display: none !important;
  }

  .game-header-bar {
    padding: 0 0.65rem;
    gap: 0.45rem;
  }

  .drawer-content {
    max-height: 88vh;
  }

  .drawer-header {
    padding: 0.65rem 1rem 0.75rem;
  }

  .drawer-body {
    padding: 0.75rem 1rem 1.75rem;
  }

  .medal-gallery-card {
    padding: 0.65rem 0.85rem;
  }

  .medal-badge-symbol {
    width: 34px;
    height: 34px;
    font-size: 1.15rem;
  }

  .medal-badge-name {
    font-size: 0.88rem;
  }

  .medal-status-pill {
    font-size: 0.58rem;
    padding: 0.18rem 0.45rem;
  }
}

/* --------------------------------------------------------------------------
   Feedback Visual do Gesto com 2 Dedos (Ativação Secreta Benchy Runner)
   -------------------------------------------------------------------------- */
.two-finger-swipe-hint {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translate(-50%, -24px) scale(0.92);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.25s var(--ease-spring);
  will-change: opacity, transform;
}

.two-finger-swipe-hint.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.swipe-hint-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.25rem;
  background: rgba(7, 21, 43, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 122, 0, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 24px rgba(255, 122, 0, 0.35);
  border-radius: var(--radius-full);
}

[data-theme="light"] .swipe-hint-pill {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 122, 0, 0.55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 20px rgba(255, 122, 0, 0.25);
}

.swipe-hint-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.swipe-hint-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.swipe-hint-text {
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}

.swipe-hint-progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  overflow: hidden;
}

[data-theme="light"] .swipe-hint-progress {
  background: rgba(0, 0, 0, 0.12);
}

.swipe-hint-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--nuked-laranja-explosao), var(--nuked-verde-nuclear));
  border-radius: var(--radius-full);
  transition: width 0.06s linear;
}

/* ==========================================================================
   Módulo I.A nuked.agent • Design System: Comparativo Lado a Lado & Licença
   Paridade Estrita de Temas Claro e Escuro (Light & Dark Mode)
   ========================================================================== */

/* 1. Faixa de Licença / IP Compliance */
.radar-license-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

.radar-license-banner.commercial {
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.3);
  color: #00E676;
}

[data-theme="light"] .radar-license-banner.commercial {
  background: #F0FDF4;
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: #15803D;
}

.radar-license-banner.fanart {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #F59E0B;
}

[data-theme="light"] .radar-license-banner.fanart {
  background: #FFFBEB;
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: #B45309;
}

/* 2. Grid Comparativo Lado a Lado (Mercado Livre ↔ MakerWorld) */
.radar-side-by-side-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  .radar-side-by-side-grid {
    grid-template-columns: 1fr;
  }
}

.radar-side-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, #0E223F);
  border: 1px solid var(--border-subtle, rgba(56, 189, 248, 0.15));
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.radar-side-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
}

[data-theme="light"] .radar-side-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(24, 76, 150, 0.14);
  box-shadow: 0 4px 16px rgba(24, 76, 150, 0.05);
}

[data-theme="light"] .radar-side-card:hover {
  border-color: rgba(24, 76, 150, 0.3);
}

/* Cabeçalho do Card Lado a Lado */
.radar-side-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-subtle, rgba(56, 189, 248, 0.1));
}

[data-theme="light"] .radar-side-card-header {
  background: #F4F8FD;
  border-bottom: 1px solid rgba(24, 76, 150, 0.08);
}

.radar-side-badge {
  font-family: var(--font-tech, 'Space Grotesk', sans-serif);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
}

.radar-side-badge.ml {
  background: #FFE600;
  color: #2D3277;
}

.radar-side-badge.maker {
  background: #00AE42;
  color: #FFFFFF;
}

.radar-side-sub-status {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Imagem de Destaque Lado a Lado */
.radar-side-img-wrap {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: var(--bg-surface-elevated, #15325B);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="light"] .radar-side-img-wrap {
  background: #EDF3FA;
}

.radar-side-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.radar-side-card:hover .radar-side-img {
  transform: scale(1.03);
}

/* Corpo do Card Lado a Lado */
.radar-side-body {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.radar-side-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

[data-theme="light"] .radar-side-title {
  color: #0F233D;
}

.radar-side-main-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--border-subtle, rgba(56, 189, 248, 0.15));
}

[data-theme="light"] .radar-side-main-metric {
  border-bottom: 1px dashed rgba(24, 76, 150, 0.15);
}

.side-price {
  font-family: var(--font-mono, monospace);
  font-size: 1.25rem;
  font-weight: 900;
  color: #FF5500;
}

.side-sales {
  font-size: 0.78rem;
  font-weight: 700;
  color: #00E676;
}

[data-theme="light"] .side-sales {
  color: #15803D;
}

.side-hours {
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  font-weight: 900;
  color: #38BDF8;
}

[data-theme="light"] .side-hours {
  color: #184C96;
}

.side-weight {
  font-family: var(--font-mono, monospace);
  font-size: 0.88rem;
  font-weight: 700;
  color: #8B5CF6;
}

[data-theme="light"] .side-weight {
  color: #6D28D9;
}

/* Chips Técnicos do Card */
.radar-side-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.radar-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle, rgba(56, 189, 248, 0.15));
  color: var(--text-secondary);
}

[data-theme="light"] .radar-chip {
  background: #EDF3FA;
  border-color: rgba(24, 76, 150, 0.12);
  color: #3B5270;
}

.radar-chip.highlight {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.3);
  color: #00E5FF;
}

[data-theme="light"] .radar-chip.highlight {
  background: rgba(3, 105, 161, 0.1);
  border-color: rgba(3, 105, 161, 0.25);
  color: #0369A1;
}

.side-val-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.side-price-sub {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94A3B8);
}

[data-theme="light"] .side-price-sub {
  color: #5B7294;
}

.text-suggested {
  color: #00E5FF;
}

[data-theme="light"] .text-suggested {
  color: #0369A1;
}

.side-cost-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
}

[data-theme="light"] .side-cost-badge {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: #047857;
}

.radar-side-specs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #94A3B8);
  padding: 0.25rem 0 0.1rem;
}

[data-theme="light"] .radar-side-specs-row {
  color: #3B5270;
}

.side-spec-sep {
  opacity: 0.4;
}

/* Rodapé do Card Lado a Lado */
.radar-side-footer {
  padding: 0.65rem 1rem 0.85rem;
}

.radar-action-btn.full {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* 3. Faixa de Eficiência Operacional do Operador (Setup de Bancada) */
.radar-setup-efficiency-box {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-top: 0.25rem;
}

[data-theme="light"] .radar-setup-efficiency-box {
  background: #F0F9FF;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.setup-eff-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.setup-eff-icon {
  font-size: 0.95rem;
}

.setup-eff-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #38BDF8;
}

[data-theme="light"] .setup-eff-title {
  color: #0369A1;
}

.setup-eff-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

[data-theme="light"] .setup-eff-text {
  color: #3B5270;
}

/* 4. Pills de Licença no Master Card */
.radar-license-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.radar-license-pill.commercial {
  background: rgba(0, 230, 118, 0.1);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.25);
}

[data-theme="light"] .radar-license-pill.commercial {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.radar-license-pill.fanart {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="light"] .radar-license-pill.fanart {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid rgba(217, 119, 6, 0.3);
}