*{
  box-sizing:border-box;
}

body{

  margin:0;

  font-family:'IBM Plex Serif', serif;

  color:#d8c98a;

 background:
  linear-gradient(
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.45)
  ),
  url("img/fondo.webp");

background-size:cover;

background-position:center;

background-attachment:fixed;

  overflow-x:hidden;
}

/* VIÑETA */

body::before{

  content:"";

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  pointer-events:none;

  background:
    radial-gradient(circle,
    transparent 45%,
    rgba(0,0,0,0.78) 100%);
}

/* LOGO */

.logo{

  width:100%;

  display:flex;

  justify-content:center;

  margin-top:40px;
}

.logo img{

  width:190px;

  display:block;

  max-width:90%;
}

/* INTRO */

.intro{

  max-width:760px;

  margin:30px auto 10px auto;

  padding:0 30px;

  text-align:center;

  line-height:1.9;

  font-size:15px;

  color:#f5e6aa;
}

/* INDEX */

.container{

  display:grid;

  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));

  gap:50px;

  max-width:1200px;

  margin:40px auto;

  padding:0 40px 40px 40px;
}

.card{

  text-decoration:none;

  color:#d8c98a;
}

.card img{

  width:100%;

  display:block;

  border:1px solid #333;

  transition:0.3s;
}

.card img:hover{

  transform:scale(1.02);

  border-color:#777;
}

.card p{

  margin-top:14px;

  font-size:14px;

  line-height:1.8;

  color:#ffffff;
}

/* CONTACTO */

.contact{

  text-align:center;

  padding:20px 20px 50px 20px;

  font-size:15px;

  color:#ffffff;
}

.contact a{

  color:#fff0b3;

  text-decoration:none;
}

.contact a:hover{

  color:#ffffff;
}

/* FILMS */

.film-page{

  min-height:100vh;

  padding:30px;
}

.film-container{

  display:flex;

  justify-content:center;

  align-items:flex-start;

  gap:60px;

  max-width:1300px;

  margin:0 auto;

  padding:20px 40px;
}

.film-poster{

  width:320px;

  max-width:100%;

  border:1px solid #333;

  display:block;
}

.film-text{

  width:100%;

  max-width:600px;

  font-size:14px;

  line-height:1.9;

  color:#d0c28a;

  overflow-wrap:break-word;

  word-wrap:break-word;
}

.museum-text{

  width:100%;

  max-width:600px;

  overflow-wrap:break-word;

  word-wrap:break-word;
}

.film-text h2{

  color:#f1de9b;

  font-weight:300;

  letter-spacing:2px;
}

/* MUSEUM PHOTOS */

.museum-photo{

  text-align:center;

  margin:35px 0;
}

.museum-photo img{

  width:100%;

  max-width:520px;

  height:auto;

  border:1px solid #333;

  display:block;

  margin:0 auto;
}

.caption{

  font-size:12px;

  color:#b8b8b8;

  margin-top:8px;
}

/* IFRAME */

iframe{

  width:100%;

  max-width:1000px;

  display:block;

  margin:0 auto;
}

/* CONTROLS */

.controls{

  text-align:center;

  margin-top:30px;
}

.controls a{

  display:inline-block;

  margin:0 10px;

  color:#c7d7a1;

  text-decoration:none;

  font-size:12px;
}

.controls a:hover{

  color:#fff;
}

/* FOOTER */

.film-footer{

  width:100%;

  text-align:center;

  margin-top:50px;
}

.watch{

  display:inline-block;

  padding:10px 16px;

  border:1px solid #b7c98d;

  color:#dce8bb;

  text-decoration:none;

  font-size:12px;
}

.watch:hover{

  color:#fff;

  border-color:#fff;
}

.back{

  display:inline-block;

  margin-top:14px;

  color:#c7d7a1;

  text-decoration:none;

  font-size:12px;
}

.back:hover{

  color:#fff;
}

/* RESPONSIVE */

@media (max-width:900px){

  .film-container{

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:20px;
  }

  .film-text,
  .museum-text{

    width:100%;

    max-width:600px;
  }

  iframe{

    height:260px;
  }
}

@media (max-width:600px){

  body{

    background-attachment:scroll;
  }

  .logo img{

    width:150px;
  }

  .intro{

    font-size:14px;

    line-height:1.8;

    padding:0 20px;
  }

  .film-page{

    padding:20px 10px;
  }

  .film-poster{

    width:240px;
  }

  .film-text,
  .museum-text{

    width:100%;

    max-width:100%;

    font-size:14px;

    line-height:1.8;

    padding:0 12px;
  }

  .contact{

    font-size:14px;
  }

  iframe{

    height:220px;
  }
}