/* === TEXTO === */
.title {
  font-size: 1.7rem;
}
.Presentacion h3 {
  font-size: 0.75rem;
  color: var(--producto-text-1); /* color */
  font-weight: bold;
}
.Texto h4 {
  font-size: 1rem;
  font-weight: bold;
}
.Texto p { 
  font-size: 1.1rem;
  color: var(--producto-text-4);  /* color */
}
.productos-controles input {
  font-size: 1rem;
}
.producto h4 {
  font-size: 1rem;
  font-weight: bold;
  color: var(--producto-text-2);
}
.producto p {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--producto-text-4);  /* color */
  -webkit-text-stroke: 0.5px #000;
}
.producto .btn-visualizar {
  color: var(--producto-text-1);  /* color */
  font-size: 1rem;
  font-weight: bold;
}


/* =============== SECCIÓN DE SUGERENCIA =============== */
.sugerencia {
  padding: 20px;
}
.title {
  text-align: center;
  margin-bottom: 15px;
}

/* Carrusel contenedor */
.carrusel {
  position: relative;
  border: 3px;
  border-radius: 12px;
  background: var(--carrusel-bg);  /* holor */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Items del carrusel */
.carrusel-items {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  user-select: none;
  touch-action: pan-y;
}

/* Producto */
.c-producto {
  min-width: 100%;              /* móvil: 1 por pantalla */
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}
.carrusel-items a{
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Presentación (imagen + etiqueta) */
.Presentacion {
  position: relative;
  width: 120px;
  height: 180px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}
.Presentacion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Presentacion h3 {
  position: absolute;
  top: 20px;
  left: -40px;
  padding: 5px 50px;
  transform: rotate(-45deg);
  text-transform: uppercase;
}

.Presentacion h3:empty { display: none; } /* si no hay estado, no muestres la banda */
.Presentacion h3.Oferta { background-color: red; }
.Presentacion h3.Limitado { background-color: blue; }
.Presentacion h3.Nuevo { background-color: green; padding-left: 53px; }
.Presentacion h3.Agotado { background-color: #555; padding-left: 48px; }
.Presentacion h3.Exclusivo { background-color: gold; color: #000; padding-left: 45px; }
.Presentacion h3.Rebajado { background-color: orange; padding-left: 45px; } 
.Presentacion h3.Proximamente { background-color: purple; padding-left: 33px; }
.Presentacion h3.Top { background-color: teal; padding-left: 55px; }

/* Texto */
.Texto { 
  margin-top: 10px;
}
.Texto h4 {
  margin-bottom: 5px;
}
/* Botones del carrusel */
.carrusel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: background 0.3s;
  z-index: 2;
  background-color: var(--carrusel-btn);
  color: var(--carrusel-text);
}
.carrusel button:hover { background-color: var(--carrusel-btn-hover); color: var(--carrusel-text-hover);}
.carrusel .prev { left: 10px; }
.carrusel .next { right: 10px; }

/* =============== SECCIÓN DE TODOS LOS PRODUCTOS =============== */
.productos {
  padding: 20px;
}

.productos-controles {
  margin-bottom: 15px;
  text-align: center;
}

.productos-controles input {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

/* Lista de productos en grid */
.productos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

/* Tarjeta */
.producto {
  background: var(--producto-bg);   /* holor */
  border-radius: 10px;
  border: 1px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.producto:hover {
  transform: scale(1.03);
  background: var(--producto-bg-hover);
}

.producto a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.producto img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.producto h4 {
  margin: 10px 0 5px;
}

.producto p {
  margin: 10px 0 5px;
}

.producto .btn-visualizar {
  background: var(--producto-btn); /* holor */
  border: none;
  border-radius: 15px;
  padding: 12px;
  cursor: pointer;
}

.btn-visualizar:hover {
  background-color: var(--producto-btn-hover); /* holor */
  color: var(--producto-text-1); /* holor */
  transition: 0.3s;
}

/* ===== RESPONSIVE ===== */
/* >= 425px: 2 por pantalla */
@media (min-width: 425px) {
  .c-producto { min-width: 50%; }
  
  /* === TEXTO === */
  .title {font-size: 1.7rem;}
  .Presentacion h3 {font-size: 0.75rem;}
  .Texto h4 {font-size: 1rem;}
  .Texto p {font-size: 1.1rem;}
  .productos-controles input {font-size: 1rem;}
  .producto h4 {font-size: 1rem;}
  .producto p {font-size: 1.3rem;}
  .producto .btn-visualizar {font-size: 1rem;}
  .carrusel button {font-size: 1.5rem;}

}

/* >= 768px: 3 por pantalla */
@media (min-width: 768px) {
  .c-producto { min-width: 33.33%; }
  .productos-lista {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
  .producto img {height: 220px;}
  .title {margin-bottom: 18px;}
  .carrusel button {padding: 12px;}
}

/* >= 1024px: 4 por pantalla */
@media (min-width: 1024px) {
  .c-producto { min-width: 25%; }
  .carrusel button {padding: 14px; }
  .productos-lista {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
  }
  .producto img {
    height: 250px;
  }
}