/*Es la barra de arriba estatica*/
 /* Estilos para el encabezado */
 .top-bar {
   width: 100%;
   background-color: white;
   box-shadow: 0px 5px 5px rgba(161, 161, 161, 0.1);
 }

 #navbar2 {
   font-family: 'Raleway', sans-serif;
   position: -webkit-sticky;
   position: sticky;
   animation: adjust-header linear both;
   animation-timeline: scroll();
   animation-range: 0 200px;
   top: 0px;
   z-index: 0;
 }

 @keyframes adjust-header {
   to {
     background-color: #EEEFF2;
   }
 }



 /* Estilos para los enlaces de navegación */
 .nav-links {
   display: flex;
   align-items: center;
 }

 .nav-link {
   margin-right: 20px;
   transition: ease 0.2s;
 }

 .nav-link:hover {
   font: bold;
   scale: 1.2;
   transition: 0.2s;
 }


 .cajawrap {
   display: flex;
   flex-direction: row;
   width: 100%;

 }

 @media (max-width: 767px) {
   .cajawrap {
     flex-direction: column;

   }

 }



 /*---------------Estilo del carucel de imagenes------------------------*/
 .cont_carru {
   width: 100%;

 }

 .carousel-control-next,
 .carousel-control-prev {
   position: absolute;
   top: 0;
   bottom: 0;
   z-index: 1 !important;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 15%;
   padding: 0;
   color: #fff;
   text-align: center;
   background: 0 0;
   border: 0;
   opacity: .5;
   transition: opacity .15s ease;
 }

 .main_img {
   width: 100%;
   box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
   border-radius: 20px;
 }

 .img_container {
   position: relative;
 }

 .arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   background-color: white;
   /* Agregar fondo blanco */
   padding: 5px;
   /* Aumentar el relleno para hacer más grande el área de clic */
 }

 #prevArrow {
   left: 10px;
 }

 #nextArrow {
   right: 10px;
 }

 .thumbnail_container {
   display: flex;
   flex-direction: column;


 }

 .thumbnail {
   width: 100%;
   cursor: pointer;
   margin-bottom: 10px;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
   /* Añadir sombra a todas las miniaturas */
   border-radius: 12px;
 }

 .thumbnail.active {
   box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
   /* Añadir una sombra más pronunciada a la miniatura activa */
 }

 /* Estilos para dispositivos móviles */
 @media (max-width: 767px) {
   .container {
     margin: 10px;
     /* Ajustar el margen para dispositivos móviles */
   }

   .col-12 {
     flex: 0 0 100%;
     /* Establecer ancho completo para dispositivos móviles */
   }

   .col-sm-2 {
     display: none;
     /* Ocultar miniaturas en dispositivos móviles */
   }

   .col-sm-10 {
     width: 100%;
     /* Establecer ancho completo para la imagen principal en dispositivos móviles */
   }
 }

 /*---------Fin de estilos de carucel de imagenes--------------------*/

 /*Dar prioridad de color blanco para las columnas*/
 .custom-bg-white {
   background-color: white !important;
   /* Usar !important para asegurarse de que esta regla anule las reglas anteriores */
 }


 /*La barra naranja para los titulos de las descripciones de los cursos*/
 .descriptio-bar {
   background-color: #ff6e0d;
   color: white;
   text-align: left;
   padding: 10px 10px;
   /* Ajusta el relleno según sea necesario */
   border-radius: 10px;
   /* Ajusta el radio de los bordes según sea necesario */
   margin-top: 20px;
   /* Ajusta el margen superior según sea necesario */
   margin-bottom: 10px;
   /* Ajusta el margen inferior según sea necesario */
 }

 /*Estilo de "Este taller contiene:"*/
 .contiene {
   font-size: 17px;
 }

 /* Estilos para el cuadro de video de YouTube */
 .videorhino {
   border-radius: 15px;
   /* Redondea los bordes del cuadro de video */
   overflow: hidden;
   /* Evita que el contenido se desborde del cuadro de video */
 }

 /*--------------Estilos de botones de comprar-----------------------*/

 /*"AGREGAR AL CARRITO"*/
 /* ESTILOS DE BOTON AÑADIR A CARRITO */
 /*--------------Estilos de botones de comprar-----------------------*/
 .botones-AC {
   display: flex;
   justify-content: center;
   text-align: center;
   align-content: center;
   width: 100%;
   margin-top: 7px;
 }

 .icon {
   border-radius: 1px;
 }

 .CartBtn {
   width: 300px;
   height: 42px;
   border-radius: 6px;
   /* Se mantiene el borde más redondeado */
   border: none;
   background-color: #ff6e0d;
   display: flex;
   justify-content: center;
   align-items: center;
   /* Agrega espaciado interno */
   cursor: pointer;
   transition: all 0.3s ease;
   /* Transición suave */
   overflow: hidden;
   /* Evita que los elementos se salgan */
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103);
   position: relative;
   /* Necesario para efectos de hover */
 }

 .IconContainer {
   position: absolute;
   left: -50px;
   background-color: transparent;
   display: flex;
   justify-content: center;
   z-index: 0;
   transition-duration: .5s;
   top: 7px;
 }

 .icon {
   border-radius: 1px;
 }

 .text {
   margin: auto;
   padding: 0px;
   width: fit-content;
   display: flex;
   color: white;
   z-index: 0;
   transition-duration: .5s;
   position: relative;
   font-size: 1.2em;
 }

 .CartBtn:hover .IconContainer {
   transform: translateX(110px);
   border-radius: 40px;
   transition-duration: .8s;
   opacity: 1;
 }

 .CartBtn:hover .text {
   transform: translate(0px, 0px);
   transition-duration: .5s;

 }

 .CartBtn:active {
   transform: scale(0.95);
   transition-duration: .5s;
 }

 /* Estilos para el hover */
 .CartBtn:hover {
   background-color: white;
   /* Cambia el fondo a blanco */
   color: #ff6e0d;
   border: 2px solid #ff6e0d !important;
 }

 .CartBtn:hover .IconContainer svg {
   fill: #ff6e0d;
   /* Cambia el color del icono a naranja */
 }

 .CartBtn:hover .text,
 .CartBtn:hover .bi-info-circle {
   color: #ff6e0d;
   /* Cambia el color del texto e íconos a naranja */
 }

 /*Fin de CSS de boton de "AGREGAR AL CARRITO"*/
 .botones-CA {
   display: flex;
   justify-content: flex-start;
   text-align: center;
   align-content: center;
   width: 100%;
   background-color: #ff6e0d;
 }

 .CartBtn2 {
   width: 300px;
   height: 43px;
   border-radius: 12px;
   border: 2px solid #ff6e0d;
   background-color: white;
   display: flex;
   justify-content: center;
   cursor: pointer;
   transition-duration: .5s;
   overflow: hidden;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103);
   position: relative;
   margin-top: 10px;

 }

 .IconContainer2 {
   position: absolute;
   left: -180px;
   background-color: transparent;
   display: flex;
   justify-content: center;
   z-index: 0;
   transition-duration: .8s;
   position: relative;

   padding-top: 5px;
 }

 .icon {
   border-radius: 1px;
 }

 .text2 {
   height: 90%;
   font-size: 19px;
   width: fit-content;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgb(17, 17, 17);
   z-index: 0;
   transition-duration: .5s;
   position: relative;
   left: -12px;
   top: 2px;
 }

 .CartBtn2:hover .IconContainer2 {
   transform: translateX(168px);
   border-radius: 40px;
   transition-duration: .8s;
 }

 .CartBtn2:hover .text2 {
   transform: translate(20px, 0px);
   transition-duration: .5s;
 }

 .CartBtn2:active {
   transform: scale(0.95);
   transition-duration: .5s;
 }

 /*Fin de CSS de boton de "AGREGAR AL CARRITO"*/


 .select-container {
   width: 400px;
   /* Ajusta el ancho según tus necesidades */
   margin: 0 auto;
   /* Esto centrará el contenedor horizontalmente */
 }

 /**/
 /* --Estilo opcional para el selector de monedas */
 #currency-selector {
   padding: 5px;
   font-size: 16px;
 }

 /* Estilo para los iconos */
 .currency-icon {
   margin-right: 0px;
 }

 /*----Estilo para iconos de la redes sociales del footer---------*/
 .redes-sociales {
   display: flex;
   justify-content: center;
   /* Centra horizontalmente los elementos */
   align-items: center;
   /* Centra verticalmente los elementos */
   margin-left: 60px;
   /* Mueve el contenedor más hacia la derecha */
 }


 .redes-sociales>div {
   margin-right: 70px;
   /* Ajusta el espaciado entre los elementos */
 }



 .text-hover-primary {
   color: #ff6e0d;
   /* Cambiar el color del texto al pasar el ratón sobre él */
   transition: color 0.9s ease;
   /* Agregar una transición suave */
 }


 /* Caja Desplazamiento */
 .diseño {
   border-radius: 15px;
   width: 100%;
   height: auto !important;
   padding: 0 10px 10px 10px;
   background-color: rgb(244, 244, 244);
 }

 @media (max-width: 767px) {
   .diseño {
     margin: 20px 0px;
     width: 100% !important;
     padding: 0 10px 10px 10px;
     background-color: rgb(244, 244, 244);
     height: auto !important;
   }
 }

 .sticky {
   width: auto;
   border-radius: 20px;
   position: fixed;
   z-index: 0;
 }

 .sticky.start {
   top: 182px;
   /* Altura inicial de la caja */
   opacity: 1;
 }

 .sticky.end {
   opacity: 1;
 }

 @media (max-width: 767px) {

   /* Caja Desplazamiento */
   .sticky {
     margin-top: 15px !important;
     margin-bottom: -50px !important;
     width: auto !important;
     height: auto !important;
     position: relative;
     top: 0px;
     z-index: 0;
   }

   .sticky.start {
     top: 0px;
     /* Altura inicial */
     opacity: 1;
   }

   .sticky.end {
     opacity: 1;
   }
 }

 /**********Margen CASACADA O BREADCRUMB************/
 .margen_cascada {
   margin-top: 35px !important;
   margin-bottom: 35px !important;

 }

 /**********Margen General************/
 .margen {
   margin-right: 60px !important;
   margin-left: 60px !important;
   width: auto !important;
 }

 @media (max-width: 767px) {

   /**********Margen General Mobile************/
   .margen {
     margin-right: 10px !important;
     margin-left: 10px !important;
   }

   .margen_cascada {
     margin-top: 15px !important;
     margin-bottom: 5px !important;

   }
 }

 /**********************/
 /*******EstilosSlide***************/

 .slide_titulo {
   color: #ff6e0d;
 }

 .html_slide,
 .body_slide {
   position: relative;
   height: 100%;
   /*arriba/derecha/abajo/izquierda*/
   padding: 0px 23px 19px 23px !important;
   z-index: 0 !important;
 }

 .body_slide {
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #000;
   margin: 0;
   padding: 0;
   z-index: 1;

 }

 .swiper {
   width: 100%;
   height: 100%;
 }

 .swiper-slide {
   text-align: center;
   font-size: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .swiper {
   margin-left: auto;
   margin-right: auto;
 }

 .slid_color {
   color: #f2f2f2 !important;
 }

 .slid_color:hover {
   color: #ff6e0d !important;
 }

 .swiper-pagination-bullet {
   background: #f4f4f4 !important;
 }

 /*CONTENIDO DE LA TARJETA*/

 .image-content {
   padding: 17px 17px !important;
   overflow: hidden;
 }

 .card-content {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .card-image {
   height: 100%;
   width: 100%;
   object-fit: cover;
   margin-bottom: 17px;
 }

 .namecurso {
   font-size: 18px;
   font-weight: 900 !important;
   color: #333 !important;
 }

 .description {
   font-size: 14px;
   font-size: small;
   text-align: left;
   color: #808080;
 }

 .cont_curso {
   display: flex;
   flex-direction: row;
 }

 di,
 da {
   font-family: 'Work Sans', sans-serif;
 }

 di {
   font-size: 25px;
   color: #ff6e0d;
 }

 da {
   text-decoration: none;
   color: #4a4a4d;
   font-size: 16px;
   margin-top: 7px;
 }

 .btn_slide {
   width: 100%;
 }

 /*CAJA DESPLAZAMIENTO*/
 .correccion1 {
   display: flex;
   justify-content: center;
 }

 /*CAJA SHIPPING*/
 .caja_shipping {
   padding: 20px;
   display: flex;
   flex-direction: column;

   background-color: #ffffff;
   border-radius: 12px;
   font-size: 10px !important;
 }

 .h5_shipping {
   margin: 0;
 }

 .ico_shipp {
   color: #ff6e0d;
 }

 .p_shipp {
   margin: 0;
 }

 /*COLUMNA 2*/
 /*SELECT ELIGE PREGUNTA*/
 .select_elige {
   margin-top: 10px;
   padding-left: 10px;
   font-size: 20px;
   border-radius: 10px !important;
   width: 100%;
   height: 50px;
   border: 2px solid #ff6e0d !important;
 }

 .select_elige:focus {
   outline: .1px solid #ff6e0d !important;
   ;
 }

 /*COLUMNA 2*/
 /*ICONOS*/

 .ico_dismod1 {
   color: #ff6e0d;
   margin: 0px 7px 0px 6px;
 }

 .ico_dismod2 {
   color: #ff6e0d;
   /*arriba/derecha/abajo/izquierda*/
   margin: 0px 4px 0px 6px;
 }

 .ico_dismod3 {
   color: #ff6e0d;
   /*arriba/derecha/abajo/izquierda*/
   margin: 0px 5px 0px 6px;
 }

 /*CONTADOR CONTENEDOR*/
 .caja_contador {
   display: flex;
   align-items: center;
   margin-top: 15px;
   flex-wrap: wrap;
   justify-content: center;
 }

 .margenopciones {
   margin-top: 20px;
   margin-bottom: 30px;
 }

 @media (min-width: 992px) {
   .margenopciones {
     margin-top: 60px;
     margin-bottom: 60px;
   }
 }

 /*PESTAÑA CAJA DE ESTRELLAS*/
 .caja_stars {
   width: 25%;
   margin-left: 10px;
 }

 @media (max-width: 767px) {

   /*********Mobile************/
   .caja_stars {
     width: 95%;
   }
 }