/* --- Contenedor y Grid Stack --- */
.gallery-container {
    width: 100%;
    max-width: 1440px;
    height: 800px;
    margin: 0px auto 72px;
    position: relative;
}

.gallery {
    display: grid;
    /* Apila todos los elementos en la primera fila y columna */
    grid-template-areas: "stack"; 
    width: 100%;
    height: 100%;
    /* Asegura que el contenedor principal esté bajo los botones */
    z-index: 1; 
}

.slide {
    /* Todos los slides ocupan el mismo espacio apilado */
    grid-area: stack; 
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* La transición es crucial para el movimiento suave */
    transition: transform 0.6s ease-in-out, z-index 0.6s, opacity 0.6s;
    padding: 16px;
    background-color: var(--grey-color-800);
    border-radius: 24px;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* --- Clases de Posicionamiento --- */

/* 💥 SLIDE ACTIVO (Al frente, tamaño normal) */
.slide.current {
    transform: translateX(0) scale(1);
    z-index: 10;
    opacity: 1;
}

/* 💥 SLIDE PREVIO (A la izquierda, ligeramente más pequeño) */
.slide.prev {
    transform: translateX(-100%) scale(0.95);
    z-index: 9;
    opacity: 0.05;
}

/* 💥 SLIDE SIGUIENTE (A la derecha, ligeramente más pequeño) */
.slide.next {
    transform: translateX(100%) scale(0.95);
    z-index: 9;
    opacity: 0.05;
}

/* 💥 SLIDES INACTIVOS (Detrás, pequeño y fuera del flujo principal) */
.slide.far-prev, .slide.far-next {
    transform: translateX(0) scale(0.7);
    z-index: 5; 
    opacity: 0; /* Opcional: ocultarlos completamente */
}


/* --- Estilos de Botones --- */
.prev-btn, .next-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 20; /* Siempre encima de las imágenes */
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* --- Estilos de los Indicadores (Dots) --- */
.dots-container {
    position: relative;
    bottom: -156px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
    z-index: 30; 
    display: flex;
    gap: 12px; 
}

.dot {
    width: 8px;
    height: 8px;
    background-color: var(--grey-color-700);
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
    cursor: default; 
}

.dot.active-dot {
    background-color: var(--primary-color-500);
}


/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
MOBILE
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

@media (max-width: 768px) {


.gallery-container {
    height: 420px;
    margin-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
}

.dots-container {
    position: relative;
    bottom: -88px;
}

}