#contacto-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 6000; display: none; opacity: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.6s ease;
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.1);
}

.contacto-wrapper { text-align: center; max-width: 1000px; width: 90%; }

.contacto-info { margin-bottom: 50px; }
.tagline { color: #9966ff; font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 3px; }
.contacto-info h2 { font-size: 42px; margin-top: 10px; color: #1a1a1a; font-weight: 900; }
.gradient-text { color: #9966ff; }

.contacto-grid {
    display: flex; gap: 25px; justify-content: center; flex-wrap: wrap;
}

.contacto-card {
    background: #fff; /* Blanco sólido para máxima limpieza */
    padding: 40px 20px; border-radius: 40px;
    text-decoration: none; color: #333;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 280px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.contacto-card:hover {
    background: #9966ff; color: #fff;
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 20px 40px rgba(153, 102, 255, 0.3);
}

.contacto-card .icon { font-size: 50px; margin-bottom: 20px; }
.contacto-card h3 { font-size: 20px; margin-bottom: 10px; font-weight: 900; }
.contacto-card span { font-size: 13px; opacity: 0.7; font-weight: 700; }


    /* --- RESPONSIVIDAD CONTACTO ONCLIP (CORREGIDA) --- */
@media (max-width: 768px) {
    #contacto-layer {
        padding: 130px 20px 40px !important; /* Aumentamos el aire superior para despejar el botón VOLVER */
        justify-content: flex-start !important; 
        overflow-y: auto; 
    }

    .contacto-info {
        margin-top: 20px !important; /* Empujamos el título un poco más hacia abajo */
        margin-bottom: 40px !important;
    }

    .contacto-info h2 {
        font-size: 30px !important; /* Tamaño más cómodo para celulares */
        line-height: 1.2 !important;
    }

    .contacto-grid {
        flex-direction: column !important; 
        align-items: center !important;
        gap: 25px !important;
    }

    .contacto-card {
        width: 100% !important; 
        max-width: 320px;
        padding: 35px 20px !important;
    }
}