/* =========================================
    ESTILOS ESPECÍFICOS DE LA GALERÍA
========================================= */

#projectCarousel .carousel-item {
    background-color: transparent !important;
    box-shadow: none; 
}

/* --- GRID LAYOUT (COLLAGE) --- */
.collage-container {
    display: grid;
    grid-template-columns: 1.4fr 1fr; 
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    height: 500px;
    width: 100%;
}

.collage-main { grid-column: 1 / 2; grid-row: 1 / 3; }
.collage-side-top { grid-column: 2 / 3; grid-row: 1 / 2; }
.collage-side-bottom { grid-column: 2 / 3; grid-row: 2 / 3; }

.collage-main, .collage-side-top, .collage-side-bottom {
    position: relative; overflow: hidden; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #eee;
}

.collage-container img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease; display: block;
}
.collage-container div:hover img { transform: scale(1.05); }

/* CONTROLES Y TEXTO */
.carousel-controls-wrapper { margin-top: 1.5rem; }
.custom-nav-btn {
    width: 50px; height: 50px; border-radius: 50%;
    border: 2px solid var(--primary); background: transparent;
    color: var(--primary); transition: all 0.3s ease; margin: 0 5px 0 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.custom-nav-btn:hover {
    background: var(--primary); color: #fff;
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.carousel-text-content {
    min-height: 300px; 
    display: flex; flex-direction: column; justify-content: flex-start;
    padding-top: 20px; 
}

.carousel-text-item {
    display: none; opacity: 0; transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.carousel-text-item.active { display: block; animation: fadeInRight 0.5s forwards; }
@keyframes fadeInRight { to { opacity: 1; transform: translateX(0); } }

.btn-elegant {
    background-color: var(--primary); color: #fff;
    padding: 10px 30px; border-radius: 50px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem;
    transition: all 0.3s ease; width: fit-content; text-decoration: none; display: inline-block;
    margin-top: 1rem;
}
.btn-elegant:hover { border: 1px solid var(--primary); color: var(--primary); background: transparent; }

/* =========================================
   RESPONSIVE FIX MEJORADO
   ========================================= */
@media (max-width: 768px) {
    /* 1. Ajuste del Grid para móviles */
    .collage-container {
        display: grid;
        /* Dos columnas iguales para las fotos de abajo */
        grid-template-columns: 1fr 1fr; 
        /* Fila 1 (Principal): 280px, Fila 2 (Detalles): 110px */
        grid-template-rows: 280px 110px; 
        gap: 10px;
        height: auto;
        width: 100%;
        margin-bottom: 20px; /* Espacio antes del texto */
    }

    /* 2. Imagen Principal: Ocupa todo el ancho superior */
    .collage-main { 
        grid-column: 1 / -1; /* Va de la línea 1 a la última */
        grid-row: 1 / 2; 
    }

    /* 3. Imagen secundaria 1: Abajo a la izquierda */
    .collage-side-top { 
        grid-column: 1 / 2; 
        grid-row: 2 / 3; 
    }

    /* 4. Imagen secundaria 2: Abajo a la derecha (¡La mostramos de nuevo!) */
    .collage-side-bottom { 
        display: block !important; /* Forzamos que se vea */
        grid-column: 2 / 3; 
        grid-row: 2 / 3; 
    }

    /* 5. Ajustes de Texto y Controles para que no queden muy abajo */
    .carousel-text-content { 
        padding-top: 0; /* Quitamos padding extra */
        min-height: auto; 
        text-align: center;
    }

    .carousel-text-item { 
        display: none; 
        flex-direction: column; 
        align-items: center; 
    }
    
    .carousel-text-item.active { 
        display: flex; 
    }

    /* Ajustar tamaño de título para ahorrar espacio */
    .carousel-text-item h2 {
        font-size: 1.8rem; 
        margin-bottom: 0.5rem !important;
    }
    
    /* Alineación de la lista de características */
    .carousel-text-item ul { 
        text-align: left; 
        display: inline-block;
        margin-bottom: 1rem;
    }

    /* Controles de navegación centrados y más visibles */
    .carousel-controls-wrapper { 
        text-align: center !important; 
        margin-top: 0.5rem; 
        margin-bottom: 1.5rem; 
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    
    /* Botones un poco más grandes para dedos táctiles */
    .custom-nav-btn {
        width: 55px;
        height: 55px;
        background: rgba(255,255,255,0.9); /* Fondo blanco sutil para contraste */
    }
}