body{
    background-color: #141414;
    overflow-x: hidden;
    width: 100%;
}

.netflix-padding-left{ padding-left: 3%; }
.netflix-padding-right{ padding-right: 3%; }

.netflix-navbar{
    z-index: 1000;
    transition: background 0.2s linear;
    position: fixed;
    width: 100%;
    top: 0;
    /* Fondo sólido por si acaso */
    background-color: #141414; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}

.navbar-brand img{ width: 100px; }

/* LAYOUT MAGICO PARA CENTRAR NAV */
.netflix-row{
    width: 100%;
    display: flex;
    justify-content: center; /* Centra el contenido (el nav) */
    align-items: center;
    position: relative; /* Importante para los absolutos */
}

/* El contenedor Izquierdo ahora es solo el Logo */
.netflix-row .left{
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 10;
}
/* La parte Derecha (Perfil) también absoluta */
.netflix-row .right{
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 10;
}

.netflix-dropdown-box{ display: none; }

.netflix-nav{
    display: flex;
    align-items: center;
    justify-content: center; /* Centra los botones */
    z-index: 5; /* Debajo de logo/perfil pero arriba del fondo */
}

.netflix-nav button{
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    font-size: 14px;
    margin: 0 10px;
    white-space: nowrap;
}

.netflix-nav button:hover{ color: #fff; }
.netflix-nav button.active{ color: #fff; font-weight: bold; }

i{ font-size: 20px; color: #fff; padding: 5px 15px; cursor: pointer; }

.netflix-profile{
    width: 32px; height: 32px;
    background-color: gray; border-radius: 4px;
    margin-left: 20px; cursor: pointer;
}

.netflix-home-video{
    width: 100%; height: 100vh;
    z-index: 10; position: relative;
    background-size: cover; background-position: center;
}

.netflix-home-video .top{
    position: absolute; top: 0; width: 100%; height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0));
}
.netflix-home-video .bottom{
    position: absolute; bottom: 0; width: 100%; height: 150px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), #141414);
}

.netflix-home-video .content{
    position: absolute; top: 0; width: 100%; height: 100%;
    z-index: 100; display: flex;
}
.netflix-home-video .content .left{
    margin-left: 4%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: 150px; width: 50%;
}

.slider{ position: relative; z-index: 500; margin-top: -80px; padding-bottom: 20px; }

.card{
    width: 240px; min-width: 240px; height: 135px;
    background-color: #141414; border-radius: 4px;
    transition: 0.2s; margin: 5px; position: relative;
    overflow: hidden;
}
.card:hover{ transform: scale(1.3); z-index: 10; box-shadow: 0 0 20px rgba(0,0,0,0.8); }

.card-body{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background-color: #141414; padding: 15px; border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.card:hover > .card-body{ display: block; }

.card-icon{
    font-size: 28px; color: #fff; border-radius: 50%; cursor: pointer;
    border: 2px solid white; padding: 2px; margin-right: 8px;
}
.card-icon:hover{ border-color: #ccc; color: #ccc; }

.netflix-card-text{ font-size: 12px; }
.footer{ margin-top: 50px; margin-bottom: 50px; }
ul{ list-style: none; font-size: 14px; color: #888; }
.copy-right{ font-size: 14px; color: #888; }