header,
main,
footer {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;

    --web-padding-1: 5%;
    --web-padding-2: 15%;
    --web-padding-3: 25%;
    --content-gap: 20px;

    font-size: 1rem;
}

header {
    display: flex;
    justify-content: center;
    padding: 2em;
}

.logo {
    margin: 0 auto;
    max-width: 160px;
}

.content {
    width: 100%;
    max-width: 425px;
    margin: var(--content-gap) auto;
}

.content-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.content-1-title {
    text-align: center;
    color: var(--secondary-color);
    font-weight: 500;
    width: 100%;
    padding: 0 var(--web-padding-1);
}

.content-1-title>strong {
    color: var(--primary-color);
}

.content-1-img.mb {
    width: 100%;
}

.content-1-img.pc {
    display: none;
}

.content-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-2-text {
    text-align: center;
    padding: 0 var(--web-padding-1);
}

.content-3 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.content-3-text {
    text-align: center;
    width: 100%;
    padding: 0 var(--web-padding-1);
}

.content-3-title>.alt-clr {
    color: var(--secondary-color);
}

.content-3-img.mb {
    width: 100%;
}

.content-3-img.pc {
    display: none;
}

.content-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-4-title {
    text-align: center;
    color: var(--secondary-color);
    font-weight: 500;
    padding: 0 var(--web-padding-1);
}

.content-4-list {
    width: 100%;
    padding: 0 var(--web-padding-1);

    display: flex;
    flex-direction: column;
    gap: 2em;
}

.content-4-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.content-4-list li::before {
    --_li-img-size: 64px;
    content: "";
    width: var(--_li-img-size);
    height: var(--_li-img-size);
    background-repeat: no-repeat;
    background-position: center;
}

.content-4-list li:nth-child(1):before {
    background-image: url(/res/img/1171-21-35-botellas.svg);
}

.content-4-list li:nth-child(2):before {
    background-image: url(/res/img/1171-21-35-cosmeticos.svg);
}

.content-4-list li:nth-child(3):before {
    background-image: url(/res/img/1171-21-35-refrigerante.svg);
}

.content-4-list li:nth-child(4):before {
    background-image: url(/res/img/1171-21-35-pinturas.svg);
}

.content-4-list li:nth-child(5):before {
    background-image: url(/res/img/1171-21-35-agricola.svg);
}

.content-4-list p {
    text-align: center;
    flex: 1;
}

.content-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-5-title {
    text-align: center;
    color: var(--secondary-color);
    font-weight: 500;
    padding: 0 var(--web-padding-1);
}

.content-5-list {
    width: 100%;
    padding: 4em var(--web-padding-1);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 2em;
    min-height: 400px;
    aspect-ratio: 321 / 481;
    background-image: url(/res/img/1171-21-35-responsive-beneficios-de-elegir-greenchem-mexico.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.content-5-list li {
    display: flex;
    align-items: start;
    gap: 1em;
}

.content-5-list li::before {
    --_li-img-size: 32px;
    content: "";
    width: var(--_li-img-size);
    height: var(--_li-img-size);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/res/img/1171-21-35-check-list.svg);
}

.content-5-list :is(p, strong) {
    margin: 0;
    color: white;
    flex: 1;
}

.content-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.content-6-text-group {
    width: 100%;
    padding: 0 var(--web-padding-1);
}

.content-6-title {
    text-align: center;
    color: var(--secondary-color);
    font-weight: 500;
}

.content-6-title strong {
    color: var(--secondary-color);
}

.content-6-text {
    text-align: center;
}

.content-6-img.mb {
    width: 100%;
}

.content-6-img.pc {
    display: none;
}

footer {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1em;

    --_square-size: 32px;
    position: relative;
    padding-bottom: calc(var(--_square-size) * 2.5);
}

.footer-text-group {
    width: 100%;
    padding: 0 var(--web-padding-1);
}

.footer-title {
    text-align: center;
    color: var(--secondary-color);
    font-weight: 500;
}

.footer-text {
    text-align: center;
}

.footer-form {
    width: 100%;
    padding: 0 var(--web-padding-1);
    display: flex;
    flex-direction: column;
    align-self: end;
    gap: 1em;

    --_form-clr-1: #f3f3f3;
    --_form-clr-2: #9f9f9f;
    --_form-clr-1-dark: #c0c0c0;
    --_form-clr-2-dark: #6c6c6c;
}

.footer-input {
    width: 80%;
    margin: 0 auto;
    padding: 0.75em 2em;
    color: var(--_form-clr-2);
    background-color: var(--_form-clr-1);
    border: none;
}

.footer-input::placeholder {
    color: var(--_form-clr-2);
}

.footer-input::-moz-placeholder {
    color: var(--_form-clr-2);
}

.footer-input.disabled {
    color: var(--_form-clr-2-dark);
    background-color: var(--_form-clr-1-dark);
}

.footer-button {
    width: 20%;
    margin: 0 auto;
    padding: 0.5em 0;
    color: var(--_form-clr-2);
    background-color: unset;
    border: none;
    border-bottom: 1px solid var(--_form-clr-1);
    cursor: pointer;
}

.footer-button.disabled {
    color: var(--_form-clr-2-dark);
    background-color: var(--_form-clr-1-dark);
    border-bottom: 1px solid var(--_form-clr-1-dark);
}

.footer-bg-element1,
.footer-bg-element2 {
    position: absolute;
    bottom: 0;
}

.footer-bg-element1 {
    width: var(--_square-size);
    height: var(--_square-size);
    left: 0;
}

.footer-bg-element2 {
    width: calc(var(--_square-size) * 2);
    height: calc(var(--_square-size) * 2);
    right: 0;
}

@media (width >=768px) {
    .content {
        max-width: unset;
        margin: calc(var(--content-gap) * 2) auto;
    }

    .content-1 {
        flex-direction: row;
    }

    .content-1-title {
        width: 50%;
        padding: 0 var(--web-padding-1);
    }

    .content-1-img.mb {
        display: none;
    }

    .content-1-img.pc {
        display: block;
        width: 50%;
    }

    .content-2-text {
        padding: 0 var(--web-padding-2);
    }

    .content-3 {
        flex-direction: row-reverse;
    }

    .content-3-text {
        width: 50%;
        padding: 0 var(--web-padding-1);
    }

    .content-3-img.mb {
        display: none;
    }

    .content-3-img.pc {
        display: block;
        width: 50%;
    }

    .content-4-title {
        padding: 0 var(--web-padding-2);
    }

    .content-4-list {
        padding: 0 var(--web-padding-2);
    }

    .content-4-list>li {
        flex-direction: row;
    }

    .content-4-list p {
        text-align: start;
    }

    .content-5-title {
        padding: 0 var(--web-padding-2);
    }

    .content-5-list {
        background-image: url(/res/img/1171-21-35-beneficios-de-elegir-greenchem-mexico.webp);
        min-height: 400px;
        aspect-ratio: 35 / 13;
        padding: 4em var(--web-padding-2);
    }

    .content-5-list>li {
        flex-direction: row;
    }

    .content-5-list>li::before {
        --_li-img-size: 32px;
    }

    .content-5-list p {
        text-align: start;
    }

    .content-6 {
        flex-direction: row;
    }

    .content-6-text-group {
        width: 50%;
        padding: 0 var(--web-padding-2);
        padding-right: var(--web-padding-1);
    }

    .content-6-title,
    .content-6-text {
        text-align: start;
    }

    .content-6-img.mb {
        display: none;
    }

    .content-6-img.pc {
        display: block;
        width: 50%;
    }

    footer {
        flex-direction: row;

        --_square-size: 48px;
        padding-bottom: var(--_square-size);
    }

    .footer-text-group {
        width: 50%;
        padding: 0 var(--web-padding-2);
        padding-right: var(--web-padding-1);
    }

    .footer-title {
        text-align: start;
    }

    .footer-form {
        width: 50%;
    }

    .footer-text {
        text-align: start;
    }
}

@media (width >=1024px) {}

@media (width >=1440px) {}