/*
 * Movimiento — conservador, a propósito.
 * El sistema de diseño describe la marca como "conservadora en cuanto a
 * movimiento": fades y cambios de opacidad simples, sin easing con bounce
 * ni spring. Todo lo de este archivo usa var(--ease-standard) (el mismo
 * cubic-bezier ya definido en tokens/effects.css) y desplazamientos cortos
 * (16–28px) — nunca escalas dramáticas, rebotes ni parallax pronunciado.
 */

/* ============ Scroll suave ============ */
html{scroll-behavior:smooth}

/* ============ Scroll reveal ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease-standard), transform .7s var(--ease-standard);
}
.reveal.is-visible{opacity:1;transform:none}

.reveal-stagger > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s var(--ease-standard), transform .6s var(--ease-standard);
}
.reveal-stagger.is-visible > *{opacity:1;transform:none}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.1s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.18s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.34s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.42s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.5s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.58s}
.reveal-stagger.is-visible > *:nth-child(9){transition-delay:.66s}

/* ============ Hero entrance (arriba del pliegue, no depende de scroll) ============ */
@keyframes hero-fade-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.hero__eyebrow,.hero__title,.hero__subtitle,.hero__actions{
  opacity:0;
  animation:hero-fade-up .7s var(--ease-standard) forwards;
}
.hero__eyebrow{animation-delay:.1s}
.hero__title{animation-delay:.2s}
.hero__subtitle{animation-delay:.32s}
.hero__actions{animation-delay:.44s}

/* ============ Header: achique sutil al hacer scroll ============ */
.site-header.is-scrolled .site-header__inner{padding-top:8px;padding-bottom:8px}
.site-header.is-scrolled .site-header__logo{height:71px}

/* ============ CTA flotante (bubble desktop / barra mobile) ============ */
.floating-cta{
  position:fixed;
  z-index:45;
  opacity:0;
  pointer-events:none;
  transform:translateY(16px);
  transition:opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.floating-cta.is-visible{opacity:1;pointer-events:auto;transform:none}

.floating-cta--bubble{
  right:24px;
  bottom:24px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--beige);
  box-shadow:var(--shadow-card);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.floating-cta--bubble:hover{opacity:.85}
.floating-cta--bubble img{width:28px;height:28px}

.floating-cta--bar{
  left:0;right:0;bottom:0;
  display:flex;
  gap:1px;
  background:var(--border-subtle);
  box-shadow:0 -8px 24px rgba(33,33,31,0.14);
}
.floating-cta--bar a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px;
  font:700 15px var(--font-sans);
  text-decoration:none;
}
.floating-cta__book{background:var(--black);color:var(--white)}
.floating-cta__whatsapp{background:var(--beige);color:var(--white)}
.floating-cta--bar img{width:18px;height:18px}

@media (min-width:641px){
  .floating-cta--bar{display:none}
}
@media (max-width:640px){
  .floating-cta--bubble{display:none}
  body.has-floating-bar{padding-bottom:64px}
}

/* ============ Respeta la preferencia del sistema del usuario ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,
  .reveal-stagger > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .hero__eyebrow,.hero__title,.hero__subtitle,.hero__actions{
    opacity:1 !important;
    animation:none !important;
  }
  .category-card:hover,
  .treatment-card:hover,
  .review-card:hover{
    transform:none;
  }
  .category-card:hover .category-card__image img{transform:none}
  .floating-cta{transition:none}

  .quiz__zone,
  .quiz__option{
    animation:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  .quiz__zone:hover,
  .quiz__option:hover{transform:none}
  .quiz__step{transition:none !important;transform:none !important}
  .quiz__progress-bar{transition:none}
}