/* Carrusel de la galería — Estética Masculina Ximena
   Desktop: 2 fotos por vista · Móvil (<=700px): 1 foto por vista */

.carrusel {
    position: relative;
    width: min(900px, 92vw);
    margin: 0 auto;
}

/* Ventana con recorte: el track se desliza dentro */
.carrusel-ventana {
    overflow: hidden;
    /* El arrastre horizontal mueve el carrusel; el scroll vertical de la página sigue igual */
    touch-action: pan-y;
}

.carrusel-track {
    display: flex;
    transition: transform 0.45s ease;
    will-change: transform;
    cursor: grab;
}

.carrusel-track.arrastrando {
    cursor: grabbing;
}

/* La separación va con padding interno (no con gap) para que el avance
   de una vista completa quede exacto */
.carrusel-slide {
    flex: 0 0 50%;
    padding: 0 0.5rem;
}

/* La foto es un link a su galería: el <a> no debe cambiar la geometría del slide */
.carrusel-slide a {
    display: block;
    line-height: 0;
}

.carrusel-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 15px;
    /* Que el navegador no arrastre la foto como archivo ni seleccione al arrastrar */
    user-select: none;
    -webkit-user-drag: none;
}

/* Flechas: círculo rojo, centradas a la mitad vertical del carrusel */
.carrusel-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c00020;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: background-color 0.15s;
}

.carrusel-flecha:hover {
    background: #e00026;
}

.carrusel-flecha:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.carrusel-prev {
    left: -6px;
}

.carrusel-next {
    right: -6px;
}

@media (max-width: 700px) {
    .carrusel-slide {
        flex: 0 0 100%;
    }

    .carrusel-prev {
        left: 2px;
    }

    .carrusel-next {
        right: 2px;
    }
}