/**
 * Smart OZ — slider en el frontend.
 *
 * La estructura vive aqui; lo que depende de los datos de cada slider (alturas
 * por device, encuadre de cada imagen, velo) lo emite el renderer en un <style>
 * por instancia.
 */

/* --- Contenedor -------------------------------------------------------- */

/*
 * El slider ocupa SIEMPRE el ancho de la pantalla. Quien decide si el contenido
 * va a ancho de tema o a ancho completo es el contenedor de cada slide, con su
 * propio ajuste del maquetador — igual que en una pagina normal.
 *
 * Va con !important y especificidad alta a proposito. El slider casi siempre
 * vive dentro de un bloque del maquetador, y este acota todos sus bloques con
 * `.oz-pb-root .oz-pb-block{max-width:100%}` (0,2,0). Sin ganar esa pulseada,
 * el slider se quedaba con el ancho de la columna.
 *
 * calc(50% - 50vw) da por hecho que el contenedor esta centrado en el viewport,
 * que es lo normal en el maquetador. Si el slider se mete en una columna
 * descentrada quedara desplazado: ponlo en un contenedor de una sola columna.
 */
html body .oz-smart {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/*
 * Y ademas hay que abrirle paso: el bloque, la columna y el inner que lo
 * contienen tienen su propio ancho y pueden recortar lo que sobresalga.
 *
 * :has() limita esto EXCLUSIVAMENTE a la cadena de ancestros de un slider.
 * Ningun otro bloque del maquetador se ve afectado.
 */
html body .oz-pb-root .oz-pb-block:has(.oz-smart),
html body .oz-pb-root .oz-pb-shortcode:has(.oz-smart),
html body .oz-pb-root .oz-pb-col:has(.oz-smart),
html body .oz-pb-root .oz-pb-inner:has(.oz-smart),
html body .oz-pb-root .oz-pb-grid:has(.oz-smart),
html body .oz-pb-root .oz-pb-section:has(.oz-smart) {
    max-width: none !important;
    overflow: visible !important;
}

/*
 * El slider NO impone alto. Lo marca el contenedor de cada slide desde el
 * maquetador ("Alto del contenedor", por dispositivo), igual que el fondo.
 * Swiper corre con autoHeight, asi que el carril se ajusta al slide activo.
 */
.oz-smart__swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* --- Slide -------------------------------------------------------------- */

.oz-smart__slide {
    position: relative;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
}

/* --- Contenido maquetado ------------------------------------------------ */

/*
 * El fondo del slide NO se pinta aqui: se pone en el contenedor del maquetador,
 * que ya admite imagen propia para tablet y para movil. Por eso el contenido
 * ocupa todo el alto del slide — asi el fondo de ese contenedor cubre el slide
 * entero en vez de quedarse a la altura de su contenido.
 */
.oz-smart__content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.oz-smart__content > .oz-pb-root {
    width: 100%;
}

/*
 * Aqui NO se neutraliza el full-bleed de .oz-pb-section, a proposito.
 *
 * La seccion aplica width:100vw y margin-inline:calc(50% - 50vw). Como el
 * slide mide exactamente 100vw, ese calc resuelve a 0 y la seccion encaja
 * clavada. Asi el ajuste "Ancho completo / Ancho del tema" del contenedor
 * funciona dentro de un slide igual que en una pagina, sin nada que lo
 * contrarreste — que es justo por lo que el slider ya no tiene ajuste de ancho.
 */

/* --- Flechas ------------------------------------------------------------ */

.oz-smart__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}

.oz-smart__arrow:hover {
    background: rgba(0, 0, 0, .62);
}

.oz-smart__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.oz-smart__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.oz-smart__arrow--prev {
    left: 18px;
}

.oz-smart__arrow--prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.oz-smart__arrow--next {
    right: 18px;
}

.oz-smart__arrow--next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

.oz-smart__arrow.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
}

/* --- Dots --------------------------------------------------------------- */

.oz-smart__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.oz-smart__dots .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    opacity: .45;
    transition: opacity .2s ease, width .2s ease;
}

.oz-smart__dots .swiper-pagination-bullet-active {
    opacity: 1;
    width: 26px;
    border-radius: 6px;
}

/* --- Ocultar navegacion en movil --------------------------------------- */

@media (max-width: 767px) {
    .oz-smart--arrows-desktop-only .oz-smart__arrow {
        display: none;
    }

    .oz-smart--dots-desktop-only .oz-smart__dots {
        display: none;
    }

    .oz-smart__arrow {
        width: 36px;
        height: 36px;
    }

    .oz-smart__arrow--prev {
        left: 8px;
    }

    .oz-smart__arrow--next {
        right: 8px;
    }
}

/* --- Antes de que arranque Swiper --------------------------------------- */

/*
 * Sin JS (o antes de instanciarlo) los slides se apilarian uno debajo de otro.
 * Se muestra solo el primero para que no haya un salto de maquetacion; en
 * cuanto Swiper inicializa marca el contenedor y esta regla deja de aplicar.
 */
.oz-smart:not(.is-ready) .swiper-wrapper > .oz-smart__slide:not(:first-child) {
    display: none;
}

.oz-smart.is-ready .swiper-wrapper > .oz-smart__slide {
    display: flex;
}

/* --- Texto partido en palabras o letras --------------------------------- */

/*
 * Los trozos los crea el JS (splitText). inline-block es obligatorio: sobre un
 * elemento inline, translate y scale no tienen efecto.
 *
 * vertical-align:top evita que un trozo desplazado hacia abajo empuje la linea
 * y descuadre el interlineado durante la animacion.
 */
.oz-smart .soz-split {
    display: inline-block;
    vertical-align: top;
    will-change: opacity, translate;
}

/* --- Reinicio manual de las animaciones --------------------------------- */

/*
 * Lo usa SmartOZ.replay() (boton "Repetir animacion" de la vista previa).
 *
 * La vuelta al reposo normal va diferida para no verse durante el cambio de
 * slide; para repetir hace falta que sea instantanea, y de eso se encarga esta
 * clase durante el par de frames que dura el reinicio.
 */
.oz-smart.is-anim-resetting .oz-smart__slide * {
    transition: none !important;
}

/* --- Accesibilidad ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .oz-smart .swiper-wrapper {
        transition-duration: 0ms !important;
    }
}