/* galeria.css - VERSIÓN INTEGRAL FINAL */

/* 1. CONTENEDOR Y LISTA */
.gallery-container {
    width: 100%;
    padding: 40px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.gallery-list {
    display: flex;
    width: 100%;
    height: 300px; /* Altura corta */
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center; 
}

/* 2. ITEMS DE LA GALERÍA (LÁMINAS) */
.gallery-item {
    flex: 1 1 15%; /* Ancho ampliado */
    height: 100%;
    position: relative;
    margin: 0 5px; /* Espacio reducido entre láminas */
    filter: drop-shadow(10px 12px 10px rgba(0,0,0,0.25));
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* Forma de paralelogramo suavizada */
    -webkit-clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);

    /* Estado inicial apagado */
    opacity: 0.3;
    filter: grayscale(100%) brightness(0.5);
    transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out;
}

/* 3. EXCEPCIONES DE BORDES (PRIMERA Y ÚLTIMA) */
.gallery-item:first-child img {
    -webkit-clip-path: polygon(0% 0, 100% 0, 85% 100%, 0% 100%);
    clip-path: polygon(0% 0, 100% 0, 85% 100%, 0% 100%);
}

.gallery-item:last-child img {
    -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

/* 4. CLASE ACTIVA (ILUMINACIÓN JS) */
.gallery-item img.active {
    opacity: 1 !important;
    filter: grayscale(0%) brightness(1) !important;
}

/* 5. REACOMODOS ESPECÍFICOS (TUS AJUSTES) */
.gallery-item:nth-child(2) img { object-position: 25% 50%; }
.gallery-item:nth-child(3) img { object-position: 20% 50%; }
.gallery-item:nth-child(6) img { object-position: 80% 50%; }
.gallery-item:nth-child(7) img { object-position: 25% 50%; }
.gallery-item:nth-child(8) img { object-position: 75% 50%; }
.gallery-item:nth-child(10) img { object-position: 80% 50%; }

/* 6. FORMATO DE PÁRRAFOS Y ANIMACIÓN LETRA POR LETRA */
/* --- EFECTO DE BARRIDO LETRA POR LETRA (SIN ESPACIOS EXTRA) --- */



/* 7. RESPONSIVE */
@media (max-width: 1024px) {
    .gallery-list {
        height: 250px;
    }
    .gallery-item {
        flex: 1 1 20%; /* En pantallas pequeñas se ensanchan un poco más para ser legibles */
    }
}
/* Estilos para la marca con dos colores */
.marca-diel {
    font-weight: bold;
}

/* Color para "DI" */
.marca-diel .color-1 {
    color: #d32f2f; /* Azul industrial */
}

/* Color para "EL+" */
.marca-diel .color-2 {
    color: #0055aa; /* Rojo o el color secundario de tu logo */
}

/* Asegura que las letras animadas hereden el color de su contenedor (color-1 o color-2) */
.marca-diel span .letra-animada {
    color: inherit;
}
.oicina{
    color:white !important;
    font-family: 'bahnschrift' !important;
    font-size: 23px;
    
}

.texto{
    color:rgb(0, 0, 0) !important;
    font-family: 'bahnschrift' !important;
    font-size: 20px;
}