/* Importar fuentes si es necesario, por ejemplo Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');



body {

    font-family: 'Roboto', sans-serif;

    color: #333;

}



#hero {

  background: linear-gradient(to right, #1e3a8a, #ea580c);

  /*padding: 3rem 1rem;

  text-align: center;

  color: white;*/

}



header.py-3 {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

}

div.ia {

    width: 50%;

    margin: 0 auto;

    text-align: center;

}



/* Estilos para la Hero Section */

.hero-section {

    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/hero-background.jpg') no-repeat center center;

    background-size: cover;

    min-height: 60vh; /* Altura mínima de la sección */

    position: relative;

    overflow: hidden; /* Evitar que el contenido se desborde si hay animaciones, etc. */

}



/* Estilos de botones personalizados si es necesario */

.btn-primary {

    background-color: #007bff; /* Color primario de Bootstrap */

    border-color: #007bff;

}



.btn-primary:hover {

    background-color: #0056b3;

    border-color: #0056b3;

}



.btn-outline-light {

    color: #f8f9fa;

    border-color: #f8f9fa;

}



.btn-outline-light:hover {

    color: #000;

    background-color: #f8f9fa;

}



/* Estilos para iconos sociales en el footer */

.social-icons a {

    font-size: 1.5rem;

    transition: color 0.3s ease;

}



.social-icons a:hover {

    color: #007bff !important; /* Cambiar a tu color primario */

}



/* Estilos para las tarjetas de servicios */

.card {

    border-radius: 10px;

    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}



.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;

}



/* Puedes añadir más estilos generales aquí para otras secciones */



.display-5.fw-bold.mb-4.h2-size {

  font-size: 32px;

  color: #1e3a8a;

}

.nav-link.btn.btn-primary.text-white.ms-lg-3.comprar-ahora {

  background-color: #f57c00;

}

.btn.btn-outline-primary.mt-3.comprar-ahora {

    background-color: #007bff;

    float: right;

    margin-right: 80px;

    color: #fff;

}

#mas-de {

    background-color: #e8f0fe;

}

#mas-de .lead.text-center {

    margin-bottom: 0;

}

.text-center.display-5.fw-bold.mb-5.price {

    font-size: 2rem;

    color: #ea580c;

    margin-bottom: 1rem !important;

}

.buy-now {

    text-align: center;

}

#demo {

    background-color: #fef9c3;

}

.demo {

  text-align: center;

  margin-bottom: 20px;

}

#demo img.card,

#tecnologia img.card {

    margin: 0 auto;

}

.text-center.display-5.fw-bold.mb-5 {

  font-size: 2rem;

  color: #1e3a8a;

  margin-bottom: 10px !important;

}

#demo .lead.text-center {

    margin-bottom: 0 !important;

}

#demo .btn.btn-primary.mt-3 {

    background-color: #f57c00;

    border-color: #f57c00;

}



@keyframes scrollLogos {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



@keyframes scrollLogos {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}

.carousel-clientes .carousel-track {

  display: flex;

  width: max-content;

  animation: scrollLogos 30s linear infinite;

  gap: 3rem;

}

.carousel-clientes:hover .carousel-track {

  animation-play-state: paused;

}



#header .nav-item.demo {

    background-color: #007bff;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

}

#header .nav-item.demo a {

    color: #fff;

}

.hero-section {

    min-height: auto;

}

.col-lg-8.mb-4.mb-lg-0.videos {

  margin-bottom: 40px !important;

}

.display-5.fw-bold.mb-5 {

    font-size: 2rem;

    color: #1e3a8a;

}

#footer {

    background-color: #1d386f;

}

#footer2 {

    background-color: #000f2d;

    margin-top: 0 !important;

}

#performance h2 {

    color: #f57c00;

    font-weight: 600;

}

div.listo-boton {

    width: 50%;

    margin: 0 auto;

    text-align: center;

}

#demo .demo-image a {

    border: 0;

    background-color: transparent;

}



#ico-whats {

    position: fixed;

    bottom: 20px;

    right: 20px;

    width: 60px;

    height: 60px;

    background-color: #25D366;

    color: white;

    border-radius: 50%;

    text-align: center;

    font-size: 30px;

    font-weight: bold;

    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);

    z-index: 999;

    line-height: 60px;

    text-decoration: none;

}

#ico-chat-ia {

    position: fixed;

    bottom: 20px;

    left: 43%;

    background-color: #1e3a8a;

    color: white;

    padding: 0.75rem 1.25rem;

    border-radius: 6px;

    font-weight: bold;

    font-size: 1rem;

    text-decoration: none;

    z-index: 999;

    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);

}

#ico-tienda {

    position: fixed;

    bottom: 20px;

    left: 20px;

    background-color: #f57c00;

    /*background-color: #1e3a8a;*/

    color: white;

    padding: 0.75rem 1.25rem;

    border-radius: 6px;

    font-weight: bold;

    font-size: 1rem;

    text-decoration: none;

    z-index: 999;

    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);

}
















/* Formulario demo GM3s Emprendedor */
.form-note {
  font-size: .94rem;
  line-height: 1.45;
  color: #334155;
  background: #f7f9fc;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 12px 14px;
}
.gm3s-kommo-form .btn,
.gm3s-submit-btn,
.gm3s-whatsapp-btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400 !important;
  line-height: 1.35;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-status {
  color: #334155;
  font-size: .94rem;
}

/* Botones uniformes para formularios KOMMO */
.gm3s-submit-btn,
.gm3s-whatsapp-btn{
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}