.container {
    display: flex; /* Usa un diseño de caja flexible */
    align-items: center; /* Centra los elementos verticalmente */
}



/* Establecer el color de fondo */


.principal {
   
    background-color: #333A42;    
    margin: 0; 
}

/* Estilos para la cabecera */


.encabezado {
    height: 13vh; 
    background-color: #D6D6D6; 
    display: flex; 
    align-items: center; 
}

.encabezado .container_mio {
    display: flex; 
  /*  justify-content: flex; /* Alinea el contenido a la izquierda */
    align-items: center;
    width: 100%;
}

.encabezado .logo img {
    max-height: 100%; /* Asegúrate de que la imagen no exceda la altura del encabezado */
    margin-left: 20px;
}

.encabezado .titulo {
    margin-left: 20px; /* Añade un poco de espacio entre el logo y el título */
    margin: 0;
}

.encabezado .titulo h1 {
    font-size: clamp(16px, 1.3vw, 24px);
    /*font-size: 1.3vw;*/
    font-weight: 400;     
    margin: 0;
    margin-left: 10px;

}



.encabezado .menu {
    display: flex;     
    list-style: none; /* Elimina los puntos de la lista */
    text-align: right;
    margin: 0; /* Elimina los márgenes predeterminados */
    margin-left: 35vw;  
}

.encabezado .menu li {
    margin: 0px;
    margin-left: 20px; /* Añade espacio entre los elementos del menú */
}

.encabezado .menu a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: #000; /* Cambia el color del texto del menú */
    font-size: 1.2vw; /* Ajusta el tamaño del texto del menú */
}




/* Estilos para el menú colapsable */
.encabezado .menu-toggle {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .encabezado  .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        border-top: 1px solid #ccc;
    }
    
    .encabezado  .menu li {
        margin: 0;
        text-align: center;
        margin-bottom: 1rem;
    }
    .encabezado .menu-toggle {
        display: block;
    }
    
    .encabezado .menu-open  .encabezado .menu {
        display: flex;
    }
}


/* Estilos para el Pie */
.piedepagina {
   /* height: 40vh; */
    width: 100%;
   /* position: flex;*/
    bottom: 0;
   /* padding: 5%;*/
    background-color: #000000; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #dadada
   
    
}

.piedepagina .pdp_contenedor {
  
    padding: 20px; /* Relleno interno para el contenedor */
    padding-top: 4%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.piedepagina .seccion_sup {
  /* display: flex;
    flex-direction: column;
    align-items: flex-start;
   */
}

.piedepagina  .seccion_sup .logo {
    
    text-align: center; /* Centra el texto dentro del logo */
   
}


.piedepagina .seccion_sup .logo img {
    max-width: 100px; /* Ajusta el tamaño máximo de la imagen del logo */   
    height: auto; /* Mantiene las proporciones de la imagen */
    margin-right: 50px;
 
}
.piedepagina .seccion_sup .logo img:last-child {
    margin-right: 0; /* Elimina el margen de la última imagen */
}

.piedepagina .seccion_sup.logo h2 {
    font-size: 1.5rem; /* Tamaño del título */
    margin: 0; /* Elimina márgenes adicionales */
}

.piedepagina  .seccion_med {
    padding-top: 8%;
}

.piedepagina  .seccion_med .menu-items {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el relleno interno de la lista */
   /* margin: 0; /* Elimina el margen de la lista */    
    text-align: left; /* Centra el texto de los ítems */
}

.piedepagina  .seccion_med .menu-items li {
    margin-top: 5px ;
    margin-bottom: 5px; /* Espacio inferior entre los ítems */
    font-size: 1rem; /* Tamaño del texto de los ítems */
}

.piedepagina  .seccion_med .menu-items i {
    margin-right: 8px; /* Espacio entre el ícono y el texto */
    color: #bbbbbbda; /* Cambia el color del ícono si es necesario */
}


.piedepagina .seccion_inf {
    text-align: center; /* Centra el texto del copyright */
}

.piedepagina .seccion_inf p {
    margin: 0; /* Elimina márgenes adicionales */
    font-size: 0.9rem; /* Tamaño del texto del copyright */
}


.piedepagina .logo-unsjffha {
    display: flex;
    align-items: center; 
}

.piedepagina .logo-unsjffha img {
    margin-right: 15px; 
    max-height:50px; 
   
}

.piedepagina .logo-unsjffha h3 {
    font-size: 1.5rem; 
    margin: 0; 
}

.piedepagina a {
    color: #D6D6D6;
    text-decoration: none;
    font-weight: normal;
    transition: font-weight 0.3s;
}

.custom-piedepagina a:hover {
    font-weight: bold;
    text-decoration: none;
}

/* Estilos para el logo */

.logo {
    flex: 0 0 auto; 
}

.logo img {
  
    width: clamp(40px, 6vw, 65px); /* Ajusta según necesidades */
  
    /*max-width: 65px; /* Ajusta el tamaño máximo del logo según tus necesidades */
}







/*###############################################

/* Estilos adicionales para el contenido */
.custom-content {
    padding: 20px;     
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}

/* Estilos adicionales para hacer el contenido responsivo */
@media (min-width: 576px) {
    .custom-content {
        padding: 30px; /* Aumenta el espacio de relleno en dispositivos pequeños */
    }
}
@media (min-width: 992px) {
    .custom-content {
        padding: 40px; /* Aumenta el espacio de relleno en dispositivos medianos y grandes */
    }
}


.mi_caja_de_titulo {
    
    padding: 50 0;   /* Reduce el espacio interno */
    margin: 0 auto;    /* Centra el contenedor horizontalmente */
    height: 50px;
}

.mi_titulo{
    width: 100%;   
    padding: 5px;
    color: #D6D6D6;
    margin: 0 auto; /* Centra el div horizontalmente */
    text-align: center; /* Centra el texto dentro del div */
}

/* Estilos para los Cajas  personalizados */
.mis_cajas {  
    border-radius: 5px; /* Añade bordes redondeados al contenedor */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Agrega una sombra al contenedor */
    padding: 15px; /* Agrega un espacio de relleno al contenedor */
    margin-bottom: 20px; /* Agrega un margen inferior al contenedor */
    text-align: center;
    height: 250px; /* Define un alto fijo */
    overflow: hidden; /* Oculta el contenido que sobrepase la altura */    
}

/* Estilos para las imágenes dentro de los contenedores */
.mis_cajas img {
    width: 30%; /* Establece el ancho de la imagen al 25% del contenedor */
    float:center  ; /* Hace que la imagen flote a la izquierda del contenedor */
   /* margin-right: 5px; /* Agrega un margen derecho a la imagen */
}

/* Estilos para los títulos dentro de los contenedores */
.mis_cajas h3 {
    margin-top: 0; /* Elimina el margen superior predeterminado del título */
    font-size: 1.5rem; /* Ajusta el tamaño del título */
    margin-top: 10px; /* Añade un margen superior */
    margin-bottom: 10px; /* Añade un margen inferior */
}

.mis_cajas p {
    font-size: 1rem; /* Ajusta el tamaño de la descripción */
    color: #3b3b3bd2; /* Ajusta el color del texto del párrafo */
}

.mis_cajas .texto_blanco{
    font-size: 1rem; /* Ajusta el tamaño de la descripción */
    color: #f0ededd2; /* Ajusta el color del texto del párrafo */
}


/* Efecto de agrandamiento para imágenes al pasar el ratón */
.mis_cajas img {
    transition: transform 0.3s ease; /* Aplica una transición suave */
}

.mis_cajas img:hover {
    transform: scale(1.25); /* Agranda la imagen un 15% */
}

.mis_cajas a:hover{
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: #ffffff; /* Cambia el color del texto del menú */
     
}

.enlace_externo {
    text-decoration: underline; /* Añade subrayado al enlace */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
    color: inherit; /* Hereda el color del estilo actual del h3 */
}

.enlace_externo:hover {
    color: #007bff; /* Cambia el color del enlace al pasar el ratón, opcional */
}