*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
/* header */
.encabezado{
    min-height:150px;
    padding:15px 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #698D35;
    background-image: url(../src/banners/Banner\ Header.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:100% auto;  
}
.encabezado img{
    border-radius: 15px;
    transition: 0.5s ease-in-out;
    width:clamp(90px,10vw,135px);
    height:auto;
    margin-right: 40px;
}
.encabezado img:hover{
    transform: scale(0.9);
    filter: drop-shadow(2px 2px 6px #A7DF59);
}
.menu{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}
.extra{
    margin: auto 10px;
    text-decoration: none;
    color: whitesmoke;
    background: #555555;
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 20px;
    filter: drop-shadow(1px 1px 3px black);
    transition: 0.1s ease-in-out;
}
.extra:hover{
    transform: scale(1.1);
    background:#3c521f;
    filter: drop-shadow(2px 2px 3px white);
}
.contactos{
    margin: auto 10px;
    text-decoration: none;
    color: rgb(30, 30, 30);
    padding: 8px 12px;
    background: gainsboro;
    border-radius: 15px;
    transition: 0.3s ease-in-out;
    font-size: 20px;
    filter: drop-shadow(1px 1px 6px black);
}
.contactos:hover{
    transform: scale(0.9);
    filter: drop-shadow(6px 6px 8px black);
}

/* main */
.principal{
    background: #EFF1ED;
    padding: 25px 0;
}
.principal h1{
    justify-self: center;
    font-size: 80px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-bottom: solid 12px;
    border-image: linear-gradient(to right, #698D35, #465f24)1;
    padding-bottom: 5px;
}
.principal h3{
    font-size: 30px;
    text-align: center;
    margin: 50px 200px;
    color: #6b992a;
    font-family:Georgia, 'Times New Roman', Times, serif;
    text-shadow: 1px 1px 2px #6b992a;
}
/* Parte de la galeria */
.Mural {
    display: grid;
    grid-template-areas: 
    "Uno Cuatro Cinco Dos"
    "Uno Tres Tres Dos"
    "Uno Tres Tres Dos"
    "Uno Seis Siete Dos"
    ;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 140px 320px 320px 140px;
    gap: 20px;
    transition: 0.8s ease-in-out;
    margin: 20px 60px;
}
.Mural img{
    transition: 0.8s ease-in-out;
    border-radius: 15px;
    filter: drop-shadow(2px 2px 6px gray);
}
.Uno {
    grid-area: Uno;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: rotate(8deg);
}
.Dos {
    grid-area: Dos;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: rotate(4deg);
}
.Tres {
    grid-area: Tres;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: rotate(-2deg);
}
.Cuatro {
    grid-area: Cuatro;
    object-fit: contain;
    width: 100%;
    height: 100%;
    transform: rotate(8deg);
}
.Cinco {
    grid-area: Cinco;
    object-fit: contain;
    width: 100%;
    height: 100%;
    transform: rotate(-6deg);
}
.Seis {
    grid-area: Seis;
    object-fit: contain;
    width: 100%;
    height: 100%;
    transform: rotate(5deg);
}
.Siete {
    grid-area: Siete;
    object-fit: contain;
    width: 100%;
    height: 100%;
    transform: rotate(-4deg);
}
.Mural:hover img{
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 0 20px #7aa93c;
}
/* footer */
.pie{
    background: #698D35;
    display: flex;
    justify-content: space-evenly;
    background-image: url(../src/banners/Banner\ Footer.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;  
    border: #555555 6px solid;
}
.info{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.info img{
    height: auto;
    object-fit: cover;
    width: 400px;
    transition: 0.3s ease-in-out;
    align-self: center;
}
.info img:hover{
    transform: scale(0.9) rotate(1deg);
    filter: drop-shadow(1px 1px 4px white);
}
.info h2{
    margin-top: 30px;
    color: whitesmoke;
    font-size: 25px;
}
.redes img{
    margin-top: 10px;
    width: 70px;
    height: auto;
    object-fit: cover;
    transition: 0.5s ease-in-out;
}
.redes img:hover{
    transform: scale(0.9);
    filter: drop-shadow(2px 2px 8px #A7DF59);
}
.logos{
    display: flex;
    justify-content: space-evenly;
}
.mapa iframe{
    height: 200px;
    width: 400px;
    border-radius: 20px;
    box-shadow: 4px 4px 8px #64a010;
    transition: 0.5s;
    margin-top: 10px;
}
.mapa iframe:hover{
    transform: scale(0.85);
}
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.nav a{
    text-decoration: none;
    color: #ebebeb;
    text-shadow: 4px 4px 6px black;
    font-size: 25px;
    margin: 12.5% 0;
    transition: 0.1s ease-in-out;
    padding-bottom: 5px;
}
.nav a:hover{
    transform: scale(0.9);
    border-bottom: 5px solid;
    border-image: linear-gradient(to right, #698D35, #9cd350)1;
}

#boton-modo-oscuro{
    position: fixed;
    bottom: 125px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #1e1e1e;
    color: whitesmoke;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 8px black;
    z-index: 9999;
    transition: .3s;
}

#boton-modo-oscuro:hover{
    transform: scale(1.15);
}

html.modo-oscuro{
    filter: invert(1) hue-rotate(180deg);
    background: #fff;
}

html.modo-oscuro img,
html.modo-oscuro video,
html.modo-oscuro iframe{
    filter: invert(1) hue-rotate(180deg);
}

/* ===========================
BOTON ORKONATRA
=========================== */

#boton-orkonatra{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    cursor: pointer;
    background: transparent;
    z-index: 9999;
    transition: .3s;
}

#boton-orkonatra:hover{
    transform: scale(1.15);
}

#boton-orkonatra img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

/* pantallas de 27 pulgadas */
@media (min-width:1800px){
    .principal h1{
        font-size:95px;
    }
    .principal h3{
        width:70%;
        margin:50px auto;
        font-size:34px;
    }
    .Mural{
        margin:40px 140px;
        grid-template-rows: 180px 380px 380px 180px;
        gap:30px;
    }
}
/* pantallas comunes */
@media (max-width:1400px){
    .principal h1{
        font-size:70px;
    }
    .principal h3{
        width:80%;
        margin:40px auto;
        font-size:26px;
    }
    .Mural{
        margin:30px;
    }
}
/* tablets */
@media (max-width:992px){
    .principal h1{
        font-size:58px;
    }
    .principal h3{
        width:90%;
        margin:30px auto;
        font-size:22px;
    }
    .Mural{
        grid-template-areas:
        "Uno Dos"
        "Tres Tres"
        "Cuatro Cinco"
        "Seis Siete";
        grid-template-columns:1fr 1fr;
        grid-template-rows: 350px 420px 250px 250px;
        margin:25px;
        gap:18px;
    }
    .pie{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:30px 20px;
}
    .info{
        margin-bottom:30px;
    }
    .redes{
        margin-bottom:30px;
}
    .mapa iframe{
        width:100%;
        max-width:420px;
}
    .nav{
        gap:15px;
}
    .nav a{
        margin:5px 0;
}
}
/* celular */
@media (max-width:480px){
    .principal{
        padding:20px;
    }
    .principal h1{
        font-size:42px;
        text-align:center;
    }
    .principal h3{
        margin:25px auto;
        width:95%;
        font-size:18px;
    }
    .Mural{
        display:flex;
        flex-direction:column;
        gap:20px;
        margin:20px;
    }
    .Mural img{
        width:100%;
        height:320px;
        object-fit:cover;
        transform:none !important;
    }
    .encabezado{
        flex-direction:column;
        height:auto;
        padding:20px;
    }
    .encabezado img{
        margin:0 0 20px 0;
    }
    .menu{
        flex-wrap:wrap;
        justify-content:center;
        gap:12px
    }
    .extra, .contactos{
        font-size:18px;
    }
}