/*==============================================================================
CONTACTO
ANSIER 3.0 PREMIUM
==============================================================================*/

.contact{

    background:var(--background-light);

}

.contact__container{

    width:min(92%, var(--container));

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:64px;

    align-items:start;

}

/*==================================================
INFORMACIÓN
==================================================*/

.contact__subtitle{

    display:inline-block;

    color:var(--color-secondary);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:16px;

}

.contact__title{

    font-size:var(--fs-h2);

    line-height:1.2;

    color:var(--text-primary);

    margin-bottom:22px;

}

.contact__text{

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:40px;

    color:var(--text-secondary);

}

/*==================================================
ITEMS
==================================================*/

.contact__items{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact__item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:22px;

    background:var(--background);

    border-radius:var(--radius-md);

    border:1px solid var(--border);

    box-shadow:var(--shadow-xs);

    transition:var(--transition);
}

.contact__item:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow-md);

    border-color:transparent;

}

.contact__icon{

    flex-shrink:0;

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--gradient-secondary);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.3rem;

}

.contact__item h4{

    color:var(--text-primary);

    margin-bottom:4px;

    font-size:1.05rem;

}

.contact__item p{

    color:var(--text-secondary);

    font-size:.95rem;

}

/*==================================================
FORMULARIO
==================================================*/

.contact__form{

    background:var(--background);

    padding:44px;

    border-radius:var(--radius-xl);

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:9px;

    font-weight:600;

    font-size:.92rem;

    color:var(--text-primary);

}

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

    width:100%;

    padding:16px;

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    outline:none;

    font-size:1rem;

    color:var(--text-primary);

    transition:var(--transition);

    font-family:inherit;

    background:var(--background);

}

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

    color:var(--text-secondary);

    opacity:.7;

}

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

    border-color:var(--color-secondary);

    box-shadow:0 0 0 4px rgba(92,225,230,.15);

}

textarea{

    resize:vertical;

    min-height:140px;

}

.contact__button{

    width:100%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:17px;

    border:none;

    border-radius:var(--radius-pill);

    background:var(--gradient-secondary);

    color:#fff;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

    font-family:inherit;

}

.contact__button i{

    transition:var(--transition);

}

.contact__button:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

.contact__button:hover i{

    transform:translateX(4px);

}

.contact__button:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}

.contact__button.is-loading i{

    animation:cfSpin .8s linear infinite;

}

@keyframes cfSpin{

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
MENSAJE DE ESTADO
==================================================*/

.contact__form-status{

    margin-top:18px;

    padding:14px 18px;

    border-radius:var(--radius-sm);

    font-size:.92rem;

    font-weight:600;

    text-align:center;

    display:none;

}

.contact__form-status--success{

    display:block;

    background:rgba(120,214,172,.15);

    color:#1b7a4f;

    border:1px solid rgba(120,214,172,.35);

}

.contact__form-status--error{

    display:block;

    background:rgba(220,80,80,.1);

    color:#b23434;

    border:1px solid rgba(220,80,80,.3);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.contact__container{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact__title{

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

}

.contact__form{

    padding:30px;

}

}

@media(max-width:480px){

.contact__text{

    font-size:1rem;

}

.contact__item{

    flex-direction:column;

    text-align:center;

}

.contact__form{

    padding:24px;

}

}