* { margin:0; padding: 0;}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

header {width: 100%}

.background {background-image: url("img/script.jpeg")}

.sc {text-align: center; height: 213; background: #e093a9; padding: 20px}

nav {background-color: #e093a9; height: 90vh; padding: 1px; display: none}
.responsive {display: block}
nav a {font-family: "Montserrat"; color: black; text-decoration: none; border-bottom: 1px solid #000; display: block; padding: 8px; margin: 10px; font-size: 20px}
.logo {width: 200px; margin: 2px}
.icono {text-decoration: none; font-size: 20px; position: absolute; top: 20px; left: 20px; color: black; font-weight: 100}

h1 {font-family:  "Montserrat"; font-size: 20px; text-align: center; margin: 20px; text-transform: uppercase; font-weight: 500}

h2 {font-family: "Montserrat"; color: black; text-decoration: none; font-size: 20px; text-align: center; font-weight: 300; margin: 10px}

h3 {font-family: "Montserrat"; color: black; text-decoration: none; border-bottom: 1px solid #000; display: block; padding: 8px; margin: 10px; font-size: 20px; text-align: center; text-transform: uppercase; font-weight: 500}

h4 {font-family: "Montserrat"; background-color: white; font-weight: 500; text-transform: uppercase; font-size: 10px; padding: 8px; color: black; margin: 6px}

h5 {font-family: "Montserrat"; color: black; text-decoration: none; font-size: 15px; text-align: center; font-weight: 300; border-top: 1px solid #000; border-bottom: 1px solid #000; margin-top: 1%; padding: 8px}

h6 {font-family: "Montserrat"; color: black; text-decoration: none; font-size: 15px; text-align: center; font-weight: 300; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 8px}

p {font-family: "Montserrat"; color: black; font-size: 12px; font-weight: 300; margin: 2px; word-wrap: break-word}

.anuncionat {width: 300px; height: 600px; margin: auto; margin-bottom: 2%; display: block; margin-top: 10%}
.contenedorap {width: 100%}
.fotoap {width: 90%; padding: 1%; margin-top: 2%}
.textoap {margin: 2%}

.cajacontenedora {width: 96%; margin: 2%; display: flex; flex-flow: wrap; justify-content: center}
.pelicula {width: 42%; background-size: cover; background-position: center; margin: 4%; display: flex; align-items: flex-end; flex-flow: wrap; position: relative}
.pelicula img {width: 100%}
.pelicula a {text-decoration: none; width: 100%; padding: 1px; box-sizing: border-box; position: absolute}
.flecha {color: black; font-size: 12px; text-decoration: none; float: right} 

.cajafooter {background-color: #e093a9; padding: 4%; display: flex; flex-flow: wrap}
.logofooter {width: 40%}
.imglogofooter {width: 100%}
.textofooter {width: 100%}

.fotopris1 {width: 96%; margin: 2%}
.textoprinpris {margin-right: 2%; margin-left: 2%; margin-bottom: 2%}
.cajatrailer {width: 100%; display: flex; flex-flow: wrap; justify-content: center}
.textotrailerpris {width: 96%; margin: 2%}
.trailerpris {width: 90%; margin-left: 5%; margin-top: 3%; margin-bottom: 5%}

.cajacontenedorabio {display: flex; flex-flow: wrap}
.cajabio {width: 100%}
.fotobio {width: 96%; margin: 2%}
.textobio {width: 96%; margin-top: 2px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px}

.contenedoranuncio {background-color: #e093a9; display: flex; flex-flow: wrap; align-items: center; width: 300px; height: 600px}
.logoanuncio {width: 90%; margin-left: 5%; margin-top: 5%}
.botonanuncio {display: block; padding: 8px; background-color: white; text-decoration: none; font-family: "Montserrat"; color: black; width: 20%; margin-left: 37%; margin-top: 5%; margin-bottom: 5%; text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 500}
.imganuncio {width: 80%; margin-left: 10%; margin-top: 5%; margin-bottom: 5%}
h8 {font-family: "Montserrat"; color: black; text-decoration: none; display: block; font-size: 20px; text-align: center; text-transform: uppercase; font-weight: 500; margin-right: 7%; margin-left: 7%}

.s1 {width: 96%; margin: 2%; display: flex; flex-flow: wrap; justify-content: center}
.s1texto {margin-left: 5%; margin-top: 5%}
.peliculas1 {width: 90%; background-size: cover; background-position: center; margin: 5%; display: flex; align-items: flex-end; flex-flow: wrap; position: relative}
.peliculas1 img {width: 100%}
.peliculas1 a {text-decoration: none; width: 100%; padding: 1px; box-sizing: border-box; position: absolute}
.logoanuncio {width: 90%; margin-left: 5%; margin-top: 5%}
.botons1 {padding: 10px; text-decoration: none; font-family: "Montserrat"; color: black; width: 20%; text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 500; border: 1px solid #e093a9}

.s2texto {width: 90%; margin: 5%}
.s2 {display: flex; flex-flow: wrap}
    .slider-containers2 {
      width: 80%;
      max-width: 600px;
      margin: auto;
      overflow: hidden;
      position: relative}

    .slidess2 {
      display: flex;
      transition: transform 0.5s ease-in-out}

    .slides2 {
      min-width: 100%;
      box-sizing: border-box}

    .slides2 img {
      width: 100%;
      border-radius: 10px}

    .prev, .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      font-size: 20px;
      padding: 10px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 1}

    .prev {
      left: 10px}

    .next {
      right: 10px}

    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8)}

.botons3 {padding: 10px; text-decoration: none; font-family: "Montserrat"; color: black; width: 20%; text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 500; border: 1px solid #e093a9; margin: 5%}
.imagens3 {width: 90%; margin: 5%}
.textos3 {margin: 5%; margin-top: 0}
.sectionrollover {justify-content: center; width: 100%; display: flex; flex-flow: wrap}
.rollover {width: 100%}



.fondo {background-image: url("img/scriptcelus.png"); background-size: cover; background-attachment: fixed; background-position: top center}

/* Estilos para la galería de miniaturas */
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 20px;
    }

    .gallery img {
      width: 150px;
      height: 100px;
      object-fit: cover;
      cursor: pointer;
      border-radius: 5px;
      transition: transform 0.3s ease;
    }

    .gallery img:hover {
      transform: scale(1.05);
    }

    /* Estilos para el fondo de la vista ampliada */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 10;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 5px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    }

    /* Estilo del botón para cerrar la vista ampliada */
    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 30px;
      color: white;
      cursor: pointer;
      font-weight: bold;
    }

/* Estilo del contenedor del formulario */
    .form-container {
      width: 90%;
      margin: 5%;
      padding: 5px;
      text-align: center;
      font-family: "Montserrat";
	justify-content: center;	
    }

    /* Estilo de los campos del formulario */
    .form-container input[type="text"],
    .form-container input[type="email"] {
      width: 90%;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
      border: 1px solid #e093a9;
    }

    .form-container input[type="checkbox"] {
      margin-right: 3px;
    }

    /* Estilo del botón de envío */
    .form-container button {
      width: 100%;
      padding: 10px;
	 margin: 2%;
      background-color: #e093a9;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 13px;
	text-transform: uppercase; 
		font-family: "Montserrat"
    }

    .form-container button:hover {
      background-color: #45a049;
    }

    /* Mensaje de agradecimiento */
    .thank-you-message {
      display: none;
      color: #e093a9;
      font-size: 18px;
      margin-top: 20px;
    }

.rollover-image {
      width: 80%;
	margin: 10%;
      height: auto;
      transition: transform 0.3s ease;
    }

    /* Efecto visual para resaltar la imagen al hacer roll-over */
    .rollover-image:hover {
      transform: scale(1.05);
    }

.m31img {width: 100%}
.m31text {justify-content: center; display: flex; flex-flow: wrap}
.m31text p {text-align: center}
.m32text {margin: 2%}
.imgseccion {width: 90%; margin: 5%}
h9 {font-family: 'Montserrat'; margin-left: 5%}
.seccion p {margin: 5%}
.contenido {display: flex; flex-flow: wrap}
.m33img {width: 100%; margin-top: 3%}

 /* Contenedor del slider */
    .slider-containerm34 {
      position: relative;
      width: 90%;
      margin: 5%;
      overflow: hidden;
      border-radius: 1px}

    /* Imágenes del slider */
    .slider-image {
      width: 100%;
      display: none;
    }

    /* Mostrar la primera imagen */
    .slider-image.active {
      display: block;
    }

    /* Botones para navegar */
    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      padding: 10px;
      cursor: pointer;
      color: white;
      background-color: rgba(0, 0, 0, 0.5);
      border: none;
      border-radius: 5px;
    }

    /* Botón anterior a la izquierda */
    .prev {
      left: 10px;
    }

    /* Botón siguiente a la derecha */
    .next {
      right: 10px;
    }

.rollover-image1 {
      width: 90%;
      height: auto;
      transition: transform 0.3s ease;
	margin: 5%
    }

    /* Efecto visual para resaltar la imagen al hacer roll-over */
    .rollover-image1:hover {
      transform: scale(1.05);
    }

.botonpresentacion {padding: 10px; text-decoration: none; font-family: "Montserrat"; color: black; width: 100%; text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 500; border: 1px solid #000; margin-top: 2%}

@media (min-width:727px) {
	.pelicula {width: 21.3%}
	nav {display: block; height: auto; text-align: center}
	nav li {display: inline-block}
	nav a {border-bottom: none}
	.icono {display: none}
	.fotoap {width: 50%; padding: 0%; margin: 5%}
	.textoap {width: 35%; align-self: center; margin-right: 10%}
	.contenedorap {justify-content: center; display: inline-flex}
	.logofooter {width: 25%; padding-right: 2%}
	.textofooter {width: 70%}
	.cajacontenedorabio {justify-content: center}
	.cajabio {width: 21%; padding: 10px}
	.textotrailerpris {width: 30%}
	h6 {border: 1px solid #000000}
	sliderbio1990 {margin: 0%; width: 100%}
	sliderbio2003 {margin: 0%; width: 100%}
	sliderbio2006 {margin: 0%; width: 100%}
	.fotobio {margin: 0%; width: 100%}
	.contenedoranuncio {width: 728px; height: 90px; align-content: space-around; justify-content: center}
	.logoanuncio {width: 20%; margin: 2.5%}
	.imganuncio {width: 8%; margin-left: 2%}
	.contenedoranuncio h8 {width: 20%; margin: 2.5%; font-size: 15px; font-weight: 300}
	.botonanuncio {width: 10%; font-size: 10px; padding: 5px; margin: 2.5%}
	.formtexto {width: 25%}
	.anuncionat {width: 728px; height: 90px}
	.s1texto {width: 70%; margin-left: 15%; margin-top: 2%}
	.slider-containers2 {width: 30%; margin: 2%}
	.s2texto {width: 40%; align-self: center}
	.s2 {justify-content: center}
	.peliculas1 {width: 21.3%; margin-bottom: 0; margin-top: 0}
	.botons1 {align-self: center; width: 10%}
	.overlay p {font-size: 15px; margin: 5%}
	.image-container {width: 40%; margin-left: 30%; margin-top: 2%}
	.fondo {background-image: url("img/scriptweb.png"); background-size: cover; background-attachment: fixed; background-position: top center}
	.form-container input[type="text"],
    .form-container input[type="email"] {
		width:100%;}
	.rollover {width: 50%}
	.contenido {width: 100%}
	.seccion {width: 20%}
}