/* Aumentar margen superior */
body {
    background-color: #f5f5f5;
}
.inicio-container {
    background-color: #2c2c2c;
    position: relative;
    width: 100vw; /* Ancho completo de la ventana */
    height: 35vh; /* 100% de la altura visible */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Asegura que los elementos no salgan del contenedor */
}
.productos-header {
    background-color: #2c2c2c;
    color: white;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
}

.productos-header h1 {
    margin-top: 90px;
    font-size: 3.5rem;
}

.breadcrumb {
    margin-top: -20px;
    font-size: 1rem;
}
.breadcrumb a {
    color: #888;
    text-decoration: none;
}
/* CONTENEDOR PRINCIPAL ------------------------------------------- */
.productos-container{
  position:relative;       /* ❶ referencia para .productos-info        */
  display:block;           /* dejamos de usar flex aquí                */
  max-width:1350px;        /* ancho máximo opcional                    */
  margin:80px auto 0;
  background:#f5f5f5;
  padding:0 20px 40px;
}

/* COLUMNA INFO – en escritorio se coloca “flotando” a la derecha -- */
.productos-info{
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  padding:30px;
  width:300px;
  margin:40px auto 0;      /* centrada por defecto (móvil)             */
}

@media(min-width:1024px){
  .productos-info{
    position:absolute;     /* ❷ se superpone al flujo                 */
    right:0;               /* ❸ pegada al borde derecho               */
    top:0;
  }
  /* Reservamos el mismo ancho para la parte izquierda */
  .productos{ margin-right:320px; }  /* 300 + 20 px de respiración      */
}

/* LISTA DE CATEGORÍAS ------------------------------------------- */
.productos{
  /* ancho completo, pero deja hueco para .productos-info si existe */
  width:100%;
}

.product-section{
  background:#ffffff;
  padding:40px 0 60px;
  position:relative;
}
.product-section:nth-of-type(even){
  background:#ffffff;
}
.product-section::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:rgba(0,0,0,.1);   /* línea sutil */
}
/* CABECERAS ------------------------------------------------------ */
.section-header{
  text-align:center;
  margin-bottom:20px;
}

.section-header .view-all-link{
  display:block;           /* en su propia línea encima del título     */
  margin-bottom:8px;
  font-size:18px;
  font-weight:bold;
  color:#333;
  text-decoration:none;
  position:relative;
  z-index:2;                   /* para sobresalir del pseudo-fondo */
}

.section-header .view-all-link:hover{
  text-decoration:underline;
}

.section-title{
  font-size:32px;
  text-transform:uppercase;
  font-weight:700;
  color:#333;
}

/* CARRUSEL ------------------------------------------------------- */
.carousel-container{
  position:relative;
  overflow:hidden;         /* ventana */
  padding:0 70px;          /* 70 px de “colchón” para flechas          */
}

.product-carousel{
  display:flex;
  gap:15px;                /* mismo que .product-item margin-right     */
  transition:transform .3s ease-in-out;
}

.product-item{
  flex:0 0 220px;
  background:#333;
  color:#fff;
  padding:10px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}

.product-item img{
  max-width:100%;
  border-radius:6px;
  margin-bottom:10px;
}

.product-price{ color:#f4c10f; font-weight:700; }

/* BOTONES -------------------------------------------------------- */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background:#f4c10f;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:background .25s;
  z-index:15;
}
.carousel-btn:hover{ background:#cca30e; }
.prev-btn{ left:20px; }
.next-btn{ right:20px; }

/* RESPONSIVE ----------------------------------------------------- */
@media(max-width:1023px){
  .carousel-container{ padding:0 45px; }
  .carousel-btn{ width:34px;height:34px;font-size:18px; }
}