.divp{
    padding:        20px;
    text-align:     center;
    font-size:      1.6rem;
    color:          #ff0000;
    font-weint:     bold;
    
    /*border: solid 1px #000;*/
}

.fn {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  background-color: rgba(0, 0, 0, 0.6); 
  z-index:          800;
}
.cnt-imgp{
    margin-top:     20px;
    width:          200px;
    height:         180px;
    border-radius:  50%; 
/*    border:         solid 1px #000;  He agregado el borde para que el círculo sea visible 
    overflow:       hidden;  Crucial para recortar la imagen en forma de círculo 
    display:        flex;
    justify-content: center;
    align-items: center;*/
}

/* Estilos para la imagen dentro del contenedor */
.cnt-imgp img{
/*    width:          100%;
    height:         100%;
    object-fit:     cover;  */
    box-shadow:     0 0 0 8px rgba(0,0,0, .06);
}
.cnt-imgp img:hover{
    cursor:             pointer;
    transform:          scale(1.1);
    transition:         all 300ms;
    box-shadow:         0 0 0 8px rgba(0,0,0, .1);
}

.flt-d{
    float:          right;
    /*margin-right:   -20px;
    /*border:       solid 1px #000;*/
}
/* Estilos generales para el contenedor principal */
.cnt-tt {
    display:            flex;
    flex-direction:     column;
    justify-content:    center;
    align-items:        center;
    background:         #000;
    width:              100%;
    min-height:         150px;
    padding:            20px 15px;
    box-sizing:         border-box;
    text-align:         center;
}

/* Estilos para la barra de contenido */
.cnt-tt .bar-tt {
    width:              90%; /* Ancho para móviles */
    max-width:          900px;
    color:              #fff;
}

/* Estilos para el título h3 (adaptado para móviles) */
.cnt-tt .bar-tt h3 {
    /* El texto y la imagen se apilan en pantallas pequeñas */
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    gap:                10px;
    font-size:          clamp(1.2rem, 3vw, 2rem);
    color:              #FFCC00;
    margin:             0;
    padding:            0;
}

.cnt-tt .bar-tt h3 img {
    height:             50px;
    width:              auto;
}

/* Estilos para el subtítulo span */
.cnt-tt .bar-tt span {
    font-size:          clamp(0.9rem, 2vw, 1.2rem);
    color:              #fff;
    display:            block;
    margin-top:         10px;
}
/* ******************************------------------------------********************  */


.nw-tt{
    font-size: clamp(1em,2vw,2em);
    text-align: center;
   
    font-weight: bold;
    color: #000;
    margin-top: 25px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.nw-header-tt .nw-sbt{
    font-size:      clamp(1em,2vw,2em);
    text-align:     center;
    text-transform: none;
    font-weight:    bold;
    margin-top:     25px;
    padding-bottom: 50px;
}

.cnt-txlg {
    width:           200px;
    /*border:        solid 1px #FFCC00;*/
}

.cnt-txlg ul {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
}

/* Aplica estilos a los enlaces con la clase login-content dentro de cnt-txlg ul li */
.cnt-txlg ul li .login-content {
    
    display:         inline-block; /* Es importante para que 'transform' funcione correctamente en elementos 'inline' */
    /*color:         #FFCC00;*/
}

/* Estilos para el hover en los enlaces con la clase login-content */
.cnt-txlg ul li .login-content:hover {
    cursor:          pointer;
    transform:       scale(1.1); /* Escala el elemento un 10% más grande al pasar el cursor */
    transition:      all 0.5s ease; /* Transición suave de 0.5 segundos */
    color:           #FFCC00;
}

/* Asegúrate de que el enlace "Salir" también tenga un hover si lo deseas */
.cnt-txlg ul li a[href="salir.php"]:hover {
    cursor:         pointer;
    transform:      scale(1.1);
    transition:     all 0.5s ease;
    color:          #FFCC00;
}


.cnt-gsec{
    width: 100%;
    /*border: 2px solid rgba(0,0,0,0.06);*/
    
    /*box-shadow: 0 10px 10px rgba(0,0,0,0.2);*/
    backdrop-filter: blur(10px);
    display: flex;
    flex-wrap: wrap;
}
.cnt-gsec .sb-sec{ 
    margin: auto;
    width: 50%;
    padding: 25px;
    /*border: solid 1px #ffcc00;*/
}    

/* --- Estilos base (para todos los dispositivos, pero pensando en el móvil primero) --- */


/* --- Estilos base (para todos los dispositivos, PERO AHORA CON ICONOS MÁS PEQUEÑOS POR DEFECTO) --- */

.cnt-academy-logo {
    display:                flex;
    width:                  100%;
    height:                 50px;
    justify-content:        space-between;
    align-items:            center;
    padding:                10px 15px;
    box-sizing:             border-box;
    /*border:             solid 4px #FFCC00;*/
}
.cnt-academy-logo .col-logo{
    display: flex;
    /*border:             solid 2px #FFF;*/
}
.cnt-academy-logo .col-logo a img {
    /*max-width:          150px;  Ajustado un poco más pequeño para móviles */
    width:                  20px;
    height:                 auto;
    display:                block;
    
}

.cnt-academy-logo a:hover {
    cursor:                 pointer;
    transform:              scale(1.1);
    transition:             all 0.5s;
}


/* --- Estilos para la barra social del footer --- */
.barsocial {
    
    display:                flex;       /* Usamos flexbox para una mejor alineación y responsividad */
    justify-content:        center;
    align-items:            center;     /* Centra verticalmente los elementos */
    padding:                2px 0;      /* Añade un poco de padding para espacio */
    flex-wrap:              wrap;       /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    /*border:                 solid 1px #FFCC00;*/
}

.barsocial ul {
    display:                flex;       /* Asegura que la lista también use flexbox */
    padding:                0;          /* Elimina el padding predeterminado de la lista */
    margin:                 0;          /* Elimina el margen predeterminado de la lista */
    list-style:             none;       /* Quita los puntos de la lista */
    flex-wrap:              wrap;       /* Permite que los ítems de la lista se envuelvan */
    justify-content:        center;     /* Centra los ítems de la lista */
}

.barsocial li {
    padding:                0 1px;      /* Aumenta un poco el padding horizontal para más espacio entre iconos */
    margin:                 0px 0;      /* Añade un pequeño margen vertical para cuando se envuelvan */
    /*border:                 solid 1px #FFCC00;*/
}
.barsocial li a img{
    width:                  18px;
    height:                 18px;
}
.barsocial li:hover {
    cursor:                 pointer;
    transform:              scale(1.3);
    transition:             all 0.5s ease;
    /*border-radius:        solid 2px rgba(242,242,242,.7);*/
}


/* --- Estilos para la Contenedor Session -> ValUser & AdminUser  --- */
.cnt-session {
    
    display:                flex;       /* Usamos flexbox para una mejor alineación y responsividad */
    justify-content:        center;
    align-items:            center;     /* Centra verticalmente los elementos */
    padding:                2px 0;      /* Añade un poco de padding para espacio */
    flex-wrap:              wrap;       /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    /*border:                 solid 1px #FFCC00;*/
}

.valsession{
   margin-right: 10px;
   /*border:              solid 1px #FFF;*/ 
}

.valsession ul {
    display:                flex;       /* Asegura que la lista también use flexbox */
    padding:                0;          /* Elimina el padding predeterminado de la lista */
    margin:                 0;          /* Elimina el margen predeterminado de la lista */
    list-style:             none;       /* Quita los puntos de la lista */
    flex-wrap:              wrap;       /* Permite que los ítems de la lista se envuelvan */
    justify-content:        center;     /* Centra los ítems de la lista */
    /*border:              solid 1px #FFCC00;*/
}

.valsession li {
    color:                 #FFF;
    padding:               6px 10px;      /* Aumenta un poco el padding horizontal para más espacio entre iconos */
    margin:                0px 0;      /* Añade un pequeño margen vertical para cuando se envuelvan */
    display:               flex;
    justify-content:       center;
    align-items:           center;
    /*border:                solid 1px #FFCC00;*/
}
.valsession li:hover {
    cursor:                 pointer;
    transform:              scale(1.3);
    transition:             all 0.5s ease;
    /*border-radius:        solid 2px rgba(242,242,242,.7);*/
}

.call-center a .lg-iddre {
    margin-top:                 18px;                                   
}

.call-center a:hover {
    cursor:                     pointer;
    transform:                  scale(1.1);
    transition:                 all 0.5s ease;
}

.hero-slides-content .cnt-txt-sld h2{
    font-size:                  30px;
    color:                      #1b1465;
}
.hero-slides-content .cnt-txt-sld h4{
    font-size:                  15px;
    color:                      #1b1465;
}
.effect-ext:hover{
    cursor:                     pointer;
    transform:                  translateY(-15px);
    box-shadow:                 0 12px 16px rgba(0,0,0,0.2); 
}
.cnt-vsdl{
    width:                      100%;
    /*border:                     solid 4px #FFCC00;*/
}
.btn-wsp{
    position:                   fixed;
    width:                      35px;
    height:                     35px;
    line-height:                45px;
    bottom:                     140px;
    right:                      50px;
    /*background:               #0df053;*/
    color:                      #fff;
    border-radius:              50px;
    text-align:                 center;
    font-size:                  30px;
    box-shadow:                 0px 1px 10px rgba(0,0,0,0.3);
    z-index:                    100;
}
.btn-wsp{
    text-decoration:    none;
    color:                      #0df053;	
    /*background:		#FFF;*/
}
.btn-wsp:hover{
    z-index:                    99;
    transform:                  scale(1.50);
    transition:                 all 0.5s;
}
.cnt-bt-rs{
   
    display:                    flex;
    /*flex-direction: column;*/
    flex-direction:             row;
    justify-content:            center;
    justify-content:            space-around;
    align-items:                center;
    /*height:                   80px;*/
    /*min-height:               80vh;*/
    width:                      350px;;
    margin:                     -8px;
    /*background: #e0e5ec;*/
   
    box-shadow:
    -7x  -7px  20px 0px #fff9,
    -4px -4px  5px  0px #fff9,
     7px  7px  20px 0px #0002, 
     4px 4px 5px 0px #0001, 
     inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001,
    inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
    border-radius: 10px;
    margin:auto;
    /*position: absolute;*/
    /*position: relative;*/
    bottom: 0; 
    
 
}
.btn-rs{
    height: 35px;
    width: 35px;
    border-radius: 10px;
    background: #e0e5ec;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    box-shadonw:
    -7x  -7px  20px 0px #fff9,
    -4px -4px  5px  0px #fff9,
     7px  7px  20px 0px #0002, 
     4px 4px 5px 0px #0001, 
     inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001,
    inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
    font-size: 16px;
    color: rgba(42,52,84,1);
    text-decoration: none;
}
.btn-rs:hover   { font-size: 22px; }
.facebook       { color: #1877f2;  }
.twitter        { color: #00acee;  }
.instagram      { color: #e1306c;  }

.btsub{
    background:     #000;
    color:          #FFF;
    display:        inline-block;
    display:        block;
    font-size:      1.25em;
    
    margin:         20px;
    padding:        10px 0px;
    text-align:     center;
    width:          200px;
    text-decoration: none;
    border-radius:  14px;
    box-shadow:     0px 3px 0px #373c3;
    cursor:         pointer;   
}
.btsub:hover{
    transform:          scale(1.1);
    transition:         all 300ms;
    background:         rgba(0,0,0,0.9);
    /*transform:          translateY(-10px);*/
    border:             none;   
}

.btx{
    width:              35px;
    height:             35px;
    cursor:             pointer;
    float:              right;
    /*border:             solid 1px #000;*/
}
.btx:hover{
    transform:          scale(1.3);
    transition:         all 300ms;
}



#bt-rs{
    width: 30px;
}
#bt-rs a:hover{
    cursor: pointer;
    transform: scale(1.0);
    transition: all 1s ease;   
}

/*Inicio menu Lateral Cpanel.php*/ 

aside{
    position:   fixed;
    z-index:    2000;
    left:       0;
    top:        250px;
    /*border:     solid 2px #FFCC00;*/
}
aside ul{
    list-style: none;
    
}

aside ul li{
    background:   #FFF;

}

aside ul li a{
    display:                inline-block;
    
    width:                  100%;
    padding:                10px 35px;
    color:                  #FFF;
    background:             #000;
    text-decoration:        none;
    -webkit-transition:     all 500ms ease;
    -o-transition:          all 500ms ease;
    transition:             all 500ms ease;
}

aside ul li a:hover{
    cursor:                 pointer;
    padding:                10px 80px;
    background:             rgba(0,0,0,.7);
}

aside ul li .btn-clid{ background: #000; }
aside ul li .btn-cat { background: #000; }
aside ul li .btn-pf  { background: #000; }
aside ul li .btn-nws { background: #000; }
aside ul li .btn-seg { background: #000; }
aside ul li .btn-trm { background: #000; }
aside ul li .btn-f1  { background: #000; }
/*Fin Menu Lateral Cpanel.php*/ 


/*Inicio dp-footer.php*/ 

footer{
    width: 100%;
    background: #101010;
    color: white;   
    
}

.container-footer-all{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 40px;
}

.container-body{
    display: flex;
    justify-content: space-between;
}

.colum1{
    max-width: 400px;
}

.colum1 h1{
    font-size: 22px;
}

.colum1 p{
    font-size: 14px;
    color: #C7C7C7;
    margin-top: 20px;
}

.colum2{
    max-width: 400px;
    
}

.colum2 h1{
    font-size: 22px;
}

.row{
    margin-top: 20px;
    display: flex;
}

.row img{
    width: 36px;
    height: 36px;
}

.row label{
    margin-top: 10px;
    margin-left: 20px;
    color: #C7C7C7;
}

.colum3{
    max-width: 400px;
}

.colum3 h1{
    font-size: 22px;
}

.row2{
    margin-top: 20px;
    display: flex;
}

.row2 img{
    width: 36px;
    height: 36px;
}

.row2 label{
    margin-top: 10px;
    margin-left: 20px;
    max-width: 140px;
}

.container-footer{
    width: 100%;  
    background: #101010;
}

.footer{
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;  
    padding: 20px;
}

.copyright{
    color: #C7C7C7;
}

.copyright a{
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.information a{
    text-decoration: none;
    color: #C7C7C7;
}

/*Fin dpfooter.php*/ 


.cnt-vrev_id {
 
   height: 50vh; 
   width: 50%;   

  /* Importante para que el video no se desborde si es más grande */
  overflow: hidden;
  position: relative; 
  padding: 20px;
}

.cnt-vrev_id video {
  /* Asegura que el video ocupe el 100% del ancho y alto de su contenedor padre */
  
  width: 100%;
  height: 100%;

  /* Mantener la relación de aspecto y llenar el contenedor.
     Si quieres que el video se vea completo sin recortarse (aunque deje bordes),
     cambia a 'contain'. */
  /*object-fit: cover;*/

  /* Asegura que el video se centre dentro del contenedor si este es más grande */
  /*object-position: center;*/
}


/* Contenedor para posicionar el botón */
.password-container {
    position: relative; /* Es clave para que el botón se posicione en relación a este div */
}

/* Estilo para el campo de contraseña dentro del contenedor */
.password-container .form-control {
    /* Puedes necesitar un poco de padding a la derecha si el botón queda pegado al texto */
    padding-right: 40px; 
}

/* Estilo para el botón de alternar visibilidad */
.toggle-password {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    right: 5px; /* Ajusta la distancia desde el borde derecho */
    transform: translateY(-50%); /* Ajuste fino para centrar verticalmente */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.2em; /* Tamaño del icono/texto */
    color: #333; /* Color del icono */
    line-height: 1; /* Para ayudar al centrado */
}

/* Opcional: Estilo al pasar el ratón */
.toggle-password:hover {
    color: #007bff;
}





/* --- Media Query para escritorios grandes (opcional, a partir de 1024px de ancho) --- */
@media (min-width: 180px) {
    .cnt-vsdl{ margin-top: 110px; }
}
@media (min-width: 1024px) {
    .academy-logo a img {
        max-width: 150px; /* Un poco más grande para pantallas muy grandes */
    }

    .barsocial-hd .nav-links li img {
        width: 35px; /* Iconos un poco más grandes para escritorio grande */
    }
}
@media screen and (max-width: 1100px){
    .cnt-vsdl{ margin-top: 110px; }
    .container-body{
        flex-wrap: wrap;
    }
    
    .colum1{
        max-width: 100%;
    }
    
    .colum2,
    .colum3{
        margin-top: 40px;
    }
}
/* --- Media Query para tabletas y escritorios (a partir de 768px de ancho) --- */
@media (min-width: 768px) {
    .cnt-vsdl{ margin-top: 130px; }
    .academy-logo {
        padding: 20px 30px;
    }

    .academy-logo a img {
        max-width: 120px; /* Tamaño del logo para escritorio */
    }

    .barsocial-hd .nav-links li {
        padding: 0 8px; /* Espacio entre iconos para escritorio */
    }

    .barsocial-hd .nav-links li img {
        /* *** ¡CAMBIO CLAVE AQUÍ! *** */
        width: 30px; /* Tamaño de los iconos para tabletas y escritorios */
    }
    .barsocial {
        flex-direction: column; /* Apila los elementos verticalmente en pantallas pequeñas */
        text-align: center;
    }

    .barsocial ul {
        flex-direction: row; /* Mantén los íconos en fila si caben */
        justify-content: center;
        width: 100%; /* Ocupa todo el ancho disponible */
    }

    .barsocial li {
        padding: 0 5px; /* Reduce un poco el padding en pantallas muy pequeñas */
        margin: 5px; /* Espacio uniforme entre iconos */
    }
    .cnt-tt {
        width: 100%;
        height: 150px;
        flex-direction: row;
    }

    .cnt-tt .bar-tt {
        width: 90%;
    }

    /* En pantallas más grandes, el texto y la imagen vuelven a estar en línea */
    .cnt-tt .bar-tt h3 {
        flex-direction: row; /* Vuelve a la dirección original */
        justify-content: center;
    }


}




@media(max-width: 640px) {
    .cnt-vsdl{ margin-top: 150px; }
}
@media screen and (max-width: 600px){
    
}
@media screen and (max-width: 568px){ 
    
    font-size: 12px;
    .cnt-gsec .sb-sec{ width: 100%;}  
}

@media (max-width: 480px) {
    .cnt-gsec .sb-sec{ width: 100%;} 
    .barsocial li {
        padding: 0 3px; /* Espacio mínimo para que quepan */
        font-size: 0.9em; /* Si son textos, reduce el tamaño de la fuente */
    }
    /* Si los iconos son imágenes, considera ajustar su tamaño si es necesario */
}


@media(max-width: 380px) {
    .cnt-gsec .sb-sec{ width: 100%;} 
     font-size: 16px;
}
@media(max-width: 320px) { 
 #bt-rs{    width: 20px; }
 .cnt-gsec .sb-sec{ width: 100%;}
}
@media(max-width: 240px) {  .cnt-gsec .sb-sec{ width: 100%;}  }
    



/*  ^^^^^^^^^^^^^^^^^^ Asegura que el margin-top del header-area sea 0 siempre ^^^^^^^^^^^^  */
.header-area {
    margin-top: 0 !important;
}

/* También, verifica si hay un margen o padding en el body que esté causando el espacio */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Media queries específicas para anular cualquier estilo problemático */
@media only screen and (max-width: 991px) {
    .header-area {
        margin-top: 0 !important;
    }
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media only screen and (max-width: 768px) { /* Específico para tu problema en 768px */
    .header-area {
        margin-top: 0 !important;
    }
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media only screen and (max-width: 767px) {
    .header-area {
        margin-top: 0 !important;
    }
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}