caería en la cursiva de Minion Pro y
rompería la línea de versalitas a mitad de frase */
.leg-feature .leg-quote em{font-style:normal}
@media(max-width:820px){
.leg-row,.leg-row--flip{grid-template-columns:1fr;gap:30px}
.leg-row--flip .leg-row__media{order:0}
.leg-row__media--offset{margin-top:0}
}
/* ---- Material de archivo dentro de la columna de lectura ----
El díptico (Otto Peter y Otto Sebastián) y la placa de Quilmes se salen unos
píxeles del ancho de texto para ganar presencia sin romper el eje: el bleed
se mide contra el viewport y se anula solo cuando la columna ya toca los
ejes de la página, así nunca se come el --pad-x. Los dos comparten el mismo
valor a propósito: arrancan y terminan en la misma línea y esa coincidencia
arma un segundo eje, más ancho que el texto, dentro de la misma sección.
Sin aspect-ratio en ninguno: son documentos, no fotos de producción, y
cualquier recorte se comería el nombre grabado al pie o el encuadre de
época. Van con su proporción nativa. */
.leg-pair,.leg-plate{
--arch-bleed:clamp(0px,calc((100vw - 760px - 2 * var(--pad-x)) / 2),72px);
margin:clamp(56px,7.5vw,104px) calc(-1 * var(--arch-bleed))}
/* la segunda foto baja un escalón —son dos generaciones, no dos piezas
simétricas— y ese desfasaje además escalona el data-clip */
.leg-pair{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(16px,3vw,44px);align-items:start}
.leg-pair__media{overflow:hidden;background:#e7e4dd}
.leg-pair__media--offset{}
.leg-pair__media img{width:100%;height:auto;display:block;
transition:transform 1.4s var(--ease-expo)}
/* hover por retrato y no por par: son dos personas, no un bloque */
.leg-pair__media:hover img{transform:scale(1.03)}
/* apilado antes que en el resto de la página: a dos columnas en pantallas
chicas el nombre grabado en la foto queda ilegible */
@media(max-width:620px){
.leg-pair{grid-template-columns:1fr;gap:clamp(24px,6vw,36px)}
.leg-pair__media--offset{margin-top:0}
}
/* placa única y apaisada: contrapunto del par vertical de arriba */
.leg-plate{overflow:hidden;background:#e7e4dd}
.leg-plate img{width:100%;height:auto;display:block;
transition:transform 1.4s var(--ease-expo)}
.leg-plate:hover img{transform:scale(1.03)}
/* ============================================================
HITO — entrada editorial (hito-*.html)
Una nota larga: cabecera de diario, banda a sangre, columna de
lectura angosta y un riel de ficha que acompaña el scroll.
============================================================ */
/* barra de lectura: hairline gold sobre el header */
.ht-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:1700;pointer-events:none}
.ht-progress__bar{display:block;height:100%;width:100%;background:var(--gold);
transform:scaleX(0);transform-origin:left}
/* ---- Cabecera ---- */
.ht-mast{padding:clamp(120px,16vh,190px) var(--pad-x) 0;margin:0 auto}
.ht-mast__grid{display:grid;grid-template-columns:1.35fr .65fr;
gap:clamp(28px,5vw,90px);align-items:end;margin-top:clamp(34px,5vw,64px)}
.ht-mast__meta{display:flex;align-items:center;gap:16px;margin-bottom:clamp(18px,2.4vw,30px)}
.ht-mast__cat,.ht-mast__date{color:var(--navy)} /* métrica en el grupo compartido */
.ht-mast__date{opacity:.5}
.ht-mast__meta i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold-soft);
display:inline-block;flex:none}
.ht-mast__title{color:var(--navy);font-size:var(--fs-title);line-height:1.06;
letter-spacing:-.015em;max-width:16ch}
.ht-mast__title em{font-style:italic}
.ht-mast__dek{font-family:var(--font-display);color:var(--navy);opacity:.78;
font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.62;max-width:34ch;
padding-bottom:clamp(4px,1vw,10px)}
/* ---- Banda a sangre ---- */
.ht-band{margin-top:clamp(50px,7vw,96px);width:100%;overflow:hidden;
aspect-ratio:16/7;background:#e7e4dd;will-change:clip-path}
.ht-band img{width:100%;height:100%;object-fit:cover;display:block}
/* leyendas de foto: misma métrica en la banda a sangre y en las figuras */
:is(.ht-cap,.ht-fig figcaption){font-family:var(--font-ui);font-weight:300;font-size:10.5px;
letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.ht-cap{margin:14px auto 0;padding:0 var(--pad-x)}
/* ---- Cuerpo: riel de ficha + columna de lectura ---- */
.ht-art{margin:0 auto;padding:clamp(64px,9vw,130px) var(--pad-x) 0;
display:grid;grid-template-columns:minmax(190px,.9fr) minmax(0,2.4fr);
gap:clamp(34px,6vw,110px);align-items:start}
.ht-rail{position:sticky;top:110px;display:flex;flex-direction:column}
.ht-rail__f{padding:14px 0;border-top:1px solid rgba(31,36,80,.12)}
.ht-rail__f:last-of-type{border-bottom:1px solid rgba(31,36,80,.12)}
.ht-rail__k{display:block;font-family:var(--font-ui);font-weight:300;font-size:9.5px;
letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.ht-rail__v{display:block;font-family:var(--font-display);font-size:15px;line-height:1.5;
color:var(--navy)}
.ht-share{margin-top:clamp(22px,3vw,34px);display:flex;flex-direction:column;
align-items:flex-start;gap:10px}
.ht-share__btn{font-family:var(--font-ui);font-weight:300;text-transform:uppercase;
letter-spacing:.2em;font-size:var(--fs-cta);color:var(--navy);opacity:.7;
display:inline-flex;align-items:center;gap:10px;padding:4px 0;
transition:opacity .4s var(--ease-expo),color .4s var(--ease-expo)}
.ht-share__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.3}
.ht-share__btn:hover,.ht-share__btn:focus-visible{opacity:1;color:var(--gold)}
.ht-share__msg{font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);min-height:12px}
.ht-col{max-width:64ch}
.ht-lead{font-family:var(--font-display);color:var(--navy);
font-size:clamp(1.2rem,1.65vw,1.55rem);line-height:1.6}
.ht-lead::first-letter{float:left;font-size:3.4em;line-height:.82;color:var(--gold);
margin:.06em .1em 0 0;font-weight:400}
.ht-p{font-family:var(--font-display);color:var(--navy);opacity:.88;
font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.85;margin-top:clamp(22px,2.6vw,32px)}
.ht-p em{font-style:italic}
.ht-sub{color:var(--navy); /* métrica en el grupo compartido */
margin-top:clamp(44px,6vw,80px);padding-top:18px;
border-top:1px solid rgba(31,36,80,.12)}
.ht-quote{margin:clamp(48px,7vw,96px) 0;padding-left:clamp(20px,3vw,42px);
border-left:1px solid var(--gold-soft)}
.ht-quote p{font-family:var(--font-script);color:var(--gold);
font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.34}
.ht-quote cite{display:block;margin-top:18px;font-style:normal;
font-family:var(--font-ui);font-weight:300;font-size:10.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--navy);opacity:.6}
.ht-fig{margin:clamp(46px,6vw,84px) 0}
.ht-fig__media{overflow:hidden;background:#e7e4dd;aspect-ratio:4/3}
.ht-fig__media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.4s var(--ease-expo)}
.ht-fig:hover .ht-fig__media img{transform:scale(1.03)}
.ht-fig figcaption{margin-top:12px}
/* cifras del reconocimiento */
.ht-facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(18px,2.6vw,40px);margin:clamp(40px,5vw,70px) 0 0;
padding-top:26px;border-top:1px solid rgba(31,36,80,.12)}
.ht-facts li{display:flex;flex-direction:column;gap:8px}
.ht-facts b{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--navy)}
.ht-facts span{font-family:var(--font-ui);font-weight:300;font-size:9.5px;
letter-spacing:.2em;text-transform:uppercase;color:var(--gray);line-height:1.6}
.ht-end{margin-top:clamp(46px,6vw,80px);padding-top:26px;
border-top:1px solid rgba(31,36,80,.12);display:flex;flex-wrap:wrap;
align-items:center;justify-content:space-between;gap:20px}
.ht-end__sign{font-family:var(--font-display);font-style:italic;font-size:15px;
color:var(--navy);opacity:.7}
/* ---- Otros hitos ---- */
.ht-more{margin:0 auto;
padding:clamp(90px,13vw,170px) var(--pad-x) clamp(100px,15vw,200px)}
.ht-more__head{display:flex;align-items:baseline;justify-content:space-between;
gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.ht-more__h{font-family:var(--font-display);color:var(--navy);
font-size:var(--fs-h2);line-height:1.12}
.ht-more__h em{font-style:italic}
.ht-more__grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(28px,4vw,70px)}
.ht-card{display:flex;flex-direction:column;height:100%;color:var(--navy)}
.ht-card:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.ht-card__img{aspect-ratio:4/3;overflow:hidden;background:#e7e4dd;margin-bottom:20px}
.ht-card__img img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.4s var(--ease-expo)}
.ht-card:hover .ht-card__img img{transform:scale(1.05)}
.ht-card__meta{display:flex;gap:14px;align-items:baseline;margin-bottom:10px} /* métrica en el grupo compartido */
.ht-card__meta span:last-child{opacity:.5}
.ht-card__t{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.16;max-width:22ch}
.ht-card__more{margin-top:18px;align-self:flex-start} /* estilo en el grupo compartido */
/* ============================================================
HITOS — índice (hitos.html)
Cabecera editorial + grilla de 3 columnas con las mismas cards
de la home. Reusa .ht-card.
============================================================ */
.hx{padding:clamp(120px,16vh,190px) var(--pad-x) clamp(100px,15vw,200px);
margin:0 auto}
.hx__head{margin-bottom:clamp(50px,8vh,110px);max-width:var(--content-max)}
.hx__eyebrow{margin-bottom:clamp(10px,1.4vw,18px)} /* estilo en el grupo compartido */
.hx__title{color:var(--navy);font-size:var(--fs-title);line-height:1.06;
letter-spacing:-.015em}
.hx__title em{font-style:italic}
.hx__intro{margin-top:clamp(18px,2.4vw,28px);max-width:46ch;
font-family:var(--font-display);color:var(--navy);opacity:.8;
font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.7}
.hx__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(34px,4vw,70px) clamp(26px,3vw,54px)}
.hx__year{grid-column:1/-1;display:flex;align-items:center;gap:clamp(16px,2vw,28px);
color:var(--navy);opacity:.55;margin-top:clamp(20px,3vw,44px)} /* métrica en el grupo compartido */
.hx__year:first-child{margin-top:0}
.hx__year::after{content:"";flex:1;height:1px;background:rgba(31,36,80,.12)}
@media(max-width:980px){.hx__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hx__grid{grid-template-columns:1fr;gap:44px;max-width:440px}}
/* ---- Responsive ---- */
@media(max-width:980px){
.ht-mast__grid{grid-template-columns:1fr;gap:26px;align-items:start}
.ht-mast__title{max-width:none}
.ht-art{grid-template-columns:1fr;gap:38px}
.ht-rail{position:static;top:auto}
.ht-col{max-width:none}
.ht-band{aspect-ratio:4/3}
}
@media(max-width:640px){
.ht-facts{grid-template-columns:1fr;gap:22px}
.ht-more__grid{grid-template-columns:1fr;gap:44px;max-width:440px}
}
/* ============================================================
ESTATE — bloques Bodega / La Casa y el índice de fincas.
El bloque es la misma composición 50/50 que .wmk-maker pero con
título propio y varios párrafos; no se reusa aquella porque su
semántica (nombre + cargo de una persona) no es esta.
============================================================ */
.est-blocks{background:var(--cream);padding:0 var(--pad-x) clamp(90px,13vw,170px)}
.est-blocks__inner{max-width:var(--content-max);margin:0 auto;
display:flex;flex-direction:column;gap:clamp(80px,11vw,170px)}
.est-block{display:grid;grid-template-columns:1fr 1fr;
column-gap:var(--gap-2col);align-items:center}
/* igual criterio que .wmk-maker: el DOM lee texto -> foto siempre; el
modificador solo mueve la foto, no reordena el markup */
.est-block--flip .est-block__media{order:-1}
.est-block__media{aspect-ratio:4/3;overflow:hidden;background:#e7e4dd}
.est-block__media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.4s var(--ease-expo)}
.est-block:hover .est-block__media img{transform:scale(1.03)}
/* ---- Galería fade (La Casa) ----
Pila de fotos dentro de la caja de media: lo único que se anima es opacity.
Nada de display:none entre una y otra —cortaría la transición— ni de tocar
posición o tamaño, que reflowean.
Se funde UNA sola: la que entra, por encima de la que sale, que se queda
opaca abajo hasta que termina. Fundiendo las dos a la vez, a mitad de cruce
las dos quedan translúcidas y el fondo asoma por detrás: medido, la
cobertura caía a 0.76 y se veía un destello claro en cada cambio.
Curva lineal y no --ease-expo: en una disolvencia entre dos fotos el ritmo
tiene que ser parejo; una curva expo entra de golpe y después repta.
El transform sigue en la lista para no perder el scale del hover. */
.fade-gal{position:relative;width:100%;height:100%}
.fade-gal img{position:absolute;inset:0;opacity:0;z-index:0;
transition:opacity 1.4s linear,transform 1.4s var(--ease-expo)}
.fade-gal img.is-on{opacity:1;z-index:1} /* la que está en pantalla */
.fade-gal img.is-in{opacity:1;z-index:2} /* la que entra, por encima */
.est-block__t{color:var(--navy)}
.est-block__sub{margin-top:clamp(10px,1.2vw,16px);color:var(--navy);opacity:.72}
.est-block__p{margin-top:clamp(24px,3vw,36px);
color:var(--navy);opacity:.85;
font-size:var(--fs-body);line-height:1.85}
/* el filete abre el bloque una sola vez. Va colgado del párrafo que sigue al
subtítulo y no de :first-of-type, porque el primer del bloque es el
subtítulo y el selector no habría enganchado nunca. */
.est-block__sub + .est-block__p::before{content:"";display:block;width:56px;height:1px;
background:var(--gold);margin-bottom:clamp(24px,3vw,36px)}
.est-block__p + .est-block__p{margin-top:clamp(16px,2vw,24px)}
@media(max-width:820px){
.est-block,.est-block--flip{grid-template-columns:1fr;row-gap:clamp(26px,5vw,40px)}
.est-block--flip .est-block__media{order:0}
.est-block__p{max-width:none}
}
/* ============================================================
VINOS 2 — página de comparación de maquetas (vinos-2.html)
Muestra las variantes de Pionero y La Linterna que conviven en
la home, una debajo de la otra, cada una rotulada. Es una vista
de trabajo para elegir: cuando se decida, esta página y sus
estilos .vw2-* se borran junto con las variantes descartadas.
============================================================ */
/* rótulo: se apoya sobre el mismo eje lateral que los bloques
(--blk-inset), no sobre --pad-x, para que la línea de la etiqueta
caiga a plomo con el borde del marco gold que rotula. */
.vw2-tag{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);
margin:clamp(64px,9vh,120px) var(--blk-inset) clamp(-18px,-2vh,-34px);
padding-bottom:12px;border-bottom:1px solid rgba(31,36,80,.12)}
.vw2-tag:first-of-type{margin-top:0}
.vw2-tag__n{font-family:var(--font-ui);font-weight:300;font-size:10.5px;
letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
flex:none;min-width:4.5ch}
.vw2-tag__name{font-family:var(--font-display);color:var(--navy);
font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.3}
/* el selector CSS es el dato operativo del rótulo: es lo que se busca
en site.css para tocar o borrar la variante */
.vw2-tag__sel{margin-left:auto;font-family:var(--font-ui);font-weight:300;
font-size:11px;letter-spacing:.06em;color:var(--gray);
text-align:right;flex:none}
@media(max-width:900px){
.vw2-tag{margin-inline:calc(var(--pad-x) * .5);flex-wrap:wrap;gap:6px 14px}
.vw2-tag__sel{margin-left:0;flex-basis:100%;text-align:left}
}
}