/* ============================================================
   SpeakiKids Landing Page - Custom Styling & Premium Touches
   ============================================================ */

/* 1. Global Customizations */
html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* 2. Glassmorphism Design Elements */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04);
}

/* 3. Custom Micro-Animations */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(-6deg);
  }
  50% {
    transform: translateY(-8px) rotate(-4deg);
  }
  100% {
    transform: translateY(0px) rotate(-6deg);
  }
}

.animate-float-tablet {
  animation: float 6s ease-in-out infinite;
}

/* Hover scales and translations for cards */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08);
}

/* 4. Accesibilidad: respetar a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5. FAQ: ocultar el marcador nativo de <details> */
summary::-webkit-details-marker {
  display: none;
}
summary {
  list-style: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f8fafc;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
  border: 2px solid #f8fafc;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}