@font-face {
    font-family: 'Gillroy Heavy';
    src: url('../fonts/Gilroy-Heavy.woff2');
  }

body{
    background-color:#e7ff00;
    color: #000;
    font-family: 'Gillroy Heavy';
    font-size:22vw;
    line-height:1;
    overflow:hidden;
    margin:-60px 0px 0px;
}
.fila{
  position:relative; 
  height:30vh;
  padding:15px 0px;
  width:100%;
}

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  vertical-align: middle;
  width:100%;
}


.contenedor-logo{
  position:absolute;
  left:50%;
  top:50%;
  padding:15px;
  transform: translate(-50%,-50%);
  background-color: #e7ff00;
} 
.contenedor-logo img{
  display:block;
}

/* fila1 */

  
  .fila1 .marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: fila1 10s linear infinite;
  }
  
  .fila1 .marquee2 span {
    animation-delay: 5s;
    /* padding-left: 100%; */
  }


  /* fila 2 */
  .fila2 .marquee span {
    display: block;
    animation: fila2 10s linear infinite;
    margin-left: -100%;
  }
  
  .fila2 .marquee.marquee2 span {
    animation: fila2 10s linear infinite;
    animation-delay: 5s;
    color:#000;
  }

  /* fila 3 */
  .fila3 .marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: fila3 10s linear infinite;
  }
  
  .fila3 .marquee2 span {
    animation-delay: 5s;
    /* padding-left: 100%; */
  }
  
  @keyframes fila1 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-116%, 0);
    }
  }

  @keyframes fila2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(105%, 0);
    }
    
  }

  
  @keyframes fila2plus {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(103%, 0);
    }
    
  }


  @keyframes fila3 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-105%, 0);
    }
  }

  .proximamente{
    position:absolute;
    right:60px;
    top:80px;
  }
  .proximamente-inner{
    animation: giro 7s linear infinite;
    transform-origin: center;
  }
  .proximamente img{
    display:block;
  }
  @keyframes giro {
    0% {
      transform: rotate();
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .puntos{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
  }
  .punto{
    width:15px;
    height:15px;
    background: #fff;
    border-radius: 50%;
    opacity:0;
  }
  @keyframes puntofade1 {
    0% {
      opacity:0;
    }
    10%{
      opacity:1;
    }
    100%{
      opacity:1;
    }
  }
  
  @keyframes puntofade2 {
    0% {
      opacity:0;
    }
    10%{
      opacity: 1;
    }
    100% {
      opacity:1;
    }
  }
  @keyframes puntofade3 {
    0% {
      opacity:0;
    }
    10%{
      opacity:1;
    }
    100% {
      opacity:1;
    }
  }
    

  .punto1{
    animation: puntofade1 3s linear infinite;
  }
  .punto2{
    animation: puntofade2 3s linear infinite;
    animation-delay:1s;
  }
  .punto3{
    animation: puntofade3 3s linear infinite;
    animation-delay:2s;
  }


  /* Generador de firmas */
  body.body_generador_firmas{
    margin-top:0px;
    overflow: auto;
  }
  .logo-firmas-container{
    text-align:center;
    margin: 15px 0px;
  }
  .entradilla_firmas{
    text-align:center;
    margin:15px 0px 60px;
  }
  .entradilla_firmas h2{
    font-size:24px;
    margin-bottom:5px;
  }
  .logo-firmas-container img{
    width:150px;
  }
  .formulario-firmas-container{
    width:50%;
    margin:0 auto;
    border: 1px solid #fff;
    font-size: 20px;
    padding: 30px;
  }
  .formulario-campo-container{
    margin-bottom: 30px;
  }
  .formulario-firmas-container .label{
    display:block;
    margin-bottom:5px;
  }
  .formulario-firmas-container .descripcion{
    display:block;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .formulario-campo-container input[type="text"], .formulario-campo-container input[type="file"]{
    border:none;
    width:100%;
    padding: 5px;
  }
  .formulario-campo-container textarea{
    border:none;
    width:100%;
    padding: 5px;
    height:300px;
  }
  .formulario-campo-container-boton{
    text-align:center;
  }
  .formulario-campo-container input[type="submit"]{
    background-color: #3631FF;
    color: #fff;
    padding:10px 30px;
    border: 1px solid #fff;
    cursor: pointer;
  }

  @media(max-width: 1024px){
    body{
      font-size:40vw;
      margin-top:0px;
    }

    .contenedor-logo img{
      width:220px;
    }
    .proximamente{
      top:30px;
      right:10px;
    }
    .proximamente img{
      width:180px;
      height:auto;
    }
    .puntos{
      gap:7px;
    }
    .punto{
      width:10px;
      height:10px;
    }

    .fila2 .marquee span {
      
      margin-left: -200%;
    }

    @keyframes fila1 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-146%, 0);
      }
    }

    @keyframes fila2 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(127%, 0);
      }
      
    }

    @keyframes fila3 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-135%, 0);
      }
    }

  }

  @media(max-width: 767px){
    body{
      font-size:40vw;
      margin-top:0px;
    }
    .contenedor-logo img{
      width:150px;
    }
    .proximamente{
      top:30px;
      right:10px;
    }
    .proximamente img{
      width:120px;
      height:auto;
    }
    .puntos{
      gap:5px;
    }
    .punto{
      width:7px;
      height:7px;
    }

    .fila2 .marquee span {
      
      margin-left: -200%;
    }

    @keyframes fila1 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-146%, 0);
      }
    }

    @keyframes fila2 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(127%, 0);
      }
      
    }

    @keyframes fila3 {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-135%, 0);
      }
    }

  }