/* ------------- Banner video --------------- */
section .row {
    margin-right: 0px;
    margin-left: 0px;
}

section .row {
    margin-right: 0px;
    margin-left: 0px;
}

.contenedor_video {
    background-color: #f1f2f7;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.contenedor-banner-escritorio {
    max-height: 370px;
}

.contenedor-banner-escritorio::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1220px) {
    .contenedor-banner-escritorio {
        max-height: 459px;
    }
}

/* @media (max-width: 991px) and (min-width: 480px) {
    #carouselExample {
        width: -webkit-fill-available;
    }
} */

/* ---------- Epicentro -------------- */
.contenedor_epicentro {
    display: flex;
    justify-content: center;
}

.contenedor_epicentro .row {
    display: flex;
    max-width: 1400px;
}

.contenedor_imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* max-width: 480px; */
}

.contenedor_imagen img {
    width: 100%;
    height: auto;
}

@media (min-width: 480px) {
    .contenedor_imagen {
        width: 100%;
        max-width: 370px;
    }

    .contenedor_imagen img {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 992px) {
    .contenedor_epicentro {
        padding-top: 2%;
    }

    .contenedor_epicentro .row {
        /* margin: 16px 16px 43px 0; */
        margin: 16px 0 43px 0;
    }

    .contenedor_imagen {
        width: 100%;
        max-width: 268px;
    }

    .contenedor_imagen img {
        width: auto;
        height: 100%;
        max-height: 268px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    /* .contenedor_imagen img {
        width: auto;
        height: 100%;
        max-height: 240px;
    } */
}

@media (min-width: 1200px) {
    .contenedor_epicentro .row {
        display: flex;
        justify-content: center;
        margin: 16px 0px 43px 0;
    }

    .contenedor_imagen {
        width: 100%;
        max-width: 268px;
        justify-content: flex-end;
        overflow: hidden;
    }
}

.row div h1.titulo_epicentro {
    color: #02547d;
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: 36px;
}

.contenedor_epicentro .row .col-12 {
    padding: 0px;
}

.row div p.text_epicentro {
    color: #858585;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-inline: 20px;
}

@media (min-width: 640px) {
    .row div p.text_epicentro {
        padding-inline: 12%;
    }
}

@media (min-width: 992px) {
    .contenedor_epicentro .row .col-12 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .row div h1.titulo_epicentro,
    .row div p.text_epicentro {
        text-align: left;
        margin: 0 3% 15px 13%;
    }

    .row div p.text_epicentro {
        padding-inline: 0px;
    }
}

.carousel-indicators {
    bottom: -40px !important;
    gap: 10px;
}

.carousel-indicators li {
    background-color: #d9d9d9 !important;
    height: 14px !important;
    width: 14px !important;
    border-radius: 20px;
}

.carousel-indicators li.active {
    background-color: #72d6ff !important;
}

@media (min-width: 1200px){
    .carousel-indicators {
        bottom: -16px !important;
        gap: 16px;
    }
}

/* -------------- Indicadores ------------ */
.contenedor_indicadores {
    background: linear-gradient(90deg, #03547e 0%, #01558c 51%, #0699d6 100%);
    display: grid;
    justify-content: center;
    color: #fff;
    grid-template-columns: 1fr;
    font-family: 'Avenir' 'sans-serif';
    font-style: normal;
}

.indicadores {
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-direction: column;
    align-items: center;
}

.indicador_inicial .sedes {
    margin-top: 38px;
}

.indicadores {
    .sedes {
        font-size: 36px;
        font-weight: 900;
    }

    .tamanio,
    .numero_marcas,
    .numero_expositores,
    .numero_visitantes {
        font-size: 54px;
        font-weight: 900;
        line-height: normal;
        margin-bottom: 0;
    }

    p.gdl_y_cdmx,
    p.metros,
    p.marcas,
    p.expositores,
    p.visitantes {
        font-size: 30px;
        line-height: normal;
        margin-bottom: 10px;
    }

    p.visitantes {
        margin-bottom: 32px;
    }
}

@media (min-width: 768px) {
    .contenedor_indicadores {
        display: flex;
        justify-content: space-evenly !important;
        align-items: center;
        height: 83px;
    }

    .indicadores {
        .sedes,
        .tamanio,
        .numero_marcas,
        .numero_expositores,
        .numero_visitantes {
            font-size: 24px;
            margin: 0;
            margin-top: 14px;
        }

        p.gdl_y_cdmx,
        p.metros,
        p.marcas,
        p.expositores,
        p.visitantes {
            font-size: 18px;
            margin-bottom: 15px;
        }
    }
}

@media (min-width: 1220px) {
    .contenedor_indicadores {
        height: 154px;
    }

    .indicadores {
        .sedes,
        .tamanio,
        .numero_marcas,
        .numero_expositores,
        .numero_visitantes {
            font-size: 54px;
            margin: 0;
            margin-top: 25px;
        }

        p.gdl_y_cdmx,
        p.metros,
        p.marcas,
        p.expositores,
        p.visitantes {
            font-size: 30px;
            margin-bottom: 26px;
        }
    }
}

@media (min-width: 1440px) {
    .contenedor_indicadores {
        justify-content: center !important;
        gap: 85px;
    }
}

/* ------------ Video ----------- */
.contenedor_video_expo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.video-container {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.video-container iframe {
    width: 100%;
    height: auto;
}

@media (min-width: 576px) {
    .video-container {
        position: relative;
        overflow: hidden;
        margin: 56px;
    }

    .video-container iframe {
        width: 588px;
        height: 330px;
    }
}

/* --------- Botón finalizar --------- */
.box-redireccion {
    display: flex;
    justify-content: center;
    margin-bottom: 29px;
    text-decoration: none !important;
}

.btn-redireccion,
.btn-redireccion *,
.btn-redireccion :after,
.btn-redireccion :before,
.btn-redireccion:after,
.btn-redireccion:before {
    border: 0 solid;
    box-sizing: border-box;
}

.btn-redireccion {
    -webkit-tap-highlight-color: transparent;
    background-color: #f07f1e;
    background-image: none;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
    padding: 0;
    width: 152px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-redireccion:disabled {
    cursor: default;
}

.btn-redireccion:-moz-focusring {
    outline: auto;
}

.btn-redireccion [hidden] {
    display: none;
}

.btn-redireccion {
    border-radius: 99rem;
    border-width: 2px;
    overflow: hidden;
    padding: 0rem;
    position: relative;
}

.btn-redireccion span {
    mix-blend-mode: color-dodge;
}

.btn-redireccion:before {
    background: linear-gradient(90deg, #03547e 0%, #01558c 51%, #0699d6 100%);
    content: '';
    display: block;
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    transform: skew(0deg) translateX(-20%);
    transition: transform 0.2s ease;
    width: 120%;
}

.btn-redireccion:hover:before {
    transform: skew(-45deg) translateX(75%);
}

/* Cards */
:root {
    --duration: 300ms;
    --timing-fn: ease;
    --turquoise: #1abc9c;
    --wet-asphalt: #34495e;
    --midnight-blue: #2c3e50;
    --clouds: #ecf0f1;
}

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

/* Estilos para <li> y .info */
section.cards #listContainer li {
    perspective: 562px;
    position: relative;
    /* Añadimos esto para posicionar hijos relativos */
}

section.cards #listContainer li .info {
    transform: rotate3d(1, 0, 0, 90deg);
    width: 100%;
    height: 100%;
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    pointer-events: none;
    /* background-color: rgba(26, 188, 156, 1); */
    background: linear-gradient(90deg, #03547e 0%, #01558c 51%, #0699d6 100%);
    /* Utilizamos rgba para la transparencia */
}

/* Animaciones de entrada y salida */
.in-top .info {
    transform-origin: 50% 0%;
    animation: in-top var(--duration) var(--timing-fn) 0ms 1 forwards;
}

.in-right .info {
    transform-origin: 100% 0%;
    animation: in-right var(--duration) var(--timing-fn) 0ms 1 forwards;
}

.in-bottom .info {
    transform-origin: 50% 100%;
    animation: in-bottom var(--duration) var(--timing-fn) 0ms 1 forwards;
}

.in-left .info {
    transform-origin: 0% 0%;
    animation: in-left var(--duration) var(--timing-fn) 0ms 1 forwards;
}

.out-top .info {
    transform-origin: 50% 0%;
    animation: out-top var(--duration) var(--timing-fn) 0ms 1 forwards;
}

.out-right .info {
    transform-origin: 100% 50%;
    animation: out-right var(--duration) var(--timing-fn) 0ms 1 forwards;
}

.out-bottom .info {
    transform-origin: 50% 100%;
    animation: out-bottom var(--duration) var(--timing-fn) 0ms 1 forwards;
}

.out-left .info {
    transform-origin: 0% 0%;
    animation: out-left var(--duration) var(--timing-fn) 0ms 1 forwards;
}

/* Keyframes para animaciones */
@keyframes in-top {
    from {
        transform: rotate3d(-1, 0, 0, 90deg);
    }

    to {
        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes in-right {
    from {
        transform: rotate3d(0, -1, 0, 90deg);
    }

    to {
        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes in-bottom {
    from {
        transform: rotate3d(1, 0, 0, 90deg);
    }

    to {
        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes in-left {
    from {
        transform: rotate3d(0, 1, 0, 90deg);
    }

    to {
        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes out-top {
    from {
        transform: rotate3d(0, 0, 0, 0deg);
    }

    to {
        transform: rotate3d(-1, 0, 0, 104deg);
    }
}

@keyframes out-right {
    from {
        transform: rotate3d(0, 0, 0, 0deg);
    }

    to {
        transform: rotate3d(0, -1, 0, 104deg);
    }
}

@keyframes out-bottom {
    from {
        transform: rotate3d(0, 0, 0, 0deg);
    }

    to {
        transform: rotate3d(1, 0, 0, 104deg);
    }
}

@keyframes out-left {
    from {
        transform: rotate3d(0, 0, 0, 0deg);
    }

    to {
        transform: rotate3d(0, 1, 0, 104deg);
    }
}

/* Estilos adicionales */
section.cards #listContainer {
    padding: 0;
    margin: 0 0 50px;
    list-style: none;
    /* Eliminar los puntos de lista */
}

section.cards #listContainer li {
    float: left;
    width: 281px;
    height: 281px;
    margin: 5px;
    padding: 0;
    border-radius: 4px;
    color: rgba(52, 73, 94, 0.6);
    text-align: center;
    font-size: 50px;
    line-height: 200px;
    position: relative;
    overflow: hidden;
}

section.cards #listContainer li img {
    width: 100%;
    height: 100%;
    /* Permite que la altura de la imagen se ajuste automáticamente */
    object-fit: cover;
}

section.cards #listContainer li h2 {
    margin: 6% 0 0 0;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
}

section.cards #listContainer li p {
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    padding-top: 18px;
}

.container_cards {
    max-width: 327px !important;
}

@media (min-width: 768px) {
    .container_cards {
        max-width: 617px !important;
    }
}

@media (min-width: 992px) {
    .container_cards {
        max-width: 909px !important;
    }
}

/* ----------- Ediciones ------------ */
.contenedor_sedes {
    background: linear-gradient(
        180deg,
        #01558c 0%,
        #01558c 7.5%,
        #0699d6 36.5%,
        rgba(255, 255, 255, 0) 94.19%
    );
    height: 482px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    overflow: hidden;
}

.contenedor_sedes .row {
    display: flex;
    justify-content: center;
}

.btn-redireccion.btn-sedes {
    width: 290px;
    height: 30px;
    border: none;
    margin-bottom: 50px;
}

.row .img_sedes {
    padding: 0%;

    img {
        width: 100%;
        max-width: 760px;
    }
}

.info_sedes {
    color: #fff;
    text-align: center;
    font-weight: 500;
    max-width: 495px;

    h1.nuestras_sedes {
        font-size: 28px;
        font-weight: 800;
        margin-top: 40px;
    }

    p.nuestras_sedes {
        font-size: 18px;
    }

    a.box-redireccion {
        margin-bottom: 0;
    }
}

@media (min-width: 992px) {
    .contenedor_sedes {
        background: linear-gradient(
            0deg,
            #01558c 0%,
            #01558c 7.5%,
            #0699d6 36.5%,
            rgba(255, 255, 255, 0) 94.19%
        );
        height: 380px;
    }

    .contenedor_sedes .row {
        flex-direction: column;
        align-content: stretch;
        justify-content: flex-end;
    }

    .row .img_sedes {
        width: 50%;
    }
}

@media (min-width: 1280px) {
    .row .img_sedes {
        width: 63%;
    }
}

@media (max-width: 991px) {
    .btn-redireccion,
    .btn-redireccion.btn-sedes {
        font-size: 22px;
        max-width: 442px;
        width: 100%;
        height: 44px;
    }

    .btn-redireccion.cotizar {
        width: 240px;
    }
}

/* Seccion con GIF */
.contenedor_gif .row {
    max-width: 1400px;
    justify-content: center;
    margin-bottom: 45px;
}

.contenedor_gif,
.gif,
.info_dps,
.info_webinars {
    display: flex;
    justify-content: center;
}

.contenedor_gif {
    flex-direction: column;
    align-items: center;
}

.gif {
    margin: 18px 0;

    img {
        max-width: 481px;
        width: inherit;
        height: auto;
    }
}

.info_dps,
.info_webinars {
    color: #545454;
    text-align: center;
    font-weight: 500;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
}

h1.dps,
h1.webinars {
    color: #02547d;
    font-size: 28px;
    font-weight: 800;
}

h1.dps,
p.dps,
h1.webinars,
p.webinars {
    max-width: 495px;
}

/* --------- qUIERO SER ---------- */
.col_quiero_ser {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 0% !important;
}

.col_quiero_ser img {
    margin-bottom: 20px;
}

img.quiero_ser {
    &.grow {
        transition: all 0.2s ease-in-out;

        &:hover {
            transform: scale(1.1);
        }
    }
}

.text_quiero_ser {
    color: #03547e;
    font-size: 32px;
    font-weight: 500;
    line-height: 118.33%;
    display: contents;

    span {
        font-size: 32px;
        font-weight: 900;
    }
}

img.quiero_ser {
    max-width: 337px;
    width: 100%;
    max-height: 337px;
}

@media (min-width: 768px) {
    .row.quiero_ser {
        margin-top: 65px;
    }
}

@media (max-width: 1110px) and (min-width: 768px) {
    img.quiero_ser {
        width: 225px;
        height: 226px;
    }
}

/* ---- Media partners ---- */
h2.partners {
    color: #03a591;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.partners .row {
    align-items: flex-end;
}

.partners .col {
    display: flex;
    justify-content: center;
}

img.logo {
    &.grow {
        transition: all 0.2s ease-in-out;

        &:hover {
            transform: scale(1.01);
        }
    }
}