/* ═══════════════════════════════════════════════════════════
   VWT · PÁGINAS DE TOUR
   Mismo sistema de marca y mismo tempo que la home, con
   recursos propios: portada editorial, línea de tiempo
   horizontal, comparador con interruptor, cinta de bodegas,
   ficha técnica y barra de acción fija.
   ═══════════════════════════════════════════════════════════ */
.vt{ --vt-pad: var(--vh-pad); --vt-max: calc(1400px * var(--k, 1)); }

/* ── 1 · PORTADA ── */
@keyframes vtDrift{from{transform:scale(1.05)}to{transform:scale(1.12) translate3d(-1%,-1%,0)}}
.vt-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 clamp(1rem,2vw,1.6rem);
  font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:#fff}
.vt-eyebrow i{display:block;width:26px;height:1px;background:var(--vh-acc)}
.vt-title{margin:0;font-size: calc(105.6px * var(--k, 1));font-weight:700;
  letter-spacing:-.055em;line-height:.92;color:#fff}
.vt-title em{font-style:normal;color:var(--vh-acc)}
.vt-sub{margin:clamp(1.2rem,2.4vw,1.9rem) 0 0;max-width:48ch;font-weight:300;
  font-size: calc(20.5px * var(--k, 1));line-height:1.6;color:rgba(255,255,255,.86)}
@keyframes vtWheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ── 2 · APERTURA ── */
.vt-open{padding:var(--vh-sec) var(--vt-pad)}

/* ── 6 · FICHA TÉCNICA ── */
.vt-specs{padding:var(--vh-sec) var(--vt-pad)}

/* ── 7 · CIERRE ── */
.vt-end{position:relative;overflow:hidden;background:#0B0708;
  padding:clamp(5rem,calc(14 * var(--1vh)),9rem) var(--vt-pad);text-align:center;color:#fff}
.vt-end-media{position:absolute;inset:0;z-index:0}
.vt-end-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.9)}
.vt-end-veil{position:absolute;inset:0;z-index:1;
  background:radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,.2) 0%, rgba(0,0,0,.72) 100%)}
.vt-end-in{position:relative;z-index:2;max-width:900px;margin:0 auto}
.vt-end-h{margin:0;font-size: calc(64.0px * var(--k, 1));font-weight:700;letter-spacing:-.05em;line-height:1;color:#fff}
.vt-end-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,.78)}

/* ── BARRA DE ACCIÓN ── */
html[data-theme="dark"] 
/* ── ADAPTACIÓN ── */
@media(max-width:900px){
      }
@media(max-width:600px){
            }
@media(prefers-reduced-motion:reduce){
  .vt-title b,.vt-eyebrow,.vt-sub,}

.vt-in{ max-width: var(--vt-max); margin-inline: auto; width: 100%; }

/* ── PORTADA · el título entra por líneas ── */
.vt-title span{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.1em; }
.vt-title b{ display:block; font-weight:700;
  transform: translateY(105%); animation: vtLine 1.15s cubic-bezier(.22,1,.36,1) forwards; }
.vt-title span:nth-child(2) b{ animation-delay:.12s }
@keyframes vtLine{ to{ transform: translateY(0) } }
.vt-eyebrow, .vt-sub{ opacity:0; animation: vtUp .9s cubic-bezier(.22,1,.36,1) forwards }
.vt-eyebrow{ animation-delay:.05s }
.vt-sub{ animation-delay:.5s }
@keyframes vtUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

/* ficha integrada al pie de la portada */

/* ── APERTURA · editorial asimétrica ── */
.vt-open-lb{ display:block; margin-top:.4rem; font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:var(--vh-mut) }

/* ── LÍNEA DE TIEMPO · más información, mismo gesto ── */

/* ── COMPARADOR · entrada escalonada de la lista ── */

/* ── FICHA · título anclado ── */

.vt-specs-hd{ text-align:center; margin-bottom: calc(48.0px * var(--k, 1))}

/* ── CIERRE · volanta entre filetes ── */
.vt-end-k{ display:inline-flex; align-items:center; gap:.8rem; margin:0 0 clamp(1rem,2vw,1.6rem);
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; font-weight:700; color:#fff }
.vt-end-k i{ display:block; width: calc(40.0px * var(--k, 1)); height:1px; background:rgba(255,255,255,.45) }

/* ── BARRA · con la marca ── */

@media(max-width:900px){
          }
@media(prefers-reduced-motion:reduce){
  .vt-title b,.vt-eyebrow,.vt-sub,}

.vt-pan:focus-visible{ outline:3px solid var(--vh-acc); outline-offset:4px; }

@media(max-width:900px){
    .vt-pans{ flex-wrap:wrap; height:auto; }
  .vt-pan{ flex:1 1 calc(50% - .5rem); aspect-ratio:4/3; }
  .vt-pan .vt-pan-tx i{ opacity:1; transform:none; }
}
@media(max-width:600px){
  .vt-pan{ flex:1 1 100%; aspect-ratio:3/2; }
}

/* ═══════════════════════════════════════════════════════════
   PORTADA · panel de vidrio con los datos del día
   ═══════════════════════════════════════════════════════════ */
@keyframes vtBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ═══════════════════════════════════════════════════════════
   APERTURA · capitular y dos columnas
   ═══════════════════════════════════════════════════════════ */
.vt-open-lb{ display:block; margin:0 0 clamp(1rem,2vw,1.6rem);
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--vh-acc) }

/* ═══════════════════════════════════════════════════════════
   AGENDA · eje horario real, bloques proporcionales
   ═══════════════════════════════════════════════════════════ */
.vt-h2{ margin:.9rem 0 0; font-size: calc(99.2px * var(--k, 1)); font-weight:700;
  letter-spacing:-.055em; line-height:.94; color:var(--vh-ink) }

/* ═══════════════════════════════════════════════════════════
   COMPARADOR · las dos opciones a la vista
   ═══════════════════════════════════════════════════════════ */
.vt-cmp{ padding:var(--vh-sec) var(--vt-pad) }
.vt-cmp-hd{ text-align:center; margin-bottom: calc(48.0px * var(--k, 1))}
.vt-cmp-note{ max-width:62ch; margin:clamp(1.6rem,3vw,2.2rem) auto 0; text-align:center;
  font-size:.92rem; line-height:1.6; color:var(--vh-mut) }

@media(max-width:900px){
                      }
@media(max-width:600px){
      }
@media(prefers-reduced-motion:reduce){
  }

/* ── APERTURA · el enunciado es el titular ── */
.vt-open-h em{ font-style:normal; color:var(--vh-acc) }

/* ── AGENDA · la hora es protagonista ── */

/* ── COMPARADOR · nombres de plan grandes ── */

/* ═══════════════════════════════════════════════════════════
   PORTADA · riel vertical de datos al costado derecho
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
        }

/* ═══════════════════════════════════════════════════════════
   APERTURA · el enunciado sube línea por línea + cifras ancla
   ═══════════════════════════════════════════════════════════ */
.vt-open-h{ margin:0; font-size: calc(102.4px * var(--k, 1)); font-weight:700;
  letter-spacing:-.055em; line-height:.94; color:var(--vh-ink) }
.vt-open-h .ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.1em }
.vt-open-h .ln b{ display:block; font-weight:700; transform:translateY(105%) }
.vt-open-h em{ font-style:normal; color:var(--vh-acc) }
.vt-open.is-in .ln b{ animation:vtLine 1.05s cubic-bezier(.22,1,.36,1) forwards }
.vt-open.is-in .ln:nth-child(2) b{ animation-delay:.1s }
.vt-open.is-in .ln:nth-child(3) b{ animation-delay:.2s }
.vt-open-p{ margin:clamp(1.8rem,3.4vw,2.6rem) auto 0; max-width:52ch; text-align:center;
  font-size: calc(22.7px * var(--k, 1)); line-height:1.55; color:var(--vh-soft) }
@media(max-width:900px){
    }

/* ═══════════════════════════════════════════════════════════
   AGENDA · franjas proporcionales que se abren
   ═══════════════════════════════════════════════════════════ */

@media(hover:hover) and (pointer:fine){
        }
@media(max-width:900px){
          }

/* ═══════════════════════════════════════════════════════════
   COMPARADOR · dos tarjetas de producto
   ═══════════════════════════════════════════════════════════ */
.vt-cmp-hd{ text-align:center; margin-bottom: calc(54.4px * var(--k, 1))}
.vt-cards{ display:grid; grid-template-columns:1fr 1fr; gap: calc(25.6px * var(--k, 1)); align-items:stretch }
.vt-cd{ position:relative; display:flex; flex-direction:column;
  border:1px solid var(--vh-line); border-radius:26px;
  padding: calc(48.0px * var(--k, 1))}
.vt-cd-tag{ position:absolute; top:-.8rem; left: calc(48.0px * var(--k, 1));
  font-size:.54rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
  color:#fff; background:var(--vh-acc); border-radius:100px; padding:.45rem .95rem }
.vt-cd h3{ margin:0; font-size: calc(51.2px * var(--k, 1)); font-weight:700;
  letter-spacing:-.05em; line-height:.96; color:var(--vh-ink) }
.vt-cd-p{ margin:clamp(1rem,2vw,1.5rem) 0 0; font-size: calc(17.9px * var(--k, 1));
  line-height:1.6; color:var(--vh-soft) }
.vt-cd-list{ list-style:none; margin:clamp(1.4rem,2.8vw,2rem) 0 clamp(1.6rem,3vw,2.4rem); padding:0;
  border-top:1px solid var(--vh-line) }
.vt-cd-list li{ position:relative; padding:.85rem 0 .85rem 2rem;
  border-bottom:1px solid var(--vh-line); font-size:1rem; line-height:1.45 }
.vt-cd-list li::before{ position:absolute; left:0; top:.85rem; width:18px; text-align:center;
  font-size:.92rem; font-weight:700 }
.vt-cd-list .si::before{ content:"\2713"; color:var(--vh-acc) }
.vt-cd-list .no::before{ content:"\2014"; color:var(--vh-mut) }
.vt-cd-list .no{ color:var(--vh-mut) }
.vt-cd .vh-act{ align-self:flex-start; margin-top:auto }
.vt-cmp-note{ max-width:62ch; margin:clamp(1.8rem,3.4vw,2.6rem) auto 0; text-align:center;
  font-size:.94rem; line-height:1.6; color:var(--vh-mut) }
@media(max-width:900px){
  .vt-cards{ grid-template-columns:1fr }
  .vt-cd .vh-act{ align-self:stretch; justify-content:center }
}

/* ═══════════════════════════════════════════════════════════
   PORTADA · pantalla partida: color de marca y foto
   ═══════════════════════════════════════════════════════════ */
@keyframes vtDrift{ from{transform:scale(1.06)} to{transform:scale(1.13) translate3d(-1%,-1%,0)} }
@media(max-width:900px){
        }

/* ═══════════════════════════════════════════════════════════
   EL DÍA · tarjetas que se apilan con el scroll
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
          }

/* ═══════════════════════════════════════════════════════════
   All inclusive · tarjeta en color de marca
   ═══════════════════════════════════════════════════════════ */
.vt-cd.is-full{ background:#6B1D2A; border-color:#6B1D2A; box-shadow:0 30px 70px rgba(107,29,42,.28) }
.vt-cd.is-full h3{ color:#fff }
.vt-cd.is-full .vt-cd-p{ color:rgba(255,255,255,.82) }
.vt-cd.is-full .vt-cd-list{ border-top-color:rgba(255,255,255,.24) }
.vt-cd.is-full .vt-cd-list li{ border-bottom-color:rgba(255,255,255,.18); color:#fff }
.vt-cd.is-full .vt-cd-list .si::before{ color:#F0C9D0 }
.vt-cd.is-full .vt-cd-tag{ background:#fff; color:#6B1D2A }
.vt-cd.is-full .vh-act-wa{ background-color:#fff !important; color:#6B1D2A !important }
.vt-cd.is-full .vh-act-wa:hover{ background-color:#F0C9D0 !important; color:#6B1D2A !important }

/* ═══════════════════════════════════════════════════════════
   PORTADA · editorial a sangre (restaurada)
   ═══════════════════════════════════════════════════════════ */
.vt-cover{ position:relative; margin-top:var(--nav-h,62px);
  min-height:calc(calc(86 * var(--1vh)) - var(--nav-h,62px)); overflow:hidden; background:#0B0708;
  display:flex; align-items:flex-end; padding:0 var(--vt-pad) clamp(4rem,calc(10 * var(--1vh)),7rem) }
.vt-cover-media{ position:absolute; inset:0; z-index:0 }
.vt-cover-media img{ width:100%; height:100%; object-fit:cover; object-position:center 48%;
  filter:brightness(.56) contrast(1.06) saturate(.94);
  transform:scale(1.05); animation:vtDrift 30s cubic-bezier(.65,0,.35,1) infinite alternate }
@keyframes vtDrift{ from{transform:scale(1.05)} to{transform:scale(1.12) translate3d(-1%,-1%,0)} }
.vt-cover-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 62%, rgba(0,0,0,.86) 100%) }
.vt-cover-in{ position:relative; z-index:2; max-width:var(--vt-max); width:100%; margin:0 auto; color:#fff }

/* ═══════════════════════════════════════════════════════════
   AGENDA · franjas proporcionales (restaurada)
   ═══════════════════════════════════════════════════════════ */
@media(hover:hover) and (pointer:fine){
        }
@media(max-width:900px){
                }

/* ═══════════════════════════════════════════════════════════
   MAPA · ubicación de la zona
   ═══════════════════════════════════════════════════════════ */
.vt-map{ padding:var(--vh-sec) var(--vt-pad); background:#0B0708; color:#fff }
.vt-map-hd{ margin-bottom: calc(41.6px * var(--k, 1))}
.vt-map .vh-kick{ color:var(--vh-acc) }
.vt-map .vt-h2{ color:#fff }
.vt-map-p{ margin:clamp(1rem,2vw,1.5rem) 0 0; max-width:52ch;
  font-size: calc(18.2px * var(--k, 1)); line-height:1.6; color:rgba(255,255,255,.7) }
.vt-map-box{ border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.12) }
#map{ width:100%; height:calc(43.1 * var(--1vh)); min-height:calc(360px * var(--k, 1)); background:#0B0708 }
.mapboxgl-ctrl-logo,.mapboxgl-ctrl-attrib{ opacity:.35 }
@media(max-width:900px){
  .vt-map-box{ border-radius:18px }
  #map{ height:clamp(300px,calc(46 * var(--1vh)),420px) }
}

/* ═══════════════════════════════════════════════════════════
   EL DÍA · título anclado y recorrido vertical
   La línea se llena con el scroll y cada momento se enciende.
   ═══════════════════════════════════════════════════════════ */
.vt-day{ padding:var(--vh-sec) var(--vt-pad); background:#0B0708; color:#fff }
.vt-day-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap: calc(80.0px * var(--k, 1)); align-items:start }
.vt-day-hd{ position:sticky; top:calc(var(--nav-h,62px) + 2rem) }
.vt-day .vh-kick{ color:var(--vh-acc) }
.vt-day .vt-h2{ color:#fff }
.vt-day-p{ margin:clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width:32ch;
  font-size: calc(18.2px * var(--k, 1)); line-height:1.65; color:rgba(255,255,255,.62) }

.vt-steps2{ position:relative; list-style:none; margin:0; padding:0 }
.vt-steps-line{ position:absolute; left:5px; top:.9rem; bottom:.9rem; width:1px;
  background:rgba(255,255,255,.16) }
.vt-steps-line i{ display:block; width:100%; height:0; background:var(--vh-acc) }
.vt-step{ position:relative; display:grid; grid-template-columns:1fr auto;
  gap: calc(32.0px * var(--k, 1)); align-items:center;
  padding:clamp(1.4rem,2.8vw,2.2rem) 0 clamp(1.4rem,2.8vw,2.2rem) clamp(2rem,3.4vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.12);
  opacity:.4; transition:opacity var(--vh-t) var(--vh-e) }
.vt-step:last-child{ border-bottom:0 }
.vt-step.is-on{ opacity:1 }
.vt-step-dot{ position:absolute; left:0; top: calc(44.8px * var(--k, 1));
  width:11px; height:11px; border-radius:50%; background:#0B0708;
  border:1px solid rgba(255,255,255,.4);
  transition:background var(--vh-t) var(--vh-e),border-color var(--vh-t) var(--vh-e),transform var(--vh-t) var(--vh-e) }
.vt-step.is-on .vt-step-dot{ background:var(--vh-acc); border-color:var(--vh-acc); transform:scale(1.25) }
.vt-step-h{ font-size: calc(46.4px * var(--k, 1)); font-weight:700; letter-spacing:-.05em;
  line-height:1; color:var(--vh-acc) }
.vt-step-d{ display:inline-block; margin-left:.9rem; font-size:.54rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.22); border-radius:100px; padding:.3rem .65rem;
  vertical-align:middle }
.vt-step-tx h3{ margin:.8rem 0 .5rem; font-size: calc(24.8px * var(--k, 1)); font-weight:700;
  letter-spacing:-.03em; color:#fff }
.vt-step-tx p{ margin:0; max-width:44ch; font-size: calc(17.0px * var(--k, 1));
  line-height:1.6; color:rgba(255,255,255,.66) }
.vt-step-img{ flex:0 0 auto; width: calc(180.0px * var(--k, 1)); aspect-ratio:1/1;
  border-radius:16px; overflow:hidden }
.vt-step-img img{ width:100%; height:100%; object-fit:cover; opacity:.6;
  transition:opacity var(--vh-t) var(--vh-e), transform var(--vh-t) var(--vh-e) }
.vt-step.is-on .vt-step-img img{ opacity:1 }
@media(hover:hover){ .vt-step:hover .vt-step-img img{ transform:scale(1.06) } }
@media(max-width:900px){
  .vt-day-grid{ grid-template-columns:1fr; gap:2rem }
  .vt-day-hd{ position:static }
  .vt-day-p{ max-width:none }
  .vt-step{ grid-template-columns:1fr; opacity:1 }
  .vt-step-img{ width:100%; aspect-ratio:16/10; order:-1; margin-bottom:1rem }
  .vt-step-img img{ opacity:.9 }
}

/* ── Índice de bodegas: dos columnas, aparición escalonada ── */

/* ── Ficha del tour: cuadrícula, no lista larga ── */

/* ── Llamada a la acción tras el recorrido ── */
.vt-day-cta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:1.2rem; margin-top: calc(57.6px * var(--k, 1));
  padding-top: calc(38.4px * var(--k, 1)); border-top:1px solid rgba(255,255,255,.14) }
.vt-day-cta p{ margin:0; font-size: calc(20.5px * var(--k, 1)); font-weight:500;
  letter-spacing:-.02em; color:#fff; max-width:46ch }

/* ── Mapa: acción incluida ── */
.vt-map-cta{ display:flex; justify-content:center; margin-top: calc(41.6px * var(--k, 1))}

@media(max-width:900px){
      .vt-day-cta{ flex-direction:column; align-items:stretch }
  .vt-day-cta .vh-act{ justify-content:center }
}
@media(max-width:600px){
  }

/* ── Apertura centrada ── */
.vt-open-in{ text-align:center }
.vt-open-in .vt-open-lb{ justify-content:center }
.vt-open-h{ margin-inline:auto; max-width:18ch }

/* ═══════════════════════════════════════════════════════════
   FICHA DEL TOUR · hoja de especificaciones
   Sin cajas: etiquetas al costado, valores grandes y filetes.
   ═══════════════════════════════════════════════════════════ */
.vt-spec-list{ margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr;
  column-gap: calc(96.0px * var(--k, 1))}
.vt-spec-list div{ display:grid; grid-template-columns:auto 1fr; align-items:baseline;
  gap: calc(32.0px * var(--k, 1));
  padding:clamp(1.1rem,2.2vw,1.6rem) 0; border-top:1px solid var(--vh-line) }
.vt-spec-list dt{ margin:0; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--vh-mut); white-space:nowrap }
.vt-spec-list dd{ margin:0; text-align:right;
  font-size: calc(21.6px * var(--k, 1)); font-weight:600; letter-spacing:-.03em;
  color:var(--vh-ink) }
.vt-spec-list div:nth-child(1),.vt-spec-list div:nth-child(2){ border-top-color:var(--vh-acc) }
@media(max-width:900px){
  .vt-spec-list{ grid-template-columns:1fr; column-gap:0 }
  .vt-spec-list div:nth-child(2){ border-top-color:var(--vh-line) }
}
@media(max-width:520px){
  .vt-spec-list div{ grid-template-columns:1fr; gap:.35rem }
  .vt-spec-list dd{ text-align:left }
}

/* ── Índice de bodegas: cada nombre lleva a su página ── */
@media (hover:hover){
        }

/* ── Título del día: entra en la columna sin quebrarse feo ── */
.vt-h2-day{ font-size: calc(51.2px * var(--k, 1)); line-height:1.02; max-width:15ch }
.vt-day-grid{ grid-template-columns:.92fr 1.08fr }
@media(max-width:900px){
  .vt-h2-day{ font-size: calc(41.6px * var(--k, 1)); max-width:none }
    }

/* ═══════════════════════════════════════════════════════════
   SEGUIR EXPLORANDO · paneles que se ensanchan (restaurado)
   ═══════════════════════════════════════════════════════════ */
.vt-next{ padding:var(--vh-sec) var(--vt-pad) }
.vt-next-hd{ text-align:center; margin-bottom: calc(44.8px * var(--k, 1))}
.vt-pans{ display:flex; gap: calc(14.4px * var(--k, 1)); height:clamp(360px,calc(52 * var(--1vh)),540px) }
.vt-pan{ position:relative; flex:1 1 0; min-width:0; border-radius:22px; overflow:hidden;
  background:#0B0708; display:block; text-decoration:none;
  transition:flex-grow var(--vh-t) var(--vh-e) }
.vt-pan img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72; transition:opacity var(--vh-t) var(--vh-e) }
.vt-pan-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,5,6,.1) 30%,rgba(8,5,6,.9) 100%) }
.vt-pan-tx{ position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding: calc(27.2px * var(--k, 1)); display:block }
.vt-pan-tx b{ display:block; font-size: calc(25.6px * var(--k, 1)); font-weight:700;
  letter-spacing:-.03em; color:#fff }
.vt-pan-tx i{ display:block; margin-top:.3rem; font-style:normal;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.66) }
.vt-pan-go{ position:absolute; z-index:3; top: calc(20.8px * var(--k, 1)); right: calc(20.8px * var(--k, 1));
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff;
  opacity:0; transform:scale(.85);
  transition:opacity var(--vh-t) var(--vh-e), transform var(--vh-t) var(--vh-e), background var(--vh-t) var(--vh-e) }
.vt-pan.is-on img{ opacity:1 }
.vt-pan.is-on .vt-pan-go{ opacity:1; transform:none }
@media (hover:hover) and (pointer:fine){
  .vt-pans:hover .vt-pan{ flex-grow:1 }
  .vt-pans:hover .vt-pan:hover{ flex-grow:2.6 }
  .vt-pan:hover img{ opacity:1 }
  .vt-pan:hover .vt-pan-go{ opacity:1; transform:none; background:var(--vh-acc); border-color:var(--vh-acc) }
  .vt-pans:hover .vt-pan:not(:hover) img{ opacity:.55 }
}
.vt-pan:focus-visible{ outline:3px solid var(--vh-acc); outline-offset:4px }

/* ── Ficha del tour: etiqueta y valor con el mismo peso visual ── */
.vt-spec-list dt{ font-size: calc(18.2px * var(--k, 1)); letter-spacing:0; text-transform:none;
  font-weight:400; color:var(--vh-mut) }
.vt-spec-list dd{ font-size: calc(18.2px * var(--k, 1)); font-weight:600; color:var(--vh-ink) }

/* ── Título del día: dos líneas parejas ── */
.vt-h2-day{ font-size: calc(57.6px * var(--k, 1)); line-height:1.02; max-width:none }
.vt-day-grid{ grid-template-columns:1fr 1fr }
@media(max-width:900px){
  .vt-day-grid{ grid-template-columns:1fr }
  .vt-h2-day{ font-size: calc(41.6px * var(--k, 1))}
}

/* ═══════════════════════════════════════════════════════════
   PORTADA · bloque de acción
   Dos filas grandes sobre la foto, con filete entre medio.
   ═══════════════════════════════════════════════════════════ */
@media(hover:hover){
    }
@media(max-width:600px){
    }

/* ═══════════════════════════════════════════════════════════
   PORTADA · acción
   Un botón sólido y un enlace. Nada más.
   ═══════════════════════════════════════════════════════════ */
.vt-cta{ position:relative; z-index:2; display:flex; align-items:center; flex-wrap:wrap;
  gap: calc(32.0px * var(--k, 1)); margin-top: calc(44.8px * var(--k, 1));
  opacity:0; animation:vtUp .9s cubic-bezier(.22,1,.36,1) .62s forwards }
.vt-btn{ display:inline-flex; align-items:center; justify-content:center;
  padding:1.05rem 2.2rem; border-radius:100px;
  background:#fff; color:#0B0708;
  font-size:.86rem; font-weight:600; letter-spacing:-.01em; text-decoration:none;
  transition:background var(--vh-t) var(--vh-e), color var(--vh-t) var(--vh-e),
             transform var(--vh-t) var(--vh-e) }
.vt-lnk{ display:inline-flex; align-items:center; gap:.4rem;
  font-size:.86rem; font-weight:500; color:#fff; text-decoration:none;
  transition:color var(--vh-t) var(--vh-e) }
.vt-lnk i{ font-style:normal; font-size:1.15em; line-height:1;
  transition:transform var(--vh-t) var(--vh-e) }
.vt-note{ position:relative; z-index:2; margin:clamp(1rem,2vw,1.5rem) 0 0;
  font-size:.72rem; letter-spacing:.02em; color:rgba(255,255,255,.6);
  opacity:0; animation:vtUp .9s cubic-bezier(.22,1,.36,1) .74s forwards }
@media(hover:hover){
  .vt-btn:hover{ background:var(--vh-acc); color:#fff; transform:translateY(-1px) }
  .vt-lnk:hover{ color:var(--vh-acc) }
  .vt-lnk:hover i{ transform:translateX(3px) }
}
.vt-btn:focus-visible,.vt-lnk:focus-visible{ outline:3px solid var(--vh-acc); outline-offset:4px }
@media(max-width:600px){
  .vt-cta{ gap:1.1rem }
  .vt-btn{ width:100%; padding:1.1rem 1.6rem }
}

/* La portada deja asomar la sección siguiente: es la señal más clara
   de que hay más abajo, sin agregar flechitas ni textos. */
.vt-cover{ min-height:calc(calc(86 * var(--1vh)) - var(--nav-h,62px)) }
@media(max-width:900px){ .vt-cover{ min-height:calc(calc(84 * var(--1vh)) - var(--nav-h,62px)) } }

/* ── Botón flotante de WhatsApp: valores propios para que ninguna
      hoja heredada pueda deformarlo ── */
.wa-btn{
  position:fixed !important;
  right:1.5rem !important;
  bottom:1.5rem !important;
  width:56px !important;
  height:56px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#25D366 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 6px 24px rgba(37,211,102,.34) !important;
  z-index:930 !important;
  overflow:visible !important;
}
.wa-btn svg{
  width:28px !important;
  height:28px !important;
  fill:#fff !important;
  display:block !important;
  flex:0 0 auto !important;
}
.wa-btn::before,.wa-btn::after{ content:none !important; }
@media(hover:hover){
  .wa-btn:hover{ background:#1FB755 !important; transform:translateY(-2px); }
}
@media(max-width:600px){
  .wa-btn{ right:1.1rem !important; bottom:1.1rem !important; width:52px !important; height:52px !important; }
  .wa-btn svg{ width:26px !important; height:26px !important; }
}

/* La hoja de la home define `.vh a{color:inherit}`, que pesa más que una
   clase suelta. Por eso el texto del botón heredaba el blanco del hero.
   Estas reglas suben el peso específico en vez de usar prioridad forzada. */
a.vt-btn{ color:#0B0708 !important; background:#fff !important;
  -webkit-text-fill-color:#0B0708 }
a.vt-btn:hover{ color:#fff !important; background:var(--vh-acc) !important;
  -webkit-text-fill-color:#fff }
a.vt-lnk{ color:#fff !important; -webkit-text-fill-color:#fff }
a.vt-lnk:hover{ color:var(--vh-acc) !important; -webkit-text-fill-color:var(--vh-acc) }

/* ── La sección de blogs aporta toda la separación, igual que en la home ──
   Si el bloque anterior también suma su relleno, la distancia se duplica. */
.vt-next{ padding-bottom: 0 !important; }


/* ═══════════════════════════════════════════════════════════
   BODEGAS · mosaico editorial
   Una casa principal grande y cinco alrededor. Mismo lenguaje
   que la home: foto, filete de marca, panel que sube y filete
   que se dibuja. Lo nuevo es la jerarquía y una entrada en
   cascada diagonal al aparecer la sección.
   ═══════════════════════════════════════════════════════════ */
.vt-bodegas{ padding:var(--vh-sec) var(--vt-pad); background:var(--vh-smoke) }
.vb-hd{ max-width:62ch; margin-bottom: calc(44.8px * var(--k, 1))}
.vb-note{ margin:clamp(1rem,2vw,1.5rem) 0 0; font-size: calc(18.6px * var(--k, 1));
  line-height:1.6; font-weight:300; color:var(--vh-soft) }

.vb-mosaico{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-auto-rows:minmax(0,auto);
  gap: calc(19.2px * var(--k, 1));
}
.vb-c{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:#0B0708;
  text-decoration:none;
  isolation:isolate;
}
/* la principal ocupa dos columnas y dos filas */
.vb-lead{ grid-column:span 2; grid-row:span 2 }

.vb-media{ position:relative; display:block; height:100%; overflow:hidden; line-height:0 }
.vb-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.15s cubic-bezier(.22,1,.36,1);
}
.vb-c::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,5,6,.06) 0%, rgba(8,5,6,.12) 42%, rgba(8,5,6,.82) 82%, rgba(8,5,6,.95) 100%);
}
/* filete de marca que se dibuja al pasar */
.vb-c::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:3px; background:var(--vh-acc);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--vh-t) var(--vh-e);
}
.vb-tx{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:block; padding: calc(24.0px * var(--k, 1));
}
.vb-z{ display:block; font-size:.78rem; font-weight:500; color:rgba(255,255,255,.66) }
.vb-n{
  display:block; margin-top:.15rem;
  font-size: calc(21.6px * var(--k, 1));
  font-weight:700; letter-spacing:-.03em; color:#fff;
}
.vb-lead .vb-n{ font-size: calc(38.4px * var(--k, 1)); letter-spacing:-.04em }
.vb-d{
  display:block; margin-top:.5rem; max-width:38ch;
  font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.8);
}
.vb-go{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.85rem;
  font-size:.84rem; font-weight:600; color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--vh-t) var(--vh-e), transform var(--vh-t) var(--vh-e);
}
.vb-go i{
  font-style:normal;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--vh-acc); font-size:.74rem;
  transition:transform var(--vh-t) var(--vh-e), box-shadow var(--vh-t) var(--vh-e);
}

/* ── Entrada en cascada diagonal ── */
.vb-c{
  opacity:0;
  transform:translateY(26px) scale(.985);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.22,1,.36,1);
}
.vt-bodegas.is-in .vb-c{ opacity:1; transform:none }
.vt-bodegas.is-in .vb-c:nth-child(1){ transition-delay:.02s }
.vt-bodegas.is-in .vb-c:nth-child(2){ transition-delay:.1s }
.vt-bodegas.is-in .vb-c:nth-child(3){ transition-delay:.18s }
.vt-bodegas.is-in .vb-c:nth-child(4){ transition-delay:.14s }
.vt-bodegas.is-in .vb-c:nth-child(5){ transition-delay:.22s }
.vt-bodegas.is-in .vb-c:nth-child(6){ transition-delay:.3s }

@media(hover:hover) and (pointer:fine){
  .vb-c:hover .vb-media img{ transform:scale(1.06) }
  .vb-c:hover::before{ transform:scaleX(1) }
  .vb-c:hover .vb-go{ opacity:1; transform:none }
  .vb-c:hover .vb-go i{ transform:translateX(3px) scale(1.08);
    box-shadow:0 0 0 4px rgba(172,55,73,.26) }
}
@media(hover:none){ .vb-go{ opacity:1; transform:none } }

/* las chicas necesitan alto mínimo propio */

@media(max-width:900px){
  .vb-mosaico{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .vb-lead{ grid-column:span 2; grid-row:span 1 }
}
@media(max-width:560px){
  .vb-mosaico{ grid-template-columns:1fr }
}
@media(prefers-reduced-motion:reduce){
  .vb-c{ opacity:1; transform:none; transition:none }
  .vb-go{ opacity:1; transform:none }
}


/* ── Geometría explícita del mosaico ──
   El alto lo define la grilla, no la imagen: tres filas iguales
   dentro de un alto total fijo. Así mide exactamente lo mismo en
   cualquier página que use el componente.
   ═══════════════════════════════════════════════════════════ */
.vb-mosaico{
  grid-template-rows: repeat(3, minmax(0,1fr)) !important;
  grid-auto-rows: minmax(0,1fr) !important;
  height: calc(700.0px * var(--k, 1));
}
.vb-c{ height: 100%; min-height: 0 !important; }
.vb-media{ height: 100% !important; }
.vb-media img{ height: 100% !important; width: 100% !important; object-fit: cover; }
@media(max-width:900px){
  .vb-mosaico{
    grid-template-rows: none !important;
    grid-auto-rows: minmax(0,auto) !important;
    height: auto;
  }
  .vb-c{ aspect-ratio: 4/3; height: auto; }
  .vb-lead{ aspect-ratio: 16/10; }
}
@media(max-width:560px){
  .vb-c, .vb-lead{ aspect-ratio: 3/2; }
}

/* ═══════════════════════════════════════════════════════════
   EL DÍA · Valle de Uco
   Cuatro paneles en fila. El que apuntás gana ancho y muestra
   su detalle; los otros ceden. La altura no cambia, así que la
   página no se mueve. Variante propia del recorrido de Luján.
   ═══════════════════════════════════════════════════════════ */
.ud{ padding:var(--vh-sec) var(--vt-pad); background:#0B0708; color:#fff }
.ud-hd{ display:grid; grid-template-columns:1.1fr .9fr; gap: calc(64.0px * var(--k, 1));
  align-items:end; margin-bottom: calc(48.0px * var(--k, 1))}
.ud .vh-kick{ color:var(--vh-acc) }
.ud .vt-h2{ color:#fff }
.ud-hd-p{ margin:0 0 .4rem; max-width:44ch; font-size: calc(18.2px * var(--k, 1));
  line-height:1.6; color:rgba(255,255,255,.66) }

.ud-paneles{ list-style:none; margin:0; padding:0; display:flex;
  gap: calc(16.0px * var(--k, 1)); height:clamp(400px,calc(56 * var(--1vh)),600px) }
.ud-p{ position:relative; flex:1 1 0; min-width:0; border-radius:20px; overflow:hidden;
  background:#0B0708; transition:flex-grow var(--vh-t) var(--vh-e) }
.ud-p img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72; transition:opacity var(--vh-t) var(--vh-e), transform 1.15s cubic-bezier(.22,1,.36,1) }
.ud-p-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,5,6,.06) 28%,rgba(8,5,6,.92) 100%) }
.ud-p-tx{ position:absolute; z-index:2; left:0; right:0; bottom:0; display:block;
  padding: calc(27.2px * var(--k, 1))}
.ud-p-top{ display:flex; align-items:baseline; gap:.7rem }
.ud-p-top b{ font-size: calc(38.4px * var(--k, 1)); font-weight:700;
  letter-spacing:-.05em; line-height:1; color:var(--vh-acc) }
.ud-p-top i{ font-style:normal; font-size:.76rem; font-weight:600;
  color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.24);
  border-radius:100px; padding:.24rem .6rem }
.ud-p-tx strong{ display:block; margin-top:.55rem; font-size: calc(21.6px * var(--k, 1));
  font-weight:700; letter-spacing:-.03em; color:#fff }
.ud-p-tx em{ display:block; margin-top:.55rem; max-width:36ch; font-style:normal;
  font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.82);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--vh-t) var(--vh-e), transform var(--vh-t) var(--vh-e) }
@media(hover:hover) and (pointer:fine){
  .ud-paneles:hover .ud-p{ flex-grow:1 }
  .ud-paneles:hover .ud-p:hover{ flex-grow:2.7 }
  .ud-paneles:hover .ud-p:not(:hover) img{ opacity:.5 }
  .ud-p:hover img{ opacity:1; transform:scale(1.04) }
  .ud-p:hover .ud-p-tx em{ opacity:1; transform:none }
}
.ud-pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; margin-top: calc(41.6px * var(--k, 1));
  padding-top: calc(32.0px * var(--k, 1)); border-top:1px solid rgba(255,255,255,.16) }
.ud-pie p{ margin:0; font-size: calc(18.2px * var(--k, 1)); color:rgba(255,255,255,.72) }
@media(max-width: calc(1024px * var(--k, 1))){
  .ud-hd{ grid-template-columns:1fr; align-items:start }
  .ud-paneles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); height:auto }
  .ud-p{ aspect-ratio:4/5 }
  .ud-p img{ opacity:.9 }
  .ud-p-tx em{ opacity:1; transform:none }
}
@media(max-width:600px){
  .ud-paneles{ grid-template-columns:1fr }
  .ud-p{ aspect-ratio:3/2 }
}

/* ── El día: fluidez y color fijo ──
   El texto tenía ancho flexible, así que se reacomodaba en
   cada cuadro mientras el panel se ensanchaba: eso es lo que
   se sentía trabado. Con ancho fijo, solo se mueve el panel.
   Y los colores dejan de depender del tema: el bloque es
   oscuro siempre, así que se ve igual en claro y en oscuro. */
.ud-p{ will-change: flex-grow }
.ud-p-tx{
  width: calc(340.0px * var(--k, 1));
  max-width: calc(100% - clamp(2.2rem, 4vw, 3.4rem));
}
.ud-p-tx em{ max-width: none }
.ud-p img{ will-change: opacity, transform }

.ud{ background: #0B0708; color: #fff }
.ud .vh-kick{ color: #AC3749 }
.ud .vt-h2{ color: #fff }
.ud-hd-p{ color: rgba(255,255,255,.66) }
.ud-p-top b{ color: #AC3749 }
.ud-p-top i{ color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.24) }
.ud-p-tx strong{ color: #fff }
.ud-p-tx em{ color: rgba(255,255,255,.82) }
.ud-pie{ border-top-color: rgba(255,255,255,.16) }
.ud-pie p{ color: rgba(255,255,255,.72) }
.ud .vh-act-wa{ background-color: #AC3749; border-color: #AC3749; color: #fff }
.ud .vh-act-wa:hover{ background-color: #6B1D2A; border-color: #6B1D2A; color: #fff }

/* ═══════════════════════════════════════════════════════════
   EL DÍA · Valle de Uco · tarjetas parejas
   Las cuatro miden lo mismo y su contenido va centrado, así
   que los títulos quedan alineados entre sí. La apertura ya
   no es por ancho: el velo se disipa y el detalle aparece
   desde el centro, un gesto distinto al de Luján.
   ═══════════════════════════════════════════════════════════ */
.ud-paneles{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  height: clamp(420px, calc(58 * var(--1vh)), 620px);
}
.ud-p{
  flex: none !important;
  height: 100%;
  transition: none;
  will-change: auto;
}
.ud-p img{
  opacity: .55;
  transform: scale(1.04);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform 1.6s cubic-bezier(.22,1,.36,1);
}
.ud-p-veil{
  background: linear-gradient(180deg, rgba(8,5,6,.42) 0%, rgba(8,5,6,.62) 100%);
  transition: opacity .8s cubic-bezier(.22,1,.36,1);
}

/* contenido centrado, idéntico en las cuatro */
.ud-p-tx{
  position: absolute;
  inset: 0;
  width: auto !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(32.0px * var(--k, 1));
}
.ud-p-h{
  display: block;
  font-size: calc(44.8px * var(--k, 1));
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: #AC3749;
}
.ud-p-tx strong{
  display: block;
  margin-top: .7rem;
  font-size: calc(21.6px * var(--k, 1));
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
}
/* filete que se dibuja bajo el título */
.ud-p-tx strong::after{
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: .85rem auto 0;
  background: #AC3749;
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.ud-p-tx em{
  display: block;
  margin-top: .85rem;
  max-width: 30ch;
  font-style: normal;
  font-size: .94rem;
  line-height: 1.55;
  color: #fff;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) and (pointer: fine){
  .ud-paneles:hover .ud-p:not(:hover) img{ opacity: .3 }
  .ud-p:hover img{ opacity: .82; transform: none }
  .ud-p:hover .ud-p-veil{ opacity: .75 }
  .ud-p:hover .ud-p-tx strong::after{ transform: none }
  .ud-p:hover .ud-p-tx em{ opacity: 1; transform: none }
}
@media (hover: none){
  .ud-p img{ opacity: .7 }
  .ud-p-tx em{ opacity: 1; transform: none }
  .ud-p-tx strong::after{ transform: none }
}
@media (max-width: calc(1024px * var(--k, 1))){
  .ud-paneles{ grid-template-columns: repeat(2, minmax(0,1fr)); height: auto }
  .ud-p{ aspect-ratio: 4/5 }
}
@media (max-width: 600px){
  .ud-paneles{ grid-template-columns: 1fr }
  .ud-p{ aspect-ratio: 3/2 }
}

/* ── El día: simetría exacta y color propio ──
   La descripción usaba la etiqueta de énfasis, y el sitio
   tiene una regla global que la pinta en vino: por eso volvía
   al color de marca en modo oscuro. Ahora tiene clase propia.
   Y las cuatro tarjetas reparten su contenido en tres franjas
   iguales, así la hora, el título y el texto quedan a la misma
   altura en todas, sin importar cuánto mida cada texto. */
.ud-p-tx{
  display: grid !important;
  grid-template-rows: auto auto 1fr;
  align-content: center;
  justify-items: center;
  gap: 0;
}
.ud-p-h{
  grid-row: 1;
  min-height: 1em;
  display: flex;
  align-items: flex-end;
}
.ud-p-n{
  grid-row: 2;
  display: block;
  margin-top: .7rem;
  min-height: 2.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: calc(21.6px * var(--k, 1));
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}
.ud-p-n::after{
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: .8rem auto 0;
  background: #AC3749;
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.ud-p-d{
  grid-row: 3;
  display: block;
  margin-top: .85rem;
  max-width: 30ch;
  font-style: normal;
  font-size: .94rem;
  line-height: 1.55;
  text-align: center;
  color: #FFFFFF;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) and (pointer: fine){
  .ud-p:hover .ud-p-n::after{ transform: none }
  .ud-p:hover .ud-p-d{ opacity: 1; transform: none }
}
@media (hover: none){
  .ud-p-d{ opacity: 1; transform: none }
  .ud-p-n::after{ transform: none }
}

/* ── El día: la descripción, protagonista al abrirse ──
   Sube de cuerpo y se ubica centrada en la caja, no colgando
   del título. El velo se cierra un poco más para que el texto
   gane contraste sobre la foto. */
.ud-p-tx{
  grid-template-rows: auto auto 1fr !important;
  align-content: center;
}
.ud-p-d{
  align-self: center;
  margin-top: clamp(.9rem, calc(2 * var(--1vh)), 1.4rem);
  max-width: 26ch;
  font-size: calc(17.9px * var(--k, 1));
  line-height: 1.6;
  font-weight: 400;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(8,5,6,.5);
}
@media (hover: hover) and (pointer: fine){
  .ud-p:hover .ud-p-veil{ opacity: 1 }
  .ud-p:hover img{ opacity: .55 }
}

/* ── El día: la descripción solo se funde ──
   El escalado dejaba un desplazamiento residual al terminar,
   porque el texto se reajusta al volver a tamaño real. Ahora
   entra únicamente con opacidad: no se mueve ni un píxel. */
.ud-p-d{
  transform: none !important;
  transition: opacity .7s cubic-bezier(.22,1,.36,1) !important;
  will-change: opacity;
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════
   BODEGAS · Valle de Uco
   Índice por altura. Cada bodega es una fila con su altitud a
   la izquierda, y al apuntarla aparece su foto en el margen
   derecho, sin mover nada de la lista.
   ═══════════════════════════════════════════════════════════ */
.ub{ padding:var(--vh-sec) var(--vt-pad); background:var(--vh-paper) }
.ub-hd{ max-width:62ch; margin-bottom: calc(48.0px * var(--k, 1))}
.ub-note{ margin:clamp(1rem,2vw,1.5rem) 0 0; font-size: calc(18.6px * var(--k, 1));
  line-height:1.6; font-weight:300; color:var(--vh-soft) }

.ub-lista{ border-top:1px solid var(--vh-line) }
.ub-f{
  position:relative;
  display:grid;
  grid-template-columns:clamp(72px,8vw,110px) minmax(0,1fr) clamp(120px,14vw,190px) minmax(0,1.1fr) 44px;
  align-items:center;
  gap: calc(38.4px * var(--k, 1));
  padding:clamp(1.1rem,2.2vw,1.7rem) 0;
  border-bottom:1px solid var(--vh-line);
  text-decoration:none;
  color:inherit;
}
.ub-f-alt{
  font-size: calc(16.3px * var(--k, 1));
  font-weight:700; letter-spacing:-.02em; color:var(--vh-acc);
}
.ub-f-n{
  font-size: calc(33.6px * var(--k, 1));
  font-weight:700; letter-spacing:-.045em; line-height:1.05;
  color:var(--vh-ink);
  transition:color var(--vh-t) var(--vh-e);
}
.ub-f-z{ font-size:.88rem; color:var(--vh-mut) }
.ub-f-d{ font-size:.96rem; line-height:1.5; color:var(--vh-soft) }
.ub-f-go{
  justify-self:end;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--vh-line-2); color:var(--vh-ink); font-size:.85rem;
  transition:background-color var(--vh-t) var(--vh-e), border-color var(--vh-t) var(--vh-e),
             color var(--vh-t) var(--vh-e), transform var(--vh-t) var(--vh-e);
}
/* la foto aparece flotando, sin empujar la lista */
.ub-f-img{
  position:absolute; right: calc(112.0px * var(--k, 1)); top:50%;
  width: calc(280.0px * var(--k, 1)); aspect-ratio:4/3;
  transform:translateY(-46%) scale(.96);
  border-radius:16px; overflow:hidden;
  opacity:0; pointer-events:none; z-index:3;
  box-shadow:0 26px 60px rgba(16,12,13,.28);
  transition:opacity var(--vh-t) var(--vh-e), transform var(--vh-t) var(--vh-e);
}
.ub-f-img img{ width:100%; height:100%; object-fit:cover }
@media(hover:hover) and (pointer:fine){
  .ub-f:hover .ub-f-n{ color:var(--vh-acc) }
  .ub-f:hover .ub-f-go{ background:var(--vh-acc); border-color:var(--vh-acc);
    color:#fff; transform:translateX(3px) }
  .ub-f:hover .ub-f-img{ opacity:1; transform:translateY(-50%) scale(1) }
}
@media(max-width: calc(1100px * var(--k, 1))){
  .ub-f{ grid-template-columns:clamp(64px,9vw,90px) minmax(0,1fr) 44px;
    gap:1rem clamp(1rem,2.4vw,2rem) }
  .ub-f-z{ grid-column:2; margin-top:.15rem }
  .ub-f-d{ grid-column:2; margin-top:.35rem }
  .ub-f-img{ display:none }
}
@media(max-width:600px){
  .ub-f{ grid-template-columns:1fr auto; gap:.35rem 1rem }
  .ub-f-alt{ grid-column:1 }
  .ub-f-go{ grid-row:1 / span 2; grid-column:2; align-self:center }
  .ub-f-n, .ub-f-z, .ub-f-d{ grid-column:1 }
}

/* ── Bodegas de Uco: sin altura y sin foto flotante ──
   La foto emergente se salía del contenedor en pantallas
   medianas. Queda un índice tipográfico limpio. */
.ub-f{
  grid-template-columns: minmax(0,1.05fr) clamp(120px,14vw,190px) minmax(0,1.15fr) 44px;
}
.ub-f-img{ display: none !important }
@media(max-width: calc(1100px * var(--k, 1))){
  .ub-f{ grid-template-columns: minmax(0,1fr) 44px; gap:.4rem 1.4rem }
  .ub-f-z{ grid-column:1; margin-top:.2rem }
  .ub-f-d{ grid-column:1; margin-top:.4rem }
  .ub-f-go{ grid-row:1 / span 3; grid-column:2; align-self:center }
}
@media(max-width:600px){
  .ub-f{ grid-template-columns: 1fr auto }
  .ub-f-n{ font-size: calc(25.6px * var(--k, 1))}
}