*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}

:root {
    --nav:#003366;
    --color-titulo:#0056b3;
    --color-parrafo:#2f2f2f;
    --footer:#1a1919;
    --botones_link:#ff7f50;
    --titulo: bold;
    --sub-titulo: 500;
    --parrafo: 300;
}

/* Btn up */
#btn-up {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: background-color 0.3s ease;
}

#btn-up:hover {
    background-color: #0056b3;
}

body{
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
}
header{
    background: var(--nav);
    width: 100%;
    height: 50px;
    margin: auto;
}
header .contenedor{
    max-width: 1400px;
    margin: auto;
}
header #media{
    position: fixed;
    right: 5%;
    transform: translateX(-5%);
    top: 1.5%;
    transform: translateY(-1.5%);
    font-size: 26px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
header #media:hover{
    color: var(--botones_link);
}

header .nombre_web{
    width: 50%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
header .nombre_web a{
    font-size: 26px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    font-weight: var(--titulo);
}
header .nombre_web a:hover{
    color: var(--botones_link);
}

header .navegacion{
    background: var(--nav);
    width: 100%;
    transition: all 0.5s ease-in-out;
    position: fixed;
    left: -100%;
}
header .navegacion ul{
    padding: 0;
    display: flex;
    flex-direction: column;
}
header .navegacion ul li{
    width: 100%;
    list-style: none;
    padding: 10px;
}
header .navegacion ul li a{
    text-decoration: none;
    padding: 10px;
    color: white;
    font-weight: var(--sub-titulo);
    cursor: pointer;
    display: block;
    width: 300px;
}
header .navegacion ul li a:hover{
    text-decoration: underline;
    color: var(--botones_link);
}
.menuDesplegable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.menuDesplegable.visible {
    max-height: 300px;
}
#icono{
    font-size: 20px;
    color: white;
    padding: 5px;
}
.idiomas{
    width: 100%;
    margin: auto;
    margin-left: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: start;
}
.idiomas select{
    border: none;
    outline: none;
    appearance: none;
    background: var(--botones_link);
    color: white;
    padding: 5px;
    border-radius: 10px;
}
footer{
    background: #242323;
    width: 100%;
    margin: auto;
}
footer .derechos{
    width: 90%;
    margin: auto;
    text-align: center;
    padding-bottom: 15px;
}
footer .derechos p{
    font-size: 12px;
    padding: 10px;
    color: white;
}
footer .cajafooter{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
}
footer .cajafooter .formulario{
    width: 100%;
    margin: 15px auto;
}
footer .cajafooter .formulario form{
    width: 100%;
    display: flex;
    flex-direction: column;
}
footer .cajafooter .formulario form h4{
    text-align: center;
    font-size: 20px;
    color: white;
}
footer .cajafooter .formulario form input[type='text']{
    width: 90%;
    height: 40px;
    border-radius: 10px;
    margin: 5px auto;
    padding: 5px;
    padding-left: 10px;
}
footer .cajafooter .formulario form input[type='submit']{
    width: 90%;
    height: 40px;
    border-radius: 10px;
    background: var(--botones_link);
    color: white;
    margin: 5px auto;
    cursor: pointer;
    font-weight: bold;
}
footer .cajafooter .formulario form input[type='submit']:hover{
    color: black;
    opacity: 0.8;
}
.rrss,.legales,.enlaces{
    width: 90%;
    margin: auto;
    margin-top: 15px;
}
.rrss ul,.legales ul,.enlaces ul{
    padding: 0;
    width: 100%;
}
.rrss ul li,.legales ul li,.enlaces ul li{
    list-style: none;
}
.rrss ul p,.legales ul p,.enlaces ul p{
    text-decoration: underline;
    color: var(--botones_link);
    font-size: 20px;
}
.rrss ul li a,.legales a,.legales ul li a,.enlaces ul li a{
    color: white;
    text-decoration: none;
    font-size: 14px;
    padding: 5px;
    line-height: 50px;
    /* display: inline; */
}
.rrss ul li a,.legales ul li a,.enlaces ul li a{
    display: inline;
}

.rrss ul li a:hover,.legales ul li a:hover,.enlaces ul li a:hover{
    color: #ff7f50;
}

/*Section 1*/
.buscador{
    width: 100%;
    background: var(--nav);
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    color: white;
}
.buscador h1{
    text-align: center;
    font-size: 24px;
    padding: 10px;
}

.buscador p{
    text-align: center;
    font-size: 12px;
    padding: 5px;
    line-height: 20px;
}
.buscador form,header .navegacion ul li form{
    width: 82%;
    margin:10px auto;
    text-align: center;
    display: grid;
    grid-template-columns: 82% 17%;
    grid-gap: 1%;
}
.buscador form input[type='search'],header .navegacion ul li form input[type='search']{
    height: 30px;
    padding: 10px;
    border: none;
    outline: none;
    border-radius: 10px;
    margin-bottom: 20px;
    grid-column: 1/2;
}
.buscador form button,header .navegacion ul li form button{
    border: none;
    outline: none;
    border-radius: 20%;
    grid-column: 2/3;
    height: 30px;
    background: var(--botones_link);
    font-size: 18px;
    color: white;
    cursor: pointer;
}
.buscador form button:hover, header .navegacion ul li form button:hover{
    color: var(--footer);
}
.buscador .interact{
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.buscador img{
    width: 150px;
    height: 150px;
}
.section2{
    width: 100%;
    margin:40px auto;
}

.section2 h2{
    color: var(--color-titulo);
    font-size: 20px;
    text-align: center;
}

.section2 .favoritos{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.section2 .favoritos .card{
    width: 80%;
    margin:20px auto;
    box-shadow: 0 0 5px 1px var(--color-titulo);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.section2 .favoritos .card figure{
    max-width: 100%;
    margin: 0 auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section2 .favoritos .card figure picture,
.section2 .favoritos .card figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.texto {
    width: 100%;
    margin: 20px auto;
}
.texto h2{
    text-align: center;
    color: var(--color-titulo);
    padding: 5px;
    font-size: 16px;
}
.texto p {
    width: 90%;
    margin: auto;
    text-align: center;
    color: var(--color-parrafo);
    padding: 3px;
    font-size: 12px;
}
.link{
    width: 100%;
    height: 50px;
    margin: auto;
    text-align: center;
}
.link a{
    text-decoration: none;
    color: white;
    background: var(--nav);
    padding: 15px;
    border-radius: 30px;
    cursor: pointer;
}
.link a:hover{
    color: var(--botones_link);
}

.faq{
    width: 100%;
    margin: 30px auto;
}
.faq h2{
    text-align: center;
    color: var(--color-titulo);
}
.faq p{
    text-align: center;
    font-size: 14px;
    width: 70%;
    margin: 20px auto;
}
.faq figure{
    width: 100%;
    height: 200px;
}
.faq figure img{
    width: 100%;
    height: 200px;
}
.question{
    width: 100%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
}
.faq .columna h3,.faq .columna2 h3{
    width: 85%;
    margin: auto;
    text-align: center;
    color: var(--color-titulo);
}
.faq .columna p,.faq .columna2 p{
    text-align: start;
    font-size: 14px;
    width: 85%;
    margin: 20px auto;
    line-height: 20px;
}
.faq .columna span,.faq .columna2 span{
    padding: 5px;
    font-size: 20px;
    color: #007bff;
}


@media (min-width:993px){
    .section2{
        width: 80%;
    }
    .section2 .favoritos{
        display: grid;
        grid-template-columns: 32% 32% 32%;
        grid-gap: 3%
    }
    footer .cajafooter{
        width: 80%;
        padding-top: 40px;
        flex-direction: row;
    }
    footer .cajafooter .formulario{
        order: 3;
    }
    .buscador h1{
        margin: auto;
        padding-top: 60px;
        font-size: 30px;
        width: 50%;
    }
    .buscador p{
        width: 50%;
        margin: auto;
        font-size: 16px;
    }
    .buscador form{
        width: 30%;
        grid-template-columns: 87% 13%;
        padding-top: 50px;
    }
    .buscador .interact{
        width: 50%;
    }
    .buscador form input[type='search'],.buscador form button{
        height: 50px;
    }
    header #media{
        display: none;
    }
    header{
        height: auto;
    }
    header .contenedor{
        display: grid;
        grid-template-columns: 30% 70%;
        /* grid-template-columns: 25% 75%; */
        position: relative;
    }
    header .nombre_web{
        grid-column: 1/2;
        width: auto;
        /* background: red; */
    }
    header .navegacion{
        grid-column: 2/3;
        /* background: rebeccapurple; */
        position: static;
    }
    header .navegacion ul{
        /* background: darkcyan; */
        height: 50px;
        align-items: center;
        flex-direction: row;
        
    }
    header .navegacion ul li{
        /* background: darkblue; */
    }
    header .navegacion ul li a{
        /* background: red; */
        width: auto;
        display: inline;
    }
    header .navegacion .menuDesplegable{
        background: var(--nav);
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 50px;
        z-index: 99;
        height: auto;
    }
    .question{
        width: 80%;
        display: grid;
        flex-direction: row;
        grid-template-columns: 48% 48%;
        grid-gap: 2%;
    }
    .faq .columna h3,.faq .columna2 h3,.faq .columna p,.faq .columna2 p{
        width: 100%;
    }
    header .navegacion ul li form{
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 0;
        align-items: center;
    }
    header .navegacion ul li form input[type='search']{
        margin: 0;
        padding: 5px;
        align-items: center;
    }
    header .navegacion ul li form button{
        height: 30px;
        width: 40px;
    }
}