/* ==========================================================
   CONTAGEM — Design System & Custom Styles
   Mobile-first · Spacing tokens · Overflow correctly handled
   ========================================================== */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colors */
  --clr-navy-900: #07162B;
  --clr-navy-800: #0B1F3A;
  --clr-navy-700: #122540;
  --clr-navy-600: #1A3A5C;
  --clr-cyan:     #29B6F6;
  --clr-blue:     #1565C0;

  /* Spacing scale */
  --space-section-sm:  3.5rem;   /* 56px  — mobile  */
  --space-section-lg:  6rem;     /* 96px  — desktop */

  /* Container: clamp garante padding SIMÉTRICO em qualquer viewport
     min=24px  |  preferido=6vw  |  max=4rem(64px)
     A 400px: 6vw=24px  → 24px cada lado (respiração premium)
     A 640px: 6vw=38px  → 38px cada lado
     A 1280px: 6vw=76px → clamped a 64px (4rem)              */
  --container-px: clamp(1.5rem, 6vw, 4rem);

  /* Motion */
  --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2. BASE RESET
   ============================================================ */

/* overflow-x: clip (não hidden!) porque:
   - "hidden" cria novo scroll container, afetando position:sticky
   - "clip" corta conteúdo E sombras sem criar scroll container
   O fallback "hidden" é para browsers antigos.               */
html {
  overflow-x: hidden !important; /* fallback para browsers antigos */
  overflow-x: clip   !important; /* corta sombras sem criar scroll container */
}

body {
  font-family: 'DM Sans', sans-serif;
  background-color: #F8FAFC;
  overflow-x: hidden !important;
  overflow-x: clip   !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ============================================================
   3. LAYOUT — Page Wrapper
   Substitui "container mx-auto px-6" em todo o projeto.
   clamp() garante padding PERFEITAMENTE SIMÉTRICO nos dois lados.
   ============================================================ */
.page-wrapper {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left:  var(--container-px);
  padding-right: var(--container-px);
}


/* ============================================================
   4. SECTION SPACING
   Seções usam py-section para espaçamento responsivo.
   ============================================================ */
.py-section {
  padding-top:    var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
}

@media (min-width: 768px) {
  .py-section {
    padding-top:    var(--space-section-lg);
    padding-bottom: var(--space-section-lg);
  }
}


/* ============================================================
   5. VISUAL EFFECTS
   ============================================================ */

/* Glass morphism */
.glass-effect {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient bottom border */
.gradient-border {
  position: relative;
}
.gradient-border::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-cyan), transparent);
}

/* Premium drop shadow */
.premium-shadow {
  box-shadow: 0 20px 50px rgba(7, 22, 43, 0.15);
}

/* Glow cyan —
   Mobile: sombra interna discreta (não vaza além das bordas do card)
   Desktop: glow externo completo                                    */
.glow-cyan {
  box-shadow:
    0 0 0 1px rgba(41, 182, 246, 0.25),
    0 4px 20px rgba(41, 182, 246, 0.08);
}

@media (min-width: 768px) {
  .glow-cyan {
    box-shadow: 0 0 40px rgba(41, 182, 246, 0.15);
  }
}


/* ============================================================
   6. PROCESS — Step Line Connector (somente desktop ≥1024px)
   ============================================================ */
.step-line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--clr-navy-600) 0,
    var(--clr-navy-600) 10px,
    transparent 10px,
    transparent 20px
  );
  z-index: 0;
}

@media (max-width: 1023px) {
  .step-line::before {
    display: none;
  }
}


/* ============================================================
   7. MOBILE MENU OVERLAY
   ============================================================ */
#mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(7, 22, 43, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

#mobile-menu.is-open {
  display: flex;
  animation: menuFadeIn 0.22s var(--ease-premium) forwards;
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   8. CONTACT FORM — Feedback States
   ============================================================ */
#form-feedback {
  display: none;
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  margin-top: 0.75rem;
  grid-column: 1 / -1;
}

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

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


/* ============================================================
   9. ANIMATIONS
   ============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}