/* =========================================================
   SERVICIOS - HERO
   ========================================================= */

.servicios-hero {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: var(--color-fondo);
}


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

.servicios-hero-contenido {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 0px 25% 25px 8%;

    text-align: center;
}


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

.servicios-hero-contenido h1 {
    margin: 0;

    color: var(--color-blanco);

    font-family: var(--fuente-principal);

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

    font-weight: 600;

    letter-spacing: 1px;
}


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

.servicios-hero-contenido h2 {
    margin: 12px 0 0;

    color: var(--color-cielo);

    font-family: var(--fuente-principal);

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

    font-weight: 500;

    line-height: 1.25;
}


/* =========================================================
   PÁRRAFO
   ========================================================= */

.servicios-hero-contenido p {
    margin: 14px auto 0;

    max-width: 750px;

    color: var(--color-blanco);

    font-family: var(--fuente-principal);

    font-size: clamp(0.8rem, 1.2vw, 1rem);

    font-weight: 400;

    line-height: 1.5;
}


/* =========================================================
   DESTELLO
   ========================================================= */

.servicios-destello {
    width: 55%;

    max-width: 600px;

    height: 8px;

    margin: 18px auto 0;

    border-radius: 50%;

    background: radial-gradient(
        ellipse at center,

        rgba(255, 255, 255, 0.75) 0%,

        rgba(255, 255, 255, 0.45) 5%,

        rgba(135, 206, 250, 0.30) 20%,

        rgba(47, 92, 235, 0.16) 40%,

        rgba(47, 92, 235, 0.05) 62%,

        transparent 100%
    );

    filter: blur(1px);
}


/* =========================================================
   IMAGEN
   ========================================================= */

.servicios-hero-imagen {
    position: absolute;

    z-index: 1;

    top: 0;
    right: 0;

    width: 30%;

    max-width: 500px;

    pointer-events: none;
}

.servicios-hero-imagen img {
    display: block;

    width: 100%;

    height: auto;
}


/* =========================================================
   DEGRADADO PARA INTEGRAR LA CÁMARA
   ========================================================= */

.servicios-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to right,

            var(--color-fondo) 0%,

            rgba(2, 4, 8, 0.92) 35%,

            rgba(2, 4, 8, 0.55) 65%,

            transparent 100%
        );
}


/* =========================================================
   TABLET - HERO
   ========================================================= */

@media (max-width: 991px) {

    .servicios-hero-contenido {
        padding: 22px 22% 22px 6%;
    }

    .servicios-hero-imagen {
        width: 40%;
    }

    .servicios-destello {
        width: 60%;
    }
}


/* =========================================================
   MÓVIL - HERO
   ========================================================= */

@media (max-width: 576px) {

    .servicios-hero {
        min-height: 0;
    }

    .servicios-hero-contenido {
        padding: 20px 25px 170px;

        text-align: center;
    }

    .servicios-hero-contenido h1 {
        font-size: 1.7rem;
    }

    .servicios-hero-contenido h2 {
        margin-top: 10px;

        font-size: 1.15rem;
    }

    .servicios-hero-contenido p {
        margin-top: 14px;

        font-size: 0.75rem;

        line-height: 1.5;
    }

    .servicios-destello {
        width: 75%;

        height: 7px;

        margin-top: 16px;
    }

    .servicios-hero-imagen {
        top: auto;

        bottom: 0;

        right: -20px;

        width: 70%;

        max-width: 300px;
    }

    .servicios-hero::after {
        background:
            linear-gradient(
                to bottom,

                var(--color-fondo) 0%,

                rgba(2, 4, 8, 0.70) 55%,

                rgba(2, 4, 8, 0.15) 100%
            );
    }
}


/* =========================================================
   SERVICIOS - SECCIÓN DE CARDS
   ========================================================= */

.seccion-servicios {
    position: relative;

    width: 100%;

    padding: 45px 4% 90px;

    background-color: var(--color-fondo);
}


/* =========================================================
   CONTENEDOR DE SERVICIOS
   ========================================================= */

.contenedor-servicios {
    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    /* 6 cards por fila */
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.card-servicio {
    position: relative;

    min-width: 0;

    padding: 15px 15px 25px;

    border-radius: 10px;

    background: linear-gradient(
        to bottom,

        rgba(47, 92, 235, 0.30) 0%,

        rgba(47, 92, 235, 0.16) 5%,

        rgba(2, 4, 8, 0.95) 100%
    );

    border: 1px solid rgba(97, 163, 240, 0.25);

    overflow: hidden;

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


/* =========================================================
   HOVER DE LA CARD
   ========================================================= */

.card-servicio:hover {
    transform: translateY(-6px);

    border-color: rgba(97, 163, 240, 0.65);

    box-shadow:
        0 0 12px rgba(97, 163, 240, 0.25),
        0 0 30px rgba(47, 92, 235, 0.18);
}


/* =========================================================
   ICONO + TÍTULO
   ========================================================= */

.servicio-encabezado {
    min-height: 45px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-align: center;
}


/* =========================================================
   ICONO COMO IMAGEN
   ========================================================= */

.servicio-encabezado img {
    width: 24px;

    height: 24px;

    object-fit: contain;

    flex-shrink: 0;

    display: block;
}


/* =========================================================
   TÍTULO DEL SERVICIO
   ========================================================= */

.servicio-encabezado h3 {
    max-width: 150px;

    margin: 0;

    color: var(--color-blanco);

    font-family: var(--fuente-principal);

    font-size: 0.88rem;

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: 0.5px;
}


/* =========================================================
   IMAGEN DEL SERVICIO
   ========================================================= */

.servicio-imagen {
    width: 100%;

    margin-top: 10px;

    display: flex;

    justify-content: center;

    align-items: center;
}


.servicio-imagen img {
    display: block;

    width: 100%;

    max-width: 190px;

    height: auto;

    border-radius: 5px;
}


/* =========================================================
   TEXTO DEL SERVICIO
   ========================================================= */

.servicio-texto {
    margin-top: 18px;

    text-align: center;
}


.servicio-texto p {
    margin: 0;

    color: var(--color-blanco);

    font-family: var(--fuente-principal);

    font-size: 0.78rem;

    font-weight: 400;

    line-height: 1.5;
}


/* =========================================================
   ÚLTIMAS 2 CARDS CENTRADAS - ESCRITORIO
   ========================================================= */

.contenedor-servicios .card-servicio:nth-child(13) {
    grid-column: 3;
}


.contenedor-servicios .card-servicio:nth-child(14) {
    grid-column: 4;
}


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

@media (max-width: 1200px) {

    .contenedor-servicios {
        gap: 15px;
    }

    .card-servicio {
        padding: 20px 10px 22px;
    }

    .servicio-encabezado {
        gap: 7px;
    }

    .servicio-encabezado img {
        width: 23px;

        height: 23px;
    }

    .servicio-encabezado h3 {
        max-width: 130px;

        font-size: 0.72rem;
    }

    .servicio-imagen img {
        max-width: 150px;
    }

    .servicio-texto p {
        font-size: 0.62rem;
    }
}


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

@media (max-width: 991px) {

    .seccion-servicios {
        padding: 40px 3% 70px;
    }


    /* 
       6 columnas internas.
       Cada card ocupa 2 columnas,
       por lo tanto se mantienen 3 cards por fila.
    */

    .contenedor-servicios {
        grid-template-columns: repeat(6, minmax(0, 1fr));

        gap: 18px;
    }


    .contenedor-servicios .card-servicio {
        grid-column: span 2;
    }


    /* Últimas dos centradas */

    .contenedor-servicios .card-servicio:nth-child(13) {
        grid-column: 2 / 4;
    }


    .contenedor-servicios .card-servicio:nth-child(14) {
        grid-column: 4 / 6;
    }


    .card-servicio {
        padding: 22px 15px 25px;
    }


    .servicio-encabezado {
        min-height: 50px;

        gap: 8px;
    }


    .servicio-encabezado img {
        width: 26px;

        height: 26px;
    }


    .servicio-encabezado h3 {
        max-width: 160px;

        font-size: 0.8rem;
    }


    .servicio-imagen {
        margin-top: 20px;
    }


    .servicio-imagen img {
        max-width: 190px;
    }


    .servicio-texto p {
        font-size: 0.68rem;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 576px) {

    .seccion-servicios {
        padding: 35px 20px 60px;
    }


    .contenedor-servicios {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .contenedor-servicios .card-servicio {
        grid-column: 1;
    }


    /* En móvil las últimas 2 vuelven a ocupar una sola fila */

    .contenedor-servicios .card-servicio:nth-child(13),
    .contenedor-servicios .card-servicio:nth-child(14) {
        grid-column: 1;
    }


    .card-servicio {
        width: 100%;

        padding: 25px 20px 28px;

        border-radius: 20px;
    }


    .servicio-encabezado {
        min-height: auto;

        justify-content: center;

        gap: 10px;
    }


    .servicio-encabezado img {
        width: 30px;

        height: 30px;
    }


    .servicio-encabezado h3 {
        max-width: 220px;

        font-size: 0.9rem;
    }


    .servicio-imagen {
        margin-top: 20px;
    }


    .servicio-imagen img {
        width: 85%;

        max-width: 280px;
    }


    .servicio-texto {
        margin-top: 18px;
    }


    .servicio-texto p {
        font-size: 0.75rem;

        line-height: 1.6;
    }
}


/* =========================================================
   DIAGRAMA DE SERVICIOS
   ========================================================= */

.diagrama-servicios {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 55px;

    padding: 0 3%;

    box-sizing: border-box;
}


.contenedor-diagrama {
    width: 100%;

    max-width: 1100px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 0 auto;
}


.diagrama-paso {
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.diagrama-imagen {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


.diagrama-imagen img {
    display: block;

    width: 100%;

    max-width: 95px;

    height: auto;

    object-fit: contain;
}


.diagrama-paso h3 {
    margin: 10px 0 0;

    color: var(--color-blanco);

    font-family: var(--fuente-principal);

    font-size: 0.65rem;

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: 0.4px;

    text-align: center;
}
/* =========================================================
   FLECHAS DEL DIAGRAMA
   ========================================================= */

.diagrama-flecha {
    flex-shrink: 0;

    width: 45px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   FLECHA
   ========================================================= */

.diagrama-flecha::after {
    content: "→";

    display: block;

    color: var(--color-cielo);

    font-family: Arial, sans-serif;

    font-size: 1.8rem;

    font-weight: 300;

    line-height: 1;

    text-shadow:
        0 0 5px rgba(97, 163, 240, 0.9),
        0 0 12px rgba(47, 92, 235, 0.7);
}
/* =========================================================
   BARRA DE INFORMACIÓN
   ========================================================= */

.barra-informacion {
    position: relative;

    border-top: 1px solid rgba(97, 163, 240, 0.35);

    border-bottom: 1px solid rgba(97, 163, 240, 0.35);
}