@charset "utf-8";

/*==================================================
HEADER.CSS
MCTIRE
VERSIÓN ESTABLE + PREMIUM
==================================================*/


/*==================================================
VARIABLES DE APOYO
==================================================*/

:root
{
    --header-red:#d71920;
    --header-red-hover:#b5121b;
    --header-dark:#202020;
    --header-dark-2:#2b2b2b;
    --header-dark-3:#35393f;
    --header-text:#ffffff;
}


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

.header
{
    position:relative;

    width:100%;

    background:
    linear-gradient(
        180deg,
        #50545a 0%,
        #35393f 18%,
        #2b2b2b 55%,
        #202020 100%
    );

    z-index:10000;

    border-bottom:3px solid var(--header-red);

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


/*==================================================
BRILLO HEADER
==================================================*/

.header::before
{
    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top,
        rgba(255,255,255,.14),
        transparent 45%
    ),

    linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.035) 50%,
        transparent 100%
    );

    pointer-events:none;
}


/*==================================================
TEXTURA
==================================================*/

.header::after
{
    content:"";

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.018) 0,
        rgba(255,255,255,.018) 2px,
        transparent 2px,
        transparent 9px
    );

    opacity:.45;

    pointer-events:none;
}


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

.header-container
{
    min-height:135px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

    z-index:2;
}


/*==================================================
LOGO
==================================================*/

.logo
{
    display:flex;

    align-items:center;

    flex-shrink:0;

    position:relative;
}


.logo img
{
    height:125px;

    width:auto;

    max-width:240px;

    object-fit:contain;

    display:block;

    transition:
        transform .45s ease,
        filter .45s ease;
}


.logo:hover img
{
    transform:scale(1.04);

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,255,255,.20)
        )

        drop-shadow(
            0 0 16px
            rgba(215,25,32,.30)
        );
}


/*==================================================
NAV
==================================================*/

.nav
{
    margin-left:auto;
}


/*==================================================
MENU
==================================================*/

.nav-menu
{
    display:flex;

    align-items:center;

    gap:2.3rem;
}


.nav-menu li
{
    position:relative;
}


/*==================================================
ENLACES
==================================================*/

.nav-menu a
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.2px;

    text-transform:uppercase;

    padding:1rem 0;

    transition:
        color .35s ease,
        transform .35s ease;
}


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

.nav-menu a::after
{
    content:"";

    position:absolute;

    left:0;

    bottom:5px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--header-red);

    transition:
        width .35s ease;
}


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

.nav-menu a::before
{
    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:0;

    height:0;

    border-radius:50%;

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

    transform:
        translate(-50%,-50%);

    transition:
        width .35s ease,
        height .35s ease;

    pointer-events:none;
}


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

.nav-menu a:hover
{
    color:#ffffff;

    transform:
        translateY(-2px);
}


.nav-menu a:hover::after
{
    width:100%;
}


.nav-menu a:hover::before
{
    width:42px;

    height:42px;
}


/*==================================================
ACTIVO
==================================================*/

.nav-menu .active a,
.nav-menu li.active a
{
    color:#ffffff;
}


.nav-menu .active a::after,
.nav-menu li.active a::after
{
    width:100%;
}


/*==================================================
ICONOS MENU
==================================================*/

.nav-menu a i
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    margin-right:10px;

    flex-shrink:0;

    border-radius:50%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );

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

    color:var(--header-red);

    font-size:.95rem;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}


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

.nav-menu a:hover i
{
    color:#ffffff;

    background:
        linear-gradient(
            180deg,
            var(--header-red),
            var(--header-red-hover)
        );

    transform:
        rotate(-10deg)
        scale(1.12);

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


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

.nav-menu li.active a i
{
    color:#ffffff;

    background:
        linear-gradient(
            180deg,
            var(--header-red),
            var(--header-red-hover)
        );

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


/*==================================================
ACCIONES HEADER
==================================================*/

.header-actions
{
    margin-left:2rem;

    flex-shrink:0;

    display:flex;

    align-items:center;
}


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

.header-btn
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:145px;

    min-height:46px;

    padding:0 17px;

    color:#ffffff;

    background:
        linear-gradient(
            118deg,
            #d71920 0%,
            #c51c29 45%,
            #a91627 50%,
            #0a0a0a 51%,
            #050505 100%
        );

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.4px;

    text-decoration:none;

    white-space:nowrap;

    overflow:hidden;

    clip-path:
        polygon(
            10px 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            10px 100%,
            0 calc(100% - 10px),
            0 10px
        );

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.18);

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


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

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

    position:absolute;

    top:-30%;

    left:-55%;

    width:45%;

    height:160%;

    background:
        linear-gradient(
            105deg,
            transparent 15%,
            rgba(255,255,255,.03) 35%,
            rgba(255,255,255,.42) 50%,
            rgba(255,255,255,.04) 65%,
            transparent 85%
        );

    transform:skewX(-18deg);

    pointer-events:none;

    z-index:1;

    animation:
        headerButtonShine
        7s ease-in-out infinite;
}


@keyframes headerButtonShine
{
    0%,
    58%
    {
        left:-55%;
    }

    72%,
    100%
    {
        left:145%;
    }
}


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

.header-btn:hover
{
    color:#ffffff;

    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.28);

    filter:
        drop-shadow(
            0 8px 16px
            rgba(110,8,22,.25)
        );
}


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

.header-btn span
{
    position:relative;

    z-index:5;
}


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

.header-btn-icon
{
    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    width:27px;

    height:27px;

    flex-shrink:0;

    border-radius:50%;

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

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

    font-size:.82rem;

    transition:
        transform .6s ease,
        background .35s ease,
        box-shadow .35s ease;
}


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

.header-btn:hover .header-btn-icon
{
    transform:
        rotate(180deg)
        scale(1.08);

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

    box-shadow:
        0 0 0 2px
        rgba(255,255,255,.06),

        0 0 15px
        rgba(255,255,255,.15);
}


/*==================================================
FONT AWESOME
==================================================*/

.header-btn-icon::before
{
    font-family:
        "Font Awesome 6 Free" !important;

    font-weight:
        900 !important;
}


/*==================================================
MENU TOGGLE
==================================================*/

.menu-toggle
{
    display:none;

    width:46px;

    height:46px;

    padding:0;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

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

    border-radius:50%;

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

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.18);

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    outline:none;

    color:#ffffff;

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}


/*==================================================
LÍNEAS TOGGLE
==================================================*/

.menu-toggle span
{
    display:block;

    width:25px;

    height:2px;

    flex-shrink:0;

    border-radius:20px;

    background:#ffffff;

    transition:
        transform .35s ease,
        opacity .25s ease,
        width .3s ease,
        background .3s ease;
}


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

.menu-toggle:hover
{
    background:
        rgba(215,25,32,.12);

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

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

    transform:
        rotate(90deg);
}


.menu-toggle:hover span
{
    background:
        var(--header-red);
}


.menu-toggle:hover span:nth-child(2)
{
    width:18px;
}


/*==================================================
TOGGLE ACTIVE
==================================================*/

.menu-toggle.active
{
    background:
        rgba(215,25,32,.10);

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

    transform:none;

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


.menu-toggle.active span
{
    background:#ffffff;
}


.menu-toggle.active span:nth-child(1)
{
    transform:
        translateY(8px)
        rotate(45deg);
}


.menu-toggle.active span:nth-child(2)
{
    opacity:0;

    transform:scale(0);
}


.menu-toggle.active span:nth-child(3)
{
    transform:
        translateY(-8px)
        rotate(-45deg);
}


/*==================================================
BOTÓN CERRAR SOBRE MENU
==================================================*/

@media(max-width:992px)
{
    .menu-toggle.active
    {
        position:fixed;

        top:18px;

        right:20px;

        z-index:10002;

        display:flex;

        width:46px;

        height:46px;

        background:
            var(--header-dark);

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


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

@media(max-width:992px)
{
    .header-container
    {
        min-height:92px;

        padding:
            0 18px;
    }


    /*----------------------------------------------
    LOGO
    ----------------------------------------------*/

    .logo img
    {
        height:92px;

        max-width:190px;
    }


    /*----------------------------------------------
    NAV MOBILE
    ----------------------------------------------*/

    .nav
    {
        position:fixed;

        top:0;

        right:-350px;

        width:320px;

        height:100vh;

        padding:
            100px 1.5rem 2rem;

        background:
            linear-gradient(
                180deg,
                #292929 0%,
                #171717 100%
            );

        border-left:
            3px solid
            var(--header-red);

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

        overflow-y:auto;

        z-index:9999;

        transition:
            right .45s
            cubic-bezier(.23,1,.32,1);
    }


    .nav.active
    {
        right:0;
    }


    /*----------------------------------------------
    MENU
    ----------------------------------------------*/

    .nav-menu
    {
        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:.6rem;

        width:100%;
    }


    .nav-menu li
    {
        width:100%;
    }


    /*----------------------------------------------
    LINKS MOBILE
    ----------------------------------------------*/

    .nav-menu a
    {
        width:100%;

        color:#ffffff;

        font-size:1rem;

        font-weight:700;

        text-transform:uppercase;

        letter-spacing:.5px;

        padding:
            1rem 1.2rem;

        border-radius:10px;

        justify-content:flex-start;

        transition:
            background .35s ease,
            color .35s ease,
            padding-left .35s ease;
    }


    /*----------------------------------------------
    QUITAR EFECTO CENTRAL MOBILE
    ----------------------------------------------*/

    .nav-menu a::before
    {
        display:none;
    }


    /*----------------------------------------------
    LÍNEA MOBILE
    ----------------------------------------------*/

    .nav-menu a::after
    {
        left:0;

        bottom:0;

        transform:none;

        width:0;

        height:3px;

        border-radius:30px;
    }


    /*----------------------------------------------
    HOVER MOBILE
    ----------------------------------------------*/

    .nav-menu a:hover
    {
        background:
            rgba(255,255,255,.055);

        color:#ffffff;

        padding-left:1.7rem;

        transform:none;
    }


    .nav-menu a:hover::after
    {
        width:100%;
    }


    /*----------------------------------------------
    ICONOS MOBILE
    ----------------------------------------------*/

    .nav-menu a i
    {
        width:34px;

        height:34px;

        margin-right:12px;

        font-size:.9rem;

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

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

        color:
            var(--header-red);
    }


    .nav-menu a:hover i
    {
        color:#ffffff;

        background:
            linear-gradient(
                180deg,
                var(--header-red),
                var(--header-red-hover)
            );

        transform:
            rotate(-8deg)
            scale(1.08);
    }


    /*----------------------------------------------
    ACTIVO MOBILE
    ----------------------------------------------*/

    .nav-menu li.active a
    {
        background:
            linear-gradient(
                90deg,
                rgba(215,25,32,.20),
                transparent
            );

        border-left:
            4px solid
            var(--header-red);

        color:#ffffff;
    }


    .nav-menu li.active a i
    {
        color:#ffffff;

        background:
            linear-gradient(
                180deg,
                var(--header-red),
                var(--header-red-hover)
            );
    }


    /*----------------------------------------------
    HEADER ACTION
    ----------------------------------------------*/

    .header-actions
    {
        display:block;

        margin-left:auto;

        margin-right:14px;
    }


    .header-btn
    {
        min-width:125px;

        min-height:42px;

        padding:
            0 13px;

        font-size:.76rem;
    }


    .header-btn-icon
    {
        width:24px;

        height:24px;

        font-size:.74rem;
    }


    /*----------------------------------------------
    TOGGLE
    ----------------------------------------------*/

    .menu-toggle
    {
        display:flex;

        flex-shrink:0;

        z-index:10000;
    }
}


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

@media(max-width:576px)
{
    .header-container
    {
        min-height:110px;

        height:110px;

        padding:
            0 .75rem 0 .85rem;

        gap:.35rem;
    }


    /*----------------------------------------------
    LOGO
    ----------------------------------------------*/

    .logo
    {
        flex:
            1 1 auto;

        min-width:0;

        display:flex;

        align-items:center;

        justify-content:flex-start;
    }


    .logo img
    {
        height:118px;

        width:auto;

        max-width:none;

        object-fit:contain;

        display:block;
    }


    /*----------------------------------------------
    ACTION
    ----------------------------------------------*/

    .header-actions
    {
        flex:
            0 0 auto;

        margin:
            0 .35rem 0 0;
    }


    /*----------------------------------------------
    BOTÓN
    ----------------------------------------------*/

    .header-btn
    {
        min-width:108px;

        min-height:40px;

        height:40px;

        padding:
            0 11px;

        gap:6px;

        font-size:.70rem;

        letter-spacing:.2px;
    }


    .header-btn-icon
    {
        width:22px;

        height:22px;

        font-size:.70rem;
    }


    /*----------------------------------------------
    TOGGLE
    ----------------------------------------------*/

    .menu-toggle
    {
        width:43px;

        height:43px;

        min-width:43px;

        min-height:43px;

        margin:0;

        gap:5px;
    }


    .menu-toggle span
    {
        width:23px;

        height:2px;
    }


    /*----------------------------------------------
    NAV
    ----------------------------------------------*/

    .nav
    {
        width:100%;

        right:-100%;

        border-left:none;

        padding:
            85px 18px 25px;
    }


    .nav-menu
    {
        gap:.45rem;
    }


    .nav-menu a
    {
        font-size:.95rem;

        padding:
            .85rem 1rem;
    }
}


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

@media(max-width:400px)
{
    .header-container
    {
        min-height:96px;

        height:96px;

        padding:
            0 .55rem;

        gap:.2rem;
    }


    .logo img
    {
        height:105px;

        max-width:145px;
    }


    .header-actions
    {
        margin-right:.2rem;
    }


    .header-btn
    {
        min-width:96px;

        min-height:38px;

        height:38px;

        padding:
            0 9px;

        gap:5px;

        font-size:.66rem;
    }


    .header-btn-icon
    {
        width:20px;

        height:20px;

        font-size:.65rem;
    }


    .menu-toggle
    {
        width:41px;

        height:41px;

        min-width:41px;

        min-height:41px;
    }


    .menu-toggle span
    {
        width:22px;
    }
}


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

@media(max-width:360px)
{
    .header-container
    {
        padding:
            0 7px;
    }


    .logo img
    {
        height:98px;

        max-width:130px;
    }


    .header-btn
    {
        min-width:88px;

        padding:
            0 7px;

        font-size:.60rem;
    }


    .header-btn-icon
    {
        width:19px;

        height:19px;

        font-size:.60rem;
    }


    .menu-toggle
    {
        width:39px;

        height:39px;

        min-width:39px;

        min-height:39px;
    }


    .menu-toggle span
    {
        width:20px;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .logo img,
    .header-btn,
    .header-btn-icon,
    .nav,
    .nav-menu a,
    .nav-menu a i,
    .menu-toggle,
    .menu-toggle span
    {
        animation:none !important;

        transition:none !important;
    }
}