/* ===================================================
   ENHANCE.CSS — Camada premium 21st.dev inspired
   Grain · Aurora · Spotlight · Gradient Borders
   =================================================== */

/* ─────────────────────────────────────────
   1. GRAIN / NOISE OVERLAY
   ───────────────────────────────────────── */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99997;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  animation: grain-shift 0.85s steps(8) infinite;
}
@keyframes grain-shift {
  0%   { background-position:  0%   0%; }
  13%  { background-position: -5%  -10%; }
  25%  { background-position: -15%  5%; }
  38%  { background-position:  7%  -25%; }
  50%  { background-position: -5%   25%; }
  63%  { background-position: -15%  10%; }
  75%  { background-position:  15%  0%; }
  88%  { background-position:  0%   15%; }
  100% { background-position: -10%  10%; }
}

/* ─────────────────────────────────────────
   2. AURORA / MESH GRADIENT HERO
   ───────────────────────────────────────── */
.hero {
  background: linear-gradient(140deg, #04091c 0%, #0b1f50 30%, #1B4BAB 65%, #06101f 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: aurora-drift 14s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from {
    background:
      radial-gradient(ellipse 85% 55% at  10% 65%, rgba(196,30, 58,0.20) 0%, transparent 52%),
      radial-gradient(ellipse 70% 65% at  88% 20%, rgba(46,110,199,0.22) 0%, transparent 52%),
      radial-gradient(ellipse 48% 48% at  55% 90%, rgba(110,50,200,0.10) 0%, transparent 46%);
  }
  to {
    background:
      radial-gradient(ellipse 85% 55% at  38% 35%, rgba(196,30, 58,0.24) 0%, transparent 52%),
      radial-gradient(ellipse 70% 65% at  62% 78%, rgba(46,110,199,0.20) 0%, transparent 52%),
      radial-gradient(ellipse 48% 48% at  80% 25%, rgba(110,50,200,0.13) 0%, transparent 46%);
  }
}

/* ─────────────────────────────────────────
   3. DOT-GRID PATTERN — seções claras
   ───────────────────────────────────────── */
.produtos {
  background-color: var(--gray-50);
  background-image: radial-gradient(rgba(27,75,171,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.atendemos {
  background-color: var(--gray-50);
  background-image: radial-gradient(rgba(27,75,171,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.quem-somos {
  background: linear-gradient(160deg, #fff 0%, #f2f6ff 100%);
}

/* ─────────────────────────────────────────
   4. GRADIENT TEXT — títulos de seção
   ───────────────────────────────────────── */
.section__header .section__title:not(.section__title--white),
.quem-somos__content .section__title {
  background: linear-gradient(135deg, var(--text) 5%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Highlight hero já usa animation, preservamos */
.hero__title-highlight {
  background: linear-gradient(90deg, #60a5fa 0%, #fbbf24 35%, #f472b6 70%, #60a5fa 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-gradient-sweep 4s linear infinite;
}
@keyframes text-gradient-sweep {
  0%   { background-position:   0% center; }
  100% { background-position: 300% center; }
}

/* Nomes dos produtos com gradient sutil */
.produto-card h3 {
  background: linear-gradient(135deg, var(--text) 20%, var(--blue) 120%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────
   5. HERO STATS — animated gradient border
   ───────────────────────────────────────── */
.hero__stats {
  position: relative;
  background: rgba(255,255,255,0.07);
  border: 1px solid transparent;
  background-clip: padding-box;
}
.hero__stats::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(126,184,255,0.55) 0%,
    rgba(255,213,128,0.45) 22%,
    rgba(255,143,163,0.55) 44%,
    rgba(126,184,255,0.55) 66%,
    rgba(255,213,128,0.45) 88%,
    rgba(126,184,255,0.55) 100%
  );
  background-size: 400% 100%;
  animation: border-sweep 5s linear infinite;
}
@keyframes border-sweep {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}

/* ─────────────────────────────────────────
   6. SPOTLIGHT — produto-card (usa ::before)
   ───────────────────────────────────────── */
.produto-card {
  background: linear-gradient(145deg, #fff 0%, #f5f8ff 100%);
}
.produto-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(27,75,171,0.08) 0%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.produto-card.has-spotlight::before { opacity: 1; }

/* ─────────────────────────────────────────
   7. SPOTLIGHT — segmento-card (usa ::after)
   ───────────────────────────────────────── */
.segmento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(27,75,171,0.06) 0%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.segmento-card.has-spotlight::after { opacity: 1; }

/* ─────────────────────────────────────────
   8. REVIEW CARDS — glassmorphism upgrade
   ───────────────────────────────────────── */
.review-card {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.review-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.03) 45%,
    rgba(126,184,255,0.18) 100%
  );
  z-index: -1;
}
.review-card p { color: rgba(255,255,255,0.85); }
.review-card__author { color: rgba(168,212,255,0.9); font-weight: 600; }

/* ─────────────────────────────────────────
   9. SECTION TAGS — shimmer sweep
   ───────────────────────────────────────── */
.section__tag {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(27,75,171,0.10);
}
.section__tag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(27,75,171,0.14) 50%, transparent 100%
  );
  transform: translateX(-100%);
  animation: tag-shine 5.5s ease-in-out infinite;
}
@keyframes tag-shine {
  0%, 65%, 100% { transform: translateX(-100%); }
  35% { transform: translateX(100%); }
}
.section__tag--light::after {
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%
  );
}
.section__tag--gold::after {
  background: linear-gradient(90deg,
    transparent 0%, rgba(200,168,0,0.2) 50%, transparent 100%
  );
}

/* ─────────────────────────────────────────
   10. VÍDEO — enhanced glow
   ───────────────────────────────────────── */
.video-inner {
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.07),
    0 0 100px rgba(27,75,171,0.22);
}

/* ─────────────────────────────────────────
   11. CTA FINAL — aurora overlay
   ───────────────────────────────────────── */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 12% 50%, rgba(196,30,58,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 88% 50%, rgba(46,110,199,0.18) 0%, transparent 55%);
}

/* ─────────────────────────────────────────
   12. FOOTER — dark premium
   ───────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, #05091b 0%, #070c1d 100%);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer__brand p { color: rgba(255,255,255,0.42); }
.footer__links h4,
.footer__contato h4 {
  color: rgba(255,255,255,0.80);
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer__links a {
  color: rgba(255,255,255,0.42);
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  transition: all 0.25s;
}
.footer__links a:hover {
  color: rgba(126,184,255,0.9);
  transform: translateX(5px);
}
.footer__contato p,
.footer__contato a {
  color: rgba(255,255,255,0.42);
  font-size: 0.88rem;
  transition: color 0.25s;
}
.footer__contato a:hover { color: rgba(126,184,255,0.9); }
.footer__bottom { background: rgba(0,0,0,0.30); border-top: 1px solid rgba(255,255,255,0.04); }
.footer__bottom p { color: rgba(255,255,255,0.22); font-size: 0.78rem; }
.footer__social { margin-top: 22px; display: flex; gap: 10px; }
.footer__social a {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  transition: all 0.25s;
}
.footer__social a:hover {
  background: rgba(27,75,171,0.32);
  border-color: rgba(126,184,255,0.32);
  color: rgba(126,184,255,1);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(27,75,171,0.3);
}

/* ─────────────────────────────────────────
   13. SCROLL TO TOP BUTTON
   ───────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  bottom: 110px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(10,25,65,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(126,184,255,0.22);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
  z-index: 996;
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
.scroll-top-btn:hover {
  background: rgba(27,75,171,0.95);
  border-color: rgba(126,184,255,0.5);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(27,75,171,0.45);
}

/* ─────────────────────────────────────────
   14. HEADER — subtle background update
   ───────────────────────────────────────── */
.header {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(27,75,171,0.06);
}

/* ─────────────────────────────────────────
   15. DIFERENCIAIS — refined icons
   ───────────────────────────────────────── */
.diferencial__icon--blue {
  background: linear-gradient(135deg, rgba(27,75,171,0.10) 0%, rgba(46,110,199,0.05) 100%);
}
.diferencial__icon--red {
  background: linear-gradient(135deg, rgba(196,30,58,0.10) 0%, rgba(232,37,61,0.05) 100%);
}

/* ─────────────────────────────────────────
   16. MOBILE NAV — dark glass panel
   ───────────────────────────────────────── */
@media (max-width: 900px) {
  .header__nav.open {
    background: rgba(4,9,26,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .header__nav a { color: rgba(255,255,255,0.72); }
  .header__nav a:hover { color: rgba(126,184,255,0.9); }
  .header__nav a::after { background: rgba(126,184,255,0.7); }
}

/* ─────────────────────────────────────────
   17. CHAVEIRO SERVICOS — spotlight
   ───────────────────────────────────────── */
.chaveiro-servico::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 140px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(200,168,0,0.10) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.chaveiro-servico.has-spotlight::before { opacity: 1; }

/* ─────────────────────────────────────────
   18. HERO BADGE — aurora border
   ───────────────────────────────────────── */
.hero__badge-pill {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.hero__badge-pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(126,184,255,0.5) 0%,
    rgba(255,213,128,0.4) 33%,
    rgba(255,143,163,0.5) 66%,
    rgba(126,184,255,0.5) 100%
  );
  background-size: 300% 100%;
  animation: border-sweep 4s linear infinite;
}

/* ─────────────────────────────────────────
   19. AVALIACOES — pattern overlay
   ───────────────────────────────────────── */
.avaliacoes::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ─────────────────────────────────────────
   20. HERO STAT NUMBERS — gradient
   ───────────────────────────────────────── */
.hero__stat-num {
  background: linear-gradient(135deg, #fff 0%, #7EB8FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}