@charset "utf-8";

/*==================================================
CTA MCTIRE
==================================================*/

.cta-mctire
{
    position:relative;

    width:100%;

    padding:42px 0;

    background:
    radial-gradient(
        circle at 12% 50%,
        rgba(215,25,32,.10),
        transparent 28%
    ),
    radial-gradient(
        circle at 88% 50%,
        rgba(215,25,32,.07),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #080808 0%,
        #111111 48%,
        #080808 100%
    );

    overflow:hidden;
}


/*==================================================
FONDO
==================================================*/

.cta-mctire-bg
{
    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 80px,
        rgba(255,255,255,.012) 80px,
        rgba(255,255,255,.012) 81px
    );

    pointer-events:none;
}


/*==================================================
EFECTOS AMBIENTALES
==================================================*/

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

    position:absolute;

    width:500px;

    height:500px;

    top:-300px;

    right:-180px;

    border-radius:50%;

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

    box-shadow:
    0 0 0 35px rgba(215,25,32,.025),
    0 0 0 70px rgba(215,25,32,.018),
    0 0 90px rgba(215,25,32,.05);

    pointer-events:none;

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


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

    position:absolute;

    width:300px;

    height:300px;

    left:-180px;

    bottom:-220px;

    border-radius:50%;

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

    pointer-events:none;

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


/*==================================================
CAJA PRINCIPAL
==================================================*/

.cta-mctire-box
{
    position:relative;

    display:grid;

    grid-template-columns:
    1.15fr
    .85fr;

    align-items:center;

    min-height:360px;

    padding:
    42px 55px;

    background:
    linear-gradient(
        110deg,
        #161616 0%,
        #0d0d0d 55%,
        #151515 100%
    );

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

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 22px 55px rgba(0,0,0,.40);
}


/*==================================================
DECORACIÓN INTERNA
==================================================*/

.cta-mctire-box::before
{
    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:
    linear-gradient(
        180deg,
        #ff4b4b,
        var(--primary),
        #8e0010
    );
}


.cta-mctire-box::after
{
    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    border:
    75px solid rgba(215,25,32,.045);

    pointer-events:none;
}


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

.cta-mctire-content
{
    position:relative;

    z-index:3;

    max-width:620px;
}


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

.cta-mctire-badge
{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:13px;

    color:#ff4b4b;

    font-size:.66rem;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.cta-mctire-badge i
{
    font-size:.76rem;
}


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

.cta-mctire-content h2
{
    margin:0;

    color:#fff;

    font-size:
    clamp(2rem,3.8vw,3.1rem);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1.2px;
}


.cta-mctire-content h2 span
{
    display:block;

    color:var(--primary);
}


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

.cta-mctire-content p
{
    max-width:570px;

    margin:
    16px 0 0;

    color:#a7a7a7;

    font-size:.86rem;

    line-height:1.65;
}


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

.cta-mctire-actions
{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:11px;

    margin-top:22px;
}


.cta-mctire-primary,
.cta-mctire-whatsapp
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:46px;

    padding:
    0 20px;

    border-radius:50px;

    font-size:.74rem;

    font-weight:800;

    text-decoration:none;

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


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

.cta-mctire-primary
{
    color:#fff;

    background:
    linear-gradient(
        135deg,
        #e31b23,
        #b30816
    );

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


.cta-mctire-primary:hover
{
    color:#fff;

    transform:
    translateY(-3px);

    background:
    linear-gradient(
        135deg,
        #f32630,
        #c8102e
    );

    box-shadow:
    0 14px 28px rgba(215,25,32,.34);
}


/*==================================================
WHATSAPP
==================================================*/

.cta-mctire-whatsapp
{
    color:#fff;

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

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


.cta-mctire-whatsapp:hover
{
    color:#fff;

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

    transform:
    translateY(-3px);

    border-color:
    rgba(255,255,255,.25);
}


.cta-mctire-whatsapp i
{
    color:#25d366;

    font-size:1rem;
}


/*==================================================
BENEFICIOS
==================================================*/

.cta-mctire-benefits
{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:19px;
}


.cta-mctire-benefits span
{
    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#888;

    font-size:.63rem;

    font-weight:600;
}


.cta-mctire-benefits i
{
    color:#d71920;

    font-size:.63rem;
}


/*==================================================
VISUAL
==================================================*/

.cta-mctire-visual
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:320px;

    z-index:2;
}


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

.cta-mctire-glow
{
    position:absolute;

    width:270px;

    height:270px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(215,25,32,.28) 0%,
        rgba(215,25,32,.08) 45%,
        transparent 70%
    );

    filter:
    blur(10px);

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


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

.cta-mctire-tire
{
    position:relative;

    width:350px;

    max-width:100%;

    z-index:2;

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


.cta-mctire-tire img
{
    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

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


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

.cta-mctire-floating
{
    position:absolute;

    right:5px;

    bottom:28px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
    10px 14px;

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

    border-radius:12px;

    box-shadow:
    0 12px 30px rgba(0,0,0,.25);

    z-index:4;
}


.cta-floating-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:33px;

    height:33px;

    flex-shrink:0;

    color:#fff;

    background:var(--primary);

    border-radius:9px;

    font-size:.73rem;
}


.cta-mctire-floating strong
{
    display:block;

    color:#151515;

    font-size:.67rem;

    font-weight:800;
}


.cta-mctire-floating span:not(.cta-floating-icon)
{
    display:block;

    margin-top:2px;

    color:#777;

    font-size:.57rem;
}


/*==================================================
ANIMACIÓN LLANTA
==================================================*/

@keyframes ctaTireFloat
{
    0%,
    100%
    {
        transform:
        translateY(0)
        rotate(-1deg);
    }

    50%
    {
        transform:
        translateY(-7px)
        rotate(1deg);
    }
}


/*==================================================
ANIMACIÓN BRILLO
==================================================*/

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

        opacity:.75;
    }

    50%
    {
        transform:scale(1.08);

        opacity:1;
    }
}


/*==================================================
MOVIMIENTO FONDO
==================================================*/

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

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


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

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


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

@media(max-width:900px)
{
    .cta-mctire
    {
        padding:35px 0;
    }


    .cta-mctire-box
    {
        grid-template-columns:
        1.05fr
        .95fr;

        min-height:330px;

        padding:
        35px 38px;
    }


    .cta-mctire-content h2
    {
        font-size:
        clamp(1.85rem,4.5vw,2.6rem);
    }


    .cta-mctire-content p
    {
        font-size:.82rem;
    }


    .cta-mctire-visual
    {
        min-height:270px;
    }


    .cta-mctire-tire
    {
        width:270px;
    }


    .cta-mctire-glow
    {
        width:220px;

        height:220px;
    }


    .cta-mctire-floating
    {
        right:-5px;

        bottom:10px;
    }
}


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

@media(max-width:700px)
{
    .cta-mctire
    {
        padding:22px 0;
    }


    .cta-mctire-box
    {
        display:block;

        min-height:auto;

        padding:
        28px 20px 20px;

        border-radius:18px;
    }


    .cta-mctire-content
    {
        max-width:none;
    }


    .cta-mctire-badge
    {
        margin-bottom:10px;

        font-size:.6rem;
    }


    .cta-mctire-content h2
    {
        font-size:
        clamp(1.75rem,8vw,2.35rem);

        line-height:1.06;
    }


    .cta-mctire-content h2 span
    {
        display:inline;
    }


    .cta-mctire-content p
    {
        margin-top:12px;

        font-size:.76rem;

        line-height:1.55;
    }


    .cta-mctire-actions
    {
        margin-top:17px;


        flex-direction:column;

        align-items:stretch;

        gap:8px;
    }


    .cta-mctire-primary,
    .cta-mctire-whatsapp
    {
        width:100%;

        min-height:45px;
    }


    .cta-mctire-benefits
    {
        gap:7px 12px;

        margin-top:15px;
    }


    .cta-mctire-benefits span
    {
        font-size:.57rem;
    }


    .cta-mctire-visual
    {
        min-height:220px;

        margin-top:5px;
    }


    .cta-mctire-tire
    {
        width:220px;
    }


    .cta-mctire-glow
    {
        width:190px;

        height:190px;
    }


    .cta-mctire-floating
    {
        right:0;

        bottom:0;

        padding:
        7px 10px;
    }


    .cta-floating-icon
    {
        width:28px;

        height:28px;
    }


    .cta-mctire-floating strong
    {
        font-size:.6rem;
    }


    .cta-mctire-floating span:not(.cta-floating-icon)
    {
        font-size:.52rem;
    }
}


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

@media(max-width:400px)
{
    .cta-mctire
    {
        padding:18px 0;
    }


    .cta-mctire-box
    {
        padding:
        24px 16px 17px;

        border-radius:16px;
    }


    .cta-mctire-badge
    {
        font-size:.56rem;

        letter-spacing:1px;
    }


    .cta-mctire-content h2
    {
        font-size:1.7rem;
    }


    .cta-mctire-content p
    {
        font-size:.72rem;
    }


    .cta-mctire-tire
    {
        width:195px;
    }


    .cta-mctire-visual
    {
        min-height:195px;
    }


    .cta-mctire-floating
    {
        right:-2px;

        bottom:0;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .cta-mctire-tire,
    .cta-mctire-glow,
    .cta-mctire::before,
    .cta-mctire::after
    {
        animation:none;
    }


    .cta-mctire-primary,
    .cta-mctire-whatsapp
    {
        transition:none;
    }
}