/*==================================================
                    CONTACT
==================================================*/

.contact{

    position:relative;

    overflow:hidden;

    background:#050505;

    padding-top:clamp(70px,8vw,120px);

}



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

.contact-container{

    position:relative;

    display:grid;

    grid-template-columns:

        minmax(0,58%)

        minmax(360px,42%);

    align-items:start;

    gap:0;

    min-height:clamp(560px,70vw,700px);

}



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

.contact-info{

    position:relative;

    padding:

        clamp(24px,4vw,40px)

        clamp(40px,7vw,90px)

        clamp(20px,3vw,30px)

        0;

}



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

.contact-info::before{

    content:"";

    position:absolute;

    inset:0;

    left:clamp(-120px,-8vw,-60px);

    right:clamp(-120px,-8vw,-60px);

    z-index:0;

    background-image:

        linear-gradient(

            90deg,

            rgba(5,5,5,1) 0%,

            rgba(5,5,5,.98) 18%,

            rgba(5,5,5,.93) 34%,

            rgba(5,5,5,.78) 48%,

            rgba(5,5,5,.50) 62%,

            rgba(5,5,5,.15) 78%,

            rgba(5,5,5,0) 100%

        ),

        url("../img/contacto.webp");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:92% center;

}



/*==================================================
                CONTENT
==================================================*/

.contact-info>*{

    position:relative;

    z-index:2;

}



/*==================================================
                SECTION TAG
==================================================*/

.contact-info .section-tag{

    display:inline-block;

    margin-bottom:clamp(8px,1vw,10px);

    color:var(--green);

    font-size:clamp(.82rem,.9vw,1rem);

    font-weight:700;

    letter-spacing:clamp(2px,.35vw,4px);

    text-transform:uppercase;

}



/*==================================================
                TITLE
==================================================*/

.contact-info h2{

    width:100%;

    margin-top:clamp(6px,1vw,8px);

    margin-bottom:clamp(12px,2vw,15px);

    color:#fff;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:700;

    line-height:1;

    text-wrap:balance;

}

.contact-info h2 span{

    color:var(--green);

}



/*==================================================
                DESCRIPTION
==================================================*/

.contact-info>p{

    width:min(470px,100%);

    margin-bottom:clamp(24px,3vw,35px);

    color:#d2d2d2;

    font-size:clamp(1rem,1.25vw,1.08rem);

    line-height:1.7;

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.contact img{

    max-width:100%;

    height:auto;

}

.contact-info>*{

    text-wrap:balance;

}


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

.contact-items{

    display:flex;

    flex-direction:column;

    width:min(460px,100%);

}



/*==================================================
                CONTACT ITEM
==================================================*/

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:clamp(14px,2vw,18px);

    padding:

        clamp(16px,2vw,18px)

        0;

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

    transition:

        transform .35s ease,

        border-color .35s ease;

}



.contact-item:last-child{

    border-bottom:none;

}



/*==================================================
                    ICON
==================================================*/

.contact-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    width:clamp(48px,5vw,56px);

    height:clamp(48px,5vw,56px);

    border-radius:50%;

    border:1px solid rgba(21,133,15,.45);

    color:var(--green);

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

}



.contact-icon svg{

    width:clamp(20px,2vw,24px);

    height:clamp(20px,2vw,24px);

}



/*==================================================
                HOVER
==================================================*/

.contact-item:hover{

    transform:translateX(4px);

}



.contact-item:hover .contact-icon{

    background:var(--green);

    color:#050505;

    transform:scale(1.06);

    box-shadow:

        0 0 18px rgba(21,133,15,.28);

}



/*==================================================
                CONTENT
==================================================*/

.contact-item-content{

    flex:1;

    min-width:0;

}



/*==================================================
                TITLE
==================================================*/

.contact-item h4{

    margin:0 0 clamp(4px,.8vw,6px);

    color:#fff;

    font-size:clamp(.95rem,1vw,1rem);

    font-weight:600;

    line-height:1.3;

}



/*==================================================
                TEXT
==================================================*/

.contact-item span{

    display:block;

    color:#cfcfcf;

    font-size:clamp(.88rem,.95vw,.93rem);

    line-height:1.7;

}



/*==================================================
                LINKS
==================================================*/

.contact-item a{

    color:inherit;

    text-decoration:none;

    transition:

        color .30s ease;

}



.contact-item a:hover{

    color:var(--green);

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.contact-item h4,
.contact-item span{

    text-wrap:balance;

}



.contact-item>*{

    position:relative;

    z-index:2;

}


/*==================================================
                CONTACT CARD
==================================================*/

.contact-card{

    position:relative;

    z-index:5;

    margin-top:clamp(-10px,-1vw,0);

    margin-left:clamp(-10px,-1vw,0);

    background:#111;

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

    border-radius:clamp(14px,1vw,16px);

    overflow:hidden;

    box-shadow:

        0 clamp(24px,4vw,35px)

        clamp(55px,8vw,90px)

        rgba(0,0,0,.45);

}



/*==================================================
                CARD HEADER
==================================================*/

.card-header{

    display:flex;

    align-items:center;

    gap:clamp(10px,1.5vw,14px);

    padding:

        clamp(24px,3vw,34px)

        clamp(22px,3vw,34px)

        clamp(18px,2vw,26px);

}



.card-header svg{

    width:clamp(24px,2vw,28px);

    height:clamp(24px,2vw,28px);

    color:var(--green);

}



.card-header h3{

    color:#fff;

    font-size:clamp(1.35rem,2vw,1.6rem);

    font-weight:600;

    line-height:1.25;

}



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

.contact-form{

    padding:

        clamp(8px,1vw,10px)

        clamp(22px,3vw,34px)

        clamp(22px,3vw,34px);

}



/*==================================================
                ROW
==================================================*/

.contact-row{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:clamp(14px,2vw,18px);

}



/*==================================================
                FIELD
==================================================*/

.field{

    display:flex;

    flex-direction:column;

    margin-bottom:clamp(16px,2vw,18px);

}



.field label{

    margin-bottom:clamp(8px,1vw,10px);

    color:#fff;

    font-size:clamp(.80rem,.9vw,.82rem);

    font-weight:500;

}



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

.field input,
.field select,
.field textarea{

    width:100%;

    padding:

        clamp(12px,1vw,15px)

        clamp(15px,2vw,18px);

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

    border-radius:6px;

    background:#151515;

    color:#fff;

    font-family:'Montserrat',sans-serif;

    font-size:clamp(.90rem,1vw,.95rem);

    transition:

        border-color .30s ease,

        box-shadow .30s ease,

        background .30s ease;

}



.field textarea{

    resize:none;

    min-height:clamp(120px,18vw,145px);

}



.field input::placeholder,
.field textarea::placeholder{

    color:#777;

}



.field input:focus,
.field textarea:focus,
.field select:focus{

    outline:none;

    border-color:var(--green);

    box-shadow:

        0 0 0 3px rgba(21,133,15,.12);

}



.field select{

    cursor:pointer;

    appearance:none;

}




/*==================================================
                HONEYPOT
==================================================*/

.honeypot{

    display:none;

}




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

.contact-form .btn-primary{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:clamp(10px,1.5vw,14px);

    margin-top:clamp(8px,1.5vw,12px);

    padding:clamp(15px,2vw,18px);

    border:none;

    cursor:pointer;

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.card-header h3,
.field label{

    text-wrap:balance;

}

.field input,
.field select,
.field textarea{

    box-sizing:border-box;

}




/*==================================================
                CONTACT FEATURES
==================================================*/

.contact-features{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(min(220px,100%),1fr));

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

}



/*==================================================
                FEATURE
==================================================*/

.contact-features>div{

    display:flex;

    align-items:center;

    gap:clamp(12px,1.8vw,14px);

    padding:

        clamp(18px,2.5vw,24px)

        clamp(18px,2vw,22px);

    transition:

        background .35s ease,

        transform .35s ease;

}



/*==================================================
                DIVISOR
==================================================*/

.contact-features>div:not(:last-child){

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

}



/*==================================================
                ICON
==================================================*/

.contact-features svg{

    width:clamp(22px,2vw,24px);

    height:clamp(22px,2vw,24px);

    color:var(--green);

    flex-shrink:0;

    transition:

        transform .35s ease,

        color .35s ease;

}



/*==================================================
                TEXT
==================================================*/

.contact-features span{

    display:block;

    color:#d0d0d0;

    font-size:clamp(.80rem,.9vw,.82rem);

    line-height:1.45;

}



.contact-features strong{

    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:clamp(.92rem,1vw,1rem);

    font-weight:600;

}



/*==================================================
                HOVER
==================================================*/

.contact-features>div:hover{

    background:rgba(21,133,15,.04);

}



.contact-features>div:hover svg{

    transform:scale(1.08);

}



/*==================================================
                BOTTOM LINE
==================================================*/

.contact-bottom-line{

    width:100%;

    height:2px;

    background:var(--green);

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.contact-features>*{

    position:relative;

}



.contact-features strong,
.contact-features span{

    text-wrap:balance;

}




/*==================================================
                    FOOTER
==================================================*/

.footer{

    background:#050505;

    padding:

        clamp(32px,5vw,38px)

        0

        clamp(36px,6vw,45px);

}



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

.footer .container{

    display:flex;

    flex-direction:column;

    align-items:center;

}



/*==================================================
                SOCIAL
==================================================*/

.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:clamp(16px,2vw,20px);

    margin-bottom:clamp(22px,3vw,28px);

}



/*==================================================
                SOCIAL LINK
==================================================*/

.footer-social a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:clamp(52px,5vw,60px);

    height:clamp(52px,5vw,60px);

    border-radius:10px;

    border:1px solid rgba(21,133,15,.35);

    color:var(--green);

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease,

        border-color .35s ease;

}



.footer-social a:hover{

    background:var(--green);

    color:#050505;

    transform:translateY(-3px);

}

/*==================================================
                ICON
==================================================*/

.footer-social i{

    font-size:clamp(24px,2vw,30px);

    line-height:1;

}



/*==================================================
                COPYRIGHT
==================================================*/

.footer p{

    color:#8f8f8f;

    text-align:center;

    font-size:clamp(.80rem,.9vw,.82rem);

    line-height:1.7;

}



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

@media (max-width:992px){

    .contact{

        padding-top:90px;

    }

    .contact-container{

        grid-template-columns:1fr;

        gap:clamp(40px,6vw,60px);

    }

    .contact-info{

        padding-right:0;

    }

    .contact-info::before{

        inset:-90px -40px 0 -40px;

    }

    .contact-card{

        margin:0;

    }

}



/*==================================================
            MOBILE
==================================================*/

@media (max-width:768px){

    .contact-row{

        grid-template-columns:1fr;

    }

    .contact-features{

        grid-template-columns:1fr;

    }

    .contact-features>div{

        border-right:none;

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

    }

    .contact-features>div:last-child{

        border-bottom:none;

    }

}



/*==================================================
            SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .contact-info::before{

        background-position:84% center;

    }

    .footer{

        text-align:center;

    }

}




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

.form-message{

    display:none;

    margin:0 0 20px;

    padding:18px 22px;

    border-radius:8px;

    font-size:.95rem;

    line-height:1.6;

    font-weight:500;

    animation:fadeMessage .35s ease;

}

/*==================================================
                SUCCESS
==================================================*/

.form-message.success{

    display:block;

    background:rgba(21,133,15,.12);

    border:1px solid rgba(21,133,15,.35);

    color:#9be79a;

}

/*==================================================
                ERROR
==================================================*/

.form-message.error{

    display:block;

    background:rgba(220,53,69,.10);

    border:1px solid rgba(220,53,69,.35);

    color:#ffb3b8;

}

/*==================================================
                ANIMATION
==================================================*/

@keyframes fadeMessage{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.btn-primary{

    position:relative;

}

.btn-primary:disabled{

    opacity:.85;

    cursor:not-allowed;

}

/*==================================================
                SPINNER
==================================================*/

.spinner{

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}