/* ==========================================================================
   ESTILOS COMPONENTES: GALERÍA CON RELACIÓN DE ASPECTO EXACTA (600px)
   ========================================================================== */

/* Contenedor principal de toda la galería */
.galeria-incuteck {
    width: 25%;                 /* Mantiene el 25% de ancho en computadoras */
    min-width: 600px;           /* Se fija a 600px para alinearse con tus imágenes de 600px */
    margin: 0 auto 2rem auto;   /* Centra toda la galería en la página */
    display: flex;
    flex-direction: column;
    gap: 15px;                  /* Espacio de separación entre la imagen grande y las de abajo */
}

/* El visor de la imagen grande de 600px */
.visor-grande {
    width: 100%;
    height: 400px;              /* Alto solicitado de 400px */
    background: #11161d;
    border: 1px solid rgba(214, 175, 87, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.visor-grande img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* Evita que la foto se estire feo, manteniendo su proporción */
    transition: opacity 0.25s ease-in-out; /* Animación de parpadeo suave sincronizada con el JS */
}

/* EL BLOQUE HORIZONTAL: Aquí es donde las alineamos de izquierda a derecha */
.carrusel-miniaturas {
    display: flex;              /* Activa el modo caja flexible para ponerlas en fila */
    flex-direction: row;        /* Fuerza a que se acomoden horizontalmente */
    justify-content: space-between; /* Distribuye las 5 miniaturas cubriendo los 600px exactos */
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Ajuste exacto para tus miniaturas de 120 x 80 */
.miniatura {
    width: 120px;               /* Ancho exacto de tus imágenes */
    height: 80px;               /* Alto exacto de tus imágenes */
    background: #11161d;
    border: 2px solid rgba(255, 255, 255, 0.1); /* Borde sutil por defecto */
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;               /* Se ven un poquito más oscuras si no están seleccionadas */
    transition: all 0.3s ease;
}

.miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* Llena el recuadro de 120x80 a la perfección */
}

/* Miniatura activa: Cuando tiene el borde dorado de Incuteck */
.miniatura:hover, 
.miniatura.active {
    opacity: 1;                 /* Brillo completo */
    border-color: #d4af37;      /* Tu dorado distintivo */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); /* Destello dorado de fondo */
}

/* ==========================================================================
   RESPONSIVO PARA CELULARES (100% DE ANCHO FLUIDO)
   ========================================================================== */
@media (max-width: 768px) {
    .galeria-incuteck {
        width: 100%;
        min-width: 100%;        /* Rompe el candado de los 600px para que quepa en la pantalla del celular */
        padding: 0 15px;
    }

    .visor-grande {
        height: 300px;          /* Se reduce un poco la altura en pantallas móviles para que sea cómodo */
    }

    .carrusel-miniaturas {
        gap: 8px;               /* Añade separación compacta en pantallas táctiles */
    }

    .miniatura {
        width: calc(20% - 7px); /* Divide el espacio equitativamente entre las 5 miniaturas */
        height: auto;
        aspect-ratio: 120 / 80; /* Mantiene la misma relación de aspecto de tus fotos en el celular */
    }
}