/* === HOME (pages/index) === */
.body-index main{ margin-bottom:100px; }

/* Bloque títulos/controles (si lo usás en Home) */
.body-index .contenedor-titulos-controles{
  display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:end; margin-top:20px;
}

/* ===== Carrusel principal ===== */
.body-index .peliculas-recomendadas{ margin-top:50px; margin-bottom:70px; }
.body-index .peliculas-recomendadas .contenedor-principal{ display:flex; align-items:center; position:relative; }
.body-index .peliculas-recomendadas .contenedor-principal .flecha-izquierda,
.body-index .peliculas-recomendadas .contenedor-principal .flecha-derecha{
  position:absolute; border:none; background:rgba(51,51,51,.8); border-radius:10px; animation:pulsar 2s infinite;
  height:30%; top:calc(50% - 20%); line-height:40px; width:30px; color:#ced4da; cursor:pointer; z-index:500; transition:.2s ease all;
}
.body-index .peliculas-recomendadas .contenedor-principal .flecha-izquierda i,
.body-index .peliculas-recomendadas .contenedor-principal .flecha-derecha i{ font-size:30px; }
@keyframes pulsar{ 0%{transform:scale(1);} 50%{transform:scale(1.1);} 100%{transform:scale(1);} }
.body-index .peliculas-recomendadas .contenedor-principal .flecha-izquierda:hover,
.body-index .peliculas-recomendadas .contenedor-principal .flecha-derecha:hover{ background:rgba(0,63,125,.8); }
.body-index .peliculas-recomendadas .contenedor-principal .flecha-izquierda{ left:0; }
.body-index .peliculas-recomendadas .contenedor-principal .flecha-derecha{ right:0; }

.body-index .peliculas-recomendadas .contenedor-carrousel{ width:100%; padding:20px 0; overflow:hidden; scroll-behavior:smooth; }
.body-index .peliculas-recomendadas .contenedor-carrousel .carrousel{ display:flex; flex-wrap:nowrap; }
.body-index .peliculas-recomendadas .contenedor-carrousel .carrousel .pelicula{ min-width:35%; transition:.3s ease all; box-shadow:5px 5px 10px rgba(0,0,0,.3); }
.body-index .peliculas-recomendadas .contenedor-carrousel .carrousel .pelicula img{ width:100%; height:100%; object-fit:cover; }
.body-index .peliculas-recomendadas .contenedor-carrousel .carrousel .pelicula.hover{ transform:scale(1.2); transform-origin:center; }

.body-index .pelicula{ position:relative; width:100%; height:50vh; background-color:#000; }
.body-index .pelicula:hover .tarjeta-texto{ display:block; }
.body-index .tarjeta-texto{
  position:absolute; display:none; inset:0; background:rgba(0,0,0,.6); text-align:center; padding-top:30%;
  font-size:40px; font-weight:900; color:#eee; transition:2000ms; cursor:pointer;
}

/* ===== Contenedor principal: Últimos + Ofertas ===== */
.body-index .contenedor-principal-productos{
  display:flex; flex-direction:row; justify-content:space-between; gap:20px; margin:50px 0;
}

/* --- Últimos agregados --- */
.body-index .contenedor-ultimos{
  flex:1; max-width:48%; display:flex; flex-direction:column; border:1px solid #ddd; border-radius:20px;
  box-shadow:0 4px 8px rgba(0,0,0,.5); padding:10px; position:relative; margin-right:20px; background:#fff; overflow:hidden;
}
.body-index .titulo-ultimos{ text-align:center; color:#003f7d; font-weight:bold; font-size:20px; margin-bottom:15px; }
.body-index .contenedor-productos-ultimos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:40px; margin:0 auto; transition:transform .3s ease;
}
.body-index .card-ultimo{
  flex:0 0 auto; width:100%; max-width:150px; margin:10px;
  box-shadow:0 4px 8px rgba(0,0,0,.2); transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; justify-content:space-between; background:#fff; border-radius:10px; overflow:hidden;
}
.body-index .card-ultimo:hover{ transform:translateY(-3px); box-shadow:0 6px 12px rgba(0,0,0,.3); }
.body-index .cover-card-ultimo{ width:100%; height:160px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.body-index .cover-card-ultimo img{ max-width:100%; max-height:100%; object-fit:contain; }
.body-index .titulo-producto-ultimo{ display:flex; justify-content:center; align-items:center; min-height:40px; padding:0 5px; text-align:center; }
.body-index .nombre-ultimo{
  font-size:13px; font-weight:bold; color:#003f7d; line-height:1.2; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  line-clamp:3; overflow:hidden; text-overflow:ellipsis; height:3.6em;
}
.body-index .categoria-producto-ultimo{ display:flex; justify-content:center; align-items:center; }
.body-index .categoria-ultimo{ font-size:10px; font-weight:bold; color:#1f487e; margin:4px 0; }
.body-index .precio-producto-ultimo{ display:flex; justify-content:center; align-items:center; }
.body-index .precio-ultimo{ font-weight:bold; font-size:14px; color:#d90429; margin:0; }

/* --- Ofertas carrusel --- */
.body-index .contenedor-ofertas{
  flex:1; max-width:48%; display:flex; flex-direction:column; border:1px solid #ddd; border-radius:20px;
  box-shadow:0 4px 8px rgba(0,0,0,.5); padding:10px; position:relative; margin-right:20px; background:#fff;
}
.body-index .ofertas-productos h2{
  text-align:center; color:#003f7d; font-weight:bold; font-size:20px; margin-bottom:15px;
}
.body-index .card-oferta{
  flex:0 0 auto; width:100%; max-width:150px; margin:10px;
  box-shadow:0 4px 8px rgba(0,0,0,.2); transition:.3s; display:flex; flex-direction:column; justify-content:space-between;
  background:#fff; border-radius:10px; overflow:hidden;
}
.body-index .cover-card-oferta{ height:160px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.body-index .cover-card-oferta img{ max-width:100%; max-height:100%; object-fit:contain; }
.body-index .titulo-producto-oferta{ display:flex; justify-content:center; align-items:center; min-height:40px; padding:0 5px; text-align:center; }
.body-index .titulo-producto-oferta h3{
  font-size:13px; font-weight:bold; color:#003f7d; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; overflow:hidden; text-overflow:ellipsis; height:3.6em; margin:0;
}
.body-index .categoria-producto-oferta{ display:flex; justify-content:center; align-items:center; }
.body-index .categoria-producto-oferta h5{ font-size:10px; font-weight:bold; color:#1f487e; margin:4px 0; }
.body-index .precio-producto-oferta{ display:flex; justify-content:center; align-items:center; }
.body-index .precio-producto-oferta p{ font-weight:bold; font-size:14px; color:#d90429; margin:0; }

.body-index .contenedor-carrousel-ofertas{
  display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden;
}
.body-index .contenedor-productos-ofertas{
  display:flex; overflow:hidden; margin:0 auto; gap:60px; flex:1; flex-wrap:nowrap;
  transition:transform .3s ease; width:max-content; justify-content:center;
}
.body-index .flecha-izquierda-ofertas,
.body-index .flecha-derecha-ofertas{
  background:#003f7d; color:#fff; border:none; border-radius:50%; padding:10px; cursor:pointer; font-size:20px;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.body-index .flecha-izquierda-ofertas{ left:10px; }
.body-index .flecha-derecha-ofertas{ right:10px; }

/* ------------------ RESPONSIVE HOME (index) ------------------ */
@media screen and (max-width: 768px) {
  /* Carrusel principal */
  .body-index .peliculas-recomendadas .contenedor-carrousel .carrousel{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .body-index .peliculas-recomendadas .contenedor-carrousel .carrousel .pelicula{
    min-width: 0;
    position: relative;
  }
  .body-index .indicadores,
  .body-index #flecha-izquierda,
  .body-index #flecha-derecha {
    display: none;
  }
  .body-index .pelicula {
    width: 100%;
    height: 30vh;
  }
  .body-index .imagen-carrusel {
    height: 100%;
    object-fit: cover;
  }
  .body-index .peliculas-recomendadas .contenedor-carrousel .carrousel .pelicula .tarjeta-texto {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  /* Contenedor principal: Últimos + Ofertas */
  .body-index .contenedor-principal-productos {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  .body-index .ultimos-productos,
  .body-index .contenedor-ofertas {
    max-width: 100%;
    margin: 0;
    padding: 10px;
  }

  /* Ofertas (carrusel horizontal con snap) */
  .body-index .contenedor-productos-ofertas {
    flex-wrap: nowrap;
    overflow-x: scroll;
    gap: 20px;
    scroll-snap-type: x mandatory;
  }
  .body-index .card-oferta {
    min-width: 250px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    padding: 10px;
  }
  .body-index .flecha-izquierda-ofertas,
  .body-index .flecha-derecha-ofertas {
    display: none;
  }

  /* Últimos agregados (carrusel horizontal con snap) */
  .body-index .contenedor-ultimos {
    max-width: 100%;
    margin-right: 0;
  }
  .body-index .contenedor-productos-ultimos {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }
  .body-index .card-ultimo {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
    padding: 10px;
  }

  /* Tipos y tamaños en tarjetas home */
  .body-index .titulo-producto-ultimo h3,
  .body-index .titulo-producto-oferta h3 {
    font-size: 14px;
  }
  .body-index .precio-producto-ultimo p,
  .body-index .precio-producto-oferta p {
    font-size: 12px;
  }
}