/* ============================================================
   LIQUID GLASS — Aguiar Tendas  v2
   Ref: liquid-glass-studio (Apple Liquid Glass UI)
   Regra principal:
     - Seções ESCURAS  → glass real (backdrop-filter + rgba bg)
     - Seções CLARAS   → apenas shadow/border — bg SÓLIDO
     - Botões          → inset glow — SEM pseudo-elements sobre texto
   ============================================================ */

:root {
  /* Transições spring-like */
  --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lg-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Borda Fresnel (topo mais brilhante) */
  --lg-brd-top-dark:   rgba(255, 255, 255, 0.22);
  --lg-brd-side-dark:  rgba(255, 255, 255, 0.10);
  --lg-brd-teal:       rgba(24, 144, 180, 0.30);

  /* Sombra interna (glare via box-shadow) */
  --lg-inset-glow: inset 0 1px 0 rgba(255,255,255,0.20),
                   inset 0 -1px 0 rgba(0,0,0,0.10);
}


/* ────────────────────────────────────────────────────────────
   1. NAVBAR — Glass flutuante (seção escura: seguro)
   ──────────────────────────────────────────────────────────── */

nav.header-dark {
  background: rgba(7, 15, 26, 0.52) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(24, 144, 180, 0.18) !important;
  /* Fresnel + depth */
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Linha de dispersão cromática no topo do nav */
nav.header-dark::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(125, 216, 244, 0.35) 25%,
    rgba(255, 255, 255, 0.20) 50%,
    rgba(0, 180, 96, 0.25) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* CTA nav */
nav .btn-alert-g500.button,
nav a.btn-alert-g500 {
  box-shadow:
    0 0 24px rgba(0, 180, 96, 0.35),
    var(--lg-inset-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
nav .btn-alert-g500.button:hover,
nav a.btn-alert-g500:hover {
  box-shadow:
    0 0 44px rgba(0, 180, 96, 0.55),
    var(--lg-inset-glow) !important;
  transform: translateY(-2px) !important;
}


/* ────────────────────────────────────────────────────────────
   2. HERO — Badge e Stats (seção escura: seguro)
   ──────────────────────────────────────────────────────────── */

/* Badge pill */
.hero-badge {
  background: rgba(24, 144, 180, 0.11) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid rgba(24, 144, 180, 0.30) !important;
  border-top-color: rgba(125, 216, 244, 0.38) !important;
  box-shadow:
    0 4px 16px rgba(24, 144, 180, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Stats — cada card vira glass */
.hero-stat {
  background: rgba(12, 36, 60, 0.48) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-top-color: rgba(255, 255, 255, 0.20) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
  transition: all 0.28s var(--lg-spring) !important;
}
.hero-stat:hover {
  background: rgba(24, 144, 180, 0.20) !important;
  border-color: rgba(24, 144, 180, 0.38) !important;
  box-shadow:
    0 8px 32px rgba(24, 144, 180, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-3px) !important;
}

/* Botão CTA do hero (verde — seção escura) */
.slideshow-size-screen .btn-alert-g500 {
  background-color: #00B460 !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    0 0 28px rgba(0, 180, 96, 0.40),
    var(--lg-inset-glow) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
.slideshow-size-screen .btn-alert-g500:hover {
  box-shadow:
    0 0 48px rgba(0, 180, 96, 0.55),
    var(--lg-inset-glow) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Botão outline branco do hero */
.slideshow-size-screen .btn-dark100-outline {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-top-color: rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
.slideshow-size-screen .btn-dark100-outline:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-3px) !important;
}


/* ────────────────────────────────────────────────────────────
   3. BOTÕES — Glass glow universal (sem pseudo-elements)
      inset box-shadow simula o glare interno do vidro
   ──────────────────────────────────────────────────────────── */

/* Verde principal */
a.button.btn-alert-g500:not(nav *):not(.slideshow-size-screen *),
button.button.btn-alert-g500:not(nav *):not(.slideshow-size-screen *),
a.button.btn-primary500,
button.button.btn-primary500 {
  box-shadow:
    0 0 22px rgba(0, 180, 96, 0.30),
    var(--lg-inset-glow) !important;
  border-color: rgba(0, 180, 96, 0.90) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
a.button.btn-alert-g500:not(nav *):not(.slideshow-size-screen *):hover,
button.button.btn-alert-g500:not(nav *):not(.slideshow-size-screen *):hover,
a.button.btn-primary500:hover,
button.button.btn-primary500:hover {
  box-shadow:
    0 0 40px rgba(0, 180, 96, 0.50),
    var(--lg-inset-glow) !important;
  transform: translateY(-2px) !important;
}

/* Teal secundary */
a.button.btn-secundary500,
button.button.btn-secundary500 {
  background-color: #1890B4 !important;
  border-color: #1890B4 !important;
  color: #FFFFFF !important;
  box-shadow:
    0 0 22px rgba(24, 144, 180, 0.32),
    var(--lg-inset-glow) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
a.button.btn-secundary500:hover,
button.button.btn-secundary500:hover {
  background-color: #007890 !important;
  border-color: #007890 !important;
  box-shadow:
    0 0 38px rgba(24, 144, 180, 0.48),
    var(--lg-inset-glow) !important;
  transform: translateY(-2px) !important;
}

/* Outline branca */
a.button.btn-dark100-outline:not(.slideshow-size-screen *),
button.button.btn-dark100-outline:not(.slideshow-size-screen *) {
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
a.button.btn-dark100-outline:not(.slideshow-size-screen *):hover,
button.button.btn-dark100-outline:not(.slideshow-size-screen *):hover {
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-2px) !important;
}

/* Outline teal */
a.button.btn-dark500-outline,
button.button.btn-dark500-outline,
a.button.btn-primary500-outline,
button.button.btn-primary500-outline {
  box-shadow:
    0 2px 12px rgba(24, 144, 180, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
a.button.btn-dark500-outline:hover,
button.button.btn-dark500-outline:hover,
a.button.btn-primary500-outline:hover,
button.button.btn-primary500-outline:hover {
  box-shadow:
    0 6px 24px rgba(24, 144, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px) !important;
}


/* ────────────────────────────────────────────────────────────
   4. PRODUCTS GRID (seção ESCURA — glass completo)
   ──────────────────────────────────────────────────────────── */

/* Container */
.products-grid-border {
  border: 1px solid rgba(24, 144, 180, 0.24) !important;
  border-top-color: rgba(125, 216, 244, 0.30) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.45),
    0 8px 32px rgba(24, 144, 180, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  position: relative !important;
}

/* Linha de dispersão cromática no topo do container */
.products-grid-border::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(125, 216, 244, 0.40) 20%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(0, 180, 96, 0.28) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Card individual */
.products-grid-item {
  background: rgba(24, 144, 180, 0.06) !important;
  border-right: 1px solid rgba(24, 144, 180, 0.14) !important;
  border-bottom: 1px solid rgba(24, 144, 180, 0.14) !important;
  transition: background 0.28s var(--lg-ease), box-shadow 0.28s var(--lg-ease), transform 0.28s var(--lg-spring) !important;
}
.products-grid-item:hover {
  background: rgba(24, 144, 180, 0.16) !important;
  border-color: rgba(24, 144, 180, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(24, 144, 180, 0.22) !important;
  transform: translateY(-2px) !important;
}

/* Badge "Mais Vendida" — glass pill */
.products-grid-item span[style*="background:#00B460"] {
  background: rgba(0, 180, 96, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 2px 10px rgba(0, 180, 96, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}


/* ────────────────────────────────────────────────────────────
   5. SOLUTIONS CARDS (seção ESCURA — glass completo)
   ──────────────────────────────────────────────────────────── */

.solutions-card {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-top-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.28s var(--lg-spring) !important;
}
.solutions-card:hover {
  border-color: rgba(24, 144, 180, 0.45) !important;
  border-top-color: rgba(125, 216, 244, 0.42) !important;
  transform: translateY(-5px) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Cada card mantém seu gradiente do color-aguiar.css — só adicionamos o blur */
#s-item-1 .solutions-card,
#s-item-2 .solutions-card,
#s-item-3 .solutions-card,
#s-item-4 .solutions-card {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Lens overlay: simula refração de luz */
.solutions-lens-overlay {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(24, 144, 180, 0.07) 30%,
    transparent 65%
  ) !important;
}


/* ────────────────────────────────────────────────────────────
   6. INFOBANNER teal (seção escura — glass sutil)
   ──────────────────────────────────────────────────────────── */

/* Banner de parcelamento — seção teal */
#conheca-a-aguiar .border-radius-16 {
  box-shadow:
    0 16px 56px rgba(24, 144, 180, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  position: relative !important;
}


/* ────────────────────────────────────────────────────────────
   7. INFOVIDEO (seção escura — glass borda)
   ──────────────────────────────────────────────────────────── */

.infovideo-cover {
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}


/* ────────────────────────────────────────────────────────────
   8. HIGHLIGHTS — iOS 26 Glass Pills
   Cada item fica numa pill card com backdrop-filter + Fresnel.
   O ícone fica num app-icon-ring com gradiente suave.
   ──────────────────────────────────────────────────────────── */

/* Pill card — glass leve sobre fundo claro */
.hl-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 22px 24px;
  min-width: 145px;
  width: 100%;
  background: rgba(246, 251, 255, 0.78);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(24, 144, 180, 0.09),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  cursor: default;
  transition:
    box-shadow 0.30s var(--lg-spring),
    transform 0.30s var(--lg-spring),
    border-color 0.25s ease !important;
}

.hl-pill:hover {
  box-shadow:
    0 20px 56px rgba(24, 144, 180, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  transform: translateY(-8px) !important;
  border-color: rgba(24, 144, 180, 0.22) !important;
  border-top-color: rgba(255, 255, 255, 0.98) !important;
}

/* App-icon ring — quadrado com cantos arredondados, gradiente suave */
.hl-icon-ring {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #EBF5FC 0%, #D5EAF6 55%, #C8E2F2 100%);
  border: 1px solid rgba(24, 144, 180, 0.18);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 22px rgba(24, 144, 180, 0.20),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 -1px 0 rgba(24, 144, 180, 0.08);
  transition:
    box-shadow 0.28s var(--lg-spring),
    transform 0.28s var(--lg-spring) !important;
}

.hl-pill:hover .hl-icon-ring {
  box-shadow:
    0 10px 32px rgba(24, 144, 180, 0.32),
    0 3px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(24, 144, 180, 0.12) !important;
  transform: scale(1.06) !important;
}

/* Label de texto */
.hl-label {
  font-family: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 0.80rem;
  font-weight: 600;
  color: #3A5068;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* Alinhamento da linha de highlights */
#highlights .row.gy-3 {
  gap: 0;
}

@supports not (backdrop-filter: blur(1px)) {
  .hl-pill {
    background: rgba(240, 248, 255, 0.95) !important;
  }
}


/* ────────────────────────────────────────────────────────────
   9. FAQ (seção CLARA — background SÓLIDO, sem backdrop-filter)
   ──────────────────────────────────────────────────────────── */

.faq-item {
  /* Não muda background! Inline style já define #FFFFFF */
  border-radius: 12px !important;
  transition: box-shadow 0.22s var(--lg-ease), transform 0.22s var(--lg-spring) !important;
}

.faq-item:hover {
  box-shadow:
    0 6px 28px rgba(24, 144, 180, 0.14),
    0 0 0 1px rgba(24, 144, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(24, 144, 180, 0.32) !important;
}


/* ────────────────────────────────────────────────────────────
   10. CONTACT FORM (seção CLARA — shadow enhancement, bg SÓLIDO)
   ──────────────────────────────────────────────────────────── */

.form-card {
  /* Mantém dark100-bgd (branco). Apenas eleva o shadow e border */
  border: 1px solid rgba(24, 144, 180, 0.12) !important;
  border-top-color: rgba(255, 255, 255, 0.90) !important;
  border-radius: 20px !important;
  box-shadow:
    0 32px 80px rgba(12, 36, 60, 0.14),
    0 8px 28px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1.0) !important;
}

/* Campos do form — micro-elevação no focus */
.input-bg {
  transition: border-color 0.18s var(--lg-ease),
              box-shadow 0.18s var(--lg-ease) !important;
}
.input-bg:focus {
  border-color: rgba(24, 144, 180, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(24, 144, 180, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
  outline: none !important;
}


/* ────────────────────────────────────────────────────────────
   11. MODAL POPUP (flutuante sobre qualquer bg — glass profundo)
   ──────────────────────────────────────────────────────────── */

.white-popup-block {
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  border-top-color: rgba(255, 255, 255, 0.70) !important;
  border-radius: 20px !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}


/* ────────────────────────────────────────────────────────────
   12. CTA FINAL (seção ESCURA — glass borda sutil)
   ──────────────────────────────────────────────────────────── */

section[style*="background:linear-gradient(135deg,#0C243C"] {
  position: relative !important;
}

/* Linha de dispersão cromática na borda superior da CTA */
section[style*="background:linear-gradient(135deg,#0C243C"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(125, 216, 244, 0.38) 25%,
    rgba(255, 255, 255, 0.20) 50%,
    rgba(0, 180, 96, 0.28) 75%,
    transparent 95%
  );
  pointer-events: none;
  z-index: 1;
}

/* Botão WhatsApp inline da CTA */
section[style*="background:linear-gradient(135deg,#0C243C"] a[style*="background:#00B460"] {
  box-shadow:
    0 0 36px rgba(0, 180, 96, 0.45),
    var(--lg-inset-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
section[style*="background:linear-gradient(135deg,#0C243C"] a[style*="background:#00B460"]:hover {
  box-shadow:
    0 0 56px rgba(0, 180, 96, 0.60),
    var(--lg-inset-glow) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Botão outline da CTA */
section[style*="background:linear-gradient(135deg,#0C243C"] a[style*="background:transparent"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition: all 0.25s var(--lg-spring) !important;
}
section[style*="background:linear-gradient(135deg,#0C243C"] a[style*="background:transparent"]:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}


/* ────────────────────────────────────────────────────────────
   13. FOOTER (seção ESCURA — glass tiers)
   ──────────────────────────────────────────────────────────── */

footer section.dark800-bgd,
footer section[style*="background:linear-gradient(180deg,#0C243C"] {
  border-top: 1px solid rgba(24, 144, 180, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(24, 144, 180, 0.12),
    0 -4px 40px rgba(0, 0, 0, 0.30) !important;
  position: relative !important;
}

/* Linha de dispersão no topo do footer */
footer section.dark800-bgd::before,
footer section[style*="background:linear-gradient(180deg,#0C243C"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(24, 144, 180, 0.30) 25%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(24, 144, 180, 0.24) 75%,
    transparent 95%
  );
  pointer-events: none;
}


/* ────────────────────────────────────────────────────────────
   14. FLOAT WHATSAPP — Glass drop-shadow
   ──────────────────────────────────────────────────────────── */

div[style*="bottom:28px"] a img,
div[style*="bottom:28px"] a svg {
  filter:
    drop-shadow(0 4px 20px rgba(0, 180, 96, 0.55))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28)) !important;
  transition: filter 0.25s var(--lg-ease), transform 0.25s var(--lg-spring) !important;
}
div[style*="bottom:28px"] a:hover img,
div[style*="bottom:28px"] a:hover svg {
  filter:
    drop-shadow(0 8px 32px rgba(0, 180, 96, 0.70))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.32)) !important;
  transform: scale(1.08) translateY(-3px) !important;
}


/* ────────────────────────────────────────────────────────────
   15. GALERIA DE FOTOS — Hover lift sutil
   ──────────────────────────────────────────────────────────── */

section .col-12.col-md-6.col-lg-4 > div[style*="border-radius:12px"] {
  transition: box-shadow 0.25s var(--lg-ease), transform 0.25s var(--lg-spring) !important;
}
section .col-12.col-md-6.col-lg-4 > div[style*="border-radius:12px"]:hover {
  box-shadow:
    0 12px 40px rgba(24, 144, 180, 0.18),
    0 0 0 1px rgba(24, 144, 180, 0.28) !important;
  transform: translateY(-4px) scale(1.01) !important;
  border-color: rgba(24, 144, 180, 0.35) !important;
}


/* ────────────────────────────────────────────────────────────
   16. MINI STATS na seção de contato (seção CLARA — borda glass)
   ──────────────────────────────────────────────────────────── */

/* Os cards CCE4FC mantêm background. Só elevar sombra no hover */
div[style*="background:#CCE4FC"] {
  transition: box-shadow 0.22s var(--lg-ease), transform 0.22s var(--lg-spring) !important;
}
div[style*="background:#CCE4FC"]:hover {
  box-shadow:
    0 6px 20px rgba(24, 144, 180, 0.18),
    0 0 0 1px rgba(24, 144, 180, 0.24) !important;
  transform: translateY(-3px) !important;
}


/* ────────────────────────────────────────────────────────────
   RESPONSIVO
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-stat {
    padding: 10px 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ============================================================
   LIQUID GLASS v3 — Aguiar Tendas
   Novas camadas: shimmer, press-depth, breath, @supports guard,
   specular sweep, nav scroll-opacity, galeria zoom-reveal
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   A. KEYFRAMES
   ──────────────────────────────────────────────────────────── */

/* Shimmer: faixa de luz branca varre o elemento */
@keyframes lg-shimmer {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}

/* Breath: glow pulsante no CTA principal */
@keyframes lg-breath {
  0%, 100% { box-shadow: 0 0 28px rgba(0,180,96,0.40), 0 0 0 0 rgba(0,180,96,0); }
  50%       { box-shadow: 0 0 48px rgba(0,180,96,0.62), 0 0 0 10px rgba(0,180,96,0); }
}

/* Specular sweep no hover de botão */
@keyframes lg-sweep {
  from { left: -80%; }
  to   { left: 140%;  }
}

/* Prisma: dispersão suave de cor no topo do hero badge */
@keyframes lg-prism {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ────────────────────────────────────────────────────────────
   B. PROGRESSIVE ENHANCEMENT — backdrop-filter guard
   ──────────────────────────────────────────────────────────── */

@supports not (backdrop-filter: blur(1px)) {
  nav.header-dark              { background: rgba(7, 15, 26, 0.88) !important; }
  .hero-badge                  { background: rgba(12, 36, 60, 0.80) !important; }
  .hero-stat                   { background: rgba(12, 36, 60, 0.80) !important; }
  .white-popup-block           { background: #FFFFFF !important; }
}


/* ────────────────────────────────────────────────────────────
   C. SHIMMER no hero badge (varre ao carregar)
   ──────────────────────────────────────────────────────────── */

.hero-badge {
  position: relative !important;
  overflow: hidden !important;
}
.hero-badge::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  animation: lg-shimmer 3.4s ease-in-out 1.0s 1 forwards;
  pointer-events: none;
  border-radius: inherit;
}


/* ────────────────────────────────────────────────────────────
   D. SPECULAR SWEEP em botões no hover (pseudo-element ativo
      só quando backdrop-filter é suportado)
   ──────────────────────────────────────────────────────────── */

a.button,
button.button,
button[type="submit"] {
  position: relative !important;
  overflow: hidden !important;
}

a.button::after,
button.button::after,
button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  left: -80%;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.1s;
}

a.button:hover::after,
button.button:hover::after,
button[type="submit"]:hover::after {
  animation: lg-sweep 0.55s var(--lg-ease) forwards;
  opacity: 1;
}


/* ────────────────────────────────────────────────────────────
   E. PRESS-DEPTH — estado :active com efeito de pressão física
   ──────────────────────────────────────────────────────────── */

a.button:active,
button.button:active,
button[type="submit"]:active {
  transform: translateY(1px) scale(0.985) !important;
  transition-duration: 0.08s !important;
  box-shadow:
    0 1px 6px rgba(0,0,0,0.18),
    inset 0 2px 6px rgba(0,0,0,0.15) !important;
}


/* ────────────────────────────────────────────────────────────
   F. BREATH no botão WhatsApp flutuante
   ──────────────────────────────────────────────────────────── */

div[style*="bottom:28px"] a img {
  animation: lg-breath 2.8s ease-in-out infinite;
}
div[style*="bottom:28px"] a:hover img {
  animation: none;
}


/* ────────────────────────────────────────────────────────────
   G. HERO STATS — shimmer ao entrar na viewport (via .vis class)
   ──────────────────────────────────────────────────────────── */

.hero-stat {
  position: relative !important;
  overflow: hidden !important;
}
.hero-stat.vis::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 50%,
    transparent 100%
  );
  animation: lg-shimmer 1.2s var(--lg-ease) 0.1s 1 forwards;
  pointer-events: none;
}


/* ────────────────────────────────────────────────────────────
   H. GALERIA — zoom suave + overlay glass no hover
   ──────────────────────────────────────────────────────────── */

section .col-12.col-md-6.col-lg-4 > div[style*="border-radius:12px"] {
  position: relative !important;
  overflow: hidden !important;
}

section .col-12.col-md-6.col-lg-4 > div[style*="border-radius:12px"] img {
  transition: transform 0.55s var(--lg-ease) !important;
}
section .col-12.col-md-6.col-lg-4 > div[style*="border-radius:12px"]:hover img {
  transform: scale(1.06) !important;
}

/* Overlay glass ao hover na galeria */
section .col-12.col-md-6.col-lg-4 > div[style*="border-radius:12px"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(24,144,180,0.22) 100%
  );
  opacity: 0;
  transition: opacity 0.35s var(--lg-ease);
  pointer-events: none;
}
section .col-12.col-md-6.col-lg-4 > div[style*="border-radius:12px"]:hover::after {
  opacity: 1;
}


/* ────────────────────────────────────────────────────────────
   I. INFOBANNER — linha de luz animada no topo
   ──────────────────────────────────────────────────────────── */

#conheca-a-aguiar .border-radius-16 {
  position: relative !important;
  overflow: hidden !important;
}

#conheca-a-aguiar .border-radius-16::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: auto;
  width: 60%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.50) 50%,
    transparent 100%
  );
  animation: lg-sweep 4s var(--lg-ease) 2s infinite;
  pointer-events: none;
  z-index: 3;
}


/* ────────────────────────────────────────────────────────────
   J. FAQ — highlight da resposta aberta
   ──────────────────────────────────────────────────────────── */

.faq-answer {
  transition: max-height 0.38s var(--lg-ease), background 0.28s ease !important;
}

.faq-item:has(.faq-answer[style*="max-height: 300"]) {
  border-color: rgba(24,144,180,0.35) !important;
  box-shadow:
    0 8px 32px rgba(24,144,180,0.12),
    0 0 0 1px rgba(24,144,180,0.22) !important;
}


/* ────────────────────────────────────────────────────────────
   K. PRODUCTS GRID — shimmer no card hover
   ──────────────────────────────────────────────────────────── */

.products-grid-item {
  position: relative !important;
  overflow: hidden !important;
}
.products-grid-item::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.07) 50%,
    transparent 100%
  );
  left: -80%;
  pointer-events: none;
  opacity: 0;
}
.products-grid-item:hover::after {
  animation: lg-sweep 0.6s var(--lg-ease) forwards;
  opacity: 1;
}


/* ────────────────────────────────────────────────────────────
   L. SOLUTIONS CARDS — specular diagonal no hover
   ──────────────────────────────────────────────────────────── */

.solutions-card {
  position: relative !important;
  overflow: hidden !important;
}

.solutions-lens-overlay {
  transition: opacity 0.35s var(--lg-ease) !important;
}

.solutions-card:hover .solutions-lens-overlay {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.12) 0%,
    rgba(24,144,180,0.10) 40%,
    transparent 65%
  ) !important;
}


/* ────────────────────────────────────────────────────────────
   M. FORMULÁRIO — submit button breath no idle
   ──────────────────────────────────────────────────────────── */

#orcamento-form button[type="submit"] {
  animation: lg-breath 3s ease-in-out 4s infinite;
}
#orcamento-form button[type="submit"]:hover,
#orcamento-form button[type="submit"]:focus {
  animation: none;
}


/* ────────────────────────────────────────────────────────────
   RESPONSIVO v3
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Desativa shimmer em mobile (performance) */
  .hero-badge::after,
  .hero-stat.vis::before,
  .products-grid-item::after,
  #conheca-a-aguiar .border-radius-16::before {
    animation: none !important;
    display: none !important;
  }
}


/* ============================================================
   LIQUID GLASS v4 — iOS 26 Design System
   Tipografia SF Pro · Transições globais · Scroll reveal
   Inputs glass · Botões pill · Focus ring Apple
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   N0. BOTÕES PILL — override de .button.regular-btn e .button.large-btn
       (mais específico: dois-classes + !important, garante 980px)
   ──────────────────────────────────────────────────────────── */

a.button.regular-btn,
button.button.regular-btn,
a.button.large-btn,
button.button.large-btn,
a.button.small-btn,
button.button.small-btn {
  border-radius: 980px !important;
}

/* Padding lateral extra para visual pill premium */
a.button.regular-btn,
button.button.regular-btn {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

a.button.large-btn,
button.button.large-btn {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

/* ── Botões com border-radius inline (produtos/ e outras páginas) ──
   Attribute selector sobrepõe inline style via !important              */
a[style*="border-radius:8px"],
button[style*="border-radius:8px"] {
  border-radius: 980px !important;
}

/* Botão outline inline (background:transparent + borda) → Liquid Glass */
a[style*="border-radius:8px"][style*="background:transparent"],
a[style*="border-radius:8px"][style*="background: transparent"] {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}


/* ────────────────────────────────────────────────────────────
   N. TRANSIÇÕES GLOBAIS — iOS 26 micro-interactions
   (excluindo elementos que não devem animar)
   ──────────────────────────────────────────────────────────── */

*:not(svg):not(path):not(circle):not(line):not(polyline):not(img):not(video):not(canvas):not(iframe) {
  transition-property: background-color, border-color, box-shadow, transform, opacity, filter;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* Garante que durations específicas não sejam sobrescritas */
a.button, button.button, button[type="submit"],
nav a, .hero-stat, .faq-item, .solutions-card,
.products-grid-item, .form-card {
  transition: all 0.25s var(--lg-spring) !important;
}


/* ────────────────────────────────────────────────────────────
   O. SCROLL REVEAL — entrada com translateY iOS style
   Substitui o padrão .rv existente por animação mais suave
   ──────────────────────────────────────────────────────────── */

.rv {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity 0.55s var(--lg-ease), transform 0.55s var(--lg-ease) !important;
}
.rv.vis {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger para grupos de cards */
.rv:nth-child(2) { transition-delay: 0.08s !important; }
.rv:nth-child(3) { transition-delay: 0.16s !important; }
.rv:nth-child(4) { transition-delay: 0.24s !important; }


/* ────────────────────────────────────────────────────────────
   P. FOCUS RING — estilo Apple (sem outline azul do browser)
   ──────────────────────────────────────────────────────────── */

a.button:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(24, 144, 180, 0.45),
    0 0 0 1px rgba(24, 144, 180, 0.80) !important;
}


/* ────────────────────────────────────────────────────────────
   Q. INPUTS GLASS — iOS 26 form fields
   ──────────────────────────────────────────────────────────── */

select.input-bg,
textarea.input-bg {
  border-radius: 14px !important;
  border: 1px solid rgba(24, 144, 180, 0.22) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

select.input-bg:focus,
textarea.input-bg:focus {
  border-color: #1890B4 !important;
  box-shadow: 0 0 0 4px rgba(24, 144, 180, 0.12) !important;
  outline: none !important;
}


/* ────────────────────────────────────────────────────────────
   R. NAVBAR — pill links hover refinement iOS 26
   ──────────────────────────────────────────────────────────── */

nav .navbar-nav li a {
  border-radius: 8px !important;
  padding: 4px 10px !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}
nav .navbar-nav li a:hover {
  background: rgba(24, 144, 180, 0.12) !important;
}


/* ────────────────────────────────────────────────────────────
   S. HERO STATS — refinamento tipográfico iOS 26
   ──────────────────────────────────────────────────────────── */

.hero-stat-num {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.hero-stat-desc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}


/* ────────────────────────────────────────────────────────────
   T. SECTION SEPARATORS — gradiente suave iOS 26
   ──────────────────────────────────────────────────────────── */

section {
  transition: background-color 0.3s ease !important;
}


/* ────────────────────────────────────────────────────────────
   U. SCROLL SMOOTHNESS — comportamento nativo Apple
   ──────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}


/* ────────────────────────────────────────────────────────────
   V. BLOG / CARDS LIGHT SECTION — hover glass sutil
   ──────────────────────────────────────────────────────────── */

#blog-card {
  border-radius: 20px !important;
  border: 1px solid rgba(24, 144, 180, 0.10) !important;
  transition: box-shadow 0.25s var(--lg-ease), transform 0.25s var(--lg-spring), border-color 0.25s ease !important;
}
#blog-card:hover {
  border-color: rgba(24, 144, 180, 0.28) !important;
  box-shadow: 0 12px 40px rgba(24, 144, 180, 0.12), 0 4px 16px rgba(0,0,0,0.07) !important;
  transform: translateY(-4px) !important;
}


/* ────────────────────────────────────────────────────────────
   RESPONSIVO v4
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Reduz translateY no reveal para mobile */
  .rv {
    transform: translateY(8px) !important;
  }

  /* Stagger menor no mobile */
  .rv:nth-child(2) { transition-delay: 0.04s !important; }
  .rv:nth-child(3) { transition-delay: 0.08s !important; }
  .rv:nth-child(4) { transition-delay: 0.12s !important; }

  /* Desativa transitions pesadas no mobile */
  nav .navbar-nav li a {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.vis {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}