@font-face {
    font-family: 'Cabin';
    src: url('./font/Cabin/Cabin-VariableFont_wdth\,wght.ttf');
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Cabin';
}

body{
    min-height: 100vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
    "header header header header"
    "main main main main"
    "footer footer footer footer";
}

header{
    grid-area: header;
   /* padding: 1%;*/
}

header h1{
    color: #020016;
    font-weight: bold;
    text-shadow: 4px 4px 1px #aee3f1;
    margin: 0 auto;
    display: inline-block;
}

.logo{
    display: inline;
    vertical-align: middle;
}

a, a > button{
    text-decoration: none;
    color: #7d526e;
}

a:hover{
    color: #f98735;
    /*font-size: 2em;*/
}

a:hover button{
    color: #020016;
    background: #f98735;
}

main{
    grid-area: main;
    display: grid;
    grid-template-rows: auto 1fr auto ;
    grid-template-areas: 
    "encabezado encabezado encabezado encabezado"
    ". section section .";
}

/* --------------BUSCADOR DENTRO DE MAIN --------------*/

.encabezado {
    grid-area: encabezado;
    text-align: center;
    font-size: 2em;
    background: #aee3f1; 
    color: #020016;  
}

.encabezado input{
    font-size: 60%;
}

.encabezado button {
    padding: 0.5%;
    font-size: 0.5em;
}

form{
    margin: 2%;
}

#search-form {
    margin-top: 10px;
    padding: 1%;
}

#search-form input[type="text"] {
    padding: 5px;
    margin-right: 5px;
}

/* ----------------FIN BUSCAR ---------------------*/

section{
    grid-area: section;
    display: grid;
    grid-template-columns: 50% 50%;
    /*text-align: center;*/
    /*margin: 2%;*/
}

section h3{
    text-align: center;
}

article{
    /*padding: 2%;
    margin: 3%;
    border-radius: 20px ;
    box-shadow: #b2ecfc 0px 2px 4px 0px, #b2ecfc 0px 2px 16px 0px;*/
    position: relative; /* Hace que los elementos con position absoluta se alineen a este contenedor */
    padding: 2%;
    margin: 3%;
    border-radius: 20px;
    box-shadow: #b2ecfc 0px 2px 4px 0px, #b2ecfc 0px 2px 16px 0px;
    min-height: 200px;
}


article ul{
    /*list-style-type: none;*/
    font-size: 1em;
    padding: 2%;
    margin: 2%;
}

article ul li{
    margin: 2%;
}

/*article button { 
    /*margin: 2.5%;
    padding: 2.5%;
    bottom: 10px;
    box-shadow: #b2ecfc 0px 0px 5px 0px, #b2ecfc 0px 0px 1px 0px;*/
   /* position: absolute; /* Posiciona el botón dentro del article */
    /*bottom: 10px; /* Distancia del fondo del contenedor */
    /*left: 50%; /* Centra horizontalmente */
    /*transform: translateX(-50%); /* Ajusta el centro real del botón */
    /*padding: 1rem;
    box-shadow: #b2ecfc 0px 0px 5px 0px, #b2ecfc 0px 0px 1px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}*/

footer{
    grid-area: footer;
    text-align: center;
    padding: 2%;
    font-size: 2em;
    color: #020016;
    background: #aee3f1;  
}

footer .inicio a{
    color: #020016;
}


.subir{
    font-size: 4em;
    position: fixed; /*posición fija*/
    bottom: 10px;
    right: 15px;/*se situe a la derecha*/
    z-index: 4;/*situadi encima de todo el contenido*/
}

/*-------------PARA TABLET--------------------*/
@media screen and (max-width: 1080px){
    main{
        grid-area: main;
        display: grid;
        grid-template-areas: 
        "encabezado encabezado"
        "section recursos";
    }

    section{
        grid-area: section;
        display: grid;
        grid-template-columns: 50% 50%;
        text-align: center;
        margin: 2%;
    }
}

/*-------------PARA MÓVIL---------------------*/
@media screen and (max-width: 800px){
    main{
        grid-area: main;
        display: grid;
        grid-template-areas: 
        "encabezado"
        "section"
        "recursos";
    }
    section{
        display: grid;
        grid-template-columns: 100%;
        text-align: center;
    }

    article {
        position: static; /* Cambia a flujo normal en móviles */
        min-height: auto; /* Ajusta la altura automáticamente */
    }

    article button {
        position: static; /* Desactiva posición absoluta */
        transform: none; /* No hace falta centrar con translate */
        margin-top: 1rem; /* Añade espacio entre el texto y el botón */
        margin-left: auto; /* Opcional: para centrar */
        margin-right: auto; /* Opcional: para centrar */
    }
    
}
