/* ===============================
      BOTÓN ACTIVO 
      =============================== */

   .home-btn[data-type="peliculas"] .btn{
     background: linear-gradient(180deg,#ffffff,#dcdcdc) !important;
     border-color:#ffffff !important;
     color:#000 !important;
     box-shadow:
       0 0 12px rgba(255,255,255,.6),
       inset 0 1px 0 rgba(255,255,255,.8);
   }

   .home-btn[data-type="peliculas"] .btn:hover{
     background: linear-gradient(180deg,#ffffff,#eaeaea) !important;
     color:#000 !important;
   }

/* ========================================================= */
/* ========================================================= */


.title_peli{
  color: #FFB300; 
  font-size: 17px;
}
.info-expandida{
  width: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
  overflow: auto;
  padding: 10px;
}
.config-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  align-items: center;
  margin: 20px auto;
  text-align: center;
}
.config-grid h2{
  font-size:28px;
  margin-bottom:15px;
  color:#FFB300;
}
.config-grid img{
  max-width:100%;
  max-height:320px;
  object-fit:contain;
}

.hero-left{
  display: flex;
  justify-content: center;
  align-items: center;
}

.peliculas-config{
    padding:20px;
    margin-bottom:40px;
}


.peliculas-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(400px,1fr));
    gap:40px;
}

.pelicula-card{
    display:flex;
    gap:20px;
    padding:20px;
    border-radius:18px;
    transition: all .3s ease;
    align-items:flex-start; 
}

.pelicula-card:hover{
    transform:translateY(-5px);
}

.pelicula-img{
    text-align: center;
}
.pelicula-img img{
    min-width: 200px;
    border-radius:12px;
    margin: 0 auto;
}

.pelicula-info h2{
    font-size:22px;
    margin-bottom:10px;
}

.descripcion{
    font-size:14px;
    opacity:.85;
    margin-bottom:20px;
}

.btn-ver-online{
    background:linear-gradient(45deg,#00c6ff,#0072ff);
    border:none;
    padding:12px 20px;
    border-radius:12px;
    color:white;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
    margin-top: 10px;
}

.btn-ver-online:hover{
    transform:scale(1.05);
}

.pelicula-informacion{
    font-size:14px;
}

.info-header{
    font-weight:bold;
    font-size:22px;
    color:#00ff7f;
    margin-bottom:15px;
    text-shadow:0 0 8px rgba(0,255,120,.6);
}

/* Caja general */
.info-box{
    padding:10px;
    border-radius:16px;
    margin-top: 10px;
    backdrop-filter:blur(6px);
    box-shadow:0 0 20px rgba(0,0,0,.6);
    border:1px solid rgba(255,255,255,.08);
}

/* Info azul */
.info-azul-box{
    color:#4aa3ff;
    background:linear-gradient(145deg,#041e35,#001018);
    box-shadow:0 0 18px rgba(0,120,255,.3);
    border-left: 4px solid #4aa3ff;
}

/* Info dorado */
.info-dorado-box{
    color:#ffd54f;
    background:linear-gradient(145deg,#2a1a00,#120a00);
    box-shadow:0 0 18px rgba(255,170,0,.25);
    border-left: 4px solid #ffd54f;
}

/* Info blanco */
.info-blanco-box{
    color:#e0e0e0;
    background:linear-gradient(145deg,#101010,#050505);
    border-left:4px solid #666;
}

/* Botones */
.btn-toggle-info {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 7px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all .3s ease;
}

.btn-vermas{
    background:linear-gradient(45deg,#00c6ff,#0072ff);
    color:white;
}

.btn-vermenos{
    background:linear-gradient(45deg,#ff4e50,#b71c1c);
    color:white;  
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10
}

.btn-toggle-info:hover{
    transform:scale(1.05);
    box-shadow:0 0 10px rgba(255,255,255,.3);
}


.bandera_jp{
  position: absolute;
  top: 20px;
  right: 20px;
  min-width: auto;
  border-radius: initial;
}

@media (max-width: 768px){

  .pelicula-card{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:0px;
  }

  .pelicula-img{
    margin-top: 0;
  }

  .pelicula-informacion{
    margin-top: 20px;
  }
  .config-grid{
    grid-template-columns: 1fr;
  }
  .config-grid h2{
    display: none;
  }
  .general-layout{
    gap: 0px;
  }
  
  .peliculas-grid{
      grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  }
}

 /* ===============================
      MODAL PATREON/VIP
  =============================== */

.vip-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.vip-modal-box{
  background: #111;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  max-width: 400px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 30px rgba(0,0,0,.6);
}

.vip-modal-box h3{
  color: #ffcc00;
  margin-bottom: 15px;
}

.vip-modal-box button{
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(45deg,#ff4e50,#b71c1c);
  color: white;
  cursor: pointer;
}