*{
    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: 61px 0;
}

.Formulario-total { 
    display: flex;
    justify-self: center;
    background: #ffffff;
    width: 100%;
    max-width: 640px;
    padding: 30px;
    border-radius:12px;
    filter: drop-shadow(2px 3px 6px #a8a8a8);
    margin: 15px;
    flex-direction: column  ;
}
.Registro-Inicio{
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 25px;
    flex-direction: row;
}

.Form-btn {
    flex: 1;
    padding: 12px;
    border: none;   
    background: none;
    font-size: 15px;
    font-weight: bold;
    color: #7a8867;
    cursor: pointer;
}
.Form-btn.activo{
    color: #415e19;
    border-bottom: 3px solid #689628;
}
.Formulario {
    display: none;
    flex-direction: row;
}
.Formulario img{
    width: 250px;
    border-radius: 20px 20px 20px 20px;
    filter: drop-shadow(1px 1px 4px #d1d1d1);
}
.Formulario form{
    margin-left: 100px;
}
.Formulario.activo{
    display: flex;
}
.Formulario h3{
    margin-bottom: 25px;
    color: #548b07;
    font-size: 18px;
}

.Inputs{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.Inputs label{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #3a5326;
}
.Inputs input{
    padding: 10px 12px;
    border: none;
    filter: drop-shadow(1px 1px 10px #cfcfcf);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}
.btn{
    background: #93c74b;
    color: #ffffff;
    border: none;
    filter: drop-shadow(2px 2px 4px #6b9136);
    padding: 12px 18px;
    border-radius: 10px; 
    font-weight: 600;
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px;
    transition: 0.1s ease-in-out;
}
.btn:hover{
    background: #82b142;
    transform: scale(0.98);
}
/* 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%;
}