/* =========================================================
   Veterinaria Huellas — efectos propios de la web
   (mascota, video en la gota, rastro de huellas, cursor y confeti).
   Usa las mismas variables de estilos.css. Solo lo carga index.html.
   ========================================================= */

/* ---------- Pancho, la mascota ---------- */
.pancho { display: block; overflow: visible; }
.pancho--interactivo { cursor: pointer; }
/* Globo de diálogo que aparece al tocarlo */
.globo-pancho {
  position: absolute; z-index: 6; left: 0; top: 0;
  padding: 10px 14px; border-radius: 18px;
  background: var(--blanco); color: var(--azul-profundo);
  box-shadow: var(--sombra-alta);
  font: 600 14px/1.3 var(--fuente-texto); white-space: nowrap;
  transform-origin: 30% 100%;
  pointer-events: none;
}
.globo-pancho::after {
  content: ""; position: absolute; left: 24px; bottom: -6px;
  width: 14px; height: 14px; background: var(--blanco); transform: rotate(45deg); border-radius: 3px;
}

/* ---------- Gota del inicio ---------- */
.hero__gota video { background: transparent; }

/* ---------- Rastro de huellas (margen derecho, escritorio ancho) ---------- */
.rastro { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 3; pointer-events: none; overflow: visible; }
.rastro__huella { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.rastro__huella svg { display: block; width: 100%; height: 100%; fill: var(--azul-suave); }

/* ---------- Cursor: anillo que sigue al puntero (no oculta el cursor normal) ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 200;
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  pointer-events: none;
  opacity: 0;
}
.cursor__anillo {
  display: grid; place-items: center;
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--azul);
  transition: scale 350ms var(--rebote), background-color 250ms ease;
}
.cursor__anillo svg { width: 18px; height: 18px; fill: var(--blanco); opacity: 0; transition: opacity 200ms ease; }
.cursor--enlace .cursor__anillo { scale: .55; background: rgba(37, 99, 235, .12); }
.cursor--foto .cursor__anillo { scale: 1.75; background: rgba(37, 99, 235, .85); border-color: rgba(255, 255, 255, .9); }
.cursor--foto .cursor__anillo svg { opacity: 1; scale: .58; }
.cursor--visible { opacity: 1; transition: opacity 250ms ease; }

/* ---------- Confeti de huellitas y burbujas ---------- */
.confeti { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.confeti__pieza { position: absolute; left: 50%; top: 30%; width: 18px; height: 18px; }
.confeti__pieza svg { display: block; width: 100%; height: 100%; }
.confeti__pieza--burbuja { border-radius: 50%; }

/* ---------- Cómo reservar en escritorio: la mascota recorre los pasos ---------- */
.reservar--viaje .pasos { padding-top: 200px; }
.reservar--viaje .reservar__pancho { position: absolute; left: 0; top: 0; z-index: 3; width: 120px; margin: 0; }
.reservar--viaje .reservar__camino { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.reservar__camino .camino__punteado { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 12; }
.reservar__camino .camino__revelado { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
/* Fijada, ocupa toda la pantalla */
.seccion--profunda.reservar--viaje { min-height: 100vh; display: grid; align-content: center; padding-top: var(--e-6); padding-bottom: var(--e-6); }
.reservar--viaje .seccion__cabeza { margin-bottom: 0; }
.reservar--viaje .reservar__accion { min-height: 52px; }

/* =========================================================
   Estados iniciales de la entrada del inicio (solo con JS y movimiento permitido).
   La red de seguridad .todo-visible muestra todo a los 4 s si main.js no corrió.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.todo-visible):not(.hero-listo) .hero [data-entrada] { opacity: 0; }
  .js:not(.todo-visible):not(.hero-listo) .hero__titulo { visibility: hidden; }
  .js:not(.todo-visible):not(.hero-listo) .hero__escena { transform: scale(.85); }
  .js:not(.todo-visible):not(.hero-listo) .hero__pancho .pancho { transform: translateY(100%); }

  /* La gota cambia lentamente entre tres formas orgánicas */
  .hero__gota { animation: gota 12s ease-in-out infinite alternate; }
  /* Tarjetas flotantes: suben y bajan desfasadas */
  .flotante__caja { animation: flotar 4s ease-in-out infinite alternate; }
  /* Punto de urgencias: late cuando la tarjeta ya entró */
  .urgencias--viva .urgencias__punto::after { animation: latir 1.8s ease-out infinite; }

  /* Botón «Pedir turno» de Cómo reservar: late cuando la mascota llega al final */
  .boton--latido { animation: latido 1.2s var(--rebote) infinite; }

  /* Fuera de pantalla, todo lo infinito se pausa */
  .en-pausa .hero__gota, .en-pausa .flotante__caja, .en-pausa .urgencias__punto::after { animation-play-state: paused; }
}

@keyframes gota {
  0%   { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
  50%  { border-radius: 56% 44% 52% 48% / 44% 56% 46% 54%; }
  100% { border-radius: 42% 58% 56% 44% / 56% 48% 52% 44%; }
}
@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes latido { 0%, 100% { scale: 1; } 30% { scale: 1.06; } 60% { scale: .99; } }
@keyframes latir { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }