/* --- ESTILOS GLOBALES --- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* --- ESTILOS DE CUERPO DE PÁGINA --- */

body {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

/* CONTENIDO PRINCIPAL */

/* Introducción */

.cont-principal {
    width: 60%;
    margin: 4em auto;
}

.titulo-pag {
    width: 100%;
    margin: 2em auto 3em auto;
    text-align: center;
    color: #202f40;
}

.fichas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ficha {
    width: 100%;
    height: 100%; /* Ajusta esta altura según tus necesidades */
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: box-shadow 0.3s ease, border-bottom 0.3s ease;
}

.ficha:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.ficha.espacio {
    box-shadow: none;
}

.ficha.amarillo:hover {
    border-bottom: 4px solid #ffb300;
}

.ico-ficha {
    width: 50%;
    margin: 1em auto;
}

.img-ficha {
    width: 100%;
}

.txt-ficha {
    text-align: center;
}

.desc-ficha {
    height: 60px;
}

.link-app {
    display: block;
    width: 30%;
    margin: 0 auto 2em auto;
    text-decoration: none;
    color: inherit;
}

.link-app:hover .tit-ficha {
    color: #ffb300;
}

.tit-ficha {
    margin: 1em auto;
}

.fila-ficha-n1 {
    display: none;
    width: 100%;
    justify-content: space-between;
    gap: 2em;
}

.fila-ficha-n2 {
    display: none;
    width: 100%;
    justify-content: space-between;
    gap: 2em;
}

@media (max-width:800px) {
    .cont-principal {
        width: 90%;
        margin: 3em auto;
    }

    .link-app {
        width: 100%;
    } 
}

@media (min-width:800px) and (max-width:1000px) {
    .cont-principal {
        width: 80%;
    }
    
    .link-app {
        width: 45%;
    }
}

@media (min-width:800px) and (max-width:1300px) {
    .cont-principal {
        width: 80%;
        margin: 3em auto;
    }
}