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


/*==================================
        HERO
==================================*/

.contact-hero{

    min-height:62vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 78% 45%,
            rgba(217,4,41,.12),
            transparent 38%
        ),

        #090909;

}


.contact-hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-220px;

    border:1px solid rgba(217,4,41,.12);

    border-radius:50%;

    box-shadow:

        0 0 0 70px rgba(217,4,41,.025),

        0 0 0 140px rgba(217,4,41,.018);

}


.contact-hero-content{

    position:relative;

    z-index:2;

    max-width:780px;

    padding-top:80px;

}


.contact-hero .hero-label{

    display:inline-block;

    color:#d90429;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:18px;

    opacity:0;

    animation:contactFadeUp .8s ease forwards;

}


.contact-hero h1{

    margin:0;

    color:#e9e9e9;

    font-size:60px;

    line-height:1.08;

    font-weight:500;

    letter-spacing:-1.5px;

    opacity:0;

    animation:contactFadeUp .9s ease .15s forwards;

}


.contact-hero h1 strong{

    color:#d90429;

    font-weight:700;

}


.contact-hero .hero-description{

    max-width:650px;

    margin:28px 0 0;

    color:#999;

    font-size:17px;

    line-height:1.8;

    opacity:0;

    animation:contactFadeUp .9s ease .3s forwards;

}


/*==================================
        INFORMACIÓN + FORMULARIO
==================================*/

.contact-section{

    padding:110px 0;

    background:#090909;

}


.contact-info{

    padding-right:30px;

}


.contact-info h2{

    max-width:500px;

    margin:15px 0 45px;

    font-size:42px;

    line-height:1.15;

    font-weight:700;

}


.section-label{

    color:#d90429;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

}


.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:30px;

}


.contact-icon{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(217,4,41,.1);

    color:#d90429;

    font-size:17px;

}


.contact-item span{

    display:block;

    margin-bottom:6px;

    color:#777;

    font-size:12px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}


.contact-item p{

    margin:0;

    color:#d2d2d2;

    font-size:15px;

    line-height:1.7;

}


.contact-item a{

    color:#d2d2d2;

    font-size:15px;

    text-decoration:none;

    transition:.3s;

}


.contact-item a:hover{

    color:#d90429;

}


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

.contact-form-wrapper{

    padding:45px;

    background:#181818;

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

    border-radius:20px;

}


.contact-form-wrapper h2{

    margin:15px 0 10px;

    font-size:34px;

    font-weight:700;

}


.contact-form-wrapper > p{

    margin-bottom:30px;

    color:#999;

    line-height:1.7;

}


.contact-form .form-label{

    margin-bottom:8px;

    color:#d5d5d5;

    font-size:13px;

    font-weight:500;

}


.contact-form .form-control{

    min-height:52px;

    padding:13px 16px;

    color:#eee;

    background:#101010;

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

    border-radius:10px;

    box-shadow:none;

    transition:.3s;

}


.contact-form textarea.form-control{

    min-height:135px;

    resize:vertical;

}


.contact-form .form-control::placeholder{

    color:#666;

}


.contact-form .form-control:focus{

    color:#fff;

    background:#101010;

    border-color:#d90429;

    box-shadow:0 0 0 3px rgba(217,4,41,.1);

}


.contact-form select.form-control{

    appearance:auto;

    cursor:pointer;

}


.contact-form select.form-control option{

    color:#111;

    background:#fff;

}


/*==================================
        CONSENTIMIENTO
==================================*/

.form-consent{

    margin-top:3px;

}


.consent-label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#888;

    font-size:12px;

    line-height:1.6;

    cursor:pointer;

}


.consent-label input{

    flex-shrink:0;

    width:16px;

    height:16px;

    margin-top:2px;

    accent-color:#d90429;

    cursor:pointer;

}


.consent-label a{

    color:#d90429;

    text-decoration:none;

}


.consent-label a:hover{

    text-decoration:underline;

}


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

.contact-submit{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:52px;

    border:0;

    cursor:pointer;

}


.contact-submit i{

    transition:.3s;

}


.contact-submit:hover i{

    transform:translateX(4px);

}


.contact-form-message{

    display:none;

    margin-top:15px;

    padding:12px 15px;

    border-radius:8px;

    font-size:13px;

}


.contact-form-message.success{

    display:block;

    color:#8ee0a8;

    background:rgba(52,211,118,.08);

    border:1px solid rgba(52,211,118,.15);

}


.contact-form-message.error{

    display:block;

    color:#ff8a9b;

    background:rgba(217,4,41,.08);

    border:1px solid rgba(217,4,41,.15);

}
/*==================================
        MAPA
==================================*/

.contact-map-section{

    padding:110px 0;

    background:#111;

}


.contact-map-section .section-title{

    max-width:700px;

    margin:0 auto 45px;

    text-align:center;

}


.contact-map-section .section-title span{

    color:#d90429;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}


.contact-map-section .section-title h2{

    margin:12px 0 15px;

    font-size:42px;

    font-weight:700;

}


.contact-map-section .section-title p{

    margin:0;

    color:#999;

    line-height:1.8;

}


.contact-map{

    position:relative;

    width:100%;

    height:450px;

    overflow:hidden;

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

    border-radius:20px;

}


.contact-map iframe{

    display:block;

    width:100%;

    height:100%;

    border:0;

    filter:grayscale(.15);

}


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

.contact-cta{

    padding:100px 0;

    background:

        linear-gradient(

            135deg,

            #111,

            #1a1a1a

        );

}


.contact-cta-content{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}


.contact-cta-content > span{

    color:#d90429;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

}


.contact-cta-content h2{

    margin:15px 0;

    font-size:42px;

    font-weight:700;

}


.contact-cta-content p{

    margin-bottom:32px;

    color:#aaa;

    line-height:1.8;

}


.contact-cta-content .btn-red{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


/*==================================
        ANIMACIÓN
==================================*/

@keyframes contactFadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:991px){

    .contact-hero{

        min-height:60vh;

    }


    .contact-hero h1{

        font-size:48px;

    }


    .contact-section,
    .contact-map-section{

        padding:80px 0;

    }


    .contact-cta{

        padding:80px 0;

    }


    .contact-info{

        padding-right:0;

    }

}


@media(max-width:767px){

    .contact-hero{

        min-height:65vh;

    }


    .contact-hero-content{

        padding-top:60px;

    }


    .contact-hero h1{

        font-size:38px;

    }


    .contact-hero .hero-description{

        font-size:15px;

    }


    .contact-section{

        padding:70px 0;

    }


    .contact-info h2{

        margin-bottom:35px;

        font-size:32px;

    }


    .contact-form-wrapper{

        padding:28px 22px;

    }


    .contact-form-wrapper h2{

        font-size:28px;

    }


    .contact-map-section{

        padding:70px 0;

    }


    .contact-map-section .section-title h2{

        font-size:32px;

    }


    .contact-map{

        height:380px;

        border-radius:15px;

    }


    .contact-cta{

        padding:70px 0;

    }


    .contact-cta-content h2{

        font-size:32px;

    }

}


@media(max-width:480px){

    .contact-hero h1{

        font-size:32px;

    }


    .contact-hero .hero-label{

        font-size:11px;

        letter-spacing:3px;

    }


    .contact-form-wrapper{

        padding:25px 18px;

    }


    .contact-map{

        height:320px;

    }

}


/*==================================
        ACCESIBILIDAD
==================================*/

@media(prefers-reduced-motion:reduce){

    .contact-hero .hero-label,
    .contact-hero h1,
    .contact-hero .hero-description{

        animation:none;

        opacity:1;

    }

}