/* Estilos para el boton del carrito */
#verCarrito {
  /* padding: 10px; */
  font-size: 1em;
}

/* Estilos para el campo de busqueda en el Navbar */
.navbar-form {
  margin-right: 0; /* Ajuste del margen */
}

/* Ajuste para evitar desbordamiento. Por defecto, el menú está oculto */
#navbarResponsive {
  max-height: initial !important;
  overflow-y: hidden;
  display: none;
}

/* Cuando se añade la clase 'muestra', el menú se muestra */
#navbarResponsive.muestra {
  display: block;
}

.navbar-toggler {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Estado inicial del logo */
#menuLogo {
  display: block; /* Logo visible */
  width: 9vh;
  height: auto;
  margin: -24px;
}

#menuIcon {
  display: none; /* Icono oculto */
  font-size: 24px;
  color: white;
}

/* Cuando el botón tiene .active, se oculta el logo y se muestra el icono */
#menuButton.active #menuLogo {
  display: none;
}
/* Cuando el botón NO tiene .active, se oculta el icono y se muestra el logo */
#menuButton.active #menuIcon {
  display: block;
}

/* Ajuste para ocultar el menú fuera de la pantalla al inicio */
@media (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: -100%; /* Menú oculto a la izquierda */
    width: 100%; /* Ancho del menú */
    height: 100vh; /* Altura del menú */
    z-index: 999; /* Asegura que esté por encima de otros elementos */
    background: black !important; /* Ajusta el color de fondo */
    transition: left 0.3s ease-in-out; /* Animación de entrada/salida */
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
    padding-top: 100px;
    padding-right: 20px;
  }

  /* Menú visible */
  .navbar-collapse.muestra {
    left: 0; /* Se muestra el menú */
  }

  /* Ajuste del botón de la hamburguesa */
  .navbar-toggler {
    z-index: 1000; /* Mayor que el menú */
    background: transparent;
    border: none;
    margin-top: -7px;
  }
  #menuLogo {
    margin: 0;
    margin-top: -25px !important;
    margin-left: -18px !important;
  }
}

/* Estilos para el color de los textos y botones de la pagina */
#texto {
  padding: 1%;
  width: 100%;
  color: rgb(12, 12, 12);
}

/* Estilos para el contenido principal */
.container-main {
  position: absolute;
}

/* Estilos para el menu principal */
.main-menu {
  margin-top: 5.5%;
  width: 100%;
  font-size: 20px; /* Tamaño del texto */
}

.main-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.main-menu li {
  float: left;
  width: 25%; /* Divide el ancho en partes iguales para cada elemento del menu */
}

.main-menu li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 0; /* Ajusta el espacio entre el texto y los bordes superior e inferior */
  text-decoration: none;
}

.main-menu li a:hover {
  background-color: #ddd;
}

/* Estilos para el submenu de Productos*/
#subMenu {
  margin-top: -20px;
  width: 100%;
  font-size: 18px; /* Tamaño del texto */
}

#subMenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fd7e14;
  border: 1px solid #040404;
  border-radius: 0px;
}

#subMenu li {
  float: left;
  width: 25%; /* Divide el ancho en partes iguales para cada elemento del menu */
}

#subMenu li a {
  display: block;
  color: #050505;
  text-align: center;
  padding: 14px 0; /* Ajusta el espacio entre el texto y los bordes superior e inferior */
  text-decoration: none;
  border: 1px solid #fd7e14;
}

#subMenu li a:hover {
  color: #ffffff;
  background-color: #050505;
}

.botonesAPerfiles {
  margin-top: 0.8em;
  background-color: #000000;
  border: 1px solid #525250 !important;
  border-radius: 0%;
}

.botonesAPerfiles:hover {
  background-color: #fd7e14;
  border: 0px solid #000000;
}

.botonesAPerfiles a {
  color: #fff;
  text-decoration: none; /* Para evitar el subrayado en el enlace */
}

.botonesAPerfiles:hover a {
  color: #000000;
}

/* Estilos para el div flotante de "Buscar" */
/* Estilo para el contenedor flotante - NO USADO CREO , ES EL DEL BUSCADOR DE FUNKO */
.floating-div {
  position: fixed; /* Se posiciona en relación con la ventana del navegador */
  top: 50px; /* Ajusta segun tu diseño */
  left: 0; /* Alinea al borde izquierdo */
  width: 100%; /* Ocupa todo el ancho */
  max-height: calc(
    100vh - 20px
  ); /* Ajusta la altura máxima al 100% de la vista menos el padding */
  overflow-y: auto; /* Añade scroll si es necesario */
  background-color: #eae5eb; /* Fondo gris claro */
  border: 0px solid rgb(74, 187, 231); /* Borde azul, actualmente no se usa */
  z-index: 800; /* Asegura que está por encima de otros elementos (a excepcion de carrito que esta el index a 1000 para que se vea encima) */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Añade una sombra para dar un efecto flotante */
  padding: 50px; /* Espaciado interno */
  display: none; /* Ocultar por defecto */
  box-sizing: border-box; /* Incluye el padding y el borde en el tamaño del contenedor */
}

/* Estilos para ajustar el contenido principal debajo del div flotante */
.container-main {
  margin-top: 50px; /* Ajuste para dejar espacio para el div flotante */
}

/* Estilo personalizado para los logotipos de tiendas */
.navbar-brand.custom {
  margin-left: 15px; /* Ajuste el margen izquierdo segun sea necesario */
}

/* Estilos para el carrito */
.form-control {
  margin-top: 1em;
  height: 3em;
  width: 100%;
  margin-bottom: -10rem !important;
}

/* estilo del carrito (icono) */
#verCarrito {
  /*width: 20%;*/
  margin: 0;
  height: auto !important;
  /* margin-left: 50px; */
  /* margin-top: 15.5px; */
  border: none !important; /* Elimina cualquier borde */
  box-shadow: none !important; /* Elimina cualquier sombra */
  outline: none !important; /* Evita el resplandor al hacer clic */
}

#verCarrito.scrolled {
  color: #ffffff;
}

/* Estilo para los botones de cantidad */
#cart {
  width: 98%;
  margin-top: auto;
  position: fixed; /* Cambiar a absolute para que se integre mejor */
  top: 1%;
  right: 1%;
  background-color: #ffffff;
  border: 2px solid #000000;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1090;
  height: auto;
  overflow-y: auto;
  display: none;
  max-height: 98%;
  overflow-y: auto; /* Habilita scroll si el contenido excede max-height */
}

#cart li {
  display: flex;
  flex-direction: row !important; /* Alinea los elementos en fila */
}
#cart h2 {
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333333;
}

.estilosParaItems {
  list-style-type: none;
  padding: 0.4em;
}

.cart-total {
  margin-top: 15px;
}

.cart-total p {
  font-size: 1rem;
  margin-bottom: 10px;
  margin-left: 5px;
}
#inputCorreo {
  margin-top: 1rem;
}
.cart-total button {
  background-color: #000000; /* Color de fondo verde */
  color: white;
  padding: 8px 12px; /* Reducido el padding para hacer el botón más pequeño */
  border: none;
  border-radius: 0px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cart-total button:hover {
  color: #000000;
  background-color: #fd7e14; /* Cambio de color en hover */
}

.quantity-buttons,
.quantity-span {
  font-weight: 800;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  font-size: 16px;
  cursor: pointer;
  border: none !important; /* Elimina cualquier borde */
  box-shadow: none !important; /* Elimina cualquier sombra */
  outline: none !important; /* Evita el resplandor al hacer clic */
  /* margin-top:1rem; */
}

.quantity-buttons {
  background-color: white;
  color: black;
  border-radius: 100px;
  font-size: 0.8rem;
  /* margin-top:1rem; */
}

.quantity-buttons:hover {
  background-color: #050505; /* Cambio de color de fondo en hover */
  color: #fff; /* Cambio de color de texto en hover */
}

.quantity-span {
  border-left: none;
  border-right: none;
  background-color: white !important;
  font-size: 0.8em !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.remove-button {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: none;
  margin-top: -1rem;
}

.remove-button:hover {
  color: rgb(224, 15, 15);
  border: none;
}

#toggleCart {
  margin-top: 2%;
}

/* Estilo para boton del formulario de nuevo usuario (mostrar/ocultar) */
#formularioNuevoUsuario {
  margin-top: auto;
  display: none;
}

/* Estilo para los botones de "Ver compras anteriores", "Editar valores de perfil" y "Finalizar Compra" */
.tamanyosBotones {
  width: auto;
  height: auto;
  margin: 0.2em;
}

/* Barra lateral para cuando el formulario de nuevo usuario esté visible */
#sidebar {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 193, 7);
  border-right: 1px solid #000000;
  padding: 8px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* Habilita scroll si el contenido excede max-height */
}

/* Contenedor padre para centrar el contenedor de imágenes */
.panel-body {
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente si es necesario */
  width: 100%;
  height: 100%;
}

.image-container {
  padding: 8.4em;
  border: 18px solid rgb(255, 255, 255);
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 36.6%; /* Establece la relación de aspecto (1:1 en este caso) */
  overflow: hidden; /* Para ocultar el overflow de las imágenes */
}

.image-container img {
  margin-left: 8%;
  border: 52px solid rgb(255, 255, 255);
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: auto;
  transition: opacity 0.3s ease; /* Transición suave de opacidad */
}

.image-container:hover .image1 {
  opacity: 0; /* Al pasar el ratón, ocultar la imagen 1 */
}

.image-container:hover .image2 {
  opacity: 1; /* Al pasar el ratón, mostrar la imagen 2 */
}

.image2 {
  opacity: 0; /* Inicialmente oculta la imagen 2 */
}

/* Media query para dispositivos más pequeños como tablets y móviles */
@media only screen and (max-width: 768px) {
  .panel-body {
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente si es necesario */
    width: 100%;
    height: 100%;
  }

  .image-container {
    padding: 8.4em;
    /*border: 12px solid rgb(255, 255, 255);*/
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 22.6%; /* Establece la relación de aspecto (1:1 en este caso) */
    overflow: hidden; /* Para ocultar el overflow de las imágenes */
  }

  .image-container img {
    margin-left: 8%;
    border: 12px solid rgb(255, 255, 255);
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    height: auto;
    transition: opacity 0.3s ease; /* Transición suave de opacidad */
  }

  .image-container:hover .image1 {
    opacity: 0; /* Al pasar el ratón, ocultar la imagen 1 */
  }

  .image-container:hover .image2 {
    opacity: 1; /* Al pasar el ratón, mostrar la imagen 2 */
  }

  .image2 {
    opacity: 0; /* Inicialmente oculta la imagen 2 */
  }
}

/* Media query para dispositivos más pequeños como tablets y móviles */
@media only screen and (max-width: 452px) {
  .panel-body {
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente si es necesario */
    width: 100%;
    height: 100%;
  }

  .image-container {
    padding: 8.4em;
    /*border: 12px solid rgb(38, 0, 255);*/
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 8%; /* Establece la relacion de aspecto (1:1 en este caso) */
    overflow: hidden; /* Para ocultar el overflow de las imagenes */
  }

  .image-container img {
    margin-left: 8%;
    /*border: 12px solid red;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    height: auto;
    transition: opacity 0.3s ease; /* Transición suave de opacidad */
  }

  .image-container:hover .image1 {
    opacity: 0; /* Al pasar el ratón, ocultar la imagen 1 */
  }

  .image-container:hover .image2 {
    opacity: 1; /* Al pasar el ratón, mostrar la imagen 2 */
  }

  .image2 {
    opacity: 0; /* Inicialmente oculta la imagen 2 */
  }
}

/* Estilo para los div que contienen los items */
.estiloItems {
  background: rgb(255, 255, 255);
  padding: 1em;
  border-bottom: 3px solid #fd7e14;
  border-radius: 1.2%;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.8em;
}

/* Nuevo estilo tienda (slider)
-------------------------------------- */

.slider {
  position: relative;
  width: 50%;
  overflow: hidden;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.slider-images {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* Duplicamos el ancho por el numero de imágenes */
}
.slider-images img {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 52vw; /* Duplicamos el ancho por el numero de imágenes */
}
.slider-image {
  min-width: 100%;
  width: 100%; /* Cada imagen ocupa el ancho del slider */
  height: auto; /* Mantener proporción */
  object-fit: cover; /* Asegura que las imágenes se vean completas */
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0);
  color: #fd7e14;
  border: none;
  padding: -10px;
  z-index: 10;
  font-weight: 600;
  outline: none !important; /* Elimina el borde de enfoque */
  box-shadow: none !important; /* Elimina cualquier sombra */
}

.left-arrow {
  left: 10px;
  font-size: 1vw;
}

.right-arrow {
  right: 10px;
  font-size: 1vw;
}

@media (max-width: 1090px) {
  .slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    height: 100% !important;
  }
  .slider-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Duplicamos el ancho por el numero de imágenes */
    height: 200% !important;
  }
  .slider-image {
    width: 100%; /* Cada imagen ocupa el ancho del slider */
    height: auto; /* Mantener proporción */
    object-fit: cover; /* Asegura que las imágenes se vean completas */
  }
  .slider-arrow {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    color: #fd7e14;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-weight: 800;
  }
  .left-arrow {
    left: 10px;
  }
  .right-arrow {
    right: 10px;
  }
}

@media (min-width: 1091px) and (max-width: 1342px) {
  .left-arrow {
    left: 0px;
  }
  .right-arrow {
    right: 0px;
  }
  .slider {
    position: relative;
    width: 80%; /* Ajusta el ancho segun tu diseño */
    overflow: hidden;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .slider-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Duplicamos el ancho por el numero de imágenes */
    height: 200% !important;
  }
}
@media (min-width: 1343px) and (max-width: 2342px) {
  .left-arrow {
    left: 0px;
  }
  .right-arrow {
    right: 0px;
  }
}

/* Estilo para efecto del carrito */

.containerShop {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.containerShop.visible {
  transform: translateX(0);
  opacity: 1;
}

/* Añadir numero para controlar que items tiene el carrito */

.cart-counter {
  color: white;
  font-weight: bold;
  border-radius: 100%; /* Hace que sea un círculo perfecto */
  position: relative; /* Ajusta según la posición del carrito */
  display: none; /* Oculto cuando no hay productos */
  text-decoration: none; /* Elimina subrayado */
  border: none; /* Evita bordes extra */
  opacity: 1;
  visibility: visible;
}

.cart-counter:focus,
.cart-counter:active {
  outline: none !important; /* Evita el borde azul en algunos navegadores */
  text-decoration: none !important; /* Asegura que no haya subrayado */
}

@media (min-width: 991.98px) {
  #ropa,
  #fanzine,
  #lienzo,
  #musica {
    font-size: 1.3vw;
    font-weight: bold !important;
  }

  .panel-body > p {
    font-size: 1vw !important;
  }

  .panel-body > p strong {
    font-size: 2vw !important;
  }
}

.fa-paper-plane {
  /* font-size:1.8vw !important; */
  color: #fd7e14 !important;
}
.contact-section h3 {
  font-size: 1.4rem !important;
  color: #fd7e14 !important;
}