/* ==================================================
   CONTACTO
================================================== */

.contact{

    padding:80px 0;

    background:#F8FAFC;
}

.honeypot{

    display:none;
}

/* ==================================================
   CONTACTO CONTAINER
================================================== */

.contact .container{

    max-width:1400px;
}

.contact-grid{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:56px;

    align-items:start;
}

/* ==================================================
   COLUMNA IZQUIERDA
================================================== */

.contact-info{

    padding-right:56px;

    border-right:1px solid #E5E7EB;
}

.contact-heading{

    margin-bottom:20px;

    color:var(--text);

    font-size:3rem;

    font-weight:800;

    line-height:1;
}

.contact-line{

    width:64px;

    height:5px;

    margin-bottom:32px;

    border-radius:999px;

    background:var(--primary);
}

.contact-title{

    margin-bottom:12px;

    color:var(--primary);

    font-size:1.3rem;
    
    max-width:none;

    font-weight:700;

    line-height:1.2;
}

.contact-description{

    margin-bottom:48px;

    color:var(--text);

    line-height:1.7;
}

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

.contact-items{

    display:flex;

    flex-direction:column;

    gap:32px;
}

.contact-item{

    display:flex;

    align-items:center;

    gap:20px;

    text-decoration:none;
}

.contact-icon{

    width:56px;

    height:56px;

    border-radius:16px;

    background:#EDF7F1;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.contact-icon img{

    width:32px;

    height:32px;

    object-fit:contain;
}

.contact-content h4{

    margin-bottom:6px;

    color:var(--text);

    font-size:1.25rem;

    font-weight:700;
}

.contact-content span{

    color:var(--primary);

    font-size:1.125rem;

    font-weight:600;
}

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

.contact-form-wrapper{

    margin-top:-12px;
        
    padding:40px;

    background:var(--white);

    border-radius:24px;

    box-shadow:0 10px 30px rgba(17,24,39,.06);
}

.form-title{

    margin-bottom:8px;

    color:var(--text);

    font-size:2rem;

    font-weight:800;
}

.form-subtitle{

    margin-bottom:20px;

    color:var(--text);
}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;
}

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

    width:100%;

    padding:18px 20px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    background:var(--white);

    color:var(--text);

    font-size:1rem;
}

.contact-form select{

    margin-bottom:20px;
}

.contact-form textarea{

    min-height:180px;

    resize:none;
}

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

    outline:none;

    border-color:var(--primary);
}

/* ==================================================
   BOTÓN
================================================== */

.btn-contact{

    width:100%;

    height:64px;

    margin-top:20px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:var(--white);

    font-size:1.1rem;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:.3s;
}

.btn-contact:hover{

    opacity:.95;
}

.btn-contact img{

    width:30px;

    height:30px;
}


.form-toast{

    position:fixed;

    right:30px;
    bottom:30px;

    width:340px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-left:4px solid #0F8A6C;

    border-radius:16px;

    padding:24px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.3s;
}

.form-toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.toast-close{

    position:absolute;

    top:12px;
    right:12px;

    background:none;

    border:none;

    cursor:pointer;

    font-size:20px;
}

.toast-icon{

    width:50px;
    height:50px;

    border-radius:50%;

    background:#EAF8F3;

    color:#0F8A6C;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    margin-bottom:12px;
}

.form-toast h4{

    margin-bottom:8px;
}

.form-toast p{

    font-size:14px;

    line-height:1.5;
}