/* Fondo de color personalizado para el nav bar */
  .custom-navbar-bg {
    background-color: #860e65; /* Color de fondo */
    height: 60px; /* Altura personalizada para desktop */
  }

  /* Estilos personalizados para el nav bar horizontal */
  .navbar-light .navbar-nav .nav-link {
    color: #e9e9e9; /* Color del texto */
    font-weight: 500; /* Grosor de la fuente */
    margin: 0 10px; /* Espaciado entre enlaces (reducido) */
    text-decoration: none; /* Elimina el subrayado por defecto */
    font-family: 'Arial', sans-serif; /* Cambiar el tipo de letra */
    font-size: 12px; /* Tamaño de la fuente */
    text-align: center; /* Centrar texto */
  }

  .navbar-light .navbar-nav .nav-link:hover {
    color: #f0c9e7; /* Color del texto al pasar el mouse */
    text-decoration: underline; /* Subrayado al pasar el cursor */
    transform: translateY(-2px); /* Efecto hover */
  }

  .navbar-light .navbar-toggler {
    border-color: #ffffff; /* Color del borde del botón toggler */
  }

  /* Media queries para dispositivos móviles */
  @media (max-width: 992px) {
    .custom-navbar-bg {
      height: auto; /* Altura automática en móviles */
      padding: 10px 0; /* Espaciado interno para móviles */
    }

    .navbar-light .navbar-nav .nav-link {
      margin: 5px 0; /* Reducir espaciado entre enlaces en móviles */
      font-size: 14px; /* Reducir tamaño de la fuente en móviles */
      text-align: center; /* Centrar texto en móviles */
    }

    .navbar-nav {
      padding: 10px 0; /* Espaciado interno para el menú desplegable */
    }
  }

    /* Estilos para el enlace activo */
    .navbar-nav .nav-link.active {
      font-weight: bold; /* Texto en negrita */
      color: #ffffff !important; /* Color del texto */
      border-radius: 50px; /* Bordes redondeados */
      box-shadow: 0 4px 8px rgb(255, 104, 230); /* Efecto de sombra */
      padding: 8px 16px; /* Espaciado interno */
      transition: all 0.3s ease; /* Transición suave */
    }

    /* Efecto hover para el enlace activo (opcional) */
    .navbar-nav .nav-link.active:hover {
      box-shadow: 0 6px 12px rgb(247, 62, 216); /* Sombra más pronunciada */
    }
 /* Clase para que las letras siempre sean blancas */
 .navbar-nav .nav-link {
  color: white !important; /* Color blanco para todos los enlaces */
}

    

/************************************************ ESTILO CARDS ENSLITADOS **********************************************************/

ul li a {
  color: black !important;
}

  .list-group-item a {
    color: black !important;
  }

  .list-group-item a:hover {
    color: #007bff !important; /* Azul al pasar el cursor */
  }

  .card {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .card-img-top {
    height: 200px;
    object-fit: cover;
  }

  .card-title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .list-group-item {
    border: none;
    padding: 0.1rem 0;
    margin: 0;
    line-height: 1.2;
  }

  .list-group-item i {
    margin-right: 8px;
    color: #007bff;
    font-size: 0.9rem;
  }

  @media (min-width: 768px) {
    .card-img-top {
      width: 40%;
    }

    .card-body {
      width: 60%;
    }
  }






    /*----  Main Style  ----*/
    .mi-icono {
      color: #b34973 !important;
      /* Color inicial del ícono */
      transition: color 0.3s ease;
      /* Transición suave */
    }

    .mi-icono:hover {
      color: rgb(218, 8, 207) !important;
      /* Color cuando el cursor pasa sobre el ícono */
    }

    #cards_landscape_wrap-2 {
      text-align: center;
      background: #ffffff;
    }

    #cards_landscape_wrap-2 .container {
      padding-top: 80px;
      padding-bottom: 100px;
    }

    #cards_landscape_wrap-2 a {
      text-decoration: none;
      outline: none;
    }

    #cards_landscape_wrap-2 .card-flyer {
      border-radius: 5px;
    }

    #cards_landscape_wrap-2 .card-flyer .image-box {
      background: #ffffff;
      overflow: hidden;
      box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5);
      border-radius: 5px;
    }

    #cards_landscape_wrap-2 .card-flyer .image-box img {
      -webkit-transition: all 0.9s ease;
      /* Prefijo para Safari y Chrome */
      -moz-transition: all 0.9s ease;
      /* Prefijo para Firefox */
      -o-transition: all 0.9s ease;
      /* Prefijo para Opera */
      -ms-transition: all 0.9s ease;
      /* Prefijo para Internet Explorer */
      transition: all 0.9s ease;
      /* Propiedad estándar */
      width: 100%;
      height: 200px;
    }

    #cards_landscape_wrap-2 .card-flyer:hover .image-box img {
      opacity: 0.7;
      -webkit-transform: scale(1.15);
      -moz-transform: scale(1.15);
      -ms-transform: scale(1.15);
      -o-transform: scale(1.15);
      transform: scale(1.15);
    }

    #cards_landscape_wrap-2 .card-flyer .text-box {
      text-align: center;
    }

    #cards_landscape_wrap-2 .card-flyer .text-box .text-container {
      padding: 30px 18px;
    }

    #cards_landscape_wrap-2 .card-flyer {
      background: #ffffff;
      margin-top: 50px;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      -ms-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
    }

    #cards_landscape_wrap-2 .card-flyer:hover {
      background: #fff;
      box-shadow: 0px 15px 26px rgba(149, 3, 168, 0.5);
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      -ms-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      margin-top: 50px;
    }

    #cards_landscape_wrap-2 .card-flyer .text-box p {
      margin-top: 10px;
      margin-bottom: 0px;
      padding-bottom: 0px;
      font-size: 14px;
      letter-spacing: 1px;
      color: #000000;
    }

    #cards_landscape_wrap-2 .card-flyer .text-box h6 {
      margin-top: 0px;
      margin-bottom: 4px;
      font-size: 18px;
      font-weight: bold;
      /* text-transform: uppercase; */
      font-family: "Roboto Black", sans-serif;
      letter-spacing: 1px;
      color: #b826b8;
    }

 /* Efecto hover para las cards */
 .card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Asegura que la imagen se vea completa */
.card-img-top {
  width: 100%;
  /* Asegura que la imagen ocupe el ancho completo del card */
  height: 200px;
  /* Altura fija para todas las imágenes */
  object-fit: contain;
  /* Ajusta la imagen para que se vea completa */
  background-color: #f8f9fa;
  /* Fondo para espacios vacíos (opcional) */
}

/* Estilo para el cuerpo del card */
.card-body {
  position: relative;
  /* Permite posicionar el ícono correctamente */
  padding: 1rem;
  /* Espaciado interno */
}

/* Estilo para el ícono */
.fa-arrow-circle-right {
  position: absolute;
  /* Posiciona el ícono en la esquina inferior derecha */
  bottom: 1rem;
  right: 1rem;
  color: #007bff;
  /* Color azul de Bootstrap */
  transition: color 0.3s ease;
}

.card-hover:hover .fa-arrow-circle-right {
  color: #0056b3;
  /* Color azul más oscuro al hacer hover */
}


  /* Estilo para la lista ordenada (incisos) */
  ol.custom-list {
    list-style-type: decimal; /* Números */
    padding-left: 20px; /* Espaciado */
  }

  /* Estilo para cada elemento de la lista (incisos) */
  ol.custom-list li {
    margin-bottom: 10px; /* Espacio entre incisos */
    color: #007BFF; /* Color azul para los números */
    font-weight: normal; /* Asegura que el texto no esté en negritas */
  }

  /* Estilo para el texto dentro de los incisos */
  ol.custom-list li span {
    color: #000000; /* Color negro para el texto */
    font-weight: normal; /* Asegura que el texto no esté en negritas */
  }

  /* Estilo para el texto justificado */
  .text-justify {
    text-align: justify;
    text-justify: inter-word; /* Mejora la justificación */
  }


    /* Estilo para la lista ordenada (incisos) */
    ol.custom-list {
      list-style-type: decimal; /* Números */
      padding-left: 20px; /* Espaciado */
    }
  
    /* Estilo para cada elemento de la lista (incisos) */
    ol.custom-list li {
      margin-bottom: 10px; /* Espacio entre incisos */
      color: #007BFF; /* Color azul para los números */
    }
  
    /* Estilo para el texto dentro de los incisos */
    ol.custom-list li span {
      color: #000000; /* Color negro para el texto */
    }
  
  

      /* Asegura que el tamaño del carrusel sea fijo y siempre responsivo */
.carousel-item {
  background-color: #ffffff; /* Fondo gris claro */
  color: #333; /* Color de texto oscuro */
  padding: 50px; /* Reduce el padding */
  text-align: center;
  height: 200px; /* Tamaño fijo para el carrusel */
  overflow: hidden; /* Evita que el contenido se desborde */
  position: relative; /* Necesario para las flechas flotantes */
  display: flex; /* Usamos flexbox para centrar el contenido */
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  margin-left: auto; /* Márgenes automáticos para centrar */
  margin-right: auto; /* Márgenes automáticos para centrar */
  width: 90%; /* Puedes ajustar el porcentaje para el ancho */
}

/* Título del carrusel */
.carousel-title {
  font-size: 1.2rem; /* Tamaño de texto reducido */
  font-weight: bold;
  color: #6e2c61; /* Color morado */
}

/* Texto del carrusel */
.carousel-text {
  font-size: 1rem; /* Tamaño de texto reducido */
  margin-bottom: 20px; /* Agrega un margen debajo del texto para separarlo de las flechas */
}

/* Para hacer que el carrusel se adapte a pantallas pequeñas */
@media (max-width: 768px) {
  .carousel-item {
    height: 250px; /* Ajusta el tamaño del carrusel en pantallas pequeñas */
  }

  .carousel-title {
    font-size: 1.2rem; /* Reduce tamaño de los títulos en móviles */
  }

  .carousel-text {
    font-size: 0.9rem; /* Reduce tamaño del texto en móviles */
  }
}

/* Espaciado en el contenedor */
.carousel-inner {
  padding-left: 60px;
  padding-right: 60px;
}

/* Asegurar que las flechas no se sobrepongan */
.carousel-control-prev, .carousel-control-next {
  z-index: 1; /* Coloca las flechas encima del contenido */
  padding: 0 15px; /* Añade algo de espacio extra alrededor de las flechas */
}


 
.btn-custom {
  background-color: #FF5733; /* Naranja */
  color: #FFFFFF; /* Texto blanco */
  border: none; /* Sin borde */
}
.btn-custom:hover {
  background-color: #E64A19; /* Naranja más oscuro al pasar el mouse */
}
 

.centrado-1 {
  text-align: center;
  /* Centra el texto horizontalmente */
  margin: 0 auto;
  /* Centra el contenedor horizontalmente si tiene un ancho definido */
  width: 100%;
  /* Ajusta el ancho del contenedor según sea necesario */
  font-family: 'Georgia', serif;
  /* Cambia el tipo de letra a Georgia */
  font-size: 1.3rem;
  /* Aumenta el tamaño de la fuente */
}

.centrado-1 p {
  margin: 15px 0;
  /* Añade un margen superior e inferior a los párrafos */
  line-height: 1.2;
  /* Aumenta el interlineado para mejor legibilidad */
}