/* =========================
   LAYOUT & CONTAINERS
   ========================= */
.container-padding {
    padding: 16px;
}

.section-container {
    display: block;
}

@media (min-width: 768px) {
    .container-padding {
        padding: 48px;
    }
}

@media (min-width: 1024px) {
    .section-container {
        /* display: flex;
        justify-content: center; */
        width: 100%;
    }
}

@media (min-width: 1440px) {
    .container-padding {
        padding: 48px 96px;
    }

    .max-w-1440 {
        min-width: 1440px;
        max-width: 1440px;
    }

    .section-container {
        display: flex;
        justify-content: center;
    }
}

@media(min-width:1920px) {
    .container-padding {
        padding: 48px 0;
    }
}

/* =========================
   TYPOGRAPHY
   ========================= */
.section-label,
.section-title,
.section-faq-title,
.section-text,
.hero-title {
    font-family: var(--font-family-base);
}

.section-label {
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    line-height: var(--font-label-line-height);
    color: var(--color-text-gray);
}

.section-title {
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
    line-height: var(--font-title-line-height);
}

.section-faq-title {
    font-size: var(--font-subtitle-size);
    font-weight: var(--font-text-weight);
    line-height: var(--font-subtitle-line-height);
}

.section-text {
    font-size: var(--font-text-size);
    font-weight: var(--font-text-weight);
    line-height: var(--font-text-line-height);
}

.hero-title {
    width: 10ch;
    font-size: var(--font-hero-size);
    font-weight: var(--font-title-dsk-weight);
    line-height: var(--font-hero-line-height);
    color: var(--color-text-white);
}

.hero-title span {
    font-weight: var(--font-hero-weight-bold);
}

/* --- Responsive Typography --- */
@media (min-width: 1024px) {
    .section-title {
        width: 25ch;
        font-size: var(--font-title-dsk-size);
    }

    .xl-txt-center {
        text-align: center;
    }

    .section-faq-title {
        font-size: var(--font-title-size);
        font-weight: var(--font-title-dsk-weight);
        text-align: center;
    }

    .hero-title {
        font-size: 88px;
    }
}

/* =========================
   BACKGROUNDS & THEMES
   ========================= */
.body-duam,
.body-ruca {
    padding-bottom: 6rem;
    position: relative;
}

/* DUAM */
.body-duam {
    background: linear-gradient(209.36deg, #2B3E4C 0%, #EDD8B1 100%);
}

/* RUCA CHE */
.body-ruca {
    background: linear-gradient(209.36deg, #2B3E4C 0%, #86B767 100%);
}

.trama-bg {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .4;
}


/* =========================
   COLORS
   ========================= */
.color-domuyo {
    color: var(--color-domuyo-violeta);
}

.color-duam {
    color: var(--color-duam-verdeagua);
}

.color-rucache {
    color: var(--color-rucache-magenta);
}

/* =========================
   UTILITIES
   ========================= */
.hidden {
    display: none;
}

.show {
    display: inline-flex;
}