@import url('https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap');



.ContenedorAnimacion {


  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 850px;
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .title {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      height: 70px;

      .block {
        width: 0%;
        height: inherit;
        background: #ffb510;
        position: absolute;
        animation: mainBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
        display: flex;
      }

      h1 {
        font-family: 'Poppins';
        color: #000000;
        font-size: 42px;
        -webkit-animation: mainFadeIn 2s forwards;
        -o-animation: mainFadeIn 2s forwards;
        animation: mainFadeIn 2s forwards;
        animation-delay: 1.6s;
        opacity: 0;
        display: flex;
        align-items: baseline;
        position: relative;

        span {
          width:0px;
          height: 0px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;

          background: #ffb510;
          -webkit-animation: load 0.6s cubic-bezier(.74, .06, .4, .92) forwards;
          animation: popIn 0.8s cubic-bezier(.74, .06, .4, .92) forwards;
          animation-delay: 2s;
          margin-left: 5px;
          margin-top: -10px;
          position: absolute;
          bottom: 13px;
          right: -12px;

        }
      }
    }

    .role {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      height: 30px;
      margin-top: -10px;

      .block {
        width: 0%;
        height: inherit;
        background: #e91e63;
        position: absolute;
        animation: secBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
        animation-delay: 2s;
        display: flex;
      }

      p {
        animation: secFadeIn 2s forwards;
        animation-delay: 3.2s;
        opacity: 0;
         font-weight: 400;
        font-family: 'Lato';
        color: #000000;
        font-size: 22px;
        text-transform: uppercase;
        letter-spacing: 5px;
      }
    }
  }
}

@media (max-width: 768px) { /* O el max-width que estés usando */
  .ContenedorAnimacion .box {
    /* Mantén las reglas que ya te funcionan para el contenedor principal si no las eliminaste */
    width: 100%; /* O un porcentaje, si prefieres */
    max-width: none; /* Para anular el ancho fijo original */
    height: auto;
    /* ...otras reglas del .box si las tienes */
  }

  .ContenedorAnimacion .box .title h1 {
    /* Estilos para el h1 en pantallas pequeñas */
    font-size: 18px; /* **AJUSTA ESTE VALOR** - Empieza con un valor pequeño y ve aumentando */
    white-space: nowrap; /* Evita que el texto se divida en líneas */
    overflow: hidden; /* Oculta cualquier texto que se desborde si no cabe */
    text-overflow: ellipsis; /* Opcional: añade puntos suspensivos si el texto se corta */
    /* ...otras reglas para el h1 si las tienes */
  }

  .ContenedorAnimacion .box .role p {
     /* Mantén o ajusta las reglas para el subtítulo si es necesario */
     font-size: 16px; /* Ejemplo */
     white-space: nowrap; /* Opcional: si también quieres el subtítulo en una línea */
     overflow: hidden;
     text-overflow: ellipsis;
     /* ...otras reglas del p si las tienes */
  }

  /* Mantén o elimina las reglas para las animaciones según si quieres que se muestren o no en móvil */
}



@keyframes mainBlock {
  0% {
    width: 0%;
    left: 0;

  }
  50% {
    width: 100%;
    left: 0;

  }
  100% {
    width: 0;
    left: 100%;
  }
}

@keyframes secBlock {
  0% {
    width: 0%;
    left: 0;

  }
  50% {
    width: 100%;
    left: 0;

  }
  100% {
    width: 0;
    left: 100%;
  }
}

@keyframes mainFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes popIn {
  0% {
    width: 0px;
    height: 0px;
    background: #ec6a0d;
    border: 0px solid #000000;
    opacity: 0;
  }
  50% {
    width: 10px;
    height: 10px;
    background: #ec6a0d;
    opacity: 1;
    bottom: 45px;
  }
   65% {
      width: 7px;
    height: 7px;
      bottom: 0px;
      width: 15px
   }
   80% {
      width: 10px;
    height: 10px;
      bottom: 20px
   }
  100% {
    width: 7px;
    height: 7px;
    background: #ec6a0d;
    border: 0px solid #222;
    bottom: 13px;

  }
}

@keyframes secFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}