/* Contenedor principal */
.gallery-card {
    background: #fff;
    position: relative; 
    overflow: hidden; /* Corta el zoom para que no invada otros elementos */
    box-sizing: border-box;
}

/* La imagen */
.gallery-img {
    width: 100%;      /* Forzamos el 100% del ancho */
    object-fit: cover; /* Mantiene la proporción sin deformar */
    display: block;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* EL TRUCO: Usamos un borde interno (inset) para que no reste ancho real */
    /* El borde blanco ahora es parte de la imagen y escalará con ella */
    border: 15px solid #ffffff; 
    box-sizing: border-box; 
}

/* Zoom: Escala la imagen y el borde blanco al mismo tiempo */
.gallery-card:hover .gallery-img {
    transform: scale(1.1); /* La imagen crece, el borde crece, pero el contenedor lo corta */
}

/* Capa de hover (Overlay) */
.gallery-overlay {
    position: absolute;
    /* Inset 0 hace que cubra exactamente el 100% del contenedor */
    inset: 0; 
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Si quieres que el overlay oscuro TAMBIÉN respete el marco blanco al hacer hover:
   Cambia 'inset: 0' por 'inset: 15px' en el overlay. */

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

/* Contenido del Overlay */
.overlay-content {
    text-align: center;
    color: #fff;
    transform: translateY(15px);
    transition: transform 0.4s ease;
}

.gallery-card:hover .overlay-content {
    transform: translateY(0);
}