/* =========================================================================
   AD Mangueiras & Conexões — Estilos personalizados
   Complementa o Tailwind (via CDN). Tema dark premium + verde da marca.
   ========================================================================= */

/* ---------- Variáveis da paleta da marca ---------- */
:root {
  --verde-primario: #00C853;
  --verde-hover:    #00A651;
  --verde-neon:     #39FF14;
  --preto-fundo:    #0A0F0D;
  --preto-fundo-2:  #0B1512;
  --grafite:        #141B18;
  --grafite-2:      #1C2622;
  --cinza-metal:    #8A9BA8;
  --branco:         #F4F7F5;
  --vermelho:       #FF3B30;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  background-color: var(--preto-fundo);
  color: var(--branco);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden; /* evita scroll horizontal em qualquer breakpoint */
}

h1, h2, h3, .font-display {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Offset para âncoras (header fixo) */
section[id] { scroll-margin-top: 90px; }

/* ---------- Texturas técnicas de fundo ---------- */
/* Grid sutil aplicado ao body inteiro */
.tech-grid {
  background-image:
    linear-gradient(rgba(0, 200, 83, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 83, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Glow radial reutilizável */
.glow-verde {
  background: radial-gradient(circle, rgba(0, 200, 83, 0.35) 0%, rgba(0, 200, 83, 0) 70%);
}

/* ---------- Texto com gradiente verde ---------- */
.text-gradient {
  background: linear-gradient(90deg, var(--verde-primario), var(--verde-neon));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Botões ---------- */
.btn-whatsapp {
  background: linear-gradient(135deg, var(--verde-primario), var(--verde-hover));
  color: #052012;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0, 200, 83, 0.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 200, 83, 0.55);
  filter: brightness(1.05);
}
.btn-whatsapp:focus-visible {
  outline: 3px solid var(--verde-neon);
  outline-offset: 3px;
}

.btn-secondary {
  border: 1px solid rgba(0, 200, 83, 0.5);
  color: var(--branco);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-secondary:hover {
  background-color: rgba(0, 200, 83, 0.1);
  border-color: var(--verde-primario);
  transform: translateY(-2px);
}
.btn-secondary:focus-visible {
  outline: 3px solid var(--verde-neon);
  outline-offset: 3px;
}

/* ---------- Cards de serviço (glassmorphism) ---------- */
.card-glass {
  background: rgba(28, 38, 34, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(138, 155, 168, 0.15);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-glass:hover {
  transform: translateY(-6px);
  border-color: var(--verde-primario);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 200, 83, 0.3);
}
.card-glass:hover .card-icon {
  color: var(--verde-neon);
  transform: scale(1.08);
}
.card-icon { transition: color .25s ease, transform .25s ease; }

/* ---------- Losango "AD" do hero ---------- */
.diamond {
  background: linear-gradient(135deg, var(--verde-primario), var(--verde-hover));
  box-shadow: 0 0 40px rgba(0, 200, 83, 0.6), inset 0 0 20px rgba(255,255,255,0.15);
}
.diamond-glow { animation: pulseGlow 3s ease-in-out infinite; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(0, 200, 83, 0.45), inset 0 0 20px rgba(255,255,255,0.15); }
  50%      { box-shadow: 0 0 70px rgba(0, 200, 83, 0.8),  inset 0 0 20px rgba(255,255,255,0.2); }
}

/* ---------- Botão flutuante de WhatsApp (pulso) ---------- */
.wa-float {
  box-shadow: 0 8px 30px rgba(0, 200, 83, 0.5);
}
.wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--verde-primario);
  z-index: -1;
  animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.8); opacity: 0;  }
}

/* ---------- Faixa de urgência (linhas de alerta) ---------- */
.urgencia {
  background:
    repeating-linear-gradient(45deg, rgba(255,59,48,0.08) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #1a0b0a, #0A0F0D);
  border-top: 1px solid rgba(255, 59, 48, 0.35);
  border-bottom: 1px solid rgba(255, 59, 48, 0.35);
}

/* ---------- Scroll indicator ---------- */
.scroll-indicator { animation: floatDown 1.8s ease-in-out infinite; }
@keyframes floatDown {
  0%, 100% { transform: translateY(0);  opacity: .6; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* ---------- Animações on-scroll (fallback simples, sem lib) ---------- */
/* Só esconde quando o JS está ativo (classe .js no <html>). Sem JS,
   todo o conteúdo permanece visível — nada some se o script falhar. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Linhas hidráulicas animadas do hero (SVG dashes) ---------- */
.flow-line {
  stroke-dasharray: 8 14;
  animation: flow 2.5s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -44; } }

/* ---------- Respeito a prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}