@charset "utf-8";

/*==================================================
NUESTRAS MARCAS - MCTIRE
==================================================*/

.brands-section
{
    position:relative;

    width:100%;

    margin:0;

    padding:
    18px 0 35px;

    background:
    #ffffff;

    overflow:hidden;

    isolation:isolate;

    scroll-margin-top:20px;
}


/*==================================================
FONDO DECORATIVO SUPERIOR
==================================================*/

.brands-section::before
{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    top:-300px;
    right:-170px;

    border-radius:50%;

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

    pointer-events:none;

    z-index:-1;
}


/*==================================================
FONDO DECORATIVO INFERIOR
==================================================*/

.brands-section::after
{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-250px;
    bottom:-250px;

    border-radius:50%;

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

    box-shadow:
    0 0 0 25px rgba(215,25,32,.018),
    0 0 0 55px rgba(215,25,32,.012),
    0 0 0 90px rgba(215,25,32,.008);

    pointer-events:none;

    z-index:-1;
}


/*==================================================
CONTENEDOR
EL PADDING GENERAL LO MANEJA EL SISTEMA GLOBAL
==================================================*/

.brands-section .container
{
    position:relative;

    z-index:2;

    width:100%;
}


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

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

    margin:
    0 auto 35px;

    text-align:center;
}


/*==================================================
KICKER
==================================================*/

.brands-kicker
{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:10px;

    color:
    var(--primary);

    font-size:.59rem;

    font-weight:800;

    letter-spacing:2px;

    line-height:1;

    text-transform:uppercase;
}


.brands-kicker-line
{
    width:24px;

    height:1px;

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


.brands-kicker-line:last-child
{
    background:
    linear-gradient(
        90deg,
        var(--primary),
        transparent
    );
}


.brands-kicker i
{
    font-size:.65rem;

    animation:
    brandsBadgePulse 3s ease-in-out infinite;
}


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

.brands-heading h1
{
    margin:0;

    padding:0;

    color:#161616;

    font-size:
    clamp(
        1.8rem,
        3.4vw,
        2.65rem
    );

    font-weight:850;

    line-height:1.08;

    letter-spacing:-1.2px;
}


.brands-heading h1 span
{
    color:
    var(--primary);
}


/*==================================================
LÍNEA DEL TÍTULO
==================================================*/

.brands-heading h1::after
{
    content:"";

    display:block;

    width:46px;

    height:3px;

    margin:
    13px auto 0;

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        #8d0c13,
        var(--primary),
        #ff5353
    );

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


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

.brands-heading p
{
    max-width:650px;

    margin:
    14px auto 0;

    padding:0;

    color:#707070;

    font-size:.76rem;

    line-height:1.7;

    text-align:center;
}


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

.brands-grid
{
    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(205px,1fr)
    );

    gap:18px;

    width:100%;

    max-width:1120px;

    margin:
    0 auto;
}


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

.brand-card
{
    position:relative;

    min-width:0;

    height:285px;

    border-radius:18px;

    background:
    #ffffff;

    border:
    1px solid #e8e8e8;

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

    overflow:hidden;

    cursor:pointer;

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


/*==================================================
BORDE PREMIUM
==================================================*/

.brand-card-border
{
    position:absolute;

    inset:0;

    border-radius:18px;

    padding:1px;

    background:
    linear-gradient(
        135deg,
        transparent 25%,
        rgba(215,25,32,.75),
        transparent 55%
    );

    opacity:0;

    transition:
    opacity .45s ease;

    pointer-events:none;

    z-index:5;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    mask-composite:exclude;
}


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

.brand-card:hover
{
    transform:
    translateY(-7px);

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

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


.brand-card:hover .brand-card-border
{
    opacity:1;

    animation:
    brandBorderMove 2.8s linear infinite;
}


/*==================================================
FRENTE
==================================================*/

.brand-card-front
{
    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:
    25px 22px;

    background:
    radial-gradient(
        circle at 50% 45%,
        rgba(215,25,32,.035),
        transparent 48%
    );

    transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    opacity .4s ease;
}


/*==================================================
CATEGORÍA
==================================================*/

.brand-card-category
{
    position:absolute;

    top:18px;
    left:20px;

    color:#999;

    font-size:.48rem;

    font-weight:800;

    letter-spacing:1.7px;

    line-height:1;

    text-transform:uppercase;
}


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

    display:inline-block;

    width:5px;
    height:5px;

    margin-right:6px;

    vertical-align:middle;

    border-radius:50%;

    background:
    var(--primary);

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


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

.brand-logo
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:135px;

    padding:15px;

    transition:
    transform .55s cubic-bezier(.2,.8,.2,1);
}


.brand-logo img
{
    display:block;

    width:auto;

    max-width:165px;

    max-height:82px;

    object-fit:contain;

    filter:
    drop-shadow(
        0 8px 14px rgba(0,0,0,.07)
    );

    transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    filter .55s ease;
}


/*==================================================
PARTE INFERIOR DEL FRENTE
==================================================*/

.brand-card-bottom
{
    position:absolute;

    left:21px;
    right:21px;
    bottom:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:12px;

    border-top:
    1px solid #eeeeee;
}


.brand-card-hint
{
    color:#999;

    font-size:.53rem;

    font-weight:700;

    letter-spacing:.3px;

    transition:
    color .35s ease;
}


/*==================================================
FLECHA
==================================================*/

.brand-card-arrow
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:29px;
    height:29px;

    color:
    var(--primary);

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

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

    border-radius:50%;

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


.brand-card-arrow i
{
    font-size:.58rem;
}


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

.brand-card-overlay
{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    min-height:54%;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:
    24px 23px 21px;

    color:#fff;

    background:
    linear-gradient(
        180deg,
        rgba(17,17,17,.72) 0%,
        #111111 72%
    );

    transform:
    translateY(100%);

    transition:
    transform .55s cubic-bezier(.2,.8,.2,1);

    z-index:3;
}


/*==================================================
EFECTO ROJO OVERLAY
==================================================*/

.brand-card-overlay::before
{
    content:"";

    position:absolute;

    top:0;
    left:23px;

    width:32px;
    height:2px;

    border-radius:20px;

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

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


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

.brand-card:hover .brand-card-overlay
{
    transform:
    translateY(0);
}


.brand-card:hover .brand-card-front
{
    transform:
    translateY(-18px);

    opacity:.22;
}


.brand-card:hover .brand-logo
{
    transform:
    translateY(-15px)
    scale(.88);
}


.brand-card:hover .brand-logo img
{
    filter:
    grayscale(1)
    brightness(2)
    opacity:.65;
}


.brand-card:hover .brand-card-arrow
{
    color:#fff;

    background:
    var(--primary);

    transform:
    rotate(45deg);
}


.brand-card:hover .brand-card-hint
{
    color:#fff;
}


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

.brand-info-label
{
    margin-bottom:5px;

    color:#ff6666;

    font-size:.48rem;

    font-weight:800;

    letter-spacing:1.4px;

    line-height:1;

    text-transform:uppercase;
}


/*==================================================
NOMBRE MARCA
==================================================*/

.brand-card-overlay h2
{
    margin:0;

    padding:0;

    color:#fff;

    font-size:
    clamp(
        .82rem,
        1.4vw,
        .98rem
    );

    font-weight:800;

    line-height:1.2;

    letter-spacing:-.15px;
}


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

.brand-card-overlay p
{
    max-width:330px;

    margin:
    7px 0 13px;

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

    font-size:.57rem;

    line-height:1.6;
}


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

.brand-card-link
{
    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    color:#fff;

    font-size:.54rem;

    font-weight:800;

    text-decoration:none;

    transition:
    color .3s ease,
    gap .3s ease;
}


.brand-card-link i
{
    color:#ff4d4d;

    font-size:.55rem;

    transition:
    transform .3s ease;
}


.brand-card-link:hover
{
    color:#fff;

    gap:11px;
}


.brand-card-link:hover i
{
    transform:
    translateX(3px);
}


/*==================================================
CIERRE
==================================================*/

.brands-bottom
{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    max-width:850px;

    margin:
    28px auto 0;
}


.brands-bottom-line
{
    flex:1;

    height:1px;

    max-width:90px;

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


.brands-bottom-line:last-child
{
    background:
    linear-gradient(
        90deg,
        #e2e2e2,
        transparent
    );
}


.brands-bottom-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:27px;
    height:27px;

    flex-shrink:0;

    color:
    var(--primary);

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

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

    border-radius:50%;
}


.brands-bottom-icon i
{
    font-size:.58rem;
}


.brands-bottom p
{
    margin:0;

    color:#888;

    font-size:.56rem;

    font-weight:600;

    text-align:center;
}


/*==================================================
ANIMACIONES
==================================================*/

@keyframes brandsBadgePulse
{
    0%,
    100%
    {
        transform:
        scale(1);

        opacity:.8;
    }

    50%
    {
        transform:
        scale(1.12);

        opacity:1;
    }
}


@keyframes brandBorderMove
{
    0%
    {
        transform:
        rotate(0deg);
    }

    100%
    {
        transform:
        rotate(360deg);
    }
}


/*==================================================
TABLET
SIN PADDING EXTRA DE SECCIÓN
==================================================*/

@media(max-width:900px)
{
    .brands-heading
    {
        margin-bottom:28px;
    }


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

        gap:15px;
    }


    .brand-card
    {
        height:275px;
    }
}


/*==================================================
MOBILE
SIN PADDING EXTRA DE SECCIÓN
==================================================*/

@media(max-width:576px)
{
    .brands-heading
    {
        margin:
        0 auto 23px;
    }


    .brands-kicker
    {
        gap:7px;

        margin-bottom:8px;

        font-size:.53rem;

        letter-spacing:1.5px;
    }


    .brands-kicker-line
    {
        width:18px;
    }


    .brands-heading h1
    {
        font-size:
        clamp(
            1.65rem,
            7.5vw,
            2.05rem
        );

        line-height:1.08;

        letter-spacing:-.8px;
    }


    .brands-heading h1::after
    {
        width:35px;

        height:2px;

        margin-top:11px;
    }


    .brands-heading p
    {
        margin-top:11px;

        font-size:.67rem;

        line-height:1.6;
    }


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

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

        gap:10px;
    }


    /*==================================================
    TARJETAS
    ==================================================*/

    .brand-card
    {
        height:230px;

        border-radius:14px;
    }


    .brand-card-border
    {
        border-radius:14px;
    }


    .brand-card-front
    {
        padding:
        18px 13px;
    }


    .brand-card-category
    {
        top:13px;
        left:14px;

        font-size:.42rem;

        letter-spacing:1.3px;

    }


    .brand-card-category::before
    {
        width:4px;
        height:4px;

        margin-right:4px;

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


    .brand-logo
    {
        height:110px;

        padding:10px;
    }


    .brand-logo img
    {
        max-width:120px;

        max-height:60px;
    }


    .brand-card-bottom
    {
        left:13px;
        right:13px;
        bottom:12px;

        padding-top:9px;
    }


    .brand-card-hint
    {
        font-size:.45rem;
    }


    .brand-card-arrow
    {
        width:25px;
        height:25px;
    }


    .brand-card-arrow i
    {
        font-size:.5rem;
    }


    /*==================================================
    OVERLAY
    ==================================================*/

    .brand-card-overlay
    {
        min-height:59%;

        padding:
        18px 14px 15px;
    }


    .brand-card-overlay::before
    {
        left:14px;

        width:25px;
    }


    .brand-info-label
    {
        margin-bottom:4px;

        font-size:.4rem;

        letter-spacing:1px;
    }


    .brand-card-overlay h2
    {
        font-size:.72rem;

        line-height:1.15;
    }


    .brand-card-overlay p
    {
        margin:
        5px 0 9px;

        font-size:.48rem;

        line-height:1.5;
    }


    .brand-card-link
    {
        gap:6px;

        font-size:.45rem;
    }


    .brand-card-link i
    {
        font-size:.45rem;
    }


    /*==================================================
    CIERRE
    ==================================================*/

    .brands-bottom
    {
        gap:8px;

        margin-top:20px;
    }


    .brands-bottom-line
    {
        max-width:35px;
    }


    .brands-bottom-icon
    {
        width:24px;
        height:24px;
    }


    .brands-bottom-icon i
    {
        font-size:.5rem;
    }


    .brands-bottom p
    {
        font-size:.48rem;

        line-height:1.4;
    }
}


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

@media(max-width:380px)
{
    .brands-grid
    {
        gap:8px;
    }


    .brand-card
    {
        height:215px;

        border-radius:12px;
    }


    .brand-card-border
    {
        border-radius:12px;
    }


    .brand-logo img
    {
        max-width:105px;

        max-height:52px;
    }


    .brand-card-overlay
    {
        padding:
        16px 12px 13px;
    }


    .brand-card-overlay p
    {
        font-size:.44rem;
    }


    .brand-card-link
    {
        font-size:.42rem;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .brands-kicker i,

    .brand-card-border
    {
        animation:none;
    }


    .brand-card,

    .brand-card-front,

    .brand-card-overlay,

    .brand-logo,

    .brand-logo img,

    .brand-card-arrow
    {
        transition:none;
    }
}