*{
margin: 0;
padding: 0;

}

@font-face {
  font-family: newjunebold;
  src: url(fuentes/newjunebold.otf) format("opentype");
}

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root {
  --azul-sc: #384967;
  --rosa-sc : #e05074;
  --color-bg: rgb(255, 255, 255);
  --fuente: 'Montserrat', sans-serif;
  --quicksand: "Quicksand", sans-serif;
--menu-bg: rgba(255, 255, 255, 0.8);
}




body{
background-color: var(--color-bg);

}

.dobleventana .izq.center{
display: flex;
justify-content: left;
align-items: center;

height: 65vh;
width: max-content;
flex-basis: 100%;


}

.dobleventana .izq.center .content{
width: 100%;


}

.dobleventana .izq.center h1{
font-family: newjunebold;
color: var(--azul-sc);
font-size: 9vh;

}

.portadabtns{
  display: flex;
  justify-content: left;
  align-items: center;
}

.dobleventana .izq.center h1 img{
width: 7vh;
margin-right: 1vw;

}

.dobleventana .izq.center h2{
  font-family: newjunebold;
  color: var(--azul-sc);
  font-size: 5vh;
  }

.transicion{
  position: fixed;
  display: block;
  bottom: -50vh;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999999999999999;
  transform: scale(0);
 
     }

 
  .mobiletabimg{


    display: none;
  }
     
     .transicion.active{
       display: block;
       animation: transicion 0.28s;
       transform: scale(10);
       bottom: 100vh;
     }




     @keyframes transicion {
      from{
          transform: scale(0);
          bottom: -50vh;

      }
      to{

        transform: scale(10);
        bottom: 100vh;
      }
      
    }
    

.banner-top{

display: flex;
height: 90vh;
overflow: hidden;
position: relative;
margin-top: 9.7VH;
padding-left: 3vw;
font-family: var(--fuente);
}


portadatitulo{
font-size: 6.2vh;
display: block;
text-wrap: wrap;
color: var(--azul-sc);
width: 32VW;
font-family: newjunebold;
margin-bottom: 2.5VH;
animation: titulo 0.5s;

}

@keyframes titulo {
    from{
      opacity: 0;
      filter: blur(1.1vh);
      transform: translateX(-2vh);

    }
    to{

      opacity: 1;
      filter: none;
      transform: translateX(0vh);
    }


}

.flecha{
  transition: 0.1s;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
width: 3vh;
position: relative;
padding: 2vh;
border-radius: 2vh;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 10.21164021164021163vh;
}

.flecha:hover{
  transition: 0.1s;
cursor: pointer;
fill: var(--color-bg);

}

.flecha:hover .cls-1{
  transition: 0.1s;
  fill: var(--color-bg);

}

.flecha:hover .cls-2{
  transition: 0.1s;
  fill: var(--color-bg);

}

.carrusel{


  display: flex;
}

body{
  animation: entradatodo 0.3s;
 
}


@keyframes entradatodo {
  from{
    opacity: 0;
    overflow: hidden;


  }

  to{
 
    opacity: 1;
            overflow: hidden;

  }

}
  .menu{
display: flex;
position: fixed;
background-color: var(--menu-bg);
top: 0;
backdrop-filter: blur(2.5vh);
z-index: 9999;
transform: translateY(0px);
width: 100%;
align-items: center;
justify-content: center;
padding: 2vh;
height: 5.5vh;
border: none;
  }



  @keyframes menuentrada {

    from{transform: translateY(-50%);
    opacity: 0;}
    to{
transform: translateY(0px);
opacity: 1;
    }
    
  }
  .menu .logo{
margin-left: 4vw;
flex: 1;
  }


  .menu .logo img{
width: 23vh;
  }

  .menu .logomovil{
display: none;

  }

  .menu-sep{
display: block;
width: 100%;
height: 9.3vh;

  }


  .menu .btns{
padding-left: 0vh;
margin-right: 1vw;
display: flex;
position: relative;

  }



/* BOTON */
  form .btn{
    padding: 1.7vh;
  border-radius: 99vh;
  font-weight: 520;
display: block;
margin: auto;
margin-top: 5vh;
font-size: 1.7vh;
  }

  .menu .btns button{
    transition: 0.16s;
color: #384967;
display: flex;
align-items: center;
text-align: left;
font-family: var(--fuente); 
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
position: relative;
font-weight: 600;
padding: 1vh;
margin-right: 6vh;
padding: 0vh;
padding-bottom: 0.5vh;
padding-top: 2vh;

padding-top: 0vh;
padding-left: 3.2vh;
font-size: 1.7vh;

  }

 
  .menu .btns .desp{
width: 1.2vh;
padding-left: 0.8vh;
transform: translateY(-0.1vh);


  }

  .btns button dotlottie-player{
width: 2.5vh;
position: absolute;
bottom: 0.69vh;
left: 0;

  }

  .menu .btns button::before{
content: '';


  }

  

  .bannet-top .derecha{

width: 50%;


  }

      .menu .btns button:hover{
transition: 0.16s;
color: #e05074;

      }
      
      .menu .btns button img{
        transition: 0.16s;
width: 2vh;
filter: none;
margin-top: 0.3vh;
display: flex;
flex: 1;
      }
      .menu .btns button span{
display: flex;

      }


      .menu .btns #nosotros img.active{
        transition: 0.2s;
        padding-top: 0.2vh;
transform: rotateX(180deg);
      }

      .menu .btns #proyectos img.active{
        transition: 0.2s;
        padding-top: 0.2vh;
transform: rotateX(180deg);
      }



      .menu .btns button span{
        transition: 0.16s;
      }

    
      .menu .btns .nosotros.active{
        transition: 0.16s;
      }

      .menu .btns .nosotros.active::before{
    width: 100%;
      }

      .menu .btns #proyectos.active::before{
        width: 100%;
          }
    

 
      
      .menu .btns button:hover img{
        transition: 0.16s;
        filter: invert(44%) sepia(23%) saturate(2652%) hue-rotate(305deg) brightness(93%) contrast(87%);
      }


 
      .menu .btns .proyectos.active{
        transition: 0.16s;
      }

      .menu .btns .proyectos.active::before{
    width: 100%;
      }

      .menu .btns #proyectos span{
display: block;

      }


      .menu .btns #proyectos img.active{
        transition: 0.2s;
        padding-top: 0.2vh;
transform: rotateX(180deg);
      }

      estatutos{
display: block;
width:50vh;
margin-top: 5vh;
padding: 2vh;
margin-left: 2vw;
border-radius: 1.5vh;
background: #f9fbfd;
font-family: var(--fuente);
      }

      estatutos titulo{
font-family: newjunebold;
color: var(--azul-sc);
font-size: 4.5vh;
padding-top: 2vh;
margin-left: 1vw;
display: flex;
align-items: center;
justify-content: left;

      }

      
      estatutos titulo img{

width: 3.8vh;
margin-right: 0.5vw;

      }

      estatutos h2{
        font-family: var(--fuente);
        color: var(--azul-sc);
        font-size: 3vh;
        font-weight: 620;
        margin-left: 1vw;
      }
      estatutos hr{
       margin: 1vh; 
       background: linear-gradient(90deg, rgba(56,73,103,0) 0%, rgba(56,73,103,0.75) 7%, rgba(56,73,103,0) 100%);
      }

      estatutos .year{
        margin-top:4vh;
        margin-bottom:4vh;
      }

      .doblediv{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
width: 100%;

      }

      estatutos button{
        transition-duration: 0.16s;
display: flex;
position: relative;
align-items: center;
border: none;
background: transparent;
color: var(--azul-sc);
font-weight: 520;
font-family: var(--fuente);
padding: 1.2vh;
padding-right: 3vh;
font-size: 1.6vh;
      }

      
      estatutos button::after{
        content: '';
        transition-duration: 0.16s;
        position: absolute;
        right: 0.45vw;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        width: 0.7vh;
        height:0.7vh;
        border-right: 0.35vh solid var(--azul-sc);
        border-bottom: 0.35vh solid var(--azul-sc);


      }

      estatutos button:hover:after{
        right: 0.25vw;
        border-right: 0.35vh solid var(--rosa-sc);
        border-bottom: 0.35vh solid var(--rosa-sc);
      }

      estatutos button:hover{
        color: var(--rosa-sc);
        cursor: pointer;

      }

      estatutos button::before{
        content: '';
        transition-duration: 0.13s;
        position: absolute;
        right: 0.3vw;
        top: 50%;
        transform: translateY(-50%);
        width: 0vh;
        border-bottom: 0.35vh solid var(--azul-sc);


      }

      estatutos button:hover::before{

        width: 1.12vh;
        border-bottom: 0.35vh solid var(--rosa-sc);
      }

      estatutos button img{
        filter: brightness(0) saturate(500%) invert(100%) sepia(0%) saturate(9492%) hue-rotate(257deg) brightness(594%) contrast(107%);
width: 2.6vh;
padding-right: 1vh;
      }

estatutos .bottom{
display: flex;
justify-content: right;
align-items: center;
width: 100%;

}


      .login{
display: flex;
justify-content: right;
padding-right: 4vw;
      }

      .login .menubtn{
        transition: 0.18s;
        position: relative;
      padding: 1.5vh;
      z-index: 9;
      width: 19vh;
      border-radius: 99vh;
      margin-right: 2vh;
      overflow: hidden;

      font-size: 1.6vh;
      font-weight: 600;
      font-family: var(--fuente);
      border: none;
      outline: none;
     background: #38496711;
      color: var(--azul-sc);
      }

      .login .menubtn.rosa{
background: var(--azul-sc);
color: white;
transition: 0.5s;
border: none;
      }

      .login .menubtn.rosa:hover{
        transition: 0.5s;
        background: var(--azul-sc);
      }

      .login .menubtn.rosa::before{
        transition: 0.3s;
        background: var(--rosa-sc);
        
      }

      
      .login .menubtn.rosa:hover::before{
transition: 0.3s;

      }

      .login .menubtn:hover{

        transition: 0.18s;
        color: white;
        background: transparent;
        cursor: pointer;

      }
      .login .menubtn::before{
        transition: 0.2s;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
 
        z-index: 7;
        background: var(--azul-sc);
        z-index: -1;
        mask-image: url('recursos/ANIM_MASK.svg');
        mask-size: 100% 100%;
        scale: 1;
        transform: translateY(61%);
        transform-origin: center bottom;
        mask-position: top left;
      }

      .login .menubtn:hover::before{
        transition: 0.2s;
        scale: 8.5;
        mask-size: 100% 100%;
        transform: translateY(1%);
        transform-origin: center bottom;
      }

   

    
      .login .menubtn:active{
        transition: 0.18s;
transform: scale(0.94);
border: 1px solid var();

      }

      .login .menubtn:active::before{
        transition: 0.18s;
        width: 115%;
        height: 135%;
        opacity: 0;
      }

      .menutabs{
        transition: 0.25s;
position: fixed;
display: none;
width: 100%;
z-index: 9999;
margin-top: 13vh;

      }


      .menutabs.active{
        transition: 0.2s;
        display: flex;
        height: max-content;
        transition: 0.25s;
              }


              .nosotrostab{
                transition: 0.16s;
display: block;
opacity: 0;
transform: translateY(-3vh);
overflow: hidden;
margin-left: 38vw;
border-radius: 1.25vh;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
              }

              .menutabs.active .nosotrostab{
                transition: 0.16s;
                opacity: 1;
                animation: entradamenu 0.15s;
                transform: translateY(-3vh);
              }

          
              .menutabs.proyectosactive .nosotrostab{


                display: none;
              }

              .proyectostab{
                transition: 0.16s;
display: block;
opacity: 0;
transform: translateY(-3vh);
overflow: hidden;
margin-left:47.75vw;
border-radius: 1.25vh;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
              }

              
              .menutabs.active .proyectostab{
                transition: 0.16s;
                opacity: 1;
                animation: entradamenu 0.15s;
                transform: translateY(-3vh);
              }

              .menutabs.active .nosotrostab{
                transition: 0.16s;
                opacity: 1;
                animation: entradamenu 0.15s;
                transform: translateY(-3vh);
              }

              .menutabs.nosotrosactive .proyectostab{
                display: none;
                
                            }

                            .menutabs .contactotab{
display: none;

                            }

                            .menutabs .noticiastab  {
                              display: none;
                              
                                                          }

              tabtitulo{
display: none;
font-family: var(--quicksand);
padding-left: 2VH;
font-weight: 200;
font-size: 4.4vmin;
color: var(--azul-sc);
padding-top: 1.5VH;
padding-bottom: 2VH;

              }





@keyframes entradamenu{

0%{
transform: translateY(0vh);
opacity: 0;

}
100%{
  transform: translateY(-3vh);
  opacity: 1;
}

}




              .btn{
                transition: 0.18s;
                position: relative;
              padding: 1.5vh;
              z-index: 9;
              width: 19vh;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 1.75vh;
              margin-right: 2vh;
              overflow: hidden;
              font-size: 1.7vh;
              font-weight: 500;
              font-family: var(--fuente);
              border: none;
              outline: none;
              background: var(--azul-sc);
color: white;
}

.btn::before{
  transition: 0.2s;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 7;
  background: var(--rosa-sc);
  z-index: -1;
  mask-image: url('recursos/ANIM_MASK.svg');
  mask-size: 100% 100%;
  scale: 1;
  transform: translateY(61%);
  transform-origin: center bottom;
  mask-position: top left;
}

.btn:hover::before{
  transition: 0.25s;
  scale: 8.5;
  mask-size: 100% 100%;
  transform: translateY(1%);
  transform-origin: center bottom;
}

.pagoselected .btn:hover::before{
  transition: 0.25s;
  scale: 9.5;
  mask-size: 100% 100%;
  transform: translateY(1%);
  transform-origin: center bottom;
}



.btn.grande img{
width: 2.3vh;
margin-right: 1vh;
}

.btn img{
  width: 2.5vh;
  margin-right: 1vh;
  }

.izquierda{
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
padding-left: 3vh;
}

.izquierda .spanbold{
color: var(--azul-sc);
animation: titulo 0.7s;
padding: 0.5vh;
font-weight: 500;
font-size: 2vh;
border-radius: 1.5vh;
display: flex;
width: 80%;
}

              .btn.rosa{
                color: white;
                background: var(--rosa-sc);
                padding: 2vh;
                box-shadow: 0px 5px 2vh 0.3vh #e0507498;
  
                              }

                              .btn.rosa.donar{
                                background: var(--azul-sc);

                              }

                              .btn.rosa.donar::before{
                                background: var(--rosa-sc);

                              }

                              .btn.rosa.donar::after{
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: radial-gradient(at 99% 60%, hsla(26,0%,100%,0) 0px, transparent 50%),
                                radial-gradient(at 0% 98%, hsla(189,0%,100%,0.41) 0px, transparent 50%);
                                animation: btnglow 3s linear infinite;
                              }

                              @keyframes btnglow {
                                0%{
                                  opacity: 0;

                                }
                                50%{
                                  opacity: 1;

                                }

                                100%{

                                  opacity: 0;
                                }
                              }

                              .btn.rosa::before{
                                content: '';
                                background: var(--azul-sc);

                              }

                              .btn.rosa:hover{
                                box-shadow: 0px 5px 2vh 0.3vh #2e344d98;

                              }

                              .btn.rosa.grande{
font-size: 1.9vh;
width: 21vh;
animation: titulo 0.9s;
margin-top: 4vh;
box-shadow: none;
border-radius: 99vh;
font-weight: 550;

                              }

                        .loading{

width: 7vh;
background: url('recursos/loading.svg');
animation: loading linear infinite 0.7s;
height: 7vh;

                        }

                        @keyframes loading {
                          0%{
                            transform: rotate(0deg);

                          }
                          100%{
                            transform: rotate(360deg);

                          }
                        }


                              .btn:hover{
                               
        transition: 0.18s;
        
        color: white;
        cursor: pointer;


                              }
       

           

              .nosotrostab .tabbtn{
                transition: 0.18s;
                  background-color: transparent;
                 color: var(--azul-sc);
                 border-radius: none;
                  font-family: var(--fuente);
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                
                  justify-content: left;
                  width: 35vh;
                  border: none;
                  cursor: pointer;
                  outline: none;
                  position: relative;
                  padding: 2vh;
                  font-size: 1.7vh;
                 margin: none;
                  text-align: right;
              }

              .nosotrostab .tabbtn:hover{   
                transition: 0.18s;
                color: white;                
                background-color: #e05074;

              } 

              .nosotrostab .tabbtn img{
width: 3vh;
padding-right: 2vh;

              }

              .nosotrostab .tabbtn:hover img{
                transition: 0.18s;
                filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
              }

          
/*  */
.proyectostab .tabbtn{
  transition: 0.18s;
    background-color: transparent;
   color: var(--azul-sc);
   border-radius: none;
    font-family: var(--fuente);
    font-weight: 600;
    display: flex;
    align-items: center;
  
    justify-content: left;
    width: 35vh;
    border: none;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 2vh;
    font-size: 1.7vh;
   margin: none;
    text-align: right;
}

.proyectostab .tabbtn:hover{   
  transition: 0.18s;
  color: white;                
  background-color: #e05074;

} 

.proyectostab .tabbtn img{
width: 5.5vh;
padding-right: 2vh;

}

.proyectostab .tabbtn:hover img{
  transition: 0.18s;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

       


              .despmobile{
display: none;

              }

              
              .nosotrostab .left .tabbtn:hover:before{
                transition: 0.18s;
                content: '';
              opacity: 1;
                

              }


        
              .enpositivo{
               
                font-size: 7.5vh;
                padding-left: 7vh;
                margin-bottom: 2vh;
                width: fit-content;
                position: relative;
                animation: tituloform 1s;
                padding-bottom: 1.7vh;
                display: none;
           }

              .tituloform h1{
                color: var(--azul-sc);
                padding-bottom: 8vh;
                font-family: newjunebold;
                font-size: 2.5rem;
                display: block;
              }

              .enpositivo::before{
                content: '';
                position: absolute;
                background-color: var(--rosa-sc);
                width: 100%;
                height: 1vh;
                left: 0;
                border-radius: 99vh;
                bottom: 0;
       
                animation: h1before 0.8s;
                animation-delay: 0.4s;
              }

              .enpositivo::after{
                content: '';
                position: absolute;
  background: url("cruz.svg");
                width: 5VH;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                height: 5vh;
                animation: cruzinfinite 3.5s infinite;

              }

              @keyframes cruzinfinite {
                0%{
                  transform: translateY(-55%);
                }

            
               50%{
                
                  transform: translateY(-75%);
                }

                100%{
                
                  transform: translateY(-55%);
                }

              }
            

              .tituloform{
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
font-family: var(--fuente);
animation-delay: 2s;
font-size: 2.5vh;
align-items: center;
text-align: center;

              }

              .tituloform .titulo{
display: flex;
overflow: hidden;
flex-wrap: wrap;
justify-content: center;
align-items: center;
animation: tituloform 0.8s;
text-align: center;
              }

           
              @keyframes tituloform {
                0%{
transform: translateY(50%);
opacity: 0;
                }


           
40%{
opacity: 0;

}
          
                100%{
transform: translateX(0%);
opacity: 1;
                }
              }

            
            
            
              .tituloform img{

                padding-right: 1.5vh;
                width: 5.5vh;
                animation: cruzentrada 0.75s;
                writing-mode: horizontal-tb;
                              }
                
                              @keyframes cruzentrada {

                                0%{
          transform: scale(0.5);
          transform-origin: center left;
          opacity: 0;

                                }
                
                                50%{
        
   opacity: 1;
                
                              }
                
                                100%{
                                  transform: scale(1);  
                              
                                }
                              }



              .tituloform h1{
                font-weight: 500;
                text-align: center;
              }
.tituloform .cambiante{
position: relative;
color: var(--rosa-sc);
}
.tituloform .cambiante::before{
content: '';
background-color: var(--rosa-sc);
width: 100%;
height: 0.7vh;

animation: h1before 1s;
animation-delay: 0.25s;
border-radius: 99vh;
position: absolute;
left: 0;
bottom: 0;
                
              }

@keyframes h1before {
  0%{
width: 0%;

  }

  100%{
width: 100%;

  }
}


.formulario{
display: block;
justify-content: center;
background: rgb(244,247,251);
background: linear-gradient(0deg, rgba(244,247,251,1) 72%, rgba(255,255,255,1) 100%);
height: 90vh;
position: relative;
z-index: 1;
}



.formventana{
background: white;
display: block;
padding: 4vh;
border-radius: 2vh;
width: 65vh;
margin: auto;
position: relative;
z-index: 12;
}



@keyframes scala-op {
  0%{
transform: scale(0.8);
opacity: 0;
  }

  75%{

    opacity: 1;
  }

  100%{
    transform: scale(1);

  }
}

@keyframes TOPFORM {
  0%{
    opacity: 0;
transform: translateX(-4rem);

  }

  100%{
    opacity: 1;
    transform: translateX(0rem);
  
  }
}


@keyframes BOTTOMFORM {
  0%{
    opacity: 0;
transform: translateX(4rem);

  }

  100%{
    opacity: 1;
    transform: translateX(0rem);
  
  }
}


@media only screen and (max-width: 1220px) {
.topform{
  transition: 0.2s;
  right: 10%;


}
}

.FORMCAGE{
position: relative;
animation: scala-op 0.4s;

}

.formcenter{
  z-index: 10;
display: block;
  width: 100%;
padding: 0vh;
padding-bottom: 5vh;
height: 80vh;
overflow: scroll;
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
}


txtrosa{


  color: var(--rosa-sc);
}


.letters txtrosa{


  color: var(--rosa-sc);
}
.titulo.login txtrosa{


  color: var(--azul-sc);
}

.hidden{

  display: none;
}

input.hidden{
display: none;
}

*.hidden{
  display: none;
  }
  

.titulo.login{

padding-right: 0vh;

}


.ml10{
position: relative;

}

.ml10 .text-wrapper {
  position: relative;
  display: block;
  text-wrap: nowrap;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.letters txtrosa{
color: var(--rosa-sc);


}

.ml10 .letters txtrosa .letter{

color: var(--rosa-sc);

}

.ml10 .letter {
  display: block;
  line-height: 1em;
  transform-origin: 0 0;
}

.titulo.login{
 flex-basis: 100%;

}

.formcenter::-webkit-scrollbar {
  display: none;
}



.contenedor-center{
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;

}

.loadingspan{
font-size: 1.8vh;
font-family: var(--fuente);
color: var(--azul-sc);
font-weight: 500;
padding-top: 2vh;

}

.contenedor-center h3{
font-weight: 500;

}

.contenedor-center h1{
  font-weight: 700;
  padding-top: 1vh;
  
  }


.contenedor-center .centrado{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.break{
  flex-basis: 100%;
  height: 0;

}



.formulario h2{
font-family: var(--fuente);
font-weight: 400;
font-size: 2vh;
margin-top: 1.5vh;
text-align: center;
color: var(--azul-sc);

}

input[type=text] {
  border: none;
  display: block;
  font-family: var(--fuente);
  font-weight: 500;
  font-size: 1.7vh;
  border-radius: 1.2vh;
  box-shadow: none;
  width: 88%;
  height: 2.8vh;
  border: 0.21164021164021163vh solid transparent;
  transition: 0.18s;
  margin-bottom: 3vh;
  outline: 0.3vh solid transparent;
  color: var(--azul-sc);
  background: #38496711;
  background-image: url(recursos/flecha.svg);
  background-position: 4% 50%;
  background-repeat: no-repeat;
  background-size: 4%;
  padding: 1.2vh;
padding-left: 7vh;
padding-right: 0vh;
}



.mensaje svg{
width: 7.2vh;
color: #e05074;
stroke: var(--azul-sc);
height: 7.2vh;
margin-bottom: 3vh;
display: block;
text-align: left;
}

.mensaje.normal{

  background-color: var(--rosa-sc);

}

.mensaje{
background-color: rgba(255, 255, 255, 0.644);
backdrop-filter: blur(2vh);
font-family: var(--fuente);
z-index: 99999999999999999999999999;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100%;
height: 100%;

}

.mensaje.hidden{

display: none;

}

.mensaje .msg_contenido{
  transition: 0.4s;
background-color: white;
padding: 4vh;
animation: popup 0.7s;
z-index: -1;
border-radius: 1.5vh;
color: var(--azul-sc);
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
width: 55vh;

mask-repeat: no-repeat;
}

.mensaje.salida .msg_contenido{
transition: 0.3s;
transform-origin: center center;
  scale: 0.8;
  mask-repeat: no-repeat;

  opacity: 0;


}

.mensaje.salida{
  transition: 0.4s;

  background: transparent;
  backdrop-filter: blur(0vh);

}

@keyframes popup{
0%{
  scale: 0.8;
  mask-repeat: no-repeat;
  transform-origin: center bottom;
  mask-image: url('recursos/ANIM_MASK.svg');
  mask-size: 0% 0%;
  opacity: 0;


}

30%{
  scale: 0.8;
  opacity: 1;
  transform-origin: center bottom;
  mask-image: url('recursos/ANIM_MASK.svg');
  mask-size: 0% 0%;

}
100%{
  transform-origin: center bottom;
  scale: 1;
  mask-image: url('recursos/ANIM_MASK.svg');
mask-size: 300% 300%;
box-shadow: rgba(0, 0, 0, 0.0) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
mask-position: bottom center;
border: 1px solid #d4d4d4;
}



}

.mensaje.error .msg_contenido{
background: #420101;
color: white;

}

.msg_contenido .content{

font-weight: 500;
display: flex;
font-size: 1.9vh;
padding-bottom: 6vh;

}

.msg_contenido .botones{
display: flex;
width: 100%;
justify-content: right;
align-items: center;
color: var(--azul-sc);


}

.msg_contenido .botones button{
  transition: 0.2s;
  position: relative;
padding: 1vh;
z-index: 9;
width: 15vh;
border-radius: 1.5vh;
margin-left: 2vh;
overflow: hidden;
font-size: 1.75vh;
font-weight: 500;
font-family: var(--fuente);
border: none;
outline: none;
background: #38496717;
}
.msg_contenido .botones button:hover{
color: white;
cursor: pointer;
}

.msg_contenido .botones button::before{
  transition: 0.2s;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 7;
background: var(--azul-sc);
z-index: -1;
mask-image: url('recursos/ANIM_MASK.svg');
mask-size: 100% 100%;
scale: 1;
transform: translateY(60%);
transform-origin: center bottom;
mask-position: top left;
}

.msg_contenido .botones button:hover::before{
transition: 0.2s;
scale: 8.5;
mask-size: 100% 100%;
transform: translateY(0%);
transform-origin: center bottom;
}






.formulario select{
  transition: 0.15s;
  appearance: none;
      display: block;
      position: relative;
      font-family: var(--fuente);
      font-weight: 500;
      font-size: 1.7vh;
      border-radius: 1.5vh;
      background-color: transparent;
      box-shadow: 0px 0.2rem 0.3rem 0px rgba(56,73,103,0.2);
      width: 99.2%;
      border: 0.21164021164021163vh solid var(--azul-sc);
      transition: 0.18s;
      margin-bottom: 3vh;
      outline: 0.3vh solid transparent;
      background-image: url(recursos/select.svg);
      background-position: 96% 50%;
      background-repeat: no-repeat;
      background-size: 3%;
      padding: 1.3vh;
      color: var(--azul-sc);
      cursor: pointer;
      padding-left: 1.75VH;
      padding-top: 1.75vh;
      padding-bottom: 1.75vh;
      accent-color: var(--azul-sc);
      
      line-height: inherit;
  }

  .formulario select:focus{
    transition: 0.15s;
    background-image: url(recursos/desplegable_ap.svg);
    background-position: 96% 50%;
    background-repeat: no-repeat;

  }

 .formulario select *{
  font-family: var(--fuente);
  border: 0.21164021164021163vh solid var(--azul-sc);
 }

 .formulario select *:hover{
background: var(--azul-sc);
accent-color: var(--azul-sc);
 }



:root {
  --select-border: #777;
  --select-focus: rgb(63, 63, 102);
  --select-arrow: var(--select-border);
}



input[type=text]:focus{
  transition: 0.18s;
  color: var(--azul-sc);
  background-color: white;
  border: 0.21164021164021163vh solid transparent;
  box-shadow: 0px 0rem 0rem 0px rgba(56,73,103,0.2);
outline: 0.3vh solid var(--rosa-sc);
}



.enpositivo{
font-weight: 600;
color: var(--rosa-sc);

}

/* email */
input[type=email] {
  border: none;
  display: block;
  font-family: var(--fuente);
  font-weight: 500;
  font-size: 1.8vh;
  border-radius: 1.5vh;

  width: 88%;
  height: 2.8vh;
  transition: 0.18s;
 border: 0.21164021164021163vh solid transparent;
  margin-bottom: 3vh;
  outline: 0.3vh solid transparent;
  color: var(--azul-sc);
  background: #38496711;
  box-shadow: none;
  background-image: url(recursos/mail.svg);
  background-position: 4% 50%;
  background-size: 4%;
  background-repeat: no-repeat;
  padding: 1.2vh;
  padding-left: 7vh;
  padding-right: 0vh;
  }

input[type=email]:focus{
    transition: 0.18s;
    color: var(--azul-sc);
    border: 0.21164021164021163vh solid transparent;
    box-shadow: none;
    background-color: white;
  outline: 0.3vh solid var(--rosa-sc);
  }
  /* number */
input[type=number] {
    border: none;
    display: block;
    font-family: var(--fuente);
    font-weight: 500;
    font-size: 1.7vh;
    border-radius: 1.5vh;
    
    width: 88%;
    height: 2.8vh;
    transition: 0.18s;
   border: 0.21164021164021163vh solid transparent;
    margin-bottom: 3vh;
    outline: 0.3vh solid transparent;
    color: var(--azul-sc);
    background: #38496711;
    box-shadow: none;
    background-image: url(recursos/number.svg);
    background-position: 4% 50%;
    background-size: 4%;
    background-repeat: no-repeat;
    padding: 1.3vh;
    padding-left: 7vh;
    padding-right: 0vh;
    }
 
    input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}
input[type=number]:focus{
  transition: 0.18s;
  color: var(--azul-sc);
  border: 0.21164021164021163vh solid transparent;
  box-shadow: 0px 0rem 0rem 0px rgba(56,73,103,0.2);
outline: 0.3vh solid var(--rosa-sc);
}


    /* password */
input[type=password] {
      border: none;
      display: block;
      font-family: var(--fuente);
      font-weight: 500;
      font-size: 1.7vh;
      border-radius: 1.5vh;
      box-shadow: none;
      width: 88%;
      height: 2.8vh;
      border: 0.21164021164021163vh solid transparent;
      transition: 0.18s;
      margin-bottom: 3vh;
      outline: 0.3vh solid transparent;
      color: var(--azul-sc);
      background: #38496711;
      background-image: url(recursos/password.svg);
      background-position: 4% 50%;
      background-repeat: no-repeat;
      background-size: 4%;
      padding: 1.2vh;
  padding-left: 7vh;
  padding-right: 0vh;
      }
input[type=password]:focus{
        transition: 0.18s;
        color: var(--azul-sc);
        border: 0.21164021164021163vh solid transparent;
        background-color: white;
      outline: 0.3vh solid var(--rosa-sc);
      }

.recuadro .textlabel{
font-weight: 700;
padding: 1.5vh;
color: #384967;
position: relative;
display: flex;
align-items: center;
font-size: 2.5vh;
}

.logomini{
width: 30vh;
display: block;
margin: auto;
justify-content: center;
align-items: center;
margin: auto;
margin-bottom: 2.5rem;
margin-top: 2vh;
}

.recuadro .textlabel::before{
content: '';
width: 1.8vh;
height: 1.8vh;
margin-right: 1.2vh;
background: #e05074;
border-radius: 99vh;
left: 0;
}

.recuadro{

  border: none;
  margin-bottom: 2.5vh;
}

.silog{
  display: flex;
 transition: 0.15s;
  border-radius: 1.25vh;
  margin-right: 2vh;
  font-family: var(--fuente);
  padding: 1vh;
  cursor: pointer;
                      }


                      .silog.sesioncerrada{

display: none;

                      }

                      .nolog.sesionabierta{

                        display: none;
             
                        
                                              }

                    .nolog.sesioncerrada{

                      display: flex;

                    }                          

                      .silog:hover{
                        background: rgba(244,247,251,0.75);
                        transition: 0.15s;

                      }

                      .silog .fdp{
display: flex;
width: 3rem;
margin-right: 2vh;


                      }

                      .silog h2{
font-size: 2.4vh;
color: var(--azul-sc);


                      }


                      .silog .cuentasubinfo{
                        font-size: 2vh;
                        color: var(--azul-sc);

                      }

                      .silog .flechader{
                        width: 5.5vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      }
                      .silog .flechader .arrow{
                        transition: 0.15s;
                        width: 1.25vh;
                        height: 1.25vh;
                        transform: rotate(45deg);
                       border-top: 0.24vh solid var(--azul-sc);
                       border-right: 0.24vh solid var(--azul-sc);
                   
                      }

                      .silog:hover .flechader .arrow{
                        transition: 0.15s;
                        transform: translateX(0.25rem) rotate(45deg);

                      } 





.checkcont{
display: flex;
height: 2.75vh;
padding-left: 3.5vh;
align-items: center;
margin-bottom: 1.75vh;
z-index: 15;
font-size: 1.7vh;
position: relative;
}

.checkcont:last-child{

  margin-bottom: 0vh;
}

.checkmark {
  transition: 0.15s;
  position: absolute;
  top: 0;
  left: 0;
  height: 2.75vh;
  width: 2.75vh;
  background-color: #38496725;
  border-radius: 99vh;
}


.checkcont input {
  position: absolute;
  opacity: 1;
  cursor: pointer;
  height: 100%;
  opacity: 0;
  width: 100%;
}

.checkcont:hover{
cursor: pointer;

}

.checkcont:hover input ~ .checkmark {
  background-color: #38496744;
  transition: 0.15s;
}

.checkcont input:checked ~ .checkmark:after {
  display: block;
  transition: 0.15s;
}

.checkmark:after{
content: '';
display: none;
position: absolute;
top: 0;
left: 0;
height: 2.75vh;
width: 2.75vh;
background-color: #e05074;
border-radius: 99vh;

}

.checkcont::before{
content: '';
width: 0%;
position: absolute;
border-radius: 99vh;
height: 100%;
background-color: #384967;
z-index: -1;
}


.namelabel{
font-size: 1.7vh;
padding-bottom: 0.8rem;
color: var(--azul-sc);
font-weight: 500;
font-family: var(--quicksand);
font-weight: 600;
  position: relative;
}



.formleft span{
display: block;
background-color: var(--azul-sc);
width: 90%;
height: 6vh;
margin-bottom: 5.5vh;  
border-top-right-radius: 99vh;
border-bottom-right-radius: 99vh;
}

.formright span{
  display: block;
  background-color: var(--azul-sc);
  width: 90%;
  height: 6vh;
  margin-bottom: 5.5vh;  
  border-top-left-radius: 99vh;
  border-bottom-left-radius: 99vh;
  }

.derecha{
animation: entradader 0.75s;
}

@keyframes entradader {
  0%{
   opacity: 0;
  }

  100%{
    opacity: 1;

  }
}

.derecha .rosa1{
 position: absolute;
width: 60vh;
border-radius: 99vh;
filter: blur(11vh);
height: 60vh;
background: var(--rosa-sc);
margin-left: auto;
top: 50%;
transform: translateY(-50%);
margin-right: auto;
right: 10%;
text-align: center;

animation: rotate1 7s linear infinite;
}

.derecha .rosa2{
  position: absolute;
 width: 60vh;
 border-radius: 99vh;
 filter: blur(11vh);
 height: 60vh;
 background: var(--azul-sc);
 margin-left: auto;
 top: 50%;
 transform: translateY(-50%);
 margin-right: auto;
 right: 10%;
 text-align: center;
 
 animation: rotate2 7s linear infinite;

}



.derecha .azul3{
  position: absolute;
 width: 60vh;
 border-radius: 99vh;
 filter: blur(12vh);
 height: 60vh;
 background: var(--azul-sc);
 margin-left: auto;
 top: 70%;
 transform: translateY(-50%);
 margin-right: auto;
 right: 5%;
 text-align: center;
 z-index: -1;
 animation: rotate1 10s linear infinite;

 }


 .izquierda #movil{
display: none;

 }
 
 .formulario #loginform{
    align-items: center;
   justify-content: center;
   }
 
 
.derecha .azul1{
  position: absolute;
 width: 50vh;
 border-radius: 99vh;
 filter: blur(11vh);
 height: 50vh;
 background: #ff42719a;
 margin-left: auto;
 top: 55%;
 transform: translateY(-50%);
 margin-right: auto;
 right: 5%;
 text-align: center;
 
 animation: rotate3 9s linear infinite;

 }

  
.derecha .azul2{
  position: absolute;
 width:80vh;
 border-radius: 99vh;
 filter: blur(9.5vh);
 height: 80vh;
 background: #7a05324b;
 margin-left: auto;
 top: 50%;
 transform: translateY(-50%);
 margin-right: auto;
 right: 5%;
 text-align: center;
 z-index: -1;


 }


@keyframes rotate1 {
  from{
    transform: rotate(0deg);
    transform-origin: top center;
  }
  to{
transform: rotate(360deg);
transform-origin: top center;
  }
}

@keyframes rotate2 {
  from{
    transform: rotate(360deg);
    transform-origin: top right;
  }
  to{
transform: rotate(0deg);
transform-origin: top right;
  }
}

@keyframes rotate3 {
  from{
    transform: rotate(0deg);
    transform-origin: top right;
  }
  to{
transform: rotate(360deg);
transform-origin: top right;
  }
}





      @keyframes animspanleft {
        from{
transform: translateX(-100%);

        }

        to{
          transform: translateX(0%);

        }
      }
      
      @keyframes animspanright {
        from{
transform: translateX(100%);

        }

        to{
          transform: translateX(0%);

        }
      }
      

.recuadro{
  transition: 0.2s;
  font-family: var(--quicksand);

}
   .recuadro a{
       display: none;
        }

        .recuadro .selector{
          transition: 0.2s;
         
          color: var(--azul-sc);
          border-radius: 1.5vh;
          cursor: pointer;
          margin-bottom: 1.25vh;
          font-weight: 500;
          font-family: var(--quicksand);
         padding-left: 4vh;
          position: relative;
          height: 6vh;
          align-items: center;
          display: flex;
          border: 0.21164021164021163vh solid transparent;
        }

        .recuadro .selector::before{
          content: '';
          position: absolute;
          width: 1.5vh;
          background-image: url(recursos/check.svg);
          background-size: 0%;
          height: 1.5vh;
          margin-left: -2.75vmin;
          border-radius: 0.4vh;
          background: transparent;
          border: 0.21164021164021163vh solid var(--azul-sc);
        }



        .recuadro .selector:hover{

      
          box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
          font-weight: 600;
          display: flex;
        }

        .recuadro .selector.selected::before{
          transition: 0.2s;
       background: var(--azul-sc);
       background-image: url(recursos/check.svg);
       background-size: 70%;
       background-repeat: no-repeat;
       background-position: center center;


        }

   
        
        .recuadro .selector.notselected{
          transition: 0.2s;
          height: 0vh;
          opacity: 0;
          margin: 0vh;
          padding-left: 2vh;
          overflow: hidden;

        }

        .recuadro .selector.selected{
          border: 0.21164021164021163vh solid var(--azul-sc);
          border-radius: 1.5vh;
          font-weight: 600;
          box-shadow: 0px 0.2rem 0.3rem 0px rgba(56,73,103,0.2);

        }

        .recuadro .selector.selected:hover{

          box-shadow: 0px 0.2rem 0.3rem 0px rgba(56,73,103,0.2);
        }



        .recuadro.yesno.vsi #vsi::before{
background: white;
        }

        .recuadro.yesno.vno #vsi{
          transition: 0.2s;
          height: 0vh;
          padding: 0vh;
          padding-left: 2vh;
          overflow: hidden;

        }

        .recuadro.yesno.vno #vno{
          transition: 0.2s;
          color: white;
          background: var(--azul-sc);

        }

        .recuadro.yesno.vno #vno::before{
          background: white;
                  }


                  .misionvision{


                    background: var(--color-bg);
                    position: relative;
                    justify-content: center;
                    align-items: center;
                    color: var(--azul-sc);
                    font-family: var(--fuente);
                    display: flex;

                  }

                  .misionvision .titulo{
                    font-size: 3.5vh;
                    padding-bottom: 0.75vh;
                    font-weight: 650;
                    text-align: left;
                    width: 100%;
                  }

                  .misionvision .info{
                    font-size: 1.7vh;
                  text-wrap: wrap;
                   text-align: left;
                  width: 100%;
                    font-weight: 500;

                  }
                  .misionvision .tab{
                    flex: 1;
                    padding: 3vh;
                    overflow: hidden;
                    padding-right: 7vh;
                    padding-left: 7vh;
                    padding-bottom: 4.5vh;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    margin: 3.1vh;
                    color: #384967;
                    height: 28vh;
                    background: #38496711;
                    background: linear-gradient(0deg, #38496703 0%, #38496711 56%);
                    border-radius: 1.75vh;
                                      }
                           
                                  

                  .misionvision .icon{
width: 15vh;
height: 15vh;

padding: 1.6vh;

                  }
      



.colaboradores{
  display: flex;
  mask-size: cover;
  mask-position: 0vh 3vh;
  width: 100%;
 background: transparent;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  }
  
  .bgg{
  
    position: relative;
    background: transparent;
  }
  
  
  .colaboradores .imagenes{
width: 100%;
  display: flex;
  
  overflow: hidden;
  }

  .colaboradores_movil{
display: none;

  }

  .colaboradores_pc{
    display: block;
    
      }

  .colaboradores .imagenes img{
  width: 9vh;
  flex: 1;
  margin: 1vh;
  padding: 2vh;
  border-radius: 1vh;
  margin-right: 5.5vh;

  }


  
 


  
  @keyframes scroll{
    0%{
      transform: translateX(40%);
    opacity: 1;
    }

    0.000001%{
      transform: translateX(-10%);
      opacity: 1
    }
  
  99.9999999%{
    transform: translateX(40%);
    opacity: 1;
  }

  100%{

    transform: translateX(40%);
    opacity: 1;
  }

  
  }

  .dondeestamos{
    display: flex;
    align-items: center;
    margin-bottom: 5vh;
    margin-top: 5vh;
  }
.contenido{
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.mapaanim{

  overflow: hidden;
  width: 60vh;
  mask-image: url(recursos/mapamask.svg);
  mask-repeat: no-repeat;
  mask-size: cover;

}

  .mapaanim img{
    width: 200vh;
   
    animation: mundo 12s linear infinite;
    overflow: hidden;
  }

  @keyframes mundo {
    0%{
transform: translateX(-50%);

    }
    100%{
      transform: translateX(0%);

    }
  }

  .carrusel{

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

  }
  #leftflecha:active{
    transform-origin: right center;
    transform: scale(1.1);
    transform: translateX(-10%);
    
      }

      #rightflecha:active{
        transform-origin: left center;
        transform: scale(1.1);
        transform: translateX(10%);
        
          }
    

  .carrusel-contenido{

    padding: 5.5vh;
    font-family: var(--fuente);
    font-size: 2vh;
    justify-content: center;
    text-align: center;
    border-radius: 2vh;
    margin-left: 2.5vh;
    margin-right: 2.5vh;
  }

  .carrusel-contenido .info{
color: var(--azul-sc);
font-weight: 500;
line-height: 3vh;
margin-bottom: 2vh;

  }

  .carrusel-contenido img{
width: 80%;

  }

  .contenido h1{

font-family: var(--fuente);
font-weight: 300;
font-size: 5.5vh;
margin-bottom: 2vh;
color: var(--azul-sc);

  }

  .contenido .logo{
margin-bottom: 3.5vh;

  }

  .flecha::before{
    transition: 0.2s;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    z-index: -1;
    background: var(--azul-sc);
    z-index: -1;
    mask-image: url('recursos/ANIM_MASK.svg');
    mask-size: 100% 100%;
    scale: 1;
    transform: translateY(61%);
    transform-origin: center bottom;
    mask-position: top left;
  }
  
  .flecha:hover::before{
    transition: 0.25s;
    scale: 8.5;
    mask-size: 100% 100%;
    transform: translateY(18%);
    transform-origin: center bottom;
  }

  .carrusel-contenido .btn{
margin-left: 30%;
margin-top: 2;
border-radius: 99vh;

  }

  .asociate.sesionabierta{
display: none;

  }


  .cuentacenter{
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    height: 90.7vh;
    padding: 0vh;
  }

  .cuentacenter .content.noborder{
    transition-duration: 0.18s;
    transition-property: height;
border: none;
height: auto;
margin-left: 5vw;

  }

  .cuentacenter hr{
opacity: 0;
margin: 0.5vh;

  }

  .cuentacenter panel{
    
  transition-duration: 0.2s;

  overflow: hidden;
background: #38496711;
display: block;
position: relative;
border-radius: 1.5vh;
cursor: pointer;
padding-top: 1.75vh;
padding-bottom: 1.75vh;
margin-top: 1.8vh;
  }


  .content.backactive panel{

  transition-duration: 0.2s;
  transform: translateX(-8vh);
    opacity: 0;

  }

.panelcontent{
overflow: hidden;

}

.panel_contenido{
  transition-duration: 0.2s;
display: block;
height: 0vh;
overflow: hidden;
opacity: 0;
transform: translateX(12vh);
}

.panel_contenido.active{

  display: block;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0vh);
  }


 .cuentacenter .btn.back{
  transition-duration: 0.18s;
  height: 0vh;
  transition-delay: 0.2s;
  opacity: 0;
  padding: 0;
  overflow-x: visible;
background: transparent;
color: var(--azul-sc);
border-radius: 0vh;
padding-left: 0vh;
  }
  .cuentacenter .btn.back img{

    transition-duration: 0.16s;
    transform: translateX(0vw) scale(1);
  }


  .cuentacenter .btn.back:hover img{

    transition-duration: 0.16s;
    transform: translateX(-0.2vw) scale(0.92);
  }

  .content.backactive .btn.back{
    transition-duration: 0.18s;
    transition-delay: 0.4s;
    opacity: 1;
height: 6vh;

  }


  .cuentacenter .btn.back::before{
display: none;
  }

  .cuentacenter panel h3{

    color: var(--azul-sc);
    font-family: 1.65vh;
    margin-left: 3.75vw;
    font-family: var(--fuente);
    font-weight: 510;
  }

  .cuentacenter panel h4{

    color: #384967af;
    font-family: var(--fuente);
    font-weight: 510;
    font-family: 1.65vh;
    margin-left: 3.75vw;
  }



  .cuentacenter panel img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75vw;
    left: 1VW;
  } 

  .cuentacenter panel:hover{
    background: #38496707;

  }

  .cuentacenter .namelabel{
      font-family: var(--fuente);
      color: #0e121b;
      display: block;
      font-size: 1.75vh;
      padding-bottom: 1vh;
  }

  .cuentacenter h1{
font-family: var(--fuente);
font-size: 3.25vh;
margin-bottom: 2vh;
color: var(--azul-sc);
font-weight: 650;
  }


  .cuentacenter .top{
display: block;
position: relative;
flex-wrap: wrap;
margin-bottom: 2rem;
align-items: center;
background: white;
padding: 1.75vh;
padding-left: 1.5vh;
padding-bottom: 1.75vh;
padding-top: 0vh;
border-radius: 1.5vh;
border-top-left-radius: 0vh;
border-top-right-radius: 0vh;
font-family: var(--fuente);
  }

  .cuentacenter .cuentasubinfo{
    display: block;
    margin-bottom: 3.85vh;
    font-weight: 520;
    color: var(--azul-sc);
    font-family: var(--fuente);
  }

  .cuentacenter .top .cuentatxt{
display: block;
color: var(--azul-sc);
margin-left: 2.6vh;
flex: 1;

  }


  .cuentacenter .content{
display: block;
max-width: 31vw;
border-right: 1px solid rgba(0, 0, 0, 0.219);
width: 100%;
padding-right: 4.5vw;

  }

  .cuentacenter .top h2{

    font-size: 2.4vh;
  }

  .cuentacenter .top .cuentasubinfo{

    font-size: 1.9vh;
  }

  .cuentacenter input{
    transition-duration: 0.16s;
    color: var(--azul-sc);
background: #38496711;
border: 0.21164021164021163vh solid transparent;
border-radius: 0.9vh;
box-shadow: none;
width: 90%;
background-image: url(recursos/editar.svg);
background-repeat: no-repeat;
background-position: 135% 45%;
background-size: 47% 47%;
padding: 0.85vh;
  }

  .cuentacenter input:focus{
    transition-duration: 0.2s;
    background-position: 208% 45%;
    background-color: white;
  }

  .cuentacenter .bottom{
display: flex;
justify-content: left;
align-items: center;

  }

  .cuentacenter .btn.rojo{
background: #a80000;
margin-top: 1.75vh;
border-radius: 99vh;
font-weight: 505;
padding-left: 3vh;
padding-right: 3vh;
width: auto;
  }

  .cuentacenter .btn{
    background: #093581;
    margin-top: 1.75vh;
    border-radius: 99vh;
    font-weight: 505;
    padding-left: 3vh;
    padding-right: 3vh;
    width: auto;
      }

  .btn.rojo::before{
    background: #4b0000;

  }

  .btn.rojo img{
width: 1.55rem;


  }

.cuentainfo .corona{
display: none;

}

.cuentamobile{
display: none;

}

.cuentainfo{
display: flex;
justify-content: left;
align-items: center;

}

.top .cuentainfo{
margin-top: 1.25vh;

}
  
  .cuentainfo.si .corona{
display: flex;
width: 1.2vh;
padding: 0.7vh;
border-radius: 99vh;
margin-left: 1.2vh;
background: rgb(240, 172, 0);
  }

  .dobleventana{
display: flex;
background: var(--color-bg);
height: 86vh;
  }


  .dobleventana .ventanaizq{
flex-basis: 62%;
padding: 3.4vmin;
background: var(--color-bg);
margin: 0vmin;
overflow: hidden;
margin-left: 5vmin;
margin-bottom: 5vmin;
  }


  .dobleventana .ventanader{
display: block;
flex: 1;
overflow: hidden;
padding: 3.4vmin;
background:#f4f8fc8a;
margin: 5vmin;
margin-top: 0vh;
position: relative;
border-radius: 1.5vh;
  }

  .dobleventana .ventanader titulo{
display: block;
font-size: 3.5vh;
font-family: newjunebold;
color: var(--azul-sc);


  }

  .dobleventana .ventanaizq titulo{
    display: block;
    position: relative;
    padding-left: 2.2vw;
    font-size: 3.5vh;
    font-family: newjunebold;
    color: var(--azul-sc);
    animation: precio 0.3s;
      }

      .dobleventana.formulario .ventanader{
        display: block;
        margin: 0;
        background: white;
        padding: 0;
        width: 100%;
        height: 100vh;
        border-radius: 0vh;
        object-fit: fill;
      }

      .dobleventana.formulario{
        border-radius: 0vh; 
        height: 100vh;
        padding: 0;
        margin: 0;
        width: 100%;
        object-fit: fill;
        
      }

      .dobleventana.formulario subtitulo{
        font-size: 2vh;
        margin-left: 2.75vh;
      }

      .dobleventana.formulario .card-element{
        margin-left: 2.5vh;
        margin-right: 2.5vh;
        margin-top: 0vh;

      }


      .dobleventana.formulario .portada{
        width: 21%;
        margin-top: 2vh;
        padding-top: 0vh;


      }

      .dobleventana.formulario datosbanco img{
        width: 26%;

      }

      .dobleventana.formulario .namelabel.info{
        font-size: 2vh;
      
    }
      
      .dobleventana.formulario subtitulo::before{
        width: 3vh;
        top: 50%;
        transform: translateY(-50%);
      }

      .dobleventana.formulario .paymentmethod div{
        margin-left: 2.5vh;

      }

      .dobleventana.formulario  .namelabel.bigger{

        font-size: 1.8vh;
        font-family: var(--fuente);
        margin-bottom: 0vh;
        padding-bottom: 0vh;
        align-self: center;
          }

          .dobleventana.formulario .paymentmethod img{
            width:2.7vh;
            margin-left: 1vh;

          }



      .ventanader .portada.grande{
        width: 28vh;
        display: block;
        margin: auto;
        padding-top: 5vh;
        padding-bottom: 5vh;


      }


      .ventanaizq titulo::before{
        content: '';
        width: 3vmin;
        top:21%;
        left: 0;
    
        height: 3vmin;
        background: url(recursos/flecha.svg);
        background-repeat: no-repeat;
        position: absolute;
      }

     .ventanader totalmobile{


        display: none;
      }


      .paymentmethod #mobile{

        display: none;
        
              }

  .dobleventana subtitulo{
font-family: var(--fuente);
font-weight: 600;
color: var(--azul-sc);
display: block;
width: 100%;
padding-left: 3.5vmin;
text-align: left;
margin-top: 4.5vmin;
margin-bottom: 2vmin;
position: relative;
font-size: 2.2vmin;
  }

  .dobleventana subtitulo::before{
    content: '';
    width: 2vmin;
    top:20%;
    left: 0;

    height: 2vmin;
    background: url(recursos/flecha.svg);
    background-repeat: no-repeat;
    position: absolute;
  }


  



.paymentmethod {
display: block;

overflow: hidden;
}

.ventanader form{


  padding-top: 1.5vh;
}

  .paymentmethod opcion{
width: 2.1vh;
height: 2.1vh;
border: 0.3vh solid var(--azul-sc);
border-radius: 99VH;
margin-right: 0.8vw;
  }
  
.paymentmethod .credit{
  transition: 0.16s;
  cursor: pointer;
  position: relative;
  margin-right: 3vmin;
  font-size: 1.7vh;
  padding: 0.5vh;
display: block;
display: flex;
justify-content: left;
font-family: var(--fuente);
width: 80%;
align-items: center;
  margin-bottom: 1vh;
  }


  .paymentmethod .credit opcion{

position: relative;
  }

  .nolog flotante{

    display: none;
  }


  .paymentmethod .credit img{
    width: 1.25vw;
    margin-right: 1vh;
    margin-bottom: 0vh;
    padding-bottom: 0vh;
  }


  .paymentmethod .credit:hover opcion{
    transition: 0.16s;
    position: relative;
    border: 0.3vh solid var(--rosa-sc);

  }

  .paymentmethod  opcion::before{
    content: '';
    transition: 0.1s;
    opacity: 0;
    width: 1.7vh;
height: 1.7vh;
transform: scale(0.4);
background: var(--azul-sc);
border-radius: 99vh;
position: absolute;
top: 0.2vh;
left: 0.2vh;
  }

  .paymentmethod .sepa  opcion{

position: relative;

  }
  
  .paymentmethod .sepa  opcion::before{
    content: '';
    transition: 0.1s;
    opacity: 0;
    width: 1.7vh;
height: 1.7vh;
transform: scale(0.4);
background: var(--azul-sc);
border-radius: 99vh;
position: absolute;
top: 0.2vh;
left: 0.2vh;
  }

   
  .paymentmethod.sepa .sepa opcion::before{
    transition: 0.1s;
    transform: scale(1);
    opacity: 1;
  }

  .pagoselected.sepa .transferenciacont{

display: block;

animation: entradapagoselected 0.4s;

  }

  .pagoselected .transferenciacont{
display: none;
  
  }

  .paymentmethod .credit opcion::before{
    content: '';
    transition: 0.1s;
    opacity: 0;
    width: 1.7vh;
height: 1.7vh;
transform: scale(0.4);
background: var(--azul-sc);
border-radius: 99vh;
position: absolute;
top: 0.2vh;
left: 0.2vh;
  }


  .paymentmethod.credit .credit opcion::before{
    transition: 0.1s;
    transform: scale(1);
    opacity: 1;
  }

  .paymentmethod.credit .credit:hover opcion::before{
    transition: 0.1s;
    background: var(--rosa-sc);
  }



  .paymentmethod .paypal{
    transition: 0.16s;
    cursor: pointer;
    position: relative;
    margin-right: 3vmin;
    font-size: 1.7vh;
    padding: 0.5vh;
  display: flex;
  justify-content: left;
  font-family: var(--fuente);
  width: 80%;
  font-weight: 700;
  align-items: center;
    margin-bottom: 1vh;
    }

  
    .paymentmethod .paypal img{
      width: 1.9vw;
      height: 1.9vh;
      transform: translateX(-0.9vh);
      margin: 0VH;
      margin-bottom: 0vh;
padding: 0VH;
    }
  
    .paymentmethod .paypal:hover opcion{
      transition: 0.16s;
      border: 0.3vh solid var(--rosa-sc);
  
    }
  


    .paymentmethod .sepa{
      transition: 0.16s;
      cursor: pointer;
      position: relative;
      margin-right: 3vmin;
      font-size: 1.7vh;
      padding: 0.5vh;
    display: block;
    display: flex;
    justify-content: left;
    font-family: var(--fuente);
    width: 80%;
    align-items: center;
      margin-bottom: 1vh;
      }
    
    
    
      .paymentmethod .sepa img{
        width: 1.45vw;
        margin-right: 1vh;
        margin-bottom: 0vh;
        padding-bottom: 0vh;
      }
    
      .paymentmethod .sepa:hover opcion{
        transition: 0.16s;
        border: 0.3vh solid var(--rosa-sc);
    
      }


  .pagoselected .smallformtext{
    padding: 1vh;
    margin-bottom: 1vh;


  }


  .pagoselected.sepa .tarjeta{
display: none;

  }

  
  .pagoselected .tarjeta{


    display: none;
  }


  .caducidad {
  display: flex;
    flex-basis:20%;
  
  }

  .caducidad input{
margin: 0;
  }

  .dobleinput{
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: 0vh;
    display: flex;
    align-items: center;
  }


  .dobleinput  input{


    margin-top: 0;
    margin-bottom: 0;
  }

  .dobleinput .cadcont{
display: block;
margin-right: 50%;

  }

  .smallformtext.CVC{
display: flex;
margin-right: 1.2vh;
  }

    

  .paymentmethod img{
width: 30%;
display: block;
margin-bottom: 1vh;

  }

 
  .pagoselected .btn.submit{
    transition: 0.16s;
display: flex;
border-radius: 99vh;
font-weight: 510;
justify-self: center;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: max-content;
position: absolute;
bottom: 1vh;
animation: btnsubmit 0.55s;
width: 96.5%;
margin-right: 1vh;
margin-left: 1vh;
left: 0;
  }

  .pagoselected.credit .tarjeta{

display: block;

  }

  @keyframes btnsubmit {

    0%{
opacity: 0;
transform: translateY(1.5vh);
    }

    80%{
      opacity: 0;
      transform: translateY(1.5vh);
    }
    100%{
      transform: translateY(0vh);
      opacity: 1;
    }
    
  }


      .dobleventana .namelabel{
      font-size: 1.8vmin;
      font-weight: 700;
   
      }
      .namelabel.bigger{

        font-size: 1.84vmin;
        font-family: var(--fuente);
        margin-bottom: 0vh;
        padding-bottom: 0vh;
        align-self: center;
          }

datosbanco{
display: block;
text-align: center;
}

datosbanco img{
display: block;
width: 30vh;

margin: auto;
margin-top: 5.5vh;
margin-bottom: 3vh;
}


          .namelabel.info{
display: block;
margin: auto;
background: rgba(0, 0, 0, 0.026);
margin-bottom: 0.85vh;
background-repeat: no-repeat;
text-align: center;
padding: 1vh;
border-radius: 1vh;

          }
      .dobleventana input{

        padding: 1.15vmin;
        width: 94%;
        margin-top: 0.75vmin;
        background: var(--color-bg);
        background-image: none;
      }


      #card-errors{
        transition: 0.3s;
       
      }

   .carderror{

    transition: 0.3s;
    filter: blur(1vh);
    display: flex;
    align-items: center;
    border-radius: 1.5vh;
    padding-left: 1.1vh;
    opacity: 0;
    font-family: var(--quicksand);
    font-weight: 600;
    color: #4b0000;
    box-shadow: 0px 0.2rem 0.3rem 0px rgba(105, 0, 0, 0.242);
    margin-bottom: 1.5vh;
    background: #b6010111;
    height: 0vh;
   }


   .carderror.erractive{
    transition: 0.3s;
opacity: 1;
filter: blur(0vh);
height: 4vh;

   }

      #card-element{
        transition: 0.3s;
        padding: 1vh;
      }
      #card-element *{
  transition: 0.3s;
font-family: var(--fuente);
      }

      #card-element-mobile{
        display: none;
        
                            }

  

      .InputElement{
        background: rebeccapurple;

      }

      .logo.logopago{
display: none;

      }


      .dobleventana .ventanader .content{
height: 92%;
overflow: hidden;
padding-left: 1VMIN;

      }

      .pagoselected .portada{

        display: block;
       
        width: 40%;
        margin: auto;
        margin-top: 5vh;
      }

      .btn.submit{
        transition: 0.16s;
        padding-top: 2vh;
        padding-bottom: 2vh;
        position: relative;
        border-radius: 1.5vh;
      }

      subtitform{
        display: none;

      }

      subtitulo-small{

font-family: var(--fuente);
color: #384967b9;
font-weight: 600;
font-size: 1.7vh;

      }

 
      .ventanader input{
        border: none;
        border-bottom: 0.3vh solid transparent;
        outline: none;
        padding: 0.9vh;
        font-weight: 600;
        background: transparent;
        border-radius: 0px;
        box-shadow: none;
        color: black;
        margin-bottom: 1.5vh;
        padding-left: 0vh;
      }

      .ventanader input:focus{
        color: black;
        border: none;
        outline: none;
        background: transparent;
        box-shadow: none;
        border-bottom: 0.3vh solid var(--azul-sc);
      }

      .btn.submit.cargando{
        transition: 0.16s;
    

      }

      .btn.submit.cargando span{
        transition: 0.16s;
        opacity: 0;

      }
      .btn.submit::after{
        content: '';
        transition: 0.16s;
        opacity: 0;
      }

      .btn.submit.cargando::after{
        transition: 0.16s;
        content: '';
        width: 2.7vh;
        height: 2.7vh;
        background: white;
        position: absolute;
        left: 48%;
        top: 26%;
        background: url('recursos/loading.svg');
        opacity: 1;
        background-size: cover;
        animation: loading linear infinite 0.7s;
      }
      .btn.submit.cargando::before{
        opacity: 0;
        display: none;

      }

      
      .btn.submit.cargando img{
        transition: 0.16s;
        opacity: 0;
        transform: translateX(150% );

      }


      .pagoselected .tarjeta{

        animation: entradapagoselected 0.4s;

      }

      pantalla-carga{
        position: fixed;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(244,247,251);
        width: 100%;
        height: 100vh;

      }

      pantalla-carga img{
        display: block;
        width: 27vh;
        margin-bottom: 3vh;

      }

      pantalla-carga centro{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
      }

      .center{

        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
      }

      pantalla-carga ventana{
        background: white;
        display: flex;
        max-width: 50vh;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-family: newjunebold;
        padding: 3.75vh;
        border-radius: 1.5vh;
        font-size: 2.5vh;
        color: var(--azul-sc);
      }

      ventana animacion{
        flex-wrap: wrap;
display: flex;
width: 50vh;

      }

      ventana titulo{

display: block;
flex-basis: 100%;
text-align: center;


      }

      cargahor{
        margin-top: 2vh;
        position: relative;
display: flex;
border-radius: 99vh;
width: 18vh;
overflow: hidden;
height: 0.75vh;

      }
      cargahor::before{
        content: '';
        position: absolute;
        width: 60%;
        left: 0;
        top: 0;
        border-radius: 99vh;
        background: var(--azul-sc);
        height: 100%;
     
        animation: cargahor 1.9s infinite;
      }



      producto{

display: flex;
margin-top: 5.5vh;

      }

      producto .izq{

flex-basis: 40%;

      }

      producto prtitulo{

display: block;
position: relative;
font-family: var(--fuente);
color: var(--azul-sc);
padding-left: 1vw;
font-weight: 700;
font-size: 3.75vh;
      }

      producto prtitulo::before{
content: '';
width: 0.8vh;
border-radius: 99vh;
height: 100%;
background: var(--rosa-sc);
position: absolute;
top: 0;
left: 0;
animation: prtitulobefore 0.6s;

      }


      @keyframes prtitulobefore {
        from{height: 0%;}
        to{height: 100%;}
      }


      producto prprecio{
        position: relative;
        margin-top: 3.5VH;
        display: block;
        font-family: var(--quicksand);
        color: white;
        width: max-content;
        font-weight: 500;
        font-size: 2.95vh;
        padding: 0.4vh;
        padding-left: 1.5vw;
        padding-right: 1.5vw;
        background: var(--azul-sc);
        margin-bottom: 9vh;
        border-radius: 99vh;
        animation: precio 0.5s;
      }

    

      producto prsubtitulo{
        font-family: var(--fuente);
        color: var(--azul-sc);
        font-size: 1.8vh;


      }

      hr{
margin-top: 3vh;
        background: rgb(56,73,103);
background: linear-gradient(90deg, rgba(56,73,103,0) 0%, rgba(56,73,103,0.5) 50%, rgba(56,73,103,0) 100%);
        height: 0.2vh;
        border: none;

      }

      .ml10 {
        position: relative;
      }
      
      .ml10 .text-wrapper {
        position: relative;
        display: inline-block;
        padding-top: 0.2em;
        padding-right: 0.05em;
        padding-bottom: 0.1em;
        overflow: hidden;
      }
      
      .ml10 .letter {
        display: inline-block;
        line-height: 1em;
        transform-origin: 0 0;
      }


      producto .der{
        border-radius: 1.75vh;
        display: flex;
        max-height: 60vh;
        flex: 1;
        overflow: hidden;
        margin-left: 5vh;
        mask-image: radial-gradient(circle at -5% 120%, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
      }

      producto .der img{
        animation: img 1.5s;
      height: 100%;
      position: relative;
      width: 100%;
      mask-image: linear-gradient(35deg, rgba(0,0,0,0) 5%, rgba(0,0,0,1) 100%);
      border-radius: 1.75vh;
      }

      .ml12 {
        letter-spacing: 0.08vh;
        text-wrap: wrap;
      }
      
      .ml12 .letter {
        line-height: 1em;
      }

      
      .ml13 {
        letter-spacing: 0.08vh;
        text-wrap: wrap;
      }
      
      .ml13 .letter {
        display: inline-block;
        line-height: 1em;
      }



.parteinf{
font-family: var(--fuente);
background: #0e121b;

}

.parteinf tab{
display: flex;
flex-wrap: nowrap;
margin-left: 3vw;
margin-right: 3vw;
}

.parteinf columna{
flex: 1;
color: white;
margin-top: 4vh;
margin-right: 0.75vh;
}

.parteinf columna h2{
font-size: 1.55vh;
font-weight: 400;
color: #ffffff5d;
margin-bottom: 0.7vh;

}

.parteinf columna span{
  font-size: 1.55vh;
  position: relative;
  margin-bottom: 0.55vh;
  font-weight: 400;
display: block;


}


.parteinf columna a{
display: block;
transition: 0.16s;
color: white;
position: relative;
text-decoration: none;
font-size: 1.55vh;
font-weight: 410;
margin-bottom: 0.55vh;
}

.parteinf columna a::after{
  content: '';
  width: 1.1vh;
  transition: 0.16s;
  height: 1.1vh;
  margin-left: 0.75vh;
  background-image: url(recursos/linkarrow.svg);
  position: absolute;
  top: 25%;
  background-position: 0% 0%;
  background-size: 100% 100%;
  }

  .parteinf columna a:hover::after{
    content: '';
    transition: 0.16s;
  transform: translateX(0.25vh) translateY(-0.25vh);
  background-image: url(recursos/linkarrow_ap.svg);

  }

  .parteinf tabselector{
    display: flex;
    justify-content: center;
    align-items: center;
  margin-top: 3vh;
  padding-bottom: 2vh;


  }

  .parteinf tabselector .botones{
    background: white;
    padding: 0.35vh;
    border-radius: 99vh;
   
  }
  .parteinf tabselector .botones button{
    transition: 0.16s;
    font-family: var(--fuente);
    font-size: 1.7vh;
    padding: 1vh;
    padding-left: 1.8vh;
    padding-right: 1.8vh;
    border: none;
    font-weight: 500;
    outline: none;
    border-radius: 99vh;
    background: transparent;
  }

  .parteinf .final{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
color: white;
padding-top: 1vh;
padding-bottom: 1vh;

  }

  .parteinf .final a{
    position: relative;
    font-size: 1.8vh;
    transition: 0.16s;
    padding-left: 2vh;
    padding-right: 2vh;
    text-decoration: none;
    opacity: 0.63;
    color: rgba(255, 255, 255, 1);
  }
  
  .parteinf .final a:hover{
    color: var(--rosa-sc);
    transition: 0.16s;
  }

  .parteinf.perfil tabselector .botones #perfil{
    transition: 0.16s;
    background: var(--azul-sc);
    color: white;

  }

  .parteinf.contacto tabselector .botones #contacto{
    transition: 0.16s;
    background: var(--azul-sc);
    color: white;

  }

  .parteinf.localizacion tabselector .botones #localizacion{
    transition: 0.16s;
    background: var(--azul-sc);
    color: white;

  }

  .final a::after{
    content: '';
    width: 1.1vh;
    transition: 0.16s;
    height: 1.1vh;
    margin-left: 0.75vh;
    background-image: url(recursos/linkarrow.svg);
    position: absolute;
    top: 25%;
    background-position: 0% 0%;
    background-size: 100% 100%;
    }
  
    .final a:hover::after{
      content: '';
      transition: 0.16s;
    transform: translateX(0.25vh) translateY(-0.25vh);
    background-image: url(recursos/linkarrow_ap.svg);
  
    }

  .parteinf.perfil .perfiltab{
display: flex;


  }

  .parteinf.perfil .contactotab{
    display: none;
    
    
      }
    

      .parteinf.contacto .perfiltab{
        display: none;
        
        
          }

          
  .parteinf.localizacion .contactotab{
    display: none;
    
    
      }
    

      .parteinf.localizacion .perfiltab{
        display: none;
        
        
          }
        
        
    


  .parteinf tabselector .botones button:hover{
    transition: 0.16s;

    cursor: pointer;
    background: #3849671a;
  }


  .parteinf columna a:hover{

    color: var(--rosa-sc);
    transition: 0.16s;

  }

  .parteinf columna img{
    transition-duration: 0.16s;
width: 18vh;

  }

  .parteinf columna img:hover{
    opacity: 0.7;
    transform: scale(1.05);
    cursor: pointer;

  }

titulopag{
display: flex;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
height: 100vh;
position: relative;
justify-content: center;
align-items: center;
}
titulopag titulocontent{
display: flex;
padding-bottom: 25VH;
justify-content: center;
}

titulopag titulocontent .icon{

width: 8vh;
padding-right: 1vw;
}

titulopag h1{
font-family: newjunebold;
color: var(--azul-sc);
font-size: 8.75vh;

}




titulopag .gradient.one{
  position: absolute;
  bottom: -10vh;
  width:50%;
  height:42vh;
  background: var(--rosa-sc);
  left: 50%;
  filter: blur(13vh);
  transform: translate(-50%, 0%);
  animation: titgradient 3s linear infinite;
  }

  titulopag .gradient.two{
    position: absolute;
    bottom: -10vh;
    left: 0;
    width: 33%;
    height:42vh;
    filter: blur(13vh);
    background: var(--azul-sc);
    animation: titgradient 3s linear infinite;
    animation-delay: 1s;
    }

    titulopag .gradient.three{
      position: absolute;
      bottom: -10vh;
      right: 0;
      width: 33%;
      height:42vh;
      filter: blur(13vh);
      background: var(--azul-sc);
      animation: titgradient 3s linear infinite;
      animation-delay: 2s;
      }

      titulopag .btm{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 5;
        width: 100%;


      }

      centro {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
      }

      .tabcontrol{
        display: block;

      }

      .tabcontrol .tabs{
        display: flex;
        height: 7vh;
      }


      .tabcontrol .tabbtn{
        font-family: var(--fuente);
        font-weight: 550;
        cursor: pointer;
        padding: 1.4vh;
        padding-right: 1.9vh;
        padding-left: 1.9vh;
        border: none;
        outline: none;
        background: #b9b9b91a;
        margin-right:0.75vw;
        border-top-left-radius: 1.25vh;
        border-top-right-radius: 1.25vh;
        font-size: 2vh;
        width: 11vw;

      }

      
  .tabcontrol subtitulo{
    font-family: var(--fuente);
    font-weight: 600;
    color: var(--azul-sc);
    flex: 1;
    text-align: right;
    margin-top: 2vmin;
    margin-bottom: 2vmin;
    position: relative;
    font-size: 2.2vmin;
      }
    
      .tabcontrol subtitulo::before{
        content: '';
        width: 2vmin;
        top:20%;
        right: 13.5vw;
    
        height: 2vmin;
        background: url(recursos/flecha.svg);
        background-repeat: no-repeat;
        position: absolute;
      }
    

      .tabcontrol .tabbtn.active{
        font-family: var(--fuente);
        font-weight: 550;
        padding: 1.4vh;
        padding-right: 2vh;
        padding-left: 2vh;
        border: none;
        outline: none;
        background: #3849671a;
        margin-right:0.75vw;
        border-top-left-radius: 1.25vh;
        border-top-right-radius: 1.25vh;
        font-size: 2vh;
        width: 11vw;

      }

      .tabcontrol .showing{
        display: block;
        text-align: center;
        justify-content: center;
        width: 85%;
        min-width: 50vw;
        height:60vh;
        background: #3849671a;
        border-radius: 1.75vh;
        border-top-left-radius: 0vh;
        padding: 1.5vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
      }

      .tabcontrol .showing::-webkit-scrollbar {
        display: none;
      }


.tabcontrol a{
  text-decoration: none;
  height: fit-content;

}
      .tabcontrol archivo{
transition-duration: 0.16s;
display: flex;
position: relative;
align-items: center;
justify-content: left;
width:100%;
flex: 1;
background: rgba(0, 0, 0, 0.03);
padding: 1vh;
padding-left: 0vh;
padding-right: 0vh;
text-decoration: none;
border-radius: 1.5vh;
      }

      .tabcontrol archivo::before{
        content: '';
        transition-duration: 0.16s;
        width: 2.8vh;
        height: 2.2vh;
        opacity: 0;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        background-image: url(recursos/flecha.svg);
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7479%) hue-rotate(70deg) brightness(99%) contrast(107%);
        top: 50%;
        left: 1.25vh;
        transform: translateY(-50%);
      }

      
      .tabcontrol archivo:hover::before{
        opacity: 1;
        left: 3vh;
      }

      .tabcontrol archivo:hover{

        background: var(--azul-sc);
        color: white;
      }

      .tabcontrol archivo:hover img{
        transition-duration: 0.16s;
       opacity: 0;
      }

      .tabcontrol archivo:hover p{
        color: white;
        
      }


      .tabcontrol archivo p{
        transition-duration: 0.16s;

        font-family: var(--fuente);
        font-weight: 520;
      text-decoration: none;
      color: var(--azul-sc);
      

      }

      .tabcontrol archivo img{
width: 2.6vh;
transition-duration: 0.16s;
margin-right: 1vw;
margin-left: 1.3vw;
      }


      section{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 3vh;
          }

          section .biginfo{
          width: 100%;
          max-width: 50vw;
          font-size: 2vh;
          font-family: var(--fuente);
          font-weight: 500;
          line-height: 3vh;
          color: var(--azul-sc);
            margin-bottom: 2vh;
          }

          section h1{
            display: block;
            max-width: 50vw;
            width: 50vw;

            font-family: newjunebold;
            font-size: 3.5vh;
            margin-bottom: 4vh;
            color: var(--azul-sc);
      
           }
      

          section txtrosa{
            font-weight: 510;

          }

          section .animcenter{
            width: 100%;
            max-width: 58vw;

          }

          section bento{
display: block;
max-width: 58vw;
width: 58vw;


          }

          section bento row{
display: flex;

          }

          section bento row .content{
            display: block;
            background: #38496711;
            margin: 1vh;
            position: relative;
            overflow: hidden;
            flex: 1;
            padding: 1.85vh;
            border-radius: 1.5VH;
          }

          section bento row .content h2{
            font-family: newjunebold;
            font-size: 3.5vh;
            color: var(--azul-sc);
            margin-bottom: 3.75vh;

          }

          section titulo{
max-width: 58vw;
width: 58vw;
color: var(--azul-sc);
padding-bottom: 2vh;
font-size: 3.2vh;
margin-left: 2.55vh;
text-align: left;
font-family: newjunebold;

          }

        

          section bento row .content img{
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            mask-image: radial-gradient(at 98% 40%, hsla(26,0%,0%,1) 0px, transparent 50%),
            radial-gradient(at 80% 7%, hsla(187,0%,0%,1) 0px, transparent 50%);
            transform: scale(1.23);
            transform-origin: top right;
            opacity: 0.4;
            filter: blur(0.5vh);
            height: 70%;
          }
          section bento row .content button{
display: flex;
position: relative;
font-family: var(--fuente);
color: white;
font-weight: 520;
font-size: 1.6vh;
padding: 1.55vh;
padding-left: 2.8VH;
padding-right: 3.85VH;
border-radius: 99vh;
background: var(--azul-sc);
border: none;
outline: none;

          }

          .moremargin{
            margin-top: 16vh;
          padding-bottom: 20vh;
          }

         bento button::after{
            content: '';
            transition-duration: 0.16s;
            position: absolute;
            right: 1vw;
            top: 50%;
            transform: translateY(-50%) rotate(-45deg);
            width: 0.7vh;
            height:0.7vh;
            border-right: 0.35vh solid white;
            border-bottom: 0.35vh solid white;
    
    
          }
    
          bento button:hover:after{
            right: 0.85vw;
            border-right: 0.35vh solid white;
            border-bottom: 0.35vh solid white;
          }
    
          bento button:hover{
            color: var(--rosa-sc);
            cursor: pointer;
    
          }
    
          bento button::before{
            content: '';
            transition-duration: 0.13s;
            position: absolute;
            right: 0.9vw;
            top: 50%;
            transform: translateY(-50%);
            width: 0vh;
            border-bottom: 0.35vh solid white;
    
    
          }
    
          bento button:hover::before{
    
            width: 1.12vh;
            border-bottom: 0.35vh solid white;
          }

          section .misionvision{
            max-width: 58vw;
            width: 58vw;
            align-items:flex-start;
            padding: 0;
          }

          section .misionvision .tab{
            margin: 1vh;
            padding: 2.85vh;
            display: block;
            height: fit-content;
            border-radius: 1.5vh;
          }

          section .misionvision .tab h4{

            font-size: 9vh;
            margin-bottom: 0.5vh;
            color: var(--rosa-sc);

          }

          section .misionvision .tab .info{
            padding-top: 3vh;

          }




  
      ventanaemergente{
        transition-duration: 0.23s;
        position: fixed;
        display: flex;
        justify-content: right;
        align-items: center;
        z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999;
        width: 100%;
        height: 100vh;
        background:rgba(0,0,0,0.1);
        overflow-x: hidden;

      }

      ventanaemergente.active{
        transition-duration: 0.23s;
        background: rgba(0, 0, 0, 0.723);

        height: 100vh;
        overflow-x: hidden;
      }

      ventanaemergente vent{
        transition-duration: 0.25s;
        background: white;
        display: flex;
        position: relative;
        width: 32vw;
        transform: translateX(150%);
        height: 100vh;
        margin-right: 0vw;
        overflow: hidden;
        border-radius: 1.75vh;
        border-top-right-radius: 0VH;
        border-bottom-right-radius: 0vh;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 29px 0px;
      }

      ventanaemergente vent.active{
        transform: translateX(0vh);

      }

      ventanaemergente vent .exit{
        transition-duration: 0.16s;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6vh;
        background: rgba(255, 255, 255, 0.199);
        backdrop-filter: blur(5vh);
        border-radius: 99vh;
        font-size: 2vh;
        font-family: var(--fuente);
        font-weight: 510;
        border: none;
        color: var(--azul-sc);
        height: 6vh;
        top: 1.5vh;
        right:2vh;

      }

      ventanaemergente vent .exit:hover{
        background: #f1f2f3;
        cursor: pointer;


      }

      ventanaemergente vent .exit img{
        width: 4vh;

      }

      ventanaemergente vent iframe{
        width: 100%;

        overflow: hidden;
      }

      
      .cantidadpago{
        padding-left: 2.5vh;
        display: flex;
        flex-wrap: wrap;
        padding-right: 2.5vh;
      }

 

      .cantidadpago .fila{   
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        margin-bottom: 1vh;

      }
      .ventanader .titpago{
        display: flex;
        justify-content: left;
        align-items: center;
       background: white;
        width: 100%;
        overflow: hidden;
        height: 8.5vh;
      }

      .ventanader .titpago img{
        width: 23vh;
        margin-left: 6%;
      
      }

      .cantidadpago button{
        display: flex;
        transition-duration: 0.16s;
        font-family: var(--fuente);
        color: var(--azul-sc);
        padding: 1vh;
        cursor: pointer;
        font-size: 2vh;
        font-weight: 550;
        border: 0.2vh solid transparent;
        border-radius: 1.5vh;
        flex: 1;
        justify-content: center;
        height:6.2vh;
        align-items: center;
        margin-right: 0vh;
        background: #38496709;
        margin-right: 1vh;
      }

      .cantidadpago button:hover{
        border: 0.2vh solid #131a2949;
      }

      .cantidadpago .cantinput{
        transition-duration: 0.1s;
        display: flex;
        font-family: var(--fuente);
        color: var(--azul-sc);
        padding: 1vh;
        padding-top: 3vh;
        padding-bottom: 3vh;
        font-size: 2vh;
        font-weight: 550;
        border: 0.2vh solid transparent;
        border-radius: 1.5vh;
        box-shadow: none;
        margin-right: 0vh;
        background: #38496709;
        margin: 0vh;
        margin-right: 1vh;

        flex: 60%;
        object-fit: fill;
      }

      
      .cantidadpago .cantinput:hover{
        border: 0.2vh solid #131a2949;
      }

      .cantidadpago .cantinput:focus{
        opacity: 1;
        border: 0.3vh solid var(--rosa-sc);
      }


      .center{
        display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: 100vh;

      }

      .center h1{
        font-family: var(--fuente);
        font-size: 4.15vh;
        color: var(--azul-sc);
        font-weight: 600;
        margin-left: 2.75vh;
      }

      .center h3{
        font-family: var(--fuente);
        font-size: 2.8vh;
      color: var(--azul-sc);
        font-weight:300;
        margin-left: 2.75vh;

      }

      .centercont img{
        width: 45vh;
      }

      @keyframes titgradient {
        0%{
          background: #384967;
        }
        50%{

          background: #e05074;
        }
60%{
  background: #e05074;
}
        100%{
          background: #384967;

        }
      }
    
  


  @keyframes infspan{

0%{
  opacity: 0;
transform: translateY(-0.3vh) scaleY(0);
transform-origin: top top;
}

50%{
opacity: 1;


}

100%{
  transform: translateY(0vh) scaleY(1);
  transform-origin: top top;
}

  }

  @keyframes infh2 {
    0%{
      transform: translateX(2vh);
      opacity: 0;

    }
    100%{
      transform: translateX(0vh);

      opacity: 1;

    }
  }

      @keyframes img {
        0%{
          opacity: 0;
          filter: blur(1.2vh);
        

        }
        100%{
  opacity: 1;
          filter: blur(0vh);
          
        }
      }

      @keyframes cargahor {
        0%{
          transform: translateX(-85%);

        }


    50%{
      transform: translateX(140%);

    }


        100%{
          transform: translateX(-85%);



        }
      }

      @keyframes portadapago {
        0%{
          opacity: 0;
          transform: scale(1.3);
          filter: blur(1.1vh);
        }
        20%{
          opacity: 0;
          transform: scale(1.3);
          filter: blur(1.1vh);
        }
        100%{
          transform: scale(1);
          opacity: 1;
          filter: blur(0vh);
        }
      }

      @keyframes entradapagoselected {
        0%{
          opacity: 0;
          transform: translateY(10vh);
          filter: blur(1.1vh);
        }
        100%{
          opacity: 1;
          transform: translateY(0vh);
          filter: blur(0vh);
        }

      }





  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    transition: 0.15s;
    background-color: #384967;
    border-radius: 9999px;
    border: 2px solid #ffffff;
  }

  *::-webkit-scrollbar-thumb:hover {
    transition: 0.15s;
    background-color: var(--rosa-sc);
    border-radius: 9999px;
    border: 2px solid #ffffff;
  }



  @keyframes precio {
    0%{
      transform: scaleX(0.9) translateX(-4vh);
      opacity: 0;
      filter: blur(1.2vh);
      transform-origin: center left;

    }
    100%{
      transform: scaleX(1) translateX(0vh);
      opacity: 1;
      filter: blur(0vh);
      transform-origin: center left;
    }
  }