/* ============================================================
   BASE — psicologa.co
   Reset mínimo, body, animaciones y utilidades globales.
   Requiere: tokens.css
   ============================================================ */

/* ── Body ── */
body { font-family: var(--font-sans, 'Inter', sans-serif); }

/* Bloquear scroll cuando el menú mobile está abierto */
body.menu-open { overflow: hidden; }

/* ── Animaciones Hero ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.animate-fade-up  { animation: fadeUp  0.7s ease both; }
.animate-fade-in  { animation: fadeIn  0.9s ease both; }

.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-500 { animation-delay: 0.50s; }
.delay-700 { animation-delay: 0.70s; }

/* Float pills del hero */
.float-pill { animation: float 4s ease-in-out infinite; }
.float-pill:nth-child(2) { animation-delay: 0.8s; }
.float-pill:nth-child(3) { animation-delay: 1.6s; }
.float-pill:nth-child(4) { animation-delay: 2.4s; }
.float-pill:nth-child(5) { animation-delay: 3.2s; }

/* ── Utilidades visuales Hero ── */
.img-mask {
  border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%;
}

.glass-pill {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(219,234,254,0.88) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: 0 8px 32px rgba(99,130,200,0.18);
}

.avatar-ring { box-shadow: 0 0 0 2px #fdfbf7; }

.hero-title { color: #00254D; }