:root {
  --black: #080808;
  --white: #f7f5f0;
  --muted: rgba(247,245,240,.82);
  /* If Agency FB / Corbel webfont files are supplied, declare them with @font-face here. */
  --display: "Agency FB", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --body: Corbel, "Trebuchet MS", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--body); }
.panel { position: relative; min-height: 100svh; overflow: hidden; }
.hero {
  display: grid; place-items: center; isolation: isolate;
  background: #080808 url("assets/portada.jpg") center 56% / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.64) 100%); }
.hero-content { width: min(92%, 900px); padding: 4rem 1rem 5rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tagline { margin: 0 0 clamp(3rem, 10vh, 7rem); font-size: clamp(.95rem, 1.4vw, 1.2rem); letter-spacing: .02em; }
.logo { display: block; width: clamp(220px, 37vw, 430px); max-height: 140px; object-fit: contain; margin: 0 auto clamp(2.2rem, 5vh, 3.8rem); }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: .98; letter-spacing: .015em; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(1.7rem, 3.7vw, 2.9rem); text-wrap: balance; }
.dates { margin: 1rem 0 0; font-size: clamp(.95rem, 1.6vw, 1.25rem); line-height: 1.35; }
.scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: white; text-decoration: none; font-size: 2rem; opacity: .8; }
.image-panel { display: flex; align-items: center; padding: clamp(2rem, 7vw, 7rem); background-color: #080808; background-repeat: no-repeat; background-position: center; background-size: cover; isolation: isolate; }
.image-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.eye { background-image: url("assets/ojo.jpeg"); background-position: center center; }
.eye::before { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.64) 30%, rgba(0,0,0,.2) 63%, rgba(0,0,0,.05) 100%); }
.copy { width: min(100%, 600px); text-shadow: 0 1px 12px rgba(0,0,0,.18); }
.copy-left { margin-right: auto; }
.copy-right { margin-left: auto; }
.eyebrow { margin: 0 0 1.2rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.copy h2, .end-card h2 { font-size: clamp(2.25rem, 4.8vw, 4.9rem); margin: 0 0 1.5rem; text-wrap: balance; }
.copy p:not(.eyebrow) { max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.48; margin: 0; }
.film { background-image: url("assets/tira-pelicula.jpg"); background-position: 32% center; }
.film::before { background: linear-gradient(90deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.92) 100%); }
.copy-right { width: min(47%, 590px); }
.end-card { min-height: 55vh; padding: clamp(3rem, 9vw, 8rem) max(7vw, 1.5rem); display: flex; flex-direction: column; justify-content: center; background: var(--black); }
.end-card h2 { max-width: 850px; }
.end-card p:not(.eyebrow) { margin: .35rem 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.end-card .free { margin-top: 1.5rem !important; }
@media (max-width: 700px) {
  .panel { min-height: 100svh; }
  .hero { background-position: 52% center; }
  .hero-content { width: 100%; padding: 3rem 1.35rem 5rem; }
  .tagline { max-width: 18rem; margin-bottom: 20vh; }
  .logo { width: min(72vw, 320px); max-height: 100px; margin-bottom: 2rem; }
  .hero h1 { font-size: clamp(1.65rem, 7.5vw, 2.4rem); }
  .dates { max-width: 22rem; font-size: 1rem; }
  .image-panel { align-items: flex-end; padding: 2rem 1.35rem 3.5rem; background-position: center; }
  .eye { background-position: 47% center; }
  .eye::before { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 34%, rgba(0,0,0,.12) 76%, rgba(0,0,0,.08) 100%); }
  .copy, .copy-right { width: 100%; max-width: 35rem; }
  .copy h2, .end-card h2 { font-size: clamp(2.3rem, 10vw, 3.6rem); margin-bottom: .9rem; }
  .copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.45; }
  .film { background-position: 35% center; }
  .film::before { background: linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.12) 100%); }
  .end-card { min-height: 48svh; padding: 3.5rem 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }