@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/* CSS Document */
* {
    font-family: "Heebo", sans-serif;
    box-sizing: border-box;
}
html {    
    --anchomaximo: 1200px; 
    --anchomaximo1: 900px;    
     --negro: #212529;
    --azul1: #1D71b8;
    --azul2: #38A8E0;
    --azulmuyclaro: #E2F2F9;
    --blanco: #FFFFFF;
    --grisclaro: #ABABAB;
    --gris: #8E8F8F;
    --grisclaro: #F5F5F5;
    --grismedio: #ABACAC;
    --grisoscuro: #616161;
    --grismuyoscuro: #474747;    
    --sombra: 2px 4px 4px rgba(16, 58, 65, 0.25);
    font-size: 1rem;
    --somddbra1: 2px 2px 4px rgba(16, 58, 65, 0.25);

    --sombrabotonessecundarios: 4px 4px 10px rgba(0, 34, 40, 0.5);
    --quitasombrabotonessecundarios: 0px 0px 10px rgba(0, 34, 40, 0.5);

    --sombraetiquetaestandard:  2px 4px 4px var(--azulsemiclaro); 
    --sombra1:  2px 4px 4px rgba(201, 223, 226, 0.45)
}
body {
    margin: 0px;
    background-color: var(--blanco);
    color: var(--negro);
}
.anchomaximo {
    max-width: var(--anchomaximo);
    margin: 0px auto;
}
header {
    padding: 2rem;
    position: sticky;
    top: 0px;
    background-color: var(--blanco);
}
header img {
    display: block;
    height: 4rem;
    width: auto;
}
#contenedortexto {
    padding: 2em 2em;
    padding-top: 0px;
    margin-left: .5rem;
    margin-right: .5rem;
    box-shadow: var(--sombra);
}
main {
    margin-left: 4rem;
    margin-right: 4rem;
}
h1 {
    font-size: 1rem;
    color: var(--azul1);
    display: flex;
    flex-direction: column;
    margin: 0px;
    align-items: center;
}
h1 > span:first-of-type {
    font-size: 3em;
    font-weight: 700
}
h1 > span:last-of-type {
    font-size: 1.5em;
    font-weight: 600
}
#contenedorpaises {
    padding: 3rem 0px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#contenedorpaises a {
    display: flex;
    background-color: var(--azulmuyclaro);    
    box-shadow: var(--sombra);
    padding: 1.5rem;
    text-decoration: none;
    margin-bottom: 2rem;
    width: calc(50% - 1rem);
    margin-left: .5rem;
    margin-right: .5rem;
    
}
#contenedorpaises a img {
    height: 5rem;
    width: auto;
}
#contenedorpaises a > span {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 1rem;
}
.pais {
    color: var(--negro);
    font-size: 1.5rem;
    font-weight: 700;
}
.titulopais {
    font-size: 1.15rem;
    color: var(--grisoscuro);
}
@media (max-width: 900px) {
    main {
        margin-left: 2rem;
        margin-right: 2rem;
    }
    #contenedortexto {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    #contenedorpaises a {       
        width: calc(100% - 1rem);
    }
}

@media (max-width: 600px) {
     main {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    #contenedortexto {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #contenedorpaises a {    
        flex-direction: column;
        align-items: center;

    }
    .pais {
        margin-top: 1rem;
        margin-bottom: .25rem;
    }
    #contenedorpaises a img {
        height: 4rem;
    }
}