/* =============================================================
   SASHIMIYA — Restaurante Japonés · Balvanera
   1. Tokens
   ============================================================= */
:root{
  --sumi:      #0F0C09;
  --sumi-2:    #16110D;
  --card:      #1D1712;
  --washi:     #F4EEE1;
  --paper:     #EAE1CE;
  --cream:     #F2EBDA;
  --cream-2:   #D9CDB6;
  --cream-dim: #A89C86;
  --ink:       #262019;
  --ink-soft:  #4A4237;
  --shu:       #C2402E;
  --shu-dark:  #9C3122;
  --gold:      #C49A5B;
  --line:      rgba(196,154,91,.22);
  --line-soft: rgba(196,154,91,.14);
  --serif:     'Shippori Mincho', 'Noto Serif JP', serif;
  --sans:      'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nav-h:     84px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  background:var(--sumi);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img, svg, video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.25; text-wrap:balance; }
::selection{ background:var(--shu); color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.6rem 1.2rem; background:var(--washi); color:var(--sumi);
  font-weight:500; letter-spacing:.05em;
}
.skip-link:focus{ top:1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
section{ position:relative; padding:110px 0; }

.kicker{
  font-family:var(--serif);
  color:var(--gold);
  letter-spacing:.42em;
  font-size:.78rem;
  text-transform:uppercase;
  display:flex; align-items:center; gap:16px;
}
.kicker::before{ content:""; width:46px; height:1px; background:currentColor; opacity:.7; flex:none; }
.sec-title{
  font-size:clamp(2rem, 4.2vw, 3.1rem);
  margin:16px 0 10px;
  color:var(--washi);
}
.sec-sub{ color:var(--cream-dim); max-width:640px; }

/* Light sections invert */
.light{ background:var(--washi); color:var(--ink-soft); }
.light .sec-title{ color:var(--ink); }
.light .kicker{ color:var(--shu); }
.light .sec-sub{ color:var(--ink-soft); }
.paper{ background:var(--paper); color:var(--ink-soft); }
.paper .sec-title{ color:var(--ink); }
.paper .kicker{ color:var(--shu); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.on{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 36px;
  border:1px solid var(--gold);
  color:var(--washi);
  font-size:.82rem; letter-spacing:.24em; text-transform:uppercase;
  transition:background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
  background:transparent;
}
.btn:hover{ background:var(--gold); color:var(--sumi); transform:translateY(-2px); }
.btn.solid{ background:var(--shu); border-color:var(--shu); color:#fff; }
.btn.solid:hover{ background:var(--shu-dark); border-color:var(--shu-dark); color:#fff; }
.light .btn, .paper .btn{ color:var(--ink); border-color:var(--gold); }
.light .btn:hover, .paper .btn:hover{ color:var(--sumi); }
.light .btn.solid, .paper .btn.solid{ color:#fff; }

/* Decorative vertical Japanese text */
.jp-vertical{
  position:absolute;
  writing-mode:vertical-rl;
  font-family:var(--serif);
  color:rgba(242,235,218,.08);
  letter-spacing:.3em;
  user-select:none;
  pointer-events:none;
  z-index:1;
}

/* =============================================================
   4. Splash
   ============================================================= */
.splash{
  position:fixed; inset:0; z-index:300;
  background:var(--sumi);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .7s var(--ease-soft), visibility .7s;
  /* Safety net: auto-hide even if JS fails */
  animation:splashSafety .01s 4.5s forwards;
}
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes splashSafety{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.splash-kanji{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 7vw, 4.2rem);
  color:var(--washi);
  letter-spacing:.35em;
  text-indent:.35em;
  animation:splashIn 1.2s var(--ease-out) both;
}
.splash-line{
  width:0; height:1px; background:var(--gold);
  animation:splashLine 1.1s .25s var(--ease-out) forwards;
}
.splash-sub{
  font-size:.72rem; letter-spacing:.5em; text-indent:.5em; text-transform:uppercase;
  color:var(--gold);
  opacity:0;
  animation:splashIn .9s .5s var(--ease-out) forwards;
}
@keyframes splashIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes splashLine{ to{ width:120px; } }

/* =============================================================
   5. Navigation
   ============================================================= */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  transition:background .45s var(--ease-soft), padding .45s var(--ease-soft), border-color .45s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(15,12,9,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:12px 0;
  border-bottom-color:var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo img{ height:54px; width:auto; transition:height .45s var(--ease-soft); }
nav.scrolled .logo img{ height:42px; }
.nav-links{ display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links a{
  position:relative;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim);
  padding:4px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav-links a:hover{ color:var(--washi); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-links .cta{
  border:1px solid var(--shu); color:var(--washi); padding:10px 22px;
  transition:background .3s, color .3s;
}
.nav-links .cta::after{ display:none; }
.nav-links .cta:hover{ background:var(--shu); }
.burger{
  display:none; z-index:210;
  width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.burger span{
  display:block; width:26px; height:1.5px; background:var(--washi);
  transition:transform .4s var(--ease-out), opacity .3s;
}
.burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Language selector */
.lang{ position:relative; list-style:none; }
.lang-btn{
  border:1px solid rgba(196,154,91,.4); color:var(--cream-dim);
  padding:9px 16px; font-size:.7rem; letter-spacing:.2em;
  transition:color .3s, border-color .3s;
}
.lang-btn:hover{ color:var(--washi); border-color:var(--gold); }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  background:rgba(15,12,9,.97); border:1px solid var(--line);
  min-width:150px; padding:6px 0; display:none; z-index:120;
  list-style:none;
}
.lang.open .lang-menu{ display:block; }
.lang-menu button{
  display:block; width:100%; text-align:left;
  color:var(--cream-dim); padding:10px 18px;
  font-size:.78rem; letter-spacing:.12em;
  transition:color .25s, background .25s;
}
.lang-menu button:hover{ color:var(--washi); background:rgba(196,154,91,.1); }
.lang-menu button.on{ color:var(--shu); }

/* =============================================================
   6. Hero
   ============================================================= */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  padding:0;
}
.hero-bg{ position:absolute; inset:-6% 0; z-index:0; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
  transform:scale(1.06);
  animation:heroKen 18s var(--ease-soft) both;
}
@keyframes heroKen{ from{ transform:scale(1.14); } to{ transform:scale(1.06); } }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(15,12,9,.94) 22%, rgba(15,12,9,.5) 58%, rgba(15,12,9,.72)),
    linear-gradient(0deg, var(--sumi) 0%, transparent 22%);
}
.hero .jp-vertical{
  right:4vw; top:50%; transform:translateY(-50%);
  font-size:clamp(3rem, 7vw, 5.6rem);
  z-index:2;
}
.hero-inner{ position:relative; z-index:3; width:100%; padding-top:110px; padding-bottom:130px; }
.hero-logo{ margin:28px 0 10px; }
.hero-logo img{ width:min(460px, 74vw); height:auto; }
.hero .jp-sub{
  font-family:var(--serif); color:var(--gold);
  letter-spacing:.55em; font-size:.95rem; margin-bottom:22px;
}
.hero .tag{
  font-size:clamp(1rem, 2vw, 1.22rem);
  color:var(--cream-2); max-width:560px; margin-bottom:38px;
}
.hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-meta{
  margin-top:70px; display:flex; gap:46px; flex-wrap:wrap;
  color:var(--cream-dim); font-size:.82rem; letter-spacing:.1em;
}
.hero-meta b{
  display:block; color:var(--washi); font-weight:500;
  letter-spacing:.2em; margin-bottom:2px; text-transform:uppercase; font-size:.76rem;
}
.hero-meta > div{ border-left:1px solid var(--line); padding-left:18px; }

/* Staggered hero entrance — pure CSS, survives any JS failure */
.reveal-hero{ animation:heroUp .95s var(--ease-out) both; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.h-d1{ animation-delay:.9s; }
.h-d2{ animation-delay:1.05s; }
.h-d3{ animation-delay:1.2s; }
.h-d4{ animation-delay:1.35s; }
.h-d5{ animation-delay:1.5s; }
.h-d6{ animation-delay:1.7s; }

.hero-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--cream-dim); font-size:.66rem; letter-spacing:.4em; text-transform:uppercase;
}
/* En pantallas bajas o angostas el contenido del hero llega hasta abajo: se oculta para no superponerse */
@media (max-width: 960px), (max-height: 860px){
  .hero-hint{ display:none; }
}
.hero-hint::after{
  content:""; width:1px; height:44px;
  background:linear-gradient(var(--gold), transparent);
  animation:hintDrop 2.4s var(--ease-soft) infinite;
}
@keyframes hintDrop{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* =============================================================
   7. Promo strip
   ============================================================= */
.strip{
  position:relative; z-index:2;
  background:var(--shu); color:#fff;
  padding:14px 24px;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; text-align:center;
}
.strip b{ font-weight:700; }

/* =============================================================
   8. Nosotros
   ============================================================= */
.about-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:70px; align-items:center;
}
.about-text .lead{
  font-family:var(--serif); font-size:1.32rem; line-height:1.7;
  color:var(--ink); margin-bottom:20px;
}
.about-text p{ margin-bottom:18px; }
.about-imgs{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.about-imgs figure{
  position:relative; overflow:hidden; background:var(--paper);
}
.about-imgs img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.about-imgs figure:hover img{ transform:scale(1.05); }
.about-imgs .tall{ grid-row:span 2; }
.about-imgs .tall::after{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(244,238,225,.4); pointer-events:none;
}
.about-stats{
  margin-top:64px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:18px;
}
.stat{
  background:#FFFDF8;
  border:1px solid rgba(38,32,25,.12);
  border-top:3px solid var(--shu);
  padding:30px 22px 26px;
  text-align:center;
  box-shadow:0 14px 30px -18px rgba(38,32,25,.25);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.stat:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px -18px rgba(38,32,25,.32);
}
.stat b{
  display:block; font-family:var(--serif);
  font-size:clamp(2.4rem, 4vw, 3.2rem); color:var(--shu); line-height:1.1;
}
.stat b span{ display:inline; font-size:inherit; }
.stat > span{
  display:block; margin-top:10px;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); font-weight:500;
}

/* =============================================================
   9. Significado
   ============================================================= */
.meaning{ padding:90px 0; }
.meaning-grid{
  display:grid; grid-template-columns:auto 1fr; gap:64px; align-items:center;
}
.big-kanji{
  font-family:var(--serif);
  font-size:clamp(4rem, 9vw, 7rem);
  color:var(--shu); line-height:1.1;
  writing-mode:vertical-rl; letter-spacing:.14em;
}
.meaning h3{ font-size:1.75rem; margin-bottom:16px; color:var(--ink); }
.meaning p{ margin-bottom:14px; max-width:760px; }

/* =============================================================
   10. Salones
   ============================================================= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:22px; margin-top:56px;
}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  transition:border-color .4s, transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  transform-style:preserve-3d;
  will-change:transform;
}
.card:hover{
  border-color:var(--gold);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(196,154,91,.12);
}
.card .ph{ height:235px; overflow:hidden; background:#241d15; }
.card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out), filter .7s; }
.card:hover .ph img{ transform:scale(1.06); filter:saturate(1.12); }
.card-body{ padding:28px 26px 32px; flex:1; display:flex; flex-direction:column; }
.card-body .jp{
  font-family:var(--serif); color:var(--gold);
  font-size:.8rem; letter-spacing:.32em; margin-bottom:8px;
}
.card-body h3{ font-size:1.28rem; color:var(--washi); margin-bottom:10px; }
.card-body p{ font-size:.9rem; color:var(--cream-dim); flex:1; }
.card-body .cap{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.horario-box{
  margin-top:60px; border:1px solid var(--line);
  padding:36px 40px;
  display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(194,64,46,.07), transparent);
}
.h-item b{
  display:block; font-family:var(--serif);
  color:var(--washi); font-size:1.05rem; letter-spacing:.06em;
}
.h-item span{ font-size:.82rem; color:var(--cream-dim); }

/* =============================================================
   11. Omakase — recorrido
   ============================================================= */
.omakase{
  background:linear-gradient(180deg, #0B0906, #17110B 55%, var(--sumi));
  overflow:clip;
}
.omakase .jp-vertical{
  left:3vw; top:90px;
  font-size:4.6rem; color:rgba(194,64,46,.13);
}
.oma-head{ max-width:760px; margin-bottom:70px; }
.oma-head .quote{
  font-family:var(--serif); font-size:clamp(1.15rem, 2.2vw, 1.45rem);
  color:var(--washi); line-height:1.75;
  border-left:2px solid var(--shu); padding-left:24px; margin-top:28px;
}
.oma-steps{
  display:flex; gap:34px; margin:38px 0 0; flex-wrap:wrap;
}
.oma-steps .step b{
  font-family:var(--serif); font-size:2.4rem; color:var(--gold); display:block; line-height:1.2;
}
.oma-steps .step span{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim);
}

/* Journey: vertical line + alternating blocks */
.journey{ position:relative; }
.journey-line{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--line-soft);
}
.journey-line i{
  position:absolute; inset:0;
  background:linear-gradient(var(--gold), var(--shu));
  transform:scaleY(0); transform-origin:top;
  display:block;
}
.j-block{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 90px);
  align-items:center;
  padding:64px 0;
}
.j-block .ph{ position:relative; overflow:hidden; }
.j-block .ph img{
  width:100%; height:440px; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.j-block .ph:hover img{ transform:scale(1.04); }
.j-block .ph::after{
  content:attr(data-num);
  position:absolute; top:18px; left:20px;
  font-family:var(--serif); font-size:.8rem; letter-spacing:.3em;
  color:var(--washi);
  background:rgba(15,12,9,.72); padding:8px 14px;
  border:1px solid var(--line);
}
.j-block.rev .ph{ order:2; }
.j-body .jp{
  font-family:var(--serif); color:var(--gold);
  letter-spacing:.35em; font-size:.85rem; margin-bottom:12px;
}
.j-body h3{ font-size:clamp(1.5rem, 2.6vw, 1.9rem); color:var(--washi); margin-bottom:16px; }
.j-body p{ color:var(--cream-dim); margin-bottom:14px; }
.j-body .dias{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--shu); margin:10px 0 18px; font-weight:500;
}
.j-body .fine{ font-size:.8rem; color:var(--cream-dim); }
.j-body strong{ color:var(--washi); }

/* =============================================================
   12. Menú & Delivery
   ============================================================= */
.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:56px; }
.menu-tile{
  position:relative; min-height:400px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.menu-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.menu-tile:hover img{ transform:scale(1.05); }
.menu-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 32%, rgba(11,9,6,.92));
}
.menu-tile-body{ position:relative; z-index:2; padding:36px; color:var(--washi); }
.menu-tile-body h3{ font-size:1.65rem; margin-bottom:8px; }
.menu-tile-body p{ font-size:.88rem; color:var(--cream-2); margin-bottom:20px; max-width:420px; }
.menu-tile-body .btn{ color:var(--washi); }
.promo{
  margin-top:26px; border:1px dashed var(--shu);
  padding:28px 32px;
  display:flex; gap:32px; flex-wrap:wrap; align-items:center;
  background:rgba(194,64,46,.05);
}
.promo .pct{
  font-family:var(--serif); font-size:2.4rem; color:var(--shu); line-height:1;
}
.promo b{ color:var(--shu); font-size:1.05rem; }
.promo p{ font-size:.88rem; }
.promo .small{ font-size:.82rem; max-width:330px; }

/* =============================================================
   13. Bebidas
   ============================================================= */
.beb-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:center; margin-bottom:64px;
}
.beb-hero .ph{ overflow:hidden; }
.beb-hero .ph img{ width:100%; height:360px; object-fit:cover; transition:transform .8s var(--ease-out); }
.beb-hero .ph:hover img{ transform:scale(1.04); }
.beb-hero p{ color:var(--cream-dim); margin-top:14px; }
.kanpai{
  font-family:var(--serif); color:var(--gold);
  letter-spacing:.2em; margin-top:22px;
}
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.tab-btn{
  border:1px solid rgba(196,154,91,.3); color:var(--cream-dim);
  padding:11px 24px;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .3s, color .3s, background .3s;
}
.tab-btn.active, .tab-btn:hover{
  border-color:var(--shu); color:var(--washi); background:rgba(194,64,46,.14);
}
.tab-panel{ display:none; animation:tabFade .5s var(--ease-soft); }
.tab-panel.active{ display:block; }
@keyframes tabFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.beb-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px;
}
.beb-item{
  border:1px solid var(--line-soft); padding:22px 24px;
  background:var(--card);
  transition:border-color .35s, transform .35s var(--ease-out);
}
.beb-item:hover{ border-color:var(--gold); transform:translateY(-3px); }
.beb-item h4{ color:var(--washi); font-size:1rem; letter-spacing:.04em; margin-bottom:4px; font-family:var(--serif); }
.beb-item .type{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; display:block;
}
.beb-item p{ font-size:.82rem; color:var(--cream-dim); line-height:1.65; }
.beb-note{
  margin-top:32px; font-size:.85rem; color:var(--cream-dim);
  border-left:2px solid var(--gold); padding-left:18px; max-width:720px;
}

/* =============================================================
   14. Extras
   ============================================================= */
.extra-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px; margin-top:52px;
}
.extra-card{
  background:#FFFDF8; border:1px solid rgba(38,32,25,.1);
  padding:38px 34px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.extra-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px -20px rgba(38,32,25,.28);
}
.extra-card .jp{
  font-family:var(--serif); color:var(--shu);
  letter-spacing:.3em; font-size:.8rem; margin-bottom:12px; display:block;
}
.extra-card h3{ color:var(--ink); font-size:1.3rem; margin-bottom:12px; }
.extra-card p{ font-size:.9rem; margin-bottom:18px; }
.extra-card a{
  color:var(--shu); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--shu); padding-bottom:3px;
  transition:color .3s, border-color .3s;
}
.extra-card a:hover{ color:var(--shu-dark); border-color:var(--shu-dark); }

/* =============================================================
   15. Prensa
   ============================================================= */
.prensa{ background:var(--sumi-2); }
.press-list{ margin-top:52px; border-top:1px solid var(--line-soft); }
.press-item{
  display:grid; grid-template-columns:110px 1fr auto;
  gap:26px; align-items:center;
  padding:24px 10px;
  border-bottom:1px solid var(--line-soft);
  transition:background .3s, padding-left .3s var(--ease-out);
}
.press-item:hover{ background:rgba(196,154,91,.05); padding-left:20px; }
.press-item .date{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.press-item h4{ color:var(--washi); font-size:1.05rem; font-weight:500; font-family:var(--sans); }
.press-item p{ font-size:.82rem; color:var(--cream-dim); }
.press-item a{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--shu); white-space:nowrap;
  border:1px solid rgba(194,64,46,.5); padding:9px 18px;
  transition:background .3s, color .3s;
}
.press-item a:hover{ background:var(--shu); color:#fff; }

/* =============================================================
   16. Galería
   ============================================================= */
.galeria{ padding-bottom:0; }
.gal-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:230px; grid-auto-flow:dense;
  gap:10px; margin-top:52px;
}
.gal-grid figure{
  position:relative; overflow:hidden; background:var(--card);
}
.gal-grid figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gal-grid figure:nth-child(4){ grid-row:span 2; }
.gal-grid figure:nth-child(8){ grid-row:span 2; }
.gal-grid figure:nth-child(9){ grid-row:span 2; }
.gal-grid img{
  width:100%; height:100%; object-fit:cover;
  opacity:.92;
  transition:transform .8s var(--ease-out), opacity .5s, filter .6s;
}
.gal-grid figure:hover img{ transform:scale(1.06); opacity:1; filter:saturate(1.15); }
.gal-grid figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 20px 14px;
  background:linear-gradient(transparent, rgba(11,9,6,.85));
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-2);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events:none;
}
.gal-grid figure:hover figcaption{ opacity:1; transform:none; }

/* =============================================================
   17. Footer
   ============================================================= */
footer{
  background:#0A0805;
  padding:100px 0 40px;
  border-top:1px solid var(--line);
  margin-top:110px;
}
.foot-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:48px; margin-bottom:70px;
}
.foot-grid h4{
  color:var(--washi); font-size:.82rem; letter-spacing:.28em;
  text-transform:uppercase; margin-bottom:22px; font-family:var(--sans); font-weight:500;
}
.foot-grid p, .foot-grid li{
  font-size:.87rem; color:var(--cream-dim); list-style:none; margin-bottom:10px;
}
.foot-grid a{ transition:color .3s; }
.foot-grid a:hover{ color:var(--washi); }
.foot-logo{ margin-bottom:16px; }
.foot-logo img{ height:92px; width:auto; }
.foot-jp{
  font-family:var(--serif); color:var(--gold);
  letter-spacing:.5em; font-size:.85rem; margin-bottom:22px;
}
.foot-maps{ color:var(--gold) !important; }
.copy{
  border-top:1px solid var(--line-soft); padding-top:28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.74rem; color:#6F665A; letter-spacing:.08em;
}

/* WhatsApp float */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:90;
  background:#1FA855; color:#fff;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .3s var(--ease-out);
}
.wa-float:hover{ transform:scale(1.1); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* =============================================================
   18. Responsive
   ============================================================= */
@media (max-width: 960px){
  section{ padding:84px 0; }
  .about-grid, .meaning-grid, .menu-grid, .beb-hero{ grid-template-columns:1fr; gap:44px; }
  .j-block{ grid-template-columns:1fr; gap:26px; padding:44px 0 44px 26px; }
  .j-block.rev .ph{ order:0; }
  .j-block .ph img{ height:320px; }
  .journey-line{ left:4px; }
  .big-kanji{ writing-mode:horizontal-tb; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .gal-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:190px; }
  .hero .jp-vertical{ display:none; }
  .omakase .jp-vertical{ display:none; }
  .press-item{ grid-template-columns:1fr; gap:8px; }
  .hero-meta{ gap:26px; }

  .burger{ display:flex; }
  .nav-links{
    position:fixed; inset:0; z-index:200;
    background:rgba(10,8,5,.98);
    flex-direction:column; justify-content:center; gap:26px;
    font-size:1.05rem;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .lang{ margin-top:8px; }
  .lang-menu{ position:static; border:none; background:none; display:block; text-align:center; }
  .lang-menu button{ text-align:center; }
}
@media (max-width: 540px){
  .wrap{ padding:0 18px; }
  .horario-box{ padding:28px 24px; gap:22px; }
  .j-block .ph img{ height:250px; }
  .gal-grid{ grid-auto-rows:150px; }
  .oma-steps{ gap:24px; }
  .hero-inner{ padding-top:120px; }
}

/* =============================================================
   19. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .hero-bg img{ animation:none; transform:scale(1.06); }
  .hero-hint::after{ animation:none; }
  /* Tilt, hovers, fades and reveals stay active on purpose */
}