/* Tipografía de títulos */
@font-face {
  font-family: "Bold Finger";
  src: url("fonts/BoldFinger.woff") format("woff"),
       url("fonts/BoldFinger.ttf") format("truetype");
  font-display: swap;
}

/* Paleta: sala a oscuras + luz de proyector.
   Para adaptarla a tu película, cambiá solo estas variables. */
:root {
  /* Paleta tomada del afiche de Karma Negro */
  --negro: #07090c;
  --panel: #141820;
  --linea: #272c35;
  --texto: #efebe4;
  --tenue: #a0a5ad;
  --luz: #ffe31a;        /* amarillo del título del afiche */
  --luz-texto: #0a0a0a;
  --ocaso: #e8561c;      /* naranja del atardecer */
  --display: "Bold Finger", "Archivo Black", "Arial Black", Impact, sans-serif;
  --cuerpo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen: clamp(1.25rem, 5vw, 4rem);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
html { background: var(--negro); }
body {
  margin: 0;
  min-height: 100%;
  /* Degradé muy sutil: del negro al amarillo del título, hacia el final de la página */
  background: linear-gradient(to bottom, var(--negro) 0%, var(--negro) 30%, #15130a 70%, #2b2608 100%);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}
:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; border-radius: 4px; }

/* ---------- Barra superior ---------- */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + .9rem) var(--margen) .9rem;
  border-bottom: 1px solid transparent;
  transition:
    background-color 1.1s ease,
    border-color 1.1s ease,
    -webkit-backdrop-filter 1.1s ease,
    backdrop-filter 1.1s ease;
}
.ver-barra { justify-content: flex-start; }
.barra.solida {
  background: rgba(7, 9, 12, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(239, 235, 228, .06);
}
.marca {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--luz);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra .btn-chico { opacity: 0; pointer-events: none; transition: opacity 1s ease .25s; }
.barra.solida .btn-chico { opacity: 1; pointer-events: auto; }
/* "KARMA NEGRO" en la barra: aparece junto con el botón al bajar */
.marca-barra {
  font-size: 1.35rem;
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
  letter-spacing: .08em;
  transition: opacity 1.1s ease .15s, filter 1.3s cubic-bezier(.2, .7, .2, 1) .15s, letter-spacing 1.3s cubic-bezier(.2, .7, .2, 1) .15s;
}
.barra.solida .marca-barra { opacity: 1; pointer-events: auto; filter: none; letter-spacing: normal; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.1rem;
  padding: .75rem 1.6rem;
  border: 0;
  border-radius: 4px;
  font: 600 1.05rem/1 var(--cuerpo);
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, background-color .15s ease;
}
.btn svg { width: 1.3rem; height: 1.3rem; }
.btn-alquilar { background: var(--luz); color: var(--luz-texto); }
.btn-alquilar:hover { filter: brightness(1.08); }
.btn-alquilar[disabled] { filter: saturate(.5); cursor: progress; }
.btn-sec { background: rgba(237, 233, 225, .16); color: var(--texto); }
.btn-sec:hover { background: rgba(237, 233, 225, .26); }
.btn-chico { min-height: 2.4rem; padding: .5rem 1rem; font-size: .95rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 7rem var(--margen) clamp(2.5rem, 6vh, 4.5rem);
  isolation: isolate;
  overflow: hidden;
}
.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 75% 40%, rgba(232, 86, 28, .16), transparent 70%),
    var(--negro);
}
/* Afiche a pantalla completa, con degradé para que el texto se lea */
.hero-fondo::before,
.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Video de fondo: aparece suave encima de la imagen una vez que arranca */
.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero-video.visible { opacity: 1; }
/* Solo con YouTube: un poco más grande que la pantalla para recortar su título y barra */
.hero-video iframe { transform: translate(-50%, -50%) scale(1.18); }
.hero-video iframe,
.hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78svh);
  height: max(56.25vw, 100%);
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;
}
.hero-fondo::before {
  background: var(--img-fondo, none) 60% 30% / cover no-repeat;
}
.hero-fondo::after {
  background:
    linear-gradient(to top, var(--negro) 0, rgba(7, 9, 12, .6) 22%, rgba(7, 9, 12, 0) 50%),
    linear-gradient(to right, rgba(7, 9, 12, .9) 0, rgba(7, 9, 12, .55) 28%, rgba(7, 9, 12, 0) 50%);
}
.hero-contenido { max-width: 44rem; }
.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.3rem, 8vw, 6.25rem);
  line-height: .9;
  white-space: nowrap;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--luz);
  margin: 0 0 .5rem;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .5);
}
.festivales {
  list-style: none;
  margin: 0 0 .45rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  color: var(--texto);
  font-size: .9rem;
  font-weight: 500;
}
.festivales li::before { content: "★ "; color: var(--luz); }
.ficha {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  color: var(--tenue);
  font-size: .98rem;
}
.ficha .clasif {
  color: var(--texto);
  border: 1px solid rgba(237, 233, 225, .5);
  padding: .05rem .45rem;
  border-radius: 3px;
  font-size: .85rem;
}
.bajada { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 36rem; margin: 0 0 1.8rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.nota { color: var(--tenue); font-size: .92rem; margin: 1.1rem 0 0; }
.aviso {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--luz);
  background: var(--panel);
  max-width: 34rem;
}

/* Aparición "en foco" al bajar: misma idea que el título del inicio */
@media (prefers-reduced-motion: reduce) {
  .barra, .barra .btn-chico, .marca-barra { transition: none; filter: none; letter-spacing: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    filter: blur(12px);
    transition:
      opacity 1s ease var(--retraso, 0s),
      filter 1.2s cubic-bezier(.2, .7, .2, 1) var(--retraso, 0s),
      letter-spacing 1.2s cubic-bezier(.2, .7, .2, 1) var(--retraso, 0s);
  }
  .revelar-titulo { letter-spacing: .08em; }
  .revelar.en-foco { opacity: 1; filter: none; }
  .revelar-titulo.en-foco { letter-spacing: normal; }
}

/* El título "enfoca" al cargar */
@media (prefers-reduced-motion: no-preference) {
  .titulo { animation: enfoque 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes enfoque {
    from { opacity: 0; filter: blur(14px); letter-spacing: .06em; }
    to   { opacity: 1; filter: blur(0); letter-spacing: -.01em; }
  }
}

/* ---------- Secciones ---------- */
.detalles, .prensa { padding: clamp(3rem, 7vw, 5rem) var(--margen) 0; }
.faq { padding: clamp(2.4rem, 5.6vw, 4rem) var(--margen) 0; }
.galeria-sec { padding: clamp(2rem, 4vw, 3rem) var(--margen) 0; }
.detalles {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 820px) {
  .detalles { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 5rem; }
}
.sinopsis p { font-size: 1.1rem; max-width: 62ch; margin: 0 0 .9rem; }
.sinopsis p:last-child { margin-bottom: 0; }

.resenas { padding: clamp(2rem, 4vw, 3rem) var(--margen) 0; }
.resenas h2, .galeria-sec h2 { font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 1rem; }
.resenas h2, .sinopsis h2, .galeria-sec h2, .faq h2 { font-family: "Archivo Black", "Arial Black", sans-serif; }
.resenas h2 a { color: inherit; text-decoration-color: var(--ocaso); text-underline-offset: .18em; }
.resenas-lista {
  display: grid;
  gap: 1rem clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  max-width: 48rem;
}
.resena { margin: 0; padding-left: .7rem; border-left: 2px solid var(--ocaso); font-size: .85rem; }
.resena blockquote {
  margin: 0 0 .4rem;
  font-family: var(--cuerpo);
  font-weight: 500;
  font-size: clamp(.9rem, 1.1vw, 1rem);
  line-height: 1.25;
}
.resena figcaption a { color: var(--tenue); }
.resena figcaption a:hover { color: var(--texto); }
.creditos { margin: 0; display: grid; gap: 1.1rem; align-content: start; }
.creditos div { display: grid; gap: .15rem; }
.creditos dt { color: var(--tenue); font-size: .9rem; }
.creditos dd { margin: 0; }

.prensa { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.prensa figure { margin: 0; }
.prensa blockquote {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.08;
}
.prensa figcaption { color: var(--tenue); }

/* Mosaico: una foto destacada grande y cuatro chicas al costado */
.galeria {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 900px;
}
.galeria button {
  display: block;
  padding: 0;
  border: 0;
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
}
.galeria button:first-child { grid-column: span 2; grid-row: span 2; }
.galeria img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .4s ease, opacity .15s ease;
}
.galeria button:first-child img { aspect-ratio: auto; }
.galeria button:hover img { opacity: .9; transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .galeria button:hover img { transform: none; }
}
@media (max-width: 700px) {
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria button:first-child { grid-row: auto; }
  .galeria button:first-child img { aspect-ratio: 16 / 9; }
}
.dlg-foto { background: transparent; }
.dlg-foto::backdrop { background: rgba(0, 0, 0, .94); }
.dlg-foto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82svh;
  object-fit: contain;
  border-radius: 4px;
  animation: aparecer .2s ease;
}
@keyframes aparecer { from { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .dlg-foto img { animation: none; } }
.foto-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: var(--texto);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.foto-nav:hover { background: rgba(0, 0, 0, .8); }
.foto-ant { left: -4rem; }
.foto-sig { right: -4rem; }
.foto-contador { margin: .75rem 0 0; text-align: center; color: var(--tenue); font-size: .9rem; }
@media (max-width: 1240px) {
  .foto-ant { left: .5rem; }
  .foto-sig { right: .5rem; }
}

.faq { max-width: 42rem; }
.faq h2 { font-size: clamp(1.08rem, 1.9vw, 1.36rem); }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-of-type { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer;
  padding: .88rem 1.6rem .88rem 0;
  font-weight: 500;
  font-size: .85rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--tenue);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 .95rem; color: var(--tenue); max-width: 62ch; font-size: .82rem; }

/* ---------- Pie ---------- */
.pie {
  margin-top: clamp(4rem, 9vw, 7rem);
  padding: 2rem var(--margen) calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  color: var(--tenue);
  font-size: .95rem;
}
.pie-links { gap: .6rem; }
.red {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--texto);
  text-decoration: none;
  font-size: .92rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.red:hover { border-color: var(--tenue); background: var(--panel); }
.red svg { width: 1.15rem; height: 1.15rem; flex: none; }
.pie-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.pie-ver { color: var(--texto); }
.pie-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.pie-legal {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: .85rem;
}
.pie-legal a { color: var(--tenue); }
.btn-arrepentimiento {
  padding: .45rem .9rem;
  border: 1px solid var(--texto);
  border-radius: 4px;
  background: none;
  color: var(--texto);
  font: 600 .9rem var(--cuerpo);
  cursor: pointer;
}
.btn-arrepentimiento:hover { background: var(--texto); color: var(--negro); }

.dlg-form {
  width: min(92vw, 30rem);
  padding: 1.75rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--panel);
  color: var(--texto);
}
.dlg-form::backdrop { background: rgba(0, 0, 0, .8); }
.dlg-form h2 { font-family: "Archivo Black", "Arial Black", sans-serif; font-size: 1.3rem; margin: 0 0 .75rem; }
.dlg-form p { color: var(--tenue); margin: 0 0 1rem; }
.dlg-karma { width: min(92vw, 26rem); padding: 2rem 1.75rem 1.5rem; }
.dlg-karma, .dlg-karma::backdrop { transition: opacity 1.5s ease; }
.dlg-karma.desvaneciendo, .dlg-karma.desvaneciendo::backdrop { opacity: 0; }
/* Fundido a negro del botón de arrepentimiento: tapa toda la página hasta recargar */
.fundido-negro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
}
.fundido-negro.activo { opacity: 1; pointer-events: all; cursor: none; }
.dlg-form .arrep-karma {
  margin: 0 1.5rem 0 0;
  font-family: var(--cuerpo);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--texto);
}
.dlg-form .campo { margin: 0 0 .9rem; }
.dlg-form .btn { width: 100%; margin-top: .4rem; }
.dlg-form-cerrar {
  position: absolute;
  top: .75rem;
  right: .9rem;
  background: none;
  border: 0;
  color: var(--tenue);
  font-size: 1.2rem;
  cursor: pointer;
}

/* ---------- Tráiler ---------- */
.dlg {
  width: min(92vw, 1100px);
  padding: 0;
  border: 0;
  background: #000;
  color: var(--texto);
  overflow: visible;
}
.dlg::backdrop { background: rgba(0, 0, 0, .85); }
.dlg-cerrar {
  position: absolute;
  top: -2.75rem;
  right: 0;
  background: none;
  border: 0;
  color: var(--texto);
  font-size: 1.5rem;
  cursor: pointer;
  padding: .25rem .5rem;
}
.marco-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.marco-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Página "ver" ---------- */
.ver-main {
  min-height: 100svh;
  padding: 6rem var(--margen) 3rem;
  display: grid;
  place-items: center;
}
.ver-caja { width: 100%; max-width: 30rem; }
.ver-caja h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: .95;
  margin: 0 0 1rem;
}
.ver-caja p { color: var(--tenue); }
.campo { display: grid; gap: .4rem; margin: 1.5rem 0 1rem; }
.campo label { font-weight: 500; }
.campo input {
  font: 500 1.1rem var(--cuerpo);
  padding: .8rem .9rem;
  border-radius: 4px;
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--texto);
}
.campo small { color: var(--tenue); }
.error { color: #ff9b8a; margin: .75rem 0 0; }
.reproductor { width: 100%; max-width: 1200px; }
.reproductor .marco-video { border-radius: 4px; overflow: hidden; }
.vence { color: var(--tenue); margin: 1rem 0 0; }

@media (max-width: 520px) {
  .acciones .btn { flex: 1 1 100%; }
  .hero { min-height: 100svh; padding-top: 6rem; }
  .hero-fondo::before { background-position: 40% top; }
  .hero-fondo::after {
    background: linear-gradient(to top, var(--negro) 0, rgba(7, 9, 12, .9) 36%, rgba(7, 9, 12, 0) 66%);
  }
}

/* Clip vertical en celulares y tablets: ocupa todo el banner, centrado */
@media (max-width: 820px) {
  .hero-video video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: center top;
  }
}