/* ==========================================================================
   MUTADOR STUDIO - CSS DE ISOTOPE (Vistas, Rollover y Overlay)
   ========================================================================== */
.mut-item[data-destacado="true"] { grid-column: span 2; }
/* --- 02. ESTILOS DE CONTROLES DE VISTA Y FILTROS --- */
.controles-vista .btn-vista {
    background: none; border: none; padding: 5px;
    color: rgba(255,255,255,0.3); 
    transition: color 0.3s ease, transform 0.2s ease;
}
.controles-vista .btn-vista:hover, 
.controles-vista .btn-vista.active {
    color: #ffffff;
}
.controles-vista .btn-vista svg {
    width: 24px; height: 24px; fill: currentColor;
}

.btn-filtro {
    border: none !important;
    background: none !important;
    padding: 0; opacity: 0.3; 
    transition: opacity 0.3s ease;
    font-size:0.8rem!important;
}
.btn-filtro:hover, .btn-filtro.active { opacity: 1; }

/* --- 03. SISTEMA DE CUADRÍCULA Y BASE DE IMÁGENES/ROLLOVER --- */
.grid-item {
    padding: 15px; 
}

/* Enlace contenedor general */
.project-link {
    display: block;
    position: relative;
    overflow: hidden; 
}

/* Contenedor estricto para las imágenes superpuestas */
.media-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Base unificada para DIVs de imagen y VIDEOS */
.img-placeholder {
    width: 100%;
    height: 100%; /* Necesario para que el video llene el contenedor */
    background-color: #222; 
    object-fit: cover; 
    background-size: cover; 
    background-position: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: block;
}

/* Capa frontal */
.img-front {
    position: relative;
    z-index: 1;
    opacity: 1;
}

/* Capa trasera (Rollover) */
.img-rollover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0; /* Oculta por defecto */
    visibility: hidden;
   
}

/* EFECTO ROLLOVER (Transición cruzada) */
.grid-item:hover .img-rollover {
    opacity: 1;
    visibility: visible; 
}
/* Opcional: Ocultamos el front para que no se mezcle si el rollover tiene transparencias */
.grid-item:hover .img-front {
    opacity: 0;
}
/* Escala de la imagen (Aplicado al contenedor para que ambas escalen juntas) */
.grid-item:hover .media-container {
    transform: scale(1);
    transition: transform 0.5s ease;
}


/* --- 04. EFECTO OVERLAY DINÁMICO Y CABECERA (Icono + Textos) --- */
.view-grid .project-overlay-content,
.view-5-cols .project-overlay-content {
    position: absolute;
    bottom: 30px; 
    left: 20px;
    right: 20px; 
    background-color: transparent; 
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 10;
    transition: background-color 0.4s ease; 
}

/* Flexbox para alinear logo y textos */
.proyecto-header-flex {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre el icono y los textos */
}

/* Estilos del icono */
.proyecto-icono {
    width: 35px;
    height: 35px;
    object-fit: contain;
    flex-shrink: 0; /* Evita que el logo se aplaste */
    background-color: #ffffff;
    padding: 5px;
    border-radius: 50px;
}
.fitrado{ padding: 0px 1%}
/* Textos dentro del overlay: Título siempre visible */
.view-grid .proyecto-titulo,
.view-5-cols .proyecto-titulo {
    color: #ffffff!important;
     font-size: clamp(0.8rem, 0.8vw, 0.7rem) !important; 
    letter-spacing: 0.02em;
    text-transform: uppercase!important;
    margin: 0 !important;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
    transition: text-shadow 0.4s ease;
}

/* Ocultar descripción en las vistas de cuadrícula (Solo título y categoría) */
.view-grid .proyecto-descripcion,
.view-5-cols .proyecto-descripcion {
    display: block; color: #ffffff!important;
}

/* Textos dentro del overlay: Categoría oculta por defecto */
.view-grid .proyecto-categoria,
.view-5-cols .proyecto-categoria {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.5rem!important; 
    letter-spacing: 0.08em; 
    text-transform: uppercase; 
    
    opacity: 0;
    visibility: hidden;
    max-height: 0; 
    margin-top: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Lógica del HOVER del Overlay */
.view-grid .grid-item:hover .project-overlay-content,
.view-5-cols .grid-item:hover .project-overlay-content {
    background-color: rgba(0, 0, 0, 0.7); 
}
.view-grid .grid-item:hover .proyecto-titulo,
.view-5-cols .grid-item:hover .proyecto-titulo {
    text-shadow: none; 
}
.view-grid .grid-item:hover .proyecto-categoria,
.view-5-cols .grid-item:hover .proyecto-categoria {
    opacity: 1;
    visibility: visible;
    max-height: 30px; 
    margin-top: 8px;
    transform: translateY(0); 
}


/* --- 05. VISTA 1: GRID CLÁSICO (3 Columnas 33.33%;) --- */
.view-grid .grid-item { width: 100%; } 
@media (min-width: 768px) {
    .view-grid .grid-item { width: 25%; } 
}
.view-grid .media-container {
    aspect-ratio: 4 / 5; 
}

/* --- 06. VISTA 2: RED 5 COLUMNAS (view-5-cols) --- */
@media (max-width: 767.98px) {
    .view-5-cols .grid-item { width: 50% !important; } 
}
@media (min-width: 768px) {
    .view-5-cols .grid-item { width: 20% !important; } 
}
.view-5-cols .media-container {
    aspect-ratio: 4 / 5; 
}


/* --- 07. VISTA 3: LISTADO COMPACTO / THUMBNAILS (view-minimal) --- */
.view-minimal .grid-item {
    width: 100%; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0; 
}

.view-minimal .grid-item,
.view-minimal .project-link {
    display: flex;
    flex-direction: row;
    align-items: center; 
    gap: 1.5rem; 
    width: 100%;
    text-decoration: none; 
}

/* Ajustamos el media-container en lugar de la imagen para la vista compacta */
.view-minimal .media-container {
    width: 60px !important;  
    height: 60px !important; 
    min-width: 60px !important; 
    flex-shrink: 0; 
    aspect-ratio: 1 / 1; 
    border-radius: 4px; 
    margin-bottom: 0 !important;
}

/* Reseteamos el Overlay para que funcione como Grid CSS */
.view-minimal .project-overlay-content {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    padding: 0;
    
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: center;
    row-gap: 0.2rem;     
    column-gap: 1.5rem;  
}

/* En la vista lista, la cabecera (icono+textos) ocupa la columna izquierda */
.view-minimal .proyecto-header-flex {
    grid-column: 1 / 2;
}

.view-minimal .proyecto-titulo {
    font-size: clamp(1rem, 1.8vw, 1rem) !important; 
    margin: 0 !important; 
    text-align: left;
    text-transform: none !important; 
    color: #ffffff !important;
    text-shadow: none !important; 
}

/* En la vista lista SI mostramos la descripción */
.view-minimal .proyecto-descripcion {
    display: block !important; /* Forzamos su visualización aquí */
    font-size: 0.65rem !important; 
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 !important;
    text-align: left;
    visibility: visible !important;
    opacity: 1 !important;
}

.view-minimal .proyecto-categoria {
    grid-column: 2 / 3;
    grid-row: 1 / span 2; 
    width: auto; 
    text-align: right; 
    font-size: 0.65rem !important; 
    opacity: 0.5 !important; 
    margin: 0 !important;
    color: #ffffff !important;
    visibility: visible !important;
    max-height: none !important;
    transform: none !important;
    text-transform: uppercase;
}