/* ===================================
   GALERÍA SECTION STYLES
   Sección de galería con carrusel de 3 imágenes
   =================================== */

.galeria {
    position: relative;
    width: 100%;
    background-color: var(--bg-light);
    padding: var(--spacing-10) 0 var(--spacing-6) 0;
    overflow: hidden;
}

/* Container */
.galeria__container {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

/* Header */
.galeria__header {
    margin-bottom: var(--spacing-6);
}

/* Título - USANDO OPUS */
.galeria__title {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: normal;
    color: var(--color-primary);
    letter-spacing: var(--letter-spacing-wider);
    text-align: left;
}

/* Wrapper del carrusel */
.galeria__carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--spacing-4) 0;
    margin-bottom: var(--spacing-6);
}

/* Carrusel */
.galeria__carousel {
    position: relative;
    width: 100%;
    overflow: visible;
    padding: 0 var(--spacing-12);
}

/* Track - contenedor de slides */
.galeria__track {
    display: flex;
    gap: var(--spacing-4);
    transition: transform 0.6s var(--ease-custom);
    will-change: transform;
}

/* Slides individuales - VERTICAL EN MÓVIL */
.galeria__slide {
    flex: 0 0 100%;
    position: relative;
    transition: all 0.6s var(--ease-custom);
    opacity: 0.4;
    transform: scale(0.9);
}

/* Slide central (activo) */
.galeria__slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* Slides laterales visibles */
.galeria__slide.prev,
.galeria__slide.next {
    opacity: 0.6;
    transform: scale(0.95);
    z-index: 1;
}

/* Imagen - ASPECT RATIO 16:9 Y BORDES SUTILES */
.galeria__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);  /* Bordes muy sutiles */
    box-shadow: var(--shadow-lg);
}

/* Controles de navegación - SIN FONDO */
.galeria__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: var(--color-secondary);
    border: none;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-all);
    z-index: 3;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.galeria__control:hover {
    color: var(--color-secondary-dark);
    transform: translateY(-50%) scale(1.15);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.galeria__control:active {
    transform: translateY(-50%) scale(1.05);
}

.galeria__control--prev {
    left: 0;
}

.galeria__control--next {
    right: 0;
}

.galeria__control svg {
    width: 40px;
    height: 40px;
}

/* Footer con botón */
.galeria__footer {
    margin-top: var(--spacing-4);
    display: flex;
    justify-content: flex-start;
}

/* Botón Ver Más */
.galeria__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: normal;
    color: var(--color-white);
    background-color: var(--color-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    letter-spacing: var(--letter-spacing-wider);
    transition: var(--transition-all);
    box-shadow: var(--shadow-md);
}

.galeria__button:hover {
    background-color: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.galeria__button:active {
    transform: translateY(0);
}

/* ===================================
   RESPONSIVE - TABLET
   =================================== */

@media screen and (min-width: 768px) {
    .galeria {
        padding: var(--spacing-12) 0 var(--spacing-8) 0;
    }

    .galeria__container {
        padding: 0 var(--container-padding-tablet);
    }

    .galeria__title {
        font-size: 3rem;
    }

    .galeria__header {
        margin-bottom: var(--spacing-8);
    }

    .galeria__carousel {
        padding: 0 var(--spacing-16);
    }

    /* IMAGEN 16:9 EN TABLET */
    .galeria__image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .galeria__control {
        width: 60px;
        height: 60px;
    }

    .galeria__control svg {
        width: 45px;
        height: 45px;
    }

    .galeria__button {
        font-size: var(--font-size-lg);
        padding: var(--spacing-4) var(--spacing-8);
    }

    .galeria__footer {
        margin-top: var(--spacing-6);
    }
}

/* ===================================
   RESPONSIVE - DESKTOP
   =================================== */

@media screen and (min-width: 1024px) {
    .galeria {
        padding: var(--spacing-16) 0 var(--spacing-10) 0;
    }

    .galeria__container {
        padding: 0 var(--spacing-10);
    }

    .galeria__title {
        font-size: 3.5rem;
    }

    .galeria__header {
        margin-bottom: var(--spacing-10);
    }

    /* Mostrar 3 slides en desktop */
    .galeria__slide {
        flex: 0 0 calc(33.333% - var(--spacing-4));
    }

    .galeria__track {
        gap: var(--spacing-6);
    }

    .galeria__carousel {
        padding: 0 var(--spacing-20);
    }

    /* IMAGEN 16:9 EN DESKTOP */
    .galeria__image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .galeria__carousel-wrapper {
        margin-bottom: var(--spacing-8);
    }

    .galeria__control {
        width: 70px;
        height: 70px;
    }

    .galeria__control svg {
        width: 50px;
        height: 50px;
    }

    .galeria__footer {
        margin-top: var(--spacing-6);
    }
}

/* ===================================
   RESPONSIVE - DESKTOP GRANDE
   =================================== */

@media screen and (min-width: 1280px) {
    .galeria__container {
        padding: 0 var(--spacing-12);
    }

    .galeria__title {
        font-size: 4rem;
    }

    /* IMAGEN 16:9 EN DESKTOP GRANDE */
    .galeria__image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .galeria__button {
        font-size: var(--font-size-xl);
        padding: var(--spacing-4) var(--spacing-10);
    }
}