/* ============================================================
   RUMBO · Páginas
   ============================================================ */

/* ═══════════════════ CABECERA DE SUBPÁGINA ═══════════════════ */
.page-head {
  position: relative;
  background: var(--grad-city);
  color: var(--hero-ink);
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 90% at 20% 0%, #000 0%, transparent 100%);
}
.page-head__inner { position: relative; z-index: 1; }
.page-head__title { font-size: var(--display-md); letter-spacing: var(--track-wide); margin: var(--space-4) 0 var(--space-4); max-width: 22ch; }
.page-head__title .serif { color: var(--hero-accent); }
.page-head p { max-width: 60ch; color: var(--hero-muted); text-wrap: pretty; }
.page-head__meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); font-size: var(--small); color: var(--hero-muted); letter-spacing: var(--track-wide); }
.page-head__meta strong { color: var(--hero-ink); }

/* ── Cabecera con foto de fondo (fondo adaptado, texto legible) ── */
.page-head--media .page-head__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-head--media .page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.page-head--media .page-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg-deep) 78%, transparent) 0%,
    color-mix(in srgb, var(--bg-deep) 68%, transparent) 44%,
    color-mix(in srgb, var(--bg-deep) 30%, transparent) 100%);
}

/* ── Cabecera con video (sin filtros; el texto va debajo del video) ── */
.page-head--video { padding-block: 0; }
.page-head--video .page-head__video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(22rem, 60vw, 48rem);
  overflow: hidden;
  background: #000;
}
.page-head--video .page-head__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-head--video .page-head__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.page-head__sound {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(10, 8, 12, .6);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.page-head__sound:hover { background: rgba(10, 8, 12, .9); border-color: rgba(255, 255, 255, .5); }
.page-head__sound:active { transform: scale(.94); }
.page-head__sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.page-head__sound[aria-pressed="false"] .page-head__sound-wave { display: none; }
.page-head__sound[aria-pressed="true"] .page-head__sound-off { display: none; }

.page-head__cta {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  text-decoration: none;
}
@media (max-width: 768px) {
  .page-head__cta { left: 50%; transform: translateX(-50%); bottom: var(--space-5); }
}

/* ── Cabecera dividida: video casi a pantalla completa + texto encima ── */
.page-head--split {
  padding-block: var(--space-4);
  background: var(--bg-deep);
}
.page-head--split .page-head__stage {
  position: relative;
  width: 90vw;
  height: 90vh;
  height: 90dvh;
  margin-inline: auto;
  border-radius: var(--r-l);
  overflow: hidden;
}
.page-head--split .player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
/* Velo lateral: el texto se lee sobre el video */
.page-head--split .player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(43, 8, 31, .82) 0%,
    rgba(43, 8, 31, .55) 36%,
    rgba(43, 8, 31, .12) 62%,
    rgba(43, 8, 31, 0) 100%);
}
.page-head--split .page-head__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}
.page-head--split .page-head__copy {
  pointer-events: auto;
  max-width: min(34rem, 48%);
}
.page-head--split .page-head__title { max-width: 12ch; }
.page-head--split .page-head__cta {
  position: static;
  display: inline-flex;
  margin-top: var(--space-6);
  transform: none;
}
@media (max-width: 768px) {
  .page-head--split { padding-block: var(--space-2); }
  .page-head--split .page-head__stage {
    width: 94vw;
    height: 86vh;
    height: 86dvh;
  }
  .page-head--split .player::after {
    background: linear-gradient(180deg,
      rgba(43, 8, 31, .72) 0%,
      rgba(43, 8, 31, .35) 45%,
      rgba(43, 8, 31, .78) 100%);
  }
  .page-head--split .page-head__overlay {
    align-items: flex-start;
    padding-top: var(--space-5);
  }
  .page-head--split .page-head__copy { max-width: none; }
  .page-head--split .page-head p,
  .page-head--split .page-head__meta { display: none; }
}

/* ── Cabecera con figura a la izquierda (texto desplazado a la derecha) ── */
/* El ancho de la figura y el padding del texto salen del mismo cálculo (vw + rem)
   para que la mano del personaje nunca invada el titular en ningún ancho. */
.page-head--figure .page-head__inner { padding-left: min(calc(46vw + var(--space-6)), calc(36rem + var(--space-6))); }
.page-head__figure {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(46vw, 36rem);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-head__figure img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: 132%;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 1100px) {
  .page-head--figure .page-head__inner { padding-left: min(calc(42vw + var(--space-6)), calc(30rem + var(--space-6))); }
  .page-head__figure { width: min(42vw, 30rem); }
}
@media (max-width: 900px) {
  .page-head--figure .page-head__inner { padding-left: 0; }
  .page-head__figure { display: none; }
}

/* ═══════════════════ HOME ═══════════════════ */
.home-intro {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--space-8);
  align-items: start;
}
.home-intro__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-2));
}
.route-art { color: var(--accent); }

.home-route-line {
  position: relative;
  margin-block: var(--space-9);
}
.home-route-line svg { width: 100%; height: auto; }

.how-band {
  position: relative;
  background: var(--bg-deep);
  color: #fff;
}
.how-band .kicker { color: var(--signal); }
.how-band .step__title { color: #fff; }
.how-band .step p { color: rgba(255,255,255,.7); }
.how-band .step__line { background: linear-gradient(90deg, var(--signal), rgba(255,196,0,.1)); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
}

/* split del home hacia los dos universos */
.universe-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.universe-card {
  position: relative;
  display: grid;
  min-height: 480px;
  place-items: end start;
  padding: var(--space-7);
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.universe-card__bg { position: absolute; inset: 0; z-index: -1; }
.universe-card__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-5) var(--ease-inout); }
.universe-card:hover .universe-card__bg img { transform: scale(1.06); }
.universe-card__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,40,.05) 0%, rgba(10,20,40,.86) 100%); }
.universe-card__body { max-width: 40ch; }
.universe-card__title { font-family: var(--font-display); font-size: var(--display-sm); letter-spacing: var(--track-wide); }
.universe-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
  transition: gap var(--dur-2) var(--ease-out);
}
.universe-card:hover .universe-card__link { gap: var(--space-5); }

/* ═══════════════════ TRANSPORTE ESTUDIANTIL ═══════════════════ */
.route-ticker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--space-4) var(--space-5);
  background: var(--card);
}
.route-ticker .form__input { flex: 1 1 14rem; min-width: 0; max-width: 320px; }
.route-ticker .form__select { flex: 0 1 auto; min-width: 0; }

/* El formulario de filtros se apila en móvil (targets táctiles grandes) */
@media (max-width: 720px) {
  .route-ticker { flex-direction: column; align-items: stretch; }
  .route-ticker .form__input,
  .route-ticker .form__select { max-width: none; width: 100%; }
  .route-ticker .btn { width: 100%; }
}
.route-ticker__dash { flex: 1; height: 3px; background: var(--signal); border-radius: 3px; position: relative; overflow: hidden; }
.route-ticker__dash::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--bg-deep) 8px 16px); }
.route-ticker__label { font-family: var(--font-display); font-weight: 700; font-size: var(--small); letter-spacing: var(--track-wide); }

.schedule-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-row__time { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.schedule-row__route { font-weight: 600; }
.schedule-row__route small { display: block; color: var(--ink-muted); font-weight: 400; }

.safety-band { position: relative; background: var(--bg-deep); color: #fff; overflow: hidden; }
.safety-band > .container { position: relative; z-index: 1; }
.safety-band .kicker { color: var(--signal); }
/* Filtro de la banda de seguridad: intensidad rebajada para que se vea el video */
.safety-band .band-media::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-deep) 38%, transparent) 0%,
    color-mix(in srgb, var(--bg-deep) 22%, transparent) 100%);
}
.safety-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
}
.safety-item {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: var(--space-6) var(--space-5);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--bg-deep) 45%, transparent);
}
.safety-item__icon { color: var(--signal); font-size: 1.15rem; margin-bottom: var(--space-5); }
.safety-item__title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-3); line-height: 1.25; }
.safety-item p { font-size: calc(var(--small) * 1.15); color: rgba(255,255,255,.7); margin: 0; line-height: 1.6; }

/* ═══════════════════ TRANSPORTE TURÍSTICO ═══════════════════ */
.dest-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.trip-side-list { display: grid; gap: var(--space-3); }
.trip-side-item {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.trip-side-item:hover { border-color: var(--accent); transform: translateX(4px); }
.trip-side-item img { width: 76px; height: 58px; object-fit: cover; border-radius: var(--r-s); }
.trip-side-item__title { font-weight: 700; font-size: var(--small); }
.trip-side-item__date { font-size: var(--small); color: var(--ink-muted); }
.trip-side-item__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.trip-side-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--small);
  color: var(--ink-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trip-side-item__meta svg { flex: none; }
.trip-side-item__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-mid);
  white-space: nowrap;
  color: var(--ink);
}

/* ── Panel de viajes: pestañas ──────────────── */
.trips-widget { display: grid; justify-items: center; gap: var(--space-5); }
.trips-tabs { margin-inline: auto; margin-bottom: var(--space-6); }

.trips-tabs {
  display: inline-flex;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}
.trips-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .72rem 1.7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.trips-tab:hover { color: var(--ink); }
.trips-tab:active { transform: scale(.97); }
.trips-tab.is-active { background: var(--bg-deep); color: var(--hero-accent); }

.trips-panel {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.trips-panel__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--card);
}
.trips-panel__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--card);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.trips-panel__loader::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-top-color: var(--signal);
  animation: trips-spin .8s linear infinite;
}
.trips-panel.is-ready .trips-panel__loader { opacity: 0; visibility: hidden; }

@keyframes trips-spin { to { transform: rotate(360deg); } }

/* ── Destinos: cuadrícula amplia + modal ────── */
.trips-dest { width: 100%; }
.trips-pane__empty {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  background: var(--card);
}
.trips-pane__empty p { margin: 0; color: var(--ink-muted); }

.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-5);
}
.dest-card {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.dest-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.dest-card:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.dest-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.dest-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.dest-card:hover .dest-card__media img { transform: scale(1.05); }
.dest-card__count {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  background: rgb(0 0 0 / .55);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.dest-card__body { display: grid; gap: .35rem; padding: var(--space-4) var(--space-5) var(--space-5); align-content: start; }
.dest-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; }
.dest-card__meta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--signal);
}
.dest-card__tag { font-size: var(--small); color: var(--ink-muted); }
.dest-card__cta {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-mid);
  color: var(--ink);
}

/* Modal */
.dest-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-5); }
.dest-modal[hidden] { display: none; }
.dest-modal__backdrop { position: absolute; inset: 0; background: rgb(12 22 18 / .72); backdrop-filter: blur(6px); }
.dest-modal__box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  width: min(1060px, 100%);
  max-height: min(640px, 92vh);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.dest-modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgb(12 22 18 / .6);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.dest-modal__close:hover { background: var(--bg-deep); transform: scale(1.06); }
.dest-modal__carousel { position: relative; background: #101b16; min-height: 320px; }
.dest-modal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dest-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgb(12 22 18 / .6);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.dest-modal__nav:hover { background: var(--bg-deep); }
.dest-modal__nav:active { transform: translateY(-50%) scale(.92); }
.dest-modal__nav--prev { left: .9rem; }
.dest-modal__nav--next { right: .9rem; }

/* Táctil: controles del modal grandes */
@media (pointer: coarse) {
  .dest-modal__nav { width: 52px; height: 52px; }
  .dest-modal__close { width: 48px; height: 48px; }
}
.dest-modal__counter {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: rgb(0 0 0 / .55);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: var(--track-wide);
}
.dest-modal__info {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  padding: var(--space-7) var(--space-6);
}
.dest-modal__title { font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 0; }
.dest-modal__info p { margin: 0; color: var(--ink-muted); }
.dest-modal__desc { display: grid; gap: var(--space-2); color: var(--ink-muted); }
.dest-modal__desc p { margin: 0; }
.dest-modal__desc ul { margin: 0; padding-left: 1.15em; display: grid; gap: .3em; }
.dest-modal__desc li::marker { color: var(--signal); }
.dest-modal__info .btn { justify-self: start; margin-top: var(--space-2); }

@media (max-width: 900px) {
  .dest-modal__box { grid-template-columns: 1fr; max-height: 92vh; max-height: 92svh; overflow-y: auto; }
  .dest-modal__carousel { min-height: 260px; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .trips-tab { padding: .65rem 1.25rem; }
  .trips-panel { border-radius: var(--r-l); }
  /* Pestañas: scroll horizontal en vez de encoger hasta ilegibles */
  .trips-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .trips-tabs::-webkit-scrollbar { display: none; }
  .trips-tab { flex: none; }
}
/* Móvil: el modal de destino sube como bottom sheet */
@media (max-width: 640px) {
  .dest-modal {
    place-items: end stretch;
    padding: 0;
  }
  .dest-modal__box {
    width: 100%;
    max-height: min(88vh, 88svh);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
  }
  .dest-modal__info {
    padding: var(--space-6) var(--space-5) calc(var(--space-6) + var(--safe-b));
  }
}

/* ── Contenido del widget (dentro del iframe) ───────────── */
body.widget-body {
  background: var(--card);
  padding: var(--space-5) var(--space-5) var(--space-4);
  overflow-x: hidden;
}
.widget-trips { display: grid; gap: var(--space-4); align-content: start; }
.widget-trips__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.widget-trips__head .kicker { font-size: .72rem; letter-spacing: var(--track-wide); }
.widget-trips__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.widget-list { display: grid; gap: var(--space-3); }
.widget-trips__empty {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
}
.widget-trips__empty p { margin: 0; color: var(--ink-muted); }
.widget-trips__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.widget-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-mid);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out), gap var(--dur-2) var(--ease-out);
}
.widget-link:hover { color: var(--warm); gap: var(--space-3); }
.widget-link--muted { color: var(--ink-soft); }
.widget-link--muted:hover { color: var(--accent); }


/* ═══════════════════ DETALLE DE VIAJE ═══════════════════ */
.trip-hero {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: var(--space-7);
  align-items: start;
}
.trip-hero__media { position: sticky; top: calc(var(--header-h) + var(--space-2)); }
.trip-hero__media img { border-radius: var(--r-xl); box-shadow: var(--shadow-2); }

.trip-facts { display: grid; gap: var(--space-3); }
.trip-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-soft);
  border-radius: var(--r-m);
}
.trip-fact__label { font-size: var(--small); color: var(--ink-muted); letter-spacing: var(--track-wide); text-transform: uppercase; }
.trip-fact__value { font-weight: 700; text-align: right; }

.trip-book {
  position: sticky;
  top: calc(var(--header-h) + var(--space-2));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}
.trip-book__price { font-family: var(--font-display); font-weight: 800; font-size: var(--display-sm); }
.trip-book__price small { font-size: var(--small); color: var(--ink-muted); font-family: var(--font-body); }

.include-list { display: grid; gap: var(--space-3); }
.include-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--small); line-height: 1.55; }
.include-list li::before { content: "✓"; font-weight: 800; color: var(--signal); }

/* Incluye / No incluye: dos columnas en escritorio, una en móvil */
.include-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.include-grid__box {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--space-6);
}
.include-grid__box h2 { font-size: var(--h3); margin-bottom: var(--space-5); }

/* ═══════════════════ BLOG ═══════════════════ */
.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-7);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.blog-featured:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.blog-featured__media img { height: 100%; object-fit: cover; }
.blog-featured__body { padding: var(--space-7); display: grid; gap: var(--space-4); align-content: center; }
.blog-featured__title { font-size: var(--h3); letter-spacing: var(--track-mid); }

.post-list { display: grid; gap: var(--space-8); }
.post-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }

.post-body { max-width: 46rem; }
.post-body h2 { margin-top: var(--space-8); font-family: var(--font-display); font-size: var(--h3); letter-spacing: var(--track-mid); }
.post-body h3 { margin-top: var(--space-6); }
.post-body p { margin-bottom: var(--space-5); line-height: 1.72; text-wrap: pretty; }
.post-body ul { padding-left: 1.4rem; margin-bottom: var(--space-5); display: grid; gap: var(--space-2); }
.post-body li { line-height: 1.65; }
.post-body li::marker { color: var(--signal); }
.post-body blockquote {
  margin: var(--space-7) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--signal);
  background: var(--bg-soft);
  border-radius: var(--r-m);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--lead);
}
.post-hero__media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-1); }

/* ═══════════════════ CONTACTO HÍBRIDO ═══════════════════ */
.contact-wrap {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.contact-info {
  position: relative;
  padding: var(--space-8);
  color: #fff;
  overflow: hidden;
  background: var(--grad-city);
}
.contact-info__item { display: flex; gap: var(--space-4); align-items: flex-start; padding-block: var(--space-3); font-size: var(--small); }
.contact-info__item svg { flex-shrink: 0; color: var(--signal); }
.contact-info__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.contact-info__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-info__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--bg-deep) 34%, transparent) 0%,
    color-mix(in srgb, var(--bg-deep) 26%, transparent) 60%,
    color-mix(in srgb, var(--bg-deep) 18%, transparent) 100%);
}
.contact-info > *:not(.contact-info__media) { position: relative; z-index: 1; }
.contact-form { padding: var(--space-8); }

/* Campo honeypot: invisible para personas, visible para bots. */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════
   FONDOS FOTOGRÁFICOS · /assets/images/pitures
   Cada bloque adapta la imagen al espacio (cover + encuadre)
   y aplica un velo para que el texto mantenga el contraste.
   Las medidas de los elementos no cambian.
   ═══════════════════════════════════════════════════════════ */

/* ── Cabecera de subpágina: foto a la derecha, texto sobre velo ── */
.page-head {
  background-image:
    linear-gradient(105deg,
      color-mix(in srgb, var(--bg-deep) 80%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 70%, transparent) 55%,
      color-mix(in srgb, var(--bg-deep) 45%, transparent) 100%),
    var(--head-photo, none),
    var(--grad-city);
  background-size: cover, cover, cover;
  background-position: center, var(--head-pos, center 45%), center;
  background-repeat: no-repeat;
}
body[data-page="estudiantil"] .page-head { --head-photo: url("../images/pitures/6.jpg");  --head-pos: center 42%; }
body[data-page="turistico"]    .page-head { --head-photo: url("../images/pitures/3.jpg");  --head-pos: center 55%; }
body[data-page="viajes"]       .page-head { --head-photo: url("../images/pitures/10.jpg"); --head-pos: center 50%; }
body[data-page="contacto"]     .page-head { --head-photo: url("../images/pitures/1.jpg");  --head-pos: center 45%; }
body[data-page="blog"]         .page-head { --head-photo: url("../images/pitures/9.jpg");  --head-pos: center 58%; }
body[data-page="galeria"]      .page-head { --head-photo: url("../images/pitures/11.jpg"); --head-pos: center 45%; }
body[data-page="transportes"]  .page-head { --head-photo: url("../images/pitures/12.jpg"); --head-pos: center 40%; }
body[data-page="empresarial"]  .page-head { --head-photo: url("../images/estudiantes/5.jpg"); --head-pos: center 45%; }

/* La cabecera con video manda: sin foto ni velo fotográfico */
.page-head.page-head--split {
  background-image: none;
  background-color: var(--bg-deep);
}

/* ── Cuadros de beneficios: 6 cuadros iguales, caben en pantalla ── */
.section--benefits {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1rem, 3vh, 2.5rem);
}
.section--benefits > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.section--benefits .section-head {
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.section--benefits .feature-grid {
  flex: 1;
  min-height: 0;
  grid-auto-rows: 1fr;
}
.section--benefits .feature-tile { min-height: 0; }

.feature-tile {
  isolation: isolate;
  background: var(--card);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 780px;
}

/* La foto ocupa todo el espacio que no usa el pie: se ve casi completa */
.ft-carousel {
  --ft-step: 4.5s;
  position: relative;
  flex: 1 1 auto;
  min-height: 96px;
  overflow: hidden;
  background: var(--card);
}

/* Pie de texto: fondo blanco sólido, compacto, alineado al fondo del cuadro */
.feature-tile__body {
  flex: 0 0 auto;
  min-height: 140px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border-top: 1px solid var(--line);
}
.feature-tile__icon { grid-area: 1 / 1 / 3 / 2; width: 38px; height: 38px; margin: 0; font-size: 1.1rem; }
.feature-tile__num  { grid-area: 1 / 2; margin: 0; align-self: end; line-height: 1.2; }
.feature-tile__title { grid-area: 2 / 2 / 3 / 3; margin: 0; font-size: .97rem; line-height: 1.15; }
.feature-tile__body p {
  grid-area: 3 / 1 / 4 / 3;
  margin: 0;
  font-size: .7rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.ft-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: var(--pos, center);
  background-repeat: no-repeat;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i, 0) * var(--ft-step) - var(--ft-offset, 0s));
  transition: transform var(--dur-5) var(--ease-inout);
}
/* Fuera de pantalla: el carrusel deja de consumir CPU (JS agrega .is-paused) */
.ft-carousel.is-paused .ft-slide { animation-play-state: paused; }
.feature-tile:hover .ft-slide { transform: scale(1.06); }

/* Cada imagen se ve ~4,5s; la duración total = nº de fotos × 4,5s */
.ft-carousel--2 .ft-slide { animation-name: ftFade2; animation-duration: 9s; }
.ft-carousel--3 .ft-slide { animation-name: ftFade3; animation-duration: 13.5s; }
.ft-carousel--4 .ft-slide { animation-name: ftFade4; animation-duration: 18s; }

/* Fundido: cada imagen se ve ~4s; la siguiente entra encima (sin destello blanco) */
@keyframes ftFade2 {
  0%     { opacity: 0; }
  5.56%  { opacity: 1; }
  50%    { opacity: 1; }
  55.56% { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes ftFade3 {
  0%     { opacity: 0; }
  3.7%   { opacity: 1; }
  33.33% { opacity: 1; }
  37.04% { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes ftFade4 {
  0%     { opacity: 0; }
  2.78%  { opacity: 1; }
  25%    { opacity: 1; }
  27.78% { opacity: 0; }
  100%   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-slide { animation: none !important; opacity: 0; transition: none; }
  .ft-slide:first-child { opacity: 1; }
}

/* Tablet/móvil: la sección deja de forzar 100vh (2 y 1 columnas) */
@media (max-width: 1024px) {
  .section--benefits {
    min-height: 0;
    display: block;
    padding-block: var(--space-8);
  }
  .section--benefits > .container { display: block; }
  .section--benefits .section-head { grid-template-columns: 1fr; gap: var(--space-2); }
  .section--benefits .feature-grid { grid-auto-rows: auto; }
  .section--benefits .feature-tile { min-height: 440px; }
}

/* ── Bandas oscuras con foto (CTA, seguridad, cómo funciona) ── */
.cta-band {
  background-image:
    linear-gradient(100deg,
      color-mix(in srgb, var(--bg-deep) 58%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 46%, transparent) 55%,
      color-mix(in srgb, var(--bg-deep) 30%, transparent) 100%),
    var(--cta-photo, none);
  background-size: cover, cover;
  background-position: center, var(--cta-pos, center 60%);
  background-repeat: no-repeat;
}
body[data-page="index"]        .cta-band { --cta-photo: url("../images/pitures/4.jpg");  }
body[data-page="estudiantil"]  .cta-band { --cta-photo: url("../images/pitures/10.jpg"); --cta-pos: center 55%; }
body[data-page="turistico"]    .cta-band { --cta-photo: url("../images/pitures/9.jpg");  --cta-pos: center 60%; }
body[data-page="viajes"]       .cta-band { --cta-photo: url("../images/pitures/7.jpg");  }
body[data-page="blog"]         .cta-band { --cta-photo: url("../images/pitures/12.jpg"); }
body[data-page="transportes"]  .cta-band { --cta-photo: url("../images/pitures/11.jpg"); }
body[data-page="empresarial"]  .cta-band { --cta-photo: url("../images/bg-empresarial-banda.jpg"); --cta-pos: center 55%; }

.safety-band {
  --band-photo: url("../images/pitures/7.jpg");
  background-image:
    linear-gradient(120deg,
      color-mix(in srgb, var(--bg-deep) 74%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 66%, transparent) 55%,
      color-mix(in srgb, var(--bg-deep) 58%, transparent) 100%),
    var(--band-photo, none);
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat;
}
.how-band {
  --band-photo: url("../images/pitures/5.jpg");
  background-image:
    linear-gradient(115deg,
      color-mix(in srgb, var(--bg-deep) 74%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 66%, transparent) 55%,
      color-mix(in srgb, var(--bg-deep) 58%, transparent) 100%),
    var(--band-photo, none);
  background-size: cover, cover;
  background-position: center, center 45%;
  background-repeat: no-repeat;
}

/* ── Panel de datos de contacto ── */
.contact-info {
  --band-photo: url("../images/pitures/12.jpg");
  background-image:
    linear-gradient(160deg,
      color-mix(in srgb, var(--bg-deep) 54%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 42%, transparent) 60%,
      color-mix(in srgb, var(--bg-deep) 30%, transparent) 100%),
    var(--band-photo, none),
    var(--grad-city);
  background-size: cover, cover, cover;
  background-position: center, center 30%, center;
  background-repeat: no-repeat;
}

/* ── Secciones claras con foto de fondo (utility) ── */
.section--photo {
  position: relative;
  isolation: isolate;
}
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-soft) 80%, transparent) 0%,
      color-mix(in srgb, var(--bg-soft) 72%, transparent) 55%,
      color-mix(in srgb, var(--bg-soft) 78%, transparent) 100%),
    var(--sec-photo, none);
  background-size: cover, cover;
  background-position: center, var(--sec-pos, center 55%);
  background-repeat: no-repeat;
}

/* ── Responsive de páginas ── */
@media (max-width: 1024px) {
  .home-intro { grid-template-columns: 1fr; }
  .home-intro__aside { position: static; }
  .universe-split { grid-template-columns: 1fr; }
  .trip-hero { grid-template-columns: 1fr; }
  .trip-hero__media { position: static; }
  .trip-book { position: static; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__media img { max-height: 320px; }
  .contact-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .post-split { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 1fr; gap: var(--space-2); }

  /* En pantallas angostas el texto ocupa todo el ancho:
     el velo pasa a vertical y sube de intensidad. */
  .page-head {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg-deep) 80%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 74%, transparent) 55%,
        color-mix(in srgb, var(--bg-deep) 66%, transparent) 100%),
      var(--head-photo, none),
      var(--grad-city);
  }
  .page-head.page-head--split { background-image: none; }
  .cta-band {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg-deep) 76%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 70%, transparent) 55%,
        color-mix(in srgb, var(--bg-deep) 64%, transparent) 100%),
      var(--cta-photo, none);
  }
  .safety-band,
  .how-band {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg-deep) 76%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 70%, transparent) 55%,
        color-mix(in srgb, var(--bg-deep) 64%, transparent) 100%),
      var(--band-photo, none);
  }
  .contact-info {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg-deep) 62%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 54%, transparent) 55%,
        color-mix(in srgb, var(--bg-deep) 46%, transparent) 100%),
      var(--band-photo, none),
      var(--grad-city);
  }
}

/* ═══════════════════ SERVICIO EMPRESARIAL ═══════════════════
   Tablero de turnos (entrada/salida de filas) + cotizador. */

/* ── Encabezado con lead: no estrangular el h2 ── */
.section-head--split .lead {
  max-width: 40ch;
}

/* ── Foto corporativa en las bandas: velo rebajado ──
   El recorte (-banda) sale de bg-empresarial.jpg sin las franjas de texto
   del banner, así la imagen se lee sin chocar con los titulares. El archivo
   es claro, así que basta un velo medio para mantener el contraste. */
body[data-page="empresarial"] .how-band {
  --band-photo: url("../images/bg-empresarial-banda.jpg");
  background-image:
    linear-gradient(115deg,
      color-mix(in srgb, var(--bg-deep) 78%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 70%, transparent) 55%,
      color-mix(in srgb, var(--bg-deep) 60%, transparent) 100%),
    var(--band-photo, none);
  background-position: center, center 55%;
}
body[data-page="empresarial"] .how-band h2,
body[data-page="empresarial"] .how-band .step__title,
body[data-page="empresarial"] .how-band .step p {
  text-shadow: 0 1px 14px rgba(43, 8, 31, .8);
}
body[data-page="empresarial"] .how-band .step p { color: rgba(255, 255, 255, .84); }
/* Velo inferior: los párrafos caen sobre el camino, que es lo más claro de
   la foto. Arriba queda el velo ligero para que la imagen respire. */
body[data-page="empresarial"] .how-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(43, 8, 31, 0) 0%,
    rgba(43, 8, 31, 0) 34%,
    color-mix(in srgb, var(--bg-deep) 42%, transparent) 74%,
    color-mix(in srgb, var(--bg-deep) 58%, transparent) 100%);
}
body[data-page="empresarial"] .how-band > .container { position: relative; z-index: 1; }

body[data-page="empresarial"] .cta-band .band-media img { object-position: center 55%; }
/* El texto vive a la izquierda: el velo baja de ahí hacia la derecha */
body[data-page="empresarial"] .cta-band .band-media::after {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--bg-deep) 80%, transparent) 0%,
    color-mix(in srgb, var(--bg-deep) 66%, transparent) 52%,
    color-mix(in srgb, var(--bg-deep) 50%, transparent) 100%);
}
body[data-page="empresarial"] .cta-band .cta-band__title,
body[data-page="empresarial"] .cta-band p {
  text-shadow: 0 1px 14px rgba(43, 8, 31, .75);
}

/* ── Banda del reproductor ── */
.reel { background: var(--bg-soft); }
.reel .player { margin-top: var(--space-2); }

@media (max-width: 768px) {
  /* En móvil el texto ocupa todo el ancho: velo vertical, algo más firme */
  body[data-page="empresarial"] .how-band {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg-deep) 88%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 84%, transparent) 55%,
        color-mix(in srgb, var(--bg-deep) 78%, transparent) 100%),
      var(--band-photo, none);
  }
  body[data-page="empresarial"] .cta-band {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg-deep) 90%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 86%, transparent) 55%,
        color-mix(in srgb, var(--bg-deep) 80%, transparent) 100%),
      var(--cta-photo, none);
  }
  body[data-page="empresarial"] .cta-band .band-media::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg-deep) 90%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 82%, transparent) 100%);
  }
}

/* ── Pestañas de turno ── */
.shift-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1);
  margin-bottom: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  width: fit-content;
}
.shift-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: .72rem 1.5rem;
  min-height: var(--tap);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.shift-tab:hover { color: var(--ink); }
.shift-tab:active { transform: scale(.97); }
.shift-tab.is-active { background: var(--signal); color: var(--signal-ink); }
.shift-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ── Tablero ── */
.shift-board {
  border-radius: var(--r-xl);
  background: var(--bg-deep);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.shift-board__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-8);
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(120deg, rgba(255, 255, 255, .05), transparent 70%);
}
.shift-board__clock,
.shift-board__next { display: grid; gap: var(--space-2); }
.shift-board .kicker { color: rgba(255, 255, 255, .6); margin: 0; }
.shift-board .kicker::before { display: none; }
.shift-board__time,
.shift-board__eta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: var(--track-mid);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.shift-board__eta { color: var(--hero-accent); }
.shift-board__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .45rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .72rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.shift-board__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--warm) 70%, transparent);
  animation: shiftPulse 2.4s var(--ease-out) infinite;
}
@keyframes shiftPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warm) 60%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.shift-pane { padding: var(--space-6) var(--space-7) var(--space-7); }
.shift-pane__head {
  margin: 0 0 var(--space-5);
  font-size: var(--small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* ── Filas de parada: entran y salen escalonadas ── */
.shift-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.shift-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    background var(--dur-2) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Sin JS las filas se ven; con JS la animación de entrada las oculta un instante. */
.shift-board.js-anim .shift-row { opacity: 0; transform: translateY(10px); }
.shift-board.js-anim .shift-row.is-in { opacity: 1; transform: none; }
.shift-board.js-anim .shift-row.is-out {
  opacity: 0;
  transform: translateY(-10px);
  transition-duration: var(--dur-2);
  transition-delay: 0ms;
}
.shift-row:hover { background: rgba(255, 255, 255, .09); }

.shift-row__stop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: 600;
  min-width: 0;
}
/* Hilo de ruta: la línea discontinua detrás del punto de parada */
.shift-row__stop::after {
  content: "";
  flex: 1;
  height: 0;
  min-width: 24px;
  border-top: 2px dashed rgba(255, 255, 255, .18);
  margin-left: var(--space-2);
  order: 2;
}
.shift-row__dot {
  flex: 0 0 auto;
  order: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-accent) 22%, transparent);
}
.shift-row__time {
  order: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: var(--track-mid);
  font-variant-numeric: tabular-nums;
}
.shift-row__seats {
  order: 4;
  font-size: var(--small);
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}

/* ── Cotizador ── */
.cot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-2);
}
.cot__control { display: grid; gap: var(--space-3); }
.cot__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cot__value { font-size: var(--lead); color: var(--ink-muted); }
.cot__value strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--signal);
  letter-spacing: var(--track-mid);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-2);
}

.cot__range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  margin: var(--space-4) 0 var(--space-2);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--signal) var(--fill, 18%), var(--bg-soft) var(--fill, 18%));
  cursor: pointer;
}
.cot__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--signal);
  border: 3px solid #fff;
  box-shadow: var(--shadow-signal);
  cursor: grab;
  transition: transform var(--dur-2) var(--ease-out);
}
.cot__range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.cot__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--signal);
  border: 3px solid #fff;
  box-shadow: var(--shadow-signal);
  cursor: grab;
}
.cot__range:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }
.cot__scale {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: var(--track-wide);
}
.cot__hint { margin: var(--space-3) 0 0; font-size: var(--small); color: var(--ink-soft); max-width: 40ch; }

.cot__result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--r-l);
  background: var(--bg-soft);
}
.cot__stat { display: grid; gap: var(--space-2); align-content: start; }
.cot__stat--wide { grid-column: 1 / -1; }
.cot__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: var(--track-mid);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.cot__num--sm { font-size: clamp(1.15rem, 2vw, 1.5rem); }
/* Parpadeo corto al recalcular: la salida del número viejo y la entrada del nuevo */
.cot__num.is-swap { opacity: 0; transform: translateY(-6px); }
.cot__cap {
  font-size: var(--small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cot__result .btn { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-3); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cot { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-6); }
}
@media (max-width: 768px) {
  .shift-board__status { padding: var(--space-5); gap: var(--space-4) var(--space-6); }
  .shift-board__badge { margin-left: 0; }
  .shift-pane { padding: var(--space-5); }
  .shift-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .shift-row__stop::after { display: none; }
  .shift-row__time { grid-column: 2; grid-row: 1; }
  .shift-row__seats { grid-column: 1 / -1; }
  .shift-tabs { width: 100%; }
  .shift-tab { flex: 1 1 auto; padding-inline: var(--space-4); }
  .cot__result { grid-template-columns: 1fr; }
}

/* Movimiento reducido: el contenido cambia sin desplazarse */
@media (prefers-reduced-motion: reduce) {
  .shift-board.js-anim .shift-row { transition: none; opacity: 1; transform: none; }
  .shift-board.js-anim .shift-row.is-out { opacity: 0; }
  .shift-board__pulse { animation: none; }
  .cot__num { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   RUMBO · Calendario de viajes programados (viajes.php)
   Grilla mensual inline + popup de zoom arrastrable con celdas
   grandes, pensado primero para celular y también para escritorio.
   ══════════════════════════════════════════════════════════════ */
.trip-cal {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.trip-cal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.trip-cal__title { margin: .35rem 0 .25rem; font-size: var(--display-sm); }
.trip-cal__sub { margin: 0; max-width: 48ch; color: var(--ink-muted); font-size: var(--small); }
.trip-cal__status {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--signal);
}
.trip-cal__status.is-empty { color: var(--ink-soft); }
.trip-cal__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.trip-cal__pane { display: grid; gap: var(--space-3); min-width: 0; }

.trip-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.trip-cal__month {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h4);
  letter-spacing: var(--track-mid);
  text-align: center;
}
.trip-cal__navbtn {
  appearance: none;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.trip-cal__navbtn:hover:not(:disabled) { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.trip-cal__navbtn:active:not(:disabled) { transform: scale(.92); }
.trip-cal__navbtn:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.trip-cal__navbtn:disabled { opacity: .32; cursor: not-allowed; }

.trip-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.trip-cal__weekdays span {
  padding-block: .3rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.trip-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.cal-day {
  position: relative;
  appearance: none;
  font: inherit;
  color: inherit;
  min-height: 54px;
  padding: .4rem .3rem .55rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .3rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
}
.cal-day--pad { border-color: transparent; background: transparent; pointer-events: none; }
.cal-day--trip {
  cursor: pointer;
  font-weight: 800;
  border-color: color-mix(in srgb, var(--signal) 42%, transparent);
  background: color-mix(in srgb, var(--signal) 12%, var(--card));
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), outline-color var(--dur-1) var(--ease-out);
}
.cal-day--trip:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); background: color-mix(in srgb, var(--signal) 22%, var(--card)); }
.cal-day--trip:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.is-selected { outline: 3px solid var(--ink); outline-offset: 1px; }
.cal-day__num { font-variant-numeric: tabular-nums; font-size: 1rem; line-height: 1; }
.cal-day--trip .cal-day__num { font-family: var(--font-display); font-size: .95rem; }
.cal-day__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.cal-day__count {
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: .6rem;
  font-weight: 800;
  color: var(--signal);
}

/* Cartel del viaje como fondo de la celda: la fecha también se ve */
.cal-day__bg {
  position: absolute;
  inset: 3px;
  z-index: 0;
  border-radius: calc(var(--r-m) - 3px);
  background-size: cover;
  background-position: center 38%;
  transition: transform var(--dur-3) var(--ease-out);
}
.cal-day__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(10, 20, 16, .08) 0%, rgba(10, 20, 16, .58) 100%);
}
.cal-day--trip .cal-day__num,
.cal-day--trip .cal-day__dot,
.cal-day--trip .cal-day__count { position: relative; z-index: 1; }
.cal-day.has-thumb .cal-day__num,
.cal-day.has-thumb .cal-day__count {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
}
.cal-day.has-thumb .cal-day__dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.cal-day--trip:hover .cal-day__bg { transform: scale(1.06); }

.trip-cal__fallback { margin: 0; padding-left: 1.2rem; color: var(--ink-muted); font-size: var(--small); display: grid; gap: .4rem; }

/* ── Panel de detalle del día ── */
.cal-detail { min-width: 0; }
.cal-detail__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
}
.cal-detail__empty {
  margin: 0;
  padding: var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  color: var(--ink-muted);
  font-size: var(--small);
}
.cal-trip {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--bg-soft);
}
.cal-trip + .cal-trip { margin-top: var(--space-3); }
.cal-trip__media {
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-s);
  overflow: hidden;
  background: #101b16;
}
.cal-trip__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.cal-trip__media:hover img { transform: scale(1.05); }
.cal-trip__media span {
  position: absolute;
  inset: auto 0 0 0;
  padding: .3rem;
  text-align: center;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  background: rgb(0 0 0 / .58);
  color: #fff;
}
.cal-trip__body { display: grid; gap: .3rem; align-content: start; min-width: 0; }
.cal-trip__date {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--signal);
}
.cal-trip__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--h4); }
.cal-trip__meta { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: var(--small); color: var(--ink-muted); }
.cal-trip__meta li { display: flex; align-items: center; gap: .45rem; }
.cal-trip__meta svg { flex: none; }
.cal-trip__price { margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.cal-trip__price strong { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.cal-trip__price span { font-size: .72rem; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-muted); }
.cal-trip__incluye { list-style: none; margin: .5rem 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cal-trip__incluye li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-muted);
  font-size: .7rem;
}
.cal-trip__incluye svg { flex: none; color: var(--signal); }
.cal-trip__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: .35rem; }
.cal-trip .btn { justify-self: start; margin-top: .25rem; }

/* ── Popup de zoom (arrastrable, grande) ── */
.cal-zoom { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: clamp(.5rem, 2vw, 1.5rem); }
.cal-zoom[hidden] { display: none; }
.cal-zoom__backdrop { position: absolute; inset: 0; background: rgb(12 22 18 / .75); backdrop-filter: blur(6px); }
.cal-zoom__box {
  --cal-dx: 0px;
  --cal-dy: 0px;
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  height: min(880px, 92vh);
  height: min(880px, 92svh);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translate(var(--cal-dx), var(--cal-dy));
}
.cal-zoom__box.is-dragging { will-change: transform; }
.cal-zoom__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .75rem var(--space-4) .75rem var(--space-5);
  background: var(--bg-deep);
  color: var(--hero-ink);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.cal-zoom__box.is-dragging .cal-zoom__bar { cursor: grabbing; }
.cal-zoom__grip { font-size: 1.15rem; letter-spacing: .12em; opacity: .65; line-height: 1; }
.cal-zoom__heading {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.cal-zoom__close {
  appearance: none;
  flex: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / .14);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.cal-zoom__close:hover { background: rgb(255 255 255 / .26); transform: scale(1.06); }
.cal-zoom__close:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.cal-zoom__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5) var(--space-5) calc(var(--space-6) + var(--safe-b));
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.cal-zoom .trip-cal__month { font-size: var(--h3); }
.cal-zoom .trip-cal__navbtn { width: 52px; height: 52px; font-size: 1.6rem; }
.cal-zoom .trip-cal__weekdays span { font-size: .78rem; padding-block: .45rem; }
.cal-zoom .cal-day { min-height: 76px; gap: .45rem; }
.cal-zoom .cal-day__num { font-size: 1.25rem; }
.cal-zoom .cal-day--trip .cal-day__num { font-size: 1.15rem; }
.cal-zoom .cal-day__dot { width: 9px; height: 9px; }
.cal-zoom .cal-day__count { font-size: .68rem; top: 5px; right: 8px; }
.cal-zoom .cal-detail__empty { padding: var(--space-6); text-align: center; }
.cal-zoom .cal-trip { grid-template-columns: 120px minmax(0, 1fr); padding: var(--space-5); gap: var(--space-5); }
.cal-zoom .cal-trip__title { font-size: var(--h3); }
.cal-zoom .cal-trip__price strong { font-size: 1.35rem; }

@media (pointer: coarse) {
  .cal-zoom__close { width: 48px; height: 48px; }
  .cal-zoom .cal-day { min-height: 84px; }
}

/* Escritorio: grilla a la izquierda, detalle con scroll a la derecha */
@media (min-width: 880px) {
  .cal-zoom__body {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: var(--space-6);
  }
  .cal-zoom__body > .trip-cal__nav { grid-column: 1; grid-row: 1; }
  .cal-zoom__body > .trip-cal__weekdays { grid-column: 1; grid-row: 2; }
  .cal-zoom__body > .trip-cal__grid { grid-column: 1; grid-row: 3; }
  .cal-zoom__body > .cal-detail {
    grid-column: 2;
    grid-row: 1 / -1;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: var(--space-1);
  }
}

/* Responsive del calendario inline */
@media (max-width: 860px) {
  .trip-cal__body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trip-cal { padding: var(--space-5) var(--space-4); }
  .cal-day { min-height: 50px; }
  .cal-zoom .cal-day { min-height: 66px; }
  .cal-zoom .cal-trip { grid-template-columns: 88px minmax(0, 1fr); padding: var(--space-4); gap: var(--space-4); }
  .cal-zoom__bar { padding-inline: var(--space-4); }
}