:root {
  --nav-bg: #efece6;
  --text-dark: #1f1f1f;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --serif: "GT Alpina Trial", serif;
  --sans: "Raleway", system-ui, -apple-system, sans-serif;
}
/* =========================
   HEADER — OVERRIDE SOLO VINOS
========================= */
/* =========================
   LOGO BdC — VINOS
========================= */

.pageVinos .siteHeader {
  background: var(--bg-cream); /* mismo fondo claro del sitio */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.pageVinos .nav {
  color: rgba(255, 255, 255, 0.92);
}

.pageVinos .brandMark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.pageVinos .brandLogo {
  display: block;
  height: 32px; /* el tamaño final */
  width: auto;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.pageVinos .navLinks a {
  color: rgba(255, 255, 255, 0.92);
}

.pageVinos .navLinks a:hover {
  opacity: 1;
}

.pageVinos .navLinks a[aria-current="page"] {
  text-decoration: none;
  opacity: 1;
  font-weight: 500;
}

.pageVinos .navLinks a::after {
  background: rgba(255, 255, 255, 0.8);
}

/* estado activo */
.pageVinos .navLinks a[aria-current="page"]::after {
  background-color: var(--text-dark);
}

/* --- subnav fijo --- */
.vinosNav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.vinosPrimary {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 48px 14px;
  display: flex;
  justify-content: center; /* centrado */
  gap: 100px; /* más aire */
  align-items: center;
}

.tab {
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.14em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  padding: 10px 6px;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.tab.isActive {
  color: rgba(0, 0, 0, 0.95);
}

.vinosSecondary {
  background: var(--bg-cream); /* o el color base de la página */
  padding: 18px 48px 26px;
}

.vinosSecondary .pillRow {
  display: flex;
  justify-content: flex-start;
  gap: 56px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vinosSecondary .pillRow::-webkit-scrollbar {
  display: none;
}

.vinosSecondary.isHidden {
  display: none;
}

.pillRow {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
/* =========================
   Pills (Malbec / Cab Franc)
   Estado activo más claro
========================= */
/* =========================
   Pills como texto editorial
   (igual al nav de etiquetas)
========================= */

.pill {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;

  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
  opacity: 1;

  cursor: pointer;
  white-space: nowrap;

  box-shadow: none;
  outline: none;

  transition: color 0.25s var(--ease), font-weight 0.25s var(--ease);
}

/* Estado activo */
.pill.isActive {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 600; /* leve bold, nada más */
}

/* Hover sutil */
.pill:hover {
  color: rgba(0, 0, 0, 0.7);
}

/* Focus accesible pero invisible visualmente */
.pill:focus-visible {
  outline: none;
}

/* --- bloque etiqueta (claro) --- */
.labelIntro {
  background: var(--bg-cream); /* o el cream del sitio */
}

.labelTitle {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--text-dark);
  text-transform: uppercase;
}

.labelBody {
  font-family: var(--sans); /* GT Alpina */
  font-weight: 200; /* Light */
  font-size: 14px; /* ajustable */
  line-height: 1.6;
  color: var(--text-dark); /* o var(--text-dark) */
  max-width: 520px; /* muy mockup */
}

.labelIntroInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* izquierda más grande */
  gap: 50px;
  align-items: stretch;
  transform: scale(0.98);
  transform-origin: center;
}

.labelIntroLeft img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  margin-top: 20px;
}

.labelIntroRight {
  display: grid;
  gap: 18px;
}

.labelIntroRightImg img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .labelIntroInner {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .labelIntroLeft img {
    height: 260px;
  }
  .labelIntroRightImg img {
    height: 220px;
  }
}

/* --- stage color --- */
/* =========================
   VINOS — STAGE + HERO FIX
   (evita que el heroTexture quede "debajo" del bg)
========================= */

.wineStage {
  background-color: var(
    --wine-bg,
    #efece6
  ); /* ojo: background-color, NO background: */
}

/* Hero: crea un stacking context estable */
.wineHero {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* clave anti-bugs de z-index con blur/transform */
}

/* La textura/foto SIEMPRE al fondo */
.wineHeroMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* si el JS setea background-image acá, esto lo hace visible siempre */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Contenido arriba de la textura */
.wineHeroInner {
  position: relative;
  z-index: 1;
}

/* opcional: capa suave para legibilidad del título */
.wineHeroMedia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.25)
  );
  pointer-events: none;
}

.wineHeroInner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 48px 70px; /* ajustá el bottom para calzar como mockup */
}

.wineHeroInner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.wineHeroTitle {
  font-size: 0px; /* ajustable */
  letter-spacing: 0.06em;
}

.wineHeroTitle {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* layout fijo */
.wineLayout {
  padding: 0 0 92px;
}
.wineLayoutInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  gap: 26px;
}

.wineLower {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr; /* ficha izq, foto der */
  gap: 44px;
  align-items: start;
}

.wineMain img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

@media (max-width: 900px) {
  .wineLayoutInner {
    padding: 0 20px;
  }
  .wineLower {
    grid-template-columns: 1fr;
  }
  .wineMain img {
    height: 320px;
  }
}

/* imágenes */
.wineGrid {
  display: grid;
  gap: 18px;
}

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
.grid3 img,
.gridMain img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}
.grid3 img {
  height: 190px;
}

.gridMain img {
  height: 360px;
}

/* ficha mockup */
.wineSheet {
  max-width: 520px;
}

.wineQuote {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.wineSpec {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.specRow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.specLabel {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.specValue {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.wineMetrics {
  display: grid;
  gap: 8px;
  padding-top: 16px;
}
.metricRow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
}
.metricLabel {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.metricValue {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

/* auto contraste para bg claro */
.wineStage.isLight .wineHeroTitle {
  color: rgba(0, 0, 0, 0.9);
}
.wineStage.isLight .wineHeroMedia {
  opacity: 0.18;
}
.wineStage.isLight .wineQuote {
  color: rgba(0, 0, 0, 0.65);
}
.wineStage.isLight .specRow {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
.wineStage.isLight .specLabel,
.wineStage.isLight .metricLabel {
  color: rgba(0, 0, 0, 0.45);
}
.wineStage.isLight .specValue,
.wineStage.isLight .metricValue {
  color: rgba(0, 0, 0, 0.68);
}

/* responsive */
@media (max-width: 900px) {
  .vinosPrimary,
  .vinosSecondary {
    padding-left: 20px;
    padding-right: 20px;
  }
  .labelIntroInner {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .labelIntroImages img {
    height: 210px;
  }
  .wineHeroInner {
    padding: 0 20px;
  }
  .wineLayoutInner {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .grid3 {
    grid-template-columns: 1fr;
  }
  .grid3 img {
    height: 220px;
  }
  .gridMain img {
    height: 280px;
  }
}

/* Header siempre arriba y cliqueable */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Si hay overlays/sections que están por encima, los bajamos */
.vinosNav,
.labelIntro,
.wineStage,
main {
  position: relative;
  z-index: 1;
}

/* Cualquier pseudo-capa decorativa NO debe capturar clicks */
.vinosNav::before,
.vinosNav::after,
.labelIntro::before,
.labelIntro::after,
.wineStage::before,
.wineStage::after {
  pointer-events: none;
}

.siteHeader .nav {
  background: transparent !important;
  color: var(--text) !important;
}

.pageVinos .siteHeader,
.pageVinos .siteHeader .nav {
  background: var(--bg-cream) !important;
}
@media (max-width: 768px) {
  .vinosNav::before,
  .vinosNav::after,
  .labelIntro::before,
  .labelIntro::after {
    pointer-events: none;
  }
}

/* ===== Header base ===== */
.pageVinosHeader .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.pageVinosHeader .brandLogo {
  height: 30px;
  width: auto;
  display: block;
}

/* underline negro en hover + current */
.pageVinosHeader .navLinks a {
  color: var(--text-dark);
  opacity: 0.85;
  text-decoration-color: rgba(31, 31, 31, 0.45); /* underline dark */
  text-underline-offset: 10px;
  text-decoration-thickness: 1px;
}

.pageVinosHeader .navLinks a:hover {
  opacity: 1;
  text-decoration-color: rgba(31, 31, 31, 0.7);
}

.pageVinosHeader .navLinks a[aria-current="page"] {
  opacity: 1;
  font-weight: 500;
  text-decoration-color: rgba(31, 31, 31, 0.55);
}

/* ===== Burger ===== */
.navBurger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}

.navBurger span {
  display: block;
  height: 2px;
  background: rgba(31, 31, 31, 0.9);
  border-radius: 999px;
  margin: 6px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Open state */
.siteHeader.isMenuOpen .navBurger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.siteHeader.isMenuOpen .navBurger span:nth-child(2) {
  opacity: 0;
}
.siteHeader.isMenuOpen .navBurger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== Mobile menu ===== */
.navMobile {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--bg-cream);
  padding: 14px 20px 18px;
  display: grid;
  gap: 12px;
}

.navMobile a {
  color: var(--text-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  opacity: 0.9;
}

.navMobile a:hover {
  opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .navLinksDesktop {
    display: none;
  }
  .navBurger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Header fijo en VINOS */
.pageVinos .header {
  background: var(--bg-cream);
}

/* Texto del nav en negro */
.pageVinos .nav {
  color: var(--text-dark);
}

.pageVinos .navLinks a {
  color: var(--text-dark);
  opacity: 0.9;
}

.pageVinos .navLinks a:hover {
  opacity: 1;
}

/* Subrayado oscuro */
.pageVinos .navLinks a::after {
  background: rgba(30, 30, 30, 0.7);
}
/* =========================================================
   VINOS — Ajuste de layout de imágenes (match mockup)
   Pegalo al FINAL de vinos.css
========================================================= */

:root {
  --vinos-max: 1220px;
  --vinos-pad-x: 48px;
  --vinos-gap-lg: 56px;
  --vinos-gap-md: 36px;
}

/* ----- HERO textura (imagen full width + título abajo) ----- */
.wineHero {
  position: relative;
  height: clamp(420px, 62vh, 760px);
  overflow: hidden;
}

.wineHeroMedia {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

.wineHeroInner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--vinos-pad-x) 64px;
}

/* ----- CONTENEDOR GENERAL ----- */
.wineLayoutInner {
  max-width: var(--vinos-max);
  margin: 0 auto;
  padding: 0 var(--vinos-pad-x) 84px;
}

/* ----- ROW de 3 imágenes (mismo tamaño / recorte) ----- */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vinos-gap-md);
  margin-top: 44px; /* espacio desde el hero */
}

.grid3 img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4; /* 🔑 parecido a mockup */
  object-fit: cover; /* recorte “editorial” */
  object-position: center;
}

/* ----- BLOQUE INFERIOR: ficha izquierda + imagen grande derecha ----- */
.wineLower {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr; /* derecha un toque más grande */
  gap: var(--vinos-gap-lg);
  align-items: start;
  margin-top: 56px;
}

.wineMain img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5; /* grande tipo mockup */
  object-fit: cover;
  object-position: center;
}

/* ----- Ajustes finos de la ficha para respirar como mockup ----- */
.wineSheet {
  padding-top: 6px;
}

.wineQuote {
  max-width: 36ch;
  margin-bottom: 28px;
}

/* ----- Responsive ----- */
@media (max-width: 980px) {
  :root {
    --vinos-pad-x: 24px;
  }
  .grid3 {
    gap: 20px;
  }
  .wineLower {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .wineMain img {
    aspect-ratio: 16 / 10; /* en mobile queda más panorámica y prolija */
  }
}

@media (max-width: 680px) {
  .grid3 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .grid3 img {
    aspect-ratio: 4 / 5;
  }
}
/* ---- FIX: aspect ratio controlado por wrapper ---- */

.grid3 .wineThumb {
  aspect-ratio: 2 / 3; /* 3:4,5 => 2:3 */
  overflow: hidden;
}

.grid3 .wineThumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* para que no corte tanto el cuello */
  object-position: 50% 35%;
}

/* Imagen grande derecha */
.wineMainFrame {
  aspect-ratio: 2 / 3; /* o 4/5 si querés menos vertical */
  overflow: hidden;
}

.wineMainFrame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.wineHeroMedia {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.wineHeroMedia::before,
.wineHeroMedia::after,
.wineHero::before,
.wineHero::after {
  background: none !important;
}
.wineHeroTitle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1;
}
.wineHeroTitle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1;
}

/* ETIQUETA — 16px */
.wineHeroKicker {
  font-family: var(--sans); /* Raleway */
  font-weight: 300; /* Light */
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.92;
}

/* VINO — 40px */
.wineHeroMain {
  font-family: var(--alpina-condensed, var(--serif));
  font-weight: 200; /* Thin */
  font-size: 40px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* =========================
   VINOS — QUOTE (más grande y ancho)
========================= */

.wineSheet {
  /* si tu columna ya tiene un ancho, no hace falta cambiarlo;
     pero esto ayuda a que quote + spec compartan el mismo "bloque" */
  width: 100%;
  max-width: 560px; /* ajustá si tu ficha es más ancha/angosta */
}

.wineQuote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;

  font-size: clamp(18px, 1.5vw, 22px); /* más grande */
  line-height: 1.7;

  width: 100%; /* ocupa todo el ancho de la ficha */
  max-width: none; /* evita que quede angosto */
  margin: 0 0 48px 0; /* separación con la ficha técnica */
}
/* =========================
   VINOS — Menú mobile legible al abrir
========================= */

/* Que las 3 líneas del burger sigan el color del botón */
.pageVinos .navToggle {
  color: var(--text-dark);
}
.pageVinos .navToggle span {
  background: currentColor;
}

/* Cuando el menú está abierto => todo blanco */
.pageVinos .navToggle[aria-expanded="true"] {
  color: #fff;
}

/* navLinks es el overlay/menú */
.pageVinos .navToggle[aria-expanded="true"] ~ .navLinks {
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}

/* links blancos dentro del overlay */
.pageVinos .navToggle[aria-expanded="true"] ~ .navLinks a {
  color: inherit;
  opacity: 0.95;
}

/* opcional: subrayado blanco en menú abierto */
.pageVinos .navToggle[aria-expanded="true"] ~ .navLinks a::after {
  background: rgba(255, 255, 255, 0.6);
}
/* VINOS — Título del hero siempre blanco */
.wineStage .wineHeroTitle {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* (opcional) si también tenés subtítulos/kicker dentro del hero */
.wineStage .wineHeroInner,
.wineStage .wineHeroTitleWrap {
  color: rgba(255, 255, 255, 0.92) !important;
}
/* ====== Pills row hint (flechas) ====== */
.vinosSecondary {
  position: relative;
}

.pillRow {
  /* deja espacio para las flechas */
  padding: 0 44px;
}

/* Botones flecha */
.pillArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(6px);
}

.pillArrow span {
  font-size: 18px;
  line-height: 1;
}

.pillArrow--left {
  left: 8px;
}
.pillArrow--right {
  right: 8px;
}

.pillArrow:hover {
  opacity: 0.85;
  transform: translateY(-50%) scale(1.03);
}

/* animación sutil “nudge” para indicar que se puede deslizar */
.pillArrow--right {
  animation: pillNudgeR 1.6s ease-in-out infinite;
}
.pillArrow--left {
  animation: pillNudgeL 1.6s ease-in-out infinite;
}

@keyframes pillNudgeR {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-50%) translateX(5px);
    opacity: 0.75;
  }
}
@keyframes pillNudgeL {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-50%) translateX(-5px);
    opacity: 0.75;
  }
}

/* ocultar cuando no corresponde */
.pillArrow.isHidden {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

/* mobile: un toque más compactas */
@media (max-width: 520px) {
  .pillRow {
    padding: 0 40px;
  }
  .pillArrow {
    width: 34px;
    height: 34px;
  }
}
/* =========================
   FIX iOS: Links azules en navegación (VINOS / mobile)
   Scope: solo página VINOS
========================= */
@media (max-width: 768px) {
  /* 1) Mata el azul iOS (link/visited/active) en toda la página vinos */
  .pageVinos a,
  .pageVinos a:link,
  .pageVinos a:visited,
  .pageVinos a:hover,
  .pageVinos a:active,
  .pageVinos a:focus {
    color: #111 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #111 !important; /* iOS a veces ignora 'color' */
  }

  /* 2) Flechas / íconos: que sigan el color del texto */
  .pageVinos button,
  .pageVinos [role="button"] {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
  }

  .pageVinos svg,
  .pageVinos svg * {
    stroke: currentColor !important;
    fill: currentColor !important;
  }

  /* 3) Quitar highlight azul al tocar */
  .pageVinos a,
  .pageVinos button,
  .pageVinos [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
}
/* =========================
   VINOS — Fix overflow horizontal + nav etiquetas (mobile)
========================= */
@media (max-width: 768px) {
  /* 1) Evitar movimiento lateral + banda negra (overflow-x) */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* fallback */
    background: #eee8de; /* poné acá tu color de fondo real si es otro */
  }

  /* iOS/modern browsers: recorta sin crear scrollbars */
  .pageVinos {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* mejor que hidden (no genera scroll) */
    background: #eee8de; /* mismo fondo para que no aparezca negro */
  }

  /* 2) Nav de etiquetas (Chimuelo / NDT / Passito) dentro del margen */
  /* Ajustá el selector si tu barra tiene otro nombre, pero esto suele enganchar */
  .pageVinos .labelsNav,
  .pageVinos .wineLabels,
  .pageVinos .subNav,
  .pageVinos .tagsNav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    overflow: hidden; /* evita que un item empuje el ancho */
  }

  /* Si los items son links o botones dentro de esa barra */
  .pageVinos .labelsNav a,
  .pageVinos .wineLabels a,
  .pageVinos .subNav a,
  .pageVinos .tagsNav a,
  .pageVinos .labelsNav button,
  .pageVinos .wineLabels button,
  .pageVinos .subNav button,
  .pageVinos .tagsNav button {
    max-width: 100%;
    white-space: normal; /* permite salto de línea si hace falta */
    overflow-wrap: anywhere; /* corta “PASSITO / PREDADOR” sin desbordar */
  }

  /* 3) Extra: si hay contenedores con 100vw, suelen causar overflow por la scrollbar */
  .pageVinos [style*="100vw"],
  .pageVinos .fullBleed,
  .pageVinos .bleed {
    max-width: 100%;
  }

  /* 4) Si hay un track/carrusel horizontal que captura pan-x, forzamos pan-y */
  .pageVinos .carouselTrack,
  .pageVinos .winesTrack,
  .pageVinos .labelsTrack {
    touch-action: pan-y; /* evita arrastre lateral accidental */
  }
}
/* =========================
   VINOS — Nav etiquetas (mobile) no se sale de márgenes
========================= */
@media (max-width: 768px) {
  /* Contenedor section */
  .pageVinos .vinosNav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 24px; /* <-- margen real */
  }

  /* Nav: siempre dentro del contenedor */
  .pageVinos .vinosPrimary {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    /* por si tenía cosas raras */
    margin: 0 auto;
    overflow: hidden; /* evita que un tab empuje el ancho */
  }

  /* Cada tab puede achicarse */
  .pageVinos .vinosPrimary .tab {
    flex: 1 1 0; /* clave: se reparte el ancho */
    min-width: 0; /* clave: permite shrink real */
    padding: 10px 6px;

    text-align: center;

    /* Para que no rompa el layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* si no entra, “…” en vez de salirse */

    background: transparent;
    border: 0;
    cursor: pointer;
  }
}
/* =========================
   VINOS — Nav etiquetas con scroll horizontal (mobile)
========================= */
@media (max-width: 768px) {
  .pageVinos .vinosNav {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px; /* márgenes del sitio */
  }

  .pageVinos .vinosPrimary {
    display: flex;
    align-items: center;
    gap: 22px;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    overflow-x: auto; /* ✅ scroll horizontal */
    overflow-y: hidden;
    white-space: nowrap;

    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    padding: 10px 0 12px; /* aire vertical */
    margin: 0;

    /* “snap” prolijo (opcional pero queda lindo) */
    scroll-snap-type: x mandatory;
  }

  /* Ocultar scrollbar */
  .pageVinos .vinosPrimary::-webkit-scrollbar {
    display: none;
  }
  .pageVinos .vinosPrimary {
    scrollbar-width: none; /* Firefox */
  }

  /* Botones/tab como “chips” editoriales */
  .pageVinos .vinosPrimary .tab {
    flex: 0 0 auto; /* no se estiran */
    scroll-snap-align: center;

    padding: 8px 6px;
    margin: 0;

    background: transparent;
    border: 0;
    cursor: pointer;

    /* ✅ no cortar textos */
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;

    /* look */
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Estado activo (si lo marcás con clase/aria) */
  .pageVinos .vinosPrimary .tab[aria-selected="true"],
  .pageVinos .vinosPrimary .tab.isActive,
  .pageVinos .vinosPrimary .tab.active {
    font-weight: 600;
  }
}
/* =========================
   NAV Mobile — underline negro (sin depender de active)
========================= */
@media (max-width: 768px) {
  /* cuando el menú está abierto */
  .navLinks.isOpen a {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    text-decoration: none !important;
  }

  /* ✅ Recolorear CUALQUIER pseudo underline que uses */
  .navLinks.isOpen a::after,
  .navLinks.isOpen a::before {
    background-color: #111 !important;
    border-color: #111 !important;
    color: #111 !important;
  }

  /* ✅ Si el underline es por border-bottom */
  .navLinks.isOpen a {
    border-bottom-color: #111 !important;
  }

  /* ✅ Si el underline es un elemento real adentro (span/div) */
  .navLinks.isOpen a span,
  .navLinks.isOpen a i,
  .navLinks.isOpen a em,
  .navLinks.isOpen a strong {
    color: #111 !important;
  }
}
/* =========================
   NAV Mobile — eliminar underline (UX clean)
========================= */
@media (max-width: 768px) {
  /* Links del menú hamburguesa */
  .navLinks.isOpen a {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Eliminar cualquier pseudo underline */
  .navLinks.isOpen a::before,
  .navLinks.isOpen a::after {
    content: none !important;
    background: transparent !important;
    opacity: 0 !important;
    box-shadow: none !important;
  }

  /* También en hover/focus/active (por si quedó algo heredado) */
  .navLinks.isOpen a:hover,
  .navLinks.isOpen a:focus,
  .navLinks.isOpen a:active {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
}
/* =========================
   VINOS — eliminar underline fijo del menú hamburguesa (mobile)
========================= */
@media (max-width: 768px) {
  /* scope a página vinos si usás .pageVinos en el body */
  .pageVinos .navLinks.isOpen a {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  .pageVinos .navLinks.isOpen a::before,
  .pageVinos .navLinks.isOpen a::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    box-shadow: none !important;
  }

  /* Por si vinos.css agrega underline solo al "current" */
  .pageVinos .navLinks.isOpen a[aria-current="page"],
  .pageVinos .navLinks.isOpen a.active,
  .pageVinos .navLinks.isOpen a.isActive {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}
/* =========================
   NAV etiquetas — mobile:
   3 items SIEMPRE visibles
   en 1 fila, sin scroll
========================= */
@media (max-width: 520px) {
  .vinosPrimary {
    flex-wrap: nowrap; /* ✅ una sola fila */
    justify-content: space-between;
    gap: 12px; /* más chico para que entre */
    padding: 14px 18px; /* mantiene margen, pero más ajustado */
  }

  .vinosPrimary .tab {
    flex: 1 1 0; /* ✅ se reparten el ancho */
    min-width: 0; /* ✅ permite que se achiquen */
    white-space: normal; /* ✅ permite salto de línea dentro del tab */
    text-align: center;
    padding: 10px 6px;

    /* para que no se corte feo */
    overflow: hidden;
    text-overflow: ellipsis;

    /* tipografía un toque más compacta */
    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1.15;
  }
}