@charset "utf-8";

/*==================================================
NAVEGACIÓN MCTIRE
==================================================*/

.mctire-navigation
{
    position:relative;

    width:100%;

    padding:10px 0 25px;

    background:
    radial-gradient(
        circle at 8% 20%,
        rgba(227,6,19,.055),
        transparent 30%
    ),
    radial-gradient(
        circle at 92% 75%,
        rgba(227,6,19,.035),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        #f8f9fa 0%,
        #f4f5f7 48%,
        #fafafa 100%
    );

    overflow:hidden;

    isolation:isolate;
}


/*==================================================
EFECTO AMBIENTAL DEL FONDO
==================================================*/

.mctire-navigation::before
{
    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-300px;

    right:-210px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(227,6,19,.09) 0%,
        rgba(227,6,19,.035) 35%,
        transparent 72%
    );

    filter:blur(3px);

    pointer-events:none;

    z-index:0;

    animation:
    navigationGlow 12s ease-in-out infinite;
}


/*==================================================
SEGUNDO EFECTO
==================================================*/

.mctire-navigation::after
{
    content:"";

    position:absolute;

    width:380px;

    height:380px;

    left:-230px;

    bottom:-270px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(227,6,19,.065) 0%,
        rgba(227,6,19,.025) 38%,
        transparent 72%
    );

    filter:blur(2px);

    pointer-events:none;

    z-index:0;

    animation:
    navigationGlowReverse 15s ease-in-out infinite;
}


/*==================================================
TEXTURA SUTIL DEL FONDO
==================================================*/

.mctire-navigation .container::before
{
    content:"";

    position:absolute;

    inset:-100px;

    z-index:-1;

    pointer-events:none;

    opacity:.28;

    background:
    repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 48px,
        rgba(0,0,0,.018) 49px,
        transparent 50px
    );
}


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

.mctire-navigation .container
{
    position:relative;

    z-index:2;

    width:100%;

    max-width:1250px;

    margin:0 auto;

    padding:0 30px;
}


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

.mctire-navigation-heading
{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:35px;

    padding-bottom:24px;

    border-bottom:
    1px solid rgba(223,227,232,.9);
}


.mctire-navigation-heading span
{
    display:block;

    margin-bottom:8px;

    color:#777f89;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:1.8px;

    text-transform:uppercase;
}


.mctire-navigation-heading h2
{
    margin:0;

    color:#161a1f;

    font-size:
    clamp(1.5rem,2.5vw,2.1rem);

    font-weight:700;

    letter-spacing:-.6px;
}


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

.mctire-navigation-links
{
    display:grid;

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

    border-top:
    1px solid rgba(223,227,232,.9);
}


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

.mctire-navigation-link
{
    position:relative;

    display:grid;

    grid-template-columns:
    42px 1fr 28px;

    align-items:center;

    gap:16px;

    min-height:100px;

    padding:24px 25px;

    color:#171b20;

    text-decoration:none;

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

    border-right:
    1px solid rgba(223,227,232,.9);

    transition:
    background .35s ease,
    color .35s ease,
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;

    overflow:hidden;

    animation:
    mctireFloat 6s ease-in-out infinite;

    will-change:transform;
}


.mctire-navigation-link:first-child
{
    border-left:
    1px solid rgba(223,227,232,.9);
}


.mctire-navigation-link:nth-child(1)
{
    animation-delay:0s;
}


.mctire-navigation-link:nth-child(2)
{
    animation-delay:-1.5s;
}


.mctire-navigation-link:nth-child(3)
{
    animation-delay:-3s;
}


.mctire-navigation-link:nth-child(4)
{
    animation-delay:-4.5s;
}


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

.mctire-navigation-link::after
{
    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:55%;

    height:100%;

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

    transform:
    skewX(-20deg);

    opacity:0;

    pointer-events:none;

    animation:
    mctireShine 8s ease-in-out infinite;
}


.mctire-navigation-link:nth-child(1)::after
{
    animation-delay:1s;
}


.mctire-navigation-link:nth-child(2)::after
{
    animation-delay:3s;
}


.mctire-navigation-link:nth-child(3)::after
{
    animation-delay:5s;
}


.mctire-navigation-link:nth-child(4)::after
{
    animation-delay:7s;
}


/*==================================================
NÚMERO
==================================================*/

.mctire-navigation-number
{
    color:#9aa1a9;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:1px;

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

    animation:
    mctireNumber 5s ease-in-out infinite;
}


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

.mctire-navigation-title
{
    position:relative;

    color:#252a30;

    font-size:.96rem;

    font-weight:650;

    line-height:1.35;

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


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

.mctire-navigation-link i
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    color:#8a9199;

    font-size:.72rem;

    border:
    1px solid #d8dde2;

    border-radius:50%;

    transition:
    color .35s ease,
    background .35s ease,
    border-color .35s ease,
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;

    animation:
    mctireIcon 5s ease-in-out infinite;
}


.mctire-navigation-link:nth-child(2) i
{
    animation-delay:-1.2s;
}


.mctire-navigation-link:nth-child(3) i
{
    animation-delay:-2.4s;
}


.mctire-navigation-link:nth-child(4) i
{
    animation-delay:-3.6s;
}


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

.mctire-navigation-link::before
{
    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:
    linear-gradient(
        90deg,
        #e30613,
        #ff4b55
    );

    transform:
    scaleX(.08);

    transform-origin:left;

    opacity:.25;

    animation:
    mctireLine 4.5s ease-in-out infinite;
}


.mctire-navigation-link:nth-child(1)::before
{
    animation-delay:0s;
}


.mctire-navigation-link:nth-child(2)::before
{
    animation-delay:1.1s;
}


.mctire-navigation-link:nth-child(3)::before
{
    animation-delay:2.2s;
}


.mctire-navigation-link:nth-child(4)::before
{
    animation-delay:3.3s;
}


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

.mctire-navigation-link:hover
{
    color:#fff;

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

    transform:
    translateY(-5px);

    z-index:2;

    box-shadow:
    0 18px 40px rgba(20,25,30,.10);
}


.mctire-navigation-link:hover::after
{
    left:150%;

    opacity:1;

    animation:none;

    transition:
    left .8s ease;
}


.mctire-navigation-link:hover::before
{
    transform:
    scaleX(1);

    opacity:1;

    animation:none;
}


/*==================================================
NÚMERO HOVER
==================================================*/

.mctire-navigation-link:hover
.mctire-navigation-number
{
    color:#e30613;

    transform:
    translateX(4px);
}


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

.mctire-navigation-link:hover
.mctire-navigation-title
{
    color:#e30613;

    transform:
    translateX(4px);
}


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

.mctire-navigation-link:hover i
{
    color:#fff;

    background:#e30613;

    border-color:#e30613;

    transform:
    rotate(45deg)
    scale(1.05);

    box-shadow:
    0 8px 18px rgba(227,6,19,.22);
}


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

@keyframes mctireFloat
{
    0%,
    100%
    {
        transform:
        translate3d(0,0,0);
    }

    50%
    {
        transform:
        translate3d(0,-3px,0);
    }
}


/*==================================================
ANIMACIÓN LÍNEA
==================================================*/

@keyframes mctireLine
{
    0%
    {
        transform:
        scaleX(.08);

        opacity:.18;
    }

    35%
    {
        transform:
        scaleX(.45);

        opacity:.60;
    }

    65%
    {
        transform:
        scaleX(.18);

        opacity:.30;
    }

    100%
    {
        transform:
        scaleX(.08);

        opacity:.18;
    }
}


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

@keyframes mctireShine
{
    0%,
    55%
    {
        left:-100%;

        opacity:0;
    }

    60%
    {
        opacity:.45;
    }

    70%
    {
        left:150%;

        opacity:0;
    }

    100%
    {
        left:150%;

        opacity:0;
    }
}


/*==================================================
ANIMACIÓN NÚMERO
==================================================*/

@keyframes mctireNumber
{
    0%,
    100%
    {
        opacity:.75;
    }

    50%
    {
        opacity:1;
    }
}


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

@keyframes mctireIcon
{
    0%,
    100%
    {
        transform:
        translateY(0);
    }

    50%
    {
        transform:
        translateY(-2px);
    }
}


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

@keyframes navigationGlow
{
    0%,
    100%
    {
        transform:
        translate3d(0,0,0)
        scale(1);
    }

    50%
    {
        transform:
        translate3d(-25px,20px,0)
        scale(1.04);
    }
}


@keyframes navigationGlowReverse
{
    0%,
    100%
    {
        transform:
        translate3d(0,0,0)
        scale(1);
    }

    50%
    {
        transform:
        translate3d(25px,-15px,0)
        scale(1.05);
    }
}


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

@media(max-width:1050px)
{
    .mctire-navigation-links
    {
        grid-template-columns:
        repeat(2,1fr);
    }


    .mctire-navigation-link
    {
        border-bottom:
        1px solid #dfe3e8;
    }


    .mctire-navigation-link:nth-child(3)
    {
        border-left:
        1px solid #dfe3e8;
    }
}


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

@media(max-width:700px)
{
    .mctire-navigation
    {
        padding:
        8px 0 14px;
    }


    .mctire-navigation .container
    {
        padding:
        0 14px;
    }


    .mctire-navigation-heading
    {
        display:block;

        margin-bottom:18px;

        padding-bottom:14px;
    }


    .mctire-navigation-heading span
    {
        margin-bottom:5px;

        font-size:.62rem;
    }


    .mctire-navigation-heading h2
    {
        font-size:1.35rem;
    }


    .mctire-navigation-links
    {
        grid-template-columns:1fr;
    }


    .mctire-navigation-link
    {
        min-height:70px;

        padding:
        15px 15px;

        grid-template-columns:
        32px 1fr 28px;

        gap:12px;

        border-left:
        1px solid #dfe3e8;

        border-right:
        1px solid #dfe3e8;
    }


    .mctire-navigation-number
    {
        font-size:.62rem;
    }


    .mctire-navigation-title
    {
        font-size:.88rem;
    }
}


/*==================================================
MOBILE PEQUEÑO
==================================================*/

@media(max-width:480px)
{
    .mctire-navigation
    {
        padding:
        6px 0 10px;
    }


    .mctire-navigation .container
    {
        padding:
        0 12px;
    }


    .mctire-navigation-heading
    {
        margin-bottom:14px;

        padding-bottom:11px;
    }


    .mctire-navigation-heading h2
    {
        font-size:1.25rem;
    }


    .mctire-navigation-link
    {
        min-height:64px;

        grid-template-columns:
        28px 1fr 26px;

        gap:10px;

        padding:
        11px 12px;
    }


    .mctire-navigation-title
    {
        font-size:.84rem;

        line-height:1.3;
    }


    .mctire-navigation-link i
    {
        width:26px;

        height:26px;

        font-size:.65rem;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .mctire-navigation::before,
    .mctire-navigation::after,

    .mctire-navigation-link,
    .mctire-navigation-link::before,
    .mctire-navigation-link::after,
    .mctire-navigation-link i,
    .mctire-navigation-number
    {
        animation:none;

        will-change:auto;
    }
}