/* Demo del mural en película (benexo.app/pelicula · /en/film). La película es la MISMA que la
   de la app (guion en board-film.js, copia generada de @nexo/shared); estas clases son el espejo
   de las `.bf-*` del panel web (apps/web/src/index.css). La página es clara, como el resto de la
   landing; el escenario es una sala oscura. */
:root {
  --bg: #F1F0ED; --card: #FFFFFF; --ink: #2A241E; --muted: #6B6154; --line: #E4DCCF;
  --terra: #B8704A; --terra-strong: #9A5A38; --terra-tint: #F0DFCE;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); font-size: 16px; line-height: 1.55; padding-inline: 20px; padding-block: 0 56px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--terra-strong); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.page { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 20px 4px; }
.logo { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--terra-strong); text-decoration: none; }
.lang { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; }
.intro { display: flex; flex-direction: column; gap: 8px; max-width: 64ch; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--terra-strong); padding-right: .14em; }
.intro h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.12; margin: 0; text-wrap: balance; }
.intro p { margin: 0; color: var(--muted); font-size: 17px; }

/* ── Escenario ────────────────────────────────────────────────────────────── */
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0c0b0a; color: #EFEAE0;
  container-type: size; container-name: bfstage; cursor: pointer; user-select: none; box-shadow: 0 30px 70px -30px rgba(42,36,30,.55); }
@media (max-width: 700px) { .stage { aspect-ratio: 3 / 4; border-radius: 14px; } }
.stage:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
body.rec { padding: 0; background: #0c0b0a; }
body.rec .stage { position: fixed; inset: 0; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; box-shadow: none; cursor: none; }
body.rec .page > :not(.stage-wrap) { display: none; }
body.rec .controls, body.rec .bf-ov { display: none !important; }

.bf-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.bf-layer.in { opacity: 1; }
.bf-scene { position: absolute; inset: 0; overflow: hidden; }
.stage.paused .bf-layer:not(.fresh), .stage.paused .bf-layer:not(.fresh) *,
.stage.paused .bf-layer.fresh .bf-kb { animation-play-state: paused !important; }
.bf-ph-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; max-width: none; filter: blur(3cqmin) brightness(.42) saturate(.9); }
.bf-kb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none; animation: bf-kb var(--d, 4s) linear forwards; will-change: transform; }
@keyframes bf-kb { from { transform: translate(var(--x0), var(--y0)) scale(var(--s0)); } to { transform: translate(var(--x1), var(--y1)) scale(var(--s1)); } }
.bf-cell { position: relative; overflow: hidden; background: #1b1916; }
.bf-rise { animation: bf-rise 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--dl, 0s); }
@keyframes bf-rise { from { opacity: 0; transform: translateY(2.5cqmin); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.bf-pop { display: inline-block; animation: bf-pop .7s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--dl, 0s); }
@keyframes bf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.bf-av { border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; background: #2A2622; }
.bf-av img { width: 100%; height: 100%; object-fit: cover; }
/* Enlace de película real: no hay fotos de personas, así que el avatar es su inicial. */
.bf-av-init { background: hsl(var(--h) 32% 30%); }
.bf-av-init svg { width: 100%; height: 100%; }
.bf-av-init text { fill: #F2EDE2; font-family: var(--serif); font-size: 46px; font-weight: 600; }
.bf-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8cqmin; gap: 2.4cqmin; }
.bf-ey { font-size: 3cqmin; letter-spacing: .2em; text-transform: uppercase; color: #C8C2B4; font-weight: 600; padding-right: .2em; }
.bf-title { font-family: var(--serif); font-weight: 500; font-size: 10.5cqmin; line-height: 1.08; margin: 0; text-wrap: balance; max-width: 24ch; }
.bf-sub { font-size: 3.6cqmin; color: #C8C2B4; }
.bf-muted { font-family: var(--serif); font-style: italic; font-size: 3.4cqmin; color: #8E8879; }
.bf-rule { width: 9cqmin; height: 2px; background: #B8704A; border-radius: 2px; }
.bf-cover-bg { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(1.4cqmin) brightness(.36) saturate(.9); animation: bf-drift 14s ease-out forwards; }
@keyframes bf-drift { from { transform: scale(1.05); } to { transform: scale(1.14); } }
.bf-author { background: radial-gradient(ellipse at 50% 35%, hsl(var(--h) 22% 17%) 0%, #0e0d0c 75%); }
.bf-author .bf-av { width: 24cqmin; height: 24cqmin; box-shadow: 0 0 0 1cqmin rgba(239,234,224,.08); }
.bf-name { font-family: var(--serif); font-weight: 500; font-size: 10cqmin; line-height: 1.05; margin: 0; }
.bf-tag { display: inline-flex; font-size: 2.8cqmin; padding: .8cqmin 2.2cqmin; border-radius: 99px; border: 1px solid rgba(239,234,224,.12); color: #C8C2B4; }
.bf-shade { position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgba(8,7,6,.85), rgba(8,7,6,0)); }
.bf-cap { position: absolute; left: 4cqmin; bottom: 4cqmin; right: 4cqmin; display: flex; align-items: center; gap: 1.8cqmin; font-size: 3.1cqmin; flex-wrap: wrap; }
.bf-cap .bf-av { width: 6.4cqmin; height: 6.4cqmin; }
.bf-cap b { font-weight: 600; }
.bf-cap span { color: #C8C2B4; }
.bf-more { margin-left: auto; background: rgba(18,17,16,.7); border: 1px solid rgba(239,234,224,.12); padding: .8cqmin 2cqmin; border-radius: 99px; }
.bf-grid2, .bf-grid3 { position: absolute; inset: 0; display: grid; gap: .9cqmin; background: #0c0b0a; }
.bf-grid2 { grid-template-columns: 1fr 1fr; }
.bf-grid3 { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b" "a c"; }
.bf-grid3 .bf-cell:nth-child(1) { grid-area: a; } .bf-grid3 .bf-cell:nth-child(2) { grid-area: b; } .bf-grid3 .bf-cell:nth-child(3) { grid-area: c; }
@container bfstage (aspect-ratio < 1) {
  .bf-grid2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .bf-grid3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1.5fr 1fr; grid-template-areas: "a a" "b c"; }
}
.bf-text { background: radial-gradient(ellipse at 30% 20%, hsl(var(--h) 20% 15%) 0%, #0e0d0c 70%); }
.bf-quote { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4cqmin; padding: 9cqmin 10cqw; }
@container bfstage (aspect-ratio < 1) { .bf-quote { padding: 10cqmin 8cqw; } }
.bf-qt { font-family: var(--serif); margin: 0; line-height: 1.38; text-wrap: pretty; max-width: 34ch; }
.bf-qt.s1 { font-size: 7.2cqmin; } .bf-qt.s2 { font-size: 6cqmin; } .bf-qt.s3 { font-size: 5.1cqmin; }
.bf-quote .bf-qt::before { content: "\201C"; display: block; font-size: 2.2em; line-height: .6; color: #B8704A; margin-bottom: .1em; }
.bf-by { display: flex; align-items: center; gap: 2cqmin; font-size: 3.3cqmin; color: #C8C2B4; }
.bf-by .bf-av { width: 7.4cqmin; height: 7.4cqmin; }
.bf-by .pg { margin-left: auto; color: #6A6560; font-variant-numeric: tabular-nums; }
.bf-overlay-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 7cqmin 8cqmin; display: flex; flex-direction: column; gap: 3cqmin; background: linear-gradient(to top, rgba(8,7,6,.92) 20%, rgba(8,7,6,0)); }
.bf-overlay-text .bf-qt { font-size: 5.2cqmin; max-width: 40ch; }
.bf-closing { background: radial-gradient(ellipse at 50% 110%, rgba(184,112,74,.35) 0%, #0e0d0c 60%); }
.bf-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 3cqmin 4cqmin; max-width: 86cqw; }
.bf-face { display: flex; flex-direction: column; align-items: center; gap: 1cqmin; font-size: 2.8cqmin; color: #C8C2B4; }
.bf-face .bf-av { width: 12cqmin; height: 12cqmin; }

.bf-ov { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; background: rgba(10,9,8,.55); }
.bf-ov.start { background: linear-gradient(to top, rgba(10,9,8,.85), rgba(10,9,8,.1) 65%); justify-content: flex-end; padding-bottom: 7%; }
.bf-big { display: inline-flex; align-items: center; gap: 12px; background: var(--terra); color: #fff; border: 0; border-radius: 99px; padding: 14px 26px 14px 20px; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(184,112,74,.7); }
.bf-big:disabled { background: #322D28; color: #8E8879; box-shadow: none; cursor: progress; }
.bf-big svg { width: 22px; height: 22px; }
.bf-ov .note { font-size: 13px; color: #C8C2B4; margin: 0; }
.bf-ghost { background: rgba(26,24,21,.85); border: 1px solid rgba(239,234,224,.18); color: #EFEAE0; border-radius: 99px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.bf-gallery { position: absolute; inset: 0; z-index: 6; background: rgba(10,9,8,.97); display: flex; flex-direction: column; cursor: default; }
.bf-gallery header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.bf-gallery h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; }
.bf-gallery .g { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 0 16px 16px; align-content: start; }
.bf-gallery .g img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }

/* ── Controles (bajo el escenario, en la propia página) ──────────────────── */
.controls { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--terra-strong); border-color: transparent; color: #fff; min-width: 52px; height: 52px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn[aria-pressed="true"] { border-color: var(--terra); background: var(--terra-tint); color: var(--terra-strong); }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.now { flex: 1; min-width: 140px; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { position: relative; display: flex; gap: 2px; height: 10px; }
.bar button { border: 0; padding: 0; border-radius: 2px; cursor: pointer; opacity: .35; min-width: 2px; }
.bar button.cur { opacity: 1; }
.head { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); border-radius: 2px; pointer-events: none; }
.settings { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.settings > div { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-right: .13em; }
.fitnote { font-size: 13px; color: var(--muted); margin: 0; max-width: 46ch; }

/* ── Explicación + llamada ───────────────────────────────────────────────── */
.explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .explain { grid-template-columns: minmax(0, 1fr); } }
.explain div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.explain h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.explain p { margin: 0; color: var(--muted); font-size: 15px; }
.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--terra-tint); border-radius: 18px; padding: 28px 20px; }
.cta h2 { font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); font-weight: 600; margin: 0; text-wrap: balance; }
.cta p { margin: 0; color: var(--muted); max-width: 52ch; }
.cta .go { display: inline-flex; align-items: center; justify-content: center; background: var(--terra-strong); color: #fff; font-weight: 600; text-decoration: none; border-radius: 12px; padding: 14px 26px; }
.small { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .bf-kb { animation: none; transform: none; }
  .bf-cover-bg { animation: none; }
  .bf-rise, .bf-pop { animation-duration: .01s; }
}