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

@media screen and (max-width: 920px) {
    a.correo,
    a.whatsapp {
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 816px) {
    a.correo,
    a.whatsapp {
        font-size: 2.8vw;
    }
}

@media screen and (max-width: 720px) {
    a.correo,
    a.whatsapp {
        font-size: 3.1vw;
    }
}

@media screen and (max-width: 640px) {
    a.correo,
    a.whatsapp {
        font-size: 3.5vw;
    }
}

@media screen and (max-width: 560px) {
    a.correo,
    a.whatsapp {
        font-size: 4vw;
    }
}

@media screen and (max-width: 480px) {
    a.correo,
    a.whatsapp {
        font-size: 4.7vw;
    }
}

html {
    overflow-y: scroll;
}

body {
    display: grid;
    grid-template-columns: 2fr minmax(300px,2.5fr) 2fr;
    grid-template-rows: minmax(10vh, 1.0fr) [logo-start] minmax(35vh, 3.5fr) [logo-end ] minmax(30vh, 3.0fr) [footer-start] minmax(20vh, 2.0fr) [footer-end];
    grid-template-areas: 'content content content' 'content content content' 'content content content' 'content content content';
    grid-gap: 0px;
}

main {
    grid-area: content;
}

header {
    z-index: 1;
    grid-area: logo / 2 / logo / 3;
}

footer {
    z-index: 1;
    grid-area: footer / 2 / footer / 3;
    display: grid;
    grid-template-columns: minmax(55px, 7vw) minmax(55px, 7vw) minmax(55px, 7vw) minmax(55px, 7vw);
    grid-gap: 9%;
    grid-template-areas: 'brasil colombia argentina mexico';
    grid-template-rows: 1fr;
}

#logo {
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    opacity: 0.99;
    transition: 2s;
}

#logo:hover {
    opacity: 0.65;
}

#fondo {
    height: 100%;
    opacity: 0.98;
    object-fit: cover;
    width: 100%;
}

.icono {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    opacity: 0.95;
    transition: 1s;
}

.icono:hover {
    transform: scale(1.1);
}

#brasil {
    grid-area: brasil;
}

#colombia {
    grid-area: colombia;
}

#argentina {
    grid-area: argentina;
}

#mexico {
    grid-area: mexico;
}

#secondLine {
    z-index: 1;
    grid-area: 3 / 2 / span 1 / span 1 ;
    display: grid;
    grid-template-columns: minmax(10px, 1.9fr) minmax(35px, 0.5fr) minmax(210px, 3.3fr);
    grid-template-rows: 7vh 6vh;
    grid-template-areas: '. iconoMail dirMail' '. iconoWhatsapp telefono';
    grid-gap: 0px;
}

.correo {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.3vw;
    color: white;
    margin-left: auto;
    grid-area: dirMail;
    transition: 1s;
    align-self: center;
}

.whatsapp {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.3vw;
    color: white;
    margin-left: auto;
    grid-area: telefono;
    transition: 1s;
    align-self: center;
}

/* la imagen del logo de WSP */
#logo-WSP {
    z-index: 1;
    transition: 1s;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

/* el link al hacer click en el logo de WSP */
#icnWsp {
    z-index: 1;
    grid-area: iconoWhatsapp;
    height: 100%;
    width: 100%;
    justify-self: end;
    object-fit: scale-down;
}

#logo-WSP:hover {
    transform: scale(1.2);
    background-color: #25D366;
}

.correo:hover,
.whatsapp:hover {
    color: orange;
}

a:link {
    text-decoration: none;
}

.not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}