/* ============================================================
   章：杂志专题（credo / juventud / maraton / anexo）
   纸白、大衬线、引语、首字下沉的克制排版。
   ============================================================ */

:root {
  --mag-bg: #fdfcfa;
  --mag-ink: #171310;
  --mag-red: #c2372e;
  --mag-line: #d8d2c6;
  --mag-sub: #6b6259;
}

.ch-mag { background: var(--mag-bg); color: var(--mag-ink); }
.mag-frame { width: min(720px, 92vw); margin: 0 auto; }
.kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  border-top: 3px solid var(--mag-ink); padding-top: 10px; margin-bottom: 26px; color: var(--mag-sub); }
.ch-mag .bi .es { font-size: 20px; line-height: 1.7; }
.ch-mag .serif-es { font-family: "Playfair Display", serif; font-style: italic; }
.ch-mag .bi .zh { color: var(--mag-sub); }
/* 关键话语不套框，直接落在页面上 */
.pullquote { padding: 26px 8px; margin: 30px 0; text-align: center; display: grid; gap: 8px; }
.pullquote .es { font-family: "Playfair Display", serif; font-style: italic;
  font-size: clamp(20px, 3.4vw, 30px); color: var(--mag-red); }
.pullquote .zh { font-family: var(--f-serif-zh); font-size: 14px; letter-spacing: .14em; color: var(--mag-sub); }

/* —— juventud 封面式跨栏 —— */
.mag-cover { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items: center; }
.masthead { font-family: "Playfair Display", serif; font-weight: 700;
  font-size: clamp(38px, 6.5vw, 64px); line-height: 1; margin-bottom: 22px; }
/* —— 青春跨页（编辑部版式：大特写 + 文本列 + 小图带） —— */
.ancho-mag { width: min(1150px, 94vw); }
.editorial { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.feat { position: relative; margin: 0; }
.feat img { width: 100%; display: block; border: 1px solid var(--mag-line);
  box-shadow: 0 22px 60px rgba(23,19,16,.22); }
.feat figcaption { position: absolute; bottom: 0; left: 0; background: var(--mag-ink);
  color: var(--mag-bg); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em;
  padding: 8px 14px; text-transform: uppercase; }
.mag-muro { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.mag-muro figure { position: relative; margin: 0; transform: rotate(var(--r, -1.4deg));
  border: 1px solid var(--mag-line); box-shadow: 0 12px 32px rgba(23,19,16,.16); background: #fff; padding: 6px 6px 24px; }
.mag-muro img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.mag-muro figcaption { position: absolute; bottom: 4px; left: 10px; right: 10px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--mag-sub); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 省略号：故事才刚刚开始，未完待续 */
.puntos-suspensivos { display: grid; gap: 10px; justify-items: center; text-align: center;
  margin-top: 60px; }
.puntos-suspensivos .serif-es { font-size: clamp(44px, 7vw, 72px); line-height: .6; color: var(--mag-red);
  letter-spacing: .3em; }
.puntos-suspensivos small { font-size: 11px; letter-spacing: .26em; color: var(--mag-sub);
  text-transform: uppercase; }

/* —— maraton 跑道与三年总账 —— */
.maraton { background: linear-gradient(180deg, #fdf6ec 0%, var(--mag-bg) 40%); }
.stat-total { display: grid; gap: 6px; margin: 30px 0; padding: 22px 4px; text-align: center; }
.stat-linea { font-size: clamp(16px, 2.6vw, 24px); font-weight: 600; letter-spacing: .04em; }
.stat-total .zh { font-size: 13px; color: var(--mag-sub); }
.stat-total small { font-size: 13px; color: var(--mag-red); letter-spacing: .14em; }
/* 马拉松赛道：双虚线向后滚动（奔跑感）+ 火柴人领跑 + 终点牌 */
.pista-mar { position: relative; margin: 40px calc(50% - 47vw) 44px; width: 94vw; max-width: 1150px;
  justify-self: center; height: 110px; overflow: hidden; }
.carril-mar { position: absolute; left: 0; right: 0; height: 0;
  border-top: 4px dashed rgba(194,55,46,.55); }
.carril-mar.c1 { top: 62px; animation: correr 1.1s linear infinite; }
.carril-mar.c2 { top: 96px; border-top-width: 3px; opacity: .6; animation: correr 1.5s linear infinite; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-52px); } }
.corredor-mar { position: absolute; top: 0; left: 16%; width: 64px; stroke: var(--mag-ink); }
.corredor-mar .leg-a { animation: walk-a .4s infinite; transform-origin: 41px 55px; }
.corredor-mar .leg-b { animation: walk-b .4s infinite; transform-origin: 41px 55px; }
.pista-mar .meta { position: absolute; right: 2%; top: 26px; font-size: 13px; letter-spacing: .3em;
  color: var(--mag-red); border: 2px solid var(--mag-red); padding: 6px 12px; transform: rotate(3deg);
  background: #fff; }
/* 沿途风景与同行者：随机从左向右划过赛道 */
.deriva { position: absolute; left: 0; will-change: transform;
  animation: deriva-cruce linear infinite; }
/* 从右向左划过 */
@keyframes deriva-cruce {
  from { transform: translateX(calc(94vw + 90px)); }
  to { transform: translateX(-90px); }
}
/* 跑者镜像成朝右（🏃‍➡️ 的观感），不依赖新版 emoji 字体 */
.deriva .espejo { display: inline-block; font-style: normal; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .carril-mar, .corredor-mar .leg-a, .corredor-mar .leg-b, .deriva { animation: none; }
}
.gradas { display: grid; gap: 6px; margin-top: 34px; padding-top: 20px;
  border-top: 1px dashed var(--mag-line); }
.gradas .es { font-size: 15px; color: var(--mag-sub); font-style: italic; line-height: 1.75; }
.gradas .zh { font-size: 12.5px; color: #8d857b; letter-spacing: .06em; }

/* —— anexo 折页 —— */
.anexo { background: linear-gradient(180deg, var(--mag-bg), #f4efe6); }
.plegado { background: #fffef9; border: 1px solid var(--mag-line); padding: 44px 40px;
  box-shadow: 0 16px 44px rgba(23,19,16,.12); position: relative; }
/* 折痕线锚定在内容边界：一条在第一段致谢正上方，一条在末段之下 */
#xFragmentos { position: relative; }
#xFragmentos::before { content: ""; position: absolute; left: -40px; right: -40px; top: -12px;
  height: 1px; background: var(--mag-line); opacity: .6; }
#xFragmentos::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: -12px;
  height: 1px; background: var(--mag-line); opacity: .6; }
.fragmento { display: grid; gap: 6px; margin: 22px 0; padding-left: 18px; border-left: 2px solid var(--mag-red); }
.fragmento .zh { font-family: var(--f-serif-zh); font-size: 16px; line-height: 1.9; }
.fragmento .es { font-size: 13px; color: var(--mag-sub); font-style: italic; }

@media (max-width: 680px) {
  .editorial { grid-template-columns: 1fr; gap: 26px; }
  .plegado { padding: 32px 22px; }
}