@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/jost-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jost-latin-400-normal.woff2') format('woff2')}


:root{
  --ink:#0b0a0b; --ink2:#141114; --ink3:#1c181b;
  --wine:#8e1b3f; --wine-lt:#b5285a; --gold:#c8a86a; --gold-lt:#e6d3a8;
  --cream:#f3ede5; --mute:#9d9298;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--wine);color:#fff}

/* grano */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}


/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;align-items:center;justify-content:space-between;
  padding:20px 42px;transition:all .5s var(--ease)}
nav.solid{background:rgba(11,10,11,.86);backdrop-filter:blur(14px);padding:12px 42px;
  border-bottom:1px solid rgba(243,237,229,.07)}
.brand{display:flex;align-items:center;gap:12px}
/* El escudo es vertical (376 × 440). Estas medidas conservan las alturas
   aprobadas y, aun si el hosting suma estilos globales para las imágenes,
   no dejan que se estire en el eje horizontal. */
#nav .brand>img{display:block;flex:0 0 auto;width:auto!important;height:38px!important;max-width:none;
  aspect-ratio:376/440;object-fit:contain;transition:height .5s var(--ease);filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
#nav.solid .brand>img{height:30px!important}
.brand-tx{line-height:1;display:flex;flex-direction:column}
.brand-tx .n,.brand-tx .s{display:block}
.brand-tx .n{font-family:var(--serif);font-size:17px;letter-spacing:.16em;text-transform:uppercase}
.brand-tx .s{font-size:8px;letter-spacing:.42em;color:var(--gold);text-transform:uppercase;margin-top:3px}
.menu{display:flex;gap:34px;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.menu a{position:relative;padding:4px 0;color:rgba(243,237,229,.78);transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .45s var(--ease)}
.menu a:hover{color:var(--cream)} .menu a:hover::after{width:100%}
/* El panel móvil solo existe visualmente dentro de su breakpoint. */
.mobile-menu{display:none}
.cart-btn{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(200,168,106,.42);padding:9px 17px;border-radius:100px;transition:.35s var(--ease)}
.cart-btn:hover{background:var(--gold);color:#12100f;border-color:var(--gold)}
.cart-n{background:var(--wine);color:#fff;font-size:10px;min-width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;letter-spacing:0}
.burger{display:none;width:38px;height:38px;border:1px solid rgba(200,168,106,.42);border-radius:100px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:1105}
.burger i{width:15px;height:1px;background:var(--cream);transition:.4s var(--ease)}
.burger.on i:first-child{transform:translateY(3px) rotate(45deg)}
.burger.on i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:660px;overflow:hidden;display:grid;place-items:center}
.hero-bg{position:absolute;inset:-6%;background-size:cover;background-position:center 46%;
  transform:scale(1.06);filter:saturate(1.06) contrast(1.03) brightness(.96);will-change:transform}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){.hero-bg video{display:none}
  .hero-bg{background-image:url('../img/hero-poster.webp')}}
.hero::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(11,10,11,.78) 0%,rgba(11,10,11,.2) 28%,rgba(11,10,11,.5) 66%,var(--ink) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse 72% 64% at 50% 48%,transparent 26%,rgba(11,10,11,.5) 100%)}
.hero-in{position:relative;z-index:3;text-align:center;padding:0 24px}
.eyebrow{font-size:clamp(8px,1.6vw,10px);letter-spacing:.44em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.hero h1.wm{line-height:0}
.hero h1.wm img{width:clamp(290px,58vw,760px);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.65));
  animation:wmin 1.3s var(--ease) both}
@keyframes wmin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.hero p.lead{max-width:560px;margin:30px auto 0;font-size:15px;line-height:1.85;color:rgba(243,237,229,.76)}
.hero-cta{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  padding:16px 34px;border:1px solid var(--cream);transition:.4s var(--ease);position:relative;overflow:hidden}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--cream);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover{color:var(--ink)} .btn:hover::before{transform:translateY(0)}
.btn.fill{background:var(--wine);border-color:var(--wine)}
.btn.fill::before{background:var(--gold)}
.hero-side{position:absolute;z-index:3;right:34px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:rgba(243,237,229,.5)}
/* El botón de arrepentimiento en el hero. Lo exige la Resolución 424/2020 en
   la primera pantalla; usa la misma tipografía que los otros rótulos del hero
   para no pelearse con el diseño. */
.hero-legal{position:absolute;z-index:3;bottom:34px;left:34px;font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(243,237,229,.6);text-decoration:none;border-bottom:1px solid rgba(200,168,106,.45);
  padding-bottom:4px;transition:color .35s,border-color .35s}
.hero-legal:hover,.hero-legal:focus-visible{color:var(--cream);border-color:var(--gold)}

.scroll-cue{position:absolute;z-index:3;bottom:34px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.4em;
  text-transform:uppercase;color:rgba(243,237,229,.55);display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-cue i{width:1px;height:52px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marq{border-block:1px solid rgba(243,237,229,.1);background:var(--ink2);overflow:hidden;padding:17px 0}
.marq-t{display:flex;gap:52px;white-space:nowrap;animation:slide 34s linear infinite;font-family:var(--serif);
  font-size:19px;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,237,229,.42)}
.marq-t b{color:var(--gold);font-weight:400}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- estructura ---------- */
section{position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:0 42px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:56px;flex-wrap:wrap}
.sec-n{font-size:10px;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;margin-bottom:16px;display:block}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5.2vw,62px);line-height:1.04}
h2 em{font-style:italic;color:var(--gold-lt)}
.sec-h p{max-width:400px;font-size:14px;line-height:1.9;color:var(--mute)}

/* reveal */
.rv{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- historia ---------- */
.historia{padding:130px 0 120px;background:linear-gradient(180deg,var(--ink),var(--ink2))}
.hist-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:78px;align-items:center}
.crest{position:relative;display:grid;place-items:center;padding:48px}
.crest::before{content:"";position:absolute;inset:0;border:1px solid rgba(200,168,106,.3)}
.crest::after{content:"";position:absolute;inset:14px;border:1px solid rgba(200,168,106,.14)}
.crest img{width:78%;height:auto;filter:drop-shadow(0 22px 46px rgba(0,0,0,.75))}
.hist-tx p{font-size:15px;line-height:2;color:rgba(243,237,229,.76);margin-bottom:20px}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.3vw,38px);line-height:1.35;color:var(--gold-lt);
  border-left:1px solid var(--wine);padding-left:30px;margin:38px 0 34px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;border-top:1px solid rgba(243,237,229,.1);padding-top:34px}
.stat .v{font-family:var(--serif);font-size:40px;color:var(--gold);line-height:1}
.stat .l{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-top:9px;line-height:1.6}

/* ---------- colección ---------- */
.coleccion{padding:120px 0 130px;background:var(--ink2)}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.chip{font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:10px 20px;border:1px solid rgba(243,237,229,.18);
  border-radius:100px;color:var(--mute);transition:.35s var(--ease)}
.chip:hover{color:var(--cream);border-color:rgba(243,237,229,.42)}
.chip.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;background:linear-gradient(170deg,#221c20,#151214);border:1px solid rgba(243,237,229,.07);
  padding:34px 30px 30px;overflow:hidden;transition:.6s var(--ease);display:flex;flex-direction:column}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(ellipse 70% 46% at 50% 30%,rgba(142,27,63,.42),transparent 70%)}
.card:hover{transform:translateY(-9px);border-color:rgba(200,168,106,.36)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:2}
.tag{position:absolute;top:22px;right:22px;z-index:3;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;background:var(--wine);color:#fff}
.tag.gold{background:var(--gold);color:#1a1512}
/* La botella crece al pasar el cursor y tiene que verse entera.
   .shot medía exacto lo mismo que la imagen y recortaba: al escalar 1,045 y
   subir 10px, la botella se sale 17,2px por arriba del recorte. En vez de
   agrandar la caja —que haría más altas las catorce tarjetas— se deja que
   crezca hacia el hueco que ya existe: la tarjeta tiene 34px de padding
   arriba, más del doble de lo que necesita. Así no cambia nada en reposo, la
   grilla no se mueve y la tarjeta sigue conteniendo la botella, porque el
   overflow:hidden de .card sigue puesto. */
.shot{height:320px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:26px;overflow:visible}
.shot img{height:320px;width:auto;object-fit:contain;filter:drop-shadow(0 26px 34px rgba(0,0,0,.72));
  transition:transform .75s var(--ease)}

/* La foto es un enlace, pero no tiene que parecerlo ni moverse por su cuenta. */
.shot-a{display:block;line-height:0}
.shot-a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Solo donde hay cursor de verdad. En un teléfono el :hover se queda pegado
   después de tocar, y acá el toque es lo que abre la ficha: no queremos que
   además dispare una animación que estorbe. */
@media (hover:hover) and (pointer:fine){
  .card:hover .shot img{transform:translateY(-10px) scale(1.045)}
}
.c-var{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.c-name{font-family:var(--serif);font-size:27px;line-height:1.12;margin-bottom:12px}
.c-desc{font-size:12.5px;line-height:1.8;color:var(--mute);margin-bottom:22px;flex:1}
.c-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid rgba(243,237,229,.1);padding-top:20px}
.price{font-family:var(--serif);font-size:25px;color:var(--cream)}
.price s{font-size:14px;color:var(--mute);margin-right:8px}
.add{font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:12px 20px;border:1px solid rgba(243,237,229,.28);
  transition:.35s var(--ease);white-space:nowrap}
.add:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.add.done{background:var(--wine);border-color:var(--wine);color:#fff}

.fmts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.fmt{font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;padding:7px 12px;border-radius:100px;
  border:1px solid rgba(243,237,229,.16);color:var(--mute);transition:.3s var(--ease);white-space:nowrap}
.fmt:hover{color:var(--cream);border-color:rgba(243,237,229,.4)}
.fmt.on{background:rgba(200,168,106,.14);border-color:var(--gold);color:var(--gold-lt)}
.uxu{display:block;font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--mute);margin-top:5px}

/* ---------- premiado ---------- */
.award{padding:130px 0;background:var(--ink);overflow:hidden}
.aw-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.aw-shot{position:relative;display:grid;place-items:center;min-height:520px}
.aw-shot::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(142,27,63,.55),transparent 68%);filter:blur(26px)}
.aw-shot img{position:relative;height:520px;width:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.8))}
.medal{position:absolute;right:6%;top:12%;width:132px;height:132px;border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center;text-align:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);line-height:1.9;background:rgba(11,10,11,.72);backdrop-filter:blur(3px);box-shadow:0 0 0 6px rgba(11,10,11,.5),0 0 34px rgba(200,168,106,.16)}
.medal::before{content:"";position:absolute;inset:7px;border:1px solid rgba(200,168,106,.32);border-radius:50%}
.medal b{font-family:var(--serif);font-size:19px;display:block;letter-spacing:.06em;color:var(--gold-lt)}
.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(243,237,229,.1);margin:34px 0 36px;border:1px solid rgba(243,237,229,.1)}
.note{background:var(--ink);padding:20px 22px}
.note .k{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.note .v{font-size:13.5px;color:rgba(243,237,229,.82);line-height:1.6}

/* ---------- notas de prensa del premio ----------
   Discreto a propósito: es el respaldo del premio, no compite con él. Sin
   recuadro ni botón, apenas un rótulo dorado chiquito y los enlaces en una
   lista. El medio va en el dorado de la sección y el título en el gris del
   cuerpo, para que se lea "Clarín — tal cosa" de un vistazo.

   El enlace es texto y no una caja de flex: así corta el renglón donde
   cortaría cualquier frase, en vez de dejar la raya sola al final de la línea
   cuando el título no entra. Se nota en el celular. */
.prensa{margin-top:34px}
.prensa-k{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.prensa ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prensa a{text-decoration:none;font-size:13px;line-height:1.7;color:rgba(243,237,229,.62);
  border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease)}
.prensa a .m{color:rgba(200,168,106,.9);white-space:nowrap}
.prensa a .s{color:rgba(243,237,229,.32)}
.prensa a:hover,.prensa a:focus-visible{color:rgba(243,237,229,.95);border-bottom-color:rgba(200,168,106,.5)}
.prensa a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- experiencias ---------- */
.exp{padding:125px 0 130px;background:linear-gradient(180deg,var(--ink2),var(--ink))}
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tk{position:relative;background:var(--ink3);border:1px solid rgba(243,237,229,.09);display:flex;flex-direction:column;
  transition:.55s var(--ease);overflow:hidden}
.tk:hover{border-color:rgba(200,168,106,.42);transform:translateY(-7px)}
.tk-ph{height:190px;overflow:hidden;position:relative}
.tk-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:brightness(.86) saturate(.95)}
.tk:hover .tk-ph img{transform:scale(1.06)}
.tk-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--ink3))}
.tk-top{padding:24px 30px 24px;border-bottom:1px dashed rgba(243,237,229,.2);position:relative}
.tk-top::after,.tk-top::before{content:"";position:absolute;bottom:-11px;width:22px;height:22px;border-radius:50%;background:var(--ink)}
.tk-top::before{left:-11px} .tk-top::after{right:-11px}
.tk-date{display:flex;align-items:baseline;gap:10px;color:var(--gold);margin-bottom:16px}
.tk-date .d{font-family:var(--serif);font-size:44px;line-height:1}
.tk-date .m{font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.tk h3{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:12px}
.tk p{font-size:12.5px;line-height:1.8;color:var(--mute)}
.tk-meta{display:flex;gap:18px;margin-top:18px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,237,229,.6);flex-wrap:wrap}
.tk-bot{padding:22px 30px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.cupo{height:3px;background:rgba(243,237,229,.13);margin:0 30px 18px;position:relative}
.cupo i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--wine),var(--gold))}
.cupo-tx{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:0 30px 16px}

/* ---------- galería ---------- */
.gal{padding:120px 0 130px;background:var(--ink)}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.tile{position:relative;overflow:hidden;background:var(--ink3)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;
  filter:brightness(.82) saturate(.92)}
.tile:hover img{transform:scale(1.07);filter:brightness(1) saturate(1)}
.tile::after{content:"";position:absolute;inset:0;border:1px solid rgba(243,237,229,.07);pointer-events:none}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(243,237,229,.9);opacity:.95;transition:.5s var(--ease);
  background:linear-gradient(transparent,rgba(11,10,11,.9));z-index:2}
.tile:hover .cap{opacity:1;color:var(--cream)}
.t-a{grid-column:span 2;grid-row:span 2}
.t-b{grid-column:span 1;grid-row:span 2}
.t-c{grid-column:span 1;grid-row:span 1}
.t-d{grid-column:span 2;grid-row:span 1}


.tile{cursor:pointer}
.tile .cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tile .cap i{font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--gold);white-space:nowrap}
.tile .zoom{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid rgba(243,237,229,.5);
  border-radius:50%;display:grid;place-items:center;color:var(--cream);font-size:15px;z-index:2;
  background:rgba(11,10,11,.45);backdrop-filter:blur(4px);opacity:0;transform:scale(.85);transition:.45s var(--ease)}
.tile:hover .zoom{opacity:1;transform:none}

/* ---------- subgalería (lightbox) ---------- */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(7,6,7,.97);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.lb.on{opacity:1;pointer-events:auto}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 30px 14px;
  border-bottom:1px solid rgba(243,237,229,.08)}
.lb-t{font-family:var(--serif);font-size:23px}
.lb-t small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-top:5px}
.lb-n{font-size:11px;letter-spacing:.24em;color:var(--mute)}
.lb-x{font-size:26px;line-height:1;color:var(--mute);transition:.3s;padding:0 4px}
.lb-x:hover{color:var(--cream);transform:rotate(90deg)}
.lb-body{flex:1;position:relative;display:grid;place-items:center;padding:22px 74px;min-height:0}
.lb-body img{max-width:80%;max-height:80%;object-fit:contain;box-shadow:0 30px 70px rgba(0,0,0,.7);
  animation:lbin .5s var(--ease)}
/* place-items:center centraba la foto en todo el alto libre del lightbox.
   En escritorio se conserva justify-items:center (eje horizontal), pero el
   contenedor pasa a alinear desde arriba y reserva 50px bajo la cabecera. */
@media(min-width:661px){.lb-body{align-items:start;padding:50px 74px 22px}}
@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border:1px solid rgba(243,237,229,.22);
  border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--cream);transition:.35s var(--ease);z-index:3}
.lb-nav:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.lb-nav.prev{left:14px} .lb-nav.next{right:14px}
.lb-strip{flex:0 0 auto;display:flex;gap:9px;overflow-x:auto;padding:14px 30px 24px;justify-content:center;flex-wrap:wrap}
.lb-strip img{height:62px;width:92px;object-fit:cover;opacity:.4;cursor:pointer;transition:.35s var(--ease);
  border:1px solid transparent}
.lb-strip img:hover{opacity:.8}
.lb-strip img.on{opacity:1;border-color:var(--gold)}
@media(max-width:660px){
  .lb-body{padding:14px 12px}
  .lb-body img{max-width:100%;max-height:100%}
  .lb-nav{width:42px;height:42px;font-size:19px}
  .lb-nav.prev{left:6px}.lb-nav.next{right:6px}
  .lb-head{padding:16px 18px 12px}.lb-t{font-size:19px}
  .lb-strip{padding:10px 14px 18px;justify-content:flex-start;flex-wrap:nowrap}
  .lb-strip img{height:50px;width:74px;flex:0 0 auto}
}

/* ---------- terruño ---------- */
.terr{position:relative;padding:0}
.terr-img{height:72vh;min-height:580px;background-size:cover;background-position:center 58%;
  filter:brightness(.46) saturate(.55) contrast(1.1)}
.terr-ov{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:100px 0 70px;
  background:linear-gradient(180deg,var(--ink),transparent 30%,rgba(11,10,11,.55) 75%,var(--ink))}
.terr-ov h2{max-width:900px;margin:0 auto}
.terr-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:860px;margin:52px auto 0;align-items:start}
.terr-nums .v{font-family:var(--serif);font-size:clamp(30px,4vw,48px);color:var(--gold)}
.terr-nums .l{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(243,237,229,.66);margin-top:8px}

/* ---------- club ---------- */
.club{padding:120px 0;background:var(--ink);text-align:center}
.club-in{max-width:660px;margin:0 auto}
.field{display:flex;gap:0;margin-top:36px;border:1px solid rgba(243,237,229,.24)}
.field input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-family:var(--sans);
  font-size:13px;letter-spacing:.08em;padding:19px 22px}
.field input::placeholder{color:var(--mute)}
.field button{background:var(--cream);color:var(--ink);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;padding:0 30px;transition:.35s}
.field button:hover{background:var(--gold)}

/* ---------- footer ---------- */
footer{background:var(--ink2);border-top:1px solid rgba(243,237,229,.08);padding:80px 0 34px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:56px}
.f-grid h3,.f-grid h4{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:400}
.f-grid a,.f-grid p{display:block;font-size:13px;color:var(--mute);line-height:2.2;transition:color .3s}
.f-grid a:hover{color:var(--cream)}
.f-brand img{height:64px;width:auto;margin-bottom:18px}
.f-bot{border-top:1px solid rgba(243,237,229,.08);padding-top:26px;display:flex;justify-content:space-between;gap:20px;
  font-size:10.5px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;flex-wrap:wrap}

/* ---------- carrito ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);opacity:0;pointer-events:none;
  transition:opacity .45s;z-index:1300}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:414px;max-width:90vw;background:var(--ink2);z-index:1400;
  transform:translateX(100%);transition:transform .55s var(--ease);display:flex;flex-direction:column;
  border-left:1px solid rgba(243,237,229,.1)}
.drawer.on{transform:none}
.dr-h{padding:26px 28px;border-bottom:1px solid rgba(243,237,229,.1);display:flex;justify-content:space-between;align-items:center}
.dr-h h3{font-family:var(--serif);font-size:24px;font-weight:400}
.dr-items{flex:1;overflow-y:auto;padding:10px 28px}
.di{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid rgba(243,237,229,.08);align-items:center}
.di img{height:74px;width:auto}
.di .n{font-family:var(--serif);font-size:17px;line-height:1.2}
.di .t{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:6px 0 8px}
.di .p{font-size:13px;color:var(--mute)}
.qty{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:12px}
.qty button{width:22px;height:22px;border:1px solid rgba(243,237,229,.25);display:grid;place-items:center;font-size:13px;transition:.3s}
.qty button:hover{background:var(--cream);color:var(--ink)}
.dr-empty{text-align:center;color:var(--mute);font-size:13px;padding:60px 0;line-height:2}
.dr-f{padding:24px 28px 30px;border-top:1px solid rgba(243,237,229,.1)}
.dr-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.dr-tot .l{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.dr-tot .v{font-family:var(--serif);font-size:32px;color:var(--gold)}
.dr-f .btn{width:100%;justify-content:center;border-color:var(--cream);background:var(--cream);color:var(--ink)}
.dr-f .btn::before{background:var(--gold)}
.dr-note{font-size:10px;letter-spacing:.12em;color:var(--mute);text-align:center;margin-top:14px;text-transform:uppercase}
.x{font-size:22px;line-height:1;color:var(--mute);transition:.3s}.x:hover{color:var(--cream);transform:rotate(90deg)}

.wa{position:fixed;right:22px;bottom:22px;z-index:1150;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:.35s var(--ease)}
.wa:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 38px rgba(37,211,102,.35)}
@media(max-width:660px){.wa{right:16px;bottom:16px;width:48px;height:48px}}

/* checkout */
.ck-int{font-size:12px;line-height:1.8;color:var(--mute);margin:18px 0 20px}
#ckform label{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
#ckform input{width:100%;margin-top:7px;background:none;border:none;border-bottom:1px solid rgba(243,237,229,.24);
  color:var(--cream);font-family:var(--sans);font-size:14px;letter-spacing:.04em;padding:9px 2px;outline:none;
  transition:border-color .3s;text-transform:none}
#ckform input:focus{border-color:var(--gold)}
.ck-back{display:block;width:100%;margin-top:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);padding:8px;transition:.3s}
.ck-back:hover{color:var(--cream)}
.ticket{border:1px solid rgba(200,168,106,.4);background:var(--ink3);margin:20px 0 0;position:relative}
.ticket .tk-h{padding:20px 22px 16px;border-bottom:1px dashed rgba(243,237,229,.22)}
.ticket .ev{font-family:var(--serif);font-size:20px;line-height:1.2}
.ticket .dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:7px}
.ticket .tk-b{padding:18px 22px 22px;display:flex;gap:16px;align-items:center}
.ticket .who{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.ticket .who b{display:block;font-size:15px;letter-spacing:.04em;color:var(--cream);text-transform:none;
  font-weight:400;margin-top:5px;font-family:var(--serif)}
.ticket canvas{background:#fff;padding:6px;flex:0 0 auto}
.ok-h{font-family:var(--serif);font-size:24px;margin:22px 0 10px}
.ok-p{font-size:12.5px;line-height:1.85;color:var(--mute)}
.ok-p b{color:var(--cream);font-weight:400}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;opacity:0;visibility:hidden;transform:translate(-50%,140%);background:var(--cream);color:var(--ink);
  padding:14px 26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;z-index:1500;transition:transform .5s var(--ease),opacity .35s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

@media(max-width:1000px){
  .hist-grid,.aw-grid{grid-template-columns:1fr;gap:46px}
  .grid,.tickets{grid-template-columns:repeat(2,1fr)}
  .shot,.shot img{height:270px}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .t-a{grid-column:span 2;grid-row:span 2}.t-b,.t-c,.t-d{grid-column:span 1;grid-row:span 1}
  .f-grid{grid-template-columns:1fr 1fr}
  .burger{display:flex}
  /* El menú desktop sigue dentro de la barra; el panel móvil es un hermano
     independiente del nav para que el header contraído no lo afecte. */
  #nav .menu{display:none}
  .mobile-menu{position:fixed;inset:0;width:100%;height:100dvh;background:var(--ink);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:26px;font-size:16px;letter-spacing:.28em;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s var(--ease),visibility 0s linear .45s;z-index:1090;overflow-y:auto}
  .mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .mobile-menu a{color:var(--cream)}
  body.menu-open{overflow:hidden}
  .aw-shot{min-height:400px}.aw-shot img{height:400px}
}
@media(max-width:660px){
  .wrap{padding:0 22px}nav{padding:16px 22px}nav.solid{padding:10px 22px}
  .grid,.tickets,.stats,.terr-nums,.notes{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr;grid-auto-rows:210px}
  .t-a,.t-b,.t-c,.t-d{grid-column:span 1;grid-row:span 1}
  .stats{grid-template-columns:1fr 1fr;gap:26px}
  .terr-nums{grid-template-columns:1fr;gap:22px}
  .cart-btn span.tx{display:none}
  .hero-side{display:none}
  /* Arriba del indicador de scroll, que ocupa los 34px de abajo más su línea. */
  .hero-legal{bottom:132px;left:50%;transform:translateX(-50%);letter-spacing:.2em;font-size:8.5px}
  .f-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   AGREGADOS DE LA VERSIÓN WORDPRESS

   Todo lo de arriba es el CSS aprobado por el cliente y no se toca.
   Acá abajo van los estados y las pantallas que la maqueta estática no
   tenía por qué contemplar: aparecen cuando los datos salen de la tienda
   y hay stock, variaciones y una ficha por vino.

   Se usan las mismas variables, tipografías y medidas del diseño original.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- sin stock ----------
   Un formato agotado se muestra apagado, nunca se esconde: el cliente
   tiene que poder ver que ese formato existe y que ahora no está. */
.fmt[disabled],.add[disabled]{opacity:.32;cursor:not-allowed}
.fmt[disabled]:hover{color:var(--mute);border-color:rgba(243,237,229,.16)}
.add[disabled]:hover{background:none;color:inherit;border-color:rgba(243,237,229,.28)}

/* ---------- ficha de cada vino ----------
   Reusa la caja de datos de la sección Premiado. Los textos largos
   —elaboración, cata, maridaje— ocupan las dos columnas. */
.note.ancho{grid-column:1/-1}
.ficha-volver{display:inline-block;margin-bottom:26px}
.ficha-volver:hover{color:var(--cream)}

/* ---------- experiencias sin fechas cargadas ----------
   Mientras la bodega no tenga eventos publicados, la sección muestra las
   fotos de los sunsets que ya pasaron y un aviso para dejar el mail. Reusa
   la tarjeta de entrada (.tk) y el formulario del Club (.field). */
.exp-pasados .tk-ph{height:300px}
.exp-aviso{text-align:center;margin-top:66px}
.exp-aviso .btn{margin-top:20px}

/* ---------- campo trampa ----------
   Va escondido fuera de pantalla: una persona nunca lo ve ni lo completa,
   pero los bots que rellenan todos los campos sí. El servidor descarta el
   envío cuando llega con algo adentro. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- carrito y checkout de WooCommerce ----------
   Pantallas que la maqueta no tenía: el panel lateral resolvía todo de
   mentira. Los campos copian la estética del formulario del panel —etiqueta
   dorada en versalitas, campo sin caja y subrayado que se enciende al
   escribir— para que el checkout no parezca de otro sitio. */
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields{margin-top:34px}

.woocommerce h3,
.woocommerce-billing-fields h3,
#order_review_heading{font-family:var(--serif);font-weight:400;font-size:26px;margin:38px 0 6px}

.woocommerce form .form-row{display:block;margin-bottom:22px}
.woocommerce form .form-row label{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.woocommerce form .form-row .required{color:var(--gold);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection{width:100%;background:none;border:none;
  border-bottom:1px solid rgba(243,237,229,.24);color:var(--cream);font-family:var(--sans);font-size:14px;
  letter-spacing:.04em;padding:9px 2px;outline:none;transition:border-color .3s;border-radius:0}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--gold)}
.woocommerce form .form-row textarea{min-height:96px;border:1px solid rgba(243,237,229,.24);padding:12px}

/* El cartel de vista previa.
   El menú es position:fixed, así que un cartel en el flujo normal le quedaría
   debajo. Va fijo arriba de todo, y el menú y el hero bajan lo mismo que mide
   el cartel: un solo número, --previa-alto, para que no se desfasen.
   Se apaga vaciando el campo en la página de opciones. */
body.en-previa{--previa-alto:34px}
@media (max-width:660px){ body.en-previa{--previa-alto:42px} }

.aviso-previa{position:fixed;top:0;left:0;right:0;z-index:1200;height:var(--previa-alto,34px);
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--ink);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;text-align:center;padding:0 14px;line-height:1.35}
@media (max-width:660px){ .aviso-previa{font-size:8.5px;letter-spacing:.1em} }

body.en-previa nav{top:var(--previa-alto)}
body.en-previa .hero{padding-top:var(--previa-alto)}

/* Doble exhibición de precio en la ficha del vino. Lo pide la Resolución
   4/2025: el precio grande es el final, y debajo se informa cuánto es sin
   impuestos nacionales. Va en la misma tipografía del sitio, apagado, sin
   recuadro ni ícono: es un dato legal, no una oferta. */
.sin-imp{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;
  color:var(--mute);margin-top:5px;line-height:1.5}

/* El desplegable, con su lista.
   El control cerrado toma el color del texto de la regla de arriba, pero la
   lista que se abre la dibuja el sistema: sin esto sale con los colores del
   escritorio —texto gris sobre blanco— y arriba de un fondo oscuro no se lee.
   color-scheme le avisa al navegador que esto es oscuro, y las dos reglas de
   option pintan la lista a mano para los que igual no hacen caso. */
.woocommerce form .form-row select{color-scheme:dark;color:var(--cream)}
.woocommerce form .form-row select option,
.calc select option{background:var(--ink2);color:var(--cream)}

/* Los campos que completa el navegador solo.
   Chrome pinta el autocompletado con fondo celeste y texto oscuro, y lo hace
   con un estilo de usuario-agente que gana por especificidad: no alcanza con
   declarar background ni color. Se lo tapa con una sombra interior del color
   del fondo y se le fuerza el color del texto con -webkit-text-fill-color,
   que es el único que respeta. La transición larguísima es el remiendo para
   los navegadores donde ni la sombra alcanza: retrasa el repintado más allá
   de lo que dura la visita. */
.woocommerce form .form-row input.input-text:-webkit-autofill,
.woocommerce form .form-row input.input-text:-webkit-autofill:hover,
.woocommerce form .form-row input.input-text:-webkit-autofill:focus,
.woocommerce form .form-row input.input-text:-webkit-autofill:active,
.woocommerce form .form-row textarea:-webkit-autofill,
.woocommerce form .form-row select:-webkit-autofill,
.calc input:-webkit-autofill,
.calc select:-webkit-autofill{
  -webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 1000px var(--ink) inset;
  box-shadow:0 0 0 1000px var(--ink) inset;
  caret-color:var(--cream);
  -webkit-transition:background-color 9999s ease-in-out 0s;
  transition:background-color 9999s ease-in-out 0s;
  background-clip:content-box;
}

/* Firefox usa su propio selector y sí respeta background y color. */
.woocommerce form .form-row input.input-text:autofill,
.woocommerce form .form-row textarea:autofill,
.calc input:autofill{background:none;color:var(--cream)}

/* El desplegable de Provincia no es un <select>: WooCommerce lo reemplaza por
   Select2, que trae su propia hoja de estilos y pinta el valor elegido en
   #444. Sobre el fondo casi negro del checkout eso es texto gris sobre negro:
   ilegible. La caja ya estaba peinada; faltaba lo de adentro y la lista. */
.woocommerce .select2-selection__rendered{color:var(--cream)!important;padding:0!important;line-height:inherit}
.woocommerce .select2-selection__placeholder{color:var(--mute)}
.woocommerce .select2-selection__arrow b{border-top-color:var(--gold)}
.woocommerce .select2-container--focus .select2-selection,
.woocommerce .select2-container--open .select2-selection{border-bottom-color:var(--gold)}

/* La lista que se abre vive al final del <body>, fuera del .woocommerce. */
.select2-dropdown{background:var(--ink2);border:1px solid rgba(243,237,229,.18);border-radius:0}
.select2-results__option{color:var(--cream);font-family:var(--sans);font-size:14px;letter-spacing:.04em}
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"]{background:var(--wine)!important;color:#fff!important}
.select2-search--dropdown .select2-search__field{background:var(--ink);border:1px solid rgba(243,237,229,.18);
  color:var(--cream);font-family:var(--sans);font-size:14px;padding:7px 9px;border-radius:0}
.select2-search--dropdown .select2-search__field:focus{outline:none;border-color:var(--gold)}

/* Tabla del resumen del pedido y del carrito. */
.woocommerce table.shop_table{width:100%;border:1px solid rgba(243,237,229,.1);border-collapse:collapse;margin:18px 0 30px}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{padding:16px 18px;border-bottom:1px solid rgba(243,237,229,.08);text-align:left;
  font-size:13.5px;color:rgba(243,237,229,.82)}
.woocommerce table.shop_table th{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:400}
.woocommerce table.shop_table .order-total .amount{font-family:var(--serif);font-size:26px;color:var(--gold)}
.woocommerce table.shop_table img{width:54px;height:auto}

/* Botones: los mismos que el resto del sitio. */
.woocommerce #payment #place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button{font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:14px 26px;
  background:var(--cream);color:var(--ink);border:1px solid var(--cream);transition:.35s var(--ease)}
.woocommerce #payment #place_order:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover{background:var(--gold);border-color:var(--gold)}

/* Avisos de Woo: los suyos son azules y celestes. */
.woocommerce-info,.woocommerce-message,.woocommerce-error,.woocommerce-NoticeGroup{
  list-style:none;border-left:2px solid var(--gold);background:rgba(200,168,106,.07);
  padding:16px 20px;margin:0 0 26px;font-size:13px;line-height:1.7;color:rgba(243,237,229,.86)}
.woocommerce-error{border-left-color:var(--wine);background:rgba(142,27,63,.12)}

/* Medios de pago. */
.woocommerce #payment{margin-top:30px}
.woocommerce #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 22px;
  border:1px solid rgba(243,237,229,.1)}
.woocommerce #payment ul.payment_methods li{padding:16px 20px;border-bottom:1px solid rgba(243,237,229,.08)}
.woocommerce #payment ul.payment_methods li label{font-size:12px;letter-spacing:.1em;color:var(--cream)}
.woocommerce #payment .payment_box{font-size:12.5px;line-height:1.8;color:var(--mute);padding:12px 0 0}
.woocommerce-terms-and-conditions-wrapper{font-size:12px;color:var(--mute);margin-bottom:20px}

/* ---------- envío o retiro en el checkout ----------
   Es la primera decisión del checkout, así que va grande y arriba. Usa las
   mismas medidas y colores que las tarjetas del sitio. */
.entrega{margin-bottom:44px}
.entrega-ops{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.entrega-op{display:block;cursor:pointer;padding:22px 24px;border:1px solid rgba(243,237,229,.16);
  transition:.35s var(--ease)}
.entrega-op:hover{border-color:rgba(243,237,229,.4)}
.entrega-op.on{border-color:var(--gold);background:rgba(200,168,106,.08)}
.entrega-op input{position:absolute;opacity:0;pointer-events:none}
.entrega-op .t{display:block;font-family:var(--serif);font-size:19px;color:var(--cream)}
.entrega-op.on .t{color:var(--gold-lt)}
.entrega-op .d{display:block;font-size:12px;line-height:1.7;color:var(--mute);margin-top:7px}
.retiro-datos{margin-top:22px;padding:22px 24px;border:1px solid rgba(200,168,106,.28);background:rgba(200,168,106,.05)}
.retiro-datos .k{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.retiro-datos p{font-size:13.5px;line-height:1.9;color:rgba(243,237,229,.82);margin-bottom:12px}
.retiro-datos p.aviso{font-size:12.5px;color:var(--mute);margin-bottom:0}
.el-symbol-oculto,
.woocommerce-checkout #shipping_method,
.woocommerce-checkout .woocommerce-shipping-totals th{display:none}
@media(max-width:660px){.entrega-ops{grid-template-columns:1fr}}

/* ---------- calculadora de envío en el panel ---------- */
.calc{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid rgba(243,237,229,.1)}
.calc label{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.calc-campos{display:flex;gap:8px}
.calc select,.calc input{background:none;border:none;border-bottom:1px solid rgba(243,237,229,.24);
  color:var(--cream);font-family:var(--sans);font-size:12.5px;padding:7px 2px;outline:none;transition:border-color .3s}
.calc select{flex:1}
.calc input{width:64px;text-align:center}
.calc select:focus,.calc input:focus{border-color:var(--gold)}
.calc select option{background:var(--ink2);color:var(--cream)}
.calc-r{font-size:12px;line-height:1.7;color:rgba(243,237,229,.82);margin-top:12px;min-height:1em}
.calc-r b{color:var(--gold-lt);font-weight:400}
.calc-r i{display:block;font-style:normal;font-size:10.5px;color:var(--mute);margin-top:4px}
/* El país no se elige: la bodega vende solo en Argentina. Va con !important
   porque el script de direcciones de Woo le pone un display en línea. */
#billing_country_field{display:none !important}

/* ---------- fichas de asistente ----------
   Una por entrada, cuando el carrito lleva eventos. Usan la misma caja que
   el bloque de retiro, para que el checkout se lea como una sola pieza. */
.asistentes{margin-top:44px}
.asistentes-int{font-size:13px;line-height:1.9;color:var(--mute);margin:12px 0 22px}
.asistente{border:1px solid rgba(243,237,229,.16);padding:22px 24px;margin-bottom:16px}
.asistente-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid rgba(243,237,229,.1)}
.asistente-h .k{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.asistente-yo{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  border:1px solid rgba(243,237,229,.24);padding:7px 12px;transition:.3s var(--ease);white-space:nowrap}
.asistente-yo:hover{color:var(--ink);background:var(--cream);border-color:var(--cream)}

/* ---------- legales ----------
   Superficies nuevas que la maqueta no tenía: el aviso de mayoría de edad,
   la barra legal del pie, los documentos en borrador y el formulario de
   arrepentimiento. No se tocó ninguna regla anterior; todo usa la misma
   paleta y las mismas tipografías del diseño aprobado. */

/* Aviso de +18. El contenido de la página está entero en el HTML: esto es
   una capa que se pone encima, no un reemplazo. Los buscadores leen el
   sitio completo. */
.edad{position:fixed;inset:0;z-index:1600;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(11,10,11,.94);backdrop-filter:blur(10px)}
.sin-edad .edad{display:flex}
.sin-edad body{overflow:hidden}
.edad-caja{max-width:470px;width:100%;text-align:center;background:var(--ink2);
  border:1px solid rgba(200,168,106,.22);padding:52px 40px 34px}
.edad-escudo{width:54px;height:auto;margin:0 auto 26px;display:block;opacity:.9}
.edad h2{font-family:var(--serif);font-weight:300;font-size:31px;line-height:1.24;color:var(--cream);margin-bottom:16px}
.edad h2 em{font-style:italic;color:var(--gold)}
.edad p{font-size:13.5px;line-height:2;color:var(--mute);margin-bottom:30px}
.edad-btns{display:flex;flex-direction:column;align-items:center;gap:16px}
/* Centrado como el botón del carrito: .btn es inline-flex y, al estirarlo
   a todo el ancho, sin justify-content el texto se pega a la izquierda. */
.edad-btns .btn{width:100%;justify-content:center}
.edad-no{background:none;border:0;padding:4px;cursor:pointer;font-family:var(--sans);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);transition:color .3s}
.edad-no:hover{color:var(--cream)}
.edad-legal{display:block;margin-top:30px;padding-top:22px;border-top:1px solid rgba(243,237,229,.08);
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

@media(max-width:660px){
  .edad-caja{padding:40px 26px 28px}
  .edad h2{font-size:26px}
}

/* Barra legal del pie */
.f-legal{border-top:1px solid rgba(243,237,229,.08);padding-top:26px;margin-top:8px}
.f-legal-links{display:flex;flex-wrap:wrap;gap:10px 26px}
.f-legal-links a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);transition:color .3s}
.f-legal-links a:hover{color:var(--cream)}
.f-legal-links .f-arrep{color:var(--gold-lt);border-bottom:1px solid rgba(200,168,106,.4);padding-bottom:2px}
.f-legal-links .f-arrep:hover{color:var(--gold)}
.f-fiscal{margin-top:18px;font-size:10.5px;line-height:2;color:var(--mute);letter-spacing:.04em}

/* Documentos legales */
.aviso-borrador{border:1px solid rgba(200,168,106,.45);background:rgba(200,168,106,.07);
  padding:26px 28px;margin:0 0 40px}
.aviso-borrador p{font-size:13.5px;line-height:1.95;color:var(--cream);margin-bottom:12px}
.aviso-borrador p:last-child{margin-bottom:0}
.aviso-borrador strong{color:var(--gold-lt)}
mark.falta{background:rgba(200,168,106,.2);color:var(--gold-lt);padding:1px 7px;
  font-family:var(--sans);font-size:.86em;letter-spacing:.02em;border-bottom:1px dashed rgba(200,168,106,.6)}
.entry-content h3,.page .historia article h3{font-family:var(--serif);font-weight:400;font-size:23px;
  color:var(--cream);margin:44px 0 14px}
.page .historia article p{font-size:14px;line-height:2.05;color:var(--mute);margin-bottom:16px}
.page .historia article ul{margin:0 0 20px 20px;list-style:disc}
.page .historia article li{font-size:14px;line-height:2.05;color:var(--mute);margin-bottom:8px}
.page .historia article a{color:var(--gold-lt);border-bottom:1px solid rgba(200,168,106,.35)}
.page .historia article a:hover{color:var(--gold)}

/* Formulario de arrepentimiento */
.arrep{max-width:520px;margin:34px 0 0}
.arrep-fila{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.arrep-fila label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.arrep-req{color:var(--wine-lt)}
.arrep-fila input,.arrep-fila textarea{width:100%;background:var(--ink3);border:1px solid rgba(243,237,229,.12);
  padding:13px 15px;color:var(--cream);font-family:var(--sans);font-size:14px;transition:border-color .3s}
.arrep-fila input:focus,.arrep-fila textarea:focus{outline:none;border-color:var(--gold)}
.arrep-fila textarea{resize:vertical;line-height:1.8}
.arrep-fila small{font-size:11.5px;color:var(--mute);line-height:1.7}
.arrep-aviso{margin-top:18px;font-size:13px;line-height:1.9;color:var(--mute);min-height:1px}
.arrep-aviso.ok{color:var(--gold-lt)}
.arrep-aviso.mal{color:var(--wine-lt)}
/* La regla de .trampa ya está más arriba, con el formulario del Club. */

/* Legales en el checkout */
.co-legal{margin:14px 0 0;font-size:11.5px;line-height:1.9;color:var(--mute);text-align:center}
.co-legal a{color:var(--gold-lt);border-bottom:1px solid rgba(200,168,106,.3)}
.co-legal a:hover{color:var(--gold)}
.co-legal-edad{margin-top:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}