/* ==========================================================================
   GARDEL WINES · v2.0 — implementación del canvas de Design
   Regla de marca: la palabra de 1930 en Bodoni dorado, la de hoy en
   Archivo Black. Sin excepciones.
   ========================================================================== */
:root{
  --noche:#11151E; --pizarra:#1A2030; --pizarra2:#161B27; --acero:#1C2233;
  --crema:#E7E2DE; --crema2:#9AA3B3; --crema3:#6B7484;
  --dorado:#C2AB90; --naranja:#D4633A; --violeta:#4B3A6B;
  --linea:rgba(231,226,222,.12); --linea2:rgba(231,226,222,.28);
  --papel:#E9E5DE; --papel-2:#DDD8CF; --tinta:#181C24; --tinta2:#4C5260;
  --tan-profundo:#8A6A45;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --caps:"Cinzel","Trajan Pro",Georgia,serif;
  --hoy:"Archivo Black","Helvetica Neue",Impact,sans-serif;
  --sans:"Jost","Century Gothic",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--noche);color:var(--crema);font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}
.wrap{max-width:1300px;margin:0 auto;padding-left:clamp(1.2rem,4vw,3.4rem);padding-right:clamp(1.2rem,4vw,3.4rem)}
/* red de seguridad: ninguna clase combinada con .wrap puede anular el margen lateral */
.wrap{--wrap-pad:clamp(1.2rem,4vw,3.4rem)}
.wrap.mus-head,.wrap.dic-top,.wrap.firma-sec,.wrap.copa,.wrap.intro,.wrap.palabra,.wrap.sel,
.mus-head.wrap,.dic-top.wrap,.firma-sec.wrap,.copa.wrap,.intro.wrap,.palabra.wrap,.sel.wrap{
  padding-left:var(--wrap-pad);padding-right:var(--wrap-pad)}

/* tipografía */
.k{font-family:var(--caps);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--crema3);margin:0}
.k.gold{color:var(--dorado)} .k.orange{color:var(--naranja)}
.serif{font-family:var(--serif)}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
.display{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:.94}
.impact{font-family:var(--hoy);letter-spacing:-.03em;line-height:.92;text-transform:uppercase}
.lede{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--crema2);line-height:1.55}
.measure{max-width:56ch}
.small{font-size:.8rem;color:var(--crema3);line-height:1.5}

/* header */
header{position:sticky;top:0;z-index:70;background:rgba(17,21,30,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea)}
.bar{display:flex;align-items:center;gap:1.5rem;height:68px}
.wordmark{display:flex;align-items:baseline;gap:.5rem}
.wordmark b{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:.01em}
.wordmark span{font-family:var(--caps);font-size:.6rem;letter-spacing:.32em;color:var(--crema3)}
nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem)}
nav a{font-family:var(--caps);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crema2);transition:.2s;white-space:nowrap}
nav a:hover{color:var(--crema)}
nav a.on{color:var(--naranja)}
.lang{display:flex;gap:.5rem;padding-left:1.2rem;border-left:1px solid var(--linea2);font-size:.7rem;letter-spacing:.14em}
.lang button{color:var(--crema3)} .lang button.on{color:var(--crema);font-weight:600}
.burger{display:none;margin-left:auto;font-size:1.3rem;padding:.4rem}
@media(max-width:940px){
  .burger{display:block}
  nav{position:fixed;inset:68px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--pizarra);
    border-bottom:1px solid var(--linea);padding:1rem clamp(1.2rem,4vw,3.4rem) 1.4rem;margin:0;
    transform:translateY(-125%);transition:transform .3s}
  nav.open{transform:none}
  nav a{padding:.9rem 0;border-bottom:1px solid var(--linea)}
  nav .lang{border-left:0;padding-left:0;margin-top:1rem}
}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--caps);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.95rem 1.7rem;background:var(--naranja);color:#11151E;
  border:1px solid var(--naranja);transition:.22s}
.btn:hover{background:transparent;color:var(--naranja)}
.btn.ghost{background:transparent;color:var(--crema);border-color:var(--linea2)}
.btn.ghost:hover{border-color:var(--crema)}
.btn.dark{background:#11151E;color:var(--crema);border-color:#11151E}
.link{font-family:var(--caps);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--naranja)}

/* onda de sonido: divisor, progreso y reproductor */
.onda{display:flex;align-items:flex-end;gap:2px;height:26px}
.onda i{display:block;width:2px;background:var(--crema3);opacity:.55}
.onda.play i{background:var(--dorado);opacity:.35}
.onda.play i.on{background:var(--naranja);opacity:1}
.divisor{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:1.1rem 0}

/* sello */
.sello{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--caps);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--crema);background:rgba(17,21,30,.7);
  border:1px solid var(--linea2);padding:.35rem .6rem;backdrop-filter:blur(4px)}
.sello i{width:6px;height:6px;background:var(--naranja);font-style:normal}
.sello.abs{position:absolute;top:1rem;right:1rem;z-index:5}

/* ---------- hero: el retrato primero ---------- */
.hero{padding:clamp(2rem,4vw,3.4rem) 0 clamp(2.5rem,5vw,4rem)}
.hero .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .marca img{height:clamp(128px,17vw,248px);width:auto;margin-bottom:clamp(1.3rem,2.8vw,2.1rem)}
.hero h1{font-size:clamp(2.4rem,6.2vw,5.2rem);margin:.7rem 0 .9rem}
.hero .row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.2rem}
.hero .pieza video{width:100%;aspect-ratio:9/16;background:#0B0E14;border:1px solid var(--linea2);
  box-shadow:0 30px 70px rgba(0,0,0,.6)}
.pieza figcaption{color:var(--crema3);text-align:center}
.retrato{position:relative}
/* Firma de Andes Growers sobre la foto de Gardel: el logo solo, transparente,
   apoyado sobre la zona oscura del traje. Sin placa, sin borde y sin
   desenfoque: era un recuadro y se veia pegado encima de la foto.
   La sombra es minima y sirve de seguro si algun dia cambia el encuadre;
   sobre negro no se ve. */
/* La medida va en porcentaje de la foto, no en pixeles: asi el logo se apoya
   siempre en la misma zona del saco, cambie el tamano de la pantalla que sea.
   La franja oscura del saco sobre el borde derecho mide entre el 15 % y el 22 %
   del ancho de la foto, y solo existe por debajo del 60 % de la altura: de ahi
   salen estos numeros. */
/* La medida la lleva el figcaption, no la imagen: si el porcentaje va en la
   imagen, se calcula contra un contenedor que a su vez depende de la imagen y
   el bloque termina ocupando todo el ancho de la foto. */
.ag-firma{position:absolute;z-index:6;margin:0;padding:0;background:none;border:0;
  pointer-events:none;right:3.5%;bottom:3%;
  width:20%;min-width:92px;max-width:132px}
.ag-firma img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.6))}
.hero .retrato>img{width:100%;filter:contrast(1.05);
  mask-image:radial-gradient(120% 104% at 46% 34%,#000 58%,transparent 100%);
  -webkit-mask-image:radial-gradient(120% 104% at 46% 34%,#000 58%,transparent 100%)}
@media(max-width:860px){
  .hero .inner{grid-template-columns:1fr;gap:1.5rem}
  .hero .retrato{order:-1;max-width:360px}
  .hero .marca img{margin-bottom:1rem}
}

/* banda a sangre con el producto en la mesa */
.banda{position:relative;height:clamp(300px,42vw,520px);overflow:hidden}
.banda img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.banda .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.4rem,4vw,3rem) 0;
  background:linear-gradient(transparent,rgba(17,21,30,.92))}
.banda .cap p{margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,2.5vw,1.9rem);max-width:26ch;line-height:1.3}

/* ---------- intro ---------- */
.intro{text-align:center;padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.intro p{margin:0 auto;max-width:34ch;font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.45;color:var(--crema)}
.intro em{font-family:var(--serif);font-style:italic;color:var(--dorado)}

/* ---------- palabra grande: las dos épocas juntas, sin hover ---------- */
.palabra{text-align:center;padding-top:clamp(1rem,3vw,2rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
.par{display:block;line-height:.94}
.par .fila{display:flex;align-items:baseline;justify-content:center;gap:clamp(.6rem,1.6vw,1.2rem)}
.par .yr{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;flex-shrink:0;white-space:nowrap;
  transform:translateY(-.3em)}
.par .yr.a{color:var(--dorado)} .par .yr.b{color:var(--naranja)}
.par .a{font-family:var(--serif);font-weight:600;color:var(--dorado);text-transform:uppercase;white-space:nowrap}
.par .b{font-family:var(--hoy);color:var(--crema);text-transform:uppercase;letter-spacing:-.03em;white-space:nowrap}
.par .flecha{display:block;color:var(--naranja);font-size:.9rem;margin:.5rem 0 .35rem;opacity:.8}
.par.swap{animation:sw .55s ease both}
@keyframes sw{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.palabra .hint{margin-top:1.8rem;font-size:.85rem;color:var(--crema3)}
.puntos{display:flex;gap:.45rem;justify-content:center;margin-top:1.2rem}
.puntos button{width:22px;height:2px;background:var(--linea2);padding:0}
.puntos button.on{background:var(--naranja)}
@media(max-width:620px){.par .yr{display:none}}

/* ---------- la prueba ---------- */
.prueba{background:var(--pizarra);border:1px solid var(--linea);padding:clamp(1.5rem,3.5vw,2.6rem);
  display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:820px){.prueba{grid-template-columns:1fr}}
.prueba q,.prueba .q{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.8vw,2rem);
  line-height:1.28;margin:.8rem 0 1.3rem}
.player{display:flex;align-items:center;gap:1rem}
.player .pl{width:42px;height:42px;border-radius:50%;background:var(--naranja);color:#11151E;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
.player .t{font-family:var(--mono);font-size:.7rem;color:var(--crema3);margin-left:auto;white-space:nowrap}
.prueba .nota{color:var(--crema2);font-size:.95rem;margin:0}
.prueba .nota b{color:var(--naranja);font-weight:400;display:block;margin-top:.8rem}

/* ---------- mosaico ---------- */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--noche)}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--pizarra)}
.tile>img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;
  background:linear-gradient(transparent,rgba(17,21,30,.9))}
.tile .cap .impact{font-size:1.15rem;color:var(--crema)}
.tile .cap .serif{font-size:1.5rem;color:var(--dorado);font-style:italic}
.tile .cap .mono{font-family:var(--mono);font-size:1rem;color:var(--crema);letter-spacing:.05em}
@media(max-width:900px){.mosaico{grid-template-columns:repeat(2,1fr)}}

/* el tile lleva a algún lado: destino visible */
.tile .dest{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;font-family:var(--caps);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--naranja);
  opacity:.75;transition:opacity .25s,gap .25s}
.tile:hover .dest{opacity:1;gap:.7rem}
.tile>img{transition:transform .7s}
.tile:hover>img{transform:scale(1.04)}

/* paso del tiempo: un solo video, primero 1930 y despues 2026, mismo encuadre */
.tile .anos{position:absolute;top:.7rem;left:.7rem;z-index:3;display:flex;gap:.5rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em}
.tile .anos span{padding:.2rem .4rem;background:rgba(17,21,30,.6);backdrop-filter:blur(3px);
  opacity:.22;transition:opacity .6s}
.tile .anos .y30{color:var(--dorado)} .tile .anos .y26{color:var(--naranja)}
.tile[data-era="30"] .anos .y30,.tile[data-era="26"] .anos .y26{opacity:1}
.tile .barra{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(231,226,222,.12);z-index:3}
.tile .barra i{display:block;height:100%;width:0;background:var(--naranja);transition:width .25s linear}

/* ---------- secciones de vino ---------- */
.sechead{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;padding-bottom:1.1rem;
  border-bottom:1px solid var(--linea);margin-bottom:2rem}
.sechead .t{font-family:var(--caps);font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:.24em;text-transform:uppercase}
.sechead .s{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.9vw,1.35rem);color:var(--dorado)}
.sechead .r{margin-left:auto;font-size:.85rem;color:var(--crema3)}
.vinos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
@media(max-width:900px){.vinos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vinos{grid-template-columns:1fr}}
.vcard .ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--acero)}
.vcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vcard:hover .ph img{transform:scale(1.045)}
.vcard .nm{font-family:var(--caps);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;margin:1rem 0 .35rem}
.vcard .mt{font-family:var(--mono);font-size:.7rem;color:var(--crema3);letter-spacing:.05em}
.vcard .ds{font-size:.85rem;color:var(--crema2);margin:.5rem 0 0}
.nofoto{display:flex;align-items:center;justify-content:center;height:100%;padding:1.5rem;text-align:center;
  border:1px dashed var(--naranja);color:var(--naranja);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase}

.dest{display:grid;grid-template-columns:1fr 1fr;background:var(--pizarra);border:1px solid var(--linea);margin-top:2.5rem}
.dest .ph{position:relative;min-height:320px}
.dest .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dest .tx{padding:clamp(1.6rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
@media(max-width:820px){.dest{grid-template-columns:1fr}}

/* ---------- cita violeta ---------- */
.violeta{background:var(--violeta);padding:clamp(3rem,7vw,5.5rem) 0}
.violeta blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3.2vw,2.3rem);
  line-height:1.34;max-width:26ch}
.violeta cite{display:block;margin-top:1.4rem;font-family:var(--caps);font-style:normal;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(231,226,222,.65)}

/* ---------- ficha de vino ---------- */
.prod{display:grid;grid-template-columns:.9fr 1.1fr;min-height:70vh}
.prod .ph{position:relative;min-height:60vh;background:var(--acero)}
.prod .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod .tx{padding:clamp(1.8rem,4vw,4rem) clamp(1.5rem,4vw,4rem)}
.prod h1{font-size:clamp(2.6rem,6vw,5rem);margin:.5rem 0 1rem}
.prod .meta{font-family:var(--caps);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dorado)}
.prod .res{font-size:1.1rem;margin:0 0 2.2rem}
.tempbox{display:flex;align-items:flex-start;gap:1.2rem;margin:0 0 2.2rem;flex-wrap:wrap}
.tempbox .n{font-family:var(--hoy);font-size:clamp(2.6rem,6vw,4.6rem);color:var(--naranja);line-height:.9;letter-spacing:-.03em}
.tempbox .d{font-size:.85rem;color:var(--crema3);max-width:16ch;padding-top:.4rem}
.sep{height:1px;background:var(--linea);margin:2rem 0}
.cta2{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.ml-nota{margin:.9rem 0 0;font-size:.78rem;line-height:1.5;color:var(--crema3)}
.dtgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,4vw,3rem);margin-top:1.2rem}
.dtgrid .row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--linea);font-size:.85rem}
.dtgrid .row span:first-child{font-family:var(--caps);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crema3)}
.dtgrid .row span:last-child{font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:900px){.prod{grid-template-columns:1fr}.prod .ph{min-height:0;aspect-ratio:4/3}.dtgrid{grid-template-columns:1fr}}
.palabra-etiqueta{background:var(--pizarra);padding:clamp(2.5rem,5vw,4rem) 0}
.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(max-width:820px){.pe-grid{grid-template-columns:1fr}}
.pe-grid .big{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,7vw,5.2rem);color:var(--dorado);
  text-transform:uppercase;line-height:.92}
.pe-grid blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.4}
.pe-grid cite{display:block;margin-top:.9rem;font-family:var(--caps);font-style:normal;font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--crema3)}

/* ---------- diccionario ---------- */
.dic-top{padding-top:clamp(2.5rem,5vw,4rem)}
.dic-hero{display:grid;grid-template-columns:1fr minmax(280px,400px);
  gap:clamp(1.8rem,5vw,4rem);align-items:center}
.dic-hero .pieza-info{margin-top:clamp(1.8rem,4vw,2.8rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--linea)}
.dic-hero .pieza-info .pt{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.1rem,2.2vw,1.55rem);line-height:1.32;margin:.7rem 0 0}
@media(max-width:860px){
  .dic-hero{grid-template-columns:1fr;gap:1.8rem}
  .dic-hero .pieza{order:-1;max-width:340px;margin:0 auto}
}
.dic-top h1{font-size:clamp(2.4rem,6.4vw,4.6rem)}
.buscador{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.4rem 0;margin-top:1.6rem;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.buscador label{font-size:.95rem;color:var(--crema3);white-space:nowrap}
.buscador input{flex:1;border:0;background:none;color:var(--crema);font-family:var(--sans);font-size:1rem;padding:.2rem 0}
.buscador input:focus{outline:none}
.buscador .cnt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema3);white-space:nowrap}
@media(max-width:700px){.buscador .cnt{white-space:normal;flex-basis:100%}.buscador input{min-width:0}}
.dic-body{display:grid;grid-template-columns:290px 1fr;min-height:60vh}
.dic-body>*{min-width:0}
@media(max-width:900px){.dic-body{grid-template-columns:1fr}}
.dic-list{border-right:1px solid var(--linea)}
@media(min-width:901px){
  .dic-list{position:sticky;top:84px;max-height:calc(100vh - 120px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--linea2) transparent}
  .dic-list::-webkit-scrollbar{width:4px}
  .dic-list::-webkit-scrollbar-thumb{background:var(--linea2)}
}
.dic-list button{display:block;width:100%;text-align:left;padding:1.1rem clamp(1.2rem,3vw,2rem) 1.1rem 0;
  border-bottom:1px solid var(--linea);border-left:2px solid transparent}
.dic-list button.on{background:var(--pizarra);border-left-color:var(--naranja)}
.dic-list .w{display:block;font-family:var(--serif);font-weight:600;font-size:1.6rem;color:var(--dorado);
  text-transform:uppercase;line-height:1}
.dic-list .h{display:block;font-family:var(--hoy);font-size:.82rem;text-transform:uppercase;
  letter-spacing:-.01em;margin-top:.35rem}
.dic-entry{padding:clamp(1.5rem,3.5vw,3rem) 0 clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,3.5rem)}
.dic-volver{display:none}
@media(max-width:900px){
  .dic-volver{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .95rem;
    margin:0 0 1.1rem;border:1px solid var(--linea2);font-family:var(--caps);font-size:.72rem;
    letter-spacing:.13em;text-transform:uppercase;color:var(--crema2);background:var(--pizarra)}
  .dic-entry{border-top:1px solid var(--linea2);margin-top:.4rem}
  .dic-entry .term{font-size:clamp(2.4rem,13vw,4rem)}
}
@media(max-width:900px){.dic-entry{padding-left:0}.dic-list{border-right:0}}
.dic-entry .head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.dic-entry .head .ln{flex:1;height:1px;background:var(--linea);min-width:20px}
.dic-entry .term{font-family:var(--serif);font-weight:600;font-size:clamp(3rem,9vw,7rem);color:var(--dorado);
  text-transform:uppercase;line-height:.95;margin:1rem 0 .8rem}
.dic-entry .sig{font-size:1.1rem;margin:0 0 2rem}
.pruebabox{background:var(--pizarra);padding:clamp(1.3rem,3vw,2.2rem);margin-bottom:2.2rem}
/* el reproductor de Spotify de la palabra */
.sp-track{margin-top:1.3rem}
.sp-track iframe{display:block;border:0;border-radius:12px;width:100%;min-height:152px;
  background:var(--acero);color-scheme:dark}
.sp-track .sp-nota{margin-top:.6rem;color:var(--crema3);font-size:.6rem;letter-spacing:.16em}
@media(max-width:700px){.sp-track .sp-nota{font-size:.72rem;letter-spacing:.13em}}

/* el tango de la palabra, en Spotify */
.btn-sp{display:inline-flex;align-items:center;gap:.85rem;margin-top:1.3rem;
  padding:.7rem 1.1rem .7rem .85rem;border:1px solid var(--linea2);background:var(--noche);
  transition:.2s;max-width:100%}
.btn-sp:hover{border-color:var(--dorado)}
.btn-sp .ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:var(--dorado);color:#11151E;font-size:.78rem;padding-left:2px}
.btn-sp span span,.btn-sp>span:last-child{display:block;min-width:0}
.btn-sp b{display:block;font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.18rem);
  color:var(--crema);font-weight:400;line-height:1.25}
.btn-sp i{display:block;font-style:normal;font-family:var(--caps);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--crema3);margin-top:.25rem}
/* el video de la palabra */
.dic-video{margin-top:clamp(1.6rem,3.5vw,2.4rem)!important;max-width:330px}
.dic-video video{width:100%;aspect-ratio:9/16;background:#0B0E14;border:1px solid var(--linea2);
  box-shadow:0 24px 60px rgba(0,0,0,.55);display:block}
.dic-video figcaption{margin-top:.7rem;text-align:center}
.dic-trad{margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.dic-ret{max-width:360px;margin-left:auto!important}
@media(max-width:900px){.dic-ret{display:none}}
.pruebabox.falta{background:transparent;border:1px dashed var(--linea2)}
.pruebabox .nt{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--linea);
  font-size:.82rem;color:var(--crema3);max-width:56ch}
.player.esp .pl{background:transparent;border:1px solid var(--naranja);color:var(--naranja)}
.player.esp .onda i{opacity:.28}
.player.esp .t{color:var(--naranja);font-family:var(--caps);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.tags .est.verso{border-color:rgba(194,171,144,.5);color:var(--dorado)}
.tags .est.vacante{border-color:var(--naranja);color:var(--naranja)}
.dic-list .mk{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em}
.dic-list .mk.verso{color:var(--crema3)}
.dic-list .mk.vacante{color:var(--naranja);text-transform:uppercase;letter-spacing:.14em}
.buscador .cnt .cv{color:var(--dorado)}
.buscador .cnt .cvac{color:var(--naranja)}
.pruebabox.falta p:not(.k):not(.nt){color:var(--crema3);font-size:.92rem;max-width:52ch}
.dic-cols{display:grid;grid-template-columns:1.7fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:760px){.dic-cols{grid-template-columns:1fr}}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.tags span{font-family:var(--caps);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--linea2);padding:.35rem .7rem;color:var(--crema2)}
.pieza video{width:100%;aspect-ratio:9/16;background:#0B0E14;border:1px solid var(--linea2);
  box-shadow:0 30px 70px rgba(0,0,0,.6)}
.pieza figcaption{color:var(--crema3);text-align:center}
.retrato{position:relative}
.retrato>img{width:100%}
.retrato .nm{position:absolute;left:1rem;bottom:1rem;font-family:var(--serif);font-style:italic;
  font-size:1.5rem;color:var(--dorado)}


/* Presentacion de la solapa Vinos. En pantalla ancha va en dos columnas: en una
   sola dejaba media pantalla vacia y empujaba las botellas abajo del pliegue.
   En celular se apila y queda en el mismo orden de lectura. */
.v-intro{margin:0 0 clamp(2.2rem,4.5vw,3.2rem)}
.v-intro>div>p:last-child{margin-bottom:0}
.v-intro p{margin:0 0 1rem;color:var(--crema2);line-height:1.65;max-width:60ch;
  font-size:clamp(.98rem,1.35vw,1.1rem)}
.v-intro p.uno{color:var(--crema);line-height:1.55;font-size:clamp(1.05rem,1.7vw,1.28rem)}
.v-intro p.v-prod{max-width:none;margin:1.3rem 0 0;padding-top:1rem;border-top:1px solid var(--linea);
  font-family:var(--caps);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dorado)}
@media(max-width:700px){.v-intro p.v-prod{font-size:.74rem;letter-spacing:.15em}}

/* ---------- dónde comprar ---------- */
.dc-head{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem);
  display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:end}
@media(max-width:900px){.dc-head{grid-template-columns:1fr}}
.dc-head h1{font-size:clamp(3rem,9.5vw,7rem)}

.dc-filtro{padding-bottom:clamp(1.4rem,3vw,2rem)}
.dc-filtro .chips{gap:.45rem;margin-top:.9rem}
.dc-filtro .chips button{font-family:var(--caps);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--crema2);border:1px solid var(--linea2);
  padding:.6rem .95rem;transition:.2s;white-space:nowrap}
.dc-filtro .chips button:hover{border-color:var(--crema3)}
.dc-filtro .chips button.on{background:var(--dorado);border-color:var(--dorado);color:#11151E}
@media(max-width:700px){.dc-filtro .chips button{font-size:.74rem;min-height:44px}}

.dcard{border-top:1px solid var(--linea2);padding:clamp(1.4rem,3vw,2.1rem) 0;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.2rem,3vw,2.6rem)}
.dcard:last-of-type{border-bottom:1px solid var(--linea2)}
@media(max-width:820px){.dcard{grid-template-columns:1fr;gap:1rem}}
.dcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.6vw,1.95rem);
  color:var(--crema);margin:0;line-height:1.15}
.dcard .z{font-family:var(--caps);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dorado);margin:.55rem 0 0;max-width:34ch}
@media(max-width:700px){.dcard .z{font-size:.74rem;letter-spacing:.12em}}
.dcard .sucs{display:grid;gap:1.05rem}
.dcard .suc .k{color:var(--crema3)}
.dcard .suc .dir{margin:.35rem 0 0;font-size:.96rem;color:var(--crema2);line-height:1.45}
.dcard .suc .hor{margin:.25rem 0 0;font-size:.88rem;color:var(--crema3)}
.dcard .suc .tel{margin:.3rem 0 0}
.dcard .suc .tel a{font-family:var(--mono);font-size:.92rem;color:var(--crema);letter-spacing:.02em}
.dcard .suc .tel a:hover{color:var(--dorado)}
.dcard footer{grid-column:1 / -1;display:flex;gap:1.6rem;flex-wrap:wrap;
  padding-top:.9rem;margin-top:.2rem;border-top:1px solid var(--linea)}
@media(max-width:700px){.dcard footer{gap:.5rem 1.2rem}.dcard footer .link{min-height:40px;display:flex;align-items:center}}
/* en celular el telefono se toca para llamar: necesita area propia */
@media(max-width:700px){
  .dcard .suc .tel{margin-top:.45rem}
  .dcard .suc .tel a{display:inline-flex;align-items:center;min-height:44px;
    padding:0 .8rem;border:1px solid var(--linea2);font-size:.95rem}
  .dcard .suc .dir{font-size:1rem}
  .dcard .sucs{gap:1.4rem}
}

/* ---------- bodega ---------- */
/* declaracion firmada de la Fundacion */
.banda-f{background:var(--pizarra2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:clamp(2.6rem,6vw,4.8rem) 0}
.dos{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.6rem,5vw,4.5rem);align-items:start}
.dos>*{min-width:0}
@media(max-width:900px){.dos{grid-template-columns:1fr;gap:1.4rem}}
.decl-h{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--dorado);
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.1;margin:.9rem 0 0;letter-spacing:-.01em}
.decl-firma{font-family:var(--caps);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--crema3);margin:1.1rem 0 0;line-height:1.7}
.decl-firma::before{content:"— "}
.decl-r p{font-size:clamp(.98rem,1.4vw,1.1rem);color:var(--crema2);line-height:1.65;margin:0 0 1rem;max-width:64ch}
.decl-r p.uno{color:var(--crema)}
.decl-cierre{font-family:var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--dorado);
  font-size:clamp(1rem,1.9vw,1.42rem);line-height:1.4;margin:1.8rem 0 0;padding-top:1.5rem;
  border-top:1px solid var(--linea)}

.ag-head{padding-top:clamp(2.2rem,4.5vw,3.6rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.ag-top{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,4.5vw,4rem);align-items:center}
.ag-top>*{min-width:0}
@media(max-width:900px){.ag-top{grid-template-columns:1fr;gap:1.5rem}}
.ag-marca{width:clamp(180px,20vw,268px);height:auto;display:block;margin-bottom:clamp(1.2rem,2.6vw,1.9rem)}
/* la frase eje: se baja de escala y se le fija una medida de lectura.
   Antes iba a 2,9rem y salian seis lineas cortas y desparejas. */
.ag-lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.1vw,1.7rem);
  color:var(--crema);line-height:1.42;margin:0;letter-spacing:0;max-width:40ch;text-wrap:pretty}
.ag-cierre{font-family:var(--serif);font-style:italic;color:var(--dorado);
  font-size:clamp(1rem,1.7vw,1.3rem);line-height:1.38;margin:1.3rem 0 0;max-width:34ch;
  padding-top:1.2rem;border-top:1px solid var(--linea)}
.ag-foto img{width:100%;display:block;object-fit:cover;filter:saturate(.82) contrast(1.04)}
.ag-top .ag-foto img{aspect-ratio:4/3}
.ag-foto figcaption{margin-top:.7rem}
@media(max-width:900px){.ag-top .ag-foto{order:-1}}

.ag-abajo{margin-top:clamp(1.8rem,4vw,3rem);display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
@media(max-width:900px){.ag-abajo{grid-template-columns:1fr;gap:1.6rem}}
.ag-barricas img{aspect-ratio:3/4}
@media(max-width:900px){.ag-barricas{max-width:340px}}
.ag-dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.ag-dl>div{grid-template-columns:7rem 1fr;display:grid;gap:1.1rem;align-items:baseline}
@media(max-width:560px){.ag-dl>div{grid-template-columns:1fr;gap:.35rem}}
.ag-dl>div{padding:1.05rem 0;border-top:1px solid var(--linea2)}
.ag-dl>div:last-child{border-bottom:1px solid var(--linea2)}
.ag-dl b{font-family:var(--hoy);text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1rem,1.7vw,1.22rem);color:var(--crema)}
.ag-dl span{font-size:clamp(.94rem,1.3vw,1.04rem);color:var(--crema2);line-height:1.55}

/* placa de la Fundacion: su logo va en negro sobre fondo claro, la unica
   version autorizada por su manual para este uso. No se recolorea ni se invierte. */
.fund-placa{background:#fff;padding:clamp(1.1rem,2.5vw,1.6rem);margin-top:1.4rem;
  display:inline-flex;max-width:260px}
.fund-placa img{width:100%;height:auto;display:block}
@media(max-width:900px){.fund-placa{max-width:200px;margin-top:1.1rem}}

.bod-cierre{padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.bod-h2{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--dorado);
  line-height:1.15;margin:.7rem 0 0}

/* ---------- trade ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  border-top:1px solid var(--linea);border-left:1px solid var(--linea);margin-top:1.5rem}
.rejilla div{padding:1.2rem;min-height:96px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.caja{border:1px solid var(--linea);background:var(--pizarra);padding:clamp(1.4rem,3vw,2.4rem)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}
dl.cont{margin:1.4rem 0 0;display:grid;gap:1.1rem}
dl.cont dt{font-family:var(--caps);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--naranja)}
dl.cont dd{margin:.25rem 0 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--linea);padding:3.2rem 0 0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
@media(max-width:820px){.f-grid{grid-template-columns:1fr;gap:1.6rem}}
.f-marca .f-gw{height:64px;width:auto;margin-bottom:1rem;display:block}
.f-ag{margin-top:1.1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.f-ag .k{font-size:.56rem;letter-spacing:.24em;color:var(--crema3)}
.f-ag img{width:150px;height:auto;display:block}
.f-col h4{font-family:var(--caps);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crema3);margin:0 0 1rem;font-weight:500}
.f-col a,.f-col p{display:block;font-size:.88rem;color:var(--crema2);margin:0 0 .55rem}
.f-col a:hover{color:var(--crema)}
.legalbar{margin-top:3rem;border-top:1px solid var(--linea);padding:1.2rem 0;display:flex;gap:2rem;
  justify-content:space-between;flex-wrap:wrap;align-items:center}
.legalbar .w{font-family:var(--caps);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;margin:0;
  display:flex;gap:2rem;flex-wrap:wrap}
.legalbar .c{font-size:.72rem;color:var(--crema3);margin:0}

/* ---------- barra fija mobile ---------- */
.stickybar{display:none}
@media(max-width:700px){
  .stickybar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80}
  .stickybar a{padding:.72rem .6rem;text-align:center;font-family:var(--caps);font-size:.68rem;
    letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;
    align-items:center;justify-content:center;line-height:1.1}
  .stickybar a:first-child{background:var(--naranja);color:#11151E}
  .stickybar a:last-child{background:var(--pizarra);color:var(--crema)}
  main{padding-bottom:0}
}

/* ---------- age gate ---------- */
#gate{position:fixed;left:0;top:0;width:100%;height:100vh;height:100dvh;z-index:200;
  background:var(--noche);display:grid;grid-template-columns:1fr 1fr;overflow-y:auto;-webkit-overflow-scrolling:touch}
#gate .ph{position:relative;overflow:hidden}
#gate .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
#gate .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--noche),transparent 45%)}
#gate .tx{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.5rem,5vw,4.5rem);padding-bottom:calc(clamp(1.5rem,5vw,4.5rem) + 3.4rem)}
#gate .wordmark2{margin-bottom:2.5rem}
#gate .wordmark2 img{height:clamp(120px,11vw,164px);width:auto;margin-bottom:1rem}
#gate .gate-ag{margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:clamp(1rem,2.2vw,1.4rem);
  border-top:1px solid var(--linea);display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
#gate .gate-ag .k{font-size:.58rem;letter-spacing:.24em;color:var(--crema3)}
#gate .gate-ag img{width:clamp(122px,12vw,168px);height:auto;display:block}
#gate .rule{width:64px;height:1px;background:var(--linea2);margin:0 0 2.2rem}
#gate h2{font-size:clamp(1.2rem,2.4vw,1.6rem);font-family:var(--sans);font-weight:300;margin-bottom:1.8rem}
#gate .row{display:flex;gap:.9rem;flex-wrap:wrap}
#gate .fine{margin-top:1.8rem;max-width:42ch}
#gate .deny{display:none;margin-top:1.2rem;color:var(--naranja);font-size:.9rem}
#gate .bar{position:absolute;left:0;right:0;bottom:0;height:auto;border-top:1px solid var(--linea);
  padding:1rem clamp(1.5rem,5vw,4.5rem);display:flex;gap:2.5rem;justify-content:center;
  font-family:var(--caps);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dorado)}
@media(max-width:820px){
  /* Una sola columna en flujo normal: foto arriba, texto abajo, leyenda al final.
     Nada de filas fijas en vh: el bloque de texto se cortaba y se superponía a la foto. */
  #gate{display:flex;flex-direction:column;grid-template-columns:none;grid-template-rows:none}
  #gate .ph{order:-1;flex:0 0 auto;height:30vh;min-height:150px;max-height:260px}
  #gate .ph::after{background:linear-gradient(0deg,var(--noche),transparent 55%)}
  #gate .tx{flex:1 0 auto;justify-content:center;padding:1.8rem clamp(1.2rem,5vw,2rem) 1.6rem}
  #gate .wordmark2{margin-bottom:1.4rem}
  #gate .wordmark2 img{height:82px}
  #gate .gate-ag{margin-top:1.1rem;padding-top:.9rem;gap:.4rem}
  #gate .gate-ag .k{font-size:.72rem;letter-spacing:.16em}
  #gate .gate-ag img{width:128px}
  #gate .rule{margin:0 0 1.4rem}
  #gate h2{font-size:1.35rem;margin-bottom:1.4rem}
  #gate .fine{margin-top:1.3rem;max-width:none}
  #gate .bar{position:static;flex:0 0 auto;justify-content:flex-start;gap:.5rem 1.4rem;
    margin-top:0;flex-wrap:wrap;padding:1rem clamp(1.2rem,5vw,2rem);font-size:.7rem;letter-spacing:.12em}
}
   entren sin scrollear — es texto obligatorio, no puede quedar abajo del pliegue */
@media(max-width:360px){
  #gate .ph{height:22vh;min-height:120px;max-height:170px}
  #gate .tx{padding:1.3rem 1.2rem 1.1rem}
  #gate .wordmark2{margin-bottom:1rem}
  #gate .wordmark2 img{height:66px}
  #gate .gate-ag{margin-top:.9rem;padding-top:.75rem}
  #gate .gate-ag img{width:112px}
  #gate .rule{margin:0 0 1rem}
  #gate h2{font-size:1.22rem;margin-bottom:1.1rem}
  #gate .row{gap:.6rem}
  #gate .btn{padding:.85rem 1.1rem}
  #gate .fine{margin-top:1rem;font-size:.82rem}
  #gate .bar{padding:.85rem 1.2rem;gap:.35rem 1rem;font-size:.66rem;letter-spacing:.1em}
}

/* pantallas bajas (menos de 700 px de alto): la firma de Andes Growers sumo
   altura a la puerta y la leyenda obligatoria se iba de pantalla. Se compacta
   el bloque y la firma pasa a una sola linea. */
@media(max-width:820px) and (max-height:700px){
  #gate .ph{height:16vh;min-height:88px;max-height:124px}
  #gate .tx{padding-top:1.1rem;padding-bottom:.9rem}
  #gate .wordmark2{margin-bottom:.8rem}
  #gate .wordmark2 img{height:62px}
  #gate .rule{margin:0 0 .8rem}
  #gate h2{font-size:1.16rem;margin-bottom:.9rem}
  #gate .fine{margin-top:.8rem;font-size:.82rem}
  #gate .gate-ag{margin-top:.8rem;padding-top:.7rem;flex-direction:row;align-items:center;gap:.6rem}
  #gate .gate-ag .k{font-size:.72rem;letter-spacing:.13em}
  #gate .gate-ag img{width:100px}
  #gate .bar{padding:.7rem clamp(1.2rem,5vw,2rem)}
}
/* el caso mas ajustado: pantalla angosta Y baja (iPhone SE de 320x568).
   Necesitaba 33 px mas de los que tiene, y la leyenda legal es obligatoria. */
@media(max-width:400px) and (max-height:600px){
  #gate .ph{height:13vh;min-height:70px;max-height:92px}
  #gate .tx{padding-top:.9rem;padding-bottom:.75rem}
  #gate .wordmark2{margin-bottom:.6rem}
  #gate .wordmark2 img{height:52px}
  #gate .rule{display:none}
  #gate h2{font-size:1.08rem;margin-bottom:.75rem}
  #gate .fine{margin-top:.65rem;font-size:.8rem}
  #gate .gate-ag{margin-top:.65rem;padding-top:.55rem}
  #gate .gate-ag img{width:88px}
  #gate .bar{padding:.6rem 1.2rem}
}

/* apaisado: sin foto y con la firma en linea */
@media(max-width:900px) and (max-height:520px){
  #gate .gate-ag{margin-top:.6rem;padding-top:.55rem;flex-direction:row;align-items:center;gap:.55rem}
  #gate .gate-ag img{width:94px}
  #gate .fine{margin-top:.7rem}
}

/* 360 px o menos: se compacta para que las DOS lineas de la leyenda de la Ley 24.788

/* pantallas bajas (celular apaisado, ventana chica): se compacta todo el bloque */
@media(max-height:560px){
  #gate .wordmark2{margin-bottom:.9rem}
  #gate .wordmark2 img{height:56px}
  #gate .gate-ag{margin-top:.7rem;padding-top:.6rem}
  #gate .gate-ag img{width:104px}
  #gate .rule{margin:0 0 .9rem}
  #gate h2{font-size:1.2rem;margin-bottom:1rem}
  #gate .fine{margin-top:.9rem}
  #gate .tx{padding-top:1.1rem;padding-bottom:calc(1.1rem + 3rem)}
}
/* celular apaisado: la foto se retira y el texto entra sin scrollear */
@media(max-width:900px) and (max-height:520px){
  #gate .ph{display:none}
  #gate{display:flex;flex-direction:column;grid-template-columns:none}
  #gate .bar{position:static;flex:0 0 auto;justify-content:flex-start;gap:.4rem 1.4rem;
    flex-wrap:wrap;padding:.8rem clamp(1.2rem,5vw,2rem);font-size:.7rem;letter-spacing:.12em}
  #gate .tx{flex:1 0 auto;padding-bottom:1.1rem}
}


/* ==================== LA MÚSICA ==================== */
.mus-head{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(1.2rem,2.5vw,1.8rem)}
.mus-head h1{font-size:clamp(2.2rem,7.5vw,5.8rem);margin:.9rem 0 1rem;max-width:20ch}
.mus-head .lede{max-width:50ch}

/* LA PRUEBA — el mismo vino, dos músicas */
.prueba-x{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:clamp(2rem,4.5vw,3.2rem) 0;text-align:center}
.sw{display:inline-flex;border:1px solid var(--linea2);margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.sw button{padding:.75rem 1.3rem;font-family:var(--caps);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crema3);transition:.25s;white-space:nowrap}
.sw button.on{background:var(--naranja);color:#11151E}
@media(max-width:520px){.sw{flex-direction:column;width:100%}.sw button{width:100%}}
.px-vino{font-family:var(--caps);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--crema3);margin:0 0 .9rem}
.px-word{position:relative;min-height:1.05em}
.px-word span{display:block;font-family:var(--hoy);text-transform:uppercase;letter-spacing:-.035em;
  line-height:.95;transition:opacity .4s,transform .4s}
.px-word .a{color:var(--naranja)}
.px-word .b{color:var(--crema);position:absolute;inset:0}
.px-word.b-on .a{opacity:0;transform:translateY(-24%)}
.px-word.b-on .b{opacity:1;transform:none}
.px-word:not(.b-on) .b{opacity:0;transform:translateY(24%)}
.px-barra{max-width:520px;margin:clamp(1.6rem,3.5vw,2.2rem) auto 0;height:3px;background:var(--linea);position:relative}
.px-barra i{display:block;height:100%;background:var(--naranja);transition:width .5s cubic-bezier(.6,0,.2,1)}
.px-pie{margin:1.1rem auto 0;max-width:56ch;font-size:.9rem;color:var(--crema2)}
.px-pie b{color:var(--naranja);font-weight:400}
details.fuentes{margin-top:1.4rem;text-align:left;max-width:80ch;margin-left:auto;margin-right:auto}
details.fuentes summary{cursor:pointer;list-style:none;font-family:var(--caps);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--crema3);display:inline-flex;gap:.5rem}
details.fuentes summary::-webkit-details-marker{display:none}
details.fuentes summary::after{content:"+";color:var(--naranja)}
details.fuentes[open] summary::after{content:"–"}
details.fuentes ol{margin:1rem 0 0;padding-left:1.3rem}
details.fuentes li{font-size:.74rem;line-height:1.6;color:var(--crema3);margin-bottom:.6rem}

/* ELEGÍ TU VINO — el maridaje, interactivo */
.sel{padding-top:clamp(2.2rem,5vw,3.4rem);padding-bottom:clamp(2.2rem,5vw,3.4rem)}
.sel .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 clamp(1.6rem,3.5vw,2.4rem)}
.sel .chips button{border:1px solid var(--linea2);padding:.6rem 1rem;font-family:var(--caps);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema2);transition:.22s}
.sel .chips button:hover{border-color:var(--crema3)}
.sel .chips button.on{background:var(--dorado);border-color:var(--dorado);color:#11151E}
.tarj{border:1px solid var(--linea);background:var(--pizarra);padding:clamp(1.6rem,4vw,2.8rem);
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
@media(max-width:760px){.tarj{grid-template-columns:1fr}}
.tarj .tg{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,5vw,3.4rem);
  line-height:1.05;margin:.4rem 0 .7rem;color:var(--dorado)}
.tarj .pq{margin:0;font-size:.98rem;color:var(--crema2);max-width:46ch}
.tarj.fade-in{animation:tj .45s ease both}
@keyframes tj{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* reproductor */
.copa{padding-bottom:clamp(2.2rem,4.5vw,3.2rem)}
.sp-panel{border:1px solid var(--linea);background:var(--pizarra2);padding:clamp(1.5rem,3.5vw,2.4rem);
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.sp-panel img{height:52px;width:auto}
.sp-panel .tx{flex:1;min-width:200px}
.sp-panel h3{font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.45rem)}
.sp-panel p{margin:.3rem 0 0;font-size:.85rem;color:var(--crema3)}
.sp-panel .play{display:inline-flex;align-items:center;gap:.6rem}
.sp-panel .play .tri{width:30px;height:30px;border-radius:50%;background:var(--naranja);color:#11151E;
  display:flex;align-items:center;justify-content:center;font-size:.75rem}
.sp-frame{border:1px solid var(--linea)}
.sp-frame iframe{display:block;width:100%;height:352px;border:0}
@media(max-width:560px){.sp-frame iframe{height:400px}}

/* la nota */
.nota-wrap{background:var(--papel);color:var(--tinta);padding:clamp(2.2rem,5vw,3.4rem) 0}
.nota-wrap .k{color:var(--tan-profundo)}
.nota-corta{max-width:56ch}
.nota-corta p{font-family:var(--serif);font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.6;margin:0 0 .9rem;color:#20242C}
.nota-corta p.uno{font-size:clamp(1.18rem,2.4vw,1.58rem);line-height:1.42}
.nota-corta em{font-style:italic;color:var(--tan-profundo)}
.firma{max-width:56ch;margin:1.4rem 0 0;padding-top:.9rem;border-top:1px solid rgba(24,28,36,.28)}
.firma .n{font-family:var(--caps);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase}
.firma .r{font-size:.72rem;color:var(--tinta2);margin-top:.25rem}
details.completa{max-width:60ch;margin:1.4rem 0 0}
details.completa summary{cursor:pointer;list-style:none;font-family:var(--caps);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tan-profundo);display:inline-flex;gap:.5rem}
details.completa summary::-webkit-details-marker{display:none}
details.completa summary::after{content:"+"}
details.completa[open] summary::after{content:"–"}
details.completa .cuerpo{margin-top:1.2rem}
details.completa .cuerpo p{font-family:var(--serif);font-size:.95rem;line-height:1.66;margin:0 0 .9rem;color:#2A2E37}
details.completa .cuerpo em{font-style:italic;color:var(--tan-profundo)}

/* QR */
.firma-sec{text-align:center;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.firma-sec .cl{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--dorado)}

/* modulo de maridaje en la ficha */
.mar-mod{margin-top:2rem;padding:clamp(1.1rem,2.4vw,1.6rem);
  background:linear-gradient(150deg,var(--acero),var(--pizarra2));border:1px solid var(--linea)}
.mar-mod .tg{font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);margin:.5rem 0 .5rem;color:var(--dorado)}
.mar-mod .pq{margin:0;font-size:.86rem;color:var(--crema2);line-height:1.5}

/* banda en el home */
.mesa-band{background:var(--pizarra2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.mesa-band .in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(max-width:820px){.mesa-band .in{grid-template-columns:1fr}}
.mesa-band .q{font-family:var(--hoy);text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(1.5rem,4vw,2.6rem);line-height:1.02;margin:.9rem 0 0}

/* ---------- modo revisión ---------- */
.pend{position:relative}
body.review .pend{outline:1px dashed var(--naranja);outline-offset:4px}
body.review .pend::after{content:attr(data-pend);position:absolute;top:-8px;left:-4px;transform:translateY(-100%);
  background:var(--naranja);color:#11151E;font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.14rem .42rem;white-space:nowrap;z-index:40;pointer-events:none;font-weight:500}
#reviewBtn{position:fixed;right:.9rem;bottom:.9rem;z-index:120;border:1px solid var(--linea2);
  background:rgba(26,32,48,.94);backdrop-filter:blur(8px);padding:.55rem .85rem;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crema3);font-family:var(--caps)}
#reviewBtn.on{border-color:var(--naranja);color:var(--naranja)}
@media(max-width:700px){#reviewBtn{bottom:52px}}

.fade{animation:f .7s ease both}
@keyframes f{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ==========================================================================
   AJUSTES PARA CELULAR — legibilidad de tipografía chica, áreas de toque
   de 44 px y titulares que no se cortan en pantallas de 320 px.
   ========================================================================== */
@media(max-width:700px){
  /* --- contraste: los dos grises que no llegaban a 4.5:1 en pantalla chica --- */
  :root{--crema3:#808A9C;      /* era #6B7484 = 3.45:1 · ahora 4.67-5.25:1 */
        --tan-profundo:#725636} /* era #8A6A45 = 3.96:1 sobre papel · ahora 5.40:1 */

  /* --- tipografía chica: nada por debajo de 11.5 px --- */
  .k{font-size:.74rem;letter-spacing:.2em}
  nav a{font-size:.82rem;letter-spacing:.16em}
  .lang{font-size:.86rem;letter-spacing:.1em;gap:.2rem}
  .wordmark span{font-size:.65rem;letter-spacing:.24em}
  .sello{font-size:.67rem;letter-spacing:.13em;padding:.4rem .62rem}
  .btn,.link{font-size:.77rem;letter-spacing:.14em}
  .f-col h4{font-size:.72rem}
  .f-col a,.f-col p{font-size:.94rem}
  .legalbar .w{font-size:.72rem;letter-spacing:.11em;gap:.9rem}
  .legalbar .c{font-size:.8rem}
  .chips span{font-size:.78rem;padding:.45rem .8rem}
  .sw button{font-size:.72rem;letter-spacing:.13em}
  .px-vino{font-size:.74rem;letter-spacing:.2em}
  .stickybar a{font-size:.74rem;letter-spacing:.12em}
  dl.cont dt{font-size:.74rem;letter-spacing:.14em}
  details.fuentes summary,details.completa summary{font-size:.74rem;letter-spacing:.13em}
  .wordmark span{font-size:.72rem;letter-spacing:.2em}
  .sello{font-size:.72rem;letter-spacing:.11em}
  .player .t,.player.esp .t{font-size:.76rem;letter-spacing:.11em}
  .tile .dest{font-size:.74rem;letter-spacing:.12em}
  .tile .anos span{font-size:.74rem;letter-spacing:.08em}
  .vcard .mt{font-size:.78rem;letter-spacing:.03em}
  .violeta cite,.pe-grid cite{font-size:.76rem;letter-spacing:.11em}
  .sel .chips button{font-size:.78rem;letter-spacing:.11em;min-height:46px;padding:.7rem 1rem}
  .buscador .cnt{font-size:.78rem;letter-spacing:.1em}
  .btn-sp i{font-size:.72rem;letter-spacing:.14em}
  .btn-sp{padding:.75rem 1rem .75rem .8rem;gap:.75rem}
  .dic-list .mk{font-size:.74rem;letter-spacing:.06em}
  .dic-list .mk.vacante{letter-spacing:.1em}
  .tags span{font-size:.74rem;letter-spacing:.12em;padding:.45rem .75rem}
  .dtgrid .row span:first-child{font-size:.76rem;letter-spacing:.13em}
  /* los puntos del comparador de épocas: la marca queda fina, el área de toque sube a 44 px */
  .puntos{gap:0}
  .puntos button{width:44px;height:44px;background:transparent;display:flex;align-items:center;justify-content:center}
  .puntos button::before{content:"";width:26px;height:2px;background:var(--linea2)}
  .puntos button.on{background:transparent}
  .puntos button.on::before{background:var(--naranja);height:3px}
  #reviewBtn{font-size:.74rem;letter-spacing:.11em;min-height:44px;padding:.6rem 1rem}
  .decl-firma{font-size:.74rem;letter-spacing:.13em}

  /* el buscador del diccionario: en celular necesita ser un campo visible y tocable */
  .buscador{gap:.6rem;padding:1.2rem 0}
  .buscador label{flex-basis:100%;font-size:.92rem}
  .buscador input{flex-basis:100%;min-height:50px;border:1px solid var(--linea2);
    background:var(--pizarra);padding:.6rem .9rem;font-size:1rem}
  .buscador input:focus{outline:none;border-color:var(--dorado)}

  /* que el foco o un ancla no dejen el elemento debajo de la barra fija */
  html{scroll-padding-bottom:54px}

  /* --- áreas de toque: mínimo 44 px --- */
  .burger{min-width:46px;min-height:46px;display:flex;align-items:center;justify-content:center;
    padding:0;font-size:1.45rem;margin-left:auto}
  .lang button{min-width:46px;min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .wordmark{min-height:46px;align-items:center}
  .btn{min-height:50px;padding:.95rem 1.5rem}
  .f-col a{min-height:44px;display:flex;align-items:center;margin:0}
  .f-col p{margin:0 0 .4rem}
  details.fuentes summary,details.completa summary{min-height:44px;align-items:center}
  .sw button{min-height:48px}

  /* --- el pie, comprimido: el menu del sitio en dos columnas --- */
  footer{padding-top:1.7rem;padding-bottom:36px}
  .f-grid{gap:1.15rem}
  .f-marca{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;row-gap:.55rem;align-items:center}
  .f-marca .f-gw{height:44px;margin-bottom:0}
  .f-marca .small{margin:0;font-size:.84rem;line-height:1.4}
  .f-ag{grid-column:1 / -1;margin-top:0;flex-direction:row;align-items:center;gap:.6rem}
  .f-ag .k{font-size:.72rem;letter-spacing:.15em}
  .f-ag img{width:112px}
  .f-col h4{margin:0 0 .55rem}
  .f-col{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem;row-gap:0}
  .f-col h4{grid-column:1 / -1}
  .f-col a,.f-col p{min-height:39px;display:flex;align-items:center;margin:0;font-size:.9rem;
    border-top:1px solid var(--linea)}
  .f-col p{min-height:34px}
  /* contacto: los tres datos son largos (numero, arroba, correo) y van a una columna */
  .f-cont a,.f-cont p{grid-column:1 / -1}
  .f-col p:last-child{grid-column:1 / -1}
  .legalbar{margin-top:1.3rem;padding:.85rem 0;gap:.5rem}
  .legalbar .w{gap:.3rem 1.1rem}
}

/* pantallas de 360 px o menos: los titulares grandes bajan de escala
   para que ninguna palabra larga se corte (p. ej. DISTRIBUIDORES) */
@media(max-width:360px){
  .impact,.display{overflow-wrap:break-word}
  h1.impact,h2.impact,h1.display,h2.display{font-size:clamp(1.6rem,8.4vw,2.4rem)!important}
  .k{letter-spacing:.16em}
  .legalbar .w{gap:.5rem}
}

/* Compra online solo Argentina */
.ml-ar{display:none!important}
html.es-ar a.ml-ar{display:inline-flex!important}
html.es-ar p.ml-ar{display:block!important}
html:not(.es-ar) .btn.cta-donde{background:var(--naranja);color:#11151E;border-color:var(--naranja)}
html:not(.es-ar) .btn.cta-donde:hover{background:transparent;color:var(--naranja)}
html.es-ar div.ml-ar{display:block!important}
html.es-ar .ml-noar{display:none!important}
/* Compra online en Dónde comprar */
.dc-ml{padding-bottom:clamp(2.2rem,4.5vw,3.5rem)}
.dc-ml .sechead{margin-bottom:1rem}
.dc-ml-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.dc-ml-lista li{border-bottom:1px solid var(--linea2)}
.dc-ml-lista li+li{border-left:1px solid var(--linea2)}
@media(max-width:820px){.dc-ml-lista{grid-template-columns:1fr}.dc-ml-lista li+li{border-left:0}}
.dc-ml-lista a{display:flex;gap:1.1rem;align-items:center;padding:1.1rem 1.2rem;color:var(--crema);text-decoration:none;transition:background .22s}
.dc-ml-lista a:hover{background:rgba(212,99,58,.08)}
.dc-ml-ph{flex:0 0 64px;height:84px;overflow:hidden;background:rgba(255,255,255,.03)}
.dc-ml-ph img{width:100%;height:100%;object-fit:cover;display:block}
.dc-ml-tx{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.dc-ml-l{font-family:var(--caps);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dorado)}
.dc-ml-n{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.1}
.dc-ml-go{font-family:var(--caps);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja);margin-top:.2rem}
.dc-ml .ml-nota{margin-top:.8rem}