.maletin-box {
    width: calc( 100% - 40px );
    display: flex; /* Cambiamos de grid a flex */
    flex-direction: row; /* Fuerza fila */
    flex-wrap: nowrap; /* Evita que bajen a la siguiente línea */
    overflow-x: auto; /* Activa el scroll horizontal */
    overflow-y: hidden;
    gap: 20px;
    padding: 20px;
    background-color: var(--bg-dark);
    
    /* Para un scroll más suave en móviles */
    -webkit-overflow-scrolling: touch;
    
    cursor: grab;
    user-select: none; /* Evita seleccionar texto al arrastrar */
    scroll-behavior: auto; /* Importante: "smooth" puede dar tirones con JS */
}

.maletin-box:active {
    cursor: grabbing;
}

/* Evita que los enlaces se activen si estamos arrastrando */
.maletin-box.active a {
    pointer-events: none;
}

.maletin-categorias {
    /* flex-shrink: 0 es vital para que no se achiquen */
    flex: 0 0 290px; 
    width: 290px;
    height: 290px;
    position: relative;
    background-color: gray;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}

/* before con transicion */
.maletin-categorias::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    transition: background-color 0.4s ease; /* Transición suave */
} 

/* Al hacer hover, aclaramos la capa */
.maletin-categorias:hover::before {
    background-color: rgba(0, 0, 0, 0.15); /* Se aclara al 15% */
}

/* El label debe estar por encima de la capa oscura */
.maletin-label {
    position: relative;
    z-index: 2;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    text-align: center;
}
/******************************************************************************/
/* Contenedor Principal */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 5px;
    padding: 10px;
}

/* Caja de cada proyecto */
.project-box {
    position: relative;
    overflow: hidden;
    background-color: #f4f4f4;
    cursor:pointer; 
}

/* --- CLASES DE TAMAÑO --- */
.project-box.wide {
    grid-column: span 2; /* Ocupa 2 columnas de ancho */
}

.project-box.tall {
    grid-row: span 2;    /* Ocupa 2 filas de alto */
}

/* Contenedor de Imagen */
.img-container {
    width: 100%;
    height: 100%;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción sin deformar (lo que aprendimos) */
    transition: transform 0.6s ease;
}

/* Efecto al pasar el mouse */
.project-box .itemtype{
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid white;
    border-radius: 10px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: white;
    line-height: 30px;
    text-align: center;
    font-size: 1.3rem;
    z-index: 10;    
    pointer-events: none; /* Evita que el cuadro interfiera con el hover de la caja */
}
.project-box:hover img {
    transform: scale(1.05); 
}

/* Estilos de Texto (Similares a Anagrama) */
.project-info {
    padding: 15px 0;
}

.project-info h1 {
    font-size: 1.2rem;
    margin: 10px 0 5px;
    text-transform: uppercase;
    color: #333;
}

.project-info h2 {
    font-size: 0.9rem;
    font-weight: normal;
    color: #888;
}

.division {
    height: 1px;
    background-color: #eee;
    margin-top: 10px;
}

 
/******************************************************************************/


/**/
/* Tablets y pantallas medianas (menos de 1024px) */
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-auto-rows: 200px; /* Reducimos un poco la altura base */
    }
}

/* Móviles (menos de 768px) */
@media (max-width: 768px) {
    .portfolio-grid {
        /* Bajamos el mínimo para que entren bien en pantallas pequeñas */
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); 
        grid-auto-rows: 300px; /* Altura fija más cómoda para móvil */
        gap: 15px;
        padding: 10px;
    }

    /* IMPORTANTE: En móvil, las cajas 'wide' no pueden ocupar 2 columnas 
       porque solo hay una. Las reseteamos a 1. */
    .project-box.wide {
        grid-column: span 1; 
    }

    /* Opcional: Si quieres que las 'tall' sigan siendo altas en móvil, déjalas. 
       Si prefieres que todas sean iguales, descomenta la siguiente línea: */
    /* .project-box.tall { grid-row: span 1; } */

    .project-info h1 {
        font-size: 1rem;
    }
    
    .close-lightbox {
        top: 20px;
        right: 20px;
        font-size: 40px;
    }
}