/* ==========================
   ELID Mascota / Personaje
   Archivo independiente para controlar únicamente la mascota.
   ========================== */

:root {
  --mascot-float-distance: 10px;
  --mascot-float-speed: 4.8s;
}

/* Hero Home */
/*
.home-mascot-bridge {
  position: relative;
  height: 0;
  z-index: 10;
  pointer-events: none;
}

.home-mascot-bridge img {
  position: absolute;
  right: clamp(10px, 5vw, 110px);
  top: 10px;

  width: clamp(150px, 18vw, 235px);
  height: auto;
  display: block;

  animation: elidMascotFloat var(--mascot-float-speed) ease-in-out infinite;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.24));
}
*/

.home-lms-banner {
  position: relative;
  overflow: visible;
}

.home-mascot-bridge {
  position: absolute;
  right: -25px;
  top: 90px;
  z-index: 5;
  pointer-events: none;
}

.home-mascot-bridge img {
  width: 180px;
  height: auto;
  display: block;
  animation: elidMascotFloat var(--mascot-float-speed) ease-in-out infinite;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.24));
}

/* ===========================
   Mascota - Contacto
   =========================== */

.contact-form-card{
    position:relative;
    overflow:visible;
}

.contact-mascot{
    position:absolute;
    right:10px;
    bottom:-30px;

    pointer-events:none;
    z-index:5;
}

.contact-mascot img{
    width:210px;
    height:auto;

    display:block;

    animation:elidMascotFloat var(--mascot-float-speed) ease-in-out infinite;
    filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));
}

@keyframes elidMascotFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--mascot-float-distance) * -1));
  }
}


@media (max-width: 1100px) {
  .home-mascot-bridge {
    right: 18px;
    top: 90px;
  }

  .home-mascot-bridge img {
    width: 190px;
  }
}

@media (max-width: 900px) {
  .home-mascot-bridge {
    right: 18px;
    top: 85px;
  }

  .home-mascot-bridge img {
    width: 180px;
  }
}

@media (max-width: 760px) {
  .home-mascot-bridge {
    right: -11px;
    top: 0px;
  }

  .home-mascot-bridge img {
    width: 165px;
  }
}


/** contact **/

@media (max-width:1100px){

    .contact-mascot{
        right:-45px;
        bottom:20px;
    }

    .contact-mascot img{
        width:260px;
    }

}

@media (max-width:900px){

    .contact-mascot{
        position:static;
        display:flex;
        justify-content:center;
    }

    .contact-mascot img{
        width:240px;
    }

}