.netflix-carousel {
  position: relative;
  width: 100%;
  left: 0%;
  top: 0%;
  height: auto;
 padding-top: 30px;
background: linear-gradient(to bottom, #f4c34a 0%, #e6a11a 60%, #d88c06 100%);
  overflow-x: hidden;
  overflow-y: visible;
}
.titulo-carrusel {
  text-align: center;
  color: #0b1b3f;
  font-weight: 900;
  font-size: 2.5rem;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
  letter-spacing: 1px;
}
.carousel-track {
  display: flex;
  align-items: center;
  gap: 40px;
    padding: 40px 60px;
overflow-x: auto;
  scroll-behavior: smooth;
}

.carousel-track::-webkit-scrollbar {
  display: none; /* Chrome */
}
.card.prev {
  transform: translateX(-140px) scale(0.95);
  opacity: 0.7;
  -webkit-transform: translateX(-140px) scale(0.95);
  -moz-transform: translateX(-140px) scale(0.95);
  -ms-transform: translateX(-140px) scale(0.95);
  -o-transform: translateX(-140px) scale(0.95);
}

/* ➡️ derecha inmediata */
.card.next {
  transform: translateX(140px) scale(0.95);
  opacity: 0.7;
  -webkit-transform: translateX(140px) scale(0.95);
  -moz-transform: translateX(140px) scale(0.95);
  -ms-transform: translateX(140px) scale(0.95);
  -o-transform: translateX(140px) scale(0.95);
}
.card.far {
  transform: scale(0.85);
  opacity: 0.4;
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  -ms-transform: scale(0.85);
  -o-transform: scale(0.85);
}
.card {
    flex: 0 0 auto;
    width: 380px;
    border-radius: 12px;
    margin-bottom: 10px;
    opacity: 0.5;
    transition: transform 0.35s ease, opacity 0.35s ease;
    -webkit-transition: transform 0.35s ease, opacity 0.35s ease;
    -moz-transition: transform 0.35s ease, opacity 0.35s ease;
    -ms-transition: transform 0.35s ease, opacity 0.35s ease;
    -o-transition: transform 0.35s ease, opacity 0.35s ease;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.card h3{
  display: none;
}
.card:hover{
  opacity: 0.9;
   

 
}
.card img {
  width: 100%;
  height: auto;
  display: block;
  
  object-fit: fill;
 
}


.card.active {
  margin-top: 20px;
    margin-bottom: 20px;
cursor: pointer;
  transform: scale(1.2);
  opacity: 1;
 
  

  /*🔥espaciogrande*/z-index: 5;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

.card.active:hover {
    transform: scale(1.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    /*🔥espaciogrande*/z-index: 5;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
}

.card.active2 .masinfo {
   content: "ver mas informacion";
   position: absolute;
   display: block;
   top: 50%;
   align-self: center;
   z-index: 9999;
   color: white;
   cursor: pointer;
   border-radius: 20px;
   text-align: center;
   width: 100%;
   max-width: fit-content;
   text-transform: capitalize;
   padding: 20px;
 background-color: #128C7E;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
}

.card:hover::after{
   
   content: " ";
   position: absolute;
   cursor: pointer;
   text-align: center;
   width: 100%;
   height: 100%;
   padding: 20px;
   background-color: rgba(0,0,0,0.2);
  
}
.card.active::after{
   
   opacity: 0;
  
}
.card.active:hover .masinfo{
   
   opacity: 0;
  
}
.card.active2:hover .masinfo{
   
   opacity: 1 !important;
  
}
.card.active2::after{
    opacity: 1 !important;
    content: " ";
   position: absolute;
   cursor: pointer;
   text-align: center;
   width: 100%;
   height: 100%;
   padding: 20px;
   background-color: rgba(0,0,0,0.2);
  
}

.masinfo::after{
  content: "ver mas informacion";

}
.masinfo{
  display: none;
}
.masinfo:hover{
  color: #128C7E !important;
  font-weight: 700;
   

  background-color: rgb(240, 248, 242) !important;
}

.card.active img {
 
height: auto;
max-height: 450px;
}
/* Botones */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 28px;
  width: 45px;
  height: 80px;
  cursor: pointer;
  z-index: 10;
  /*🔑clave*/pointer-events: auto;
      
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
#nextBtn2{
 top:40%; 
}
#prevBtn2{
  top:40%; 

}
.nav-btn.left {
  left: 10px;
}

.nav-btn.right {
  right: 10px;
}

.nav-btn:hover {
  background: rgba(0,0,0,0.8);
}

/* Mobile */
/* =========================
   📱 MOBILE CAROUSEL
========================= */
@media (max-width: 768px) {

  .netflix-carousel {
    padding: 20px 0;
    overflow-y: visible;
  }

  .carousel-track {
    gap: 20px;
    padding: 20px;
    overflow-y: visible;
  }

  .card {
    width: 220px;
    opacity: 0.4;
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    -o-transform: scale(0.85);
}

  .card.prev,
  .card.next {
    transform: scale(0.9);
    opacity: 0.6;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}

  .card.active {
    transform: scale(1.1);
    opacity: 1;
    z-index: 5;
    overflow-y: visible;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

  .card.active img {
    max-height: 300px;
    overflow-y: visible;
  }

  /* Flechas más chicas */
  .nav-btn {
    width: 30px;
    height: 60px;
    font-size: 20px;
    z-index: 20;
  }
#nextBtn2{
  display: none;
}
#prevBtn2{
  display: none;
}
  .nav-btn.left {
    left: 5px;
    width: 20px;
  }

  .nav-btn.right {
    right: 5px;
    width: 20px;
  }
}