@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --verde: #4BB92F;
    --naranja: #ff8700;
    --azul: #0078ff;
    --violeta: #8d00ff;
    --colorletra: #212631;
    --colorletragris: #cacbcc;
    --fondo: white;
    --fondogris: #fbfbfd;
    --colorborde: #eceef2;

    --margen_lateral: 15vw;
}

body {
    font-family: 'Nunito', sans-serif;
    padding: 0px;
    margin: 0px;
}

header {
    padding-left: var(--margen_lateral);
    padding-right: var(--margen_lateral);
    border-bottom: 1px solid var(--colorborde);
    display: grid;
    grid-template-columns: 7fr 3fr;
    
}

header ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
}

#menu_arriba {}

#menu_arriba ul li {
    border-right: 1px solid var(--colorborde);
}

#menu_arriba ul li a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: var(--colorletra);
    font-weight: 700;
}

#menu_arriba ul {}
#menu_buscar ul {
    justify-content: right;
}

#menu_buscar ul li {
    display: block;
    padding: 20px;
    color: var(--colorletra);
    font-weight: 700;
    align-self: flex-end;
}

.border_abajo_verde{
    border-bottom: 3px solid var(--verde);
}
.border_abajo_naranja{
    border-bottom: 3px solid var(--naranja);
}
.border_abajo_azul{
    border-bottom: 3px solid var(--azul);
}
.border_abajo_violeta{
    border-bottom: 3px solid var(--violeta);
}



.fondo_verde{
    background-color: var(--verde);
    padding: 3px;
    border-radius: 2px;
    color: var(--fondo);
}
.fondo_naranja{
    background-color: var(--naranja);
    padding: 3px;
    border-radius: 2px;
    color: var(--fondo);
}
.fondo_azul{
    background-color: var(--azul);
    padding: 3px;
    border-radius: 2px;
    color: var(--fondo);
}
.fondo_violeta{
    background-color: var(--violeta);
    padding: 3px;
    border-radius: 2px;
    color: var(--fondo);
}

#menu_arriba ul li.border_abajo_verde  a:hover{
    color: var(--verde);
}
#menu_arriba ul li.border_abajo_naranja a:hover{
    color: var(--naranja);
}
#menu_arriba ul li.border_abajo_azul a:hover{
    color: var(--azul);
}
#menu_arriba ul li.border_abajo_violeta a:hover{
    color: var(--violeta);
}

main{
    padding-top: 40px;
    padding-bottom: 60px;
}

#cabecera{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}



#ultimospost{
    margin-bottom: 60px;

}

#ultimospost ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
}



#seccion1{
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 25px;
}

#seccion1 section ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


#seccion1 aside ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#seccion1 aside ul li a{
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 8px;
    color: var(--colorletra);
    text-decoration: none;
    margin-bottom: 8px;
}


#seccion1 aside ul li a img{
    width: 100%;
}


#seccion1 aside ul li a p{
    margin: 0px;
    padding: 0px;
}

#seccion1 aside>h2{
    margin-top: 0px;
}

#seccionancha{
    padding-top: 28px;
    padding-bottom: 28px;
}

#seccionancha>div>h2{
    text-align: center;
}

#seccionancha ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}



footer{
    border-top: 1px solid var(--colorborde);
    display: grid;
    grid-template-columns: 4fr 2fr 2fr 2fr;
    gap: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
}

footer a, footer p {
    color: var(--colorletragris);
    text-decoration: none;
}
footer a:hover{
    color: var(--colorletra);
}

footer ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.ancho_corto{
    margin-left: var(--margen_lateral);
    margin-right: var(--margen_lateral);
}

.ancho_total{
    margin-left: 0px;
    margin-right: 0px;
    background-color: var(--fondogris);
    border-top: 1px solid var(--colorborde);
    border-bottom: 1px solid var(--colorborde);
}


.enlinea{
    display: inline;
    padding: 8px;
}

.letrapeque{
    font-size: 0.7em;
}

.letragrande{
    font-size: 1.3em;
}


.card_sobre img{
    display: block;
    width: 100%;
}

.card_sobre a{
    text-decoration: none;
}

.card_sobre div:hover{
    opacity: 0.95;
}

.card_sobre h2:hover{
    text-decoration: underline;
}

.card_sobre div{
    margin-top: -150px;
    color: var(--fondo);
    padding: 15px;
}





.card_debajo a img{
    display: block;
    width: 100%;
}

.card_debajo a img:hover{
    opacity: 0.95;
}

.card_debajo a{
    color: var(--colorletra);
    text-decoration: none;
    font-size: 0.9em;
}

.card_debajo a h2:hover{
    text-decoration: underline;
}