/* Foto completa del carrusel (ver assets/js/lightbox.js) */

/* Las fotos del carrusel se pueden tocar para verlas enteras */
.contenedor .item:not(.item-video) { cursor: zoom-in; }
.contenedor .item .content a,
.contenedor .item .content button { cursor: pointer; }

/* Icono de "ampliar" arriba a la derecha */
.kw-zoom-pista {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 15;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #b08d2e;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #E4B44A;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(176, 141, 46, 0.5);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.kw-zoom-pista:hover,
.kw-zoom-pista:focus-visible {
    background: rgba(176, 141, 46, 0.9);
    color: #000;
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(228, 180, 74, 0.8);
}

/* Capa que muestra la foto completa */
.kw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.94);
}
.kw-lightbox--abierto {
    display: flex;
    animation: kwLightboxIn .25s ease;
}
@keyframes kwLightboxIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.kw-lightbox__img {
    max-width: 96vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 2px solid #b08d2e;
    border-radius: 6px;
    box-shadow: 0 0 30px rgba(176, 141, 46, 0.45);
    cursor: default;
}
.kw-lightbox__cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    border: 2px solid #b08d2e;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #E4B44A;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(176, 141, 46, 0.55);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.kw-lightbox__cerrar:hover,
.kw-lightbox__cerrar:focus-visible {
    background: #b08d2e;
    color: #000;
    transform: scale(1.08);
}

@media (max-width: 576px) {
    .kw-zoom-pista { top: 10px; right: 10px; width: 34px; height: 34px; font-size: .85rem; }
    .kw-lightbox { padding: 10px; }
    .kw-lightbox__cerrar { top: 8px; right: 8px; width: 40px; height: 40px; font-size: 26px; }
}

/* Anular los estilos globales de <button> (cuerpo_index.css los pinta
   rojos, con sombra roja, padding y "sheen" al pasar el mouse) */
.contenedor .kw-zoom-pista,
.kw-lightbox .kw-lightbox__cerrar {
    padding: 0;
    letter-spacing: 0;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenedor .kw-zoom-pista::after,
.kw-lightbox .kw-lightbox__cerrar::after { display: none; }
.kw-lightbox .kw-lightbox__cerrar:hover,
.kw-lightbox .kw-lightbox__cerrar:focus-visible {
    background: #b08d2e;
    color: #000;
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(228, 180, 74, 0.8);
}

/* Botón de sonido de los videos del carrusel (ver assets/js/carrusel-sonido.js)
   Abajo a la derecha; solo aparece cuando el video en pantalla tiene audio. */
.contenedor .kw-sonido {
    position: absolute;
    right: 16px;
    bottom: 22px;
    z-index: 15;
    width: 42px;
    height: 42px;
    padding: 0;
    letter-spacing: 0;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #b08d2e;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #E4B44A;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(176, 141, 46, 0.5);
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.contenedor .kw-sonido::after { display: none; }
.contenedor .kw-sonido:hover,
.contenedor .kw-sonido:focus-visible {
    background: rgba(176, 141, 46, 0.9);
    color: #000;
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(228, 180, 74, 0.8);
}
/* Con el sonido apagado se ve más apagado, para que se note el estado */
.contenedor .kw-sonido.kw-sonido--apagado { color: #c9c2b4; }

@media (max-width: 576px) {
    .contenedor .kw-sonido { right: 10px; bottom: 12px; width: 36px; height: 36px; font-size: 1rem; }
}