/* =========================================================================
   22 PATAGONIA SUSHI — carta digital premium
   ========================================================================= */

/* Genjiro — fuente brush de los logos (Rometheme). Archivo en assets/. */
@font-face {
  font-family: 'Genjiro';
  src: url('assets/Genjiro.ttf') format('truetype');
  font-display: swap;
}

:root {
  --ink:       #100E0C;   /* fondo carbón cálido        */
  --ink-2:     #18140F;   /* superficie                  */
  --ink-3:     #221C16;   /* superficie elevada          */
  --cream:     #F3E7D3;   /* títulos                     */
  --cream-soft:#E2D6C0;   /* texto principal             */
  --muted:     #9B9183;   /* secundario                  */
  --muted-2:   #6E655A;   /* tenue                       */
  --red:       #B91C1C;   /* acento (tweakable)          */
  --hair:      rgba(243,231,211,0.10);
  --hair-2:    rgba(243,231,211,0.055);
  --font-display: 'Genjiro', 'Shippori Mincho', serif;
  --font-serif:   'Shippori Mincho', serif;
  --font-body:    'Zen Kaku Gothic New', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #060504;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---- escenario ---------------------------------------------------------- */
.stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(185,28,28,0.18), transparent 55%),
    radial-gradient(90% 90% at 50% 120%, rgba(185,28,28,0.05), transparent 60%),
    #060504;
}
.stage__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140% 110% at 50% 50%, transparent 52%, rgba(0,0,0,0.6));
}
.stage__device { position: relative; transform-origin: center center; }

/* ---- pantalla ----------------------------------------------------------- */
.screen { position: absolute; inset: 0; background: var(--ink); color: var(--cream-soft); overflow: hidden; }
.scroll { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ---- image-slot premium ------------------------------------------------- */
.photo, .hero__slot { display: block; width: 100%; height: 100%; }
image-slot::part(frame) {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(185,28,28,0.12), transparent 60%),
    linear-gradient(160deg, #221c16, #14110d);
}
image-slot::part(empty) { color: rgba(243,231,211,0.34); }
image-slot::part(ring) { border-color: rgba(243,231,211,0.12); }

/* ---- topbar ------------------------------------------------------------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 11px;
  padding: 48px 20px 12px;
  background: linear-gradient(rgba(16,14,12,0.96) 55%, rgba(16,14,12,0));
  border-bottom: 1px solid transparent;
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease, border-color 0.3s ease;
  pointer-events: none;
}
.topbar--solid {
  transform: translateY(0); opacity: 1; pointer-events: auto;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--hair-2);
}
.topbar__mark { height: 30px; width: auto; display: block; }
.topbar__words { display: flex; flex-direction: column; gap: 2px; }
.topbar__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--cream); letter-spacing: 0.6px; line-height: 1; }
.topbar__sub { font-size: 8.5px; color: var(--muted); letter-spacing: 2.4px; text-transform: uppercase; }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg .hero__slot { filter: saturate(1.05) blur(2px); transform: scale(1.06); }
.hero__bg image-slot::part(frame) {
  background:
    radial-gradient(100% 80% at 50% 18%, rgba(185,28,28,0.30), transparent 62%),
    linear-gradient(180deg, #1c1712, #0d0b09);
}
.hero__bg image-slot::part(empty) { color: rgba(243,231,211,0.28); }
.hero__bg image-slot::part(ring) { display: none; }
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,14,12,0.55) 0%, rgba(16,14,12,0.25) 36%, rgba(16,14,12,0.7) 78%, var(--ink) 100%);
}
.hero__glow {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: 380px; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--red) 55%, transparent), transparent 60%);
  opacity: 0.55; filter: blur(14px); mix-blend-mode: screen;
}
.hero__content { position: relative; z-index: 2; text-align: center; padding: 0 28px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px;
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--cream-soft);
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(16,14,12,0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: #69BE73; box-shadow: 0 0 0 3px rgba(105,190,115,0.2); animation: blink 2.6s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.45} }
.hero__logo {
  width: 84%; max-width: 290px; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,0.65));
}
.hero__line { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; }
.hero__rule { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--hair)); }
.hero__line .hero__rule:last-child { background: linear-gradient(90deg, var(--hair), transparent); }
.hero__tag { font-family: var(--font-serif); font-size: 13px; color: var(--cream); letter-spacing: 4px; text-transform: uppercase; }
.hero__place { margin: 12px 0 0; font-size: 11px; color: var(--muted); letter-spacing: 2.4px; text-transform: uppercase; }
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(5px)} }

/* ---- reveal on scroll --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---- explorar carta ----------------------------------------------------- */
.explore { padding: 38px 20px 8px; }
.explore__head { text-align: center; margin-bottom: 22px; }
.explore__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 27px; color: var(--cream); letter-spacing: 1px; }
.explore__sub { margin: 8px 0 0; font-size: 11px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
.explore__grid { display: flex; flex-direction: column; gap: 13px; }

.catcard-wrap { display: block; }
.catcard {
  position: relative; width: 100%; cursor: pointer; overflow: hidden;
  display: flex; align-items: stretch; gap: 0; text-align: left;
  height: 104px; padding: 0; border: 1px solid var(--hair-2); border-radius: 18px;
  background: var(--ink-2); color: var(--cream);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.catcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--red) 45%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent); }
.catcard:active { transform: translateY(-1px) scale(0.995); }
.catcard__media { position: relative; width: 116px; flex-shrink: 0; overflow: hidden; }
.catcard__photo { width: 100%; height: 100%; }
.catcard__media image-slot::part(frame) { border-radius: 0; }
.catcard__media image-slot::part(empty) svg { display: none; }
.catcard__media image-slot::part(empty) { font-size: 0; }
.catcard__kanji {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-family: var(--font-serif); font-size: 46px; color: rgba(243,231,211,0.5);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5); pointer-events: none;
}
.catcard__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, transparent 55%, var(--ink-2)); }
.catcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 6px 0 16px; }
.catcard__titles { display: flex; flex-direction: column; gap: 3px; }
.catcard__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--cream); letter-spacing: 0.5px; line-height: 1.05; }
.catcard__en { font-family: var(--font-body); font-style: italic; font-size: 11px; color: var(--muted); letter-spacing: 0.5px; opacity: 0.75; }
.catcard__count { font-size: 10px; color: var(--cream-soft); letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.7; }
.catcard__arrow { align-self: center; flex-shrink: 0; padding: 0 16px 0 4px; color: var(--red); display: grid; place-items: center; transition: transform 0.3s ease; }
.catcard:hover .catcard__arrow { transform: translateX(4px); }

/* ---- separador / encabezado de sección ---------------------------------- */
.menu__body { padding: 0 0 4px; }
.catsec { padding-top: 18px; }
.sec { padding: 26px 20px 6px; }
.sec__inner { position: relative; display: flex; align-items: center; gap: 14px; padding-top: 26px; border-top: 1px solid var(--hair-2); }
.sec__kanji {
  font-family: var(--font-serif); font-size: 40px; line-height: 0.8; color: var(--red);
  flex-shrink: 0; opacity: 0.92; text-shadow: 0 0 22px color-mix(in srgb, var(--red) 45%, transparent);
}
.sec__titles { display: flex; flex-direction: column; gap: 4px; }
.sec__sub { font-size: 9.5px; color: var(--muted); letter-spacing: 2.2px; text-transform: uppercase; }
.sec__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 25px; color: var(--cream); letter-spacing: 0.6px; line-height: 1; }
.sec__en { font-family: var(--font-body); font-style: italic; font-size: 11px; color: var(--muted); letter-spacing: 0.6px; opacity: 0.7; }

/* ---- product cards ------------------------------------------------------ */
.cards { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 4px; }
.card-wrap { display: block; }
.card {
  position: relative; overflow: hidden; border-radius: 18px;
  background: var(--ink-2); border: 1px solid var(--hair-2);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--hair); box-shadow: 0 16px 38px rgba(0,0,0,0.5); }
.card--feat { border-color: color-mix(in srgb, var(--red) 22%, transparent); }
.card--feat:hover { box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent); }
.card__media { position: relative; height: 178px; overflow: hidden; }
.card--feat .card__media { height: 200px; }
.card__photo { width: 100%; height: 100%; }
.card__media image-slot::part(frame) { border-radius: 0; }
.card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(24,20,15,0.55)); }
.card__tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.card__body { padding: 15px 17px 17px; }
.card__head { display: flex; flex-direction: column; gap: 2px; }
.card__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18.5px; color: var(--cream); letter-spacing: 0.3px; line-height: 1.15; }
.card__en { font-family: var(--font-body); font-style: italic; font-size: 11.5px; color: var(--muted); letter-spacing: 0.5px; opacity: 0.72; }
.card__desc { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.card__foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.card__rule { flex: 1; height: 1px; background: var(--hair-2); }
.card__price { font-family: var(--font-serif); font-size: 19px; color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }

/* ---- tags --------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(16,14,12,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hair); color: var(--cream);
}
.tag--pop { border-color: color-mix(in srgb, var(--red) 60%, transparent); background: color-mix(in srgb, var(--red) 24%, rgba(16,14,12,0.7)); }
.tag--new { border-color: color-mix(in srgb, var(--red) 50%, transparent); color: #FFD9A0; }
.tag--chef { color: var(--cream); }
.tag--veggie { border-color: rgba(143,168,107,0.6); color: #C2D6A0; }

/* ---- pie ---------------------------------------------------------------- */
.menufoot { text-align: center; padding: 48px 22px 30px; }
.menufoot__mark { height: 58px; width: auto; opacity: 0.85; }
.menufoot__name { margin: 14px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--cream); letter-spacing: 0.6px; }
.menufoot__meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); letter-spacing: 0.4px; }
.menufoot__place { margin: 4px 0 0; font-size: 10px; color: var(--muted-2); letter-spacing: 2px; text-transform: uppercase; }
.menufoot__note { margin: 18px 0 0; font-size: 9px; color: var(--muted-2); letter-spacing: 1.6px; text-transform: uppercase; }
.menu__pad { height: 40px; }

/* ---- ocultar subtítulos en inglés --------------------------------------- */
.no-en .card__en, .no-en .catcard__en, .no-en .sec__en { display: none; }
/* Títulos más grandes y mejor contraste */
.heading { 
  font-size: 2.2rem !important; 
  font-weight: 700 !important;
  color: #f3e7d3 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 1.5rem !important;
}

.sectionheader__category { 
  font-size: 1.8rem !important; 
  color: #B91C1C !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.sectionheader__sub { 
  font-size: 1rem !important; 
  color: #f3e7d3 !important;
  font-weight: 400 !important;
}

.productcard__name { 
  font-size: 1.15rem !important; 
  color: #f3e7d3 !important;
  font-weight: 700 !important;
  margin-bottom: 0.3rem !important;
}

.productcard__en { 
  font-size: 0.9rem !important; 
  color: #B91C1C !important;
  font-weight: 600 !important;
}

.productcard__price { 
  font-size: 1.4rem !important; 
  color: #B91C1C !important;
  font-weight: 700 !important;
}

/* Remover stage__device scale */
.stage__device {
  transform: scale(1) !important;
  max-width: 100% !important;
}

.full-screen {
  width: 100vw !important;
  height: 100vh !important;
}