:root {
    --hueco: 24px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
    color: #f3e6c4;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.pantalla {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 24px;
    width: 100%;
    height: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #000;
}

.pantalla:fullscreen,
.pantalla:-webkit-full-screen {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.cartel {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 100vh;
    width: 22vw;
    max-height: 100%;
    margin: 0 12px;
    padding: 0;
}

.lienzo {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    background: #000;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
.slide.is-current { z-index: 1; }
.slide.is-in { z-index: 3; }
.slide.is-out { z-index: 2; pointer-events: none; }

.slide img,
.slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
    border: 0;
}
.slide.is-current img {
    animation: kenburns 18s ease-in-out infinite alternate;
}
@keyframes kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.07) translate(-1.1%, -0.7%); }
}

.slide.is-in::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(
        165deg,
        transparent 30%,
        rgba(243, 230, 196, 0.18) 48%,
        transparent 62%
    );
    animation: barrido 0.95s ease-out forwards;
}

.slide.is-in { animation: entra-centro 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.slide.is-out { animation: sale-centro 0.85s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
[data-lado="izquierda"] .slide.is-in { animation-name: entra-izq; }
[data-lado="izquierda"] .slide.is-out { animation-name: sale-izq; }
[data-lado="derecha"] .slide.is-in { animation-name: entra-der; }
[data-lado="derecha"] .slide.is-out { animation-name: sale-der; }

.slide.is-video,
.slide.is-video.is-in,
.slide.is-video.is-out,
[data-lado="izquierda"] .slide.is-video.is-in,
[data-lado="izquierda"] .slide.is-video.is-out,
[data-lado="centro"] .slide.is-video.is-in,
[data-lado="centro"] .slide.is-video.is-out,
[data-lado="derecha"] .slide.is-video.is-in,
[data-lado="derecha"] .slide.is-video.is-out {
    animation-name: entra;
    transform: none !important;
    filter: none !important;
}
.slide.is-video.is-out { animation-name: sale; }
.slide.is-video.is-in::after { display: none; }

.slide.is-video {
    isolation: isolate;
}
.slide video {
    position: relative;
    z-index: 0;
}
.progreso {
    position: absolute;
    z-index: 8;
    left: 8%;
    right: 8%;
    bottom: 4.2%;
    height: 10px;
    pointer-events: none;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.62);
    box-shadow: 0 0 0 2px rgba(243, 230, 196, 0.55), 0 4px 16px rgba(0, 0, 0, 0.45);
    transform: translate3d(0, 0, 1px);
    overflow: visible;
}
.progreso-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 99px;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #c9a227, #f3e6c4 62%, #fff8e0);
    box-shadow: 0 0 14px rgba(243, 230, 196, 0.7);
    will-change: transform;
}
.progreso-pip {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff8e0;
    box-shadow: 0 0 10px 3px rgba(243, 230, 196, 0.85);
    opacity: 1;
    pointer-events: none;
}
.progreso.is-viva .progreso-pip {
    box-shadow: 0 0 12px 4px rgba(243, 230, 196, 0.95);
}
.slide.is-out .progreso,
.slide.is-out .aviso-video { opacity: 0; }

.aviso-video {
    position: absolute;
    z-index: 9;
    left: 8%;
    right: 8%;
    bottom: 9.5%;
    padding: 0.45rem 0.7rem;
    text-align: center;
    font: 700 0.78rem/1.25 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.04em;
    color: #1a1208;
    background: #f3e6c4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transform: translate3d(0, 0, 1px);
    pointer-events: none;
}
.aviso-video[hidden] { display: none; }

@keyframes entra-izq {
    from { transform: translateX(-100%); }
    to   { transform: none; }
}
@keyframes sale-izq {
    from { transform: none; opacity: 1; }
    to   { transform: translateX(14%); opacity: 0; }
}
@keyframes entra-centro {
    from { transform: translateY(100%); }
    to   { transform: none; }
}
@keyframes sale-centro {
    from { transform: none; opacity: 1; }
    to   { transform: translateY(-12%); opacity: 0; }
}
@keyframes entra-der {
    from { transform: translateX(100%); }
    to   { transform: none; }
}
@keyframes sale-der {
    from { transform: none; opacity: 1; }
    to   { transform: translateX(-14%); opacity: 0; }
}
@keyframes entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sale {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes barrido {
    from { opacity: 0.7; transform: translateX(-40%); }
    to   { opacity: 0; transform: translateX(40%); }
}

@media (prefers-reduced-motion: reduce) {
    .slide.is-in, .slide.is-out {
        animation-name: entra, sale;
        animation-duration: 0.35s;
    }
    .slide.is-in::after { display: none; }
}

.vacio {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: clamp(0.7rem, 1.4vw, 1.1rem);
    color: rgba(243, 230, 196, 0.28);
}
.vacio small {
    letter-spacing: 0.12em;
    font-size: 0.65em;
    opacity: 0.7;
}

.btn-full {
    position: fixed;
    z-index: 6;
    left: 50%;
    bottom: 3.2vh;
    transform: translateX(-50%);
    border: 0;
    cursor: pointer;
    font: 600 0.95rem/1 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #071109;
    background: #f3e6c4;
    padding: 0.85rem 1.4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.btn-full.is-hidden { display: none; }
body.is-full { cursor: none; }
body.is-full .btn-full { display: none; }

.slide.is-embed .embed-url,
.lienzo iframe.embed-url {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
}
.youtube-caja {
    display: none;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    max-height: 100%;
    margin: 0 12px;
    background: #050505;
    overflow: hidden;
}
.pantalla.is-youtube [data-col="centro"],
.pantalla.is-youtube [data-col="derecha"] {
    display: none !important;
}
.pantalla.is-youtube .youtube-caja {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 0;
    background: #000;
}
.pantalla.is-youtube .youtube-caja,
.youtube-caja:not([hidden]) {
    display: block;
}
.youtube-caja[hidden] { display: none !important; }
.youtube-caja iframe,
.youtube-caja #yt-frame,
.youtube-caja #yt-frame iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    background: #000;
}