/* =========================================================
   Seros · movimiento suave (no cambia estilo ni contenido)
   - Entradas al hacer scroll (solo si html.mov: lo pone el <head>
     cuando el navegador no pide "reducir movimiento").
   - Pequeños gestos al pasar el ratón.
   ========================================================= */

/* ---------- entradas al hacer scroll ---------- */
.mov .hero__texto > *,
.mov .hero__foto,
.mov .hero__nota,
.mov .cabeza-seccion,
.mov .resenas__cabeza,
.mov .subtitulo,
.mov .tratamiento,
.mov .tecnologia > div,
.mov .persona,
.mov .cita__opciones,
.mov .resena,
.mov .resenas__aviso,
.mov .convenios__caja > *,
.mov .contacto__sala,
.mov .contacto__rejilla > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--rd, 0ms);
}
.mov .hero__foto { transform: translate3d(0, 18px, 0) scale(.97); }
.mov .hero__nota { transform: translate3d(0, 14px, 0) scale(.92); transition-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
.mov .contacto__sala { transform: scale(.985); }
.mov .dentro.dentro.dentro { opacity: 1; transform: none; }
.mov .tratamiento { transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), background-color .35s ease; transition-delay: var(--rd, 0ms), var(--rd, 0ms), 0ms; }

/* foto principal: leve acercamiento al cargar */
.mov .hero__foto:first-of-type img { transform: scale(1.07); transition: transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.mov .hero__foto.dentro:first-of-type img { transform: scale(1); }

/* resultado de la cita: aparece con suavidad */
.cita__resultado.activo > div { animation: subir .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.cita__resultado.activo > .cita__final { animation-delay: .06s; }
@keyframes subir { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* WhatsApp flotante: entra desde abajo y avisa con un pulso suave (3 veces) */
.mov .whatsapp { animation: entrar-wa .7s 1.2s cubic-bezier(.2, .7, .2, 1) backwards; }
.whatsapp::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa) 55%, transparent);
}
.mov .whatsapp::after { animation: pulso-wa 2.4s 2.2s ease-out 3; }
@keyframes entrar-wa { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes pulso-wa { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* ---------- gestos al pasar el ratón ---------- */
.boton, .opcion, .chip, .whatsapp, .hero__nota { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .25s ease, box-shadow .25s ease; }
.persona__foto { transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s ease; }
.tratamiento { transition: background-color .35s ease; }
.tratamiento .icono { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background-color .3s ease, color .3s ease; }
.tecnologia dt { transition: color .25s ease; }
.tecnologia div { transition: border-color .3s ease; }
.convenios__lista li { transition: background-color .25s ease, color .25s ease; }

@media (hover: hover) {
  .boton:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(34, 41, 44, .45); }
  .boton:active, .opcion:active, .chip:active { transform: translateY(0) scale(.98); }
  .opcion:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -20px rgba(34, 41, 44, .5); }
  .chip:hover { transform: translateY(-1px); }
  .whatsapp:hover { transform: translateY(-3px) scale(1.03); }
  .hero__nota:hover, .mov .hero__nota.dentro.dentro.dentro:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(34, 41, 44, .55); }
  .tratamiento:hover { background-color: color-mix(in srgb, var(--turquesa) 8%, transparent); }
  .tratamiento:hover .icono { transform: rotate(-8deg) scale(1.1); background-color: var(--turquesa); color: var(--grafit); }
  .tecnologia div:hover { border-top-color: var(--grafit); }
  .tecnologia div:hover dt { color: var(--hondo); }
  .persona:hover .persona__foto { transform: translateY(-6px); box-shadow: 0 26px 40px -26px rgba(34, 41, 44, .5); }
  .convenios__lista li:hover { background-color: var(--turquesa); color: var(--grafit); }
}

@media (prefers-reduced-motion: reduce) {
  .mov * { opacity: 1 !important; transform: none !important; }
}