/*
 * eliGe | Movimiento sutil de personajes oficiales.
 * Solo portada (ID 102) y solo si no se pide reducir animaciones.
 * Sin JavaScript, GIF ni capas encima de textos; personajes en su propia fila.
 */

.elige-welcome__mascots {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  gap:14px;
  min-height:78px;
  max-width:100%;
  margin:0;
  pointer-events:none;
}

.elige-welcome__mascots .elige-welcome__mascot {
  display:block;
  position:relative;
  width:64px;
  height:70px;
  min-width:0;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  flex:0 0 auto;
  transform-origin:50% 70%;
}

.elige-welcome__mascots .elige-welcome__mascot:first-child {
  width:58px;
}

@media (min-width:1161px) {
  .elige-welcome__lower .elige-welcome__tagline {
    flex:1 1 195px;
    max-width:295px;
    min-width:0;
  }
  .elige-welcome__lower .elige-welcome__actions {
    flex:0 1 auto;
  }
}

@media (max-width:1160px) and (min-width:761px) {
  .elige-welcome__mascots {
    gap:15px;
    min-height:65px;
    margin:2px auto 4px;
  }
  .elige-welcome__mascots .elige-welcome__mascot {
    width:54px;
    height:61px;
  }
  .elige-welcome__mascots .elige-welcome__mascot:first-child {
    width:47px;
  }
}

@media (max-width:760px) {
  .elige-welcome__mascots {
    justify-content:center;
    gap:clamp(7px,2.5vw,13px);
    min-height:54px;
    margin:0 0 20px;
    flex-wrap:nowrap;
  }
  .elige-welcome__mascots .elige-welcome__mascot {
    width:clamp(36px,11vw,49px);
    height:clamp(42px,12vw,54px);
  }
  .elige-welcome__mascots .elige-welcome__mascot:first-child {
    width:clamp(32px,10vw,43px);
  }
}

/*
 * La animación no cambia la posición asignada por grid/flex ni los
 * tamaños de los bloques; solo mueve la imagen dentro de su celda.
 */
@media (prefers-reduced-motion:no-preference) {
  @keyframes elige-mascot-float {
    0%,100% { transform:translate3d(0,3px,0) rotate(-3deg); }
    50%     { transform:translate3d(0,-12px,0) rotate(5deg); }
  }
  @keyframes elige-mascot-hello {
    0%,80%,100% { transform:rotate(0deg) translateY(0); }
    85% { transform:rotate(-8deg) translateY(-7px); }
    92% { transform:rotate(7deg) translateY(-2px); }
  }
  @keyframes elige-service-wave {
    0%,75%,100% { transform:rotate(0deg) translateY(0); }
    82% { transform:rotate(-7deg) translateY(-8px); }
    90% { transform:rotate(4deg) translateY(-3px); }
  }

  .elige-home .services .service .service-mascot {
    animation:elige-service-wave 6.6s ease-in-out infinite;
    transform-origin:50% 75%;
  }
  .elige-home .services .service:nth-child(2) .service-mascot { animation-delay:-1.7s; }
  .elige-home .services .service:nth-child(3) .service-mascot { animation-delay:-3.1s; }
  .elige-home .services .service:nth-child(4) .service-mascot { animation-delay:-4.6s; }
  .elige-details__contact .elige-details__contact-icon img {
    animation:elige-mascot-hello 7.3s ease-in-out infinite;
    transform-origin:50% 75%;
  }

  .elige-welcome__mascots .elige-welcome__mascot {
    animation:elige-mascot-float 3.6s ease-in-out infinite;
  }
  .elige-welcome__mascots .elige-welcome__mascot:nth-child(2) {
    animation-duration:4.2s;
    animation-delay:-1.4s;
  }
  .elige-welcome__mascots .elige-welcome__mascot:nth-child(3) {
    animation-duration:4.7s;
    animation-delay:-2.8s;
  }
  .elige-welcome__mascots .elige-welcome__mascot:nth-child(4) {
    animation-duration:4.1s;
    animation-delay:-.9s;
  }
  .elige-welcome__mascots .elige-welcome__mascot:nth-child(5) {
    animation-duration:5s;
    animation-delay:-3.6s;
  }

  /* Las tarjetas responden solo a interacción con ratón/puntero. */
  @media (hover:hover) and (pointer:fine) {
    .elige-home .services .service .service-mascot {
      transition:transform .32s cubic-bezier(.2,.8,.2,1);
      transform-origin:center bottom;
    }
    .elige-home .services .service:is(:hover,:focus-within) .service-mascot {
      animation:none;
      transform:translate3d(0,-9px,0) rotate(-9deg) scale(1.055);
    }
    .elige-home .shape-row img {
      transition:transform .35s cubic-bezier(.2,.8,.2,1);
      transform-origin:center bottom;
    }
    .elige-home .shape-row img:hover {
      transform:translate3d(0,-6px,0) rotate(6deg);
    }
    .elige-details__contact .elige-details__contact-icon img {
      transform-origin:50% 75%;
      transition:transform .32s cubic-bezier(.2,.8,.2,1);
    }
    .elige-details__contact:is(:hover,:focus-within) .elige-details__contact-icon img {
      animation:none;
      transform:rotate(-9deg) translateY(-7px);
    }
  }

  /* Movimiento CSS sin animaciones scroll-linked para evitar diferencias
     de compatibilidad entre navegadores de escritorio y móvil. */
}

/* Ningún movimiento, transición o desplazamiento inducido en modo reducido. */
@media (prefers-reduced-motion:reduce) {
  .elige-welcome__mascots .elige-welcome__mascot,
  .elige-home .services .service .service-mascot,
  .elige-home .shape-row img,
  .elige-details__contact .elige-details__contact-icon img {
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}

@media print {
  .elige-welcome__mascots .elige-welcome__mascot,
  .elige-home .services .service .service-mascot,
  .elige-details__contact .elige-details__contact-icon img {
    animation:none!important;
    transform:none!important;
  }
}