:root {
    --color_letras: white;
    --background-color_header: rgb(8, 108, 56);
    --background-color_botones-header: rgb(225, 217, 206);
    --background-color_botones-header-hover: rgb(196, 216, 206);
}

body {
    margin: 0;
    box-sizing: border-box;
    /* min-height: 100vh; */
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    margin: 0;
    box-sizing: border-box;
    /* min-height: 100vh; */
    height: 70vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color_botones-header-hover);
    /* overflow-y: auto; */
}

/* ------------------------- BUSQUEDA ------------------------- */
#busqueda {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 500px;
}

#busqueda form {
    min-width: 400px;
    display: flex;
    width: 100%;
    border: 2px solid var(--background-color_header);
    border-radius: 25px;
    overflow: hidden;
}

#busqueda input[type="search"] {
    flex: 1;
    padding: 10px 15px;
    border: none;
    outline: none;
    font-size: 16px;
}

#busqueda button {
    background-color: var(--background-color_header);
    border: none;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#busqueda button:hover {
    background-color: var(--background-color_botones-header-hover);
}

#busqueda button img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ------------------------- RESTAURANTES ------------------------- */
#restaurantes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10%;
    width: 100%;
    height: calc(calc(100vh - 15vh - 15vh));
    margin: 30px auto;
    padding-bottom: 5%;
}

#restaurantes a {
    text-decoration: none;
    color: inherit;
    width: 20%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.2s ease;
}

/* #restaurantes > a > img {
    height: 80%;
    border-radius: 45% 30% 40% 50%;
} */

#madrid {
    height: 80%;
    border-radius: 50% 20% 30% 50% / 40% 50% 30% 60%;
}

#valencia {
    height: 80%;
    border-radius: 60% 40% 20% 80% / 50% 60% 40% 70%;
}

#asturias {
    height: 80%;
    border-radius: 20% 80% 70% 30% / 40% 30% 70% 60%;
}

#andalucia {
    height: 80%;
    border-radius: 30% 30% 60% 60% / 50% 40% 70% 60%;
}

#extremadura {
    height: 80%;
    border-radius: 70% 20% 50% 30% / 60% 70% 40% 30%;
}

#canarias {
    height: 80%;
    border-radius: 40% 60% 30% 70% / 30% 50% 70% 60%;
}

#restaurantes a:hover {
    transform: scale(1.05);
}

#restaurantes h3 {
    padding: 10px;
    text-align: center;
}

/* ------------------------- COOKIES ------------------------- */
#cookies {
    position: fixed;
    width: 90%;
    height: 20vh;
    background-color: var(--background-color_header);
    bottom: 0;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cookies > #texto {
    width: 70%;
    height: 100%;
}

#cookies > #botones {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
}

#cookies > #botones > button {
    padding: 2%;
    width: 70%;
    height: 30%;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    background-color: var(--background-color_botones-header);
}

/* ------------------------- UTILS ------------------------- */
.oculto {
    display: none !important;
}

.visible {
    display: block;
}