header {
    background-color: white;
}

section {
    background-color: white;
}

[class^='max-width-limiter-container'] {
    width: min(88vw, 64rem);
    display: block;
    margin-inline: auto;
    box-sizing: border-box;
}

.max-width-limiter-container-narrow {
    max-width: 48rem;
}

section {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

section[class^='content-section'] {
    padding-bottom: 4rem;
    padding-top: 4rem;
}

section[class*='-wide'] {
    padding-bottom: 10rem;
    padding-top: 10rem;
}

section[class*='-space-above'] {
    padding-top: 10rem;
}

section[class*='-space-below'] {
    padding-bottom: 10rem;
}

@media (max-width: 700px) {
    section[class^='content-section'] {
        padding-bottom: 2rem;
        padding-top: 2rem;
    }

    section[class*='-wide'] {
        padding-bottom: 5rem;
        padding-top: 5rem;
    }

    section[class*='-space-above'] {
        padding-top: 5rem;
    }

    section[class*='-space-below'] {
        padding-bottom: 5rem;
    }
}

/* Background image sections */

section[class*='dark'] {
    color: white;
    background-color: var(--azul);
}

section[style*='background-image'][class*='-dark'] {
    color: white;

    text-shadow: 0 0 4rem var(--azul-80);

    background-color: var(--azul-50);
    background-blend-mode: multiply;

    filter: saturate(115%);
    filter: contrast(85%);

    /* Para que los filtros no perjudiquen el rendimiento */
    transform: translateZ(0);
    /*for older browsers*/
    will-change: transform;
}

section[style*='background-image'][class*='-light'] {
    color: var(--azul);
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
}

section.gutter {
    height: 8rem;
}


/* EXTENDABLE SECTIONS*/

/* Para hacer que al clicar botones el destino quede centrado*/
html {
    scroll-padding-top: 35vh;
}

section[id^="extendable-section"][id$="-parent"] {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    section[id^="extendable-section"][id$="-parent"] {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

@media (min-width: 1080px) {
    section[id^="extendable-section"][id$="-parent"] {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
}