/* INICIO INTRODUCCIÓN */
    .introduccion {
        margin-top: 60px;
        width: 100%;
        
    }

    .tarjetaIntroduccion {
        width: 80%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        z-index: 0;
        margin: -400px 0px 0px 10%;
        
    }

    .tarjetaIntroduccion > .textoIntroduccion {
        width: auto;
        margin: 0px;
        background-color: darkblue;
        padding: 20px;
    }

    .tarjetaIntroduccion > .textoIntroduccion h1, 
    .tarjetaIntroduccion > .textoIntroduccion p, 
    .tarjetaIntroduccion > .textoIntroduccion li, 
    .tarjetaIntroduccion > .textoIntroduccion .fas {
        color: whitesmoke;
        padding-right: 15px;
    }

    .tarjetaIntroduccion > .textoIntroduccion h1 {
        font-size: 3rem;
    }

    .tarjetaIntroduccion > .textoIntroduccion  p, 
    .tarjetaIntroduccion > .textoIntroduccion  li {
        font-size: 1.3rem;
        padding-bottom: 10px;
    }

    .tarjetaIntroduccion > .imagenIntroduccion img{
        height: 100%;
        width: 100%;
        object-fit: cover;
      }

    
/* FIN INTRODUCCIÓN */

/* INICIO TARJETAS SERVICIOS */
    .paqueteServicios {
        
        background-color: rgb(235, 235, 235);
        width: 76%;
        margin-left: 10%;
        -webkit-box-shadow: 7px 3px 84px 10px rgba(0,0,0,0.57);
        -moz-box-shadow: 7px 3px 84px 10px rgba(0,0,0,0.57);
        box-shadow: 7px 3px 84px 10px rgba(0,0,0,0.57);
        padding: 30px;
    }

    .paqueteServicios > .tarjetasServicios {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 20px;
    }

    .paqueteServicios > .tarjetasServicios > .servicio {
        height: 600px;
        -webkit-box-shadow: 7px 3px 23px -16px rgba(0,0,0,0.57);
        -moz-box-shadow: 7px 3px 23px -16px rgba(0,0,0,0.57);
        box-shadow: 7px 3px 23px -16px rgba(0,0,0,0.57);
    }

    .paqueteServicios > .tarjetasServicios > .servicio > .imagen {
        width: 100%;
        height: 230px;
    }
    
    .paqueteServicios > .tarjetasServicios > .servicio > .imagen img {
        width: 100%;
        height: 230px;
        object-fit: cover;
    }

    .paqueteServicios > .tarjetasServicios > .servicio > .titulo {
        height: 60px;
        background-color: darkblue;
        text-align: center;
    }

    .paqueteServicios > .tarjetasServicios > .servicio > .titulo h1{
        margin: 0px;
        padding: 13px 0px 0px 0px;
        color: whitesmoke;
    }

    .paqueteServicios > .tarjetasServicios > .servicio > .descripcion {
        height: 220px;
        padding: 10px;
        background-color: whitesmoke;
        font-size: 1.2rem;
    }

    .paqueteServicios > .tarjetasServicios > .servicio > .detalleServicios {
        height: 70px;
        display: flex;
        justify-content: center;
        background-color: whitesmoke;
        
    }

    .paqueteServicios > .tarjetasServicios > .servicio > .detalleServicios > .boton {
        height: 50px;
        width: 200px;
        background-color: darkblue;
        color: whitesmoke;
        font-size: 1.2rem;
        transition: 0.5s;
    }

    .paqueteServicios > .tarjetasServicios > .servicio > .detalleServicios > .boton:hover {
        background-color: lightblue;
        color: darkblue;
        font-weight: 600;
    }

    
/* FIN TARJETAS SERVICIOS */

/* INICIO PANTALLA EMERGENTE CON EL CONTENIDO DE LOS SERVICIOS */
/* Un Modal en un pop up que se muestra encima de la página actual */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px; 
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4);
        -webkit-transition: opacity 1s ease-in;
        -moz-transition: opacity 1s ease-in;
        transition: opacity  ease-in 10s;
    }
  /* Modal Content */
    .modalContent {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        transition: ease-in 10s;
    }

    .modal > .modalContent > .listaServicios {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    .modal > .modalContent > .listaServicios > .columna .elementoColumna {
        display: flex;
        
    }
    
    .modal > .modalContent > .listaServicios > .columna li {
        padding-bottom: 10px;
        list-style: none;

    }

    .modal > .modalContent > .listaServicios > .columna i {
        padding-right: 10px;
        
    }

    /* The Close Button */
    .close > .bi {
        color: #aaa;
        float: right;
        font-size: 50px;
        font-weight: bold;
        transition: 1s;
    }
    .close > .bi:hover,
    .close > .bi:focus {
        color: #00008b;
        text-decoration: none;
        cursor: pointer;}


    
/* FIN PANTALLA EMERGENTE CON EL CONTENIDO DE LOS SERVICIOS */