/* --- Geral e Variáveis --- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700&display=swap");

:root {
  --primary: #6a00ff;
  --primary-light: rgba(106, 0, 255, 0.1);
  --primary-dark: #5500cc;
  --accent: #00f2ff;
  --accent-light: rgba(0, 242, 255, 0.1);
  --accent2: #ff8c00;
  --dark: #05080f;
  --dark-card: #111827;
  --light: #f0f8ff;
  --light-secondary: rgba(240, 248, 255, 0.75);
  --card-border-color: rgba(106, 0, 255, 0.2);
  --card-hover-border-color: rgba(0, 242, 255, 0.6);
  --shadow-light: rgba(0, 242, 255, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.5);

  --navbar-height: 75px;
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 0.8s ease;

  /* Variáveis de tema */
  --bg-primary: var(--dark);
  --text-primary: var(--light);
  --text-secondary: var(--light-secondary);
  --card-bg: var(--dark-card);
  --card-border: var(--card-border-color);
  --card-hover-border: var(--card-hover-border-color);
}

[data-theme="light"] {
  /* Cores de Fundo */
  --bg-primary: #f4f7fc;                     /* Um cinza azulado muito claro, suave para os olhos */
  --bg-secondary: #ffffff;                   /* Branco puro para seções ou elementos que precisam de destaque */
  
  /* Cores de Texto */
  --text-primary: #1c202e;                   /* Um azul escuro profundo, melhor que preto puro */
  --text-secondary: #5a647e;                 /* Um cinza azulado para textos secundários */
  
  /* Cores dos Cards */
  --card-bg: #ffffff;                        /* Cards brancos para limpar o layout */
  --card-border: #e0e5f0;                   /* Borda cinza clara sutil */
  --card-hover-border: var(--primary);       /* Borda roxa no hover (usando a cor primária original) */
  
  /* Sombras */
  --shadow-light: rgba(106, 0, 255, 0.1);    /* Sombra roxa bem suave */
  --shadow-dark: rgba(0, 0, 0, 0.1);        /* Sombra escura padrão, mas mais suave */

  /* Cores de Destaque (Acentos) Adaptadas para o Tema Claro */
  --primary-on-light: var(--primary);       /* Roxo original da marca para elementos de destaque */
  --accent-on-light: var(--accent);         /* Ciano original da marca para elementos de destaque */

  /* Cores específicas para elementos que precisam de mais contraste no tema claro */
  --link-color-light: #5400c2;              /* Roxo mais escuro para links */
  --icon-color-light: var(--primary);       /* Roxo para ícones */
  --highlight-word-light-bg: rgba(106, 0, 255, 0.1); /* Fundo leve para palavras destacadas */
}

/* Ajustes Globais para o Tema Claro */
[data-theme="light"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Títulos no Tema Claro */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--text-primary);
}

/* Gradiente de título no tema claro - usar cores mais escuras */
[data-theme="light"] .section-title h2 {
  background: linear-gradient(90deg, var(--primary), #00a0b0); /* Roxo e um tom de ciano mais escuro */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .section-title h2::after {
  background: linear-gradient(90deg, var(--primary), #00a0b0);
}

/* Parágrafos no Tema Claro */
[data-theme="light"] p {
  color: var(--text-secondary);
}

/* Links no Tema Claro */
[data-theme="light"] a {
  color: var(--link-color-light);
}
[data-theme="light"] a:hover {
  color: var(--primary); /* Roxo original ao passar o mouse */
}

/* Cards no Tema Claro */
[data-theme="light"] .step,
[data-theme="light"] .service-card,
[data-theme="light"] .differential-card,
[data-theme="light"] .result-card,
[data-theme="light"] .mvv-card,
[data-theme="light"] .case-studies-slider,
[data-theme="light"] .testimonial-section,
[data-theme="light"] .cta-container, /* Adicionado .cta-container para o estilo de card do CTA */
[data-theme="light"] .lead-popup-content,
[data-theme="light"] .cookie-consent {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 25px var(--shadow-dark);
}

[data-theme="light"] .step:hover,
[data-theme="light"] .service-card:hover,
[data-theme="light"] .differential-card:hover,
[data-theme="light"] .result-card:hover,
[data-theme="light"] .mvv-card:hover,
[data-theme="light"] .cta-container:hover { /* Adicionado hover para .cta-container */
  border-color: var(--card-hover-border);
  box-shadow: 0 12px 30px rgba(106, 0, 255, 0.15); /* Sombra mais pronunciada no hover */
}

/* Ícones dos cards no Tema Claro */
[data-theme="light"] .step-icon,
[data-theme="light"] .service-icon,
[data-theme="light"] .result-icon,
[data-theme="light"] .cta-card-icon { /* Adicionado .cta-card-icon */
  background: linear-gradient(135deg, rgba(106, 0, 255, 0.05), rgba(0, 242, 255, 0.05));
  border: 1px solid rgba(106, 0, 255, 0.1);
}
[data-theme="light"] .step-icon i,
[data-theme="light"] .service-icon i,
[data-theme="light"] .result-icon i,
[data-theme="light"] .cta-card-icon i { /* Adicionado .cta-card-icon i */
  color: var(--primary-on-light); /* Roxo nos ícones */
}

[data-theme="light"] .diff-icon {
  color: var(--primary-on-light);
}

/* Botões no Tema Claro */
[data-theme="light"] .btn-primary {
  background: linear-gradient(95deg, var(--primary), var(--accent));
  color: #ffffff; /* Texto branco para contraste com gradiente */
  box-shadow: 0 5px 15px rgba(106, 0, 255, 0.2);
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 8px 20px rgba(106, 0, 255, 0.3);
}

[data-theme="light"] .btn-secondary {
  background-color: transparent;
  color: var(--primary-on-light); /* Roxo para texto */
  border: 2px solid var(--primary-on-light); /* Borda roxa */
}
[data-theme="light"] .btn-secondary:hover {
  background-color: rgba(106, 0, 255, 0.05); /* Fundo roxo muito claro no hover */
  color: var(--primary);
}

[data-theme="light"] .btn-contact {
  background-color: var(--primary); /* Roxo */
  color: #ffffff;
}
[data-theme="light"] .btn-contact:hover {
  background-color: var(--primary-dark); /* Roxo mais escuro */
}


/* Navbar no Tema Claro */
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.85); /* Branco com transparência e blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e0e5f0; /* Borda cinza clara */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
[data-theme="light"] .navbar-scrolled {
  background: rgba(255, 255, 255, 0.95); /* Mais opaco ao rolar */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
[data-theme="light"] .logo a {
  background: linear-gradient(90deg, var(--primary), #333, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .logo span {
   color: var(--primary); /* Roxo para o span do logo */
}
[data-theme="light"] .nav-link {
  color: var(--text-secondary);
}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link:focus {
  color: var(--primary-on-light); /* Roxo ao passar o mouse */
}
[data-theme="light"] .nav-link::after {
  background-color: var(--primary-on-light); /* Roxo para a linha abaixo do link */
}
[data-theme="light"] .mobile-menu-toggle {
  color: var(--text-primary);
}

/* Rodapé no Tema Claro */
[data-theme="light"] .footer { /* Corrigido: removido o _ de data-theme_light */
  background-color: #e9edf5; /* Um cinza bem claro para o rodapé */
  border-top: 1px solid #d1d9e6;
}
[data-theme="light"] .footer-title {
  color: var(--text-primary);
}
[data-theme="light"] .footer-link a,
[data-theme="light"] .footer-about,
[data-theme="light"] .footer-copyright,
[data-theme="light"] .footer-bottom-link {
  color: var(--text-secondary);
}
[data-theme="light"] .footer-link a:hover,
[data-theme="light"] .footer-bottom-link:hover {
  color: var(--primary-on-light);
}
[data-theme="light"] .footer-contact-item i {
  color: var(--primary-on-light);
}
[data-theme="light"] .social-icon {
  background-color: rgba(106, 0, 255, 0.08);
  color: var(--primary-on-light);
}
[data-theme="light"] .social-icon:hover {
  background-color: var(--primary);
  color: #ffffff;
}
[data-theme="light"] .footer .logo a { /* Especificidade para logo no footer tema claro */
  background: linear-gradient(90deg, var(--primary), #333, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .footer .logo span { /* Especificidade para span do logo no footer tema claro */
  color: var(--primary);
}
[data-theme="light"] .footer p { /* Parágrafos no rodapé tema claro */
  color: var(--text-secondary);
}


/* Hero section no tema claro */
[data-theme="light"] .hero-subtitle {
  color: var(--text-secondary);
}
[data-theme="light"] #hero-title {
   background: linear-gradient(90deg, var(--primary), #00a0b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .highlight-word {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero-stat {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  border: 1px solid var(--card-border);
}
[data-theme="light"] .hero-stat-number {
   background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Números dos cards de resultado no tema claro */
[data-theme="light"] .result-card h3.count-up {
  color: var(--primary); /* Roxo para os números */
  text-shadow: 
    -1px -1px 0 #fff,  
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
    -2px -2px 5px rgba(0, 242, 255, 0.3), /* Sombra ciano sutil */
     2px  2px 5px rgba(0, 242, 255, 0.3);
}

/* Journey Navigation no tema claro */
[data-theme="light"] .journey-dot {
  background-color: rgba(5, 8, 15, 0.2); /* Pontos mais escuros */
}
[data-theme="light"] .journey-step:hover .journey-dot,
[data-theme="light"] .journey-step.active .journey-dot {
  background-color: var(--primary);
}
[data-theme="light"] .journey-step span {
  color: var(--text-secondary);
}

/* Theme Toggle no tema claro */
[data-theme="light"] .theme-toggle-inner {
  background-color: var(--bg-primary); /* Fundo do botão de tema */
}
[data-theme="light"] .theme-icon {
  color: var(--primary-on-light); /* Cor dos ícones sol/lua */
}

/* --- Seção CTA (Call to Action) no Tema Claro --- */
[data-theme="light"] .cta-section {
  background-color: #e9edf5; 
}
[data-theme="light"] .cta-container { /* .cta-container já tem estilo de card acima */
  /* Herda --card-bg, --card-border, etc. que já estão definidos para #ffffff e #e0e5f0 */
}
[data-theme="light"] .cta-bg {
  opacity: 0.05;
}
[data-theme="light"] .cta-glow {
  opacity: 0.07;
}
[data-theme="light"] .cta-text {
  color: var(--text-secondary);
}
[data-theme="light"] .cta-card { /* Cards dentro do CTA */
  background: rgba(255, 255, 255, 0.8); 
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}
[data-theme="light"] .cta-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 25px rgba(106, 0, 255, 0.12);
}
[data-theme="light"] .cta-card-icon { /* Já coberto pela regra geral de .cta-card-icon */
  /* background: linear-gradient(135deg, rgba(106, 0, 255, 0.08), rgba(0, 242, 255, 0.08)); */
  /* border: 1px solid rgba(106, 0, 255, 0.15); */
}
[data-theme="light"] .cta-card-icon i { /* Já coberto pela regra geral de .cta-card-icon i */
  /* color: var(--primary); */
}
[data-theme="light"] .cta-card h3 { 
  color: var(--text-primary);
}
[data-theme="light"] .cta-card p,
[data-theme="light"] .cta-card .cta-card-description { 
  color: var(--text-secondary);
}
[data-theme="light"] .cta-card .btn-primary { 
  background: linear-gradient(95deg, var(--primary), var(--accent));
  color: #ffffff;
}
[data-theme="light"] .cta-card .btn-secondary { 
  color: var(--primary);
  border-color: var(--primary);
}
[data-theme="light"] .cta-card .btn-secondary:hover {
  background-color: rgba(106, 0, 255, 0.05);
  color: var(--primary-dark);
}
[data-theme="light"] .cta-limited,
[data-theme="light"] .cta-highlight {
  color: var(--link-color-light); 
}


/* ============================================= */
/* ESTILOS GERAIS (APLICÁVEIS A AMBOS OS TEMAS)  */
/* ============================================= */

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- Cursor Personalizado --- */
.custom-cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, background-color 0.3s ease;
  mix-blend-mode: difference;
}

.custom-cursor-follower {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, transform 0.6s ease;
  opacity: 0.5;
}

.cursor-expanded {
  transform: translate(-50%, -50%) scale(2);
  background-color: var(--primary);
}

.cursor-expanded-follower {
  width: 60px;
  height: 60px;
  border-color: var(--accent);
  opacity: 0.3;
}

/* --- Partículas Canvas --- */
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  opacity: 0.4;
  pointer-events: none;
}

/* --- Navegação de Jornada --- */
.journey-navigation {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 900;
}

.journey-step {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all var(--transition-medium);
}

.journey-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(240, 248, 255, 0.3); /* Default for dark theme */
  margin-right: 10px;
  transition: all var(--transition-medium);
  position: relative;
}

.journey-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  transition: transform var(--transition-medium);
}

.journey-step span {
  color: var(--text-secondary); /* Uses theme variable */
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--transition-medium);
  white-space: nowrap;
}

.journey-step:hover .journey-dot,
.journey-step.active .journey-dot {
  background-color: var(--primary);
  transform: scale(1.2);
}

.journey-step:hover .journey-dot::after,
.journey-step.active .journey-dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.journey-step:hover span,
.journey-step.active span {
  opacity: 1;
  transform: translateX(0);
}

/* --- Controle de Tema --- */
.theme-toggle {
  position: fixed;
  top: 100px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Default shadow for dark theme */
  transition: transform var(--transition-fast);
}
[data-theme="light"] .theme-toggle {
  box-shadow: 0 5px 15px var(--shadow-dark); /* Uses light theme shadow variable */
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(10deg);
}

.theme-toggle-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-primary); /* Uses theme variable */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.theme-icon {
  position: absolute;
  font-size: 1.5rem;
  color: var(--primary); /* Default for dark theme */
  transition: all var(--transition-medium);
}

.theme-icon.sun {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

.theme-icon.moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* JS adds .dark-theme to theme-toggle when dark mode is active */
/* These rules will apply if theme-toggle.js adds .dark-theme class */
.theme-toggle.dark-theme .theme-icon.sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.theme-toggle.dark-theme .theme-icon.moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}
/* If .dark-theme is NOT present (meaning light theme), sun is hidden, moon is visible by default icon styles.
   So, we need to ensure the correct icon shows for the active theme based on `html[data-theme]` */
[data-theme="dark"] .theme-icon.sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-icon.moon { opacity: 0; transform: rotate(-90deg) scale(0); }

[data-theme="light"] .theme-icon.sun { opacity: 0; transform: rotate(90deg) scale(0); }
[data-theme="light"] .theme-icon.moon { opacity: 1; transform: rotate(0) scale(1); }


/* --- Efeitos de Parallax --- */
.parallax-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  perspective: 1000px;
}

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

.hero-bg-element {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
}

.hero-bg-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -100px;
}

.hero-bg-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  right: -50px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}

.hero-bg-3 {
  width: 300px;
  height: 300px;
  top: 40%;
  left: 60%;
  background: radial-gradient(circle, var(--accent2) 0%, transparent 70%);
}

/* --- Animações de Texto Criativas --- */
.creative-text-container {
  display: inline-block;
  overflow: hidden;
}

.creative-letter {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.creative-text-container.is-visible .creative-letter {
  transform: translateY(0);
  opacity: 1;
}

.creative-letter:nth-child(1) { transition-delay: 0.05s; }
.creative-letter:nth-child(2) { transition-delay: 0.1s; }
.creative-letter:nth-child(3) { transition-delay: 0.15s; }
.creative-letter:nth-child(4) { transition-delay: 0.2s; }
.creative-letter:nth-child(5) { transition-delay: 0.25s; }
.creative-letter:nth-child(6) { transition-delay: 0.3s; }
.creative-letter:nth-child(7) { transition-delay: 0.35s; }
.creative-letter:nth-child(8) { transition-delay: 0.4s; }
.creative-letter:nth-child(9) { transition-delay: 0.45s; }
.creative-letter:nth-child(10) { transition-delay: 0.5s; }
.creative-letter:nth-child(11) { transition-delay: 0.55s; }
.creative-letter:nth-child(12) { transition-delay: 0.6s; }
.creative-letter:nth-child(13) { transition-delay: 0.65s; }
.creative-letter:nth-child(14) { transition-delay: 0.7s; }
.creative-letter:nth-child(15) { transition-delay: 0.75s; }


/* --- Visualização de Dados Interativa --- */
.data-viz {
  background-color: rgba(17, 24, 39, 0.5); /* Default for dark theme */
  position: relative;
}
[data-theme="light"] .data-viz {
  background-color: rgba(244, 247, 252, 0.7); /* Lighter background for light theme */
}


.data-viz-container {
  background: var(--card-bg); /* Uses theme variable */
  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--card-border); /* Uses theme variable */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* Default for dark theme */
  transition: all var(--transition-medium);
}
[data-theme="light"] .data-viz-container {
  box-shadow: 0 15px 40px var(--shadow-dark); /* Uses light theme shadow variable */
}


.data-viz-container:hover {
  border-color: var(--card-hover-border); /* Uses theme variable */
  box-shadow: 0 25px 50px var(--shadow-light); /* Uses theme variable */
  transform: translateY(-10px);
}

.data-viz-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.data-viz-btn {
  background: rgba(17, 24, 39, 0.7); /* Default for dark theme */
  border: 1px solid var(--card-border); /* Uses theme variable */
  color: var(--text-secondary); /* Uses theme variable */
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}
[data-theme="light"] .data-viz-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}


.data-viz-btn.active,
.data-viz-btn:hover {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: var(--light); /* Text color for active/hover button */
  transform: translateY(-3px);
  box-shadow: 0 5px 15px var(--shadow-light); /* Uses theme variable */
}
[data-theme="light"] .data-viz-btn.active,
[data-theme="light"] .data-viz-btn:hover {
  color: #ffffff; /* Ensure text is white on gradient for light theme */
}


.data-chart {
  height: 400px;
  margin-bottom: 20px;
  position: relative;
}

.data-viz-legend {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 20px;
  height: 10px;
  border-radius: 5px;
}

.legend-color.before {
  background-color: rgba(106, 0, 255, 0.7);
}

.legend-color.after {
  background-color: rgba(0, 242, 255, 0.7);
}

/* --- Portfólio 3D --- */
.portfolio {
  position: relative;
  background-color: var(--bg-primary); /* Uses theme variable */
}

.portfolio-container {
  position: relative;
}

.portfolio-gallery {
  height: 500px;
  position: relative;
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
  background-color: rgba(5, 8, 15, 0.3); /* Default for dark theme */
}
[data-theme="light"] .portfolio-gallery {
  background-color: rgba(224, 229, 240, 0.5); /* Lighter shade for light theme */
}


.portfolio-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.portfolio-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light); /* Text color for nav button */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
[data-theme="light"] .portfolio-nav-btn {
  color: #ffffff; /* Ensure text is white on gradient for light theme */
}


.portfolio-nav-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px var(--shadow-light); /* Uses theme variable */
}

.portfolio-info {
  flex: 1;
  text-align: center;
}

.portfolio-title {
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.portfolio-description {
  color: var(--text-secondary); /* Uses theme variable */
}

/* --- Hero 3D Model --- */
.hero-3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

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

/* Tipografia Moderna e Hierarquia */
h1,
h2,
h3,
h4 {
  font-family: "Orbitron", sans-serif;
  letter-spacing: 1.2px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-primary); /* Uses theme variable */
  margin-bottom: 1rem;
}

h1 { font-size: clamp(2.5rem, 6vw, 3.8rem); }
h2 { font-size: clamp(2rem, 5vw, 2.8rem); }
h3 { font-size: clamp(1.5rem, 4vw, 1.9rem); }
h4 { font-size: clamp(1.2rem, 3.5vw, 1.4rem); }

p {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.8;
  color: var(--text-secondary); /* Uses theme variable */
  margin-bottom: 1.5em;
}

a {
  text-decoration: none;
  color: var(--accent); /* Default link color for dark theme */
  transition: color var(--transition-fast), transform var(--transition-fast);
}
a:hover,
a:focus {
  color: var(--primary); /* Default link hover color for dark theme */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 30px;
}

.section {
  padding: clamp(80px, 12vh, 120px) 0;
  position: relative;
  overflow: hidden;
}

/* Separadores Visuais Modernos */
.section-separator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, var(--bg-primary), transparent); /* Uses theme variable */
  z-index: 10;
  pointer-events: none;
}
.section-separator.reverse {
  top: 0;
  bottom: auto;
  background: linear-gradient(to bottom, var(--bg-primary), transparent); /* Uses theme variable */
}

/* Títulos de Seção Aprimorados */
.section-title {
  text-align: center;
  margin-bottom: clamp(40px, 8vw, 70px);
  position: relative;
}

.section-title h2 {
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--accent2)); /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% auto;
  animation: gradient-flow 8s ease infinite;
  padding-bottom: 10px;
}
.section-title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); /* Default for dark theme */
  border-radius: 2px;
  transition: width var(--transition-medium) ease-out 0.3s;
}
.section-title.is-visible h2::after {
  width: 120px;
}

.section-subtitle {
  max-width: 700px;
  margin: 0 auto 20px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--text-secondary); /* Uses theme variable */
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Botões Modernizados --- */
.btn-primary,
.btn-secondary,
.btn-contact,
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 35px;
  border-radius: 50px;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  z-index: 1;
  gap: 10px;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: linear-gradient(95deg, var(--primary), var(--accent));
  color: var(--light); /* Text color for primary button */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 5px 15px rgba(106, 0, 255, 0.3);
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 25px rgba(106, 0, 255, 0.5);
  color: var(--light);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary); /* Uses theme variable */
  border: 2px solid var(--primary);
  box-shadow: 0 5px 15px rgba(0, 242, 255, 0.1); /* Default for dark theme */
}
[data-theme="light"] .btn-secondary {
  box-shadow: 0 5px 15px var(--shadow-light); /* Uses light theme shadow variable */
}
.btn-secondary:hover,
.btn-secondary:focus {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--accent);
  color: var(--light); /* Text color for secondary button hover */
  box-shadow: 0 12px 25px var(--shadow-light); /* Uses theme variable */
  background-color: rgba(106, 0, 255, 0.1);
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-secondary:focus {
  color: var(--primary-on-light); /* Uses specific light theme variable */
}


.btn-contact {
  background-color: var(--accent);
  color: var(--dark); /* Text color for contact button */
  padding: 10px 25px;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(0, 242, 255, 0.3);
}
.btn-contact:hover,
.btn-contact:focus {
  background-color: var(--primary);
  color: var(--light); /* Text color for contact button hover */
  box-shadow: 0 8px 20px rgba(106, 0, 255, 0.4);
  transform: translateY(-3px);
}

.btn-primary i,
.btn-secondary i {
  font-size: 1.2em;
  transition: transform var(--transition-fast);
}
.btn-primary:hover i,
.btn-secondary:hover i {
  transform: translateX(5px);
}

/* --- Navbar Moderna --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  background: rgba(5, 8, 15, 0.8); /* Default for dark theme */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 1000;
  border-bottom: 1px solid rgba(106, 0, 255, 0.15); /* Default for dark theme */
  transition: padding var(--transition-medium), background-color var(--transition-medium), box-shadow
    var(--transition-medium), transform 0.4s ease-out;
  will-change: transform;
}
.navbar-scrolled {
  padding: 10px 0;
  background: rgba(5, 8, 15, 0.9); /* Default for dark theme */
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4); /* Default for dark theme */
}
.navbar-hidden {
  transform: translateY(-110%);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  font-weight: 700;
  transition: transform var(--transition-fast);
}
.logo a {
  background: linear-gradient(90deg, var(--light), var(--accent), var(--primary)); /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 250% auto;
  animation: gradient-flow 6s ease infinite;
  display: inline-block;
  transition: transform var(--transition-fast);
}
.logo a:hover {
  transform: scale(1.05);
}
.logo span {
  color: var(--accent); /* Default for dark theme */
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}
.logo a:hover span {
  transform: scale(1.1) rotate(-5deg);
}

.nav-links {
  display: flex;
  gap: clamp(20px, 3vw, 35px);
  list-style: none;
}
.nav-link {
  font-weight: 500;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  position: relative;
  padding: 8px 5px;
  color: var(--text-secondary); /* Uses theme variable */
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background-color: var(--accent); /* Default for dark theme */
  border-radius: 1px;
  transform-origin: center;
  transition: transform var(--transition-medium) cubic-bezier(0.19, 1, 0.22, 1);
}
.nav-link:hover,
.nav-link:focus {
  color: var(--text-primary); /* Uses theme variable */
  transform: translateY(-2px);
}
.nav-link:hover::after,
.nav-link:focus::after {
  transform: translateX(-50%) scaleX(1);
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary); /* Uses theme variable */
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 350px;
  height: 100vh;
  background: rgba(5, 8, 15, 0.95); /* Default for dark theme */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1001;
  transition: right var(--transition-medium);
  padding: 20px;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5); /* Default for dark theme */
  display: flex;
  flex-direction: column;
}
[data-theme="light"] .mobile-menu {
  background: rgba(244, 247, 252, 0.95); /* Lighter background for mobile menu in light theme */
  box-shadow: -5px 0 25px var(--shadow-dark);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(106, 0, 255, 0.2); /* Default for dark theme */
}
[data-theme="light"] .mobile-menu-header {
  border-bottom: 1px solid var(--card-border);
}


.mobile-menu-close {
  background: transparent;
  border: none;
  color: var(--text-primary); /* Uses theme variable */
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.mobile-nav-links {
  list-style: none;
  margin-bottom: 30px;
}
.mobile-nav-link {
  display: block;
  padding: 15px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary); /* Uses theme variable */
  border-bottom: 1px solid rgba(240, 248, 255, 0.1); /* Default for dark theme */
  transition: all var(--transition-fast);
}
[data-theme="light"] .mobile-nav-link {
  border-bottom: 1px solid var(--card-border);
}

.mobile-nav-link:hover {
  color: var(--accent); /* Default for dark theme */
  padding-left: 10px;
}
[data-theme="light"] .mobile-nav-link:hover {
  color: var(--primary-on-light);
}

.mobile-cta {
  margin-top: auto;
  width: 100%;
}

/* --- Hero Section Reimaginada --- */
.hero {
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: calc(var(--navbar-height) + 60px);
  padding-bottom: 80px;
  overflow: visible;
}
.hero .container {
  width: 100%;
  z-index: 1;
}
.hero-content {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  position: relative;
}
.hero-text-content {
  flex: 1 1 55%;
  order: 1;
}
.hero-img-container {
  flex: 1 1 45%;
  order: 2;
  perspective: 1200px;
  position: relative;
}
.hero-img-container img {
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); /* Default for dark theme */
  transform: rotateY(-5deg) rotateX(2deg) scale(1.05);
  transition: transform var(--transition-slow);
}
[data-theme="light"] .hero-img-container img {
  box-shadow: 0 20px 50px var(--shadow-dark);
}
.hero-img-container:hover img {
  transform: rotateY(0deg) rotateX(0deg) scale(1);
}

.hero-badge {
  position: absolute;
  top: 20px;
  right: -15px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  padding: 10px 20px;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.hero-badge::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent var(--primary) var(--primary) transparent;
  filter: brightness(0.7);
}
.hero-badge span { font-size: 0.75rem; opacity: 0.9; }
.hero-badge strong { font-weight: 700; font-size: 1rem; }

.hero h1 {
  margin-bottom: 30px;
  line-height: 1.25;
  font-weight: 700;
}
.hero-subtitle {
  margin-bottom: 40px;
  max-width: 550px;
  color: var(--text-primary); /* Uses theme variable, was --light-secondary before theme vars */
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.hero-stats {
  display: flex;
  gap: 25px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(17, 24, 39, 0.6); /* Default for dark theme */
  backdrop-filter: blur(5px);
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--card-border); /* Uses theme variable */
  min-width: 120px;
  transition: all var(--transition-medium);
}
.hero-stat:hover {
  transform: translateY(-5px);
  border-color: var(--card-hover-border); /* Uses theme variable */
  box-shadow: 0 10px 25px var(--shadow-light); /* Uses theme variable */
}
.hero-stat-number {
  font-family: "Orbitron", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--primary), var(--accent)); /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-stat-text {
  font-size: 0.85rem;
  color: var(--text-secondary); /* Uses theme variable */
  margin-top: 5px;
}

#hero-title {
  display: inline;
  /* Gradient for hero title should be handled by its own theme-specific rule if needed */
}
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--accent);
  margin-left: 4px;
  animation: blinkCursor 0.8s infinite;
  vertical-align: baseline;
}
@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.highlight-word {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); /* Default for dark theme */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  animation: pulseHighlight 2s infinite alternate;
}
@keyframes pulseHighlight {
  0% { filter: drop-shadow(0 0 5px var(--accent2)); }
  100% { filter: drop-shadow(0 0 15px var(--accent)); }
}

.hero-btns {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary); /* Uses theme variable */
  font-size: 0.9rem;
  opacity: 0.7;
  transition: all var(--transition-fast);
  animation: bounce 2s infinite;
}
.scroll-indicator:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}
.scroll-indicator i { font-size: 24px; }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* --- Como Funciona (Nova Seção) --- */
.how-it-works {
  background-color: rgba(17, 24, 39, 0.5); /* Default for dark theme */
  position: relative;
}
[data-theme="light"] .how-it-works {
  background-color: rgba(244, 247, 252, 0.7); /* Lighter for light theme */
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}
.step {
  background: linear-gradient(140deg, var(--card-bg) 0%, rgba(17, 24, 39, 0.7) 100%); /* Card bg from theme, with dark overlay */
  border-radius: 18px;
  padding: 40px 30px;
  text-align: center;
  border: 1px solid var(--card-border); /* Uses theme variable */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); /* Default for dark theme */
  transition: all var(--transition-medium);
}
[data-theme="light"] .step {
   background: linear-gradient(140deg, var(--card-bg) 0%, rgba(224, 229, 240, 0.7) 100%); /* Card bg from theme, with light overlay */
   box-shadow: 0 12px 35px var(--shadow-dark);
}
.step:hover {
  border-color: var(--card-hover-border); /* Uses theme variable */
  box-shadow: 0 25px 50px var(--shadow-light); /* Uses theme variable */
  transform: translateY(-10px);
}
.step-number {
  position: absolute;
  top: 15px;
  right: 15px;
  font-family: "Orbitron", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(106, 0, 255, 0.15);
  line-height: 1;
  transition: all var(--transition-medium);
}
.step:hover .step-number {
  color: rgba(0, 242, 255, 0.2);
}
.step-icon {
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(106, 0, 255, 0.1), rgba(0, 242, 255, 0.1)); /* Default for dark theme */
  border: 1px solid rgba(106, 0, 255, 0.2); /* Default for dark theme */
  position: relative;
  z-index: 1;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.step:hover .step-icon {
  transform: scale(1.1) rotate(-10deg);
  box-shadow: 0 0 20px rgba(106, 0, 255, 0.4);
}
.step-icon i {
  font-size: 40px;
  color: var(--accent); /* Default for dark theme */
  transition: color var(--transition-fast);
}
.step:hover .step-icon i {
  color: var(--primary);
}
.step h3 {
  font-size: clamp(1.4rem, 3.5vw, 1.7rem);
  margin-bottom: 18px;
  z-index: 1;
  position: relative;
  color: var(--text-primary); /* Uses theme variable */
}
.step p {
  margin-bottom: 0;
  line-height: 1.7;
  flex-grow: 1;
  z-index: 1;
  position: relative;
  color: var(--text-secondary); /* Uses theme variable */
}
.steps-cta {
  text-align: center;
}

/* --- Seção Sobre Nós --- */
.about {
  position: relative;
}
.about-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}
.about-img {
  grid-column: span 1;
  border-radius: 18px;
  overflow: visible;
  position: relative;
  transition: transform var(--transition-medium);
  z-index: 5;
}
.about-img img {
  border-radius: 18px;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5); /* Default for dark theme */
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  width: 100%;
  transform: rotate(-3deg) translateX(-10px);
}
[data-theme="light"] .about-img img {
  box-shadow: 0 25px 55px var(--shadow-dark);
}
.about-img:hover img {
  transform: rotate(1deg) scale(1.03) translateX(0);
  box-shadow: 0 30px 60px rgba(106, 0, 255, 0.3); /* Default for dark theme */
}
[data-theme="light"] .about-img:hover img {
  box-shadow: 0 30px 60px var(--shadow-light);
}

.about-experience-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  padding: 15px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transform: rotate(10deg);
  transition: all var(--transition-medium);
}
.about-img:hover .about-experience-badge {
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 15px 35px rgba(106, 0, 255, 0.4);
}
.about-experience-badge span { font-family: "Orbitron", sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.about-experience-badge strong { font-size: 0.8rem; margin-top: 5px; opacity: 0.9; }

.about-text {
  grid-column: span 1;
  position: relative;
  z-index: 1;
  padding: 20px 0 20px 20px;
  background: linear-gradient(90deg, rgba(17, 24, 39, 0.5) 0%, rgba(17, 24, 39, 0) 100%); /* Default for dark theme */
  border-radius: 0 10px 10px 0;
  margin-left: -40px;
}
[data-theme="light"] .about-text {
  background: linear-gradient(90deg, rgba(244, 247, 252, 0.7) 0%, rgba(244, 247, 252, 0) 100%); /* Lighter for light theme */
}
.about-text h3 {
  margin-bottom: 25px;
  background: linear-gradient(90deg, var(--text-primary), var(--primary)); /* Uses theme variable */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.mission-vision-values {
  margin-top: 45px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}
.mvv-card {
  background: linear-gradient(145deg, var(--card-bg) 0%, rgba(17, 24, 39, 0.8) 100%); /* Uses theme variable, dark overlay */
  padding: 35px;
  border-radius: 16px;
  border: 1px solid var(--card-border); /* Uses theme variable */
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Default for dark theme */
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
[data-theme="light"] .mvv-card {
  background: linear-gradient(145deg, var(--card-bg) 0%, rgba(224, 229, 240, 0.8) 100%); /* Uses theme variable, light overlay */
  box-shadow: 0 8px 25px var(--shadow-dark);
}
.mvv-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-light); /* Uses theme variable */
  border-color: var(--card-hover-border); /* Uses theme variable */
}
.mvv-icon {
  font-size: 1.5em;
  margin-right: 12px;
  color: var(--accent); /* Default for dark theme */
}
[data-theme="light"] .mvv-icon {
  color: var(--icon-color-light);
}
.mvv-card:hover .mvv-icon {
  color: var(--primary);
}
.mvv-card h4 {
  font-size: clamp(1.3rem, 3.8vw, 1.6rem);
  margin-bottom: 20px;
  color: var(--text-primary); /* Uses theme variable */
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 10px;
}
.mvv-card h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 1.5px;
  transition: width var(--transition-medium);
}
.mvv-card:hover h4::after { width: 80px; }
.mvv-card p, .mvv-card ul {
  line-height: 1.7;
  flex-grow: 1;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: var(--text-secondary); /* Uses theme variable */
}
.mvv-card.values ul { list-style: none; padding-left: 0; margin-top: 10px; }
.mvv-card.values li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 28px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.mvv-card.values li:hover {
  transform: translateX(5px);
  color: var(--text-primary); /* Uses theme variable */
}
.mvv-card.values li .list-icon {
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 1.1em;
  color: var(--accent); /* Default for dark theme */
  transition: transform var(--transition-fast), color var(--transition-fast);
}
[data-theme="light"] .mvv-card.values li .list-icon {
  color: var(--icon-color-light);
}
.mvv-card.values li:hover .list-icon {
  color: var(--primary);
  transform: rotate(10deg);
}

/* --- Seção Serviços --- */
.services {
  background-color: rgba(17, 24, 39, 0.5); /* Default for dark theme */
}
[data-theme="light"] .services {
  background-color: rgba(244, 247, 252, 0.7); /* Lighter for light theme */
}

.services-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 50px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.filter-btn {
  background: rgba(17, 24, 39, 0.7); /* Default for dark theme */
  border: 1px solid var(--card-border); /* Uses theme variable */
  color: var(--text-secondary); /* Uses theme variable */
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}
[data-theme="light"] .filter-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}
.service-card {
  background: linear-gradient(140deg, var(--card-bg) 0%, rgba(17, 24, 39, 0.7) 100%); /* Uses theme variable, dark overlay */
  border-radius: 18px;
  padding: 40px 30px;
  text-align: center;
  border: 1px solid var(--card-border); /* Uses theme variable */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); /* Default for dark theme */
  transition: all var(--transition-medium);
}
[data-theme="light"] .service-card {
  background: linear-gradient(140deg, var(--card-bg) 0%, rgba(224, 229, 240, 0.7) 100%); /* Uses theme variable, light overlay */
  box-shadow: 0 12px 35px var(--shadow-dark);
}
.service-card:hover {
  transform: translateY(-15px);
  border-color: var(--card-hover-border); /* Uses theme variable */
  box-shadow: 0 25px 50px var(--shadow-light); /* Uses theme variable */
}

.service-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: all var(--transition-fast);
}
.service-card:hover .service-badge {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(106, 0, 255, 0.4);
}
.service-icon {
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(106, 0, 255, 0.1), rgba(0, 242, 255, 0.1)); /* Default for dark theme */
  border: 1px solid rgba(106, 0, 255, 0.2); /* Default for dark theme */
  position: relative;
  z-index: 1;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.service-card:hover .service-icon {
  transform: scale(1.1) rotate(-10deg);
  box-shadow: 0 0 20px rgba(106, 0, 255, 0.4);
}
.service-icon i {
  font-size: 36px;
  color: var(--accent); /* Default for dark theme */
  transition: color var(--transition-fast);
}
.service-card:hover .service-icon i {
  color: var(--primary);
}
.service-card h3 {
  font-size: clamp(1.4rem, 3.5vw, 1.7rem);
  margin-bottom: 18px;
  z-index: 1;
  position: relative;
  color: var(--text-primary); /* Uses theme variable */
}
.service-card p {
  margin-bottom: 20px;
  line-height: 1.7;
  z-index: 1;
  position: relative;
  color: var(--text-secondary); /* Uses theme variable */
}
.service-features {
  list-style: none;
  padding: 0;
  margin: 0 0 25px;
  text-align: left;
  z-index: 1;
  position: relative;
}
.service-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text-secondary); /* Uses theme variable */
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}
.service-features li:hover {
  color: var(--text-primary); /* Uses theme variable */
  transform: translateX(5px);
}
.services-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
  text-align: center;
}