.servicios-banner {
    background-color: var(--wp--preset--color--blue-normal);
    width: 100%;
    height: auto;

    div {
        width: 85%;
        max-width: 1200px;
        margin: 0 auto;

        justify-content: center;
        text-align: center;
        color: white;
        padding: 1rem 0;

        h2 {
            font-size: 40px;
            line-height: 40px;
        }

        p {
            font-size: 18px;
        }
    }
}

.servicios-general-description {
    width: 90%;
    height: auto;
    margin: 0 auto;

    div {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;

        justify-content: center;
        text-align: center;
        padding: 1rem 0;

        h2 {
            color: var(--wp--preset--color--blue-normal);
            font-size: 32px;
            line-height: 32px;
        }

        p {
            font-weight: 200;
            font-size: 18px;
        }
    }
}

.separator {
    width: 100%;
    max-width: 900px;
    height: 1px;
    background-color: #AEAEAE;
    margin: 0 auto;
}

.servicios-sectores {
    width: 90%;
    margin: 0 auto;

    justify-content: center;
    text-align: center;
    padding: 2rem 0;

    h2 {
        color: var(--wp--preset--color--blue-normal);
        font-size: 32px;
        line-height: 1rem;
    }

    p {
        font-weight: 200;
        font-size: 18px;
    }

    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;

        @media screen and (min-width: 768px) {
            grid-template-columns: repeat(7, 1fr);
            gap: 1rem;
        }

        li {
            background-color: var(--wp--preset--color--blue-normal);
            width: 100%;
            height: 130%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            border-radius: 12px;
            gap: 10px;
            line-height: 16px;

            .icon-container {
                width: 60px;
                height: 60px;
                background-color: #4D62A2;
                border-radius: 999px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                i {
                    font-size: 1.5rem;
                }
            }

            @media screen and (min-width: 768px) {
                width: 140px;
                height: 140px;
            }
        }
    }

    @media screen and (min-width: 768px) {
        width: 100%;
        max-width: 1200px;
    }
}

.container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2rem;

    aside {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    article {
        width: 100%;
    }

    @media screen and (min-width: 768px) {
        width: 100%;
        max-width: 1200px;
        flex-direction: row;

        aside {
            width: 20%;
            flex-direction: column;
        }

        article {
            width: 80%;
        }
    }
}

.entry-header {
    .title {
        width: 100%;
        height: fit-content;
        border-radius: 12px;
        background-color: var(--wp--preset--color--blue-light);
        color: var(--wp--preset--color--blue-normal);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 0.5rem;
        margin-bottom: 1rem;

        h1 {
            font-size: 14px;
            line-height: 14px;
        }
    }

    @media screen and (min-width: 768px) {
        .title {
            width: fit-content;
            justify-content: start;
            padding: 0.1rem 3rem;

            h1 {
                font-size: 24px;
                line-height: 24px;
            }
        }
    }
}

.content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    grid-template-rows: auto auto auto; /* Tres filas: content, items/imagen, container */
    gap: 20px;
}

.entry-content {
    grid-column: 1 / -1; /* Ocupa ambas columnas */
    grid-row: 1; /* Primera fila */
}

.list-items {
    grid-column: 1; /* Primera columna */
    grid-row: 2; /* Segunda fila */
}

.imagen-principal {
    grid-column: 2; /* Segunda columna */
    grid-row: 2; /* Segunda fila */
}

.imagen-principal img {
    width: 100%;
    height: auto;
    border-radius: 25px;
}

.image-container {
    grid-column: 1 / -1; /* Ocupa ambas columnas */
    grid-row: 3; /* Tercera fila */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 15px;
    justify-items: center;
    align-items: center;
}

.service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.service-image:first-child {
    grid-column: span 2; /* La primera imagen ocupa ambas columnas */
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .content {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        grid-template-rows: auto auto auto auto;
    }
    
    .entry-content {
        grid-column: 1;
        grid-row: 1;
    }
    
    .list-items {
        grid-column: 1;
        grid-row: 2;
    }
    
    .imagen-principal {
        grid-column: 1;
        grid-row: 3;
    }
    
    .image-container {
        grid-column: 1;
        grid-row: 4;
        grid-template-columns: 1fr 1fr; /* 2 columnas en móvil */
    }
    
    .service-image:first-child {
        grid-column: span 2; /* Mantiene 2 columnas en móvil */
    }
}
/* .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    .entry-content {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .list-items {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    .imagen-principal {
        grid-column: 2 / 3;
        grid-row: 4 / 5;

        img {
            width: 100%;
            height: auto;
            border-radius: 25px;
        }
    }

    .image-container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        justify-items: center;
        align-items: center;
    }

    .service-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
    }

    .service-image:first-child {
        grid-column: span 2;
    }
} */

.list-header {
    color: var(--wp--preset--color--blue-normal);
    font-size: 1.2rem;
    font-weight: 600;
}

.list-items {
    i {
        font-size: 1.2rem;
        color: #1C4ED8;
    }
}

.service-menu-container {
    width: 100%;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1rem;

    li {
        width: 100%;

        a {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            gap: 0.5rem;
            text-decoration: none;
            color: black;
            padding: 0.5rem;
            font-size: 14px;
            line-height: 14px;
            text-transform: capitalize;

            img {
                width: 35px;
                height: 35px;
            }
        }
    }

    @media screen and (min-width: 768px) {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: start;

        li {
            a {
                font-size: 16px;
                line-height: 16px;

                img {
                    width: 32px;
                    height: 32px;
                }
            }
        }
    }
}

.active-service {
    background-color: var(--wp--preset--color--blue-light);
    border-radius: 12px;
}