/* ============================================================
   章：航线日志（reel24 / reel25）
   深夜机舱、护照盖章、明信片、忠告框、波浪。
   ============================================================ */

:root {
  --fl-bg: #10151d;
  --fl-deep: #29405e;
  --fl-paper: #f4f6f8;
  --fl-amber: #ffb100;
  --fl-sub: #9fb0c2;
}

.ch-flight { background: linear-gradient(180deg, var(--fl-bg) 0%, var(--fl-deep) 100%);
  color: #dfe7f1; font-family: "Space Grotesk", var(--f-ui); }
.flight-frame { width: min(720px, 92vw); margin: 0 auto; position: relative; z-index: 2; }
.ch-flight .frame-label { color: var(--fl-amber); opacity: .9; }
.ch-flight .bi .es { font-size: 19px; }
.ch-flight .bi .zh { color: var(--fl-sub); opacity: 1; font-family: var(--f-ui); }
.line-route .line-path { stroke: rgba(255,177,0,.5); stroke-width: 2; }

/* —— 盖章（向下留出呼吸位） —— */
.stamps { display: flex; gap: 12px; flex-wrap: wrap; margin: 40px 0 28px; }
.stamp { border: 2px solid rgba(223,231,241,.45); color: rgba(223,231,241,.8); border-radius: 999px;
  padding: 7px 15px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em;
  transform: rotate(-4deg); }
.stamp:nth-child(2n) { transform: rotate(3deg); border-style: dashed; border-color: rgba(255,177,0,.55); color: var(--fl-amber); }

/* —— 动态航线图（参考航旅纵横气质：深海蓝、光点群、跨洋长弧） —— */
.mapa-rutas { margin: 34px calc(50% - 47vw) 30px; width: 94vw; max-width: 1150px;
  justify-self: center; background: #0b1220; border-radius: 14px; padding: 22px 22px 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.mapa-rutas figcaption { font-size: 11px; letter-spacing: .3em; color: var(--fl-sub);
  text-transform: uppercase; margin-bottom: 8px; }
.mapa-rutas svg { width: 100%; height: auto; display: block; }
/* 各大洲：清晰轮廓线暗暗打底（线稿，不填色块） */
.continentes path { fill: rgba(159,216,255,.03); stroke: rgba(159,216,255,.22);
  stroke-width: 1.1; stroke-linejoin: round; }
.ciudades circle { fill: #9fd8ff; opacity: .9;
  filter: drop-shadow(0 0 5px rgba(159,216,255,.9)); }
.rutas-cn path, .rutas-mundo path { fill: none; stroke-width: 1.3;
  stroke: rgba(159,216,255,.4); stroke-dasharray: 500; stroke-dashoffset: 500;
  animation: trazar 2.4s ease-out forwards; }
.rutas-cn path:nth-child(1) { animation-delay: .1s; } .rutas-cn path:nth-child(2) { animation-delay: .25s; }
.rutas-cn path:nth-child(3) { animation-delay: .4s; } .rutas-cn path:nth-child(4) { animation-delay: .55s; }
.rutas-cn path:nth-child(5) { animation-delay: .7s; } .rutas-cn path:nth-child(6) { animation-delay: .85s; }
.rutas-cn path:nth-child(7) { animation-delay: 1s; } .rutas-cn path:nth-child(8) { animation-delay: 1.15s; }
.rutas-mundo path { stroke-width: 1.6; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.r-tyo { animation-delay: 1.4s !important; } .r-cdg { animation-delay: 1.7s !important; }
.r-lax { animation-delay: 2s !important; } .r-scl { animation-delay: 2.3s !important; }
.r-mex { animation-delay: 2.7s !important; } .r-mex2 { animation-delay: 3s !important; }
.a-mex { stroke: var(--fl-amber) !important; stroke-width: 2.2 !important;
  filter: drop-shadow(0 0 6px rgba(255,177,0,.7)); }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.nodos circle { fill: #dfe7f1; }
.nodos .n-mex { fill: var(--fl-amber); filter: drop-shadow(0 0 10px rgba(255,177,0,.95));
  animation: pulso-mex 2s ease-in-out infinite; }
@keyframes pulso-mex { 0%,100% { r: 6; } 50% { r: 8; } }
.mapa-rutas .et { font-family: var(--f-mono); font-size: 13px; fill: var(--fl-sub); letter-spacing: .12em; }
.mapa-rutas .et-mex { fill: var(--fl-amber); font-weight: 600; }
.mapa-rutas .et-csx { fill: #ff6d84; }
.corazon-csx path { fill: #ff4d68; stroke: none;
  filter: drop-shadow(0 0 9px rgba(255,77,104,.95));
  animation: latido 1.5s ease-in-out infinite; transform-origin: 0 6px; }
.mapa-leyenda { font-size: 12.5px; color: var(--fl-sub); text-align: right; margin-top: 8px;
  letter-spacing: .06em; }

/* —— 2025 数据条：本幕转折点（无框，直接落页） —— */
.giro-datos { display: grid; gap: 8px; margin: 44px 0 14px; }
.giro-datos .datos-linea { font-size: 14px; color: var(--fl-sub); letter-spacing: .04em; }
.giro-datos > .zh { font-size: 13px; color: var(--fl-sub); opacity: .8; }
.giro-frase { font-size: clamp(22px, 3.6vw, 32px); font-weight: 600; line-height: 1.35;
  color: var(--fl-amber); }
.giro-zh { font-size: 14px; color: #dfe7f1; }

/* —— 中轴时间线：虚线航迹 + 小飞机随滚动划过 + 五国交替浮现 —— */
.tl { position: relative; margin: 40px calc(50% - 47vw); width: 94vw; max-width: 1150px;
  justify-self: center; padding: 30px 0 10px; }
.tl-linea { position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-left: 2px dashed rgba(255,177,0,.45); transform: translateX(-1px); }
.tl-avion { position: absolute; left: 50%; top: 0; width: 40px;
  transform: translate(-50%, -50%) rotate(180deg); z-index: 3;
  fill: var(--fl-amber); filter: drop-shadow(0 0 10px rgba(255,177,0,.75)); }
.tl-parada { position: relative; width: 46%; margin: 0 0 54px; }
.tl-parada.izq { margin-right: auto; text-align: right; }
.tl-parada.der { margin-left: auto; }
.tl-punto { position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--fl-amber); box-shadow: 0 0 12px rgba(255,177,0,.85); }
.tl-parada.izq .tl-punto { right: calc(-8.7% - 6px); }
.tl-parada.der .tl-punto { left: calc(-8.7% - 6px); }
.tl-pais { font-size: 14px; letter-spacing: .24em; color: var(--fl-amber); margin-bottom: 14px; }
.tl-fotos { display: flex; flex-wrap: wrap; gap: 12px; }
.tl-parada.izq .tl-fotos { justify-content: flex-end; }
.tl-fotos figure { margin: 0; position: relative; flex: 1 1 46%; max-width: 100%; }
.tl-fotos img { width: 100%; height: auto; display: block; border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.tl-fotos figure:only-child, .tl-fotos figure:first-child:nth-last-child(3) { flex-basis: 100%; }
.tl-fotos figcaption { margin-top: 6px; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .1em; color: var(--fl-sub); text-transform: uppercase; }
@media (max-width: 720px) {
  .tl-linea, .tl-avion { left: 14px; }
  .tl-parada, .tl-parada.izq { width: calc(100% - 44px); margin-left: 44px; text-align: left; }
  .tl-parada.izq .tl-punto, .tl-parada.der .tl-punto { left: -36px; right: auto; }
  .tl-parada.izq .tl-fotos { justify-content: flex-start; }
}

/* —— 小故事贴纸 —— */
.anecdotas { list-style: none; padding: 0; margin: 4px 0 30px; display: grid; gap: 10px; }
.anecdotas li { display: flex; gap: 12px; align-items: start; font-size: 14.5px; color: var(--fl-sub);
  background: rgba(244,246,248,.06); border-left: 2px solid var(--fl-amber); padding: 10px 14px; border-radius: 4px; }
.anecdotas .ic { font-size: 20px; line-height: 1.2; }

/* —— 忠告（本章立意）：不套框；中文整行平铺贯穿页面 —— */
.consejo { display: grid; gap: 16px; margin: 64px calc(50% - 47vw) 30px; width: 94vw;
  max-width: none; justify-self: center; text-align: center; }
.consejo .es { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.55; font-weight: 600; color: #fff; }
.consejo .zh { font-size: clamp(13px, 1.72vw, 21px); color: #dfe7f1; letter-spacing: .04em; }
@media (min-width: 900px) {
  .consejo .zh { white-space: nowrap; }
}
.consejo small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--fl-amber); }

/* —— 三年成绩单（航线幕末，数字直落深蓝页面） —— */
.boleta { display: grid; gap: 16px; margin: 56px 0 10px; text-align: center; justify-items: center; }
.stat-vuelo { display: grid; gap: 6px; }
.stat-vuelo .stat-linea { font-size: clamp(17px, 2.8vw, 26px); font-weight: 600;
  letter-spacing: .05em; color: var(--fl-amber); }
.stat-vuelo .zh { font-size: 13px; color: var(--fl-sub); }
.stat-vuelo small { font-size: 13px; color: #dfe7f1; letter-spacing: .12em; }
.stat-vuelo .sub-zh { font-family: var(--f-ui); font-size: 12.5px; color: var(--fl-sub); letter-spacing: .1em; }

/* —— reel25 波浪 —— */
.olas { background: linear-gradient(180deg, var(--fl-deep) 0%, #1b2f45 60%, #14273c 100%); }
.grande-flight { font-size: clamp(24px, 4vw, 34px); font-weight: 600; color: var(--fl-amber); }
.ola { height: 90px; margin-top: 40px; opacity: .5;
  background:
    radial-gradient(60px 22px at 12% 100%, transparent 62%, rgba(159,176,194,.5) 63% 68%, transparent 69%),
    radial-gradient(80px 28px at 42% 100%, transparent 62%, rgba(159,176,194,.4) 63% 68%, transparent 69%),
    radial-gradient(70px 24px at 70% 100%, transparent 62%, rgba(159,176,194,.5) 63% 68%, transparent 69%),
    radial-gradient(90px 30px at 94% 100%, transparent 62%, rgba(159,176,194,.35) 63% 68%, transparent 69%); }

@media (max-width: 680px) {
  .postales { grid-template-columns: repeat(2, 1fr); }
}