main {
    margin: - var(--spacing6) 0;
    width: 100%;
    max-width: 100%;
}

h1 {
    text-transform: uppercase;
    font-size: 2.5em;
    padding: 1rem 0;
}

h2{
    font-size: 2em;
    padding: 1em 0;
    color: var(--color50);
}

h3 {
    padding: 0.75em 0;
    color: var(--accent);
}

p {
    padding: 1rem 0;
    line-height: var(--spacing4);
}

.section-wrapper {
    padding: var(--spacing6) 0;
    width: 90%;
    max-width: 1600px;
    margin: 1rem auto;
}

section:nth-child(odd){
    background-color: var(--color90);
}

.section-wrapper:first-child {
    margin-top: 0;
}

.section-wrapper:last-child {
    margin-bottom: 0;
}

.hero {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    background: linear-gradient(
        to right bottom,
        var(--color50),
        var(--color30),
        var(--color10));
    color: var(--text-light);
}

.hero-wrapper {
    padding: var(--spacing6) 0;
    width: 90%;
    max-width: 1600px;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}

.hero-wrapper div, .hero-wrapper aside{
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:1700px) {
    .hero-wrapper{
        display: block !important;
    }
    .hero-wrapper div{
        justify-content: flex-start;
    }

    .hero-wrapper aside{
        display: none;
    }

    .hero-wrapper .text{
        display: inline;
        width: 100% !important;
    }
}

#btn-hero {
    font-size: var(--fs-h-link);
    background: transparent;
    border: 1px solid;
    color: white;
    box-shadow: 2px 2px 1px var(--color70);
    &:hover {
        background-color: white;
        border: none;
        color: var(--color50);
    }
}

.feature-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing4);
}

.feature {
    flex-grow: 1;
    width: 350px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color70);
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 var(--color70);
    transition: all 0.2s ease-in-out;
    min-height: 180px;
}

.feature:hover {
    scale: 1.02;
}

.feature p {
    opacity: 0.7;
}

.philosophy .section-wrapper, .hero-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: var(--spacing3);
}

.philosophy-list{
    margin: 1rem 0;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.list-item p{
    padding: 0;
}

.text, .section-image{
    max-width: 48%;
    display: flex;
    flex-direction: column;
    align-content: center;
}

.section-image{
    align-self: center;
    align-content: center;
}

.section-image img{
    object-fit: contain;
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
    z-index: 50;
}

.section-image img:hover{
    scale: 1.01;
}


.contact a{
    color: var(--color30);
}

@media (max-width:1200px) {
    
    .philosophy .section-wrapper {
        flex-direction: column-reverse;
        align-items: center;
    }

    .text, .section-image {
        max-width: 100%;
    }

    .section-image img {
        width: 100%;
        max-width: 750px;
        margin-top: 2rem;
    }
}

@media (max-width:800px) {
    .feature-list {
        flex-direction: column;
    }

    .feature {
        width: 100%;
    }
}

/* Formulario */
.contact-form {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}

.contact-form label {
    font-weight: bold;
    color: var(--color50);
}

.contact-form input,
.contact-form textarea {
    padding: 0.75rem;
    border: 1px solid var(--color70);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color30);
    box-shadow: 0 0 3px var(--color30);
}

.contact-form button {
    align-self: flex-start;
    font-size: 1.1em;
    box-shadow: 0 0 12px var(--accent);
    &:hover{
        box-shadow: 0 0 24px var(--accent-hover);
    }
}