/*
  ============================================================
  PROJEKT — Estilos Principais
  ============================================================
  Arquitetura CSS:
    1.  Variáveis (Design Tokens)
    2.  Reset & Base
    3.  Tipografia
    4.  Utilitários globais
    5.  Cursor personalizado
    6.  Barra de progresso de scroll
    7.  Navegação
    8.  Hero Section
    9.  Manifesto Section
    10. Service Panels (estilo Tesla)
    11. Diferenciais Section
    12. Metodologia Section
    13. Sobre Section
    14. Depoimentos Section
    15. Contato Section
    16. Footer
    17. Animações & Transições
    18. Media Queries (responsividade)

  Convenção de nomenclatura: BEM modificado (block__element--modifier)
  Paleta inspirada em: Tesla.com · Linear.app · Palantir.com
  ============================================================
*/

/* ─────────────────────────────────────────────────────────
   1. VARIÁVEIS (DESIGN TOKENS)
   Altere aqui para rebranding. Propaga em todo o site.
───────────────────────────────────────────────────────── */
:root {
  /* Cores base — fundo escuro, texto claro (Tesla-inspired) */
  --color-bg:           #000000;   /* Fundo principal — preto puro */
  --color-surface-1:    #0d0d0d;   /* Superfície leve: cards, seções alt */
  --color-surface-2:    #141414;   /* Superfície média: formulários */
  --color-surface-3:    #1a1a1a;   /* Superfície alta: tooltips, dropdowns */

  /* Bordas e separadores */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.16);

  /* Texto */
  --color-text:         #ffffff;
  --color-text-sec:     #a0a0a0;   /* Secundário: subtítulos, labels */
  --color-text-ter:     #555555;   /* Terciário: placeholders, metadados */

  /* Cores de acento — identidade Projekt */
  --color-accent:       #0066ff;   /* Azul tecnologia — cor primária */
  --color-accent-dark:  #0052cc;   /* Hover do acento */
  --color-accent-ai:    #7c3aed;   /* Roxo IA — acento secundário */
  --color-accent-ai-dk: #6d28d9;   /* Hover do acento IA */
  --color-success:      #22c55e;
  --color-error:        #ef4444;

  /* Gradientes */
  --gradient-accent:    linear-gradient(135deg, #0066ff 0%, #7c3aed 100%);
  --gradient-dark:      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%);
  --gradient-hero:      linear-gradient(180deg,
                          rgba(0,0,0,0.3) 0%,
                          rgba(0,0,0,0.5) 50%,
                          rgba(0,0,0,0.85) 100%);

  /* Tipografia */
  --font-display:       'Space Grotesk', sans-serif;  /* Headings */
  --font-body:          'Inter', sans-serif;           /* Corpo */

  /* Escala de tamanhos (clamp = responsivo automático) */
  --text-xs:    clamp(0.7rem,   1vw, 0.75rem);
  --text-sm:    clamp(0.8rem,   1.2vw, 0.875rem);
  --text-base:  clamp(0.9rem,   1.4vw, 1rem);
  --text-md:    clamp(1rem,     1.6vw, 1.125rem);
  --text-lg:    clamp(1.1rem,   2vw, 1.25rem);
  --text-xl:    clamp(1.25rem,  2.5vw, 1.5rem);
  --text-2xl:   clamp(1.5rem,   3vw, 2rem);
  --text-3xl:   clamp(2rem,     4vw, 3rem);
  --text-4xl:   clamp(2.5rem,   6vw, 4.5rem);
  --text-hero:  clamp(3rem,     9vw, 8rem);

  /* Espaçamento */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout */
  --max-width:        1440px;
  --container-pad:    clamp(20px, 5vw, 80px);

  /* Bordas */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 48px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 30px rgba(0,102,255,0.25);

  /* Transições */
  --transition-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index escalonado */
  --z-below:   -1;
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-cursor:  9999;
}

/* ─────────────────────────────────────────────────────────
   2. RESET & BASE
   Normalização cross-browser + box model consistente
───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Scroll suave nativo — sobreposto por GSAP em desktop */
  scroll-behavior: smooth;
  /* Previne overflow horizontal acidental */
  overflow-x: hidden;
  /* Fonte base para cálculo de rem */
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;

  /* Renderização de texto otimizada */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Cursor padrão escondido em desktop para o cursor personalizado */
  cursor: none;
}

/* Restaura cursor padrão em touch devices */
@media (hover: none) {
  body { cursor: auto; }
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove estilos padrão de listas */
ul, ol { list-style: none; }

/* Remove estilos padrão de links */
a {
  color: inherit;
  text-decoration: none;
  cursor: none; /* usa o cursor personalizado */
}

@media (hover: none) {
  a { cursor: pointer; }
}

/* Remove estilos padrão de botões */
button {
  border: none;
  background: none;
  font-family: inherit;
  cursor: none;
}

@media (hover: none) {
  button { cursor: pointer; }
}

/* Remove estilos padrão de formulários */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Foco visível para acessibilidade — mantém usabilidade por teclado */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Seleção de texto com cor da marca */
::selection {
  background-color: rgba(0, 102, 255, 0.3);
  color: var(--color-text);
}

/* Scrollbar personalizada (webkit) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-ter); }

/* ─────────────────────────────────────────────────────────
   3. TIPOGRAFIA
───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

p { color: var(--color-text-sec); }

/* ─────────────────────────────────────────────────────────
   4. UTILITÁRIOS GLOBAIS
───────────────────────────────────────────────────────── */

/* Container centrado com padding responsivo */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Gradiente de texto — usado no hero e contato */
.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Eyebrow — pequena label acima do título da seção */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.section-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

/* Header padrão de seção */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-sec);
  max-width: 560px;
  margin-inline: auto;
}

/* Botão Primário */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn-primary i { transition: transform var(--transition-fast); }
.btn-primary:hover i { transform: translateX(4px); }

/* Botão Secundário */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────
   5. CURSOR PERSONALIZADO
   Dois elementos: ponto central + anel que segue com delay.
   Escondido em touch devices via media query.
───────────────────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);

  /* Só visível em dispositivos com hover (mouse) */
  display: none;
}

@media (hover: hover) {
  .cursor { display: block; }
}

.cursor-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-text);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.cursor-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* O anel tem delay — cria o efeito de "atraso" sofisticado */
  transition: transform 0.15s ease-out, width var(--transition-base), height var(--transition-base), border-color var(--transition-base);
}

/* Estado hover: cursor expande sobre links e botões */
.cursor.is-hovering .cursor-dot {
  background: var(--color-accent);
  transform: translate(-50%, -50%) scale(1.5);
}

.cursor.is-hovering .cursor-ring {
  width: 60px;
  height: 60px;
  border-color: rgba(0, 102, 255, 0.4);
}

/* ─────────────────────────────────────────────────────────
   6. BARRA DE PROGRESSO DE SCROLL
───────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;  /* Atualizado via JS */
  background: var(--gradient-accent);
  z-index: var(--z-cursor);
  transition: width 0.1s linear;
}

/* ─────────────────────────────────────────────────────────
   7. NAVEGAÇÃO
   Estado 1: Transparente sobre o hero (início da página)
   Estado 2: Glass-morphism após scroll (classe .scrolled)
───────────────────────────────────────────────────────── */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-5) 0;
  transition: all var(--transition-slow);
}

/* Estado transparente (sobre o hero) */
.nav-header:not(.scrolled) {
  background: transparent;
}

/* Estado após scroll: glassmorphism + borda sutil */
.nav-header.scrolled {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  gap: var(--space-8);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  width: 32px;
  height: 32px;
  background: var(--gradient-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
}

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-text);
}

/* Links de navegação desktop */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
  position: relative;
}

/* Underline animada nos links */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.nav-link:hover { color: var(--color-text); }
.nav-link:hover::after { width: 100%; }

/* CTA da navbar */
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--color-accent);
  color: white;
  transform: translateY(-1px);
}

/* Botão hambúrguer (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  flex-shrink: 0;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-text);
  transition: all var(--transition-base);
  transform-origin: center;
}

/* Animação do hambúrguer → X quando aberto */
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Menu mobile — overlay full-screen */
.mobile-menu {
  display: none;  /* Mostrado apenas em mobile */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(20px);
  z-index: var(--z-overlay);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text-sec);
  transition: color var(--transition-fast);
  transform: translateY(20px);
  opacity: 0;
}

.mobile-menu.is-open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, color var(--transition-fast);
}

/* Atraso escalonado para cada link do menu mobile */
.mobile-menu.is-open .mobile-nav-link:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.is-open .mobile-nav-link:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-nav-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.is-open .mobile-nav-link:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-nav-link:nth-child(5) { transition-delay: 0.25s; }

.mobile-nav-link:hover { color: var(--color-text); }

.mobile-nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-10);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.mobile-nav-cta:hover {
  background: var(--color-accent);
  color: white;
}

/* ─────────────────────────────────────────────────────────
   8. HERO SECTION
   Full-viewport, imagem de fundo com overlay, conteúdo
   centralizado. Padrão Tesla: máximo impacto, mínimo ruído.
───────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100svh;   /* svh = Small Viewport Height — funciona em mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* Imagem de fundo via variável CSS (editável inline no HTML) */
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* Parallax nativo */
}

/* Overlay gradiente: garante legibilidade do texto sobre a imagem */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: 1;
}

/* Partículas (geradas por JS) */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Conteúdo do hero — por cima do overlay e partículas */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: var(--space-32) var(--container-pad) var(--space-20);
  max-width: 900px;
}

/* Badge "Curitiba, PR" */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-8);
  backdrop-filter: blur(8px);
}

/* Ponto pulsante de "online/ativo" */
.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.5); }
}

/* Título principal — o maior elemento visual da página */
.hero-title {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-10);
  line-height: 1.5;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

/* Grupo de CTAs lado a lado */
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Indicador de scroll — anima verticalmente */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

.scroll-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ─────────────────────────────────────────────────────────
   9. MANIFESTO SECTION
───────────────────────────────────────────────────────── */
.manifesto-section {
  background: var(--color-surface-1);
  padding: var(--space-32) 0;
  text-align: center;
}

.manifesto-label {
  margin-bottom: var(--space-8);
}

.manifesto-quote {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  letter-spacing: -0.02em;
}

.manifesto-quote em {
  font-style: normal;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.manifesto-body {
  font-size: var(--text-lg);
  color: var(--color-text-sec);
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-20);
  line-height: 1.7;
}

/* Grade de métricas / stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-1);
  max-width: 900px;
  margin-inline: auto;
}

.stat-card {
  padding: var(--space-10) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.stat-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-4px);
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-accent);
  display: inline;
  vertical-align: super;
}

/* Agrupando número e sufixo na mesma linha */
.stat-card { position: relative; }
.stat-number, .stat-suffix {
  display: inline;
}

/* Container flex para número + sufixo */
.stat-card .stat-number { margin-right: 2px; }

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-sec);
  text-align: center;
  max-width: 140px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────
   10. SERVICE PANELS (ESTILO TESLA)
   Cada serviço = 100vh, imagem de fundo, overlay, texto.
───────────────────────────────────────────────────────── */
.service-panel {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;

  /* Imagem de fundo via variável CSS */
  background-image: var(--panel-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Overlay: gradiente da base (onde está o texto) para transparente no topo */
.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.5) 40%,
    rgba(0,0,0,0.1) 100%
  );
  z-index: 1;
}

/* Variante com gradiente à direita (para painéis align-right) */
.panel-overlay-right {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.5) 40%,
    rgba(0,0,0,0.1) 100%
  );
}

.panel-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--space-20);
}

/* Wrapper interno — limita largura do texto */
.panel-inner {
  max-width: 640px;
}

.align-left { margin-left: 0; }
.align-right { margin-left: auto; }

/* Eyebrow dos painéis */
.panel-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-4);
}

.panel-eyebrow-ai { color: rgba(196, 181, 253, 0.7); }

/* Título do painel */
.panel-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  line-height: 1.0;
}

/* Parágrafo de descrição */
.panel-description {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-6);
  line-height: 1.65;
  max-width: 520px;
}

/* Lista de features */
.panel-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.panel-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}

.panel-features li i {
  color: var(--color-success);
  font-size: 11px;
  flex-shrink: 0;
}

/* CTA dos painéis */
.panel-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: var(--space-1);
  transition: all var(--transition-base);
}

.panel-cta:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  gap: var(--space-5);
}

.panel-cta-ai:hover {
  color: #c4b5fd;
  border-color: #c4b5fd;
}

/* ─────────────────────────────────────────────────────────
   11. DIFERENCIAIS SECTION
───────────────────────────────────────────────────────── */
.diferenciais-section {
  background: var(--color-bg);
  padding: var(--space-32) 0;
}

.diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

.diferencial-card {
  padding: var(--space-10) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* Gradiente sutil no hover */
.diferencial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(0,102,255,0.05), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: inherit;
}

.diferencial-card:hover {
  border-color: rgba(0, 102, 255, 0.3);
  transform: translateY(-4px);
}

.diferencial-card:hover::before { opacity: 1; }

.diferencial-icon {
  width: 48px;
  height: 48px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
  transition: all var(--transition-base);
}

.diferencial-card:hover .diferencial-icon {
  background: var(--color-accent);
  color: white;
  box-shadow: var(--shadow-accent);
}

.diferencial-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.diferencial-body {
  font-size: var(--text-base);
  color: var(--color-text-sec);
  line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────
   12. METODOLOGIA SECTION
───────────────────────────────────────────────────────── */
.metodologia-section {
  background: var(--color-surface-1);
  padding: var(--space-32) 0;
}

.process-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  gap: 0;
  margin-top: var(--space-16);
}

/* Linha conectora horizontal entre steps */
.process-timeline::before {
  content: '';
  position: absolute;
  top: 28px;  /* Alinha com o centro do número */
  left: calc(10% + 20px);
  right: calc(10% + 20px);
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-4);
  position: relative;
  z-index: 1;
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-sec);
  margin-bottom: var(--space-6);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.process-step:hover .step-number {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
  box-shadow: var(--shadow-accent);
}

.step-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.step-body {
  font-size: var(--text-sm);
  color: var(--color-text-sec);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────
   13. SOBRE SECTION
   Layout dividido: imagem à esquerda, conteúdo à direita
───────────────────────────────────────────────────────── */
.sobre-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

.sobre-image-col {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.sobre-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
  transition: transform 0.8s ease;
}

.sobre-image-col:hover .sobre-image {
  transform: scale(1.03);
}

.sobre-content-col {
  background: var(--color-surface-1);
  display: flex;
  align-items: center;
  padding: var(--space-32) var(--space-16);
}

.sobre-content {
  max-width: 540px;
}

.sobre-body {
  font-size: var(--text-md);
  color: var(--color-text-sec);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.sobre-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-sec);
}

.highlight-item i {
  color: var(--color-accent);
  width: 16px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   14. DEPOIMENTOS SECTION
───────────────────────────────────────────────────────── */
.depoimentos-section {
  background: var(--color-bg);
  padding: var(--space-32) 0;
}

.testimonials-wrapper {
  position: relative;
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  transition: transform var(--transition-slow);
}

.testimonial-card {
  min-width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  position: relative;
  overflow: hidden;
}

/* Aspas decorativas */
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: var(--space-6);
  left: var(--space-8);
  font-family: var(--font-display);
  font-size: 8rem;
  color: rgba(0,102,255,0.08);
  line-height: 1;
  pointer-events: none;
}

.testimonial-quote {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.author-info { display: flex; flex-direction: column; gap: 2px; }

.author-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  font-style: normal;
}

.author-role {
  font-size: var(--text-sm);
  color: var(--color-text-sec);
}

/* Controles do carrossel */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.testimonial-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  color: var(--color-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  transition: all var(--transition-base);
}

.testimonial-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(0,102,255,0.05);
}

.testimonial-dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.testimonial-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-hover);
  transition: all var(--transition-base);
  border: none;
  padding: 0;
}

.testimonial-dot.active {
  background: var(--color-accent);
  width: 24px;
  border-radius: var(--radius-full);
}

/* ─────────────────────────────────────────────────────────
   15. CONTATO SECTION
───────────────────────────────────────────────────────── */
.contato-section {
  background: var(--color-surface-1);
  padding: var(--space-32) 0;
}

.contato-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.contato-title {
  font-size: var(--text-3xl);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}

.contato-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-sec);
  line-height: 1.6;
  margin-bottom: var(--space-10);
}

/* Links de canal de contato */
.contato-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.channel-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  transition: all var(--transition-base);
  text-decoration: none;
}

.channel-link:hover {
  border-color: var(--color-border-hover);
  transform: translateX(4px);
  background: var(--color-surface-3);
}

/* Estilo específico por canal */
.channel-link.channel-whatsapp:hover { border-color: #25D366; }
.channel-link.channel-linkedin:hover  { border-color: #0A66C2; }
.channel-link.channel-email:hover     { border-color: var(--color-accent); }

.channel-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-text-sec);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.channel-whatsapp:hover .channel-icon { background: #25D366; color: white; }
.channel-linkedin:hover  .channel-icon { background: #0A66C2; color: white; }
.channel-email:hover     .channel-icon { background: var(--color-accent); color: white; }

.channel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.channel-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-sec);
}

.channel-value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.channel-arrow {
  color: var(--color-text-ter);
  font-size: var(--text-xs);
  transition: transform var(--transition-fast);
}

.channel-link:hover .channel-arrow {
  transform: translateX(4px);
  color: var(--color-text-sec);
}

/* Endereço no contato */
.contato-address {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-sec);
}

.contato-address i { color: var(--color-accent); }

/* Formulário de contato */
.contato-form {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

.form-header { margin-bottom: var(--space-8); }

.form-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.form-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-sec);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-sec);
}

.form-input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.form-input::placeholder { color: var(--color-text-ter); }

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0,102,255,0.15);
}

/* Estilo do select */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* Opções do select — estilo no dark mode */
.form-select option {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-submit {
  width: 100%;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Spinner de loading do formulário */
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: var(--color-bg);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.form-submit.is-loading .btn-text,
.form-submit.is-loading i { display: none; }
.form-submit.is-loading .btn-spinner { display: block; }

/* Feedback de formulário (sucesso/erro) */
.form-feedback {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  display: none;
  text-align: center;
}

.form-feedback.success {
  display: block;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--color-success);
}

.form-feedback.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-error);
}

/* ─────────────────────────────────────────────────────────
   16. FOOTER
───────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-20) 0 var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-sec);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 280px;
}

/* Redes sociais */
.social-links {
  display: flex;
  gap: var(--space-3);
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--color-text-sec);
  transition: all var(--transition-base);
}

.social-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(0,102,255,0.05);
  transform: translateY(-2px);
}

.social-link-whatsapp:hover {
  border-color: #25D366;
  color: #25D366;
  background: rgba(37,211,102,0.05);
}

.footer-col-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-link {
  font-size: var(--text-sm);
  color: var(--color-text-sec);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-link:hover { color: var(--color-text); }

.footer-link i { font-size: 0.75em; }

.footer-address {
  font-style: normal;
  cursor: default;
}

/* Linha inferior do footer */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: var(--text-xs);
  color: var(--color-text-ter);
}

.footer-legal {
  display: flex;
  gap: var(--space-6);
}

.footer-legal-link {
  font-size: var(--text-xs);
  color: var(--color-text-ter);
  transition: color var(--transition-fast);
}

.footer-legal-link:hover { color: var(--color-text-sec); }

/* ─────────────────────────────────────────────────────────
   17. ANIMAÇÕES & TRANSIÇÕES
   Classes adicionadas via Intersection Observer no JS
───────────────────────────────────────────────────────── */

/* Estado inicial dos elementos que serão revelados */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado revelado — adicionado via JS quando entra na viewport */
.reveal-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Atraso escalonado para elementos em grade */
.reveal-up:nth-child(2) { transition-delay: 0.1s; }
.reveal-up:nth-child(3) { transition-delay: 0.2s; }
.reveal-up:nth-child(4) { transition-delay: 0.3s; }
.reveal-up:nth-child(5) { transition-delay: 0.4s; }

/* Partícula (gerada por JS) */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  pointer-events: none;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────
   18. MEDIA QUERIES — RESPONSIVIDADE
   Pontos de quebra:
     • 1200px: Desktop médio
     • 1024px: Tablet landscape
     •  768px: Tablet portrait / mobile grande
     •  480px: Mobile pequeno
───────────────────────────────────────────────────────── */

/* ── 1200px: Ajustes para desktop médio ── */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }

  .diferenciais-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 1024px: Tablet landscape ── */
@media (max-width: 1024px) {

  /* Nav: esconde links desktop, mostra hambúrguer */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: flex; }

  /* Hero: parallax fixed causa bugs em iOS — remover */
  .hero-section,
  .service-panel {
    background-attachment: scroll;
  }

  /* Sobre: stacked em vez de lado a lado */
  .sobre-section {
    grid-template-columns: 1fr;
  }

  .sobre-image-col {
    position: relative;
    height: 50vh;
    top: auto;
  }

  .sobre-content-col {
    padding: var(--space-16) var(--container-pad);
    justify-content: center;
  }

  .sobre-content { max-width: 100%; }

  /* Contato: stacked */
  .contato-grid { grid-template-columns: 1fr; }

  /* Processo: grid 3x2 em vez de 5x1 */
  .process-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }

  .process-timeline::before { display: none; }
}

/* ── 768px: Tablet portrait / mobile grande ── */
@media (max-width: 768px) {

  /* Footer: 2 colunas */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Processo: 2x3 */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Painel de serviço: conteúdo sempre à esquerda */
  .panel-inner.align-right { margin-left: 0; }

  /* Stats: 2x2 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Diferenciais: 1 coluna */
  .diferenciais-grid { grid-template-columns: 1fr; }

  /* Depoimento: padding reduzido */
  .testimonial-card { padding: var(--space-8); }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    justify-content: center;
  }
}

/* ── 480px: Mobile pequeno ── */
@media (max-width: 480px) {

  /* Footer: 1 coluna */
  .footer-grid { grid-template-columns: 1fr; }

  /* Processo: 1 coluna */
  .process-timeline { grid-template-columns: 1fr; }

  /* Stats: 1 coluna */
  .stats-grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; text-align: center; }

  .sobre-content-col { padding: var(--space-12) var(--container-pad); }

  /* Formulário: padding reduzido */
  .contato-form { padding: var(--space-6); }

  /* Manifesto: quote menor */
  .manifesto-quote { font-size: var(--text-2xl); }
}

/* ── Acessibilidade: redução de movimento ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reseta elementos de reveal imediatamente */
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
  }
}