@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");

@font-face {
    font-family: "poppins-regular";
    src: url("./fonts/poppins/Poppins-Regular.ttf");
}

:root{
    --color-fondo: #222731;
    --color-texto: #ffffff;
    --color-detalles: #c09f3e;
    --color-fondo-negro: #000000;
    --color-detalles-secundario: #ff6326;
    --color-enlace-texto: #979797;
}

*{
    box-sizing: border-box;
    padding: 0;
    border: 0;
    margin: 0;
}

html{
    font-size: 16px;
    font-family: 'poppins-regular';
    scroll-behavior: smooth;
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

.hamburguesa{
    display: none;
    cursor: pointer;
    &:hover{
        color: var(--color-detalles);
    }
}

.equis{
    display: none;
}

.lista{
    display: inline;
}

.scrolled {
    background-color: #000000 !important; /* Color sólido al hacer scroll */
    border-bottom: 1px solid var(--color-detalles);
}

b{
    color: var(--color-detalles);
}

.fondo-negro{
    background-color: var(--color-fondo-negro);
}

.boton{
    padding: 15px;
    background-color:var(--color-detalles);
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 10px;
    color: var(--color-texto);
    transition: background-color 0.3s ease;
    &:hover{
        background-color: #5c4910;
        color: antiquewhite;
    }
}

.ancho-completo{
    width: 100%;
}

.flex-start-start{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;    
}

.flex-start-center{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex-center-start{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;    
}

.flex-center-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;    
}

.flex-v-center-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;    
}

.flex-space-start{
    display: flex;
    justify-content: space-around;
    align-items: start;
    flex-wrap: wrap;    
}

.flex-between-start{
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;    
}

.flex-between-center{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;    
}

.header__menu{
    position: fixed;
    z-index: 1;
    width: 100%; 
    height: 60px;
    background-color: #00000088;
}

.header__menu--contenedor{
    width: 70%;
}

.header__menu--logo{
    width: 40%;
    font-size: 1.3rem;
}

.header__menu--enlaces{
    width: 60%;
}

.header__menu--enlaces a{
    padding: 0 10px;
    font-size: 1.1rem;
    text-decoration: none;
    color:var(--color-detalles);
    &:hover{
        color:var(--color-texto);
    }
}

.header__menu--logo img{
    width: 280px;
    margin-right: 10px;
}

.header__menu--hamburguesa{
    color:var(--color-texto);
    font-size: 2rem;
}

.header__menu--hamburguesa-enlaces{
    background-color: var(--color-detalles);
    padding: 20px;
    width: 100%;
    display: none;
    position: fixed;
    top: 60px;
    z-index: 100;
    box-shadow: 0 8px 6px -6px #000000;
}

.header__menu--hamburguesa-enlaces a{
    display: inline-block;
    text-decoration: none;
    color:var(--color-texto);
    padding: 5px 0;
    &:hover{
        color: rgb(112, 42, 14);
    }
}

.header__imagen{
    width: 100%;
    height: 250px;
    background-image: url('./rsc/img/cabecera-web-almochuel.jpg');
    background-size: cover;
    background-position: center;
}

.header__imagen img{
    width: 100%;
    max-width: 1920px;
    max-height: 544px;
}

.header__imagen--texto1 h1{
    font-size: 3.6rem;
    text-align: center;
    padding: 0 10px;
}

.header__imagen--texto2 h2{
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    padding: 0 10px;
}

.titulo-destacado{
    font-size: 2.5rem;
    color: var(--color-detalles);
    font-weight: 800;
    border-bottom: 3px solid var(--color-detalles-secundario);
    display: inline-block;
    margin-bottom: 50px;
}

.subtitulo-destacado{
    font-size: 1.5rem;
    color: var(--color-texto);
    font-style: italic;
}

.migas-de-pan{
    width: 70%;
    margin: 20px 0;
}

.migas-de-pan a{
    text-decoration: none;
    color:var(--color-texto);
    &:hover{
        color: var(--color-detalles);
    }
}

.contenedor-principal{
    width: 70%;
    margin: 50px 0;
}

.datos-almochuel{
    padding: 15px;
}

.contenido-principal-presentacion--texto{
    width: 50%;
}

.presentacion--texto--column{
    width: 50%;
    padding: 0 20px 0 0;
}

.presentacion--texto--column > div{
    width: 100%;
}

.presentacion--texto--column i{
    color:var(--color-detalles-secundario);
    padding: 0 8px 0 0;
}

.columna1{
    border-bottom: 1px solid var(--color-detalles);    
}

.columna2{
    padding-left: 20px;
}

.servicios div{
    padding-right: 20px;
}

.servicios i{
    color: var(--color-detalles);
}

.contenido-principal-presentacion--imagen{
    width: 47%;
    margin-bottom: 20px;
}

.contenido-principal-presentacion--imagen img{
    width: 100%;
    border-radius: 20px;
    border: 3px solid var(--color-detalles);
}

.contenido-principal-seccion{
    width: 100%;
    margin: 0 0 80px;
}

.seccion-ayuntamiento--texto{
    width: 40%;
    padding: 0 15px 0 0;
}

.seccion-ayuntamiento--imagen{
    width: 60%;
}

.seccion-ayuntamiento--imagen img{
    width: 100%;
    border: 1px solid var(--color-detalles);
}

.seccion-ayuntamiento--texto i{
    padding-right: 10px;
    color: var(--color-detalles);
}

.seccion-iglesia{
    width: 100%;
}

.seccion-iglesia img{
    width: 30%;
    border: 1px solid var(--color-detalles);
}

.seccion-iglesia--texto{
    width: 35%;
    padding: 0 15px;
}

.seccion-hoya--texto{
    width: 40%;
    padding: 0 50px 0 0;
}

.seccion-hoya--imagen{
    width: 60%;
}

.seccion-hoya--imagen img{
    width: 100%;
    margin-bottom: 15px;
}

.contenido-fiestas{
    margin-bottom: 50px;
}

.seccion-fiestas{
    width: 90%;
    padding: 30px 0;
}

.seccion-fiestas--imagen{
    width: 40%;
    margin: 0 15px;
}

.seccion-fiestas--texto{
    width: 50%;
    margin: 0 15px;

}

.seccion-fiestas img{
    width: 80%;
    max-width: 500px;
    margin: 20px;
    border: 1px solid var(--color-detalles);

}

.seccion-fiestas--imagen img:nth-child(2){
    width: 60%;
    max-width: 350px;
}

.seccion-fiestas ul{
    padding: 25px 30px 0 50px;
 }

.seccion-fiestas li::marker{
    color: var(--color-detalles-secundario);
}

.seccion-llegar--mapa{
    width: 50%;
}

.seccion-llegar--mapa iframe{
    width: 100%;
}

.seccion-llegar--texto{
    width: 50%;
    padding: 30px;
    text-align: center;
}

.seccion-llegar--llegar-boton{
    padding: 15px;
    color:var(--color-texto);
    border:2px solid var(--color-detalles);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    &:hover{
        background-color: var(--color-detalles);
        color: antiquewhite;
    }
}

.ultimo-bloque{
    margin-bottom: 40px;
}

.seccion-opiniones-bar{
    width: 70%;
    padding: 70px 0;
}

.opiniones-bar__opinion{
    width: 30%;
    min-width: 300px;
    background-color: #383838;
    border-radius: 10px;
    padding: 15px;
    margin: 0 20px 20px;
    text-align: center;
}

.opiniones-bar__opinion div{
    width: 100%;
}

.opiniones-bar__opinion--texto{
    margin: 20px 0;
}

.opiniones-bar__opinion--estrellas i{
    color:#ffeb3b;
    padding: 0 7px;
}

.enlace-google-reviews{
    text-decoration: none;
    color:var(--color-detalles);
    &:hover{
        color: var(--color-enlace-texto)
    }
}

.galeria-alimentos{
    width: 100%;
    margin: 40px 0 60px;
}

.galeria-alimentos--alimento{
    width: 20%;
    min-width: 300px;
    margin: 15px;
}

.galeria-alimentos--alimento img{
    width: 100%;
}

.galeria-alimentos--alimento div{
    padding-top: 15px;
}

.instagram-aguasvivas{
    width:200px;
    transition: opacity 0.3s ease;
    &:hover{
        opacity: 0.8;
    }
}

.instagram-aguasvivas__enlace{
    color:var(--color-texto);
    text-decoration: none;
    &:hover{
        color: var(--color-enlace-texto);
    }
}

footer{
    padding: 25px;
    text-align: center;
    background-color: var(--color-fondo-negro);
}

footer a{
    color:var(--color-texto);
    text-decoration: none;
    padding: 0 15px;
    &:hover{
        color:var(--color-detalles);
    }
}

.seccion-servicio h4{
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 20px;
}

.seccion-servicio i{
    color:var(--color-detalles-secundario);
    padding-right: 10px;
}

.seccion-servicio__contenido--imagen{
    width:40%;   
    max-width: 650px;
}

.seccion-servicio__contenido--imagen img{
    width: 100%;
    border: 1px solid var(--color-detalles);
}

.seccion-servicio__contenido--texto{
    width:60%;
    padding: 10px 15px;
}

.boton-servicio-bus__enlace{
    padding: 15px;
    color:var(--color-texto);
    border:2px solid var(--color-detalles);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    &:hover{
        background-color: var(--color-detalles);
        color: antiquewhite;
    }
}

.web-hife{
    color:var(--color-texto);
    &:hover{
        color: var(--color-enlace-texto);
    }
    
}

.actualidad-tablon{
    width: 100%;
    overflow-x: auto;
    margin-bottom: 25px;
}

.actualidad-tablon__tabla{
    width: 100%;
    border-collapse: collapse;
}

.actualidad-tablon__tabla th{
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    background-color: #99864d;
}

.actualidad-tablon__tabla td{
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.actualidad-tablon__tabla a{
    color:var(--color-texto);
    &:hover{
        color: var(--color-enlace-texto);
    }
}

.actualidad-tablon__boton a{
    color:#99864d;
    text-decoration: none;
    &:hover{
        color: var(--color-enlace-texto);
    }
}

.actualidad-noticias__medio{
    width: 23%;
    min-width: 300px;
}


.actualidad-noticias__medio img{
    width: 100%;
    border-radius: 10px;
    transition: border 0.3s ease, opacity 0.3s ease;
    &:hover{
        border: 5px solid var(--color-detalles);
        opacity: 0.8;
    }
}

.actualidad-noticias__medio a:hover + h4{ 
    color: var(--color-detalles);
}

.actualidad-noticias__medio h4{
    font-weight: 400;
    transition: color 0.3s ease;
    margin-bottom: 25px;
}

.seccion-final{
    margin-bottom: 30px;
}

.contenido-videos{
    margin-bottom: 50px;
}

.actualidad-videos__video{
    width: 45%;
    min-width: 300px;
    margin: 0 20px 40px;

}

.actualidad-videos__video video{
    width: 100%;
    aspect-ratio: 16/9;
    border:1px solid var(--color-detalles);
    cursor: pointer;
    padding: 0 0 1px 0;
    &:hover{
        opacity: 0.8;
    }

}

.actualidad-videos__video h4{
    margin-top: 15px;
    font-weight: 400;
    padding-bottom: 5px;
}

.contacto-institucion--texto{
    font-size: 1.2rem;
}

.contacto-institucion__datos p{
    margin: 10px 0;
}

.contacto-institucion__datos i{
    padding-right: 10px;
    color:var(--color-detalles-secundario);
}

.contacto-institucion__datos a{
    color: var(--color-texto);
    text-decoration: none;
    &:hover{
        color: var(--color-enlace-texto);
    }    
}

.contacto-administracion-web span{
    padding-left: 10px;
}

.contacto-administracion-web i{
    color: var(--color-detalles-secundario);
}

.seccion-ruta__datos{
    width: 100%;    
    margin-bottom: 30px;
}

.seccion-ruta__imagen{
    width: 100%;
    max-width: 1400px;
}

.seccion-ruta__imagen img{
    width: 100%;
    border: 2px solid var(--color-detalles);
}

.seccion-ruta__texto{
    width: 100%;
    padding: 25px 0;
}

.seccion-ruta__texto a{
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-texto);
    &:hover{
        color: var(--color-enlace-texto);
    }
}

.seccion-ruta__datos--tabla{
    margin: 25px 0;
    width: 100%;
}

.seccion-ruta__datos--tabla table{
    width: 100%;
    border-collapse: collapse;
}

.seccion-ruta__datos--tabla table th{
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    background-color: #99864d;
}

.seccion-ruta__datos--tabla table td{
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.seccion-ruta__datos--tabla table a, .seccion-error a{
    text-decoration: none;
    color: var(--color-texto);
    &:hover{
        color: var(--color-enlace-texto);
    }
}

.seccion-legal a{
    text-decoration: none;
    color: var(--color-enlace-texto);
    &:hover{
        color: var(--color-texto);
        text-decoration: underline;
    }
}

.seccion-error{
    position: absolute;
    top: 50%;
    font-size: 1.5rem;
    text-align: center;
}

.pie-seccion-error{
    width: 100%;
    position: absolute;
    bottom: 0;
}

@media all and (max-width:1290px){
    .header__menu--contenedor, .contenedor-principal, .migas-de-pan{
        width: 80%;
    }

    .seccion-servicio__contenido{
        justify-content: center;
    }
}

@media all and (max-width:1150px){

    .hamburguesa{
        display: block;
    }

    .header__menu--enlaces{
        display: none;
    }

    .header__menu--logo{
        width: 60%;
    }

    .header__imagen--texto1 h1{
        font-size: 3rem;
    }

    .header__imagen--texto2 h2{
        font-size: 1.1rem;
    }

    .contenido-principal-presentacion--imagen{
        width: 100%;
    }

    .contenido-principal-presentacion--texto{
        width: 100%;
    }

    .contenedor-principal{
        margin-top: 20px;
        margin-bottom: 0;
    }

    .datos-almochuel{   
        padding-bottom: 30px;
    }

    .seccion-ayuntamiento--texto,.seccion-ayuntamiento--imagen{
        width: 100%;
    }

    .seccion-ayuntamiento--texto{
        margin-bottom: 30px;            
        padding-left: 15px;
    }

    .seccion-iglesia img{
        width: 40%;
    }

    .seccion-iglesia img:first-child, .imagen-parque{
        display: none;
    }

    .seccion-iglesia--texto{
        width: 60%;
        padding-left: 15px !important;
    }

    .seccion-hoya--texto,.seccion-hoya--imagen{
        width: 100%;
    }

    .seccion-hoya--imagen img{
        width: 100%;
    }
    
    .seccion-hoya--texto{
        padding: 0 15px 30px;
    }

    .seccion-llegar--mapa{
        width: 100%;
    }

    .seccion-llegar--texto{
        width: 100%;
    }

    .seccion-fiestas--imagen{
        width: 100%;
        flex-direction: row;
        margin-bottom: 30px;
    }

    .seccion-fiestas--texto{
        width: 100%;
    }

    .seccion-fiestas img, .seccion-fiestas--imagen img:nth-child(2){
        width: 40%;
    }

    .seccion-opiniones-bar{
        width: 90%;
    }

    .seccion-servicio__contenido--texto{
        width: 100%;
        padding: 20px 15px 0 !important
    }
    
    .seccion-servicio__contenido--imagen{
        width: 100%;
        margin: 30px 0 0 !important;
        text-align: center !important;
    }

    .seccion-actualidad-videos{
        justify-content: center;
    }

    .actualidad-videos__video{
        width: 100%;
    }

}

@media all and (max-width:750px){
    .seccion-actualidad-noticias{
        justify-content: center;
    }
    .actualidad-noticias__medio{
        width: 100%;
    }
}

@media all and (max-width:550px){

    .header__menu--contenedor, .contenedor-principal, .migas-de-pan{
        width: 90%;
    }

    .header__imagen--texto1 h1{
        font-size: 2.5rem;
    }

    .header__imagen--texto2 h2{
        font-size: 1rem;
    }

    .seccion-iglesia--texto, .seccion-iglesia img{
        width: 100%;
    }

    .seccion-iglesia--texto{
        margin-bottom: 30px;
    }

    .texto-aguasvivas{
        margin: 30px 0 0;
    }

    .seccion-fiestas--imagen img{
        width: 100%;
    }

    .seccion-fiestas--imagen img:nth-child(2){
        display: none;
    }

    .seccion-fiestas ul{
        padding: 25px 30px 0;
    }

    .contenido-principal-seccion{
        margin-bottom: 60px;
    }

    .presentacion--texto--column{
        width: 100%;
    }

    .columna1{
        margin-bottom: 15px;
    }

    .galeria-alimentos{
        margin-bottom: 0;
    }

    .boton-servicio-bus{
        margin-bottom: 30px;
    }

    .boton-servicio-bus__enlace{
        font-size: 0.8rem;
    }

    .seccion-servicio__contenido--texto{
        margin:0 !important;
    }

    .contacto-institucion--texto{
        font-size: 1rem;
    }
}

@media all and (max-width:450px){

    html{
        font-size: 15px;
    }

    .header__imagen--texto1 h1{
        font-size: 2rem;
    }

    .header__menu--logo img {
        width: 200px;
    }


}