/* ═══════════════════════════════════════════════
   ANIMATIONS — Psicología Isui
   Keyframes, scroll-reveal, hover, transiciones
   ═══════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes waPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.35); }
  50%     { box-shadow: 0 4px 32px rgba(37,211,102,.6); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-8px); }
  40%,80% { transform: translateX(8px); }
}
@keyframes underlineGrow {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

/* ════════════════════════════════════════════════
   ENTRADA DE PÁGINA
════════════════════════════════════════════════ */
body {
  animation: pageIn 0.45s var(--ease) both;
}

/* ════════════════════════════════════════════════
   SCROLL-REVEAL — clases base
════════════════════════════════════════════════ */

/* Fade up (default) */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Slide desde izquierda */
.reveal-left {
  opacity:    0;
  transform:  translateX(-32px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-left.visible {
  opacity:   1;
  transform: translateX(0);
}

/* Slide desde derecha */
.reveal-right {
  opacity:    0;
  transform:  translateX(32px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-right.visible {
  opacity:   1;
  transform: translateX(0);
}

/* Scale in */
.reveal-scale {
  opacity:    0;
  transform:  scale(.93);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}
.reveal-scale.visible {
  opacity:   1;
  transform: scale(1);
}

/* ════════════════════════════════════════════════
   STAGGER — hijos en cascada
════════════════════════════════════════════════ */
.stagger > * {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stagger.visible > * {
  opacity:   1;
  transform: translateY(0);
}
.stagger.visible > *:nth-child(1) { transition-delay: .00s; }
.stagger.visible > *:nth-child(2) { transition-delay: .08s; }
.stagger.visible > *:nth-child(3) { transition-delay: .16s; }
.stagger.visible > *:nth-child(4) { transition-delay: .24s; }
.stagger.visible > *:nth-child(5) { transition-delay: .32s; }
.stagger.visible > *:nth-child(6) { transition-delay: .40s; }
.stagger.visible > *:nth-child(7) { transition-delay: .48s; }
.stagger.visible > *:nth-child(8) { transition-delay: .56s; }
.stagger.visible > *:nth-child(9) { transition-delay: .64s; }

/* ════════════════════════════════════════════════
   HOVER — micro interacciones
════════════════════════════════════════════════ */

/* Tarjetas de servicios */
.svc-card {
  transition: box-shadow var(--t-mid) var(--ease),
              transform  var(--t-mid) var(--ease);
}
.svc-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-4px);
}

/* Línea inferior en hover de servicios */
.svc-card::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--pk);
  transition: width .45s var(--ease);
}
.svc-card:hover::after { width: 100%; }

/* Pilares */
.pillar {
  transition: box-shadow var(--t-mid) var(--ease),
              transform  var(--t-mid) var(--ease);
}
.pillar:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-3px);
}
.pillar::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--pk);
  transition: width .4s var(--ease);
}
.pillar:hover::after { width: 100%; }

/* Testimonios cards */
.testi-card {
  transition: box-shadow .35s var(--ease),
              transform  .35s var(--ease);
}
.testi-card:hover {
  box-shadow: var(--shadow-lg);
  transform:  translateY(-4px);
}
.testi-card::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--pk);
  transition: width .45s var(--ease);
}
.testi-card:hover::after { width: 100%; }

/* Botones */
.btn-primary,
.btn-secondary,
.btn-nav,
.btn-submit,
.btn-login {
  transition: background var(--t-fast) var(--ease),
              color       var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow  var(--t-fast) var(--ease),
              transform   var(--t-fast) var(--ease);
}
.btn-primary:hover,
.btn-submit:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* Nav links */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--pk);
  transition: width .3s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

/* Íconos de redes en nav */
.nav-social a {
  transition: color var(--t-fast), transform var(--t-fast);
}
.nav-social a:hover { transform: scale(1.15); }

/* WA flotante */
.wa-float {
  animation: waPulse 2.5s infinite;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.wa-float:hover {
  transform:  scale(1.1);
  animation:  none;
}

/* Footer social */
.footer-social a {
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.footer-social a:hover { transform: translateY(-2px); }

/* Iconos de contacto */
.c-item { transition: color var(--t-fast); }
.c-icon { transition: border-color var(--t-fast), transform var(--t-fast); }
.c-item:hover .c-icon { transform: scale(1.08); }

/* Inputs — focus glow */
.form-g input:focus,
.form-g select:focus,
.form-g textarea:focus {
  box-shadow: 0 0 0 3px rgba(213,37,112,.08);
}

/* Credenciales */
.cred {
  transition: transform var(--t-fast), color var(--t-fast);
}
.cred:hover { transform: translateX(4px); color: var(--pk); }

/* ════════════════════════════════════════════════
   QUOTE BAND — círculos decorativos animados
════════════════════════════════════════════════ */
.quote-band { overflow: hidden; }

.quote-band::before {
  animation: heartbeat 6s ease-in-out infinite;
}

/* ════════════════════════════════════════════════
   HERO — delays para texto
════════════════════════════════════════════════ */
.hero-banner              { transition-delay: 0s; }
.tag-line.reveal          { transition-delay: .05s; }
.hero h1.reveal           { transition-delay: .15s; }
.hero-desc.reveal         { transition-delay: .25s; }
.hero-btns.reveal         { transition-delay: .38s; }
.hero-stats.reveal        { transition-delay: .50s; }
.hero-right.reveal-scale  { transition-delay: .20s; }

/* ════════════════════════════════════════════════
   ABOUT — delays
════════════════════════════════════════════════ */
.about-image-wrap.reveal-left  { transition-delay: 0s; }
.about-content.reveal-right    { transition-delay: .15s; }

/* ════════════════════════════════════════════════
   ADMIN — animaciones del panel
════════════════════════════════════════════════ */
.admin-card {
  transition: box-shadow var(--t-mid) var(--ease),
              transform  var(--t-mid) var(--ease);
}
.admin-card:hover {
  box-shadow: var(--shadow-sm);
  transform:  translateY(-2px);
}

.stat-card {
  transition: box-shadow var(--t-mid) var(--ease),
              transform  var(--t-mid) var(--ease);
}
.stat-card:hover {
  box-shadow: var(--shadow-sm);
  transform:  translateY(-2px);
}

.filter-btn {
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.filter-btn:hover:not(.active) { transform: translateY(-1px); }

.btn-action {
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn-action:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════════════
   TOAST — animación de entrada/salida
════════════════════════════════════════════════ */
.toast {
  transition: transform .4s var(--ease), opacity .4s;
}
.toast.show {
  transform: translateX(-50%) translateY(0) !important;
  opacity:   1 !important;
}