#contact {
    margin-top: 4vh;
}

.contact-container {
    position: relative; /* Necesario para que ::before se posicione bien */
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    margin: auto;
    gap: 2rem;
    background: white;
    background-image: url('../assets/mapaBackground.webp');
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    padding: 4vh 10vh;
    font-size: 2.5vh;
    z-index: 1; /* asegura que el contenido esté por encima */
}

.contact-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9); /* aquí regulas la transparencia */
    z-index: -1; /* queda detrás del contenido pero sobre el fondo */
}


.contact-column {
    position: relative;
    z-index: 1;
}

.contact-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2vh;
}

.contact-column h2 {
    font-size: 6vh;
    letter-spacing: 3vh;
    font-family: var(--tittle-font);
}

.text-column {
    justify-content: center; 
}

.text-column .contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.logo-column {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rem;
}

.imagen-arriba {
    max-width: 50vh;
    height: auto;
}

.social-payments-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1 rem;
}

.icons-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.icono-red {
    font-size: 24px;
    color: #333;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.icono-red:hover {
    transform: scale(1.1);
    color: #0066cc;
}

.payment-methods {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.payment-methods .fa-brands {
    font-size: 2rem;
    color: #555;
    transition: all 0.3s ease;
}

.payment-methods .fa-cc-visa:hover { color: #1a1f71; }
.payment-methods .fa-cc-mastercard:hover { color: #eb001b; }
.payment-methods .fa-cc-amex:hover { color: #016fd0; }
.payment-methods .fa-cc-discover:hover { color: #ff6000; }

@media (max-width: 1024px) {
    .contact-container {
        width: 90%; /* Ocupa 90% del ancho en tablets */
        margin: 1.5rem auto;
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        width: 100%; /* Ocupa 90% en móviles */
        margin: 1rem auto;
        padding: 1.2rem;
        flex-direction: column;
        gap: 1.5rem;
        font-size: 2vh;
    }
    

    .contact-column h2 {
    font-family: var(--tittle-font);
    font-size: 3vh;
    letter-spacing: 2vh;
    text-align: center;
    }

    .contact-column {
        width: 100%;
        padding: 0.8rem;
    }
    
    .social-payments-column {
        order: 3;
    }
    
    .imagen-arriba {
        max-width: 30vh; /* Imagen más pequeña en móviles */
        align-self: center;
    }
    
    .payment-methods .fa-brands {
        font-size: 1.8rem;
    }
    
    .icono-red {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .contact-container {
        width: 100%; /* Asegura 90% en pantallas muy pequeñas */
        padding: 1rem;
        margin: 0;
    }
    
    .payment-methods, .icons-row {
        gap: 15px; /* Espaciado más ajustado */
    }
    
    .payment-methods .fa-brands {
        font-size: 1.5rem;
    }
}