body{
	background-color: grey;
	/*font-family: "myriad-pro", sans-serif;
	font-weight: 700;
	font-style: normal;*/
}


.red{
	color:red;
}


/* Cabecera */
#cabecera{
	background-color: #2B4868;
	color: white !important;
}
.logoSuperior{
	background-color: #fff;
	width: 250px;
	border-radius: 0 0 20px 20px;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 80px;
	box-shadow: 2px 2px 0px 0px #9B9BCD;
	-webkit-box-shadow: 2px 2px 0px 0px #9B9BCD;
	-moz-box-shadow: 2px 2px 0px 0px #9B9BCD;
}
#cabeceraTextos{
	margin-left: 80px;
}
#titulo{
    font-size: 6.0rem;
	font-weight: 700;
}
#subtitulo1{
	background-color: #F07B79;
    font-size: 1.21em;
    font-weight: 600;
}
#subtitulo2{
    font-size: 1.3em;
    font-weight: 600;
}
#botonReserva{
	color: white;
	background: rgb(255,88,88);
	background: linear-gradient(90deg, #EFA5A4 0%, #F07B79 100%);
	border-radius: 40px;
    line-height: 20px;
    border: 0;
    font-weight: 700;
    margin-bottom: 30px;
}

/* Segunda sección */

#segundaSeccion{
	background-color: #dddcea;
	color:white;
}
#columna1{
	background-color: #2B4868;
	border-radius: 150px 150px 0 0 ;
	margin-top: 100px;
	padding-top: 100px;
	margin-left: 3%;
	width: 30%;
	text-align: center;
}
#tituloColumna1{
	position: relative;
	top: -25px;
}
#columna2{
	background-color: #F07B79;
	border-radius: 150px 150px 0 0 ;
	margin-top: 20px;
	padding-top: 100px;
	margin-left: 3%;
	width: 30%;
	text-align: center;
}
#tituloColumna2{
	position: relative;
	top: -25px;
}
#columna3{
	background-color: #2B4868;
	border-radius: 150px 150px 0 0 ;
	margin-top: 100px;
	padding-top: 100px;
	margin-left: 3%;
	width: 30%;
	text-align: center;
}
#tituloColumna3{
	position: relative;
	top: -25px;
}
.subtitulo2da{
	font-size: 2em;
}
.textoColumnas{
	font-weight: 500;
}
#textoColumna1{
	padding-bottom: 30px;
	text-align: left;
	padding-right: 10px;
	padding-left: 10px;
}
#textoColumna2{
	font-size: 26px;
	font-weight: 500;
}
#logoBlancoCortado2{
	position: relative;
	top:-194px;
	margin-bottom:-194px;
	left:-100px;
	margin-right:-100px;
}
#textoColumna3{
	padding-bottom: 30px;
	text-align: left;
	padding-right: 10px;
	padding-left: 10px;
}

/* Sistema Web */

#sistemaWeb{
	background-color: #ebebf2;
}
#tituloSistemaWeb{
	margin-top: 80px;
	color: #ffffff;
}
#tituloSistemaWeb2{
	margin-top: 80px;
	color: #2B4868;
}
#subtituloSistemaWeb{
	color: #2B4868;
	text-align: center;
    font-weight: 500;
}
.sistemaWebCuadros{
	color:#2B4868;
	margin-top:40px;
	margin-bottom: 25px;
	background-color: white;
	border-radius: 30px;
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
	text-align: center;
}

.sistemaWebIcono{
	position: relative;
    left: 0%;
	margin-top: 30px;
    margin-bottom: 30px;
}

.sistemaWebCuadroIzq{
	height: 80%;
	margin-top: 10%;
	border-right: solid #F07B79 3px;
	padding-right: 18px;
}
.sistemaWebCuadroCentro{
	height: 80%;
	margin-top: 10%;
	margin-bottom: 35px;
}
.sistemaWebCuadroDer{
	height: 80%;
	margin-top: 10%;
	border-left: solid #F07B79 3px;
	padding-left: 18px;
}



/* Multitarea */
#multitarea{
	background-color: #dddcea;
	color: #2B4868;
	padding: 50px;
}
#multitareaTextos{
	text-align: right;
}
#multitareaTitulo{
    font-size: 3rem;
    line-height: 3rem;
}
#multitareaSubtitulo{
    font-size: 1.3rem;
    line-height: 2rem;
    margin-top: 10px;
}


#fotos{
	background-color: #FFF; 
	padding: 50px;
}
#logoAzulCortado{
    position: absolute !important;
    width: 15% !important;
    margin-left: calc(-5.5 * var(--bs-gutter-x)) !important;
    margin-top: 336px !important;
}

/* Mas Rapido */
#masRapido{
	background-color: #DDDCEA;
	color: #2B4868;
	padding: 50px;
}
#masRapidoTitulo{
	text-align: left;
	font-size: 2.3em;
}
#masRapidoSubtitulo{
    font-size: 1.3rem;
    line-height: 2rem;
    border-bottom: solid 5px #F07B79;
}
.masRapidoItems{
	margin-top: 30px;
}

.separador{
	height: 80px;
	background-color: #FFF;
}

/* ProntoApp */
#prontoApp{
	background-color: #DDDCEA;
	color: #2B4868;
	padding: 50px 25px 50px 0; 
	z-index: 3;
    position: relative;
}
#prontoAppDivFoto{
	padding-left: 0 !important;
	margin-top: 17px;
}
#prontoAppTextos{
	z-index: 99;
}
#prontoAppTitulo{
	text-align: left;
	font-size: 2.3em;
	font-weight: 700;
}
#prontoAppSubtitulo{
	font-weight: 500;
	padding-right: 0;
}
.b1{
  list-style-image: url("/imagenes/li.png");
}
#prontoAppLista{
	position: relative;
	z-index: 2;
}
#logoBlancoCortado{
	position: relative; 
	top: -258px; 
	margin-bottom: -715px; 
	left: 139px; 
	z-index: 1;
}


/* PowerBI */
#powerBI{
	background-color: #EBEBF2;
	padding: 50px;
}
#powerBITitulo{
	position: relative;
	z-index: 5;
	color: #2B4868;    
	font-size: 2.7em;
    font-weight: 700;
}
#powerBISubtitulo1{
	position: relative;
	z-index: 4;
	color: #2B4868;
	text-align: center;
	font-size: 1.3em;
    margin-left: 5%;
    margin-right: 5%;
    font-weight: 500;
}
#powerBISubtitulo2{
	position: relative;
	z-index: 6;
	color: #2B4868;
	text-align: center;
	font-size: 1.3em;
    margin-top: 30px;
    margin-left: 10%;
    margin-right: 10%;
}

#powerBIFotos{
	background-color: #fff;
    padding: 50px;
}

/* footer */

#footer{
	background-color: #fff;
}
#footerContactanos{
	color: #2B4868;    
	font-size: 2.3em;
    font-weight: 700;    
    margin-left: 35px;
}
#footerMasInfo{
	color: #F07B79;
    font-size: 2.3em;
    font-weight: 500;
    margin-left: 35px;
    line-height: 20px;
}
#footerColumna1{
	padding-right: 0  !important;
}
#footerDatos{
	margin-left: 30px;
    color: #ffff;
    background-color: #2B4868;
    padding-left: 30px;
    padding-top: 25px;
    padding-bottom: 45px;
    font-size: 25px;
    border-radius: 30px 0 0 30px;
    line-height: 53px;
	margin-top: 0px;
    margin-bottom: 65px;
}

#formulario{
	position:relative;
	margin-bottom: 50px;
    background-color: #EBEBF2;
    padding-top: 25px;
    /* margin-right: 25px; */
    border-radius: 25px;
}

#formulario{
	margin-bottom: 50px;
    background-color: #EBEBF2;
    padding-top: 25px;
    /* margin-right: 25px; */
    border-radius: 25px;
}

#formulario input, #formulario textarea {
	margin-top: 20px;
	background-color: #DDDCEA;
}

#formulario input::placeholder, #formulario textarea::placeholder {
	color:#8482C2;
	font-weight: 500;
}

#formulario button {
	margin-top: 10px; 
    margin-bottom: 10px;
	color: white;
	background: rgb(255,88,88);
	background: linear-gradient(90deg, rgba(255,88,88,1) 0%, rgba(255,0,0,1) 100%);
	border-radius: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 5px;
    padding-bottom: 7px;   
    font-weight: 800;
    position: relative;
    left: 33%;
    border: 0;
}

#formulario:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent #EBEBF2;
    border-width: 35px 35px 35px 0;
    top: 57%;
    left: -34px;
    margin-top: -35px;
}

#CRM{
    background: #FFF;
    padding: 30px;
    color: #2b4868;
}

#CRMTitulo{
	color: #2B4868 !important;
	font-size: 45px;
}

/* Modificar el fondo de la sección modulosProntoNet */
#modulosProntoNet {
    background-color: #2B4868; /* Cambiar el fondo a un color más vibrante */
    color: #ffffff; /* Asegurarse de que el texto sea legible */
    padding: 50px; /* Ajustar el padding si es necesario */
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Agregar sombra para un efecto de profundidad */
}

/* Centrar los h4 en la sección modulosProntoNet */
#modulosProntoNet h4 {
    text-align: center; /* Centrar el texto */
    font-size: 1.5em; /* Aumentar el tamaño del texto */
    margin-bottom: 15px; /* Espacio entre el título y el párrafo */
    transition: transform 0.3s; /* Efecto de transición */
}

/* Efecto hover para los títulos */
#modulosProntoNet h4:hover {
    transform: scale(1.05); /* Aumentar el tamaño al pasar el mouse */
}

/* Centrar los textos en la sección modulosProntoNet */
#modulosProntoNet p {
    text-align: center; /* Centrar el texto */
    font-size: 1.1em; /* Aumentar el tamaño del texto */
    margin-top: 10px; /* Espacio entre el título y el párrafo */
}

/* Centrar los textos de la clase textoColumnas en la sección segundaSeccion */
#segundaSeccion #textoColumna1,
#segundaSeccion #textoColumna2,
#segundaSeccion #textoColumna3 {
    text-align: center; /* Centrar el texto */
}

/* Asegúrate de que el contenedor tenga un ancho adecuado */
#segundaSeccion .row {
    text-align: center; /* Centrar el texto en toda la fila */
}

#modulosProntoNet2 {
    display: flex; /* Usar flexbox para la distribución */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan en varias filas */
    justify-content: space-between; /* Espacio entre los elementos */
}

#modulosProntoNet2 div {
    background-color: #ebebf2; /* Fondo claro */
    color: #2b4868; /* Letras oscuras */
    border-radius: 10px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    margin: 10px; /* Margen para separar a lo ancho y alto */
    flex: 1 1 calc(33.33% - 20px); /* Hacer que cada div ocupe un tercio del ancho menos el margen */
    box-sizing: border-box; /* Incluir el padding y el borde en el ancho total */
}

/* Ocultar logoBlancoCortado en pantallas de celulares */
@media (max-width: 768px) {
    #logoBlancoCortado {
        display: none; /* Ocultar el elemento */
    }
    
    #titulo {
        font-size: 4.0rem; /* Ajustar el tamaño de la fuente */
    }

    /* Apilar columnas en segundaSeccion */
    #segundaSeccion #columna1,
    #segundaSeccion #columna2,
    #segundaSeccion #columna3 {
        width: 100%; /* Hacer que cada columna ocupe el 100% del ancho */
        margin: 0; /* Eliminar márgenes */
    }

    /* Reformular el footer */
    #footer {
        padding: 20px; /* Ajustar el padding */
        text-align: center; /* Centrar el texto */
        display: flex; /* Usar flexbox para el footer */
        flex-direction: column; /* Colocar elementos en columna */
        align-items: center; /* Centrar elementos */
    }

    #footerContactanos,
    #footerMasInfo {
        font-size: 1.5em; /* Ajustar el tamaño de la fuente */
        margin: 10px 0; /* Espaciado entre elementos */
    }

    #footerDatos {
        margin: 10px 0; /* Espaciado vertical */
        padding: 20px; /* Ajustar el padding */
        font-size: 1.2em; /* Ajustar el tamaño de la fuente */
        border-radius: 10px; /* Bordes redondeados en los 4 bordes */
    }

    /* Colocar el formulario debajo de footerColumna1 */
    #formulario {
        margin-top: 20px; /* Espaciado superior */
        width: 100%; /* Asegurarse de que ocupe el ancho completo */
    }

    /* Ajustar footerColumna1 para usar 10 columnas */
    #footerColumna1 {
        display: grid;
        /* grid-template-columns: repeat(10, 1fr); */
        /* gap: 10px; */
        width: 100%;
        justify-content: center;
        font-size: larger;
    }
}
