/* Estilos para el contenedor superior */
.top-bar {
    background-color: #0080B5; /* Color de fondo */
    color: #ffffff; /* Color de texto blanco */
    padding: 10px 20px; /* Espaciado interno superior e inferior de 10px, 20px a los lados */
    display: flex; /* Utiliza flexbox para alinear elementos */
    justify-content: center; /* Alinea los elementos a los extremos */
    align-items: center; /* Centra verticalmente los elementos */
    width: 100%; /* Asegura que el contenedor superior abarque toda la anchura */
}

/* Estilos para el texto dentro del contenedor superior */
.top-bar p {
    margin: 0; /* Elimina el margen predeterminado del párrafo */
    font-family: "Segoe UI", sans-serif; /* Establece la fuente Segoe UI */
    text-align: center; /* Centra el texto */
}

/* Estilos para los íconos sociales */
.social-icons a {
    color: #ffffff; /* Color de los íconos */
    text-decoration: none; /* Elimina subrayado en los enlaces */
    margin-left: 20px; /* Espaciado entre los íconos */
}

/*Movimiento de contenedor de iconos de redes sociales*/
.move-der{
   transform: translateX(400px); /* Mueve los íconos 10px hacia la derecha */ 
}

/*Movimiento de texto para centrar*/
.acomodo-text{
  transform: translateX(0px); /* Mueve los íconos 10px hacia la derecha */   
}

/* Estilos para el body */
body {
    margin: 0; /* Elimina el margen predeterminado del body */
    overflow-x: hidden;
    background-image: url('../../img/backgroundinicial.png'); /* Reemplaza 'ruta/de/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: 100%; /* Ajusta el tamaño de la imagen para cubrir todo el cuerpo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    font-family: "Segoe UI", Segoe, Arial, sans-serif;
}


/*Estilo icono carrito*/
.icono-carrito {
    transform: translate(1400px, -160px); /* Mueve los íconos 10px hacia la derecha */
    width: 5%;
    height: 100%;
    display: none;
}

/*Estilo icono busqueda*/
.icono-busqueda{
   transform: translate(1155px, -70px); /* Mueve los íconos 10px hacia la derecha */
   width: 4.8%;
   height: 100%;
}

/*container para los elementos de logo tlaque, button busqueda y carrito y navbar*/
.container-allnav {
    max-width: 1900px;
    margin: 0 auto;
    display: grid;
    justify-content: space-between; /* Alinea los elementos a lo largo del contenedor */
    align-items: center; /* Centra verticalmente los elementos */
    transform: translateX(300px); /* Mueve los íconos 10px hacia la derecha */
    margin-top: -85px;
    /*position: relative; /* Añadido position relative */
}

/*Clase de estilo para logo de tlaquepaque*/
.logoprin{
    /* width: 30%; */
    /* height: 100%; */
    transform: translate(-25%, 153%); /* Mover hacia la derecha un 15% y hacia arriba un 1% */
    width: 20%
}

/*Barra de nav*/
.nav-container {
    background-color: #efefef;
    padding: 10px;
    margin-top: 70px;
    border-radius: 30px; /* Borde redondeado */
    transform: translate(43.0%, -1%); /* Mover la barra de navegación hacia la derecha */
    width: 39.9%;
    z-index: 1000; /* Asegúrate de que la navbar tenga un z-index alto */
    border-radius: 30px; /* Mantenemos los bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Efecto de sombra */
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-inline-box;
    justify-content: space-evenly;
}

.nav-item {
    margin-right: 20px;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: 649;
    font-size: 27.93px;
}

.nav-link:hover {
    color: #666;
}

.nav-link::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #666;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.nav-link:hover::after {
    transform: scaleX(1);
}
/*Barra de nav*/

/*dropdown barra de nav*/
.dropdown-menu {
    display: none;
    background-color: #f0f0f0; /* Color de fondo estandarizado */
    border-radius: 5%;
    transform: translate(8%, -1%); /* Mover hacia la derecha un 15% y hacia arriba un 1% */
}

.nav-item:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px 20px;
    text-decoration: none;
    color: black;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-size: 23px;
}

.dropdown-menu li a:hover {
    background-color: #b2bbc3;
    width: 100%; /* Abarcar el ancho */
}

/* Ajusta el padding solo para el segundo dropdown */

.dropdown-menu.smaller-padding li {
    display: block;
}

.dropdown-menu.smaller-padding li a {
    padding: 5px 14px 10px; /* Cambia el padding según sea necesario */
    border-radius: 5%;
}

.dropdown-menu.smaller-padding li a:hover{
    background-color: #b2bbc3;
}
/*dropdown barra de nav*/
/*Flechita*/
.arrow {
    float: right; /* Coloca la flecha en el lado derecho */
    margin-left: 15px; /* Ajusta el espacio entre el texto y la flecha */
    font-size: 50px; /* Ajusta el tamaño de la flecha */
    margin-top: -35px; /* Sube la flecha un poco */
}
/*Flechita*/
/*divider de navbar*/
.dropdown-menu .divider {
    height: 1px;
    margin: 8px 0;
    background-color: #ccc;
    list-style: none;
    padding: 0px 80px 0px;
}
/*divider de navbar*/
/* Estilos para la barra de navegación */


/* Estilos para los enlaces de la barra de navegación */
.nav-link {
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: 649;
    font-size: 23.00px;
}

/* Estilos para el efecto hover en los enlaces */
.nav-link:hover {
    color: #666;
}

/* Estilos para el efecto de línea debajo de los enlaces */
.nav-link::after {
    background-color: #666;
}

/* Estilos para el menú desplegable */
.dropdown-menu {
    background-color: #f0f0f0;
    border-radius: 5%; /* Mantenemos los bordes redondeados */
}

/* Estilos para el divisor del menú desplegable */
.dropdown-divider {
    background-color: #ccc;
}

li.nav-item::marker {
    visibility: hidden;
}

.dropdown-menu.larger-translate {
    transform: translate(140%, -5%); /* Ajusta el traslate según sea necesario */
}

.dropdown-menu-right {
    right: 0;
    left: auto;
    transform: translate(-205%, -14%); /* Ajusta el traslate según sea necesario */
}

.dropdown-menu-right2 {
    right: 0;
    left: auto;
    transform: translate(-183%, -12%); /* Ajusta el traslate según sea necesario */
}

.dropdown-menu-right3 {
    right: 0;
    left: auto;
    transform: translate(-190%, -15.7%); /* Ajusta el traslate según sea necesario */
}


.resize-textprin {
  /* position: relative;  Asegura que el z-index funcione correctamente */
  /*z-index: -1000;  Coloca el elemento detrás de los demás 
  top: -100px;
  right: -10px;*/
  width: 42%;
  height: 100%;
  transform: translate(0%, -32%);
}

.resize-imgnuevosprod {
   /*  position: relative; Establece el posicionamiento relativo */
   /*top: -460px; /* Mueve el elemento hacia arriba */
   /*right: -600px; /* Mueve el elemento hacia la derecha */
   /* z-index: -1000; Coloca el elemento detrás de los demás */
   width: 15%;
   height: 100%;
   transform: translate(200%, -315%);
}

.navbar {
    /*position: relative;  Asegura que el z-index funcione correctamente */

}

/*Carousel*/

.carousel {
  /*position: relative;*/
  max-width: 600px; /* Cambia este valor al tamaño deseado */
  height: auto; /* Para mantener la proporción de la imagen */
  margin: 0 auto;
  overflow: hidden;
  transform: translate(50%, -195%);
  /*z-index: -1000;  Coloca el elemento detrás de los demás */
}

.carousel-inner {
  display: flex;
}

.carousel-item {
  flex: 0 0 auto;
}

button.prev, button.next,
button.prev2, button.next2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.prev {
  left: 10;
}

.next {
  right: 10;
}
/*Carousel*/

/*Visitanos en nuestras sucursales*/
.sucur{
  /*position: relative;*/
  transform: translateY(-170%);
  width: 22%;
  height: 100%;
}

/*Envios Gratis letrero*/
.envgrat{
   /*position: relative;*/
   transform: translate(90%, -500%);
   /*z-index: -1000;  Coloca el elemento detrás de los demás */
   width: 25%;
   height: 100%;
}

/*Pedidos whats letrero*/
.pedwhats{
     /*position: relative;*/
     transform: translate(90%, -520%);
     /*z-index: -1000;  Coloca el elemento detrás de los demás */
     width: 25%;
     height: 100%;
}

/*Estilos para el segundo carrusel*/

.carousel2 {
  /*position: relative;*/
  max-width: 600px; /* Cambiado a 500px */
  height: auto;
  transform: translate(158%, -417%);
  /*z-index: -1000;*/
}

.carousel2 img {
  max-width: 93.5%; /* Ajusta el ancho máximo de las imágenes al ancho del contenedor */
  height: auto;
}

.carousel-inner2 {
  display: flex;
}

.carousel-item2 {
  flex: 0 0 auto;
}

/* Estilo solo para el botón de "AGREGAR AL CARRITO" */
.button {
  top: 50%;
  transform: translate(35%, -10%);
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px; /* Añadir borde redondeado */
}

.prev2 {
  left: 10;
}

.next2 {
  right: 0;
}
/*Estilos para el segundo carrusel*/

/*letrero Productos recomendados */
.prod-rec {
   /*position: relative;  Asegura que el z-index funcione correctamente */
   /*z-index: -1000;  Coloca el elemento detrás de los demás */
   transform: translate(10%, -2150%);
   width: 40%;
   height: auto;
}

/*letrero Servicios */
.services-txt {
   /*position: relative;  Asegura que el z-index funcione correctamente */
   /*z-index: -1000;  Coloca el elemento detrás de los demás */
   transform: translate(390%, -2060%);
   width: 15%;
   height: auto;
}

/* Carusel productos sugerencias */
.sugerencias-container3 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 250px;
    width: 70%; /* Modificado */
    height: 70%; /* Modificado */
    /*margin-left: 0px;*/
    position: relative;
    transform: translate(1%, 13%);
}

.size_menor{
     transform: translate(-11.6%, 162%);
     width: 19.0%;
}

.sugerencia3 {
    width: 30%;
    height: 100%; /* Modificado */
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 30px;
}

.sugerencia3 img {
    width: 70%;
    height: 50%; /* Modificado */
    object-fit: cover;
    margin-left: 30px;
}

.sugerencia3 .product-info3 {
    padding: 10px;
    background-color: #ffffff;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sugerencia3 .product-name3 {
    margin: 0;
    font-size: 1rem;
    color: #333;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: bold; /* Hace el texto en negrita */
    margin-top: -100px;
}

.sugerencia3 .product-price3 {
    margin: 5px 0 0 0;
    font-size: 1.1rem;
    color: #009FF4;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: bold; /* Hace el texto en negrita */
}

.sugerencia3 .product-code3 {
    margin: 5px 0 0 0;
    font-size: 0.8rem;
    color: #95A5A6;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: bold; /* Hace el texto en negrita */
}

.product-info3 form {
    display: inline-block;
    width: auto;
}

.product-info3 button[type="submit"] {
    display: block;
    margin: 0 auto;
}

button.btn.btn-outline-primary {
  background-color: #007bff; /* Azul sólido */
  color: #ffffff; /* Blanco */
  border: none;
  border-radius: 20px; /* Forma redondeada */
  padding: 10px 20px; /* Tamaño mediano */
  cursor: pointer; /* Cursor en forma de mano */
  transform: translate(0%, 50%);
}

button.btn.btn-outline-primary:hover {
  background-color: #0069d9; /* Azul un poco más oscuro para el efecto hover */
  color: #ffffff; /* Blanco */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
  transition: background-color 0.3s ease; /* Transición suave para el efecto hover */  
}
/*Carusel productos sugerencias END*/

/*IMG articulos escolares*/

/*imagen servicios*/
.services-img {
    width: 33%;
    height: auto;
    /* position: relative; */
    transform: translate(150%, -300%);
    /* z-index: -1000; */ /* Coloca el elemento detrás de los demás */
}

/*letrero descuentos del mes*/
.desc-txt {
    width: 30%;
    height: auto;
    /*position: relative;*/
    transform: translate(170%, -2050%);
}

/* Estilos para el tercer carrusel */
.slider-container {
  max-width: 800px;
  margin: 40px auto;
  position: relative;
  transform: translate(48%,-323%);
}

.slider {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.slide {
  flex: 0 0 100%;
  transition: opacity 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.slide.active {
  opacity: 1;
  position: relative;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-125%);
  font-size: 24px;
  cursor: pointer;
  background: none;
  border: none;
}

.slider-prev {
  left: 8px;
}

.slider-next {
  right: 105px;
}

.slider-img-changesize {
  width: 90%;
  height: auto;
}


/*segunda sugerencia estilo, productos*/
/* Carusel productos sugerencias 2 */
.sugerencias-container-2 {
    display: flex;
    justify-content: space-between;
    /*margin-bottom: 30px;*/
    width: 48%; /* Modificado */
    height: 400px; /* Modificado */
    /*margin-left: 0px;*/
    /*position: relative;*/
    transform: translate(-1%, -580%);
}

.sugerencia-2 {
    width: 30%;
    height: 100%; /* Modificado */
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sugerencia-2 img {
    width: 70%;
    height: 50%; /* Modificado */
    object-fit: cover;
    margin-left: 30px;
}

.sugerencia-2 .product-info-2 {
    padding: 10px;
    background-color: #ffffff;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sugerencia-2 .product-name-2 {
    margin: 0;
    font-size: 1rem;
    color: #333;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: bold; /* Hace el texto en negrita */
    margin-top: -180px;
}

.sugerencia-2 .product-price-2 {
    margin: 5px 0 0 0;
    font-size: 1.1rem;
    color: #009FF4;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: bold; /* Hace el texto en negrita */
}

.sugerencia-2 .product-code-2 {
    margin: 5px 0 0 0;
    font-size: 0.8rem;
    color: #95A5A6;
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: bold; /* Hace el texto en negrita */
}

.product-info-2 form {
    display: inline-block;
    width: auto;
}

.product-info-2 button[type="submit"] {
    display: block;
    margin: 0 auto;
}

button.btn-2.btn-outline-primary-2 {
  background-color: #007bff; /* Azul sólido */
  color: #ffffff; /* Blanco */
  border: none;
  border-radius: 20px; /* Forma redondeada */
  padding: 10px 20px; /* Tamaño mediano */
  cursor: pointer; /* Cursor en forma de mano */
  transform: translate(0%, 50%);
}

button.btn-2.btn-outline-primary-2:hover {
  background-color: #0069d9; /* Azul un poco más oscuro para el efecto hover */
  color: #ffffff; /* Blanco */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
  transition: background-color 0.3s ease; /* Transición suave para el efecto hover */  
}

/*letrero nuestros proveedores*/
.proveedores-txt {
   /*position: relative;*/
   transform: translate(-1%, -2700%);
   width: 40%;
   height: auto;
}

/*img que suple a carusel de marcas*/
.globo-img {
    /*position: relative;*/
    top: -1600px;
    left: 150px;
    width: 83%;
    height: auto;

}



/*estilo del footer*/
.footer {
  /*position: relative;*/
  width: 80%;
  height: auto;
}

.footer-img {
  width: 70%;
  height: auto;
  margin-left: 15%;
  margin-top: -155%;
  display: block;
  margin-bottom: -240px; /* cambiar a 100 al ajustar textos y logos Ajusta este valor según sea necesario */
}

.footer-left {
  width: 50%;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 22%;
    margin-top: 8%;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.0rem;
    font-weight: bold;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-right {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-left: 32%;
    transform: translateY(-1100%);
}

.footer-right a {
  color: #fff;
  font-size: 1.5rem;
  margin-left: 20px;
}

.footer-right a:hover {
  color: #ccc;
}

.footer-content {
   margin-left: 120px;
   transform: translateY(-120px); /* Ajusta el valor según sea necesario */
}


/*Carusel footer circulos de marca*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --width: 200px;
    --gap: 0;
    --num-items: 16; /* Update this to reflect the actual number of items in your circulitos */
    --ani-offset: calc(var(--width) * var(--num-items) * -1);
    --ani-speed: 20s; /* Adjusted animation speed for smoother transition */
}


.circulitos-wrapper {
    width: 80%; /* Adjusted width to be more responsive */
    max-width: 1900px;
    overflow: hidden;
    /*position: relative;*/
    transform: translate(-1%, -780%);
    z-index: 10;
}

.circulitos-wrapper::before,
.circulitos-wrapper::after {
    content: '';
    /*position: relative;*/
    width: 20%;
    height: 100%;
    /*z-index: 1;*/
    top: 0;
}
.circulitos-wrapper::before {
    left: 0;
    background-image: linear-gradient(to right, var(--bg-clr) 0%, transparent 100%);
}
.circulitos-wrapper::after {
    right: 0;
    background-image: linear-gradient(to left, var(--bg-clr) 0%, transparent 100%);
}

.circulitos {
    display: flex;
    align-items: center;
    animation: slide var(--ani-speed) linear infinite;
}
.circulitos-item {
    flex: 0 0 var(--width);
    text-align: center;
    padding: 1rem;
}
.circulitos-item > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
}

@keyframes slide {
    100% {
        transform: translateX(var(--ani-offset));
    }
}

/*clase preloader*/
  #preloadere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Color de fondo del preloader */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegúrate de que esté en la parte superior */
}

#loadere {
    border: 8px solid #f3f3f3; /* Color del borde del loader */
    border-top: 8px solid #3498db; /* Color del borde superior del loader (puedes cambiarlo) */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite; /* Animación de rotación */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*Letra de productos*/
body, .product-name, .product-price, .product-code, footer {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif!important;
}

.custom-font {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.custom-font2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: bold!important;
    
}

/*carrito*/
   .cart-icon-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
}

.cart-icon-container img {
    width: 100px; /* Ajusta el tamaño según sea necesario */
    position: relative; /* Agrega posición relativa */
    z-index: 1; /* Asegura que la imagen del carrito esté debajo */
}

.cart-icon-container .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #FF0000!; /* Color de fondo del contador */
    color: white;
    border-radius: 50%;
    padding: 2px 6px; /* Ajusta el padding para un tamaño adecuado */
    font-size: 12px; /* Ajusta el tamaño de la fuente */
    font-weight: bold;
    z-index: 12; /* Asegura que el contador esté encima de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; /* Ancho mínimo para asegurarse de que se vea bien */
    height: 20px; /* Altura para asegurarse de que se vea bien */
    line-height: 1; /* Alineación vertical del texto */
    right: -270px;
    top: 30px;
    display: none;
}

/*Letrero productos recomendados (detalles.php)*/
.prod-rec-det{
   transform: translate(0px, 160px); /* Mueve los íconos 10px hacia la derecha */
margin-bottom: 150px;
   width: 40%;
   height: 25%;
}

/*numeros subir carro*/
/* Estilos para el input de cantidad */
input[type="number"] {
    -moz-appearance: textfield;
    width: 60px;
    padding: 5px;
    font-size: 16px;
    text-align: center;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*input de cantidad*/
.mover_up {
    transform: translate(0px, 0px); /* Mueve los íconos 10px hacia la derecha */
}

.btn-increment,
.btn-decrement {
    display: inline-block;
    width:500px;
    height: 350px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
    user-select: none;
}

.btn-increment {
    transform: translate(0px, 10px); /* Mueve los íconos 10px hacia la derecha */
}

.btn-decrement {
    transform: translate(0px, 100px); /* Mueve los íconos 10px hacia la derecha */
}

div.col.text-left.custom-font {
    /*margin-top: 15%;*/
    transform: translateX(-2.5%);
}

.baja_elementos {
   margin-top: 5%; 
   margin-right: 19%;
}


/* Contenedor de la barra de búsqueda */
#formBusqueda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5; /* Color de fondo claro */
    border: 1px solid #dcdcdc; /* Borde gris claro */
    border-radius: 30px; /* Bordes redondeados */
    padding: 5px 15px; /* Espaciado interno */
    max-width: 400px; /* Ancho máximo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin: 0 auto; /* Centrar en su contenedor */
    z-index: 1000;
    width: 12.1%;
    height: 66%;
    transform: translate(113%, -116%);
}

/* Campo de texto */
#inputBusqueda {
    border: none;
    outline: none; /* Quitar borde al seleccionar */
    font-size: 16px;
    flex: 1; /* Ocupa todo el espacio disponible */
    margin-right: 10px; /* Espaciado con el ícono */
    color: #6d6d6d; /* Texto en gris */
    background-color: transparent; /* Fondo transparente */
}

/* Ícono de búsqueda */
.icono-busqueda {
    width: 24px; /* Ajusta el tamaño del ícono */
    height: 24px;
    cursor: pointer;
    filter: invert(30%); /* Hace que el color coincida con el diseño (gris oscuro) */
    visibility: hidden;
}

/* Asegurar que sea responsive */
@media (max-width: 768px) {
    #formBusqueda {
        max-width: 300px; /* Reduce el tamaño en pantallas más pequeñas */
        padding: 5px 10px;
    }

    #inputBusqueda {
        font-size: 14px; /* Ajusta el tamaño del texto */
    }

    .icono-busqueda {
        width: 20px;
        height: 20px;
    }
}

input#PalabraClave.reac_inp{
    width: 74%;
    height: 80%;
    transform: translate(50%, 3%);
    background-color: #f5f5f5;
    border: none; /* Elimina el borde */
    outline: none; /* Evita el borde al seleccionar */
    font-family: "Segoe UI", sans-serif; /* Establece la fuente Segoe UI */
    font-size: 10px;
}

/* Estilo específico para el placeholder */
#PalabraClave::placeholder {
        font-family: "Segoe UI", sans-serif; /* Cambiar tipografía */
        font-size: 15px; /* Cambiar tamaño */
        color: #6d6d6d; /* (Opcional) Cambiar el color */
    }

.lup_cla {
    transform: translate(-161%, 4%);
    width: 105%;
}

#PalabraClave {
    box-shadow: none;
}
#PalabraClave:focus {
    box-shadow: none;
}

.tam_bot{
    border: none;
    background: none;
}