/*
convert original.jpg -resize 800x800 small.jpg
convert original.jpg -resize 1200x800 medium.jpg
convert original.jpg -resize 1920x1080 large.jpg

*/
/* Contenedor del slide */
.mySwiper {
    width: 100%;
}

/* Cada slide tendrá un alto fijo */
.mySwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 420px; /* Ajusta a tu gusto */
    overflow: hidden;
}

/* Imagen recortada uniformemente */
.mySwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta sin deformar */
    border-radius: 10px;
}

 
  .titulo-catalogo{
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #ff4d79, #ff80ab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }



  /* Hover en escritorio */
.marca-itemME,.categoria-itemME{
  display: block;
  color: #9e0c7a;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.menu-escritorio{
  background-color: #FFFFFF;
}

.categoria-itemME:hover {
  background-color: #ffe6f0;
    color: #d63384;
    padding-left: 25px;
}

.marca-itemME:hover {
  background-color: #ffe6f0;
    color: #d63384;
    padding-left: 25px;
}


/* Estado activo (cuando se hace click) */
.categoria-itemE.active {
  background-color: #8E44AD;
  color: #fff !important;
  font-weight: bold;
  border-radius: 6px;
}

li a
{
    color:#9e0c7a;
}

li a:hover{
    color: #f009e4;
}

.card{
   /* --bs-card-inner-border-radius: 0;
    border-radius:0;
    --bs-card-border-width: 0px;
    --bs-card-spacer-y:1rem;
     border: none;*/
  --bs-card-bg:#fcf5f782;
  border-radius: .5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}

.card:hover{  
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
/* 5. Tarjetas de producto */


.card-img-top{
  transition: transform .2s ease-in-out;
  object-fit: cover;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}


/* 9. Indicador de colores de variante */
.variante
{
  width: 28px; height: 28px;
  border: 1px solid #191717;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
  cursor:pointer;
}

.product-name, .product-name-variante{
  cursor:pointer;

}

.variante:hover, .product-name:hover, .product-name-variante:hover
{ 
  transform: scale(1.01); 
}

.variante-active{
  box-shadow: 0 0 3pt 3pt #FD077B;
  border: 3px solid #fff;
  color: transparent;

}


.text-morado{
  color: #9b1fc3
}

.text-pink{
  color: #ffc0cb;
}


/* 10. Modal de detalle */
.modal-content
{
  border-radius: .5rem;
  border: none;
  box-shadow: var(--shadow-lg);
}
.modal-close-btn
{
  background: var(--light);
  border: 1px solid var(--dark);
}
.modal-close-btn:hover
{ 
  background: var(--accent); 
}

.modal-body 
{
  max-height: 80vh; /* Limita la altura del contenido para evitar desbordes */
  overflow-y: auto;
  margin-top: 50px; /* Espacio para el botón superior */
}



.product-image:hover
{ 
  transform: scale(1.03);
}


/* 12. Estado “Agotado” */
div.agotado .card-img-top{
  opacity: .5; 
  /*filter: grayscale(100%);*/
}
div.agotado::after{
  content:"Producto agotado";
  position:absolute; 
  top:50%; 
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.7); 
  color:#fff;
  padding:.25rem .75rem; 
  border-radius:.25rem;
  font-size:.9rem; 
  text-transform:uppercase;
}


.modal-close-btn
 {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.6rem;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-weight: 300;
  border: 1px solid #050505;
  background: transparent;
}


.modal-close-btn:hover
  {
    background:#C7B2CC;
}




.swiper-button-next, .swiper-button-prev {
  color: #ff4d79 !important;

}

.swiper-pagination-bullet-active {
  background:#F339A2!important;

}

/* 13. Responsive tweaks mínimos */
@media(max-width:576px){
  .card-img-top{ height: 300px; }
  .alerta-categorias,.alerta-marcas {
    font-size: 0.85rem; /* letra más pequeña en móviles */
    padding: 0.5rem;    /* menos espacio interno */
  }
    .footer-custom {
    font-size: 0.85rem;  /* 👈 más pequeño en móvil */
  }
  .footer-custom p,
  .footer-custom a {
    font-size: 0.8rem;   /* textos y enlaces aún más pequeños */
  }

  .titulo-catalogo{
    font-size: 1.2rem;
  }

  .lead{
    font-size: 1rem;
  }

  h3{
   font-size: 1rem; 
  }

}

.img-resize {
  width: 500px;
  height: 300px;
  object-fit: cover; /* recorta sin deformar */
  border-radius: 10px; /* opcional: esquinas redondeadas */
}
@media (max-width: 768px) {
  .carousel-inner {
    height: 300px; /* Reduce la altura del carrusel en móviles */
  }
}