/* self-hosted faces inlined: a separate @import file costs an extra
   render-blocking round-trip before fonts can even start downloading */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/cinzel.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ebgaramond.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ebgaramond-i.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/cinzel-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ebgaramond-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ebgaramond-i-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- tokens: pulled from the bottle label ----------
   the label's ground is cool, not brown: its outer frame samples #111213
   (hue 210) and its darkest scene pixels #161718 (hue 193). gold stays warm
   because the label's own linework does (#b99964). */
:root{
  --ink:#0d0f13;
  --ink-2:#12161c;
  --ink-3:#1a1f27;
  --gold:#c9a227;
  --gold-lt:#e3c76b;
  --gold-dk:#8a6f1d;
  /* gold-dk measures 3.78:1 on ink-2, so text uses this dimmed gold at 5.43:1 */
  --gold-mid:#a58a35;
  --cream:#e6e8ec;
  --cream-dim:#adb5c0;
  --rose:#b5798a;
  --py-red:#d52b1e;
  --py-blue:#0038a8;

  --shell:1240px;
  --narrow:720px;
  --display:'Cinzel',Georgia,serif;
  --body:'EB Garamond',Georgia,'Times New Roman',serif;
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;background:var(--ink);color-scheme:dark;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:1.15rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}

a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(201,162,39,.35)}
a:hover{color:var(--cream);border-bottom-color:var(--cream)}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0;letter-spacing:.02em}

:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}

/* ---------- ornament: ñandutí-style lace rule from the label border ---------- */
.lace{
  height:11px;
  background-image:
    linear-gradient(90deg,var(--gold-dk) 1px,transparent 1px),
    linear-gradient(90deg,transparent 50%,rgba(201,162,39,.5) 50%);
  background-size:22px 11px,11px 1px;
  background-repeat:repeat-x;
  background-position:center,center;
  opacity:.55;
}

.rule{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 auto 34px;max-width:280px;
}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dk))}
.rule::after{background:linear-gradient(90deg,var(--gold-dk),transparent)}
.rule span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

/* ---------- announcement band ---------- */
.franja{
  background:var(--ink-3);
  border-bottom:1px solid rgba(201,162,39,.18);
  text-align:center;
  padding:9px 18px;
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
}
.franja .barra{display:inline-block;width:15px;height:3px;vertical-align:middle;margin:0 4px}
.franja .barra.r{background:var(--py-red)}
.franja .barra.b{background:var(--py-blue)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(13,15,19,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(201,162,39,.2);
}
.nav-in{
  max-width:var(--shell);margin:0 auto;
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:26px;
  padding:0 26px;
}
/* ---------- the wordmark ----------
  The label already solves this word: placement, the interlocking top serifs and
  the calligraphic tails on Y, R and A. So it is traced whole off the artwork and
  kept as one lockup rather than cut into glyphs — cutting is what clipped the R's
  tail and squared the feet. Painted through a mask so it still takes its colour
  from `color`, which keeps :hover and the gold token working. */
.wm{
  display:inline-block;
  /* 2593:1032 — the artwork's own proportions */
  height:1em;width:2.5126em;
  background-color:currentColor;
  -webkit-mask:url('/assets/img/wordmark.svg') no-repeat center/contain;
  mask:url('/assets/img/wordmark.svg') no-repeat center/contain;
  text-indent:-100em;overflow:hidden;white-space:nowrap;
}
@supports not ((mask:url('/assets/img/wordmark.svg')) or (-webkit-mask:url('/assets/img/wordmark.svg'))){
  .wm{background:none;text-indent:0;overflow:visible;width:auto;height:auto;
      font-family:var(--display);text-transform:uppercase;letter-spacing:.05em}
}

.marca{
  font-weight:700;
  font-size:1.72rem;
  color:var(--gold-lt);border:0;
  display:flex;align-items:center;gap:11px;
  margin-right:auto;
}
.marca:hover{color:var(--cream)}
/* engraved detail muddies at 30px; lift it back without altering the master art */
.marca img{width:30px;height:30px;border-radius:50%;opacity:.95;filter:brightness(1.24) contrast(1.1)}

.menu{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.menu a{
  border:0;font-family:var(--display);
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cream-dim);padding:6px 0;
  border-bottom:1px solid transparent;
}
.menu a:hover{color:var(--gold-lt);border-bottom-color:var(--gold)}
.menu .idioma{color:var(--gold);border:1px solid rgba(201,162,39,.45);padding:6px 12px}
.menu .idioma:hover{background:rgba(201,162,39,.12);border-color:var(--gold)}

.burger,.burger-tgl{display:none}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:clamp(560px,84vh,860px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:96px 26px 84px;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 55%,rgba(13,15,19,.42) 0%,rgba(13,15,19,.8) 62%,var(--ink) 100%),
    linear-gradient(180deg,rgba(13,15,19,.72) 0%,transparent 32%,transparent 62%,var(--ink) 100%);
}
.hero-in{position:relative;z-index:1;max-width:800px}
.hero .guarani{
  font-family:var(--display);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin:0 0 26px;
}
.hero h1{
  /* the lockup's box includes the calligraphic tails, which hang ~23% below the
     shortest foot, so the em is stepped down to keep the caps the size they were */
  font-size:clamp(3.9rem,13.2vw,8.7rem);
  font-weight:700;
  color:var(--gold-lt);
  text-shadow:0 3px 40px rgba(0,0,0,.85);
  margin:0;
}
.hero .bajada{
  font-family:var(--display);font-weight:400;
  font-size:clamp(.82rem,2.3vw,1.02rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-lt);
  margin:20px 0 0;
}
.hero .sello{
  max-width:560px;margin:26px auto 0;
  font-size:1.18rem;color:var(--cream-dim);font-style:italic;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}

/* ---------- buttons ---------- */
.boton{
  display:inline-block;border:1px solid var(--gold);
  background:transparent;color:var(--gold-lt);
  font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding:15px 30px;transition:background .18s,color .18s;
}
.boton:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.boton.solido{background:var(--gold);color:var(--ink)}
.boton.solido:hover{background:var(--gold-lt);border-color:var(--gold-lt)}

/* measured: the widest button pair needs 467px of viewport (220px + 185px, plus the
   14px gap and 48px of section padding). Under that the row wrapped into two lines
   of unequal width with no vertical gap between them, so stack them deliberately. */
@media (max-width:520px){
  .hero-cta{flex-direction:column;align-items:center;gap:12px}
  .hero-cta .boton{width:100%;max-width:320px;text-align:center}
}

/* ---------- pillars strip (the label's bottom band, as a row) ---------- */
.pilares{
  background:var(--ink-2);
  border-top:1px solid rgba(201,162,39,.2);
  border-bottom:1px solid rgba(201,162,39,.2);
}
.pilares ul{
  max-width:var(--shell);margin:0 auto;padding:44px 26px;
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  text-align:center;
}
.pilares li{padding:0 8px}
.pilares b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;
}
.pilares span{font-size:1rem;color:var(--cream-dim);line-height:1.6}
.pilares li+li{border-left:1px solid rgba(201,162,39,.16)}

/* ---------- generic section ---------- */
.seccion{max-width:var(--narrow);margin:0 auto;padding:104px 26px}
.seccion.ancho{max-width:var(--shell)}
.seccion p{margin:0 0 1.25em}
.seccion h2{font-size:clamp(2rem,4.6vw,2.9rem);margin:0 0 30px}
.kicker{
  font-family:var(--display);font-size:.7rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px !important;
}
.destacado{
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(201,162,39,.07),transparent);
  padding:20px 26px;margin:34px 0 !important;
  font-family:var(--display);font-size:1.1rem;line-height:1.62;
  color:var(--cream);
}
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---------- split bands: image beside text, full-bleed ---------- */
.banda{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;
  background:var(--ink-2);
  border-top:1px solid rgba(201,162,39,.14);
  border-bottom:1px solid rgba(201,162,39,.14);
}
.banda.invertida .banda-fig{order:2}
.banda-fig{position:relative;min-height:520px;align-self:stretch}
.banda-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(18,22,28,.55))}
.banda.invertida .banda-fig::after{background:linear-gradient(270deg,transparent 60%,rgba(18,22,28,.55))}
.banda-txt{padding:82px clamp(26px,5vw,68px)}
.banda-txt h2{font-size:clamp(1.8rem,3.8vw,2.5rem);margin:0 0 24px}
.banda-txt p{margin:0 0 1.2em}
.banda-txt p:last-child{margin-bottom:0}

/* label showcase: the actual bottle label, framed */
.banda-fig.etiqueta{
  display:flex;align-items:center;justify-content:center;
  padding:64px 40px;min-height:auto;
  background:radial-gradient(ellipse at center,rgba(201,162,39,.09),transparent 70%);
}
.banda-fig.etiqueta::after{display:none}
.banda-fig.etiqueta img{
  position:static;width:auto;max-width:400px;max-height:420px;object-fit:contain;
  box-shadow:0 26px 60px rgba(0,0,0,.7),0 0 0 1px rgba(201,162,39,.28);
}

/* ---------- process steps on a dark photo ---------- */
.proceso{position:relative;overflow:hidden;background:var(--ink)}
.proceso-bg{position:absolute;inset:0;z-index:0}
.proceso-bg img{width:100%;height:100%;object-fit:cover;opacity:.62}
.proceso-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(13,15,19,.55) 42%,rgba(13,15,19,.62) 58%,var(--ink))}
.proceso .seccion{position:relative;z-index:1;text-align:center}
.pasos{
  list-style:none;margin:52px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(201,162,39,.2);
  border:1px solid rgba(201,162,39,.2);
}
.pasos li{background:rgba(13,15,19,.82);padding:38px 26px;text-align:center}
.pasos .numeral{
  display:block;font-family:var(--display);font-size:.66rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-mid);margin-bottom:14px;
}
.pasos h3{font-size:1.28rem;margin:0 0 12px;color:var(--cream)}
.pasos p{margin:0;font-size:1rem;color:var(--cream-dim);line-height:1.62}

/* ---------- image tile grid ---------- */
.mosaico{
  max-width:var(--shell);margin:0 auto;padding:0 26px 104px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.tarjeta{
  position:relative;overflow:hidden;
  border:1px solid rgba(201,162,39,.2);
  background:var(--ink-2);
  display:flex;flex-direction:column;
}
.tarjeta-fig{position:relative;aspect-ratio:4/3;overflow:hidden}
.tarjeta-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tarjeta:hover .tarjeta-fig img{transform:scale(1.05)}
.tarjeta-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(13,15,19,.9))}
.tarjeta-txt{padding:26px 26px 30px}
.tarjeta .numeral{
  display:block;font-family:var(--display);font-size:.64rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-mid);margin-bottom:11px;
}
.tarjeta h3{font-size:1.3rem;margin:0 0 12px;color:var(--cream)}
.tarjeta p{margin:0;font-size:1.02rem;color:var(--cream-dim);line-height:1.64}

/* ---------- visit block over a photo ---------- */
.visita{position:relative;overflow:hidden}
.visita-bg{position:absolute;inset:0;z-index:0}
.visita-bg img{width:100%;height:100%;object-fit:cover;opacity:.6}
.visita-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,15,19,.94) 0%,rgba(13,15,19,.8) 46%,rgba(13,15,19,.5) 100%),linear-gradient(180deg,var(--ink),transparent 26%,transparent 74%,var(--ink))}
.visita .seccion{position:relative;z-index:1}
.datos{
  list-style:none;margin:38px 0 26px;padding:0;
  border-top:1px solid rgba(201,162,39,.25);
}
.datos li{
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:16px 2px;border-bottom:1px solid rgba(201,162,39,.16);
}
.datos li span:first-child{
  font-family:var(--display);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.datos li span:last-child{color:var(--cream);text-align:right}
.aviso{font-size:.98rem;color:var(--cream-dim);font-style:italic;margin:0 !important}

/* ---------- contact CTA ---------- */
.cta{
  background:var(--ink-2);
  border-top:1px solid rgba(201,162,39,.2);
  border-bottom:1px solid rgba(201,162,39,.2);
  text-align:center;
}
.cta .crest{width:74px;height:74px;border-radius:50%;margin:0 auto 26px;opacity:.9;filter:brightness(1.12) contrast(1.05)}

/* ---------- footer ---------- */
.pie{background:var(--ink);padding:78px 26px 44px}
.pie-in{
  max-width:var(--shell);margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;
}
.pie h4{
  font-family:var(--display);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px;font-weight:600;
}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:11px;font-size:1.02rem;color:var(--cream-dim)}
.pie li a{border:0;color:var(--cream-dim)}
.pie li a:hover{color:var(--gold-lt)}
/* the footer wordmark is a <p>, so .pie-marca p was winning the colour and
   washing it out to cream — the label draws this lettering in gold */
.pie-marca .marca{font-size:1.95rem;margin:0 0 16px;color:var(--gold-lt)}
.pie-marca p{font-size:1.02rem;color:var(--cream-dim);margin:0 0 14px;max-width:290px}
.pie-legal{
  max-width:var(--shell);margin:56px auto 0;padding-top:26px;
  border-top:1px solid rgba(201,162,39,.16);
  font-size:.9rem;color:#7d8794;line-height:1.75;
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.pie-legal a{color:#7d8794;border-bottom-color:rgba(125,135,148,.4)}
.pie-legal a:hover{color:var(--gold-lt)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .banda{grid-template-columns:1fr}
  .banda.invertida .banda-fig{order:0}
  .banda-fig{min-height:340px}
  .banda-fig::after,.banda.invertida .banda-fig::after{background:linear-gradient(180deg,transparent 55%,rgba(18,22,28,.7))}
  .banda-txt{padding:56px clamp(24px,5vw,44px)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .pie-in{grid-template-columns:1fr 1fr;gap:38px}
  .pilares ul{grid-template-columns:repeat(2,1fr);gap:0}
  .pilares li{padding:22px 16px}
  .pilares li+li{border-left:0}
  .pilares li:nth-child(even){border-left:1px solid rgba(201,162,39,.16)}
  .pilares li:nth-child(n+3){border-top:1px solid rgba(201,162,39,.16)}
}

/* measured: the full nav row needs 1056px in Spanish and 969px in English
   the widest nav row (Spanish, cart badge at its fixed width) at 1082.3px, and
   it still wrapped at 1090px once the scrollbar is counted. Collapse at 1100 to
   clear that with margin. Independent of the layout breakpoints. */
@media (max-width:1100px){
  .nav-in{padding:0 20px;flex-wrap:wrap}
  /* the cart sits outside .menu so it stays reachable while the links collapse */
  .cart-btn{order:1;margin-left:auto}
  .burger{order:2}
  .menu{order:3}
  .burger{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;cursor:pointer;
    border:1px solid rgba(201,162,39,.4);color:var(--gold);
  }
  .burger span{position:relative;width:17px;height:1px;background:currentColor;display:block}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1px;background:currentColor}
  .burger span::before{top:-5px}
  .burger span::after{top:5px}
  .menu{
    display:none;flex-direction:column;align-items:stretch;
    width:100%;gap:0;padding:10px 0 18px;
  }
  .menu li{border-top:1px solid rgba(201,162,39,.14)}
  .menu a{display:block;padding:15px 2px;font-size:.78rem}
  .menu .idioma{display:inline-block;margin-top:14px;text-align:center}
  .burger-tgl:checked ~ .menu{display:flex}
}

@media (max-width:760px){
  body{font-size:1.08rem}
  .seccion{padding:76px 24px}
  .mosaico{grid-template-columns:1fr;padding-bottom:76px}
  .pasos{grid-template-columns:1fr}
  .pie-in{grid-template-columns:1fr;gap:34px}
  .pie{padding:60px 24px 36px}
  .hero{min-height:auto;padding:80px 24px 68px}
  .datos li{flex-direction:column;gap:5px}
  .datos li span:last-child{text-align:left}
  .banda-fig.etiqueta{padding:48px 26px}
  .banda-fig.etiqueta img{max-width:100%;max-height:340px}
  .destacado{padding:18px 20px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .tarjeta:hover .tarjeta-fig img{transform:none}
}

/* ==========================================================================
   TIENDA — demo storefront
   ========================================================================== */

/* ---------- nav cart button ---------- */
.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid rgba(201,162,39,.45);
  color:var(--gold);cursor:pointer;
  font-family:var(--display);font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  padding:7px 13px;line-height:1;
}
.cart-btn:hover{background:rgba(201,162,39,.12);border-color:var(--gold)}
.cart-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
/* fixed width so "0" and "99+" occupy the same space -- otherwise the nav's
   total width depends on cart contents and the wrap threshold moves */
.cart-n{
  display:inline-block;width:27px;padding:0;
  background:var(--gold);color:var(--ink);
  font-size:.68rem;line-height:19px;text-align:center;
  border-radius:10px;font-family:var(--display);letter-spacing:0;
}
/* hidden, not removed: display:none would let the nav's width depend on whether
   the cart has items, which moves the wrap threshold under the breakpoint */
.cart-btn[data-empty="1"] .cart-n{visibility:hidden}

/* ---------- demo ribbon ---------- */
.demo-band{
  background:rgba(181,121,138,.14);
  border-bottom:1px solid rgba(181,121,138,.34);
  color:#e8c3ce;text-align:center;padding:10px 18px;
  font-size:.95rem;
}
.demo-band b{
  font-family:var(--display);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose);margin-right:10px;
}

/* ---------- shop header ---------- */
.tienda-head{
  text-align:center;
  border-bottom:1px solid rgba(201,162,39,.16);
  background:var(--ink-2);
  padding:74px 26px 62px;
}
.tienda-head h1{font-size:clamp(2.3rem,5.4vw,3.4rem);margin:0 0 18px;color:var(--cream)}
.tienda-head p{max-width:640px;margin:0 auto;color:var(--cream-dim);font-size:1.12rem}

/* ---------- product grid ---------- */
.productos{
  max-width:var(--shell);margin:0 auto;padding:78px 26px 96px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
.prod{
  display:flex;flex-direction:column;
  border:1px solid rgba(201,162,39,.2);
  background:var(--ink-2);
}
.prod-fig{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ink)}
.prod-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.prod:hover .prod-fig img{transform:scale(1.04)}
.prod-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--gold);color:var(--ink);
  font-family:var(--display);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 11px;
}
.prod-tag.alt{background:var(--rose);color:#1b0f13}
.prod-txt{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.prod-txt h3{font-size:1.32rem;margin:0 0 7px;color:var(--cream)}
.prod-meta{
  font-family:var(--display);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-mid);margin:0 0 15px;
}
.prod-txt p.desc{margin:0 0 20px;font-size:1.01rem;color:var(--cream-dim);line-height:1.62;flex:1}
.prod-notas{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.prod-notas li{
  border:1px solid rgba(201,162,39,.28);color:var(--cream-dim);
  font-size:.8rem;padding:3px 10px;
}
.prod-precio{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  font-family:var(--display);font-size:1.42rem;color:var(--gold-lt);
  margin:0 0 18px;
}
.prod-precio s{font-size:1rem;color:#7d8794;font-family:var(--body)}
.prod-comprar{display:flex;gap:10px;align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid rgba(201,162,39,.35)}
.qty button{
  width:36px;background:transparent;border:0;color:var(--gold);cursor:pointer;
  font-family:var(--display);font-size:1.1rem;line-height:1;padding:0;
}
.qty button:hover{background:rgba(201,162,39,.14)}
.qty input{
  width:40px;background:transparent;border:0;color:var(--cream);
  text-align:center;font-family:var(--display);font-size:1rem;
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prod-comprar .boton{flex:1;text-align:center;cursor:pointer;padding:14px 18px}
button.boton{font-family:var(--display)}

/* ---------- trust strip ---------- */
.envios{
  background:var(--ink-2);
  border-top:1px solid rgba(201,162,39,.2);
  border-bottom:1px solid rgba(201,162,39,.2);
}
.envios ul{
  max-width:var(--shell);margin:0 auto;padding:40px 26px;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center;
}
.envios b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;
}
.envios span{font-size:.98rem;color:var(--cream-dim);line-height:1.58}
.envios li+li{border-left:1px solid rgba(201,162,39,.16)}

/* ---------- payment logos row ---------- */
.medios{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;padding:0;list-style:none}
.medios li{
  border:1px solid rgba(201,162,39,.26);color:var(--cream-dim);
  font-family:var(--display);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 11px;
}

/* ---------- cart drawer ---------- */
.cart-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(6,7,9,.72);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.cart-scrim.open{opacity:1;visibility:visible}
.cart-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:91;
  width:min(430px,100%);
  background:var(--ink-2);
  border-left:1px solid rgba(201,162,39,.28);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s ease;
}
.cart-scrim.open + .cart-panel,.cart-panel.open{transform:translateX(0)}
.cart-hd{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border-bottom:1px solid rgba(201,162,39,.2);
}
.cart-hd h2{font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cart-x{background:transparent;border:0;color:var(--cream-dim);cursor:pointer;font-size:1.7rem;line-height:1;padding:0 4px}
.cart-x:hover{color:var(--gold-lt)}
.cart-body{flex:1;overflow-y:auto;padding:8px 24px}
.cart-vacio{text-align:center;color:var(--cream-dim);padding:56px 10px;font-style:italic}
.cart-line{display:flex;gap:15px;padding:20px 0;border-bottom:1px solid rgba(201,162,39,.14)}
.cart-line img{width:74px;height:74px;object-fit:cover;border:1px solid rgba(201,162,39,.2);flex:none}
.cart-line-in{flex:1;min-width:0}
.cart-line h4{font-family:var(--display);font-size:1rem;margin:0 0 3px;color:var(--cream);font-weight:600}
.cart-line .sub{font-size:.85rem;color:#7d8794;margin:0 0 10px}
.cart-line-bot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cart-line .qty button{width:29px;font-size:1rem}
.cart-line .qty input{width:32px;font-size:.92rem}
.cart-line .precio{font-family:var(--display);color:var(--gold-lt);font-size:1.02rem}
.cart-quitar{background:transparent;border:0;color:#7d8794;cursor:pointer;font-size:.82rem;text-decoration:underline;padding:0;margin-top:8px;font-family:var(--body)}
.cart-quitar:hover{color:var(--rose)}
.cart-ft{border-top:1px solid rgba(201,162,39,.24);padding:22px 24px;background:var(--ink-3)}
.cart-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cart-tot span:first-child{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cart-tot span:last-child{font-family:var(--display);font-size:1.5rem;color:var(--cream)}
.cart-nota{font-size:.86rem;color:#7d8794;margin:0 0 16px}
.cart-ft .boton{display:block;text-align:center;width:100%}

/* ---------- checkout ---------- */
.pedido{max-width:1060px;margin:0 auto;padding:60px 26px 104px}
.pasos-bar{
  display:flex;gap:0;list-style:none;margin:0 0 46px;padding:0;
  border:1px solid rgba(201,162,39,.22);
}
.pasos-bar li{
  flex:1;text-align:center;padding:15px 10px;
  font-family:var(--display);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:#7d8794;
}
.pasos-bar li+li{border-left:1px solid rgba(201,162,39,.22)}
.pasos-bar li[aria-current="step"]{background:rgba(201,162,39,.13);color:var(--gold-lt)}
.pasos-bar li.hecho{color:var(--cream-dim)}

.pedido-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.campo{margin-bottom:20px}
.campo label{
  display:block;font-family:var(--display);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--ink-3);color:var(--cream);
  border:1px solid rgba(201,162,39,.26);
  padding:13px 14px;font-family:var(--body);font-size:1.04rem;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--gold);outline:none}
.campo input::placeholder,.campo textarea::placeholder{color:#6d7683}
.campo .err{display:none;color:#e79aa8;font-size:.88rem;margin-top:6px}
.campo.malo input,.campo.malo select{border-color:#c4677a}
.campo.malo .err{display:block}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pedido h2{font-size:1.6rem;margin:0 0 8px;color:var(--cream)}
.pedido .sub-h{color:var(--cream-dim);margin:0 0 30px;font-size:1.02rem}

.pagos{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:12px}
.pago{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid rgba(201,162,39,.24);background:var(--ink-3);
  padding:17px 18px;cursor:pointer;transition:border-color .18s,background .18s;
}
.pago:hover{border-color:rgba(201,162,39,.55)}
.pago input{margin:5px 0 0;accent-color:var(--gold);flex:none}
.pago.sel{border-color:var(--gold);background:rgba(201,162,39,.09)}
.pago b{display:block;font-family:var(--display);font-size:.94rem;color:var(--cream);font-weight:600;margin-bottom:4px}
.pago span{display:block;font-size:.93rem;color:var(--cream-dim);line-height:1.55}
.pago .marcas{margin-top:9px;font-size:.78rem;color:#7d8794;letter-spacing:.06em}

.resumen{
  border:1px solid rgba(201,162,39,.24);background:var(--ink-2);
  padding:26px 24px;position:sticky;top:calc(var(--nav-h) + 22px);
}
.resumen h3{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.resumen-line{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid rgba(201,162,39,.13)}
.resumen-line img{width:52px;height:52px;object-fit:cover;border:1px solid rgba(201,162,39,.2);flex:none}
.resumen-line div{flex:1;min-width:0}
.resumen-line b{display:block;font-family:var(--display);font-size:.95rem;color:var(--cream);font-weight:600}
.resumen-line small{color:#7d8794;font-size:.84rem}
.resumen-line .p{font-family:var(--display);color:var(--gold-lt);white-space:nowrap}
.totales{margin-top:18px}
.totales div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;color:var(--cream-dim);font-size:1rem}
.totales div.gran{
  border-top:1px solid rgba(201,162,39,.24);margin-top:10px;padding-top:15px;
  font-family:var(--display);font-size:1.32rem;color:var(--cream);
}
.totales div.gran span:last-child{color:var(--gold-lt)}

.acciones{display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap}
.volver{font-size:.95rem;color:var(--cream-dim);border-bottom-color:rgba(173,181,192,.4)}
.chk{display:flex;gap:11px;align-items:flex-start;margin:26px 0 0;font-size:.97rem;color:var(--cream-dim);line-height:1.55;cursor:pointer}
.chk input{margin:4px 0 0;accent-color:var(--gold);flex:none}
.chk.malo{color:#e79aa8}

/* confirmation */
.gracias{max-width:660px;margin:0 auto;text-align:center;padding:84px 26px 104px}
.gracias .crest{width:80px;height:80px;border-radius:50%;margin:0 auto 28px;opacity:.92;filter:brightness(1.12)}
.gracias h1{font-size:clamp(2rem,5vw,2.8rem);margin:0 0 16px;color:var(--cream)}
.gracias .orden{
  display:inline-block;margin:22px 0 30px;padding:14px 26px;
  border:1px solid rgba(201,162,39,.4);background:rgba(201,162,39,.08);
  font-family:var(--display);letter-spacing:.16em;color:var(--gold-lt);
}
.gracias .detalle{text-align:left;margin-top:34px}

.oculto{display:none !important}

@media (max-width:1000px){
  .productos{grid-template-columns:repeat(2,1fr)}
  .envios ul{grid-template-columns:repeat(2,1fr);gap:0}
  .envios li{padding:22px 16px}
  .envios li+li{border-left:0}
  .envios li:nth-child(even){border-left:1px solid rgba(201,162,39,.16)}
  .envios li:nth-child(n+3){border-top:1px solid rgba(201,162,39,.16)}
  .pedido-grid{grid-template-columns:1fr;gap:38px}
  .resumen{position:static}
}

@media (max-width:760px){
  .productos{grid-template-columns:1fr;padding:56px 24px 76px}
  .tienda-head{padding:56px 24px 48px}
  .pedido{padding:44px 24px 80px}
  .fila{grid-template-columns:1fr;gap:0}
  .pasos-bar li{font-size:.58rem;letter-spacing:.1em;padding:13px 5px}
  .cart-panel{width:100%}
}

/* the 4th SKU would orphan a row in a 3-up grid, so the gift case spans it
   as a horizontal feature instead */
.prod.destacada{grid-column:1/-1;flex-direction:row;align-items:stretch}
.prod.destacada .prod-fig{flex:0 0 42%;aspect-ratio:auto;min-height:330px}
.prod.destacada .prod-txt{padding:44px clamp(26px,4vw,52px);justify-content:center}
.prod.destacada h3{font-size:1.75rem}
.prod.destacada p.desc{font-size:1.08rem;max-width:52ch}
.prod.destacada .prod-precio{font-size:1.7rem}
.prod.destacada .prod-comprar{max-width:330px}
@media (max-width:1000px){
  .prod.destacada{flex-direction:column}
  .prod.destacada .prod-fig{flex:none;aspect-ratio:16/10;min-height:0}
  .prod.destacada .prod-txt{padding:26px 24px 30px}
}

/* ---------- homepage shop teaser ---------- */
.teaser{background:var(--ink);padding-bottom:96px}
.teaser .seccion{text-align:center;padding-bottom:0}
a.tarjeta{border-bottom:1px solid rgba(201,162,39,.2);color:inherit}
a.tarjeta:hover{border-color:rgba(201,162,39,.5)}
a.tarjeta .precio{
  display:block;font-family:var(--display);font-size:1.18rem;
  color:var(--gold-lt);margin-top:14px;
}
a.tarjeta:hover h3{color:var(--gold-lt)}
.teaser-cta{text-align:center;margin:0}
@media (max-width:760px){.teaser{padding-bottom:70px}}

/* the homepage footer carries a 5th (shop) column; shop pages keep 4 */
.pie-in.cinco{grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:36px}
@media (max-width:1000px){.pie-in.cinco{grid-template-columns:1fr 1fr;gap:38px}}
@media (max-width:760px){.pie-in.cinco{grid-template-columns:1fr;gap:34px}}

/* the cart label costs ~62px that a 360px nav does not have to spare */
@media (max-width:430px){
  .cart-lbl{display:none}
  .cart-btn{padding:7px 10px;gap:6px}
}