/* Bāru · carbón y papel, como sus publicaciones; el azul y los puntos rojos de su noren y su fachada */
@font-face{ font-family:"EB Garamond"; src:url("../fonts/ebgaramond-latin.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face{ font-family:"EB Garamond"; src:url("../fonts/ebgaramond-macron.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; unicode-range:U+0100-0101; }
@font-face{ font-family:"EB Garamond"; src:url("../fonts/ebgaramond-italic-latin.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
/* Shippori Mincho B1 (OFL), recortada a los caracteres japoneses de la página */
@font-face{ font-family:"Shippori Mincho B1"; src:url("../fonts/shippori-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Shippori Mincho B1"; src:url("../fonts/shippori-800.woff2") format("woff2"); font-weight:800; font-display:swap; }

:root{
  --sumi:#141312;
  --sumi-2:#1c1a18;
  --washi:#eeeae3;
  --tinta:#191716;
  --gris:#958e85;
  --gris-papel:#6b645c;
  --rojo:#df2a2e;
  --azul:#0133a2;
  --linea:rgba(238,234,227,.14);
  --linea-papel:rgba(25,23,22,.14);
  --serif:"EB Garamond", Garamond, Georgia, serif;
  --jp:"Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gutter:clamp(20px, 4.5vw, 72px);
  --seccion:clamp(110px, 14vw, 220px);
  --nav-h:80px;
  --ease:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ background:var(--sumi); color:var(--washi); font:400 1.12rem/1.6 var(--serif); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-numeric:oldstyle-nums; }
::selection{ background:var(--rojo); color:#fff; }
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3{ font-weight:500; line-height:1.05; letter-spacing:-.01em; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:1px solid var(--rojo); outline-offset:4px; }
[lang="ja"], .kanji{ font-family:var(--jp); }

/* el punto rojo con aro blanco de su rótulo */
.punto{ display:inline-block; flex:none; width:.32em; height:.32em; border-radius:50%; background:var(--rojo); box-shadow:0 0 0 .07em #fff; }

.marco{ position:relative; overflow:hidden; background:var(--sumi-2); }
.marco img{ width:100%; height:100%; object-fit:cover; }
.js .marco [data-parallax]{ height:116%; margin-top:-8%; will-change:transform; }

.enlace-linea{ position:relative; display:inline-block; padding-bottom:5px; font-size:1.05rem; }
.enlace-linea::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:right; transition:transform .7s var(--ease); }
.enlace-linea:hover::after{ transform:scaleX(0); }
.boton{ display:inline-flex; align-items:center; gap:.6em; padding:.8em 1.6em; border:1px solid currentColor; border-radius:999px; font-size:1.05rem; transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:var(--washi); color:var(--sumi); border-color:var(--washi); }

/* ---------- precarga: el noren azul de su puerta; se abre como al entrar */
.noren{ display:none; }
.anima .noren{ position:fixed; inset:0; z-index:100; display:flex; gap:3px; pointer-events:none; }
.anima.ya-visto .noren{ display:none; }
.noren__tira{ position:relative; flex:1; overflow:hidden; background:var(--azul); pointer-events:auto;
  /* tela: un poco de luz arriba y sombra abajo */
  background-image:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0) 30%, rgba(0,0,0,.22)); }
.noren__tela{ position:absolute; top:0; bottom:0; width:100vw; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; align-items:center; column-gap:clamp(14px, 2.4vw, 34px); color:#fff; font-size:clamp(52px, 12vw, 200px); }
.noren__tira:nth-child(1) .noren__tela{ left:0; }
.noren__tira:nth-child(2) .noren__tela{ left:calc(-100vw / 3 - 1px); }
.noren__tira:nth-child(3) .noren__tela{ left:calc(-200vw / 3 - 2px); }
.noren__rotulo{ height:.82em; width:auto; }
.noren__kana{ flex-basis:100%; text-align:center; font-family:var(--jp); font-weight:800; font-size:.3em; letter-spacing:.35em; margin-top:.5em; padding-left:.35em; }

/* ---------- nav */
.nav{ position:fixed; inset:0 0 auto; z-index:80; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); transition:transform .6s var(--ease), background .5s ease; }
.nav.oculta{ transform:translateY(-100%); }
.nav.con-fondo{ background:var(--sumi); box-shadow:0 1px 0 var(--linea); }
.nav__logo{ transition:opacity .6s ease; color:var(--washi); }
.nav__marca{ display:block; width:76px; height:auto; }
.nav.sobre-portada .nav__logo{ opacity:0; pointer-events:none; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(22px, 3vw, 42px); font-size:1.02rem; }
.nav__enlaces a{ position:relative; opacity:.8; transition:opacity .4s ease; }
.nav__enlaces a:hover{ opacity:1; }
.nav__enlaces a:not(.nav__reservar)::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.nav__enlaces a:not(.nav__reservar):hover::after{ transform:scaleX(1); }
.nav__reservar{ opacity:1 !important; padding:.45em 1.2em; border:1px solid rgba(238,234,227,.45); border-radius:999px; transition:background .5s ease, color .5s ease !important; }
.nav__reservar:hover{ background:var(--washi); color:var(--sumi); }
.nav__abrir{ display:none; }

/* ---------- portada: el logo en grande y, al lado, las manos del itamae */
.portada{ position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); background:var(--sumi); }
.portada__texto{ display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 40px) var(--gutter) 100px; }
.portada__logo{ display:block; width:min(100%, 640px); height:auto; color:var(--washi); overflow:visible; }
.portada__lema{ margin:clamp(28px, 3.4vw, 48px) 0 clamp(32px, 4vw, 52px); font-size:clamp(1.35rem, 2vw, 1.9rem); line-height:1.3; color:rgba(238,234,227,.88); }
.portada__lema em{ color:var(--washi); }
.portada__texto .boton{ align-self:flex-start; }
.portada__video{ position:relative; overflow:hidden; background:var(--sumi-2); }
.portada__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portada__video::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,19,18,.55), rgba(20,19,18,0) 30%); pointer-events:none; }
.portada__pie{ position:absolute; left:var(--gutter); bottom:clamp(22px, 4vh, 40px); font-size:.95rem; color:var(--gris); letter-spacing:.02em; }

/* ---------- una mano, un gesto, un producto, un bocado */
.manos{ background:var(--washi); color:var(--tinta); padding:var(--seccion) var(--gutter); }
.manos__linea{ font-size:clamp(3rem, 10vw, 9.5rem); line-height:1; letter-spacing:-.025em; font-weight:500; }
.manos__linea:nth-child(2){ padding-left:12vw; }
.manos__linea:nth-child(3){ padding-left:24vw; }
.manos__linea:nth-child(4){ padding-left:36vw; color:var(--rojo); }

/* ---------- la barra y Matías */
.barra{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); padding:var(--seccion) var(--gutter); background:var(--washi); color:var(--tinta); padding-top:0; }
.barra__sala{ grid-column:1 / 8; grid-row:1; aspect-ratio:3/4; }
.barra__ichigo{ grid-column:8 / 9; grid-row:1; writing-mode:vertical-rl; font-size:clamp(2.2rem, 4vw, 4rem); line-height:1; letter-spacing:.18em; color:var(--rojo); justify-self:center; align-self:start; margin-top:clamp(20px, 4vw, 60px); }
.barra__matias{ grid-column:9 / 13; grid-row:1; align-self:end; }
.barra__matias .marco{ aspect-ratio:4/5; margin-bottom:clamp(28px, 3vw, 40px); }
.barra h2{ font-size:clamp(2rem, 3.4vw, 3.3rem); }
.barra__matias p{ margin-top:14px; font-size:1.25rem; font-style:italic; color:var(--gris-papel); }

/* ---------- bocado a bocado */
.bocados{ padding:var(--seccion) var(--gutter); }
.bocados__cabeza{ display:flex; align-items:flex-end; gap:clamp(18px, 3vw, 44px); margin-bottom:clamp(48px, 6vw, 96px); }
.bocados__cabeza .kanji{ font-size:clamp(5rem, 12vw, 11rem); line-height:.8; font-weight:500; color:var(--rojo); }
.bocados h2{ font-size:clamp(2.6rem, 5.4vw, 5.2rem); }
.bocados__escena{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 110px); align-items:start; }
.bocados__fotos{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--sumi-2); }
.bocado__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease, transform 1.6s var(--ease); transform:scale(1.06); }
.bocado__foto[data-activa]{ opacity:1; transform:scale(1); }
.bocado{ padding:clamp(22px, 2.6vw, 34px) 0; border-top:1px solid var(--linea); transition:opacity .6s ease; }
.bocado:last-child{ border-bottom:1px solid var(--linea); }
.bocado__movil{ display:none; }
.bocado h3{ font-size:clamp(1.6rem, 2.4vw, 2.3rem); }
.bocado__tres{ display:flex; flex-wrap:wrap; gap:0 .45em; margin-top:8px; font-size:1.2rem; font-style:italic; color:var(--gris); }
.bocado__precio{ margin-top:6px; font-size:1rem; color:var(--gris); }
.bocados__carta{ display:inline-block; margin-top:clamp(48px, 6vw, 80px); }

/* ---------- producto */
.producto{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 3vw, 48px); padding:0 var(--gutter) var(--seccion); }
.producto__pieza{ position:relative; }
.producto__pieza .marco{ aspect-ratio:4/5; }
.producto__pieza .kanji{ position:absolute; left:clamp(16px, 2vw, 28px); top:clamp(12px, 1.6vw, 22px); font-size:clamp(2.6rem, 4.6vw, 4.6rem); line-height:1; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45); writing-mode:vertical-rl; }
.producto__pieza figcaption{ margin-top:18px; font-size:1.2rem; }

/* ---------- reservar: el azul de su noren */
.reserva{ background:var(--azul); color:#fff; text-align:center; padding:clamp(90px, 12vw, 180px) var(--gutter); }
.reserva__enlace{ display:inline-flex; align-items:center; gap:clamp(18px, 3vw, 44px); font-size:clamp(4rem, 13vw, 12rem); }
.reserva__enlace h2{ font-size:1em; font-weight:800; line-height:1; letter-spacing:-.02em; transition:letter-spacing 1.2s var(--ease); }
.reserva__enlace:hover h2{ letter-spacing:.01em; }
.reserva__enlace .punto{ width:.18em; height:.18em; }
.reserva p{ margin-top:clamp(18px, 2.4vw, 32px); font-size:1.2rem; color:rgba(255,255,255,.82); }
.reserva p a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.5); }

/* ---------- visítanos */
.visitanos{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:center; padding:var(--seccion) var(--gutter); }
.visitanos__foto{ grid-column:1 / 6; aspect-ratio:3/4; }
.visitanos__datos{ grid-column:7 / 12; }
.visitanos__dir{ font-size:clamp(1.9rem, 3vw, 2.8rem); line-height:1.15; margin-bottom:16px; }
.horario{ margin:clamp(36px, 4vw, 56px) 0 28px; }
.horario div{ display:flex; justify-content:space-between; gap:24px; padding:12px 0; border-bottom:1px solid var(--linea); }
.horario div:first-child{ border-top:1px solid var(--linea); }
.horario dt, .horario dd{ white-space:nowrap; }
.horario dd{ color:var(--gris); }
.visitanos__contacto{ display:flex; flex-wrap:wrap; gap:6px 28px; font-size:1.2rem; }
.visitanos__llevar{ margin-top:24px; color:var(--gris); }
.visitanos__llevar a{ color:var(--washi); border-bottom:1px solid var(--linea); }

/* ---------- pie: su rótulo */
.pie{ text-align:center; padding:clamp(80px, 10vw, 130px) var(--gutter) clamp(40px, 5vw, 60px); border-top:1px solid var(--linea); }
.pie__rotulo-caja{ display:inline-flex; align-items:center; gap:clamp(14px, 2vw, 26px); font-size:clamp(44px, 7vw, 96px); color:var(--washi); }
.pie__rotulo{ height:.82em; width:auto; }
.pie__kana{ margin-top:14px; font-size:clamp(.95rem, 1.4vw, 1.25rem); letter-spacing:.4em; padding-left:.4em; color:var(--gris); }
.pie__redes{ display:flex; justify-content:center; gap:32px; margin-top:clamp(44px, 5vw, 64px); color:var(--gris); }
.pie__redes a:hover{ color:var(--washi); }

/* ---------- la carta (ventana) */
.carta{ position:fixed; inset:0; margin:auto; width:min(760px, calc(100vw - 24px)); height:min(88vh, 1000px); max-width:none; max-height:none; border:0; background:var(--washi); color:var(--tinta); padding:0; overflow:hidden; }
.carta[open]{ display:flex; flex-direction:column; }
.carta::backdrop{ background:rgba(10,9,8,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.carta__cabeza{ display:flex; justify-content:space-between; align-items:center; padding:22px clamp(22px, 4vw, 44px); border-bottom:1px solid var(--linea-papel); }
.carta__cabeza h2{ font-size:2rem; }
.carta__cerrar{ position:relative; width:44px; height:44px; }
.carta__cerrar span{ position:absolute; left:10px; right:10px; top:50%; height:1px; background:currentColor; transform:rotate(45deg); }
.carta__cerrar span + span{ transform:rotate(-45deg); }
.carta__cuerpo{ overflow-y:auto; overscroll-behavior:contain; padding:10px clamp(22px, 4vw, 44px) 40px; }
.carta__grupo{ padding:26px 0 8px; }
.carta__grupo h3{ font-size:1.5rem; margin-bottom:10px; }
.carta__grupo h3 small{ font-size:.65em; font-style:italic; font-weight:400; color:var(--gris-papel); margin-left:.4em; }
.carta__grupo li{ display:flex; justify-content:space-between; gap:20px; padding:7px 0; border-bottom:1px solid var(--linea-papel); }
.carta__grupo li span:last-child{ white-space:nowrap; color:var(--gris-papel); }
.carta__nota{ margin-top:28px; font-size:.95rem; font-style:italic; color:var(--gris-papel); }

/* subir arriba (lo crea main.js) */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:35; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(20,19,18,.75); color:var(--washi); border:1px solid rgba(238,234,227,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s, background .4s ease, color .4s ease; }
.to-top:hover{ background:var(--washi); color:var(--sumi); }
.to-top.is-visible{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s, background .4s ease, color .4s ease; }

/* estados de partida: solo con .anima (GSAP y sin «reducir movimiento») */
.anima [data-revela]{ opacity:0; transform:translateY(26px); }
.anima [data-cortina]{ clip-path:inset(100% 0 0 0); }
.anima .portada__lema, .anima .portada__texto .boton, .anima .portada__pie{ opacity:0; }
.anima .portada__video{ clip-path:inset(0 0 0 100%); }
.anima .manos__linea{ opacity:.12; }

/* en escritorio la foto se queda fija mientras pasan los bocados */
@media (min-width:761px){
  .bocados__fotos{ position:sticky; top:calc(var(--nav-h) + 4vh); aspect-ratio:auto; height:calc(100svh - var(--nav-h) - 8vh); }
  .bocado{ min-height:36vh; display:flex; flex-direction:column; justify-content:center; }
  /* el bocado del centro se enciende; los demás esperan */
  .js .bocados__lista.recorrido .bocado{ opacity:.26; }
  .js .bocados__lista.recorrido .bocado[data-activa]{ opacity:1; }
  .bocado h3{ font-size:clamp(2rem, 3vw, 3rem); }
  .bocado__tres{ font-size:clamp(1.3rem, 1.6vw, 1.6rem); }
}

/* ---------- tablet */
@media (max-width:1020px){
  .barra__sala{ grid-column:1 / 8; }
  .barra__matias{ grid-column:8 / 13; }
  .barra__ichigo{ display:none; }
  .visitanos__foto{ grid-column:1 / 7; }
  .visitanos__datos{ grid-column:8 / 13; }
}

/* ---------- móvil: las manos a pantalla completa, el logo encima */
@media (max-width:760px){
  :root{ --nav-h:64px; }
  .nav__marca{ width:64px; }
  .nav__abrir{ display:grid; gap:8px; width:44px; height:44px; place-content:center; position:relative; z-index:2; }
  .nav__abrir span{ display:block; width:26px; height:1px; background:var(--washi); transition:transform .5s var(--ease); }
  .nav--abierta .nav__abrir span:first-child{ transform:translateY(4.5px) rotate(45deg); }
  .nav--abierta .nav__abrir span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }
  .nav__enlaces{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:22px; background:var(--sumi); font-size:2.3rem; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
  .nav--abierta .nav__enlaces{ opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s; }
  .nav.nav--abierta .nav__logo{ opacity:1; pointer-events:auto; position:relative; z-index:2; }
  .nav__enlaces a{ opacity:1; }
  .nav__enlaces a:not(.nav__reservar)::after{ display:none; }
  .nav__reservar{ margin-top:16px; font-size:1.15rem; padding:.7em 2em; }
  .nav.oculta.nav--abierta{ transform:none; }

  .portada{ display:block; height:100svh; min-height:560px; }
  .portada__video{ position:absolute; inset:0; }
  .portada__video::after{ background:linear-gradient(180deg, rgba(20,19,18,.35), rgba(20,19,18,0) 30%, rgba(20,19,18,.25) 55%, rgba(20,19,18,.92)); }
  .anima .portada__video{ clip-path:inset(100% 0 0 0); }
  .portada__texto{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 var(--gutter) calc(64px + env(safe-area-inset-bottom)); justify-content:flex-end; }
  .portada__logo{ width:min(72vw, 300px); }
  .portada__lema{ margin:20px 0 24px; font-size:1.3rem; }
  .portada__pie{ z-index:2; bottom:calc(22px + env(safe-area-inset-bottom)); font-size:.85rem; }

  .manos__linea{ font-size:clamp(2.6rem, 14vw, 4rem); }
  .manos__linea:nth-child(2){ padding-left:8vw; }
  .manos__linea:nth-child(3){ padding-left:16vw; }
  .manos__linea:nth-child(4){ padding-left:24vw; }

  .barra{ display:block; }
  .barra__sala{ margin:0 calc(var(--gutter) * -1); }
  .barra__matias{ margin-top:-70px; position:relative; width:72%; margin-left:auto; }
  .barra__matias .marco{ box-shadow:0 0 0 8px var(--washi); }

  .bocados__escena{ display:block; }
  .bocados__fotos{ display:none; }
  .bocado{ padding:28px 0 32px; }
  .bocado__movil{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:20px; }

  .producto{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:14px; }
  .producto::-webkit-scrollbar{ display:none; }
  .producto__pieza{ flex:none; width:74vw; scroll-snap-align:center; }

  .reserva__enlace{ font-size:clamp(3.4rem, 17vw, 5rem); }
  .visitanos{ display:block; }
  .visitanos__foto{ margin-bottom:48px; }
  .horario div{ font-size:1rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}