.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.text-balance {
  text-wrap: balance;
}
.glass-nav {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.hero-gradient {
  background: linear-gradient(135deg, #452674 0%, #5d3e8d 100%);
}
.ambient-shadow {
  box-shadow: 0px 20px 40px rgba(25, 28, 29, 0.06);
}
.ghost-border {
  border: 1px solid rgba(204, 195, 209, 0.15);
}
@keyframes slowPan {
  0%,
  100% {
    transform: scale(1.2) translate(0%, 0%);
  }

  33% {
    transform: scale(1.2) translate(-8%, -3%);
  }

  66% {
    transform: scale(1.2) translate(-2%, -8%);
  }
}
.animate-pan {
  animation: slowPan 5s ease-in-out infinite;
}

/* Hero carrusel + zoom hover */
.hero-slide {
  transition: opacity 1s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  #heroCard:not(.panel-open):hover .hero-slide { transform: scale(1.03); }
}
#heroCard #heroPanel { overflow: hidden; }
#heroChip { transition: opacity 0.25s ease; }
.hero-arrow {
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  color: #452674;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease;
}
.hero-arrow:hover {
  background: #f5f0ff;
  box-shadow: 0 4px 16px rgba(69,38,116,0.14);
}

/* ── Service card expand ─────────────────────────── */
.service-card { transition: box-shadow 0.25s ease; }
.service-card:hover { box-shadow: 0 6px 28px rgba(69,38,116,0.12); }

/* Google review avatars: keep real profile photos and consistent fallbacks. */
.rv-card img[alt] {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: 9999px;
  object-fit: cover;
  background: #f1eaf5;
}
.rv-card .rv-avatar-fallback {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .875rem;
  color: #805493;
  background: #f1eaf5;
}

.reveal-wrap {
  display: grid;
  grid-template-rows: 0fr;
}
.reveal-wrap > div { overflow: hidden; }
.service-card.open .reveal-wrap {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.4,0,0.2,1);
}
.service-card.open .card-chevron { transform: rotate(180deg); }

/* Scene: Terapia Física — ejercicio terapéutico */
@keyframes sc-squat {
  0%, 100% { transform: translateY(0)   scaleY(1);    }
  20%      { transform: translateY(6px) scaleY(0.82); }  /* bajada */
  45%      { transform: translateY(6px) scaleY(0.82); }  /* pausa abajo */
  70%      { transform: translateY(0)   scaleY(1);    }  /* subida */
}
.sc-fisica-squat { animation: sc-squat 2.2s ease-in-out infinite; }

@keyframes sc-bar {
  0%        { width: 0%; }
  20%       { width: 0%; }
  68%       { width: 100%; }
  85%, 100% { width: 100%; }
}
.sc-fisica-bar { animation: sc-bar 2.2s ease-in-out infinite; }

@keyframes sc-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 1;   }
}
.sc-fisica-pulse { animation: sc-pulse 1.1s ease-in-out infinite; }

/* Scene: Terapia Domicilio — moto llegando */
@keyframes sc-moto {
  0%        { left: -3rem; }
  55%       { left: calc(100% - 5.5rem); animation-timing-function: cubic-bezier(0.22,0,0.36,1); }
  63%       { left: calc(100% - 6.4rem); }
  68%       { left: calc(100% - 5.9rem); }
  80%, 100% { left: calc(100% - 6rem); }
}
.sc-moto {
  position: absolute;
  bottom: 0.35rem;
  animation: sc-moto 3.6s ease-in-out infinite;
}

/* Scene: Terapia Vascular — latido + ECG */
@keyframes sc-heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.28); }
  22%      { transform: scale(0.92); }
  32%      { transform: scale(1.12); }
  48%      { transform: scale(1); }
}
.sc-heart { animation: sc-heartbeat 1.5s ease-in-out infinite; }

.ecg-path {
  stroke-dasharray: 200;
  animation: sc-ecg 2.4s linear infinite;
}
@keyframes sc-ecg {
  from { stroke-dashoffset:  200; }
  to   { stroke-dashoffset: -200; }
}

/* Scene: Terapia Manual — mano presionando con onda */
@keyframes sc-hand-press {
  0%, 100% { transform: translateY(0)   rotate(-25deg); }
  20%      { transform: translateY(8px) rotate(-18deg); }
  45%      { transform: translateY(8px) rotate(-18deg); }
  72%      { transform: translateY(0)   rotate(-25deg); }
}
.sc-mano { animation: sc-hand-press 2s ease-in-out infinite; }

@keyframes sc-hand-wave {
  0%, 15%   { transform: scale(0.15); opacity: 0.7; }
  80%, 100% { transform: scale(2.4);  opacity: 0;   }
}
.sc-mano-wave { animation: sc-hand-wave 2s ease-out infinite; }

/* Panel cards — animación escalonada al abrir */
.hero-panel-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
#heroCard.panel-open .hero-panel-card:nth-child(1) {
  opacity: 1; transform: translateY(0); transition-delay: 0.28s;
}
#heroCard.panel-open .hero-panel-card:nth-child(2) {
  opacity: 1; transform: translateY(0); transition-delay: 0.38s;
}
#heroCard.panel-open .hero-panel-card:nth-child(3) {
  opacity: 1; transform: translateY(0); transition-delay: 0.48s;
}

body {
  background-color: theme("colors.background");
  color: theme("colors.on-surface");
  font-family: theme("fontFamily.body");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: theme("fontFamily.headline");
  letter-spacing: -0.02em;
}