/* BIENVENIDA */
    .bienvenida {
        margin-top: 60px;
        border-radius: 40px;
        width: 100%;  
        height: 100vh;
        /* Imagen oscurecida */
        background-image: 
            linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
            ),
            url("../images/index/PortadaMejoraContinua.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    .bienvenida > .problema > p{
        width: 55%;
        height: auto;
        padding: 20px;
        color: #ffffff;
        font-size: 1.6rem;
        /* background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20px; */
        line-height: 2.6rem;
    }

    .bienvenida > .comoSolucionarProblema > p{
        margin-left: 60%;
        width: 35%;
        height: auto;
        padding: 20px;
        color: #ffffff;
        font-size: 1.6rem;
        /* background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20px; */
        line-height: 2.6rem;
    }
/* FIN BIENVENIDA */

/*COMO AFRONTAR EL RETO */

    .comoAfrontarReto > .gridImagenTexto > .cuadros > .cuadro > .cuadroTexto {
        background-color: rgba(82, 82, 81, 0.192);
        color: darkblue;
        width: 93%;
        height: 460px;
        border-radius: 40px;
        padding: 20px;
    }
    .comoAfrontarReto > .gridImagenTexto > .cuadros > .cuadro > .cuadroTexto > h2 {
        font-size: 1.8rem;
        margin: 0px 0px 20px 0px;
    }

    .comoAfrontarReto > .gridImagenTexto > .cuadros > .cuadro > .cuadroTexto > p, li{
        font-size: 1.4rem;
        line-height: 2rem;
    }

    .comoAfrontarReto > .gridImagenTexto > .cuadros > .cuadro > .cuadroTexto > li{
        padding-left: 10px;
    }

    .comoAfrontarReto > .gridImagenTexto > .cuadros > .cuadro > .cuadroTexto > ul {
        list-style: none; /* Quitamos los marcadores */
        padding: 0; /* Quitamos el padding por defecto de la lista */
        margin-left: -15%; /* Separamos la lista de la izquierda */
    }

    .comoAfrontarReto > .gridImagenTexto > .cuadros > .cuadro > .cuadroTexto > i {
        padding-right: 20px;
    }

    .comoAfrontarReto > .gridImagenTexto > .cuadros > .cuadro > .cuadroImagen > img{
        border-radius: 40px;
    }

    .comoAfrintarReto > #comoAfrintarReto > li {
        font-size: 1.4rem;
    }
/* FIN COMO AFRONTAR RETO */

/* INICIO SERVICIOS */
    .servicios{
    
        
        background-image: url(../images/index/Industria-4.0.jpg);
        border-top: 10px solid white;
        border-bottom: 10px solid white;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0px -40px 79px -8px rgba(0,0,0,0.58);
        border-radius: 30px;
    }

    .servicios > .gruposServicios {
        background-color: rgba(210, 210, 210, 0.85);
        height: auto;
        width: 100%;
        border-radius: 25px;
    }
    .servicios> .gruposServicios > .contenedorColumnas {
        width: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; 

    }

    .gruposServicios>.contenedorColumnas>.columna {
        padding: 10px 10px 10px 10px;
        margin: 10px 20px 10px 20px;
        text-align: center;
        border-bottom: 5px solid transparent;
        border-radius: 10px;
        transition: 1s;
    }
    .gruposServicios > .contenedorColumnas > .columna:hover {
        border-bottom: 5px solid #00008b;
    }

    /* el operador :nth-child(#) se utiliza para hacer referencia a uno de los elementos que hay dentro
    de la clase columna, sin tener que hacer referencia a la clase o el tag que tiene.
    Lo hace por posiciones, 1 primer elemento, 2 segundo elemento, ...
    De esta forma podemos cambiar el formato por la posición en la que hemos puesto los elementos, no por 
    el tipo de elemento. Por ejemplo si en una columnaa el orden es icono, texto, explicación, y en otra
    columnaa el orden es texto, icono, explicación, con la orden que tenemos aquí aplicará un 300% de
    incremento en el tamaño de letra de el icono en la primera columnaa, y en el texto en la segunda */
    .gruposServicios > .contenedorColumnas > .columna > a > .fas { 
        font-size: 3rem;
    }

    .gruposServicios > .contenedorColumnas > .columna :nth-child(2) {
        font-size: 1.5rem;
        font-weight: 900;
        height: 50px;
        transition: 1s;
    }
    /* La función Hover se utiliza igual que cuando lo hacíamos refenciando a una clase o un tag */
    .gruposServicios > .contenedorColumnas > .columna :nth-child(2):hover {
        letter-spacing: 1px
    }

    .gruposServicios > .contenedorColumnas > .columna :nth-child(3) {
        letter-spacing: 2px;
    }

/* FIN SERVICIOS */