@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body{font-family: "Open Sans", sans-serif;}

.barra{background:#0F0046 !important}
.barra ul>li a{color:#fff !important;margin:0 10px 0 0}
.barra ul>li a:hover{background: #00B2D0;color:#0F0046 !important}

.barra ul>li.active a{background: #00B2D0;color:#0F0046 !important;font-weight: bold;}
.logo{width: 60%;}
.btnWabe{background-color: #00B2D0;font-weight: bold;}
.contBotonCabeza{color:#fff !important}
.contBotonCabeza small{margin: 0 10px 0 0;}
.banner{padding: 8% 5%;}
h1{font-size: 3.5em !important;font-weight: bold;margin-bottom: 5%;}
.banner p {font-size: 1.5em;}
.fondoBanner{
    background:url(../img/baner.png) no-repeat right center,linear-gradient(180deg, rgba(224,228,231,1) 30%, rgba(208,216,219,1) 89%);  background-size: contain;
}

.panelCaracteristicas{background-color: #0F0046;font-weight: bold;color:#fff}
.caracteristicas {
    font-size: 1.2em;
    padding:2%;
    display: flex;
    flex-direction: column; /* Establece la dirección de los elementos como columna */
    align-items: center; /* Centra los elementos   
    horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente   
    */
}
.caracteristicas i{font-size: 1.8em;}

.panelQueEs{padding: 10% 5% 10% 5%;}
.panelQueEs h2{font-weight: bold;margin:0 0 80px 0;font-size: 2.4em;}
.panelQueEs p{font-size: 1.2em;margin:0 0 0 0}
.panelQueEs h2{margin-bottom: 5% !important;}

.contTextoQuienEs {
    
}
.btnRegistro {
    margin: 60px 0 0 0;
    padding: 2%;
    background-color: #FF7F00;
    color: #fff;
    font-weight: bold;
    width: auto; /* Establece el ancho del botón de forma automática */
}

.panelPrecios{
    padding: 10% 5% 10% 5%;
    background: #f6f6f6;
}
.panelPrecios h2{font-weight: bold;color:#000;font-size: 2.4em;}

.btnWabeR{background-color: #FF7F00;font-weight: bold;color:#fff}

.logoPie{width: 40%;}
footer{padding:2%;background:#0F0046;color:#fff;vertical-align: middle;}
footer a{color:#fff;text-decoration: none;}
footer i{font-size: 2.8em;margin:0 10px 0 0}
.contReded{text-align: right;}


.bannerMovil{display: none;}
.pantallaPC{width: 100%;display: none;}

@media (max-width: 768px) {
    h1{font-size: 2.5em !important;font-weight: bold;margin-bottom: 5%;}
    .fondoBanner{
        background:linear-gradient(180deg, rgba(224,228,231,1) 30%, rgba(208,216,219,1) 89%);  background-size: cover;
    }
    .caracteristicas {padding: 5% !important;font-size:1.0em !important}
    .pantalla{display: none !important;}
    .btnRegistro{display: none;}
    .navbar-brand{margin-right: 0 !important; color:#fff !important}
    .navbar-toggler-icon{color:#fff !important}
    .navbar-toggler i{color: #fff !important;}
    .bannerMovil{height: 200px; background: url(../img/baner.png) no-repeat center center;background-size:cover ;}
    .bannerMovil{display: block;}
    .panelQueEs{padding: 10% 5% 10% 5%;}
    .panelQueEs h2{margin-bottom: 10% !important;}
    .pantallaPC{width: 100%;display: block;}
}




.elemento1 {
    background-color: #0F0046; /* Azul Marino Oscuro */
  }
  
  .elemento2 {
    background-color: #FF7F00; /* Amarillo Naranja */
  }
  
  .elemento3 {
    background-color: #228B22; /* Verde Lima */
  }