/* FONDOS CON IMAGEN */
.nosotros-bg,
.gin-bg {
    position: relative; /* Crucial para que el overlay funcione */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 450px;
    overflow: hidden;
}

/* Capa de superposición (Overlay) común para ambas secciones */
.nosotros-bg::before,
.gin-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75); /* Ajusta este valor si quieres más o menos transparencia */
    z-index: 1;
}

/* IMÁGENES ESPECÍFICAS */
.nosotros-bg {
    background-image: url("../img/hero/nosotros.jpg");
}

.gin-bg {
    background-image: url("../img/hero/fondogin.jpg");
}

/* Contenedores por encima del fondo */
.nosotros-bg .container,
.gin-bg .container {
    position: relative;
    z-index: 2; /* Esto asegura que el texto esté sobre la imagen y el overlay */
}

/* NOSOTROS BOX */
.nosotros-box {
    max-width: 760px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    padding: 48px 56px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* GIN GRID */
.gin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.gin-grid img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

.gin-grid img:hover {
    transform: translateY(-10px); /* Efecto sutil al pasar el mouse */
}

/* CONTACTO */
.contact-social {
    background: #fff;
    padding: 48px 32px;
    border-radius: 12px;
    text-align: center;
}