/* corto.css */

:root{

  --red:#d91c1c;
  --black:#070707;
  --white:#f5f1ea;
  --gray:#9d9d9d;

}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:var(--black);
  color:var(--white);

  font-family:'Inter', sans-serif;

  overflow-x:hidden;

}

/* GRAIN */

.grain{

  position:fixed;
  inset:0;

  pointer-events:none;

  opacity:.06;

  z-index:9999;

  background-image:
  url("https://grainy-gradients.vercel.app/noise.svg");

}

/* NAVBAR */

.navbar{

  position:fixed;

  top:0;
  width:100%;

  z-index:1000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:25px 7%;

  backdrop-filter:blur(12px);

  background:
  linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.05)
  );

}

.logo{

  color:white;

  text-decoration:none;

  font-family:'Anton', sans-serif;

  font-size:2rem;

  letter-spacing:2px;

}

nav{

  display:flex;

  gap:35px;

}

nav a{

  color:white;

  text-decoration:none;

  font-size:.95rem;

  transition:.3s;

  position:relative;

}

nav a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:var(--red);

  transition:.3s;

}

nav a:hover::after{

  width:100%;

}

/* HERO */

.film-hero{

  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  padding:160px 7% 100px;

}

/* BACKGROUND */

.film-bg{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.92)
  ),
  url("eclipse.jpg");

  background-size:cover;
  background-position:center;

  transform:scale(1.1);

  filter:blur(12px);

  animation:bgMove 14s ease-in-out infinite alternate;

}

@keyframes bgMove{

  from{
    transform:scale(1.1) translateY(0px);
  }

  to{
    transform:scale(1.18) translateY(-20px);
  }

}

/* OVERLAY */

.film-overlay{

  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at center,
    rgba(217,28,28,.12),
    rgba(0,0,0,.75)
  );

}

/* CONTENT */

.film-content{

  position:relative;

  z-index:5;

  width:100%;
  max-width:1300px;

  display:grid;

  grid-template-columns:
  420px 1fr;

  gap:80px;

  align-items:center;

}

/* POSTER */

.poster{

  position:relative;

}

.poster img{

  width:100%;

  border-radius:24px;

  object-fit:cover;

  box-shadow:
  0 25px 60px rgba(0,0,0,.45);

  transition:.5s;

}

.poster img:hover{

  transform:scale(1.02);

}

/* TEXT */

.mini-title{

  color:var(--red);

  letter-spacing:4px;

  font-size:.9rem;

  margin-bottom:25px;

}

.film-info h1{

  font-family:'Anton', sans-serif;

  /* Modificado para resolverse de manera fluida y romper palabras */
  font-size:clamp(3.2rem, 8vw, 9rem);
  line-height:.8;
  letter-spacing:3px;
  text-shadow: 0 0 25px rgba(217,28,28,.2);

  /* Propiedades añadidas para corte de palabras largas */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;

}

.film-meta{

  display:flex;

  gap:18px;

  flex-wrap:wrap;

  margin-top:35px;
  margin-bottom:35px;

}

.film-meta span{

  padding:12px 18px;

  border-radius:50px;

  background:
  rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.08);

  font-size:.9rem;

  letter-spacing:1px;

}

.film-description{

  max-width:700px;

  color:#d0d0d0;

  line-height:1.9;

  font-size:1.05rem;

}

/* BUTTON */

.btn-primary{

  display:inline-block;

  margin-top:40px;

  padding:18px 30px;

  text-decoration:none;

  font-weight:800;

  letter-spacing:1px;

  transition:.3s;

  background:var(--white);

  color:black;

}

.btn-primary:hover{

  background:var(--red);

  color:white;

  transform:translateY(-3px);

}

/* SECTIONS */

section{

  padding:120px 7%;

}

.section-tag{

  color:var(--red);

  letter-spacing:3px;

  font-weight:700;

  margin-bottom:20px;

}

.synopsis h2,
.trailer h2,
.credits h2{

  font-size:clamp(2rem,5vw,5rem);

  line-height:1.1;

  margin-bottom:30px;

}

/* SYNOPSIS */

.synopsis p{

  max-width:950px;

  color:#d0d0d0;

  line-height:2;

  font-size:1.05rem;

}

/* TRAILER */

.trailer{

  background:#0a0a0a;

}

.video-container{

  margin-top:50px;

  position:relative;

  width:100%;

  padding-bottom:56.25%;

  border-radius:24px;

  overflow:hidden;

  box-shadow:
  0 25px 60px rgba(0,0,0,.45);

}

.video-container iframe{

  position:absolute;

  top:0;
  left:0;

  width:100%;

  height:100%;

}

/* CREDITS */

.credits{

  background:#080808;

}

.credits-grid{

  margin-top:60px;

  display:grid;

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

  gap:25px;

}

.credit-card{

  padding:40px;

  border:1px solid rgba(255,255,255,.08);

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.02),
    rgba(255,255,255,.01)
  );

  transition:.4s;

}

.credit-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(217,28,28,.45);

}

.credit-card span{

  color:var(--red);

  letter-spacing:2px;

  font-size:.85rem;

}

.credit-card h3{

  margin-top:18px;

  font-size:1.7rem;

}

/* FOOTER */

footer{

  padding:80px 7%;

  border-top:
  1px solid rgba(255,255,255,.08);

  text-align:center;

}

.footer-logo{

  font-family:'Anton', sans-serif;

  font-size:4rem;

  letter-spacing:4px;

}

footer p{

  margin-top:10px;

  color:#ccc;

}

/* SOCIALS */

.footer-socials{

  margin-top:35px;

  display:flex;

  justify-content:center;
  align-items:center;

  gap:30px;

  flex-wrap:wrap;

  width:100%;

}

.footer-social{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  color:#d6d6d6;

  text-decoration:none;

  transition:.3s;

  text-align:center;

}

.footer-social:hover{

  color:white;

}

.footer-social i{

  font-size:1.2rem;

}

/* PARTNER */

.partner{

  margin-top:50px;

}

.partner-text{

  margin-bottom:20px;

  color:#777;

  letter-spacing:3px;

  text-transform:uppercase;

}

.partner-logo{

  width:280px;

  max-width:90%;

  opacity:.9;

  transition:.4s;

}

.partner-logo:hover{

  opacity:1;

  transform:scale(1.03);

}

/* RESPONSIVE */

@media(max-width:1000px){

  .film-content{

    grid-template-columns:1fr;

    gap:60px;

  }

  .poster{

    max-width:420px;

    margin:auto;

  }

  .film-info{

    text-align:center;

  }

  .film-meta{

    justify-content:center;

  }

  .film-description{

    margin:auto;

  }

}

@media(max-width:768px){

  .navbar{

    flex-direction:column;

    gap:18px;

    padding:20px 5%;

  }

  nav{

    gap:18px;

    flex-wrap:wrap;

    justify-content:center;

  }

  .film-hero{

    padding-top:180px;

  }

  /* Asegura que el contenedor de información escale bien */
  .film-info {
    width: 100%;
    max-width: 100%;
  }

  .film-info h1{
    font-size: 3.5rem; /* Tamaño más cómodo para dispositivos móviles */
    letter-spacing: 2px;
  }

  .mini-title{

    font-size:.75rem;

    letter-spacing:2px;

  }

  .film-description{

    font-size:1rem;

    line-height:1.8;

  }

  .btn-primary{

    width:100%;

    text-align:center;

  }

  .credits-grid{

    grid-template-columns:1fr;

  }

  .footer-socials{

    flex-direction:column;

    align-items:center;

    gap:20px;

  }

}