@charset "utf-8";

/*==================================================
HERO MCTIRE
PREMIUM + OPTIMIZADO
==================================================*/

.hero
{
    position:relative;

    width:100%;

    /*
       ALTURA CONTROLADA
       No obliga al hero a ocupar toda la pantalla.
    */

    min-height:
    clamp(
        400px,
        calc(100vh - 100px),
        500px
    );

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#0b0b0b;

    isolation:isolate;
}


/*==================================================
IMAGEN DE FONDO
==================================================*/

.hero-image
{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:-2;
}


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

.hero-overlay
{
    position:absolute;

    inset:0;

    z-index:-1;

    background:
    linear-gradient(
        90deg,
        rgba(5,5,5,.97) 0%,
        rgba(5,5,5,.88) 40%,
        rgba(5,5,5,.48) 72%,
        rgba(5,5,5,.20) 100%
    );
}


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

.hero .container
{
    position:relative;

    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.82fr);

    align-items:center;

    gap:1rem;

    /*
       IMPORTANTE:
       quitamos el min-height que duplicaba
       la altura del hero.
    */

    min-height:0;

    padding:
    4px 0;
}


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

.hero-content
{
    position:relative;

    max-width:650px;
}


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

.hero-badge
{
    display:inline-flex;

    align-items:center;

    gap:.55rem;

    padding:
    .32rem .8rem;

    margin-bottom:.85rem;

    color:#fff;

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

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

    border-radius:40px;

    font-size:.7rem;

    font-weight:700;

    letter-spacing:.9px;

    text-transform:uppercase;
}


.hero-badge i
{
    color:var(--primary);
}


/*==================================================
TITULO
==================================================*/

.hero h1
{
    margin:0;

    color:#fff;

    font-size:
    clamp(
        2.55rem,
        4.5vw,
        4.45rem
    );

    line-height:.98;

    font-weight:900;

    letter-spacing:-1.8px;
}


.hero h1 span
{
    display:block;

    margin-top:.12em;

    color:var(--primary);
}


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

.hero p
{
    max-width:580px;

    margin:
    1.1rem 0 0;

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

    font-size:
    clamp(
        .86rem,
        1.05vw,
        1rem
    );

    line-height:1.55;
}


/*==================================================
BOTONES
==================================================*/

.hero-buttons
{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:.7rem;

    margin-top:1.45rem;
}


.hero-buttons a
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.55rem;

    min-height:49px;

    padding:
    0 1.35rem;

    border-radius:50px;

    font-size:.83rem;

    font-weight:700;

    text-decoration:none;

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


/*==================================================
BOTON PRINCIPAL
==================================================*/

.hero .btn-primary
{
    color:#fff;

    background:var(--primary);
}


.hero .btn-primary:hover
{
    color:#fff;

    transform:
    translateY(-3px);

    background:var(--primary-hover);
}


/*==================================================
BOTON SECUNDARIO
==================================================*/

.hero .btn-secondary
{
    color:#fff;

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

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


.hero .btn-secondary:hover
{
    color:#fff;

    transform:
    translateY(-3px);

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


/*==================================================
CARACTERISTICAS
==================================================*/

.hero-features
{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:1rem;

    margin-top:1.2rem;
}


.hero-feature
{
    display:flex;

    align-items:center;

    gap:.38rem;

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

    font-size:.7rem;

    font-weight:600;
}


.hero-feature i
{
    color:var(--primary);

    font-size:.76rem;
}


/*==================================================
PRODUCTO
==================================================*/

.hero-product
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:
    clamp(
        430px,
        54vh,
        540px
    );

    min-height:0;
}


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

.hero-product-glow
{
    position:absolute;

    width:330px;
    height:330px;

    border-radius:50%;

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

    filter:
    blur(52px);

    z-index:-1;
}


/*==================================================
CIRCULO
==================================================*/

.hero-product-circle
{
    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

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


/*==================================================
LLANTA
==================================================*/

.hero-product img
{
    display:block;

    width:
    min(
        100%,
        550px
    );

    height:auto;

    max-height:550px;

    object-fit:contain;

    filter:
    drop-shadow(
        0 25px 30px
        rgba(0,0,0,.55)
    );

    animation:
    heroTireFloat 6s ease-in-out infinite;
}


.hero-product:hover img
{
    transform:
    scale(1.02);
}


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

.hero-product-badge
{
    position:absolute;

    right:5%;

    bottom:6%;

    display:flex;

    align-items:center;

    gap:.45rem;

    padding:
    .55rem .8rem;

    color:#fff;

    background:
    rgba(10,10,10,.85);

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

    border-radius:30px;

    font-size:.67rem;

    font-weight:700;
}


.hero-product-badge i
{
    color:var(--primary);
}


/*==================================================
ANIMACION
==================================================*/

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

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


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

@media(max-width:1100px)
{
    .hero
    {
        min-height:
        clamp(
            520px,
            calc(100vh - 145px),
            630px
        );
    }


    .hero .container
    {
        grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.78fr);

        gap:.5rem;
    }


    .hero-content
    {
        max-width:600px;
    }


    .hero h1
    {
        font-size:
        clamp(
            2.4rem,
            5vw,

            4rem
        );
    }


    .hero-product
    {
        height:440px;
    }


    .hero-product-circle
    {
        width:350px;

        height:350px;
    }


    .hero-product-glow
    {
        width:280px;

        height:280px;
    }


    .hero-product img
    {
        width:
        min(
            100%,
            470px
        );

        max-height:470px;
    }
}


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

@media(max-width:800px)
{
    .hero
    {
        /*
           Aquí NO usamos 100vh.
           El hero crece según su contenido.
        */

        min-height:auto;

        padding:
        28px 0 20px;
    }


    .hero .container
    {
        min-height:0;

        display:flex;

        flex-direction:column;

        gap:0;

        padding:
        0 1rem;

        text-align:center;
    }


    .hero-content
    {
        width:100%;

        max-width:720px;

        margin:
        0 auto;
    }


    .hero h1
    {
        font-size:
        clamp(
            2.35rem,
            8vw,
            3.8rem
        );
    }


    .hero p
    {
        margin-left:auto;

        margin-right:auto;
    }


    .hero-buttons
    {
        justify-content:center;
    }


    .hero-features
    {
        justify-content:center;
    }


    .hero-product
    {
        width:100%;

        height:350px;

        margin-top:-18px;
    }


    .hero-product img
    {
        width:
        min(
            80%,
            450px
        );
    }
}


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

@media(max-width:576px)
{
    .hero
    {
        /*
           Sin altura forzada.
           Solo el espacio necesario.
        */

        min-height:auto;

        padding:
        20px 0 12px;
    }


    .hero .container
    {
        min-height:0;

        padding:
        0 1rem;
    }


    .hero-image
    {
        object-position:
        65% center;
    }


    .hero-overlay
    {
        background:
        linear-gradient(
            180deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.85) 55%,
            rgba(5,5,5,.65) 100%
        );
    }


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

    .hero-badge
    {
        margin-bottom:.65rem;

        padding:
        .28rem .52rem;

        font-size:.58rem;
    }


    /*==================================================
    TITULO
    ==================================================*/

    .hero h1
    {
        font-size:
        clamp(
            2rem,
            9vw,
            2.8rem
        );

        line-height:.98;

        letter-spacing:-1.2px;
    }


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

    .hero p
    {
        margin-top:.75rem;

        font-size:.8rem;

        line-height:1.45;
    }


    /*==================================================
    BOTONES
    ==================================================*/

    .hero-buttons
    {
        width:100%;

        flex-direction:column;

        gap:.5rem;

        margin-top:1rem;
    }


    .hero-buttons a
    {
        width:100%;

        min-height:46px;

        font-size:.78rem;
    }


    /*==================================================
    FEATURES
    ==================================================*/

    .hero-features
    {
        display:grid;

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

        gap:.35rem;

        margin-top:.8rem;
    }


    .hero-feature
    {
        flex-direction:column;

        justify-content:center;

        text-align:center;

        gap:.15rem;

        font-size:.56rem;
    }


    .hero-feature i
    {
        font-size:.72rem;
    }


    /*==================================================
    PRODUCTO
    ==================================================*/

    .hero-product
    {
        height:215px;

        margin-top:-8px;
    }


    .hero-product img
    {
        width:78%;

        max-width:310px;

        max-height:310px;
    }


    .hero-product-circle
    {
        width:205px;

        height:205px;
    }


    .hero-product-glow
    {
        width:175px;

        height:175px;

        filter:
        blur(38px);
    }


    .hero-product-badge
    {
        right:2%;

        bottom:0;

        padding:
        .45rem .6rem;

        font-size:.55rem;
    }
}


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

@media(max-width:380px)
{
    .hero
    {
        padding:
        17px 0 8px;
    }


    .hero h1
    {
        font-size:
        1.9rem;
    }


    .hero p
    {
        font-size:.76rem;
    }


    .hero-buttons
    {
        margin-top:.85rem;
    }


    .hero-features
    {
        margin-top:.7rem;
    }


    .hero-product
    {
        height:185px;

        margin-top:-5px;
    }


    .hero-product img
    {
        width:75%;

        max-width:270px;
    }


    .hero-product-circle
    {
        width:175px;

        height:175px;
    }


    .hero-product-glow
    {
        width:150px;

        height:150px;
    }


    .hero-product-badge
    {
        display:none;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .hero-product img
    {
        animation:none;
    }
}