/* ============================================================================
   Sidra Galas · tema sobre scrollcraft
   Dirección: etiquetas litografiadas de cajón de fruta del Alto Valle
   (1930-1960). Verde bosque, hueso, y los colores propios de las etiquetas.
   Ver DESIGN.md y brief/BRIEF.md.
   ========================================================================== */

:root {
  --sc-canvas:      #16231A;
  --sc-surface:     #1E2E22;
  --sc-ink:         #EEEDE4;
  --sc-ink-soft:    #D3D8C8;   /* más claro que lo habitual: lectura cómoda para personas mayores */

  /* Escala de texto más grande que la del motor: buena parte del público es
     mayor y lee en el celular. Ningún texto baja de 15 px. */
  --sc-t-xs:   clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --sc-t-sm:   clamp(1.05rem, 1rem + 0.2vw, 1.12rem);
  --sc-t-base: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
  --sc-t-lg:   clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --sc-t-xl:   clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
  --sc-t-2xl:  clamp(2.3rem, 1.8rem + 2.4vw, 3.6rem);
  --sc-t-3xl:  clamp(2.9rem, 2rem + 4.2vw, 5.2rem);
  --sc-accent:      #A41916;
  --sc-accent-ink:  #F4F1E8;

  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text:    "Hanken Grotesk", system-ui, sans-serif;
  --sc-shadow-color: 140 30% 4%;

  --manzana: #A41916;
  --manzana-vino: #7E1430;
  --sello: #E2574C;          /* rojo del sello sobre fondo oscuro, legible */
  --hoja: #579B4B;
  --hoja-clara: #ACC481;
  --pera: #FCD574;
  --pera-salmon: #EC9C72;
  --pera-oliva: #959345;
  --tierra: #8C7559;

  --rule: color-mix(in oklab, var(--sc-ink) 26%, transparent);
  --rule-soft: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --bar-h: 4.5rem;
  --r: 4px;
}

body { font-feature-settings: "kern", "liga"; }
.sc-display { font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 120; font-weight: 480; }

:focus-visible { outline-color: var(--sc-ink); }
::selection { background: var(--pera); color: #16231A; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: var(--sc-gutter); top: -4rem; z-index: 200;
  background: var(--sc-ink); color: var(--sc-canvas); padding: .6rem 1rem; border-radius: var(--r);
  transition: top var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus-visible { top: 1rem; }

/* ------------------------------------------------------------- marca -- */
.mark {
  display: block; aspect-ratio: 554 / 533; width: 3.4rem;
  background: var(--sc-ink);
  -webkit-mask: url("../img/sello-galas.png") center / contain no-repeat;
          mask: url("../img/sello-galas.png") center / contain no-repeat;
}

/* ------------------------------------------------------------ botones -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.6rem;
  border-radius: var(--sc-r-pill);
  font-weight: 600; font-size: var(--sc-t-base); letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              transform 120ms var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--primary { background: var(--manzana); color: var(--sc-accent-ink);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.14); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--rule); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--manzana-vino); }
  .btn--ghost:hover { border-color: var(--sc-ink); }
}
.btn--sm { min-height: 2.75rem; padding: 0 1.15rem; font-size: var(--sc-t-sm); }
.btn--lg { min-height: 3.6rem; padding: 0 2rem; }

/* ------------------------------------------------------------ barra -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sc-gutter);
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__home { border-radius: 50%; }
.bar .mark { width: 3.6rem; filter: drop-shadow(0 2px 6px rgb(10 16 12 / .45)); }
.bar__acciones { display: flex; align-items: center; gap: .6rem; }
.bar__corto { display: none; }
/* "Ver precios": siempre a mano, lleva directo a la tarjeta de pedido.
   Fondo propio para leerse sobre cualquier foto. */
.btn--bar {
  background: color-mix(in oklab, var(--sc-canvas) 84%, transparent); color: var(--sc-ink);
  border-color: var(--rule); box-shadow: var(--sc-e2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (hover: hover) and (pointer: fine) { .btn--bar:hover { border-color: var(--sc-ink); } }

/* -------------------------------------------------- tramos del recorrido -- */
.leg { background: var(--sc-canvas); }
.leg--peak { background: #101A13; }

/* Fotos verticales en escritorio: una lámina impresa con doble filete, como
   las etiquetas de cajón. En el celular pasan a ocupar toda la pantalla. */
.plate {
  position: absolute;
  top: calc(var(--bar-h) + 3svh); bottom: 6svh;
  aspect-ratio: 3 / 4; max-width: 40vw;
  overflow: hidden; border-radius: var(--r);
  box-shadow:
    0 0 0 1px var(--rule),
    0 0 0 9px var(--sc-canvas),
    0 0 0 10px var(--rule-soft),
    var(--sc-e3);
}
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate--left  { left: var(--sc-gutter); }
.plate--right { right: var(--sc-gutter); }
.plate--center { left: 50%; translate: -50% 0; }
.plate--tall { top: calc(var(--bar-h) + 1svh); bottom: 3svh; aspect-ratio: 853 / 1280; }
.leg--peak .plate { box-shadow: 0 0 0 1px var(--rule-soft), var(--sc-e3); }
/* la etiqueta de lote vive arriba a la izquierda durante la primera parte */
.leg[data-sc-waypoint="1930"] .plate--left { left: calc(var(--sc-gutter) + 20rem); }

.leg__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.leg__scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 32%,
    color-mix(in oklab, var(--sc-canvas) 20%, transparent) 56%,
    transparent 74%);
}
.leg__scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 32%,
    color-mix(in oklab, var(--sc-canvas) 20%, transparent) 56%,
    transparent 74%);
}
/* una sombra suave arriba para que la barra siempre se lea */
.leg--bleed::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 9rem; z-index: 2;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 55%, transparent), transparent);
  pointer-events: none;
}
.leg[data-sc-waypoint="Reposo"] .leg__scrim {
  background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 80%, transparent), transparent 46%);
}

/* ------------------------------------------------------------- textos -- */
.copy h1, .copy h2 { color: var(--sc-ink); }
.copy__lede {
  font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: var(--sc-track-snug);
  max-width: 34ch; text-wrap: pretty; margin: 0;
}
.copy__body { color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; margin: 0; }
.copy > * + * { margin-top: var(--sc-5); }
.copy > .btn { margin-top: var(--sc-6); }

.copy--hero h1 { max-width: 9ch; }
.copy--hero .copy__lede { max-width: 30ch; }

.copy--right {
  inset-inline: auto; right: var(--sc-gutter); left: auto;
  top: 50%; bottom: auto; translate: 0 -50%;
  max-width: min(29rem, 32vw);
}
.copy--left {
  inset-inline: auto; left: var(--sc-gutter); right: auto;
  top: 50%; bottom: auto; translate: 0 -50%;
  max-width: min(29rem, 32vw);
}

.year {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 340; font-style: italic;
  font-size: clamp(5rem, 12vw, 11rem); line-height: .82;
  letter-spacing: -0.04em; color: var(--pera);
  margin: 0; font-variant-numeric: lining-nums;
}

.copy--quiet {
  inset-inline: var(--sc-gutter); bottom: clamp(3rem, 10vh, 7rem);
  max-width: none; text-align: center;
}
.copy--quiet .copy__lede { margin-inline: auto; color: var(--sc-ink); }

/* el pico: el título se abre alrededor de la botella */
.copy--peak {
  inset: 0; max-width: none;
  display: grid; grid-template-rows: 1fr auto; padding-bottom: clamp(1.5rem, 5vh, 3rem);
}
.peak__title {
  margin: 0; align-self: center;
  display: grid; grid-template-columns: 1fr calc(86svh * 0.6664 + 4rem) 1fr; align-items: center;
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 144;
  font-weight: 460; font-size: clamp(2.6rem, 5.6vw, 6.2rem);
  line-height: .95; letter-spacing: -0.035em; text-wrap: balance;
}
.peak__title span:first-child { grid-column: 1; text-align: right; padding-left: var(--sc-gutter); }
.peak__title span:last-child  { grid-column: 3; padding-right: var(--sc-gutter); font-style: italic; color: var(--pera); }
.peak__note {
  margin: 0; justify-self: center; text-align: center;
  font-size: var(--sc-t-sm); letter-spacing: .06em; font-weight: 500;
  font-variant-caps: all-small-caps; font-size: var(--sc-t-base);
  background: color-mix(in oklab, #101A13 82%, transparent);
  padding: .4rem 1rem; border-radius: var(--r);
}

/* fichas de producto: impresas como etiquetas */
.ticket {
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 5px var(--sc-canvas), inset 0 0 0 6px var(--rule-soft), var(--sc-e2);
}
.ticket > * + * { margin-top: var(--sc-4); }
.ticket__kicker {
  margin: 0; font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600;
  font-size: var(--sc-t-base); color: var(--pera);
}
.ticket__name {
  margin: 0; font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 96;
  font-weight: 500; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -0.03em;
}
.ticket--pera .ticket__name { color: var(--pera); }
.ticket--manzana .ticket__name { color: var(--hoja-clara); }
.ticket__spec {
  display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; align-items: baseline;
  padding-top: var(--sc-4); margin-top: var(--sc-5);
  border-top: 1px solid var(--rule-soft);
  font-variant-numeric: tabular-nums; font-weight: 500; color: var(--sc-ink-soft);
}
.ticket__price { margin-left: auto; color: var(--sc-ink); font-size: var(--sc-t-lg); font-weight: 600; }

.copy--duo {
  inset: 0; max-width: none;
  display: grid; grid-template-columns: 1fr calc(76svh * 0.75 + 4rem) 1fr;
  align-items: center; padding: var(--bar-h) var(--sc-gutter) 0;
}
.copy--duo .ticket:first-child { grid-column: 1; }
.copy--duo .ticket:last-child { grid-column: 3; }

/* el cierre */
.finale {
  inset-inline: auto; left: var(--sc-gutter); right: auto;
  top: calc(var(--bar-h) + 1.75rem); bottom: auto;
  max-width: min(36rem, 46vw);
  background: color-mix(in oklab, var(--sc-canvas) 93%, transparent);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 5px var(--sc-canvas), inset 0 0 0 6px var(--rule-soft), var(--sc-e3);
}
.finale > * + * { margin-top: var(--sc-4); }
.finale > .btn { margin-top: var(--sc-5); width: 100%; }
/* si la tarjeta no entra en el alto, solo se desplaza la lista de packs:
   título, promo, botón y leyenda legal quedan siempre a la vista */
.finale { display: flex; flex-direction: column; }
.finale > * { flex-shrink: 0; }
.finale > .packs { flex-shrink: 1; min-height: 4.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.packs { list-style: none; padding: 0; margin: var(--sc-5) 0 0; }
.packs li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem;
  padding: .7rem 0; border-top: 1px solid var(--rule-soft);
}
.packs li:last-child { border-bottom: 1px solid var(--rule-soft); }
.packs__name { font-weight: 600; }
.packs__what { grid-column: 1; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.packs__price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; font-weight: 600; }
/* precios por unidad: recuadro de dos columnas, arriba de los packs */
.unidades {
  padding: .6rem 1rem .4rem; border-radius: var(--r);
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--sc-surface) 60%, transparent);
}
.unidades__t {
  margin: 0; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.unidades__lista { list-style: none; padding: 0; margin: .35rem 0 0; }
.unidades__lista li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: baseline;
  padding: .2rem 0; font-size: var(--sc-t-sm); line-height: 1.35;
}
.unidades__lista li + li { border-top: 1px solid var(--rule-soft); }
.unidades__name { font-weight: 600; }
.unidades__what { font-size: var(--sc-t-xs); font-weight: 400; color: var(--sc-ink-soft); white-space: nowrap; }
.unidades__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.unidades__price.is-agotado { color: var(--sello); font-variant-caps: all-small-caps; letter-spacing: .06em; }
/* dónde va el recuadro: en pantallas grandes, aparte a la derecha;
   en el celular (o muy bajas), dentro de la tarjeta de pedido */
.unidades--aparte { display: none; }
@media (min-width: 861px) and (min-height: 561px) {
  .unidades--en-pedido { display: none; }
  .unidades--aparte {
    display: block;
    inset-inline: auto; left: auto; right: var(--sc-gutter);
    top: auto; bottom: clamp(1.5rem, 6vh, 4rem);
    width: min(24rem, 38vw); max-width: none;
    padding: 1rem 1.25rem .6rem;
    background: color-mix(in oklab, var(--sc-canvas) 93%, transparent);
    box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 5px var(--sc-canvas), inset 0 0 0 6px var(--rule-soft), var(--sc-e3);
    border: 0;
  }
  .unidades--aparte .unidades__lista li { font-size: var(--sc-t-base); padding: .4rem 0; }
  .unidades--aparte .unidades__what { display: block; }
}
/* dentro de la tarjeta (celular, pantallas bajas): un renglón por bebida,
   para que los packs y el botón sigan a la vista */
@media (max-width: 860px), (max-height: 560px) {
  .unidades--en-pedido { padding: .5rem .85rem .35rem; }
  .unidades--en-pedido .unidades__lista li { padding: .15rem 0; }
}
@media (max-width: 480px), (max-height: 560px) {
  .unidades--en-pedido .unidades__what { display: none; }
}
/* la barra en el celular: "Precios" y "Pedir por WhatsApp" entran juntos */
@media (max-width: 480px) {
  .bar__largo { display: none; }
  .bar__corto { display: inline; }
  .bar__acciones { gap: .4rem; }
  .bar .btn--sm { padding: 0 .8rem; }
}
@media (max-width: 359px) { .bar__pedir { display: none; } }
.finale__nota { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.finale > .finale__nota { margin-top: var(--sc-3); }
@media (max-width: 860px) {
  /* si no entra todo, se desplaza la tarjeta entera, no solo la lista */
  .finale > .packs { flex-shrink: 0; overflow: visible; min-height: 0; }
}
/* celular parado: con los precios por unidad no entra todo; se dejan
   precios, packs, botón y leyenda legal (envíos y contacto se ven en
   WhatsApp e Instagram) */
@media (max-width: 480px) {
  .finale > .copy__body, .finale .foot p:first-child { display: none; }
  .finale .packs li { padding: .35rem 0; }
}
.foot { margin-top: var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot p { margin: 0; }
.foot p + p { margin-top: .4rem; }
.foot__legal { font-weight: 600; color: var(--sc-ink); }

/* prensa: recortes de diario, cada uno abre la nota */
.prensa {
  max-width: min(31rem, 36vw);
  background: color-mix(in oklab, var(--sc-canvas) 93%, transparent);
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 5px var(--sc-canvas), inset 0 0 0 6px var(--rule-soft), var(--sc-e2);
}
.prensa > * + * { margin-top: var(--sc-4); }
.prensa__title {
  margin: 0; font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 96;
  font-weight: 480; font-size: var(--sc-t-xl); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
}
.prensa__cita { margin: var(--sc-4) 0 0; padding-left: 1rem; border-left: 2px solid var(--pera); }
.prensa__cita blockquote { margin: 0; }
.prensa__cita p {
  margin: 0; font-family: var(--sc-font-display); font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 48;
  font-size: var(--sc-t-lg); line-height: 1.25; color: var(--pera); text-wrap: balance;
}
.prensa__cita figcaption { margin-top: .35rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.recortes { list-style: none; padding: 0; margin: var(--sc-5) 0 0; }
.recortes li { border-top: 1px solid var(--rule-soft); }
.recortes li:last-child { border-bottom: 1px solid var(--rule-soft); }
.recortes a {
  display: block; padding: .8rem 1.6rem .8rem 0; position: relative;
  color: inherit; text-decoration: none; border-radius: 2px;
}
.recortes a::after {
  content: "↗"; position: absolute; right: .1rem; top: .8rem;
  color: var(--pera); font-weight: 600;
  transition: translate var(--sc-d-fast) var(--sc-ease-out);
}
.recortes__medio {
  display: block; font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600;
  font-size: var(--sc-t-sm); color: var(--pera);
}
.recortes__titulo {
  display: block; margin-top: .15rem;
  font-family: var(--sc-font-display); font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 36;
  font-size: var(--sc-t-base); line-height: 1.3; text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .recortes a:hover .recortes__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .recortes a:hover::after { translate: 2px -2px; }
}
@media (max-width: 860px) {
  .prensa { padding: 1.25rem; max-width: none; }
  /* en el celular la tarjeta no tapa la cara de Ángela: el título queda para lectores de pantalla */
  .prensa__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prensa__cita p { font-size: var(--sc-t-base); }
  .prensa > * + * { margin-top: var(--sc-3); }
  .recortes { margin: var(--sc-3) 0 0; }
  .recortes a { padding: .55rem 1.6rem .55rem 0; }
  .recortes a::after { top: .55rem; }
}

/* promociones del backoffice: un sello, como "Partida limitada" */
.promos { margin-top: var(--sc-4); display: grid; gap: .6rem; }
.promos[hidden] { display: none; }
.promo {
  padding: .7rem .9rem; border-radius: var(--r);
  border: 1.5px solid var(--sello);
  background: color-mix(in oklab, var(--sello) 10%, transparent);
}
.promo p { margin: 0; }
.promo__titulo {
  font-family: var(--sc-font-display); font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.15; color: var(--sc-ink);
}
.promo__texto { margin-top: .2rem !important; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.promo__hasta { margin-top: .3rem !important; font-size: var(--sc-t-xs); font-weight: 600; color: var(--sello); letter-spacing: .04em; }
.ticket__price.is-agotado { color: var(--sello); font-variant-caps: all-small-caps; letter-spacing: .06em; }

/* ------------------------------------------------- la etiqueta de lote -- */
.lote {
  position: fixed; z-index: 30;
  left: var(--sc-gutter); top: calc(var(--bar-h) + 1.25rem);
  width: 19.5rem; padding: 1rem 1.1rem 1.1rem;
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 4px color-mix(in oklab, var(--sc-canvas) 90%, transparent), inset 0 0 0 5px var(--rule-soft), var(--sc-e2);
  font-size: var(--sc-t-xs);
  transition: opacity var(--sc-d-slow) var(--sc-ease-out), transform var(--sc-d-slow) var(--sc-ease-out);
}
.lote.is-away { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.lote__head {
  display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .6rem;
  font-family: var(--sc-font-display); font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: var(--sc-t-base); font-weight: 600;
}
.lote__num { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.lote__rows { margin: 0; }
.lote__row {
  display: grid; grid-template-columns: 7.6rem 1fr; gap: .5rem;
  padding: .32rem 0; border-top: 1px dotted var(--rule);
}
.lote__row:not(.is-on) { display: none; }
.lote__row.is-on { animation: lote-row 420ms var(--sc-ease-out); }
@keyframes lote-row { from { opacity: 0; transform: translateY(-4px); } }
.lote__row dt { color: var(--sc-ink-soft); font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: var(--sc-t-sm); }
.lote__row dd {
  margin: 0; font-weight: 600;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms var(--sc-ease-out);
}
.lote__row.is-on dd { clip-path: inset(0 0 0 0); }
.lote__stamp {
  margin: .8rem 0 0; display: inline-block;
  font-family: var(--sc-font-display); font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 650; font-size: var(--sc-t-sm); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sello); border: 2px solid var(--sello); border-radius: 3px; padding: .2rem .55rem;
  rotate: -7deg; opacity: 0; scale: 1.5;
  transition: opacity 200ms var(--sc-ease-out), scale 260ms cubic-bezier(.2, 1.6, .4, 1);
}
.lote__stamp.is-on { opacity: .95; scale: 1; }

/* ------------------------------------------------- puerta de edad -- */
.gate {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: var(--sc-gutter);
  background: var(--sc-canvas);
}
.gate[hidden] { display: none; }
.gate__card { text-align: center; max-width: 26rem; }
.gate__mark { width: 8.5rem; margin: 0 auto var(--sc-6); }
.gate__lede { margin: 0; color: var(--sc-ink-soft); }
.gate__q {
  margin: .5rem 0 0; font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 96;
  font-weight: 480; font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: -0.03em;
}
.gate__actions { display: flex; gap: .75rem; justify-content: center; margin-top: var(--sc-6); flex-wrap: wrap; }
.gate__no { margin-top: var(--sc-5); color: var(--pera); }
html.is-gated { overflow: hidden; }
html.is-gated .lote { opacity: 0; }

/* ------------------------------------------------------------ celular -- */
@media (max-width: 860px) {
  :root { --bar-h: 4rem; }
  .bar .mark { width: 3rem; }

  .plate, .plate--tall {
    inset: 0; translate: none; aspect-ratio: auto; max-width: none;
    border-radius: 0; box-shadow: none;
  }
  .leg[data-sc-waypoint="1930"] .plate--left { left: 0; }
  .leg__scrim, .leg__scrim--lead, .leg__scrim--trail,
  .leg[data-sc-waypoint="Reposo"] .leg__scrim {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 82%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 55%,
      transparent 72%);
  }
  .leg::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 8rem; z-index: 2;
    background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent);
    pointer-events: none;
  }

  .copy--right, .copy--left, .copy--quiet {
    inset-inline: var(--sc-gutter); left: var(--sc-gutter); right: var(--sc-gutter);
    top: auto; bottom: calc(2.2rem + env(safe-area-inset-bottom)); translate: none;
    max-width: none; text-align: left;
  }
  .copy--quiet .copy__lede { margin-inline: 0; }
  .copy--hero h1 { font-size: var(--sc-t-3xl); }
  .sc-copy--lead, .sc-copy--trail { bottom: calc(2.2rem + env(safe-area-inset-bottom)); }
  .sc-display--lg { font-size: var(--sc-t-2xl); }
  .year { font-size: clamp(4.5rem, 24vw, 7rem); }

  .copy--peak { padding: 0 var(--sc-gutter) calc(2rem + env(safe-area-inset-bottom)); align-content: end; grid-template-rows: auto auto; }
  .peak__title { display: block; font-size: clamp(2.6rem, 12vw, 3.6rem); align-self: end; }
  .peak__title span { display: block; padding: 0 !important; text-align: left !important; }
  .peak__note { justify-self: start; margin-top: var(--sc-4); text-align: left; }

  .ticket { padding: 1.25rem; }
  .ticket__name { font-size: var(--sc-t-xl); }
  .copy--duo {
    inset: auto var(--sc-gutter) calc(1.5rem + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: .75rem; padding: 0;
  }
  .copy--duo .copy__body { display: none; }
  .copy--duo .ticket__spec { margin-top: var(--sc-3); padding-top: var(--sc-3); }

  .finale {
    left: var(--sc-gutter); right: var(--sc-gutter); max-width: none;
    top: auto; bottom: calc(1rem + env(safe-area-inset-bottom));
    padding: 1.25rem;
  }
  .finale > .copy__body { font-size: var(--sc-t-sm); }
  .finale > * + * { margin-top: var(--sc-3); }
  .packs { margin-top: var(--sc-3); }
  .packs li { padding: .45rem 0; }
  .foot { margin-top: var(--sc-4); }

  .lote {
    top: calc(var(--bar-h) + .25rem); left: var(--sc-gutter); right: var(--sc-gutter);
    width: auto; padding: .55rem .8rem;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  }
  .lote__head { margin: 0; gap: .5rem; font-size: var(--sc-t-sm); }
  .lote__rows { flex: 1; min-width: 0; }
  .lote__row { display: none; border: 0; padding: 0; grid-template-columns: auto 1fr; }
  .lote__row.is-current { display: grid; }
  .lote__stamp { margin: 0; font-size: .7rem; }
}

@media (max-width: 860px) and (max-height: 700px) {
  .finale .foot p:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lote__row dd, .lote__stamp { transition: opacity 200ms linear; }
  .lote__stamp { scale: 1; }
}

/* el sello no ocupa lugar hasta que se estampa */
.lote__stamp:not(.is-on) { display: none; }
.lote__stamp.is-on { animation: stamp 300ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { opacity: 0; scale: 1.6; } }

/* 1930: la lámina se corre para dejar lugar a la etiqueta de lote, y el texto
   se angosta para no pisar la foto */
@media (min-width: 861px) {
  .leg[data-sc-waypoint="1930"] .plate--left { max-width: 33vw; }
  .copy--1930 { max-width: min(26rem, 27vw); }
}

/* el cierre nunca se sale de la pantalla: si un teléfono es muy bajo,
   el panel se desplaza por dentro */
@media (max-width: 860px) {
  .finale { max-height: calc(100svh - var(--bar-h) - 1.25rem); overflow-y: auto; overscroll-behavior: contain; }
  .packs__what { font-size: var(--sc-t-xs); }
}

/* =====================================================================
   Pantallas bajas, zoom y celulares acostados
   ---------------------------------------------------------------------
   Con zoom del navegador (125 %, 150 %, 200 %), en notebooks chicas o con
   el celular acostado, la pantalla queda mucho más baja que ancha y los
   bloques pensados para escritorio no entran: la etiqueta de lote pisa
   los títulos y las tarjetas de Prensa y Pedido se meten debajo de la
   barra. Tres reglas:
   1. Los títulos grandes también se limitan por el alto (svh), no solo
      por el ancho. El texto corrido no se achica: lo lee gente mayor.
   2. Por debajo de 900 px de alto, la etiqueta de lote pasa a ser una
      tira de una línea (como en el celular).
   3. Ninguna tarjeta puede ser más alta que el espacio libre: si igual
      no entra, se desplaza por dentro en vez de taparse.
   ===================================================================== */

/* 1 · títulos limitados por el alto */
.copy--hero h1           { font-size: min(var(--sc-t-3xl), 13svh); }
.sc-display--lg          { font-size: min(var(--sc-t-2xl), 9svh); }
.year                    { font-size: min(clamp(5rem, 12vw, 11rem), 22svh); }
.peak__title             { font-size: min(clamp(2.6rem, 5.6vw, 6.2rem), 11svh); }
.ticket__name            { font-size: min(var(--sc-t-2xl), 7svh); }
.prensa__title           { font-size: min(var(--sc-t-xl), 6svh); }

/* 3 · ninguna tarjeta más alta que el espacio libre */
.prensa, .finale, .copy--duo .ticket {
  max-height: calc(100svh - var(--bar-h) - 1.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* las tarjetas centradas en vertical no pueden subir por encima de la barra */
@media (min-width: 861px) { .copy--right.prensa { top: calc(50% + var(--bar-h) / 2); } }

/* ---------------------------------------- escritorio de poca altura -- */
@media (min-width: 861px) and (max-height: 900px) {
  /* 2 · etiqueta de lote en una línea, debajo del logo */
  .lote {
    top: calc(var(--bar-h) + .25rem); width: auto; max-width: 30rem;
    padding: .5rem .85rem;
    display: flex; align-items: center; gap: .75rem;
  }
  .lote__head { margin: 0; gap: .6rem; font-size: var(--sc-t-sm); }
  .lote__rows { flex: 1; min-width: 0; }
  .lote__row { display: none; border: 0; padding: 0; grid-template-columns: auto 1fr; gap: .6rem; }
  .lote__row.is-current { display: grid; }
  .lote__stamp { margin: 0; font-size: .75rem; }
  /* la lámina de 1930 ya no necesita correrse para dejarle lugar */
  .leg[data-sc-waypoint="1930"] .plate--left { left: var(--sc-gutter); }

  /* el cierre, más compacto */
  .finale { top: calc(var(--bar-h) + .75rem); padding: clamp(1.1rem, 2vw, 1.75rem); }
  .finale > * + * { margin-top: var(--sc-3); }
  .finale > .btn { margin-top: var(--sc-4); }
  .packs { margin-top: var(--sc-3); }
  .packs li { padding: .35rem 0; }
  .packs__what { font-size: var(--sc-t-xs); }
  .foot { margin-top: var(--sc-4); }

  .prensa { padding: clamp(1.1rem, 2vw, 1.75rem); }
  .prensa > * + * { margin-top: var(--sc-3); }
  .recortes { margin-top: var(--sc-3); }
  .recortes a { padding: .5rem 1.6rem .5rem 0; }
  .recortes a::after { top: .5rem; }
}

@media (min-width: 861px) and (max-height: 720px) {
  #pedido-t { font-size: min(var(--sc-t-2xl), 7svh); }
  .finale .packs__what { display: none; }
  .packs li { padding: .35rem 0; }
  .foot { margin-top: var(--sc-3); }
  .finale > .btn { margin-top: var(--sc-3); min-height: 3rem; }
  .finale > .copy__body { font-size: var(--sc-t-sm); }
  .packs__what { font-size: var(--sc-t-xs); }
  .foot p:first-child { display: none; }
  .prensa__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .copy--duo .copy__body { display: none; }
  .ticket { padding: 1.1rem 1.25rem; }
  .ticket > * + * { margin-top: var(--sc-3); }
  .ticket__spec { margin-top: var(--sc-3); padding-top: var(--sc-3); }
}

/* --------------------------------- celular acostado o zoom muy alto --
   Muy poca altura (≤ 560 px) y más ancho que alto: las tarjetas se
   acuestan también, con el contenido en columnas. */
@media (min-width: 561px) and (max-height: 560px) and (orientation: landscape) {
  :root { --bar-h: 3.4rem; }
  .bar .mark { width: 2.6rem; }
  .bar .btn--sm { min-height: 2.4rem; }

  .lote { max-width: 26rem; }
  .lote__stamp { display: none; }

  .copy__lede { font-size: var(--sc-t-base); }
  .copy > * + * { margin-top: var(--sc-3); }
  .copy > .btn { margin-top: var(--sc-4); }
  .sc-copy--lead, .sc-copy--trail { bottom: 1.25rem; }
  /* los textos laterales se apoyan abajo, al costado de la foto */
  .copy--right, .copy--left {
    top: auto; bottom: 1rem; translate: none;
    max-width: min(30rem, 46vw); max-height: calc(100svh - var(--bar-h) - 1.75rem);
  }
  .copy--right { left: auto; right: var(--sc-gutter); }
  .copy--left { right: auto; left: var(--sc-gutter); }
  .copy--1930 { max-width: min(26rem, 44vw); }
  .copy--1930 .year { font-size: min(5rem, 20svh); }
  .copy--quiet { bottom: 1.25rem; }
  .peak__note { font-size: var(--sc-t-sm); }

  /* espumantes: las dos fichas una al lado de la otra, sin bajada */
  .copy--duo { padding-top: var(--bar-h); }
  .copy--duo .copy__body { display: none; }
  .ticket { padding: .9rem 1.1rem; }
  .ticket > * + * { margin-top: var(--sc-2); }
  .ticket__spec { margin-top: var(--sc-2); padding-top: var(--sc-2); }
  .ticket__name { font-size: min(var(--sc-t-xl), 8svh); }

  /* prensa: tarjeta ancha abajo, los tres recortes en columnas */
  .copy--right.prensa {
    left: var(--sc-gutter); right: var(--sc-gutter); max-width: none;
    top: auto; bottom: .75rem; translate: none;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: 1.75rem; align-items: start;
  }
  .prensa > * + * { margin-top: 0; }
  .prensa .ticket__kicker { grid-column: 1; }
  .prensa__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prensa__cita { grid-column: 1; margin-top: var(--sc-3); }
  .prensa__cita p { font-size: var(--sc-t-base); }
  .recortes { grid-column: 2; grid-row: 1 / span 3; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.25rem; }
  .recortes li, .recortes li:last-child { border: 0; border-top: 1px solid var(--rule-soft); }
  .recortes__titulo { font-size: var(--sc-t-sm); }
  .prensa { padding: .9rem 1.2rem; }

  /* el cierre: título, envíos y botón a la izquierda; packs a la derecha */
  .finale {
    left: var(--sc-gutter); right: var(--sc-gutter); max-width: none;
    top: auto; bottom: .75rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: start;
    padding: 1.1rem 1.4rem;
  }
  .finale > * + * { margin-top: var(--sc-3); }
  .finale > #pedido-t { grid-column: 1; margin: 0; }
  .finale > .copy__body { grid-column: 1; font-size: var(--sc-t-sm); }
  .finale > .promos { grid-column: 2; grid-row: 1; margin: 0; }
  .finale > .packs { grid-column: 2; grid-row: 2 / span 4; margin: 0; max-height: calc(100svh - var(--bar-h) - 4rem); }
  .finale--llena > .packs { max-height: calc(100svh - var(--bar-h) - 9.5rem); }
  .finale--llena > .copy__body { display: none; }
  .finale > .btn { grid-column: 1; margin-top: var(--sc-3); }
  .finale > .foot { grid-column: 1; margin-top: var(--sc-3); }
  /* a la derecha, precios por unidad y packs; a la izquierda, el resto */
  /* izquierda: título, precios por unidad, botón y leyenda;
     derecha: packs y la nota de pedidos grandes */
  .finale > #pedido-t { grid-row: 1; }
  .finale > .copy__body { display: none; }
  .finale > .promos { grid-column: 1; grid-row: 2; margin-top: var(--sc-3); }
  .finale > .unidades { grid-column: 1; grid-row: 3; }
  .finale > .btn { grid-row: 4; }
  .finale > .foot { grid-column: 1 / -1; grid-row: 5; }
  .finale > .packs { grid-column: 2; grid-row: 1 / span 3; margin: 0; max-height: none; overflow: visible; }
  .finale > .finale__nota { grid-column: 2; grid-row: 4; font-size: var(--sc-t-xs); align-self: center; margin: 0; }
  .unidades--en-pedido .unidades__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .unidades--en-pedido .unidades__lista { margin: 0; }
  .unidades--en-pedido .unidades__lista li { padding: .1rem 0; }
  .finale > .btn { min-height: 2.8rem; }
  .finale { max-height: calc(100svh - var(--bar-h) - 1rem); overflow-y: auto; overscroll-behavior: contain; }
  .finale .foot p:first-child { display: none; }
  .packs li { padding: .35rem 0; }
  .packs__what { font-size: var(--sc-t-xs); }
}

/* --------------------------------------- celular parado y bajito -- */
@media (max-width: 860px) and (max-height: 700px) {
  .prensa__cita figcaption { display: none; }
  .recortes__titulo { font-size: var(--sc-t-sm); }
  .finale > .copy__body { display: none; }
  .packs__what { display: none; }
}

/* celular (parado o acostado): las dos fichas de espumantes, compactas */
@media (max-width: 860px) and (max-height: 700px) {
  .copy--duo .ticket { padding: .85rem 1rem; }
  .copy--duo .ticket__name { font-size: var(--sc-t-lg); }
  .copy--duo .ticket__spec { margin-top: var(--sc-2); padding-top: var(--sc-2); font-size: var(--sc-t-sm); }
  .copy--duo .ticket__price { font-size: var(--sc-t-base); }
}
@media (max-width: 860px) and (max-height: 560px) and (orientation: landscape) {
  .copy--duo { flex-direction: row; align-items: flex-end; }
  .copy--duo .ticket { flex: 1; }
}
@media (min-width: 861px) and (max-height: 640px) {
  .finale { padding-block: 1rem; }
  .finale > * + *, .packs { margin-top: var(--sc-2); }
}

/* etiqueta de lote en una línea (celular y pantallas bajas): cada parte
   ocupa lo que necesita y el texto no se parte en columnas */
@media (max-width: 860px), (min-width: 861px) and (max-height: 900px) {
  .lote { width: auto; max-width: none; right: auto; }
  .lote__head, .lote__stamp { flex: none; }
  .lote__rows { flex: 0 1 auto; }
  .lote__row dt, .lote__row dd { white-space: nowrap; }
}
/* celular angosto: arriba "Sidra Galas" y el sello; abajo, el dato del tramo.
   El número de lote se omite (ya figura en el dato "Chacra"). */
@media (max-width: 480px) {
  .lote { right: var(--sc-gutter); flex-wrap: wrap; row-gap: .4rem; }
  .lote__num { display: none; }
  .lote__head { order: 0; }
  .lote__stamp { order: 1; margin-left: auto; rotate: -4deg; }
  .lote__rows { order: 2; flex: 1 0 100%; }
}

/* tarjeta de pedido cargada (promociones o más de 3 packs, desde el
   backoffice): sin la bajada de cada pack y con la promo más compacta */
.finale--llena .packs__what { display: none; }
.finale--llena .packs li { padding-block: .4rem; }
.finale--llena .promo { padding: .5rem .75rem; }
.finale--llena .promo__titulo { font-size: var(--sc-t-base); }
@media (max-height: 900px), (max-width: 860px) {
  .finale--llena > .copy__body { font-size: var(--sc-t-sm); }
  .finale--llena .foot p:first-child { display: none; }
  .finale--llena .promo__texto { font-size: var(--sc-t-xs); }
}
@media (max-width: 860px) and (max-height: 760px) {
  .finale--llena > .copy__body { display: none; }
}