/* ═══════════════════════════════════════════════════════════
   VWT · CITY TOUR
   La idea: el agua que hizo posible la ciudad. Mendoza está en
   un desierto y todo lo verde existe por las acequias, así que
   la página recorre el oasis de la ciudad vieja al parque.

   CONTRATO DEL SITIO, respetado sin excepción:
     · eje de contenido y márgenes: los de .vt-in
     · ritmo vertical: var(--vh-sec), igual que las otras páginas
     · título de sección: clamp(2.6rem,6.4vw,6.2rem) / -.055em / .94
     · volanta: .82rem, peso 600, bordó, sin filete
     · texto de apoyo: clamp(1rem,1.2vw,1.16rem), peso 300, 1.6
     · Poppins como única familia
   Componentes reutilizados tal cual: hero (.vt-cover), apertura
   (.vt-open), otros tours (.vt-next), blog (.vh-rel) y el mapa
   compartido. Acá solo se escribe lo propio de esta página.
   ═══════════════════════════════════════════════════════════ */

.ct{
  --ct-pad: var(--vt-pad, clamp(1.4rem, 5vw, 6rem));
  --ct-max: var(--vt-max, 1400px);
  --ct-sec: var(--vh-sec, clamp(3.2rem, calc(7 * var(--1vh)), 5.6rem));
  --ct-t: var(--vh-t, .9s);
  --ct-e: var(--vh-e, cubic-bezier(.22,1,.36,1));
  --ct-acc: var(--vh-acc, #AC3749);
}

/* ── piezas comunes, con las medidas del contrato ── */
.ct-h2{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0; max-width: 22ch;
  font-size: calc(99.2px * var(--k, 1));
  font-weight: 700; letter-spacing: -.055em; line-height: .94;
  color: var(--vh-ink);
}
.ct-kick{ margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--ct-acc) }
.ct-kick-light{ color: rgba(255,255,255,.78) }
.ct-lead{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 52ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.6;
  font-weight: 300; color: var(--vh-soft);
}
.ct-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.1rem; border-radius: 100px; border: 1px solid transparent;
  background: var(--ct-acc); color: #fff; text-decoration: none;
  font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color var(--ct-t) var(--ct-e), color var(--ct-t) var(--ct-e),
              border-color var(--ct-t) var(--ct-e), transform var(--ct-t) var(--ct-e);
}
.ct-btn:hover{ background: #6B1D2A; border-color: #6B1D2A; transform: translateY(-2px) }
.ct-btn-ghost{
  background: rgba(11,7,8,.55); border-color: rgba(255,255,255,.7); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ct-btn-ghost:hover{ background: rgba(11,7,8,.78); border-color: #fff; color: #fff }

/* ═══════════════════════════════════════════════════════════
   LA CUADRÍCULA
   Mendoza se reconstruyó en damero, con una plaza cada pocas
   cuadras y acequias en cada vereda. Esta página se compone
   así: las cuatro paradas son cuatro manzanas en una retícula
   de dos por dos, separadas por filetes que se cruzan como las
   acequias, y el mapa cierra la cuadrícula ocupando el ancho
   completo. Ninguna otra página del sitio usa esta estructura.
   ═══════════════════════════════════════════════════════════ */
.ct-grilla{ padding: var(--ct-sec) var(--ct-pad); background: var(--vh-paper) }
.ct-grilla .vt-open{ padding: 0 }
.ct-grilla-in{
  margin-top: calc(88.0px * var(--k, 1));
  padding-top: calc(57.6px * var(--k, 1));
  border-top: 1px solid var(--vh-line);
}
.ct-grilla-hd{ margin-bottom: calc(64.0px * var(--k, 1))}

/* las cuatro manzanas */
.ct-mz:hover 
/* el mapa cierra la cuadrícula */
/* el pin de cada parada */

/* ═══════════════════════════════════════════════════════════
   ANTES DE SALIR · qué llevar y preguntas, lado a lado
   ═══════════════════════════════════════════════════════════ */
.ct-faq-lista{ border-top: 1px solid var(--vh-line) }
.ct-q{ border-bottom: 1px solid var(--vh-line) }
.ct-q summary{
  display: flex; align-items: center; gap: 1.2rem; cursor: pointer; list-style: none;
  padding: clamp(1rem,1.8vw,1.3rem) 0;
  font-size: calc(18.2px * var(--k, 1)); font-weight: 600; letter-spacing: -.025em;
  color: var(--vh-ink); transition: color var(--ct-t) var(--ct-e);
}
.ct-q summary::-webkit-details-marker{ display: none }
.ct-q summary span{ flex: 1 1 auto }
.ct-q summary:hover{ color: var(--ct-acc) }
.ct-q summary i{
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--vh-line-2);
  transition: background var(--ct-t) var(--ct-e), border-color var(--ct-t) var(--ct-e), transform var(--ct-t) var(--ct-e);
}
.ct-q summary i::before, .ct-q summary i::after{
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--vh-ink);
  transform: translate(-50%,-50%);
  transition: opacity var(--ct-t) var(--ct-e), background var(--ct-t) var(--ct-e);
}
.ct-q summary i::before{ width: 9px; height: 1.5px }
.ct-q summary i::after{ width: 1.5px; height: 9px }
.ct-q[open] summary{ color: var(--ct-acc) }
.ct-q[open] summary i{ background: var(--ct-acc); border-color: var(--ct-acc); transform: rotate(90deg) }
.ct-q[open] summary i::before{ background: var(--vh-paper) }
.ct-q[open] summary i::after{ opacity: 0 }
.ct-q-r{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ct-t) var(--ct-e) }
.ct-q[open] .ct-q-r{ grid-template-rows: 1fr }
.ct-q-r > div{ overflow: hidden }
.ct-q-r p{
  margin: 0; padding: 0 2.4rem clamp(1.1rem,2vw,1.5rem) 0; max-width: 62ch;
  font-size: calc(16.8px * var(--k, 1)); line-height: 1.65; color: var(--vh-soft);
}

/* ═══════════════════════════════════════════════════════════
   CIERRE · bloque sólido en el color de la marca
   ═══════════════════════════════════════════════════════════ */
.ct-cierre{ padding: calc(var(--ct-sec) * 1.2) var(--ct-pad); background: #6B1D2A; color: #fff }
.ct-cierre-h{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0; max-width: 18ch;
  font-size: calc(99.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.055em; line-height: .94; color: #fff;
}
.ct-cierre-p{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 clamp(1.8rem,3.4vw,2.6rem); max-width: 46ch;
  font-size: calc(20.5px * var(--k, 1)); line-height: 1.6; color: rgba(255,255,255,.86);
}
.ct-cierre-cta{ display: flex; flex-wrap: wrap; gap: .7rem }
.ct-btn-blanco{ background: var(--vh-paper); border-color: #fff; color: #6B1D2A }
.ct-btn-blanco:hover{ background: var(--vh-acc); border-color: var(--vh-acc); color: #fff }
.ct-cierre .ct-btn-ghost{ background: transparent; border-color: rgba(255,255,255,.45); color: #fff; backdrop-filter: none }
.ct-cierre .ct-btn-ghost:hover{ background: rgba(255,255,255,.12); border-color: #fff }
.ct-cierre-n{ margin: clamp(1rem,2vw,1.4rem) 0 0; font-size: .82rem; color: rgba(255,255,255,.66) }

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px){
  .ct-cierre-cta .ct-btn{ width: 100% }
  .ct-q-r p{ padding-right: 0 }
  .ct-q-r{ transition: none }
}

/* el contenido del cierre, sobre el eje */
.ct-cierre-in{ max-width: var(--ct-max); margin-inline: auto }

/* ── El mapa · la ciudad en volumen ──
   Ocupa el ancho completo del eje y va a sangre por dentro del
   bloque, con su encabezado arriba y los botones apoyados sobre
   el mapa, abajo a la izquierda. */
.ct-mapa-bloque{ margin-top: calc(88.0px * var(--k, 1))}
.ct-mapa-hd{ max-width: 62ch; margin-bottom: calc(38.4px * var(--k, 1))}
.ct-mapa{
  position: relative; border-radius: 22px; overflow: hidden; background: #0B0708;
  border: 1px solid var(--vh-line);
}
.ct-mapa #map{ width: 100%; height: calc(54.2 * var(--1vh)); min-height: calc(440px * var(--k, 1)); background: #0B0708 }
.ct-chips{
  position: absolute; z-index: 2; left: calc(25.6px * var(--k, 1)); bottom: calc(25.6px * var(--k, 1));
  right: calc(25.6px * var(--k, 1));
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem;
}
.ct-chip{
  appearance: none; cursor: pointer; padding: .62rem 1.05rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.24); background: rgba(11,7,8,.62); color: #fff;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: inherit; font-size: .84rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color var(--ct-t) var(--ct-e), border-color var(--ct-t) var(--ct-e);
}
.ct-chip:hover{ background: rgba(11,7,8,.8); border-color: rgba(255,255,255,.5) }
.ct-chip.is-on{ background: var(--ct-acc); border-color: var(--ct-acc) }
/* el pin de cada parada */
.ct-pin{
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.ct-pin span{
  padding: .32rem .6rem; border-radius: 8px; white-space: nowrap;
  background: rgba(11,7,8,.86); color: #fff; font-size: .74rem; font-weight: 700;
  transition: background-color .5s var(--ct-e);
}
.ct-pin i{
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--vh-paper); box-shadow: 0 0 0 3px rgba(8,5,6,.55);
  transition: background-color .5s var(--ct-e), transform .5s var(--ct-e), box-shadow .5s var(--ct-e);
}
.ct-pin.is-on i{ background: var(--ct-acc); transform: scale(1.3); box-shadow: 0 0 0 5px rgba(172,55,73,.4) }
.ct-pin.is-on span{ background: var(--ct-acc) }
@media (max-width: 700px){
  .ct-mapa #map{ height: calc(62 * var(--1vh)) }
  .ct-chips{ position: static; margin: .9rem 0 0; padding-inline: 0 }
  .ct-chip{ background: transparent; border-color: var(--vh-line-2); color: var(--vh-ink); backdrop-filter: none }
  .ct-chip.is-on{ background: var(--ct-acc); border-color: var(--ct-acc); color: #fff }
}

/* ═══════════════════════════════════════════════════════════
   LOS DATOS · una franja sobre papel
   Estaba en blanco sobre un fondo oscuro que no llegaba a
   aplicarse, y el texto quedaba invisible. Ahora usa la tinta
   del sitio sobre papel, con filetes arriba y abajo: no depende
   de ningún fondo ni del tema claro u oscuro.
   ═══════════════════════════════════════════════════════════ */
.ct-datos{
  padding: clamp(1.8rem,3.4vw,2.8rem) var(--ct-pad);
  background: var(--vh-paper);
  border-top: 1px solid var(--vh-line);
  border-bottom: 1px solid var(--vh-line);
}
.ct-datos-linea{
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: calc(32.0px * var(--k, 1));
}
.ct-datos-linea > div{ min-width: 0 }
.ct-datos-linea dt{
  margin: 0; font-size: .76rem; font-weight: 500;
  color: var(--vh-mut);
}
.ct-datos-linea dd{
  margin: .35rem 0 0; font-size: calc(18.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.025em; color: var(--vh-ink);
}
@media (max-width: calc(1024px * var(--k, 1))){ .ct-datos-linea{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem } }
@media (max-width: 620px){ .ct-datos-linea{ grid-template-columns: repeat(2, minmax(0,1fr)) } }

/* ── Antes de salir · con la estructura del sitio ──
   La sección tenía dos columnas pegadas y sin encabezado, así
   que se leía apretada y distinta al resto. Ahora abre con
   volanta, título y bajada como todas las demás, las dos
   columnas respiran y cada una tiene su subtítulo. */
.ct-antes{ padding: var(--ct-sec) var(--ct-pad); background: var(--vh-paper) }
.ct-antes-hd{ margin-bottom: calc(64.0px * var(--k, 1))}
.ct-antes-grid{
  display: grid; grid-template-columns: minmax(0,.4fr) minmax(0,.6fr);
  gap: calc(96.0px * var(--k, 1)); align-items: start;
}
.ct-antes-t{
  margin: 0 0 clamp(1.2rem,2.4vw,1.6rem);
  font-size: calc(22.4px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.035em; color: var(--vh-ink);
}
.ct-llevar{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vh-line) }
.ct-llevar li{ padding: clamp(1.1rem,2.2vw,1.5rem) 0; border-bottom: 1px solid var(--vh-line) }
.ct-llevar b{
  display: block; font-size: calc(17.9px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.025em; color: var(--vh-ink);
}
.ct-llevar i{
  display: block; margin-top: .4rem; font-style: normal;
  font-size: .94rem; line-height: 1.55; color: var(--vh-soft);
}
@media (max-width: 900px){
  .ct-antes-grid{ grid-template-columns: 1fr; gap: 2.6rem }
}

/* cada columna de la sección */
.ct-antes-col{ min-width: 0 }

/* ── La franja de datos, sobre negro ──
   El bloque vuelve al fondo oscuro. Los colores van fijados con
   el peso suficiente para que ningún tema los pise: ese fue el
   motivo por el que antes quedaba invisible. */
.ct-datos{
  background: #0B0708 !important;
  border-top: 0; border-bottom: 0;
}
.ct-datos .ct-datos-linea dt{ color: rgba(255,255,255,.62) !important }
.ct-datos .ct-datos-linea dd{ color: #fff !important }

/* ── Los dos subtítulos, en el color de la marca ── */
.ct-antes-t{ color: var(--ct-acc) }

/* ── Las cuatro paradas · la información dentro de la imagen ──
   Cada parada es una pieza sola: la fotografía ocupa el bloque
   y el texto se apoya sobre ella, abajo a la izquierda, sobre un
   velo que baja hacia el pie. Se alternan dos alturas para que
   la secuencia tenga ritmo en vez de cuatro rectángulos iguales.
   ═══════════════════════════════════════════════════════════ */
.ct-paradas{ list-style: none; margin: 0; padding: 0; display: grid; gap: calc(32.0px * var(--k, 1))}
.ct-pa{ position: relative }
.ct-pa-fig{
  position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: #0B0708;
  display: flex; align-items: flex-end;
  min-height: clamp(360px, calc(52 * var(--1vh)), 620px);
}
.ct-pa-fig img{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03); transition: transform 1.4s var(--ct-e);
}
.ct-pa:hover .ct-pa-fig img{ transform: scale(1.07) }
.ct-pa-veil{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,5,6,.06) 0%, rgba(8,5,6,.18) 42%, rgba(8,5,6,.86) 100%);
}
/* una parada de cada dos es más alta: da ritmo a la secuencia */
.ct-pa:nth-child(odd) .ct-pa-fig{ min-height: clamp(420px, calc(64 * var(--1vh)), 720px) }

.ct-pa-tx{
  position: relative; z-index: 2; width: 100%;
  padding: calc(48.0px * var(--k, 1));
  display: grid; grid-template-columns: minmax(0,.56fr) minmax(0,.44fr);
  gap: calc(48.0px * var(--k, 1)); align-items: end;
}
.ct-pa-n{
  grid-column: 1; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums;
}
.ct-pa-h{
  grid-column: 1; grid-row: 2; margin: .4rem 0 0;
  font-size: calc(51.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: #fff;
  text-shadow: 0 1px 24px rgba(8,5,6,.4);
}
.ct-pa-s{
  grid-column: 1; grid-row: 3; margin-top: .5rem;
  font-size: .86rem; font-weight: 600; color: rgba(255,255,255,.72);
}
.ct-pa-d{
  grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; max-width: 46ch;
  font-size: calc(17.3px * var(--k, 1)); line-height: 1.6; font-weight: 300;
  color: rgba(255,255,255,.88); text-shadow: 0 1px 20px rgba(8,5,6,.45);
}
@media (max-width: 900px){
  .ct-pa-fig, .ct-pa:nth-child(odd) .ct-pa-fig{ min-height: clamp(340px, calc(58 * var(--1vh)), 480px) }
  .ct-pa-tx{ grid-template-columns: 1fr; gap: .2rem }
  .ct-pa-d{ grid-column: 1; grid-row: auto; margin-top: .8rem }
}
@media (prefers-reduced-motion: reduce){ .ct-pa-fig img{ transition: none } }

/* ── Los botones del cierre ──
   El texto quedaba invisible porque otra regla del sitio pisa el
   color de los enlaces. Se fija igual que en el resto del
   sistema: con selector de elemento, prioridad y el relleno de
   texto explícito, que es lo que respeta Safari. */
a.ct-btn.ct-btn-blanco{
  background: var(--vh-paper) !important;
  border-color: #fff !important;
  color: #6B1D2A !important;
  -webkit-text-fill-color: #6B1D2A;
}
/* al pasar el cursor, el mismo bordó del botón del hero */
a.ct-btn.ct-btn-blanco:hover{
  background: var(--vh-acc) !important;
  border-color: var(--vh-acc) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.ct-cierre a.ct-btn.ct-btn-ghost{
  background: transparent !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.ct-cierre a.ct-btn.ct-btn-ghost:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: #fff !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* modo oscuro: las variables del sistema ya invierten papel, humo y tinta */