@import url("https://fonts.googleapis.com/css2?family=Gravitas+One&family=Oswald:wght@200..700&family=Smooch+Sans:wght@100..900&display=swap");
@import url('https://fonts.cdnfonts.com/css/buchanan');

/**navbar**/
/*barra fija*/
.navbar {
    height: 70px; /*altura del navbar*/
    background-color: rgb(18, 18, 18, 0.9);
    backdrop-filter: blur(8px); /*fondo borroso*/
    border-bottom: 1px solid #1f1f1f; /*linea de corte*/
    
}

.sticky-top{
    position: sticky;
    top: 0;
    z-index: 1020;
}

/*logo*/
.logo-nav {
    height: 65px;
    width: auto;
}

/*links*/
.nav-link {
    color: #cfcfcf;
    position: relative;
    transition: color 0.3s ease;
    margin-right: 15px;
}

.nav-link:hover {
    color: #1e8eff 
}

/*buscador*/
.buscador{
    background-color: #1f1f1f;
    border: 1px solid #2a2a2a;
    color: white;
}

.buscador:focus{
    background-color: #1f1f1f;
    border-color:#1e8eff ;
    box-shadow: 0 0 8px rgba(30, 142, 255, 0.4); /*sobra de fondo cuando paso el mouse*/
    color: white;
}

/*login*/
.login-icon{
    font-size: 1.8rem;/*tamaño*/
    color: #cfcfcf;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 42px;
    transition: all 0.3s ease;
}

.login-icon:hover{
    color:#1e8eff;
    transform: scale(1.1);/*se agranda*/
}

.btn-moderno{
    background: linear-gradient(135deg, #134cbf, #1e8eff); 
    border: none;
    border-radius: 30px;
    padding: 6px 20px;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
}

.btn-moderno:hover{
    transform: scale(1.05);
    box-shadow:  0 4px 15px rgba(30, 142, 255, 0.5) ;
    color: white;
}

/*!responsive¡*/
@media (max-width: 992px){
    .navbar-collapse{
        background-color: rgba(26, 26, 26, 0.95);
        backdrop-filter: blur(8px);
        padding: 20px;
        margin-top: 10px;
        border-radius: 12px;
        animation: fadeIn 0.3s ease-in-out; 
    }

    .logo-nav {
        height: 45px; 
    }


}

/* COMIENZAN ESTILOS PARA BANNER PRINCIPAL */
.bg-img{
  background-image:
  radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.9) 94%
  ),
   url(../img/Superperri.avif);
  background-size:cover;
  height: 220px;
}
 
.contenido {
  h1{
    font-family: 'Buchanan', sans-serif;
    font-size: 45px;
  }
  h6 {
    font-family: "Oswald", sans-serif;
    font-weight: weight;
    font-style: normal;
    color: #1e8eff;
  }
}

.cont-edad{
    display: flex;
    position: absolute;
    right: 0;
    bottom: 20px;
    
}
.bandita{
    background-color: #1e8eff;
    width: 5px;
}

.edad{
    color: #1e8eff;
    padding: 10px;
    background-color:rgba(0, 0, 0, 0.7);
}

.btn-grad {
  background-image: linear-gradient(
    to right,
    #dc2424 0%,
    #4a569d 51%,
    #dc2424 100%
  );
}
.btn-grad {
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad:hover {
  background-position: right center; 
  color: #fff;
  text-decoration: none;
}

@media(width >= 768px){
  .bg-img{
    height: 400px;
  }
  .cont-edad{
    bottom: 40px;
  }
}

@media(width > 1024px){
  .bg-img{
    height: 90vh;
    background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.9) 95%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8) 15%,
      rgba(0, 0, 0, 0.75) 20%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0) 100%
    ),
    url(../img/Superperri.avif);
    background-position: top;
  }
  .contenido {
    position: absolute;
    bottom: 50px;
    left: 65px;
    h1{
      font-size: 58px;
    }
    p{
      max-width: 35%;
    }
  }
  .cont-edad{
    bottom: 100px;
  }
}

/* -----COMIENZA ESTILOS SECCION PELIS SUGERIDAS -----*/

.card {
  transition: all 300ms ease;
  cursor: pointer;
  border-radius: 10px;
  flex-shrink: 0; /*Para que no se achiquen las cards*/

  &:hover{
    transform: scale(1.2);
    z-index: 10;
  }
}

.card img{
  border-radius: 10px;
}

.carousel-inner{
  overflow: visible; /*Permite que las cards se agranden con el hover*/
}

.carousel-control-prev, .carousel-control-next{ /*Color claro para flechas carousel*/
  filter: invert(0);
}

.row>*{  /*Le cambie el padding con el que viene la grilla de bootstrap*/
  padding-left: 3px!important;
  padding-right: 3px!important;
}

.contenedor{
  display:flex;
  gap: 16px;
  overflow-x: auto; /*Permite que el contenido se desborde sin estirar la pagina hacia los costados*/
  scroll-behavior: smooth;
  padding: 16px 0;
}

.contenedor::-webkit-scrollbar{  
  display: none;
}


@media (width > 1024px){  /*En dispositivos grandes se ve solo carousel bootstrap*/
  .carousel-md{
    display: none;
  }
}

@media (width <= 1024px){  /*En dispositivos sm y md desaparece el carousel y aparece grilla flexbox*/
  .carousel-lg{
    display: none;
  }
  .card img{
  max-height: 192px;
}
}
/*-----FINALIZAN ESTILOS SECCION PELIS SUGERIDAS-----*/

/**banner de suscripcion**/
.banner-suscripcion{
    position: relative;
    height: 400px; 
    overflow: hidden; /*se borra si algo sobresale*/
    margin: auto;
}

.banner-img{
    position:absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /*para que no se deforme*/
    top: 0;
    left: 0;
}

.banner-contenido{
    position: relative;
    z-index: 2;
    color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #00000076;
}

.titulo-banner{
    font-size: 2rem;
    font-weight: 600;/*grosor para el titulo*/
    margin-bottom: 15px;
}

.sub-banner{
    margin-bottom: 25px;
    color: #d1d1d1;
}

.botones-banner{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.boton-primary{
    background-color: #163f90bf;
    border: none;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
}

.boton-primary:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(30, 142, 255, 0.6); 
}

.boton-secondary{
    border: 2px solid #11589e;
    padding: 14px 40px;
    border-radius: 50px;
    color: #1e8eff;
    transition: all 0.3s ease;
}

.boton-secondary:hover{
    background-color: #1e8eff;
    color: white;
}

/*responsive banner suscripcion*/
@media (max-whidth: 992px) {
    .titulo-banner{
        font-size: 1.8rem;
    }
}

@media (max-width: 768px){
    .banner-suscripcion{
        height: auto; /*ya no queda fijo */
    }

    .banner-contenido{
        padding: 60px 20px;
        text-align: center;
    }

    .titulo-banner{
        font-size: 1.5rem;
    }

    .sub-banner{
        font-size: 1rem;
    }

    .botones-banner{
        flex-direction: column;
        gap: 15px;
    }

    .botones-banner a{
        width: 100%;
        text-align: center;
    }
}

/*Categorias Sugeridas*/

.categoria-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.categoria-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.titulo-categoria {
  font-family: 'Buchanan', sans-serif;
  color: #ff0000;
  background-color: rgba(0, 0, 0, 0.705);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 1.3rem;
}

/*-----COMIENZAN ESTILOS PARA PAGINAS DE CATEGORIAS-----*/

.carousel-indicators{
  position: relative;
  margin-top: 20px;
}

.carousel-indicators button{
  width: 40px!important;
  height: 40px!important;
  text-indent: 0!important;
}

.boton-flecha{
  background-color: rgba(0, 0, 0, 0)!important;
  border-radius: 50%;
  scale: 0.7;
  &:hover{
    background-color: rgba(0, 0, 0, 0.6)!important;
  }
}

.galeria img{
  cursor: pointer;
  transition: all 300ms ease;
  border: solid 2px rgba(255, 255, 255, 0);
  &:hover{
    transform: scale(1.1);
    border: solid 2px rgb(255, 255, 255);
  }
}

.form-select{
  width: 200px!important;
}

@media (width >= 768px){
  .btn-next {
    right: 100px;
}
  .btn-prev{
    left: 100px;
  }
}

@media (width > 992px){
  .btn-next {
    right: 200px;
}
  .btn-prev{
    left: 200px;
  }
  .lg-h3{
    font-size: 28px;
  }
}

@media (width > 1400px){
  .btn-next {
    right: 300px;
}
 .btn-prev{
    left: 300px;
  }
}

/* ---Estilo pagina de contacto--- */

.tema-consulta{
  width: 100%!important;
}

.bg-contacto{
  background: linear-gradient(135deg, #134cbf, #1e8eff); 
  }

.resize-non{
  resize: none;
}
  
/**Pagina detalle serie/ pelicula**/
/**Pagina detalle serie**/
.detalle-serie .carousel .col-2{
  flex: 0 0 auto;
  width: 50px;
}

.serie-principal{
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.serie-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BOTON SONIDO VIDEO */
.btn-sonido{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
}


.serie-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
  to right,
  rgba(0,0,0,0.9) 25%,
  rgba(0,0,0,0.4) 60%,
  rgba(0,0,0,0.1) 100%
  );
}

.serie-info{
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  max-width: 500px;
  z-index: 2;
}

.serie-titulo{
  font-size: 3rem;
  font-weight: bold;
}

.serie-descripcion{
  margin-top: 15px;
  color: #cfcfcf;
}

.serie-datos{
  display: flex;
  gap: 15px;
  margin-top: 10px;
  color: #aaa;
}

.card-capitulo{
  width: 160px;
  height: 180px;
  background-color: #1a1a1a;
  border-radius: 10px;
  overflow: hidden; /*Para que la imagen no se salga de la card*/
}

.card-capitulo img{
  width: 100%;
  height: 100px;
  object-fit: cover; /*Para que la imagen se ajuste a la card sin deformarse*/
}



.card-capitulo:hover{
  transform: scale(1.05);
}

.card a{
  text-decoration: none;
  color: white;
}

.card a:hover{
  color: white;
}

.btn-carousel{
  width: 50px;
  height: 50px;
  top:45%;
  transform: translateY(-50%);
}

.carousel-control-prev.btn-carousel{
  left: -40px;
}

.carousel-control-next.btn-carousel{
  right: -40px;
}

.carousel .row{
  margin: 0;
}

/*Responsive*/

@media (max-width: 768px){
.serie-principal{
  height: 50vh;
}

.serie-info{
  left: 20px;
  right: 20px;
}

.serie-titulo{
  font-size: 2rem;
}

.detalle-serie .carousel .col-2{
    width: 33.33%;
  }
}

@media (min-width: 992px){
  .detalle-serie .carousel .col-2{
    width:16%;
  }
}

/** Pagina detalle pelicula **/


.detalle-peli .carousel .col-2{
  flex: 0 0 auto;
  width: 50px;
}

.peli-principal{
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.peli-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BOTON SONIDO VIDEO */
.btn-sonido{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
}


.peli-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
  to right,
  rgba(0,0,0,0.9) 25%,
  rgba(0,0,0,0.4) 60%,
  rgba(0,0,0,0.1) 100%
  );
}

.peli-info{
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  max-width: 500px;
  z-index: 2;
}

.peli-titulo{
  font-size: 3rem;
  font-weight: bold;
}

.peli-descripcion{
  margin-top: 15px;
  color: #cfcfcf;
}

.peli-datos{
  display: flex;
  gap: 15px;
  margin-top: 10px;
  color: #aaa;
}

.card-pelis{
  width: 160px;
  height: 180px;
  background-color: #1a1a1a;
  border-radius: 10px;
  overflow: hidden; /*Para que la imagen no se salga de la card*/
}

.card-pelis img{
  width: 100%;
  height: 120px;
  object-fit: cover; /*Para que la imagen se ajuste a la card sin deformarse*/
}



.card-pelis:hover{
  transform: scale(1.05);
}

.card a{
  text-decoration: none;
  color: white;

}

.card a:hover{
  color: white;
}


.btn-carousel{
  width: 50px;
  height: 50px;
  top:45%;
  transform: translateY(-50%);
}

.carousel-control-prev.btn-carousel{
  left: -40px;
}

.carousel-control-next.btn-carousel{
  right: -40px;
}

.carousel .row{
  margin: 0;
}

/*Responsive*/

@media (max-width: 768px){
.peli-principal{
  height: 50vh;
}

.peli-info{
  left: 20px;
  right: 20px;
}

.peli-titulo{
  font-size: 2rem;
}

.detalle-peli .carousel .col-2{
    width: 33.33%;
  }
}

@media (min-width: 992px){
  .detalle-peli .carousel .col-2{
    width:16%;
  }
}

/*Subscripción*/

.sub-body {
  background-color: #1a1d20;
  color: white;
}

.sub-card {
  border-radius: 12px;
  cursor: pointer;
}

.sub-card:hover {
  transform: scale(1.03);
  transition: 0.3s ease;
}

.sub-titulo {
  font-family: 'Buchanan', sans-serif;
  color: white;
  background-color: rgba(0, 0, 0, 0.705);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 1.3rem;
}

.sub-footer {
  background-color: #1a1d20;
}

/*Opcional*/
.sub-fondo {
  position: relative;
  background-image: url('../img/backgroundSub.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

/* Overlay oscuro */
.sub-fondo:before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(1px);
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

/* Asegura que el contenido quede arriba */
.sub-fondo .container {
  position: relative;
  z-index: 1;
}

.error-body {
  height: 100vh;
  background-image: url('../img/error404.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
}

/* Overlay oscuro */
.error-body:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.error-container {
  position: relative;
  z-index: 1;
}

.error-code {
  font-size: 8rem;
  font-weight: bold;
  letter-spacing: 10px;
  text-shadow: 0 0 25px rgba(30, 144, 255, 0.8);
}

/* ----Finaliza pagina Suscripcion */

/* QUIENES SOMOS */

.quienes-somos {
  background-color: #141414;
}

/* Card */
.team-card {
  background-color: #1c1c1c;
  border: none;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.team-card:hover {
  transform: translateY(-6px);
}

/* Imagen adaptable */
.team-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Ajuste para celulares */
@media (max-width: 576px) {
  .team-img {
    height: 250px;
  }

  .quienes-somos h2 {
    font-size: 1.6rem;
  }
}


.titulo-login{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.bg-login{
  background: #0D0D0D;
}