/* Propuesta de rediseño — Paz Encina
   Concepto: la sala oscura. Cine lento, memoria, tierra roja.
   V1 (negro) por defecto; V2 (blanco) invierte con [data-tema="claro"]. */

:root {
  --fondo: #11100d;
  --fondo-2: #181611;
  --tinta: #ece7dd;
  --tinta-suave: #97917f;
  --linea: #2e2b23;
  --acento: #b5472a; /* tierra roja */
  --placa: #0a0908;
  --display: "Bodoni Moda", serif;
  --texto: "Archivo", sans-serif;
}
:root[data-tema="claro"] {
  --fondo: #f3efe6;
  --fondo-2: #ebe6d9;
  --tinta: #171511;
  --tinta-suave: #6f6a5c;
  --linea: #d8d2c2;
  --acento: #a83c21;
  --placa: #faf8f2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.6s ease, color 0.6s ease;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--acento); color: #fff; }

/* ---- grano de película -------------------------------------------------- */
.grano {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grano 0.6s steps(4) infinite;
}
@keyframes grano {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, 1%); }
}

/* ---- etiquetas tipo claqueta -------------------------------------------- */
.rotulo {
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.rotulo b { color: var(--acento); font-weight: 500; }

/* ---- barra de navegación ------------------------------------------------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  mix-blend-mode: difference; color: #ece7dd;
  transition: color 0.5s ease;
}
/* Sobre el video de la portada la barra no se mezcla: se entinta según la
   luminancia del fondo (la mide animaciones.js); pasada la portada vuelve
   al modo difference, que con fondos controlados rinde mejor. */
.barra.entintada { mix-blend-mode: normal; }
.barra.entintada.sobre-claro { color: #171511; }
.barra.entintada.sobre-oscuro { color: #ece7dd; }
.barra .marca {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: 22px; letter-spacing: 0.02em;
}
.barra nav { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.barra nav a {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.75; transition: opacity 0.3s;
  position: relative; padding-bottom: 4px;
}
.barra nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
}
.barra nav a:hover, .barra nav a.actual { opacity: 1; }
.barra nav a:hover::after, .barra nav a.actual::after { transform: scaleX(1); transform-origin: left; }

.cambiar-tema {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: 7px 14px;
  opacity: 0.85; transition: opacity 0.3s;
}
.cambiar-tema:hover { opacity: 1; }

/* ---- telón: carga inicial y cambio de página ----------------------------- */
.telon { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.telon .hoja {
  position: absolute; left: 0; width: 100%; height: 50.5%;
  background: var(--placa);
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.18, 1);
}
.telon .hoja.arriba { top: 0; transform-origin: top; }
.telon .hoja.abajo { bottom: 0; transform-origin: bottom; }
.telon.abierto .hoja.arriba { transform: translateY(-101%); }
.telon.abierto .hoja.abajo { transform: translateY(101%); }

.telon .placa {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity 0.35s ease;
}
.telon .placa .titulo-placa {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(34px, 6vw, 84px); color: var(--tinta);
}
.telon .placa .rotulo { margin-top: 14px; text-align: center; }
.telon.con-placa .placa { opacity: 1; }

/* portada de arranque: el nombre, letra por letra */
.telon .arranque {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.telon .arranque .nombre {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 10vw, 150px); letter-spacing: 0.01em; line-height: 1;
  display: flex; overflow: hidden;
}
.telon .arranque .nombre span {
  display: inline-block; transform: translateY(110%);
  animation: subir 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.22s + var(--i) * 0.045s);
}
.telon .arranque .nombre span.espacio { width: 0.35em; }
.telon .arranque .linea {
  height: 1px; background: var(--acento); margin: 26px auto 18px;
  width: 0; animation: crecer 1.1s cubic-bezier(0.77, 0, 0.18, 1) 0.9s forwards;
}
.telon .arranque .rotulo { opacity: 0; animation: aparecer 0.8s ease 1.3s forwards; }
.telon.abierto .arranque { display: none; }
@keyframes subir { to { transform: translateY(0); } }
@keyframes crecer { to { width: min(320px, 40vw); } }
@keyframes aparecer { to { opacity: 1; } }

/* ---- vistas -------------------------------------------------------------- */
.vista { display: none; min-height: 100vh; }
.vista.activa { display: block; }

/* ---- portada (inicio) ---------------------------------------------------- */
.portada { position: relative; height: 100vh; overflow: hidden; }
.portada video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
  /* el fundido al scrollear lo maneja animaciones.js; la transición lo alisa */
  transition: opacity 0.3s linear, transform 0.3s linear;
  will-change: opacity, transform;
}
.portada .titular { transition: opacity 0.3s linear; }
.portada::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.35), rgba(10, 9, 8, 0.05) 40%, var(--fondo) 96%);
}
.portada .titular {
  position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); bottom: 8vh; right: 4vw;
}
.portada .titular h1 {
  font-family: var(--display); font-weight: 800; line-height: 0.95;
  font-size: clamp(54px, 11.5vw, 190px); letter-spacing: 0.005em;
}
.portada .titular h1 .fila { display: block; overflow: hidden; }
.portada .titular h1 .fila > span { display: inline-block; transform: translateY(108%); }
.portada .titular h1 em { font-style: italic; font-weight: 500; color: var(--acento); }
.portada .titular .rotulo { margin-top: 22px; }
.vista.activa .portada .titular h1 .fila > span {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 0.12s);
}
body.lista .portada .titular h1 .fila > span { transform: translateY(0); }

/* ---- índice de obras (filas) --------------------------------------------- */
.seccion { padding: clamp(70px, 12vh, 140px) clamp(20px, 4vw, 56px); position: relative; }
.seccion .encabezado { display: flex; align-items: baseline; gap: 18px; margin-bottom: 36px; }

.indice .fila-obra {
  display: grid; grid-template-columns: 56px 1fr auto auto; gap: 18px;
  align-items: baseline; padding: 26px 6px; cursor: pointer;
  border-bottom: 1px solid var(--linea); position: relative;
}
.indice .fila-obra:first-of-type { border-top: 1px solid var(--linea); }
.indice .numero { font-size: 12px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.indice .titulo-obra {
  font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3.4vw, 44px);
  line-height: 1.1; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
}
.indice .fila-obra:hover .titulo-obra { transform: translateX(14px); color: var(--acento); font-style: italic; }
.indice .anio { font-size: 12px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.indice .cat { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); }

/* vista previa que sigue al cursor */
.vista-previa {
  position: fixed; z-index: 60; width: 300px; aspect-ratio: 4/3; pointer-events: none;
  overflow: hidden; opacity: 0; transform: scale(0.92); transition: opacity 0.3s, transform 0.3s;
}
.vista-previa img { width: 100%; height: 100%; object-fit: cover; }
.vista-previa .pie {
  position: absolute; left: 10px; bottom: 8px; font-size: 10px; letter-spacing: 0.18em;
  color: #ece7dd; text-shadow: 0 0 8px rgba(0, 0, 0, 0.7); text-transform: uppercase;
}
.vista-previa.visible { opacity: 1; transform: scale(1); }

/* ---- vistas de categoría -------------------------------------------------- */
.cabecera-cat { position: relative; padding: 24vh clamp(20px, 4vw, 56px) 8vh; overflow: hidden; }
.cabecera-cat .numeron {
  position: absolute; right: -2vw; top: 6vh; z-index: 0;
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(160px, 34vw, 480px);
  color: transparent; -webkit-text-stroke: 1px var(--linea);
  user-select: none;
}
.cabecera-cat h2 {
  position: relative; z-index: 1; font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 9vw, 150px); line-height: 0.98;
}
.cabecera-cat h2 .fila { display: block; overflow: hidden; }
.cabecera-cat h2 .fila > span { display: inline-block; transform: translateY(108%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 0.1s); }
.vista.activa.lista .cabecera-cat h2 .fila > span { transform: translateY(0); }
.cabecera-cat .rotulo { position: relative; z-index: 1; margin-top: 18px; }

/* bloque de cada obra */
.obra { padding: 10vh clamp(20px, 4vw, 56px); display: grid;
  grid-template-columns: minmax(220px, 3fr) 7fr; gap: clamp(24px, 4vw, 64px); }
.obra:nth-child(even) { grid-template-columns: 7fr minmax(220px, 3fr); }
.obra:nth-child(even) .obra-meta { order: 2; }
.obra-meta { position: sticky; top: 18vh; align-self: start; }
.obra-meta h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.6vw, 52px); line-height: 1.05; }
.obra-meta h3 em { font-style: italic; color: var(--acento); }
.obra-meta .rotulo { margin-top: 14px; }
.obra-meta .ver {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--linea); border-radius: 999px; padding: 10px 18px;
  transition: border-color 0.3s, color 0.3s;
}
.obra-meta .ver:hover { border-color: var(--acento); color: var(--acento); }
.obra-meta .ver::before { content: "▶"; font-size: 8px; color: var(--acento); }

.obra-tira { display: grid; gap: clamp(16px, 2.5vw, 36px); }
.cuadro { position: relative; overflow: hidden; cursor: pointer; }
.cuadro img {
  width: 100%; height: auto; filter: grayscale(0.15);
  transform: scale(1.12); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s;
  will-change: transform;
}
.cuadro:hover img { filter: grayscale(0); }
.cuadro .marca-tiempo {
  position: absolute; right: 10px; bottom: 10px; font-size: 10px; letter-spacing: 0.14em;
  color: #ece7dd; background: rgba(10, 9, 8, 0.55); padding: 4px 8px;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s;
}
.cuadro:hover .marca-tiempo { opacity: 1; }

/* revelado al scrollear: máscara que se abre */
.revelar { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1); transition-delay: calc(var(--i, 0) * 0.08s); }
.revelar.en-escena { clip-path: inset(0 0 0 0); }
.subir-suave { opacity: 0; transform: translateY(34px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 0.08s); }
.subir-suave.en-escena { opacity: 1; transform: none; }

/* ---- bio ------------------------------------------------------------------ */
.bio-cuerpo { max-width: 880px; }
.bio-cuerpo p {
  font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.45;
}
.bio-cuerpo p em { font-style: italic; color: var(--acento); }
.bio-pie { margin-top: 48px; display: flex; gap: 28px; flex-wrap: wrap; }

/* ---- contacto -------------------------------------------------------------- */
.contacto-grande {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: clamp(30px, 6vw, 92px); line-height: 1.1;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em;
}
.contacto-grande:hover { color: var(--acento); }

/* ---- pie ------------------------------------------------------------------- */
.pie-sitio {
  border-top: 1px solid var(--linea);
  padding: 40px clamp(20px, 4vw, 56px); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}

/* ---- visor (galería) -------------------------------------------------------- */
.visor {
  position: fixed; inset: 0; z-index: 75; background: var(--placa);
  display: none; align-items: center; justify-content: center;
}
.visor.abierto { display: flex; }
.visor .lienzo { position: relative; width: min(86vw, 1200px); height: min(78vh, 760px); cursor: e-resize; }
.visor .lamina {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.visor .lamina img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor .lamina.entra { clip-path: inset(0 0 0 100%); animation: barrido 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards; }
.visor .lamina.sale { animation: retirada 0.7s ease forwards; }
.visor .lamina.entra.reversa { clip-path: inset(0 100% 0 0); }
@keyframes barrido { to { clip-path: inset(0 0 0 0); } }
@keyframes retirada { to { transform: scale(1.05); opacity: 0.25; } }

.visor .datos {
  position: absolute; left: clamp(20px, 4vw, 56px); bottom: 26px; right: clamp(20px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.visor .datos .obra-visor { font-family: var(--display); font-style: italic; font-size: clamp(18px, 2.4vw, 30px); }
.visor .contador { font-variant-numeric: tabular-nums; }
.visor .progreso { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--acento); width: 0; transition: width 0.5s cubic-bezier(0.77, 0, 0.18, 1); }
.visor .cerrar { position: absolute; top: 24px; right: clamp(20px, 4vw, 56px); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.visor .flecha {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; padding: 18px;
  color: var(--tinta-suave); transition: color 0.3s;
}
.visor .flecha:hover { color: var(--acento); }
.visor .flecha.anterior { left: 6px; }
.visor .flecha.siguiente { right: 6px; }

/* ---- responsive -------------------------------------------------------------- */
@media (max-width: 860px) {
  .obra, .obra:nth-child(even) { grid-template-columns: 1fr; }
  .obra:nth-child(even) .obra-meta { order: 0; }
  .obra-meta { position: static; }
  .indice .fila-obra { grid-template-columns: 34px 1fr auto; }
  .indice .cat { display: none; }
  .vista-previa { display: none; }
  .barra nav { display: none; }
  .barra .menu-movil { display: block; }
}
@media (min-width: 861px) { .barra .menu-movil { display: none; } }
.menu-movil { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.panel-movil {
  position: fixed; inset: 0; z-index: 72; background: var(--placa);
  display: none; flex-direction: column; justify-content: center; gap: 10px;
  padding: 0 28px;
}
.panel-movil.abierto { display: flex; }
.panel-movil a { font-family: var(--display); font-weight: 700; font-size: 42px; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .revelar, .subir-suave { clip-path: none; opacity: 1; transform: none; }
  .portada .titular h1 .fila > span, .cabecera-cat h2 .fila > span { transform: none; }
}