/* =============================================
   DERMABABY — animations-extra.css
   Agrega este archivo DESPUÉS de styles.css
   ============================================= */

/* ── Navbar: estado al hacer scroll ── */
.navbar {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar--scrolled {
  background: rgba(251, 248, 246, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(28, 25, 23, 0.08);
}

/* ── Estados iniciales para GSAP (evita flash) ── */
.hero__badge,
.hero__h1,
.hero__subtitle,
.hero__checks li,
.hero__ctas,
.hero__media {
  /* GSAP los anima desde opacity:0 — no pongas opacity:0 aquí
     para que no queden invisibles si JS falla */
}

/* ── Hover en cards — complementa GSAP ── */
.condition-card,
.symptom-card,
.why-card {
  will-change: transform;
  transition: box-shadow 0.25s ease;
}
.condition-card:hover,
.symptom-card:hover,
.why-card:hover {
  box-shadow: 0 12px 40px rgba(168, 92, 85, 0.12),
              0 4px 16px rgba(28, 25, 23, 0.08);
}

/* ── WhatsApp float: base ── */
.whatsapp-float {
  will-change: transform;
}

/* ── Reduce motion: apaga todo si el usuario lo pidió ── */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .hero__media,
  .condition-card,
  .symptom-card,
  .why-card {
    animation: none !important;
    transition: none !important;
  }
}