@import "botones.css";
@import "checkboxes.css";
@import "search.css";

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#060709;
    color:white;
    font-family:'Montserrat', Helvetica, sans-serif;
}

/* HEADER */

.header{

    height:70px;
    border-bottom:1px solid #333;
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    padding:0 40px;
    background:#060709;
    font-family:'Montserrat', Helvetica, sans-serif;
    position:relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.logo{

    display:flex;
    align-items:center;
    gap:12px;
    font-size:32px;
    font-weight:bold;

}

nav {
    display: flex;
    justify-content: center;
    gap: 50px;
    text-transform: uppercase;
    position: absolute;
    left: 50%;                  
    transform: translateX(-50%); 
}

/* CADA PALABRA DE FORMA INDEPENDIENTE */
nav a {
    color: white;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    display: inline-block; /* Asegura que cada enlace tenga su propio espacio físico */
    
    /* Forzamos a limpiar cualquier propiedad de transición previa */
    transition-property: color !important;
    transition-duration: 400ms !important;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* LA PÁGINA ACTIVA */
nav a.active {
    color: white;
    padding-bottom: 5px;
}

/* HOVER: Cambia SOLO el color de la palabra apuntada */
nav a:hover,
nav a:focus {
    color: white; 
}

/* ANIMACIÓN DE LA LÍNEA INFERIOR DE CADA PALABRA */
nav a::after {
    content: "";
    pointer-events: none;
    bottom: -2px;
    left: 50%;
    position: absolute;
    width: 0%;
    height: 3px;
    background-color: #fff;
    transform: translateX(-50%);
    
    /* La línea se despliega individualmente para cada enlace */
    transition-property: width, left !important;
    transition-duration: 400ms !important;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Al hacer hover, la línea de esa palabra se expande al 100% */
nav a.active::after,
nav a:hover::after,
nav a:focus::after {
    width: 100%;
}

/* HERO */
.hero{
    height:240px;
    position:relative;
    background-image:url("imagenes/header_background.png");
    background-size:cover;
    background-position:top;
}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:1200px;
    margin:auto;
    padding-top:45px;
    justify-content: space-between;
    height: 100%;          /* Hace que el contenedor use todo el alto del hero (240px) */
    display: flex;         /* Activa Flexbox */
    flex-direction: column;/* Coloca los elementos uno debajo de otro */
    padding-bottom: 5px;  /* Espacio de seguridad con el borde inferior */
}

.hero h1{
    font-size:40px;
    margin-bottom:15px;
    color: #CDD0D7;
}

.hero p{
    color:#d1d1d1;
    margin-bottom:25px;
    max-width:700px;
    margin-inline: auto;
}


/* MAIN */

.container{
    display:grid;
    grid-template-columns:230px 1fr 350px;
    gap:25px;
    padding:20px;
}

/* FILTROS */

.normal-panel{
    border:1px solid #555;
    padding:20px;
    border-radius:10px;
    background:#060709;
    height: fit-content;
    width:fit-content;
}

.normal-panel h2{
    border-bottom: 1px solid #555; 
    padding-bottom: 10px;

}

.filter-group{
    margin-top:15px;
    border-bottom: 1px solid #555; 
    padding-bottom: 10px;          
}


.filter-group h3{
    margin-bottom:10px;
}

.filter-group label{
    display:block;
    margin-bottom:8px;
    color:#d0d0d0;
}

.btn-update{
    width:100%;
    margin-top:25px;
    padding:14px;
    background:#151515;
    color:white;
    border:1px solid #444;
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 8px;
}

/* CONTENT */

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    font-size: 20px;
    margin-right: 15px;
}

.section-title h2{
    margin-bottom:0px;
    display: inline-flex;
    align-items: center;
    gap: 15px; 
    
}

.section-title button{
    padding:10px 20px;
}

.second{
    margin-top:40px;
}

.movies-row{
    display:flex;
    gap:18px;
}

.movie-card{
    width:220px;
    background:#0e0e0e;
    border:1px solid #262626;
}

.movie-card img{
    width:100%;
    height:320px;
    object-fit:cover;
}

.movie-info{
    padding:12px;
}

.movie-info h3{
    margin-bottom:5px;
}

.movie-info p{
    color:#aaa;
    font-size:14px;
}

.tags{
    margin-top:10px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.tags span{
    background:#1a1a1a;
    padding:4px 8px;
    font-size:12px;
}

.price-row{
    margin-top:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.price-row strong{
    font-size:28px;
}

.discount{
    background:#d53b2c;
    padding:6px 10px;
    border-radius:5px;
    font-weight:bold;
}

/* PROMOS */



.promo-card-container {
  display: flex;
  align-items: flex-start; /* Alinea los bloques al inicio superior */
  gap: 10px;               /* Espacio de separación entre la imagen y el texto */
  padding-top:15px;
  padding-bottom:15px;
  border-bottom:1px solid #555;

}

.promo-card-container img {
    display: flex;
    align-items: center;     
    justify-content: center;
    border-radius: 8px;
    width: 100%;                  /* Ocupará exactamente la mitad del contenedor */
    max-width: 130px;            /* Evita que crezca desproporcionadamente */
}

.promo-card-text {
    display: flex;
    flex-direction: column;  /* Organiza los textos en fila hacia abajo */
    justify-content: flex-start;
}

.promo-card-text h3{
    margin-bottom:0px;
    font-size: 28px;
}

.promo-card-text p{
    margin-bottom:7px;
    color:#aaa;
    font-size:14px;
}

.promo-card-text h4{
    margin-bottom:10px;
    font-weight: 600;
    font-size: 14px;
    
}

.promo-card-text button{
    width:100%;
    padding: 9px 9px;
}