@charset "utf-8";

/*==================================================
====================================================
    SERVICIOS MCTIRE
    DISEÑO PREMIUM
    COMPATIBILIDAD MULTINAVEGADOR
====================================================
==================================================*/


/*==================================================
    SECCIÓN
==================================================*/

.services-section
{
    position:relative;

    padding:10px 0;

    background:#f3f3f3;

    overflow:hidden;

    isolation:isolate;
}


/*==================================================
    FONDO DINÁMICO
==================================================*/

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

    position:absolute;

    top:-20%;
    right:-20%;
    bottom:-20%;
    left:-20%;

    z-index:-5;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(215,25,32,.13),
            transparent 24%
        ),

        radial-gradient(
            circle at 85% 35%,
            rgba(215,25,32,.09),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #f7f7f7 0%,
            #ededed 45%,
            #f8f8f8 100%
        );

    animation:
        servicesBackgroundMove
        14s
        ease-in-out
        infinite
        alternate;
}


/*==================================================
    ONDA ROJA
==================================================*/

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

    position:absolute;

    top:-35%;
    left:-20%;

    width:140%;
    height:170%;

    z-index:-4;

    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(215,25,32,.035) 42%,
            rgba(215,25,32,.10) 48%,
            rgba(255,255,255,.55) 51%,
            rgba(215,25,32,.035) 55%,
            transparent 63%
        );

    transform:translateX(-35%);

    animation:
        servicesWave
        9s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}


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

.services-section .container
{
    position:relative;

    z-index:3;
}


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

.services-heading
{
    position:relative;

    max-width:700px;

    margin:0 auto 32px;

    text-align:center;

    z-index:4;

    animation:
        servicesHeadingReveal
        .9s
        cubic-bezier(.22,.61,.36,1)
        both;
}


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

.section-label
{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.72rem;

    font-weight:900;

    letter-spacing:1.8px;

    text-transform:uppercase;
}


.section-label::before,
.section-label::after
{
    content:"";

    display:block;

    width:26px;

    height:2px;
}


.section-label::before
{
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary)
        );
}


.section-label::after
{
    background:
        linear-gradient(
            90deg,
            var(--primary),
            transparent
        );
}


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

.services-heading h2
{
    position:relative;

    margin:0;

    color:#111;

    font-size:
        clamp(
            1.6rem,
            2.5vw,
            2.2rem
        );

    line-height:1.1;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:-.6px;
}


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

.services-heading h2::after
{
    content:"";

    display:block;

    width:65px;

    height:3px;

    margin:11px auto 0;

    border-radius:20px;

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

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


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

.services-heading p
{
    max-width:620px;

    margin:12px auto 0;

    color:#666;

    font-size:.95rem;

    line-height:1.6;
}


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

.services-grid
{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:14px;

    z-index:4;
}


/*==================================================
    HALO CENTRAL
==================================================*/

.services-grid::before
{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:430px;
    height:430px;

    border-radius:50%;

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

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

    z-index:-2;

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


/*==================================================
    PUNTOS DE FONDO
==================================================*/

.services-grid::after
{
    content:"";

    position:absolute;

    top:-30px;
    right:-30px;
    bottom:-30px;
    left:-30px;

    z-index:-1;

    opacity:.45;

    background-image:
        radial-gradient(
            rgba(215,25,32,.22) 1px,
            transparent 1px
        );

    background-size:26px 26px;

    animation:
        servicesDots
        18s
        linear
        infinite;
}


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

.service-card
{
    position:relative;

    min-height:250px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:24px 18px;

    color:#111;

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

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

    border-radius:16px;

    text-decoration:none;

    overflow:hidden;

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

    opacity:1;

    animation:
        serviceCardReveal
        .8s
        cubic-bezier(.22,.61,.36,1)
        both;

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s ease,
        border-color .35s ease,
        background .35s ease;
}


/*==================================================
    ENTRADA ESCALONADA
==================================================*/

.service-card:nth-child(1)
{
    animation-delay:.10s;
}

.service-card:nth-child(2)
{
    animation-delay:.18s;
}

.service-card:nth-child(3)
{
    animation-delay:.26s;
}

.service-card:nth-child(4)
{
    animation-delay:.34s;
}

.service-card:nth-child(5)
{
    animation-delay:.42s;
}

.service-card:nth-child(6)
{
    animation-delay:.50s;
}


/*==================================================
    BORDE ANIMADO
    SIN MASK
==================================================*/

.service-card::before
{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    border-radius:
        16px
        16px
        0
        0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(215,25,32,.30) 25%,
            rgba(215,25,32,.95) 50%,
            rgba(215,25,32,.30) 75%,
            transparent 100%
        );

    opacity:.35;

    transform:
        scaleX(.35);

    transform-origin:center;

    transition:
        transform .6s ease,
        opacity .4s ease;
}


/*==================================================
    REFLEJO
==================================================*/

.service-card::after
{
    content:"";

    position:absolute;

    top:-120%;

    left:-80%;

    width:45%;

    height:320%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.85),
            transparent
        );

    transform:
        rotate(18deg);

    opacity:0;

    pointer-events:none;
}


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

.service-icon
{
    position:relative;

    width:54px;
    height:54px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:20px;

    border-radius:15px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #111,
            #292929
        );

    font-size:1.2rem;

    box-shadow:
        0 7px 15px
        rgba(0,0,0,.10);

    transition:
        transform .5s cubic-bezier(.22,.61,.36,1),
        background .35s ease,
        box-shadow .4s ease;
}


/*==================================================
    HALO ICONO
==================================================*/

.service-icon::before
{
    content:"";

    position:absolute;

    top:-6px;
    right:-6px;
    bottom:-6px;
    left:-6px;

    border-radius:18px;

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

    opacity:0;

    transform:scale(.7);

    transition:
        transform .45s ease,
        opacity .35s ease;
}


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

.service-content
{
    position:relative;

    z-index:2;
}


.service-content h3
{
    margin:0 0 8px;

    color:#111;

    font-size:1rem;

    font-weight:900;

    line-height:1.25;
}


.service-content p
{
    min-height:48px;

    margin:0;

    color:#777;

    font-size:.76rem;

    line-height:1.75;
}


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

.service-link
{
    display:flex;

    align-items:center;

    gap:7px;

    margin-top:18px;

    color:var(--primary);

    font-size:.7rem;

    font-weight:900;

    letter-spacing:.5px;

    text-transform:uppercase;
}


.service-link i
{
    transition:
        transform .35s
        cubic-bezier(.22,.61,.36,1);
}


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

.service-card:hover
{
    transform:
        translateY(-10px);

    background:#ffffff;

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

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


.service-card:hover::before
{
    opacity:1;

    transform:
        scaleX(1);
}


.service-card:hover::after
{
    opacity:1;

    left:140%;

    transition:
        left .9s ease,
        opacity .25s ease;
}


.service-card:hover .service-icon
{
    background:
        linear-gradient(
            145deg,
            var(--primary),
            #a90000
        );

    transform:
        translateY(-4px)
        rotate(-5deg)
        scale(1.08);

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


.service-card:hover .service-icon::before
{
    opacity:1;

    transform:
        scale(1);
}


.service-card:hover .service-link i
{
    transform:
        translateX(6px);
}


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

@keyframes servicesBackgroundMove
{
    0%
    {
        transform:
            scale(1)
            translate3d(0,0,0);
    }

    50%
    {
        transform:
            scale(1.04)
            translate3d(2%,-1%,0);
    }

    100%
    {
        transform:
            scale(1.08)
            translate3d(-2%,2%,0);
    }
}


@keyframes servicesWave
{
    0%
    {
        transform:
            translateX(-55%)
            rotate(0deg);
    }

    50%
    {
        transform:
            translateX(0%)
            rotate(2deg);
    }

    100%
    {
        transform:
            translateX(55%)
            rotate(0deg);
    }
}


@keyframes servicesHeadingReveal
{
    from
    {
        opacity:0;

        transform:
            translateY(25px);
    }

    to
    {
        opacity:1;

        transform:
            translateY(0);
    }
}


@keyframes servicesTitleLine
{
    0%,
    100%
    {
        width:45px;

        opacity:.55;
    }

    50%
    {
        width:100px;

        opacity:1;
    }
}


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

        opacity:.35;
    }

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

        opacity:.75;
    }
}


@keyframes servicesDots
{
    from
    {
        transform:
            translate(0,0);
    }

    to
    {
        transform:
            translate(26px,26px);
    }
}


@keyframes serviceCardReveal
{
    0%
    {
        opacity:0;

        transform:
            translateY(35px)
            scale(.94);
    }

    70%
    {
        opacity:1;

        transform:
            translateY(-4px)
            scale(1.01);
    }

    100%
    {
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


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

@media(max-width:1100px)
{
    .services-grid
    {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}


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

@media(max-width:800px)
{
    .services-grid
    {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;
    }
}


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

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


    .services-heading h2
    {
        font-size:1.7rem;
    }


    .services-heading p
    {
        font-size:.82rem;
    }


    .services-grid
    {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }


    .service-card
    {
        min-height:220px;

        padding:18px 14px;

        border-radius:13px;
    }


    .service-card::before
    {
        border-radius:
            13px
            13px
            0
            0;
    }


    .service-icon
    {
        width:46px;
        height:46px;

        margin-bottom:16px;

        border-radius:12px;

        font-size:1rem;
    }


    .service-content h3
    {
        font-size:.88rem;
    }


    .service-content p
    {
        min-height:48px;

        font-size:.69rem;

        line-height:1.65;
    }


    .service-link
    {
        margin-top:14px;

        font-size:.61rem;
    }


    .services-grid::before
    {
        width:300px;
        height:300px;
    }
}


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

@media(prefers-reduced-motion:reduce)
{
    .services-section::before,
    .services-section::after,
    .services-heading,
    .services-heading h2::after,
    .services-grid::before,
    .services-grid::after,
    .service-card,
    .service-card::before,
    .service-card::after
    {
        animation:none !important;
    }


    .service-card,
    .service-icon,
    .service-link i
    {
        transition:none !important;
    }
}