/* Tipografías autoalojadas */
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url(../fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: italic; font-display: swap; src: url(../fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2'); }
/* ==========================================================================
Evento Art Center — styles.css (v2, dirección editorial)
Mobile-first. Tokens de marca al inicio: ajustá acá colores y fuentes.
========================================================================== */
:root {
/* Colores. El rojo (#AB231C) se midió sobre el logo del moodboard; validalo con el archivo original del logo. */
--bg: #F7F5F0;
--ivory: #EEEAE2;
--ink: #22211F;
--ink-soft: #4A4844;
--warm: #5F5C58;
--red: #AB231C;
--red-dark: #861A15;
--line: rgba(34, 33, 31, .2);
--line-light: rgba(247, 245, 240, .22);
--on-dark: #EEEAE2;
--on-dark-soft: #BDB8AE;
/* Color según fondo: las secciones oscuras redefinen estas variables (ver .section--dark) */
--fg: var(--ink);
--fg-soft: var(--ink-soft);
--rule: var(--line);
--accent-text: var(--red);
/* Tipografías (máximo 2 familias) */
--sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
/* Espacios, radios, movimiento */
--gutter: clamp(1.25rem, 4vw, 3rem);
--section-y: clamp(4.5rem, 10vw, 9rem);
--radius: 2px;
--header-h: 68px;
--maxw: 1360px;
--ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
html.is-locked { overflow: hidden; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 1rem;
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .25em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, address, pre { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.section--dark :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.closing :focus-visible,
.lightbox :focus-visible { outline-color: #fff; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
position: absolute; left: 1rem; top: -4rem; z-index: 100;
background: var(--ink); color: #fff; padding: .75rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }
/* ---------- Tipografía ----------
Contraste editorial: la primera cláusula en romana, la segunda en cursiva y en una línea propia. */
.display {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(2.5rem, 6.4vw, 5.25rem);
line-height: 1;
letter-spacing: -.02em;
text-wrap: balance;
color: var(--fg);
}
.display em {
display: block;
font-style: italic;
font-weight: 500;
color: var(--fg-soft);
}
.display--light { color: #fff; }
.display--light em { color: rgba(255, 255, 255, .86); }
.section--dark .display em { color: var(--on-dark-soft); }
/* Rótulos de sección (jerarquía y orientación) */
.eyebrow {
display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem;
font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: var(--red); flex: none; }
::selection { background: var(--red); color: #fff; }
.lead { font-size: 1.05rem; color: var(--fg-soft); max-width: 34rem; margin-top: 1.75rem; }
/* ---------- Botones y enlaces con flecha ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
min-height: 52px; padding: .9rem 1.6rem;
font: 600 .9rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none;
border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease), transform .15s var(--ease);
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); gap: 1.1rem; }
.btn--sm { min-height: 44px; padding: .6rem 1.1rem; font-size: .8rem; gap: .6rem; }
.btn--text { background: none; color: var(--ink); padding-inline: .5rem; text-decoration: underline; text-decoration-thickness: 1px; }
.btn--text:hover { color: var(--red); }
.btn:active { transform: translateY(1px); }
.btn--primary:active { background: var(--red-dark); }
.btn--arrow:active::after, .link-arrow:active::after { transform: translateX(2px); }
.link-arrow:active { color: var(--red-dark); }
.menu:active { background: var(--red-dark); border-top-color: var(--red-dark); }
.btn--arrow::after,
.link-arrow::after,
.menu__go::after {
content: ""; flex: none; width: 1.3em; height: .85em; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 8h22M15 1l7 7-7 7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 8h22M15 1l7 7-7 7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .3s var(--ease);
}
.btn--arrow:hover::after, .link-arrow:hover::after { transform: translateX(6px); }
.link-arrow {
display: inline-flex; align-items: center; gap: .75rem; min-height: 44px;
font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--fg);
background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
transition: background-size .35s var(--ease), color .2s;
}
.link-arrow:hover { background-size: calc(100% - 2.05em) 1px; color: var(--accent-text); }
.link-arrow--light { color: #fff; }
.link-arrow--light:hover { color: #fff; }
/* ---------- Header ---------- */
.header {
position: sticky; top: 0; z-index: 50;
background: var(--bg); border-bottom: 1px solid var(--line);
}
.header__inner {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
height: var(--header-h); width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand img { height: 34px; width: auto; }
.brand__ph { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: .005em; color: var(--red); }
.brand--light .brand__ph { color: #fff; }
.header__actions { display: flex; align-items: center; gap: .6rem; }
.burger {
width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.burger__bar { width: 20px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.burger[aria-expanded="true"] .burger__bar:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Menú mobile: panel a pantalla completa con tipografía editorial */
.nav {
position: fixed; inset: var(--header-h) 0 0 0; z-index: 40;
background: var(--bg); padding: 1rem var(--gutter) 2rem; overflow-y: auto;
display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
visibility: hidden; opacity: 0; transform: translateY(-8px);
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav__list a {
display: block; padding: .5rem 0; border-bottom: 1px solid var(--line);
font-family: var(--serif); font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.15; font-weight: 500;
text-decoration: none;
}
.nav__list a:hover { color: var(--red); font-style: italic; }
.nav__foot { display: grid; gap: .25rem; }
.nav__foot a { display: inline-block; padding: .5rem 0; font-weight: 500; text-decoration: none; }
@media (min-width: 900px) {
.burger, .nav__foot { display: none; }
.nav {
position: static; inset: auto; z-index: auto; background: none; padding: 0; overflow: visible;
display: block; visibility: visible; opacity: 1; transform: none; transition: none;
}
.nav__list { display: flex; gap: 2.25rem; }
.nav__list a {
border: 0; padding: .5rem 0; font-family: var(--sans); font-size: .85rem; font-weight: 500; line-height: 1.4;
background: linear-gradient(var(--red), var(--red)) left bottom / 0 1px no-repeat; transition: background-size .3s var(--ease);
}
.nav__list a:hover { font-style: normal; color: var(--ink); background-size: 100% 1px; }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.header__actions { justify-self: end; }
}
@media (max-width: 400px) {
.brand__ph { font-size: 1.15rem; }
.btn--sm { padding-inline: .8rem; font-size: .75rem; }
.btn--sm::after { display: none; }
}
/* ---------- Placeholders e imágenes ----------
Sin foto configurada: superficie cálida con un ícono discreto, sin textos encima.
Con foto: main.js inserta la ![]()
y la superficie deja de verse. */
.ph, .ph img { width: 100%; height: 100%; }
.ph { position: relative; overflow: hidden; isolation: isolate; background-color: #D9D3C7; color: var(--ink); }
.ph--1 { background-color: #D8CFC0; }
.ph--2 { background-color: #CFC7B8; }
.ph--3 { background-color: #E0D9CC; }
.ph--4 { background-color: #C9C0B0; }
.ph--warm { background-color: #E4DCCD; }
.ph--dark { background-color: #2B2927; color: #fff; }
.ph::before { /* superficie con una luz suave: es la que se mueve con el zoom */
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(155deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 48%, rgba(34,33,31,.1) 100%);
transition: transform 1.1s var(--ease);
}
.ph--dark::before { background: linear-gradient(155deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.25) 100%); }
.ph::after { /* ícono de imagen */
content: ""; position: absolute; left: 50%; top: 50%; width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem;
background: currentColor; opacity: .24;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='5' y='9' width='38' height='30' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17' cy='20' r='3.5'/%3E%3Cpath d='M5 35l12-11 9 8 6-5 11 9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='5' y='9' width='38' height='30' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17' cy='20' r='3.5'/%3E%3Cpath d='M5 35l12-11 9 8 6-5 11 9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph.has-img::before, .ph.has-img::after { content: none; }
/* Foto real: object-fit cover; el punto focal se ajusta con data-pos="50% 30%" en el HTML */
.ph img { position: absolute; inset: 0; object-fit: cover; object-position: center; opacity: 0; transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
.ph.has-img img { opacity: 1; }
.ph[data-parallax] img { transform: scale(1.14); will-change: transform; }
/* Zoom muy sutil al pasar el cursor (solo en imágenes ampliables, sin parallax) */
.ph[data-zoom]:not([data-parallax]):hover img,
.ph[data-zoom]:not(.has-img):hover::before { transform: scale(1.04); }
/* Imágenes ampliables: el botón "+" aparece al pasar el cursor o al enfocar con teclado */
.is-zoomable { cursor: zoom-in; }
.ph.is-zoomable::before {
content: ""; inset: auto; right: .9rem; top: .9rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
background: rgba(247,245,240,.92) center / 18px no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%2322211F' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
opacity: 0; transform: scale(.8); transition: opacity .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.is-zoomable:hover::before, .is-zoomable:focus-visible::before {
opacity: 1; transform: none; background-color: var(--red);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='white' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
}
@media (hover: none) { .ph.is-zoomable::before { opacity: 1; transform: none; } }
/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(94svh, 900px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgba(20,19,18,.88) 0%, rgba(20,19,18,.62) 38%, rgba(20,19,18,.34) 68%, rgba(20,19,18,.2) 100%);
}
.hero__content { padding-block: 7rem 2rem; }
.hero__title {
font-family: var(--serif); font-weight: 500; font-size: clamp(3.1rem, 11vw, 8.5rem);
line-height: .94; letter-spacing: -.025em;
}
.hero__title em { font-style: italic; font-weight: 500; }
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: block; }
.hero__row { display: grid; gap: 1.75rem; margin-top: 2.25rem; align-items: end; }
.hero__lead { max-width: 28rem; font-size: 1.05rem; color: #F2EFE9; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }
.hero__kinds {
display: flex; flex-wrap: wrap; margin-top: 2.75rem; padding-top: 1.1rem;
border-top: 1px solid rgba(255,255,255,.35); font-size: .85rem; color: #F2EFE9;
}
.hero__kinds li { padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid rgba(255,255,255,.35); }
.hero__kinds li:last-child { border: 0; margin: 0; padding: 0; }
@media (min-width: 860px) {
.hero__row { grid-template-columns: 1fr auto; gap: 3rem; }
}
/* Animación de entrada del hero: un único momento orquestado */
@media (prefers-reduced-motion: no-preference) {
.js .line > span { transform: translateY(108%); animation: rise 1.1s var(--ease) .15s forwards; }
.js .line--2 > span { animation-delay: .32s; }
.js .hero__row, .js .hero__kinds { opacity: 0; animation: fade .9s var(--ease) .75s forwards; }
.js .hero__kinds { animation-delay: .95s; }
}
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }
/* ---------- Secciones ---------- */
.section { padding-block: var(--section-y); }
.section--ivory { background: var(--ivory); }
.section--dark {
background: var(--ink); color: var(--on-dark);
--fg: #fff; --fg-soft: var(--on-dark-soft); --rule: var(--line-light); --accent-text: #fff;
}
.section__head { max-width: 54rem; margin-bottom: clamp(2.75rem, 6vw, 5rem); }
/* Intro */
.intro { padding-bottom: 0; }
.intro__grid { display: grid; gap: 3rem; }
.intro__photo .ph { aspect-ratio: 3 / 4; }
/* Tres pilares: fila editorial numerada */
.pillars { margin-top: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--rule); }
.pillar { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.pillar__num { grid-row: span 3; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 2.4rem; line-height: .95; color: var(--red); }
.pillar h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; }
.pillar p { color: var(--fg-soft); max-width: 24rem; }
.pillar .link-arrow { justify-self: start; margin-top: .35rem; font-size: .88rem; }
@media (min-width: 900px) {
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); }
.pillar { display: block; padding: 2.5rem 2.5rem 2.75rem 0; border-bottom: 0; }
.pillar + .pillar { padding-left: 2.5rem; border-left: 1px solid var(--rule); }
.pillar__num { display: block; margin-bottom: 1.75rem; font-size: 3.25rem; }
.pillar p { margin-top: .6rem; }
.pillar .link-arrow { margin-top: 1rem; }
}
.band { margin-top: clamp(3.5rem, 8vw, 7rem); }
.band .ph { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .band .ph { aspect-ratio: 21 / 9; } }
@media (min-width: 900px) {
.intro__grid { grid-template-columns: repeat(12, 1fr); gap: 0 2rem; align-items: start; }
.intro__text { grid-column: 1 / 8; padding-top: 3rem; }
.intro__photo { grid-column: 9 / 13; margin-top: 7rem; }
.intro .display { font-size: clamp(3rem, 6.2vw, 6rem); }
}
/* Espacios: grilla editorial de 12 columnas.
Mobile: una columna. Tablet: filas de 12 / 6+6 / 12 / 6+6. Desktop: 8+4, 4+8, 8+4.
En cada fila las dos fotos comparten alto y alineación superior; las leyendas quedan en la misma línea. */
.spaces {
--h-lg: clamp(24rem, 34vw, 34rem);
--h-md: clamp(21rem, 30vw, 29rem);
--h-tall: clamp(24rem, 39vw, 35rem);
--h-sm: clamp(18rem, 26vw, 25rem);
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.75rem 0; align-items: start;
}
.space { grid-column: 1 / -1; min-width: 0; }
.space .ph { aspect-ratio: 4 / 3; }
.space--b .ph { aspect-ratio: 4 / 5; }
.space--c .ph { aspect-ratio: 1 / 1; }
.space--f .ph { aspect-ratio: 5 / 7; }
.space--d .ph { aspect-ratio: 16 / 10; }
.space[hidden] { display: none; }
.space figcaption { display: grid; gap: .3rem; padding-top: 1rem; max-width: 30rem; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.space figcaption strong { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.65rem); font-weight: 500; line-height: 1.1; color: var(--ink); }
@media (min-width: 640px) {
.spaces { column-gap: 2rem; }
.space--b, .space--c, .space--e, .space--f { grid-column: span 6; }
.space--a .ph { aspect-ratio: 16 / 10; }
.space--b .ph, .space--c .ph { aspect-ratio: 4 / 5; }
.space--d .ph { aspect-ratio: 16 / 9; }
.space--e .ph, .space--f .ph { aspect-ratio: 5 / 7; }
}
@media (min-width: 1000px) {
.spaces { gap: 3.5rem 2rem; }
.space .ph { aspect-ratio: auto; height: var(--h); }
.space--a { grid-column: 1 / 9; --h: var(--h-lg); } /* fila 1: panorámica + vertical */
.space--b { grid-column: 9 / 13; --h: var(--h-lg); }
.space--c { grid-column: 1 / 5; --h: var(--h-md); } /* fila 2: vertical + panorámica (espejo) */
.space--d { grid-column: 5 / 13; --h: var(--h-md); }
.space--e { grid-column: 1 / 9; --h: var(--h-tall); } /* fila 3: ancha + vertical (como la fila 1) */
.space--f { grid-column: 9 / 13; --h: var(--h-tall); }
}
/* Si solo hay fotos para algunos espacios, main.js oculta el resto y reduce la grilla a pares parejos */
.spaces.is-trimmed .space--wide { grid-column: 1 / -1; }
@media (min-width: 640px) {
.spaces.is-trimmed .space { grid-column: span 6; }
.spaces.is-trimmed .space--wide { grid-column: 1 / -1; }
.spaces.is-trimmed .space .ph { aspect-ratio: 4 / 3; }
.spaces.is-trimmed .space--wide .ph { aspect-ratio: 16 / 9; }
}
@media (min-width: 1000px) {
.spaces.is-trimmed .space { --h: var(--h-md); }
.spaces.is-trimmed .space .ph { aspect-ratio: auto; }
}
/* Servicios: filas editoriales */
.rows { border-bottom: 1px solid var(--rule); }
.row { display: grid; gap: 1.25rem 3rem; padding: 2.5rem 0; border-top: 1px solid var(--rule); transition: padding-left .4s var(--ease), border-color .3s; }
.row:hover { border-top-color: var(--red); }
.row h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.05; letter-spacing: -.01em; color: var(--fg); transition: color .25s; }
.row:hover h3 { color: var(--accent-text); font-style: italic; }
.list li { position: relative; padding: .5rem 0 .5rem 1.5rem; color: var(--fg-soft); line-height: 1.55; }
.list li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: .6rem; height: 2px; background: var(--red); }
@media (min-width: 900px) {
.row { grid-template-columns: 5fr 7fr; padding: 3.25rem 0; }
.row:hover { padding-left: 1rem; }
.list--cols { columns: 2; column-gap: 3rem; }
.list--cols li { break-inside: avoid; }
}
/* Gastronomía: lista tipográfica; al interactuar, la fila se tiñe con el rojo de marca */
.gastro { display: grid; gap: 3rem; }
.gastro__note { margin-top: 2rem; max-width: 26rem; color: var(--fg-soft); font-size: .95rem; }
.menus { border-bottom: 1px solid var(--rule); }
.menu {
position: relative; display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem; align-items: center;
padding: 1.9rem 0; border-top: 1px solid var(--rule); color: var(--fg); text-decoration: none;
transition: padding .45s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.menu__name { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 5.2vw, 4.25rem); line-height: 1; letter-spacing: -.015em; }
.menu__desc { grid-column: 1; color: var(--fg-soft); max-width: 26rem; transition: color .3s; }
.menu__go { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; width: 3.25rem; height: 3.25rem; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--red); transition: background-color .3s var(--ease), border-color .3s, color .3s; }
.menu__go::after { width: 1.1em; }
.menu:hover, .menu:focus-visible { padding-inline: 1.25rem; background: var(--red); border-top-color: var(--red); color: #fff; }
.menu:hover .menu__desc, .menu:focus-visible .menu__desc { color: rgba(255, 255, 255, .92); }
.menu:hover .menu__name, .menu:focus-visible .menu__name { font-style: italic; }
.menu:hover .menu__go, .menu:focus-visible .menu__go { background: #fff; border-color: #fff; color: var(--red); }
.menu:hover .menu__go::after { transform: translateX(3px); }
@media (min-width: 900px) {
.gastro { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
.gastro__head { position: sticky; top: calc(var(--header-h) + 3rem); }
.menu { padding-block: 2.5rem; }
}
/* Eventos: tarjetas verticales escalonadas */
.events { display: grid; gap: 3rem; }
.event .ph { aspect-ratio: 4 / 5; margin-bottom: 1.25rem; }
.event h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; margin-bottom: .6rem; color: var(--fg); }
.event p { color: var(--fg-soft); max-width: 24rem; }
@media (min-width: 800px) {
.events { grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
.event--2 { margin-top: 5.5rem; } .event--2 .ph { aspect-ratio: 3 / 4; }
.event--3 { margin-top: 2.5rem; }
}
/* Consulta */
.contact { display: grid; gap: 3rem; }
.contact__links { margin-top: 2rem; display: grid; justify-items: start; }
.contact__photo { display: none; }
.form { background: var(--bg); padding: 1.5rem 1.25rem; border: 1px solid var(--line); display: grid; gap: 1.5rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field-row { display: grid; gap: 1.5rem; }
.form label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.req { color: var(--red); }
.form input[type="text"], .form input[type="date"], .form select, .form textarea {
width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--ink);
background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
padding: .75rem 0; min-height: 48px; transition: border-color .2s, background-color .2s;
}
.form select {
-webkit-appearance: none; appearance: none; padding-right: 1.75rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2322211F' stroke-width='1.4'/%3E%3C/svg%3E") right .25rem center / .8rem no-repeat;
}
.form textarea { resize: vertical; border: 1px solid var(--ink); padding: .75rem; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--red); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: var(--red); }
.check { display: flex !important; align-items: flex-start; gap: .75rem; font-weight: 400 !important; font-size: .88rem !important; color: var(--ink-soft) !important; line-height: 1.5; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin: .1rem 0 0; accent-color: var(--red); }
.check--inline { font-size: .85rem !important; padding-top: .35rem; }
.error { color: var(--red-dark); font-size: .85rem; font-weight: 500; }
.error[hidden] { display: none; }
.preview { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .35rem 0; }
.preview summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: .88rem; font-weight: 500; color: var(--ink-soft); }
.preview summary:hover { color: var(--red); }
.preview__text { white-space: pre-wrap; font: 400 .88rem/1.55 var(--sans); color: var(--ink-soft); padding: .25rem 0 1rem; overflow-wrap: anywhere; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.form__status { font-size: .9rem; color: var(--ink-soft); min-height: 1.4em; }
.form__status.is-warn { color: var(--red-dark); font-weight: 500; }
@media (min-width: 640px) {
.field-row { grid-template-columns: 1fr 1fr; }
.form { padding: 2.5rem; }
}
@media (min-width: 960px) {
.contact { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
.contact__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
.contact__photo { display: block; margin-top: 3rem; max-width: 22rem; }
.contact__photo .ph { aspect-ratio: 4 / 5; }
}
/* Cierre inmersivo */
.closing { position: relative; isolation: isolate; color: #fff; min-height: min(80svh, 760px); display: flex; align-items: flex-end; overflow: hidden; }
.closing__media { position: absolute; inset: 0; z-index: -2; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20,19,18,.58); }
.closing__content { padding-block: clamp(5rem, 12vw, 9rem); display: grid; gap: 2.5rem; justify-items: start; }
.closing .display { font-size: clamp(2.6rem, 7.4vw, 6.25rem); max-width: 16ch; }
/* Footer */
.footer { background: var(--ink); color: var(--on-dark-soft); padding-top: 4.5rem; font-size: .92rem; }
.footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3.5rem; }
.footer__brand p { margin-top: .9rem; max-width: 18rem; }
.footer__title { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: #fff; margin-bottom: .75rem; }
.footer li { padding: .1rem 0; }
.footer a { text-decoration: none; color: var(--on-dark); display: inline-block; padding: .25rem 0; background: linear-gradient(#fff, #fff) left bottom / 0 1px no-repeat; transition: background-size .3s var(--ease), color .2s; }
.footer a:hover { color: #fff; background-size: 100% 1px; }
.footer .brand { background: none; }
.footer address { line-height: 1.7; margin-bottom: .6rem; }
.footer__bottom { border-top: 1px solid var(--line-light); padding-block: 1.5rem; font-size: .82rem; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 3rem; } }
/* ---------- Revelado al scroll (solo con JS activo) ----------
Textos: aparición suave. Imágenes: se descubren con un recorte vertical. */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .rv-img { clip-path: inset(0 0 16% 0); opacity: 0; transition: clip-path 1.1s var(--ease), opacity .7s var(--ease); }
.js .rv-img.is-visible { clip-path: inset(0); opacity: 1; }
/* ---------- Galería (lightbox accesible con