.main-container-wrap {
    position: relative;
    /* Base z-index reducido para quedar POR DEBAJO del header (header = z-index:4) */
    z-index: 3;
    background: #fff;
}

    /* Cuando el escenario parallax (.atHome2025_stage) está visible elevamos temporalmente
   el contenedor sobre el header. La clase se añade vía IntersectionObserver (ver _JS/main-container-zindex.js) */
    .main-container-wrap.above-header {
        z-index: 50; /* suficientemente alto para superar el header pero no otros overlays globales */
    }

.factoid-container-wrap {
    padding-top: 50px;
}

.factoid-bg {
    margin-top: 15vh;
    display: flex;
    flex-direction: column; /* hijos en columna */
    justify-content: space-between; /* distribuye arriba y abajo */
    height: 100%;
}

    .factoid-bg > div:first-child {
        text-align: center;
    }

.sectionSeparator {
    background: #e8f5ff;
    min-height: 2.5vh;
    width: 100%;
}

.factoid-title {
    text-align: center;
    font-size: 2.5vw;
    font-family: "Lato", sans-serif !important;
    font-weight: 900;
    color: #000;
    margin-bottom: 4vh;
}

.factoid-subtitle {
    text-align: center;
    font-size: 2vw;
    font-weight: 550;
    font-family: "Lato", sans-serif !important;
    color: #000;
    margin-bottom: -1vh;
}

.factoid-perc {
    text-align: center;
    font-size: 28vh;
    font-weight: 600;
    color: #003062;
    margin-top: clamp(-60px, -5vh, -25px);
    font-family: "Lato", sans-serif !important;
}

.factoid-grid {
    text-align: center;
    font-size: 46px;
    font-family: "Lato", sans-serif !important;
    font-weight: 500;
    color: #0078c9;
    margin-top: -60px;
}

.perc-sign {
    font-size: 14vh;
    color: #0078c9;
    vertical-align: super;
}

.gradient-number {
    background-image: linear-gradient(45deg, #003062, #0078c9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.arrow-icon {
    font-size: 45px;
    font-weight: 700;
    position: relative;
    top: -3px;
}

.arrow-button {
    border-radius: 0 !important;
    background-color: #0078c9 !important;
    width: 88px;
    height: 77px;
    transition: background-color 0.3s ease !important;
}

    .arrow-button:hover {
        background-color: #003062 !important;
    }

.factoid-subtitle1 {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 26px !important;
    margin-top: 5%;
    margin-bottom: 60px;
    color: #000;
}

.factoid-subtitle2 {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 26px !important;
    margin-top: 60px;
    margin-bottom: 60px;
    color: #000;
}

.factoid-content1:hover .factoid-subtitle1 {
    color: #0078C9 !important;
}

.factoid-content2:hover .factoid-subtitle2 {
    color: #0078C9 !important;
}

.cs-color {
    color: #0078c9;
}



.factoid-link {
    text-decoration: none;
    all: unset;
}

.arrow-button-at {
    text-align: right !important;
}

.subtitle1 {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 30px !important;
    margin-top: 26px;
    margin-bottom: 26px;
    color: #000;
}

.subtitle2 {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 30px !important;
    margin-top: 26px;
    margin-bottom: 26px;
    color: #000;
}

.subtitle1:hover {
    color: #0078c9;
    cursor: pointer;
}

.subtitle2:hover {
    color: #0078c9;
    cursor: pointer;
}

.threeSourcesImg {
    max-height: 35%;
}

.main-title {
    font-size: 46px !important;
    font-family: "Lato", sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    line-height: 45px;
    color: #000;
    text-transform: none !important;
}

.main-subtitle {
    color: #0078c9;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    line-height: 41px;
    margin-bottom: 0;
}

.lateralImgThreeSrc {
    height: 25rem;
}
/* Aplica siempre el margen al último <img> con la clase dentro de su contenedor */
.mobile-container img.lateralImgThreeSrc:last-of-type {
    margin-top: 5rem;
}


.arrow-icon {
    font-size: 45px;
    font-weight: 700;
    position: relative;
    top: -3px;
}

.arrow-button {
    border-radius: 0 !important;
    background-color: #0078c9 !important;
    width: 88px;
    height: 77px;
    transition: background-color 0.3s ease !important;
    color: #ffffff;
}

    .arrow-button:hover {
        background-color: #003062 !important;
        color: #ffffff;
    }

@media (min-width: 1200px) {
    .factoid-perc {
        position: relative;
        top: -25px;
    }
}

@media (min-width: 1200px) {
    .factoid-grid {
        position: relative;
        top: -25px;
    }
}

@media (max-width: 991.98px) {
    .first-image-mobile {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
}

@media (max-width: 991.98px) {
    .secondary-column {
        padding-top: 80px;
    }
}



@media (min-width: 992px) {
    .custom-gap {
        column-gap: 83px;
    }
}




@media (max-width: 991.98px) {
    .mobile-container {
        padding-left: var(--bs-gutter-x, 1.5rem);
        padding-right: var(--bs-gutter-x, 1.5rem);
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }
}

/* Fondo decorativo aplicado directamente al padre .col-lg-7 del bloque principal */
.main-container-wrap .factoid-container-wrap .row > .col-lg-7 {
    position: relative; /* necesario para pseudo-elemento */
    background-color: #fff; /* fondo base limpio */
    overflow: hidden; /* recorta posible exceso de la onda */
    /* Variables responsivas para mantener relación entre imagen y espacios */
    --wave-size: clamp(1px, 75vw, 595px);
    --wave-top: clamp(0px, 7vw, 70px);
    /* Control horizontal para empujar la imagen hacia la derecha */
    --wave-left: clamp(69%, 56%, 89%);
    --factoid-pt: clamp(16px, 5vw, 64px); /* padding superior del contenido */
    --title-mb: clamp(8px, 1056px, 24px); /* separación título -> subtítulo */
}

    /* Fondo decorativo con mejor control (opacidad, escala, posicionamiento) */
    .main-container-wrap .factoid-container-wrap .row > .col-lg-7::before {
        content: "";
        position: absolute;
        inset: 0;
        /* Ajustar la posición vertical de la forma según diseño */
        background: url('/_Images/AT_in_Action_Digital_thread.png') no-repeat var(--wave-left) var(--wave-top);
        /* Escala responsiva con límites */
        background-size: var(--wave-size) auto; /* se adapta manteniendo límites */
        opacity: 1; /* ajustar si se requiere menor/mayor intensidad */
        pointer-events: none;
        z-index: 0;
    }

    /* Asegura que el contenido (texto y números) quede encima del pseudo-elemento */
    .main-container-wrap .factoid-container-wrap .row > .col-lg-7 .factoid-bg,
    .main-container-wrap .factoid-container-wrap .row > .col-lg-7 .factoid-bg > * {
        position: relative;
        z-index: 1;
    }

    /* Ajustes de espacios tipográficos vinculados a las variables responsivas */
    .main-container-wrap .factoid-container-wrap .row > .col-lg-7 .factoid-bg {
        padding-top: var(--factoid-pt);
    }

    .main-container-wrap .factoid-container-wrap .row > .col-lg-7 .factoid-title {
        margin-bottom: var(--title-mb);
    }

/* Responsivo: tamaños mínimos para pantallas pequeñas (<= 400px) */
@media screen and (max-width: 400px) {
    /* Separación superior del bloque */
    .factoid-bg {
        margin-top: 1vh;
    }

    /* Título principal */
    .factoid-title {
        font-size: 5rem;
    }

    /* Subtítulo */
    .factoid-subtitle {
        font-size: 3rem;
        padding-bottom: 30px;
    }

    /* Número principal/gran porcentaje */
    .factoid-perc {
        font-size: 12rem;
    }

    /* Signo de porcentaje u otros sufijos */
    .perc-sign {
        font-size: 6rem;
    }

    /* Texto de la grilla/descripción inferior */
    .factoid-grid {
        font-size: 3rem;
        margin-top: -3rem; /* mínimo solicitado en móviles muy pequeños */
    }
}

/* Responsivo: rango pequeño extendido (401px - 575.98px) */
@media screen and (min-width: 401px) and (max-width: 575.98px) {
    .factoid-bg {
        margin-top: 12vh;
    }

    .factoid-title {
        font-size: 4rem;
    }

    .factoid-subtitle {
        font-size: 2.5rem;
        padding-bottom: 30px;
    }

    .factoid-perc {
        font-size: 10rem;
    }

    .perc-sign {
        font-size: 5rem;
    }

    .factoid-grid {
        font-size: 2.5rem;
        margin-top: -2.25rem;
    }
}

/* Responsivo: móviles medianos (576px - 767.98px) */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    .factoid-bg {
        margin-top: 13vh;
    }

    .factoid-title {
        font-size: 3.5rem;
    }

    .factoid-subtitle {
        font-size: 2.25rem;
        padding-bottom: 30px;
    }

    .factoid-perc {
        font-size: 9rem;
    }

    .perc-sign {
        font-size: 4.5rem;
    }

    .factoid-grid {
        font-size: 2.25rem;
        margin-top: -2.5rem;
    }
}

/* Responsivo: tablets (768px - 991.98px) */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .factoid-bg {
        margin-top: 14vh;
    }

    .factoid-title {
        font-size: 3rem;
    }

    .factoid-subtitle {
        font-size: 2rem;
        padding-bottom: 40px;
    }

    .factoid-perc {
        font-size: 8rem;
        padding-bottom: 20px;
    }

    .perc-sign {
        font-size: 4rem;
    }

    .factoid-grid {
        font-size: 2rem;
        margin-top: -2.75rem;
    }
}