#section__hero{
    padding: calc(60px) 10% 0%;
    background-color: var(--color-secondary);
    position: relative;
    &::before{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        background-image: url(/images/emeka_sello_oscuro.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0.05;
        filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.5));
    }
    &::after{
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        background-color: var(--color-secondary-light);
        z-index: 1;
    }
    .column__2{
        .col__left{
            padding-right: 10%;
            padding-bottom: 7%;
            width: 45%;
            h1{
                color: var(--color-accent);
            }
            h2{
                color: var(--color-secondary-light);
            }
            h2 strong{
                color: var(--color-primary-light);
                font-weight: unset;
            }
            p{
                color: var(--color-white);
                font-size: var(--size-md);
            }
        }
        .col__right{
            width: 55%;
            img{
                position: relative;
                z-index: 2;
            }
        }
    }
    
}

#section__data__contact{
    background-color: var(--color-secondary-light);
    padding: 5% 10% 0%;
    .column__2{
        .col__left{
            padding-right: 15%;
            h4{
                font-size: var(--size-sm);
                text-transform: uppercase;
            }
            a{
                font-size: var(--size-sm);
                font-weight: 400;
            }
        }
        .col__right{
            #form{
                padding: 1%;
                font-size: var(--size-sm);
                row-gap: 0px;
                .column__2{
                    .col__left{
                        padding-right: 0%;
                    }
                }
                input, select, textarea{
                    font-size: var(--size-xs);
                    border: 1px solid #00000030;
                }
            }
        }
    }
}

#section__map{
    background-color: var(--color-secondary-light);
    padding: 5% 10% 0%;
    position: relative;
    &::after{
        content: "";
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 100%;
        height: 50%;
        z-index: -1;
        background-image: url(/images/bg_yellow.svg);
    }
    .column__top{
        border-top: 1px solid #00000030;
        padding-top: 5%;
    }
    .column__map{
        gap: 5vh;
        border-bottom: 1px solid #00000030;
        padding-bottom: 5%;
        #map-container{
            border: 15px solid var(--color-white);
            width: 100%;
            height: 60vh;
        }
        a.btn__secondary{
            align-self: center;
        }
    }
}

#map {
    height: 60vh;
    width: 100%;
}

/* Formulario */
form{
    width: 100%;
    padding: 5%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 20px;
    grid-auto-rows: auto;
}

form > div:nth-child(5){
    grid-column: 2 span;
}

label{
    margin-bottom: 5px;
    font-size: var(--size-sm);
}

input{
    outline: none;
    border: 1px solid rgba(0,0,0,0.2);
    font-size: var(--size-sm);
    padding: 8px 10px;
    width: 100%;
    background-color: #fff;
}

textarea{
    outline: none;
    border: 1px solid rgba(0,0,0,0.2);
    font-size: 18px;
    padding: 8px 10px;
    width: 100%;
    background-color: #fff;
}

input:focus, textarea:focus{
    border-color: var(--color-primary-light);
}

form button{
    grid-column: 2 span;
    margin: 0 auto;
}





/*  Tableta  */
@media only screen and (max-width: 1024px) {

    #section__hero{
        padding: calc(60px + 5%) 5% 0%;
        &::after{
            height: 10%;
        }
        .column__2{
            .col__left{
                padding-right: 10%;
                padding-bottom: 7%;
                width: 100%;
                h1{
                    color: var(--color-accent);
                }
                h2{
                    font-size: var(--size-3xl);
                    color: var(--color-secondary-light);
                }
                h2 strong{
                    color: var(--color-primary-light);
                    font-weight: unset;
                }
                p{
                    color: var(--color-white);
                    font-size: var(--size-md);
                }
            }
            .col__right{
                width: 100%;
            }
        }   
    }

    #section__data__contact {
        background-color: var(--color-secondary-light);
        padding: 10% 5% 5%;
        .column__2 {
            .col__left {
                padding-right: 0px;
                h4{
                    font-size: var(--size-sm);
                    text-transform: uppercase;
                    margin-bottom: 0px;
                }
                a{
                    font-size: var(--size-md);
                    font-weight: 400;
                }
            }
        }
    }

    #section__intro .col__left{
        padding-right: 0%;
    }

    form{
        padding: 1%;
    }

    #section__map{
        padding: 5% 5% 0%;
        .column__top{
            padding-top: 10%;
        }
    }
    
    #map {
        height: 50vh;
        width: 100%;
    }

}







/*  Móvil  */
@media only screen and (max-width: 768px) {

    #section__hero {
        .column__2 {
            .col__left {
                h2 {
                    font-size: var(--size-2xl);
                    color: var(--color-secondary-light);
                }
            }
        }
    }

    form{
        display: flex;
        grid-template-columns: unset;
        grid-template-rows: unset;
        column-gap: unset;
        row-gap: unset;
        grid-auto-rows: unset;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
    }

    form > div{
        width: 100%;
    }

    form > div:nth-child(5){
        grid-column: 2 span;
    }

}