/* =====================================================================
   TEMA · Akari
   Faroles de papel washi encendidos en una sala en penumbra, con el
   sello rojo japonés (hanko) para lo importante.
   Cambiando estas variables cambia el look de TODAS las páginas.
   ===================================================================== */

:root {
  --washi: #F6E9CF;
  --luz: #FFD58A;
  --bambu: #B99A6B;
  --bermellon: #D3321C;

  /* Colores */
  --fondo: #101113;        /* sumi */
  --fondo-2: #1A1B1E;
  --fondo-3: #25262A;
  --linea: #2C2D32;
  --linea-2: #3E3F45;
  --texto: #ECE6DA;
  --texto-2: #A8A194;
  --texto-3: #878175;
  --titulo: var(--washi);
  --acento: var(--bermellon);
  --acento-2: #B52814;
  --acento-suave: rgba(226, 60, 37, .2);
  --sobre-acento: #FFF6EA;
  --brasa-clara: var(--luz);
  --ok: #4E9A73; --ok-suave: #1E3329; --ok-texto: #8FD1AE;
  --alerta: #E3A23B; --alerta-suave: #3A2D17; --alerta-texto: #F2C47A;
  --peligro: #FF7462;
  --peligro-suave: rgba(255, 116, 98, .12);
  --whatsapp: #0E7468;
  --whatsapp-2: #0B5E54;
  --demo-fondo: #25262A;
  --demo-texto: #A8A194;

  /* Tipografías */
  --f-titulo: "Zen Old Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --f-texto: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-peso: 900;
  --t-mayus: none;
  --t-espaciado: -.01em;
  --t-alto: 1.02;
  --marca-tam: 24px;
  --marca-espaciado: .16em;

  /* Botones y formas */
  --boton-peso: 700;
  --boton-tam: 15px;
  --boton-espaciado: .04em;
  --radio-boton: 999px;
  --radio-chip: 999px;
  --radio: 18px;
  --radio-hoja: 22px;
  --ticket-fondo: var(--washi);
  --ticket-texto: #1A1B1E;

  /* Plano: madera oscura, barra iluminada y tatamis al fondo */
  --plano-afuera: #0B0C0D;
  --plano-piso: #17181B;
  --plano-pared: #5A544A;
  --plano-mueble: #26272B;
  --plano-patio: #242116;
  --mesa-libre: #3B3226;
  --mesa-borde: #8C7552;
  --mesa-silla: #4C4235;
  --mesa-hover: #54483A;
  --mesa-fantasma: #4E4A43;
}

/* Sello hanko antes del nombre */
.marca { text-transform: uppercase; }
.marca::before { content: "灯"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--acento); color: var(--washi); font: 900 19px/1 var(--f-titulo); letter-spacing: 0; transform: rotate(-4deg); flex: none; }
@media (max-width: 760px) { .marca { flex-direction: row; align-items: center; gap: 10px; } }

.franja { height: 1px; background: linear-gradient(90deg, transparent, var(--acento), transparent); }
.btn--linea { box-shadow: inset 0 0 0 1.5px var(--linea-2); }

/* Promo: sello rojo cuadrado */
.chapa { background: rgba(26, 27, 30, .88); backdrop-filter: blur(8px); }
.chapa__sello { writing-mode: horizontal-tb; transform: rotate(-4deg); align-self: start; min-height: 0; width: 48px; height: 48px; padding: 0; border-radius: 9px; font: 900 15px/1 var(--f-titulo); letter-spacing: 0; }
.chapa__precio { color: var(--luz); font-family: var(--f-texto); font-weight: 700; }
.plato__precio, .corte__precio b { color: var(--luz); font-family: var(--f-texto); font-weight: 700; }

/* =====================================================================
   PORTADA (solo index.html)
   ===================================================================== */
.portada { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; padding: 0 var(--margen) 40px; min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); }
.portada__texto { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 24px 0; }
.portada__titulo { font-size: clamp(52px, 6.8vw, 100px); }
.portada__titulo span { color: var(--luz); }
.portada__bajada { font-size: 18px; max-width: 36ch; color: var(--texto-2); }
.portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada__texto .chapa { max-width: 460px; box-shadow: none; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; color: var(--texto-2); }
.portada__datos b { display: block; color: var(--titulo); font-weight: 700; }

/* La sala: faroles que cuelgan a distintas alturas, uno por categoría */
.sala { container-type: inline-size; position: relative; border-radius: 28px; overflow: hidden; background: #0B0C0D; min-height: 560px; }
.sala > img { position: absolute; inset: auto 0 0 0; width: 100%; height: 56%; object-fit: cover; opacity: .9; -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent); mask-image: linear-gradient(0deg, #000 50%, transparent); }
.faroles { position: absolute; inset: 0 0 38% 0; display: flex; justify-content: space-around; align-items: flex-start; padding: 0 12px; }
.farol { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--texto-2); -webkit-tap-highlight-color: transparent; }
.farol::before { content: ""; width: 1px; background: #3A3B40; height: var(--h, 40px); }
.farol__papel {
  width: min(var(--w, 92px), 16.5cqw); height: var(--alto, 128px); display: grid; place-items: center;
  border-radius: 46% 46% 40% 40% / 22% 22% 18% 18%;
  background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(150, 110, 60, .28) 17px 18.5px), radial-gradient(ellipse at 50% 55%, #FFF4DA 0%, var(--washi) 45%, #E8C98F 100%);
  box-shadow: 0 0 50px 8px rgba(255, 200, 110, .26), 0 0 120px 30px rgba(255, 190, 90, .1);
  filter: brightness(.8);
  transition: box-shadow .5s, filter .5s, transform .6s var(--ease);
  animation: encender 1.4s calc(var(--i, 0) * 220ms + 200ms) var(--ease) both;
}
@keyframes encender { from { filter: brightness(.22); box-shadow: none; } }
.farol:hover .farol__papel, .farol:focus-visible .farol__papel { filter: brightness(1.06); transform: translateY(8px); box-shadow: 0 0 70px 16px rgba(255, 205, 120, .45), 0 0 180px 50px rgba(255, 190, 90, .18); }
.farol__kanji { font: 900 16px/1.2 var(--f-titulo); color: #6A4A22; writing-mode: vertical-rl; letter-spacing: .08em; }
.farol__nombre { margin-top: 10px; font-size: 13px; font-weight: 500; transition: color .3s; }
.farol:hover .farol__nombre { color: var(--washi); }
.farol:focus-visible { outline: none; }
.farol:focus-visible .farol__nombre { color: var(--washi); text-decoration: underline; text-underline-offset: 4px; }
.sala__ficha { position: absolute; right: 18px; bottom: 18px; left: 18px; max-width: 350px; margin-left: auto; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 16px 18px; border-radius: 18px; background: rgba(16, 17, 19, .82); backdrop-filter: blur(10px); border: 1px solid var(--linea); text-decoration: none; }
.sala__ficha strong { font: 900 20px/1.2 var(--f-titulo); color: var(--washi); }
.sala__ficha span { grid-column: 1; font-size: 14px; color: var(--texto-2); }
.sala__ficha b { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 22px; color: var(--luz); }
@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .sala { min-height: 460px; order: -1; margin-top: 8px; }
  .faroles { padding: 0 2px; }
  .farol__papel { height: calc(var(--alto, 128px) * .78); }
  .farol__kanji { font-size: 14px; }
  .farol__nombre { font-size: 12px; }
}

/* Secciones de la portada */
.adelanto { background: var(--fondo-2); }
.cortes { gap: 14px; background: none; border: 0; overflow: visible; }
.corte { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.corte:hover { background: var(--fondo); border-color: var(--linea-2); }
.corte__txt h3 { font-size: 26px; }
.gancho li::before { color: var(--acento-2); font-family: var(--f-texto); }
.dueno { background: var(--washi); color: #2A2418; }
.dueno h2 { color: #1A1B1E; }
.dueno .btn { background: var(--acento); color: var(--sobre-acento); }
.dueno .btn:hover { background: var(--acento-2); }

/* Menú */
.categorias button { font-family: var(--f-texto); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.plato__nombre { font-size: 23px; }
.marca-plato--casa { background: var(--acento-suave); color: #FF9C88; }
.carta__cabeza h1 { font-size: clamp(56px, 9vw, 116px); }

/* =====================================================================
   PANEL DEL DUEÑO: claro para trabajar de día, barra de sumi
   ===================================================================== */
body.panel {
  --fondo: #F0F0EE;
  --fondo-2: #FFFFFF;
  --fondo-3: #ECE7DC;
  --linea: #E2DCCF;
  --linea-2: #CFC6B4;
  --texto: #33302A;
  --texto-2: #625C51;
  --texto-3: #857E71;
  --titulo: #15161A;
  --acento-suave: rgba(211, 50, 28, .1);
  --acento-texto: #B42A16;
  --sobre-acento: #FFFFFF;
  --ok: #2E8A5A; --ok-suave: #E1F2E8; --ok-texto: #1D6B43;
  --alerta: #D9941F; --alerta-suave: #FCF0D6; --alerta-texto: #7E5200;
  --peligro: #C2362B; --peligro-suave: #FBE4E1;
  --panel-lateral: #101113;
  --panel-lateral-texto: #A8A194;
  --panel-lateral-titulo: #F6E9CF;
  --plano-afuera: #E6E4DF;
  --plano-piso: #FBFAF7;
  --plano-pared: #5A544A;
  --plano-mueble: #E6E0D2;
  --plano-patio: #EFE6CF;
  --mesa-libre: #FFFFFF;
  --mesa-borde: #A59678;
  --mesa-silla: #D9CFBB;
  --mesa-hover: #FCE9E3;
  --mesa-fantasma: #C4B9A3;
  --foco: #D3321C;
}
body.panel .chapa {
  --titulo: #F6E9CF; --texto: #ECE6DA; --texto-2: #A8A194; --linea: #2C2D32; --sobre-acento: #FFF6EA;
  background: #1A1B1E; border-color: #2C2D32;
}

/* En el menú, la categoría activa se enciende como un farol de papel */
.categorias__brasa { height: 100%; border-radius: 14px 14px 0 0; animation: none; background: radial-gradient(ellipse 60% 80% at 50% 70%, rgba(255, 213, 138, .26), rgba(246, 233, 207, .06) 70%, transparent); border-bottom: 2px solid var(--luz); }
.categorias button[aria-current="true"] { color: var(--washi); }