body, html {
	font-family: 'Raleway', sans-serif;
	text-rendering: optimizeLegibility !important;	
	color: #777;
	font-weight: 800;
	width: 100% !important;
	height: 100% !important;
	
}
html {
   
    scroll-behavior: auto; /* Desactiva el desplazamiento suave */

}

.fecha {
    display: inline-block; /* Mostrar la fecha en línea pero en un bloque */
    margin-top: 5px; /* Agregar un margen superior para separar la fecha de la descripción */
    font-weight: bold;
    
}

h0 {
    display: block;
   	font-size: 22px;
	color:#f29f05;
    text-transform: uppercase;
    font-weight: bold;
    
}

h1 {
	margin: 0 auto 20px auto; /* Centrar horizontalmente y agregar margen en la parte inferior */
    max-width: 200px; /* Establecer un ancho máximo para el texto */
    font-weight: 600;
    font-size: 11px;
    color: #f29f05;  
    text-align: center; /* Centrar el texto dentro del contenedor */
	  /* text-transform: lowercase;*/	
}

h2 {
	margin: 0 0 20px 0;
	font-weight: 500;
	font-size: 34px;
	color: #333;
	text-transform: uppercase;	
}


h3 {
	font-size: 22px;
	font-weight: 500;
	color: #333;
}

h5 {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 20px;
}

h6 {
    display: block;
	font-size: 22px;
	font-weight: 400;
	color:white;
    text-transform: uppercase;
}

h7 {
    display: block;
    font-size: 42px;
    font-weight: bold; 
    color: white;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */


.home-link i {
    font-size: 1.2em;
    color: #f29f05; /* Cambia al color de tu preferencia */
    transition: transform 0.3s, color 0.3s;
}

.home-link:hover i {
    transform: scale(1.3);
    color: #012340; /* Color de hover */
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */


/* INICIO  * LOGO */


/* Estilo del logo renombrado */
.navbar-brand-logo {
    display: flex;
    align-items: center;
    padding: 0; /* Elimina el padding para un mejor ajuste */
}

.navbar-brand-logo img {
    max-width: 160px; /* Tamaño máximo del logo */
    height: auto; /* Mantiene la proporción */
    margin-top: -80px; /* Sube más el logo ajustando el margen superior */
    transition: all 0.3s ease-in-out; /* Efecto de transición */
  
}

/* Estilo cuando el usuario hace scroll */
.navbar.navbar-default.navbar-fixed-top.scrolled .navbar-brand-logo img {
    max-width: 120px; /* Reduce el tamaño del logo al hacer scroll */
    height: auto;
    margin-top: -50px; /* Mantiene el logo más alto al hacer scroll */
}




/* Estilo para pantallas móviles */
@media (max-width: 768px) {
    .navbar-brand-logo img {
        max-width: 140px; /* Ajuste para dispositivos móviles */
        height: auto;
        margin-top: 0; /* Sube el logo en móviles */
    }
}


/* FIN LOGO */

/* -------------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------------- */


/* MENU PANTALLA GRANDE */



img {
    max-width: 100%;
    height: auto;
}

a {
    color: #f29f05;
    transition: all 0.3s ease;
}

a:hover, a:focus {
    color: #ffcc00;
    text-decoration: none;
}

ul, ol {
    list-style: none;
    padding: 0;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}


/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* Social Bar */
#social-bar {
    width: 100%;
    background: linear-gradient(95deg, #024b80, #012340);
    padding: 10px 0;
    position: fixed;
    top: 0;
    z-index: 1001;
    text-align: right;
}

#social-bar ul {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#social-bar ul li a {
    color: #ffffff;
    padding: 1px;
    font-size: 16px; /* Ajusta el tamaño según tus preferencias */
}

#social-bar ul li a:hover {
    color: #f29f05;
}

/* Estilos generales para los íconos de la barra social */
#social-bar ul li a i {
    color: #ffffff;
    transition: color 0.3s ease, transform 0.3s ease;
    font-size: 28px; /* Tamaño de ícono en pantallas grandes */
    padding: 5px;
}

#social-bar ul li a i:hover {
    color: #f29f05; /* Color al pasar el cursor */
    transform: scale(1.1); /* Efecto de escala al pasar el cursor */
}

/* Responsive para pantallas medianas */
@media (max-width: 1024px) {
    #social-bar ul li a i {
        font-size: 22px; /* Tamaño de ícono en pantallas medianas */
        padding: 4px;
    }
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
    #social-bar {
        background: #012340; /* Fondo sólido en dispositivos móviles */
        padding: 8px 0;
    }

    #social-bar ul {
        gap: 8px;
        justify-content: center;
    }

    #social-bar ul li a i {
        font-size: 20px; /* Tamaño más pequeño en móviles */
        padding: 3px; /* Reducir padding */
    }
}



/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* Main Menu */
#menu {  
  
    transition: all 0.3s ease;
    margin-top: 50px; /* Aumenta el margen superior para bajar el menú */
   
}


#menu.navbar-default {
    background: rgba(0, 0, 0, 0);  
    border: none;
    padding: 9px 0;
    margin-top: 55px; /* Ajuste para la barra fija */
}

#menu .navbar-nav > li > a {
    color: #ffffff;
    font-size: 15px;
    padding: 10px 15px;
    text-transform: uppercase;
    background-color: rgba(0, 74, 128, 0.6); /* Color azul sutil */
    transition: background-color 0.3s ease; /* Suave transición al cambiar de color */
}

#menu .navbar-nav > li > a:hover {
    background-color: rgba(242, 159, 5, 0.2); /* Fondo más brillante al pasar el mouse */
    color: #f29f05; /* Color de texto al pasar el mouse */
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: #024b80;
    border-radius: 5px;
    display: none; /* Oculta el menú por defecto */
    position: absolute;   
    margin-top: 0;     
    width: auto; /* Ajusta el ancho automáticamente */
    min-width: unset; /* Elimina el ancho mínimo si está definido */
   
}

.dropdown-menu li a {
    color: #ffffff;
     padding: 10px 15px; /* Ajusta el padding para un mejor espacio entre los elementos */
    
    
}

.dropdown-m
enu li a:hover {   
    background-color: rgba(242, 159, 5, 0.2); /* Fondo más brillante al pasar el mouse */
    color: #ffffff; /* Color de texto al pasar el mouse */
}



.dropdown-menu > li {
    position: relative;
}

.dropdown-menu > li > a {
    padding: 10px 20px; /* Aumenta el padding para un mejor espacio entre elementos */
}

.dropdown-menu li a:hover {
    background-color: #f29f05;
}


/* Ajuste para submenús */

.dropdown-submenu > a:after {
    content: "▸"; /* Agrega un símbolo para indicar que hay un submenú */
    float: right;
    margin-right: 10px;
}


/* Estilo para que el menú se despliegue al pasar el mouse */
.navbar-nav > li:hover > .dropdown-menu {
    display: block; /* Muestra el menú al hacer hover */
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block; /* Muestra el submenú al hacer hover */
}


.dropdown-submenu > .dropdown-menu {
    left: 100%; /* Alinea los submenús a la derecha */
    top: 0;
    margin-left: 0;
    
}


.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* Muestra el submenú a la derecha */
    margin-top: -1px; /* Alineación con el menú principal */
    border-radius: 0 5px 5px 5px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block; /* Mostrar el submenú al hacer hover */
    opacity: 1;
    visibility: visible;
}


/* Estilo para mostrar los submenús a la derecha */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* Muestra el submenú a la derecha */
    margin-top: -1px; /* Alineación con el menú principal */
    border-radius: 0 5px 5px 5px;
}

.dropdown-submenu > .dropdown-menu {
    min-width: 220px; /* Ancho del submenú secundario */
    left: 110%; /* Mayor separación hacia la derecha */
    margin-left: 0.1px; /* Espacio entre menú y submenú */
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}




/* Asegúrate de que el submenú tenga un ancho automático */
.navbar-nav .dropdown-menu {
    width: auto; /* Permitir que el ancho se ajuste automáticamente */
    min-width: 150px; /* Establecer un ancho mínimo para una mejor apariencia */
}

/* Ajustar el sub-submenú */
.navbar-nav .dropdown-submenu .dropdown-menu {
    width: auto; /* Asegurarse de que el ancho se ajuste automáticamente */
    min-width: 190px; /* Establecer un ancho mínimo */
    left: 100%; /* Alinear a la derecha del submenú */
    top: 0; /* Alinear con la parte superior del submenú */
}

/* Opcional: agregar padding para mejorar la apariencia */
.navbar-nav .dropdown-menu > li > a {
    padding: 10px 15px; /* Espaciado dentro de los elementos del menú */
}

/* Opcional: establecer un fondo y un color de texto */
.navbar-nav .dropdown-menu > li > a {
    background-color: rgba(0, 74, 128, 0.6); /* Color de fondo sutil */
    color: #ffffff; /* Color del texto */
}

/* Cambiar el color de fondo al hacer hover */
.navbar-nav .dropdown-menu > li > a:hover {
    background-color: rgba(242, 159, 5, 0.6); /* Fondo más brillante al pasar el mouse */
    color: #ffffff; /* Color de texto al pasar el mouse */
}




/* FIN MENU PANTALLA GRANDE */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */


/* MENU PANTALLA MOVIL */

.navbar-toggle {
    background-color: transparent; /* Cambia el fondo si es necesario */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de puntero */
    outline: none; /* Sin contorno */
}

.navbar-toggle .bar1, 
.navbar-toggle .bar2, 
.navbar-toggle .bar3 {
    display: block; /* Asegura que los span se comporten como bloques */
    width: 35px; /* Ancho de las barras */
    height: 5px; /* Altura de las barras */
    margin: 6px auto; /* Margen automático para centrar */
    background-color: #f29f05; /* Color de las barras */
    transition: all 0.3s; /* Transición suave */
}

/* Estilo para cuando el botón se activa */
.navbar-toggle.active .bar1 {
    transform: rotate(45deg) translate(6px, 6px); /* Rotación y desplazamiento */
}

.navbar-toggle.active .bar2 {
    opacity: 0; /* Oculta la barra del medio */
}

.navbar-toggle.active .bar3 {
    transform: rotate(-45deg) translate(7px, -8px); /* Rotación y desplazamiento */
}




/* FIN MENU PANTALLA MOVIL */



/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    #social-bar {
        background: #012340; /* Cambia a un solo color para móviles */
        padding: 8px 0;
    }

    #social-bar ul {
        gap: 8px;
        justify-content: center; /* Centra los íconos en móviles */
    }

    #social-bar ul li a {
        font-size: 7px; /* Tamaño de fuente más pequeño para móviles */
        padding: 1px; /* Reducir padding interno */
    }
}



/* -------------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------------- */

/*  MENU PANTALLA MOVIL */


#menu {  
    transition: all 0.3s ease;
    margin-top: 50px; /* Aumenta el margen superior para bajar el menú */
}

/* Estilo para dispositivos móviles */
@media (max-width: 768px) {
    #menu.navbar-default {
       background: linear-gradient(2deg, #024b80, #012340);
        border: none;
        padding: 9px 0;
        margin-top: 55px; /* Ajuste para la barra fija */
    }

    #menu .navbar-nav > li > a {
        color: #ffffff; /* Color de texto blanco para enlaces del menú */
        font-size: 15px;
        padding: 10px 15px;
        text-transform: uppercase;
    }

    #menu .navbar-nav > li > a:hover {
        color: #f29f05; /* Color de texto en hover */
    }

    /* Dropdown Menu */
    .dropdown-menu {
        background-color: #E0E0E0; /* Fondo amarillo para submenús */
        border-radius: 5px;
        display: none; /* Oculta el menú por defecto */
        position: absolute;   
        margin-top: 0;
        z-index: 1000; /* Asegura que el menú se superponga sobre otros elementos */
        width: 100%; /* Para que el submenú tenga el mismo ancho que el menú principal */
    }

    .dropdown-menu li a {
        color: #000; /* Color de texto negro para enlaces de submenús */
        padding: 10px 15px; /* Ajusta el padding para un mejor espacio entre los elementos */
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    }

    .dropdown-menu li a:hover {
        background-color: #f29f05; /* Fondo en hover para submenús */
    }

    /* Ajuste para submenús */
    .dropdown-submenu > a:after {
        content: "▸"; /* Agrega un símbolo para indicar que hay un submenú */
        float: right;
        margin-right: 10px;
    }

    .navbar-nav > li:focus-within > .dropdown-menu,
    .navbar-nav > li:hover > .dropdown-menu {
        display: block; /* Muestra el menú al hacer hover o al enfocarlo */
        top: 100%; /* Coloca el submenú debajo del elemento principal */
        left: 0; /* Alinea el submenú al borde izquierdo */
        transition: all 0.3s ease-in-out; /* Transición suave */
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block; /* Muestra el submenú al hacer hover */
        top: 100%; /* Coloca el sub-submenú debajo del submenú */
        left: 0; /* Alinea el sub-submenú al borde izquierdo */
    }

    .dropdown-submenu > .dropdown-menu {
        background-color: gray; /* Fondo morado para sub-submenús */
        width: 100%; /* Asegura que el sub-submenú tenga el mismo ancho que el menú principal */
     
    }

    .dropdown-submenu > .dropdown-menu li a {
    color: #ffffff; /* Color de texto blanco para enlaces de sub-submenús */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    padding: 8px 12px; /* Espaciado interno ajustado */
    font-size: 15px; /* Tamaño de fuente */
    display: block; /* Asegura que ocupe todo el ancho disponible */
    width: auto; /* Ajuste automático del ancho */
    text-align: left; /* Alineación a la izquierda */
    box-sizing: border-box; /* Incluye padding en el tamaño total */
              
    }

    .dropdown-submenu > .dropdown-menu li a:hover {
        background-color: #f29f05; /* Fondo en hover para sub-submenús */
    color: #ffffff; /* Asegura que el color del texto permanezca blanco */
    }
        

    .dropdown-submenu {
        position: relative;
    }

    /* Mejora la interacción para pantallas táctiles */
    .dropdown-submenu > a {
        cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
    }

    .dropdown-submenu:focus-within > .dropdown-menu {
        display: block; /* Muestra el submenú al hacer clic */
    }
}

/*  FIN MENU PANTALLA MOVIL */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* Background Video */
#index {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Intro Overlay */
.intro {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* FIN MENU */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */


/* CUADRO CENTO VIDEO INDEX*/
.transparent-box {
    background: linear-gradient(135deg, rgba(242, 159, 5, 0.7), rgba(1, 35, 64, 0.7)); /* Degradado con transparencia */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 500px; /* Ajusta el ancho máximo aquí */
    max-height: 400px; /* Ajusta la altura máxima aquí */
    width: 100%;
    height: auto; /* Ajusta automáticamente la altura según el contenido */
    overflow: auto; /* Permite el desplazamiento si el contenido es más grande */
    text-align: center;
    position: absolute; /* Permite mover el cuadro con respecto al contenedor */
    right: 20px; /* Ajusta la distancia del borde derecho aquí */
    top: 35%; /* Centra verticalmente el cuadro */
    transform: translateY(-0%); /* Ajusta la posición vertical para centrar el cuadro */
}

.home-banner__wrapper {
    position: relative;
    overflow: hidden;
}

.home-banner__sliders {
    position: relative;
}

.home-banner__slider__drag {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.home-banner__slider__item {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.home-banner__slider__content {
    text-align: center;
}

.home-banner__slider__heading {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 10px;
}

.home-banner__slider__buttons {
    margin-top: 20px;
}

.home-banner__slider__buttons .btn {
    display: block;
    margin: 5px auto;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;  
	background: linear-gradient(90deg, #012340, #024b80);
}

.home-banner__slider__buttons .btn:hover {
    background-color: #004577;
}

.carousel-indicators {
    position: absolute;
    bottom: 1px;
    left: 100%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.indicator {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.indicator.active {
    background-color: #004577;
}

.control-button {
    background-color: transparent;
    color: #fff;
    border: none;
    padding: 1px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    position: absolute;
    bottom: 1px;
    left: 95%;
    transform: translateX(-50%);
}

.pause-button {
    right: 10px;
	
}

.loader {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 8px solid #f3f3f3;
    border-top: 8px solid #4CAF50;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    display: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ajustes generales para dispositivos móviles y tabletas */
@media (max-width: 768px) {
    .transparent-box {
        max-width: 90%; /* Ajusta el ancho para que ocupe un 90% del ancho de la pantalla */
        padding: 15px; /* Reduce el padding para dispositivos más pequeños */
        right: 10px; /* Reduce la distancia del borde derecho */
        top: 30%; /* Ajusta la posición vertical */
        font-size: 0.9rem; /* Ajusta el tamaño del texto */
    }

    .home-banner__slider__heading {
        font-size: 1.4rem; /* Reduce el tamaño de los encabezados en pantallas pequeñas */
    }

    .home-banner__slider__buttons .btn {
        font-size: 0.9rem; /* Reduce el tamaño del botón */
        padding: 8px; /* Ajusta el padding de los botones */
    }

    .carousel-indicators {
        bottom: 10px; /* Ajusta la distancia desde la parte inferior */
        left: 100%;    /* Centra los indicadores horizontalmente */
        transform: translateX(-50%); /* Mantén la posición centrada */
        gap: 3px; /* Reduce el espacio entre los puntos para móviles */
    }

    .indicator {
        width: 8px; /* Reduce el tamaño de los indicadores */
        height: 8px;
    }

    .control-button {
        font-size: 0.8rem; /* Reduce el tamaño del botón de control */
    }

    .loader {
        width: 40px; /* Reduce el tamaño del loader */
        height: 40px;
    }
}

@media (max-width: 480px) {
    .transparent-box {
        max-width: 100%; /* El cuadro ocupará todo el ancho en dispositivos muy pequeños */
        right: 5px; /* Aún más cerca del borde */
        top: 25%; /* Ajuste adicional para pantallas muy pequeñas */
    }

    .home-banner__slider__heading {
        font-size: 1.2rem; /* Ajuste adicional del tamaño del encabezado */
    }

    .home-banner__slider__buttons .btn {
        font-size: 0.8rem; /* Botones aún más pequeños */
        padding: 6px;
    }

    .control-button {
        font-size: 0.7rem; /* Botón más pequeño */
    }
}

/* FIN IMAGEN FONDO POLITICAS / CAJA VIDEO */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* BOTOMNES ENVIAR  */
.section-title p {
	font-size: 22px;
	color: rgba(255,255,255,0.8);
}
.section-title hr {
	margin: 0 auto;
	margin-bottom: 1px;
}
.btn-custom {
	text-transform: uppercase;
	color: #fff;
	background-color: #f29f05;
	border: 0;
	padding: 14px 20px;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	border-radius: 0;
	margin-top: 2px;
	transition: all 0.5s;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom.focus, .btn-custom:active, .btn-custom.active {
	color: #fff;
	background-color: #004577;
    
}

/* FIN BOTOMNES ENVIAR  */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */


/* QUIENES SOMOS */

/* Ajuste general del header */
#quienes_somos {
    padding: 80px 0; /* Ajuste el padding superior para bajar las columnas */
    background: url('../miner/nueva_galeria/pagina_web/web-miner.jpeg') no-repeat center center fixed;
    background-size: cover;
}

#series {
    padding: 80px 0; /* Ajuste el padding superior para bajar las columnas */
    background: url('../miner/nueva_galeria/pagina_web/publicaciones2.jpeg') no-repeat center center fixed;
    background-size: cover;
}

#noticias {
    padding: 80px 0; /* Ajuste el padding superior para bajar las columnas */
    background: url('../miner/nueva_galeria/pagina_web/publicaciones.jpeg') no-repeat center center fixed;
    background-size: cover;
}

/* Contenedor general */
.content-wrapper {
    display: flex;
    align-items: flex-start; /* Alinear al inicio verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    gap: 20px; /* Espaciado entre columnas */
    padding: 50px;
}


/* Columna de menú a la izquierda */
.menu-dinamico {
    background: rgba(1, 35, 64, 0.4);
    padding: 1px;   
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    list-style-type: none;
    width: 100%; /* Ajustar a la pantalla */
    max-width: 250px; /* Ancho máximo reducido para hacerlo más compacto */
    transition: transform 0.3s ease;
     /*border: 1px solid #012340; /* Borde de 3px con color azul oscuro */
    
    /* Desplazamiento con posición */
    position: relative; /* Cambia a relativo para ajustar con top y left */
    left: -40px; /* Desplaza hacia la izquierda */
    top: 30px; /* Desplaza hacia abajo */
}


.menu-dinamico:hover {
    transform: scale(1.02); /* Aumentar ligeramente al pasar el mouse */
}

.menu-dinamico li {
    margin: 1px 0; /* Reducir el espaciado entre los elementos */
   
	 
}

.menu-dinamico a {
    color: #fff;
    text-decoration: none;
    font-size: 16px; /* Tamaño de fuente más compacto */
    padding: 8px; /* Reducir padding interno */
    display: block;
    border-radius: 10px; /* Bordes más cuadrados */
    transition: background 0.3s ease, color 0.3s ease;
    text-align: left; /* Alinear el texto a la izquierda */
    border-bottom: 2px solid #f29f05; /* Línea inferior de 2px con color naranja */
}

/* fondo menu */
.menu-dinamico a:hover {
    background: #f29f05;
    color: #012340;
}

/* Columna de contenido a la derecha */
.contenido-dinamico {
    
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 800px;
    position: relative;
    overflow: hidden;
    color: #ffffff; /* Texto en color blanco */
}

/* Títulos del contenido */
.contenido-dinamico h2 {
    color: #fff; /* Color naranja para el título */
    transition: color 0.3s ease;
    font-size: 28px; /* Tamaño de fuente más prominente */
    margin-bottom: 15px; /* Espaciado debajo del título */
}

.contenido-dinamico h2:hover {
    color: #f29f05 ; /* Cambiar a un tono más claro al pasar el mouse */
}

/* Párrafo del contenido */
.contenido-dinamico p {
    font-size: 16px; /* Tamaño de fuente del contenido */
    line-height: 1.6; /* Espaciado entre líneas */
}

/* Contenido dinámico */
.contenido {
    display: none;
}

.contenido.activo {
    display: block;
}

.contenido .ver-mas {
    display: none;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}

.contenido .texto-largo {
    max-height: 200px; /* Altura máxima visible antes de mostrar "ver más" */
    overflow: hidden;
    position: relative;
}

.contenido .texto-largo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(242, 159, 5, 0) 0%, rgba(242, 159, 5, 0.7) 100%);
}

/* Flecha para ver más */
.contenido .ver-mas::after {
    content: '▼';
    margin-left: 10px;
}

/* Ajustes responsivos para tabletas */
@media (max-width: 992px) {
    .content-wrapper {
        flex-direction: column; /* Columnas una sobre otra */
        align-items: center; /* Centrar elementos */
        gap: 30px; /* Espaciado entre columnas */
    }

    .menu-dinamico {
        max-width: 100%; /* Ancho completo en tabletas */
        text-align: center; /* Centrar texto */
    }

    .contenido-dinamico {
    max-width: 100%; /* Ancho completo en tabletas */
    background: linear-gradient(135deg, #b0c4de, #d3d3d3);
    padding: 10px;
    border-radius: 10px;
   
    }
}

/* Estilos generales del contenido */
.contenido {
    display: none; /* Ocultar por defecto */
    padding: 20px;
    border-radius: 15px;
    background: rgba(1, 35, 64, 0.7);
}

.contenido.activo {
    display: block; /* Mostrar el contenido activo */
}

/* Título principal */
.titulo-principal {
    font-size: 32px;
    color: #f29f05; /* Color naranja */
    margin-bottom: 20px;
    text-align: center;
}

/* Contenedor de tarjetas */
.card-container {
    display: flex;
    flex-wrap: wrap; /* Para adaptarse al tamaño del contenedor */
    gap: 20px; /* Espacio entre las tarjetas */
    justify-content: center; /* Centrar tarjetas */
}

/* Estilos para cada tarjeta */
.card {
    background: rgba(255, 255, 255, 0.1); /* Fondo con ligera transparencia */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde claro */
    border-radius: 10px; /* Bordes redondeados */
    padding: 15px 20px;
    width: calc(50% - 40px); /* Ancho de las tarjetas (ajustable) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #ffffff; /* Texto en blanco */
    cursor: pointer; /* Cursor de puntero */
}

/* Ocultar contenido de la tarjeta por defecto */
.card .card-content {
    display: none;
    margin-top: 10px; /* Separación con el título */
}

.card:hover {
    transform: translateY(-5px); /* Elevar tarjeta al pasar el mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Mostrar contenido al pasar el mouse */
.card:hover .card-content {
    display: block;
}

/* Estilos para los títulos de las tarjetas */
.card h3 {
    font-size: 22px; /* Tamaño del título de la tarjeta */
    color: #f29f05; /* Color naranja */
    margin-bottom: 10px; /* Espaciado debajo del título */
    transition: color 0.3s ease;
}

.card h3:hover {
    color: #ffcc00; /* Cambiar color al pasar el mouse */
}

/* Estilos para el contenido de las tarjetas */
.card p {
    font-size: 16px; /* Tamaño del texto */
    line-height: 1.6; /* Espaciado entre líneas */
}

/* Ajustes responsivos para tabletas */
@media (max-width: 992px) {
    .card {
        width: calc(100% - 40px); /* Ancho completo en tabletas */
    }
}

/* Ajustes responsivos para móviles */
@media (max-width: 576px) {
    .titulo-principal {
        font-size: 28px; /* Reducir tamaño del título principal */
    }

    .card {
        width: 100%; /* Ancho completo en móviles */
    }
}

/* Caja con desplazamiento para el contenido extenso */
.contenido-scroll {
    max-height: 500px; /* Limitar la altura de la caja */
    overflow-y: auto; /* Agregar desplazamiento vertical */
    padding-right: -40px; /* Espacio para la barra de desplazamiento */
    margin-bottom: 20px;
   /* border: 3px solid rgba(242, 159, 5, 0.7); /* Borde que combina con el diseño */
    border-radius: 10px;
    background: rgba(1, 35, 64, 0.7); /* Fondo semi-transparente para resaltar */
    padding: 20px;
}

/* Flecha quienes somos  */

/* Mantiene los estilos originales de la caja de contenido */
.contenido-gobierno {
    padding: 20px;
    background-color: #fff; /* No cambia el fondo de la caja */
    color: inherit; /* Mantiene el color del texto */
    border-radius: inherit; /* Mantiene el radio de borde original */
    box-shadow: inherit; /* Mantiene la sombra original */
    overflow-y: auto; /* Scroll solo si es necesario */
    max-height: 400px; /* Altura máxima para habilitar el scroll */
}

/* Estilos para el indicador de scroll en la sección gobierno */
.scroll-indicator-gobierno {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    color: #f29f05; /* Color del ícono de la flecha */
    cursor: pointer;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    z-index: 10; /* Asegura que esté por encima del contenido */
}

/* Animación de rebote de la flecha */
.scroll-indicator-gobierno i {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(5px);
    }
    60% {
        transform: translateY(2px);
    }
}

/* Oculta el indicador al hacer scroll */
.scroll-indicator-gobierno.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Ajustes generales para móviles */

@media (max-width: 576px) {
    .contenedor {
        padding-top: 20px; /* Ajusta el valor según tus necesidades */
        min-height: 100vh; /* Asegura que llene toda la altura */
    }
}


@media (max-width: 576px) {

    /* Ajuste de padding del header */
    #quienes_somos {
        padding: 80px 0; /* Reducir padding superior en móviles */
        background-position: center center; /* Ajustar la imagen para móviles */
    }

    /* Ajustes del contenedor general */
    .content-wrapper {
        flex-direction: column; /* Cambiar a diseño de columnas */
        padding: 30px; /* Reducir el padding en móviles */
    }

    /* Menú dinámico a la izquierda */
    .menu-dinamico {
        max-width: 100%; /* Ancho completo para el menú */
        text-align: center; /* Centrar el texto del menú */
        left: 0; /* Alinear menú sin desplazamiento */
        top: 0; /* Quitar el desplazamiento vertical */
        padding: 10px; /* Reducir el padding del menú */
    }

    .menu-dinamico a {
        font-size: 14px; /* Reducir el tamaño de la fuente */
        padding: 6px; /* Reducir el padding interno */
    }

    /* Contenido dinámico a la derecha */
    .contenido-dinamico {
        max-width: 100%; /* Ancho completo para el contenido */
        padding: 15px; /* Reducir el padding */
    }

    /* Títulos del contenido */
    .contenido-dinamico h2 {
        font-size: 24px; /* Reducir tamaño del título en móviles */
    }

    /* Contenedor de tarjetas (si aplica) */
    .card-container {
        flex-direction: column; /* Disponer tarjetas en una columna */
    }

    /* Ajustes para las tarjetas */
    .card {
        width: 100%; /* Ancho completo de las tarjetas */
        padding: 10px; /* Reducir padding interno */
    }

    /* Contenido con scroll */
    .contenido-scroll {
        max-height: 300px; /* Limitar la altura del contenido scroll */
    }

    /* Flecha para el scroll */
    .scroll-indicator-gobierno {
        font-size: 18px; /* Reducir el tamaño de la flecha */
        bottom: 5px; /* Ajustar posición */
    }
}

@media (max-width: 576px) {

    /* Ajuste de padding del header */
    #series {
        padding: 80px 0; /* Reducir padding superior en móviles */
        background-position: center center; /* Ajustar la imagen para móviles */
    }

    /* Ajustes del contenedor general */
    .content-wrapper {
        flex-direction: column; /* Cambiar a diseño de columnas */
        padding: 30px; /* Reducir el padding en móviles */
    }

    /* Menú dinámico a la izquierda */
    .menu-dinamico {
        max-width: 100%; /* Ancho completo para el menú */
        text-align: center; /* Centrar el texto del menú */
        left: 0; /* Alinear menú sin desplazamiento */
        top: 0; /* Quitar el desplazamiento vertical */
        padding: 10px; /* Reducir el padding del menú */
    }

    .menu-dinamico a {
        font-size: 14px; /* Reducir el tamaño de la fuente */
        padding: 6px; /* Reducir el padding interno */
    }

    /* Contenido dinámico a la derecha */
    .contenido-dinamico {
        max-width: 100%; /* Ancho completo para el contenido */
        padding: 15px; /* Reducir el padding */
    }

    /* Títulos del contenido */
    .contenido-dinamico h2 {
        font-size: 24px; /* Reducir tamaño del título en móviles */
    }

    /* Contenedor de tarjetas (si aplica) */
    .card-container {
        flex-direction: column; /* Disponer tarjetas en una columna */
    }

    /* Ajustes para las tarjetas */
    .card {
        width: 100%; /* Ancho completo de las tarjetas */
        padding: 10px; /* Reducir padding interno */
    }

    /* Contenido con scroll */
    .contenido-scroll {
        max-height: 300px; /* Limitar la altura del contenido scroll */
    }

    /* Flecha para el scroll */
    .scroll-indicator-gobierno {
        font-size: 18px; /* Reducir el tamaño de la flecha */
        bottom: 5px; /* Ajustar posición */
    }
}

/* FIN QUINES SOMOS */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* VIDEOS PIBLICACIONES  */

/* Estilos para el iframe de YouTube */
.youtube-iframe {
    width: 100%;
    height: 350px; /* Aumenta la altura según tu preferencia */
    border-radius: 8px;
    max-width: 100%;
}

/* Estilo del enlace del título */
.titulo-link h2 {
    font-size: 1.5em;
    color: #FFFFFF;
    margin: 15px 0;
    text-decoration: none;
    transition: color 0.3s;
    text-align: center;
}

.titulo-link hr {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
}

/* Cambio de color al pasar el mouse sobre el título */
.titulo-link h2:hover {
    color: #f29f05;
}

/* Estilo para el contenedor de enlace "ver-mas" */
.ver-mas {
    margin-top: 10px;
}

/* Estilo para el enlace de YouTube */
.youtube-link {
    font-size: 14px;
    color: #012340;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
}

.youtube-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    transition: transform 0.3s;
}

/* Efectos al pasar el mouse sobre el enlace */
.youtube-link:hover {
    color: #f29f05;
}

.youtube-link:hover .youtube-icon {
    transform: scale(1.1);
}

/* Responsive para tabletas */
@media (max-width: 768px) {
    #aldiaminer {
        padding: 15px;
    }
    .youtube-iframe {
        height: 350px; /* Reduce el tamaño para tabletas */
    }
}

/* Responsive para móviles */
@media (max-width: 480px) {
    #aldiaminer {
        padding: 10px;
    }
    .youtube-iframe {
        height: 250px; /* Reduce el tamaño para móviles */
    }
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* INICIO BOLETINES */

#boletines-miner-header {
    background: url('../miner/nueva_galeria/pagina_web/publicaciones.jpeg') no-repeat center center fixed;
    background-size: cover;
    padding: 120px 50px;
}


.boletines-miner-slide img {
    width: 100%;
    height: auto; /* Altura automática para mantener la proporción */
    max-width: 420px;
    border-radius: 10px;
    transition: transform 0.3s;
}

.boletines-miner-intro {
    max-width: 1000px;
    margin: 0 auto;
}

.boletines-miner-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.boletines-miner-menu-wrapper {
    width: 100%;
    max-width: 300px;
    padding: 10px;
}

.boletines-miner-menu-dinamico {
    background: rgba(1, 35, 64, 0.4);
    padding: 1px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    list-style-type: none;
    width: 100%; /* Ajustar a la pantalla */
    max-width: 250px; /* Ancho máximo reducido para hacerlo más compacto */
    transition: transform 0.6s ease;
    position: relative; /* Posiciona relativo para ajustar con top y left */
    left: -40px; /* Desplaza hacia la izquierda */
    top: 30px; /* Desplaza hacia abajo */
}

.boletines-miner-menu-dinamico a {
    color: #fff;
    text-decoration: none;
    font-size: 16px; /* Tamaño de fuente más compacto */
    padding: 8px; /* Reducir padding interno */
    display: block;
    border-radius: 10px; /* Bordes más cuadrados */
    transition: background 0.3s ease, color 0.3s ease;
    text-align: left; /* Alinear el texto a la izquierda */
    border-bottom: 2px solid #f29f05; /* Línea inferior de 2px con color naranja */
}

.boletines-miner-menu-dinamico:hover {
    transform: scale(1.02); /* Aumentar ligeramente al pasar el mouse */
}


.boletines-miner-menu-dinamico a:hover {
   background: #f29f05;
    color: #012340;
}

.boletines-miner-menu-dinamico li {
    margin: 1px 0; /* Reducir el espaciado entre los elementos */
}

.boletines-miner-content-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.boletines-miner-slide {
    display: none;
    text-align: center;
    max-width: 100%;
}



.boletines-miner-pdf-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #012340, #f29f05);
    color: #fff;
    border-radius: 50%;
    margin-top: 10px;
    transition: background 0.3s;
}

.boletines-miner-pdf-icon:hover {
    background: #f29f05;
    color: #012340;
}

@media (max-width: 768px) {
    .boletines-miner-row {
        flex-direction: column;
    }

    .boletines-miner-content-wrapper,
    .boletines-miner-menu-wrapper {
        width: 100%;
    }
}
.boletines-miner-slide {
    display: none; /* Oculta todas las diapositivas */
}

.boletines-miner-slide:first-child {
    display: block; /* Muestra solo la primera diapositiva */
}

/* NOTICIAS */
.contenido {
    display: none; /* Oculta todo el contenido inicialmente */
}

.contenido:first-child {
    display: block; /* Muestra solo el primer contenido */
}



/* FIN SESIÓN BOLETINES MINER NEW */


/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* INICIO INFORME DE SOSTENIBILIDAD */

/* Estilos para el header del Informe de Sostenibilidad */

#sostenibilidad-header {
    padding: 80px 0; /* Aumenta el padding superior para bajar todo el contenido */
    background-color: #012340; /* Azul oscuro */
    color: #ffffff; /* Blanco para el texto */
    background-size: cover;
    background-position: center;
    text-align: center;
    
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.1); /* Fondo semitransparente */
}

/* Contenedor de título y enlace */
.title-and-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    gap: 20px;
}

/* Estilos para el título */
.title-box h5 {
    font-size: 22px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05); /* Fondo ligeramente transparente */
    border-left: 4px solid #f29f05; /* Borde acentuado */
    color: #ddd; /* Texto más suave */
    border-radius: 8px;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease-in-out;
}

.title-box h5:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff; /* Destaca en el hover */
    transform: translateX(4px);
}

/* Estilo para el botón de "Otras Publicaciones" */
.other-publications-link {
    display: flex;
    align-items: center;
}

.publications-btn {
    display: flex;
    align-items: center;
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.1); /* Fondo más tenue */
    color: #ddd;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #444;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.publications-btn:hover {
    background: rgba(255, 255, 255, 0.15); /* Cambio sutil en el hover */
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.publications-btn .icon-link {
    margin-right: 8px;
    color: #f29f05; /* Icono en color principal */
    font-size: 18px;
}


/* Estilo para el flipbook */
.flipbook-container {
    margin: 1px 0;
  
}

.flipbook-iframe {
    width: 100%;
    height: 600px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.flipbook-iframe:hover {
    transform: scale(1.02);
}

/* Animación de entrada */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Responsividad */
@media (max-width: 768px) {
    .title-box h1 {
        font-size: 36px;
    }

    .publications-btn {
        font-size: 16px;
    }

    .title-and-link {
        flex-direction: column;
        align-items: center;
    }

    .flipbook-iframe {
        height: 400px;
    }
}


/* FIN INFORME DE SOSTENIBILIDAD */


/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* INICIO CONTACTO TRANSPARENTE */

#contacto_transparente {
    padding: 130px 0;
    background: url('../miner/nueva_galeria/pagina_web/contactotransparente.jpeg') no-repeat center center fixed;
    background-size: cover;
    width: 100%; /* Asegura que el fondo cubra toda la pantalla */
    overflow-x: hidden; /* Evita desbordamiento horizontal */
}

/* Contenedor general */
.content-wrapper-contacto {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 50px;
    flex-direction: row; /* Mantiene el menú y formulario en columnas */
}


.hero_contacto {
    position: absolute; 
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f29f05, #ff8c00);
    color: white;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #ff8c00;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    text-align: center;
    width: fit-content;
}

.hero_contacto h4 {
    margin: 0;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
}

.container-contacto-transparente {
    display: flex;
    justify-content: center;
}

.row.content-wrapper-contacto {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%; /* Asegura que el ancho no exceda el tamaño de la pantalla */
    box-sizing: border-box; /* Incluye padding y bordes en el ancho total */
}

.menu-dinamico-contacto {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 100%; /* Evita que el menú se desborde */
}

.menu-dinamico-contacto li {
    margin-bottom: 10px;
}

.menu-dinamico-contacto a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.menu-dinamico-contacto a:hover {
    color: #f29f05;
}

/* Estilo caja fondo formulario */
.contenido-contacto {
    display: none;
}

.contenido-contacto h2 {
    font-size: 24px;
    color: #ffff;
}

.formulario-contacto-transparente {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formulario__label-contacto-transparente {
    font-weight: bold;
    color: #012340;
}

/* Estilos para el texto de los campos de entrada */
#contacto_transparente .formulario__input-txt-contacto-transparente,
#contacto_transparente .formulario__input-date-contacto-transparente,
#contacto_transparente .formulario__textarea-contacto-transparente {
    color: #333; /* Cambia el color del texto a rojo */
}

/* Cambia el color del texto cuando se enfoca */
#contacto_transparente .formulario__input-txt-contacto-transparente:focus,
#contacto_transparente .formulario__input-date-contacto-transparente:focus,
#contacto_transparente .formulario__textarea-contacto-transparente:focus {
    color: #333; /* Asegura que el color se mantenga rojo al escribir */
}


.formulario__input-txt-contacto-transparente,
.formulario__textarea-contacto-transparente,
.custom-file-input-contacto-transparente {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
}

.formulario__input-txt-contacto-transparente:focus,
.formulario__textarea-contacto-transparente:focus {
    border-color: #f29f05;
    outline: none;
}

.formulario__textarea-contacto-transparente {
    resize: none;
}

.column__txt-contacto-transparente a {
    color: #f29f05;
    text-decoration: none;
}

.column__txt-contacto-transparente a:hover {
    text-decoration: underline;
}

.btn-custom-contacto-transparente {
    background-color: #f29f05;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%; /* Asegura que el botón ocupe todo el espacio disponible en móviles */
}

.btn-custom-contacto-transparente:hover {
    background-color: #012340;
}

/* Estilos de Recaptcha */
.g-recaptcha {
    margin-top: 20px;
}

/* Visibilidad del contenido dinámico */
.contenido-scroll {
    max-height: 400px;
    overflow-y: auto;
}

/* Columna de menú a la izquierda */
.menu-dinamico-contacto {
    background: rgba(1, 35, 64, 0.4);
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    list-style-type: none;
    width: 100%;
    max-width: 250px;
    transition: transform 0.3s ease;
    position: relative;
    left: -40px;
    top: 60px;
}

.menu-dinamico-contacto:hover {
    transform: scale(1.02);
}

.menu-dinamico-contacto li {
    margin: 1px 0;
}

.menu-dinamico-contacto a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 8px;
    display: block;
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
    text-align: left;
    border-bottom: 2px solid #f29f05;
}

.menu-dinamico-contacto a:hover {
    background: #f29f05;
    color: #012340;
}

/* Columna de contenido a la derecha */
.contenido-dinamico-contacto {
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 800px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-sizing: border-box;
}


/* Mantén los estilos existentes de las cajas originales */
.contenido-contacto {
    padding: 20px;
    color: inherit;
    border-radius: inherit;
    box-shadow: inherit;
    overflow-y: auto;
    max-height: 400px;
}

.contenido-dinamico-contacto {
    background: linear-gradient(135deg, #b0c4de, #d3d3d3);
    padding: 10px;
    border-radius: 10px;
    width: 100%;
}

/* Estilos para el indicador de scroll */
.scroll-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    color: #f29f05;
    cursor: pointer;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0.8;
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* Estilos Responsivos */
@media (max-width: 1200px) {
    .content-wrapper-contacto {
        flex-direction: column; /* Cambiar a columna en pantallas medianas */
    }

    .col-md-4 {
        width: 100%; /* Menú ocupa el ancho completo */
    }

    .col-md-8 {
        width: 100%; /* Contenido ocupa el ancho completo */
    }
}
/* Estilos responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .content-wrapper-contacto {
        flex-direction: column; /* Cambia el orden a vertical */
        align-items: center; /* Centra ambos elementos horizontalmente */
    }

    .menu-dinamico-contacto {
        width: 100%; /* Asegura que ocupe todo el ancho */
        margin-bottom: 20px; /* Espacio debajo del menú */
    }

    .col-md-4, .col-md-8 {
        width: 100%;           /* Ocupa todo el ancho disponible */
        max-width: 100%;       /* Asegura que no exceda el ancho */
    }

    .contenido-dinamico-contacto {
        width: 100%;           /* Asegura que el formulario ocupe todo el ancho */
    }

    .formulario-contacto-transparente {
        width: 100%;           /* El formulario se adapta al ancho completo */
        padding: 10px;         /* Espacio interno más pequeño */
    }
}


@media (max-width: 576px) {
    .hero_contacto h4 {
        font-size: 18px; /* Ajustar aún más el tamaño del texto */
    }
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .checkbox-container {
        flex-direction: column; /* Apila el texto y el checkbox en dispositivos pequeños */
        align-items: flex-start;
        font-size: 14px;
    }

    .checkbox-container label {
        padding-left: 25px; /* Ajusta el espacio en dispositivos pequeños */
    }

    .checkbox-container label::before {
        width: 18px;
        height: 18px;
        margin-right: 5px;
    }
}

@media (max-width: 480px) {
    .checkbox-container {
        font-size: 12px; /* Reduce aún más el tamaño del texto */
    }

    .checkbox-container label::before {
        width: 16px;
        height: 16px;
    }
}


/* Estilo general para el contenedor */
.checkbox-container {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

/* Ocultar el checkbox original */
.checkbox-container input[type="checkbox"] {
    display: none;
}

/* Crear un estilo personalizado para el checkbox */
.checkbox-container label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 1px;
}

/* Diseñar el cuadrado del checkbox */
.checkbox-container label::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f29f05;
    border-radius: 4px;
    background-color: transparent;
    margin-right: 10px;
    transition: all 0.3s ease;
}

/* Estilo para el estado marcado */
.checkbox-container input[type="checkbox"]:checked + label::before {
    background-color: #012;
    border-color: #f29f05;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.285 4.293l-11.285 11.293-5.285-5.293-1.707 1.707 7 7 13-13z"/></svg>');
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Estilo para el texto */
.checkbox-container label span {
    color: #fff;
    transition: color 0.3s ease;
}

/* Cambiar color al pasar el mouse */
.checkbox-container label:hover span {
    color: #f29f05;
}



/* FIN CONTACTO TRANSPARENTE */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* INICIO EMPLEO  */

/* Estilo general de la sección empleo-miner */
#empleo-miner {
  padding: 0;
  background: rgba(0, 0, 0, 0.9) url('../miner/nueva_galeria/pagina_web/trabajaconosostros.jpg') center center no-repeat fixed;
  background-size: cover;
  position: relative;
}

#empleo-miner .adjusted-container {
  padding-top: 180px; /* Baja el contenedor */
  max-width: 900px; /* Tamaño reducido del contenedor */
  margin: 0 auto; /* Centrando el contenedor */
}

#empleo-miner .section-title {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  color: #fff;
  margin-bottom: 20px;
}

#empleo-miner .section-title h2 {
  font-size: 28px;
  font-weight: bold;
  color: #f29f05;
}

#empleo-miner .section-title hr {
  border: 1px solid #f29f05;
  width: 50px;
  margin: 10px auto;
}

#empleo-miner .section-title p {
  font-size: 14px;
  color: #f2f2f2;
}

.form-background {
  background: rgba(255, 255, 255, 0.85);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#empleo-miner .description {
  padding-right: 20px;
  font-size: 14px;
  color: #333;
}

.image-container {
  margin-top: 20px;
  text-align: center;
}

.image-container .responsive-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

#empleo-miner .formulario__label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

#empleo-miner .formulario__input-txt, 
#empleo-miner .formulario__textarea, 
#empleo-miner .custom-file-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

#empleo-miner .formulario__textarea {
  height: 100px;
}

#empleo-miner .custom-file-input {
  border: 1px solid #999;
  cursor: pointer;
}

#empleo-miner .form-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#empleo-miner .btn-custom {
  background-color: #012340;
  color: #fff;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#empleo-miner .btn-custom:hover {
  background-color: #f29f05;
}

#empleo-miner .g-recaptcha {
  margin-bottom: 20px;
}

/* Responsive para tabletas y móviles */
@media (max-width: 1024px) {
  #empleo-miner .adjusted-container {
    max-width: 80%; /* Ajusta el ancho para pantallas más pequeñas */
    padding-top: 70px; /* Ajuste para pantallas de tabletas */
  }

  #empleo-miner .section-title h2 {
    font-size: 24px; /* Disminuye el tamaño del título */
  }
}

@media (max-width: 768px) {
  #empleo-miner .adjusted-container {
    padding-top: 50px; /* Ajuste del padding para pantallas más pequeñas */
  }

  .form-background {
    padding: 20px; /* Reduce el padding en pantallas pequeñas */
  }

  #empleo-miner .description {
    padding-right: 0; /* Elimina el padding en pantallas pequeñas */
    font-size: 12px; /* Reduce el tamaño del texto */
  }

  #empleo-miner .section-title h2 {
    font-size: 22px; /* Tamaño del texto más pequeño en móviles */
  }

  #empleo-miner .section-title p {
    font-size: 12px; /* Texto más pequeño en móviles */
  }

  #empleo-miner .formulario__label, 
  #empleo-miner .formulario__input-txt, 
  #empleo-miner .formulario__textarea, 
  #empleo-miner .custom-file-input {
    font-size: 12px; /* Ajusta el tamaño de la fuente en móviles */
  }

  #empleo-miner .btn-custom {
    padding: 10px 20px; /* Reduce el tamaño del botón */
    font-size: 14px; /* Ajusta el tamaño del texto en el botón */
  }

  .image-container {
    margin-top: 15px; /* Reduce el espacio superior de la imagen */
  }
}

@media (max-width: 480px) {
  #empleo-miner .adjusted-container {
    max-width: 90%; /* Aumenta ligeramente el ancho en pantallas muy pequeñas */
  }

  #empleo-miner .section-title h2 {
    font-size: 20px; /* Disminuye aún más el tamaño del título en móviles pequeños */
  }

  #empleo-miner .btn-custom {
    padding: 8px 16px; /* Ajusta el padding en botones para pantallas pequeñas */
  }
}

/* FIN EMPLEO  */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* flipbooks */
#flipbooks {
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#flipbooks .overlay {
	padding: 10px;
	background: linear-gradient(135deg, #1e3a5f, #2e5b7f); /* Degradado azul oscuro a medio */
}
#flipbooks h2, #flipbooks p {
	color: #fff;
}
#flipbooks hr {
	background: #f29f05;
}
#flipbooks h3 {
	color: #fff;
	font-weight: 400;
	font-size: 50px;
	margin: 5px 0;
}
#flipbooks img {
	width: 60%;
}
#flipbooks .thumbnail {
	background: transparent;
	border: 0;
}
#flipbooks .thumbnail .caption {
	padding-top: 10px;
}
#flipbooks .thumbnail .caption p {
	color: rgba(255, 255, 255, 0.7);
	padding: 0 10px;
	font-size: 16px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
	#flipbooks h3 {
		font-size: 32px;
	}
	#flipbooks img {
		width: 80%;
	}
	#flipbooks .video-container iframe {
		height: 300px; /* Ajusta la altura para pantallas medianas */
	}
}

@media (max-width: 576px) {
	#flipbooks h3 {
		font-size: 24px;
	}
	#flipbooks .video-container iframe {
		height: 250px; /* Altura reducida en pantallas pequeñas */
	}
	#flipbooks img {
		width: 100%;
	}
	#flipbooks .thumbnail .caption p {
		font-size: 14px; /* Ajusta el tamaño de texto en pantallas pequeñas */
	}
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* Preloader Styles */

/* Fondo transparente */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenedor del logo y texto */
#loader {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10vh; /* Baja el preloader un poco */
  margin-left: -13vw; /* Ajusta el preloader hacia la izquierda */
}


/* Estilo del logo con animación */
.loader-logo {
  width: 30vw; /* 30% del ancho de la pantalla */
  max-width: 350px; /* Límite máximo */
  height: auto;
  animation: subtleMovement 3s ease-in-out infinite;
  transform-origin: center;
}

/* Texto "Cargando..." */
.loading-text {
  margin-top: 20px;
  font-size: 5vw; /* Tamaño de fuente responsivo */
  max-font-size: 24px;
  font-family: Arial, sans-serif;
  color: #3498db;
  font-weight: bold;
  text-align: center;
}

/* Animación moderna de balanceo y zoom */
@keyframes subtleMovement {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.05) rotate(2deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
  }
  75% {
    transform: scale(1.05) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}


/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* Estilo para el fondo de la ventana emergente */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Estilo para el contenido de la ventana emergente */
.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Estilo para los botones */
.btn {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    background-color: #f29f05;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background-color: #012340;
}


.menu-dinamico-contacto2 {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 100%; /* Evita que el menú se desborde */
}

.menu-dinamico-contacto2 li {
    margin-bottom: 10px;
}

.menu-dinamico-contacto2 a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.menu-dinamico-contacto2 a:hover {
    color: #f29f05;
}

/* Columna de menú a la izquierda */
.menu-dinamico-contacto2 {
    padding: 1px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    list-style-type: none;
    width: 100%;   
    transition: transform 0.3s ease;
    position: relative;
    
}

.menu-dinamico-contacto2:hover {
    transform: scale(1.02);
}

.menu-dinamico-contacto2 li {
    margin: 1px 0;
}

.menu-dinamico-contacto2 a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 8px;
    display: block;
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
    text-align: left;
    border-bottom: 2px solid #f29f05;
}

.menu-dinamico-contacto2 a:hover {
    background: #f29f05;
    color: #012340;
}

/* -------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------- */


/* FOOTER Section */
#footer {
  background: linear-gradient(90deg, #012340, #024b80);
  padding: 40px 0;
  color: white;
  font-family: 'Arial', sans-serif;
}

#footer h3 {
  color: #f29f05;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

#footer .footer-column {
  width: 30%; /* Ajustar para que ocupen el ancho completo */
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin: 0 1%; /* Ajustar el margen entre columnas */
}

#footer .contact-item p {
  font-size: 15px;
  margin: 8px 0;
}

#footer .contact-item i {
  color: #f29f05;
  margin-right: 10px;
}

#footer .contact-item a {
  color: #f6f6f6;
  text-decoration: none;
  transition: color 0.3s;
}

#footer .contact-item a:hover {
  color: #f29f05;
}

#footer .copyrights {
  margin-top: 30px;
  background: #012340;
  padding: 20px 0;
  font-size: 14px;
  border-top: 1px solid #024b80;
}

#footer .copyrights p {
  margin: 5px 0;
  color: rgba(255, 255, 255, 0.8);
}

#footer .copyrights i {
  color: #f29f05;
  margin-right: 5px;
}

#footer .copyrights a {
  color: #f6f6f6;
  text-decoration: none;
}

#footer .copyrights a:hover {
  color: #f29f05;
}

/* Responsive Styles for tablets and mobiles */
@media (max-width: 768px) {
  #footer .footer-column {
    width: 45%; /* Ajuste para tabletas */
    margin-bottom: 20px;
    display: inline-block;
  }

  .container.text-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px 0;
  }
}

@media (max-width: 576px) {
  #footer .footer-column {
    width: 100%; /* Ajuste para móviles */
    text-align: center;
    margin-bottom: 20px;
  }

  .container.text-center {
    padding: 20px 0;
  }

  #footer h3 {
    font-size: 16px; /* Reducir tamaño en móviles */
  }

  #footer .contact-item p {
    font-size: 14px; /* Reducir texto en móviles */
  }
}
/* -------------------------------------------------------------------------------------------------------------------------------- */