/* ═══════════════════════════════════════════════════════════════════════════
SISTONS BURGERS — Sistema visual
───────────────────────────────────────────────────────────────────────────
Dirección de arte: «SALA OSCURA».
El sitio no es una carta: es la sala de noche. Superficie negra cálida —el
negro sacado del tono de la madera de la tabla, no del negro puro— y una
sola fuente de luz, el dorado del letrero. La fotografía manda; la
tipografía sostiene el ritmo entre foto y foto.
Reglas duras del sistema:
· Una sola familia (Archivo variable) recorriendo peso 100–900 y ancho
62–125%. No hay segunda tipografía: la voz sale de los ejes.
· El dorado es luz, nunca relleno. Si un dorado no ilumina algo, sobra.
· Radio 0 salvo en los blancos táctiles redondos. Cero sombras de caja.
· Ninguna sección repite la geometría de otra.
· La carta es la última y la más callada de todas.
Índice
1. Tokens
2. Base tipográfica
3. Retícula y utilidades
4. Cabecera
5. Hero — secuencia del armado
6. Umbral
7. Experiencia
8. Hamburguesas
9. Barra
10. Galería
11. Opiniones
12. Carta
13. Visita y pie
14. Cursor
15. Movimiento
16. Responsive
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════ */
:root{
/* Superficies. El negro sale de oscurecer la madera de la tabla (#312923),
no de bajar el brillo a cero: por eso tiene temperatura. */
--noche: #0B0908;
--carbon: #131010;
/* Luz — el dorado del letrero, muestreado del último cuadro del vídeo */
--oro: #E8B45C;
--oro-vivo: #F5C97A;
--oro-hondo:#8A6520;
/* Texto (pares verificados contra WCAG 2.1 sobre --noche) */
--tx: #F2EDE4; /* 17.8:1 — AAA */
--tx-2: #A79B8C; /* 7.3:1 — AAA */
--tx-3: #857A6C; /* 4.9:1 — AA, sólo para rótulos de apoyo */
--linea: rgba(242,237,228,.14);
--linea-sutil: rgba(242,237,228,.06);
--linea-oro: rgba(232,180,92,.34);
--sans: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
/* Escala. El salto entre el despliegue y el cuerpo es deliberadamente
brutal: es lo que hace que una lista de nombres se lea como cartel. */
--t-colosal: clamp(3rem, 13vw, 15rem);
--t-hero: clamp(2.4rem, 5.6vw, 7rem);
--t-titulo: clamp(2rem, 5.4vw, 5.5rem);
--t-medio: clamp(1.5rem, 3vw, 2.75rem);
--t-lead: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
--t-cuerpo: 1rem;
--t-chico: .875rem;
--t-micro: .6875rem;
--e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem; --e6:2rem; --e7:3rem;
--aire: clamp(5rem, 3rem + 7vw, 10.5rem);
--marco: clamp(1.25rem, .5rem + 3.4vw, 5rem);
--ancho: 1760px;
--curva: cubic-bezier(.16,1,.3,1);
--cabecera: 4.75rem;
}
/* ═══ 2. BASE TIPOGRÁFICA ═════════════════════════════════════════════════ */
/* Un solo archivo, con los ejes de peso y ancho intactos. Toda la voz del
sitio —desde el rótulo de 11 px hasta el cartel de 15 rem— sale de
recorrer esos dos ejes. No hay segunda familia que descargar. */
@font-face{
font-family:'Archivo';
src:url('../assets/fonts/archivo-variable.woff2') format('woff2');
font-weight:100 900; font-stretch:62% 125%;
font-style:normal; font-display:swap;
}
/* Respaldo con métricas calibradas: sin esto el intercambio de fuente
reflowea los titulares y arruina el CLS. */
@font-face{
font-family:'Archivo-fb';
src:local('Helvetica Neue'), local('Helvetica'), local('Arial');
size-adjust:99.3%; ascent-override:94%; descent-override:24%; line-gap-override:0%;
}
*,*::before,*::after{ box-sizing:border-box }
html{
-webkit-text-size-adjust:100%;
scroll-padding-top:calc(var(--cabecera) + 2rem);
background:var(--noche);
}
body{
margin:0;
background:var(--noche);
color:var(--tx);
font-family:var(--sans),'Archivo-fb',sans-serif;
font-size:var(--t-cuerpo);
font-weight:400;
font-variation-settings:'wdth' 100;
line-height:1.55;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:clip;
}
img,svg,canvas,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
p{ margin:0 }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none }
h1,h2,h3,h4{ margin:0; font-weight:400 }
::selection{ background:var(--oro); color:var(--noche) }
/* ─── Voces tipográficas ───
El despliegue es masa gráfica, no «texto grande»: ancho condensado, peso
alto y interlínea por debajo de 1 para que el bloque se lea como objeto. */
.display{
font-variation-settings:'wght' 800,'wdth' 68;
text-transform:uppercase;
line-height:.84;
letter-spacing:-.025em;
text-wrap:balance;
}
/* Rótulo: el único sitio donde la tipografía se abre y se espacia. Marca
los datos y los índices, y por contraste hace que el resto pese más. */
.rotulo{
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro);
letter-spacing:.22em;
text-transform:uppercase;
color:var(--oro);
}
.rotulo--mudo{ color:var(--tx-2) }
.lead{
font-size:var(--t-lead);
line-height:1.5;
color:var(--tx-2);
max-width:44ch;
text-wrap:pretty;
}
.prosa{ color:var(--tx-2); max-width:56ch; text-wrap:pretty }
.salto{
position:absolute; left:var(--marco); top:-120%;
z-index:400; padding:.875rem 1.5rem;
background:var(--oro); color:var(--noche);
font-variation-settings:'wght' 620,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
}
.salto:focus{ top:1rem }
:focus-visible{ outline:2px solid var(--oro); outline-offset:4px }
/* ═══ 3. RETÍCULA Y UTILIDADES ════════════════════════════════════════════ */
.marco{
width:100%; max-width:var(--ancho);
margin-inline:auto;
padding-inline:var(--marco);
}
.seccion{ position:relative; padding-block:var(--aire) }
/* Los ítems de grilla traen `min-width:auto`: un titular que no puede
partirse ensancha su celda y desborda la página. Se anula de una vez. */
.umbral-cols > *, .barra-int > *, .visita-cols > *, .carta-cols > *{ min-width:0 }
/* Encabezado de sección: índice, título y una regla que ocupa el resto */
.encabezado{
display:flex; align-items:baseline; gap:var(--e4);
padding-bottom:var(--e4);
border-bottom:1px solid var(--linea);
}
.encabezado .n{
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; color:var(--tx-2);
}
/* Enlace de acción: la regla se completa con luz al pasar el cursor */
.accion{
display:inline-flex; align-items:center; gap:.75rem;
padding-block:.625rem;
font-variation-settings:'wght' 600,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
color:var(--tx); position:relative;
}
.accion::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
background:var(--linea);
}
.accion::before{
content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
background:var(--oro); z-index:2;
transition:width .55s var(--curva);
}
.accion:hover::before,.accion:focus-visible::before{ width:100% }
.accion svg{ width:.9375rem; height:.9375rem; transition:transform .45s var(--curva) }
.accion:hover svg{ transform:translateX(4px) }
/* Botón: sólo donde hay una conversión real. Es el letrero encendido. */
.boton{
display:inline-flex; align-items:center; gap:.75rem;
padding:1.0625rem 1.875rem;
background:var(--oro); color:var(--noche);
font-variation-settings:'wght' 680,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
border:0; cursor:pointer;
transition:background-color .4s var(--curva), color .4s var(--curva);
}
.boton:hover{ background:var(--oro-vivo) }
.boton svg{ width:.9375rem; height:.9375rem; transition:transform .45s var(--curva) }
.boton:hover svg{ transform:translateX(4px) }
/* Botón secundario. Existe sólo donde hay dos salidas legítimas y una tiene
que pesar más que la otra: dos botones sólidos del mismo color no son una
jerarquía, son una duda. Mantiene la misma caja y la misma tipografía para
que se lean como pareja, y cambia únicamente el relleno. */
.boton--fantasma{
background:transparent; color:var(--oro);
box-shadow:inset 0 0 0 1px var(--linea-oro);
}
.boton--fantasma:hover{ background:var(--oro); color:var(--noche) }
/* Hueco de fotografía pendiente. No es un adorno: reserva la proporción
exacta que va a ocupar la foto real, así el día que entre no se rediseña
nada y el CLS sigue siendo cero. */
.hueco{
position:relative;
background:
linear-gradient(135deg, transparent 49.6%, var(--linea-sutil) 49.6% 50.4%, transparent 50.4%),
var(--carbon);
display:grid; place-items:center;
overflow:hidden;
}
.hueco::after{
content:attr(data-nota);
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
color:var(--tx-2); text-align:center; padding:var(--e5); max-width:26ch;
}
/* ═══ 4. CABECERA ═════════════════════════════════════════════════════════ */
.cabecera{
position:fixed; inset:0 0 auto 0; z-index:200;
transition:background-color .5s var(--curva), border-color .5s var(--curva);
border-bottom:1px solid transparent;
}
.cabecera.fija{
background:rgba(11,9,8,.78);
backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
border-bottom-color:var(--linea-sutil);
}
.cabecera-int{
display:flex; align-items:center; justify-content:space-between;
gap:var(--e5); height:var(--cabecera);
}
.marca{ display:block; flex:none }
.marca img{ height:1.5rem; width:auto }
/* .nav-carta comparte toda la apariencia con .nav y ninguno de sus cambios de
comportamiento: en móvil .nav se pliega en un panel que abre el botón
hamburguesa de main.js, y /carta.html no carga main.js. Por eso son dos
clases y no una — el detalle, en §12b. */
.nav, .nav-carta{ display:flex; align-items:center; gap:var(--e6) }
.nav a, .nav-carta a{
position:relative;
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
color:var(--tx-2);
transition:color .35s var(--curva);
padding-block:.5rem;
}
.nav a::after, .nav-carta a::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
background:var(--oro); transform:scaleX(0); transform-origin:left;
transition:transform .5s var(--curva);
}
.nav a:hover, .nav-carta a:hover{ color:var(--tx) }
.nav a:hover::after, .nav-carta a:hover::after{ transform:scaleX(1) }
.hamburguesa{
display:none; width:2.75rem; height:2.75rem;
background:transparent; border:1px solid var(--linea);
cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.hamburguesa i{ display:block; width:1.125rem; height:1px; background:var(--tx); position:relative }
.hamburguesa i::before,.hamburguesa i::after{
content:''; position:absolute; left:0; width:1.125rem; height:1px; background:var(--tx);
transition:transform .4s var(--curva), top .4s var(--curva);
}
.hamburguesa i::before{ top:-.3125rem } .hamburguesa i::after{ top:.3125rem }
body.menu-abierto .hamburguesa i{ background:transparent }
body.menu-abierto .hamburguesa i::before{ top:0; transform:rotate(45deg) }
body.menu-abierto .hamburguesa i::after{ top:0; transform:rotate(-45deg) }
/* ═══ 5. HERO — SECUENCIA DEL ARMADO ══════════════════════════════════════ */
/* La sección mide varias pantallas de alto; lo que se queda quieto es
`.hero-fijo`, con `position:sticky`. Se fija con CSS y no con el `pin` de
ScrollTrigger a propósito: el pin inserta un espaciador y reposiciona el
elemento al soltarlo, y cualquier desajuste entre esa altura y la de la
sección deja un hueco negro al final del recorrido. Con sticky el rango
de fijado y el del scrub son literalmente el mismo tramo. */
.hero{ position:relative; height:520svh }
.hero-fijo{
position:sticky; top:0;
height:100svh;
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);
align-items:center;
overflow:hidden;
}
/* El lienzo desborda su celda hacia la derecha para que la hamburguesa ocupe
pantalla de verdad; lo que sobra lo recorta `.hero-fijo`.
El rectángulo de la imagen se elimina en dos pasos y el orden importa:
1. El negro de los cuadros ya viene igualado al de la página desde el
pipeline (ver scripts/generar_secuencia.mjs). Sin eso, ninguna máscara
alcanza: el borde se vería igual, sólo que difuminado.
2. Estas máscaras existen únicamente para lo que sí tiene brillo y llega
al borde — la tabla de madera, que cruza el cuadro de lado a lado y
abajo termina en un canto recto. Sobre el fondo negro no hacen nada,
porque desvanecer negro contra el mismo negro no cambia nada.
El desvanecido inferior es más largo que el resto: la tabla se disuelve en
la página en vez de cortarse, y la hamburguesa queda apoyada en nada. */
/* Luz de ambiente: el mismo cuadro a 64×48, desenfocado y a media opacidad,
ocupando el hero entero por detrás de todo. No es un degradado decorativo
—es la propia fotografía— y por eso conecta: el resplandor que rodea a la
hamburguesa sigue existiendo fuera del recuadro del lienzo, hacia el texto
y por debajo de la tabla. Es lo que hace que la imagen deje de tener un
contorno donde termina.
La máscara radial la concentra donde está el sujeto y la apaga hacia la
izquierda, así detrás del texto queda apenas una insinuación y no una
mancha. */
.hero-halo{
/* Fila 1 a la última: en vertical la rejilla tiene una segunda fila con el
rail, y si el halo se queda en la primera se corta justo ahí. */
grid-area:1 / 1 / -1 / -1;
width:100%; height:100%;
object-fit:cover;
z-index:0;
opacity:.3;
filter:blur(72px) saturate(1.1);
transform:scale(1.22);
pointer-events:none;
/* Radio grande y caída larga: si el degradado de la máscara termina cerca,
el propio halo dibuja un borde y se cambia un rectángulo por una mancha. */
-webkit-mask-image:radial-gradient(145% 125% at 76% 50%, #000 0%, #000 20%, transparent 96%);
mask-image:radial-gradient(145% 125% at 76% 50%, #000 0%, #000 20%, transparent 96%);
}
/* La proporción la fija el JS con la variante de secuencia que cargó. Es
deliberado: mientras el elemento fue cuadrado y la imagen se acomodaba
dentro con `contain`, la fotografía ocupaba el 11%–89% de la caja y el
último tramo de la máscara caía sobre el letterbox, sin tocar la imagen.
El fundido nunca llegaba a cerrar y quedaba una línea recta justo donde
terminaba la foto. Con el elemento a la proporción exacta del cuadro, los
porcentajes de la máscara y la imagen son lo mismo. */
.hero-lienzo{
grid-column:2; grid-row:1;
z-index:1;
width:118%;
aspect-ratio:var(--proporcion, 1120 / 864);
height:auto;
object-fit:contain;
/* El pie se apaga con una curva, no con una rampa recta: la tabla se va
perdiendo y la hamburguesa queda intacta. A 86% de la altura —donde
apoya el pan— la máscara todavía está al 96%. */
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 13%,#000 92%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 7%,#000 80%,
rgba(0,0,0,.96) 86%, rgba(0,0,0,.85) 90%, rgba(0,0,0,.66) 93%,
rgba(0,0,0,.44) 95.5%, rgba(0,0,0,.24) 97.5%, rgba(0,0,0,.09) 99%,
transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 13%,#000 92%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 7%,#000 80%,
rgba(0,0,0,.96) 86%, rgba(0,0,0,.85) 90%, rgba(0,0,0,.66) 93%,
rgba(0,0,0,.44) 95.5%, rgba(0,0,0,.24) 97.5%, rgba(0,0,0,.09) 99%,
transparent 100%);
mask-composite:intersect;
}
/* ─── Rail de ingredientes ───
Columna izquierda: el nombre del ingrediente que está entrando, y debajo
la escalera de pasos. Es una anotación técnica, no un subtítulo. */
.hero-rail{
grid-column:1; grid-row:1;
position:relative; z-index:2;
padding-left:var(--marco);
padding-right:var(--e5);
display:flex; flex-direction:column; justify-content:center;
gap:var(--e6);
pointer-events:none;
}
.hero-pasos{ display:grid; gap:.625rem }
.hero-paso{
display:grid; grid-template-columns:2.25rem 1fr;
align-items:center; gap:var(--e4);
font-variation-settings:'wght' 540,'wdth' 86;
font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
color:var(--tx-2); opacity:.34;
transition:opacity .5s var(--curva), color .5s var(--curva);
}
.hero-paso .barra{
height:1px; width:100%; background:var(--linea);
position:relative; overflow:hidden;
}
.hero-paso .barra::after{
content:''; position:absolute; inset:0;
background:var(--oro); transform:scaleX(0); transform-origin:left;
transition:transform .5s var(--curva);
}
.hero-paso.activo{ opacity:1; color:var(--tx) }
.hero-paso.activo .barra::after{ transform:scaleX(1) }
.hero-paso.pasado{ opacity:.62 }
.hero-paso.pasado .barra::after{ transform:scaleX(1); background:var(--oro-hondo) }
/* El nombre en grande: se cruza uno con otro, nunca hay dos legibles a la vez */
.hero-nombres{ position:relative; min-height:clamp(5rem,11vw,10rem) }
.hero-nombre{
position:absolute; inset:auto auto 0 0;
width:100%;
font-size:var(--t-medio);
font-variation-settings:'wght' 760,'wdth' 70;
text-transform:uppercase; line-height:.92; letter-spacing:-.02em;
opacity:0;
}
.hero-nombre em{ font-style:normal; color:var(--oro) }
/* Cierre: cuando la hamburguesa está armada y el letrero encendido, entra
el titular del sitio y se apaga el rail. */
.hero-cierre{
position:absolute; inset:auto 0 0 0; z-index:3;
padding:0 var(--marco) clamp(2.5rem,7vh,5.5rem);
opacity:0; pointer-events:none;
}
.hero-cierre.visible{ pointer-events:auto }
/* El titular vive en la mitad izquierda: la hamburguesa ocupa la derecha y
dos masas gráficas encimadas no se leen como decisión, se leen como error.
El ancho lo fijan los cortes de línea del marcado y la escala, no un
`max-width`: como `.linea` lleva `overflow:hidden` para la máscara de
revelado, una caja más angosta que la palabra más larga la recortaría. */
.hero-cierre h1{
font-size:var(--t-hero);
font-variation-settings:'wght' 820,'wdth' 66;
text-transform:uppercase; line-height:.82; letter-spacing:-.03em;
}
.hero-cierre h1 em{ font-style:normal; color:var(--oro) }
/* El hueco lateral era `--e7`, pensado para separar el botón de un renglón de
texto suelto. Ahora son dos botones y ese aire los desarma como pareja: van
juntos, con la separación justa para que no se toquen. */
.hero-pie{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--e4);
margin-top:clamp(1.5rem,3vw,2.5rem);
padding-top:var(--e5);
border-top:1px solid var(--linea);
}
/* Aviso de scroll: desaparece apenas el recorrido arranca */
.hero-pista{
position:absolute; inset:auto var(--marco) clamp(2rem,5vh,3rem) auto; z-index:4;
display:flex; align-items:center; gap:var(--e3);
font-variation-settings:'wght' 540,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
color:var(--tx-2);
}
.hero-pista i{
display:block; width:1px; height:2.5rem; background:var(--linea);
position:relative; overflow:hidden;
}
.hero-pista i::after{
content:''; position:absolute; left:0; top:0; width:1px; height:40%;
background:var(--oro);
animation:pista 2.4s var(--curva) infinite;
}
@keyframes pista{
0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(250%) }
}
/* ═══ 6. UMBRAL ═══════════════════════════════════════════════════════════ */
/* Primera sección después del hero. Un enunciado grande a la izquierda y una
columna de datos duros a la derecha, separadas por una regla vertical.
Es la única sección con esa regla: marca el ingreso al sitio. */
.umbral{ padding-block:clamp(6rem,12vw,13rem) }
.umbral-cols{
display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
gap:clamp(2.5rem,6vw,7rem);
align-items:start;
}
.umbral-texto{
font-size:var(--t-titulo);
font-variation-settings:'wght' 620,'wdth' 78;
line-height:1.02; letter-spacing:-.025em;
max-width:18ch;
margin-top:clamp(2rem,4vw,3.5rem);
}
.umbral-texto em{ font-style:normal; color:var(--oro) }
.umbral-nota{ margin-top:clamp(2rem,4vw,3rem); color:var(--tx-2); max-width:48ch }
.datos{
border-left:1px solid var(--linea);
padding-left:clamp(1.5rem,3vw,3rem);
margin-top:clamp(2rem,4vw,3.5rem);
}
.dato{ padding-block:var(--e5); border-bottom:1px solid var(--linea-sutil) }
.dato:first-child{ padding-top:0 }
.dato dt{
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
color:var(--tx-2); margin-bottom:var(--e3);
}
.dato dd{
font-variation-settings:'wght' 620,'wdth' 82;
font-size:clamp(1.0625rem,1.6vw,1.375rem);
line-height:1.3; letter-spacing:-.01em;
}
.dato dd span{ display:block; color:var(--tx-2); font-variation-settings:'wght' 460,'wdth' 92; font-size:var(--t-chico) }
/* Segundo horario del mismo bloque: necesita aire para no leerse como
continuación del primero. */
.dato dd .hora{
color:var(--tx); font-variation-settings:'wght' 620,'wdth' 82;
font-size:clamp(1.0625rem,1.6vw,1.375rem);
}
.dato dd span + .hora{ margin-top:var(--e4) }
/* ═══ 7. EXPERIENCIA ══════════════════════════════════════════════════════ */
/* Texto a la izquierda, alineado con el resto del sitio, y la nocturna
ocupando el resto hasta el borde derecho de la pantalla.
─── Cómo se tratan las fotografías del sitio ───
La regla es una sola y se aplica midiendo, no a ojo: un borde se desvanece
sólo si el tono propio de la foto en ese borde ya está cerca del negro de
la página. Si el borde es claro, desvanecerlo no lo integra —dibuja un
degradado oscuro encima, que es un efecto y se nota—; en ese caso el borde
se manda fuera de pantalla, donde el corte lo da el viewport y no se lee
como el límite de una imagen.
`salon` es la única de las cuatro con los cuatro bordes oscuros
(#05090a arriba, #0f0e08 abajo, #19271d y #2a1607 a los lados), así que es
la única que puede fundirse de verdad por tres lados. */
.experiencia{ padding-block:var(--aire) }
.experiencia-int{
display:grid;
grid-template-columns:minmax(0,24rem) minmax(0,1fr);
gap:clamp(2rem,5vw,5.5rem);
align-items:center;
/* El texto arranca donde arrancan todas las secciones; la foto sigue hasta
el borde y no lleva padding que la frene. */
padding-left:max(var(--marco), calc((100vw - var(--ancho)) / 2 + var(--marco)));
}
.experiencia-texto h2{
font-size:var(--t-titulo);
font-variation-settings:'wght' 780,'wdth' 68;
text-transform:uppercase; line-height:.88; letter-spacing:-.025em;
margin-top:var(--e5);
}
.experiencia-texto h2 em{ font-style:normal; color:var(--oro) }
.experiencia-texto .lead{ margin-top:var(--e5) }
.experiencia-foto{ margin:0; min-width:0 }
.experiencia-foto img{ width:100%; height:auto; will-change:transform }
/* Izquierda, arriba y abajo se disuelven contra la página; la derecha se va
de pantalla. No hay ningún borde que quede a la vista. */
.experiencia-foto picture{
display:block;
/* Recorta la fotografía cuando el paralaje la desplaza dentro del marco. */
overflow:hidden;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 17%,#000 100%),
linear-gradient(180deg,transparent 0,#000 11%,#000 87%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 17%,#000 100%),
linear-gradient(180deg,transparent 0,#000 11%,#000 87%,transparent 100%);
mask-composite:intersect;
}
/* ═══ 8. HAMBURGUESAS ═════════════════════════════════════════════════════ */
/* Una hamburguesa por vez, a pantalla completa, y el scroll pasa a la
siguiente. El escenario se queda quieto con `sticky` —igual que el hero y
los dos recorridos horizontales— pero la geometría es propia: acá no se
desplaza nada de costado, se releva el plato.
Las imágenes son PNG recortados con canal alfa. Sin fondo no hay caja, no
hay máscara y no hay canto: la hamburguesa se apoya sobre el negro y ya.
Es la única sección del sitio donde la fotografía no necesita integrarse,
porque no trae nada que integrar. */
/* 70svh por ítem (560/8 a ojo con las 8 hamburguesas de hoy). Se calcula
desde --burgers-n en vez de quedar fijo porque supabase-public.js puede
reconstruir la sección con otra cantidad; el 8 por defecto hace que, si
JS nunca corre, el alto sea idéntico al de siempre. */
.burgers{ position:relative; height:calc(var(--burgers-n, 8) * 70svh) }
.burgers-escena{
position:sticky; top:0;
height:100svh;
display:flex; align-items:center;
overflow:hidden;
}
/* Luz ambiental de la zona del plato. No es un círculo ni un halo con borde:
es una elipse enorme y muy abierta, centrada donde está la hamburguesa, que
levanta el fondo unos diez niveles de luminancia en su punto más fuerte y se
apaga mucho antes de llegar a ningún canto. Va sobre la escena y no sobre el
plato para que no parpadee al cambiar de hamburguesa. */
.burgers-escena::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(48% 54% at 76% 52%, rgba(232,180,92,.062), transparent 70%);
}
/* Plano técnico de fondo. El tono sale del dorado del sitio a muy baja
opacidad: sobre el negro da un café oscuro que queda a unos diez niveles de
luminancia del fondo. Es grande a propósito y la escena lo recorta —tiene
que leerse como que sigue más allá de la pantalla, no como una figura
centrada—. */
.burgers-plano{
position:absolute;
top:50%; right:-14%;
translate:0 -50%;
width:min(126vh, 66rem);
height:auto;
z-index:0;
color:rgba(232,180,92,.055);
pointer-events:none;
will-change:transform;
}
.burgers-marco{
position:relative; z-index:1;
width:100%; max-width:var(--ancho);
margin-inline:auto;
padding-inline:var(--marco);
display:grid;
grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);
gap:clamp(1.5rem,4vw,4rem);
align-items:center;
}
/* ─── Cabeza e índice ───
El índice es a la vez indicador de posición y navegación: se ve dónde está
uno, qué viene y qué quedó atrás, y se puede saltar. La línea de progreso
corre en paralelo, movida por el mismo scroll. */
.burgers-cabeza{ align-self:center }
.burgers-cabeza .encabezado{ margin-bottom:clamp(1.5rem,3vw,2.5rem) }
/* En una columna de 11,5rem el rótulo entra en un renglón; sin esto «las
hamburguesas» cae debajo del número y el encabezado se lee partido. */
.burgers-cabeza .encabezado .rotulo{ letter-spacing:.14em }
.burgers-indice{ position:relative; padding-left:var(--e4) }
.burgers-indice::before{
content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
background:var(--linea-sutil);
}
.burgers-progreso{ position:absolute; left:0; top:0; bottom:0; width:1px; overflow:hidden }
.burgers-progreso i{
display:block; width:100%; height:100%;
background:var(--oro);
transform:scaleY(0); transform-origin:top;
}
.burgers-indice li + li{ margin-top:.375rem }
.burgers-salto{
display:flex; align-items:baseline; gap:.5rem;
background:transparent; border:0; cursor:pointer; padding:.1875rem 0;
text-align:left; width:100%;
color:var(--tx-2); opacity:.42;
transition:opacity .45s var(--curva), color .45s var(--curva);
}
.burgers-salto .n{
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.14em;
}
.burgers-salto .t{
font-variation-settings:'wght' 540,'wdth' 84;
font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
}
.burgers-salto:hover{ opacity:.85; color:var(--tx) }
.burgers-indice li.activo .burgers-salto{ opacity:1; color:var(--oro) }
/* ─── Escenario ───
Las ocho apiladas en la misma celda de rejilla, no metidas y sacadas del
documento: quedan disponibles para un lector de pantalla, el bloque mide lo
que la ficha más alta, y desapilarlas es todo lo que hace falta para tener
la versión sin animación. */
.burgers-escenario{ display:grid; min-width:0 }
.burgers-item{
grid-area:1 / 1;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,auto);
gap:clamp(1.5rem,4vw,4rem);
align-items:center;
opacity:0;
will-change:opacity;
}
.burgers-ficha{ min-width:0 }
.burgers-num{
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.22em; color:var(--oro);
margin-bottom:var(--e3);
}
.burgers-nombre{
font-size:clamp(2.25rem,5vw,4.5rem);
font-variation-settings:'wght' 800,'wdth' 66;
text-transform:uppercase; line-height:.86; letter-spacing:-.03em;
}
.burgers-ing{
margin-top:clamp(1rem,2vw,1.75rem);
max-width:32ch;
color:var(--tx-2);
font-variation-settings:'wght' 460,'wdth' 94;
font-size:var(--t-chico); line-height:1.7;
}
.burgers-precio{
display:flex; flex-wrap:wrap; gap:var(--e3) var(--e6);
margin-top:clamp(1.25rem,2.5vw,2rem);
padding-top:var(--e4);
border-top:1px solid var(--linea-sutil);
font-variation-settings:'wght' 560,'wdth' 90;
font-size:1.0625rem; font-variant-numeric:tabular-nums;
}
.burgers-precio b{
display:block;
font-variation-settings:'wght' 560,'wdth' 88;
font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
color:var(--tx-3);
}
.burgers-plato{
position:relative; margin:0;
width:min(52vh,30rem);
justify-self:end;
will-change:transform;
}
/* Foco muy tenue por detrás: apoya la hamburguesa recortada sobre el negro
para que no quede flotando en el vacío. Es luz, no una caja. */
.burgers-plato::before{
content:''; position:absolute; inset:10% -16% -4% -16%;
background:radial-gradient(56% 44% at 50% 62%, rgba(232,180,92,.14), transparent 70%);
pointer-events:none;
}
.burgers-plato picture{ position:relative; display:block }
.burgers-plato img{ width:100%; height:auto }
/* Fallback sin foto (`imagen_path` null, ver supabase-public.js): el .hueco
no tiene proporción propia como un con sus atributos width/height,
así que hay que dársela — las fotos que sí llegan son 1:1. */
.burgers-plato .hueco{ width:100%; aspect-ratio:1/1 }
/* Sin animación —movimiento reducido o sin GSAP— la escena deja de tener
sentido: se desapila y quedan todas una debajo de otra, con todo a la
vista y sin nada que dependa del scroll. */
.burgers-planas .burgers{ height:auto; padding-block:var(--aire) }
/* `relative` y no `static`, y `overflow-x:clip` y no `overflow:visible`.
Acá había `position:static; overflow:visible`, y las dos mitades se juntaban
para el mismo desastre. El `.burgers-plano` está puesto a propósito con
`right:-14%` para salirse por el costado y que la escena lo corte —lo dice el
comentario de su regla—, pero `visible` le sacaba el recorte y `static` le
sacaba a la escena el papel de bloque contenedor: al no quedar ningún
ancestro posicionado hasta `section.burgers`, el SVG absoluto se colgaba de
ahí y ni siquiera un recorte en la escena lo hubiera alcanzado, porque un
`overflow` no recorta a un absoluto cuyo contenedor está más arriba.
El resultado era que la página se arrastraba de costado unos 200px, y sólo le
pasaba a quien había pedido menos movimiento. `relative` devuelve el
contenedor sin reponer el `sticky`, y `clip` recorta lo horizontal dejando lo
vertical libre — que es lo único que el `visible` original hacía falta para
lograr: desapilada, la escena crece y no puede cortar las ocho hamburguesas.
`hidden` no sirve: crearía un contenedor de scroll en los dos ejes. */
.burgers-planas .burgers-escena{
position:relative; height:auto; display:block;
overflow-x:clip; overflow-y:visible;
}
.burgers-planas .burgers-marco{ grid-template-columns:1fr }
.burgers-planas .burgers-indice{ display:none }
.burgers-planas .burgers-escenario{ display:block }
.burgers-planas .burgers-item{
opacity:1;
padding-block:clamp(2.5rem,6vw,4rem);
border-top:1px solid var(--linea-sutil);
}
.burgers-planas .burgers-item:first-child{ border-top:0 }
/* ═══ 9. BARRA ════════════════════════════════════════════════════════════ */
/* Texto a la izquierda —índice, título y las dos líneas de la barra— y a la
derecha una composición de dos fotografías superpuestas.
─── Por qué acá no hay máscaras ───
`salon` puede desvanecerse porque sus cuatro bordes ya son casi negros: el
fundido no se ve y la foto sigue leyéndose entera. Estas dos tienen bordes
claros —el mural iluminado, los papeles blancos—, y ahí el mismo recurso
deja de integrar y pasa a pintar un degradado oscuro encima de la
fotografía: parece que se está borrando.
La solución no es más fundido sino composición: la bandeja sangra por la
derecha y el brindis se monta sobre su ángulo inferior izquierdo, de modo
que cada una tapa bordes de la otra y lo que queda a la vista son cantos de
fotografía. Una fotografía puede terminar; lo que no puede es desvanecerse
a medias. */
.barra{ background:var(--carbon) }
.barra-int{
display:grid;
grid-template-columns:minmax(0,26rem) minmax(0,1fr);
gap:clamp(2.5rem,6vw,6rem);
align-items:center;
padding-left:max(var(--marco), calc((100vw - var(--ancho)) / 2 + var(--marco)));
}
.barra-texto{ min-width:0 }
.barra-bloque + .barra-bloque{ margin-top:clamp(2.5rem,5vw,4rem) }
.barra-bloque h3{
font-size:var(--t-medio);
font-variation-settings:'wght' 760,'wdth' 70;
text-transform:uppercase; line-height:.94; letter-spacing:-.02em;
margin-block:var(--e5) var(--e4);
}
.barra-bloque h3 em{ font-style:normal; color:var(--oro) }
/* `.barra-lista` vivía acá: dos listas de cuatro renglones que repetían los
nombres de las categorías de la carta. Se fueron con el marcado —estiraban
la sección al doble sin agregar un dato— y en su lugar quedó un enlace al
grupo de barra de /carta.html, que es donde esos nombres sí vienen con
precio. */
.barra-pie{ margin-top:clamp(2rem,4vw,3rem) }
/* Las dos comparten una única fila de rejilla y se pisan: la bandeja manda
—vertical, grande, sangrando por la derecha— y el brindis se monta sobre su
ángulo inferior izquierdo, apaisado y más chico. El contraste de formatos
entre una vertical y una apaisada es lo que evita que se lean como dos
piezas equivalentes puestas una al lado de la otra.
─── Qué borde lleva máscara y por qué ───
Medido sobre las fotografías, no a ojo (fondo de página = 9,4):
brindis arriba 60 abajo 2,6 izq 57 der 42
bandeja arriba 83 abajo 43 izq 107 der 52
El pie del brindis está en 2,6 —más oscuro que la propia página— porque el
recorte cae sobre la banda de sombra entre la pared y la mesa. Ése no lleva
nada: desaparece solo, igual que los de la nocturna del local. Su lado
derecho tampoco, porque apoya sobre la bandeja.
La bandeja no tiene ni un borde oscuro: el mural ilumina todo el cuadro, y
se probó con plumas cortas en los lados que dan al fondo. No funcionó —un
degradado sobre un canto claro no lo integra, lo convierte en un rectángulo
de bordes borrosos, que es peor que un canto limpio—. Así que no lleva
ninguna: es una fotografía y termina donde termina. Lo que la sostiene es la
composición, no una máscara. */
.barra-composicion{
display:grid;
grid-template-columns:repeat(12,1fr);
min-width:0;
}
.barra-foto{ margin:0; min-width:0 }
.barra-foto img{ width:100%; height:auto }
.barra-foto--principal{ grid-area:1 / 5 / 2 / 13; align-self:start }
/* El brindis baja hasta pasar el pie de la bandeja: el punto más bajo de la
composición es el suyo, que es el único borde que se funde solo. */
.barra-foto--contrapunto{
grid-area:1 / 1 / 2 / 10;
align-self:end;
z-index:2;
margin-bottom:clamp(-4rem,-5vw,-2rem);
}
/* ═══ 9b. MINGA ═══════════════════════════════════════════════════════════ */
/* Mismo mecanismo que la galería —sección más alta que la pantalla, interior
fijado con `sticky` y una pista que se desplaza en X— y distinta geometría:
allá es una hilera de piezas sueltas que desfilan, acá es una sola
superficie continua que se recorre. Sin eso serían dos secciones seguidas
con la misma composición.
El ancho del plano lo fijan sus propios contenidos; el recorrido que hace
GSAP es la diferencia entre ese ancho y el del viewport. El vídeo mide
88vw a propósito: al terminar el desplazamiento entra completo en pantalla,
que es el remate de la sección. Si se agranda más, la composición de las
cinco latas no llega a verse nunca entera. */
.minga{ position:relative; height:200svh }
.minga-int{
position:sticky; top:0;
height:100svh;
display:flex; align-items:center;
overflow:hidden;
}
.minga-pista{
display:flex; align-items:center;
gap:clamp(2.5rem,6vw,7rem);
padding-inline:var(--marco) clamp(3rem,8vw,10rem);
will-change:transform;
}
.minga-texto{ flex:0 0 auto; width:min(34rem,46vw) }
.minga-texto .encabezado{ margin-bottom:clamp(1.5rem,4vw,3rem) }
/* El cartel es masa gráfica, no un titular más: va al ancho más condensado y
al peso más alto de toda la página. */
.minga-cartel{
font-size:clamp(4rem,11vw,12rem);
font-variation-settings:'wght' 860,'wdth' 62;
text-transform:uppercase;
line-height:.78; letter-spacing:-.045em;
color:var(--oro);
}
.minga-texto .lead{ margin-top:clamp(1.5rem,3vw,2.5rem); max-width:26ch }
.minga-video{ flex:0 0 auto; margin:0; width:88vw }
.minga-video video{
width:100%; height:auto; display:block;
/* ─── Cómo se funde el vídeo con el fondo ───
La composición del plano llega pegada a los cantos: la primera lata
arranca en la columna 0 y la última termina en la última. No hay margen
negro sobre el que degradar, así que el fundido de la izquierda
necesariamente atraviesa la primera lata — y eso es justamente lo que
hace que la imagen parezca emerger de la oscuridad en vez de empezar de
golpe con un canto vertical.
Las paradas van en píxeles y no en porcentaje para que la transición mida
lo mismo en cualquier pantalla: unos 155 px a la izquierda y 90 a la
derecha. En porcentaje, a 1920 se iría a más de 200 y a 1280 se quedaría
corta.
Los pasos intermedios son una curva, no una rampa recta: una rampa lineal
sobre una lata iluminada se lee como una banda gris cruzándola.
Arriba no lleva nada: el fondo del vídeo ya está igualado al de la página
desde el encode. El pie sí, que es la superficie reflejada. */
-webkit-mask-image:
linear-gradient(90deg,
transparent 0,
rgba(0,0,0,.12) 24px,
rgba(0,0,0,.38) 56px,
rgba(0,0,0,.68) 94px,
rgba(0,0,0,.89) 126px,
#000 155px,
#000 calc(100% - 90px),
rgba(0,0,0,.72) calc(100% - 46px),
rgba(0,0,0,.3) calc(100% - 18px),
transparent 100%),
linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,
transparent 0,
rgba(0,0,0,.12) 24px,
rgba(0,0,0,.38) 56px,
rgba(0,0,0,.68) 94px,
rgba(0,0,0,.89) 126px,
#000 155px,
#000 calc(100% - 90px),
rgba(0,0,0,.72) calc(100% - 46px),
rgba(0,0,0,.3) calc(100% - 18px),
transparent 100%),
linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
mask-composite:intersect;
}
/* ═══ 10. GALERÍA ═════════════════════════════════════════════════════════ */
/* Tira horizontal recorrida por el scroll. Las piezas no tienen todas el
mismo alto: la irregularidad es lo que la separa de un carrusel. */
/* La sección mide más de una pantalla y su interior se queda quieto, igual
que el hero: sin eso la tira ya iba por la mitad de su recorrido cuando la
sección entraba en pantalla, y las primeras piezas no se veían nunca. */
/* 175svh y no 230: la altura de la sección es el combustible del recorrido
horizontal, y el recorrido se acortó al pasar a marcos verticales —una foto
vertical es más angosta que una apaisada, así que la tira mide menos—. Con
230svh quedaban 1170px de scroll para mover 600 de tira: la mitad del tramo
era scrollear para ver casi nada moverse. Medido a 1440×900, ahora son 810
de scroll para 660 de tira. */
.galeria{ position:relative; height:175svh }
.galeria-int{
position:sticky; top:0;
height:100svh;
display:flex; flex-direction:column; justify-content:center;
gap:clamp(2rem,4vw,3.5rem);
overflow:hidden;
/* El bloque se centra en la pantalla menos la cabecera, no en la pantalla
entera. La cabecera es fija y no ocupa espacio en el flujo, así que sin
esto el centrado la ignora: con las piezas verticales, que son más altas
que los marcos apaisados de antes, el rótulo «06 · El local» subía hasta
los 60px y se metía debajo de la barra de navegación, que empieza en 0 y
mide 76. Se veía el hueco donde tenía que estar el título. */
padding-top:var(--cabecera);
}
.galeria-pista{
display:flex; align-items:center; gap:clamp(1rem,2vw,2rem);
padding-left:var(--marco);
will-change:transform;
}
/* Marcos verticales, y la medida que manda es el alto.
Las cinco fotos del local son verticales (0,66 a 0,74 de proporción). Los
marcos de antes eran casi cuadrados y apaisados —34×30rem—, así que meterlas
ahí obligaba a tirar media foto de cada una. Ahora la pieza no tiene ancho
propio: se le da el alto y el `` con `width:auto` toma el ancho de su
proporción real. Eso hace dos cosas de una: entran enteras, y como cada foto
trae una proporción distinta los anchos salen desparejos solos, que es lo
que esta tira necesitaba para no parecer un carrusel. El alternado de altos
—una alta, una baja— y el desalineado vertical siguen igual que antes. */
.galeria-pieza{ flex:0 0 auto; position:relative; margin:0 }
.galeria-foto{
display:block;
width:auto; max-width:78vw;
height:min(66vh,43rem);
object-fit:cover;
/* El filete no es adorno, y el porqué está medido. Los veinte bordes de las
cinco fotos van de 14,8 a 134,7 sobre un fondo de 9,3: ninguno se puede
fundir —la regla del proyecto pide escalones por debajo de ~10 para eso, y
acá el menor es +5,5 y el mayor +125,4—, así que las piezas son
rectángulos y punto. El problema es justamente ese +5,5: el canto superior
de «Bajo el letrero» queda tan cerca del fondo que sin una línea se
desvanece, y una sola pieza abierta por arriba en una tira de cinco
cerradas no se lee como decisión sino como imagen rota. Medido en pantalla,
la fila del filete da 22,3 entre un fondo de 9,3 y una foto que arranca en
11,0: sin él, el salto del fondo a la foto sería de 1,7 y ese canto no
existiría. Alcanza para cerrarlo sin dibujar un marco. */
border:1px solid var(--linea-sutil);
}
.galeria-pieza:nth-child(even) .galeria-foto{ height:min(50vh,32rem) }
.galeria-pieza:nth-child(3n){ align-self:flex-start }
.galeria-pieza:nth-child(4n){ align-self:flex-end }
/* `.galeria-pie` se quitó el 31/08/2026 junto con los cinco ``.
Rotular «Salón», «Barra» o «Mesa» debajo de una foto de un salón, una barra
o una mesa es describir lo que ya se ve: el pie de foto sólo gana algo
cuando aporta lo que la imagen no dice. La descripción sigue existiendo
donde hace falta, en el `alt` de cada ``, que es para quien no ve la
foto. Si vuelve un pie, que traiga un dato — no el nombre de lo retratado. */
/* ═══ 11. OPINIONES ═══════════════════════════════════════════════════════ */
/* Llegaron las reseñas: tres con
y
citando la fuente, tal como preveía el comentario que estaba
acá. La grilla no cambió — se le cayó el `aspect-ratio` de los huecos, que
es lo único que tenía sentido mientras no hubiera texto que la midiera. */
.opiniones-lista{
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
gap:clamp(1.5rem,3vw,2.5rem);
margin-top:clamp(2.5rem,5vw,4rem);
}
/* Columna flex y no bloque, para que la firma pueda irse al pie con
`margin-top:auto`. Las tres reseñas miden entre 240 y 330 caracteres: con la
firma pegada al final del texto, las tres caían a tres alturas distintas y
una fila de fichas desalineadas por abajo se lee como error de maquetado.
`auto-fit` ya las hace de igual alto; esto aprovecha ese alto. */
.opinion{
display:flex; flex-direction:column;
margin:0; padding:clamp(1.5rem,2.5vw,2.25rem);
background:var(--carbon);
border:1px solid var(--linea-sutil);
}
.opinion-estrellas{
margin:0; color:var(--oro);
font-size:var(--t-chico); letter-spacing:.22em;
}
.opinion-texto{
/* El navegador le pone a