/* Espanto Film Fest Vol. 8 — sala en línea de Planisferio
   Fuentes alojadas localmente: el sitio no hace peticiones a Google ni a otros CDN. */

@font-face { font-family: "Big Shoulders"; src: url("fuentes/big-shoulders-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("fuentes/big-shoulders-display-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fuentes/literata-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fuentes/literata-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fuentes/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --papel: #f0e5b8;        /* el papel del cartel */
  --papel-hondo: #e4d49c;
  --tinta: #3b2219;        /* el humo y las líneas del dibujo */
  --tinta-sala: #24140f;   /* la sala a oscuras */
  --sangre: #c9262c;       /* el rojo del logotipo */
  --brasa: #ff5a3c;        /* el ojo encendido, sólo para foco y estados */
  --humo: #9a8f7e;

  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --texto: "Literata", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 48px);
  --ancho: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sangre); }
:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; border-radius: 2px; }

.saltar {
  position: absolute; left: var(--gutter); top: -60px; z-index: 50;
  background: var(--tinta); color: var(--papel); padding: .5rem .9rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem;
}
.saltar:focus { top: 10px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--tinta);
}
.cabecera__fila {
  max-width: var(--ancho); margin: 0 auto; padding: .55rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.marca img { width: 54px; flex: none; }
.marca span { font-family: var(--display); font-weight: 900; font-size: 1.35rem; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.marca small { display: block; font-family: var(--texto); font-weight: 400; font-size: .78rem; letter-spacing: 0; color: color-mix(in srgb, var(--tinta) 75%, var(--papel)); margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 1.25rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav .planisferio {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--tinta); color: var(--papel);
  padding: .35rem .8rem .4rem; border-radius: 999px;
}
.nav .planisferio:hover { background: var(--sangre); color: var(--papel); }
.nav .planisferio svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .nav .nav__legal { display: none; }
  .marca small { display: none; }
  .marca span { font-size: 1.15rem; }
  .marca img { width: 44px; }
  .nav { font-size: 1rem; }
}

/* ---------- Portada ---------- */
.portada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: min(92vh, 940px);
  overflow: hidden;
}
.portada__texto {
  position: relative; z-index: 2;
  padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem) max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
}
.portada__logo { width: min(100%, 560px); margin-left: -2%; filter: drop-shadow(0 2px 0 rgba(59,34,25,.15)); }
.portada__fechas { width: min(100%, 560px); }
.portada__bajada { max-width: 34ch; font-size: 1.125rem; margin: 0; }
.portada__ilustracion { position: relative; margin: 0; }
.portada__ilustracion img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.boton {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1;
  color: var(--papel); background: var(--sangre); text-decoration: none;
  padding: .8rem 1.3rem .9rem; border-radius: 4px 14px 4px 12px; /* corte irregular, como recortado a mano */
  box-shadow: 4px 4px 0 var(--tinta);
  transition: transform .15s ease, box-shadow .15s ease;
}
.boton:hover { color: var(--papel); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.boton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.boton svg { width: 18px; height: 18px; }

/* La única animación de la página: el ojo del monstruo late una vez al cargar */
.portada__ojo {
  position: absolute; z-index: 1; pointer-events: none;
  width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,60,.75) 0, rgba(255,90,60,0) 70%);
  mix-blend-mode: screen; opacity: 0;
  animation: latido 2.4s ease-out .6s 1 forwards;
}
@keyframes latido { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; transform: scale(1.25); } 100% { opacity: .35; transform: scale(1); } }

@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__ilustracion { order: -1; height: min(95vw, 520px); }
  .portada__ilustracion img {
    object-position: 72% 28%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  .portada__texto { padding: 0 var(--gutter) 3rem; margin-top: -4.5rem; gap: 1.2rem; }
  .portada__ojo { display: none; }
}

/* ---------- Sala ---------- */
.sala {
  background: var(--tinta-sala);
  color: var(--papel);
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.sala::before { /* borde de tinta irregular entre el papel y la sala */
  content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px;
  background: var(--tinta-sala);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22c40-6 70 8 112-4s58-16 96-6 70 18 118 4 64-20 110-10 52 16 98 8 80-22 126-12 60 14 104 6 66-18 112-10 70 16 118 6 60-14 104-4 58 12 102 0V40z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22c40-6 70 8 112-4s58-16 96-6 70 18 118 4 64-20 110-10 52 16 98 8 80-22 126-12 60 14 104 6 66-18 112-10 70 16 118 6 60-14 104-4 58 12 102 0V40z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.sala__marco { max-width: var(--ancho); margin: 0 auto; }
.sala__encabezado {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 2.5rem; align-items: end;
  margin-bottom: 1.75rem;
}
.sala h2 {
  font-family: var(--display); font-weight: 900; line-height: .85; margin: 0;
  font-size: clamp(3.2rem, 9vw, 7rem); letter-spacing: -.01em; color: var(--papel);
}
.sala__nota { margin: 0; max-width: 58ch; color: color-mix(in srgb, var(--papel) 82%, var(--tinta-sala)); }
.sala__nota strong { color: var(--papel); font-weight: 600; }
@media (max-width: 760px) { .sala__encabezado { grid-template-columns: 1fr; } }

.pantalla {
  position: relative;
  background: #000;
  border: 2px solid color-mix(in srgb, var(--papel) 22%, transparent);
  border-radius: 6px;
  overflow: hidden;
}
/* El if-resizer de DYNtube fija la altura real del iframe; min-height evita que se colapse mientras carga. */
.pantalla iframe { display: block; width: 100%; min-height: clamp(480px, 78vh, 900px); border: 0; }
@media (max-width: 600px) { .pantalla iframe { min-height: 520px; } }

.sala__aviso {
  margin: 1.25rem 0 0; display: flex; gap: .75rem; align-items: flex-start;
  font-size: .92rem; color: color-mix(in srgb, var(--papel) 70%, var(--tinta-sala)); max-width: 78ch;
}
.sala__aviso svg { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: var(--sangre); }
.sala__aviso a { color: var(--papel); }
.sala__aviso a:hover { color: var(--brasa); }

/* ---------- Pie ---------- */
.pie { border-top: 2px solid var(--tinta); }
.pie__fila {
  max-width: var(--ancho); margin: 0 auto; padding: 2.5rem var(--gutter) 2rem;
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start;
}
.pie__camara { width: 140px; }
.pie p { margin: 0 0 .8rem; max-width: 70ch; font-size: .95rem; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-top: 1rem; }
.pie__aliados { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px dashed color-mix(in srgb, var(--tinta) 40%, transparent); }
.pie__aliados img { width: min(100%, 760px); opacity: .9; }
.pie__aliados p { font-size: .82rem; margin-top: .6rem; color: color-mix(in srgb, var(--tinta) 70%, var(--papel)); }
@media (max-width: 640px) { .pie__fila { grid-template-columns: 1fr; } .pie__camara { width: 110px; } }

/* ---------- Páginas legales ---------- */
.legal-portada {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 2rem; align-items: end;
}
.legal-portada h1 {
  font-family: var(--display); font-weight: 900; line-height: .88; margin: 0 0 1rem;
  font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -.01em;
}
.legal-portada p { margin: 0; max-width: 60ch; }
.legal-portada__fecha { font-style: italic; margin-top: .75rem !important; color: color-mix(in srgb, var(--tinta) 72%, var(--papel)); }
.legal-portada img { width: 220px; justify-self: end; }
@media (max-width: 720px) { .legal-portada { grid-template-columns: 1fr; } .legal-portada img { display: none; } }

.legal {
  max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--gutter) 4rem;
  display: grid; grid-template-columns: 240px minmax(0, 68ch); gap: 3.5rem; align-items: start;
}
.indice { position: sticky; top: 84px; font-size: .9rem; border-left: 2px solid var(--tinta); padding-left: 1rem; }
.indice p { font-family: var(--display); font-weight: 900; font-size: 1.2rem; margin: 0 0 .5rem; }
.indice ol { margin: 0; padding-left: 1.2rem; }
.indice li { margin: .3rem 0; }
.indice a { text-decoration: none; }
.indice a:hover { text-decoration: underline; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 1.5rem; } .indice { position: static; } }

.clausulas { counter-reset: clausula; }
.clausulas section { counter-increment: clausula; padding-top: .5rem; margin-bottom: 2.4rem; scroll-margin-top: 90px; }
.clausulas h2 {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1; margin: 0 0 .9rem;
  display: flex; gap: .7rem; align-items: baseline;
}
.clausulas h2::before { content: counter(clausula); color: var(--sangre); min-width: 1.4ch; }
.clausulas p, .clausulas li { line-height: 1.7; }
.clausulas p { margin: 0 0 1rem; }
.clausulas ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.clausulas li { margin-bottom: .4rem; }
.destacado {
  background: var(--papel-hondo); border-left: 4px solid var(--sangre);
  padding: 1.1rem 1.25rem; margin: 1.2rem 0; border-radius: 0 6px 6px 0;
}
.destacado p:last-child { margin-bottom: 0; }
.pendiente { background: #ffe066; color: var(--tinta); padding: 0 .25em; border-radius: 2px; }

/* Crédito de desarrollo */
.pie__credito {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end;
  padding-top: 1.25rem;
  border-top: 1px dashed color-mix(in srgb, var(--tinta) 40%, transparent);
}
.pie__credito a {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; font-size: .85rem;
  color: color-mix(in srgb, var(--tinta) 75%, var(--papel));
}
.pie__credito a:hover { color: var(--tinta); }
.pie__credito img { height: 16px; width: auto; }
.pie__credito strong { font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--tinta); }
@media (max-width: 640px) { .pie__credito { justify-content: flex-start; } }
[hidden] { display: none !important; }