/**
 * Skin Banner Styles
 * Estilos para el módulo de banners laterales (skin)
 *
 * Variables CSS configurables desde JS:
 * --skin-banner-z-index: z-index del banner (default: 9)
 * --skin-banner-min-screen: ancho mínimo de pantalla (default: 1300px)
 * --skin-banner-content-width: ancho del contenido comprimido (default: 970px)
 */

:root {
    --skin-banner-z-index: 9;
    --skin-banner-min-screen: 1300px;
    --skin-banner-content-width: 970px;
}

.injertobanner {
    position: relative;
    z-index: 4;
}

.skin-banner-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--skin-banner-z-index);
    pointer-events: none;
    z-index: 9;
}

.skin-banner-left,
.skin-banner-right {
    position: fixed;
    top: 0;
    height: 100%;
    pointer-events: auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

/* Ancho laterales Premium: 315px */
.skin-banner-container.skin-banner-premium .skin-banner-left,
.skin-banner-container.skin-banner-premium .skin-banner-right {
    width: 315px;
}

/* Ancho laterales Clásico: 175px */
.skin-banner-container.skin-banner-clasico .skin-banner-left,
.skin-banner-container.skin-banner-clasico .skin-banner-right {
    width: 175px;
}

.skin-banner-left {
    left: 0;
    background-position: right top;
}

.skin-banner-right {
    right: 0;
    background-position: left top;
}

.skin-banner-close {
    position: fixed;
    top: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: calc(var(--skin-banner-z-index) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    pointer-events: auto;
}

/* Posición botón cerrar Premium: 315px + 20px */
.skin-banner-close.skin-banner-close-premium {
    right: 335px;
}

/* Posición botón cerrar Clásico: 175px + 20px */
.skin-banner-close.skin-banner-close-clasico {
    right: 195px;
}

.skin-banner-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

.skin-banner-close::before,
.skin-banner-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: #fff;
}

.skin-banner-close::before {
    transform: rotate(45deg);
}

.skin-banner-close::after {
    transform: rotate(-45deg);
}

.skin-banner-clickable-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: pointer;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Tipo Premium: 155x600px */
.skin-banner-container.skin-banner-premium .skin-banner-clickable-area {
    width: 155px;
    height: 600px;
}

/* Tipo Clásico: 100x500px */
.skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
    width: 120px;
    height: 600px;
}

.skin-banner-left .skin-banner-clickable-area {
    right: 0;
    background-position: right center;
}

.skin-banner-right .skin-banner-clickable-area {
    left: 0;
    background-position: left center;
}

/* Animación de ocultamiento */
.skin-banner-container.skin-banner-hiding,
.skin-banner-hiding .skin-banner-left,
.skin-banner-hiding .skin-banner-right,
.skin-banner-central.skin-banner-hiding {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ==========================================
   BANNER CENTRAL
   ========================================== */

.skin-banner-central {
    width: 100%;
    max-width: var(--skin-banner-content-width);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: var(--skin-banner-z-index);
    overflow: hidden;
}

/* Ajuste del banner central cuando hay skin banners laterales activos */
/* Tipo Clásico: reducir 400px (200px por lado) */
.skin-banner-central.skin-banner-central-clasico {
    /* margin: 1em auto 0; */
    width: calc(100% - 400px);
    max-width: 1200px;
}

/* Tipo Premium: reducir 700px (350px por lado) */
.skin-banner-central.skin-banner-central-premium {
    /* margin: 1em auto 0; */
    width: calc(100% - 700px);
    max-width: 1200px;
}

.skin-banner-central-link {
    display: block;
    width: 100%;
    cursor: pointer;
}

.skin-banner-central-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Desktop: mostrar imagen desktop, ocultar mobile */
/* .skin-banner-central-desktop {
    display: block;
}

.skin-banner-central-mobile {
    display: none;
} */

/* Tamaños de imagen según tipo de banner - Desktop */
/* Clásico: 2898x300px */
.skin-banner-central-clasico .skin-banner-central-desktop {
    /* max-width: 2898px; */
    width: 100%;
}

/* Premium: 2038x300px */
.skin-banner-central-premium .skin-banner-central-desktop {
    /* max-width: 2038px; */
    width: 100%;
}



/* ==========================================
   FIN BANNER CENTRAL
   ========================================== */

/* Banner central dentro de .inner: ocupa el 100% del ancho del inner */
.inner .skin-banner-central,
.inner .skin-banner-central.skin-banner-central-clasico,
.inner .skin-banner-central.skin-banner-central-premium {
    width: 100%;
    max-width: none;
}

/* Banner central dentro de .boxnotes / .principalnotes / .skin-banner-central-wrapper: hereda el ancho restringido */
.boxnotes .skin-banner-central,
.boxnotes .skin-banner-central.skin-banner-central-clasico,
.boxnotes .skin-banner-central.skin-banner-central-premium,
.skin-banner-central-wrapper .skin-banner-central,
.skin-banner-central-wrapper .skin-banner-central.skin-banner-central-clasico,
.skin-banner-central-wrapper .skin-banner-central.skin-banner-central-premium {
    width: 100%;
    max-width: none;
}

.principalnotes .skin-banner-central,
.principalnotes .skin-banner-central.skin-banner-central-clasico,
.principalnotes .skin-banner-central.skin-banner-central-premium {
    width: calc(100% - 400px);
    max-width: 90%;
}

/* Compresión de contenido (cuando está activa) */
body.skin-banner-active {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--skin-banner-content-width);
    position: relative;
}

/* Ajuste contenido Premium: 700px menos */
.inner.ajustebanner-premium,
.boxnotes.ajustebanner-premium {
    margin: 0 auto;
    width: calc(100% - 700px);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    max-width: 1200px;
}

/* Ajuste contenido Clásico: 400px menos */
.inner.ajustebanner-clasico,
.boxnotes.ajustebanner-clasico {
    margin: 0 auto;
    width: calc(100% - 400px);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    max-width: 1200px;
}

header {
    position: sticky;
    top: 0;
    z-index: 10;
}

header .inner {
    z-index: 2;
}

main {
    background: transparent;
    z-index: 1;
}

@media (max-width: 7680px) {

    /*Computadora 4K*/
    .inner.ajustebanner-clasico,
    .boxnotes.ajustebanner-clasico {
        width: calc(100% - 1900px);
        max-width: 85%;
    }

    .skin-banner-central.skin-banner-central-clasico {
        width: calc(100% - 500px);
        max-width: 85%;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-left,
    .skin-banner-container.skin-banner-clasico .skin-banner-right {
        width: 700px;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
        width: 500px;
        height: 2500px;
    }


    .inner.inner.ajustebanner-premium,
    .boxnotes.boxnotes.ajustebanner-premium {
        margin: 0 auto;
        width: calc(100% - 2000px);
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-premium {
        width: calc(100% - 2000px);
        max-width: 90%;
    }

    .skin-banner-container.skin-banner-premium .skin-banner-left,
    .skin-banner-container.skin-banner-premium .skin-banner-right {
        width: 700px;
        height: 100%;
        background-size: cover;

    }

    .skin-banner-container.skin-banner-premium .skin-banner-clickable-area {
        width: 550px;
        height: 2129px;
    }

    /* html, body{
        font-size: 220% !important;
    } */
    .principalnotes .skin-banner-central.skin-banner-central-clasico {
        width: calc(100% - 1900px);
        max-width: 90%;
    }

    .principalnotes .skin-banner-central.skin-banner-central-premium {
        width: calc(100% - 2000px);
        max-width: 85%;
    }

    .skin-banner-central-desktop {
        display: block;
    }

    .skin-banner-central-mobile {
        display: none;
    }


}

@media (max-width: 3840px) {

    /*Computadora 4K*/
    .inner.ajustebanner-clasico,
    .boxnotes.ajustebanner-clasico {
        width: calc(100% - 1000px);
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-clasico {
        /* width: calc(100% - 1000px); */
        max-width: calc(100% - 300px);
        width: 90%;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-left,
    .skin-banner-container.skin-banner-clasico .skin-banner-right {
        width: 400px;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
        width: 300px;
        height: 1500px;
    }


    .inner.inner.ajustebanner-premium,
    .boxnotes.boxnotes.ajustebanner-premium {
        margin: 0 auto;
        width: calc(100% - 1500px);
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-premium {
        width: calc(100% - 1500px);
        max-width: 90%;
    }

    .skin-banner-container.skin-banner-premium .skin-banner-left,
    .skin-banner-container.skin-banner-premium .skin-banner-right {
        width: 560px;
        height: 100%;
        background-size: cover;

    }

    .skin-banner-container.skin-banner-premium .skin-banner-clickable-area {
        width: 350px;
        height: 1355px;
    }

    /* html, body{
        font-size: 180% !important;
    } */

    .principalnotes .skin-banner-central.skin-banner-central-clasico {
        width: calc(100% - 1000px);
        max-width: 85%;
    }

    .principalnotes .skin-banner-central.skin-banner-central-premium {
        width: calc(100% - 1500px);
        max-width: 90%;
    }
}

@media (max-width: 2560px) {

    /*Computadora 2K o Macbook Pro o Air*/
    .inner.ajustebanner-clasico,
    .boxnotes.ajustebanner-clasico {
        width: calc(100% - 500px);
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-clasico {
        /* width: calc(100% - 500px);
        max-width: 90%; */
        max-width: initial;
        width: 100%;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-left,
    .skin-banner-container.skin-banner-clasico .skin-banner-right {
        width: 165px;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
        width: 140px;
        height: 700px;
    }


    .inner.inner.ajustebanner-premium,
    .boxnotes.boxnotes.ajustebanner-premium {
        margin: 0 auto;
        width: calc(100% - 1000px);
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-premium {
        width: calc(100% - 1000px);
        max-width: 90%;
    }

    .skin-banner-container.skin-banner-premium .skin-banner-left,
    .skin-banner-container.skin-banner-premium .skin-banner-right {
        width: 360px;
        height: 100%;
        background-size: cover;

    }

    .skin-banner-container.skin-banner-premium .skin-banner-clickable-area {
        width: 270px;
        height: 1045px;
    }


    .principalnotes .skin-banner-central.skin-banner-central-clasico {
        /* width: calc(100% - 500px); */
        max-width: 90%;
    }

    .principalnotes .skin-banner-central.skin-banner-central-premium {
        /* width: calc(100% - 1000px); */
        max-width: 90%;
    }

    /* html, body{
        font-size: 140% !important;
    } */

}

@media (max-width: 1920px) {

    /*Computadora FHD La mayoría*/
    .inner.ajustebanner-clasico,
    .boxnotes.ajustebanner-clasico {
        width: calc(100% - 400px);
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-clasico {
        /* width: calc(100% - 400px);
        max-width: 90%; */
        max-width: initial;
        width: 100%;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-left,
    .skin-banner-container.skin-banner-clasico .skin-banner-right {
        width: 145px;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
        width: 120px;
        height: 600px;
    }


    .skin-banner-container.skin-banner-premium .skin-banner-left,
    .skin-banner-container.skin-banner-premium .skin-banner-right {
        width: 415px;
    }

    .inner.inner.ajustebanner-premium,
    .boxnotes.boxnotes.ajustebanner-premium {
        margin: 0 auto;
        width: calc(100% - 500px);
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-premium {
        /* width: calc(100% - 500px);
        max-width: 90%; */

        max-width: initial;
        width: 100%;
    }

    .skin-banner-container.skin-banner-premium .skin-banner-left,
    .skin-banner-container.skin-banner-premium .skin-banner-right {
        width: 215px;
        height: 100%;
        background-size: cover;

    }

    .skin-banner-container.skin-banner-premium .skin-banner-clickable-area {
        width: 170px;
        height: 658px;
    }

    .principalnotes .skin-banner-central.skin-banner-central-clasico {

        width: calc(100% - 400px);
        max-width: 90%;
    }


    .principalnotes .skin-banner-central.skin-banner-central-premium {
        width: calc(100% - 500px);
        max-width: 90%;
    }

    /* html, body{
        font-size: 100% !important;
    } */

}

@media (max-width: 1366px) {

    /*Computadora Viejita */
    .inner.ajustebanner-clasico,
    .boxnotes.ajustebanner-clasico {
        width: calc(100% - 300px);
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-clasico {
        /* width: calc(100% - 300px);
        max-width: 90%; */
        max-width: initial;
        width: 100%;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-left,
    .skin-banner-container.skin-banner-clasico .skin-banner-right {
        width: 120px;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
        width: 100px;
        height: 500px;
    }


    .inner.inner.ajustebanner-premium,
    .boxnotes.boxnotes.ajustebanner-premium {
        width: calc(100% - 300px);
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-premium {
        /* width: calc(100% - 300px); */
        max-width: 90%;
    }

    .skin-banner-container.skin-banner-premium .skin-banner-left,
    .skin-banner-container.skin-banner-premium .skin-banner-right {
        width: 130px;
        height: 100%;
        background-size: cover;

    }

    .skin-banner-container.skin-banner-premium .skin-banner-clickable-area {
        width: 110px;
        height: 426px;
    }

    .principalnotes .skin-banner-central.skin-banner-central-clasico {
        width: calc(100% - 300px);
        max-width: 90%;
    }

    .principalnotes .skin-banner-central.skin-banner-central-premium {
        width: calc(100% - 300px);
        max-width: 90%;
    }

}

/* Media query para ocultar en pantallas pequeñas */
@media (max-width: 1299px) {
    /* .skin-banner-container,
    .skin-banner-left,
    .skin-banner-right,
    .skin-banner-close {
        display: none !important;
    }

    body.skin-banner-active {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    } */

    .inner.ajustebanner-clasico,
    .boxnotes.ajustebanner-clasico {
        width: calc(100% - 250px);
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-clasico {
        /* width: calc(100% - 250px);
        max-width: 90%; */
        max-width: initial;
        width: 100%;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-left,
    .skin-banner-container.skin-banner-clasico .skin-banner-right {
        width: 100px;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
        width: 100px;
        height: 500px;
    }

}


@media (max-width: 1024px) {

    /*iPad Vertical */
    .inner.ajustebanner-clasico,
    .boxnotes.ajustebanner-clasico {
        width: calc(100% - 300px);
        max-width: 90%;
    }

    .skin-banner-central.skin-banner-central-clasico {
        /* width: calc(100% - 300px);
        max-width: 90%; */
        max-width: initial;
        width: 100%;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-left,
    .skin-banner-container.skin-banner-clasico .skin-banner-right {
        width: 120px;
    }

    .skin-banner-container.skin-banner-clasico .skin-banner-clickable-area {
        width: 100px;
        height: 500px;
    }
}

/* Mobile: el banner central siempre es visible */
@media (max-width: 768px) {

    /* El banner desktop sigue visible en mobile */
    .skin-banner-central-desktop {
        display: block;
        max-width: 100%;
    }

    /* El banner mobile también visible si existe */
    .skin-banner-central-mobile {
        display: block;
        max-width: 100%;
    }

    /* IMPORTANTE: Asegurar que el banner mobile sea visible dentro de .boxnotes */
    .boxnotes .skin-banner-central-mobile,
    .boxnotes .skin-banner-central .skin-banner-central-mobile {
        display: block !important;
        max-width: 100%;
        width: 100%;
    }

    /* En mobile, el banner central ocupa todo el ancho */
    .skin-banner-central.skin-banner-central-clasico,
    .skin-banner-central.skin-banner-central-premium {
        width: 100%;
        max-width: 100%;
    }

    /* Banner central dentro de .boxnotes en mobile */
    .boxnotes .skin-banner-central,
    .boxnotes .skin-banner-central.skin-banner-central-clasico,
    .boxnotes .skin-banner-central.skin-banner-central-premium {
        width: 100% !important;
        max-width: 100% !important;
    }

    .skin-banner-central-desktop {
        display: none;
    }

    .skin-banner-central-mobile {
        display: block;
    }
}


.injertobanner.single .inner.ajustebanner-clasico,
.injertobanner.single .inner.ajustebanner-premium {
    width: 100%;
    max-width: 100%;
}