@charset "utf-8";

/*==================================================
REENCAUCHE DE LLANTAS - MCTIRE
DISEÑO OPTIMIZADO / PREMIUM
==================================================*/

.retreading-section
{
    position:relative;

    width:100%;

    margin:0;

    padding:
    12px 0 34px;

    background:#fff;

    overflow:hidden;

    isolation:isolate;

    scroll-margin-top:20px;
}


/*==================================================
DECORACIÓN SUPERIOR
==================================================*/

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

    position:absolute;

    top:0;
    left:50%;

    width:110px;
    height:2px;

    transform:
    translateX(-50%);

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

    opacity:.8;

    pointer-events:none;
}


/*==================================================
BRILLO DE FONDO
==================================================*/

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

    position:absolute;

    width:520px;
    height:520px;

    right:-300px;
    top:100px;

    border-radius:50%;

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

    pointer-events:none;

    z-index:-1;

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


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

.retreading-section .container
{
    position:relative;

    z-index:2;
}


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

.retreading-heading
{
    position:relative;

    max-width:760px;

    margin:
    0 auto 32px;

    text-align:center;
}


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

.retreading-kicker
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin:
    0 0 8px;

    color:var(--primary);

    font-size:.62rem;

    font-weight:850;

    letter-spacing:1.7px;

    line-height:1;

    text-transform:uppercase;
}


.retreading-kicker i
{
    font-size:.68rem;

    animation:
    retreadingKickerPulse 2.5s ease-in-out infinite;
}


/*==================================================
H1
==================================================*/

.retreading-heading h1
{
    position:relative;

    margin:0;

    padding:0;

    color:#111;

    font-size:
    clamp(
        1.9rem,
        3.7vw,
        2.85rem
    );

    line-height:1.04;

    font-weight:850;

    letter-spacing:-1.25px;
}


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

    display:block;

    width:52px;
    height:3px;

    margin:
    13px auto 0;

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        #8f0d14,
        #e31b23,
        #ff4b4b
    );

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

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


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

.retreading-heading > p
{
    max-width:650px;

    margin:
    11px auto 0;

    padding:0;

    color:#686868;

    font-size:.78rem;

    line-height:1.65;

    text-align:justify;
}


/*==================================================
INTRO
==================================================*/

.retreading-intro
{
    display:grid;

    grid-template-columns:
    1.12fr
    .88fr;

    align-items:stretch;

    gap:22px;

    max-width:1100px;

    margin:
    0 auto 45px;
}


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

.retreading-intro-content
{
    position:relative;

    padding:
    32px 36px;

    background:
    linear-gradient(
        145deg,
        #fff,
        #fcfcfc
    );

    border:
    1px solid #e9e9e9;

    border-radius:19px;

    box-shadow:
    0 14px 38px rgba(0,0,0,.055);

    overflow:hidden;

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


.retreading-intro-content:hover
{
    transform:
    translateY(-3px);

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

    box-shadow:
    0 19px 42px rgba(0,0,0,.075);
}


/*==================================================
BARRA LATERAL
==================================================*/

.retreading-intro-content::before
{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:4px;
    height:100%;

    background:
    linear-gradient(
        180deg,
        #ff4b4b,
        #d71920 55%,
        #8f0d14
    );

    transform-origin:
    top;

    animation:
    retreadingBar 4s ease-in-out infinite;
}


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

.retreading-intro-content::after
{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-150px;
    bottom:-150px;

    border-radius:50%;

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

    pointer-events:none;
}


/*==================================================
LABEL
==================================================*/

.retreading-label
{
    position:relative;

    z-index:1;

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:
    6px 11px;

    margin:
    0 0 13px;

    color:#d71920;

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

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

    border-radius:30px;

    font-size:.58rem;

    font-weight:850;

    letter-spacing:1.2px;

    text-transform:uppercase;
}


/*==================================================
H2 INTRO
==================================================*/

.retreading-intro-content h2
{
    position:relative;

    z-index:1;

    max-width:600px;

    margin:0;

    color:#151515;

    font-size:
    clamp(
        1.55rem,
        2.65vw,
        2.1rem
    );

    line-height:1.1;

    font-weight:850;

    letter-spacing:-.8px;
}


/*==================================================
TEXTOS INTRO
==================================================*/

.retreading-intro-content p
{
    position:relative;

    z-index:1;

    max-width:650px;

    margin:
    13px 0 0;

    color:#666;

    font-size:.75rem;

    line-height:1.72;

    text-align:justify;
}


/*==================================================
HIGHLIGHTS
==================================================*/

.retreading-highlights
{
    position:relative;

    z-index:1;

    display:grid;

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

    gap:8px;

    margin-top:22px;
}


.retreading-highlight
{
    display:flex;

    align-items:center;

    gap:8px;

    min-width:0;

    padding:
    9px;

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

    border:
    1px solid #ededed;

    border-radius:10px;

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


.retreading-highlight:hover
{
    transform:
    translateY(-3px);

    background:#fff;

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

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


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

.retreading-highlight-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:30px;
    height:30px;

    color:#d71920;

    background:#fff;

    border:
    1px solid #ededed;

    border-radius:8px;

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

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


.retreading-highlight:hover .retreading-highlight-icon
{
    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        #a90008
    );

    transform:
    rotate(-5deg) scale(1.05);
}


.retreading-highlight-icon i
{
    font-size:.7rem;
}


.retreading-highlight strong
{
    display:block;

    color:#222;

    font-size:.61rem;

    font-weight:850;

    line-height:1.2;
}


.retreading-highlight div span
{
    display:block;

    margin-top:2px;

    color:#888;

    font-size:.5rem;

    line-height:1.2;
}


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

.retreading-intro-visual
{
    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:315px;

    padding:28px;

    color:#fff;

    background:
    linear-gradient(
        145deg,
        #090909 0%,
        #171717 50%,
        #080808 100%
    );

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

    border-radius:19px;

    overflow:hidden;

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


/*==================================================
DECORACIÓN CIRCULAR
==================================================*/

.retreading-intro-visual::before
{
    content:"";

    position:absolute;

    width:330px;
    height:330px;

    border-radius:50%;

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

    box-shadow:
    0 0 0 24px rgba(255,255,255,.017),
    0 0 0 52px rgba(255,255,255,.011),
    0 0 0 82px rgba(255,255,255,.007);

    animation:
    retreadingVisualRotate 22s linear infinite;
}


.retreading-intro-visual::after
{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    border-radius:50%;

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

    filter:blur(12px);

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


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

.retreading-visual-glow
{
    position:absolute;

    width:190px;
    height:190px;

    border-radius:50%;

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

    filter:blur(6px);

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


/*==================================================
RUEDA
==================================================*/

.retreading-wheel
{
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:170px;
    height:170px;

    border-radius:50%;

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

    box-shadow:
    0 0 0 14px rgba(255,255,255,.024),
    0 0 0 30px rgba(255,255,255,.011);

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


/*==================================================
ANILLO
==================================================*/

.retreading-wheel-ring
{
    position:absolute;

    inset:12px;

    border-radius:50%;

    border:
    2px dashed rgba(215,25,32,.8);

    animation:
    retreadingRotate 14s linear infinite;

    transform-origin:center;

    will-change:transform;
}


/*==================================================
CENTRO
==================================================*/

.retreading-wheel-inner
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:68px;
    height:68px;

    border-radius:50%;

    color:#fff;

    background:
    radial-gradient(
        circle at 35% 30%,
        #3b3b3b,
        #080808
    );

    border:
    2px solid #d71920;

    box-shadow:
    0 0 0 5px rgba(215,25,32,.04),
    0 0 30px rgba(215,25,32,.3);

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


.retreading-wheel-inner i
{
    color:#e31b23;

    font-size:1.55rem;

    filter:
    drop-shadow(
        0 0 7px rgba(215,25,32,.35)
    );
}


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

.retreading-visual-label
{
    position:relative;

    z-index:3;

    margin-top:21px;

    color:#e31b23;

    font-size:.56rem;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;
}


.retreading-intro-visual strong
{
    position:relative;

    z-index:3;

    margin-top:5px;

    color:#fff;

    font-size:.98rem;

    font-weight:850;

    text-align:center;
}


.retreading-intro-visual small
{
    position:relative;

    z-index:3;

    margin-top:4px;

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

    font-size:.54rem;

    text-align:center;
}


/*==================================================
PROCESO
==================================================*/

.retreading-process
{
    max-width:1100px;

    margin:
    0 auto;
}


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

.retreading-process-heading
{
    max-width:720px;

    margin:
    0 auto 29px;

    text-align:center;
}


.retreading-process-heading .retreading-kicker
{
    margin-bottom:8px;
}


.retreading-process-heading h2
{
    margin:0;

    color:#151515;

    font-size:
    clamp(
        1.55rem,
        3vw,
        2.3rem
    );

    line-height:1.1;

    font-weight:850;

    letter-spacing:-.8px;
}


.retreading-process-heading p
{
    max-width:640px;

    margin:
    10px auto 0;

    color:#707070;

    font-size:.75rem;

    line-height:1.65;

    text-align:justify;
}


/*==================================================
PASOS
==================================================*/

.retreading-steps
{
    position:relative;

    display:grid;

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

    gap:11px;
}


/*==================================================
LÍNEA CENTRAL
==================================================*/

.retreading-steps::before
{
    content:"";

    position:absolute;

    top:30px;
    left:8%;

    width:84%;
    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(215,25,32,.18),
        #ddd,
        rgba(215,25,32,.18),
        transparent
    );

    z-index:0;

    animation:
    retreadingProcessLine 4s ease-in-out infinite;
}


/*==================================================
PASO
==================================================*/

.retreading-step
{
    position:relative;

    z-index:1;

    min-width:0;

    padding:
    19px 14px 17px;

    background:
    linear-gradient(
        145deg,
        #fff,
        #fcfcfc
    );

    border:
    1px solid #e9e9e9;

    border-radius:14px;

    box-shadow:
    0 9px 25px rgba(0,0,0,.043);

    overflow:hidden;

    transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease;
}


.retreading-step::after
{
    content:"";

    position:absolute;

    width:80px;
    height:80px;

    right:-45px;
    bottom:-45px;

    border-radius:50%;

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

    opacity:0;

    transition:
    opacity .3s ease;
}


.retreading-step:hover
{
    transform:
    translateY(-6px);

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

    box-shadow:
    0 17px 32px rgba(0,0,0,.075);
}


.retreading-step:hover::after
{
    opacity:1;
}


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

.retreading-step-number
{
    position:absolute;

    top:11px;
    right:12px;

    color:
    rgba(215,25,32,.095);

    font-size:1.4rem;

    font-weight:900;

    line-height:1;

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


.retreading-step:hover .retreading-step-number
{
    color:
    rgba(215,25,32,.17);

    transform:
    scale(1.08);
}


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

.retreading-step-icon
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;
    height:42px;

    margin-bottom:16px;

    color:#d71920;

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

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

    border-radius:11px;

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


.retreading-step-icon::before
{
    content:"";

    position:absolute;

    inset:-4px;

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

    border-radius:13px;

    opacity:0;

    transform:scale(.85);

    transition:
    opacity .3s ease,
    transform .3s ease;
}


.retreading-step:hover .retreading-step-icon
{
    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        #a90008
    );

    box-shadow:
    0 9px 20px rgba(215,25,32,.16);

    transform:
    translateY(-2px);
}


.retreading-step:hover .retreading-step-icon::before
{
    opacity:1;

    transform:scale(1);
}


.retreading-step-icon i
{
    font-size:.9rem;
}


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

.retreading-step-content > span
{
    display:block;

    margin-bottom:5px;

    color:#d71920;

    font-size:.52rem;

    font-weight:850;

    letter-spacing:1px;

    text-transform:uppercase;
}


.retreading-step-content h3
{
    margin:0;

    color:#171717;

    font-size:.9rem;

    line-height:1.2;

    font-weight:850;
}


.retreading-step-content p
{
    margin:
    8px 0 0;

    color:#727272;

    font-size:.61rem;

    line-height:1.63;

    text-align:justify;
}


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

.retreading-cta
{
    display:flex;

    align-items:center;

    gap:11px;

    max-width:720px;

    margin:
    32px auto 0;

    padding:
    11px 12px;

    background:
    linear-gradient(
        100deg,
        #0d0d0d,
        #161616
    );

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

    border-radius:13px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.1);

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


.retreading-cta:hover
{
    transform:
    translateY(-3px);

    box-shadow:
    0 19px 40px rgba(0,0,0,.14);
}


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

.retreading-cta-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:38px;
    height:38px;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #25d366,
        #159447
    );

    border-radius:10px;

    box-shadow:
    0 5px 15px rgba(37,211,102,.15);
}


.retreading-cta-icon i
{
    font-size:1rem;
}


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

.retreading-cta-content
{
    flex:1;

    min-width:0;
}


.retreading-cta-content strong
{
    display:block;

    color:#fff;

    font-size:.67rem;

    font-weight:850;

    line-height:1.2;
}


.retreading-cta-content span
{
    display:block;

    margin-top:2px;

    color:#999;

    font-size:.54rem;

    line-height:1.2;
}


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

.retreading-cta > a
{
    display:flex;

    align-items:center;

    gap:7px;

    flex-shrink:0;

    padding:
    9px 13px;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #d71920,
        #b81218
    );

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

    border-radius:9px;

    font-size:.61rem;

    font-weight:850;

    text-decoration:none;

    box-shadow:
    0 6px 16px rgba(215,25,32,.16);

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


.retreading-cta > a:hover
{
    color:#fff;

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

    transform:
    translateY(-2px);

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


.retreading-cta > a i
{
    font-size:.57rem;

    transition:
    transform .3s ease;
}


.retreading-cta > a:hover i
{
    transform:
    translateX(3px);
}


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

@keyframes retreadingRotate
{
    from
    {
        transform:rotate(0deg);
    }

    to
    {
        transform:rotate(360deg);
    }
}


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

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


@keyframes retreadingGlow
{
    0%,
    100%
    {
        opacity:.55;

        transform:
        scale(.92);
    }

    50%
    {
        opacity:1;

        transform:
        scale(1.08);
    }
}


@keyframes retreadingVisualGlow
{
    0%,
    100%
    {
        opacity:.55;

        transform:
        scale(.95);
    }

    50%
    {
        opacity:1;

        transform:
        scale(1.06);
    }
}


@keyframes retreadingCorePulse
{
    0%,
    100%
    {
        box-shadow:
        0 0 0 5px rgba(215,25,32,.04),
        0 0 30px rgba(215,25,32,.25);
    }

    50%
    {
        box-shadow:
        0 0 0 8px rgba(215,25,32,.06),
        0 0 38px rgba(215,25,32,.38);
    }
}


@keyframes retreadingBackgroundGlow
{
    0%,
    100%
    {
        opacity:.55;

        transform:
        translate(0,0)
        scale(.96);
    }

    50%
    {
        opacity:1;

        transform:
        translate(-18px,12px)
        scale(1.04);
    }
}


@keyframes retreadingVisualRotate
{
    from
    {
        transform:
        rotate(0deg);
    }

    to
    {
        transform:
        rotate(-360deg);
    }
}


@keyframes retreadingLine
{
    0%,
    100%
    {
        transform:
        scaleX(.85);

        opacity:.7;
    }

    50%
    {
        transform:
        scaleX(1.15);

        opacity:1;
    }
}


@keyframes retreadingBar
{
    0%,
    100%
    {
        opacity:.8;

        transform:
        scaleY(.92);
    }

    50%
    {
        opacity:1;

        transform:
        scaleY(1);
    }
}


@keyframes retreadingKickerPulse
{
    0%,
    100%
    {
        opacity:.7;

        transform:
        scale(.9);
    }

    50%
    {
        opacity:1;

        transform:
        scale(1.08);
    }
}


@keyframes retreadingProcessLine
{
    0%,
    100%
    {
        opacity:.55;
    }

    50%
    {
        opacity:1;
    }
}


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

@media(max-width:1050px)
{
    .retreading-section
    {
        padding:
        14px 0 30px;
    }


    .retreading-intro
    {
        grid-template-columns:
        1fr
        .78fr;

        gap:18px;
    }


    .retreading-steps
    {
        grid-template-columns:
        repeat(3,1fr);

        gap:12px;
    }


    .retreading-steps::before
    {
        display:none;
    }


    .retreading-step:nth-child(4)
    {
        grid-column:2;
    }
}


/*==================================================
TABLET PEQUEÑO
==================================================*/

@media(max-width:800px)
{
    .retreading-section
    {
        padding:
        16px 0 28px;
    }


    .retreading-heading
    {
        margin-bottom:27px;
    }


    .retreading-intro
    {
        grid-template-columns:1fr;

        margin-bottom:38px;
    }


    .retreading-intro-visual
    {
        min-height:285px;
    }


    .retreading-highlights
    {
        grid-template-columns:
        repeat(3,1fr);
    }


    .retreading-steps
    {
        grid-template-columns:
        repeat(2,1fr);
    }


    .retreading-step:nth-child(4)
    {
        grid-column:auto;
    }
}


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

@media(max-width:576px)
{
    .retreading-section
    {
        padding:
        11px 0 22px;
    }


    .retreading-section::after
    {
        display:none;
    }


    .retreading-heading
    {
        margin:
        0 auto 22px;
    }


    .retreading-kicker
    {
        margin-bottom:7px;

        font-size:.55rem;

        letter-spacing:1.3px;
    }


    .retreading-heading h1
    {
        font-size:
        clamp(
            1.7rem,
            8vw,
            2.2rem
        );

        letter-spacing:-.75px;
    }


    .retreading-heading h1::after
    {
        width:40px;

        height:2px;

        margin-top:10px;
    }


    .retreading-heading > p
    {
        margin-top:9px;

        padding:
        0 8px;

        font-size:.69rem;

        line-height:1.58;
    }


    /*==================================================
    INTRO
    ==================================================*/

    .retreading-intro
    {
        gap:11px;

        margin-bottom:30px;
    }


    .retreading-intro-content
    {
        padding:
        23px 19px;

        border-radius:15px;
    }


    .retreading-label
    {
        margin-bottom:10px;

        padding:
        5px 9px;

        font-size:.52rem;
    }


    .retreading-intro-content h2
    {
        font-size:
        clamp(
            1.35rem,
            6.5vw,
            1.8rem
        );
    }


    .retreading-intro-content p
    {
        margin-top:10px;

        font-size:.67rem;

        line-height:1.62;
    }


    .retreading-highlights
    {
        grid-template-columns:1fr;

        gap:6px;

        margin-top:17px;
    }


    .retreading-highlight
    {
        padding:8px;

        border-radius:8px;
    }


    .retreading-highlight-icon
    {
        width:28px;

        height:28px;
    }


    .retreading-highlight strong
    {
        font-size:.59rem;
    }


    .retreading-highlight div span
    {
        font-size:.49rem;
    }


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

    .retreading-intro-visual
    {
        min-height:240px;

        padding:23px;

        border-radius:15px;
    }


    .retreading-intro-visual::before
    {
        width:270px;

        height:270px;
    }


    .retreading-wheel
    {
        width:135px;

        height:135px;
    }


    .retreading-wheel-ring
    {
        inset:10px;
    }


    .retreading-wheel-inner
    {
        width:55px;

        height:55px;
    }


    .retreading-wheel-inner i
    {
        font-size:1.25rem;
    }


    .retreading-visual-label
    {
        margin-top:16px;

        font-size:.5rem;

        letter-spacing:1.7px;
    }


    .retreading-intro-visual strong
    {
        font-size:.84rem;
    }


    .retreading-intro-visual small
    {
        font-size:.49rem;
    }


    /*==================================================
    PROCESO
    ==================================================*/

    .retreading-process-heading
    {
        margin-bottom:21px;
    }


    .retreading-process-heading h2
    {
        font-size:
        clamp(
            1.35rem,
            6.5vw,
            1.8rem
        );
    }


    .retreading-process-heading p
    {
        margin-top:8px;

        padding:
        0 8px;

        font-size:.67rem;

        line-height:1.58;
    }


    /*==================================================
    PASOS
    ==================================================*/

    .retreading-steps
    {
        grid-template-columns:1fr;

        gap:8px;
    }


    .retreading-step
    {
        display:grid;

        grid-template-columns:
        40px
        1fr;

        column-gap:11px;

        padding:
        16px 14px;

        border-radius:12px;
    }


    .retreading-step-icon
    {
        grid-row:
        1 / 3;

        width:37px;

        height:37px;

        margin:0;

        border-radius:10px;
    }


    .retreading-step-icon i
    {
        font-size:.8rem;
    }


    .retreading-step-content > span
    {
        margin-bottom:3px;

        font-size:.48rem;
    }


    .retreading-step-content h3
    {
        font-size:.84rem;
    }


    .retreading-step-content p
    {
        grid-column:2;

        margin-top:6px;

        font-size:.62rem;

        line-height:1.57;
    }


    .retreading-step-number
    {
        top:9px;

        right:10px;

        font-size:1.15rem;
    }


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

    .retreading-cta
    {
        gap:8px;

        margin-top:23px;

        padding:9px;

        border-radius:11px;
    }


    .retreading-cta-icon
    {
        width:33px;

        height:33px;

        border-radius:9px;
    }


    .retreading-cta-icon i
    {
        font-size:.85rem;
    }


    .retreading-cta-content strong
    {
        font-size:.59rem;
    }


    .retreading-cta-content span
    {
        font-size:.49rem;
    }


    .retreading-cta > a
    {
        gap:5px;

        padding:
        8px 9px;

        border-radius:8px;

        font-size:.53rem;
    }


    .retreading-cta > a i
    {
        font-size:.5rem;
    }
}


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

@media(max-width:380px)
{
    .retreading-section
    {
        padding:
        9px 0 18px;
    }


    .retreading-heading
    {
        margin-bottom:19px;
    }


    .retreading-heading h1
    {
        font-size:1.58rem;
    }


    .retreading-heading > p
    {
        font-size:.64rem;
    }


    .retreading-intro-content
    {
        padding:
        20px 16px;
    }


    .retreading-intro-content h2
    {
        font-size:1.28rem;
    }


    .retreading-intro-content p
    {
        font-size:.63rem;
    }


    .retreading-intro-visual
    {
        min-height:220px;
    }


    .retreading-wheel
    {
        width:118px;

        height:118px;
    }


    .retreading-wheel-inner
    {
        width:48px;

        height:48px;
    }


    .retreading-wheel-inner i
    {
        font-size:1.05rem;
    }


    .retreading-process-heading h2
    {
        font-size:1.28rem;
    }


    .retreading-process-heading p
    {
        font-size:.63rem;
    }


    .retreading-step
    {
        grid-template-columns:
        37px
        1fr;

        column-gap:10px;

        padding:
        14px 12px;
    }


    .retreading-step-icon
    {
        width:34px;

        height:34px;
    }


    .retreading-step-content h3
    {
        font-size:.79rem;
    }


    .retreading-step-content p
    {
        font-size:.59rem;
    }


    .retreading-cta-content strong
    {
        font-size:.55rem;
    }


    .retreading-cta-content span
    {
        font-size:.46rem;
    }


    .retreading-cta > a
    {
        padding:
        7px 8px;

        font-size:.5rem;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .retreading-section::after,
    .retreading-kicker i,
    .retreading-heading h1::after,
    .retreading-intro-content::before,
    .retreading-intro-visual::before,
    .retreading-intro-visual::after,
    .retreading-visual-glow,
    .retreading-wheel,
    .retreading-wheel-ring,
    .retreading-wheel-inner,
    .retreading-steps::before
    {
        animation:none;
    }


    .retreading-intro-content,
    .retreading-highlight,
    .retreading-highlight-icon,
    .retreading-step,
    .retreading-step-icon,
    .retreading-cta,
    .retreading-cta > a,
    .retreading-cta > a i
    {
        transition:none;
    }
}