@charset "UTF-8";
 
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+SemiExpanded:ital,wght@0,200..900;1,200..900&display=swap');



body::-webkit-scrollbar {
  width: 0.9rem;
  background-color: #000;


}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: #36363d;
  outline: 1px solid slategrey;
    border-radius: 20px;
}



body{

font-family:"Zalando Sans SemiExpanded", sans-serif !important;

}


.checkbox-pro {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* ocultar checkbox original */
.checkbox-pro input {
  display: none;
}

/* caja */
.checkbox-pro .check {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: transparent;
  border: 1px solid #fff;
  position: relative;
  transition: all 0.25s ease;
}

/* hover */
.checkbox-pro:hover .check {
  border-color: #9147FF;
}

/* estado activo */
.checkbox-pro input:checked + .check {
  background: linear-gradient(135deg, #9147FF, #9147FF);
  border-color: transparent;
  box-shadow: 0 0 8px rgba(145, 71, 255, 0.2);
  
}

/* check animado */
.checkbox-pro .check::after {
  content: "";
  position: absolute;
  left: 4.7px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: scale(0) rotate(45deg);
  transition: transform 0.2s ease;
}

/* cuando está activo */
.checkbox-pro input:checked + .check::after {
  transform: scale(1) rotate(45deg);
}


*:focus {
  outline: none !important;
  outline-offset: 0 !important;
}

.text-reig{


}
.bordepai{

border: 1px solid #9147FF !important;

}


.bordepai input:checked + .check {
  background: #4ade80 !important; /* morado */
  border: 2px solid transparent !important; /* 🔥 quita el borde blanco */
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4) ;
}


.candado{

  
vertical-align: middle;
position: relative;
top: -1px;
padding-right: -50px !important;
font-size: 18px !important; 


}

.candado2{

  
vertical-align: middle;
position: relative;
top: 0px;
font-size: 20px !important; 
font-weight: 700 I !important;
}



.candado3{

  
vertical-align: middle;
position: relative;
top: 0px; 
font-size: 21px !important; 
}


.arroa{

  
vertical-align: middle;
position: relative;
top: -1px;
padding-right: -50px !important;
font-size: 18px !important; 
color: #B98AFF !important;


}

.grisa{

color: #9ca3af !important;

}

.pad-bord{

      background-color: rgb(255 255 255 / 0.06);

}

.subirboton{

margin-top: 20px !important;

}


.subirboton2{

margin-top: 25px !important;

}


.indetifq{

margin-top: 5px !important;

}
















.w-96{

max-width: 350px !important;

}

.iconope{

font-size: 18px;

}

.menu-noti{

  

 background-color: rgba(14, 14, 16, 0.6) !important;  
 backdrop-filter: blur(24px);
 border: 1px solid;
 border-color: rgba(255, 255, 255, 0.05);
 padding: 12px 20px !important;
 border-radius: 8px !important;
    box-shadow: rgb(0 0 0 / 45%) 0px 15px 15px -15px;
margin-top: 20px !important;
 
}




.seoculta{

display: none;

}

.txt-activo{
 
color: #fff;

}


.txt-activo-dos{

font-size: 9px;
color: #4ade80;
position: relative;

}


.txt-activo-tres{
 
color: #D4D4D8;

}




.divider-vertical {
    width: 1px;
    height: 30px; /* equivalente a h-12 */
    background: rgba(145, 75, 255, 0.6); /* color base */
 
}



.fondomenuaba {
    background-color: #0e0e10 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
 

.w-72{

max-width: 270px !important;
padding-bottom: 100px !important;

}

.redondo{

border-radius: 8px;

}


.txtpeqd{

font-size: 9px;
text-transform: uppercase;
color: #D4D4D8  ;

}

.fondoganan{

background-color: #000 ;


}

.fondomenugan{
 
 

}


.sidebar-user-card{

 background: rgba(14, 14, 16, 0.35); 
padding: 16px;
border-radius: 12px;
}

.bg-brand-purple{

background-color: #9147FF;

}





 .badge-lessons{
background:#2A2A2E;
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight: 600;
color:white; 
}

 

.iconopef {
    width: 40px !important;
    height: 40px !important;
}

.spanit {
    font-size: .9rem;
    color: #fff;
}

.titulo-curso{

font-size: 1.4rem;
line-height: 1.6rem;
font-weight: 700; 

}

.sub-curso{

font-size: 0.9rem;
color: #D4D4D8 ;
padding-top: 6px;
padding-bottom: 10px;

}

.centrado{

text-align: center !important;
margin: 0 auto !important;

}

.divider2 {
    border-left: 1px solid #fff;
    padding: 0px 4px;
}

.tipoplan{

    font-size: 1.4rem;
    font-weight: 600;
    padding: 10px 0px;
    margin-bottom: 0px;
    color: #fff;
    
}

.iconoli {
    position: relative;
    top: 5px;
    font-size: 1.5rem;
    padding-right: 4px;
}


.cohete{

  width: 90px;
  height: 100px;

}

 
.derecha-txt{

text-align: left;

}

.bg-gradient-to-r{

background-color: #9147FF;

}

.progreso-txt-2{

   
    font-size: 11px !important;
    vertical-align: middle;
    padding: 0px 5px;
    font-weight: 600; 

}


.patroinna{
position: relative;
top: 8px;
margin-top: -30px;
color: #B98AFF !important;
}


.patroinna2{
position: relative;
top: 8px;
margin-top: -30px;
color: #9ca3af !important;
}


.condiciones{

font-weight: 600;
text-decoration: underline;

}


.fondo-contenedor {
 
    background: rgba(24, 24, 27, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: 14px;
    
    border: 1px solid rgba(255,255,255,0.06);

 
    padding: 40px 40px !important;
    width: 420px;

    position: relative;
    z-index: 10;
}



.header-login h2{

    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -0.015em !important;

}

.header-login p{

    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 30px;

}


.header-login span{

    color: #B98AFF;

}


.btn-login{

 

}


.logologin{

position: relative;
    width: 132px;
    top: 15px;
    text-align: center;
    margin: auto;
    padding-bottom: 55px;
    margin-top: -15px;
filter: 
  drop-shadow(0 0 4px rgba(145, 71, 255, 0.4))
  drop-shadow(0 0 10px rgba(145, 71, 255, 0.2));


}




.labelogin{

color: #fff !important;
font-size: 14px !important;
}



.footerlogin{

color: #dadada;
font-size: 13px;
padding-top: 20px;

}


.olvidocon{

font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) ;
    text-align: right;
    float: right; 
   
    text-decoration: underline;

}
 
.suvor{

position: relative;
top: 0px;

}
 


.checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
      color: #fff;
    font-size: 12px !important;
    font-weight: 500;
  gap: 8px;
}

/* Oculta el checkbox real */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Caja personalizada */
.checkmark {
  width: 15px;
  height: 15px;
  border: 1px solid #fff; /* color borde */
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Check */
.checkmark::after {
    content: "\2714"; /* ✔ */
  color: white;
  font-size: 9px;
  font-weight: 900;
  display: none;
   font-family: Arial, system-ui, sans-serif;
  font-weight: 900;
}

/* Estado checked */
.checkbox input:checked + .checkmark {
  background-color: #9147FF;
  border-color: #9147FF;
}

.checkbox input:checked + .checkmark::after {
  display: block;
}

/* Hover */
.checkbox:hover .checkmark {
  border-color: #9147FF;
}

 
.iconolog{

 
    color: #9CA3AF;
    transition: all 0.25s ease;
 
font-size: 14px ;
z-index: 1;
}








 



.logoanimate {
  animation: pulseSoft 3s ease-in-out infinite; /* antes 1.9s */
  display: inline-block;
}

@keyframes pulseSoft {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.04);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.025);
  }
  100% {
    transform: scale(1);
  }
}








.gris-registro{

color: #fff !important;
font-size: 12px !important;

}


 


.txt-peq{

  color: #9ca3af;
padding-top: 6px;

}

.txt-volver{

font-size: 14px;
color: rgba(255, 255, 255, 0.9);
padding-top: 5px;

}


.blancolink{

color: #B98AFF;
text-decoration: underline;

}


.logobienv{

margin-top: 50px;

}


.subbienv{

font-size: 16px;
padding: 20px 0;

}

.subtigris{

color: #fff;
font-size: 14px;
padding-bottom: 50px;
font-weight: 400;
}


.titubienv{

font-weight: 400 !important; 
font-size: 32px;
}


.gruesorosa{

font-weight: 800;
color: #9147FF;

}

.grueso{

font-weight: 800;
 

}


.subplan{

padding-top: 10px;
text-align: center;
font-size: 20px;
font-weight: 400;
border-bottom: 1px solid #fff;
padding-bottom: 6px;

}



.tituplan{

padding-top: 6px;
text-align: center;
font-size: 42px;
font-weight: 700;
padding-bottom: 10px;
}


.saltar{

animation: bouncingCard 0.6s ease-out infinite alternate !important;

}

.preciobienv{
 
text-align: center;
padding: 10px 0;


}



.preciobienv span{
 
  
color: #fff;
font-size: 24px;
font-weight: 800; 
letter-spacing: 0em;

}



.preciobienv h1{
 
  
color: #fff;
font-size: 85px; 
font-weight: 800;
padding: 20px 0; 

}




.preciobienv p{
 
  
color: #fff;
font-size: 16px; 
font-weight: 800;
padding: 20px 0;
letter-spacing: 0em;
}




span.preciop{

font-size: 32px;

}



.especifi h4{

font-size: 16px; 
color: #fff;
font-weight: 600;

}



.especifi p{

font-size: 13px;
padding-top: 0px;
color: #9ca3af;
font-weight: 400;
}



.footerbien{

padding-top: 80px;

}


.footerbien p{

color: #9ca3af;
font-size: 14px;

}




.footerbien2{

padding-top: 60px;

}



.footerbien2 p{

color: #fff;
font-size: 12px;

}





.monto{
 
border: 1px solid #B98AFF;
}



.blancotxt{

color: #fff !important;

}


.gris-txt{

color: #D4D4D8 !important;

}


.gris-txt-dos{

color: #efeff1 !important;

}

.gristxt{

color: #9ca3af !important;

}



.rosatxt{

color: #B98AFF !important;

}



.bordepago {
  background-color: #18181b !important;
  color: #e5e7eb !important;
  caret-color: transparent;
}

.bordepago:focus {
  background-color: #18181b !important;
  color: #e5e7eb !important;
  outline: none !important;
  box-shadow: none !important;
}

.bordepago[readonly] {
  background-color: #18181b !important;
}



.bordepago:-webkit-autofill,
.bordepago:-webkit-autofill:focus,
.bordepago:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
  -webkit-text-fill-color: #e5e7eb !important;
}




.border-yellow{

border-color: #9ca3af;

}


.txt-verde{

color: #00c795;

}


.txt-morado{

color: #9147FF;

}


.bg-morado{

background-color: #9147FF !important;

}


.bg-green-500{


background-color: #00c795 !important;

}


.placeholder-blanco::placeholder {
  color: #D4D4D8;
  opacity: 1;
  font-size: 0.9rem;
}

/* Compatibilidad */
.placeholder-blanco::-moz-placeholder {
  color: #D4D4D8;
}

.placeholder-blanco:-ms-input-placeholder {
  color: #D4D4D8;
}

.placeholder-blanco::-ms-input-placeholder {
  color: #D4D4D8;
}




 



.buscador{

   background-color: rgba(31, 31, 35, 1.9) !important; 
border-radius: 8px;
border: 0px !important;
outline: none;
}


 .buscador:focus,
.buscador:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}



.buscador::after{

background-color: #1f1f23 !important;
border-radius: 8px;
border: 10px solid #cc0000 !important;
outline: none;
}


.espaciolado{

padding: 0px 150px;

}


.sub-header-container {
    margin-top: 50px;
    margin-bottom: 20px;
}

.sub-header-container .navbar {
    background-color: transparent;
    border-bottom: 0px solid rgba(83, 83, 95, 1.0);
    border-radius: 0px;
}


h1.principal {
    font-size: 1.2rem;
    color: #efeff1;
    font-weight: 500;
    padding: 5px 0px;
}


.logow{

height: 38px !important;
text-align: left !important;
float: left !important;
}


.logo-w{

height: 55px !important;
padding: 5px 0px !important;
margin-top: 5px !important;
position: absolute;
left: 30px;
 
}



._headerShape_qwjal_40 {
     
    top: 0rem; 
    right: 0;
    background: rgb(2, 0, 36);
    background: linear-gradient(0deg, rgba(24, 24, 27, 0.1) 35%, rgba(145, 71, 255, 0.1) 100%);
    padding: 40px 0px !important;
}


.sidebar-expanded ._headerShape_qwjal_40 {
     
 
   padding: 45px 0 !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}



._headerShape_qwjal_41 {
     
    top: 0rem; 
    right: 0;
    background: rgb(2, 0, 36);
    background: linear-gradient(0deg, rgba(24, 24, 27, 0.1) 35%, rgba(145, 71, 255, 0.1) 100%);
    padding: 0px 0px !important;
}


.sidebar-expanded ._headerShape_qwjal_41 {
     
 
   padding: 15px 0 !important;
   border-bottom: 0px solid rgba(255, 255, 255, 0.08) !important;
}




 /* Dashboard activo por URL */
.sidebar-link {
 
  padding:8px 20px !important;
  border-radius: 8px !important;
  margin: 6px 0px !important;
 
}



 /* Dashboard activo por URL */
.sidebar-link:hover {
 
   background-color: rgba(31, 31, 35, 0.8) !important; 
 
}


 
/* Icono activo */
.sidebar-link:hover .sidebar-icon{ 
  color: #9147FF !important; 
}
 

/*

.sidebar-link[href*="/dashboard"] {
   background: rgba(145, 71, 255, 0.18) !important;
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
}





.sidebar-link[href*="/dashboard"]:hover{
  background: #9147ff !important;
  color: #000 !important;
}

.sidebar-link:hover .sidebar-text{

color: #fff !important;

}

 
 

 
.sidebar-link[href*="/dashboard"] .sidebar-icon {
  color: #fff;
  background-color: #9147FF !important;
  border-radius: 10px !important;
  padding: 0px !important;
  margin: 0px !important;
}


 
.sidebar-link[href*="/dashboard"]:hover .sidebar-icon{
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important; 
}

 
.sidebar-link[href*="/dashboard"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, #8c52ff, #b88cff);
}

*/

.fondosub{

   background-color: rgba(31, 31, 35, 0.8) !important; 
border-radius: 8px;
padding: 10px 15px;
color: #D4D4D8 !important;

}

 

.flechamenu{

  font-size: 20px !important;

}




.fondoibo{

background-color: #0e0e10;
border-radius: 12px;

}



.bg-verde {
    background-color: #00c795 !important;
    border: 1px solid #00c795 !important;
    border-radius: 8px !important;
}


.espaciobg {
        padding: 22px 20px !important;
}



.redestitulo {
    font-weight: 400;
    margin-left: 20px !important;
    font-size: 1.05rem;
    letter-spacing: 0px;
    line-height: 20px;
    padding: 10px 0px;
    color: #fff;
}

.bg-redverde{

background-color: #fff;
 

}

 
.bg-redverde svg{

 color: #00c795 ; 

}

.redesdash-grueso {
    font-weight: 600;
   
}

.redesdash i {

font-size: 25px;

 }


 i.verde  {

  color: #00c795 !important;

 }



.redesdash {

padding: 33px 30px !important;

}



.bg-moradod{

 background-color: #9147FF !important;
    border: 1px solid #9147FF !important;
    border-radius: 8px !important;

}

.bg-redmorado{

background-color: #fff;
 

}


.bg-redmorado svg{

 color: #9147FF ; 

}

.redesdash-grueso {
    font-weight: 600;
   
}

.redesdash i {

font-size: 25px;

 }


 i.morado  {

  color: #9147FF !important;

 }




.bg-brand-green{
 
  background-color: rgba(0, 199, 149, 0.2);
  color: #00c795;
  border-radius: 100% !important;
}




.bg-brand-morado{
 
  background-color: rgba(145, 71, 255, 0.2);
  color: #9147FF;
  border-radius: 100% !important;
}


.pequen{

color: #aaa;

}


.toptitu {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}




.rosa {
    color: #bf94ff !important;
}




.rayado {
    text-decoration: underline ; 
}


.iconbus{

font-size: 22px;

}


.iconbus2{

font-size: 20px;

}


.iconbus3{

color: #D4D4D8 !important;
font-size: 18px;

}

 
.notifi{

background-color: #9147FF;
border-radius: 100%;
font-size: 20px;
font-weight: 600;
}


 
.perf{ 

background-color: #1f1f23 ;
border-radius: 100%;
font-size: 20px !important; 
font-weight: 600;
padding: 50px;
 
}

.bgbuscado{

background-color: #000;

}


.buscadoricon{

background-color: #1f1f23 ;
border-radius: 100%;
font-size: 20px !important; 
font-weight: 500;

}



.fondobusca{

    background: rgba(14, 14, 16, 0.95) !important;
margin-top: 18px !important; 
border-radius: 0px !important;
}

.fondobuscod{

    background:#1f1f23  !important;
border-radius: 8px !important;

}


.buscadorwid{

width: 360px !important;

}

.br-8{

  border-radius: 8px !important;

}

.br-20{

border-radius: 20px;

}



@keyframes soft-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px); /* 👈 sube más */
  }
}

.animate-soft-bounce {
  animation: soft-bounce 0.9s ease-in-out infinite; /* 👈 más rápido */
}



.progreso-txt{

    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 500; 

}


.progresobarr{

 
    margin-bottom: 20px;
    background-color: #0e0e10 !important;
    height: 20px !important;
    border-radius: 8px;

}


.acciones {
    font-size: 1.13rem !important;
    color: #efeff1 !important;
    font-weight: 600 !important;
    
}


.gradientemor {
    background-color: #ccc !important;
    background-image: linear-gradient(to right, #9147ff 0%, #bf94ff 100%) !important;
    border-radius: 8px;
    border: 0px;
    padding: 10px 0;
}


.rayaba2 {
    border-bottom: 1px solid #9147ff;
    width: 100%;
    line-height: 40px !important;
}

.linehe {
    line-height: 1.45rem !important;
    padding-bottom: 20px !important;
}



.alert-light-warning {
    color: #fff !important;
    background-color: #18181b;
    border-color: #18181b;
    border-radius: 8px !important;
    font-size: 0.9rem;
    padding: 22px 20px ;
      margin-top: 35px !important;
}



.bg-verdedos {
    background-color: #00c795 !important;
    border: 1px solid #00c795 !important;
    border-radius: 8px !important;
    padding: 22px 20px !important;
}


.bg-verdedos span{
  
      font-size: 1.2rem;
      font-weight: 500;
      color: #fff;
      margin-top: 20px;
  
}



.bg-verdedos h1{
  
       font-size: 2.7rem;
    font-weight: 800 !important;
    color: #fff;
  
}

 

.bg-verdedos small{
  
    font-size: 1.7rem;
    margin-left: -5px;
    text-transform: uppercase;
    color: #fff !important;
}
 
.bg-verdedos p{
  
       font-size: 1.0rem; 
    color: #fff !important;
    font-weight: 500;
}


.bg-morados {
    background-color: #9147ff !important;
    border: 1px solid #9147ff !important;
    border-radius: 8px !important;
        padding: 22px 20px !important;
}





.bg-morados span{
  
      font-size: 1.2rem;
      font-weight: 500;
      color: #fff;
      margin-top: 20px;
  
}



.bg-morados h1{
  
       font-size: 2.7rem;
    font-weight: 800 !important;
    color: #fff;
  
}

 

.bg-morados small{
  
    font-size: 1.7rem;
    margin-left: -5px;
    text-transform: uppercase;
    color: #fff !important;
}
 
.bg-morados p{
  
       font-size: 1.0rem; 
    color: #fff !important;
    font-weight: 500;
}



 








 @media (max-width: 767px){



.seoculta{

display: block !important;

}



      .courses-swiper {
        
        margin: 0px 20px !important;
       
    }
 
.logomobil{

width: 50px;

}



    .header-top > div::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        right: 0;
        height: 0px !important;
        background: #000 !important;
        pointer-events: none;
        
    }

  

.header-top{

border-bottom: 0px SOLID #000 !important;
background-color: #18181b !important;
box-shadow: 0px !important; 
padding: 8px 20px !important;
}









  .activate-ibo{

   display: inline-block !important;
   float: right !important;
   right: 0px !important;

  }


      .sub-header-container {
        margin-top: 47px;
        margin-bottom: 5px;
    }


    h1.principal {
    font-size: 1.2rem; 
}

    .rayaba {
        width: 100%;
        line-height: 40px !important;
        border-bottom: 1px solid rgb(145, 71, 255);
    }
 

  .redesdash {

padding: 25px 30px !important;

}


.redestitulo {
           font-size: 1.11rem;
            line-height: 1.31rem;
}

 






 .espaciolado{

padding: 0px;

 }

.fondo-contenedor {
  width: 100% !important;
   margin: auto;
   margin-left: 0px !important;
   padding: 40px 30px !important;
   
}




.preciobienv h1{
 
font-size: 75px;  

}

.preciobienv span{
 
  
font-size: 22px; 

}


.footerbien2{

padding-top: 20px;

}



}