/* =====================================================================
   UKIYO · Ficha de viaje · tablet y móvil (diseño «Esencias de Indonesia v2»)
   ---------------------------------------------------------------------
   Regla: el escritorio (≥1024px) no cambia. Todo vive dentro de
   @media (max-width:1023px) o (max-width:759px). Fuera de media query
   solo se ocultan elementos que existen únicamente en tablet y móvil.

   Adaptación a WordPress (template-parts/viaje-v2.php):
   - Las reglas van bajo .uk-trip para ganar a viaje-v2.css (.uk-v2 .x)
     y no tocar la cabecera ni el pie del tema.
   - El selector Privado / En grupo es .jseg (en el prototipo, .seg).
   - El enlace a la etapa del mapa lleva data-gostage.
   - La barra de secciones (.mjump) la crea viaje-responsive.js desde
     los [data-mj]; responsive.css de la Home no la incluye.
   ===================================================================== */

/* --- solo existen por debajo de 1024px: ocultos en escritorio --- */
.mjump,.uk-trip .m-only,.uk-trip .hscroll-cue{display:none}

/* =========================== tablet y móvil =========================== */
@media (max-width:1023px){
  .uk-trip .d-only{display:none!important}
  .uk-trip .m-only{display:revert}
  .uk-trip span.m-only{display:inline}

  .uk-trip .jnav,.uk-trip .fab{display:none!important}
  .uk-trip .container{padding-left:clamp(16px,5vw,24px);padding-right:clamp(16px,5vw,24px)}
  .uk-trip .jsec{padding:clamp(2.75rem,8vw,4rem) 0}
  .uk-trip .jhead{margin-bottom:1.6rem}
  .uk-trip .jhead p{display:none}
  .uk-trip .fl input,.uk-trip .fl select,.uk-trip .fl textarea{font-size:16px}

  /* barra de secciones */
  .mjump{display:flex;position:fixed;left:0;right:0;top:var(--navh,64px);z-index:80;gap:6px;padding:8px clamp(16px,5vw,24px);overflow-x:auto;scrollbar-width:none;background:rgba(254,252,248,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line,#E8E0D2);transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s,visibility 0s .3s;font-family:'Satoshi',system-ui,sans-serif}
  .mjump::-webkit-scrollbar{display:none}
  .mjump.show{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s}
  .mjump a{flex-shrink:0;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;font-size:.86rem;font-weight:600;color:var(--ink-soft,#6B6B6B);background:var(--surface,#F5F2ED);white-space:nowrap;text-decoration:none}
  .mjump a.is-on{background:var(--olive-900,#343A2C);color:#fff}
  .uk-trip [data-mj]{scroll-margin-top:calc(var(--navh,64px) + 64px)}

  /* portada */
  .uk-trip .jh{min-height:80svh}

  /* barra inferior: también en tablet */
  .uk-trip .jmob{display:flex;position:fixed;left:max(.7rem,env(safe-area-inset-left));right:max(.7rem,env(safe-area-inset-right));bottom:calc(.7rem + env(safe-area-inset-bottom));z-index:80;align-items:center;gap:.6rem;padding:.55rem .55rem .55rem 1.1rem;border-radius:20px;background:var(--olive-900);color:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .45s var(--ease)}
  .uk-trip .jmob.show{transform:none}
  .uk-trip .jmob div{flex:1;line-height:1.1}
  .uk-trip .jmob small{display:block;font-size:.7rem;color:var(--accent-300);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .uk-trip .jmob b{font-family:var(--disp);font-weight:400;font-size:1.2rem}
  .uk-trip .jmob .btn{min-height:44px;padding:.75rem 1rem;font-size:.9rem}
  .uk-trip .jmob .wa-b{width:44px;height:44px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex-shrink:0}
  .uk-v2.uk-trip{padding-bottom:0}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

  /* resumen: los datos clave primero */
  .uk-trip .jsum{padding-top:2rem}
  .uk-trip .jsum>.container{display:flex;flex-direction:column}
  .uk-trip .facts{order:-1;margin:0 0 2rem;padding:0 0 1.6rem;border-top:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .uk-trip .jsum__g{grid-template-columns:1fr;gap:1.6rem}
  .uk-trip .jsum__t p:not(.lede){display:none}
  .uk-trip .jsum__m{aspect-ratio:16/10}

  /* cómo reservar: pasos solo con título */
  .uk-trip .book{grid-template-columns:1fr;gap:1.6rem}
  .uk-trip .bhow>p,.uk-trip .bhow li span,.uk-trip .bnote{display:none}
  .uk-trip .bhow h3{font-size:1.3rem;margin-bottom:1rem}
  .uk-trip .bhow ol{gap:.6rem}
  .uk-trip .bhow li{align-items:center}

  /* ruta: solo el título y el mapa */
  .uk-trip .rt{grid-template-columns:1fr;gap:0}
  .uk-trip .rt__map{position:relative;top:0;order:-1}
  .uk-trip #jmap{height:min(52svh,420px)}
  .uk-trip .mcap{left:.75rem;right:.75rem;top:.75rem;max-width:none;padding:.65rem .85rem;font-size:.82rem}
  .uk-trip .mleg{left:.75rem;bottom:.75rem;gap:.4rem .8rem;flex-wrap:wrap;font-size:.72rem;padding:.55rem .75rem}
  .uk-trip #tl{display:none!important}
  /* ruta: título corto y paradas en fila deslizable (en vez de la cadena de flechas) */
  .uk-trip #ruta .jhead h2:not(.m-only){display:none}
  .uk-trip #ruta .jhead{margin-bottom:1rem}
  .uk-trip .rstops{display:flex;gap:6px;list-style:none;margin:0 calc(-1*clamp(16px,5vw,24px)) 1rem;padding:2px clamp(16px,5vw,24px) 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-padding-inline:clamp(16px,5vw,24px)}
  .uk-trip .rstops::-webkit-scrollbar{display:none}
  .uk-trip .rstops li{flex-shrink:0;display:flex}
  .uk-trip .rstops button{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 .85rem 0 .35rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.86rem;font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
  .uk-trip .rstops i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-style:normal;font-size:.75rem;font-weight:700}
  .uk-trip .rstops button.is-on{background:var(--olive-900);border-color:var(--olive-900);color:#fff}
  .uk-trip .rstops button.is-on i{background:#fff;color:var(--olive-900)}
  .uk-trip .mcap a[data-gostage]{display:none!important}

  /* etapas */
  .uk-trip .jit__acts{flex-direction:column;align-items:stretch;margin-top:2rem}
  .uk-trip .jit__acts .btn{justify-content:center;min-height:48px}

  /* alojamientos: se pasan con el dedo */
  .uk-trip .car .car__a{display:none}
  .uk-trip .car__cap{min-height:0}
  .uk-trip .car__cap ul{display:none}
  .uk-trip .car__dots button{min-width:8px}
  .uk-trip .jnote{font-size:.82rem}

  /* qué incluye: solo los títulos */
  .uk-trip .inc{grid-template-columns:1fr;gap:2rem}
  .uk-trip .inc .jh2{margin-bottom:1.4rem!important}
  .uk-trip .ilist{gap:.65rem}
  .uk-trip .ilist li{align-items:center}
  .uk-trip .ilist span{display:none}
  .uk-trip .inc h3:not(:first-child){margin-top:1.8rem}
  .uk-trip .side{position:static}
  .uk-trip .s-dates{display:none}

  /* opiniones: sin flechas, se pasan con el dedo */
  .uk-trip .rv .arrow{display:none}
  .uk-trip .rv__qs{touch-action:pan-y}

  /* preguntas: sin la caja de ayuda (ya está en la barra inferior) */
  .uk-trip .faq__help{display:none}

  /* viajes relacionados en carrusel */
  .uk-trip .rel .tgrid{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*clamp(16px,5vw,24px));padding:0 clamp(16px,5vw,24px) 6px}
  .uk-trip .rel .tgrid::-webkit-scrollbar{display:none}
  .uk-trip .rel .vtrip{flex:0 0 calc(50% - 7px);scroll-snap-align:start}
  .uk-trip .rel .jhead .btn{display:none}

  /* rejillas de una columna: que las filas deslizables no las ensanchen */
  .uk-trip .jsum__g,.uk-trip .book,.uk-trip .rt,.uk-trip .inc{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important}
  .uk-trip .jsum__t,.uk-trip .jsum__m,.uk-trip .forw,.uk-trip .rt>*,.uk-trip .inc>*,.uk-trip .book>*{min-width:0}
  .uk-trip .forw{display:none!important}

  /* carruseles alineados con el margen */
  .uk-trip .rel .tgrid{scroll-padding-inline:clamp(16px,5vw,24px)}
  .uk-trip .shs{margin-inline:calc(-1*clamp(16px,5vw,24px));padding:0 clamp(16px,5vw,24px);scroll-padding-inline:clamp(16px,5vw,24px)}
  /* carruseles sin scroll vertical interno: las tarjetas fuera de pantalla no llegan
     a «revelarse» y su translateY de .reveal sobresalía por abajo */
  .uk-trip .shs,.uk-trip .rel .tgrid{overflow-y:hidden}
  .uk-trip .shs>.reveal,.uk-trip .rel .tgrid>.reveal{opacity:1;transform:none}

  /* portada: aire entre el título y los botones (en móvil no hay subtítulo que lo dé) */
  .uk-trip .jh h1{margin-bottom:1.4rem}

  /* selector Privado / En grupo: una línea, el activo con su propio fondo */
  .uk-trip .jseg{display:flex;flex-wrap:nowrap;width:100%;max-width:420px}
  .uk-trip .jseg i{display:none!important}
  .uk-trip .jseg button{flex:1;min-height:44px;justify-content:center;white-space:nowrap;border-radius:999px;transition:background .25s,color .25s}
  .uk-trip .jseg button[aria-selected="true"]{background:var(--olive-900);color:#fff}
  .uk-trip .jseg button svg{width:16px;height:16px}
  .uk-trip .jseg button svg.m-only{display:inline-block}
}

/* =============================== móvil =============================== */
@media (max-width:759px){
  .uk-trip .jh{min-height:88svh}
  .uk-trip .jh__in{padding-bottom:4.6rem!important;gap:1.1rem}
  .uk-trip .jh__sub{display:none}
  .uk-trip .crumbs{font-size:.74rem;margin-bottom:1rem}
  .uk-trip .jh__by{margin-bottom:1.2rem}
  .uk-trip .jh__btns .btn{min-height:48px;font-size:.9rem;padding-left:.9rem;padding-right:.9rem}
  .uk-trip .facts{grid-template-columns:1fr 1fr;gap:1rem .9rem}
  .uk-trip .fact svg{width:22px;height:22px}
  .uk-trip .fact span{font-size:.78rem}
  .uk-trip .rv__m{display:none}
  .uk-trip .rv__qs{min-height:290px}
  .uk-trip .rv__q blockquote{font-size:1.3rem}
  .uk-trip .sh{flex-basis:80%}
  .uk-trip .rel .vtrip{flex-basis:80%}

  /* flecha de la portada */
  .uk-trip .jh{position:relative}
  .uk-trip .hscroll-cue{display:grid;place-items:center;position:absolute;left:50%;bottom:14px;z-index:5;width:44px;height:44px;margin-left:-22px;border-radius:50%;color:#fff;background:none;border:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));animation:ukcue 1.8s cubic-bezier(.4,0,.2,1) infinite}
  .uk-trip .hscroll-cue svg{width:26px;height:26px;stroke-width:2.2}
  .uk-trip .hscroll-cue:active{transform:scale(.94)}
  @keyframes ukcue{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(7px);opacity:1}}

  /* precio centrado en la tarjeta translúcida */
  .uk-trip .jh__price{flex-direction:column!important;align-items:center!important;justify-content:center;text-align:center!important;gap:.35rem!important;padding:1.1rem 1.2rem 1.2rem!important}
  .uk-trip .jh__price .k{width:auto!important;text-align:center}
  .uk-trip .jh__price b{text-align:center}
  .uk-trip .jh__price p{text-align:center;margin:0}
  .uk-trip .jh__pers{margin:.35rem auto 0!important;align-self:center}
}
@media (prefers-reduced-motion:reduce){.mjump,.uk-trip .jmob,.uk-trip .hscroll-cue{transition:none;animation:none}}