@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
    width: 100vw;
    margin: 0%;
    padding: 0%;
    overflow-x: hidden;
}
.mainArticulos{
    width: 100vw;
    margin: 0%;
    padding: 0%;
}
.buttonTraductor{
    font-family: "Poppins", sans-serif;
    border: #071928, 1px, solid;
    margin-left: 1%;
    margin-right: 1%;
}

.navbar{
    height: 10vh;
}
.sectionNav {
    width: 100%;
    height: fit-content;
    margin: 0%;
    padding: 0%;
    flex-direction: row;
}

.contenedorIcono {
    margin: 0%;
    padding: 0%;
    width: 50%;
}

.contenedorNav {
    margin: 0%;
    padding: 0%;
}
#navBarra{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
}
#navL{
    font-family: 'Poppins', sans-serif;
}
#navL:hover{
    text-decoration: underline;
}
#iconoT{
   width: 2rem;
   height: 2rem;
}
#iconoT:hover{
    width: 2.5rem;
    height: 2.5rem;
}
#ancla{
    text-decoration-line: none;
    display: flex;
    width: fit-content;
    height: fit-content;
    margin-top: 2%;
    margin-left: 2%;
}
#anclaNav{
    text-decoration-line: none;
    display: flex;
    width: fit-content;
    height: fit-content;
    margin-top: 2%;
    margin-left: 2%;
}
.divSubtituloArticulos{
    height: fit-content;
    margin: 0%;
    padding: 0;
    margin-bottom: 3%;
    margin-top: 3%;
}
.subtituloArticulos{
    font-family: Georgia,'Times New Roman', Times, serif;
    font-size: xx-large;
    font-weight: bolder;
    color: #071928;
    margin: 0%;
    padding: 0%;
    margin-bottom: 0%;
}
.divFooter{
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
}
.liFooter:hover{
    text-decoration: underline;
}
.aFooter{
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}
.aFooter:hover{
    text-decoration: underline;
}
#navLF{
    display: flex;
    margin-left: 3%;
    font-family: 'Poppins', sans-serif;
}
#navLF:hover{
    text-decoration: underline;
}
#iconoT{
   width: 2rem;
   height: 2rem;
}
#iconoT:hover{
    width: 2.5rem;
   height: 2.5rem;
}
#ancla{
    text-decoration-line: none;
    display: flex;
    width: fit-content;
    height: fit-content;
    margin-top: 3%;
    margin-left: 3%;
}
.iconoMail{
    font-size: x-large;
    margin-right: 1%;
}
.linkArticulo{
    text-decoration: none;
    width: fit-content;
}
.divTituloArticulos{
    margin: 0%;
    padding: 0%;
    width: 100vw;
    height: 90vh;
    background-color: #071928;
    margin-bottom: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
   }
.tituloArticulo{
    font-family: Georgia,'Times New Roman', Times, serif;
    font-size: 2.3rem;
    font-weight: bolder;
    font-variant: small-caps;
    color: #d3d5d7de;
}


.divArticulosUno{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 70vh;
    margin: 0%;
    padding: 0%;
    margin-top: 0%;
    margin-bottom: 3%;
}
.divArticulosDos{
    display: flex;
    flex-direction: row;
    justify-content: start;
    height: 70vh;
    width: 100vw;
    margin: 0%;
    padding: 0%;
    margin-top: 0%;
    margin-left: 2%;
}
#divArticulosTres{
    display: flex;
    flex-direction: row;
    justify-content: start;
    height: 60vh;
    width: 100vw;
    margin: 0%;
    padding: 0%;
    margin-top: 0%;
    margin-left: 1%;
    margin-bottom: 3%;
}
.divTarjetaArticulos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 33%;
    height: fit-content;
    margin: 0%;
    padding: 0%;
}
.divTarjetaArticulosUno{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 33%;
    height: fit-content;
    margin: 0%;
    padding: 0%;
}
#cuerpoCard{
    height: 100%;
}
.imgArticulo{
    width: 30vw;
    height: 300px;
}
.imgArticulo:hover{
    width: 31vw;
    height: 315px;
}
.imgArticuloDos{
    width: 30vw;
    height: 300px;
}
.imgArticuloDos:hover{
    width: 31vw;
    height: 315px;
}
.imgArticuloTres{
    width: 30vw;
    height: 300px;
}
.imgArticuloTres:hover{
    width: 31vw;
    height: 315px;
}
.imgArticuloCuatro{
    width: 30vw;
    height: 300px;
}
.imgArticuloCuatro:hover{
    width: 31vw;
    height: 315px;
}
.parrafoCardArticulos{
    color: #4d70a5;
}
.tituloCardArticulo{
    font-family: Georgia,'Times New Roman', Times, serif;
    color: #071928;
    font-size: 1rem;
    margin-top: 3%;
}
.tituloCardArticuloDos{
    font-family: Georgia,'Times New Roman', Times, serif;
    color: #071928;
    font-size: 1rem;
    margin-top: 3%;
}
.divTituloCardArticulosTres{
    width: 90%;
    margin: 0%;
}
.divTituloCardArticulosDos{
    width: 90%;
}
.tituloCardArticulosTres{
    font-family: Georgia,'Times New Roman', Times, serif;
    color: #071928;
    font-size: 1rem;
    margin-top: 3%;
}
.textoCardArticulos{
    font-family: Georgia,'Times New Roman', Times, serif;
    color: #071928;
    font-size: 1rem;
    margin-top: 2%;
    margin-bottom: 3%;
}
.textoCardArticulosDos{
    font-family: Georgia,'Times New Roman', Times, serif;
    color: #071928;
    font-size: 1rem;
    margin-top: 3%;
    margin-bottom: 3%;
}
#button:hover{
    background-color: #071928;
    color: #95999f;
}
@media screen and (min-width: 0px) and (max-width: 768px){

    body{
        width: 100vw;
        height: fit-content;
        margin: 0%;
        padding: 0%;
        overflow-x: hidden;
    }
    .mainArticulos{
        width: 100vw;
    }
    .row {
        width: 100%;
        height: fit-content;
        margin: 0%;
        padding: 0%;
        flex-direction: row;
    }
    
    .contenedorIcono {
        margin: 0%;
        padding: 0%;
        width: 50%;
    }
    
    .contenedorNav {
        margin: 0%;
        padding: 0%;
        width: 50%;
    }
    #navBarra{
        width: fit-content;
        margin-right: 5%;
    }
    #navL{
        display: flex;
        width: 100%;
        font-family: 'Poppins', sans-serif;
    }
    #containerNav{
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
    }
    #navL:hover{
        text-decoration: underline;
    }
    #iconoT{
       width: 2rem;
       height: 2rem;
       display: table-cell;
       vertical-align: middle;
    }
    #iconoT:hover{
        width: 2.5rem;
       height: 2.5rem;
    }
    #ancla{
        display: flex;
        width: fit-content;
        height: fit-content;
        margin-top: 5%;
        margin-left: 10%;
    }
    #anclaNav{
        text-decoration-line: none;
        display: flex;
        width: fit-content;
        height: 100%;
        margin: 0%;
        margin-left: 10%;
        display: table;
    }
    .divSubtituloArticulos{
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        height: fit-content;
        margin-bottom: 10%;
        margin-top: 10%;
    }
    .subtituloArticulos{
        font-family: Georgia,'Times New Roman', Times, serif;
        font-size: 2rem;
        font-weight: bolder;
        color: #071928;
        margin-bottom: 2%;
    }
    .row {
        width: 100%;
        height: fit-content;
        margin: 0%;
        padding: 0%;
        flex-direction: row;
    }
    #navL:hover{
        text-decoration: underline;
    }
    #ancla{
        display: flex;
        width: fit-content;
        height: fit-content;
        margin-top: 5%;
        margin-left: 10%;
    }
    #articulos{
        height: fit-content;
        width: 100vw;
        margin-bottom: 0;
    }
    .divTituloArticulos{
        width: 100vw;
        height: 35vh;
        color: #071928;
        margin-bottom: 20%;
        margin-top: 5%;
        display: flex;
        justify-content: center;
       }
    .tituloArticulo{
        height: fit-content;
        margin: 0%;
        padding: 0%;
        font-family: Georgia,'Times New Roman', Times, serif;
        font-size: 2.5rem;
        font-weight: bolder;
        font-variant: small-caps;
    }
    
    .divArticulosUno{
        width: 100vw;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0%;
        margin: 0%;
    }
    .divArticulosDos{
        width: 100vw;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0%;
        margin-left: 0%;
    }
    #divArticulosTres{
        display: flex;
        flex-direction: row;
        justify-content: start;
        height: 60vh;
        margin: 0%;
        padding: 0%;
        margin-top: 0%;
        margin-left: 0%;
    }
    .divTarjetaArticulos{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 99%;
        height: fit-content;
    }
    .divTarjetaArticulosUno{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 99%;
        height: fit-content;
    }
    .tituloCardArticulo{
        font-family: Georgia,'Times New Roman', Times, serif;
        color: #071928;
        font-size: 1.1rem;
        width: 99%;
    }
    .tituloCardArticuloDos{
        font-family: Georgia,'Times New Roman', Times, serif;
        color: #071928;
        font-size: 1.1rem;
        width: 99%;
        margin: 0%;
    }
    .tituloCardArticulosTres{
        font-family: Georgia,'Times New Roman', Times, serif;
        color: #071928;
        font-size: 1.1rem;
        margin:0%;
        margin-top: 3%;
    }
    #cuerpoCard{
        width: fit-content;
        height: fit-content;
        margin-bottom: 10vh;
        margin-top: 5vh;
    }
    .divTituloCardArticulosTres{
        width: 90%;
        margin-bottom: 2%;
    }
    .divTituloCardArticulosDos{
        width: 90%;
    }
    .textoCardArticulos{
        font-family: Georgia,'Times New Roman', Times, serif;
        color: #071928;
        font-size: 1rem;
        margin-bottom: 2%;
    }
    .textoCardArticulosDos{
        font-family: Georgia,'Times New Roman', Times, serif;
        color: #071928;
        font-size: 1rem;
        width: 90%;
        margin-bottom: 2%;
        
    }
    .imgArticulo{
        width: 95vw;
        height: fit-content;
    }
    .imgArticuloDos{
        width: 95vw;
        height: fit-content;
    }
    .imgArticuloTres{
        width: 95vw;
        height: fit-content;
    }
    .imgArticuloCuatro{
        width: 95vw;
        height: fit-content;
    }
    #button{
        color: #071928;
        background-color: #ffffff;
        margin-top: 2%;
        border-color: #071928;
    }
    #button:hover{
        background-color: #071928;
        color: #95999f;
    }
    #divFooters{
        display: flex;
        flex-direction: column;
        align-items: start;
    }
    #listFooter{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .divFooter{
        font-family: 'Poppins', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: start;
    }
    .liFooter:hover{
        text-decoration: underline;
    }
    .aFooter{
        text-decoration: none;
    }
}