@charset "utf-8";

/*==================================================
CATEGORÍAS DE LLANTAS
MCTIRE
==================================================*/

.tire-categories
{
    position:relative;

    padding:5px 0;

    background:#fff;

    overflow:hidden;
}


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

.categories-heading
{
    max-width:760px;

    margin:0 auto 32px;

    text-align:center;
}


.categories-heading .section-label
{
    display:inline-block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.7rem;

    font-weight:800;

    letter-spacing:1.6px;

    text-transform:uppercase;
}


.categories-heading h2
{
    margin:0;

    color:#151515;

    font-size:
    clamp(1.8rem,3vw,2.5rem);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-.7px;
}


.categories-heading p
{
    max-width:680px;

    margin:12px auto 0;

    color:#666;

    font-size:.9rem;

    line-height:1.55;
}


/*==================================================
GRID
==================================================*/

.categories-grid
{
    display:grid;

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

    gap:18px;

    width:100%;
}


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

.category-card
{
    position:relative;

    display:flex;

    align-items:flex-end;

    min-height:410px;

    overflow:hidden;

    border-radius:18px;

    background:#e9e9e9;

    text-decoration:none;

    isolation:isolate;

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

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


/*==================================================
IMAGEN
==================================================*/

.category-image
{
    position:absolute;

    inset:0;

    z-index:-3;

    overflow:hidden;

    background:#e5e5e5;
}


.category-image img
{
    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    transform .6s cubic-bezier(.2,.7,.2,1),
    filter .4s ease;
}


/*==================================================
DEGRADADO SOBRE IMAGEN
==================================================*/

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

    position:absolute;

    inset:0;

    z-index:-2;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.00) 20%,
        rgba(0,0,0,.04) 35%,
        rgba(0,0,0,.28) 55%,
        rgba(0,0,0,.82) 100%
    );

    pointer-events:none;
}


/*==================================================
DETALLE ROJO INFERIOR
==================================================*/

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

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:
    linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent
    );

    transform:scaleX(0);

    transform-origin:center;

    transition:
    transform .35s ease;

    z-index:4;
}


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

.category-content
{
    position:relative;

    z-index:3;

    width:100%;

    margin:0;

    padding:35px 22px 21px;

    color:#fff;

    background:
    linear-gradient(
        180deg,
        rgba(10,10,10,0) 0%,
        rgba(10,10,10,.25) 18%,
        rgba(10,10,10,.72) 55%,
        rgba(10,10,10,.94) 100%
    );

    transition:
    padding .35s ease,
    background .35s ease;
}


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

.category-number
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:34px;

    height:21px;

    margin-bottom:8px;

    padding:0 8px;

    color:#fff;

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

    border-radius:50px;

    font-size:.6rem;

    font-weight:900;

    letter-spacing:1px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.20);
}


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

.category-content h3
{
    margin:0;

    color:#fff;

    font-size:1.17rem;

    line-height:1.18;

    font-weight:800;

    letter-spacing:-.2px;

    text-shadow:
    0 2px 8px rgba(0,0,0,.45);
}


/*==================================================
DESCRIPCIÓN
==================================================*/

.category-content p
{
    max-width:330px;

    margin:8px 0 0;

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

    font-size:.75rem;

    line-height:1.5;

    text-shadow:
    0 1px 5px rgba(0,0,0,.45);
}


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

.category-link
{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:14px;

    color:#fff;

    font-size:.65rem;

    font-weight:800;

    letter-spacing:.6px;

    text-transform:uppercase;

    text-shadow:
    0 2px 6px rgba(0,0,0,.5);
}


.category-link i
{
    color:var(--primary);

    transition:
    transform .3s ease;
}


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

.category-card:hover
{
    color:#fff;

    transform:translateY(-6px);

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


.category-card:hover .category-image img
{
    transform:scale(1.06);

    filter:
    brightness(.92);
}


.category-card:hover::after
{
    transform:scaleX(1);
}


.category-card:hover .category-content
{
    padding-bottom:25px;

    background:
    linear-gradient(
        180deg,
        rgba(10,10,10,0) 0%,
        rgba(10,10,10,.28) 15%,
        rgba(10,10,10,.76) 55%,
        rgba(10,10,10,.96) 100%
    );
}


.category-card:hover .category-link i
{
    transform:translateX(5px);
}


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

.categories-action
{
    display:flex;

    justify-content:center;

    margin-top:28px;
}


.categories-button
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:46px;

    padding:
    0 23px;

    color:#fff;

    background:#171717;

    border-radius:50px;

    font-size:.74rem;

    font-weight:800;

    text-decoration:none;

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

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


.categories-button i
{
    transition:
    transform .3s ease;
}


.categories-button:hover
{
    color:#fff;

    background:var(--primary);

    transform:translateY(-3px);

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


.categories-button:hover i
{
    transform:translateX(4px);
}


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

@media(max-width:1050px)
{
    .categories-grid
    {
        grid-template-columns:
        repeat(2,minmax(0,1fr));

        gap:16px;
    }


    .category-card
    {
        min-height:390px;
    }


    .category-content
    {
        padding:
        58px 20px 19px;
    }
}


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

@media(max-width:576px)
{
    .categories-heading
    {
        margin-bottom:22px;
    }


    .categories-heading .section-label
    {
        margin-bottom:6px;

        font-size:.61rem;

        letter-spacing:1.25px;
    }


    .categories-heading h2
    {
        font-size:
        clamp(1.6rem,7vw,1.95rem);

        line-height:1.08;
    }


    .categories-heading p
    {
        margin-top:8px;

        padding:
        0 7px;

        font-size:.75rem;

        line-height:1.45;
    }


    /*==================================================
    GRID
    ==================================================*/

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

        gap:10px;
    }


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

    .category-card
    {
        min-height:295px;

        border-radius:13px;

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


    /*==================================================
    IMAGEN
    ==================================================*/

    .category-image img
    {
        transition:none;
    }


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

    .category-content
    {
        padding:
        50px 12px 13px;

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


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

    .category-number
    {
        min-width:28px;

        height:18px;

        margin-bottom:6px;

        padding:0 6px;

        font-size:.52rem;
    }


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

    .category-content h3
    {
        font-size:.86rem;

        line-height:1.14;
    }


    /*==================================================
    DESCRIPCIÓN
    ==================================================*/

    .category-content p
    {
        margin-top:6px;

        font-size:.62rem;

        line-height:1.38;
    }


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

    .category-link
    {
        gap:6px;

        margin-top:9px;

        font-size:.54rem;
    }


    .category-link i
    {
        font-size:.58rem;
    }


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

    .category-card:hover
    {
        transform:none;

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


    .category-card:hover .category-image img
    {
        transform:none;

        filter:none;
    }


    .category-card:hover::after
    {
        transform:scaleX(0);
    }


    .category-card:hover .category-content
    {
        padding-bottom:13px;

        background:
        linear-gradient(
            180deg,
            rgba(10,10,10,0) 0%,
            rgba(10,10,10,.25) 18%,
            rgba(10,10,10,.72) 55%,
            rgba(10,10,10,.94) 100%
        );
    }


    .category-card:hover .category-link i
    {
        transform:none;
    }


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

    .categories-action
    {
        margin-top:20px;
    }


    .categories-button
    {
        min-height:42px;

        padding:
        0 18px;

        gap:8px;

        font-size:.65rem;
    }
}


/*==================================================
MÓVILES PEQUEÑOS
==================================================*/

@media(max-width:380px)
{
    .categories-heading
    {
        margin-bottom:18px;
    }


    .categories-heading .section-label
    {
        font-size:.57rem;

        margin-bottom:5px;
    }


    .categories-heading h2
    {
        font-size:1.5rem;
    }


    .categories-heading p
    {
        margin-top:7px;

        font-size:.69rem;

        line-height:1.4;
    }


    .categories-grid
    {
        gap:8px;
    }


    .category-card
    {
        min-height:265px;

        border-radius:11px;
    }


    .category-content
    {
        padding:
        44px 10px 11px;
    }


    .category-number
    {
        min-width:26px;

        height:17px;

        margin-bottom:5px;

        font-size:.49rem;
    }


    .category-content h3
    {
        font-size:.77rem;

        line-height:1.12;
    }


    .category-content p
    {
        margin-top:5px;

        font-size:.57rem;

        line-height:1.33;
    }


    .category-link
    {
        margin-top:8px;

        font-size:.5rem;
    }


    .categories-action
    {
        margin-top:17px;
    }


    .categories-button
    {
        min-height:39px;

        padding:
        0 16px;

        font-size:.59rem;
    }
}


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

.category-card:focus-visible,
.categories-button:focus-visible
{
    outline:
    2px solid var(--primary);

    outline-offset:
    3px;
}


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

@media(prefers-reduced-motion:reduce)
{
    .category-card,
    .category-image img,
    .category-content,
    .category-link i,
    .categories-button
    {
        transition:none;
    }
}