/*=========================================
WHATSAPP CTA
=========================================*/

.glass-whatsapp{

    position:relative;
    overflow:hidden;

    padding:120px 20px;

    text-align:center;

    background:
    radial-gradient(circle at 15% 20%,rgba(72,182,255,.08),transparent 35%),
    radial-gradient(circle at 85% 10%,rgba(138,92,255,.12),transparent 40%),
    var(--bg);

}

.glass-whatsapp::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(130deg,
    transparent,
    rgba(255,255,255,.03),
    transparent);

    pointer-events:none;

}

.wa-content{

    max-width:850px;
    margin:auto;

    position:relative;
    z-index:2;

}

/* Badge */

.wa-badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:100px;

    background:rgba(72,182,255,.12);

    border:1px solid rgba(72,182,255,.25);

    color:#8fd6ff;

    font-weight:600;

    margin-bottom:25px;

    backdrop-filter:blur(15px);

}

/* Título */

.wa-title{

    color:#fff;

    font-size:clamp(2.2rem,5vw,4rem);

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

}

.wa-title span{

    background:linear-gradient(135deg,#48b6ff,#8a5cff);

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

}

/* Texto */

.wa-text{

    color:var(--text2);

    font-size:1.1rem;

    line-height:1.9;

    max-width:720px;

    margin:0 auto 45px;

}

/* Botón */

.wa-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 34px;

    border-radius:100px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    font-size:1.05rem;

    background:
    linear-gradient(135deg,#25D366,#128C7E);

    box-shadow:
    0 18px 40px rgba(37,211,102,.30);

    transition:.35s;

}

.wa-btn i{

    font-size:1.5rem;

}

.wa-btn:hover{

    transform:translateY(-6px);

    gap:20px;

    box-shadow:
    0 25px 55px rgba(37,211,102,.45),
    0 0 30px rgba(37,211,102,.35);

}

/*==========================
ANIMACIONES
==========================*/

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:1s cubic-bezier(.2,.8,.2,1);

}

.reveal.active{

    opacity:1;

    transform:none;

}

.wa-title{

    animation:titleFloat 5s ease-in-out infinite;

}

@keyframes titleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* Responsive */

@media(max-width:768px){

    .glass-whatsapp{

        padding:90px 22px;

    }

    .wa-btn{

        width:100%;
        justify-content:center;

    }

}