/* ═══════════════════════════════════════════════════════════
   DEL PICO — sistema
   Paleta y tipografías según el Brief de Marca (§5.1 y §5.2).

   Recorrido: hero (fijo) → claim (crema, monta) → presentación
   (crema, monta) → variedades (se pega, campo de color) →
   acerca (crema, monta) → bodega (oscura).
   ═══════════════════════════════════════════════════════════ */
@property --v{syntax:'<color>';inherits:true;initial-value:#B53937}

:root{
  /* ── paleta del brief ── */
  --red:#B53937;            /* Primario · Rojo Del Pico    */
  --gold:#A08058;           /* Secundario · Dorado Tostado */
  --cream:#FDF8F2;          /* Fondo · Crema / Marfil      */
  --white:#FFFFFF;
  --ink:#2B2620;            /* Neutro oscuro · Carbón cálido */

  --cream-2:#F0E7DA;        /* tinte de superficie, derivado del crema */
  --stout:#7E6244;          /* dorado oscurecido: eyebrows y textos de apoyo */
  --haze:#9A8F7F;           /* neutro medio */
  --v:#B53937;              /* acento vivo: muta con la variedad activa */

  /* campos de color por variedad (Variedades) */
  --field-gold:#8C6B41;     /* Rubia Lager · PET y vidrio */
  --field-red:#9E3B2E;      /* Roja · cobre rojizo (brief §5.1) */
  --field-green:#2C5E33;    /* IPA · verde de etiqueta */

  /* ── tipografías del brief ──
     Titulares condensados de alto impacto · slab serif · sans humanista */
  --display:"Anton","Oswald",Impact,sans-serif;
  --head:"Oswald","Anton",sans-serif;
  --slab:"Zilla Slab",Georgia,serif;
  --text:"Source Sans 3",system-ui,-apple-system,sans-serif;

  --gut:clamp(20px,4vw,72px);
  --bar-h:128px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* la barra es fija y alta: los saltos por ancla se frenan debajo de ella */
main[id],section[id],div[id],form[id]{scroll-margin-top:calc(var(--bar-h) + 16px)}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:--v .55s ease;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:400}
p{margin:0}
ul,ol,dl,dd,dt{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--v);outline-offset:3px;border-radius:2px}
.cellar :focus-visible{outline-color:var(--gold)}

/* ── tipos base ───────────────────────────────────────────── */
.eyebrow{
  font-family:var(--head);
  font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stout);margin:0 0 14px;
}
.eyebrow--light{color:var(--gold)}
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.3rem,5.4vw,5rem);line-height:.9;letter-spacing:-.005em;
  text-transform:uppercase;margin:0 0 24px;
}
.lead{font-family:var(--slab);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.5;margin:0 0 18px;max-width:36ch}
.body{font-size:1rem;line-height:1.7;color:#4A4038;margin:0 0 16px;max-width:46ch}
.body b{font-weight:600;color:var(--stout)}
.cellar .body{color:#CFC4B4}
.cellar .body b{color:var(--gold)}

/* ── botones ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;border-radius:2px;
  font-family:var(--head);
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .18s ease;
}
.btn--solid{background:var(--red);color:var(--white)}
.btn--solid:hover{background:var(--ink);transform:translateY(-2px)}
.btn--ghost{border-color:currentColor}
.btn--ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}

/* ── imágenes de sección ──────────────────────────────────── */
.hero__media img,.banner__media img,.ig__pic img{width:100%;height:100%;object-fit:cover}

/* ═══ BARRA ════════════════════════════════════════════════ */
.bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:10;
  display:flex;align-items:center;gap:24px;
  padding:0 var(--gut);
  /* transparente sobre el hero (texto claro); pasa a crema al hacerse
     sólida — cuando el scroll deja atrás el hero o se abre el menú */
  background:transparent;color:var(--white);
  border-bottom:1px solid transparent;
  transition:background .35s ease,color .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.bar.is-solid,
body.nav-open .bar{
  background:rgba(253,248,242,.94);backdrop-filter:blur(10px);color:var(--ink);
  border-bottom-color:rgba(43,38,32,.1);
}
.bar__logo{display:flex;align-items:center;text-decoration:none}
.bar__logo img{height:100px;width:auto}

/* menú: en pantalla grande vive desplegado dentro de la barra */
.menu{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);margin-left:auto}
.menu__nav{display:flex;gap:clamp(14px,1.8vw,28px)}
.menu__nav a{
  font-family:var(--head);
  font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:12px 0;position:relative;white-space:nowrap;
}
.menu__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1.5px;background:currentColor;transition:right .3s ease}
.menu__nav a:hover::after{right:0}
.menu__cta{min-height:44px;padding:0 20px}

/* hamburguesa: oculta hasta que el menú se pliega */
.burger{
  display:none;margin-left:auto;
  width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;
  place-items:center;color:inherit;   /* sigue el color de la barra: blanco sobre el hero, oscuro en crema */
}
.burger__box{display:block;position:relative;width:24px;height:16px}
.burger__box i{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .16s ease;
}
.burger__box i:nth-child(1){top:0}
.burger__box i:nth-child(2){top:7px}
.burger__box i:nth-child(3){top:14px}
body.nav-open .burger__box i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger__box i:nth-child(2){opacity:0}
body.nav-open .burger__box i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open{overflow:hidden}

/* ═══ BOTELLA PERSISTENTE ══════════════════════════════════
   Aparece en el claim, aterriza en la fila de presentación y
   vuelve, quieta y centrada, sobre el campo de variedades. */
/* z-index bajo, a propósito: la botella se pinta por encima del claim
   (z:2) pero por debajo de la fila de presentación (z:4), así al subir
   ésta la tapa y la botella se esconde detrás en vez de flotar hacia
   abajo. */
.bottle{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  display:grid;place-items:center;
}
.bottle__float{position:relative;opacity:0;will-change:transform}
/* alto base: la escala del claim la lleva cerca de 1, así el bitmap
   no se agranda por transform y no pierde definición */
.bottle{--bh:min(74vh,720px)}
.bottle__img{height:var(--bh);width:auto;filter:drop-shadow(0 18px 26px rgba(43,38,32,.32))}
/* sombra blureada: copia difusa de la botella, detrás del vidrio */
.bottle__shadow{
  position:absolute;left:50%;top:50%;height:var(--bh);width:auto;
  transform:translate(-46%,-45%) scale(1.05);
  filter:blur(26px) brightness(0);opacity:0;pointer-events:none;
}

/* ═══ 01 · HERO (slider de crossfade) ══════════════════════ */
.hero{
  position:sticky;top:0;z-index:0;height:100dvh;overflow:hidden;
  background:var(--ink);
}
.hero__slides{position:absolute;inset:0}
/* cada placa se apila y aparece con un fundido */
.hero__slide{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  padding:0 var(--gut) clamp(48px,7vh,88px) var(--gut);
  opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s;
}
.hero__slide.is-on{opacity:1;visibility:visible;transition:opacity .9s ease}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(43,38,32,.62) 0%,rgba(43,38,32,.18) 42%,transparent 68%),
    linear-gradient(180deg,rgba(43,38,32,.62) 0%,rgba(43,38,32,.06) 32%,rgba(43,38,32,.72) 78%,rgba(43,38,32,.92) 100%);
}
.hero__copy{position:relative;max-width:100%}
/* las dos placas comparten el mismo cuerpo de titular */
.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,5.4rem);line-height:1.04;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--white);white-space:nowrap;
  text-shadow:0 4px 26px rgba(43,38,32,.35);
}
.hero__title span{display:block;overflow:hidden;padding-top:.2em;margin-top:-.2em}
/* placa 2: frase larga en tres renglones (los saltos van en el HTML) */
.hero__title--long{white-space:normal}

/* entrada del copy por placa: cada vez que una placa se activa, su copy
   sube con un pequeño escalonado (corre en carga y en cada cambio) */
.hero__copy > *{opacity:0}
.hero__slide.is-on .hero__copy > *{animation:heroRise .8s cubic-bezier(.2,.7,.3,1) both}
.hero__slide.is-on .hero__copy > *:nth-child(1){animation-delay:.18s}
.hero__slide.is-on .hero__copy > *:nth-child(2){animation-delay:.32s}
@keyframes heroRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* puntos del slider */
.hero__dots{
  position:absolute;left:0;right:0;bottom:clamp(22px,3.4vh,36px);z-index:3;
  display:flex;justify-content:center;gap:12px;pointer-events:none;
}
.hero__dot{
  pointer-events:auto;width:36px;height:4px;padding:0;border:0;border-radius:4px;cursor:pointer;
  background:rgba(253,248,242,.4);transition:background .3s ease,width .3s ease;
}
.hero__dot:hover{background:rgba(253,248,242,.7)}
.hero__dot.is-on{background:var(--white);width:52px}

.hero__cue{
  position:absolute;right:var(--gut);bottom:clamp(48px,7vh,88px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--head);
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(253,248,242,.72);
}
.hero__cue i{display:block;width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}


/* ═══ 02 · CLAIM (monta sobre el hero) ═════════════════════
   Póster de marca calcado del arte original: la botella aparece
   acá con un fade in y el titular rojo la envuelve (HAY · UNA ·
   DEL PICO · PARA · CADA · OCASIÓN), todas las palabras al mismo
   cuerpo. Al fondo, la montaña de la etiqueta abajo a la derecha.

   El titular vive en un lienzo de proporción fija —la del arte,
   1792 × 1240— que escala con la pantalla: así la composición no
   se estira ni se apelmaza cuando cambia el alto del viewport. */
.claim{position:relative;z-index:2;background:var(--cream);min-height:100dvh;overflow:hidden}

.claim__decor{
  position:absolute;right:-1%;bottom:-1%;
  width:min(64vw,1000px);aspect-ratio:979/459;
  background:url("mountain.png") no-repeat right bottom/contain;
  opacity:1;pointer-events:none;
}

/* en desktop la botella del claim la pone la pieza flotante */
.claim__bottle{display:none}

/* lienzo del póster: centrado en el hueco que deja la barra fija */
.claim__poster{
  position:absolute;left:var(--gut);
  top:calc(50% + var(--bar-h) / 2);translate:0 -50%;
  width:min(calc((100% - var(--gut) * 2) * .82), calc((100dvh - var(--bar-h)) * 1.44516));
  aspect-ratio:1792 / 1240;
  container-type:inline-size;   /* 1cqw = 1% del lienzo: el cuerpo escala con él */
}

/* cuerpo único: en el arte la altura de mayúscula mide 12.74% del
   alto del lienzo → 10.26% de su ancho con la caja de Anton */
.claim__title{
  position:absolute;inset:0;margin:0;pointer-events:none;
  font-size:clamp(2.4rem,8.2vw,8.6rem);   /* respaldo sin container queries */
  font-size:10.42cqw;
}

/* Caja de recorte de cada palabra, dimensionada con las métricas
   reales de Anton: la tilde de la Ó trepa 1.10em sobre la base y
   la caja arranca 1.1836em más arriba, así no se corta nada; por
   abajo sobran .076em, de sobra para el desborde de O, C y S. */
.claim__w{
  position:absolute;
  left:calc(var(--l) - var(--k, .038em));
  top:calc(var(--b) - 1.1836em);
  padding-top:.26em;overflow:hidden;
  font-family:var(--display);font-weight:400;font-size:inherit;
  line-height:1;letter-spacing:-.015em;   /* el arte original va levemente cerrado */
  color:var(--red);text-transform:uppercase;white-space:nowrap;
}
.claim__t{display:block;will-change:transform}

/* el copy vive fuera del lienzo, relativo a la sección: cae en el blanco
   de la derecha, bien despegado de las palabras rojas del titular */
.claim__lead{
  position:absolute;left:74%;top:44%;
  width:min(24ch,21%);margin:0;
  font-family:var(--text);color:var(--ink);
  font-size:clamp(1rem,1.18vw,1.28rem);line-height:1.6;
}
.claim__lead b{color:var(--red);font-weight:700}

/* ═══ 03 · PRESENTACIÓN — la fila de botellas ══════════════
   Crema opaca y z alto (4): monta sobre el claim (2) y sobre la botella
   grande (3), a la que tapa al subir. Tres columnas de igual peso —
   Rubia (dos botellas), Roja, IPA— separadas por filetes verticales. */
.familia{position:relative;z-index:4;background:var(--cream)}
.familia__stage{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,14vh,170px) var(--gut) clamp(64px,10vh,120px) var(--gut);
}
.line{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:clamp(20px,4vw,64px)}
.line__pair{display:flex;align-items:end;justify-content:center;gap:clamp(16px,2.6vw,44px);min-width:0}
.line__i{display:flex;flex-direction:column;align-items:center;gap:20px;min-width:0}
.line__ph{width:100%;display:grid;place-items:end center}
/* todas las botellas al mismo alto, sin la PET gigante */
.line__b{height:clamp(150px,26vh,300px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(43,38,32,.28))}
.line__l{font-family:var(--head);text-align:center;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stout)}
.line__l b{display:block;margin-top:5px;font-weight:400;letter-spacing:.08em;color:var(--haze)}

/* filete vertical entre columnas, centrado en la calle del grid */
.line__col{position:relative}
.line__col + .line__col::before{
  content:"";position:absolute;top:6%;bottom:12%;
  left:calc(clamp(20px,4vw,64px) / -2);
  width:1px;background:rgba(43,38,32,.18);
}

/* ═══ 04 · VARIEDADES ══════════════════════════════════════
   Se pega arriba durante el recorrido de `.vars__scroll`. El
   fondo cambia con un barrido de abajo hacia arriba y la lámina
   de lúpulo queda por encima, en multiply. La botella es la fija:
   centrada y quieta. */
.vars{
  position:sticky;top:0;z-index:5;height:100dvh;overflow:hidden;color:var(--cream);
  display:flex;flex-direction:column;
}
.vars__scroll{position:relative;z-index:1;height:300vh}
.vars__field,.vars__wipe,.vars__hop{position:absolute;inset:0;pointer-events:none}
.vars__field{background:var(--field-gold)}
.vars__wipe{background:var(--field-gold);transform:scaleY(0);transform-origin:bottom}
/* la lámina de lúpulo ocupa los dos tercios izquierdos del campo,
   apoyada abajo a la izquierda; el `max()` la agranda si el alto
   del viewport pide más que ese 64% para llegar arriba de todo */
.vars__hop{
  background:url("assets/lupulo.webp") no-repeat left bottom;
  background-size:max(64%,66.7dvh) auto;
  mix-blend-mode:multiply;opacity:.34;
}
.vars :focus-visible{outline-color:var(--cream)}
.vars__inner{
  position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;
  padding:calc(var(--bar-h) + clamp(8px,2vh,26px)) var(--gut) clamp(24px,4vh,48px) var(--gut);
}
.vars .eyebrow{color:rgba(253,248,242,.74)}
.vars__head{flex:0 0 auto}
.vars .h2{color:var(--cream);font-size:clamp(1.8rem,3.6vw,3.4rem);margin-bottom:18px}

.tabs{
  position:relative;flex:0 0 auto;display:flex;gap:2px;
  border-bottom:1px solid rgba(253,248,242,.3);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;min-height:48px;padding:0 20px;background:none;border:none;cursor:pointer;
  font-family:var(--head);
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(253,248,242,.6);transition:color .25s ease;white-space:nowrap;
}
.tab:hover,.tab.is-on{color:var(--cream)}
.tabs__ink{position:absolute;left:0;bottom:-1px;height:2.5px;width:0;background:var(--cream);pointer-events:none}

.vars__stage{position:relative;flex:1;min-height:0}
.vcard{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32vw) minmax(0,1fr);
  align-items:center;gap:clamp(20px,3vw,56px);height:100%;
}
.tabs[hidden]{display:none}

/* botellas estáticas al centro de cada slide (la Rubia lleva dos) */
.vslide__bottles{
  grid-column:2;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(10px,1.6vw,28px);min-width:0;
}
.vslide__bottle{
  width:auto;height:auto;max-height:min(64vh,600px);max-width:100%;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.4));
}
.vslide__bottles--pair .vslide__bottle{max-height:min(56vh,520px);max-width:46%}

/* bloque izquierdo: envase · título (imagen) · bajada corta */
.vslide__left{grid-column:1;justify-self:end;max-width:min(100%,440px)}
.vcard__env{
  font-family:var(--head);
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(253,248,242,.8);margin-bottom:clamp(14px,2vh,22px);
}
.vslide__title{width:fit-content;margin-bottom:clamp(20px,3vh,32px)}
/* la línea junto al nombre ya viene dentro de la propia imagen del título */
.vslide__name{display:block;width:min(100%,430px);height:auto}
.vslide__left .lead{
  font-family:var(--text);font-style:normal;
  font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.55;
  color:var(--cream);max-width:32ch;margin:0;
}

/* bloque derecho: los dos párrafos, en mayúsculas. Va dentro de un
   <details open>: en desktop se muestra siempre y sin disparador; en
   mobile el JS lo cierra y funciona como acordeón. */
.vmore{grid-column:3;justify-self:start;max-width:min(100%,380px)}
.vmore__sum{display:none}
.vslide__right{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,26px)}
/* mismos rasgos que los titulares (condensada), un cuerpo más grande,
   peso liviano y buen interlineado */
.vslide__right .body{
  font-family:var(--head);font-weight:300;
  text-transform:uppercase;letter-spacing:.035em;
  font-size:clamp(1rem,1.2vw,1.35rem);line-height:1.85;
  color:var(--cream);max-width:30ch;margin:0;
}

.vars__ctrl{flex:0 0 auto;display:flex;align-items:center;gap:18px}
.arrow{
  width:50px;height:50px;border:1.5px solid rgba(253,248,242,.42);background:none;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;color:var(--cream);
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .18s ease;
}
.arrow svg{width:22px;height:22px}
.arrow:hover:not(:disabled){background:var(--cream);border-color:var(--cream);color:var(--ink);transform:scale(1.06)}
.arrow:disabled{opacity:.3;cursor:not-allowed}
.count{font-family:var(--head);font-weight:600;font-size:1.05rem;letter-spacing:.08em;color:rgba(253,248,242,.6);font-variant-numeric:tabular-nums}
.count b{color:var(--cream);font-weight:700}

/* — modo carrusel: sólo con motion en pantalla grande.
     Las fichas se apilan y sólo se ve la activa. — */
.vars.is-carousel .vcard{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:translateY(20px);
  /* la saliente se va primero; la entrante espera, así no se pisan */
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.vars.is-carousel .vcard.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .4s ease .2s,transform .45s cubic-bezier(.2,.7,.3,1) .2s,visibility 0s;
}

/* — modo apilado (mobile o movimiento reducido): las cuatro
     fichas una debajo de la otra, cada una con su color. — */
.vars:not(.is-carousel){position:static;height:auto;display:block}
.vars:not(.is-carousel) .vars__field,
.vars:not(.is-carousel) .vars__wipe{display:none}
.vars:not(.is-carousel) .vars__hop{display:none}
.vars:not(.is-carousel) .vars__inner{background:var(--field-gold);padding-bottom:clamp(30px,5vh,60px)}
.vars:not(.is-carousel) .tabs,
.vars:not(.is-carousel) .vars__ctrl{display:none}
.vars:not(.is-carousel) .vars__stage{display:block}
.vars:not(.is-carousel) .vcard{
  background:var(--card-bg);
  grid-template-columns:1fr;gap:clamp(18px,3vh,28px);
  margin:0 calc(-1 * var(--gut));
  padding:clamp(46px,7vh,80px) var(--gut);
}
.vars:not(.is-carousel) .vslide__left,
.vars:not(.is-carousel) .vmore{grid-column:1;justify-self:start;max-width:100%}
.vars:not(.is-carousel) .vslide__bottles{grid-column:1;justify-content:center;margin:8px 0 clamp(24px,4vh,40px)}
.vars:not(.is-carousel) .vslide__bottle{max-height:clamp(220px,38vh,360px);max-width:72%}
.vars:not(.is-carousel) .vslide__bottles--pair .vslide__bottle{max-width:44%}
.vars:not(.is-carousel) .vslide__name{width:min(100%,320px)}
.vars__scroll{display:none}
.vars.is-carousel + .vars__scroll{display:block}

/* — modo swipe (mobile): un carril horizontal con arrastre nativo.
     Cada variedad ocupa exactamente el ancho de pantalla y engancha
     con scroll-snap; el campo de color de la sección acompaña. Los
     dos párrafos largos se pliegan en un acordeón para que la ficha
     entre entera en el viewport sin scroll vertical. — */
.vars.is-swipe{
  position:relative;top:auto;display:block;overflow:hidden;
  /* la sección mide exactamente una pantalla: la ficha entra entera
     y la botella se acomoda al hueco que sobra, sea cual sea el alto
     del teléfono. Sin scroll-margin: el hueco de la barra ya está
     reservado adentro. */
  height:auto;min-height:100dvh;scroll-margin-top:0;
}
.vars.is-swipe .vars__field{display:block;transition:background-color .45s ease}
.vars.is-swipe .vars__wipe{display:none}
.vars.is-swipe .vars__hop{display:block;background-size:max(128%,86dvh) auto;opacity:.22}
.vars.is-swipe .vars__inner{
  background:none;min-height:100dvh;
  padding-top:calc(var(--bar-h) + clamp(10px,2vh,20px));
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(16px,2.6vh,26px));
}
.vars.is-swipe .vars__ctrl{display:flex;justify-content:center;margin-top:clamp(10px,1.8vh,18px)}

.vars.is-swipe .vars__stage{
  display:flex;flex:1 1 auto;min-height:0;
  margin:0 calc(-1 * var(--gut));
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.vars.is-swipe .vars__stage::-webkit-scrollbar{display:none}
/* arrastre con mouse además del táctil nativo */
.vars.is-swipe .vars__stage{cursor:grab}
.vars.is-swipe .vars__stage.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.vars.is-swipe .vars__stage.is-dragging *{pointer-events:none}

.vars.is-swipe .vcard{
  flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  position:static;height:auto;opacity:1;visibility:visible;transform:none;transition:none;
  background:none;margin:0;padding:clamp(12px,2.2vh,24px) var(--gut) 0;
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,16px);
  text-align:center;   /* envase, título y bajada centrados */
}
.vars.is-swipe .vslide__title{margin-bottom:clamp(8px,1.4vh,14px)}
.vars.is-swipe .vslide__name{width:min(72%,260px);margin-inline:auto}
.vars.is-swipe .vcard__env{margin-bottom:clamp(6px,1.2vh,12px)}
.vars.is-swipe .vslide__left{flex:0 0 auto;text-align:center}
/* descripción de la cerveza: más angosta y centrada */
.vars.is-swipe .vslide__left .lead{font-size:.95rem;line-height:1.5;max-width:26ch;margin-inline:auto}
/* todas las botellas al mismo alto (el de la Rubia Lager), sin importar
   cuánto texto tenga cada ficha */
.vars.is-swipe .vslide__bottles{flex:1 1 auto;min-height:0;align-items:center;justify-content:center;margin:0}
.vars.is-swipe .vslide__bottle{height:clamp(190px,30vh,285px);width:auto;max-width:60%;object-fit:contain}
.vars.is-swipe .vslide__bottles--pair .vslide__bottle{max-width:44%}

/* con el detalle abierto la sección deja de estar atada a una pantalla
   y crece: se lee con el scroll normal de la página, sin un carril
   vertical anidado adentro de la ficha */
.vars.is-swipe.has-open,
.vars.is-swipe.has-open .vars__inner{min-height:0}
.vars.is-swipe.has-open .vars__stage{flex:0 0 auto}

/* acordeón, a lo ancho y anclado al pie de la ficha */
.vars.is-swipe .vmore{align-self:stretch;margin-top:auto;border-top:1px solid rgba(253,248,242,.26)}
.vars.is-swipe .vslide__right{text-align:center}
.vars.is-swipe .vmore__sum{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:52px;cursor:pointer;list-style:none;
  font-family:var(--head);
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);
}
.vmore__sum::-webkit-details-marker{display:none}
.vmore__sum i{
  flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -3px;transition:rotate .25s ease,translate .25s ease;
}
.vmore[open] .vmore__sum i{rotate:-135deg;translate:0 2px}
.vars.is-swipe .vslide__right{padding-bottom:clamp(14px,2.4vh,22px)}

/* ═══ 05 · BANNER ══════════════════════════════════════════
   Franja a sangre con foto de fondo, un scrim para legibilidad y una
   frase abajo a la izquierda. Monta sobre las variedades (z:6 > 5). */
.banner{
  position:relative;z-index:6;
  min-height:min(84vh,720px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink);
  padding:clamp(48px,9vh,110px) var(--gut);
}
.banner__media{position:absolute;inset:0}
.banner__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.banner__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(43,38,32,.68) 0%,rgba(43,38,32,.24) 42%,transparent 70%),
    linear-gradient(0deg,rgba(43,38,32,.6) 0%,transparent 48%);
}
.banner__inner{position:relative;max-width:none}
.banner .eyebrow{margin-bottom:16px}
.banner__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.6vw,4.6rem);line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--white);white-space:nowrap;   /* cada renglón entero: Sumate / al brindis. */
  text-shadow:0 4px 26px rgba(43,38,32,.4);
}

/* ═══ BODEGA ═══════════════════════════════════════════════ */
.cellar{position:relative;z-index:7;background:var(--ink);color:var(--cream)}

/* ═══ 06 · INSTAGRAM ═══════════════════════════════════════ */
.ig{padding:clamp(60px,9vh,110px) var(--gut) clamp(60px,9vh,110px) var(--gut)}
.ig__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,4vh,48px)}
.ig__head .h2{margin:0}
.btn__ico{width:18px;height:18px;margin-right:10px}
.ig__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.ig__i a{display:block;text-decoration:none;position:relative;overflow:hidden}
.ig__pic{display:block;aspect-ratio:1;overflow:hidden;background:#3A322A;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ig__i a:hover .ig__pic{transform:scale(1.05)}
.ig__cap{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:44px 16px 16px;
  background:linear-gradient(transparent,rgba(43,38,32,.94));
  font-size:.86rem;line-height:1.45;color:var(--cream);
  opacity:0;translate:0 12px;transition:opacity .3s ease,translate .3s ease;
}
.ig__i a:hover .ig__cap,.ig__i a:focus-visible .ig__cap{opacity:1;translate:0 0}
.ig__cap b{display:block;margin-top:8px;font-family:var(--head);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* ═══ 07 · DÓNDE CONSEGUIRLA + CONTACTO ════════════════════ */
.cta{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);
  padding:clamp(70px,10vh,140px) var(--gut) clamp(70px,10vh,140px) var(--gut);
  border-top:1px solid rgba(253,248,242,.16);
}
.where{margin-top:12px}
.where__i{padding:20px 0;border-top:1px solid rgba(253,248,242,.14)}
.where__i:first-child{border-top:none;padding-top:0}
.where h4{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:.01em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.where p{font-size:.96rem;line-height:1.6;color:rgba(253,248,242,.76);max-width:40ch}
.where a{color:var(--cream);border-bottom:1px solid var(--gold);text-decoration:none}

.form__h{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.7rem);line-height:1;text-transform:uppercase;margin-bottom:14px}
.form__lead{font-size:1rem;line-height:1.6;color:rgba(253,248,242,.76);margin-bottom:28px;max-width:40ch}
.field{margin-bottom:22px}
.field label{font-family:var(--head);display:block;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.field label i{font-style:normal;color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:14px 16px;
  background:rgba(253,248,242,.06);color:var(--cream);
  border:1.5px solid rgba(253,248,242,.24);border-radius:2px;
  font-family:var(--text);font-size:1rem;
  transition:border-color .2s ease,background .2s ease;
}
.field textarea{min-height:112px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 21px) 24px,calc(100% - 15px) 24px;background-size:6px 6px;background-repeat:no-repeat}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(253,248,242,.44)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background:rgba(253,248,242,.1)}
.field__hint{margin-top:7px;font-size:.8rem;color:rgba(253,248,242,.5)}
.field__err{margin-top:7px;font-size:.82rem;color:#F08C74;display:none}
.field.is-bad input,.field.is-bad textarea{border-color:#F08C74}
.field.is-bad .field__err{display:block}
.form__send{margin-top:8px}
.form__ok{margin-top:16px;font-size:.92rem;color:var(--gold);min-height:1.2em}

/* ═══ FOOTER ═══════════════════════════════════════════════
   Marca a la izquierda, cuatro columnas de enlaces a la derecha
   y una línea legal separada abajo. */
.foot{
  border-top:1px solid rgba(253,248,242,.16);
  padding:clamp(52px,8vh,96px) var(--gut) clamp(28px,4vh,40px) var(--gut);
}
.foot__top{
  display:grid;grid-template-columns:minmax(200px,.9fr) minmax(0,2.4fr);
  gap:clamp(36px,6vw,110px);align-items:start;
  padding-bottom:clamp(36px,6vh,72px);
}
.foot__logo{width:clamp(140px,13vw,190px);height:auto}
.foot__claim{
  font-family:var(--slab);font-style:italic;font-weight:400;
  font-size:clamp(.98rem,1.15vw,1.15rem);line-height:1.45;
  color:var(--gold);margin-top:18px;max-width:24ch;
}
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,44px)}
.foot h5{
  font-family:var(--head);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid rgba(253,248,242,.16);
}
.foot__cols ul{display:grid;gap:9px}
.foot__cols a{
  font-size:.92rem;line-height:1.4;color:rgba(253,248,242,.76);
  text-decoration:none;transition:color .2s ease;
}
.foot__cols a:hover{color:var(--gold)}
.foot__origin{margin-top:18px;font-size:.86rem;line-height:1.6;color:rgba(253,248,242,.5)}
.foot__legal{
  padding-top:clamp(20px,3vh,30px);border-top:1px solid rgba(253,248,242,.16);
  font-size:.74rem;letter-spacing:.02em;color:rgba(253,248,242,.45);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1240px){
  .menu__nav a{font-size:.7rem;letter-spacing:.08em}
}

/* ── el menú se pliega detrás de la hamburguesa ────────────
   Panel a pantalla completa por debajo de la barra: una lista
   de destinos con altura de toque cómoda y el CTA al pie. */
@media (max-width:1080px){
  .burger{display:grid}

  .menu{
    position:fixed;left:0;right:0;top:var(--bar-h);
    height:calc(100dvh - var(--bar-h));
    margin:0;gap:0;
    display:flex;flex-direction:column;align-items:stretch;
    padding:clamp(14px,3vh,32px) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 28px);
    background:var(--cream);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;translate:0 -10px;
    transition:opacity .24s ease,translate .24s ease,visibility 0s linear .24s;
  }
  body.nav-open .menu{
    opacity:1;visibility:visible;translate:0 0;
    transition:opacity .26s ease,translate .26s cubic-bezier(.2,.7,.3,1),visibility 0s;
  }

  .menu__nav{flex-direction:column;gap:0}
  .menu__nav a{
    display:flex;align-items:center;min-height:60px;padding:0;
    font-size:1.05rem;letter-spacing:.1em;
    border-bottom:1px solid rgba(43,38,32,.12);
  }
  .menu__nav a::after{display:none}
  .menu__cta{margin-top:auto;width:100%;min-height:56px;font-size:.84rem}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
   Sin recorridos ni piezas flotantes: cada sección se apila,
   ocupa su propio alto y se lee de arriba hacia abajo. Nada
   queda pegado ni monta sobre lo de al lado.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:860px){
  :root{--bar-h:72px}
  body{font-size:16px}
  .bar{gap:12px}
  .bar__logo img{height:52px}

  /* la botella deja de ser una pieza fija que recorre la página */
  .bottle{display:none}

  /* hero: deja de estar pegado, así el claim no le monta encima */
  .hero{position:relative;height:auto;min-height:100dvh;padding:0}
  .hero__slide{padding:calc(var(--bar-h) + 24px) var(--gut) clamp(64px,10vh,96px)}
  .hero__cue{display:none}
  .hero__title{white-space:normal;font-size:clamp(2rem,8vw,3rem)}

  /* claim: el titular a la izquierda y la botella a la derecha, en el
     mismo bloque; el copy queda debajo, a lo ancho */
  /* título y botella pegados; el copy va debajo a lo ancho. La 1ª columna
     se ajusta al titular y la botella arranca justo al lado (al inicio de
     la 2ª columna), así no queda un hueco grande en el medio. */
  .claim{
    min-height:auto;
    display:grid;grid-template-columns:min(52vw,280px) 1fr;align-items:center;
    column-gap:clamp(2px,1.4vw,12px);
    padding:clamp(52px,8vh,80px) var(--gut) clamp(56px,9vh,90px);
  }
  .claim__bottle{
    display:block;grid-column:2;grid-row:1;justify-self:start;align-self:center;
    height:clamp(200px,37vh,340px);width:auto;margin:0;
    filter:drop-shadow(0 14px 22px rgba(43,38,32,.26));
  }
  .claim__poster{grid-column:1;grid-row:1;position:static;translate:none;width:auto;aspect-ratio:auto;container-type:normal}
  .claim__title{
    position:static;inset:auto;
    display:flex;flex-wrap:wrap;gap:.2em .28em;
    font-size:clamp(1.55rem,8vw,2.8rem);line-height:1;
  }
  .claim__w{
    position:static;left:auto;top:auto;padding-top:0;
    display:block;overflow:visible;white-space:nowrap;line-height:1;letter-spacing:-.012em;
  }
  /* DEL PICO y OCASIÓN ocupan renglón propio: HAY UNA / DEL PICO /
     PARA CADA / OCASIÓN, igual que en el arte */
  .claim__w:nth-child(3),.claim__w:nth-child(6){flex:0 0 100%}
  .claim__t{display:block}
  .claim__lead{
    grid-column:1 / -1;grid-row:2;
    position:static;left:auto;top:auto;width:auto;max-width:46ch;
    margin-top:clamp(20px,4vh,30px);font-size:1rem;
  }
  .claim__decor{width:104vw;right:-12vw;bottom:0;opacity:.42}

  /* presentación: las cuatro fichas una debajo de la otra, cada una
     como una fila compacta (botella a la izquierda, dato a la derecha).
     Apiladas en vertical se leen de un vistazo y sin scroll infinito. */
  .familia__stage{padding:clamp(52px,8vh,80px) var(--gut) clamp(56px,9vh,88px)}
  .line{grid-template-columns:1fr;gap:0;margin-top:0}
  .line__col + .line__col::before{display:none}   /* sin filetes verticales apilado */
  .line__pair{grid-column:1;display:block}
  .line__i{
    flex-direction:row;align-items:center;text-align:left;
    gap:clamp(16px,5vw,28px);
    padding:clamp(16px,4vw,22px) 0;
    border-top:1px solid rgba(43,38,32,.14);
  }
  .line > .line__col:first-child .line__i:first-child{border-top:none}
  .line__ph{width:auto;flex:0 0 clamp(88px,26vw,124px);place-items:center}
  .line__b{height:clamp(104px,16vh,148px)}
  .line__l{text-align:left;font-size:.82rem}
  .line__l b{margin-top:6px}

  /* variedades: sin el encabezado "Cerveza Del Pico · Variedades",
     la ficha gana aire vertical */
  .vars__head{display:none}
  .vars__inner{padding-top:clamp(52px,8vh,80px)}
  .vars:not(.is-carousel) .vslide__bottle{max-height:clamp(200px,34vh,300px)}
  .vars .h2{font-size:clamp(1.9rem,8.5vw,2.8rem)}
  .vslide__right .body{font-size:1rem;line-height:1.7;letter-spacing:.03em}

  .banner{min-height:min(72vh,560px)}
  .banner__inner{max-width:none}

  /* IG: se vuelve una tira horizontal deslizable */
  .ig__grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-right:calc(-1 * var(--gut));padding-right:var(--gut);
  }
  .ig__grid::-webkit-scrollbar{display:none}
  .ig__grid{cursor:grab}
  .ig__grid.is-dragging{cursor:grabbing;scroll-snap-type:none}
  .ig__grid.is-dragging *{pointer-events:none}
  .ig__i{flex:0 0 62%;scroll-snap-align:start}
  .ig__cap{opacity:1;translate:0 0;position:static;background:none;padding:12px 0 0;color:rgba(253,248,242,.72)}
  .ig__head{align-items:flex-start;flex-direction:column;gap:18px}

  .cta{grid-template-columns:1fr;gap:56px;padding-top:clamp(60px,9vh,110px);padding-bottom:clamp(60px,9vh,110px)}
  .form__send{width:100%;min-height:54px}
  /* footer reducido: sólo el logo y la línea legal */
  .foot{padding-top:clamp(40px,7vh,64px);padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 28px)}
  .foot__top{grid-template-columns:1fr;gap:0;padding-bottom:clamp(28px,5vh,44px)}
  .foot__cols,.foot__claim{display:none}
}

@media (max-width:520px){
  :root{--bar-h:64px}
  .bar__logo img{height:46px}
  .hero__title{font-size:clamp(2rem,8.4vw,2.9rem)}
  .form__h{font-size:clamp(1.5rem,7vw,2.2rem)}
  .ig__i{flex:0 0 74%}
}

/* ═══ MOVIMIENTO REDUCIDO ══════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .bottle{display:none}
}