/* ================================================= */
/* Carrusel de imágenes por entrevista               */
/* ================================================= */

/* Sección del carrusel: centrado y sin margen top */
.carousel-section {
    margin: 0 auto;
    margin-bottom: 2rem;
    max-width: 100%;
    padding: 0;
    max-width: 1000px;
}

.carousel-slide iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  border: none;
}

/* Contenedor principal del carrusel */
.carousel {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.3);
}


/* Track de slides */
.carousel-track {
    display: flex;
    transition: transform 0.4s ease;
    margin: 0;
    padding: 0;
}

/* Cada slide ocupa 100% ancho y su altura se define por aspect-ratio */
.carousel-slide {
    min-width: 100%;
    aspect-ratio: 4/3;
    /* ratio de base (móvil) */
    position: relative;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

/* Imagen dentro del slide: cubre todo el área */
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Ajuste de ratio en desktop */
@media (min-width: 769px) {
    .carousel-slide {
        aspect-ratio: 16/9;
        /* ratio panorámico en pantallas grandes */
    }
}

/* Botones Prev/Next */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 2rem;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.2s;
    z-index: 2;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 1);
}

.carousel-btn.prev {
    left: 1rem;
}

.carousel-btn.next {
    right: 1rem;
}

/* Lightbox overlay */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    z-index: 2000;
    margin: 0;
    padding: 0;
}

body.lightbox-open {
    overflow: hidden;
    touch-action: none;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    object-fit: contain;
    margin: 0;
    padding: 0;
}

.lightbox-overlay .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    z-index: 2;
    margin: 0;
}

/* Estado normal: cursor lupa */
.lightbox-overlay:not(.zoomable) img {
    cursor: zoom-in;
}

/* Estado zoom-in: cursor lupa -, arrastrable */
.lightbox-overlay.zoomable img.zoomed {
    cursor: grab;
    transform-origin: top left;
    transition: transform 0.4s ease;
    user-select: none;
}

.lightbox-overlay.zoomable img.zoomed:active {
    cursor: grabbing;
}

/* Botones prev/next en lightbox */
.lightbox-overlay .lb-prev,
.lightbox-overlay .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  font-size: 2.5rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  border-radius: 0.5rem;
  z-index: 2001;
}
.lightbox-overlay .lb-prev { left: 1rem; }
.lightbox-overlay .lb-next { right: 1rem; }

/* Bloquea scroll cuando se abre el lightbox */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}


/* Responsive: botones más pequeños en móvil */
@media (max-width: 768px) {
    .carousel-btn {
        font-size: 1.5rem;
        padding: 0.25rem 0.5rem;
    }
}