/* La pagina de un tour (/tours/<id>), que arma web/api/tour.js. Usa los
   tokens del sitio (tokens.css), asi que sigue el modo claro y el oscuro. */
.tour-page { background: var(--paper); color: var(--ink); font-family: var(--font-sans); }

.tour-top {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) var(--gutter);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.tour-top__logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-strong); }
.tour-top__todas {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-soft); font-size: var(--step--1); text-decoration: none;
}
.tour-top__logo:active, .tour-top__todas:active { opacity: 0.6; }

.tour { max-width: var(--maxw-text); margin: 0 auto; padding: var(--sp-5) var(--gutter) calc(var(--sp-10) + 72px + env(safe-area-inset-bottom, 0px)); }

.tour__galeria { margin-bottom: var(--sp-5); }
.tour__marco { position: relative; }
.tour__fotos {
  /* position: las fotos miden su offsetLeft desde aqui (tour.js) */
  position: relative;
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r-lg);
  overscroll-behavior-x: contain;
  /* Las fotos se deslizan; la barra de desplazamiento no se enseña */
  scrollbar-width: none;
}
.tour__fotos::-webkit-scrollbar { display: none; }
/* Cada foto es un marco de proporción fija con la foto entera (contain) sobre
   ella misma ampliada y difuminada: las que sube el equipo suelen ser
   verticales 3:4 y hay otras 16:9, y un recorte les quitaba arriba y abajo.
   En el teléfono el marco es 4:5: una vertical 3:4 llena casi todo el ancho
   (en 16:9 quedaba en menos de la mitad) y el título sigue en la primera
   pantalla. Desde 600 px, 16:9. El marco es lo que se desliza y lo que mide
   tour.js. Sin fotos, el fondo de marca sigue en 16:9, como siempre. */
.tour__foto {
  position: relative; overflow: hidden;
  flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5;
  scroll-snap-align: start; border-radius: var(--r-lg); background: var(--surface-sunk);
}
.tour__img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* Ampliada lo bastante para que no se vea el borde del difuminado y un poco
   oscurecida, para que la foto de delante se despegue del fondo. */
.tour__fondo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: blur(24px) brightness(0.7) saturate(1.1); transform: scale(1.25);
}
.tour__foto--vacia { aspect-ratio: 16 / 9; background: var(--grad-brand); }
@media (min-width: 600px) {
  .tour__foto { aspect-ratio: 16 / 9; }
}

/* Con 2 o más fotos: un puntito por foto (el activo, alargado) y, solo con
   ratón, las flechas dentro de la foto. En el teléfono se desliza con el dedo. */
.tour__puntos { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-2); }
.tour__punto {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
}
.tour__punto::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--ink-faint);
  transition: width var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.tour__punto[aria-current="true"]::before { width: 20px; background: var(--teal-500); }
.tour__flecha {
  display: none; place-items: center;
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink-strong);
  box-shadow: var(--sh-2);
}
@media (hover: hover) and (pointer: fine) {
  .tour__flecha:hover { background: var(--paper); }
}
.tour__flecha--antes { left: var(--sp-3); }
.tour__flecha--despues { right: var(--sp-3); }
@media (hover: hover) and (pointer: fine) {
  .tour__flecha { display: grid; }
}

.tour__titulo { margin: 0 0 var(--sp-2); font-size: var(--step-4); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--ink-strong); }
.tour__datos { margin: 0 0 var(--sp-6); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); }
.tour__bloque { margin-top: var(--sp-7); }
.tour__bloque h2 { margin: 0 0 var(--sp-3); font-size: var(--step-1); color: var(--ink-strong); }
.tour__bloque p { margin: 0 0 var(--sp-2); }
.tour__sub { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--step-0); }
.tour__lista { margin: 0; padding-left: 1.2em; }
.tour__lista li { margin-bottom: var(--sp-1); }

/* Las fechas: botones cortos que envuelven. Cada uno es un radio dentro de un
   label (sin JavaScript igual funciona); el radio no se ve, pero recibe el
   foco y las flechas del teclado, y el botón pinta su estado. */
.tour__fechas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fecha { position: relative; display: inline-flex; cursor: pointer; -webkit-user-select: none; user-select: none; }
.fecha input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.fecha__boton {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 48px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font-size: var(--step--1); line-height: 1.25;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out),
    transform 120ms var(--ease-out);
}
.fecha:not(.fecha--agotada):active .fecha__boton { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .fecha:hover .fecha__boton { border-color: var(--teal-400); }
}
.fecha input:checked + .fecha__boton { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fecha input:focus-visible + .fecha__boton { outline: 3px solid var(--sky-500); outline-offset: 3px; }
.fecha__dia { font-weight: 600; white-space: nowrap; }
.fecha--agotada { cursor: not-allowed; }
.fecha--agotada .fecha__boton { border-style: dashed; border-color: var(--line); background: var(--surface-sunk); color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .fecha--agotada:hover .fecha__boton { border-style: dashed; border-color: var(--line); background: var(--surface-sunk); color: var(--ink-soft); }
}
.fecha--agotada .fecha__dia { text-decoration: line-through; }
.fecha__agotada { font-size: var(--step--1); }

/* El bloque de cada salida (titulo, horario, cupos y planes). [hidden] tiene
   que ganarle al display:grid: sin esto se veian los planes de todas las
   fechas a la vez. */
.tour__planes { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.tour__planes[hidden] { display: none; }
.tour__planes > p { margin: 0; }
.tour__planes .tour__sub { margin: var(--sp-3) 0 0; }
.salida__titulo { font-weight: 600; color: var(--ink-strong); }
.salida__datos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  font-size: var(--step--1); color: var(--ink-soft);
}
.salida__cupos {
  padding: 2px var(--sp-2); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--coral) 18%, transparent); color: var(--ink-strong);
  font-family: var(--font-mono);
}
.plan {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.plan:active { background: var(--surface-sunk); }
.plan:has(input:checked) { border-color: var(--teal-500); box-shadow: 0 0 0 2px var(--teal-200); }
.plan input { width: 18px; height: 18px; accent-color: var(--teal-600); }
.plan__nombre { flex: 1; }
.plan__precio { font-weight: 600; color: var(--ink-strong); }
.plan__bs { width: 100%; text-align: right; font-size: var(--step--1); color: var(--ink-soft); }
.tour__nota { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.tour__aviso { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunk); }

.tour__accion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-soft);
}
.tour__boton {
  display: flex; justify-content: center; width: 100%; max-width: var(--maxw-text); margin: 0 auto;
  background: var(--teal-600); color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .tour__boton:hover { background: var(--teal-700); }
}
.tour__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.tour--aviso .tour__boton { width: auto; margin: 0; }

@media (min-width: 900px) {
  .tour__foto { flex-basis: 80%; }
}

@media (prefers-color-scheme: dark) {
  .tour-top__logo { color: #fff; }
}