/* ===========================================================================
   FRAXTAL · Journeys — estilos de la página /viajes
   Reutiliza los tokens de landing.css (--abyss/--amber/--cyan/--cream/--line…).
   Reproductor YouTube + playlist + mini-player. Mundo cósmico, factor WOW.
   ========================================================================= */

.jx-hero{ padding-top:clamp(96px,16vh,160px); padding-bottom:8px; }
.jx-hero__title{
  font-family:var(--display); font-weight:700; line-height:.98; letter-spacing:-.02em;
  font-size:clamp(2.8rem,9vw,6rem); margin:.12em 0 .18em;
}
.jx-hero__lead{ font-size:clamp(1.04rem,2.1vw,1.28rem); color:var(--cream-dim); max-width:620px; margin:0; }
.jx-hero__lead strong{ color:var(--cream); font-weight:600; }

/* ---------- Deck: reproductor + lista ---------- */
.jx-deck{
  display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:clamp(20px,3vw,40px);
  align-items:start;
}
@media (max-width:980px){ .jx-deck{ grid-template-columns:1fr; } }

.jx-main{ min-width:0; }

/* ---------- Escenario / frame ---------- */
.jx-stage{ position:relative; }
.jx-frame{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(212,165,116,.22);
  background:#060606;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4) inset,
             0 0 70px -34px var(--cyan);
}
.jx-yt, .jx-yt iframe{ position:absolute; inset:0; width:100%!important; height:100%!important; border:0; display:block; }

/* Póster cósmico sobre el iframe (hasta que se reproduce) */
.jx-poster{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer;
  background:#060606; display:block; overflow:hidden; z-index:3;
}
.jx-poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02);
  transition:transform .8s var(--ease,cubic-bezier(.16,1,.3,1)); }
.jx-poster:hover img{ transform:scale(1.06); }
.jx-poster__scrim{ position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,.05), rgba(6,6,6,.55) 75%); }
.jx-poster__hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-family:var(--display); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--cream); opacity:.92; text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.jx-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(64px,9vw,94px); height:clamp(64px,9vw,94px); border-radius:50%;
  display:grid; place-items:center; color:#1a120a;
  background:linear-gradient(120deg,var(--amber),#c79462);
  box-shadow:0 18px 50px -14px rgba(212,165,116,.95), 0 0 0 10px rgba(212,165,116,.10);
  transition:transform .35s var(--ease,ease), box-shadow .35s ease;
}
.jx-play svg{ width:42%; height:42%; margin-left:6%; }
.jx-poster:hover .jx-play{ transform:translate(-50%,-50%) scale(1.07); box-shadow:0 22px 60px -12px rgba(212,165,116,1), 0 0 0 14px rgba(212,165,116,.12); }
.jx-play::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(212,165,116,.45); animation:jxPulse 2.6s ease-out infinite; }
@keyframes jxPulse{ 0%{transform:scale(.85);opacity:.8} 100%{transform:scale(1.5);opacity:0} }

/* Al reproducir: ocultar póster, mostrar iframe */
.jx-deck.jx-playing .jx-poster{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s ease, visibility 0s .4s; }

/* ---------- Now playing ---------- */
.jx-now{ margin-top:22px; }
.jx-now__sub{ font-family:var(--display); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan); }
.jx-now__title{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.05; letter-spacing:-.015em; margin:.18em 0 .5em; color:var(--cream); }
.jx-now__desc{ color:var(--cream-dim); max-width:62ch; margin:0 0 18px; font-size:1.02rem; }
.jx-now__foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.jx-tag{ font-family:var(--display); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-soft);
  border:1px solid rgba(212,165,116,.4); border-radius:999px; padding:5px 12px; }
.jx-dot{ color:var(--cream-dim); }
.jx-now__dur{ color:var(--cream-dim); font-size:.92rem; }
.jx-yt-link{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--amber-soft); font-weight:600; font-size:.92rem; transition:gap .25s ease,color .25s ease; }
.jx-yt-link svg{ width:16px; height:16px; }
.jx-yt-link:hover{ gap:11px; color:var(--cream); }

/* ---------- Playlist ---------- */
.jx-list{
  border:1px solid var(--line,rgba(232,220,196,.1)); border-radius:18px;
  background:linear-gradient(180deg, rgba(232,220,196,.035), rgba(232,220,196,.012));
  padding:18px 14px; backdrop-filter:blur(8px);
}
.jx-list__head{ display:flex; align-items:center; justify-content:space-between; padding:2px 6px 14px; }
.jx-list__count{ font-size:.78rem; color:var(--cream-dim); }
.jx-list__scroll{ display:flex; flex-direction:column; gap:8px; max-height:560px; overflow:auto; padding-right:4px; }
.jx-list__scroll::-webkit-scrollbar{ width:8px; }
.jx-list__scroll::-webkit-scrollbar-thumb{ background:rgba(212,165,116,.25); border-radius:8px; }
@media (max-width:980px){ .jx-list__scroll{ max-height:none; } }

.jx-item{
  display:flex; gap:12px; align-items:center; text-align:left; cursor:pointer;
  padding:8px; border-radius:13px; border:1px solid transparent; background:transparent;
  color:inherit; width:100%; transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.jx-item:hover{ background:rgba(232,220,196,.05); border-color:rgba(212,165,116,.22); transform:translateX(2px); }
.jx-item.is-active{ background:rgba(212,165,116,.10); border-color:rgba(212,165,116,.45); }
.jx-item__thumb{ position:relative; flex:0 0 124px; width:124px; aspect-ratio:16/9; border-radius:9px; overflow:hidden; background:#0c0c0c; }
.jx-item__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.jx-item__dur{ position:absolute; right:5px; bottom:5px; font-size:.66rem; padding:2px 6px; border-radius:5px;
  background:rgba(6,6,6,.82); color:var(--cream); letter-spacing:.02em; }
.jx-item__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.jx-item__num{ font-family:var(--display); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
.jx-item__title{ font-family:var(--display); font-weight:600; font-size:1rem; color:var(--cream); line-height:1.1; }
.jx-item__sub{ font-size:.8rem; color:var(--cream-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Ecualizador en el item activo cuando suena */
.jx-item__playing{ position:absolute; left:6px; top:6px; display:none; gap:2px; align-items:flex-end; height:14px;
  padding:3px 4px; border-radius:5px; background:rgba(6,6,6,.7); }
.jx-item__playing i{ width:2.5px; background:var(--cyan); border-radius:2px; height:40%; }
.jx-deck.jx-playing .jx-item.is-active .jx-item__playing{ display:inline-flex; }
.jx-deck.jx-playing .jx-item.is-active .jx-item__playing i{ animation:jxEq .9s ease-in-out infinite; }
.jx-item__playing i:nth-child(2){ animation-delay:.25s!important; } .jx-item__playing i:nth-child(3){ animation-delay:.5s!important; }
@keyframes jxEq{ 0%,100%{height:25%} 50%{height:95%} }

/* Teaser próximo viaje */
.jx-item--soon{ opacity:.6; cursor:default; }
.jx-item--soon:hover{ transform:none; background:transparent; border-color:transparent; }
.jx-item__thumb--soon{ display:grid; place-items:center; border:1px dashed rgba(212,165,116,.3); }
.jx-item__thumb--soon .sigil{ color:var(--amber); font-size:1.5rem; }

/* ---------- Mini-player (al hacer scroll) ---------- */
.jx-mini-bar{ position:absolute; top:8px; right:8px; z-index:5; display:none; }
.jx-mini-btn{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(232,220,196,.2); background:rgba(6,6,6,.7); color:var(--cream); }
.jx-mini-btn svg{ width:17px; height:17px; }

.jx-deck.jx-mini .jx-frame{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:min(360px,72vw); aspect-ratio:16/9;
  border-radius:14px; box-shadow:0 26px 70px -20px rgba(0,0,0,.95), 0 0 50px -28px var(--cyan);
  animation:jxMiniIn .35s var(--ease,cubic-bezier(.16,1,.3,1));
}
.jx-deck.jx-mini.jx-playing .jx-mini-bar{ display:block; }
@keyframes jxMiniIn{ from{ transform:translateY(16px) scale(.96); opacity:0 } to{ transform:none; opacity:1 } }
@media (max-width:560px){ .jx-deck.jx-mini .jx-frame{ right:10px; bottom:10px; width:62vw; } }

/* En móvil, que el enlace de YouTube baje de línea en vez de cortarse */
@media (max-width:560px){
  .jx-yt-link{ margin-left:0; }
  .jx-now__foot{ gap:10px 12px; }
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion:reduce){
  .jx-play::after, .jx-item__playing i{ animation:none!important; }
  .jx-poster img{ transition:none; }
  .jx-deck.jx-mini .jx-frame{ animation:none; }
}