/* Motor visual único de "Esta Semana en WoW": carrusel de solo imágenes
   (ver public/js/weekly-banner.js). Dos secciones sin relación entre sí:
   escritorio (.wkb-*) y móvil (.wkb-m-*) -- no comparten ni un solo
   selector a propósito, así ajustar uno no puede volver a romper el otro. */
@layer vsg-universal {

/* ════════════════════ ESCRITORIO ════════════════════ */
#thisWeekWowBanner, #newsThisWeekWowBanner {
    position: relative;
    overflow: hidden;
}

.wkb-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 14px;
}

.wkb-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 14px;
    background-color: #07101f;
    isolation: isolate;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.wkb-img-link {
    position: absolute;
    inset: 0;
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Controles de rotación: Fijos arriba a 15% de la izquierda.
   Fondo propio en píldora con desenfoque para legibilidad sobre cualquier fondo. */
.wkb-controls {
    position: absolute;
    z-index: 10;
    left: 8%;
    top: clamp(5px, 0.6vw, 8px);
    transform: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(2, 8, 23, .65);
    
    overflow-x: auto;
    pointer-events: auto;
}
.wkb-dots { display: flex; align-items: center; gap: 4px; }
.wkb-dot { width: 4px; height: 4px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .32); cursor: pointer; transition: background .2s ease, width .2s ease; }
.wkb-dot.active { width: 10px; border-radius: 2px; background: #fff; }
.wkb-dot:hover { background: rgba(255, 255, 255, .6); }
.wkb-nav-arrow { width: 13px; height: 13px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font-size: .55rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wkb-nav-arrow:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.wkb-pause-btn { position: relative; width: 13px; height: 13px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .1); cursor: pointer; }
.wkb-pause-btn:hover { background: rgba(255, 255, 255, .25); }
.wkb-pause-btn::before, .wkb-pause-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.5px; height: 5px; background: rgba(255, 255, 255, .85); }
.wkb-pause-btn::before { transform: translate(-2px, -50%); }
.wkb-pause-btn::after { transform: translate(1px, -50%); }
.wkb-pause-btn.is-paused::before { width: 0; height: 0; background: transparent; border-style: solid; border-width: 3px 0 3px 4.5px; border-color: transparent transparent transparent rgba(255, 255, 255, .85); transform: translate(-1.5px, -50%); }
.wkb-pause-btn.is-paused::after { content: none; }

/* ════════════════════ MÓVIL ════════════════════ */
@media (max-width: 820px) {
    #thisWeekWowBanner, #newsThisWeekWowBanner {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}
.wkb-m-card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background-color: #07101f;
    isolation: isolate;
}
.wkb-m-img-link { display: block; width: 100%; line-height: 0; }
.wkb-m-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

}