@charset "utf-8";

/*==================================================
SERVITECAS MCTIRE
RED NACIONAL
==================================================*/

.workshops-section
{
    position:relative;

    width:100%;

    margin:0;

    padding:
    18px 0 35px;

    background:
    #f8f8f8;

    overflow:hidden;

    isolation:isolate;

    scroll-margin-top:20px;
}


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

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

    position:absolute;

    width:520px;
    height:520px;

    top:-260px;
    right:-220px;

    border-radius:50%;

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

    pointer-events:none;

    z-index:-1;
}


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

    position:absolute;

    width:430px;
    height:430px;

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

    border-radius:50%;

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

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

    pointer-events:none;

    z-index:-1;
}


/*==================================================
CONTENEDOR
==================================================*/

.workshops-section .container
{
    position:relative;

    z-index:2;
}


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

.workshops-heading
{
    position:relative;

    max-width:780px;

    margin:
    0 auto 38px;

    padding:0;

    text-align:center;
}


/*==================================================
LÍNEA SUPERIOR
==================================================*/

.workshops-heading-line
{
    width:55px;

    height:3px;

    margin:
    0 auto 13px;

    border-radius:20px;

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


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

.workshops-kicker
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-bottom:10px;

    color:#d71920;

    font-size:.61rem;

    font-weight:800;

    letter-spacing:1.7px;

    line-height:1;

    text-transform:uppercase;
}


.workshops-kicker i
{
    font-size:.68rem;
}


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

.workshops-heading h1
{
    margin:0;

    color:#111;

    font-size:
    clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight:850;

    line-height:1.04;

    letter-spacing:-1.5px;
}


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

    display:block;

    width:42px;

    height:3px;

    margin:
    14px auto 0;

    border-radius:20px;

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


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

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

    margin:
    14px auto 0;

    color:#707070;

    font-size:.78rem;

    line-height:1.7;

    text-align:center;
}


/*==================================================
BLOQUE NETWORK
==================================================*/

.workshops-network
{
    display:grid;

    grid-template-columns:
    .82fr
    1.18fr;

    gap:42px;

    align-items:stretch;

    max-width:1180px;

    margin:0 auto;
}


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

.workshops-visual
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:520px;

    border-radius:26px;

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

    box-shadow:
    0 25px 60px rgba(0,0,0,.14);

    overflow:hidden;

    isolation:isolate;
}


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

.workshops-visual::before
{
    content:"";

    position:absolute;

    width:330px;
    height:330px;

    top:50%;
    left:50%;

    border-radius:50%;

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

    transform:
    translate(-50%,-50%);

    filter:blur(5px);

    animation:
    workshopsGlow 5s ease-in-out infinite;

    pointer-events:none;
}


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

.workshops-visual-grid
{
    position:absolute;

    inset:0;

    opacity:.10;

    background-image:
    linear-gradient(
        rgba(255,255,255,.08) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.08) 1px,
        transparent 1px
    );

    background-size:
    36px 36px;

    -webkit-mask-image:
    radial-gradient(
        circle at center,
        #000 20%,
        transparent 72%
    );

    mask-image:
    radial-gradient(
        circle at center,
        #000 20%,
        transparent 72%
    );
}


/*==================================================
ÓRBITAS
==================================================*/

.workshops-orbit
{
    position:absolute;

    top:50%;
    left:50%;

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

    border-radius:50%;

    transform:
    translate(-50%,-50%);
}


.orbit-one
{
    width:285px;
    height:285px;

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

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

    animation:
    workshopsOrbitOne 14s linear infinite;
}


.orbit-two
{
    width:390px;
    height:390px;

    border:
    1px dashed rgba(215,25,32,.23);

    animation:
    workshopsOrbitTwo 22s linear infinite reverse;
}


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

.workshops-center
{
    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:150px;
    height:150px;

    border-radius:50%;

    background:
    radial-gradient(
        circle at 35% 25%,
        #292929,
        #111 58%,
        #080808
    );

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

    box-shadow:
    0 0 0 12px rgba(255,255,255,.025),
    0 0 0 26px rgba(215,25,32,.035),
    0 20px 45px rgba(0,0,0,.35);

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


/*==================================================
PULSO
==================================================*/

.workshops-center-pulse
{
    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

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

    animation:
    workshopsPulse 2.8s ease-out infinite;

    pointer-events:none;
}


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

.workshops-center-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:45px;
    height:45px;

    margin-bottom:10px;

    color:#fff;

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

    border-radius:13px;

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


.workshops-center-icon i
{
    font-size:1rem;
}


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

.workshops-center strong
{
    color:#fff;

    font-size:.86rem;

    font-weight:850;

    letter-spacing:.2px;
}


.workshops-center > span:not(.workshops-center-pulse)
{
    margin-top:4px;

    color:#888;

    font-size:.53rem;

    letter-spacing:.5px;
}


/*==================================================
PUNTOS
==================================================*/

.network-point
{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#e31b23;

    box-shadow:
    0 0 0 5px rgba(215,25,32,.10),
    0 0 17px rgba(215,25,32,.55);

    animation:
    workshopsPoint 2.8s ease-in-out infinite;
}


.point-01
{
    top:24%;

    left:23%;

    animation-delay:.2s;
}


.point-02
{
    top:19%;

    right:25%;

    animation-delay:.8s;
}


.point-03
{
    top:66%;

    left:18%;

    animation-delay:1.2s;
}


.point-04
{
    right:18%;

    bottom:24%;

    animation-delay:1.8s;
}


.point-05
{
    right:31%;

    top:75%;

    animation-delay:2.2s;
}


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

.workshops-visual-label
{
    position:absolute;

    left:25px;
    bottom:24px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:
    8px 11px;

    color:#aaa;

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

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

    border-radius:9px;

    backdrop-filter:
    blur(8px);

    -webkit-backdrop-filter:
    blur(8px);
}


.workshops-visual-label i
{
    color:#e31b23;

    font-size:.65rem;
}


.workshops-visual-label span
{
    font-size:.52rem;

    letter-spacing:.3px;
}


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

.workshops-content
{
    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;
}


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

.workshops-content-label
{
    display:block;

    margin-bottom:9px;

    color:#d71920;

    font-size:.59rem;

    font-weight:800;

    letter-spacing:1.6px;

    text-transform:uppercase;
}


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

.workshops-content h2
{
    max-width:570px;

    margin:0;

    color:#151515;

    font-size:
    clamp(
        1.7rem,
        3vw,
        2.45rem
    );

    font-weight:850;

    line-height:1.08;

    letter-spacing:-1px;
}


.workshops-content h2 strong
{
    display:block;

    color:#d71920;

    font-weight:850;
}


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

.workshops-content-description
{
    max-width:600px;

    margin:
    14px 0 0;

    color:#707070;

    font-size:.76rem;

    line-height:1.7;

    text-align:justify;
}


/*==================================================
CONTADOR
==================================================*/

.workshops-counter
{
    display:flex;

    align-items:center;

    gap:15px;

    width:max-content;

    margin:
    22px 0 24px;

    padding:
    10px 16px 10px 10px;

    background:#fff;

    border:
    1px solid #e9e9e9;

    border-radius:13px;

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


.workshops-counter strong
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;
    height:52px;

    color:#fff;

    background:
    linear-gradient(
        145deg,
        #e31b23,
        #a70d15
    );

    border-radius:10px;

    font-size:1.35rem;

    font-weight:850;

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


.workshops-counter span
{
    display:flex;

    flex-direction:column;

    color:#333;

    font-size:.65rem;

    font-weight:800;
}


.workshops-counter small
{
    margin-top:3px;

    color:#888;

    font-size:.52rem;

    font-weight:500;
}


/*==================================================
CIUDADES
==================================================*/

.workshops-cities
{
    display:grid;

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

    gap:8px;

    width:100%;
}


/*==================================================
CIUDAD
==================================================*/

.workshop-city
{
    position:relative;

    display:grid;

    grid-template-columns:
    27px
    1fr
    22px;

    align-items:center;

    gap:8px;

    min-width:0;

    padding:
    10px 11px;

    color:#252525;

    background:#fff;

    border:
    1px solid #e8e8e8;

    border-radius:10px;

    text-decoration:none;

    overflow:hidden;

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


/*==================================================
BORDE ANIMADO
==================================================*/

.workshop-city::before
{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:2px;
    height:100%;

    background:
    linear-gradient(
        180deg,
        #ff4c52,
        #b90d15
    );

    transform:
    scaleY(0);

    transform-origin:
    center;

    transition:
    transform .3s ease;
}


.workshop-city:hover
{
    color:#151515;

    transform:
    translateX(4px);

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

    background:#fff;

    box-shadow:
    0 10px 25px rgba(0,0,0,.07);
}


.workshop-city:hover::before
{
    transform:
    scaleY(1);
}


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

.workshop-city-number
{
    color:#b7b7b7;

    font-size:.49rem;

    font-weight:800;

    letter-spacing:.5px;
}


.workshop-city:hover .workshop-city-number
{
    color:#d71920;
}


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

.workshop-city-name
{
    min-width:0;

    overflow:hidden;

    color:#242424;

    font-size:.68rem;

    font-weight:750;

    line-height:1.2;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/*==================================================
ICONO CIUDAD
==================================================*/

.workshop-city > i
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;
    height:22px;

    color:#999;

    background:#f7f7f7;

    border-radius:6px;

    font-size:.48rem;

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


.workshop-city:hover > i
{
    color:#fff;

    background:#d71920;

    transform:
    rotate(8deg);
}


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

.workshops-bottom
{
    display:flex;

    align-items:center;

    gap:14px;

    max-width:1180px;

    margin:
    30px auto 0;

    padding:
    15px 17px;

    background:#fff;

    border:
    1px solid #e8e8e8;

    border-radius:14px;

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


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

.workshops-bottom-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:38px;
    height:38px;

    color:#fff;

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

    border-radius:10px;

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


.workshops-bottom-icon i
{
    font-size:.78rem;
}


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

.workshops-bottom > div:nth-child(2)
{
    flex:1;

    min-width:0;
}


.workshops-bottom strong
{
    display:block;

    color:#222;

    font-size:.68rem;

    font-weight:800;
}


.workshops-bottom p
{
    margin:
    3px 0 0;

    color:#818181;

    font-size:.57rem;

    line-height:1.5;
}


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

.workshops-bottom-button
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    flex-shrink:0;

    padding:
    10px 14px;

    color:#fff;

    background:#111;

    border-radius:9px;

    font-size:.59rem;

    font-weight:750;

    text-decoration:none;

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

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


.workshops-bottom-button:hover
{
    color:#fff;

    background:#d71920;

    transform:
    translateY(-2px);

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


.workshops-bottom-button i
{
    font-size:.55rem;

    transition:
    transform .3s ease;
}


.workshops-bottom-button:hover i
{
    transform:
    translateX(3px);
}


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

@keyframes workshopsOrbitOne
{
    from
    {
        transform:
        translate(-50%,-50%)
        rotate(0deg);
    }

    to
    {
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }
}


@keyframes workshopsOrbitTwo
{
    from
    {
        transform:
        translate(-50%,-50%)
        rotate(0deg);
    }

    to
    {
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }
}


@keyframes workshopsGlow
{
    0%,
    100%
    {
        transform:
        translate(-50%,-50%)
        scale(.92);

        opacity:.75;
    }

    50%
    {
        transform:
        translate(-50%,-50%)
        scale(1.08);

        opacity:1;
    }
}


@keyframes workshopsPulse
{
    0%
    {
        transform:scale(.85);

        opacity:.8;
    }

    70%,
    100%
    {
        transform:scale(1.35);

        opacity:0;
    }
}


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

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


@keyframes workshopsPoint
{
    0%,
    100%
    {
        transform:scale(.8);

        opacity:.55;
    }

    50%
    {
        transform:scale(1.35);

        opacity:1;
    }
}


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

@media(max-width:1050px)
{
    .workshops-network
    {
        grid-template-columns:
        .78fr
        1.22fr;

        gap:28px;
    }


    .workshops-visual
    {
        min-height:480px;
    }


    .orbit-one
    {
        width:250px;
        height:250px;
    }


    .orbit-two
    {
        width:345px;
        height:345px;
    }


    .workshops-cities
    {
        gap:7px;
    }


    .workshop-city
    {
        padding:
        9px;
    }
}


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

@media(max-width:850px)
{
    .workshops-network
    {
        grid-template-columns:
        1fr;

        gap:30px;
    }


    .workshops-visual
    {
        min-height:400px;

        max-width:650px;

        width:100%;

        margin:0 auto;
    }


    .workshops-content
    {
        max-width:650px;

        width:100%;

        margin:0 auto;
    }


    .workshops-content h2
    {
        max-width:600px;
    }


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


    .workshops-bottom
    {
        max-width:650px;
    }
}


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

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


    .workshops-heading-line
    {
        width:40px;

        height:2px;

        margin-bottom:10px;
    }


    .workshops-kicker
    {
        margin-bottom:8px;

        font-size:.55rem;

        letter-spacing:1.3px;
    }


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

        letter-spacing:-.8px;
    }


    .workshops-heading h1::after
    {
        width:34px;

        height:2px;

        margin-top:11px;
    }


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

        padding:
        0 8px;

        font-size:.69rem;

        line-height:1.6;
    }


    /* VISUAL */

    .workshops-visual
    {
        min-height:330px;

        border-radius:18px;
    }


    .orbit-one
    {
        width:190px;
        height:190px;
    }


    .orbit-two
    {
        width:270px;
        height:270px;
    }


    .workshops-center
    {
        width:120px;
        height:120px;
    }


    .workshops-center-icon
    {
        width:37px;
        height:37px;

        margin-bottom:7px;

        border-radius:10px;
    }


    .workshops-center-icon i
    {
        font-size:.8rem;
    }


    .workshops-center strong
    {
        font-size:.72rem;
    }


    .workshops-center > span:not(.workshops-center-pulse)
    {
        font-size:.46rem;
    }


    .workshops-visual-label
    {
        left:15px;
        bottom:15px;

        padding:
        7px 9px;
    }


    .workshops-visual-label span
    {
        font-size:.46rem;
    }


    .point-01
    {
        left:18%;
    }


    .point-02
    {
        right:18%;
    }


    .point-03
    {
        left:13%;
    }


    .point-04
    {
        right:14%;
    }


    .point-05
    {
        right:25%;
    }


    /* CONTENIDO */

    .workshops-content-label
    {
        font-size:.55rem;

        letter-spacing:1.4px;
    }


    .workshops-content h2
    {
        font-size:
        clamp(
            1.55rem,
            7vw,
            1.9rem
        );

        letter-spacing:-.6px;
    }


    .workshops-content-description
    {
        margin-top:11px;

        font-size:.68rem;

        line-height:1.6;

        text-align:justify;
    }


    /* CONTADOR */

    .workshops-counter
    {
        margin:
        18px 0 18px;

        padding:
        8px 12px 8px 8px;

        gap:10px;
    }


    .workshops-counter strong
    {
        width:43px;
        height:43px;

        border-radius:8px;

        font-size:1.05rem;
    }


    .workshops-counter span
    {
        font-size:.57rem;
    }


    .workshops-counter small
    {
        font-size:.47rem;
    }


    /* CIUDADES */

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

        gap:6px;
    }


    .workshop-city
    {
        grid-template-columns:
        22px
        1fr
        19px;

        gap:6px;

        padding:
        9px 8px;

        border-radius:8px;
    }


    .workshop-city-number
    {
        font-size:.43rem;
    }


    .workshop-city-name
    {
        font-size:.61rem;
    }


    .workshop-city > i
    {
        width:19px;
        height:19px;

        font-size:.43rem;
    }


    /* CIERRE */

    .workshops-bottom
    {
        display:grid;

        grid-template-columns:
        38px
        1fr;

        gap:10px;

        margin-top:20px;

        padding:
        12px;

        border-radius:11px;
    }


    .workshops-bottom-icon
    {
        width:36px;
        height:36px;
    }


    .workshops-bottom strong
    {
        font-size:.61rem;
    }


    .workshops-bottom p
    {
        font-size:.52rem;
    }


    .workshops-bottom-button
    {
        grid-column:
        1 / -1;

        width:100%;

        padding:
        9px 12px;

        font-size:.55rem;
    }
}


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

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


    .workshops-heading h1
    {
        font-size:1.65rem;
    }


    .workshops-heading p
    {
        font-size:.65rem;
    }


    .workshops-visual
    {
        min-height:290px;
    }


    .orbit-one
    {
        width:165px;
        height:165px;
    }


    .orbit-two
    {
        width:235px;
        height:235px;
    }


    .workshops-center
    {
        width:105px;
        height:105px;
    }


    .workshops-center-icon
    {
        width:33px;
        height:33px;
    }


    .workshops-center strong
    {
        font-size:.66rem;
    }


    .workshops-content h2
    {
        font-size:1.45rem;
    }


    .workshops-content-description
    {
        font-size:.64rem;
    }


    .workshops-cities
    {
        gap:5px;
    }


    .workshop-city
    {
        grid-template-columns:
        19px
        1fr
        17px;

        gap:5px;

        padding:
        8px 6px;
    }


    .workshop-city-name
    {
        font-size:.57rem;
    }


    .workshop-city > i
    {
        width:17px;
        height:17px;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .workshops-visual::before,
    .workshops-orbit,
    .workshops-center,
    .workshops-center-pulse,
    .network-point
    {
        animation:none;
    }


    .workshop-city,
    .workshops-bottom-button
    {
        transition:none;
    }
}