/* estructura css 

selector{
    propiedad: valor;
}

*/
/* === el verde brillanteee #00e9a0*/

/* Reset básico */
* {
  margin: 0;
  box-sizing: border-box;
}

/* header (Escritorio) */
header {
  background-color: #e90059;
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 1rem;
  position: relative; 
}

.logo-container a { 
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none; 
}

header .logo {
  height: 70px;
  transition: transform 0.3s ease;
}

header .logo:hover {
  transform: scale(1.05);
}

h1.title {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
  font-weight: normal;
  line-height: 1;
  margin: 0;
}

.mi-video-local {
  width: 100%; 
  height: auto;  
  display: block; 
  max-width: 800px; 
  margin: 20px auto; 
}
/* Nav (Escritorio) */
nav.nav-menu ul {
  display: flex; 
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.nav-menu ul li a {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem; 
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color 0.3s ease;
}

nav.nav-menu ul li a:hover {
  color: #000000;
}

/* SLIDE DIRECTORAS NACIONALES */

.directoras-slide {
  background-color: #000;
  color: #fff;
  padding: 25px 0;
  font-family: 'League Gothic', sans-serif;
  text-align: left;
  padding: 25px;
  
}

.directoras-slide.internacional {
  background-color: #f5b8d1;
  color: #fff;
  padding: 25px 0;
  font-family: 'League Gothic', sans-serif;
  text-align: left;
  
}


.directoras-slide h2 {
  font-size: 3 rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 20px;
  margin-bottom: 15px;
  color: #fff;
}

.directoras-slide.internacional h2 {
  font-size: 3 rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 20px;
  margin-bottom: 15px;
  color: #000000;
}


.slider {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 20px;

}

.slider > div:first-child {
  margin-left: 20px;
}

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


.card {
  flex: 0 0 auto;
  width: 160px;
  background-color: #f5b8d1; /* === el rosa clarito*/
  padding: 5px;
  scroll-snap-align: start;
}

.card a,
.poster-card a {
    text-decoration: none; 
    
}

.card.internacional {
  flex: 0 0 auto;
  width: 160px;
  background-color: #ffffff;
  padding: 5px;
  scroll-snap-align: start;
}


.card img {
  width: 100%; 
  height: 150px; 
  object-fit: cover; 
  display: block;
}

.card .nombre {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 5px;
  color: #000;
  font-weight: bold;
  

}

.card.internacional .nombre {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 5px;
  color: #000;
  font-weight: bold;
  text-decoration: none;
 
  transition: color 0.3s ease;
}

.card.internacional .nombre:hover {
  color: #e90059;
}

.card .nombre:hover {
  color: #e90059;
}



/* ============================================
  NUEVOS ESTILOS - Solo para la página de INICIO
 ============================================
*/

/* --- Estilos para las nuevas secciones --- */


#random-movie-button {
    cursor: pointer;
    user-select: none;
}


.hero-section {
    padding: 60px 25px;
    text-align: center;
    background-color: #fff; 
    color: #000;
}
.hero-section h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.hero-section p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    color: #333;
}


.mission-section {
    padding: 60px 25px;
    background-color: #000; 
    color: #fff;
}



@media (min-width: 768px) {
    .mission-section .container {
        display: flex;
        align-items: center;
        gap: 50px;
        max-width: 1100px;
        margin: 0 auto;
    }
    .mission-section .text-content {
        flex: 1;
        text-align: left;
    }
    .mission-section .image-content {
        flex: 1;
    }
}
.mission-section h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #e90059; 
}
.mission-section p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}
.mission-section img {
    width: 100%;
    height: auto;
  
    background-color: #333;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    
}
.mission-section .cta-button {
    display: inline-block;
    background-color: #f5b8d1; 
    color: #000000;
    padding: 12px 30px;
    text-decoration: none;
    font-family: 'League Gothic', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}
.mission-section .cta-button:hover {
    transform: scale(1.05);
}


/* 3. Sección CTA (Comunidad) */
.cta-section {
    padding: 60px 25px;
    background-color: #e90059; 
    color: #ffffff;
    text-align: center;
}
.cta-section h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.cta-section p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 30px auto;
}
.cta-section .cta-button {
    display: inline-block;
    background-color: #f5b8d1; 
    color: #000000; 
    padding: 12px 30px;
    text-decoration: none;
    font-family: 'League Gothic', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}
.cta-section .cta-button:hover {
    transform: scale(1.05);
}

/* --- LÓGICA DEL MENÚ HAMBURGUESA (MÓVIL) --- */

.menu-toggle-checkbox {
  display: none;
}

.menu-toggle-label {
  display: none;
  font-size: 2.5rem;
  color: #ffffff;
  cursor: pointer;
}
.menu-toggle-label:hover {
  color: #000;
}


/* ----
=====================================
  ACA EMPIEZAN LOS ESTILOS DE CELUAR (768px o menos) 
=====================================---- */

@media (max-width: 768px) {

 
  header {
    flex-wrap: wrap; 
  }
 .menu-toggle-label {
  display: block;
  font-size: 0; 
  color: #ffffff;
  cursor: pointer;
  
  position: relative; 
  width: 2.5rem; 
  height: 2.5rem; 
}
.menu-toggle-label:hover {
  color: #000;
}

.menu-toggle-label::before {
  content: '\2630'; 
  font-size: 2.5rem;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
}

.menu-toggle-label::after {
  content: '\00d7'; 
  font-size: 3rem; 
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;

  display: none; 
}

.menu-toggle-checkbox:checked ~ .menu-toggle-label::before {
  display: none;
}


.menu-toggle-checkbox:checked ~ .menu-toggle-label::after {
  display: block;
}
  nav.nav-menu {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #e90059;
    z-index: 10;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
  }


  nav.nav-menu ul {
    flex-direction: column;
    padding: 1.5rem 0;
    gap: 1.5rem;
    width: 100%;
  }

  nav.nav-menu ul li {
    text-align: center;
    width: 100%;
  }
  
 
  .menu-toggle-checkbox:checked ~ nav.nav-menu {
    max-height: 500px; 
  }


  header .logo {
    height: 55px;
  }
  h1.title {
    font-size: 1.8rem;
  }

  main {
    padding: 2rem 1rem; 
  }

  main h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  main p {
    margin-bottom: 1rem;
    
  }

  /* === INICIO DE ESTILO DE ESTRENOS PARA (CELULAR) === */

 
.estrenos-recientes,
.destacados-comunidad {
  background-color: #000;  
  color: #fff;
  padding: 25px ; 
}


.titulo-seccion {
  background-color: #00e9a0; 
  padding: 10px 0;
  margin-bottom: 25px; 
  text-align: center;
  margin-left: 0; 
}

.titulo-seccion.color-comunidad {
    background-color: #e90059; /* === el rosa fuerte principal */
}

.titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem; 
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff; 
  border: none;
  margin: 0;
  padding: 0;
}


.titulo-seccion.rosa,
.titulo-seccion.rosa h2 {
  background-color: transparent;
  border: none;
}


.poster-card {
  flex: 0 0 auto;        
  width: 160px;        
  scroll-snap-align: start;
  
  font-family: Arial, sans-serif;
}
.poster-card img {
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}
.poster-card h3 {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 3px;
  
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.poster-card p {
  font-size: 0.8rem;
  color: #ccc;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.destacados-comunidad .card-subir {
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
  background-color: #f5b8d1;
  color: #000;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 2 / 3;
  height: auto;
}
.destacados-comunidad .card-subir .plus-sign {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000;
  background-color: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.destacados-comunidad .card-subir p {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: underline;
  color: #000;
  margin-top: 10px;
}


.slider > img {
  display: none; 
}

  .poster-grid img {
    width: 100%; 
    height: auto; 
    display: block;
  }

.card-subir {
 
  flex: 0 0 auto;       
  width: 160px;        
  scroll-snap-align: start;
  
  
  background-color: #f5b8d1; 
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none; 
  color: #000;
  
 
  aspect-ratio: 2 / 3; 
  height: auto; 
}


.card-subir .plus-icon {
  font-size: 2.5rem; 
  font-weight: 300; 
  line-height: 1; 
}

.card-subir p {
     font-family: 'League Gothic', sans-serif;
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.8rem;
  text-align: center;
  margin: 5px 0 0 0; 
}
/* === CSS para SLIDER DE POSTERS (MÓVIL) === */


.titulo-seccion {
  text-align: center;
  margin: 25px 0; 
}

.titulo-seccion h2 {
  font-size: 1.5rem; 
  font-weight: 700; 
  letter-spacing: 1px; 
  color: #000;
  padding: 12px 0; 
 
}

.titulo-seccion.color-comunidad h2 {
    color: #000000; 
}


.slider {
  display: flex; 
  gap: 15px; 
  overflow-x: auto; 
  scroll-snap-type: x mandatory; 
  padding: 0 20px; 
}


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


.slider > img { 
  flex: 0 0 auto;
  width: 160px;
  height: auto;
  scroll-snap-align: start;
}

/*
=====================================
  ESTILOS DE PÁGINA DE PERFIL EN USUARIO (CELULAR)
=====================================
*/


.titulo-seccion.black-bg {
  background-color: #000;
  border-color: #fff;
}
.titulo-seccion.black-bg h2 {
  color: #fff;
}


.perfil-config {
  padding: 0 0 30px 0;
  background-color: #fff;
}
.config-wrapper {
  padding: 25px; 
}
.perfil-avatar-wrapper {
  position: relative; 
  width: 150px;
  height: 150px;
  margin: 20px auto 30px auto; 
}
.perfil-avatar {
  width: 100%;
  height: 100%;
background-image: url('../imagenes/avatar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e0e0e0; 
  border-radius: 50%;
 
}

.avatar-input {
  display: none; 
}
.avatar-change-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.avatar-change-btn:hover {
  transform: scale(1.1);
}

.form-group {
  margin-bottom: 15px;
}
.form-group label {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #000;
  background-color: #f4f4f4;
  font-size: 1rem;
  box-sizing: border-box; 
}


.tus-favs {
  background-color: #000;
  padding-bottom: 30px;
}
.favs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 25px;
}

.fav-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5b8d1; 
  aspect-ratio: 1 / 1; 
  text-decoration: none;
  transition: transform 0.2s ease;
}
.fav-placeholder:hover {
  transform: scale(1.05);
}
.plus-icon {
  font-size: 4rem;
  font-weight: 300;
  color: #000;
  line-height: 1;
}

.subir-pelicula-btn {
  display: block;
  background-color: #e90059; 
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 15px;
  margin: 0 25px;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.subir-pelicula-btn:hover {
  background-color: #c0004a; 
}

/* --- 1. CELULAR PARA EXPLORAR --- */

.pelicula-azar {
  padding: 20px 0;
  text-align: center; 
  background-color: #fff; 
  color: #000;
}


.pelicula-azar .titulo-seccion {
  display: inline-block; 
  background-color: #00e9a0;
  border: none;
  padding: 10px 20px;
  margin: 20px auto; 
}
.pelicula-azar .titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  margin: 0;
  padding: 0;
  border: none;
}


.reel-container {
  padding: 10px 20px;
}
.reel-imagen {

  width: 250px; 
  height: auto;
  display: block;
  margin: 0 auto;
  
  animation: pulse 2s infinite ease-in-out; 
}
.ver-mas-container {
    
    display: flex;
    justify-content: flex-end; 
    
    padding-right: 20px; 
    margin-top: 10px; 
}

/* Opcional: Pausar la animación al pasar el mouse */
@media (hover: hover) and (pointer: fine) {
  .reel-imagen:hover {
    animation-play-state: paused;
    transform: rotate(10deg); 
    cursor: pointer; 
  }
}

.reel-subtitulo {
  font-family: 'League Gothic', sans-serif; 
  font-size: 1.8rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 20px;
  margin-top: 15px;
  margin-bottom: 25px;
  color: #000;
}


.filtrar-peliculas .filmstrip {
  width: 100%;
  display: block; 
}


.filtro-container {
  background-color: #000;
  color: #fff;
  padding: 30px 25px;
}
.filtro-container h2 {
  font-family: 'League Gothic', sans-serif; 
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}


.filtro-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.filtro-nav li {
  margin-bottom: 18px; 
}
.filtro-nav a {
  font-family: 'League Gothic', sans-serif; 
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s ease;
}
.filtro-nav a:hover {
  color: #e90059; 
}


/* --- Estilos para la nueva vista de Géneros en explorar en celular  --- */


.genre-slider-section h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2rem;
    color: #fff; 
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 30px 0 15px 20px; 
}

.filtro-back-btn {
    display: inline-block;
    font-family: 'League Gothic', sans-serif;
    font-size: 1.5rem;
    color: #e90059; 
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0 20px 20px;
    transition: color 0.2s ease;
}
.filtro-back-btn:hover {
    color: #fff;
}

.filtro-container .filtro-nav {
    display: none; 
}

.filtro-container .filtro-nav.active {
    display: block;
}

/* ---- Estilo solo para celular de COMUNIDAD  ---- */

body {
  background-color: #000;
  font-family: Arial, sans-serif;
}


.search-header {
  display: flex;
  background-color: #000;
  padding: 15px 20px;
  border-bottom: 3px solid #8A2BE2; 
 
}
.search-header input[type="text"] {
  flex: 1; 
  background: none;
  border: none;
  color: #fff;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.search-header input[type="text"]::placeholder {
  color: #fff;
}
.search-header .search-icon {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}


.community-feed {
  padding: 20px 10px 100px 10px; 
}


.post-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden; 
}


.post-user-info {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  gap: 10px;
}
.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc; 
  border: 2px solid #000;
}
.post-username {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #000;
  font-weight: 600;
}
.user-flair {
  margin-left: auto; 
  display: flex;
  gap: 8px;
  color: #555;
  font-size: 1.1rem;
}


.post-content {
  padding: 0 15px 15px 15px;
}
.post-text {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  margin: 0 0 15px 0;
}
.post-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid #ddd;
}


.post-actions {
  display: flex;
  gap: 15px;
  padding: 10px 15px;
  border-top: 1px solid #f0f0f0;
}
.action-icon {
  font-size: 1.5rem;
  text-decoration: none;
  color: #000;
}
.action-icon:first-child {
  color: #e90059; 
}


.create-post-btn {
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00e9a0; 
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 18px 0;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  z-index: 1000;
}
/* Efecto hover simple */
.create-post-btn:hover {
  transform: scale(1.03);
}

/* ---- Estilo solo para celular de PERFIL DE LUCRECIA  ---- */

    .director-profile-container {
        max-width: 450px;
        margin: 20px auto;
        background-color: #000; 
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

    .profile-hero img {
        width: 100%;
        display: block;
        filter: grayscale(100%); 
    }

    .profile-info {
        background-color: #000;
        padding: 25px 30px;
        text-align: center;
        color: #fff; 
    }

    .profile-name {
  
        font-family: 'Great Vibes', cursive;
        font-size: 3.8rem;
        font-weight: normal;
        line-height: 1;
        margin-bottom: 20px;
    }

    .profile-bio {
        font-family: 'Inter', sans-serif; 
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0;
    }
    .poster-card img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .directoras-slide.internacional {
        padding: 25px;
    }



    .directoras-slide.internacional .slider {
        padding: 0;
    }

    /* --- Estilo para Celular de Sobre nosotras--- */
    
  .page-container {
                margin: 20px auto;
                padding: 15px;
            }
            .award-section {
                flex-direction: column; 
                padding: 30px;
            }
            .award-poster {
                width: 100%;
                max-width: 300px; 
                flex-basis: auto;
            }
            .mission-intro h1, .award-info h2 {
                font-size: 2.2rem;
            }

          
.image-content {
   
    width: 100%; 
    margin: 25px 0; 
}


.image-content img {
   
    width: 100%; 
    height: auto; 
    
    display: block;
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Mas sobre nosotras  */
 .page-container {
            max-width: 1200px; 
            margin: 30px auto;
            padding: 20px;
            overflow: hidden; 
        }

        section {
            background-color: #ffffff;
            box-shadow: var(--sombra-suave);
        
            margin-bottom: 30px;
        }

        img {
            max-width: 100%;
            height: auto;
            
        }

.page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px; 
}


.content-card {
    background-color: #fff; 
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden; 
}



.corto-section .poster-content {
    width: 100%;
}
.corto-section .poster-content img {
    width: 100%;
    height: auto;
    display: block;
}

.corto-section .corto-info {
    padding: 40px; 
}

.corto-section .corto-info h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e90059;
    margin-top: 0;
    margin-bottom: 10px;
}

.corto-section .corto-info h3 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin-bottom: 20px;
}
.corto-section .corto-info p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}


.team-section {
    padding: 40px;
}

.team-section h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}


.team-member {
    text-align: center;
}
.team-member img {
    width: 150px; 
    height: 150px;
    border-radius: 50%;
    object-fit: cover; 
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.team-member h3 {
    font-family: 'League Gothic', sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin: 0;
}

.team-member p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #e90059; 
    font-weight: 500;
    margin: 0;
}

        
        
 .team-section {
            padding-bottom: 40px;
        }
        .team-grid {
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .team-member {
            background-color: var(--color-fondo);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            width: 300px;
            text-align: center;
            overflow: hidden;
        }
        
        .team-member img {
            width: 100%;
            height: 300px;
            object-fit: cover; 
            border-bottom: 4px solid var(--color-primario);
        }
        
        .team-member h3 {
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 1.4rem;
        }
        
        .team-member p {
            margin-top: 0;
            font-size: 1rem;
            color: var(--color-acento); 
            font-weight: 700;
        }
        
         .cta-section {
          
            text-align: center;
        }

        .cta-section h2 {
            color: #fff;
        }
        
        .cta-button {
            display: inline-block;
            background-color: #fff;
           
            padding: 14px 28px;
            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;
            border-radius: 50px;
            transition: transform 0.2s ease;
        }
        
        .cta-button:hover {
            transform: scale(1.05);
        }
/*=====================================
  OPCION DE CELU DE SUBIR POSTER
=====================================---- */

 .upload-container {
                margin: 20px 10px;
                padding: 20px;
            }
.poster-upload-area {
                flex-direction: column; 
            }
            
.drop-zone {
                height: 150px;
            }
.poster-preview {
            flex: 1;
            height: 250px; 
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0; 
            border-radius: 8px;
            overflow: hidden; 
        }
     
.poster-preview img {
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            display: none; 
        }
.poster-preview .preview-placeholder {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #999;
        }  

        
 /* celu para perfil de pelicula */

 body {
        background-color: #000; 
    }

  .poster-column {
        background-color: #000; 
        padding: 25px 25px 0 25px; 
    }

.movie-profile-container {
    width: 100%;
    background-color: #000000;
}


.profile-top-block {
    display: flex;
    flex-direction: column; 
    width: 100%;
}


.poster-column {
    background-color: #000000; 
    padding: 25px 25px 0 25px; 
    box-sizing: border-box; 
}
.poster-column img {
    width: 100%;
    height: auto;
    display: block;
    border: none; 
    border-radius: 5px;
}


.movie-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    color: #fff;
    background-color: #000; 
    padding: 20px 0;
    border-radius: 0 0 8px 8px; 
    margin: 0 25px; 
}
.stat-item {
    font-family: 'Inter', sans-serif;
}
.stat-item .icon {
    font-size: 1.5rem;
    color: #e90059; 
}
.stat-item .number {
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
}
.stat-item .label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #ccc;
}


.info-column {
    background-color: #e90059;
    color: #000;
    padding: 25px;
    box-sizing: border-box;
}
.info-column .movie-title {
    font-family: 'League Gothic', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    margin: 0;
}
.info-column .movie-director {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 10px 0;
}
.info-column .meta-data {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 30px;
}
.info-column .meta-data span {
    margin-right: 15px;
}
.info-column h3 { 
    font-family: 'League Gothic', sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.info-column .movie-synopsis {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}


.profile-bottom-block {
    padding: 25px;
    background-color: #fff;
    box-sizing: border-box;
}
.profile-bottom-block h2 { 
    font-family: 'League Gothic', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    margin-bottom: 20px;
    border-bottom: 3px solid #e90059; 
    padding-bottom: 10px;
    display: inline-block; 
}


.trailer-container {
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 40px;
    border-radius: 8px;
}
.trailer-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.reviews-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.review-card {
    border: 1px solid #ddd;
    border-top: 4px solid #e90059; 
    border-radius: 0 0 5px 5px;
    padding: 20px;
}
.review-card .review-author {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #000; 
}
.review-card .review-rating {
    color: #e90059;
    font-weight: bold;
    margin-bottom: 10px;
}
.review-card .review-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
}
/* ver mas de celu  */
  .page-content {
            max-width: 900px; 
            margin: 0 auto; 
            padding: 20px;
        }

      
        .breadcrumb-nav {
            text-align: right; 
            margin-bottom: 10px;
        }
        .breadcrumb-nav a {
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: #fff;
            text-decoration: underline;
            text-transform: uppercase;
            transition: color 0.2s ease;
        }
        .breadcrumb-nav a:hover {
            color: #e90059;
        }

     
        .genre-title {
            font-family: 'League Gothic', sans-serif;
            font-size: 2.5rem;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            text-align: center;
            margin-bottom: 30px;
        }

     
        .poster-grid {
            display: grid;
         
            grid-template-columns: 1fr 1fr; 
            gap: 20px; 
        }

  
        .poster-card img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 5px; 
        }
        
   .poster-grid .poster-card {
                transform: scale(1) !important; /* ¡Volvé al 100% del tamaño! */
                opacity: 1 !important; /* ¡Volvé al 100% de opacidad! */
              }

/* efecto del slider en el index de inicio en el celu  */
    .slider {
        scroll-snap-type: x mandatory;
        align-items: center;     
        padding: 0 !important; 
    }
  
  
    .card, 
    .card.internacional, 
    .poster-card, 
    .card-subir {
        scroll-snap-align: center; 
        transform: scale(0.85);
        opacity: 0.7;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }
    
    .card.is-active,
    .card.internacional.is-active, 
    .poster-card.is-active,
    .card-subir.is-active {
        transform: scale(1);
        opacity: 1;
    }  


} 



/* ----
=====================================
  ACA TERMINAN LOS ESTILOS DE CELUAR 
=====================================---- */


/* ----
=====================================
  ACA EMPIEZA LOS ESTILOS DE COMPUTADORA  
=====================================---- */

/* ---- Estilo solo para pantalla COMPUTADORA  ---- */
@media (min-width: 1024px) {

    
  .directoras-slide h2 {
    text-align: center; 
    margin-bottom: 40px; 
    font-size: 2.2rem; 
  }

  .slider {
    display: flex;
    justify-content: center;  
      
  }

  .slider .card {
    flex: 0 1 250px; 
  }

 

  .slider .card .nombre {
    text-align: center; 
    margin-top: 15px; 
    font-size: 1.25rem; 
     letter-spacing: 2px; 
  }

.estrenos-recientes {
  padding: 40px 20px;
  background-color: #000; 
  color: #fff; 
}


.destacados-comunidad {
  padding: 40px 20px;
  background-color: #000; 
  color: #fff; 
}


.estrenos-recientes .titulo-seccion {
  background-color:  #00e9a0; 
  padding: 15px 0;
  margin-bottom: 40px; 
  text-align: center;
  border: none;
  margin-top: 0; 
}
.destacados-comunidad .titulo-seccion {

  background-color:  #e90059;
  padding: 15px 0;
  margin-bottom: 40px; 
  text-align: center;
  border: none;
  margin-top: 0; 
}

.estrenos-recientes .titulo-seccion h2,
.destacados-comunidad .titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff; /* ¡TEXTO BLANCO! */
  border: none;
  margin: 0;
  padding: 0;
}

/* --- Títulos para PERFIL y TUS FAVS (Franja Negra) --- */
.perfil-config .titulo-seccion,
.tus-favs .titulo-seccion {
  background-color: #00e9a0; 
  padding: 10px 0;
  margin-bottom: 0; 
  text-align: center;
  border: none; 
  margin-top: 20px; 
}
.perfil-config .titulo-seccion h2,
.tus-favs .titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.2rem; 
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff; 
  border: none;
  margin: 0;
  padding: 0;
}
.tus-favs .titulo-seccion {
  border-top: 1px solid #444; 
  margin-top: 0;
}

.estrenos-recientes .slider {
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  gap: 30px; 
  max-width: 1400px; 
  margin: 0 auto; 
  overflow-x: visible; 
  padding: 0;
}


.destacados-comunidad .slider {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 30px; 
  max-width: 1200px; 
  margin: 0 auto; 
  overflow-x: visible; 
  padding: 0;
  align-items: start;
}


.poster-card {
  text-align: left;
  font-family: Arial, sans-serif; 
}
.poster-card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.poster-card h3 {
  font-family: 'League Gothic', sans-serif; 
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 5px;
}
.poster-card p {
  font-size: 0.9rem;
  color: #ccc; 
  text-transform: uppercase;
}

/* 7. Estilo para la tarjeta "Subí el tuyo" (en computadora) */
.destacados-comunidad .card-subir {
  background-color: #f5b8d1; 
  color: #000;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 2 / 3; 
  transition: transform 0.3s ease;
}
.destacados-comunidad .card-subir:hover {
  transform: scale(1.03);
}
.destacados-comunidad .card-subir .plus-sign {
  font-size: 3rem;
  font-weight: 700;
  color: #000;
  background-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px; 
  text-align: center;
}
.destacados-comunidad .card-subir p {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: underline;
  color: #000;
  margin-top: 15px;
}

.estrenos-recientes .slider > img {
 display: none; /* Esta regla ya no se usa */
}

.directoras-slide .slider .card {
  
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer; 
  
}

/* Efecto al pasar el mouse por encima de la tarjeta */
.directoras-slide .slider .card:hover {
  transform: scale(1.02); 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 1;
}


.directoras-slide .slider .card:hover img {
  filter: brightness(1.1);
  transition: filter 0.3s ease-in-out; 
}


.directoras-slide .slider .card:hover .nombre {
  color:#e90059; 
  transition: color 0.3s ease-in-out; 
} 

/*
=====================================
  ESTILOS DE PÁGINA DE PERFIL (COMPU DE USUARIO)
=====================================
*/



.perfil-container {
 
  margin: 0 auto;
}


.titulo-seccion {
 background-color: #ffffff; 
  padding: 10px 0;
  margin-bottom: 0; 
  text-align: center;
  border: none; 
  margin-top: 20px; 
}

.titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem; 
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff; 
  border: none;
  margin: 0;
  padding: 0;
}

.titulo-seccion.black-bg {
  background-color: #000;
  border-top: 1px solid #444; 
}
.titulo-seccion.black-bg h2 {
  color: #fff;
}

/* --- 1. SECCIÓN CONFIGURACIÓN --- */
.perfil-config {
  padding: 0 0 30px 0;
  background-color: #fff; 
}
.config-wrapper {
  padding: 25px; 
}
.perfil-avatar-wrapper {
  position: relative; 
  width: 150px;
  height: 150px;
  margin: 20px auto 30px auto; 
}
.perfil-avatar {
  width: 100%;
  height: 100%;
background-image: url('../imagenes/avatar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e0e0e0; 
  border-radius: 50%;
 
}

.avatar-input {
  display: none; 
}
.avatar-change-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.avatar-change-btn:hover {
  transform: scale(1.1);
}

.form-group {
  margin-bottom: 15px;
}
.form-group label {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 5px;
  color: #000;
}
.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #000;
  background-color: #f4f4f4;
  font-size: 1rem;
  box-sizing: border-box; 
}

/* --- 2. SECCIÓN TUS FAVS --- */
.tus-favs {
  background-color: #000;
  padding-bottom: 30px;
}
.favs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 25px;
}
/* Cuadro rosa con el '+' */
.fav-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5b8d1; 
  aspect-ratio: 1 / 1; 
  text-decoration: none;
  transition: transform 0.2s ease;
}
.fav-placeholder:hover {
  transform: scale(1.05);
}
.plus-icon {
  font-size: 4rem;
  font-weight: 300;
  color: #000;
  line-height: 1;
}

.subir-pelicula-btn {
  display: block;
  background-color: #e90059; 
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 15px;
  margin: 0 25px;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.subir-pelicula-btn:hover {
  background-color: #c0004a; 
}

/*
=====================================
  ESTILOS DE PÁGINA DE PERFIL (COMPU DE EXPLORAR)
=====================================
*/

/* --- 1. SECCIÓN PELÍCULA AL AZAR --- */

.pelicula-azar {
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 50px;
  padding: 60px 40px;
  background-color: #fff; 
  color: #000;
}


.reel-container {
  flex: 0 1 400px; 
  padding: 0;
}
.reel-imagen {
  max-width: 400px;
  width: 100%;
  transition: transform 0.3s ease; 
}
.reel-imagen:hover {
  transform: rotate(10deg);
  cursor: pointer;
}


.pelicula-azar-texto {
  flex: 1; 
  max-width: 450px;
}
.pelicula-azar .titulo-seccion {
  display: inline-block;
  background-color: #00e9a0;
  border: none;
  padding: 10px 20px;
  margin: 0 0 25px 0; 
}
.pelicula-azar .titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  color: #fff;
  font-size: 1.8rem;
  margin: 0;
  padding: 0;
  border: none;
}
.reel-subtitulo {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.5rem;
  text-align: left; 
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
  color: #000;
}


/* --- 2. SECCIÓN FILTRAR PELÍCULAS --- */

.filtro-container {
  background-color: #000;
  color: #fff;
  padding: 60px 40px; 

  }


.filtro-container h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  text-align: left;
  margin: 0; 
  flex-basis: 300px; 
}


.filtro-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  
 
  flex: 1; 
  
  
  text-align: center; 
}


.filtro-nav li {
  margin-bottom: 20px;
}
.filtro-nav a {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s ease;
}
.filtro-nav a:hover {
  color: #e90059;
}

/* ========================================
   ESTILOS PARA LOS FILTROS DE EXPLORAR
   ======================================== */

/* Esta es la lógica de "apagar" y "prender"
  Por defecto, un 'filtro-nav' está oculto.
*/
.filtro-nav {
    display: none;
}
/* Cuando tiene la clase 'active', se muestra */
.filtro-nav.active {
    display: block;
}

.ver-mas-container {
   
    display: flex;
    justify-content: flex-end; 
    padding-right: 20px; 
    margin-top: 10px; 
}

/* COMPU PARA COMUNIDAD  */

body {
  background-color: #000;
  font-family: Arial, sans-serif;
}


.search-header {
  display: flex;
  background-color: #000;
  padding: 15px 20px;
  border-bottom: 3px solid #8A2BE2; 
  position: sticky; 
  top: 0;
  z-index: 900;
}
.search-header input[type="text"] {
  flex: 1; 
  background: none;
  border: none;
  color: #fff;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.search-header input[type="text"]::placeholder {
  color: #fff;
}
.search-header .search-icon {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}


.community-feed {
  padding: 20px 10px 40px 10px; 
  max-width: 700px; 
  margin-left: auto;
  margin-right: auto;
}


.post-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden; 
}


.post-user-info {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  gap: 10px;
}
.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc; 
  border: 2px solid #000;
}
.post-username {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #000;
  font-weight: 600;
}
.user-flair {
  margin-left: auto; 
  display: flex;
  gap: 8px;
  color: #555;
  font-size: 1.1rem;
}


.post-content {
  padding: 0 15px 15px 15px;
}
.post-text {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  margin: 0 0 15px 0;
}
.post-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.post-actions {
  display: flex;
  gap: 15px;
  padding: 10px 15px;
  border-top: 1px solid #f0f0f0;
}
.action-icon {
  font-size: 1.5rem;
  text-decoration: none;
  color: #000;
}
.action-icon:first-child {
  color: #e90059; 
}

.create-post-btn {
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00e9a0; 
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 18px 0;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  z-index: 1000;
}
/* Efecto hover simple */
.create-post-btn:hover {
  transform: scale(1.03);
}
/* ESTILOS COMPURADORA PERFIL DE DIRECTORAS: LUCRECIA  */

 .director-profile-container {
            max-width: 1100px; 
            margin: 40px auto;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
           
            overflow: hidden; 
            background-color: #fff; 
        }

        .profile-top-block {
            display: flex;
            background-color: #000;
            color: #fff;
           
        }

        .profile-hero {
            flex-basis: 40%; 
            flex-shrink: 0;
            background-color: #000; 
        }
        
        .profile-hero img {
            width: 100%; 
            height: auto;
            display: block;
            filter: grayscale(100%);
        }

      
        .profile-info {
            flex-basis: 60%; 
            flex-shrink: 0;
            padding: 50px; 
            text-align: left; 
            background-color: #e90059; 
            color: #000; 
            box-sizing: border-box; 
        }

        .profile-name {
            font-family: 'Great Vibes', cursive;
            font-size: 4.5rem;
            margin-top: 0;
            margin-bottom: 30px;
        }

        .profile-bio {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.8;
        }
        
        .poster-card img {
           
            height: auto;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            display: block;
        }
        
        
        .filmography {
            background-color: #fff; 
        }

        .filmography .titulo-seccion {
            padding-top: 40px;
            padding-bottom: 20px;
            margin-bottom: 0;
        }

        .filmography .titulo-seccion h2 {
            color: #000; 
            font-family: 'League Gothic', sans-serif;
            font-size: 2.2rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            
           
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 0 40px; 
        }

        .filmography .titulo-seccion h2::before,
        .filmography .titulo-seccion h2::after {
            content: '';
            display: block;
            flex: 1; 
            height: 2px;
            background-color: #000; 
        }
        
       

        
        
       .director-profile-container .directoras-slide.internacional .slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
    padding: 0;
    overflow-x: visible; 
}
       
        .poster-card {
            width: 100%; 
        }

/* contenedor de imagen de sobre nosotras en compu */
.image-content {
            width: 100%;
            max-width: 500px; 
            margin: 25px auto; 
        }
        .image-content img {
            width: 100%; 
            height: auto; 
            display: block;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
         

        .page-container {
            max-width: 1200px; 
            margin: 30px auto;
            padding: 20px;
            overflow: hidden; 
            
        }

        .page-container {
            max-width: 1200px; 
            margin: 30px auto;
            padding: 20px;
            overflow: hidden; 
        }

        section {
            background-color: #ffffff;
            box-shadow: var(--sombra-suave);
        
            margin-bottom: 30px;
        }

        img {
            max-width: 100%;
            height: auto;
            
        }

.page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px; 
}


.content-card {
    background-color: #fff; 
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden; 
}



.corto-section .poster-content {
    width: 100%;
}
.corto-section .poster-content img {
    width: 100%;
    height: auto;
    display: block;
}

.corto-section .corto-info {
    padding: 40px; 
}

.corto-section .corto-info h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e90059;
    margin-top: 0;
    margin-bottom: 10px;
}

.corto-section .corto-info h3 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin-bottom: 20px;
}
.corto-section .corto-info p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}


.team-section {
    padding: 40px;
}

.team-section h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}


.team-member {
    text-align: center;
}
.team-member img {
    width: 150px; 
    height: 150px;
    border-radius: 50%;
    object-fit: cover; 
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.team-member h3 {
    font-family: 'League Gothic', sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin: 0;
}

.team-member p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #e90059; 
    font-weight: 500;
    margin: 0;
}

        
        
 .team-section {
            padding-bottom: 40px;
        }
        .team-grid {
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .team-member {
            background-color: var(--color-fondo);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            width: 300px;
            text-align: center;
            overflow: hidden;
        }
        
        .team-member img {
            width: 100%;
            height: 300px;
            object-fit: cover; 
            border-bottom: 4px solid var(--color-primario);
        }
        
        .team-member h3 {
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 1.4rem;
        }
        
        .team-member p {
            margin-top: 0;
            font-size: 1rem;
            color: var(--color-acento); 
            font-weight: 700;
        }
        
         .cta-section {
          
            text-align: center;
        }

        .cta-section h2 {
            color: #fff;
        }
        
        .cta-button {
            display: inline-block;
            background-color: #fff;
           
            padding: 14px 28px;
            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;
            border-radius: 50px;
            transition: transform 0.2s ease;
        }
        
        .cta-button:hover {
            transform: scale(1.05);
        }
    
        .mission-intro {
          
            display: flex;
            flex-direction: column; 
            align-items: center;
            gap: 30px;
        }
        
        .mission-intro .image-content {
            width: 100%;
            flex-basis: 40%;
        }
        
        .mission-intro .text-content {
            flex-basis: 60%; 
        }

        .award-section {
            background-color: #000; 
            color: #fff;
            display: flex;
            flex-direction: column; 
            align-items: center;
            gap: 30px;
        }
        
        .award-photo { 
            width: 100%;
            max-width: 400px; 
        }
        
        .award-photo img {
             border: 4px solid var(--color-primario);
             object-fit: cover;
             width: 100%;
             height: 400px; 
        }
        
        .award-info {
            text-align: center;
        }

        .award-info .trophy {
            font-size: 3rem;
        }

      
        
        .award-info p {
            font-size: 1.1rem;
            color: #000000;
        }
        
        

        .team-section {
            padding-bottom: 40px;
        }
        .team-grid {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .team-member {
            background-color: var(--color-fondo);
         
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            width: 300px;
            text-align: center;
            overflow: hidden;
        }
        
        .team-member img {
            width: 100%;
            height: 300px;
            object-fit: cover; 
          
            border-bottom: 4px solid var(--color-primario);
        }
        
        .team-member h3 {
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 1.4rem;
        }
        
        .team-member p {
            margin-top: 0;
            font-size: 1rem;
            color: var(--color-acento); 
            font-weight: 700;
        }

        .cta-section {
          
            text-align: center;
        }

        .cta-section h2 {
            color: #fff;
        }
        
        .cta-button {
            display: inline-block;
            background-color: #fff;
          
            padding: 14px 28px;
            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;
            border-radius: 50px;
            transition: transform 0.2s ease;
        }
        
        .cta-button:hover {
            transform: scale(1.05);
        }

            .award-section, .corto-section {
                flex-direction: row; 
            }

            .team-grid {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
            }
        
/* =====================================
  ESTILOS DEL PERFIL DE PELICULA para compu 
=====================================
*/

 .movie-profile-container {
            max-width: 1100px;
            margin: 40px auto;
            background-color: #fff; 
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
           
            overflow: hidden; 
        }

.profile-top-block {
            display: flex;
            background-color: #000; 
        }
        
    
.poster-column {
            flex-basis: 40%;
            flex-shrink: 0;
            background-color: #000;
            padding: 40px;
            box-sizing: border-box;
        }
 .poster-column img {
            width: 100%;
            height: auto;
            display: block;
            border: 4px solid #fff;
            
        }
 .movie-stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
            color: #fff;
            padding: 20px 0;
        }
 .stat-item {
            font-family: 'Inter', sans-serif;
        }
 .stat-item .icon {
            font-size: 1.5rem;
            color: #e90059; 
        }
 .stat-item .number {
            font-size: 1.3rem;
            font-weight: 700;
            display: block;
        }
 .stat-item .label {
            font-size: 0.8rem;
            text-transform: uppercase;
            color: #ccc;
        }

 .info-column {
            flex-basis: 60%;
            flex-shrink: 0;
            background-color: #e90059; 
            color: #000;
            padding: 40px;
            box-sizing: border-box;
        }
 .info-column .movie-title {
            font-family: 'League Gothic', sans-serif;
            font-size: 4rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #000;
            margin: 0;
        }
 .info-column .movie-director {
            font-family: 'Inter', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            margin: 10px 0;
        }
.info-column .meta-data {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: 30px;
        }
 .info-column .meta-data span {
            margin-right: 15px;
        }
 .info-column h3 { 
            font-family: 'League Gothic', sans-serif;
            font-size: 1.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }
 .info-column .movie-synopsis {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.7;
        }

 .profile-bottom-block {
            padding: 40px;
            background-color: #fff; 
        }
 .profile-bottom-block h2 { 
            font-family: 'League Gothic', sans-serif;
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #000;
            margin-bottom: 20px;
            border-bottom: 3px solid #e90059; 
            padding-bottom: 10px;
            display: inline-block; 
        }
        
 .trailer-container {
            position: relative;
            padding-bottom: 56.25%; 
            height: 0;
            overflow: hidden;
            max-width: 100%;
            margin-bottom: 40px;
            
        }

 .trailer-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

 .reviews-container {
            display: grid;
            grid-template-columns: 1fr; 
            gap: 20px;
        }

.review-card {
            border: 1px solid #ddd;
            border-top: 4px solid #e90059; 
            padding: 20px;
        }

.review-card .review-author {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
 .review-card .review-rating {
            color: #e90059;
            font-weight: bold;
            margin-bottom: 10px;
        }
 .review-card .review-text {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.6;
        }

 .review-card .review-author {
    color: #000; 
}

.review-card .review-text {
    color: #000; 
}

/*
=====================================
estilo para compu de ver mas
=====================================
*/
.page-content {
        max-width: 900px; 
        margin: 0 auto; 
        padding: 20px;
    }


.breadcrumb-nav {
        text-align: right; 
        margin-bottom: 10px;
    }
.breadcrumb-nav a {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        color: #fff;
        text-decoration: underline;
        text-transform: lowercase;
    }
.breadcrumb-nav a:hover {
        color: #e90059;
    }

  
.genre-title {
        font-family: 'League Gothic', sans-serif;
        font-size: 2.5rem;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-align: center;
        margin-bottom: 30px;
    }

.poster-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 20px; 
    }

    
 .poster-grid {
            grid-template-columns: repeat(4, 1fr); 
            gap: 25px; 
        }

        .page-content {
            max-width: 1200px; 
        }
    
    
    .poster-card img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px; 
    }

}

/*
=====================================
  ACA TERMINAN LOS ESTILOS DE COMPU 
=====================================
*/

  /*
=====================================
  💻 ESTILOS PARA TABLET (769px a 1023px)
=====================================
*/

@media (min-width: 769px) and (max-width: 1023px) {

 


.perfil-container {
  
  margin: 0 auto;
}


.titulo-seccion {
 background-color: #000; 
  padding: 10px 0;
  margin-bottom: 0; 
  text-align: center;
  border: none; 
  margin-top: 20px; 
}

.titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem; 
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff; 
  border: none;
  margin: 0;
  padding: 0;
}

.titulo-seccion.black-bg {
  background-color: #000;
  border-top: 1px solid #444; 
}
.titulo-seccion.black-bg h2 {
  color: #fff;
}


.perfil-config {
  padding: 0 0 30px 0;
  background-color: #fff; 
}
.config-wrapper {
  padding: 25px; 
}
.perfil-avatar-wrapper {
  position: relative; 
  width: 150px;
  height: 150px;
  margin: 20px auto 30px auto; 
}
.perfil-avatar {
  width: 100%;
  height: 100%;
background-image: url('../imagenes/avatar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e0e0e0; 
  border-radius: 50%;
 
}
.avatar-input {
  display: none; 
}
.avatar-change-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.avatar-change-btn:hover {
  transform: scale(1.1);
}

.form-group {
  margin-bottom: 15px;
}
.form-group label {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 5px;
  color: #000;
}
.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #000;
  background-color: #f4f4f4;
  font-size: 1rem;
  box-sizing: border-box; 
}


.tus-favs {
  background-color: #000;
  padding-bottom: 30px;
}
.favs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 25px;
}

.fav-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5b8d1; 
  aspect-ratio: 1 / 1;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.fav-placeholder:hover {
  transform: scale(1.05);
}
.plus-icon {
  font-size: 4rem;
  font-weight: 300;
  color: #000;
  line-height: 1;
}

.subir-pelicula-btn {
  display: block;
  background-color: #e90059; 
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 15px;
  margin: 0 25px;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.subir-pelicula-btn:hover {
  background-color: #c0004a; 
}

/* TABLET PARA COMUNIDAD */

body {
  background-color: #000;
  font-family: Arial, sans-serif;
}


.search-header {
  display: flex;
  background-color: #000;
  padding: 15px 20px;
  border-bottom: 3px solid #8A2BE2; 
  position: sticky; 
  top: 0;
  z-index: 900;
}
.search-header input[type="text"] {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.search-header input[type="text"]::placeholder {
  color: #fff;
}
.search-header .search-icon {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}

.community-feed {
  padding: 20px 10px 100px 10px; 
}


.post-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden; 
}

/* Info del Usuario */
.post-user-info {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  gap: 10px;
}
.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc; 
  border: 2px solid #000;
}
.post-username {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #000;
  font-weight: 600;
}
.user-flair {
  margin-left: auto; 
  display: flex;
  gap: 8px;
  color: #ffffff;
  font-size: 1.1rem;
}


.post-content {
  padding: 0 15px 15px 15px;
}
.post-text {
  font-family: 'League Gothic', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  margin: 0 0 15px 0;
}
.post-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid #ddd;
}


.post-actions {
  display: flex;
  gap: 15px;
  padding: 10px 15px;
  border-top: 1px solid #f0f0f0;
}
.action-icon {
  font-size: 1.5rem;
  text-decoration: none;
  color: #000;
}
.action-icon:first-child {
  color: #e90059; 
}


.create-post-btn {
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00e9a0;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 18px 0;
  font-family: 'League Gothic', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  z-index: 1000;
}
/* Efecto hover simple */
.create-post-btn:hover {
  transform: scale(1.03);
}

/* PERFIL DE DIRECTORAS: LUCRECIA EN TABLET  */


    .director-profile-container {
        max-width: 700px;
        margin: 30px auto;
        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
        border-radius: 8px; 
        overflow: hidden; 
    }

   
    .profile-top-block {
        background-color: #000;
    }

    .profile-hero img {
        width: 100%;
        display: block;
        filter: grayscale(100%);
    }
    
    .profile-info {
        background-color: #000;
        padding: 30px 40px;
        text-align: center;
        color: #fff;
    }


    .profile-name {
        font-family: 'Great Vibes', cursive;
        font-size: 4.5rem;
        margin-bottom: 25px;
        color: #000;
    }
    
    .profile-bio {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .poster-card img {
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

 
    .filmography .titulo-seccion {
        background-color: #f5b8d1; 
        padding-top: 30px;
        padding-bottom: 20px;
        margin-bottom: 0; 
    }

    .filmography .titulo-seccion h2 {
        color: #000; 
        font-family: 'League Gothic', sans-serif;
        font-size: 2rem;
        letter-spacing: 1.5px;
        
       
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 0 25px; 
    }

   
    .filmography .titulo-seccion h2::before,
    .filmography .titulo-seccion h2::after {
        content: '';
        display: block;
        flex: 1; 
        height: 2px;
        background-color: #000; 
    }
    
    
    .directoras-slide.internacional {
        padding: 30px 40px;
        background-color: #f5b8d1;
    }

    .directoras-slide.internacional .slider {
        padding: 0; 
    }
/* contenedor de imagen de sobre nosotras en tablet*/
.image-content {
            width: 100%;
            max-width: 500px; 
            margin: 25px auto; 
        }
        .image-content img {
            width: 100%; 
            height: auto; 
            display: block;
           
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .image-content {
            width: 100%;
            max-width: 500px; 
            margin: 25px auto; 
        }
        .image-content img {
            width: 100%; 
            height: auto; 
            display: block;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
         .page-container {
            max-width: 1200px; 
            margin: 30px auto;
            padding: 20px;
            overflow: hidden; 
        }

        section {
            background-color: #ffffff;
            box-shadow: var(--sombra-suave);
        
            margin-bottom: 30px;
        }

        img {
            max-width: 100%;
            height: auto;
            
        }

.page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px; 
}


.content-card {
    background-color: #fff; 
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden; 
}



.corto-section .poster-content {
    width: 100%;
}
.corto-section .poster-content img {
    width: 100%;
    height: auto;
    display: block;
}

.corto-section .corto-info {
    padding: 40px; 
}

.corto-section .corto-info h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e90059;
    margin-top: 0;
    margin-bottom: 10px;
}

.corto-section .corto-info h3 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin-bottom: 20px;
}
.corto-section .corto-info p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}


.team-section {
    padding: 40px;
}

.team-section h2 {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}


.team-member {
    text-align: center;
}
.team-member img {
    width: 150px; 
    height: 150px;
    border-radius: 50%;
    object-fit: cover; 
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.team-member h3 {
    font-family: 'League Gothic', sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin: 0;
}

.team-member p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #e90059; 
    font-weight: 500;
    margin: 0;
}

        
        
 .team-section {
            padding-bottom: 40px;
        }
        .team-grid {
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .team-member {
            background-color: var(--color-fondo);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            width: 300px;
            text-align: center;
            overflow: hidden;
        }
        
        .team-member img {
            width: 100%;
            height: 300px;
            object-fit: cover; 
            border-bottom: 4px solid var(--color-primario);
        }
        
        .team-member h3 {
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 1.4rem;
        }
        
        .team-member p {
            margin-top: 0;
            font-size: 1rem;
            color: var(--color-acento); 
            font-weight: 700;
        }
        
         .cta-section {
          
            text-align: center;
        }

        .cta-section h2 {
            color: #fff;
        }
        
        .cta-button {
            display: inline-block;
            background-color: #fff;
           
            padding: 14px 28px;
            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;
            border-radius: 50px;
            transition: transform 0.2s ease;
        }
        
        .cta-button:hover {
            transform: scale(1.05);
        }

        .page-container {
            max-width: 1200px; 
            margin: 30px auto;
            padding: 20px;
            overflow: hidden; 
            
        }

        section {
            background-color: #ffffff;
            box-shadow: var(--sombra-suave);
            padding: 30px;
            margin-bottom: 30px;
        }

        h1, h2, h3 {
            font-weight: 900; 
            margin-top: 0;
        }

        h1 {
            font-size: 2.8rem;
            color: var(--color-primario);
            text-align: center;
            margin-bottom: 30px;
        }

        h2 {
            font-size: 2.2rem;
            text-align: center;
            margin-bottom: 25px;
        }

        h3 {
            font-size: 1.5rem;
            font-weight: 700;
        }

        p {
            font-size: 1.1rem;
            color: #ffffff;
        }

        img {
            max-width: 100%;
            height: auto;
           
        }

    
        .mission-intro {
          
            display: flex;
            flex-direction: column; 
            align-items: center;
            gap: 30px;
        }
        
        .mission-intro .image-content {
            width: 100%;
            flex-basis: 40%;
        }
        
        .mission-intro .text-content {
            flex-basis: 60%; 
        }

        .award-section {
            background-color: #000; 
            color: #fff;
            display: flex;
            flex-direction: column; 
            align-items: center;
            gap: 30px;
        }
        
        .award-photo { 
            width: 100%;
            max-width: 400px; 
        }
        
        .award-photo img {
             border: 4px solid var(--color-primario);
             object-fit: cover;
             width: 100%;
             height: 400px; 
        }
        
        .award-info {
            text-align: center;
        }

        .award-info .trophy {
            font-size: 3rem;
        }

        .award-info h2 {
            color: var(--color-primario);
        }
        
        .award-info p {
            font-size: 1.1rem;
            color: #eee;
        }
        
        .corto-section {
            display: flex;
            flex-direction: column; 
            align-items: center;
            gap: 30px;
        }
        .corto-section .poster-content {
            width: 100%;
            max-width: 350px;
            flex-basis: 40%; 
        }
        .corto-section .poster-content img {
            border: 1px solid #ddd;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .corto-section .corto-info {
            flex-basis: 60%; 
        }
        .corto-section .corto-info h2 {
            text-align: left;
            margin-bottom: 10px;
        }
        .corto-section .corto-info h3 {
            color: var(--color-acento); 
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 1.8rem;
        }

        .team-section {
            padding-bottom: 40px;
        }
        .team-grid {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .team-member {
            background-color: var(--color-fondo);
         
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            width: 300px;
            text-align: center;
            overflow: hidden;
        }
        
        .team-member img {
            width: 100%;
            height: 300px;
            object-fit: cover; 
          
            border-bottom: 4px solid var(--color-primario);
        }
        
        .team-member h3 {
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 1.4rem;
        }
        
        .team-member p {
            margin-top: 0;
            font-size: 1rem;
            color: var(--color-acento); 
            font-weight: 700;
        }

        .cta-section {
            background-color: var(--color-primario);
            text-align: center;
        }

        .cta-section h2 {
            color: #fff;
        }
        
        .cta-button {
            display: inline-block;
            background-color: #fff;
            color: var(--color-primario);
            padding: 14px 28px;
            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;
            border-radius: 50px;
            transition: transform 0.2s ease;
        }
        
        .cta-button:hover {
            transform: scale(1.05);
        }

            .award-section, .corto-section {
                flex-direction: row; 
            }

            .team-grid {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
            }

/* perfil de pelicula en tablet*/

.movie-profile-container {
            max-width: 1100px;
            margin: 40px auto;
            background-color: #fff; 
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
           
            overflow: hidden; 
        }

.profile-top-block {
            display: flex;
            background-color: #000; 
        }
        
    
.poster-column {
            flex-basis: 40%;
            flex-shrink: 0;
            background-color: #000;
            padding: 40px;
            box-sizing: border-box;
        }
 .poster-column img {
            width: 100%;
            height: auto;
            display: block;
            border: 4px solid #fff;
            
        }
 .movie-stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
            color: #fff;
            padding: 20px 0;
        }
 .stat-item {
            font-family: 'Inter', sans-serif;
        }
 .stat-item .icon {
            font-size: 1.5rem;
            color: #e90059; 
        }
 .stat-item .number {
            font-size: 1.3rem;
            font-weight: 700;
            display: block;
        }
 .stat-item .label {
            font-size: 0.8rem;
            text-transform: uppercase;
            color: #ccc;
        }

 .info-column {
            flex-basis: 60%;
            flex-shrink: 0;
            background-color: #e90059; 
            color: #000;
            padding: 40px;
            box-sizing: border-box;
        }
 .info-column .movie-title {
            font-family: 'League Gothic', sans-serif;
            font-size: 4rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #000;
            margin: 0;
        }
 .info-column .movie-director {
            font-family: 'Inter', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            margin: 10px 0;
        }
.info-column .meta-data {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: 30px;
        }
 .info-column .meta-data span {
            margin-right: 15px;
        }
 .info-column h3 { 
            font-family: 'League Gothic', sans-serif;
            font-size: 1.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }
 .info-column .movie-synopsis {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.7;
        }

 .profile-bottom-block {
            padding: 40px;
            background-color: #fff; 
        }
 .profile-bottom-block h2 { 
            font-family: 'League Gothic', sans-serif;
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #000;
            margin-bottom: 20px;
            border-bottom: 3px solid #e90059; 
            padding-bottom: 10px;
            display: inline-block; 
        }
        
 .trailer-container {
            position: relative;
            padding-bottom: 56.25%; 
            height: 0;
            overflow: hidden;
            max-width: 100%;
            margin-bottom: 40px;
            
        }

 .trailer-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

 .reviews-container {
            display: grid;
            grid-template-columns: 1fr; 
            gap: 20px;
        }

.review-card {
            border: 1px solid #ddd;
            border-top: 4px solid #e90059; 
            padding: 20px;
        }

.review-card .review-author {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
 .review-card .review-rating {
            color: #e90059;
            font-weight: bold;
            margin-bottom: 10px;
        }
 .review-card .review-text {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.6;
        }

 .review-card .review-author {
    color: #000; 
}

.review-card .review-text {
    color: #000; 
}

/*=====================================
  ESTILOS DE PÁGINA DE PERFIL (tablet  DE EXPLORAR)
=====================================
*/

/* --- 1. SECCIÓN PELÍCULA AL AZAR --- */

.pelicula-azar {
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 50px;
  padding: 60px 40px;
  background-color: #fff; 
  color: #000;
}


.reel-container {
  flex: 0 1 400px; 
  padding: 0;
}
.reel-imagen {
  max-width: 400px;
  width: 100%;
  transition: transform 0.3s ease; 
}
.reel-imagen:hover {
  transform: rotate(10deg);
  cursor: pointer;
}


.pelicula-azar-texto {
  flex: 1; 
  max-width: 450px;
}
.pelicula-azar .titulo-seccion {
  display: inline-block;
  background-color: #000;
  border: none;
  padding: 10px 20px;
  margin: 0 0 25px 0; 
}
.pelicula-azar .titulo-seccion h2 {
  font-family: 'League Gothic', sans-serif;
  color: #fff;
  font-size: 1.8rem;
  margin: 0;
  padding: 0;
  border: none;
}
.reel-subtitulo {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.5rem;
  text-align: left; 
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
  color: #000;
}


.filtro-container {
  background-color: #000;
  color: #fff;
  padding: 60px 40px; 

  }


.filtro-container h2 {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  text-align: left;
  margin: 0; 
  flex-basis: 300px; 
}


.filtro-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  
 
  flex: 1; 
  
  
  text-align: center; 
}


.filtro-nav li {
  margin-bottom: 20px;
}
.filtro-nav a {
  font-family: 'League Gothic', sans-serif;
  font-size: 2.2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s ease;
}
.filtro-nav a:hover {
  color: #e90059;
}

/* ========================================
   ESTILOS PARA LOS FILTROS DE EXPLORAR tablet
   ======================================== */


.filtro-nav {
    display: none;
}

.filtro-nav.active {
    display: block;
}

.ver-mas-container {
   
    display: flex;
    justify-content: flex-end; 
    padding-right: 20px; 
    margin-top: 10px; 
}


/*
=====================================
  ESTILOS DE VER MÁS PARA tablet (mismo q compu)
=====================================
*/

.page-content {
        max-width: 900px; 
        margin: 0 auto; 
        padding: 20px;
    }


.breadcrumb-nav {
        text-align: right; 
        margin-bottom: 10px;
    }
.breadcrumb-nav a {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        color: #fff;
        text-decoration: underline;
        text-transform: lowercase;
    }
.breadcrumb-nav a:hover {
        color: #e90059;
    }

  
.genre-title {
        font-family: 'League Gothic', sans-serif;
        font-size: 2.5rem;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-align: center;
        margin-bottom: 30px;
    }

.poster-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 20px; 
    }

    
 .poster-grid {
            grid-template-columns: repeat(4, 1fr); 
            gap: 25px; 
        }

        .page-content {
            max-width: 1200px; 
        }
    
    
    .poster-card img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px; 
    }


}


 /*
=====================================
  ESTILOS DE LA PELI AL AZAR PARA COMPU Y CELU
=====================================
*/
 body {
            background-color: #000; 
            color: #fff;
        }
        .result-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }
        .result-container h1 {
            font-family: 'League Gothic', sans-serif;
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #e90059; 
            margin-bottom: 30px;
        }
        #movie-poster {
            width: 100%;
            max-width: 400px;
            height: auto;
            border: 4px solid #fff;
            box-shadow: 0 0 25px rgba(233, 0, 89, 0.5); 
            margin-bottom: 20px;
        }
        #movie-title {
            font-family: 'League Gothic', sans-serif;
            font-size: 2.5rem; 
            letter-spacing: 2.5px;
            margin-bottom: 10px; 
        }
        #movie-director {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #e90059; 
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }
        #movie-genre {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #ccc; 
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 40px;
        }
        #trailer-container {
            position: relative;
            padding-bottom: 56.25%; 
            height: 0;
            overflow: hidden;
            max-width: 100%;
            margin-bottom: 40px;
            border: 2px solid #fff; 
        }
        #trailer-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cta-button {
            display: inline-block;
            background-color:  #00e9a0; 
            color: #000000;
            font-family: 'League Gothic', sans-serif;
            font-size: 1.5rem;
            text-decoration: none;
            padding: 12px 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background-color 0.3s ease;
        }
        .cta-button:hover {
            background-color: #fff;
            color: #000;
        }

        
 /*
=====================================
  ESTILOS DE SUBI RTU PELICULA PARA CELU Y COMPU
=====================================
*/
 .upload-container {
            max-width: 700px;
            margin: 40px auto;
            padding: 30px 40px;
            background-color: #fff; 
            box-shadow: 0 5px 20px rgba(233, 0, 89, 0.2);
            color: #000;
        }

        /* Título de la página */
        .upload-container h1 {
            font-family: 'League Gothic', sans-serif;
            font-size: 2.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #000;
            text-align: center;
            margin-bottom: 30px;
        }

        .poster-upload-area {
            display: flex; 
            gap: 20px;
            margin-bottom: 25px;
        }
        
     
        .drop-zone {
            flex: 1; 
            height: 250px;
            border: 3px dashed #ccc;
            
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }
        .drop-zone:hover {
            border-color: #e90059;
            background-color: #fafafa;
        }
        .drop-zone .upload-icon {
            font-size: 3rem;
            color: #e90059;
            margin-bottom: 10px;
        }
        .drop-zone p {
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: #555;
            margin: 0;
        }
     
        #file-upload-input {
            display: none;
        }

     
        .poster-preview {
            flex: 1;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0; 
            
            overflow: hidden; 
        }
        .poster-preview img {
            height: 100%;
            display: none; 
        }
        .poster-preview .preview-placeholder {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #999;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            font-family: 'League Gothic', sans-serif;
            font-size: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            display: block;
            margin-bottom: 8px;
            color: #000;
        }
        .form-input,
        .form-textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #ccc;
           
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            box-sizing: border-box; /
        }
        .form-textarea {
            height: 120px;
            resize: vertical; 
        }
        
     
        .submit-button {
            display: block;
            width: 100%;
            background-color:  #00e9a0; 
            color: #fff;
            font-family: 'League Gothic', sans-serif;
            font-size: 1.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 15px 0;
            border: none;
           
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .submit-button:hover {
            background-color: #c0004a; 
            transform: scale(1.01);
        }

      
        #success-message {
            display: none;
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            color: #1a7e21; /* Verde */
            font-weight: bold;
            padding: 15px;
            background-color: #e8f5e9;
            border: 2px solid #1a7e21;
          
            margin-top: 20px;
        }
        

         /*


 /*
=====================================
  ESTILOS DEL FOOTER 
=====================================
*/

/* --- Estilos de celu de footer --- */

.site-footer {
  background-color: #000;
  color: #ccc; 
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  border-top: 1px solid #333; 
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}


.footer-col-main {
  text-align: center; 
}

.footer-logo {
  max-width: 120px; 
  margin-bottom: 25px;

  filter: brightness(0) invert(1);
}

.footer-descripcion {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 500px; 
  margin: 0 auto 30px auto;
}

.footer-titulo-links {
  font-family: 'League Gothic', sans-serif;
  font-size: 2rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px; 
  letter-spacing: 1px;  
  text-align: left;
}

.footer-nav ul {

  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 12px 10px;
}


.footer-nav li:nth-child(1) { 
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}
.footer-nav li:nth-child(2) { 
  grid-column: 1;
  grid-row: 2;
  text-align: left;
}
.footer-nav li:nth-child(3) { 
  grid-column: 1;
  grid-row: 3;
  text-align: left;
}
.footer-nav li:nth-child(4) { 
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}
.footer-nav li:nth-child(5) { 
  grid-column: 2;
  grid-row: 2;
  text-align: left;
}

.footer-nav a {
  font-family: 'League Gothic', sans-serif;
  color: #e90059;
  text-decoration: none;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: #fff;
}


.footer-col-legal {
  text-align: center;
  padding-top: 30px;
  margin-top: 30px;
}

.footer-hr {
  border: 0;
  height: 1px;

  margin-bottom: 30px;
}

.footer-copyright {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 10px;
}

.footer-legal-links a {
  color: #e90059;
  text-decoration: none;
  font-size: 0.9rem;
  margin: 0 5px;
}
.footer-legal-links a:hover {
  text-decoration: underline;
}
.footer-legal-links span {
  color: #aaa;
}


/*
--- 💻 Estilos para Computadora FOOTER(1024px o más) ---
*/

@media (min-width: 1024px) {


.footer-bottom {

  text-align: center; 
  
  max-width: 1200px; 
  margin: 30px auto 0 auto; 
  padding: 0 20px; 
}

.footer-bottom .footer-hr {
  border: 0;
  height: 1px;
  background-color: #444; 
  margin-bottom: 30px; 
}

.footer-bottom p {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 10px;
}

.footer-bottom .footer-legal-links a {
  color: #e90059; /* Tu color rosa */
  text-decoration: none;
  font-size: 0.9rem;
  margin: 0 5px;
}

.footer-bottom .footer-legal-links a:hover {
  text-decoration: underline;
}

.footer-bottom .footer-legal-links span {
  color: #aaa; /* El palito | */

  }}

  .page-container {
            max-width: 900px;
            margin: 40px auto;
            padding: 20px;
            color: #333; 
        }

   
        .mission-intro {
            background-color: #fff; 
            padding: 40px;
            margin-bottom: 40px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .mission-intro h1 {
            font-family: 'League Gothic', sans-serif;
            font-size: 2.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #000;
            margin-bottom: 20px;
        }
        .mission-intro p {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            line-height: 1.7;
            color: #333;
        }

      
        .award-section {
            background-color: #e90059; 
            color: #000; 
            padding: 40px;
            display: flex; 
            align-items: center;
            gap: 30px; 
        }
        
      
        .award-poster {
            flex-basis: 300px; 
            flex-shrink: 0;
        }
        .award-poster img {
            width: 100%;
            height: auto;
            display: block;
            border: 4px solid #fff; 
            border-radius: 5px;
        }
        
      
        .award-info {
            flex: 1; 
        }
        .award-info .trophy {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 10px;
        }
        .award-info h2 {
            font-family: 'League Gothic', sans-serif;
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #fff; 
            margin-bottom: 15px;
        }
        .award-info h3 {
            font-family: 'League Gothic', sans-serif;
            font-size: 1.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #000;
            margin-bottom: 15px;
        }
        .award-info p {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            line-height: 1.6;
            color: #000;
            font-weight: 500;
        }

@keyframes pulse {
  0% {
    transform: scale(1); /* Tamaño normal */
  }
  50% {
    transform: scale(1.03); /* Se agranda un 3% */
  }
  100% {
    transform: scale(1); /* Vuelve al tamaño normal */
  }
}
/* Agrega esto al final de tu archivo CSS */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1080deg); /* 3 vueltas completas */
  }
}

/* Una clase que activaremos con JavaScript */
.spinning {
  animation: spin 1.5s ease-out forwards; /* 1.5s, al final se queda */
}