.elementor .goya-pop-up-card:active{/* Definimos la clase global para aplicar a todos los contenedores del mosaico */
.goya-pop-up-card {
/* 1. EL BORDE DECENTE (Gradiente sutil) */
border: 2px solid transparent; /* Base transparente */
border-image: linear-gradient(135deg, #002855 0%, #ffde00 100%); /* Gradiente Goya */
border-image-slice: 1; /* Necesario para que el gradiente funcione */

/* 2. LA FUNCIONALIDAD DEL POPUP (Mantenida y refinada) */
background-color: #ffffff; /* Fondo sólido */
transition: all 0.3s ease;
cursor: pointer;
overflow: hidden; /* Importante para el video interno */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Sombra base sutil */
}

/* Efecto Pop-up al pasar el mouse (POPPING) */
.goya-pop-up-card:hover {
transform: translateY(-8px) scale(1.02); /* La carta se eleva y agranda */
border-width: 4px; /* El borde se engrosa sutilmente al pasar el mouse */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}

/* Nota: border-image no funciona bien con border-radius, por lo que las esquinas serán cuadradas */
.goya-pop-up-card iframe {
border-radius: 0; 
}\n}.elementor .goya-pop-up-card{width:1000px;border-radius:12px;.goya-pop-up-card {
border: 6px solid #D1D5DB; /* Borde gris acero suave */
border-radius: 12px;
background-color: #ffffff;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animación más fluida */
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra inicial casi invisible */
}

.goya-pop-up-card:hover {
border-color: #002855; /* El borde se ilumina con el azul GOYA */
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 40, 85, 0.15);
}

.goya-pop-up-card iframe {
border-radius: inherit;
}\n}.elementor .foto-goya:active{/* 1. Estructura base limpia para los bloques de las fotos */
.foto-goya {
border-radius: 12px;
overflow: hidden;
position: relative;
/* Transición súper fluida para el efecto 3D */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra base muy sutil */
}

/* Aseguramos que las imágenes cubran su espacio sin deformarse */
.foto-goya img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease; /* Transición separada para el zoom interno */
}

/* --- LA MAGIA DE LA INTERACCIÓN --- */

/* 2. Cuando el usuario pasa el mouse sobre la GALERÍA en general:
 Oscurece un poco TODAS las fotos y las hace ligeramente más pequeñas */
.galeria-goya-dinamica:hover .foto-goya {
filter: grayscale(30%) brightness(0.7);
transform: scale(0.98);
}

/* 3. PERO, a la foto EXACTA que el usuario está tocando:
 Devuélvele el color, ponla por encima de las demás, amplíala y dale el toque GOYAINCOL */
.galeria-goya-dinamica .foto-goya:hover {
filter: grayscale(0%) brightness(1); /* Recupera color y luz */
transform: scale(1.05); /* Salta hacia el usuario */
z-index: 10; /* Se asegura de estar encima de las fotos vecinas */
border: 2px solid #002855; /* Aparece un marco azul corporativo elegante */
box-shadow: 0 20px 40px rgba(0, 40, 85, 0.35); /* Sombra pesada azulada */
}

/* 4. Efecto de lupa interno: la imagen dentro del marco también se acerca un poco */
.galeria-goya-dinamica .foto-goya:hover img {
transform: scale(1.1);
}\n}.elementor .galeria-goya-dinamica{/* 1. Base estructural con look industrial duro */
.foto-goya {
border-radius: 4px;
overflow: hidden;
position: relative;
background: #fff;
transition: all 0.3s ease; /* Transición suave general */
}

.foto-goya img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.6s ease;
}

/* 2. El marco azul corporativo (Azul Colombiano Oficial #003087) */
.foto-goya::before {
content: "";
position: absolute;
inset: 0; /* Cubre toda la foto */
border: 0px solid #003087; /* Inicia sin grosor */
transition: border 0.2s ease-in-out; /* Animación mecánica y rápida */
z-index: 2;
pointer-events: none; /* Deja que el ratón toque la imagen */
}

/* 3. La barra inferior colombiana (Amarillo, Azul, Rojo) */
.foto-goya::after {
content: "";
position: absolute;
bottom: 0; left: 0; 
width: 100%; 
height: 10px; /* Un poco más alta para que los colores respiren */
/* Degradado horizontal de la bandera: amarillo, azul, rojo */
background: linear-gradient(to right, #ffcd00 33.3%, #003087 33.3% 66.6%, #c8102e 66.6%);
transform: scaleX(0); /* Inicia colapsada */
transform-origin: left;
transition: transform 0.4s ease-out;
z-index: 3;
}

/* --- LAS INTERACCIONES (HOVER) --- */

/* 4. Al pasar el mouse: el marco azul entra de golpe */
.foto-goya:hover::before {
border: 8px solid #003087; /* El marco se ensambla hacia adentro */
}

/* 5. Al pasar el mouse: la imagen hace un zoom suave hacia afuera */
.foto-goya:hover img {
transform: scale(1.04); /* Zoom interno de la foto */
}

/* 6. Al pasar el mouse: la bandera colombiana se desliza de izquierda a derecha */
.foto-goya:hover::after {
transform: scaleX(1);
}

/* 7. Opcional: Pequeño salto hacia el usuario (pop-up effect) */
.foto-goya:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 48, 135, 0.2);
}\n}