/* CONTENEDOR */
.contacto-section {
    margin-left: 80px;
    height: calc(100vh - 70px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;
    text-align: center;
}

/* GRID CENTRADO */
.contacto-grid {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 50px; /* 🔥 controla separación */
    flex-wrap: wrap;

    margin-top: 40px;
}

/* ITEM */
.contacto-item {
    text-decoration: none;
    color: white;
    text-align: center;
}

/* 🔵 CÍRCULO ESTILO BURBUJA */
.circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0.05));

    backdrop-filter: blur(20px);

    border: 2px solid rgba(255,255,255,0.4);

    box-shadow:
        inset 0 0 25px rgba(255,255,255,0.2),
        0 0 25px rgba(255,255,255,0.2);

    transition: 0.3s;

    animation: flotar 4s ease-in-out infinite;
}

/* ICONOS */
.circle svg {
    width: 45px;
    height: 45px;

    fill: none;
    stroke: white;
    stroke-width: 2;
}

/* TEXTO */
.contacto-item span {
    display: block;
    margin-top: 12px;
    font-weight: 500;
}

/* HOVER */
.contacto-item:hover .circle {
    transform: scale(1.1);
    box-shadow:
        0 0 30px rgba(79,195,247,0.8),
        inset 0 0 20px rgba(255,255,255,0.3);
}

/* ANIMACIÓN SUAVE */
@keyframes flotar {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* CONTENEDOR DEL TÍTULO */
.titulo-contacto {
    position: relative;
    font-size: 56px;           /* 🔥 grande */
    font-weight: 800;
    letter-spacing: 1px;

    color: #ffffff;

    /* 🔥 glow principal */
    text-shadow:
        0 0 10px rgba(255,255,255,0.6),
        0 0 25px rgba(79,195,247,0.8),
        0 0 50px rgba(21,101,192,0.6);

    margin: 0;
}

/* ✨ REFLEJO (ESPEJO) */
.titulo-contacto::after {
    content: "Contáctanos";
    position: absolute;
    left: 0;
    top: 100%;

    width: 100%;

    transform: scaleY(-1);
    opacity: 0.25;

    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);

    /* 🔥 compatibilidad */
    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    filter: blur(2px);
}

/* FOOTER */
.footer {
    width: 100%;
    text-align: center;

    padding: 15px 10px;

    color: rgba(255,255,255,0.9);
    font-size: 13px;

    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);

    margin-top: 50px;
}