y "de espíritu emprendedor" cae junto. El espacio antes de ese
es a propósito: sin él las dos palabras quedan pegadas al ocultarlo. En desktop no se ve, porque cae a final de línea. */ .intro__script__cut{display:none} } /* ---- Variante de index2.html (body.home2) ---------------------------- Tres cosas, y las tres cuelgan de .home2 —que suma especificidad sobre las reglas de arriba— para no tocar index.html: 1. Legado monta sobre el Manifiesto. El hero ya queda quieto mientras la lámina lo tapa; Legado repite el gesto un piso más arriba, así que el tramo deja de leerse como una lista de bloques que se empujan y pasa a leerse como planos apilados: cada capa entra cubriendo la anterior. 2. Legado reducido a dos piezas: la columna de texto (eyebrow, título, bajada y CTA) enfrentada al marco del descorche, centrados entre sí. Salen la barrica, los dos párrafos largos y la foto de familia: el bloque queda sostenido por el vacío y no por la cantidad de material. 3. La entrada pasa a GSAP/ScrollTrigger: el CSS deja de esconder nada y sólo desarma el fade de la base para no pelear con el script. Por debajo de 900px la grilla ya colapsa a una columna y valen las medidas originales, así que cada override que depende de las dos columnas va acotado a min-width:901px. -------------------------------------------------------------------- */ &.home2{ /* ---- 1. El plano de Legado trepa sobre la lámina ---- El pin del Manifiesto dura 100vh más que su secuencia: ese viewport de más no es tiempo muerto, es el riel por el que Legado sube. El margen negativo lo devuelve, así que el documento no cambia de largo y el pin se suelta exactamente cuando Legado terminó de taparlo: ni antes —se vería la lámina irse sola— ni después —quedaría trabada abajo—. El barrido de la frase no se entera: el JS de index2 le descuenta ese viewport al track, así que la frase cierra antes de empezar a taparse. */ .mf{height:320vh} .intro{margin-top:-100vh; /* Mientras sube tiene que cubrir el viewport entero: con Legado midiendo menos de 100vh, sobre el final asomaría la lámina por debajo del plano. Por eso el 100vh no se toca. Lo que sí cambió es dónde cae el sobrante. Antes el bloque quedaba pegado arriba y todo el aire libre se juntaba al pie —y al acortarse la columna de texto ese hueco creció hasta leerse como un salto entre Legado y Estate—. Ahora la sección centra su contenido: el mismo sobrante se reparte arriba y abajo, así que el hueco de abajo se parte al medio. El de arriba no se ve: es el canto que va tapando la lámina mientras el plano sube. */ min-height:100vh; display:flex;flex-direction:column;justify-content:center; /* El pie no reserva aire propio —lo pone el centrado—, pero sí descuenta la franja que Estate va a taparle al subir. Sin ese descuento el contenido se centra contra el alto completo y la cola de la columna —el CTA— cae dentro del solape y desaparece. Con él, el centrado se calcula sobre lo que queda a la vista. El fallback en 0px es para las pantallas de menos de 1200px de alto, donde Estate no sube. */ padding-bottom:calc(clamp(30px,3.5vw,60px) + var(--estate-overlap,0px)); /* Las dos superficies son el mismo crema, así que el canto del plano no existe por color: lo dibujan un filo de 1px y una sombra de contacto. Corta y pegada al borde, no difusa: sobre crema una sombra ancha no lee como sombra, lee como niebla, y le baja el contraste al renglón del Manifiesto que todavía está a la vista. Pegada al canto dice lo único que tiene que decir —cuál de las dos hojas está encima—. Sin oro: el único momento dorado de este tramo es el filete del Manifiesto, y un segundo acento a un viewport de distancia se lo comería. */ box-shadow:0 -1px 0 rgba(31,36,80,.10),0 -14px 24px -14px rgba(31,36,80,.16)} /* El eyebrow y el título ahora viven dentro de la columna, así que la grilla arranca pegada al borde superior del bloque. */ .intro__grid{margin-top:0} /* Una sola línea. El título mide 407px contra los 475 de la columna, así que entra sin forzar nada; el nowrap es el seguro de que no se parta en un ancho intermedio, donde quedaría cortado en cualquier palabra. */ /* El nowrap es el seguro de que el título no se parta en un ancho intermedio. Pero en celular se volvía en contra: --fs-h2 es clamp(2rem,3.4vw,2.5rem) y por debajo de ~940px queda clavado en su mínimo de 32px, mientras la columna —que es 80vw— sí se sigue achicando. Resultado: a 411px el título pedía 348px contra los 329px de la columna y se pasaba de la medida del párrafo de abajo. El min() lo ata al viewport: la línea mide ~10.9em, así que 7.1vw la deja siempre dentro del 80vw de la columna, en cualquier ancho de teléfono. De ~450px para arriba el 7.1vw supera al token y gana --fs-h2, así que en desktop no cambia nada. */ .intro__title{max-width:none;white-space:nowrap; font-size:min(var(--fs-h2),7.1vw)} @media(min-width:901px){ /* Las dos columnas se centran entre sí: el texto queda a media altura del marco en lugar de colgar del techo. */ .intro__grid{align-items:center} /* El 68% servía cuando la bajada era el único texto de la columna y su recorte dibujaba una silueta. Ahora abajo hay cuerpo y destacado, los tres justificados: con dos medidas distintas y el mismo margen izquierdo, el bloque se leía como dos columnas encimadas. Una sola medida para toda la escalera. */ /* 450px fijos (28.125rem): mismo ancho que .wmaking__text en Winemakers, para que las dos columnas de texto del home midan igual. El título ya va con nowrap arriba y mide 407px, así que entra sin partirse. .intro__body es un bloque normal y llena el 100% de esos 450px solo, pero .intro__lead trae width:63% de la regla base —pensada para cuando la columna medía otra cosa— y hay que pisarlo, si no el párrafo queda angosto dentro de la caja de 450px. */ .intro__col--left{width:28.125rem} .intro__lead{width:100%} /* El marco cierra contra el eje derecho de página; el aire que queda a su izquierda es el que recibe el voladizo del script. */ .intro__frame--cork{width:87%;margin-top:0} /* La foto va con su proporción real (724×610). El 380/375 de la regla base la recortaba a casi cuadrada y se comía parte del descorche. */ .intro__frame--cork .intro__img{aspect-ratio:724/610} /* Script entero sobre el fondo, sin pisar la foto: 390px fijos despegan el borde derecho del canto izquierdo del marco, hacia el gutter. Bandera izquierda —cada línea arranca del mismo margen— en vez de colgar del borde derecho como en la versión que se apoyaba en la foto. */ .intro__script{right:390px;bottom:13%;text-align:left} /* En anchos medios la columna de texto es fija (450px) y el marco queda angosto: el voladizo de 390px cae encima del párrafo. Ahí la foto sube hasta la altura donde arranca el título (las columnas se alinean arriba en vez de centrarse) y la frase baja debajo del marco, sin pisar nada. */ @media(max-width:1359px){ .intro__grid{align-items:start} /* top:100% la saca del passepartout: el script es hijo del figure, y estático quedaría adentro del marco blanco. */ .intro__script{top:100%;left:3.2%;right:auto;bottom:auto; margin-top:clamp(20px,2.6vw,36px);text-align:left} } } /* Bajada y CTA con el mismo intervalo, para que la columna se lea como una sola escalera y no como tres bloques sueltos. */ .intro__lead{margin-top:clamp(28px,3vw,46px)} .intro__cta{align-self:flex-start} /* ---- 3. La entrada la maneja GSAP, no el CSS ---- El fade vertical con IntersectionObserver de la base sale entero: acá los dos bloques entran enfrentados por scroll (ver el ScrollTrigger de index2.html). El estado inicial lo escribe el script con gsap.set() y no el CSS, así que si el JS no corre Legado se ve completo en vez de quedar invisible. Las transitions también salen: GSAP escribe el valor en cada frame y una transition encima lo perseguiría con retraso. */ .intro__eyebrow,.intro__title,.intro__lead,.intro__rule,.intro__body, .intro__script,.intro__cta{ opacity:1;transform:none;transition:none} /* ---- Bajada en dos tiempos + destacado ---- La primera bajada es la afirmación de marca y la segunda la invitación: misma familia, la segunda un punto más chica y sin el ancho recortado, para que se lea como continuación y no como un segundo titular. El rombo de 3 puntos reemplaza al guión suelto del texto original: separa los dos tiempos del bloque sin meter un signo a media columna. Es el mismo remate que .mf__sign y la placa de cata de Pionero (.lw-note): un único recurso de cita/destacado para todo el sitio en vez de un filete propio acá. .rombo ya centra sus 3 puntos por defecto; acá arranca pegado al margen izquierdo de la columna, como hacía el filete que reemplaza. */ /* Mismo cuerpo que la primera bajada: los dos párrafos en redonda de la columna van a una sola escala y el único salto tipográfico del bloque queda para el destacado en itálica. Acá sólo el intervalo. */ .intro__lead--sub{margin-top:clamp(14px,1.6vw,22px)} /* Los 44px de cada lado igualaban el salto al CTA (46px), así que el rombo no se leía como bisagra entre los dos tiempos del bloque sino como un tercer intervalo más del mismo tamaño, flotando en el medio. Bajados a 34 quedan ~1,1 interlínea de la bajada: sigue despegando el trazo del texto y el CTA recupera el paso más ancho, que es el que cierra la columna. */ .intro__rule{justify-content:flex-start;margin-top:clamp(24px,2.2vw,34px)} .intro__body{margin-top:clamp(24px,2.2vw,34px)} /* El destacado del original venía en negrita; el estilo lo pone el componente global .destacado, que este párrafo lleva en el HTML. Acá sólo queda lo propio del bloque: sin justificar, porque el resto de la columna sí lo está y una itálica justificada abre ríos entre palabras. */ .intro__accent{text-align:left} /* El barrido por clip-path de la foto también sale: el marco ahora entra desplazándose como un objeto entero —passepartout y foto juntos—, y acumularle un segundo reveal encima era animar dos veces lo mismo. */ .intro__img{clip-path:none;transition:none} /* ---- 4. Estate: el hold lo da el pin, no un bloqueo de scroll ---- Es el único bloque de la home con un párrafo entero para leer, y el fullscreen limpio duraba menos de 20vh: por eso index2 retenía el scroll dos segundos a la fuerza. Ese bloqueo salió y el hold pasa a estar en el track. 260vh = 100vh de placa + 160vh de recorrido. De esos, 32vh son la apertura del rectángulo y los últimos 50vh el solape de Vinos, así que quedan ~78vh de placa quieta. Los 50vh no se tocan: son los que hacen que el pin se suelte justo cuando Vinos terminó de cubrirla —la misma relación que Legado tiene con el Manifiesto—. */ .estate{height:260vh} /* La palabra y la flecha son una sola pieza. La flecha sola ya está en el hero y ahí es decoración; acá tiene que dar una instrucción, y sin palabra no dice si hay que scrollear, tocar o esperar. Apiladas y no en línea porque el rebote es vertical: con la flecha al costado el movimiento no señalaría nada. */ .estate__chevron{display:flex;flex-direction:column;align-items:center; gap:clamp(7px,.8vw,11px);padding:10px 18px; /* el padding lleva el área de toque a >=44px */ transition:opacity .7s ease 1.15s; /* entra detrás del texto, no encima */ /* Al eje derecho y no al centro. Centrada caía en la misma banda que "Descubre" y las dos se leían como una fila de dos acciones, cuando el CTA es la acción y esto es una indicación. Sobre el eje derecho queda donde el hero ya puso su flecha: el lector aprende una sola vez dónde mirar para saber que hay que seguir bajando. */ left:auto;right:var(--pad-x);bottom:26px;transform:none} /* Cuelga de la misma clase que el video y el texto: la señal aparece porque la placa llegó a pantalla completa y no porque venció un timer. La clase .show de la regla base sigue viva para index.html. */ .estate__media.is-full .estate__chevron{opacity:.85;pointer-events:auto} .estate__chevron:focus-visible{outline:1px solid var(--gold);outline-offset:4px} /* métrica de eyebrow: es un rótulo, no una bajada */ .estate__hint{font-family:var(--font-ui);font-weight:500;text-transform:uppercase; letter-spacing:3px;font-size:var(--fs-eyebrow); margin-right:-3px} /* devuelve el espacio que el tracking suma a la derecha */ /* 26px al lado de un rótulo de 10px pesaba de más */ .estate__chevron svg{width:22px;height:22px;animation:bob 2.4s ease-in-out infinite} /* El track del Manifiesto es más corto en mobile, pero el riel de Legado sigue siendo un viewport: es lo que mide el plano que sube. Va repetido acá porque .home2 le gana en especificidad al breakpoint de la base. */ @media(max-width:760px){ .mf{height:280vh} } /* Último, por lo mismo: sin pin no hay nada sobre lo que montar, y la sombra sin la subida sería una mancha entre dos secciones quietas. */ @media(prefers-reduced-motion:reduce){ .mf{height:auto} .intro{margin-top:0;min-height:0;box-shadow:none} } /* ---- Móvil: sin máscara ni pin, el video va de banner ---- La composición de la máscara necesita ancho: a 390px el rectángulo inicial es una tira vertical con un passepartout alrededor y no se entiende qué es. Y el track de 260vh obliga a scrollear casi tres pantallas para ver abrirse algo que a ese ancho no luce. Acá el video va directo, a sangre y sin marco. El scrub que escribe el clip-path inline se corta solo en este ancho —ver estateScroll en index.html— y enciende el video de entrada. */ @media(max-width:700px){ .estate{height:auto;margin-top:0} .estate__pin{position:static;height:auto;overflow:visible} .estate__media{position:relative;inset:auto;clip-path:none; height:min(78vh,600px);will-change:auto} .estate__frame,.estate__seal{display:none} /* "Scroll" + flecha también salen. La señal existía para avisar que la placa pinneada se abría al bajar; sin pin no hay nada que esperar y el scroll normal ya se explica solo. Peor todavía en esta columna angosta: caía en la misma línea que "Descubra" y las dos se leían como una fila de dos acciones en competencia. Va display:none y no opacity para que tampoco quede el botón en el árbol de accesibilidad. */ .estate__chevron{display:none} } } /* ============================================================ 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 sube sobre el pie de Legado ---- Legado mide 100vh porque lo necesita para tapar la lámina del Manifiesto mientras trepa, pero su contenido no llega a llenarlo: abajo queda un sobrante que no es composición, es relleno, y se leía como un vacío entre las dos secciones. Estate sube y lo cubre. El solape no se nota porque las dos superficies son el mismo crema y Estate va después en el DOM. En vh y no en px: el sobrante sale de restarle al alto de pantalla una columna de texto que no cambia, así que crece con la pantalla. Sólo de 1200px de alto para arriba: por debajo el contenido llena su 100vh y no hay sobrante que recortar —subir Estate ahí se comería el CTA—. OJO con la medida: el sobrante NO crece tan rápido como el 26vh. Legado centra su contenido, así que abajo le queda la mitad del sobrante, y a 1270px de alto eso son 271px contra los 330px que sube Estate: los 59px de diferencia se comían el "Conozca más", que es lo último de la columna. Por eso el solape vive en un token y no en un número suelto: Legado lo descuenta de su propio padding (ver .intro en home2) y centra el contenido en la franja que queda a la vista. Si se tocan por separado, vuelven a descalibrarse y el CTA desaparece de nuevo. */ /* El token va en `&` —el propio body.home— y no en :root: este bloque está anidado, así que un :root acá adentro compilaría a `body.home :root`, que no matchea nada, y el solape se perdería entero. */ @media(min-height:1200px){ &{--estate-overlap:26vh} .estate{margin-top:calc(var(--estate-overlap) * -1)} } .estate__pin{position:sticky;top:0;height:100vh;overflow:hidden} /* Rect centrado inicial (lo scrubbea el JS). El inset vertical va topeado en px y no sólo en %: el 40% es proporcional al viewport, así que en una pantalla de 1440 de alto son ~576px de crema antes de que asome la foto —sumados al sobrante de Legado, se lee como un salto entre las dos secciones—. Con el tope, de ~950px de alto para arriba la apertura deja de crecer; por debajo no entra en juego y abre como antes. El JS de index.html arranca desde este mismo valor: si cambia acá, cambia allá (está marcado en el scrub). */ /* El rectángulo va 60px por encima del centro: se le resta al inset de arriba y se le suma al de abajo, así que la SUMA no cambia y el alto de la imagen enmascarada queda igual —sólo se corre hacia el título—. Es el último tramo que faltaba para cerrar el hueco sin achicar la foto. */ .estate__media{position:absolute;z-index:1;inset:0; clip-path:inset(calc(min(40%,380px) - 60px) 33% calc(min(40%,380px) + 60px) 33%); will-change:clip-path} /* ---- Passepartout de la máscara ---- Mismo papel, filete y sombra que los marcos de Legado: el aspecto lo hereda del componente compartido de la zona global. Lo que no puede es envolver a la foto, como sí hace en Legado: el clip-path recorta todo lo que viva dentro del elemento, borde incluido. Así que va detrás, en su propia capa, con la caja agrandada por el grosor del pase. El inset acompaña al del clip-path —lo escribe el JS en cada frame— y al abrirse del todo queda en negativo: el marco sale de cuadro justo cuando la foto llega a sangre, que es cuando ya no tiene que estar. */ .estate__frame{position:absolute;z-index:0;padding:0;pointer-events:none; inset:calc(min(40%,380px) - 60px - var(--leg-frame)) calc(33% - var(--leg-frame)) calc(min(40%,380px) + 60px - var(--leg-frame)); will-change:inset} /* ---- Escudo como sello detrás de la foto ---- Centrado en el canto derecho de la imagen: mitad tapado por la foto, mitad asomando sobre el papel del passepartout. No lleva z-index negativo. El marco ya abre su propio contexto de apilado (z-index:0) por debajo de la máscara (z-index:1), así que todo lo que cuelgue de él queda detrás de la foto y el recorte lo hace la propia imagen: sin máscaras ni clip aparte. El left descuenta el grosor del pase para que el eje caiga sobre el borde de la FOTO y no sobre el del papel; si no, asomaría medio escudo más los ~28px del marco y el reparto dejaría de ser 50/50. */ /* Se posiciona contra el PIN, no contra el marco, y con valores fijos: el marco cambia de inset en cada frame del scrub y arrastraba al sello con él. Las coordenadas son las del canto derecho de la foto en reposo —67% es el 100%-33% del clip-path inicial, y el -60px es el mismo corrimiento hacia arriba que lleva el rectángulo—, así que en reposo se ve igual que antes. Al abrirse la máscara, la foto le pasa por encima y lo tapa. */ .estate__seal{position:absolute;z-index:0;top:calc(50% - 60px);left:67%; translate:-50% -50%; width:clamp(180px,20vw,340px);aspect-ratio:216/262; background:url("assets/escudo_bembeg.svg") center/contain no-repeat; opacity:.3;pointer-events:none} .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 */ /* El texto va sobre el eje de página completo —--pad-x más el padding interno—, igual que el resto del sitio. La foto sigue a sangre: lo que se alinea es el contenido, no el fondo. */ .estate__content{position:absolute;left:calc(var(--pad-x) + var(--content-pad)); 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 */ /* Rótulo pegado al título: el eyebrow es parte del mismo bloque de lectura que el título, no un elemento propio, así que va más cerca de él que del texto que sigue —proximidad en vez de distancia pareja entre los tres—. 12px fijos, sin clamp: es la misma distancia en todos los eyebrows del sitio, no proporcional al viewport, así que no tiene sentido que escale. */ .estate__eyebrow{margin-bottom:12px} /* 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:-1px; 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{color:rgba(255,255,255,.88);margin-bottom:clamp(24px,3vw,38px);max-width:38ch} /* .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 (banner .pbn--b) 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 */ /* El par Pionero + La Linterna de index2 usa la variante body.wines-b, que vive en la zona global porque vinos.html comparte el tratamiento. */ /* ============================================================ 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:12px} /* estilo en el grupo compartido — ver .estate__eyebrow */ .wmaking__title{font-family:var(--font-display);font-weight:400;color:var(--navy); font-size:var(--fs-h2);line-height:1.12;letter-spacing:-1px;} .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} /* misma distancia título→cuerpo que .intro__lead en Legado y .hospi__title */ /* La frase de cierre se separa del cuerpo y pasa a versalitas Minion, en el mismo navy del resto del texto —no gold: acá la cita no lleva color propio, como .lw-finca__quote/.lw-tasting__cite/.lw-note__cite—. El párrafo la introduce con dos puntos y esta línea la remata destacada por tipografía, no por color, en vez de perderse como una oración más del justificado. */ /* El remate de .rombo que llevan las citas del sitio (.mf__sign, .lw-note, .leg-feature/.ht-quote): acá arranca pegado al margen izquierdo —.rombo centra por defecto— porque esta cita va alineada a la izquierda como el resto del párrafo, no centrada como una placa. */ .wmaking__rombo{justify-content:flex-start;margin-top:clamp(14px,1.6vw,22px)} .wmaking__cite{display:block;width:300px;font-family:var(--font-sc);color:var(--navy); text-transform:uppercase;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6; letter-spacing:.13em;margin-right:-.13em;margin-top:clamp(26px,3vw,40px)} .wmaking__cta{margin-top:clamp(42px,4.8vw,66px)} /* .wmaking__title sigue viviendo en el CSS porque index_back.html todavía la usa (variante "oficio", sin tabs). */ .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)} } /* ---- Variante index2 (body.home2): passepartout tipo Legado, un solo marco por winemaker activo ------- .wmaking__g1/.wmaking__g2 (dos fotos de bodega montadas) quedaron para index_back.html, que las sigue usando bajo .home a secas —de ahí que su CSS base (arriba, sin nest) no se tocó. Acá, bajo home2, la sección pasó a ser Winemakers: un solo marco (.wmk-frame) que cambia de foto con el tab activo, mismo papel/hairline/sombra que .intro__frame. */ &.home2{ --wm-frame:clamp(12px,1.5vw,21px); /* La galería deja de tener una altura propia en vw/vh, pero ya no se estira a la altura del texto: el marco pasó a tener proporción fija (2/3, la de assets/enologos.webp), con passepartout generoso alrededor —como una lámina enmarcada— en vez de recortarse para llenar lo que mida el bloque de al lado. Si el texto queda más alto, la columna simplemente le sobra aire debajo. */ .wmaking__wrap{align-items:start} .wmaking__gallery{height:auto} .wmk-frame{max-width:min(420px,88%);margin:0 auto; display:flex;flex-direction:column} .wmk-frame__photo{position:relative} .wmk-frame__media{position:relative;aspect-ratio:2/3;overflow:hidden; padding:var(--wm-frame);background:#FDFCF8; border:1px solid rgba(31,36,80,.08); box-shadow:0 18px 50px -30px rgba(31,36,80,.35); clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease-smooth)} .wmaking.in .wmk-frame__media{clip-path:inset(0 0 0 0)} .wmk-frame__media img{display:block;width:100%;height:100%;object-fit:cover; object-position:50% 20%;transform:scale(1.07); transition:transform 2.4s var(--ease-smooth)} .wmaking.in .wmk-frame__media img{transform:scale(1)} /* La firma script pisando la foto, mismo recurso que .intro__script en Legado: left:100%+translate para quedar mitad sobre la foto, mitad sobre el fondo, y hermana de .wmk-frame__media —no hija— para que el overflow:hidden del marco no la recorte. Arriba a la derecha y no abajo a la izquierda como en Legado: acá el nombre/cargo ya ocupa el pie de la foto, así que la esquina libre es la superior. */ .wmk-frame__script{position:absolute;left:100%;translate:-60% 0; top:calc(var(--wm-frame) + 3%);z-index:2; font-family:var(--font-script);color:var(--gold); font-size:2.45em;line-height:1.16; /* mismo tamaño que .intro__script */ text-align:left;white-space:nowrap;pointer-events:none} @media(max-width:700px){ /* apilado, la foto vuelve a proporción fija: la firma se achica para no competir con nombre/cargo, que quedan pegados debajo —mismo tamaño mobile que .intro__script */ .wmk-frame__script{font-size:1.55em} } /* Nombre/cargo a los dos bordes de la foto: misma medida que .wmk-frame__media (la fila no tiene su propio padding), así cada columna queda a plomo con el borde del marco que le toca —Daniel a la izquierda, Juliana a la derecha— en vez de las dos apretadas contra el borde izquierdo. */ .wmk-frame__cap{margin-top:clamp(14px,1.8vw,20px); display:flex;justify-content:space-between;gap:16px;text-align:left} .wmk-frame__id:last-child{text-align:right} .wmk-frame__id{min-width:0} .wmk-frame__name{display:block;font-family:var(--font-display);letter-spacing:-.01em;font-weight:400; font-size:clamp(1.02rem,1.2vw,1.22rem);color:var(--navy)} .wmk-frame__role{display:block;margin-top:5px;font-family:var(--font-ui);font-weight:500; text-transform:uppercase;letter-spacing:.24em;font-size:10px;color:var(--gold)} /* 450px fijos (28.125rem): mismo ancho que .intro__col--left en Legado, para que las dos columnas de texto del home midan igual. Sin nowrap en el título acá —a diferencia de Legado, "Viticultura de precisión" no tiene medida documentada contra 450px, así que si no entra en una línea se parte en dos en vez de desbordar. .wmk-panel y los párrafos son bloques normales: llenan el 100% de esos 450px solos, no necesitan el truco width:0+min-width:100% que sí usa el fit-content de Legado. Sólo acá, bajo .home2: la variante "oficio" de index_back.html sigue compartiendo estas mismas clases y no necesita el ajuste. */ .wmaking__text{width:28.125rem} /* Sólo reset horizontal/inferior: el margin-top real vive en .wmaking__copy —acá pesa más por especificidad y lo pisaba a 0. */ blockquote.wmk-quote{margin-inline:0;margin-bottom:0} .wmk-quote p + p{margin-top:1em} /* ---- Móvil: se apila, marco único al ancho del texto ---- Ya no hay dos fotos montadas que pasar a carrusel: un solo marco por vez no necesita scroll-snap, sólo recuperar el ancho completo apilado. El alto ya no puede igualar al texto —apilados, uno va arriba y el otro abajo—, así que la foto vuelve a una proporción fija propia. */ @media(max-width:700px){ .wmaking__wrap{grid-template-columns:minmax(0,1fr)} /* los 450px fijos de arriba son para desktop: en móvil la columna es el ancho del viewport */ .wmaking__text{width:auto} .wmk-frame{max-width:none;height:auto;display:block} .wmk-frame__photo{flex:none} .wmk-frame__media{height:auto;aspect-ratio:4/5} /* la firma ya no cuelga fuera del marco: en móvil no hay margen lateral para el voladizo */ .wmk-frame__script{left:auto;right:calc(var(--wm-frame) + 3%);translate:none} } } /* ============================================================ 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) calc(var(--pad-x) + var(--content-pad));color:var(--cream)} .hospi__eyebrow{margin-bottom:12px} /* estilo en el grupo compartido — ver .estate__eyebrow */ .hospi__title{font-family:var(--font-display);font-weight:400;color:var(--cream); font-size:var(--fs-h2);line-height:1.12;letter-spacing:-1px;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:38ch; 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) calc(var(--pad-x) + var(--content-pad))} } /* ============================================================ 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:12px} /* estilo en el grupo compartido — ver .estate__eyebrow */ .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:-1px;} .hitos__title em{font-style:italic} .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{color:var(--navy)} /* métrica en el grupo compartido */ .hito__year{opacity:.5} .hito__title{font-family:var(--font-display);letter-spacing:-1px;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__all{grid-area:auto;justify-self:start} .hitos__all{margin-top:clamp(24px,4vw,34px)}} } /* fin body.home */ /* ============================================================ 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; font-family:var(--font-body);font-weight:500; /* 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)} /* ---- 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} /* ============================================================ 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:3px} .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:-.01em;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);letter-spacing:-.01em;font-size:44px;line-height:1;color:var(--navy)} .legado__badge .l{margin-top:8px} .legado__text{max-width:470px} /* Ídem .estate__eyebrow: rótulo pegado al título, no a medio camino entre título y cuerpo. Misma distancia que .wmaking__eyebrow en toda la web. */ .legado__text .eyebrow{margin-bottom:12px} .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 calc(var(--pad-x) + var(--content-pad));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:12px} /* ver .estate__eyebrow */ .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);letter-spacing:-.01em;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:12px} /* ver .estate__eyebrow */ .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}} /* ============================================================ LA LINTERNA — página de vino (El Tomillo) ============================================================ */ /* Contenedor de las fichas de vino. Lleva el mismo eje que el resto del sitio: --pad-x abre el margen de página y --content-pad mete el bloque hacia adentro en pantallas anchas, igual que .est-blocks__inner o .leg__inner. El max-width suma los dos --pad-x porque acá el padding vive en el MISMO elemento que el ancho (en las otras páginas el pad-x está en la sección y el max-width en el hijo). Con border-box, esa suma deja el ancho de contenido idéntico: --content-max menos los dos --content-pad. */ .wrap-narrow{max-width:calc(var(--content-max) + var(--pad-x) * 2);margin:0 auto; padding-inline:calc(var(--pad-x) + var(--content-pad))} /* ---- Presentación del vino ---- */ /* Dos columnas a distinta ley: la izquierda es una caja de texto con su aire, la derecha es imagen a sangre. Por eso el padding sale del hero y pasa a .lw-hero__text —si vive en el contenedor también despega la foto del borde, que es justo lo que no queremos— y el gap se va a 0: el respiro entre columnas ya lo da el padding derecho del texto. */ .lw-hero{position:relative;overflow:hidden;background:var(--cream);padding:0; /* eje de la columna de abajo: lo leen el texto del hero y el grabado de Pionero */ --lw-axis:calc(max(0px,(100vw - var(--content-max) - var(--pad-x) * 2) / 2) + var(--pad-x) + var(--content-pad))} /* el glow acompaña al texto: a la derecha lo tapaba la foto entera */ .lw-hero__glow{position:absolute;top:-14%;left:-12%;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%)} /* ---- Grabado de fondo (sólo La Linterna) ---- El haz de la etiqueta, sobre el crema y por debajo del texto. Entra dos veces en la página y siempre igual: por la izquierda detrás del hero y por la derecha detrás de la nota de cata. Una sola definición para las dos. El cobre está EN EL ARCHIVO (stroke #C0946C) y no puesto por CSS. La vía elegante era usar el SVG como máscara y pintar el pseudo con var(--gold), así el color salía del token; pero bajo file:// Chrome trata cada archivo como origen opaco y bloquea los SVG usados como máscara: se resuelve en nada y el grabado desaparece sin tirar ningún error. Como el sitio se previsualiza abriendo los .html directamente, la máscara no es una opción. background-image no tiene esa restricción. Contra: si el grabado tiene que cambiar de color, se re-tiñe el archivo (son 180 stroke iguales). Ya no hace falta el multiply que había antes para hundir el gris en el papel: a 9% el cobre se apoya sobre el crema sin manchar. Y el opacity ahora sí funciona, porque no hay blend que recomponer. Sólo en La Linterna: la ficha de Pionero comparte .lw-hero pero su body no lleva wines-b. Va con & y no con "body.wines-b": estas reglas están anidadas dentro de body.subpage y las dos clases viven en el mismo , así que un selector suelto resolvería a "body.subpage body.wines-b" —un body dentro de otro— y no matchearía nunca. */ /* El haz entra una sola vez, en el hero. Estuvo también detrás de la nota de cata como contrapeso y salió: ahí el texto va justificado y en medida larga, y los rayos le pasaban por debajo de los renglones ensuciando la lectura sin aportar composición. Se mide contra el ALTO del hero y no contra su ancho: tiene que desbordar arriba y abajo para que los rayos lleguen a los bordes y adentro quede sólo el rombo vacío donde entra el texto. Atado al ancho se quedaba corto —el trazo del SVG caía por debajo del píxel y al 9% no se veía nada—. El tamaño va en la CAJA y no en background-size: el archivo sólo trae viewBox, sin width/height, así que un `auto` en el otro eje obliga al motor a deducir el tamaño intrínseco y no todos lo hacen igual. Con la caja en un ancho definido y aspect-ratio, el `contain` sólo necesita la proporción, que es lo que todos respetan. El ancho sale de la altura del hero —min(92vh,940px)— por 1.24 de desborde y por 1216/940 de proporción: 1.24 × 1.2936 ≈ 1.604. El left lo centra en la columna de texto (la mitad de su 52.5%). Lo que se pasa hacia la derecha queda debajo de la foto, que va en z-index 1. */ /* El grabado de fondo salió de acá: ahora vive contenido en .lw-hero__crest, enmarcando al logotipo. Se conserva la variante móvil más abajo. */ /* ---- Celosía de Pionero ---- Mismo criterio que el haz de La Linterna, pero el motivo es otro y por eso la composición cambia: la celosía no irradia desde un centro, es un remate triangular, así que no va detrás del texto sino apoyada en el pie del hero, debajo del CTA. Una sola pieza, cortada por el borde a propósito: así lee como fragmento de un patrón más grande y no como una estampita centrada. No va como mancha de tinta sino como GRABADO EN SECO: el motivo se hunde en el papel en vez de imprimirse encima. El truco es que la figura deje de tener color propio y pase a ser del color de la hoja —eso hace el brightness(0) invert(1), que la lleva a blanco conservando su alfa— y que lo único que la dibuje sean dos sombras enfrentadas: una oscura arriba a la izquierda, donde el relieve deja de recibir luz, y una clara abajo a la derecha, donde el borde vuelve a subir. Invertidas las dos, el mismo dibujo se lee alzado en vez de hundido. Sombra en navy y no en negro: sobre crema el negro grisa y saca el motivo de la paleta. Y sin opacity general —que apagaría también las sombras—: el peso se regula con el alfa de cada una. El archivo lleva un PNG embebido, o sea que no se puede reteñir por texto como el haz de La Linterna; el filtro resuelve el color sin tocarlo. */ &.wines-p .lw-hero::after{content:"";position:absolute;z-index:0; /* centrado sobre el bloque de texto: arranca en el eje y mide lo que el body-copy (33ch = 318px) */ pointer-events:none;left:calc(var(--lw-axis) + 159px);bottom:0;translate:-50% 26%; width:clamp(230px,27vw,410px);aspect-ratio:200.19/104.71; background:url("assets/pionero_back002.svg") center/contain no-repeat; /* al agrandar el motivo el desplazamiento de 1px queda proporcionalmente más chico y el relieve se aplana, así que sube junto con el alfa */ filter:brightness(0) invert(1) drop-shadow(-1.5px -1.5px .5px rgba(31,36,80,.10)) drop-shadow(1.5px 1.5px 0 rgba(255,255,255,1))} /* Con un grabado puesto, el glow cálido de la esquina sobra: son dos fuentes de luz peleando en el mismo cuarto de pantalla y la mancha del degradado se come el arranque del dibujo. Para recuperarlo, borrar esta regla. */ &:is(.wines-b,.wines-p) .lw-hero__glow{display:none} /* La Linterna mide más ancho que Pionero (45ch vs. 33ch): el crest con el logotipo necesita más aire que el bloque de texto solo. */ /* Los cinco bloques de La Linterna comparten un ancho ABSOLUTO (rem, no ch): ch se mide contra el propio font-size de cada elemento, y acá conviven tamaños muy distintos —15px el cuerpo, 10.5px el meta con .2em de tracking—, así que "46ch" en cada uno daba cajas de un ancho realmente distinto y el meta terminaba más angosto que el crest de arriba, con riesgo de partir una finca/parcela larga en dos líneas o desbordar. */ &.wines-b .lw-hero__text .lw-hero__meta{max-width:30rem; /* más aire que en Pionero: acá separa el bloque de identidad (crest + varietal + finca/parcela) del cuerpo editorial (pull + copy), no sólo una línea de la siguiente */ margin-bottom:clamp(38px,4.6vw,54px)} &.wines-b .lw-hero__text .pull{max-width:30rem} &.wines-b .lw-hero__text .body-copy{max-width:30rem;margin-bottom:clamp(34px,4vw,50px)} /* La altura la fija el hero y no el contenido: a min(92vh,940px) la caja de la foto queda en ~0.75 de proporción, que es la del bottleshot, así que el cover casi no recorta. */ /* Alto fijo y no min-height: como piso, la sección crecía cuando el texto era más largo, y las dos fichas quedaban con heroes de distinta altura —la bajada de La Linterna tiene 232 caracteres contra 168 la de Pionero—. Con height las dos miden lo mismo sin importar cuánto texto lleven. El contenido entra con margen: contra los ~730px útiles que quedan después del padding, la columna más cargada ocupa alrededor de 425. */ .lw-hero__inner{position:relative;z-index:1;padding:0;height:min(92vh,940px); display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch} /* padding vertical simétrico porque el bloque va centrado: el despeje del header fijo lo garantiza el min-height, no un padding-top extra. En una columna sí hace falta sumarlo (ver el media query). */ .lw-hero__text{align-self:center; /* el borde izquierdo es el de la columna de abajo (.wrap-narrow: margen auto + --pad-x + --content-pad), para que el hero y la ficha arranquen del mismo eje */ padding:clamp(56px,8vh,110px) clamp(40px,5.5vw,90px) clamp(56px,8vh,110px) var(--lw-axis)} /* mismo cuerpo que los h2 del index; el bloque entero baja de escala con él */ /* ---- Panel de rayos con el logotipo adentro (La Linterna) ---- El grabado enmarca al título en vez de flotar detrás de la columna: los rayos convergen hacia el centro y el logo cae en ese vacío. El aspect-ratio es el del dibujo recortado a la franja útil —el SVG original es 1200×940 y acá se usa la banda central—, así que el vacío del medio queda a la altura del logotipo sin tener que moverlo. El max-width es el mismo 52ch de .body-copy: el panel mide exactamente lo que el párrafo de abajo. Si cambia ese ancho, cambiar los dos. Los trazos van con el color propio del SVG (#C0946C) a opacidad baja: es el grabado impreso de la referencia, NO bajorrelieve. El relieve se probó acá y se descartó (12 ago 2026). Queda anotado para no volver a proponerlo: a esta escala los trazos entran densos y finos, así que el emboss o no se ve —con la sombra al 2,1% del grabado grande— o ensucia el dibujo cuando se le sube la fuerza. Pionero sí lo conserva; son dos piezas distintas y no tienen que compartir tratamiento. */ .lw-hero__crest{position:relative;display:grid;place-items:center; width:100%;max-width:30rem;aspect-ratio:2.6/1;overflow:hidden; margin:0 0 clamp(26px,3.4vw,44px)} /* cover y no contain: el dibujo entero es casi cuadrado (1200×940) y metido completo devolvía un bloque igual de cuadrado. Recortado por arriba y por abajo queda la franja del medio —la del vacío donde cae el logo— y el grabado se lee como una banda, no como una lámina. */ .lw-hero__crest::before{content:"";position:absolute;inset:0;z-index:0; pointer-events:none; background:url("assets/back-linter.svg") center/cover no-repeat; opacity:.5} /* el título se centra sólo dentro del panel; el resto del bloque no se toca */ .lw-hero__crest .lw-hero__title{position:relative;z-index:1;margin:0; text-align:center} /* el corrimiento que lo alineaba a la izquierda no va cuando está centrado */ .lw-hero__crest .lw-hero__logo--linterna{transform:none;margin-inline:auto} .lw-hero__title{font-size:var(--fs-h2);line-height:1.14;letter-spacing:-1px;margin:0 0 clamp(22px,2.6vw,34px)} /* El logotipo escala con el mismo tope que en la home y en vinos —múltiplos de --fs-h2— para que las tres apariciones de la marca midan igual. Con width:100% + max-width, en columnas más angostas que el tope baja con la caja en vez de desbordar. */ .lw-hero__logo{display:block;width:100%;height:auto} /* Cada archivo trae aire propio a la izquierda y hay que descontarlo: apoyado contra el borde de la caja el logo entra corrido y no pisa el mismo eje que el varietal ni que el cuerpo de abajo. El translate va en % —que en transform se mide contra el propio elemento, no contra el padre— para que la corrección valga en cualquier tamaño. Los números salen de medir la caja real del dibujo dentro de su viewBox; el día que se re-exporte un SVG sin ese margen, se borra su translate. Los topes son los mismos que en la home y en vinos: cada marca mide igual en sus tres apariciones. */ .lw-hero__logo--linterna{max-width:calc(var(--fs-h2) * 5); /* 200px @ 40px */ transform:translateX(calc(-500% / 244.8)); /* dibujo desde x=5 de 244.8 */ margin-top:30px} .lw-hero__logo--pionero{max-width:calc(var(--fs-h2) * 4.55); /* 182px @ 40px */ transform:translateX(calc(-690% / 249.9))} /* dibujo desde x=6.9 de 249.9 */ .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} /* En La Linterna el varietal se lee afuera del crest, en .lw-hero__varietal —adentro, con aspect-ratio fijo y overflow:hidden, el alto no le alcanzaba y lo recortaba—. El del h1 sigue en el DOM (texto accesible del título) pero no se dibuja acá. */ .lw-hero__crest .lw-hero__title em{display:none} .lw-hero__varietal{max-width:30rem;margin:0 0 clamp(22px,2.8vw,32px);text-align:center; font-family:var(--font-display);color:var(--navy);font-size:1.6rem; font-variant:all-small-caps;text-transform:uppercase;letter-spacing:.28em; margin-right:-.28em} /* devuelve el espacio que el tracking suma a la derecha, para centrar óptico y no sólo matemático */ .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__meta-div{display:inline-block;width:1px;height:10px;margin:0 12px; background:var(--gray);opacity:.4;vertical-align:middle} .lw-hero__text .pull{margin:clamp(24px,2.8vw,38px) 0 clamp(20px,2.4vw,30px)} .lw-hero__text .body-copy{max-width:33ch;margin-bottom:clamp(26px,3vw,38px)} /* sin aspect-ratio: el alto lo da el stretch de la fila, no la proporción */ .lw-hero__bottle{background:var(--ph-black)} .lw-hero__bottle img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} /* Pionero no tiene beauty vertical: su única foto de ambiente es apaisada y el recorte centrado caía sobre el fondo negro. El 45% lleva el encuadre a la etiqueta. Se borra el día que exista una toma vertical. */ .lw-hero__bottle--wide img{object-position:45% center} @media(max-width:860px){ /* en una columna el alto lo da el contenido: el height fijo de arriba recortaría el texto apilado sobre la foto */ .lw-hero__inner{grid-template-columns:1fr;height:auto} /* en una columna el texto recupera márgenes simétricos */ .lw-hero__text{padding:calc(var(--hdr-h) + clamp(48px,9vw,80px)) var(--pad-x) clamp(40px,7vw,64px)} .lw-hero__bottle{aspect-ratio:4/3} /* Apilado ya no hay columna de texto y el hero crece con el contenido, así que el vh deja de servir de referencia: acá el haz se mide contra el ancho y se centra sobre el bloque de texto. */ &.wines-p .lw-hero::after{left:50%} } /* ---- Cata + ficha técnica ---- */ /* blanco y no crema: el hero pasó a ser una sola pieza crema de borde a borde, así que la ficha necesita su propio plano para no leerse como continuación. --sand es el fondo alterno del sistema, el mismo que ya usan .lw-finca y la banda de La Linterna. */ /* el overflow:hidden queda como red: la botella de la ficha se apoya fuera del marco y sin él asomaría por el borde abriendo scroll horizontal */ /* ---- Banda de video · presentación de la añada (pionero.html) ---- Vive dentro del .wrap-narrow de la ficha, así que mide exactamente lo mismo que las dos columnas de arriba: no hay un ancho propio que sincronizar. El passepartout sale del grupo compartido —mismo papel, filete y sombra que el resto de las fotos del sitio—, por eso .lw-vband__frame está sumado allá arriba y acá sólo se le saca el margen que traen las