/*Los comentarios de este css se han hecho a lo que considero que es más raro o dificil de entender, 
el resto de contenido o se ha aprendido en clase y son "básicos" o se puede deducir simplemente traduciendo  */

* { /*esto afecta a toda la pagina y hace que no hayan espacios en blanco entre el contenido craado y los bordes de la pantalla, 
  seguramente no haría falta si dominaramos más de edicion web y no cometieramos errores en las dimensiones de las cosas*/
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%; /* esto hace que el body siempre ocupe todo el espacio posible entre el header y el footer, 
  haciendo que el footer siempre este tocando la parte de abajo aunq no haya contenido*/
}

/*GENERAL*/
body {
  background: #f1eceb;
  color: #301919;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* (vh es viewport height) esto hace q la altura minima del contenido se adapte a la pantalla en la que se vea, si pongo % se calcula segun el elemento padre no de la pantalla*/
  font-family: 'Montserrat', sans-serif;
}
.filtros {
  width: 200px;
  height: fit-content;
  padding: 15px;
  top: 20px;
  background-color: #fff;
  border-radius: 10px;
  position: sticky; /*se mantiene aunq bajes la página*/

}
.filtros h3 {
  font-size: 16px;
  margin-bottom: 15px;
}
.filtros ul {
  list-style-type: none;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.filtroTextos {
  font-size: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
}

.boton {
  background-color: #db4731;
  color: #fff;
  text-decoration: none;
  padding: 5px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  display: inline-block; /*Esto hace que los elementos se muestren en linea pero dejando que le pongamos el ancho q queramos, en este caso no le hemos puesto ancho y se queda en auto*/
  text-align: center;
  margin: 1% auto;
}

.botonSecundario {
  background-color: #db4731;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  margin-top: auto;
  }

.iconos {
  background-color: transparent;
  padding: 6px 12px;
  font-size: 12px;
}

/*Estilos predeterminados de titulos y texto*/
h1 {
  font-size: 40px;
  font-weight: 800;
}
h2 {
  font-size: 28px;
  font-weight: 700;
}
h3 {
  font-size: 20px;
}
p {
  font-size: 14px;
  line-height: 1.6;
}


/* ----HEADER---- */
header {
  font-size: 12px;
  background: #301919;
}
.contenedor-header {
  display: grid;
  grid-template-columns: auto 1150px auto; /*el display deja los elementos como una rejilla y esto define como es la rejilla, en este caso se divide en tres y la del medio tiene el ancho de 1150px */
  align-items: center;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 40px;
}

/* LOGO */
.logo img {
  width: 140px;
  display: block; /* esto hace que que todo el elemento se comporte como un bloque y ocupe todo el espacio disponible del contenedor, que es el grid de arriba. Pero le he puesto que de ancho sea 140px asiq no ocupa más de eso */
}

/* NAVEGACIÓN */
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
nav ul {
display: flex;
gap: 30px;
list-style: none;
align-items: center;
}
nav ul li {
position: relative; /*esto ayuda que el submenu de peliculas aparezca al pasar por encima el cursor*/
}
nav ul li a:hover{
color:#db4731;
}
nav ul li a {
letter-spacing: 1.2px;
color: #fff;
text-decoration: none;
font-weight: 250;
}

/* SUBMENU */
nav ul li ul.submenu {
display: none;
position: absolute;/*el elemento no se mueve de la posicion dada*/
top: 100%;
left: 50%;
transform: translateX(-50%);/*esto va en conjunto del left, esto desplaza todo el contenido hacia la izquierda de su propio amplio */
background-color: #301919;
padding: 10px;
list-style: none;
flex-direction: row;
gap: 20px;
z-index: 999;/*el elemento se posiciona delante de todo*/
}
nav ul li:hover > ul.submenu {
display: flex;
}
nav ul li ul.submenu li a {
padding: 5px 8px;
color: #fff;
display: block; /* esto hace que que todo el elemento se comporte como un bloque y ocupe todo el espacio disponible del contenedor*/
text-align: center;
}
nav ul li ul.submenu li a:hover {
color: #db4731;
}

/* BUSCADOR-CARRITO */
.icono-busqueda, .icono-carrito {
  width: 26px;
  height: auto;
}


/* ----PAG_INDICE---- */
/* Slider */
.destacats { 
  overflow: hidden; /*sirve para que lo que no este siendo visto desaparezca, esto va guay para el slider porque como va rotando las imagenes el texto*/
  width: 100%; 
}
.slider { 
  display: flex; 
  animation: slide 12s infinite; /*esto crea una animacion estilo slide, que dura 12 segundos y que se repite infinitamente*/
  width: 100%; 
}
.slide1, .slide2 { 
  min-width: 100%; 
  flex-shrink: 0; /*esto dice que da igual el tamaño del contenedor, que no se encoja el contenido*/
  padding: 70px 60px; 
  display: flex; 
  flex-direction: column; /*esto hace que el contenido( el texto) se muestre de arriba abajo y no en row*/
  justify-content: flex-end; /*esto hace q el contenido (imagen + texto) se muestren al principio del contenedor hasta el final del mismo*/
  height: 350px; 
  color: #fff;
}
.slide1 {
  background-image: url("imatges/nova-peli-spiderma.jpg"); /*esto es la imagen, es más facil hacerlo desde aquí*/
  background-size: cover;/*tamaño de la imagen, que cubra todo */
  background-position: center; /*que este centrada*/
}
.slide2 {
  background-image: url("imatges/thunderbolts-2.jpg");
  background-size: cover;
  background-position: center-top; /*lo mismo que este centrada pero q este pegada arriba */
}
@keyframes slide {
  0%, 40%   { transform: translateX(0); }
  50%, 90%  { transform: translateX(-100%); }
  100%      { transform: translateX(0); }
} /*esto es la animacion de la transicion en si, y los porcentajes de la izq es como una barra para decir el porcentaje que dura cada animación. el lado derecho es lo que hace en cada momento, el 0 es posicion inicial, el -100% es para rotar al siguiente slide (slide2) y el siguiente 0 hace que vuelva a la posicion inicial (slide 1) */

/* IntroduciónSobreNosotros */
.indiceContenedorPresentacion {
  display: flex;
  flex-direction: row; /*la direccion de contenido sea en fila, solo se puede servir si se indica que el conenedor es flex como se pone antes de esto*/
  padding: 50px;
}
.indiceTexto {
  color:#000;
  padding: 0 0 10px 0;
  width: 50%;
}
.indiceTexto h2 {
  margin-bottom: 10px;
}

/* Tarjetas equipo */
.indiceEquipo {
  background-color: #301919;
  color: #fff;
}
.indiceGeneral {
  display: flex;
  flex-wrap: wrap; /*esto hace que el contenido se distribuya dentro del ancho del contenedor y si ya no caben en la fila se pongan debajo siguiendo el mismo patron indefinidamente*/
  justify-content: center;
  gap: 20px;
  padding: 30px 0 0 0;
}
.indiceTitulo {
  text-align: center;
  padding: 15px 0 15px 0; /*esto va en el sentido del reloj*/
}
.cartaInd {
  background-color: #f1eceb;
  width: auto;
  height: auto;
  max-width: 300px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 30px;
}
.imagenCareto {
  border-radius: 10%;
  height: 300px;
  width: 200px;
  padding: 10px;
  object-fit: cover; /*para que las imagenes se adapten a las especificaciones de altura 300 y anchura 200 porq cada foto es diferente, esto modifica para q se adapte*/
}
.indiceTextoNombre {
  text-align: center;
  color:#000;
  padding-bottom: 10px;
}

/* Spam al Foro */
.indiceSpam {
  text-align: center;
  padding: 50px;
  line-height: 2;
}


/* ----PAG_NOTICIAS---- */
.noticias-general {
  margin-top: 3%;
  text-align: center;
  margin-bottom: 3%;
}
.noticias-contenedor {
  display: grid;
  grid-template-columns: repeat(2, 650px); /*esto son las inidcaciones del grid que se ha especificado con el display, el 2 es el numero de columnas y los px es lo que miden de ancho, si se pone 1fr se ajusta automaticamente el contenedor  */
  gap: 20px;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
}
.noticia-individual {
  background-color: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 10px;
}
.noticia-individual img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.noticia-individual h2 {
  margin-top: 15px;
  margin-bottom: 25px;
}

/* ----Página de Personajes---- */
.personajesContenedor {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 40px 100px 0px 80px;
  box-sizing: border-box; /*esto hace que el padding este dentro del 100% del width, si no se one esto se añade el 100% más 180 del padding*/
}
.personajesMain {
  flex: 1; /*esto hace q .personajesMain se amplie y ocupe todo el espacio disponible del contenedor*/
}
.personajes-general {
  display: flex;
  flex-wrap: wrap;  /*esto hace que el contenido se distribuya dentro del ancho del contenedor y si ya no caben en la fila se pongan debajo siguiendo el mismo patron indefinidamente*/
  justify-content: center;
  gap: 10px;
  padding-top: 15px;
}
.personajes-titulo {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 15px;
}
.imagen-redondita {
  border-radius: 50%;
  height: 135px;
  width: 135px;
  object-fit: cover; /*hace que la imagen cubra todo el contenedor creado*/
}
.personajesTexto {
  padding-top: 15px;
}


/* ----Página de Peliculas---- */
.pelicula-seccion {
	padding: 40px;
	display: flex;
	justify-content: center; 
	}
.targeta-roja {
  display: flex;
  width: 1350px;
  height: 450px;
  gap: 30px;
  margin: 20px auto;
  padding: 40px;
  align-items: center;
  background-color: #db4731;
  border-radius: 20px;
  }
.info-contenedor { 
flex: 1; 
}
.info-contenedor h1 { 
 font-style: italic;
 line-height: 0.95; /*el espaciado que hay entre linea y linea*/
 margin: 10px 0;
 text-transform: uppercase; /*hace que lo que ete en minusculas se ponga en mayusculas, esto se puede quitar si en el html ya esta en mayusculas*/
 color: #f1eceb;
}
.info-contenedor p { 
 line-height: 1.6;
 text-align: justify; /*lo mismo que en un editor de texto, lo deja ocupando todo el ancho */
 color: #301919;
 margin: 10px 0; 
 }
.video-lado iframe { 
border-radius: 15px; 
}

/* Secció interactiva de targetas */
.seccion-interactiva { 
 background-color: #301919;
 padding: 60px;
 display: flex;
 flex-direction: row; /*que el contenido se muestre en fila*/
 justify-content: center;
 align-items: stretch; /*estira el contenido horizontalemnte todo lo que permita el contenedor*/
 gap: 30px;
 width: 100%;
 box-sizing: border-box; 
}
.targeta-personajes,
.targeta-gemas { 
 background-color: #db4731;
 border-radius: 15px;
 color: #f1eceb;
 text-align: center;
 padding: 30px; 
 }
.targeta-personajes {
	flex: 1; /*esto al poner a uno 1 y al otro 2 divide el espacio de un mismo contenedor para cada uno de los contenedores*/
	}
.targeta-gemas {
	flex: 2; 
	}
.targeta-personajes h2, .targeta-gemas h2 { 
 margin-bottom: 8px; 
 }
.targeta-personajes p, .targeta-gemas p {
 opacity: 0.9;
 margin-bottom: 20px; 
 }
.targeta-foto { 
 margin-top: 20px;
 width: 100%;
 height: 180px;
 border-radius: 10px;
 }
.targeta-foto img { 
 width: 100%;
 height: 100%;
 object-fit: cover; 
 }


/* Gemas */
.contenedor-gemas {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /*este apartado es igual q el explicado en el anterior grid, pero esta hecho por andra y ella a preferido dejarlo con 1fr(fraccion), esto hace mas facil que el contenido ocupe el espacio que se necesita sin necesidad de ajustar los px hasta dar con el que encaje en la página */
	gap: 15px;
	justify-items: center;
	width: 100%;
	margin-top: 25px; 
	}
.gema-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%; 
	}
.gema-circulo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 3px solid #f1eceb; /*esto es un conjunto de ordenes, 3px de grosor, solid para que aparezcca una linea tipica al rededor del contenedor y el color de la linea por ultimo */
	}
.gema-circulo img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	}

/* sección spam tienda */
.peliculasSpam {
  text-align: center;
  padding: 50px;
  line-height: 2;
}


/* ----Página ORden Cronológico/Estreno---- */
/*Parte de arriba*/
.seccion-titulo {
  background-color: #db4731;
  color: #fff;
  padding: 50px;
  text-align: center;
}
.seccion-titulo h1,
.seccion-titulo p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.seccion-titulo h1 {
  margin-bottom: 15px;
}
.seccion-titulo p {
  line-height: 1.6;
}

/*Contenido*/
/* Llistat de pel·lícules */
.ordenCE-general {
padding: 0;
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
background-color: #301919; 
}
.ordenCE-individual { 
 display: flex;
 align-items: center;
 gap: 40px;
 padding: 40px 30px; 
 }
.ordenCE-individual:nth-child(odd)  { 
background-color: #f1eceb;
border-bottom: 1px solid #30191922; 
}
.ordenCE-individual:nth-child(even) {
background-color: #301919;
border-bottom: 1px solid #f1eceb22; 
}
.ordenCE-individual:nth-child(even) .ordenCE-info h2,
.ordenCE-individual:nth-child(even) .ordenCE-info p {
color: #f1eceb; 
}
.ordenCE-individual a {
text-decoration: none; 
}
.ordenCE-info {
flex: 2;
display: flex;
flex-direction: column;
gap: 10px;
}
.numero {
font-size: 32px;
color:#db4731;
}
.ordenCE-info h2 {
font-size: 28px;
font-weight: bold;
color: #301919;
}
.ordenCE-info p  { 
font-size: 14px;
line-height: 1.7;
color: #301919;
text-align: justify;
}
.ordenCE-poster { 
flex: 1; 
display: flex; 
justify-content: flex-end; 
margin-right: -60px;
}
.ordenCE-poster img { 
width: 200px; 
height: 300px; 
object-fit: cover; 
border-radius: 4px; 
}
.ordenCE-poster figure { 
display: flex; 
flex-direction: column; 
align-items: center; 
text-align: center; 
width: 100%; 
font-weight: bold;
}
.ordenCE-individual:nth-child(odd) .tituloImg {  
color: #301919; 
margin-top: 10px; 
} 
.ordenCE-individual:nth-child(even) .tituloImg {  
color: #f1eceb; 
margin-top: 10px;
} 

.ordenCE-individual.invertit { 
flex-direction: row-reverse; 
}
.ordenCE-individual.invertit .ordenCE-poster { 
justify-content: flex-start; 
margin-left:-60px;
}
.ordenCE-individual.invertit .ordenCE-info { 
text-align: right; 
align-items: flex-end; 
}
.ordenCE-individual.invertit .ordenCE-info a { 
display: flex; 
justify-content: flex-end; 
}


/* ----PAG_TIENDA---- */
/* REJILLA  */
.tienda {
  max-width: 1450px;
  margin: 40px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 250px auto; /*en este grid el 250px corresponde al aside (categorias) y el auto corresponde a la seccion de los productos, esta en auto porq lo deja lo que ocupe el contenedor y se ve bien asiq se queda en auto*/
  gap: 40px;
}

/* SUB-REJILLA PARA PRODUCTOS */
.conf-productos {
  display: grid;
  grid-template-columns: repeat(4, 250px); /*el numero 4 son las columnas y el 250 es el ancho de cada una de las columnas*/
  gap: 30px;
}
/* AGRUPACION QUE CONFORMA EL PRODUCTO */
.producto {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column; /*esto ahce que el contenido (imagen+titulo+precio+boton de compra) del producto se muestre en columna (uno debajo del otro)*/
  align-items: center;
  text-align: center;
}
.producto img {
  width: 100%;
  max-width: 180px;
  height: auto;
  margin-bottom: 15px;
  max-height: 280px;
}
.producto h2 {
  margin-top: auto;
  margin-bottom: 2px;
  text-transform: uppercase; /*esto sirve tambien para hacer que lo que este en minusculas pase a estar en mayusculas*/
  font-size: 20px;
}
.producto .precio {
  color: #000;
  margin-bottom: 15px;
}


/* ----FORUM---- */
.forumGeneral {
  display: flex;
  margin: 20px 20px 20px 80px;
}
.forumContenido {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 0 90px 0 0;
}
.forumMain {
  flex-direction: column;
  width: 100%;
  margin-left: 20px;
}
.forumTitulo {
  margin-bottom: 15px;
  margin-top: 15px;
  padding-bottom: 10px;
}
.forumPregunta {
  margin-top: 15px;
}
.forumContenedorPreguntas {
  display: flex;
  align-items: center;
  background-color: #f0d4c9 ;
  border-radius: 20px;
  width: fit-content;
  padding: 10px;
  margin-bottom: 20px;
}
.forumRespuestas {
  margin-left: 40px;
}
.forumRespuesta {
  display: flex;
  align-items: center;
  background-color: #f8e3d6;
  border-radius: 20px;
  width: fit-content;
  padding: 10px;
  margin-bottom: 10px;
}
.forumImgUsuario {
 padding: 10px;
}

/* ----FORMULARIO---- */
.formulario-contenedor {
  width: 85%;
  margin: 40px auto;
}
.formulario {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.formulario-grup {
  margin: 10px 0;
}
.formulario-grup label {
  display: flex;
  width: 150px;
  margin-bottom: 5px;
}
.formulario-grup input,
.formulario-grup select,
.formulario-grup textarea { /*si se hace de esta forma no hay que repetir las ordenes para cada uno de las classes sino que con una basta*/
  width: 100%;
  padding: 5px;
  margin: 5px 0;
  }
.formulario-grup textarea {
  width: 1180px;
  height: 150px;
  resize: none; /*esto hace que la opcion del texto libre no puedas ampliarlo como quieras y este fijo en el formulario*/
}
.formulario-grup input[type="submit"] {
  background-color: #db4731;
  color: #fff;
  border: none; /*que no tenga bordes el boton*/
  cursor: pointer;/*esto hace que cuando pases por encima se cambie el curosr del rato a el que apunta o el que es afilado no se como se llama*/
}

/* ----FOOTER---- */
.footer {
  background-color: #301919;
  color: #f1eceb;
  padding: 60px 60px 30px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;  /*esta parte tampoco es mia pero funciona con las fracciones o partes, la primera parte (donde sale el logo y el minitexto) 
  ocupa 2 fracciones del total y el resto esta distribuido en 1 parte cada uno, la web suma todos las fraccions o partes y luego divide. 
  Lo que seria lo mismo q: Primera columna → 2/5 → 400px Segunda → 1/5 → 200px Tercera → 1/5 → 200px Cuarta → 1/5 → 200px */
  gap: 60px;
}
.footer-brand img {
  width: 120px;
  margin-bottom: 20px;
}
.footer-brand p {
  color: #f1eceb;
  opacity: 0.8;
  line-height: 1.6;
}
.footer-icons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap; /*usa el espacio horizontal disponible y una vez agotado empieza otra fila debajo de la primera*/
}
.footer-icons a {
  width: 100%;
  margin-top: 10px;
}
.footer-icons img {
  height: 22px;
  width: auto;
  filter: invert(1); /*esto lo pusimos porq los logos q teníamos eran en negro y los necesitabamos en blanco para hacer contraste con el fondo, el filter invert lo que hacce es invertir los colores, y como lo teniamos en negro ahora esta blanco, sin necesidad de tener que buscar iconos de color blanco*/
  cursor: pointer;/*cambia el cursor a uno afilado o apuntador */
}
.tituloFooter {
  font-size: 15px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f1eceb;
  opacity: 0.8;
}
.footer-col a {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  text-decoration: none; /*que el texto no tenga la rallita abajo indicando que es un link*/
  color: #f1eceb;
  font-size: 14px;
}
.footer-col a:hover {
  color: #db4731;
}
.footer-divider {
  height: 0.5px;
  background-color: #f1eceb;
  opacity: 0.3;
  margin: 70px 0 0px;
}
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f1eceb;
  opacity: 0.7;
}