@font-face {
  font-family:"aladdin";
  src: url("fuentes/aladdin.ttf");
}

@font-face {
  font-family:"Montserrat";
  src: url("fuentes/Montserrat-VariableFont_wght.ttf");
}




/* Contenedor principal*/
.container {
  max-width: 1200px;  /*La web no ocupará más de 1200px de ancho*/
  margin: 0 auto;    /* Centra horizontalmente el contenedor*/
  padding: 0 2em;     /*Rellena los lados para evitar que el contenido quede pegado a los bordes*/
  margin-top: 3em;
}

.encabezado1{
  font-family: "aladdin";
  font-size: 23px;
  background-image: url("imagenes/degradado.jpeg");
  border: 1px solid black;
  background-size: cover;
}



/* Reset básico para todos los elementos */
* {
  margin: 0; /* Elimina márgenes predeterminados */
  padding: 0; /* Elimina rellenos predeterminados */
  box-sizing: border-box; /* Incluye bordes y rellenos en el ancho total */
}

/* Estilo general del cuerpo */
body {
  font-family:"Montserrat"; /* Fuente predeterminada */
  line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
  background-image: url("imagenes/desierto.jpg");
  background-size: cover;
}

/* Encabezado */
header {
  background-color: #cce5ff; /* Color de fondo azul claro */
  border: 1px solid #99ccea; /* Borde azul */
  padding: 1em; /* Espacio interno */
  text-align: center; /* Centra el texto horizontalmente */
}


/* Barra de navegación */
nav {
  background-image: url("imagenes/degradado.jpeg");  /* Fondo verde claro */
  background-size: cover;
  border: 1px solid black; /* Borde verde */
  padding: 1em; /* Espacio interno */
  font-family:"Montserrat";
}

/* Lista principal de navegación */
nav ul {
  list-style: none; /* Elimina los puntos o números de la lista */
  display: flex; /* Coloca los elementos en fila */
  gap: 1em; /* Espacio uniforme entre los elementos */
}

/* Elementos individuales de la lista */
nav li {
  position: relative; /* Posiciona submenús respecto al elemento padre */
}

/* Submenú oculto inicialmente */
nav li ul {
  display: none; /* Oculta los submenús por defecto */
  position: absolute; /* Posiciona el submenú relativo al padre */
  top: 100%; /* Coloca el submenú justo debajo del padre */
  left: 0; /* Alinea el submenú al borde izquierdo del padre */
  background-color: #e9f7ef; /* Fondo verde claro */
  border: 1px solid #c3e6cb; /* Borde verde */
  padding: 0.5em 1em; /* Espacio interno */
}

/* Mostrar submenú al pasar el ratón */
nav li:hover ul {
  display: block; /* Hace visible el submenú */
}

/* Estilo para los enlaces del menú */
nav a {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: #155724; /* Color de texto verde oscuro */
}

nav ul li ul li{
  margin:5px 0;
  width: 150px;
  background-image: url("imagenes/degradado.jpeg");

}

/* Contenedor principal para la sección y la barra lateral */
.contenido-principal {
  display: flex; /* Coloca los elementos hijos en una fila */
  margin: 1em; /* Espacio externo alrededor del contenedor */
  gap: 1em; /* Espacio uniforme entre los elementos */
}

/* Bloque principal de contenido */
section {
  flex: 3; /* Ocupa 3 partes del espacio disponible */
  background-color: #fff3cd; /* Fondo blanco */
  border: 1px solid black; /* Borde gris claro */
  padding: 1em; /* Espacio interno */
  padding-left: 15em;
}

/* Barra lateral */
aside {
  flex: 1; /* Ocupa 1 parte del espacio disponible */
  background-color: #fff3cd; /* Fondo amarillo claro */
  border: 1px solid black; /* Borde amarillo */
  padding: 1em; /* Espacio interno */
  font-size: 96.5%;
  font-family:"Montserrat";
  text-align: center;
  padding-top: 1em;
}
h3 {
  font-style: italic;
}


/* Pie de página */
footer {
  background-image: url("imagenes/degradado.jpeg"); /* Fondo rojo claro */
  background-size: cover;
  border: 1px solid black; /* Borde rojo */
  text-align: center; /* Centra el texto */
  padding: 1em; /* Espacio interno */
  margin-top: 1em; /* Espacio externo en la parte superior */
}
.trailer{
  flex: 3; /* Ocupa 3 partes del espacio disponible */
  background-color: #fff3cd; /* Fondo blanco */
  border: 1px solid black; /* Borde gris claro */
  padding: 1em; /* Espacio interno */
  padding-left: 10em;
}

.sinopsis{
  flex: 3; /* Ocupa 3 partes del espacio disponible */
  background-color: #fff3cd; /* Fondo blanco */
  border: 1px solid black; /* Borde gris claro */
  padding: 1em; /* Espacio interno */
  padding-left: 2em;
  text-align: justify;
}
.principales{
  display: flex;
  flex-direction: row;
  padding-left: 2em;
  font-family:"Montserrat";
}

.idiomas{
padding-top: 5em;
font-family:"Montserrat";
}

.secundarios{
  display: flex;
  flex-direction: row;
  padding-left: 2em;
  font-family:"Montserrat";
}

.canciones{
  padding-left: 5em;
  font-family:"Montserrat";
}