/************************************ IMAGEN DE FONDO *******************************/
img.bg {
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* Asegura que la imagen de fondo esté detrás de todo */
}

header{
    width: 100%;
    height: 252px;
    /*float: left;*/
}
#cabecera{
    width: 85%;
    height: 150px;
    position: relative;
    margin: 0 auto;
}
#logotipoAduo, #logotipoFondo {
    width: 25%;
    float: left;
}
#logotipoAduo img, #logotipoFondo img {
    width: 60%;
    float: left;
}

/*CONTAINER*/
content{
    width: 100%;
    position: relative;
    top: 0px;
    float: left;
}
#container{
    width: 85%;
    position: relative;
    margin: 0 auto;
}
#container h1 {
    font-weight: 300;
    font-size: 5em;
    text-shadow:1px 1px 5px #666666;
    color: #454545;
}
#container h2{
    font-size: 2.2em;
    text-shadow:1px 1px 5px #666666;
    color: #666666;
}

/************************* BOTONES: CURSO + INFORMACION *****************************/
.use-btn {
    display: inline-block;
    margin: 0 0px 10px 0;
    padding: 20px 50px;
    border-radius: 3px;
    background-color: #454545;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}
.use-btn:hover, .use-btn:focus {
    background-color: #fff;
    color: #454545;
    text-decoration: none;
}
.learn-btn, .download-btn {
    display: inline-block;
    margin-left:10px;
    padding: 18px 46px;
    border: 2px solid #454545;
    border-radius: 3px;
    color: #454545;
    font-weight: bold;
    font-size: 16px;
}
.learn-btn:hover, .download-btn:hover, .learn-btn:focus, .download-btn:focus {
    border-color:  #454545;
    color:#454545;
    text-decoration: none;
}

/**************************** CAJAS QUIENES SOMOS Y CONTACTO ***************************/
.containerContacto{
    width: 100%;
    height: 500px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    color: black;
    font-size: 1.3em;
}
.containerContacto h3{
    width: 100%;
    font-size: 4em;
    font-weight: 300;
    color: white;
    text-shadow:2px 2px 10px black;
    margin: 0px 0px 20px 0px;
    float: left;
}
.mail{ font-weight: bold; color:#454545; }
.contactobold{ font-weight: bold; }
#contacto{ width: 50%; float: left; line-height: 1.1em; }
#mapa{ width: 50%; height: 450px; float: left; box-shadow: 10px 10px 60px -20px rgba(0,0,0,0.75); }
#mapa iframe{ width: 100%; height: 450px; }

/*********************************** FOOTER *******************************************/
footer {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
    float: left;
    clear: both; /* Añadido para corregir solapamiento */
}
#footer{
    width: 100%;
    position: relative;
    margin: 0 auto;
    background-color: #FFF;
    padding: 20px; /* Añadido para espaciado interno */
    overflow: hidden; /* Añadido para contener los floats */
}
.col-md-5 h4{ font-weight: bold; color: black; }
footer p { color: black; font-size: 14px; line-height: 25px; }
footer ul { margin-top: 30px; padding-left: 0; }
footer li { float: left; margin-right: 15%; list-style: none; text-transform: uppercase; font-weight: bold; }
footer li a { color: #454545; }
a:hover, a:focus { color:  #454545;; text-decoration: none; }
footer li:last-child { margin-right: 0; }

/******************************* MENU PRINCIPAL: HAMBURGUESA ********************************/
/* ... Tu código original del menú hamburguesa ... */
.overlay nav { position: relative; top: 50%; height: 60%; text-align: center; font-size: 54px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.overlay ul { position: relative; display: inline-block; margin: 0 auto; padding: 0; list-style: none; }
.overlay ul li { display: block; float: left; margin-right: 20px; }
.overlay ul li:last-child { margin-right: 0px; }
.overlay ul li i { display: block; margin-bottom: 10px; font-size: 40px; }
.overlay ul li a { display: block; padding: 50px 0; min-width: 190px; border: 2px solid #fff; border-radius: 3px; color: #fff; text-transform: uppercase; font-weight: 400; font-size: 15px; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; text-decoration: none; }
.overlay ul li a:hover, .overlay ul li a:focus { border-color: #FFF; color: #454545; }
.overlay-boxify { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; }
.overlay-boxify.open { visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.overlay-boxify nav ul li { opacity: 0; -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; }
.overlay-boxify.open nav ul:first-child li:first-child { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.overlay-boxify.open nav ul:first-child li:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.overlay-boxify.open nav ul:nth-child(2) li:first-child { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
.overlay-boxify.open nav ul:nth-child(2) li:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.overlay-boxify.open nav ul li { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 100; /* Asegura que el menú esté por encima */ }
.nav-toggle { float: right; padding: 10px 35px 16px 0px; cursor: pointer; margin-top:30px; position: relative; z-index: 101; /* Asegura que el botón esté por encima */ }
.nav-toggle:focus { outline: none; }
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after { content: ''; position: absolute; display: block; width: 35px; height: 5px; border-radius: 1px; background:#fff; cursor: pointer; }
.nav-toggle span:before { top: -10px }
.nav-toggle span:after { bottom: -10px }
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
.nav-toggle.active span { background-color: transparent }
.nav-toggle.active span:before, .nav-toggle.active span:after { top: 0 }
.nav-toggle.active span:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.nav-toggle.active span:after { top: 10px; -webkit-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
.navicon { position: relative; height: 26px; }
.navicon p { margin: 1px 50px 0 0 }
.navicon-fixed { position: fixed; top: 59px; right: 143px; }

/***************************** PORTFOLIO (DISEÑO ORIGINAL) ************************************/
ul#filterOptions{ padding-left: 0px; list-style: none; display: table; }
ul#filterOptions li{ float:left; margin-right: -1px; }
ul#filterOptions li a{ color:white; font-size:18px; font-weight: bold; text-shadow:2px 2px 10px black; text-decoration:none; }
ul#filterOptions li.cur a{ color:#454545; }
ul#filterOptions li a:hover{ color:#454545; }
.box img{ max-width:100% }
li.box{ padding: 0px; margin: 0px 20px 20px 0px; }
.portfolio-item .thumbnail{ margin:0; position:relative; }
.thumb-img{ position:relative; overflow:hidden; }
.thumb-img a{ display:block; background:#000; }
.folio-caption{ position:absolute; bottom:-55px; left:0; background:rgba(42, 163, 173, 0.8); width:100%; max-height:48px; }
.folio-caption p{ color:#fff; padding:15px; margin:0; text-align:center; font-size:18px; }
.portfolio-item { margin: 0; padding:0; box-shadow:2px 2px 20px black; }
.main-folio{ margin:0 auto; width:100%; padding:40px 0; position:relative; overflow:hidden; }
ul.container_folio{ margin:0; padding:0; list-style:none; width:100% !important; }
ul.container_folio li.box{ margin:0; padding:7px; width:33.333%; float:left; }
.col-md-12{ clear:both; }
.img-portfolio { margin: 0; }
div.link{ visibility:hidden; position:absolute; top:0; color:#fff; font-size:14px; }
.thumbnail { border-radius: 0px; height: 365px; }
#button{ display: inline-block; margin: 0 10px 10px 0; padding: 5px 5px; border-radius: 3px; background-color: #fff; color: #454545; font-weight: bold; font-size: 10px; box-shadow:2px 2px 20px black; }
#button:hover, #button:focus { background-color: #454545; color: #fff; text-decoration: none; }
.button{ margin-top: 5px; }

/* ==================================================================== */
/* ESTILOS PARA LOS FILTROS DE CURSOS (AÑADIR AL FINAL DE STYLES.CSS) */
/* ==================================================================== */

#filtros-container {
    padding: 20px 15px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.filtro-fila {
    text-align: center;
    margin-bottom: 15px;
}
.filtro-fila:last-child {
    margin-bottom: 0;
}
.filtro-fila h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
}
.grupo-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
#filtros-container .btn-filtro {
    background-color: #fff !important;
    color: #454545 !important;
    border: 1px solid #454545 !important;
    padding: 5px 15px !important;
    font-size: 14px !important;
    margin: 0 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}
#filtros-container .btn-filtro:hover {
    background-color: #454545 !important;
    color: #fff !important;
}
#filtros-container .btn-filtro.active {
    background-color: #454545 !important;
    color: #fff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}
#no-results-message { 
    display: none; 
    text-align: center; 
    font-size: 1.5em; 
    color: white; 
    width: 100%;
    padding: 20px; 
    text-shadow: 1px 1px 3px black;
}
/* ================================================= */
/* ESTILOS PARA EL PIE DE PÁGINA DINÁMICO */
/* ================================================= */

.dynamic-footer {
    display: none; /* Oculta todos los pies de página por defecto */
    background-color: #FFF;
    padding: 20px;
    overflow: hidden; /* Contiene los floats internos */
}

.dynamic-footer.active-footer {
    display: block; /* Muestra solo el que tenga la clase 'active-footer' */
}

/* Ajustes para los logos del footer de Lanbide */
#footer-lanbide .col-md-7 img {
    max-width: 150px; /* Ajusta el tamaño de los logos si es necesario */
    display: block;
    margin: 10px auto;
}
#footer-lanbide .col-md-7 hr {
    display: none; /* Oculta los <hr> para un look más limpio */
}