/* ===========================================================================
   Animación y mascotas de la landing.
   Se carga después de styles.css, así que solo añade: no reescribe lo que ya
   funcionaba.

   Regla que sigue todo: solo transform y opacity —van por GPU y no provocan
   reflujo— y salir siempre más rápido que entrar.
   =========================================================================== */

/* --- Titular: las palabras entran escalonadas --------------------------- */
.hero-texto h1 .palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: entraPalabra 620ms cubic-bezier(.2,.9,.25,1) forwards;
}
/* El retardo lo pone el JS por índice: así no hay que escribir una regla
   por palabra ni limitar cuántas puede haber. */
@keyframes entraPalabra {
  to { opacity: 1; transform: none; }
}

/* El subrayado del remate se dibuja después de que caiga la última palabra. */
.hero-texto h1 em::after {
  transform-origin: left center;
  animation: trazo 520ms cubic-bezier(.2,.9,.25,1) 620ms both;
}
@keyframes trazo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Mascotas ------------------------------------------------------------ */
.mascota {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Flotación permanente: da vida sin pedir atención. Tres duraciones
   distintas para que no respiren al unísono, que es lo que delata el bucle. */
.mascota img { display: block; width: 100%; height: auto; animation: flota 4.2s ease-in-out infinite; }
.mascota.ritmo-b img { animation-duration: 5.1s; animation-delay: -1.4s; }
.mascota.ritmo-c img { animation-duration: 4.7s; animation-delay: -2.6s; }
@keyframes flota {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-1.4deg); }
}

/* Mascota del héroe: asomada junto al teléfono. */
.hero .mascota-heroe {
  right: -12px; bottom: -8px; width: 148px; z-index: 2;
  opacity: 0; transform: scale(.6);
  transform-origin: 100% 100%;
  animation: asoma 640ms cubic-bezier(.2,.9,.25,1) 780ms forwards;
}
@keyframes asoma { to { opacity: 1; transform: scale(1); } }

/* --- Pasos y tarjetas ---------------------------------------------------- */
/* El hueco se reserva en el contenedor, no en cada párrafo: así el texto no
   puede invadirlo por largo que sea, que es como funcionan las tarjetas de la
   aplicación. Reservar menos de lo que ocupa la mascota es no reservar nada. */
.pasos li {
  position: relative;
  padding-right: 86px;
  padding-bottom: 8px;
  min-height: 128px;
}
.pasos .mascota { right: 0; bottom: 0; width: 74px; opacity: .96; }

.publico { position: relative; overflow: hidden; padding-right: calc(25% + 20px); }
/* Anclada a la esquina y creciendo desde ella. */
.publico .mascota { right: 0; bottom: 0; width: 25%; max-width: 140px; transform-origin: 100% 100%; }

/* --- Aparición al hacer scroll ------------------------------------------- */
/* Se marca con JS solo si hay IntersectionObserver: sin él, todo visible. */
.revelar { opacity: 0; transform: translateY(26px); }
.revelar.visible {
  opacity: 1; transform: none;
  transition: opacity 520ms cubic-bezier(.2,.9,.25,1),
              transform 520ms cubic-bezier(.2,.9,.25,1);
}
.revelar.retraso-1.visible { transition-delay: 90ms; }
.revelar.retraso-2.visible { transition-delay: 180ms; }

/* --- Cifras que cuentan -------------------------------------------------- */
.cifras dd { font-variant-numeric: tabular-nums; }

/* --- Nada de esto para quien pide menos movimiento ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-texto h1 .palabra { opacity: 1; transform: none; animation: none; }
  .hero-texto h1 em::after { animation: none; transform: none; }
  .mascota img { animation: none; }
  .hero .mascota-heroe { opacity: 1; transform: none; animation: none; }
  .revelar { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .hero .mascota-heroe { width: 104px; right: -6px; }
  .pasos li { padding-right: 66px; min-height: 0; }
  .pasos .mascota { width: 58px; }
  .publico { padding-right: calc(30% + 14px); }
  .publico .mascota { width: 30%; }
}


/* La marca lleva mascota: se le da forma y se evita que el flotado la mueva. */
.brand img, .pie-marca img { border-radius: 8px; }
.brand img { animation: none; }