/* ============================================================
   章：胶片放映厅（reel23 / esaPersona / carta）
   暗场、颗粒、字幕层级、聚光。
   ============================================================ */

:root {
  --film-bg: #0a0908;
  --film-warm: #2c2620;
  --film-cream: #ffe9bd;
  --film-sub: #b8afa0;
  --film-dim: #6a635a;
}

.ch-film { background: radial-gradient(ellipse at 50% 30%, var(--film-warm) 0%, var(--film-bg) 72%);
  color: #efe9df; position: relative; }
.ch-film::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.film-frame { width: min(680px, 92vw); margin: 0 auto; position: relative; z-index: 2; }
.film-frame.ancho { width: min(1000px, 94vw); }
.film-frame.centro { text-align: center; }
/* 章节开场牌：加大加亮，给出明确的段落感 */
.frame-label { font-size: clamp(16px, 2.4vw, 22px); font-weight: 600; letter-spacing: .22em;
  color: var(--film-cream); text-transform: uppercase;
  padding-top: 14px; border-top: 3px solid rgba(255,233,189,.55); display: inline-block; }
.film-title { margin: 16px 0 26px; display: grid; gap: 6px; }
.film-title span { font-family: var(--f-serif-zh); font-weight: 700; font-size: clamp(24px, 4.4vw, 38px);
  letter-spacing: .04em; text-shadow: 0 0 30px rgba(255,233,189,.25); }
.film-title small { font-size: 13px; color: var(--film-sub); letter-spacing: .2em; }
.ch-film .bi .es { color: var(--film-cream); font-size: 18px; }
.ch-film .bi .zh { color: var(--film-sub); opacity: 1; }
.film-marca { margin-top: 30px; display: grid; gap: 4px; text-align: center; }
.film-marca .zh-marca { font-family: var(--f-serif-zh); font-size: 22px; letter-spacing: .3em; color: var(--film-cream); }
.film-marca em { font-family: var(--f-serif-es); font-size: 15px; color: var(--film-sub); }

/* —— 2024 数据条：与成绩单同款——数字直落页面，不套底色 —— */
.ticket-datos { margin: 46px 0 8px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.ticket-datos .mono { font-size: clamp(15px, 2.3vw, 21px); font-weight: 600;
  letter-spacing: .05em; color: var(--film-cream); }
.ticket-datos .zh { font-size: 13px; color: var(--film-sub); letter-spacing: .04em; }

/* —— 相框板：照片全貌贴板（不裁切、错落、胶带固定） —— */
.tablero { display: flex; flex-wrap: wrap; gap: 26px 22px; justify-content: center;
  align-items: flex-start; margin: 18px calc(50% - 47vw) 30px; width: 94vw; max-width: 1150px; }
.tablero figure, .tablero .foto { margin: 0; }
.tablero img { display: block; height: auto; border: 10px solid #f7f2e8; border-bottom-width: 30px;
  box-shadow: 0 14px 36px rgba(0,0,0,.55); }
.tablero > * { position: relative; flex: 0 1 auto; }
.tablero img { max-width: min(340px, 82vw); max-height: 340px; width: auto; }
.tablero > *:nth-child(1) { transform: rotate(-3deg); }
.tablero > *:nth-child(2) { transform: rotate(2deg) translateY(14px); }
.tablero > *:nth-child(3) { transform: rotate(-1.5deg); }
.tablero > *:nth-child(4) { transform: rotate(2.6deg) translateY(-8px); }
.tablero > *:nth-child(5) { transform: rotate(-2.2deg) translateY(10px); }
.tablero > *:nth-child(6) { transform: rotate(1.4deg); }
.tablero > *::before { content: ""; position: absolute; top: -12px; left: 50%; width: 88px; height: 26px;
  background: rgba(255,241,181,.7); transform: translateX(-50%) rotate(-5deg);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 2; }
.tablero > *:nth-child(2n)::before { transform: translateX(-50%) rotate(4deg); background: rgba(159,216,255,.55); }

/* —— esa persona 黑场聚光（background-02：我们的照片做底） —— */
.ch-film.negro { background: #050404; }
/* 章节牌整行平铺：la edad es solo un número · 年龄只是一个数字 */
#s-esa .frame-label { display: block; width: 94vw; margin: 0 calc(50% - 47vw);
  border-top: none; text-align: center; letter-spacing: .38em;
  font-size: clamp(17px, 2.6vw, 26px); white-space: nowrap; overflow: visible; }
.esa-bg { position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/images/background-02.png") center 26% / cover no-repeat;
  opacity: .42; }
.esa-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,4,4,.92) 0%, rgba(5,4,4,.55) 40%,
    rgba(5,4,4,.62) 70%, rgba(5,4,4,.95) 100%); }
.burla { display: grid; gap: 6px; margin: 40px 0; }
.burla .es { font-size: 20px; font-style: italic; color: var(--film-sub); }
.burla .zh { font-size: 13px; color: var(--film-dim); }
.spotlight { margin: 46px 0 10px; display: grid; gap: 10px; }
.spotlight .es { font-size: clamp(30px, 5.6vw, 48px); color: var(--film-cream);
  text-shadow: 0 0 44px rgba(255,233,189,.45); font-style: italic; }
.spotlight .zh { font-size: 16px; letter-spacing: .3em; color: var(--film-sub); }
.lema { margin-top: 40px; font-size: 12px; letter-spacing: .34em; color: var(--film-dim); text-transform: uppercase; }

/* —— 旁白播放器（与 BGM 同播，不抢占） —— */
.narracion { text-align: center; margin: 4px 0 22px; }
.btn-narrar { font: 600 14px var(--f-ui); padding: 11px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,233,189,.5); background: rgba(255,233,189,.1); color: var(--film-cream); }
.btn-narrar:hover { background: rgba(255,233,189,.22); }
.btn-narrar:focus-visible { outline: 3px solid var(--film-cream); outline-offset: 2px; }
.btn-narrar.sonando { background: var(--film-cream); color: #33291d; }
.btn-narrar.falta { opacity: .55; cursor: default; }

/* —— carta 背景：左墨西哥（金字塔）· 右中国（宝塔），配两侧色晕 —— */
.ch-film.carta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,138,90,.26) 0%, transparent 36%,
    transparent 64%, rgba(216,36,52,.27) 100%); }
.fondo-lado { position: absolute; bottom: 4vh; width: min(320px, 30vw); pointer-events: none;
  fill: none; stroke: rgba(255,233,189,.3); stroke-width: 2.5; stroke-linecap: round;
  stroke-linejoin: round; }
.fondo-mx { left: 2vw; }
.fondo-cn { right: 2vw; }
.fondo-cn circle { fill: rgba(255,233,189,.3); stroke: none; }

/* —— 信桌：一张宽纸，中缝分隔，段落一对一对左右并排浮现 —— */
.carta-mesa { position: relative; background: #f7f2e8; color: #33291d; border-radius: 6px;
  padding: 38px 36px 120px; box-shadow: 0 22px 60px rgba(0,0,0,.6);
  font-size: 14.5px; line-height: 1.85; }
.carta-mesa::before { content: ""; position: absolute; top: 34px; bottom: 110px; left: 50%;
  border-left: 1px dashed rgba(160,141,109,.5); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 9px 0; }
.par.cabecera h3 { font-size: 10.5px; letter-spacing: .3em; color: #a08d6d;
  text-transform: uppercase; margin: 0 0 4px; }
.par p { margin: 0; }
/* 正文字体：西语=LittleMax 落款同款手写体（不加粗），中文=楷体；均较原稿放大 */
.p-es { font-family: var(--f-hand-es); font-weight: 500; font-size: 19.5px; line-height: 1.5; }
.p-zh { font-family: "Kaiti SC", "KaiTi", "楷体", "STKaiti", var(--f-serif-zh); font-size: 16.5px; }
.par .saludo { font-size: 20px; }
.par .despedida { margin-top: 14px; display: grid; }
.par .despedida b { font-family: var(--f-hand-es); font-size: 24px; }

/* —— 信末印章：左圆章（心+LITTLE MAX），右篆刻方章（小马） —— */
.sello { position: absolute; bottom: 22px; opacity: .82;
  mix-blend-mode: multiply; pointer-events: none; }
.sello svg { display: block; }
.sello-redondo { width: 84px; left: 34px; transform: rotate(-12deg); }
.sello-redondo .s-aro { fill: none; stroke: #c23b2e; stroke-width: 4; }
.sello-redondo .s-fino { stroke-width: 1.6; stroke-dasharray: 3 4; }
.sello-redondo .s-corazon { fill: #c23b2e; }
.sello-redondo .s-txt { fill: #c23b2e; font: 700 9.5px var(--f-mono); letter-spacing: .18em;
  text-anchor: middle; }
.sello-cuadrado { width: 66px; right: 34px; transform: rotate(8deg); }
.sello-cuadrado .s-marco { fill: #c23b2e; }
.sello-cuadrado .s-zh { fill: #f7f2e8; font: 700 30px var(--f-serif-zh); text-anchor: middle; }

@media (max-width: 760px) {
  .par { gap: 20px; }
  .carta-mesa { padding: 26px 18px 110px; font-size: 12px; }
  .fondo-lado { opacity: .55; }
}