/* ═══════════════════════════════════════════════════════════
   VWT · VALLE DE UCO
   Hoja escrita de una sola vez, sin capas acumuladas. Cada
   clase aparece una vez y solo aquí. Identidad Vito: Poppins,
   bordó como único acento, tempo .9s y su curva. Navbar y
   footer, los del sitio.

   Principio: nada de lo que se ve depende de JavaScript.
   La página no carga scripts propios.
   ═══════════════════════════════════════════════════════════ */

.uv{
  --uv-pad: clamp(1.4rem, 5vw, 6rem);
  --uv-max: calc(1360px * var(--k, 1));
  --uv-t: .9s;
  --uv-e: cubic-bezier(.22,1,.36,1);
  --uv-acc: #AC3749;
  --uv-nav: var(--nav-h, 62px);
}
.uv-in{ max-width: var(--uv-max); margin: 0 auto }

/* ── piezas comunes ── */
.uv-h2{
  margin: 0; font-size: calc(99.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: .98; color: var(--vh-ink, #100C0D);
}
.uv-kick{ margin: 0; font-size: .84rem; font-weight: 600; color: var(--uv-acc) }
.uv-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.1rem; border-radius: 100px; border: 1px solid transparent;
  background: var(--vh-paper); color: var(--vh-ink); text-decoration: none;
  font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color var(--uv-t) var(--uv-e), color var(--uv-t) var(--uv-e),
              border-color var(--uv-t) var(--uv-e), transform var(--uv-t) var(--uv-e);
}
.uv-btn:hover{ background: var(--uv-acc); color: #fff; transform: translateY(-2px) }
.uv-btn-ink{ background: var(--vh-ink, #100C0D); color: var(--vh-paper, #fff) }
.uv-btn-ink:hover{ background: var(--uv-acc); color: #fff }
.uv-btn-line{ background: transparent; border-color: var(--vh-line-2, rgba(16,12,13,.22)); color: var(--vh-ink, #100C0D) }
.uv-btn-line:hover{ background: var(--vh-ink, #100C0D); border-color: var(--vh-ink, #100C0D); color: var(--vh-paper, #fff); transform: none }
.uv-lnk{ display: inline-flex; align-items: center; gap: .3rem; color: #fff; text-decoration: none; font-size: .88rem; font-weight: 600 }
.uv-lnk i{ font-style: normal; font-size: 1.2em; transition: transform var(--uv-t) var(--uv-e) }
.uv-lnk:hover i{ transform: translateX(4px) }

/* ── 1 · PORTADA ── */
/* mismas medidas que la portada de Luján: mismo alto, mismo
   margen superior por el navbar y mismo relleno inferior */
.uv-hero{
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--uv-nav);
  min-height: calc(calc(86 * var(--1vh)) - var(--uv-nav));
  display: flex; align-items: flex-end;
  padding: 0 var(--uv-pad) clamp(4rem,calc(10 * var(--1vh)),7rem);
  background: #0B0708; color: #fff;
}
.uv-hero-media{ position: absolute; inset: 0; z-index: 0 }
.uv-hero-media img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  transform: scale(1.05); animation: udAsienta 9s var(--uv-e) both;
}
@keyframes udAsienta{ to{ transform: none } }
.uv-hero-veil{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,5,6,.14) 0%, rgba(8,5,6,.06) 42%, rgba(8,5,6,.76) 100%);
}
.uv-hero-in{ position: relative; z-index: 2; max-width: calc(1100px * var(--k, 1)) }
.uv-hero-k{ margin: 0; font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.78) }
.uv-hero-h{
  margin: clamp(.8rem,1.6vw,1.2rem) 0 0;
  font-size: calc(128.0px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.06em; line-height: .9; color: #fff;
}
.uv-hero-p{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 clamp(1.6rem,3vw,2.4rem); max-width: 44ch;
  font-size: calc(18.9px * var(--k, 1)); line-height: 1.6; color: rgba(255,255,255,.88);
}
.uv-hero-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem }
.uv-hero-n{ margin: clamp(1rem,2vw,1.4rem) 0 0; font-size: .82rem; color: rgba(255,255,255,.62) }

/* ── 2 · EL DÍA · cinco pasos, foto y texto alternando ── */

.uv-film-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: calc(64.0px * var(--k, 1))}
.uv-film-step{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: calc(64.0px * var(--k, 1)); align-items: center;
  padding-top: calc(64.0px * var(--k, 1));
  border-top: 1px solid var(--vh-line, rgba(16,12,13,.1));
}
.uv-film-step:first-child{ padding-top: 0; border-top: 0 }
.uv-film-step:nth-child(even) .uv-film-fig{ order: 2 }
.uv-film-fig{ margin: 0; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: #0B0708 }
.uv-film-fig img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--uv-e) }
.uv-film-step:hover .uv-film-fig img{ transform: scale(1.03) }
.uv-film-h{
  display: block; font-size: calc(41.6px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--uv-acc); font-variant-numeric: tabular-nums;
}
.uv-film-tx h3{
  margin: .7rem 0; font-size: calc(38.4px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.045em; line-height: 1.05; color: var(--vh-ink, #100C0D);
}
.uv-film-tx p{
  margin: 0; max-width: 42ch;
  font-size: calc(18.2px * var(--k, 1)); line-height: 1.62; color: var(--vh-soft, #3A3436);
}

/* ── 3 · BODEGAS · paneles que se ensanchan ── */
.uv-bod{ padding: clamp(4rem,calc(10 * var(--1vh)),7.5rem) var(--uv-pad); background: var(--vh-paper, #fff) }
.uv-bod-hd{ margin-bottom: calc(48.0px * var(--k, 1))}
.uv-bod-hd .uv-h2{ margin-top: calc(20.8px * var(--k, 1))}

/* ── 4 · DOS MANERAS ── */
.uv-mod{ padding: clamp(4rem,calc(10 * var(--1vh)),7.5rem) var(--uv-pad); background: var(--vh-smoke, #F6F3F3) }
.uv-mod-hd{ margin-bottom: calc(48.0px * var(--k, 1))}
.uv-mod-hd .uv-h2{ margin-top: calc(20.8px * var(--k, 1))}
.uv-mod-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(80.0px * var(--k, 1))}
.uv-mod-col{ position: relative; padding-top: calc(32.0px * var(--k, 1)); border-top: 1px solid var(--vh-line, rgba(16,12,13,.1)) }
.uv-mod-col.is-full{ border-top: 3px solid var(--uv-acc) }
.uv-mod-tag{
  position: absolute; top: -.85rem; left: 0; padding: .32rem .8rem; border-radius: 100px;
  background: var(--uv-acc); color: #fff; font-size: .72rem; font-weight: 600;
}
.uv-mod-col h3{
  margin: .8rem 0 0; font-size: calc(35.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.045em; line-height: 1.05; color: var(--vh-ink, #100C0D);
}
.uv-mod-col > p{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0; max-width: 40ch;
  font-size: calc(17.3px * var(--k, 1)); line-height: 1.6; color: var(--vh-soft, #3A3436);
}
.uv-mod-col ul{ list-style: none; margin: clamp(1.4rem,2.8vw,2rem) 0 clamp(1.6rem,3vw,2.2rem); padding: 0 }
.uv-mod-col li{
  position: relative; padding: .7rem 0 .7rem 1.9rem;
  border-bottom: 1px solid var(--vh-line, rgba(16,12,13,.1));
  font-size: 1rem; line-height: 1.45; color: var(--vh-ink, #100C0D);
}
.uv-mod-col li::before{ position: absolute; left: 0; top: .7rem; width: 18px; text-align: center; font-size: .9rem; font-weight: 700 }
.uv-mod-col .si::before{ content: "\2713"; color: var(--uv-acc) }
.uv-mod-col .no::before{ content: "\2014"; color: var(--vh-mut, #7F6E73) }
.uv-mod-col .no{ color: var(--vh-mut, #7F6E73) }

/* ── 6 · DÓNDE QUEDA ── */
.uv-donde{ padding: clamp(4rem,calc(10 * var(--1vh)),7.5rem) var(--uv-pad); background: var(--vh-paper, #fff) }
.uv-donde-grid{ display: grid; grid-template-columns: .82fr 1.18fr; gap: calc(80.0px * var(--k, 1)); align-items: start }
.uv-donde-tx p{
  margin: clamp(1rem,2vw,1.4rem) 0 0; max-width: 40ch;
  font-size: calc(18.2px * var(--k, 1)); line-height: 1.65; font-weight: 300; color: var(--vh-soft, #3A3436);
}
.uv-mapa{ border-radius: 20px; overflow: hidden; background: #0B0708; border: 1px solid var(--vh-line, rgba(16,12,13,.1)) }
.uv-mapa #map{ width: 100%; height: calc(43.1 * var(--1vh)); min-height: calc(360px * var(--k, 1)); background: #0B0708 }

/* ── adaptación ── */
@media (max-width: 900px){
  .uv-mapa #map{ height: calc(52 * var(--1vh)) }
}
@media (max-width: 760px){
  .uv-hero{ min-height: calc(calc(86 * var(--1vh)) - var(--uv-nav)) }
  .uv-film-step{ grid-template-columns: 1fr; gap: 1.1rem }
  .uv-film-step:nth-child(even) .uv-film-fig{ order: 0 }
  .uv-film-fig{ aspect-ratio: 16/10 }
}
@media (prefers-reduced-motion: reduce){
  .uv-hero-media img{ animation: none; transform: none }
}

/* ── El día: el encabezado es su propia sección ──
   Así el disparador de la animación solo tiene que ver el
   título, no los cinco pasos: en Luján la apertura es corta y
   por eso funciona. La lista de pasos queda debajo, sin
   relleno superior para que no se separe del título. */
.uv-film{ padding-top: 0 }
.uv-film .uv-in{ max-width: var(--uv-max); margin: 0 auto; padding-inline: var(--uv-pad) }

/* ═══════════════════════════════════════════════════════════
   CIERRE · a sangre, como el de Luján
   Foto de fondo, velo y el texto centrado en una columna
   angosta: el ancho del texto es el que manda, no el de la
   pantalla.
   ═══════════════════════════════════════════════════════════ */
.uv-cta{
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(460px,calc(72 * var(--1vh)),780px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(4rem,calc(10 * var(--1vh)),7rem) var(--uv-pad);
  background: #0B0708; color: #fff;
}
.uv-cta-media{ position: absolute; inset: 0; z-index: 0 }
.uv-cta-media img{ width: 100%; height: 100%; object-fit: cover }
.uv-cta-veil{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,5,6,.48) 0%, rgba(8,5,6,.6) 55%, rgba(8,5,6,.82) 100%);
}
.uv-cta-in{ position: relative; z-index: 2; max-width: 760px }
.uv-cta-k{ margin: 0; font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.76) }
.uv-cta-h{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0;
  font-size: calc(99.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.05em; line-height: 1.02; color: #fff;
}
.uv-cta-p{
  margin: clamp(1rem,2vw,1.5rem) auto clamp(1.8rem,3.4vw,2.6rem); max-width: 44ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.6; color: rgba(255,255,255,.84);
}
.uv-cta-btns{ display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem }
.uv-cta .uv-btn{ background: var(--vh-paper); color: var(--vh-ink) }
.uv-cta .uv-btn:hover{ background: var(--uv-acc); color: #fff }
.uv-cta .uv-btn-ghost{ background: transparent; border-color: rgba(255,255,255,.42); color: #fff }
.uv-cta .uv-btn-ghost:hover{ background: rgba(255,255,255,.12); border-color: #fff; color: #fff }
.uv-cta-n{ margin: clamp(1rem,2vw,1.4rem) 0 0; font-size: .82rem; color: rgba(255,255,255,.66) }
@media (max-width: 560px){ .uv-cta-btns .uv-btn{ width: 100% } }

/* ── El botón de la tarjeta recomendada, legible ──
   Sobre el filete bordó, el botón en tinta se perdía. */
.uv-mod-col.is-full .uv-btn-ink{
  background: var(--uv-acc);
  border-color: var(--uv-acc);
  color: #fff;
}
.uv-mod-col.is-full .uv-btn-ink:hover{
  background: #6B1D2A; border-color: #6B1D2A; color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   BODEGAS · paneles que se ensanchan
   Vuelve el diseño con su animación. Se corrigen las dos cosas
   que fallaban:

   1) El temblor al terminar. Venía de que la foto se re-escalaba
      en cada cuadro al cambiar el ancho del panel. Ahora la foto
      tiene un tamaño fijo, más ancho que el panel más grande, y
      va centrada: el panel solo la recorta, no la redibuja.

   2) El "Ver bodega" cortado. El bloque de texto medía más que
      el panel en reposo, así que se salía por el borde. Ahora
      tiene un ancho que entra siempre, tanto cerrado como
      abierto, y la acción va en su propia línea.
   ═══════════════════════════════════════════════════════════ */
.uv-pans{
  display: flex; gap: calc(16.0px * var(--k, 1));
  height: clamp(420px, calc(60 * var(--1vh)), 640px);
  max-width: var(--uv-max); margin: 0 auto;
}
.uv-pan{
  position: relative; flex: 1 1 0; min-width: 0;
  border-radius: 20px; overflow: hidden; background: #0B0708; text-decoration: none;
  transition: flex-grow var(--uv-t) var(--uv-e);
  will-change: flex-grow;
}
/* la foto no cambia de tamaño: el panel la recorta */
.uv-pan img{
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: calc(860.0px * var(--k, 1)); height: 100%;
  max-width: none; object-fit: cover;
  transform: translateX(-50%) scale(1.02);
  transition: transform 1.1s var(--uv-e);
  backface-visibility: hidden;
}
.uv-pan-veil{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,5,6,.06) 36%, rgba(8,5,6,.92) 100%);
}
/* el texto tiene ancho propio: no se reacomoda mientras el panel crece */
.uv-pan-tx{
  position: absolute; z-index: 2; left: 0; bottom: 0;
  display: block;
  width: calc(260.0px * var(--k, 1));
  padding: calc(22.4px * var(--k, 1));
  box-sizing: content-box;
  backface-visibility: hidden;
}
.uv-pan-tx b{
  display: block; font-size: calc(21.1px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.15; color: #fff;
}
.uv-pan-tx i{
  display: block; margin-top: .2rem; font-style: normal; font-size: .82rem;
  color: rgba(255,255,255,.72);
}
.uv-pan-go{
  display: flex; align-items: center; gap: .5rem;
  margin-top: .8rem;
  font-size: .84rem; font-weight: 600; color: #fff;
  opacity: 0;
  transition: opacity var(--uv-t) var(--uv-e);
}
.uv-pan-go em{
  font-style: normal; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--uv-acc); font-size: .74rem;
}
@media (hover: hover) and (pointer: fine){
  .uv-pans:hover .uv-pan{ flex-grow: 1 }
  .uv-pans:hover .uv-pan:hover{ flex-grow: 2.4 }
  .uv-pan:hover img{ transform: translateX(-50%) scale(1.06) }
  .uv-pan:hover .uv-pan-go{ opacity: 1 }
}
@media (hover: none){ .uv-pan-go{ opacity: 1 } }
.uv-pan:focus-visible{ outline: 3px solid var(--uv-acc); outline-offset: 3px }
@media (max-width: calc(1024px * var(--k, 1))){
  .uv-pans{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); height: auto }
  .uv-pan{ aspect-ratio: 4/5; will-change: auto }
  .uv-pan img{ left: 0; width: 100%; transform: none }
  .uv-pan-tx{ width: auto; right: 0; box-sizing: border-box }
  .uv-pan-go{ opacity: 1 }
}
@media (max-width: 700px){ .uv-pans{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 480px){
  .uv-pans{ grid-template-columns: 1fr }
  .uv-pan{ aspect-ratio: 3/2 }
}
@media (prefers-reduced-motion: reduce){
  .uv-pan, .uv-pan img, .uv-pan-go{ transition: none }
}

/* ── "Ver bodega" · igual que en el resto del sitio ──
   Texto con subrayado que se dibuja y el círculo bordó al lado,
   dentro del bloque de texto, debajo del nombre y la zona. */
.uv-pan-tx{
  transform: translateZ(0);   /* capa propia: el texto no se
                                 vuelve a dibujar mientras el
                                 panel se ensancha */
}
.uv-pan-go{
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .85rem; padding-bottom: 3px;
  font-size: .84rem; font-weight: 600; color: #fff;
  opacity: 0;
  transition: opacity var(--uv-t) var(--uv-e);
}
.uv-pan-go::after{
  content: ""; position: absolute; left: 0; right: 27px; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--uv-t) var(--uv-e);
}
.uv-pan-go em{
  font-style: normal; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--uv-acc); color: #fff; font-size: .72rem;
  transition: transform var(--uv-t) var(--uv-e), box-shadow var(--uv-t) var(--uv-e);
}
@media (hover: hover) and (pointer: fine){
  .uv-pan:hover .uv-pan-go{ opacity: 1 }
  .uv-pan:hover .uv-pan-go::after{ transform: none }
  .uv-pan:hover .uv-pan-go em{
    transform: translateX(3px) scale(1.08);
    box-shadow: 0 0 0 4px rgba(172,55,73,.26);
  }
}

/* ── El panel deja de recalcular al abrirse ──
   El ensanchamiento se mantiene, pero el contenido va en capas
   propias, así el texto y la foto no se redibujan en cada
   cuadro ni se reajustan al terminar. */
.uv-pan{ will-change: auto; contain: paint }
.uv-pan img{ will-change: transform }

/* ── El temblor del final ──
   Mientras el panel se ensancha, su ancho toma valores con
   decimales. Al terminar, el navegador los redondea a píxeles
   enteros y ese último ajuste corre el contenido de las seis
   piezas: es el temblor.

   Solución: que el contenido no dependa del ancho del panel.
   Cada panel se aísla en su propia capa y su interior se ancla
   por la izquierda con medidas fijas, así el redondeo mueve
   solo el borde derecho, que nadie ve. */
.uv-pans{ perspective: 1000px }
.uv-pan{
  transform: translateZ(0);
  contain: layout paint style;
  transition-property: flex-grow;
  transition-duration: var(--uv-t);
  transition-timing-function: var(--uv-e);
}
.uv-pan-tx{
  left: 0; right: auto;
  width: calc(260.0px * var(--k, 1));
  transform: translateZ(0);
  will-change: auto;
}
.uv-pan-veil{ transform: translateZ(0) }
.uv-pan img{
  left: 0;
  width: calc(860.0px * var(--k, 1));
  transform: translateZ(0) scale(1.02);
  transform-origin: left center;
}
@media (hover: hover) and (pointer: fine){
  .uv-pan:hover img{ transform: translateZ(0) scale(1.06) }
}
@media (max-width: calc(1024px * var(--k, 1))){
  .uv-pan{ transform: none; contain: none }
  .uv-pan img{ left: 0; width: 100%; transform: none }
  .uv-pan:hover img{ transform: none }
  .uv-pan-tx{ width: auto; right: 0 }
}

/* ── Anchos exactos ──
   Cuando el script está activo, cada panel recibe su ancho en
   píxeles enteros y la transición pasa a ser sobre ese ancho:
   los dos extremos son enteros, así que no hay redondeo final
   ni temblor. Sin script, se reparten en partes iguales. */
.uv-pans.is-exacto .uv-pan{
  transition-property: flex-basis, flex-grow;
}
.uv-pans.is-exacto:hover .uv-pan,
.uv-pans.is-exacto:hover .uv-pan:hover{ flex-grow: 0 }

/* ═══════════════════════════════════════════════════════════
   FICHA DEL TOUR
   En Luján son filas de etiqueta y valor. Acá cada dato es una
   ficha numerada en dos columnas: el número y el nombre del
   dato a la izquierda, el valor grande y su aclaración a la
   derecha. Al apuntar una, su filete se tiñe y el número pasa
   a bordó: se recorre como un índice, no como una tabla.
   ═══════════════════════════════════════════════════════════ */
.uv-ficha{ padding: clamp(4rem,calc(10 * var(--1vh)),7.5rem) var(--uv-pad); background: var(--vh-paper, #fff) }
.uv-ficha-hd{ margin-bottom: calc(48.0px * var(--k, 1))}
.uv-ficha-hd .uv-h2{ margin-top: calc(20.8px * var(--k, 1))}
.uv-ficha-lista{
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: calc(80.0px * var(--k, 1));
}
.uv-fi{
  display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr);
  gap: calc(32.0px * var(--k, 1)); align-items: baseline;
  padding: clamp(1.1rem,2.2vw,1.6rem) 0;
  border-top: 1px solid var(--vh-line, rgba(16,12,13,.1));
  transition: border-color var(--uv-t) var(--uv-e);
}
.uv-fi dt{ margin: 0; display: flex; align-items: baseline; gap: .7rem }
.uv-fi-n{
  font-size: .74rem; font-weight: 700; color: var(--vh-mut, #7F6E73);
  font-variant-numeric: tabular-nums;
  transition: color var(--uv-t) var(--uv-e);
}
.uv-fi-k{ font-size: calc(17.3px * var(--k, 1)); color: var(--vh-mut, #7F6E73) }
.uv-fi dd{ margin: 0 }
.uv-fi dd b{
  display: block; font-size: calc(19.8px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.25; color: var(--vh-ink, #100C0D);
}
.uv-fi dd i{
  display: block; margin-top: .25rem; font-style: normal;
  font-size: .88rem; line-height: 1.45; color: var(--vh-soft, #3A3436);
}
@media (hover: hover){
  .uv-fi:hover{ border-top-color: var(--uv-acc) }
  .uv-fi:hover .uv-fi-n{ color: var(--uv-acc) }
}
@media (max-width: 900px){
  .uv-ficha-lista{ grid-template-columns: 1fr }
}
@media (max-width: 560px){
  .uv-fi{ grid-template-columns: 1fr; gap: .5rem }
}

/* ── Los títulos, con la escala del sitio ──
   Todas las secciones usan el mismo titular que Luján: mismo
   cuerpo, mismo interletrado y mismo interlineado. Y la volanta
   toma el cuerpo que la capa de etiquetas del sitio impone. */
.uv-h2{
  font-size: calc(99.2px * var(--k, 1));
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .94;
}
.uv-kick{ font-size: .82rem; font-weight: 600 }
/* el titular del cierre va sobre foto, con la misma escala */
.uv-cta-h{
  font-size: calc(99.2px * var(--k, 1));
  letter-spacing: -.055em;
  line-height: .94;
}
.uv-cta-k{ font-size: .82rem }
.uv-cta-in{ max-width: 900px }

/* ═══════════════════════════════════════════════════════════
   TÍTULOS · la misma escala que en Luján
   Todas las secciones del sitio usan el mismo titular: hasta
   6,2rem, interletrado de -.055em e interlineado de .94. Acá
   estaban más chicos, así que perdían presencia. Se igualan
   los cuatro valores en todos los títulos de la página, y la
   volanta toma el cuerpo del sistema.
   ═══════════════════════════════════════════════════════════ */
.uv-h2,
.uv-cta-h{
  font-size: calc(99.2px * var(--k, 1));
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .94;
}
/* el del cierre va sobre foto, en blanco */
.uv-cta-h{ color: #fff }
/* aire coherente bajo cada título */
.uv-bod-hd .uv-h2,
.uv-mod-hd .uv-h2,
.uv-otras-hd .uv-h2,
.uv-ficha-hd .uv-h2,
.uv-donde-tx .uv-h2{ margin-top: calc(20.8px * var(--k, 1))}
/* la volanta, con el cuerpo del sistema */
.uv-kick{ font-size: .82rem; font-weight: 600; letter-spacing: .01em }
/* los textos de apoyo no compiten con el titular */
.uv-donde-tx p,
.uv-mod-col > p{ margin-top: calc(28.8px * var(--k, 1))}
.uv-cta-p{ margin-top: calc(28.8px * var(--k, 1))}

/* ═══════════════════════════════════════════════════════════
   RITMO DE FONDOS
   Cada región marca el pulso en secciones distintas, para que
   no se repita el mismo esquema al pasar de una a otra:

     Luján  → el día, el mapa y el cierre en negro
     Uco    → el día en bordó y la ficha en negro
     Maipú  → las bodegas en negro y el cierre en bordó

   Acá el día va en el color de la marca, que es donde Uco
   tiene su momento más fuerte, y la ficha en negro.
   ═══════════════════════════════════════════════════════════ */

/* ── La ficha, en negro ── */
.uv-ficha{ background: #0B0708; color: #fff }
.uv-ficha .uv-kick{ color: rgba(255,255,255,.72) }
.uv-ficha .uv-h2{ color: #fff }
.uv-fi{ border-top-color: rgba(255,255,255,.18) }
.uv-fi-n{ color: rgba(255,255,255,.55) }
.uv-fi-k{ color: rgba(255,255,255,.6) }
.uv-fi dd b{ color: #fff }
.uv-fi dd i{ color: rgba(255,255,255,.76) }
@media (hover: hover){
  .uv-fi:hover{ border-top-color: var(--uv-acc) }
  .uv-fi:hover .uv-fi-n{ color: var(--uv-acc) }
}

/* ── Otros tours vuelve a papel: el humo queda solo en las
      dos maneras, para no repetir tono seguido ── */

/* ── Las dos maneras, en el bordó de la marca ──
   Es la sección donde se decide, así que es la que merece el
   color. El día vuelve al fondo del tema: blanco en modo claro
   y negro en modo oscuro, como el resto de la página. */
.uv-mod{ background: #6B1D2A; color: #fff }
.uv-mod .uv-kick{ color: rgba(255,255,255,.78) }
.uv-mod .uv-h2{ color: #fff }
.uv-mod-col{ border-top-color: rgba(255,255,255,.28) }
.uv-mod-col.is-full{ border-top-color: #fff }
.uv-mod-tag{ background: var(--vh-paper); color: #6B1D2A }
.uv-mod-col h3{ color: #fff }
.uv-mod-col > p{ color: rgba(255,255,255,.84) }
.uv-mod-col li{ color: #fff; border-bottom-color: rgba(255,255,255,.2) }
.uv-mod-col .si::before{ color: #F0C9D0 }
.uv-mod-col .no,
.uv-mod-col .no::before{ color: rgba(255,255,255,.55) }
.uv-mod .uv-btn-line{ background: transparent; border-color: rgba(255,255,255,.45); color: #fff }
.uv-mod .uv-btn-line:hover{ background: rgba(255,255,255,.12); border-color: #fff; color: #fff }
.uv-mod .uv-btn-ink{ background: var(--vh-paper); border-color: #fff; color: #6B1D2A }
.uv-mod .uv-btn-ink:hover{ background: #F0C9D0; border-color: #F0C9D0; color: #6B1D2A }

/* ── El itinerario, en segundo plano ──
   El protagonista de la página es la descripción del valle. El
   día conserva su encabezado, pero con la jerarquía de una
   sección secundaria: volanta, un título de cuerpo intermedio
   y su bajada. */
.uv-film-hd{ max-width: 62ch; margin-bottom: calc(64.0px * var(--k, 1))}
.uv-film-hd .uv-kick{ margin: 0 }

.uv-film-p{
  margin: clamp(1rem,2vw,1.4rem) 0 0; max-width: 52ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.6;
  font-weight: 300; color: var(--vh-soft, #3A3436);
}
.uv-kick{ display: block;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--vh-mut, #7F6E73) }

/* ── El encabezado del día ──
   El título de la sección tenía la misma clase que las horas de
   cada paso, así que las dos reglas se pisaban. Ahora tiene la
   suya: volanta, título de cuerpo intermedio y bajada, todo
   alineado a la izquierda como el resto de la página. */
.uv-film-hd{
  max-width: 62ch; margin-bottom: calc(64.0px * var(--k, 1));
  text-align: left;
}
.uv-film-tit{
  margin: clamp(.9rem,1.8vw,1.2rem) 0 0;
  font-size: calc(51.2px * var(--k, 1));
  font-weight: 700; letter-spacing: -.05em; line-height: 1.02;
  color: var(--vh-ink, #100C0D);
}

/* ── Las volantas, en el color de la marca ──
   En Luján van en bordó, igual que el filete. Acá habían
   quedado en gris. */
.uv-kick{ color: var(--uv-acc) }
/* sobre el bloque bordó y el negro, en blanco */
.uv-mod .uv-kick{ color: rgba(255,255,255,.86) }
.uv-ficha .uv-kick{ color: rgba(255,255,255,.86) }

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