/*==================================================
CONTACT FORM - GLASS PREMIUM
==================================================*/

.glass-contact{

    position:relative;
    overflow:hidden;

    padding:90px 22px;

    background:
    radial-gradient(circle at 10% 20%,rgba(72,182,255,.10),transparent 35%),
    radial-gradient(circle at 90% 90%,rgba(138,92,255,.12),transparent 35%),
    #06080d;

}

/*==================================================
BACKGROUND
==================================================*/

.glass-contact-bg{

    position:absolute;
    inset:0;
    pointer-events:none;

}

.glass-contact-bg::before,
.glass-contact-bg::after{

    content:"";

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.glass-contact-bg::before{

    width:320px;
    height:320px;

    background:#48b6ff;

    opacity:.15;

    top:-100px;
    left:-80px;

}

.glass-contact-bg::after{

    width:280px;
    height:280px;

    background:#8a5cff;

    opacity:.15;

    bottom:-80px;
    right:-60px;

}

/*==================================================
LAYOUT
==================================================*/

.glass-contact-container{

    position:relative;
    z-index:2;

    max-width:1200px;

    margin:auto;

    display:grid;

    gap:40px;

}

/*==================================================
INFO
==================================================*/

.contact-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    margin-bottom:20px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(15px);

    color:#fff;

    font-size:.85rem;

    font-weight:600;

}

.glass-contact-info h2{

    color:#fff;

    font-size:clamp(2rem,6vw,3.3rem);

    line-height:1.15;

    margin-bottom:20px;

}

.glass-contact-info h2 span{

    background:linear-gradient(90deg,#4dc2ff,#9770ff);

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

}

.glass-contact-info p{

    color:#c9d2de;

    line-height:1.8;

    margin-bottom:35px;

}

.contact-features{

    display:grid;

    gap:16px;

}

.contact-features div{

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

    padding:16px 18px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

}

.contact-features i{

    color:#58c2ff;

    font-size:1.2rem;

}

/*==================================================
FORM
==================================================*/

.glass-form{

    position:relative;

    padding:28px;

    border-radius:28px;

    background:linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03));

    backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.10);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);

}

.glass-form::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.05),
    transparent);

    transform:translateX(-120%);

    transition:1s;

}

.glass-form:hover::before{

    transform:translateX(120%);

}

/*==================================================
INPUTS
==================================================*/

.input-group{

    margin-bottom:20px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    color:#fff;

    font-size:.92rem;

    font-weight:600;

}

.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:1rem;

    outline:none;

    transition:.35s;

}

.input-group textarea{

    resize:vertical;

    min-height:130px;

}

.input-group input::placeholder,
.input-group textarea::placeholder{

    color:#aeb9ca;

}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    border-color:#4ec1ff;

    box-shadow:
    0 0 0 4px rgba(72,182,255,.12);

    background:rgba(255,255,255,.07);

}

/*==================================================
SELECT
==================================================*/

.input-group select{

    appearance:none;

    cursor:pointer;

}

.input-group option{

    background:#111722;

    color:#fff;

}

/*==================================================
BUTTON
==================================================*/

.whatsapp-button{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    padding:18px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:#fff;

    font-size:1.05rem;

    font-weight:700;

    background:linear-gradient(
    135deg,
    #25D366,
    #1fa851);

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

    transition:.35s;

}

.whatsapp-button i{

    font-size:1.5rem;

}

.whatsapp-button:hover{

    transform:translateY(-5px);

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

}

.whatsapp-button:active{

    transform:scale(.98);

}

/*==================================================
TABLET
==================================================*/

@media(min-width:768px){

    .glass-contact{

        padding:120px 40px;

    }

    .glass-contact-container{

        grid-template-columns:1fr 1fr;

        align-items:center;

        gap:60px;

    }

    .glass-form{

        padding:40px;

    }

}

/*==================================================
DESKTOP
==================================================*/

@media(min-width:1200px){

    .glass-contact-info{

        padding-right:50px;

    }

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.contact-badge{

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

}

.glass-form{

    animation:floating 8s ease-in-out infinite;

}