/* Inicio de bloque de reducir mas el menu horizontal superior */
body {
    font-family: Arial, sans-serif;
}

.navbar-brand img {
   height: 50px;
   background-color: #3b3b3b;
   overflow: hidden; /* Contener flotados */
}

.navbar-nav {
    background-color: #212529;
    overflow: hidden; /* Contener flotados */
}

/* MODIFICADO: Ajuste de tamaño y espacio para que entre en la pantalla */
.navbar-nav a {
    float: left;
    display: block;
    color: white;
    padding: 14px 10px; /* Bajado de 20px a 10px para reducir espacio horizontal */
    font-size: 14px;    /* Añadido para hacer la letra sutilmente más pequeña */
    text-decoration: none;
    text-align: center;
}

.navbar-nav a:hover {
    background-color: #575757;
}
/* fin de bloque de reducir mas el menu horizontal superior */
/* ---------------------------------------------------------*/

footer {
    background: #222;
    color: white;
    padding: 40px 0;
}
footer a {
    color: #0d6efd;
    text-decoration: none;
}
    footer a:hover {
    text-decoration: underline;
}
p {
    text-align: justify;
}


.whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.whatsapp img:hover {
    transform: scale(1.1);
}

/* Animación para los iconos de servicios */
#servicios i {
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

#servicios i:hover {
  transform: scale(1.2);   /* Crece 20% */
  color: #0d6efd;          /* Azul Bootstrap */
}

#clientes img {
  max-height: 80px;
  object-fit: contain;
  transition: transform 0.3s, filter 0.3s;
}

#clientes img.grayscale {
  filter: grayscale(100%);
}

#clientes img:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
}

html {
  scroll-padding-top: 80px; /* Este espacio empuja el contenido hacia abajo */
  scroll-behavior: smooth;  /* De paso, hace que el movimiento sea suave */
}


/* Corrección para que el menú fijo (fixed-top) no tape el inicio de las secciones */
#planes {
    scroll-margin-top: 80px; /* Esto empuja la sección hacia abajo para que el menú no la tape */
}


#pills-tab-videos .nav-link.active {
    background-color: #0b3c5d !important; /* Azul Corporativo de Maqs */
    color: #ffffff !important;
    border-color: #0b3c5d !important;
}

#pills-tab-videos .nav-link {
    transition: all 0.3s ease;
}

#capacitacion .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#capacitacion .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}


@media (min-width: 768px) {
    .border-right-md {
        border-right: 1px solid #e3e6f0;
    }
}

/* aqui va de los valores */
/* Contenedor global de las tarjetas */
/* Borde superior rojo de marca (Forzado con !important para vencer a Bootstrap) */

/* 1. Contenedor flexible para ambos bloques */
.valores-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  max-width: 1200px;
  margin: 30px auto 50px auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 2. Diseño base de la tarjeta (Garantiza la caja blanca y sombra para TODAS) */
.valor-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  padding: 35px 25px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Tamaños inteligentes para que quepan 3 o 4 por fila */
  flex: 1 1 calc(23% - 25px) !important; 
  min-width: 260px !important;
  max-width: 340px !important;
  
  /* Borde azul por defecto para el primer bloque */
  border-top: 5px solid #0056b3 !important; 
}

/* Efecto Hover al pasar el mouse */
.valor-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}

/* 3. Estilo del círculo contenedor del icono para TODAS */
.valor-icon {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  font-size: 28px !important;
}

/* 4. Forzar borde rojo para el segundo bloque */
.border-rojo {
  border-top: 5px solid #dc3545 !important;
}

/* 5. Colores específicos de los círculos e iconos (Primer bloque) */
.icon-compromiso {
  background-color: #e6f0ff !important;
  color: #0056b3 !important;
}
.icon-responsabilidad {
  background-color: #e6f4ea !important;
  color: #137333 !important;
}
.icon-cliente {
  background-color: #e2f7f9 !important;
  color: #007a87 !important;
}

/* 6. Colores específicos de los círculos e iconos (Segundo bloque) */
.icon-precision {
  background-color: #fde8e8 !important;
  color: #dc3545 !important;
}
.icon-innovacion {
  background-color: #fef3c7 !important;
  color: #d97706 !important;
}
.icon-seguridad {
  background-color: #e0e7ff !important;
  color: #4f46e5 !important;
}
.icon-respaldo {
  background-color: #f3e8ff !important;
  color: #7c3aed !important;
}

/* 7. Estilos de los textos internos */
.valor-card h3 {
  color: #1f2937 !important;
  font-size: 19px !important;
  margin: 0 0 12px 0 !important;
  font-weight: 700 !important;
  font-family: sans-serif !important;
}

.valor-card p {
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-family: sans-serif !important;
}

/* Empieza BLOQUE DE AYUDA A LA WEB */
/* Estilos específicos para el contenedor de preguntas de MAQSSISTEMAS */
.faq-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: #0056b3;
  box-shadow: 0 6px 20px rgba(0, 86, 179, 0.08);
}

.faq-item summary {
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  font-size: 14px;
  color: #0056b3;
  transition: transform 0.3s ease;
}

.faq-item details[open] summary i {
  transform: rotate(180deg);
  color: #dc3545;
}

.faq-respuesta {
  padding: 0 20px 20px 20px;
  border-top: 1px solid #f3f4f6;
  background-color: #f9fafb;
}

.faq-respuesta p {
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 15px 0 0 0;
}

/*  BLOQUES PARA INTELIGENCIA ARTIFICIAL */
/* ==========================================================================
/* ==========================================================================
   ESTILOS VENTANA EMERGENTE ORIGINAL (SANDRITA IA)
   ========================================================================== */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.popup-content {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-top: 6px solid #0056b3; /* Azul corporativo */
  animation: entradaPopup 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes entradaPopup {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: #9ca3af;
  cursor: pointer;
}
.popup-close-btn:hover { color: #dc3545; }

/* Contenedor del Avatar Robot con Pulso */
.popup-avatar {
  width: 80px;
  height: 80px;
  background: #e6f0ff;
  color: #0056b3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 20px auto;
  position: relative;
}

/* Efecto de onda expansiva animada */
.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #0056b3;
  border-radius: 50%;
  animation: pulsoEfecto 2s infinite;
}

@keyframes pulsoEfecto {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.popup-content h2 {
  color: #1f2937;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

.popup-destacado {
  font-size: 16px;
  color: #0056b3;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}

.popup-descripcion {
  font-size: 14.5px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 25px;
}

.popup-action-btn {
  background: #dc3545; /* Rojo corporativo */
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
  transition: all 0.3s ease;
}

.popup-action-btn:hover {
  background: #bd2130;
  transform: translateY(-2px);
}

/* integracion de submenu de Consulta de Cpe  */
/* Contenedor principal del botón del menú */
.menu-item-desplegable {
    position: relative;
    display: inline-block;
}

/* Diseño del contenedor desplegable */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 180px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
    border-radius: 4px;
    border-top: 3px solid #0056b3; /* Color azul base superior */
}

/* Estilo general para cada enlace interno */
.submenu li a {
    color: #333333;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* --- EFECTOS HOVER PERSONALIZADOS POR SISTEMA --- */

/* Visual Farma (Efecto Verde Salud/Facia) */
.submenu li a.item-farma:hover {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding-left: 25px; /* Pequeña animación de desplazamiento */
}

/* Visual Fácil (Efecto Azul Tecnológico) */
.submenu li a.item-facil:hover {
    background-color: #e3f2fd;
    color: #1565c0;
    padding-left: 25px;
}

/* Factmaqs (Efecto Naranja/Rojo Corporativo) */
.submenu li a.item-factmaqs:hover {
    background-color: #fff3e0;
    color: #ef6c00;
    padding-left: 25px;
}

/* Mostrar el submenú de forma automática al posicionar el cursor */
.menu-item-desplegable:hover .submenu {
    display: block;
}

/* ***************************************************** */
/*   inicio del bloque de submenu de Consulta de Cpe */

/* 1. Contenedor del botón principal */
.maqs-desplegable {
    position: relative !important;
    display: inline-block !important;
}

/* 2. El Submenú oculto por defecto (Sin usar clases de Bootstrap) */
.maqs-submenu-fijo {
    display: none !important;
    position: absolute !important;
    top: 100% !important; /* Lo obliga a bajar justo debajo del texto */
    left: 0 !important;
    background-color: #ffffff !important;
    border-top: 3px solid #002d62 !important; /* Azul MaqsSistemas */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 999999 !important; /* Capa por encima de todo */
    min-width: 185px !important;
    box-sizing: border-box !important;
}

/* 3. Forzar elementos en lista vertical */
.maqs-submenu-fijo li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. Estilo del texto de los enlaces (Fuerza color oscuro) */
.maqs-submenu-fijo li a {
    color: #232323 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    display: block !important;
    text-decoration: none !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
}

/* 5. EL TRUCO: Al pasar el mouse por el botón, se MUESTRA el submenú */
.maqs-desplegable:hover .maqs-submenu-fijo {
    display: block !important;
}

/* --- 6. Efectos de Color Corporativo al pasar el mouse --- */
.maqs-submenu-fijo li a.item-farma:hover {
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
}

.maqs-submenu-fijo li a.item-facil:hover {
    background-color: #e3f2fd !important;
    color: #1565c0 !important;
}

.maqs-submenu-fijo li a.item-factmaqs:hover {
    background-color: #fff3e0 !important;
    color: #ef6c00 !important;
}


/* fin de bloque de consulta de cpe */

/* ultimo de formulario y venta directa en carrusel */

/* ==========================================================================
   MÁSCARA FIJA SUPERPUESTA PARA EL FORMULARIO DE PORTADA
   ========================================================================== */

/* Permite que los clics pasen al carrusel y a las flechas de navegación de fondo */
.capa-flotante-fija {
  pointer-events: none !important;
}

/* Reactiva los clics dentro del contenedor para poder usar el formulario y botones */
.capa-flotante-fija .container {
  pointer-events: auto !important;
}


.carousel-caption {
  z-index: 3 !important;
}

/* BRLOQUE DE derechos reservados en la parte ultima d emi pagina */
/* Quita el espacio inferior del footer para que la barra se pegue abajo */
.footer-principal {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 40px 0 0 0 !important;
}

/* Estilos de la barra azul con centrado absoluto forzado mediante Flexbox */
.barra-derechos {
    display: flex !important;            /* Convierte la barra en contenedor Flex */
    justify-content: center !important;  /* Centra el contenido horizontalmente en Flex */
    align-items: center !important;      /* Centra el contenido verticalmente */
    width: 100% !important;
    max-width: 100% !important;
    background-color: #0056b3 !important; /* Azul de tu marca */
    padding: 15px 0 !important;
    margin-top: 30px !important;
}

/* Ajustes obligatorios para la etiqueta de texto */
.barra-derechos p {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    text-align: center !important;        /* Refuerzo tradicional de centrado */
    font-size: 13px !important;
    text-transform: uppercase !important; /* Todo en mayúsculas */
    letter-spacing: 0.5px !important;
    display: inline-block !important;     /* Evita que se expanda bloque a la izquierda */
}
/*-  FIN DE BLOQUE DE  */

/* Estilos para los logotipos de métodos de pago */
/* Estilos corregidos para los métodos de pago */
.contenedor-pagos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.contenedor-pagos img {
    width: 50px !important;       /* Tamaño ideal para las tarjetas */
    height: 32px !important;      /* Mantiene una altura fija y ordenada */
    object-fit: contain !important; 
    background-color: #ffffff !important; /* Fondo blanco para resaltar los logos */
    padding: 3px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Efecto visual elegante al pasar el cursor sobre los íconos */
.contenedor-pagos img:hover {
    transform: scale(1.1);
}


/* Estilos para el contenedor y las cajas de los logos */
.contenedor-pagos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.logo-pago {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important; /* Fondo blanco limpio */
    padding: 4px 8px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    width: 52px !important;
    height: 32px !important;
}