/* ============================================================
BEMBERG FAMILY WINES — OPCIÓN 2 · HOJA DE ESTILO ÚNICA
Única fuente de estilos del sitio. Toda página nueva enlaza:
Las dos plantillas conviven por scope de :
body.home → home oscuro scroll-driven (index)
body.subpage → páginas de contenido claras (la-linterna, vinos…)
Usa CSS nesting nativo (navegadores modernos).
============================================================ */
/* ---- Fuentes self-hosted ---- */
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-It.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-MediumIt.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-SemiboldIt.otf") format("opentype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Minion Pro";src:url("assets/tipografias/minion-pro/MinionPro-BoldIt.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Blair ITC";src:url("assets/tipografias/blair-itc-light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Blair ITC";src:url("assets/tipografias/Blaimim_.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Notera";src:url("assets/tipografias/Notera_PersonalUseOnly.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* ---- Tokens globales (los valores por defecto son los de subpágina; body.home reescribe --cream y --pad-x) ---- */
/* ============================================================
TOKENS
============================================================ */
:root{
/* — Color (brief tokens) — */
--navy:#1F2450; /* base / marca / texto */
--gold:#C0946C; /* acento ÚNICO */
--ink:#1A1A1A; /* video / overlays */
--cream:#FAFAF6; /* fondo principal */
--sand:#ffffff ; /* fondo alterno */
--gray:#939393; /* texto secundario */
--gold-soft:rgba(192,148,108,.28);
--navy-soft:rgba(31,36,80,.55);
/* — Placeholder (maqueta) — */
--ph-1:#2A2A2E; /* gris oscuro */
--ph-2:#3C3C42; /* gris medio */
--ph-black:#141416;
/* — Type — */
--font-display:"Minion Pro",Georgia,"Times New Roman",serif;
--font-ui:"Blair ITC","Helvetica Neue",Arial,sans-serif;
--font-script:"Notera","Marck Script",cursive; /* pull-quotes: script manuscrita */
/* Etiquetas: no escalan con el viewport. El canvas ya congela el layout
a 1950px, así que un clamp en vw sólo las haría crecer fuera de la grilla. */
--fs-eyebrow:10px; /* eyebrows y rótulos */
--fs-cta:12px; /* botones y llamados a la acción */
--fs-body:clamp(16px,1.05vw,18px);
--fs-h3:clamp(22px,2.2vw,34px);
--fs-h2:clamp(2rem,3.4vw,2.5rem); /* títulos de sección y de banner: uno solo para todo el sitio */
--fs-title:clamp(2.1rem,4.8vw,4.1rem); /* h1 de página (banda superior de subpágina) */
--fs-h1:clamp(3rem,8vw,7rem);
--fs-huge:clamp(5rem,15vw,15rem);
--fs-script:clamp(1.6rem,3vw,2.9rem);
/* — Space — —————————————————————————————————————————————
Eje único de todo el sitio. La composición está armada en
proporciones, así que sin techo los márgenes crecen sin fin en
pantallas grandes. El canvas congela el ancho de trabajo en 1950px:
por debajo, --pad-x vale 10% (igual que la home); por encima, la
grilla queda centrada y el ancho útil se clava en 1560px.
Los tokens van en vw y no en %: un % dentro de un ítem de grilla se
mediría contra su celda y no contra el viewport. */
--canvas:min(100vw,1950px);
--gut:calc((100vw - var(--canvas)) / 2);
--pad-x:calc(var(--gut) + var(--canvas) * .10);
--content-max:calc(var(--canvas) * .80); /* 1560px: ancho útil entre ejes */
--gap-2col:8.6%; /* gutter estándar de las grillas de dos columnas */
--section-gap:clamp(110px,15vw,240px);
/* — Ejes de los bloques Pionero / La Linterna (home y vinos.html) —
En vw y no con --pad-x (10%): dentro del panel de Pionero, que mide 40%,
un porcentaje resolvería contra el panel y no contra el viewport. */
--blk-inset:calc(var(--gut) + var(--canvas) * .08); /* margen lateral de ambos bloques, desde el viewport */
--blk-inset-c:calc(var(--canvas) * .08); /* el mismo eje medido desde el borde del canvas
(para lo que vive dentro de .pionero, ya acotado) */
--blk-pad:clamp(30px,4vw,70px); /* padding interno del marco */
--blk-text-x:calc(var(--blk-inset-c) + var(--blk-pad) + clamp(8px,1.6vw,30px));
/* — Motion — */
--ease-expo:cubic-bezier(.19,1,.22,1);
--ease-smooth:cubic-bezier(.16,1,.3,1);
}
/* ---- Reset + base global ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--cream)}
body.is-locked{overflow:hidden;height:100vh}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:1.08}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h1 em,h2 em,h3 em{font-style:italic;font-weight:inherit}
/* ---- Keyframes globales ---- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes scrollpulse{0%{transform:scaleY(0);opacity:0}
40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes lwFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition-duration:.01ms!important}
.hero__bg{transform:none}
.linterna__track{scroll-behavior:auto}
}
/* ============================================================
EYEBROW — estilo único de todo el sitio: Blair 500, versalitas,
letter-spacing .28em. Navy sobre fondo claro; crema cuando va sobre
foto o fondo de color (la variante la fija cada bloque oscuro).
============================================================ */
:is(.eyebrow,.intro__eyebrow,.estate__eyebrow,.wmaking__eyebrow,.hospi__eyebrow,.hitos__eyebrow,.hx__eyebrow){
display:block;font-family:var(--font-ui);font-weight:500;text-transform:uppercase;
letter-spacing:.28em;font-size:var(--fs-eyebrow);color:var(--navy)}
/* sobre banner / foto / fondo oscuro */
:is(.estate__eyebrow,.hospi__eyebrow,.estate .eyebrow,.hosp__inner .eyebrow){color:var(--cream)}
/* ============================================================
CTA — estilo único de todo el sitio: misma métrica que el eyebrow
(Blair 500, versalitas, .28em) pero en gold y con un filete corto que
crece en hover. Todo llamado a la acción usa esta base.
============================================================ */
:is(.cta,.intro__cta,.estate__cta,.pionero__cta,.linterna__cta,.wmaking__cta,.hospi__cta,
.hito__more,.hitos__all,.ht-card__more,.hosp-cta){
display:inline-flex;align-items:center;gap:clamp(14px,1.6vw,26px);
font-family:var(--font-ui);font-weight:500;text-transform:uppercase;letter-spacing:.28em;
font-size:var(--fs-cta);color:var(--gold);padding-bottom:0}
:is(.cta,.intro__cta,.estate__cta,.pionero__cta,.linterna__cta,.wmaking__cta,.hospi__cta,
.hito__more,.hitos__all,.ht-card__more,.hosp-cta)::after{
content:"";position:static;flex:none;width:clamp(48px,5vw,90px);height:1px;
background:currentColor;transform:scaleX(1);transform-origin:left;
transition:transform .45s var(--ease-expo)}
:is(.cta,.intro__cta,.estate__cta,.pionero__cta,.linterna__cta,.wmaking__cta,.hospi__cta,
.hito__more,.hitos__all,.ht-card__more,.hosp-cta):hover::after,
:is(.cta,.intro__cta,.estate__cta,.pionero__cta,.linterna__cta,.wmaking__cta,.hospi__cta,
.hito__more,.hitos__all,.ht-card__more,.hosp-cta):focus-visible::after{transform:scaleX(1.3)}
/* el filete de la card la sigue: el hover está en el contenedor */
.ht-card:hover .ht-card__more::after,.hito__link:hover .hito__more::after{transform:scaleX(1.3)}
/* wrapper del par: fondo y aire vertical. La home le suma `.vinos` para el overlap. */
.wines{position:relative;background:#FAFAF6;color:var(--navy);
padding:clamp(90px,14vh,180px) 0 clamp(100px,16vh,200px)}
/* ============================================================
PIONERO + LA LINTERNA — par de bloques compartido por
index.html y vinos.html. Los tokens --blk-* viven en :root.
============================================================ */
/* ------------------------------------------------------------
PIONERO — panel crema (40%) + foto B&W (60%); la botella se
apoya sobre la costura de ambos y es lo último en entrar.
------------------------------------------------------------ */
.pionero{position:relative;display:grid;grid-template-columns:40% 60%;
max-width:var(--canvas);margin-inline:auto;
min-height:min(88vh,830px);isolation:isolate}
/* foto en blanco y negro: wipe de izquierda a derecha + settle de escala.
No llega al borde: corta en --blk-inset, la misma línea que el marco gold
de La Linterna, para que ambos bloques compartan eje derecho. */
.pionero__photo{position:relative;grid-column:2;grid-row:1;overflow:hidden;background:var(--ph-1);
margin-right:var(--blk-inset-c);
clip-path:inset(0 100% 0 0);transition:clip-path 1.5s var(--ease-smooth)}
.pionero.in .pionero__photo{clip-path:inset(0 0 0 0)}
.pionero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(1.08);transition:transform 2.4s var(--ease-smooth)}
.pionero.in .pionero__bg{transform:scale(1)}
.pionero__caption{position:absolute;z-index:2;right:clamp(24px,4vw,72px);bottom:clamp(24px,5vh,56px);
display:grid;justify-items:start;gap:6px;text-align:left;color:#fff;
text-shadow:0 1px 14px rgba(20,20,22,.45);
opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1s var(--ease-expo)}
.pionero.in .pionero__caption{opacity:1;transform:none;transition-delay:1.05s}
.pionero__place{font-family:var(--font-display);line-height:1.1;
font-size:clamp(1.15rem,1.75vw,1.75rem)}
.pionero__geo{font-family:var(--font-display);opacity:.88;
font-size:clamp(.8rem,.95vw,1rem)}
/* panel crema + filete gold que se dibuja */
/* ojo: acá --pad-x (10%) resolvería contra el panel (40% del ancho), no contra
el viewport. Por eso el sangrado va en vw para alinear con el resto del home. */
/* el sangrado solo empuja el texto: el filete sigue anclado a --blk-inset */
.pionero__panel{position:relative;grid-column:1;grid-row:1;display:flex;align-items:flex-end;
padding:0 clamp(24px,3vw,56px) 0 var(--blk-text-x)}
/* corchete abierto, no caja: sin borde derecho, las líneas corren hacia la
botella y mueren detrás de ella. Nunca tocan la foto. */
.pionero__frame{position:absolute;z-index:1;pointer-events:none;
left:var(--blk-inset-c);right:8%;top:15.5%;bottom:12.5%;
border:1px solid var(--gold);border-right:0;opacity:.6;
clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease-smooth) .2s}
.pionero.in .pionero__frame{clip-path:inset(0 0 0 0)}
/* el texto se apoya en el tercio inferior del panel, como en la maqueta */
.pionero__content{position:relative;z-index:2;max-width:min(400px,100%);
margin-bottom:min(16.3vh,154px)}
.pionero__name{font-family:var(--font-display);font-weight:400;color:var(--navy);
font-size:var(--fs-h2);line-height:1;letter-spacing:.03em;text-transform:uppercase}
.pionero__line{font-family:var(--font-script);color:var(--gold);line-height:1.1;
font-size:clamp(1.45rem,2.3vw,2.15rem);margin-top:8px}
.pionero__desc{margin-top:clamp(20px,2.4vw,34px);max-width:34ch;
font-size:clamp(.95rem,1vw,1.08rem);line-height:1.9;opacity:.85}
.pionero__cta{margin-top:clamp(26px,3vw,46px)}
/* stagger del texto */
.pionero__name,.pionero__line,.pionero__desc,.pionero__cta{
opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1s var(--ease-expo)}
.pionero.in :is(.pionero__name,.pionero__line,.pionero__desc,.pionero__cta){opacity:1;transform:none}
.pionero.in .pionero__name{transition-delay:.42s}
.pionero.in .pionero__line{transition-delay:.53s}
.pionero.in .pionero__desc{transition-delay:.64s}
.pionero.in .pionero__cta{transition-delay:.75s}
/* la botella: sobre la costura crema/foto, entra al final */
.pionero__bottle{position:absolute;z-index:3;left:41%;bottom:9%;
height:81%;width:auto;max-width:none;
filter:drop-shadow(0 38px 56px rgba(20,20,22,.34));
opacity:0;transform:translate(-50%,46px);
transition:opacity 1.3s ease .48s,transform 1.5s var(--ease-expo) .48s}
.pionero.in .pionero__bottle{opacity:1;transform:translate(-50%,0)}
/* ------------------------------------------------------------
LA LINTERNA — bloque enmarcado: intro a la izquierda,
swiper de 7 parcelas a la derecha.
------------------------------------------------------------ */
.linterna{position:relative;
margin:clamp(80px,12vh,170px) var(--blk-inset) 0;
padding:clamp(48px,6vw,84px) var(--blk-pad) clamp(64px,7vw,100px);
display:grid;grid-template-columns:26% 1fr;column-gap:clamp(30px,4vw,70px);
align-items:end; /* el intro cierra a la altura del pie de las cards */
--lint-pb:clamp(8px,1vw,15px)} /* padding inferior del track, replicado en el intro */
.linterna__frame{position:absolute;inset:0;pointer-events:none;
border:1px solid var(--gold);opacity:.55;
clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease-smooth)}
.linterna.in .linterna__frame{clip-path:inset(0 0 0 0)}
/* el padding-bottom iguala al del track: sin él, el texto caía --lint-pb por debajo de las cards */
.linterna__intro{position:relative;z-index:2;min-width:0;
padding-left:clamp(8px,1.6vw,30px);padding-bottom:var(--lint-pb)}
.linterna__name{font-family:var(--font-display);font-weight:400;color:var(--navy);
font-size:var(--fs-h2);line-height:1;letter-spacing:.03em;text-transform:uppercase}
.linterna__line{font-family:var(--font-script);color:var(--gold);line-height:1.1;
font-size:clamp(1.35rem,2.1vw,2rem);margin-top:8px}
.linterna__desc{margin-top:clamp(18px,2.2vw,30px);max-width:32ch;
font-size:clamp(.92rem,.98vw,1.05rem);line-height:1.85;opacity:.85}
.linterna__cta{margin-top:clamp(24px,2.8vw,42px)}
.linterna__name,.linterna__line,.linterna__desc,.linterna__cta{
opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1s var(--ease-expo)}
.linterna.in :is(.linterna__name,.linterna__line,.linterna__desc,.linterna__cta){opacity:1;transform:none}
.linterna.in .linterna__name{transition-delay:.24s}
.linterna.in .linterna__line{transition-delay:.33s}
.linterna.in .linterna__desc{transition-delay:.42s}
.linterna.in .linterna__cta{transition-delay:.51s}
/* swiper nativo: scroll-snap + arrastre (táctil nativo, mouse por JS);
las flechas y el teclado son el atajo */
.linterna__viewport{position:relative;z-index:2;min-width:0}
.linterna__track{--lint-gap:clamp(16px,1.9vw,36px);
cursor:grab;
display:flex;gap:var(--lint-gap);list-style:none;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
padding-block:clamp(4px,.6vw,9px) var(--lint-pb)} /* aire para la sombra del hover */
.linterna__track::-webkit-scrollbar{display:none}
.linterna__track:focus-visible{outline:1px solid var(--gold);outline-offset:8px}
/* mientras se arrastra: sin selección de texto ni hover de las cards */
.linterna__track.is-dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
.linterna__track.is-dragging a{pointer-events:none}
.linterna__track.is-dragging img{transform:none!important}
/* 3 cards a la vista: más angostas, con la botella entera dentro de la caja */
.lint-card{flex:0 0 calc((100% - var(--lint-gap) * 2) / 3);scroll-snap-align:start;display:flex;
opacity:0;transform:translateY(26px);
transition:opacity .85s ease,transform .95s var(--ease-expo)}
.linterna.in .lint-card{opacity:1;transform:none}
.linterna.in .lint-card:nth-child(1){transition-delay:.40s}
.linterna.in .lint-card:nth-child(2){transition-delay:.50s}
.linterna.in .lint-card:nth-child(3){transition-delay:.60s}
.linterna.in .lint-card:nth-child(n+4){transition-delay:.68s}
.lint-card > a{flex:1;display:flex;flex-direction:column;min-width:0;color:var(--navy);background:#fff;
padding:clamp(18px,1.8vw,32px) clamp(12px,1.2vw,22px) clamp(22px,2.2vw,36px);
transition:box-shadow .7s var(--ease-expo)}
.lint-card > a:hover{box-shadow:0 10px 22px -16px rgba(31,36,80,.34)}
.lint-card > a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* caja vertical: con la card angosta, la botella entra completa.
Centrado por inset+margin:auto y topes de max-*: un height en % resolvería
contra la altura natural del PNG y desbordaría la caja. */
.lint-card__media{position:relative;width:100%;aspect-ratio:1/1.42;
margin-bottom:clamp(14px,1.6vw,24px)}
.lint-card__media img{position:absolute;inset:0;margin:auto;
width:auto;height:auto;max-width:78%;max-height:94%;
transition:transform .9s var(--ease-expo)}
.lint-card > a:hover .lint-card__media img{transform:translateY(-8px)}
.lint-card__finca{font-family:var(--font-display);font-weight:400;color:var(--navy);text-align:center;
font-size:clamp(1rem,1.25vw,1.35rem);line-height:1.15}
.lint-card__grape{display:block;text-align:center;font-family:var(--font-display);color:var(--gold);
text-transform:uppercase;letter-spacing:.14em;
font-size:clamp(.72rem,.85vw,.9rem);margin-top:clamp(8px,.9vw,14px)}
.lint-card__grape::after{content:"";display:block;width:34px;height:1px;background:var(--gold);
margin:clamp(10px,1.1vw,16px) auto 0;transform:scaleX(0);
transition:transform .6s var(--ease-expo)}
.lint-card > a:hover .lint-card__grape::after{transform:scaleX(1)}
/* el vino que se está viendo (la-linterna.html) queda marcado */
.lint-card.is-current .lint-card__grape::after{transform:scaleX(1)}
.linterna__nav{position:absolute;z-index:3;right:clamp(24px,3.4vw,62px);bottom:clamp(18px,2.4vw,38px);
display:flex;gap:clamp(12px,1.5vw,24px);
opacity:0;transition:opacity .8s ease}
.linterna.in .linterna__nav{opacity:1;transition-delay:.75s}
.linterna__arrow{width:34px;height:34px;display:grid;place-items:center;color:var(--navy);opacity:.75;
transition:opacity .4s ease,transform .45s var(--ease-expo)}
.linterna__arrow:hover:not(:disabled){opacity:1}
.linterna__arrow:disabled{opacity:.2;cursor:default}
.linterna__arrow:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.linterna__arrow svg{width:26px;height:26px;stroke:currentColor;fill:none;
stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.linterna__nav .linterna__arrow:first-child:hover:not(:disabled){transform:translateX(-3px)}
.linterna__nav .linterna__arrow:last-child:hover:not(:disabled){transform:translateX(3px)}
@media(max-width:1100px){
.linterna{grid-template-columns:31% 1fr}
.lint-card{flex-basis:calc((100% - var(--lint-gap) * 1.2) / 2.2)}
}
@media(max-width:900px){
/* PIONERO apilado: foto cuadrada con la botella centrada, panel debajo */
.pionero{grid-template-columns:1fr;min-height:0}
.pionero__photo{grid-column:1;grid-row:1;aspect-ratio:1/1;margin-right:0}
.pionero__panel{grid-column:1;grid-row:2;display:block;
padding:clamp(50px,10vw,80px) var(--pad-x)}
.pionero__frame{left:clamp(14px,3.5vw,28px);right:clamp(14px,3.5vw,28px);
top:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);
border-right:1px solid var(--gold)} /* apilado sí cierra la caja */
.pionero__content{max-width:none;margin-bottom:0}
/* apilado, los % se medirían contra el bloque entero: la foto es 1/1 a
ancho completo, así que la botella se ancla en vw sobre ella. */
.pionero__bottle{left:50%;top:50vw;bottom:auto;height:78vw;
filter:drop-shadow(0 20px 34px rgba(20,20,22,.34));
transform:translate(-50%,-50%) translateY(30px)}
.pionero.in .pionero__bottle{transform:translate(-50%,-50%)}
.pionero__caption{right:clamp(16px,4vw,30px);bottom:clamp(16px,4vw,30px)}
/* LA LINTERNA apilada */
.linterna{grid-template-columns:1fr;row-gap:clamp(30px,6vw,52px);
margin:clamp(60px,12vw,110px) calc(var(--pad-x) * .5) 0;
padding:clamp(40px,7vw,64px) clamp(18px,4vw,32px) clamp(74px,13vw,100px)}
.linterna__intro{padding-left:0}
.lint-card{flex-basis:76%}
.linterna__nav{right:clamp(18px,4vw,32px);bottom:clamp(20px,4vw,34px)}
}
@media(max-width:560px){
.lint-card{flex-basis:86%}
}
/* ============================================================
MENÚ FULLSCREEN — componente compartido por home y subpáginas.
Global a propósito: estaba duplicado en los dos scopes y así no
se puede desincronizar. --pad-x se hereda del de cada tipo.
============================================================ */
.menu2{position:fixed;inset:0;z-index:1400;background:#FAFAF6;color:var(--navy);
clip-path:inset(0 0 0 100%); /* oculto: colapsado al borde derecho */
display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
padding:clamp(70px,9vh,110px) var(--pad-x) 40px;pointer-events:none}
.menu2.is-open{pointer-events:auto}
.menu2__logo{width:min(210px,40vw);margin-bottom:clamp(30px,4.5vh,54px)}
.menu2__list{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4.2vh,50px);
list-style:none}
.menu2__item{overflow:hidden;text-align:center}
.menu2__reveal{display:block}
.menu2__item a{display:inline-block} /* el ancho lo fija el tagline, no el nombre */
.menu2__name{font-family:var(--font-display);text-transform:uppercase;
font-size:1.5rem;letter-spacing:.06em;line-height:1.1; /* el clamp anterior tenía min>max y siempre daba 1.5rem */
transition:color .35s}
.menu2__item a:hover .menu2__name{color:var(--gold)}
.menu2__tag{font-family:var(--font-display);font-style:italic;color:var(--navy);opacity:.7;
font-size:clamp(.83rem,1.16vw,1.03rem);margin-top:5px;display:block}
/* los tres bloques comparten fuente y tamaño: el font-family vive solo acá */
.menu2__foot{width:100%;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
font-family:var(--font-ui);font-weight:300;font-size:10px;letter-spacing:.1em;color:var(--navy)}
/* mismo hover que los ítems del menú: gold */
.menu2__foot a{opacity:.75;transition:opacity .35s,color .35s}
.menu2__foot a:hover,.menu2__foot a:focus-visible{opacity:1;color:var(--gold)}
.menu2__foot .mid{display:flex;gap:12px;opacity:.8}
.menu2__foot .l{text-decoration:underline;text-underline-offset:4px;text-transform:uppercase}
.menu2__foot .r{display:inline-flex;align-items:center;gap:7px}
.menu2__ig{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
@media(max-width:720px){
.menu2__foot{flex-direction:column;gap:12px;text-align:center}
.menu2__foot .mid{flex-wrap:wrap;justify-content:center}
}
/* ============================================================
HOME (index) — oscuro, scroll-driven
============================================================ */
body.home{
--cream:#FAF3EC;
background:var(--ink);color:var(--cream);font-family:var(--font-display);-webkit-font-smoothing:antialiased;
/* ============================================================
HEADER (transparente sobre el hero + franja blanca al scroll)
============================================================ */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:1600;color:#fff;min-height:75px;
background:transparent;
display:flex;align-items:center;justify-content:space-between;
padding:8px var(--pad-x);transition:color .4s ease,background .4s ease}
.hdr.is-solid{color:var(--navy);background:#fafaf6;box-shadow:0 1px 0 rgba(31,36,80,.08)}
&.menu-open .hdr{color:var(--navy);transform:none!important;box-shadow:none} /* íconos oscuros + header siempre visible sobre el panel */
/* logo centrado: blanco sobre el hero · color con la franja blanca · oculto con el menú abierto */
.hdr__logo-link{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
height:82px;display:block;z-index:2}
.hdr__logo{position:static;transform:none;display:block;
height:100%;width:auto;pointer-events:none;transition:opacity .4s ease}
.hdr__logo--color{opacity:0}
.hdr.is-solid .hdr__logo--color{opacity:1}
&.menu-open .hdr .hdr__logo{opacity:0} /* el panel ya tiene su propio logo */
/* lang: globo + chevron + dropdown de idiomas */
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:8px}
.lang svg{stroke:currentColor;fill:none;stroke-width:1.2}
.globe{width:20px;height:20px}
.chev{width:12px;height:12px;transition:transform .4s var(--ease-expo)}
.lang.is-open .chev{transform:rotate(180deg)}
.lang__row{position:absolute;top:calc(100% + 14px);left:0;display:flex;align-items:center;gap:10px;
white-space:nowrap;opacity:0;transform:translateY(-6px);pointer-events:none;
transition:opacity .4s var(--ease-expo),transform .4s var(--ease-expo)}
.lang.is-open .lang__row{opacity:1;transform:translateY(0);pointer-events:auto}
.lang__row button{font-family:var(--font-display);font-style:italic;font-size:clamp(15px,1.4vw,19px);
opacity:.6;transition:opacity .3s}
.lang__row button:hover,.lang__row button.is-active{opacity:1}
.lang__row button.is-active{text-decoration:underline;text-underline-offset:5px}
.lang__row span{opacity:.4;font-style:italic}
/* hamburguesa → X */
.burger{width:34px;height:16px;position:relative;display:block}
.burger span{position:absolute;left:0;width:100%;height:1.6px;background:currentColor;
transition:transform .4s var(--ease-expo),opacity .3s}
.burger span:nth-child(1){top:2px}
.burger span:nth-child(2){bottom:2px}
.burger.is-open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.burger.is-open span:nth-child(2){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
/* ============================================================
HERO
============================================================ */
/* hero pinned: queda fijo mientras la intro sube por encima */
.hero{position:fixed;inset:0;height:100vh;overflow:hidden;background:var(--ink);z-index:0}
.hero__bg{position:absolute;inset:0;z-index:0;will-change:transform}
.hero__bg video{width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(20,20,22,.15),rgba(20,20,22,.05) 45%,rgba(20,20,22,.35))}
.hero__logo{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(320px,42vw);opacity:0}
.hero__tag{position:absolute;z-index:2;left:0;right:0;bottom:clamp(60px,10vh,120px);
text-align:center;color:var(--cream);opacity:0}
.hero__tag .script{font-family:var(--font-script);font-size:clamp(1.8rem,3.4vw,3rem);color:var(--cream)}
.hero__rombo{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.hero__rombo .l{width:clamp(40px,3vw,90px);height:1px;}
.hero__rombo .d{width:6px;height:6px;transform:rotate(45deg);background:var(--gold);opacity:.9}
.hero__rombo .d.sm{width:4px;height:4px;opacity:.6}
.hero__scroll{position:absolute;z-index:2;right:var(--pad-x);bottom:26px;color:var(--cream);opacity:.8;
animation:bob 2.4s ease-in-out infinite}
.hero__scroll svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.2}
/* ============================================================
MENÚ FULLSCREEN (derecha → izquierda)
============================================================ */
/* ============================================================
INTRO / MANIFIESTO — capa sólida que sube sobre el hero
============================================================ */
.intro{position:relative;z-index:2;overflow:hidden;margin-top:100vh;
background:#FAFAF6;color:var(--navy);
padding:clamp(70px,9.6vw,165px) var(--pad-x) clamp(45px,7vw,120px)}
.intro__eyebrow{margin:0 0 clamp(20px,2.9vw,50px)} /* estilo en el grupo compartido */
.intro__manifesto{font-family:var(--font-display);font-style:normal;font-weight:400;color:var(--navy);
font-size:var(--fs-h2);line-height:1.32;letter-spacing:-.01em;max-width:59.5%;margin:0}
.intro__manifesto em{font-style:italic}
/* label versalitas + hairline gold */
.intro__rule{display:flex;align-items:center;gap:clamp(20px,3.1vw,52px);margin-top:clamp(30px,4.3vw,72px)}
.intro__label{font-family:var(--font-display);font-variant:all-small-caps;
color:var(--gold);letter-spacing:.06em;font-size:clamp(1rem,1.4vw,1.35rem);white-space:nowrap}
.intro__line{flex:1;height:1px;background:var(--gold);opacity:.55}
/* fade-in de texto */
.intro__eyebrow,.intro__manifesto,.intro__rule,.intro__lead,.intro__body,.intro__script{
opacity:0;transform:translateY(22px);
transition:opacity 1s ease,transform 1.1s cubic-bezier(.19,1,.22,1)}
.intro__eyebrow.in,.intro__manifesto.in,.intro__rule.in,.intro__lead.in,
.intro__body.in,.intro__script.in{opacity:1;transform:none}
/* ---- CTA unificado del home: texto gold + filete corto a la derecha ----
Base compartida; cada sección solo ajusta posición/tamaño. */
/* CTA de la sección legado — cierra el segundo bloque */
.intro__cta{margin-top:clamp(26px,3vw,46px)}
/* ---- Composición editorial escalonada (proporciones de la maqueta) ----
Dos columnas de flujo independiente: 37.1% · gutter 8.6% · 54.3% */
.intro__grid{position:relative;display:grid;grid-template-columns:37.1% 54.3%;
column-gap:var(--gap-2col);align-items:start;margin-top:clamp(38px,4.2vw,72px)}
.intro__col{display:flex;flex-direction:column;min-width:0}
.intro__lead{width:63%;font-size:clamp(.95rem,1vw,1.1rem);line-height:1.75;opacity:.82;
text-align:justify;text-justify:inter-word}
/* imagen: marco de reveal por clip-path (se conserva el mecanismo previo) */
.intro__img{position:relative;overflow:hidden;background:#23262E;
clip-path:inset(100% 0 0 0);transition:clip-path 1.7s cubic-bezier(.16,1,.3,1)}
.intro__img.in{clip-path:inset(0 0 0 0)}
.intro__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* columna izquierda */
.intro__img--blend{aspect-ratio:440/548;width:100%;margin-top:clamp(60px,9.5vw,160px)}
.intro__body{margin-top:clamp(40px,5.5vw,95px);font-size:clamp(.95rem,1vw,1.1rem);
line-height:1.75;opacity:.82;text-align:justify;text-justify:inter-word}
.intro__body p+p{margin-top:clamp(18px,2.4vw,40px)}
/* columna derecha — passepartout claro alrededor de la foto */
.intro__frame{position:relative;padding:3.2%;background:#FDFCF8;
border:1px solid rgba(31,36,80,.08);box-shadow:0 18px 50px -30px rgba(31,36,80,.35)}
.intro__frame--family .intro__img{aspect-ratio:604/686}
.intro__frame--cork{width:63.7%;align-self:flex-end;margin-top:16rem}
.intro__frame--cork .intro__img{aspect-ratio:380/375}
/* script gold sobre la foto del descorche */
.intro__script{position:absolute;right:78%;bottom:20%;z-index:2;
font-family:var(--font-script);color:var(--gold);font-size:3em;line-height:.98;
text-align:right;white-space:nowrap;pointer-events:none}
/* escudos decorativos */
.intro__crest{position:absolute;display:block;aspect-ratio:216/262;
background:url("assets/escudo_bembeg.svg") center/contain no-repeat;opacity:.22}
.intro__crest--top{top:clamp(60px,8.6vw,150px);right:calc(var(--gut) - var(--canvas) * .05);
width:clamp(110px,11.6vw,185px)}
.intro__crest--mid{left:-8.7%;bottom:-10.3%;width:17.1%;z-index:-1;opacity:.3}
@media(max-width:900px){
.intro__grid{grid-template-columns:1fr;row-gap:clamp(50px,9vw,90px)}
.intro__manifesto{max-width:none}
.intro__lead{width:100%}
.intro__img--blend{margin-top:clamp(40px,7vw,70px);max-width:420px}
.intro__body{margin-top:clamp(34px,5vw,60px)}
.intro__frame--cork{width:80%;margin-top:clamp(44px,8vw,80px)}
.intro__crest--top{width:clamp(84px,14vw,130px);right:calc(var(--pad-x) * -1)}
.intro__script{font-size:2.2em;right:74%}
}
@media(max-width:560px){
.intro__frame--cork{width:100%;align-self:stretch}
.intro__script{position:static;display:block;text-align:left;white-space:normal;
margin-top:18px;font-size:2em}
}
/* ============================================================
ESTATE — mask reveal (rect centrado → full) + pin
============================================================ */
.estate{position:relative;z-index:2;background:#FAFAF6;height:200vh} /* track de expansión (el hold en full lo da el lock de 2s) */
.estate__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.estate__media{position:absolute;inset:0;
clip-path:inset(40% 33% 40% 33%); /* rect centrado inicial (lo scrubbea el JS) */
will-change:clip-path}
.estate__img,.estate__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.estate__video{opacity:0;transition:opacity .8s ease}
.estate__media.is-full .estate__video{opacity:1} /* el video aparece al cubrir el viewport */
/* degradado en vez de velo plano al 40%: el viñedo es claro justo donde va el
texto, y con .4 el copy blanco no llegaba a contraste legible. */
.estate__scrim{position:absolute;inset:0;
background:linear-gradient(to top,rgba(20,20,22,.88) 0%,rgba(20,20,22,.66) 38%,
rgba(20,20,22,.36) 78%,rgba(20,20,22,.3) 100%)}
/* orden del bloque: eyebrow → título → script (lugar) → copy → CTA */
.estate__content{position:absolute;left:var(--pad-x);bottom:clamp(60px,10vh,120px);
color:#fff;opacity:0;max-width:min(480px,84vw);transition:opacity .9s ease;
text-shadow:0 1px 18px rgba(20,20,22,.55)} /* despega el texto del viñedo */
.estate__media.is-full .estate__content{opacity:1} /* aparece cuando arranca el video */
.estate__eyebrow{margin-bottom:clamp(14px,1.7vw,22px)} /* estilo en el grupo compartido */
.estate__title{font-family:var(--font-display);font-weight:400;color:#fff;
font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.01em;
margin-bottom:clamp(10px,1.3vw,18px)}
.estate__title em{font-style:italic}
.estate__place{display:block;font-family:var(--font-script);color:var(--gold);
font-size:2.3em;line-height:1.15;letter-spacing:.02em;
margin-bottom:clamp(18px,2.2vw,28px)}
.estate__sub{font-size:clamp(1rem,1.1vw,1.15rem);line-height:1.85;
color:rgba(255,255,255,.88);margin-bottom:clamp(24px,3vw,38px)}
/* .estate__cta hereda la base de CTA del home (texto gold + filete) */
.estate__chevron{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:4;
color:#fff;opacity:0;pointer-events:none;transition:opacity .6s ease}
.estate__chevron.show{opacity:.85;pointer-events:auto;animation:bob 2.4s ease-in-out infinite}
.estate__chevron svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.2}
/* ============================================================
VINOS — capa que overlapa el Estate.
Jerarquía explícita: PIONERO (composición full-bleed, vino ícono)
por encima de LA LINTERNA (swiper de 7 parcelas).
============================================================ */
.vinos{z-index:5;min-height:100vh;
margin-top:-50vh} /* overlap: asoma DESPUÉS del pin fullscreen */
/* ============================================================
WINEMAKING — galería escalonada (misma composición que opción 1)
============================================================ */
.wmaking{position:relative;z-index:6;background:#FAFAF6;color:var(--navy);
padding:clamp(90px,13vh,175px) var(--pad-x)}
/* dos columnas siempre, con el mismo gutter que la grilla del legado (8.6%) */
.wmaking__wrap{max-width:var(--content-max);margin:0 auto;
display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap-2col);row-gap:clamp(40px,7vw,64px);
align-items:center}
/* g1 arriba-izquierda, g2 abajo-derecha montada encima */
.wmaking__gallery{position:relative;height:min(70vh,620px)}
.wmaking__g1,.wmaking__g2{position:absolute;overflow:hidden;background:var(--ph-1);
clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease-smooth)}
.wmaking__g1{top:0;left:0;width:62%;height:70%}
.wmaking__g2{bottom:0;right:0;width:54%;height:64%;
box-shadow:-30px -30px 60px -40px rgba(31,36,80,.4)}
.wmaking.in .wmaking__g1{clip-path:inset(0 0 0 0)}
.wmaking.in .wmaking__g2{clip-path:inset(0 0 0 0);transition-delay:.22s}
.wmaking__g1 img,.wmaking__g2 img{width:100%;height:100%;object-fit:cover;
transform:scale(1.07);transition:transform 2.4s var(--ease-smooth)}
.wmaking.in :is(.wmaking__g1,.wmaking__g2) img{transform:scale(1)}
.wmaking__text{min-width:0}
.wmaking__eyebrow{margin-bottom:20px} /* estilo en el grupo compartido */
.wmaking__title{font-family:var(--font-display);font-weight:400;color:var(--navy);
font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.01em}
.wmaking__title em{font-style:italic}
.wmaking__pull{font-family:var(--font-script);color:var(--gold);font-weight:400;
font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.2;letter-spacing:.01em;
margin:clamp(26px,3vw,40px) 0}
.wmaking__copy{color:var(--navy);opacity:.86;max-width:52ch;margin-top:clamp(28px,3.2vw,44px);
font-size:var(--fs-body);line-height:1.85;text-align:justify;text-justify:inter-word}
.wmaking__cta{margin-top:clamp(26px,3vw,42px)}
/* stagger del texto */
.wmaking__eyebrow,.wmaking__title,.wmaking__pull,.wmaking__copy,.wmaking__cta{
opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform 1s var(--ease-expo)}
.wmaking.in :is(.wmaking__eyebrow,.wmaking__title,.wmaking__pull,.wmaking__copy,.wmaking__cta){opacity:1;transform:none}
.wmaking.in .wmaking__eyebrow{transition-delay:.14s}
.wmaking.in .wmaking__title{transition-delay:.25s}
.wmaking.in .wmaking__pull{transition-delay:.36s}
.wmaking.in .wmaking__copy{transition-delay:.47s}
.wmaking.in .wmaking__cta{transition-delay:.58s}
@media(max-width:900px){
.wmaking{padding:clamp(70px,10vh,110px) var(--pad-x)}
/* el bloque no se apila: mantiene las dos columnas en todos los anchos */
.wmaking__gallery{height:min(62vh,460px)}
.wmaking__copy{text-align:left}
}
/* ============================================================
HOSPITALIDAD — foto a sangre + scrim + texto a la izquierda
============================================================ */
.hospi{position:relative;z-index:6;overflow:hidden;background:var(--ink);
min-height:min(90vh,880px);display:flex;align-items:center}
.hospi__bg{position:absolute;inset:0;z-index:0}
.hospi__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(1.07);transition:transform 2.6s var(--ease-smooth)}
.hospi.in .hospi__bg img{transform:scale(1)}
/* degradado en vez de velo plano: contraste donde va el texto, foto viva a la derecha */
.hospi__scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(20,20,22,.82) 0%,rgba(20,20,22,.68) 42%,rgba(20,20,22,.44) 100%)}
.hospi__inner{position:relative;z-index:2;width:100%;
padding:clamp(80px,12vh,150px) var(--pad-x);color:var(--cream)}
.hospi__eyebrow{margin-bottom:22px} /* estilo en el grupo compartido */
.hospi__title{font-family:var(--font-display);font-weight:400;color:var(--cream);
font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.01em;margin-bottom:26px}
.hospi__title em{font-style:italic}
.hospi__pull{font-family:var(--font-script);color:var(--gold);font-weight:400;
font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.2;letter-spacing:.01em;
max-width:24ch;margin:0 0 clamp(28px,3.4vw,44px)}
.hospi__copy{color:rgba(250,250,246,.9);max-width:52ch;
font-size:var(--fs-body);line-height:1.85;margin:0 0 clamp(30px,3.6vw,46px)}
/* stagger del texto */
.hospi__eyebrow,.hospi__title,.hospi__pull,.hospi__copy,.hospi__cta{
opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform 1s var(--ease-expo)}
.hospi.in :is(.hospi__eyebrow,.hospi__title,.hospi__pull,.hospi__copy,.hospi__cta){opacity:1;transform:none}
.hospi.in .hospi__eyebrow{transition-delay:.14s}
.hospi.in .hospi__title{transition-delay:.25s}
.hospi.in .hospi__pull{transition-delay:.36s}
.hospi.in .hospi__copy{transition-delay:.47s}
.hospi.in .hospi__cta{transition-delay:.58s}
@media(max-width:900px){
.hospi{min-height:0}
.hospi__scrim{background:linear-gradient(180deg,rgba(20,20,22,.72) 0%,rgba(20,20,22,.82) 100%)}
.hospi__inner{padding:clamp(80px,14vw,120px) var(--pad-x)}
}
/* ============================================================
HITOS — overlap blanco, grilla de 3 cards
============================================================ */
.hitos{position:relative;z-index:7;background:#fff;color:var(--navy);
/* sin overlap: Hospitalidad es una foto a sangre y el solape le comía el pie */
padding:clamp(80px,12vh,150px) var(--pad-x) clamp(90px,14vh,180px)}
/* cabecera a dos columnas: el bloque de texto a la izquierda y el enlace al
índice completo arriba a la derecha, sobre la línea de base del título */
.hitos__head{margin-bottom:clamp(50px,8vh,110px);max-width:var(--content-max);margin-inline:auto;
display:grid;grid-template-columns:1fr auto;column-gap:clamp(24px,4vw,80px);align-items:baseline}
/* celdas explícitas: sin esto el título se auto-ubicaba en la columna derecha */
.hitos__eyebrow{grid-area:1/1;margin-bottom:clamp(14px,1.8vw,22px)} /* estilo en el grupo compartido */
.hitos__title{grid-area:2/1;justify-self:start;
font-family:var(--font-display);font-weight:400;color:var(--navy);
font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.01em}
.hitos__title em{font-style:italic}
.hitos__intro{grid-area:3/1;margin-top:20px;max-width:44ch;font-family:var(--font-display);
font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.6;color:var(--navy);opacity:.7}
.hitos__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(24px,3.5vw,64px);max-width:var(--content-max);margin:0 auto}
.hito__link{display:flex;flex-direction:column;height:100%;color:var(--navy)}
.hito__link:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.hito__img{aspect-ratio:4/3;overflow:hidden;background:#23262E;margin-bottom:22px;
clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-expo)}
.hito__img img{width:100%;height:100%;object-fit:cover;
transition:transform 1.2s var(--ease-expo)}
.hito__link:hover .hito__img img{transform:scale(1.05)}
.hito__meta{display:flex;gap:14px;align-items:baseline;margin-bottom:12px}
.hito__cat,.hito__year{font-family:var(--font-ui);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.28em; /* métrica de eyebrow */
text-transform:uppercase;color:var(--navy)}
.hito__year{opacity:.5}
.hito__title{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.25rem,1.8vw,1.75rem);line-height:1.15;margin-bottom:auto}
.hito__more{margin-top:22px;align-self:flex-start}
/* reveal escalonado (mismo criterio que .vinos) */
.hito__meta,.hito__title,.hito__more{opacity:0;transform:translateY(14px);
transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)}
.hitos.reveal .hito__img{clip-path:inset(0 0 0 0)}
.hitos.reveal .hito__meta,.hitos.reveal .hito__title,.hitos.reveal .hito__more{
opacity:1;transform:none}
.hitos.reveal .hito:nth-child(1) :is(.hito__img,.hito__meta,.hito__title,.hito__more){transition-delay:.2s}
.hitos.reveal .hito:nth-child(2) :is(.hito__img,.hito__meta,.hito__title,.hito__more){transition-delay:.32s}
.hitos.reveal .hito:nth-child(3) :is(.hito__img,.hito__meta,.hito__title,.hito__more){transition-delay:.44s}
@media(max-width:900px){.vinos{margin-top:0}}
/* enlace al índice completo: columna derecha, alineado con el título */
.hitos__all{grid-area:2/2;justify-self:end}
@media(max-width:820px){.hitos{margin-top:0}
.hitos__grid{grid-template-columns:1fr;gap:50px;max-width:420px}
.hitos__head{grid-template-columns:1fr}
.hitos__eyebrow,.hitos__title,.hitos__intro,.hitos__all{grid-area:auto;justify-self:start}
.hitos__all{margin-top:clamp(24px,4vw,34px)}}
/* ============================================================
FOOTER — navy, logo blanco izq + datos
============================================================ */
.footer2{position:relative;z-index:8;background:var(--navy);color:var(--cream);
padding:clamp(70px,10vh,130px) var(--pad-x) 36px}
.footer2__top{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1fr 5fr;
gap:clamp(40px,6vw,100px);align-items:start}
.footer2__brand img{height:clamp(70px,7vw,100px);width:auto;opacity:.95}
.footer2__since{display:block;margin-top:22px;font-family:var(--font-ui);font-weight:300;
font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,243,236,.5)}
.footer2__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,50px)}
.footer2__col{display:flex;flex-direction:column;gap:13px}
.footer2__h{font-family:var(--font-ui);font-weight:300;text-transform:uppercase;letter-spacing:.24em;
font-size:11px;color:var(--gold);margin-bottom:8px; line-height: 23px;}
.footer2__col a{font-family:var(--font-ui);font-weight:300;font-size:12px;letter-spacing:.03em;
color:rgba(250,243,236,.72);transition:color .4s,padding-left .4s var(--ease-expo)}
.footer2__col a:hover{color:var(--cream);padding-left:5px}
.footer2__auth{position:relative;padding-left:16px!important}
.footer2__auth::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;
transform:translateY(-50%) rotate(45deg);border:1px solid var(--gold);transition:background .4s}
.footer2__auth:hover::before{background:var(--gold)}
.footer2__bottom{max-width:var(--content-max);margin:clamp(50px,7vw,90px) auto 0;padding-top:26px;
border-top:1px solid rgba(192,148,108,.2);display:flex;justify-content:space-between;
gap:14px 26px;flex-wrap:wrap}
.footer2__bottom span{font-family:var(--font-ui);font-weight:300;font-size:10px;letter-spacing:.1em;
color:rgba(250,243,236,.4)}
@media(max-width:860px){.footer2__top{grid-template-columns:1fr;gap:50px}
.footer2__cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer2__cols{grid-template-columns:1fr}}
}
/* ============================================================
SUBPÁGINA (la-linterna / vinos) — clara, editorial
============================================================ */
body.subpage{
background:var(--cream);color:var(--navy);font-size:var(--fs-body);line-height:1.7;overflow-x:hidden;
/* utilities */
.pull{
font-family:var(--font-script);color:var(--gold);
font-size:clamp(1.4rem,2.3vw,2.1rem);line-height:1.35;font-weight:400;letter-spacing:.01em;
}
.body-copy{color:var(--navy);opacity:.86;max-width:52ch}
.small-meta{font-family:var(--font-ui);font-weight:300;font-size:10.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--gray)}
/* CTA — texto con línea gold que se dibuja (Villa d'Este / Reschio) */
/* CTA botón con borde gold (hero / hospitalidad) */
/* ---- Placeholder blocks (maqueta) ---- */
.ph{
position:relative;overflow:hidden;background:var(--ph-1);
background-image:
linear-gradient(135deg,var(--ph-2) 0%,var(--ph-1) 45%,var(--ph-black) 100%);
}
.ph::after{ /* leve textura de líneas para no ser plano */
content:"";position:absolute;inset:0;opacity:.35;
background:
repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.015) 22px 23px);
pointer-events:none;
}
.ph__tag{
position:absolute;left:0;bottom:0;z-index:2;
display:flex;align-items:center;gap:9px;
font-family:var(--font-ui);font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:rgba(250,250,246,.55);
padding:12px 15px;
}
.ph__tag::before{content:"";width:6px;height:6px;transform:rotate(45deg);
background:var(--gold);display:inline-block}
/* la imagen interior que hace parallax/reveal */
.reveal-media{overflow:hidden}
.reveal-media > .ph{width:100%;height:100%}
/* ============================================================
PRELOADER
============================================================ */
.loader{
position:fixed;inset:0;z-index:2000;background:var(--navy);
display:grid;place-content:center;place-items:center;gap:26px;
}
.loader__mark{opacity:0}
.loader__logo{height:clamp(150px,22vw,240px);width:auto}
/* Losange / rombo de marca (SVG) */
.losange{display:block}
.losange path,.losange line{stroke:var(--gold);fill:none;stroke-width:1.2}
/* ============================================================
HEADER (index-style) — transparente + franja blanca
En subpágina arranca sólido (no hay hero oscuro).
============================================================ */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:1600;color:#fff;min-height:72px;
background:transparent;
display:flex;align-items:center;justify-content:space-between;
padding:8px var(--pad-x);transition:color .4s ease,background .4s ease}
.hdr.is-solid{color:var(--navy);background:#fafaf6;box-shadow:0 1px 0 rgba(31,36,80,.08)}
&.menu-open .hdr{color:var(--navy);transform:none!important;box-shadow:none}
/* logo centrado: blanco sobre el hero · color con la franja blanca · oculto con el menú abierto */
.hdr__logo-link{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
height:82px;display:block;z-index:2}
.hdr__logo{position:static;transform:none;display:block;
height:100%;width:auto;pointer-events:none;transition:opacity .4s ease}
.hdr__logo--color{opacity:0}
.hdr.is-solid .hdr__logo--color{opacity:1}
&.menu-open .hdr .hdr__logo{opacity:0}
/* lang: globo + chevron + dropdown horizontal */
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:8px}
.lang svg{stroke:currentColor;fill:none;stroke-width:1.2}
.globe{width:20px;height:20px}
.chev{width:12px;height:12px;transition:transform .4s var(--ease-expo)}
.lang.is-open .chev{transform:rotate(180deg)}
.lang__row{position:absolute;top:calc(100% + 14px);left:0;display:flex;align-items:center;gap:10px;
white-space:nowrap;opacity:0;transform:translateY(-6px);pointer-events:none;
transition:opacity .4s var(--ease-expo),transform .4s var(--ease-expo)}
.lang.is-open .lang__row{opacity:1;transform:translateY(0);pointer-events:auto}
.lang__row button{font-family:var(--font-display);font-style:italic;font-size:clamp(15px,1.4vw,19px);
opacity:.6;transition:opacity .3s}
.lang__row button:hover,.lang__row button.is-active{opacity:1}
.lang__row button.is-active{text-decoration:underline;text-underline-offset:5px}
.lang__row span{opacity:.4;font-style:italic}
/* hamburguesa → X */
.burger{width:34px;height:16px;position:relative;display:block}
.burger span{position:absolute;left:0;width:100%;height:1.6px;background:currentColor;
transition:transform .4s var(--ease-expo),opacity .3s}
.burger span:nth-child(1){top:2px}
.burger span:nth-child(2){bottom:2px}
.burger.is-open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.burger.is-open span:nth-child(2){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
/* ============================================================
MENÚ FULLSCREEN (derecha → izquierda)
============================================================ */
/* ============================================================
HERO
============================================================ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--ink)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg video,.hero__bg .ph{width:100%;height:100%;object-fit:cover}
.hero__bg{transform:scale(1.06);transform-origin:center} /* ken burns base */
.hero__overlay{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(20,20,22,.42) 0%,rgba(20,20,22,.18) 40%,rgba(31,36,80,.55) 100%)}
.hero__crest{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:3;opacity:0}
.hero__inner{
position:absolute;z-index:3;left:var(--pad-x);bottom:clamp(56px,9vh,120px);
right:var(--pad-x);color:var(--cream);
}
.hero__eyebrow{color:var(--gold);margin-top:24px;opacity:0}
.hero h1{font-size:clamp(2rem,4.2vw,3.7rem);color:var(--cream);max-width:none;
line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
.hero .line{overflow:hidden;display:block}
.hero .line > span{display:block;will-change:transform}
.hero__bold{font-weight:700} /* Minion Bold — 1ª línea */
.hero__ital{font-style:italic;font-weight:400}/* Minion Italic light — 2ª línea */
.hero__sub{margin-top:24px;max-width:44ch;color:rgba(250,250,246,.9);
font-size:clamp(15px,1.1vw,18px);opacity:0;font-weight:300;line-height:1.65}
/* scroll cue a la derecha */
.hero__scroll{position:absolute;z-index:3;bottom:34px;right:var(--pad-x);
display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--cream);opacity:.75}
.hero__scroll .eyebrow{color:rgba(250,250,246,.7);font-size:var(--fs-eyebrow);font-family:var(--font-ui);
text-transform:uppercase;writing-mode:vertical-rl;letter-spacing:.3em}
.hero__scroll-line{width:1px;height:52px;background:linear-gradient(var(--gold),transparent);
transform-origin:top;animation:scrollpulse 2.4s var(--ease-smooth) infinite}
/* ============================================================
SECTION SHELL
============================================================ */
section{position:relative}
.wrap{padding:var(--section-gap) var(--pad-x);margin:0 auto}
.bg-sand{background:var(--sand)}
.bg-cream{background:var(--cream)}
/* Divider con losange (EL detalle de marca) */
.divider{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 auto;
max-width:min(640px,calc(100% - 2 * var(--pad-x)))}
.divider__line{height:1px;background:var(--gold-soft);flex:1}
.divider__seal{height:clamp(84px,9vw,120px);width:auto;flex:none}
/* ---- Primitivos de marca: rombo / losange ---- */
/* hairline con terminales en rombo (encierra pull-quotes) */
.rule-rombo{position:relative;height:1px;background:var(--gold-soft)}
.rule-rombo::before,.rule-rombo::after{content:"";position:absolute;top:50%;
width:7px;height:7px;background:var(--gold);transform:translateY(-50%) rotate(45deg)}
.rule-rombo::before{left:0}
.rule-rombo::after{right:0}
.pullblock{margin:36px 0;display:flex;flex-direction:column;gap:24px}
/* pull-quote en versalitas serif (oro) — variante patrimonial */
.pull--caps{font-family:var(--font-display);font-style:normal;text-transform:uppercase;
letter-spacing:.08em;color:var(--gold);font-size:clamp(1rem,1.4vw,1.35rem);
line-height:1.5;font-weight:400}
/* losange lattice (retícula del escudo) — marca sutil */
.lattice{width:38px;height:30px;opacity:.5;
clip-path:polygon(0 0,100% 0,50% 100%);
background:
repeating-linear-gradient(45deg,transparent 0 5px,var(--gold) 5px 5.9px),
repeating-linear-gradient(-45deg,transparent 0 5px,var(--gold) 5px 5.9px)}
.lattice--center{margin:22px auto 0}
/* Reveal helpers (JS añade estados) */
[data-reveal]{will-change:transform,opacity}
.mask-line{overflow:hidden;display:block}
.mask-line > span{display:block}
/* ---- LEGADO: 2 columnas overlapping ---- */
.legado{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}
.legado__media{position:relative;aspect-ratio:4/5;max-height:78vh}
.legado__media .reveal-media{position:absolute;inset:0}
.legado__media .ph{filter:grayscale(1) contrast(1.05)} /* foto B/N */
.legado__badge{position:absolute;right:-34px;bottom:34px;z-index:4;
background:var(--cream);padding:20px 26px;text-align:center;box-shadow:0 24px 60px -30px rgba(31,36,80,.5)}
.legado__badge .n{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--navy)}
.legado__badge .l{margin-top:8px}
.legado__text{max-width:470px}
.legado__text .eyebrow{margin-bottom:26px}
.legado__text h2{margin-bottom:30px;max-width:none;white-space:nowrap}
.legado__text .pull{margin:14px 0}
.legado__text .body-copy{max-width:none}
.legado__text .body-copy + .body-copy{margin-top:18px}
.legado__text .cta{margin-top:40px}
@media(max-width:900px){.legado{grid-template-columns:1fr}.legado__badge{right:20px}
.legado__text{max-width:none}.legado__text h2{white-space:normal}}
/* ---- ESTATE: full-bleed con dato gigante overlapping ---- */
.estate{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.estate__bg{position:absolute;inset:0;z-index:0}
.estate__bg .ph{width:100%;height:118%;position:absolute;top:-9%} /* margen para parallax */
.estate__scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(20,20,22,.62),rgba(20,20,22,.15) 55%,transparent)}
.estate__inner{position:relative;z-index:2;color:var(--cream);padding:0 var(--pad-x);margin:0 auto;width:100%}
/* número delicado con MSNM debajo, agrupado en la columna izquierda */
.estate__num{display:flex;flex-direction:column;align-items:flex-start;margin:18px 0 26px;line-height:1}
.estate__num-n{font-family:var(--font-display);font-weight:400;
font-size:clamp(3.2rem,6vw,5.2rem);color:var(--cream);line-height:.92;letter-spacing:-.01em}
.estate__num-u{font-family:var(--font-ui);font-weight:300;
font-size:clamp(10px,.9vw,12px);letter-spacing:.42em;text-transform:uppercase;
color:var(--gold);margin-top:12px;padding-left:.14em}
.estate__copy{max-width:40ch;margin-top:0;color:rgba(250,250,246,.9)}
.estate .eyebrow{margin-bottom:18px}
.estate h2{color:var(--cream);margin-bottom:0;font-size:var(--fs-h2)}
.estate__inner .cta{margin-top:30px!important}
/* ---- VINOS: 2 bottleshots verticales, centrados ---- */
#vinos .wrap{padding-top:clamp(48px,6vh,84px);padding-bottom:clamp(48px,6vh,84px)}
.vinos__head{text-align:center;margin-bottom:clamp(24px,3.5vh,48px)}
.vinos__head h2{margin:18px 0 20px;font-size:var(--fs-h2)}
.vinos__grid{display:grid;grid-template-columns:repeat(3,minmax(0,300px));
justify-content:center;gap:clamp(36px,5vw,100px)}
.wine{display:flex;flex-direction:column;align-items:center;text-align:center;scroll-margin-top:120px}
/* bottleshot 3:4 — angosto y centrado, entra en viewport */
.wine__media{aspect-ratio:3/4;width:100%;max-width:280px;max-height:48vh;
margin-inline:auto;overflow:hidden;position:relative}
.wine__media .ph{width:100%;height:100%;transition:transform 1.3s var(--ease-expo)}
.wine:hover .wine__media .ph{transform:scale(1.06)}
.wine__hair{height:1px;width:100%;max-width:280px;background:var(--gold);margin:20px 0 14px;transform-origin:center}
.wine__k{display:flex;flex-direction:column;align-items:center;gap:6px}
.wine h3{font-size:var(--fs-h3);font-weight:400}
.wine__tag{color:var(--gold)}
.wine__desc{margin-top:14px;color:var(--navy);opacity:.82;max-width:36ch}
.wine__note{margin-top:16px}
@media(max-width:820px){.vinos__grid{grid-template-columns:minmax(0,300px);gap:60px}}
/* ---- WINEMAKING: galería overlapping + firmas ---- */
.wm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.wm__gallery{position:relative;height:min(70vh,620px)}
.wm__g1{position:absolute;top:0;left:0;width:62%;height:70%;overflow:hidden}
.wm__g2{position:absolute;bottom:0;right:0;width:54%;height:64%;overflow:hidden;
box-shadow:-30px -30px 60px -40px rgba(31,36,80,.4)} /* overlap */
.wm__g1 .ph,.wm__g2 .ph{width:100%;height:100%}
.wm__text .pull{margin:30px 0}
.wm__text h2{margin-bottom:26px;font-size:var(--fs-h2)}
.wm__sign{margin-top:44px;display:flex;gap:46px;flex-wrap:wrap}
.wm__sign .n{font-family:var(--font-display);font-size:22px;color:var(--navy)}
.wm__sign .r{margin-top:4px}
@media(max-width:900px){.wm{grid-template-columns:1fr}.wm__gallery{height:70vh}}
/* ---- HOSPITALIDAD: full-bleed cálido ---- */
.hosp{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;background:var(--sand)}
.hosp__bg{position:absolute;inset:0;z-index:0}
.hosp__bg .ph{width:100%;height:112%;position:absolute;top:-6%}
.hosp__scrim{position:absolute;inset:0;z-index:1;background:rgba(20,20,22,.34)}
.hosp__inner{position:relative;z-index:2;color:var(--cream);text-align:center;
max-width:min(760px,calc(100% - 2 * var(--pad-x)));margin:0 auto}
.hosp__inner .eyebrow{margin-bottom:26px}
.hosp__inner h2{color:var(--cream);font-size:var(--fs-h2);margin-bottom:26px}
.hosp__inner .pull{margin:0 auto 40px;max-width:24ch}
/* ---- NEWS ---- */
.news__head{display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:clamp(40px,5vw,70px);gap:20px;flex-wrap:wrap}
.news__head h2{font-size:var(--fs-h2)}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px)}
.card{cursor:pointer}
.card__media{aspect-ratio:4/3;overflow:hidden}
.card__media .ph{width:100%;height:100%;transition:transform 1.3s var(--ease-expo)}
.card:hover .card__media .ph{transform:scale(1.06)}
.card__meta{display:flex;gap:14px;margin:20px 0 12px}
.card h3{font-size:clamp(19px,1.7vw,26px);font-weight:400}
.card__link{margin-top:16px}
@media(max-width:860px){.news__grid{grid-template-columns:1fr;gap:44px}}
/* ============================================================
FOOTER — navy, logo blanco izq + datos (index-style)
============================================================ */
.footer2{position:relative;z-index:8;background:var(--navy);color:var(--cream);
padding:clamp(70px,10vh,130px) var(--pad-x) 36px}
.footer2__top{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1fr 5fr;
gap:clamp(40px,6vw,100px);align-items:start}
.footer2__brand img{height:clamp(70px,7vw,100px);width:auto;opacity:.95}
.footer2__since{display:block;margin-top:22px;font-family:var(--font-ui);font-weight:300;
font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,243,236,.5)}
.footer2__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,50px)}
.footer2__col{display:flex;flex-direction:column;gap:13px}
.footer2__h{font-family:var(--font-ui);font-weight:300;text-transform:uppercase;letter-spacing:.24em;
font-size:11px;color:var(--gold);margin-bottom:8px; line-height: 23px;}
.footer2__col a{font-family:var(--font-ui);font-weight:300;font-size:12px;letter-spacing:.03em;
color:rgba(250,243,236,.72);transition:color .4s,padding-left .4s var(--ease-expo)}
.footer2__col a:hover{color:var(--cream);padding-left:5px}
.footer2__auth{position:relative;padding-left:16px!important}
.footer2__auth::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;
transform:translateY(-50%) rotate(45deg);border:1px solid var(--gold);transition:background .4s}
.footer2__auth:hover::before{background:var(--gold)}
.footer2__bottom{max-width:var(--content-max);margin:clamp(50px,7vw,90px) auto 0;padding-top:26px;
border-top:1px solid rgba(192,148,108,.2);display:flex;justify-content:space-between;
gap:14px 26px;flex-wrap:wrap}
.footer2__bottom span{font-family:var(--font-ui);font-weight:300;font-size:10px;letter-spacing:.1em;
color:rgba(250,243,236,.4)}
@media(max-width:860px){.footer2__top{grid-template-columns:1fr;gap:50px}
.footer2__cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer2__cols{grid-template-columns:1fr}}
/* ============================================================
LA LINTERNA — página de vino (El Tomillo)
============================================================ */
.wrap-narrow{margin:0 auto;padding:0 var(--pad-x)} /* contenedor sobre el eje */
/* ---- Presentación del vino ---- */
.lw-hero{position:relative;overflow:hidden;padding:clamp(140px,17vh,220px) 0 clamp(70px,9vw,130px)}
.lw-hero__glow{position:absolute;top:-8%;right:4%;width:min(58vw,700px);height:min(58vw,700px);z-index:0;pointer-events:none;
background:radial-gradient(circle,rgba(192,148,108,.20),rgba(192,148,108,0) 62%)}
.lw-hero__inner{position:relative;z-index:1;margin:0 auto;padding:0 var(--pad-x);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,96px);align-items:center}
/* mismo cuerpo que los h2 del index; el bloque entero baja de escala con él */
.lw-hero__title{font-size:var(--fs-h2);line-height:1.14;margin:0 0 clamp(22px,2.6vw,34px)}
.lw-hero__title em{ /* varietal: Minion en versalitas, no itálica */
display:block;font-style:normal;font-weight:inherit;font-size:.62em;
font-variant:all-small-caps;text-transform:uppercase;letter-spacing:.28em;
margin:clamp(4px,.6vw,10px) 0 0}
.lw-hero__meta{margin-bottom:9px;font-weight:400} /* la Blair sólo trae 300 y 500: el 400 resuelve en la media */
.lw-hero__text .pull{margin:clamp(24px,2.8vw,38px) 0 clamp(20px,2.4vw,30px)}
.lw-hero__text .body-copy{margin-bottom:clamp(26px,3vw,38px)}
.lw-hero__bottle{aspect-ratio:3/4.2;max-height:80vh;background:var(--ph-black)}
.lw-hero__bottle img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(max-width:860px){.lw-hero__inner{grid-template-columns:1fr}.lw-hero__bottle{aspect-ratio:4/3;max-height:none}}
/* ---- Cata + ficha técnica ---- */
.lw-specs{padding:clamp(70px,9vw,130px) 0;background:var(--cream)}
.lw-sheet{display:grid;grid-template-columns:48% 1fr;gap:clamp(40px,6vw,110px);align-items:center}
/* el marco reserva su franja derecha; la botella se apoya sobre ese borde,
igual que Pionero sobre la costura crema/foto. */
.lw-sheet__box{position:relative;border:1px solid var(--gold-soft);
padding:clamp(44px,5.5vw,80px) 33% clamp(44px,5.5vw,80px) 16%;
min-height:clamp(420px,42vw,640px);display:flex;align-items:center}
.lw-sheet__bottle{position:absolute;z-index:2;left:100%;top:50%;
transform:translate(-65%,-50%);pointer-events:none}
/* altura explícita, no en %: un porcentaje resolvería contra el alto natural del PNG */
.lw-sheet__bottle img{display:block;height:clamp(330px,34vw,520px);width:auto;max-width:none;
filter:drop-shadow(0 28px 44px rgba(31,36,80,.2))}
.lw-field{padding:12px 0}
.lw-field:first-child{padding-top:30px}
.lw-field:last-child{padding-bottom:0}
.lw-data__k{display:block;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:500;color:var(--gold);margin-bottom:9px}
.lw-data__v{display:block;font-family:var(--font-display);font-size:clamp(15px,1.1vw,18px);color:var(--navy);line-height:1.45}
.lw-field__years{color:var(--gray);letter-spacing:.04em}
.lw-tasting .eyebrow{margin-bottom:22px}
.lw-tasting__copy{color:var(--navy);opacity:.9;line-height:1.85;max-width:58ch;margin-bottom:clamp(48px,5vw,74px);text-align:justify}
.lw-tasting__cite{font-family:var(--font-display);color:var(--navy);line-height:1.6}
.lw-tasting__cite strong{font-weight:600}
.lw-tasting__cite em{font-style:italic}
@media(max-width:820px){
.lw-sheet{grid-template-columns:1fr;gap:clamp(40px,9vw,70px)}
/* apilado: la botella entra en el flujo, arriba de la ficha */
.lw-sheet__box{padding:clamp(36px,7vw,56px) clamp(24px,5vw,40px);min-height:0;
flex-direction:column;gap:clamp(28px,6vw,46px)}
.lw-sheet__bottle{position:static;transform:none;order:-1}
.lw-sheet__bottle img{height:clamp(280px,52vw,420px);margin:0 auto}}
/* ---- La finca ---- */
.lw-finca{background:var(--sand);color:var(--navy);padding:clamp(90px,12vw,170px) 0;
border-block:1px solid var(--gold-soft)}
.lw-finca__wrap{margin:0 auto;padding:0 var(--pad-x)}
.lw-finca h2{color:var(--navy);margin:16px 0 8px}
.lw-finca__meta{color:var(--gray)}
.lw-finca__grid{display:grid;grid-template-columns:1fr 1fr;
column-gap:var(--gap-2col);row-gap:clamp(34px,6vw,90px);align-items:start}
.lw-finca__col{display:flex;flex-direction:column}
/* apaisada 7:5, con tope de 523px de alto (el object-fit:cover del img
mantiene el encuadre cuando el tope recorta) */
.lw-finca__media{aspect-ratio:7/5;max-height:523px;overflow:hidden}
.lw-finca__media img{width:100%;height:100%;object-fit:cover}
.lw-finca__copy{color:var(--navy);opacity:.82;margin-bottom:36px;max-width:56ch;line-height:1.8}
.lw-finca__copy:last-child{margin-bottom:0}
.lw-finca__data{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px;margin-top:auto}
.lw-finca__data > div{display:flex;flex-direction:column;border-top:1px solid rgba(192,148,108,.28);padding-top:14px}
.lw-finca__data .lw-data__k{color:var(--gold);margin-bottom:8px}
.lw-finca__data .lw-data__v{color:var(--navy);opacity:.9}
@media(max-width:860px){.lw-finca__grid{grid-template-columns:1fr}.lw-finca__data{grid-template-columns:1fr 1fr}}
/* ---- Tabs (El lugar / Perfil del suelo) ---- */
.lw-tabs{display:flex;gap:clamp(22px,3vw,40px);margin:clamp(28px,3.4vw,42px) 0 clamp(26px,3vw,38px);border-bottom:1px solid rgba(192,148,108,.28)}
/* sin encabezado arriba, el padding de la sección ya da el aire */
.lw-finca__wrap > .lw-tabs:first-child{margin-top:0}
/* ---- Encabezado de panel: título serif + bajada en script (los 3 tabs) ---- */
.lw-phead{margin-bottom:clamp(20px,2.4vw,32px)}
.lw-phead__title:only-child{margin-bottom:0}
.lw-phead__title{font-family:var(--font-display);font-weight:400;color:var(--navy);
font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:-.01em}
.lw-phead__sub{font-family:var(--font-script);color:var(--gold);
font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.2;letter-spacing:.02em;margin-top:4px}
.lw-tab{background:none;border:0;cursor:pointer;padding:0 0 14px;position:relative;
font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:300;
color:rgba(31,36,80,.5);transition:color .4s}
.lw-tab:hover{color:rgba(31,36,80,.85)}
.lw-tab.is-active{color:var(--navy)}
.lw-tab::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--gold);
transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-expo)}
.lw-tab.is-active::after{transform:scaleX(1)}
.lw-tab:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.lw-tabpanel{display:none}
.lw-tabpanel.is-active{display:block;animation:lwFade .55s var(--ease-expo)}
.lw-finca__quote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,1.55vw,1.45rem);
line-height:1.5;color:var(--navy);max-width:34ch;margin-bottom:24px}
.lw-finca__rule{display:block;width:56px;height:2px;background:var(--gold);margin-bottom:30px}
/* ---- Perfil del suelo (dentro de la finca, fondo navy) ---- */
.lw-soil__rows{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px)}
.lw-soil__row{display:flex;align-items:center;gap:clamp(20px,2.4vw,32px)}
.lw-soil__swatch{flex:none;width:clamp(96px,9vw,140px);aspect-ratio:1;border:1px solid var(--gold-soft);background-color:#faf7f0}
.lw-soil__swatch--roots{background-image:radial-gradient(rgba(120,120,120,.5) 1px,transparent 1.5px);background-size:8px 8px}
.lw-soil__swatch--s1{background-image:radial-gradient(rgba(120,120,120,.28) 6px,transparent 7px);background-size:30px 30px;background-position:center}
.lw-soil__swatch--s2{background-image:radial-gradient(rgba(120,120,120,.22) 4px,transparent 5px);background-size:20px 20px}
.lw-soil__info{padding-left:clamp(18px,2.2vw,28px)}
.lw-soil__info h4{font-family:var(--font-display);font-style:italic;font-size:clamp(19px,1.8vw,26px);color:var(--navy);margin-bottom:6px}
.lw-soil__depth{font-style:normal;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--gold)}
.lw-soil__lead{color:rgba(31,36,80,.86)}
.lw-soil__info p{color:rgba(31,36,80,.78);line-height:1.6}
@media(max-width:560px){.lw-soil__row{gap:18px}.lw-soil__swatch{width:80px}}
/* ---- Hero: línea (nombre de gama) ---- */
.lw-hero__line{font-size:13px;letter-spacing:.34em;margin-bottom:14px}
/* ============================================================
WINEMAKING — título + banda (Brunello DNA) + swiper sistemas
============================================================ */
.wmk-open{background:var(--cream);padding:clamp(150px,19vh,230px) 0 0}
.wmk-open__head{text-align:center;padding:0 var(--pad-x);margin-bottom:clamp(64px,9vh,120px)}
.wmk-open__head .eyebrow{margin-bottom:6px}
.wmk-open__title{color:var(--navy);font-size:var(--fs-title);line-height:1.08}
.wmk-open__title em{font-style:italic;font-weight:inherit}
/* banda horizontal — mask reveal centro→afuera (data-expand) */
.wmk-band{width:100%;overflow:hidden;aspect-ratio:16/6.4;will-change:clip-path}
.wmk-band img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.wmk-copy{background:var(--cream);max-width:min(760px,calc(100% - 2 * var(--pad-x)));
margin:0 auto;padding:clamp(70px,11vw,150px) 0;text-align:center}
.wmk-copy__p{font-family:var(--font-display);color:var(--navy);
font-size:1em;line-height:1.6; text-align:justify;}
.wmk-copy__p + .wmk-copy__p{margin-top:clamp(22px,3vw,34px)}
.wmk-gal{background:var(--cream);padding:0 0 clamp(90px,13vw,180px)}
.wmk-gal__head{margin:0 auto clamp(30px,4vw,50px);padding:0 var(--pad-x)}
.wmk-gal__head .eyebrow{margin-bottom:0}
/* tira horizontal full-width (scroll nativo, snap) — 3ra imagen se corta a la mitad */
.wmk-strip{display:flex;gap:clamp(14px,1.6vw,26px);overflow-x:auto;
padding:0 0 6px var(--pad-x);scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.wmk-strip::-webkit-scrollbar{display:none}
.wmk-strip:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.wmk-slide{flex:0 0 clamp(320px,38vw,660px);position:relative;margin:0;scroll-snap-align:start}
.wmk-slide__media{aspect-ratio:4/5;overflow:hidden;background:#e7e4dd}
.wmk-slide__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease-expo)}
.wmk-slide:hover .wmk-slide__media img{transform:scale(1.04)}
.wmk-slide__k{position:absolute;top:0;left:0;z-index:2;
font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.18em;font-size:11px;
color:#fff;background:rgba(20,20,22,.34);
padding:12px 16px;opacity:0;transform:translateY(-8px);
transition:opacity .45s var(--ease-expo),transform .45s var(--ease-expo)}
.wmk-slide:hover .wmk-slide__k,.wmk-slide:focus-within .wmk-slide__k{opacity:1;transform:translateY(0)}
@media(max-width:720px){.wmk-slide{flex:0 0 82vw}}
/* ============================================================
HOSPITALIDAD — grilla masonry de experiencias + CTA reservas
============================================================ */
.hosp-exp{background:var(--cream);padding:0 var(--pad-x) clamp(100px,15vw,200px)}
.hosp-exp__head{max-width:var(--content-max);margin:0 auto clamp(40px,5vw,72px);text-align:center}
.hosp-grid{column-count:3;column-gap:clamp(24px,3vw,56px);max-width:var(--content-max);margin:0 auto}
.hosp-card{display:block;break-inside:avoid;margin-bottom:clamp(40px,5vw,80px);color:var(--navy)}
.hosp-card__media{overflow:hidden;background:#e7e4dd;margin-bottom:18px}
.hosp-card__media.is-tall{aspect-ratio:3/4}
.hosp-card__media.is-mid{aspect-ratio:4/5}
.hosp-card__media.is-sq{aspect-ratio:1/1}
.hosp-card__media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.4s var(--ease-expo)}
.hosp-card:hover .hosp-card__media img{transform:scale(1.04)}
.hosp-card__k{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.2rem,1.6vw,1.55rem);line-height:1.2;margin-bottom:8px}
.hosp-card__d{font-size:14px;line-height:1.6;color:var(--navy);opacity:.72;max-width:32ch}
@media(max-width:900px){.hosp-grid{column-count:2}}
@media(max-width:560px){.hosp-grid{column-count:1;max-width:440px}}
.hosp-reserve{text-align:center;margin-top:clamp(30px,5vw,60px)}
/* estilo en el grupo compartido de CTA */
/* ============================================================
LEGADO — grilla desestructurada (imágenes + textos destacados)
============================================================ */
.leg{background:var(--cream);padding:clamp(50px,8vw,110px) var(--pad-x) clamp(100px,15vw,200px)}
.leg__inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;
gap:clamp(72px,12vw,190px)}
.leg-row{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,100px);align-items:center}
.leg-row--flip{grid-template-columns:.85fr 1.15fr}
.leg-row--flip .leg-row__media{order:2}
.leg-row__media{overflow:hidden;background:#e7e4dd;aspect-ratio:4/5}
.leg-row__media.is-wide{aspect-ratio:5/4}
.leg-row__media--offset{margin-top:clamp(24px,6vw,90px)}
.leg-row__media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.4s var(--ease-expo)}
.leg-row:hover .leg-row__media img{transform:scale(1.03)}
.leg-quote{font-family:var(--font-display);color:var(--navy);
font-size:clamp(1.6rem,3vw,2.55rem);line-height:1.28;letter-spacing:-.01em}
.leg-quote em{font-style:italic}
.leg-row__copy{color:var(--navy);opacity:.85;line-height:1.85;
font-size:clamp(1.02rem,1.2vw,1.2rem);max-width:40ch}
.leg-feature{text-align:center;max-width:24ch;margin:0 auto}
.leg-feature .leg-quote{font-size:clamp(1.8rem,3.8vw,3.1rem);line-height:1.24}
@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}
}
/* ============================================================
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{font-family:var(--font-ui);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.28em; /* métrica de eyebrow */
text-transform:uppercase;color:var(--navy)}
.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}
.ht-cap{margin:14px auto 0;padding:0 var(--pad-x);
font-family:var(--font-ui);font-weight:300;font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--gray)}
/* ---- 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{font-family:var(--font-ui);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.28em;text-transform:uppercase;
color:var(--navy);
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;font-family:var(--font-ui);font-weight:300;
font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
/* 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;
font-family:var(--font-ui);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.28em; /* métrica de eyebrow */
text-transform:uppercase}
.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);
font-family:var(--font-ui);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.28em; /* métrica de eyebrow */
text-transform:uppercase;color:var(--navy);opacity:.55;
margin-top:clamp(20px,3vw,44px)}
.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}
}
}