/* ==========================================================================
   SUSHI DEO — Dirección de arte: honu maorí + seigaiha + tinta sumi-e
   Tipografía: Shippori Mincho (display) / Zen Kaku Gothic New (texto)
   ========================================================================== */

:root{
  --black:      #080808;
  --black-soft: #111111;
  --gray-900:   #161616;
  --gray-800:   #202020;
  --gray-700:   #2b2b2b;
  --red:        #C91018;
  --red-dark:   #8D0E13;
  --white:      #F5F5F5;

  --font-display: "Shippori Mincho", serif;
  --font-body:    "Zen Kaku Gothic New", sans-serif;

  --ease: cubic-bezier(.16,.84,.32,1);
  --container: 1360px;
  --gap-xl: clamp(3rem, 8vw, 9rem);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; margin:0; }
p{ margin:0; }

::selection{ background: var(--red); color: var(--white); }

@media (hover:none){ body{ cursor: auto; } }

/* ---------- cursor personalizado ---------- */
.cursor{ position: fixed; inset:0; pointer-events:none; z-index: 9999; mix-blend-mode: difference; }
.cursor__dot,.cursor__ring{ position:fixed; top:0; left:0; border-radius:50%; transform: translate(-50%,-50%); }
.cursor__dot{ width:6px; height:6px; background:var(--white); }
.cursor__ring{ width:38px; height:38px; border:1px solid var(--white); transition: width .3s var(--ease), height .3s var(--ease), opacity .3s; }
.cursor--active .cursor__ring{ width:64px; height:64px; opacity:.6; }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- grano / textura global ---------- */
.grain{
  position: fixed; inset:0; z-index: 5; pointer-events:none;
  opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  transition: opacity .8s var(--ease), visibility .8s;
}
.preloader__mark{ width:90px; height:auto; stroke:var(--red); animation: spin-slow 3s linear infinite; }
.preloader__text{ font-family:var(--font-display); letter-spacing:.4em; font-size:.85rem; color:var(--white); }
.preloader.is-done{ opacity:0; visibility:hidden; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }

/* ---------- utilidades ---------- */
.eyebrow{
  font-family: var(--font-body); text-transform:uppercase; letter-spacing:.35em;
  font-size:.72rem; color: var(--red); margin-bottom: 1.2rem; display:block;
}
.eyebrow--center{ text-align:center; }
.section-title{ font-size: clamp(2.2rem, 5vw, 4rem); }
.section-title--center{ text-align:center; margin-bottom: clamp(3rem,6vw,6rem); }

.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding: 1rem 2.1rem;
  font-family: var(--font-body); font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--white); border-radius: 999px; position:relative; overflow:hidden; isolation:isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--red); border-radius:999px;
  transform: translateY(101%); transition: transform .45s var(--ease); z-index:-1;
}
.btn:hover::before{ transform: translateY(0); }
.btn:hover{ border-color: var(--red); }
.btn--solid{ background:var(--red); border-color:var(--red); }
.btn--solid::before{ background:var(--white); }
.btn--solid:hover{ color:var(--black); border-color:var(--white); }
.btn--ghost{ border-color: rgba(245,245,245,.35); padding:.7rem 1.5rem; font-size:.75rem; }
.btn--small{ padding:.75rem 1.5rem; font-size:.72rem; }

.divider--ink{
  height: 90px; background-image:url("../assets/svg/ink-divider.svg");
  background-size: cover; background-repeat:no-repeat; background-position:center;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.4rem clamp(1.2rem,4vw,3rem);
  background: linear-gradient(to bottom, rgba(8,8,8,.85), transparent);
  backdrop-filter: blur(2px);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand__mark{ filter: drop-shadow(0 0 6px rgba(201,16,24,.5)); }
.brand__name{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.08em; }

.main-nav{ display:flex; gap: clamp(1rem,2vw,2.2rem); }
.main-nav a{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--white);
  opacity:.75; position:relative; transition: opacity .3s;
}
.main-nav a span{ color:var(--red); margin-right:.3rem; font-size:.7rem; }
.main-nav a:hover{ opacity:1; }
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--red);
  transition: width .35s var(--ease);
}
.main-nav a:hover::after{ width:100%; }

.nav-toggle{ display:none; background:none; border:0; width:32px; height:22px; position:relative; cursor:pointer; }
.nav-toggle span{ position:absolute; left:0; right:0; height:1px; background:var(--white); transition: transform .3s, opacity .3s; }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:50%; transform:translateY(-50%); }
.nav-toggle span:nth-child(3){ bottom:0; }

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--black-soft); flex-direction:column; justify-content:center; padding: 3rem;
    transform: translateX(100%); transition: transform .5s var(--ease); gap:1.6rem;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
  .site-header .btn--ghost{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background: radial-gradient(120% 90% at 30% 20%, #1a0506 0%, var(--black) 55%);
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(155deg, rgba(141,14,19,.35), transparent 45%),
    linear-gradient(0deg, rgba(8,8,8,.95), rgba(8,8,8,.55) 40%, rgba(8,8,8,.85)),
    repeating-linear-gradient(120deg, #0d0d0d 0 2px, #0a0a0a 2px 4px);
}
.hero__pattern{
  position:absolute; inset:-10% -10% -10% -10%; background-image:url("../assets/svg/seigaiha.svg");
  background-size: 260px; opacity:.14; transform: rotate(-4deg);
}
.hero__vignette{
  position:absolute; inset:0; box-shadow: inset 0 0 18vw 4vw rgba(0,0,0,.85);
}
.hero__turtle{
  position:absolute; right:-6%; top:8%; width:min(46vw,620px); height:auto; opacity:.16;
  stroke: var(--red);
}
.hero__grid{ position:relative; z-index:2; padding: 0 clamp(1.2rem,5vw,4rem) clamp(4rem,9vw,7rem); max-width: var(--container); margin: 0 auto; width:100%; }
.hero__eyebrow{ font-family: var(--font-body); letter-spacing:.5em; text-transform:uppercase; font-size:.75rem; color:var(--red); margin: 0 0 1.4rem; }
.hero__title{ font-size: clamp(4.2rem, 15vw, 11rem); line-height:.85; letter-spacing:.02em; }
.hero__title .line{ display:block; }
.hero__title--outline{ -webkit-text-stroke: 2px var(--white); color: transparent; }
.hero__tagline{ margin-top: 1.6rem; max-width: 32ch; font-size: clamp(1rem,1.6vw,1.25rem); color: rgba(245,245,245,.85); }
.hero__actions{ display:flex; gap:1.2rem; margin-top: 3rem; flex-wrap:wrap; }

.hero__scroll{
  position:absolute; right: clamp(1.2rem,4vw,3rem); bottom: 2.2rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(245,245,245,.6);
}
.hero__scroll span{ width:1px; height:46px; background: linear-gradient(var(--red), transparent); animation: scroll-pulse 2.2s ease-in-out infinite; }
@keyframes scroll-pulse{ 0%,100%{ transform:scaleY(1); opacity:.6;} 50%{ transform:scaleY(.5); opacity:1; } }

/* ==========================================================================
   FILOSOFÍA — composición editorial asimétrica
   ========================================================================== */
.philosophy{ position:relative; padding: var(--gap-xl) clamp(1.2rem,5vw,4rem); max-width: var(--container); margin:0 auto; }
.philosophy__kanji{
  position:absolute; right: 2%; top: -4%; font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 16rem); color: rgba(245,245,245,.04); writing-mode: vertical-rl; pointer-events:none;
}
.philosophy__grid{
  display:grid; grid-template-columns: repeat(12,1fr); gap: 1.6rem 2rem; position:relative;
}
.philosophy__grid > .eyebrow{ grid-column: 1 / 5; }
.philosophy__quote{
  grid-column: 1 / 13; font-size: clamp(1.8rem,4vw,3.4rem); line-height:1.25; max-width: 22ch;
  margin-bottom: 1rem;
}
.philosophy__quote em{ font-style:normal; color: var(--red); }
.philosophy__col{ grid-column: span 6; font-size:1rem; color: rgba(245,245,245,.78); }
.philosophy__col--a{ grid-column: 1 / 7; }
.philosophy__col--b{ grid-column: 7 / 13; margin-top: clamp(0px,6vw,3rem); }
.dropcap{ float:left; font-family: var(--font-display); font-size: 3.4rem; line-height:.7; color: var(--red); padding-right:.5rem; }

.philosophy__values{
  grid-column: 1 / 13; display:flex; flex-wrap:wrap; gap: 0 clamp(1.5rem,4vw,3.5rem);
  margin-top: clamp(2.5rem,6vw,5rem); padding-top: 2rem; border-top:1px solid rgba(245,245,245,.12);
}
.philosophy__values li{
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing:.02em; padding: .6rem 0;
  display:flex; align-items:baseline; gap:.6rem;
}
.philosophy__values li span{ color: var(--red); font-size:.75rem; font-family: var(--font-body); }
.philosophy__values li:nth-child(odd){ transform: translateY(-.4rem); }

@media (max-width: 760px){
  .philosophy__col--a,.philosophy__col--b{ grid-column: 1 / 13; margin-top:0; }
}

/* ==========================================================================
   ESPECIALIDADES
   ========================================================================== */
.specialties{ padding: var(--gap-xl) clamp(1.2rem,5vw,4rem); max-width: var(--container); margin:0 auto; }
.dish{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(1.5rem,4vw,4rem);
  margin-bottom: clamp(3rem,8vw,7rem);
}
.dish--r2{ direction: rtl; }
.dish--r2 > *{ direction: ltr; }
.dish__visual{
  position:relative; aspect-ratio: 4/5; border-radius: 2px; overflow:hidden;
  background: linear-gradient(155deg, var(--gray-800), var(--black) 70%);
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0% 100%);
}
.dish__visual::before{
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode: overlay;
  background-image:url("../assets/svg/seigaiha.svg"); background-size:140px;
}
.dish__visual::after{
  content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 70% 20%, rgba(201,16,24,.4), transparent 60%);
}
.dish__visual--a{ background: linear-gradient(160deg,#2a0a0c,#080808 65%); }
.dish__visual--b{ background: linear-gradient(200deg,#241010,#080808 65%); }
.dish__visual--c{ background: linear-gradient(140deg,#20090b,#0d0d0d 70%); }
.dish__visual--d{ background: linear-gradient(180deg,#1c1c1c,#080808 65%); }
.dish__visual--e{ background: linear-gradient(160deg,#260a0c,#0a0a0a 65%); }
.dish__visual--f{ background: linear-gradient(200deg,#1a1a1a,#080808 70%); }
.dish__tag{
  position:absolute; left: 1.4rem; bottom: 1.4rem; z-index:2;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color: var(--white);
  border:1px solid rgba(245,245,245,.4); padding:.4rem .9rem; border-radius:999px;
}
.dish__copy h3{ font-size: clamp(2rem,4vw,3.4rem); margin-bottom: 1rem; }
.dish__copy p{ max-width: 40ch; color: rgba(245,245,245,.75); }

@media (max-width: 780px){
  .dish, .dish--r2{ grid-template-columns: 1fr; direction:ltr; }
}

/* ==========================================================================
   PROMOCIONES
   ========================================================================== */
.promos{ padding: var(--gap-xl) clamp(1.2rem,5vw,4rem); max-width: var(--container); margin:0 auto; background: var(--black-soft); }
.promos__group{ margin-bottom: clamp(2.6rem,6vw,4.5rem); }
.promos__group:last-of-type{ margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.promos__group-title{
  font-size: 1.3rem; margin-bottom: 1.6rem; display:flex; align-items:baseline; gap:.7rem;
  border-bottom: 1px solid rgba(245,245,245,.12); padding-bottom: .9rem;
}
.promos__group-title span{
  font-family: var(--font-body); text-transform:uppercase; letter-spacing:.35em; font-size:.68rem; color: var(--red);
}
.promos__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,3vw,2rem); align-items:stretch; }
.promos__grid--pair{ grid-template-columns: repeat(2,1fr); }
.promo-card{
  position:relative; padding: 2.4rem clamp(1.6rem,3vw,2.2rem); border:1px solid rgba(245,245,245,.14);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  display:flex; flex-direction:column; gap: 1rem; transition: transform .4s var(--ease), border-color .4s;
}
.promo-card:hover{ transform: translateY(-8px); border-color: var(--red); }
.promo-card__num{ font-family: var(--font-display); font-size: clamp(2.6rem,5vw,3.6rem); line-height:1; color:var(--white); }
.promo-card__label{ text-transform:uppercase; letter-spacing:.3em; font-size:.7rem; color: var(--red); margin-top:-.6rem; }
.promo-card__price{ font-family: var(--font-display); font-size: 1.4rem; color: var(--white); }
.promo-card ul{ display:flex; flex-direction:column; gap:.55rem; color: rgba(245,245,245,.72); font-size:.85rem; line-height:1.5; flex:1; }
.promo-card ul li::before{ content:"— "; color: var(--red); }
.promo-card--feature{ background: linear-gradient(160deg, var(--red-dark), #400709 80%); border-color: var(--red); }
.promo-card--feature ul{ color: rgba(245,245,245,.92); }
.promo-card__pill{
  position:absolute; top: -.9rem; left: 2rem; background: var(--white); color: var(--black);
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; padding:.4rem .9rem; border-radius:999px;
}
.promos__note{ text-align:center; font-size:.82rem; color: rgba(245,245,245,.45); margin-top: 1rem; }
@media (max-width: 900px){
  .promos__grid, .promos__grid--pair{ grid-template-columns:1fr; }
}

/* ==========================================================================
   GALERÍA — masonry
   ========================================================================== */
.gallery{ padding: var(--gap-xl) clamp(1.2rem,5vw,4rem); max-width: var(--container); margin:0 auto; }
.gallery__grid{
  display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 14vw; gap: .8rem;
}
.gallery__item{
  position:relative; margin:0; border-radius:2px; overflow:hidden; cursor:none;
  background: linear-gradient(160deg, var(--gray-800), var(--black) 75%);
}
.gallery__item::before{
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:url("../assets/svg/seigaiha.svg"); background-size:120px; transition: transform .6s var(--ease);
}
.gallery__item::after{
  content:""; position:absolute; inset:0; background: var(--red); opacity:0; mix-blend-mode:multiply;
  transition: opacity .5s var(--ease); clip-path: circle(0% at 50% 50%);
}
.gallery__item:hover::after{ opacity:.55; clip-path: circle(75% at 50% 50%); transition: clip-path .6s var(--ease), opacity .3s; }
.gallery__item:hover::before{ transform: scale(1.15); }
.gallery__item figcaption{
  position:absolute; left: 1rem; bottom: 1rem; z-index:2; font-size:.78rem; letter-spacing:.05em;
  opacity:0; transform: translateY(8px); transition: all .4s var(--ease);
}
.gallery__item:hover figcaption{ opacity:1; transform: translateY(0); }
.g1{ grid-column: span 2; grid-row: span 2; }
.g2{ grid-column: span 1; grid-row: span 1; }
.g3{ grid-column: span 1; grid-row: span 2; }
.g4{ grid-column: span 1; grid-row: span 1; }
.g5{ grid-column: span 1; grid-row: span 1; }
.g6{ grid-column: span 1; grid-row: span 2; }
.g7{ grid-column: span 2; grid-row: span 1; }
.g8{ grid-column: span 2; grid-row: span 1; }
@media (max-width: 760px){
  .gallery__grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 32vw; }
  .g1,.g7,.g8{ grid-column: span 2; }
}

/* ==========================================================================
   OPINIONES
   ========================================================================== */
.reviews{ padding: var(--gap-xl) clamp(1.2rem,5vw,4rem); max-width: var(--container); margin:0 auto; }
.reviews__grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 2rem clamp(1.5rem,4vw,3rem); }
.review{
  padding: 2.4rem clamp(1.4rem,3vw,2.4rem); border:1px solid rgba(245,245,245,.12); position:relative;
  background: var(--black-soft);
}
.review--offset{ transform: translateY(clamp(1rem,3vw,2.4rem)); }
.review__mark{ position:absolute; top: .6rem; left: 1.4rem; font-family: var(--font-display); font-size: 3.4rem; color: var(--red); opacity:.5; }
.review p{ font-size: 1.05rem; margin: 1.6rem 0 1.4rem; color: rgba(245,245,245,.85); }
.review footer{ display:flex; justify-content:space-between; font-size:.85rem; letter-spacing:.03em; color: rgba(245,245,245,.6); }
.review__stars{ color: var(--red); letter-spacing:.15em; }
@media (max-width:760px){ .reviews__grid{ grid-template-columns:1fr; } .review--offset{ transform:none; } }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact{ display:grid; grid-template-columns: 1.1fr .9fr; min-height: 80vh; }
.contact__map{ position:relative; filter: grayscale(1) contrast(1.15) brightness(.65); }
.contact__map iframe{ width:100%; height:100%; border:0; display:block; min-height: 420px; }
.contact__info{ padding: clamp(2.4rem,5vw,5rem); background: var(--black-soft); display:flex; flex-direction:column; justify-content:center; }
.contact__info .section-title{ margin-bottom: 2.4rem; }
.contact__link{
  display:flex; justify-content:space-between; align-items:baseline; padding: 1.1rem 0;
  border-bottom: 1px solid rgba(245,245,245,.14); font-size: clamp(1.1rem,2vw,1.5rem); font-family: var(--font-display);
  transition: color .3s;
}
.contact__link em{ font-style:normal; font-family: var(--font-body); font-size:.85rem; color: rgba(245,245,245,.55); }
.contact__link:hover{ color: var(--red); }
.contact__hours{ margin-top: 2.4rem; }
.contact__hours h3{ font-size: 1rem; text-transform:uppercase; letter-spacing:.25em; color: var(--red); margin-bottom: 1rem; }
.contact__hours div{ display:flex; justify-content:space-between; padding:.5rem 0; font-size:.92rem; color: rgba(245,245,245,.78); border-bottom: 1px dashed rgba(245,245,245,.1); }
@media (max-width: 900px){ .contact{ grid-template-columns:1fr; } .contact__map iframe{ min-height: 300px; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ position:relative; padding: 4rem clamp(1.2rem,5vw,4rem) 2rem; border-top: 1px solid rgba(245,245,245,.1); }
.site-footer__pattern{
  position:absolute; top:-1px; left:0; right:0; height:6px;
  background-image:url("../assets/svg/seigaiha.svg"); background-size:120px; opacity:.6;
}
.site-footer__grid{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem; max-width: var(--container); margin:0 auto; }
.brand--footer{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.05rem; }
.site-footer__nav{ display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.8rem; opacity:.7; }
.site-footer__nav a:hover{ color: var(--red); }
.site-footer__social{ display:flex; gap:1.2rem; font-size:.8rem; }
.site-footer__social a:hover{ color: var(--red); }
.site-footer__legal{ text-align:center; font-size:.72rem; color: rgba(245,245,245,.4); margin-top: 2.6rem; max-width: var(--container); }

/* ---------- reveal base (GSAP toma el control; esto evita FOUC) ---------- */
[data-reveal],[data-split]{ opacity: 0; }
.no-js [data-reveal],.no-js [data-split]{ opacity:1; }