/* Sliders propios del theme (ver sliders.php). Medidas copiadas de Revolution Slider 5.4. */

.uifra-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    /* El ancho lo define el contenedor: las fotos en fila de Slick no deben estirar la columna */
    container-type: inline-size;
}
.uifra-slide__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
}

/* Hero: imagen o video de fondo con textos posicionados sobre una grilla de --grid-w x --grid-h px */
.uifra-hero {
    background-color: #E7E7E7;
}
.uifra-hero__video {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.uifra-hero__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity .3s;
}
.uifra-hero__video.is-playing iframe {
    opacity: 1;
}
/* Como en el plugin, la grilla se achica entera (textos, márgenes, posiciones) cuando
   el slider es más angosto que ella: --s = min(1, ancho del slider / ancho de la grilla) */
.uifra-hero__grid {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: calc(var(--grid-w) * 1px);
    height: calc(var(--grid-h) * 1px);
    --s: 1;
    transform: translateX(-50%) scale(var(--s));
    transform-origin: 50% 0;
}
@supports (width: calc(1px * tan(atan2(1cqw, 1px)))) {
    .uifra-hero__grid {
        --s: min(1, tan(atan2(100cqw, calc(var(--grid-w) * 1px))));
    }
}
.uifra-layer {
    position: absolute;
    white-space: nowrap;
    font-weight: 400;
    animation: uifra-fade-in .3s both;
}
/* El plugin escalaba solo los textos: los ornamentos del theme mantienen su tamaño */
.uifra-hero .ornament-box {
    transform: scale(calc(1 / var(--s)));
    transform-origin: 100% 100%;
}
/* El plugin anulaba el margen inferior del último elemento de cada capa */
.uifra-layer :last-child {
    margin-bottom: 0;
}
@keyframes uifra-fade-in {
    from { opacity: 0; }
}

/* Galerías y carrusel */
.uifra-slide {
    position: relative;
    width: 100%;
}
.uifra-gallery__track:not(.slick-initialized) .uifra-slide + .uifra-slide {
    display: none;
}

.uifra-arrow {
    position: absolute;
    top: 50%;
    z-index: 100;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s, opacity .3s;
}
.uifra-arrow:hover {
    background: #000;
}
.uifra-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
}
.uifra-arrow--prev {
    left: var(--arrows-offset);
}
.uifra-arrow--next {
    right: var(--arrows-offset);
}

.uifra-dots {
    position: absolute;
    left: 50%;
    bottom: var(--bullets-offset);
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: max-content;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(-50%);
    transition: opacity .3s;
}
.uifra-dots li {
    margin: 0;
    padding: 0;
}
.uifra-dots button {
    display: block;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 3px solid #e5e5e5;
    border-radius: 50%;
    box-sizing: content-box;
    background: linear-gradient(to bottom, #999 0%, #e1e1e1 100%);
    cursor: pointer;
}
.uifra-dots button:hover,
.uifra-dots .slick-active button {
    background: #666;
}
.uifra-gallery--bullets-hephaistos .uifra-dots button {
    background: #999;
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 0 2px 1px rgba(130, 130, 130, .3);
}
.uifra-gallery--bullets-hephaistos .uifra-dots button:hover,
.uifra-gallery--bullets-hephaistos .uifra-dots .slick-active button {
    background: #fff;
    border-color: #000;
}

/* Navegación que aparece solo con el mouse encima */
.uifra-gallery--arrows-hover .uifra-arrow,
.uifra-gallery--bullets-hover .uifra-dots {
    opacity: 0;
    transition-delay: .2s;
}
.uifra-gallery--arrows-hover:hover .uifra-arrow,
.uifra-gallery--bullets-hover:hover .uifra-dots {
    opacity: 1;
    transition-delay: 0s;
}
@media (hover: none) {
    .uifra-gallery--arrows-hover .uifra-arrow,
    .uifra-gallery--bullets-hover .uifra-dots {
        opacity: 1;
    }
}
@media screen and (max-width: 599px) {
    .uifra-gallery--arrows-under-600 .uifra-arrow,
    .uifra-gallery--bullets-under-600 .uifra-dots {
        display: none !important;
    }
}

/* Barra de tiempo: su animación también marca cuándo pasar a la foto siguiente */
.uifra-progress {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
    height: 5px;
    pointer-events: none;
}
.uifra-progress--top,
.uifra-progress--hidden {
    top: 0;
}
.uifra-progress--bottom {
    bottom: 0;
}
.uifra-progress--hidden {
    visibility: hidden;
}
.uifra-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, .15);
}
.uifra-progress.is-running span {
    animation: uifra-progress var(--delay) linear forwards;
}
.uifra-gallery.is-paused .uifra-progress span {
    animation-play-state: paused;
}
@keyframes uifra-progress {
    to { width: 100%; }
}