/* Teatro es Acción (spec 087) · sistema Pompeya del canal: paleta de los frescos, Archivo (eje de ancho), Playfair
   Display e IBM Plex Mono; estructuras de las placas (franjas, imagen partida, diagonal, ficha). Primero celular.
   Sin estilos en línea (la CSP solo permite esta hoja). Movimiento: ver js/sitio.js; con prefers-reduced-motion no se
   mueve nada y todo queda a la vista. */

:root {
  --rojo: #9E2A1D; --ocre: #E2A42A; --tierra: #3D1C0E; --verde: #2F4A33; --azul: #1E4B73; --negro: #16100A;
  --crema: #F2E4C6; --papel: #ECE3D0; --tinta-ocre: #2A140A; --ocre-texto: #6B400C;
  --archivo: "Archivo", system-ui, sans-serif; --playfair: "Playfair Display", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --margen: 20px; --ancho: 1180px;
  --curva: cubic-bezier(.16, 1, .3, 1); --curva-paño: cubic-bezier(.65, 0, .35, 1);
}
@media (min-width: 768px) { :root { --margen: 40px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--negro); color: var(--crema); font: 400 1.0625rem/1.6 var(--playfair); }
img { max-width: 100%; display: block; }
/* Lo que entra de costado (data-entra izq/der) no puede ensanchar la página antes de aparecer. */
main { overflow-x: clip; }
a { color: inherit; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--crema); color: var(--negro); padding: 10px 14px; font-family: var(--mono); }
.saltar:focus { left: 8px; }
.envase { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.mono { font-family: var(--mono); font-weight: 600; font-size: .9375rem; letter-spacing: .12em; text-transform: uppercase; }
.reservado { font-family: var(--mono); font-weight: 600; font-size: .9375rem; background: var(--ocre); color: var(--negro); padding: 2px 8px; }

/* ── Encabezado y menú ───────────────────────────────────────────────────────────────────────────────── */
.cabeza { position: sticky; top: 0; z-index: 50; background: var(--negro); border-bottom: 1px solid rgba(242, 228, 198, .14); }
.cabeza .envase { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 800 1.125rem/1 var(--archivo); font-stretch: 75%; letter-spacing: .02em; text-transform: uppercase; }
.marca img { width: 40px; height: 40px; border-radius: 50%; }
.menu-boton { display: inline-flex; align-items: center; gap: 8px; background: none; border: 2px solid var(--crema); color: var(--crema); font: 600 .9375rem/1 var(--mono); letter-spacing: .1em; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.menu { display: none; }
.menu-abierto .menu { display: block; position: fixed; inset: 64px 0 0 0; background: var(--negro); padding: 24px var(--margen); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 14px 0; font: 800 2rem/1.1 var(--archivo); font-stretch: 70%; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(242, 228, 198, .18); }
.menu a:hover, .menu a[aria-current] { color: var(--ocre); }
@media (min-width: 1024px) {
  .menu-boton { display: none; }
  .menu, .menu-abierto .menu { display: block; position: static; padding: 0; background: none; }
  .menu ul { display: flex; gap: 28px; }
  .menu a { padding: 6px 0; font: 600 .9375rem/1 var(--mono); letter-spacing: .12em; border: 0; }
}

/* ── Títulos y botones ───────────────────────────────────────────────────────────────────────────────── */
.titulo { font: 900 clamp(3rem, 13vw, 9.5rem)/.86 var(--archivo); font-stretch: 62%; text-transform: uppercase; margin: 0; letter-spacing: -.005em; }
.titulo--medio { font-size: clamp(2.5rem, 9vw, 5.5rem); }
.cursiva { font: italic 600 clamp(1.5rem, 4.4vw, 2.6rem)/1.15 var(--playfair); margin: 0; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.boton { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 20px; font: 600 .9375rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 2px solid currentColor; transition: transform .3s var(--curva), background .3s; }
.boton:hover { transform: translateY(-3px); }
.boton--crema { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.boton--linea { background: transparent; }
.boton img { width: 28px; height: auto; }

/* ── Movimiento: entradas al aparecer (js agrega .visto). Sin js o con movimiento reducido, todo a la vista ── */
.js [data-entra] { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--curva), transform 1.1s var(--curva); }
.js [data-entra="izq"] { transform: translateX(-60px); }
.js [data-entra="der"] { transform: translateX(60px); }
.js [data-entra].visto { opacity: 1; transform: none; }
.js [data-retraso="1"] { transition-delay: .12s; } .js [data-retraso="2"] { transition-delay: .24s; } .js [data-retraso="3"] { transition-delay: .36s; }
/* Revelado de línea, como `revela` de las placas: la línea sube desde abajo dentro de su caja. */
.linea-sube { display: block; overflow: hidden; padding-top: .14em; margin-top: -.14em; }
.linea-sube > span { display: block; }
.js .linea-sube > span { transform: translateY(105%); transition: transform 1.2s var(--curva); }
.js .visto .linea-sube > span, .js .linea-sube.visto > span { transform: none; }
.js .visto .linea-sube:nth-child(2) > span { transition-delay: .12s; } .js .visto .linea-sube:nth-child(3) > span { transition-delay: .24s; }
/* Barrido: un paño de color cruza la sección cuando entra (transición barrido del episodio). */
.barrido { position: relative; overflow: hidden; }
.js .barrido::after { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--paño, var(--ocre)); transform: translateX(-101%); pointer-events: none; }
.js .barrido.visto::after { animation: paño 1.1s var(--curva-paño) both; }
@keyframes paño { 0% { transform: translateX(-101%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }

/* ── 01 Franjas (portada) ────────────────────────────────────────────────────────────────────────────── */
.franjas { position: relative; background: var(--tierra); overflow: hidden; padding: 56px 0 48px; min-height: min(92vh, 860px); display: flex; align-items: flex-end; }
.franjas__tiras { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3.2%; padding: 0 4%; }
.franjas__tira { position: relative; overflow: hidden; }
.franjas__tira:nth-child(odd) { margin: 6vh 0 30vh; } .franjas__tira:nth-child(even) { margin: 12vh 0 22vh; }
/* Cada tira muestra su tramo de la MISMA foto: la imagen mide lo que las 7 tiras más los 6 huecos (hueco = 31 % de una
   tira) y se corre 131 % por tira. */
.franjas__tira img { position: absolute; top: 0; height: 100%; width: 885%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.18); }
.franjas__tira::after { content: ""; position: absolute; inset: 0; background: #D08A3A; mix-blend-mode: multiply; }
.franjas__tira:nth-child(1) img { left: 0; } .franjas__tira:nth-child(2) img { left: -131%; } .franjas__tira:nth-child(3) img { left: -262%; }
.franjas__tira:nth-child(4) img { left: -393%; } .franjas__tira:nth-child(5) img { left: -524%; } .franjas__tira:nth-child(6) img { left: -655%; }
.franjas__tira:nth-child(7) img { left: -786%; }
.js .franjas__tira { clip-path: inset(0 0 100% 0); animation: baja 1.1s var(--curva) forwards; }
.franjas__tira:nth-child(2) { animation-delay: .12s; } .franjas__tira:nth-child(3) { animation-delay: .24s; } .franjas__tira:nth-child(4) { animation-delay: .36s; }
.franjas__tira:nth-child(5) { animation-delay: .48s; } .franjas__tira:nth-child(6) { animation-delay: .6s; } .franjas__tira:nth-child(7) { animation-delay: .72s; }
@keyframes baja { to { clip-path: inset(0 0 0 0); } }
/* Imagen viva: deriva lenta y continua, siempre (sin botón de pausa: decisión de Francisco, 2026-10-21). Con
   prefers-reduced-motion no se mueve (bloque del final). */
.franjas__tira img { animation: deriva 36s linear infinite alternate; }
@keyframes deriva { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.1) translateX(-2%); } }
.franjas__texto { position: relative; z-index: 2; }
.franjas__texto .titulo { color: var(--crema); }
.franjas__texto .mono { color: var(--ocre); margin: 0 0 14px; }
.franjas__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.franjas__pie .cursiva { color: var(--ocre); }
.franjas__titulo-fondo { background: var(--tierra); display: inline-block; padding: .06em .12em 0 0; }

/* ── 05 Ficha (papel, datos mono, palabra gigante) ───────────────────────────────────────────────────── */
.ficha { background: var(--papel); color: var(--tierra); padding: 72px 0; }
.ficha__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-bottom: 36px; }
.ficha__datos dt { font: 600 .9375rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ocre-texto); }
.ficha__datos dd { margin: 4px 0 0; font: 600 .9375rem/1.4 var(--mono); }
.ficha .titulo { color: var(--rojo); }
.ficha__frase { font: 400 clamp(1.25rem, 3.6vw, 1.75rem)/1.45 var(--playfair); max-width: 34em; margin: 28px 0 0; color: var(--negro); }
@media (min-width: 768px) { .ficha__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 02 Imagen partida ───────────────────────────────────────────────────────────────────────────────── */
.partida { display: grid; background: var(--rojo); }
.partida__imagen { position: relative; overflow: hidden; min-height: 300px; }
.partida__imagen img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.partida__texto { padding: 56px var(--margen); }
.partida__texto .mono { color: var(--crema); margin: 0 0 16px; }
.partida__texto p { max-width: 32em; }
@media (min-width: 900px) {
  .partida { grid-template-columns: 1fr 1fr; min-height: 620px; }
  .partida__texto { padding: 80px 64px; align-self: center; }
}

/* ── 04 Diagonal ─────────────────────────────────────────────────────────────────────────────────────── */
.diagonal { position: relative; overflow: hidden; padding: 96px 0; background: var(--negro); }
.diagonal__fondo { position: absolute; inset: -10% 0; }
.diagonal__fondo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.diagonal__bloque { position: relative; background: var(--azul); padding: 40px 28px 44px; clip-path: polygon(0 3%, 100% 0, 99% 100%, 1% 97%); }
.diagonal--verde .diagonal__bloque { background: var(--verde); }
.diagonal__bloque .titulo { color: var(--crema); }
.diagonal__bloque .acento { color: var(--ocre); }   /* ocre sobre azul/verde da 4,2–4,5:1: solo en títulos grandes */
.diagonal__bloque .mono { color: var(--crema); }
.js .diagonal__bloque { clip-path: polygon(0 3%, 0 0, 0 100%, 1% 97%); transition: clip-path 1.2s var(--curva); }
.js .diagonal.visto .diagonal__bloque { clip-path: polygon(0 3%, 100% 0, 99% 100%, 1% 97%); }
@media (min-width: 900px) { .diagonal__bloque { padding: 64px 72px 68px; max-width: 900px; } }

/* ── Programas, próximamente, tarjetas ───────────────────────────────────────────────────────────────── */
.seccion { padding: 80px 0; }
.seccion--tierra { background: var(--tierra); } .seccion--negro { background: var(--negro); } .seccion--verde { background: var(--verde); }
.seccion .mono { color: var(--ocre); margin: 0 0 14px; }
.tarjetas { display: grid; gap: 18px; margin-top: 36px; padding: 0; list-style: none; }
@media (min-width: 768px) { .tarjetas { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { background: var(--papel); color: var(--tierra); padding: 28px 24px 32px; border-top: 10px solid var(--rojo); }
.tarjeta:nth-child(2) { border-color: var(--azul); } .tarjeta:nth-child(3) { border-color: var(--verde); }
.tarjeta h3 { font: 900 2.4rem/.9 var(--archivo); font-stretch: 62%; text-transform: uppercase; margin: 10px 0 12px; color: var(--negro); }
.tarjeta .mono { color: var(--ocre-texto); margin: 0; }
.tarjeta p { margin: 0; }

/* ── Episodio: video reservado, capítulos, enlaces ───────────────────────────────────────────────────── */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--tierra); border: 2px dashed var(--ocre); display: grid; place-items: center; text-align: center; padding: 20px; }
.video p { margin: 8px 0 0; }
.video .titulo { color: var(--crema); }
.video--listo { border: 0; padding: 0; background: var(--negro); }
.video--listo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.boton--grande { font-size: 1.0625rem; min-height: 60px; padding: 16px 26px; }
.programa-breve { margin: 36px 0 8px; max-width: 40em; }
.programa-breve p { margin: 0 0 10px; }
.programa-breve .cursiva { color: var(--ocre); }
.programa-breve .mono { color: var(--crema); }
.video + .programa-breve + h2, .capitulos + .enlaces { margin-top: 32px; }
.capitulos { list-style: none; padding: 0; margin: 20px 0 0; columns: 1; }
@media (min-width: 768px) { .capitulos { columns: 2; column-gap: 48px; } }
.capitulos li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(242, 228, 198, .2); break-inside: avoid; }
.capitulos .mono { color: var(--ocre); margin: 0; min-width: 4.2em; }
.enlaces { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 768px) { .enlaces { grid-template-columns: repeat(3, 1fr); } }

/* ── Galería de imágenes con ficha ───────────────────────────────────────────────────────────────────── */
.galeria { display: grid; gap: 22px; list-style: none; padding: 0; margin: 32px 0 0; }
@media (min-width: 600px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.obra { background: var(--papel); color: var(--tierra); display: flex; flex-direction: column; }
.obra a.obra__ver { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tierra); }
.obra__ver img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.obra__ver:hover img { transform: scale(1.06); }
.obra__texto { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.obra h3 { font: 800 1.35rem/1.1 var(--archivo); font-stretch: 85%; margin: 0; color: var(--negro); }
.obra p { margin: 0; font-size: 1rem; line-height: 1.45; }
.obra .mono { font-size: .875rem; color: var(--ocre-texto); letter-spacing: .06em; text-transform: none; }
.obra .aviso { font: 600 .875rem/1.4 var(--mono); color: var(--rojo); }
.obra__acciones { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; padding-top: 8px; font: 600 .9375rem/1.3 var(--mono); }
.obra__acciones a { color: var(--rojo); }

/* ── Texto largo (transcripción, créditos, privacidad) ───────────────────────────────────────────────── */
.texto { background: var(--papel); color: var(--negro); padding: 64px 0 80px; }
.texto .envase { max-width: 780px; }
.texto h1 { font: 900 clamp(2.4rem, 9vw, 4.5rem)/.9 var(--archivo); font-stretch: 62%; text-transform: uppercase; color: var(--rojo); margin: 0 0 20px; }
.texto h2 { font: 800 1.6rem/1.1 var(--archivo); font-stretch: 80%; margin: 36px 0 10px; }
.texto .mono { color: var(--ocre-texto); }
.texto a { color: var(--rojo); }
.texto li { margin-bottom: 10px; }
.aviso-caja { border-left: 6px solid var(--ocre); background: var(--crema); padding: 14px 18px; margin: 20px 0; }
.transcripcion p { margin: 0 0 6px; }
.transcripcion .tiempo { font: 600 .875rem/1 var(--mono); color: var(--ocre-texto); margin-right: 10px; }

/* ── Apoyo y contacto ────────────────────────────────────────────────────────────────────────────────── */
#apoyo .diagonal__bloque p, #contacto p { max-width: 36em; }
.boton--crema img { background: transparent; }

/* ── Pie ─────────────────────────────────────────────────────────────────────────────────────────────── */
.pie { background: var(--negro); border-top: 6px solid var(--rojo); padding: 40px 0 56px; font: 500 .9375rem/1.6 var(--mono); }
.pie a { color: var(--crema); }
.pie__legal { margin-top: 18px; color: var(--crema); }
.pie p { margin: 0 0 8px; }

/* ── Movimiento reducido: nada se mueve, todo a la vista ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-entra], .js .linea-sube > span { opacity: 1 !important; transform: none !important; }
  .js .franjas__tira { clip-path: none !important; }
  .js .diagonal__bloque { clip-path: polygon(0 3%, 100% 0, 99% 100%, 1% 97%) !important; }
  .js .barrido::after { display: none; }
}