/* VERSIÓN
v1.23102026 */

.class_contenedor_general_galeria {
    width: 100%;
    margin-top: 25px;
    display: flex;
    align-items: center; 
}

.class_div_galeria {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 10px !important; 
    padding: 20px;
    padding-top: 20px; 
    position: relative;
    height: auto !important;
    align-content: flex-start !important;
    justify-content: center !important; 
}

/*Clases modificadoras, cambian la posición según la página*/
.class_div_galeria_izquierda {
	justify-content: flex-start; /* Alinea al inicio (izquierda) */
}
.class_div_galeria_izquierda .class_div_galeria {
	margin-left: 5vw; /* Tu margen izquierdo */
}

.class_div_galeria_derecha {
	justify-content: flex-end; /* Alinea al final (derecha) */
}
.class_div_galeria_derecha .class_div_galeria {
	margin-right: 5vw; /* Margen equivalente en el lado derecho */
}

.class_div_galeria_centrada {
	justify-content: flex-start; /* Alinea al inicio (izquierda) */
}
.class_div_galeria_centrada .class_div_galeria {
	margin: auto; /* Centrado */
}

.class_div_img_galeria {
    flex: calc(var(--ratio) * 60) 1 calc(var(--ratio) * 7vw) !important;
    height: clamp(120px, 7vw, 350px) !important; 
    aspect-ratio: var(--ratio) !important;
    overflow: hidden !important;
}

/* Bloquea el estiramiento de la última fila  */
.class_div_img_galeria.es-ultima-fila {
    flex-grow: 0 !important; 
    flex-shrink: 0 !important;
}

.class_img_galeria {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ==========================================================================
   COMPORTAMIENTO EN DISPOSITIVOS MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
	
	.class_contenedor_general_galeria {
		width: 100% !important;
		margin-top: 0; 
	}
	.class_div_galeria {
		padding: 10px;   
		display: flex;
		flex-direction: column; 
		gap: 15px;
		width: 90% !important;
		margin: auto !important;
		position: relative;
	}
    .class_div_img_galeria {
        width: 100% !important; 
        height: auto !important; 
        flex: none !important;  
        margin: 0;
        overflow: hidden;
    }
    .class_img_galeria {
        width: 100% !important;
        height: auto !important; 
        object-fit: contain;     
        border-radius: 4px;
        display: block;
    }
}

/* ==========================================================================
   COMPORTAMIENTO EN PC MODO VERTICAL
   ========================================================================== */
@media (min-width: 769px) and (orientation: portrait) {
	
	/* Forzamos al contenedor general a centrar su contenido horizontalmente */
    .class_contenedor_general_galeria {
        justify-content: center !important;
        width: 100% !important;
    }

    /* La cuadrícula de la galería centrada al 80% con Flexbox */
    .class_contenedor_general_galeria .class_div_galeria {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        width: 90% !important;
        max-width: 90% !important;
        margin: 0 auto !important; 
        gap: 10px !important; /* Tus 10px estrictos de separación siempre */
        padding: 20px 0; 
        justify-content: center !important;
    }

    .class_contenedor_general_galeria .class_div_img_galeria {
        height: clamp(200px, 11vmax, 350px) !important; 
        flex: calc(var(--ratio) * 100) 1 calc(var(--ratio) * 11vmax) !important; 
        aspect-ratio: var(--ratio) !important;
        overflow: hidden !important;
    }

    /* Solo para la última fila */
    .class_contenedor_general_galeria .class_div_img_galeria.es-ultima-fila {
        flex: 0 0 calc(var(--ratio) * 11vmax) !important; 
        flex-grow: 0 !important;   
        flex-shrink: 0 !important;  
    }
	
	/* Forzamos al contenedor general a centrar los bloques vertical y horizontalmente */
    .class_contenedor_general_galeria:has(#id_div_carteles) {
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* ==========================================================================
   ESTILOS PARA DISPOSITIVOS MÓVILES EN MODO LANDSCAPE
   ========================================================================== */
   
@media (max-width: 768px) and (max-height: 550px) and (orientation: landscape) {
	
	:root body .class_contenedor_general_galeria {
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: block !important;
        width: 100% !important;
    }
    :root body .class_div_galeria {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px !important;
        margin-top: 0 !important;
		text-align: justify !important;
    }
	
    :root body .class_div_img_galeria {
        width: 48% !important; 
        height: 140px !important; 
        flex: none !important;
        margin: 0 !important;
    }
    :root body .class_img_galeria {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}