* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100% !important;
  margin: 0 !important;
}

nav{
  width: 100% !important;
  margin: 0 !important;
}

#totalCarritoNavb {
  font-size: 14px;
}

.variantes select {
  height: min-content;
  width: min-content;
  display: inline-block;
  font-size: 2vh;
}


#fondo2 {

  position: fixed;
  z-index: 9999999999;
  opacity: 100%;
  height: 44vh;


  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border-color: #fa87f1;
  border-style: double;


}

#fondo {
  position: fixed;
  z-index: 9999999999;
  opacity: 100%;
  height: 44vh;


  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* .contenedor {
  overflow-x: hidden;

} */


.tarjetas {

  margin-top: 58px;
  text-align: center;


}

.tarjetas img {
  max-width: 60%;
  align-self: center;
  border-radius: 15% !important;
  padding: 5PX;
}

/* #logo{
      position: fixed;
      z-index: -49;
      width: 50vh;
      height: 50vh;
      border-radius: 50%;
      opacity: 25%;
      
      left: 15%;
      top: 30%;
      transform: translate(-15%, -30%);
  
  } */

/* 
  
  
  nav ul {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(87, 83, 83);
      right: 0;
      left: 0;
      top: 0;
  
  }
  
  nav ul li {
      border: 1px solid rgb(122, 155, 155);
      text-align: center;
      padding: 2PX;
      background-color: rgb(5, 5, 5);
      list-style: none;
      transition: background-color .5 cubic-bezier(0.075, 0.82, 0.165, 1);
      border-radius: 10%;
      margin: 1PX;
  
  
  
  } */

/* 
  nav ul li a {
      text-decoration: NONE;
      font-size: 16px;
      color: aliceblue;
  
  
  }
  
  
  
  
  nav ul li:hover {
      background-color: rgb(192, 83, 32);
      color: #fff;
      font-weight: bold;
      
  }
  
   */

#nav1 {
  z-index: 48 !important;
}

#offcanvasDark {
  z-index: 49 !important;

}


#alertAgrego {
  position: fixed;
  left: 50%;
  top: 30% !important;
  transform: translate(-50%, -50%);
  z-index: 50;
}


#totalCarritoNavb {
  z-index: 55 !important;
}



footer .redes {
  position: fixed;
  top: 85%;
  right: 1.5%;
  z-index: 50;
}


.redes a img {
  width: 8.5vh;
  height: 8.5vh;
  border-radius: 50%;
}


section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4%;

}






/* .diseñador{
     
      position:fixed;
      display: flex;
  justify-content: center;
      border: 1px solid rgb(192, 141, 47);
      background-color: #7cf86c;
      text-align: center;
      padding: 1px;
      margin-bottom: 01PX !important;
  
      right: 0;
      left: 0;
      bottom: 1PX;
    
   
  } */



section iframe {

  border-radius: 20%;

}

section img {
  border-radius: 50%;
  width: 30vh;
  height: 30vh;
}

section h1 {
  font-size: 44px;
  font-weight: bold
}

section h4 {
  font-size: 18px;
  font-weight: bold
}


.home {
  font-size: 16px;
  text-align: center;
}

.home2 {
  font-size: 2vh;
  text-align: left;
}

/* #inp{
      margin-bottom: 58px; 
  } */


.cardcontact {
  padding: 50PX;
}

.checknot {
  justify-content: end !important;
  margin: auto;
  text-align: start;
}

@keyframes aparecerDesdeAbajo {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    z-index: 999;
  }
}

.botonaparecer {

  display: block;
  /* Convertir el botón en un elemento de bloque */

  margin: auto;
  /* Establecer márgenes automáticos para centrarlo */

  opacity: 0;
  z-index: 999;
}

.card-text {

  display: block;
  /* Convertir el botón en un elemento de bloque */
  margin: auto;
  /* Establecer márgenes automáticos para centrarlo */

}

.card {
  width: 100%;
  /* Establece el ancho deseado para la imagen */
  height: 100%;
  /* Establece la altura deseada para la imagen */
  object-fit: contain;
  /* Ajusta la imagen dentro del contenedor, recortándola si es necesario */
}

.card-img-top {
  width: 100%;
  /* Establece el ancho deseado para la imagen */
  height: 200px;
  /* Establece la altura deseada para el contenedor */
  object-fit: contain;
  /* Ajusta la imagen dentro del contenedor, recortándola si es necesario */
}

.card-body {
  width: 100%;
  /* Establece el ancho deseado para la imagen */
  /* Antes tenía "height: 280px" fijo, lo que hacía que el contenido
     se saliera de la tarjeta cuando era más largo de lo normal
     (descripciones largas, variantes de medida, etc). Ahora usamos
     min-height para que la tarjeta pueda crecer si el contenido lo necesita. */
  min-height: 280px;
  overflow-wrap: break-word;
}

/* hacemos que las tarjetas se muevan de posicion */
/* .card-img-top {
    transition: transform 0.0s ease;
  } */
/* hacemos que las imagenes se agranden al pasar el puntero */
/* .card-img-top:hover {
    transform: scale(1.5);
  } */


.cantidad {
  width: 70px;
  /* Ajusta el valor según tus necesidades */
  display: block;
  /* Convertir el botón en un elemento de bloque */
  margin: auto;
  /* Establecer márgenes automáticos para centrarlo */
}


/*  
    nav {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      justify-content: center;
    }
    nav {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    nav ul li {
      width: 100%;
    }
  */

li form {
  margin-left: 30px;
  margin-right: 10px;
}

.scroll-up-btn-container {
  position: fixed;
  bottom: 50px;
  left: 5px;
  z-index: 99;
  display: none;


  width: 8.5vh;
  height: 8.5vh;
  border-radius: 50%;


}

.scroll-up-btn {
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.scroll-up-btn img {
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
}


.image-container {
  position: relative;
  display: inline-block;
  /* Agrega esto para que el texto se posicione correctamente */
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  /* Agrega esta línea */
  color: #333;
  z-index: 1;
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ponemos el boton con display block y margen 0 */
.botonaparecer {
  display: block;
  margin: 0 auto;
  z-index: 999;

}

/* a continuacion sacamos el borde al contenido de la tarjeta */
/* .contentarj {
  /*border: 0;*/

/* }   */

.img-prod:hover {
  transform: scale(1);
  z-index: 1;

}

.img-prod:active {
  position: fixed !;
  /* La imagen se posicionará en relación a la ventana */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  z-index: 99999999 !important;
  /* Asegúrate de que esté por encima de otros elementos */
  transform: scale(2);
  z-index: 1;
  margin: -5px;
  /* Agrega un margen negativo para crear espacio */
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

h7 {
  color: red;
  font-size: 2vh;
}

h11 {
  color: rgb(67, 64, 64);
  font-size: 1.4vh;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #f9f9f9;
}

h1,
h2,
h3,
h5 {
  font-family: 'Playfair Display', serif;
}

small {
  font-size: 1.5vh;
}

.porCategoria {
  display: flex;
  justify-content: center;
  margin: 2px 0;
}

.porCategoriaUl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.porCategoriaUl li {
  margin: 0;
}

.categoria-btn {
  border-radius: 4px;
  padding: 2px 4px;
  transition: .2s;
  font-weight: 5;
  color: rgb(6, 6, 6);
}

.categoria-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.518);
}

.bg-gray.py-5 {
  position: sticky;
  top: 5px;
  z-index: 40;
  padding: 5px;

}




.card-text {

  display: block;
  /* Convertir el botón en un elemento de bloque */
  margin: auto;
  /* Establecer márgenes automáticos para centrarlo */
  font-size: 2vh;
}


.cantidadParaAgregar {

  font-size: 2.5vh;
}

/* ===================================================== */
/* MEJORAS DE ASPECTO Y FUNCIONALIDAD (agregado) */
/* ===================================================== */

/* Efecto hover sutil en las tarjetas de producto: da sensación de "click-able" */
.card-group.tarjetas2 .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-group.tarjetas2 .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(115, 123, 191, 0.15);
}

/* Precio final y precio sin impuestos, más legibles y con jerarquía visual */
h7 {
  display: inline-block;
  color: #c0392b;
  font-size: 2.2vh;
  font-weight: bold;
}

h11 {
  display: block;
  color: #6c757d;
  font-size: 1.3vh;
  margin-top: 2px;
}

/* Botón "Agregar al carrito" con mejor feedback al interactuar */
.botonaparecer {
  transition: background-color 0.2s ease, transform 0.1s ease;
  background-color: #a370b9 !important;
}

.botonaparecer:hover {
  background-color: #8e44ad !important;
}

.botonaparecer:active {
  transform: scale(0.96);
  background-color: #8d44ad72 !important;
}

/* Insignia de % OFF más prolija (antes era un óvalo rosado difícil de leer) */
.text-overlay {
  background-color: #c0392b !important;
  color: #fff !important;
  opacity: 1 !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  padding: 2px 10px !important;
  font-weight: bold;
}

/* Mensaje cuando el buscador no encuentra productos */
.sin-resultados {
  text-align: center;
  padding: 3rem 1rem;
  color: #000000;
  font-size: 1.1rem;
  width: 100%;
}

/* Loader mientras carga el catálogo por primera vez */
#loaderCatalogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  gap: 1rem;
  width: 100%;
}

/* ===================================================== */
/* CARRITO: cada producto ahora se ve como una fila con
   miniatura, nombre/precio y controles de +/- y eliminar,
   en vez de depender de "tocar la fila para restar 1".

   Usamos "#interes" (id del contenedor del carrito) para que
   estas reglas ganen siempre por especificidad a ".tarjetas img",
   que si no, hacía flotar/encoger la miniatura del producto.
   También usamos colores claros porque el offcanvas del carrito
   tiene fondo oscuro (text-bg-dark) y el texto/botones oscuros
   quedaban invisibles sobre ese fondo. */
/* ===================================================== */

.carrito-item {
  gap: 0.6rem;
  padding: 0.6rem 0.4rem;
  flex-wrap: wrap;
}

#interes .carrito-item-img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  min-width: 48px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  align-self: center !important;
  padding: 0 !important;
  flex-shrink: 0;
  background-color: #fff;
}

.carrito-item-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 140px;
  min-width: 0;
}

.carrito-item-nombre {
  font-size: 1.5vh;
  font-weight: 600;
  color: #ffffff;
  overflow-wrap: break-word;
}

.carrito-item-precio {
  font-size: 1.3vh;
  color: #d0d0d0;
}

.carrito-item-controles {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  margin-left: auto;
}

.carrito-btn-cantidad {
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.carrito-item-cantidad {
  min-width: 22px;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
}

.carrito-btn-eliminar {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
}

#borrarCarr {
  text-align: center;
  margin-top: 0.5rem;
}

/* El carrito (offcanvas oscuro) tiene adentro un div.card de Bootstrap,
   que por defecto trae fondo blanco: quedaba un recuadro blanco brillante
   rompiendo el tema oscuro y tapando la lista de productos. Lo hacemos
   transparente para que se mezcle con el fondo oscuro del carrito.
   Ademas cada fila (.list-group-item) trae SU PROPIO fondo blanco por
   defecto, independiente del .card que la contiene, así que también hay
   que sacárselo o cada producto queda dentro de su propio recuadro blanco. */
#offcanvasDark .card,
#offcanvasDark .list-group,
#offcanvasDark .list-group-item {
  background-color: transparent;
  color: inherit;
  border-color: rgba(245, 189, 239, 0.2);
}

/* ===================================================== */
/* CARRITO EN CELULAR: el offcanvas usa 400px de ancho por
   defecto (Bootstrap), que no entra en la mayoría de las
   pantallas de celular y obliga a hacer scroll horizontal.
   Los botones de +/-/eliminar también eran chicos para tocar
   con el dedo. Ajustamos ambas cosas sin tocar el diseño de
   escritorio (que ya andaba bien con 400px). */
/* ===================================================== */

#offcanvasDark {
  width: min(400px, 92vw) !important;
}

@media (max-width: 480px) {

  .carrito-btn-cantidad,
  .carrito-btn-eliminar {
    width: 38px;
    height: 38px;
  }

  .carrito-item-nombre {
    font-size: clamp(13px, 3.8vw, 16px);
  }

  .carrito-item-precio {
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .carrito-item-cantidad {
    font-size: clamp(13px, 3.5vw, 15px);
  }
}

/* Evita que al mantener apretada una imagen en celular aparezca el menú
   nativo del navegador ("Abrir imagen en pestaña nueva", "Copiar imagen",
   etc). No afecta el efecto de zoom con :active que ya tenía la imagen,
   son dos cosas independientes. */
.img-prod {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  touch-action: manipulation;
}

/* ===================================================== */
/* Imagen del carrito: mismo comportamiento táctil que las
   imágenes del catálogo (mantener presionado para agrandar,
   sin que aparezca el menú contextual del celular). */
/* ===================================================== */

.carrito-item-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  touch-action: manipulation;
}

.carrito-item-img:active {
  transform: scale(2.8);
  transition: transform 0.3s ease-in-out;
  position: relative;
  z-index: 999;
}

/* ===================================================== */
/* PERSONALIZACIÓN DE COLORES: NAVBAR, OFFCANVAS Y BOTONES */
/* ===================================================== */

:root {
  /* 🎨 CAMBIA ESTOS COLORES SEGÚN TU PREFERENCIA */
  --tema-principal: #a88cd7;
  /* Color principal para el Navbar y el Carrito */

  --tema-secundario: #ae95d9e5;
  /* Color secundario / cabeceras de offcanvas */

  --tema-canvas: #8e66cf;
  /* Color de fondo del offcanvas del carrito */

  --tema-acento: #ae95d9c5;
  /* Color para botones activos / destacados */
  --tema-acento-hover: #624a62;
  /* Color de botones al pasar el cursor */
  --texto-general: #ffffff;
  /* Color del texto sobre fondos oscuros */
  --borde-suave: rgba(255, 255, 255, 0.15);
  /* Bordes de separación */

  --tema-categoria: #a1009c81;
  /* Color principal de la categoría */

  --texto-categoria: #f1eaea;
  /* Color del texto en las categorías */

}

/* ----------------------------------------------------- */
/* 1. BARRA DE NAVEGACIÓN PRINCIPAL (NAVBAR) */
/* ----------------------------------------------------- */
#nav1,
#nav1.bg-dark {
  background-color: var(--tema-principal) !important;
  border-bottom: 1px solid var(--borde-suave);
}

#nav1 .navbar-brand,
#nav1 .nav-link {
  color: var(--texto-general) !important;
}

#nav1 .nav-link:hover,
#nav1 .nav-link.active {
  color: #ffffff !important;
  /* Color de resaltado al pasar el mouse */
}

/* Botón "Carrito" del Navbar */
#listaInteres {
  background-color: var(--tema-secundario) !important;
  color: var(--texto-general) !important;
  border: 1px solid var(--borde-suave) !important;
}

#listaInteres:hover {
  background-color: var(--tema-acento) !important;
}

/* Indicador de precio en el Navbar */
#totalCarritoNavb {
  background-color: transparent !important;
  color: var(--texto-general) !important;
  font-weight: bold;
}

/* Botón de menú hamburguesa (Móviles) */
.navbar-toggler {
  border-color: var(--borde-suave) !important;
}

/* ----------------------------------------------------- */
/* 2. MENÚ DESPLEGABLE EN MÓVILES (OFFCANVAS NAVBAR) */
/* ----------------------------------------------------- */
#offcanvasDarkNavbar {
  background-color: var(--tema-canvas) !important;
  color: var(--texto-general) !important;
}

/* ----------------------------------------------------- */
/* 3. PANEL DEL CARRITO DE COMPRAS (OFFCANVAS CARRITO) */
/* ----------------------------------------------------- */
#offcanvasDark,
#offcanvasDark.text-bg-dark {
  background-color: var(--tema-canvas) !important;
  color: var(--texto-general) !important;
}

#offcanvasDark .offcanvas-header {
  border-bottom: 1px solid var(--borde-suave);
  background-color: var(--tema-canvas);
}

#offcanvasDark .offcanvas-title,
#offcanvasDark #precioTotal,
#offcanvasDark #cantidadTotalCarrito,
#offcanvasDark p,
#offcanvasDark h4 {
  color: var(--texto-general) !important;
}

/* Tarjeta interna y lista de ítems dentro del Carrito */
#offcanvasDark .card,
#offcanvasDark .list-group,
#offcanvasDark .list-group-item {
  background-color: var(--tema-canvas) !important;
  color: var(--texto-general) !important;
  border-color: var(--borde-suave) !important;
}

/* ----------------------------------------------------- */
/* 4. BOTONES DEL CARRITO (+, -, 🗑) */
/* ----------------------------------------------------- */
.carrito-btn-cantidad {
  background-color: var(--tema-principal) !important;
  color: var(--texto-general) !important;
  border: 1px solid var(--borde-suave) !important;
}

.carrito-btn-cantidad:hover {
  background-color: var(--tema-acento) !important;
}

.carrito-btn-eliminar {
  background-color: #e74c3c !important;
  /* Rojo para borrar */
  color: #ffffff !important;
  border: none !important;
}

.carrito-btn-eliminar:hover {
  background-color: #c0392b !important;
}

/* ----------------------------------------------------- */
/* 5. SECCIÓN DE FILTROS Y CATEGORÍAS */
/* ----------------------------------------------------- */
.porCategoriaUl .categoria-btn {
  background-color: var(--tema-categoria) !important;
  color: var(--texto-categoria) !important;
  border: 1px solid var(--borde-suave) !important;
}

.porCategoriaUl .categoria-btn:hover,
.porCategoriaUl .categoria-btn.active {
  background-color: var(--tema-acento) !important;
  color: #ffffff !important;
}


/* El encabezado con el título necesita buen contraste para el texto
           blanco: el fondo claro con opacidad reducida de arriba no alcanza
           el mínimo de contraste accesible, así que acá lo pisamos con un
           fondo sólido y oscuro solo para esta sección. */
.heroTitulo {
  background-color: #5833979d !important;
  opacity: 75% !important;
}


.bg-gray.py-5 {
  background-color: rgb(253, 253, 253);
  opacity: 60%;

  right: 0;
  z-index: 39;
  padding: 0%;
  margin-right: 0 !important;
  margin-bottom: 0px;
  right: 0 !important;
}


/* corregir color de nav y canvas */
/* ===================================================== */

#offcanvasDarkNavbar{
 background-color: var(--tema-principal) !important;

} 

.offcanvas-body .canv-as, .offcanvas-header{
 background-color: var(--tema-canvas) !important;

} 




/* CAMBIAR SOLO EL COLOR DEL BORDE EN LAS CARDS */
/* ===================================================== */

 .card-group.tarjetas2 .card {
  /* Mantiene el grosor y estilo por defecto, cambiando solo el color */
 border-color: #94758a98 !important;
} 

 /*Opcional: si quieres un color diferente al pasar el cursor */
 .card-group.tarjetas2 .card:hover {
  border-color: #ad44a19c !important;
} 


.card-img-top {
  width: 100%;
  height: 200px;
  object-fit: contain;
  aspect-ratio: 1 / 1; /* Reserva el espacio exacto antes de que cargue la imagen */
  content-visibility: auto; /* Optimiza el renderizado fuera de pantalla */
}
@media (max-width: 576px) {
  footer .redes {
    top: auto !important; 
    bottom: 15px !important; 
    right: 15px !important; 
  }

  .redes a img {
    width: 42px !important;  
    height: 42px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

    #fondo {
    background-size: 100vw !important; /* Cambia a ancho de pantalla (vw) para que no se desborde */
    background-position: center 35% !important; /* Lo centra prolijamente detrás de las categorías */
  }
}