html {
    --color-red: #e02957;
    --color-gray: #f0f5f7;
    --color-dark-gray: #e1ebee;
    --color-dark-blue: #030229;
    background-color: var(--color-gray);
    scroll-behavior: smooth
}

* {
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
    margin: 0;
    overflow: visible
}

h1 {
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1em;
    margin-bottom: 12px
}

h1 strong {
    color: var(--color-red)
}

h2 {
    line-height: 110%
}

.primary-button {
    background-color: var(--color-red);
    border: none;
    border-radius: 99px;
    color: #fff;
    font-size: 1em;
    font-weight: 500;
    margin: 24px 0;
    padding: 16px 32px;
    text-decoration: none;
    transition: all .2s ease-in-out !important;
    width: max-content;

    &:hover {
        box-shadow: 0 16px 24px -12px var(--color-red);
        transform: scale(1.1)
    }
}

.secundary-button {
    background-color: #fff;
    border: none;
    border-radius: 48px;
    color: var(--color-red) !important;
    font-size: 1em;
    font-weight: 500;
    margin: 24px 0;
    padding: 16px 32px;
    transition: all .2s ease-in-out !important;
    width: max-content;

    &:hover {
        box-shadow: 0 16px 24px -12px #fff;
        transform: scale(1.1)
    }
}

img {
    height: auto;
    object-fit: contain;
    width: 100%
}

.invisible {
    display: none !important
}

@keyframes entrada {
    0% {
        margin-bottom: -48px;
        margin-top: 48px;
        opacity: 0
    }

    to {
        margin-bottom: 0;
        margin-top: 0;
        opacity: 1
    }
}

.entrancy-animation {
    animation: entrada .6s ease-out;
    animation-play-state: paused
}

.gray-background {
    background-color: var(--color-gray)
}

.dark-gray-background {
    background-color: var(--color-dark-gray)
}

.fondo-azul {
    background-color: var(--color-dark-blue);
    color: #fff
}

.invertida {
    flex-direction: row-reverse
}

@media screen and (max-width:989px) {
    .invertida {
        flex-direction: column-reverse
    }

    img {
        aspect-ratio: 5/3
    }
}

section {
    padding: 84px 32px;
    position: relative
}

.max-width-container {
    margin: 0 auto;
    max-width: 1440px
}

.multi-column-layout {
    display: flex;
    gap: 24px
}

.half-width-column {
    width: 50%
}

.one-of-many-column {
    flex: 1 0
}

.vertical-centered-column {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center
}

.desktop-version-img {
    display: block
}

.mobile-version-img {
    display: none
}

@media screen and (max-width:989px) {
    section {
        overflow: hidden;
        padding: 64px 24px;
        position: relative
    }

    .multi-column-layout {
        display: flex;
        flex-direction: column;
        gap: 24px
    }

    .half-width-column {
        width: 100%
    }

    .desktop-version-img {
        display: none !important
    }

    .mobile-version-img {
        display: block
    }
}