/* Libertino Café.
   La idea: cada pantalla es uno de sus afiches. Color plano, un objeto al medio, texto mono en las esquinas.
   Los colores salen de sus placas (azul del afiche del cacio e pepe, oliva del waffle, crema del workshop) y de la barra (ocre). */

:root {
  --azul: #22558e;
  --oliva: #525334;
  --ocre: #b27a46;
  --papel: #e4dfd6;
  --tinta: #141412;
  --hormigon: #8b8780;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --borde: clamp(16px, 4vw, 44px);
  --chico: clamp(.72rem, .66rem + .2vw, .84rem);
  --nav: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav) }
body { font: 400 var(--chico)/1.55 var(--mono); color: var(--tinta); background: var(--papel); overflow-x: hidden; -webkit-font-smoothing: antialiased }
img, video, iframe { display: block; max-width: 100%; border: 0 }
img, video { height: auto }
ul, ol { list-style: none }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px }
section { position: relative; padding: clamp(56px, 11vw, 130px) var(--borde) }

/* ---------- piezas que se repiten ---------- */
.titulo { font-weight: 800; font-size: clamp(2.7rem, 13.6vw, 9.5rem); line-height: .88; letter-spacing: -.045em; text-transform: uppercase }
.par { text-transform: uppercase; letter-spacing: .08em }
.par::before { content: "(" }
.par::after { content: ")" }
.tag { display: inline-block; background: #fff; color: var(--tinta); padding: .4em .75em; line-height: 1.2 }
.sello { display: inline-block; border: 1.5px solid currentColor; border-radius: 7px; padding: .7em .95em; text-transform: uppercase; letter-spacing: .06em; line-height: 1.5; transform: rotate(-7deg) }
.logo { display: block; aspect-ratio: 633 / 580; background: currentColor; -webkit-mask: url(img/logo.png) center / contain no-repeat; mask: url(img/logo.png) center / contain no-repeat }
.boton { display: inline-block; background: var(--tinta); color: var(--papel); padding: 1.05em 1.4em; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; transition: transform .25s }
.boton::after { content: " \2192" }
.boton:hover { transform: translateX(4px) }
.boton.claro { background: var(--papel); color: var(--tinta) }
.enlace { display: inline-block; text-decoration: underline; text-underline-offset: .3em; text-transform: uppercase; letter-spacing: .08em; padding: .6em 0 }
.cabecera { display: grid; gap: 18px; margin-bottom: clamp(26px, 5vw, 60px) }
.cabecera p { max-width: 38ch }
.fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: .85em 0; border-bottom: 1px dashed currentColor }
.fila small { display: block; font-size: .92em; opacity: .7; max-width: 38ch }
.fila b { flex: none; font-weight: 700 }
.desliza { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--borde)); padding: 0 var(--borde); scrollbar-width: none; -webkit-overflow-scrolling: touch }
.desliza::-webkit-scrollbar { display: none }
.desliza > * { flex: none; scroll-snap-align: center }
.foto { position: relative; overflow: hidden; background: var(--hormigon) }
.foto img, .foto video { width: 100%; height: 100%; object-fit: cover }
.foto .tag { position: absolute; left: 10px; bottom: 10px }

/* ---------- navegación ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--nav); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 var(--borde); color: var(--papel); text-transform: uppercase; letter-spacing: .08em; transition: background .3s, color .3s }
.nav.fija { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 0 rgba(20, 20, 18, .16) }
.nav .logo { height: 36px; transition: opacity .3s }
.nav:not(.fija) .nav-logo { opacity: 0; pointer-events: none }
.nav-links { display: none; gap: clamp(14px, 2.4vw, 34px) }
.nav-links a:hover, .nav-pedir:hover { text-decoration: underline; text-underline-offset: .35em }
.nav-pedir { display: none; font-weight: 700 }
.nav-indice { text-transform: inherit; letter-spacing: inherit; padding: 12px 0 }
.indice { position: fixed; inset: 0; z-index: 40; background: var(--azul); color: var(--papel); display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--borde) var(--borde); overflow-y: auto }
.indice[hidden] { display: none }
.indice-cab { height: var(--nav); display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: .08em }
.indice-cab .logo { height: 36px }
.indice nav { align-self: center; display: grid; gap: .08em; font-weight: 800; font-size: clamp(2.4rem, 12.5vw, 5rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; padding: 24px 0 }
.indice-pie { display: flex; justify-content: space-between; align-items: end; gap: 16px }

/* ---------- entrada ---------- */
.entrada { height: 100svh; min-height: 560px; background: var(--azul); color: var(--papel); overflow: hidden; display: grid; grid-template: "logo logo" 1fr "bio bio" auto "hora sello" auto / 1fr auto; gap: 16px; padding: calc(var(--nav) + 5svh) var(--borde) calc(var(--borde) + 10px) }
.entrada-fondo { position: absolute; inset: 0; z-index: 0; display: grid }
.entrada-fondo video { width: 100%; height: 100%; min-height: 0; object-fit: cover }
.entrada-fondo .lado { display: none }
.entrada::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(12, 12, 10, .7), rgba(12, 12, 10, .28) 20%, rgba(12, 12, 10, .1) 44%, rgba(12, 12, 10, .14) 54%, rgba(12, 12, 10, .86)) }
.entrada > :not(.entrada-fondo) { position: relative; z-index: 1 }
.entrada-logo { grid-area: logo; justify-self: center; width: min(60vw, 290px); filter: drop-shadow(0 2px 22px rgba(12, 12, 10, .4)) }
.entrada-bio { grid-area: bio; max-width: 31ch }
.entrada-hora { grid-area: hora; align-self: end }
.entrada-sello { grid-area: sello; align-self: end; transform-origin: right bottom }
.punto { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #7bd88f; margin-right: .5em }
.punto.cerrado { background: #e0634f }

/* ---------- cinta ---------- */
.cinta { background: var(--tinta); color: var(--papel); overflow: hidden; white-space: nowrap; padding: 1em 0; text-transform: uppercase; letter-spacing: .14em }
.cinta-pista { display: inline-flex; animation: cinta 60s linear infinite }
.cinta-pista span { padding-right: 2.4em }
@keyframes cinta { to { transform: translateX(-50%) } }

/* ---------- manifiesto ---------- */
.manifiesto { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vw, 60px) }
.manifiesto-frase { font-size: clamp(3.6rem, 21.5vw, 15.5rem) }
.manifiesto-frase span { display: block; transform: translateX(calc(var(--d, 0) * var(--v, 0) * 1px)); will-change: transform }
.manifiesto-frase span:nth-child(1) { --v: -30 }
.manifiesto-frase span:nth-child(2) { --v: 46; margin-left: 9vw }
.manifiesto-frase span:nth-child(3) { --v: -22; margin-left: 3vw; color: var(--azul) }
.manifiesto-frase span:nth-child(4) { --v: 60; margin-left: 22vw }
.manifiesto-texto { display: grid; gap: 18px; max-width: 44ch; justify-self: end }
.manifiesto-texto li { padding: .7em 0; border-top: 1px dashed currentColor }

/* ---------- muro de afiches ---------- */
.muro-pista { gap: 12px }
.poster { width: min(84vw, 390px); aspect-ratio: 5 / 7; position: relative; overflow: hidden; display: grid; grid-template: "cat precio" auto "obj obj" minmax(0, 1fr) "txt txt" auto / 1fr auto; gap: 10px; padding: clamp(14px, 4vw, 20px); color: var(--papel) }
.poster .rubro { grid-area: cat }
.poster .precio { grid-area: precio; justify-self: end; padding: .35em .6em; transform: rotate(-5deg) }
.poster .obj { grid-area: obj; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .3)); transition: transform .9s cubic-bezier(.2, .7, .2, 1) }
.poster:hover .obj { transform: scale(1.05) rotate(-2deg) }
.poster .txt { grid-area: txt }
.poster h3 { font-weight: 800; font-size: clamp(1.4rem, 6.4vw, 1.9rem); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; margin-bottom: .55em }
.poster p { max-width: 34ch }
.poster.sangra .obj { width: 130%; max-width: none; height: 120%; justify-self: start; align-self: end; margin-left: -36%; object-position: left bottom }
.poster .rubro, .poster .precio, .poster .txt { position: relative; z-index: 1 }
.azul { background: var(--azul) }
.oliva { background: var(--oliva) }
.ocre { background: var(--ocre) }
.tinta { background: var(--tinta) }
.hormigon { background: var(--hormigon) }
.crema { background: #d3ccbf; color: var(--tinta) }

/* ---------- menú en la home ---------- */
.carta { background: var(--azul); color: var(--papel); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vw, 70px) }
.carta-texto { display: grid; gap: 16px; justify-items: start }
.carta-texto p { max-width: 34ch }
.ticket { --z: 9px; background: var(--papel); color: var(--tinta); width: min(100%, 440px); justify-self: center; padding: 26px 20px 40px; transform: rotate(-1.4deg); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100% }
.ticket-cab { text-align: center; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 16px; border-bottom: 1px dashed currentColor }
.ticket-cab .logo { height: 74px; margin: 0 auto 12px }
.ticket-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 6px; scrollbar-width: none }
.ticket-tabs::-webkit-scrollbar { display: none }
.ticket-tabs button { flex: none; border: 1px solid currentColor; padding: .5em .8em; text-transform: uppercase; letter-spacing: .06em }
.ticket-tabs button[aria-selected="true"] { background: var(--tinta); color: var(--papel) }
.ticket-lista[hidden] { display: none }
.ticket-pie { text-align: center; text-transform: uppercase; letter-spacing: .08em; padding-top: 18px }

/* ---------- el lugar ---------- */
.galeria figure { width: 74vw; max-width: 380px; aspect-ratio: 3 / 4 }
.musica { display: grid; gap: 14px; margin-top: clamp(30px, 6vw, 70px); max-width: 560px }
.musica iframe { width: 100%; height: 152px; border-radius: 12px }

/* ---------- social club ---------- */
.club { background: var(--tinta); color: var(--papel); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vw, 60px) }
.club-bajada { max-width: 32ch; font-size: 1.15em }
.club-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 60px) }
.club-video { aspect-ratio: 9 / 16; width: min(100%, 400px); max-height: 76svh }
.club-lista .fila b { font-weight: 400; opacity: .7; text-align: right }
.tira figure { width: 56vw; max-width: 300px; aspect-ratio: 9 / 16 }
.club .boton { justify-self: start }

/* ---------- reseñas ---------- */
.resenas { background: var(--oliva); color: var(--papel); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 56px) }
.resenas blockquote { font-weight: 700; letter-spacing: -.03em; line-height: 1.08 }
.resenas cite { display: block; font: 400 var(--chico)/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-top: 1em; opacity: .8 }
.resena-grande { font-size: clamp(1.7rem, 7.4vw, 4.2rem); max-width: 22ch }
.resenas-dos { display: grid; gap: 26px }
.resenas-dos blockquote { font-size: clamp(1.15rem, 4.6vw, 1.7rem); max-width: 26ch }
.resenas-se-repite { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.resenas-se-repite p { width: 100% }

/* ---------- para llevar ---------- */
.tienda-pista .poster { aspect-ratio: 4 / 5 }
.poster .logo { grid-area: obj; width: 62%; place-self: center }

/* ---------- visita ---------- */
.visita { background: var(--ocre); color: var(--tinta); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vw, 60px) }
.visita .sello { font-size: clamp(1rem, 4.6vw, 1.9rem); font-weight: 700; border-width: 2.5px; border-radius: 12px; justify-self: center; margin: 12px 0 }
.visita-datos { display: grid; gap: 12px; justify-items: start }
.mapa { width: 100%; height: clamp(300px, 60vw, 460px); filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply }

/* ---------- cierre ---------- */
.cierre { background: var(--azul); color: var(--papel); padding: clamp(50px, 10vw, 120px) var(--borde) calc(var(--borde) + 76px); display: grid; gap: 30px }
.cierre .logo { width: min(100%, 720px) }
.cierre nav { display: flex; flex-wrap: wrap; gap: .5em 1.6em; text-transform: uppercase; letter-spacing: .08em }
.cierre nav a:hover { text-decoration: underline; text-underline-offset: .35em }
.cierre small { opacity: .75; font-size: 1em }

/* ---------- botón fijo en celular ---------- */
.pedir { position: fixed; z-index: 25; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; background: var(--tinta); color: var(--papel); padding: 1.15em 1.2em; text-transform: uppercase; letter-spacing: .08em; transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 6px 24px rgba(0, 0, 0, .25) }
.pedir.ver { transform: none }
.pedir b::after { content: " \2192" }

/* ---------- página del menú ---------- */
.menu-cab { background: var(--oliva); color: var(--papel); grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--nav) + clamp(30px, 8vw, 80px)); display: grid; gap: 20px; overflow: hidden }
.menu-cab p { max-width: 36ch }
.menu-cab img { width: min(78vw, 520px); justify-self: end; margin: 0 -6vw -18% 0; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .3)) }
.chips { position: sticky; top: var(--nav); z-index: 10; background: var(--papel); gap: 6px; padding-top: 10px; padding-bottom: 10px; margin: 0; box-shadow: 0 1px 0 rgba(20, 20, 18, .16) }
.chips a { border: 1px solid currentColor; padding: .5em .8em; text-transform: uppercase; letter-spacing: .06em; scroll-snap-align: start }
.chips a.activo { background: var(--tinta); color: var(--papel) }
.cat { padding-top: clamp(40px, 7vw, 80px); padding-bottom: 0; scroll-margin-top: calc(var(--nav) + 50px) }
.cat:last-of-type { padding-bottom: clamp(56px, 11vw, 130px) }
.cat h2 { font-weight: 800; font-size: clamp(1.7rem, 7.6vw, 3.6rem); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; margin-bottom: .5em }
.cat .nota { opacity: .7; margin-bottom: 1em }

/* ---------- celular: la entrada pasa del café al matcha y vuelve ---------- */
@media (max-width: 899.98px) {
  .entrada-fondo video { grid-area: 1 / 1; z-index: 1 }
  .entrada-fondo video.activo { z-index: 2 }
  .entrada-fondo video.sale { z-index: 3; opacity: 0; transition: opacity 1.2s }
  .entrada-fondo .lado[data-turno] { display: block }
}

/* ---------- escritorio ---------- */
@media (min-width: 900px) {
  .nav-links { display: flex }
  .nav-pedir { display: inline-block }
  .nav-indice, .pedir { display: none }
  .cabecera { grid-template-columns: 1fr auto; align-items: end }

  /* En pantalla ancha la entrada son tres videos verticales, uno al lado del otro, a todo el alto. */
  .entrada { grid-template: "bio . ." auto "logo logo logo" 1fr "hora . sello" auto / 1fr 1fr 1fr; padding: calc(var(--nav) + 18px) var(--borde) var(--borde) }
  .entrada-fondo { grid-template-columns: repeat(3, 1fr); gap: 3px }
  .entrada-fondo .lado { display: block }
  .entrada::after { background: linear-gradient(to bottom, rgba(12, 12, 10, .72), rgba(12, 12, 10, .3) 24%, rgba(12, 12, 10, .2) 60%, rgba(12, 12, 10, .8)) }
  .entrada-logo { align-self: start; justify-self: center; width: min(25vw, 430px); margin-top: 1svh }
  .entrada-sello { justify-self: end }

  .manifiesto-texto { grid-template-columns: 1fr 1fr; max-width: 900px; gap: 40px }
  .desliza.muro-pista, .desliza.tienda-pista { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0 }
  .muro-pista .poster, .tienda-pista .poster { width: auto }
  .poster h3 { font-size: clamp(1.4rem, 2.2vw, 2.1rem) }

  .carta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center }
  .desliza.galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(220px, 24vw, 360px)); overflow: visible; margin: 0; padding: 0 }
  .galeria figure { width: auto; max-width: none; aspect-ratio: auto }
  .galeria figure:first-child { grid-row: 1 / 3 }
  .club-cuerpo { grid-template-columns: auto minmax(0, 1fr); align-items: center }
  .club-video { width: clamp(280px, 26vw, 400px) }
  .tira figure { width: 20vw }
  .resenas-dos { grid-template-columns: 1fr 1fr }
  .visita { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center }
  .visita .titulo { grid-column: 1 / 3 }
  .visita .mapa { grid-column: 2; grid-row: 2 / 4; height: 100%; min-height: 420px }
  .cierre { padding-bottom: var(--borde) }
  .menu-cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end }
  .menu-cab img { width: min(34vw, 520px); margin: 0 0 -12% }
  .cat ul { columns: 2; column-gap: clamp(30px, 5vw, 80px) }
  .cat .fila { break-inside: avoid }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .cinta-pista { animation: none }
  .manifiesto-frase span { transform: none }
  .poster .obj, .boton, .pedir { transition: none }
}