@charset "utf-8";

/*==================================================
CONTACTO MCTIRE
PREMIUM AUTOMOTRIZ
==================================================*/


/*==================================================
SECCIÓN PRINCIPAL
==================================================*/

.contact
{
    position:relative;

    width:100%;

    margin:0;

    padding:
    8px 0 12px;

    overflow:hidden;

    background:
    linear-gradient(
        145deg,
        #090909 0%,
        #111111 50%,
        #080808 100%
    );

    isolation:isolate;
}


/*==================================================
BRILLO SUPERIOR
MUCHO MÁS LIVIANO
==================================================*/

.contact::before
{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:150px;
    height:2px;

    transform:
    translateX(-50%);

    background:
    linear-gradient(
        90deg,
        transparent,
        #d71920,
        transparent
    );

    opacity:.9;

    pointer-events:none;
}


/*==================================================
DECORACIÓN
==================================================*/

.contact-bg
{
    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:
    radial-gradient(
        circle at 50% 0%,
        rgba(255,255,255,.035),
        transparent 38%
    );
}


/*==================================================
REJILLA
MÁS SIMPLE Y LIVIANA
==================================================*/

.contact-grid
{
    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.16;

    background-size:70px 70px;

    background-image:
    linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
    );

    mask-image:
    linear-gradient(
        to bottom,
        #000,
        transparent 75%
    );

    -webkit-mask-image:
    linear-gradient(
        to bottom,
        #000,
        transparent 75%
    );
}


/*==================================================
BRILLOS
SIN BLUR PESADO
==================================================*/

.contact-glow
{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

    opacity:.7;

    will-change:transform;
}


.contact-glow-1
{
    width:300px;
    height:300px;

    top:-180px;
    left:-160px;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.12),
        transparent 70%
    );
}


.contact-glow-2
{
    width:280px;
    height:280px;

    right:-160px;
    bottom:-160px;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.08),
        transparent 70%
    );
}


/*==================================================
CONTENEDOR
==================================================*/

.contact .container
{
    position:relative;

    z-index:5;

    width:100%;

    max-width:1180px;

    margin:0 auto;

    padding:
    0 15px;
}


/*==================================================
ENCABEZADO
==================================================*/

.contact-header
{
    position:relative;

    max-width:850px;

    margin:
    0 auto 32px;

    text-align:center;
}


/*==================================================
LÍNEA
==================================================*/

.contact-header::after
{
    content:"";

    display:block;

    width:65px;
    height:2px;

    margin:
    18px auto 0;

    background:
    linear-gradient(
        90deg,
        transparent,
        #d71920,
        transparent
    );
}


/*==================================================
BADGE
==================================================*/

.contact-badge
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin:
    0 0 12px;

    padding:
    7px 14px;

    border:
    1px solid rgba(215,25,32,.30);

    border-radius:999px;

    background:
    rgba(215,25,32,.065);

    color:#ef343b;

    font-size:.62rem;

    font-weight:800;

    letter-spacing:1.6px;

    text-transform:uppercase;
}


.contact-badge i
{
    font-size:.7rem;
}


/*==================================================
TÍTULO
==================================================*/

.contact-header h1
{
    margin:0;

    color:#fff;

    font-size:
    clamp(
        1.85rem,
        4vw,
        3.15rem
    );

    font-weight:850;

    line-height:1.08;

    letter-spacing:-1.5px;
}


/*==================================================
SUBTÍTULO
==================================================*/

.contact-header h2
{
    max-width:680px;

    margin:
    12px auto 0;

    color:
    rgba(255,255,255,.62);

    font-size:.85rem;

    font-weight:400;

    line-height:1.65;
}


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

.contact-wrapper
{
    display:grid;

    grid-template-columns:
    390px
    minmax(0,1fr);

    gap:30px;

    align-items:start;
}


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

.contact-info
{
    display:flex;

    flex-direction:column;

    gap:14px;
}


/*==================================================
TARJETA PRINCIPAL
==================================================*/

.contact-card
{
    position:relative;

    padding:25px;

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

    border-radius:20px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.018)
    );

    box-shadow:
    0 15px 35px rgba(0,0,0,.25);

    overflow:hidden;
}


/*==================================================
BORDE ROJO
==================================================*/

.contact-card::before
{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
    linear-gradient(
        90deg,
        #d71920,
        rgba(215,25,32,.15),
        transparent
    );
}


/*==================================================
BRILLO CARD
==================================================*/

.contact-card::after
{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    right:-100px;
    top:-100px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.08),
        transparent 70%
    );

    pointer-events:none;
}


/*==================================================
BADGE CARD
==================================================*/

.contact-card-badge
{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-bottom:14px;

    padding:
    6px 11px;

    border:
    1px solid rgba(215,25,32,.22);

    border-radius:7px;

    color:#e52b31;

    background:
    rgba(215,25,32,.06);

    font-size:.57rem;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;
}


/*==================================================
TÍTULO CARD
==================================================*/

.contact-card h3
{
    margin:
    0 0 10px;

    color:#fff;

    font-size:1.45rem;

    font-weight:800;

    line-height:1.2;

    letter-spacing:-.4px;
}


/*==================================================
TEXTO CARD
==================================================*/

.contact-card p
{
    margin:0;

    color:
    rgba(255,255,255,.58);

    font-size:.76rem;

    line-height:1.7;
}


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

.contact-items
{
    display:flex;

    flex-direction:column;

    gap:10px;
}


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

.contact-item
{
    position:relative;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

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

    border-radius:16px;

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

    overflow:hidden;

    transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}


/*==================================================
LÍNEA LATERAL
==================================================*/

.contact-item::before
{
    content:"";

    position:absolute;

    left:0;
    top:15%;

    width:2px;
    height:70%;

    background:#d71920;

    transform:
    scaleY(0);

    transition:
    transform .25s ease;
}


.contact-item:hover
{
    transform:
    translateX(4px);

    border-color:
    rgba(215,25,32,.25);

    background:
    rgba(215,25,32,.055);
}


.contact-item:hover::before
{
    transform:
    scaleY(1);
}


/*==================================================
ICONO
==================================================*/

.contact-item-icon
{
    flex:
    0 0 48px;

    width:48px;
    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    1px solid rgba(215,25,32,.18);

    border-radius:13px;

    color:#e52b31;

    background:
    rgba(215,25,32,.07);

    font-size:1rem;

    transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}


.contact-item:hover .contact-item-icon
{
    transform:
    scale(1.06);

    color:#fff;

    background:#d71920;
}


/*==================================================
CONTENIDO ITEM
==================================================*/

.contact-item-content
{
    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;
}


.contact-item-content span
{
    color:
    rgba(255,255,255,.38);

    font-size:.52rem;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;
}


.contact-item-content strong
{
    color:#fff;

    font-size:.82rem;

    font-weight:700;

    line-height:1.4;

    word-break:break-word;
}


.contact-item-content p
{
    margin:0;

    color:
    rgba(255,255,255,.50);

    font-size:.67rem;

    line-height:1.5;
}


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

.contact-whatsapp
{
    border-color:
    rgba(37,211,102,.17);

    background:
    rgba(37,211,102,.035);
}


.contact-whatsapp::before
{
    background:#25d366;
}


.contact-whatsapp:hover
{
    border-color:
    rgba(37,211,102,.32);

    background:
    rgba(37,211,102,.055);
}


.contact-whatsapp .contact-item-icon
{
    color:#25d366;

    border-color:
    rgba(37,211,102,.18);

    background:
    rgba(37,211,102,.07);
}


.contact-whatsapp:hover .contact-item-icon
{
    color:#fff;

    background:#25d366;
}


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

.btn-contact-whatsapp
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    width:max-content;

    margin-top:7px;

    padding:
    10px 16px;

    border:
    1px solid rgba(37,211,102,.22);

    border-radius:9px;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #25d366,
        #159447
    );

    text-decoration:none;

    font-size:.65rem;

    font-weight:800;

    transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.btn-contact-whatsapp:hover
{
    color:#fff;

    transform:
    translateY(-2px);

    box-shadow:
    0 10px 22px rgba(37,211,102,.20);
}


/*==================================================
BENEFICIOS
==================================================*/

.contact-benefits
{
    display:grid;

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

    gap:9px;
}


.benefit-item
{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:55px;

    padding:10px;

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

    border-radius:12px;

    color:
    rgba(255,255,255,.68);

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

    font-size:.63rem;

    font-weight:700;

    line-height:1.4;

    text-align:center;

    transition:
    transform .25s ease,
    border-color .25s ease;
}


.benefit-item i
{
    color:#d71920;

    font-size:.7rem;
}


.benefit-item:hover
{
    transform:
    translateY(-2px);

    color:#fff;

    border-color:
    rgba(215,25,32,.22);
}


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

.contact-form-card
{
    position:relative;

    padding:30px;

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

    border-radius:22px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.018)
    );

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

    overflow:hidden;
}


/*==================================================
BORDE SUPERIOR
==================================================*/

.contact-form-card::before
{
    content:"";

    position:absolute;

    top:0;
    left:8%;

    width:84%;
    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(215,25,32,.75),
        transparent
    );
}


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

.contact-form-card::after
{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-160px;
    top:-160px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.07),
        transparent 70%
    );

    pointer-events:none;
}


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

.contact-form-header
{
    position:relative;

    z-index:2;

    margin-bottom:22px;
}


.contact-form-badge
{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-bottom:10px;

    color:#e52b31;

    font-size:.58rem;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;
}


.contact-form-header h3
{
    margin:
    0 0 8px;

    color:#fff;

    font-size:
    clamp(
        1.35rem,
        2.4vw,
        1.85rem
    );

    font-weight:850;

    line-height:1.15;

    letter-spacing:-.6px;
}


.contact-form-header p
{
    max-width:620px;

    margin:0;

    color:
    rgba(255,255,255,.52);

    font-size:.72rem;

    line-height:1.65;
}


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

.contact-form
{
    position:relative;

    z-index:2;
}


/*==================================================
FILAS
==================================================*/

.contact-row
{
    display:grid;

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

    gap:14px;
}


.contact-row:first-child
{
    grid-template-columns:1fr;
}


/*==================================================
GRUPOS
==================================================*/

.contact-group
{
    display:flex;

    flex-direction:column;

    margin-bottom:13px;
}


.contact-group label
{
    margin:
    0 0 6px;

    color:
    rgba(255,255,255,.72);

    font-size:.63rem;

    font-weight:700;
}


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

.contact-group input,
.contact-group textarea
{
    width:100%;

    padding:
    12px 14px;

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

    border-radius:10px;

    outline:none;

    background:
    rgba(0,0,0,.20);

    color:#fff;

    font-family:inherit;

    font-size:.72rem;

    transition:
    border-color .2s ease,
    background .2s ease;
}


.contact-group textarea
{
    min-height:135px;

    resize:vertical;
}


.contact-group input::placeholder,
.contact-group textarea::placeholder
{
    color:
    rgba(255,255,255,.28);
}


.contact-group input:focus,
.contact-group textarea:focus
{
    border-color:
    rgba(215,25,32,.55);

    background:
    rgba(215,25,32,.025);

    box-shadow:
    0 0 0 3px rgba(215,25,32,.06);
}


/*==================================================
RESPUESTA
==================================================*/

.contact-response
{
    margin:
    5px 0 16px;
}


.response-success,
.response-warning,
.response-error
{
    padding:
    12px 15px;

    border-radius:10px;

    color:#fff;

    font-size:.68rem;

    line-height:1.5;
}


.response-success
{
    background:
    rgba(39,174,96,.10);

    border:
    1px solid rgba(39,174,96,.25);
}


.response-warning
{
    background:
    rgba(243,156,18,.10);

    border:
    1px solid rgba(243,156,18,.25);
}


.response-error
{
    background:
    rgba(231,76,60,.10);

    border:
    1px solid rgba(231,76,60,.25);
}


/*==================================================
RECAPTCHA
==================================================*/

.contact-captcha
{
    display:flex;

    align-items:center;

    justify-content:center;

    min-height:75px;

    margin-bottom:17px;
}


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

.btn-contact
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:54px;

    padding:0 20px;

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

    border-radius:11px;

    overflow:hidden;

    cursor:pointer;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #d71920,
        #bd1118,
        #930b10
    );

    font-family:inherit;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.5px;

    box-shadow:
    0 10px 24px rgba(215,25,32,.18);

    transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.btn-contact::before
{
    content:"";

    position:absolute;

    top:0;
    left:-130%;

    width:70%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform:
    skewX(-20deg);

    transition:
    left .65s ease;
}


.btn-contact:hover
{
    transform:
    translateY(-2px);

    box-shadow:
    0 15px 30px rgba(215,25,32,.24);
}


.btn-contact:hover::before
{
    left:160%;
}


.btn-contact:active
{
    transform:
    translateY(-1px);
}


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

.btn-text,
.btn-loading
{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;
}


.btn-loading
{
    display:none;
}


.btn-contact.loading
{
    pointer-events:none;

    opacity:.9;
}


.btn-contact.loading .btn-text
{
    display:none;
}


.btn-contact.loading .btn-loading
{
    display:flex;
}


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

.loading-spinner
{
    width:19px;
    height:19px;

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

    border-top-color:#fff;

    border-radius:50%;

    animation:
    contactSpinner .7s linear infinite;
}


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

.contact-footer
{
    display:flex;

    align-items:center;

    gap:14px;

    margin-top:18px;

    padding:14px;

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

    border-radius:13px;

    background:
    rgba(255,255,255,.018);
}


.contact-footer-icon
{
    flex:
    0 0 42px;

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    1px solid rgba(215,25,32,.18);

    border-radius:11px;

    color:#d71920;

    background:
    rgba(215,25,32,.055);

    font-size:.9rem;
}


.contact-footer p
{
    margin:0;

    color:
    rgba(255,255,255,.46);

    font-size:.64rem;

    line-height:1.6;
}


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

@keyframes contactSpinner
{
    to
    {
        transform:
        rotate(360deg);
    }
}


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

@media(max-width:1050px)
{
    .contact
    {
        padding:
        8px 0 12px;
    }


    .contact-wrapper
    {
        grid-template-columns:
        340px
        minmax(0,1fr);

        gap:22px;
    }


    .contact-form-card
    {
        padding:26px;
    }
}


/*==================================================
TABLET PEQUEÑA
==================================================*/

@media(max-width:850px)
{
    .contact
    {
        padding:
        6px 0 10px;
    }


    .contact-wrapper
    {
        grid-template-columns:1fr;

        gap:18px;
    }


    .contact-info
    {
        order:2;
    }


    .contact-form-card
    {
        order:1;
    }


    .contact-header
    {
        margin-bottom:28px;
    }
}


/*==================================================
MÓVIL
==================================================*/

@media(max-width:576px)
{
    .contact
    {
        padding:
        4px 0 8px;
    }


    .contact .container
    {
        padding:
        0 12px;
    }


    .contact-header
    {
        margin-bottom:24px;
    }


    .contact-header h1
    {
        font-size:
        clamp(
            1.7rem,
            8vw,
            2.2rem
        );

        letter-spacing:-.8px;
    }


    .contact-header h2
    {
        font-size:.72rem;

        line-height:1.6;
    }


    .contact-badge
    {
        font-size:.55rem;

        padding:
        6px 10px;
    }


    .contact-wrapper
    {
        gap:14px;
    }


    .contact-card,
    .contact-form-card
    {
        padding:19px;

        border-radius:18px;
    }


    .contact-form-header
    {
        margin-bottom:19px;
    }


    .contact-form-header h3
    {
        font-size:1.35rem;
    }


    .contact-row
    {
        grid-template-columns:1fr;

        gap:0;
    }


    .contact-item
    {
        padding:13px;

        gap:11px;
    }


    .contact-item-icon
    {
        flex:
        0 0 43px;

        width:43px;
        height:43px;

        border-radius:11px;

        font-size:.9rem;
    }


    .contact-item-content strong
    {
        font-size:.76rem;
    }


    .contact-item-content p
    {
        font-size:.63rem;
    }


    .contact-benefits
    {
        grid-template-columns:
        1fr 1fr;
    }


    .benefit-item
    {
        min-height:50px;

        padding:8px;

        font-size:.58rem;
    }


    .contact-group input,
    .contact-group textarea
    {
        padding:
        11px 12px;

        font-size:.68rem;
    }


    .contact-group textarea
    {
        min-height:120px;
    }


    .btn-contact
    {
        height:52px;
    }


    .contact-footer
    {
        align-items:flex-start;

        padding:12px;
    }
}


/*==================================================
MÓVIL PEQUEÑO
==================================================*/

@media(max-width:380px)
{
    .contact
    {
        padding:
        3px 0 7px;
    }


    .contact .container
    {
        padding:
        0 10px;
    }


    .contact-header
    {
        margin-bottom:20px;
    }


    .contact-header h1
    {
        font-size:1.65rem;
    }


    .contact-card,
    .contact-form-card
    {
        padding:16px;
    }


    .contact-benefits
    {
        grid-template-columns:1fr;
    }


    .benefit-item
    {
        min-height:46px;
    }
}


/*==================================================
REDUCIR MOVIMIENTO
==================================================*/

@media(prefers-reduced-motion:reduce)
{
    .contact-item,
    .contact-item-icon,
    .benefit-item,
    .btn-contact,
    .btn-contact-whatsapp
    {
        transition:none;
    }

    .loading-spinner
    {
        animation:none;
    }
}


/*==================================================
DISPOSITIVOS TÁCTILES
EVITA EFECTOS HOVER INNECESARIOS
==================================================*/

@media(hover:none)
{
    .contact-item:hover
    {
        transform:none;

        border-color:
        rgba(255,255,255,.065);

        background:
        rgba(255,255,255,.025);
    }


    .contact-item:hover::before
    {
        transform:scaleY(0);
    }


    .contact-item:hover .contact-item-icon
    {
        transform:none;

        color:#e52b31;

        background:
        rgba(215,25,32,.07);
    }


    .benefit-item:hover
    {
        transform:none;

        color:
        rgba(255,255,255,.68);

        border-color:
        rgba(255,255,255,.055);
    }
}