/* ==========================================================================
   Tema de juego: Taquería del Más Allá.
   Se aplica con la clase «e-tema--taqueria» (la pone el campo `tema` del proyecto en js/contenido.js):
   cambia los tokens de la marca Inertia.gg por los del manual de identidad del juego solo dentro de
   su página y de su tarjeta. La cabecera y el pie siguen siendo de Inertia.gg.
   El juego siempre va en oscuro: su logo no tiene versión para fondo claro.
   ========================================================================== */

.e-tema--taqueria {
  --ink: #0F0B09;          /* Noche */
  --surface: #1C1411;      /* Brasa */
  --surface-2: #241A15;
  --line: #3A2C24;
  --line-soft: #2A1F19;
  --text: #EDE2C6;         /* Crema claro */
  --muted: #A8977C;
  --accent: #F2B35E;       /* Foco */
  --accent-ink: #1A0F0B;
  --accent-hover: #F6C47E;
  --e-azul: #F2B35E;
  --e-rojo: #A32015;       /* Rojo rótulo: solo letras grandes sobre crema */
  --e-sombra: 0 24px 60px -24px rgba(0, 0, 0, .85);
  --font-display: "Bowlby One", Impact, "Arial Black", sans-serif;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Pixelify Sans", "Courier New", monospace;
  color-scheme: dark;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
}

/* Bowlby One para lo que se grita: siempre en mayúsculas y en su único peso. */
.e-tema--taqueria :is(h1, h2, h3, .e-tarjeta-titulo) {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: .01em;
}
.e-tema--taqueria .e-prosa h2 { font-size: clamp(22px, 2.4vw, 28px); }

/* Pixelify Sans para etiquetas, estado y datos: el guiño a la PS1. */
.e-tema--taqueria :is(.e-insignia, .e-estado, .e-ficha dt, .e-tarjeta-kicker, .e-migas, .e-tarjeta-meta, .e-tarjeta-accion) {
  font-family: var(--font-pixel);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.e-tema--taqueria :is(.e-insignia, .e-estado) { font-size: 13px; border-radius: 4px; }
.e-tema--taqueria .e-ficha dt { font-size: 14px; }
.e-tema--taqueria .e-prosa p,
.e-tema--taqueria .e-prosa ul { color: #D8CBAE; }
.e-tema--taqueria .e-caracteristicas li { border-radius: 8px; line-height: 1.55; }
.e-tema--taqueria .e-caracteristicas strong { color: var(--accent); }
.e-tema--taqueria .e-galeria img { border-radius: 8px; aspect-ratio: 1; }
.e-tema--taqueria .btn-primary { background: var(--accent); color: var(--accent-ink); }

/* ---------- Hero con el arte del menú: el puesto a la derecha, fundido hacia la izquierda ---------- */
.e-detalle-hero--arte {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 72vh, 820px);
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 36%, rgba(15, 11, 9, .6) 56%, rgba(15, 11, 9, 0) 74%),
    var(--e-fondo) right center / cover no-repeat,
    var(--ink);
  border-bottom: 1px solid var(--line);
}
.e-detalle-hero--arte > .wrap { width: 100%; }
.e-detalle-hero--arte .e-detalle-grid > div:first-child { max-width: 560px; }
.e-detalle-hero--arte .e-migas { font-size: 13px; }

/* El nombre del juego es el logo: un dibujo, nunca una fuente. Mínimo 320 px de ancho. */
.e-detalle-logo { margin: var(--e-2) 0 var(--e-5); line-height: 0; }
.e-detalle-logo img { width: min(100%, 500px); min-width: min(100%, 320px); height: auto; }

@media (max-width: 860px) {
  .e-detalle-hero--arte {
    display: block;
    min-height: 0;
    padding-top: 250px;
    background:
      linear-gradient(180deg, rgba(15, 11, 9, 0) 0, rgba(15, 11, 9, .15) 150px, var(--ink) 330px),
      var(--e-fondo) 100% 0 / auto 360px no-repeat,
      var(--ink);
  }
}

/* ---------- Tarjeta en /juegos ---------- */
.e-tarjeta.e-tema--taqueria { border-color: var(--line); }
.e-tarjeta.e-tema--taqueria:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.e-tarjeta.e-tema--taqueria .e-tarjeta-titulo { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; }
.e-tarjeta.e-tema--taqueria .e-tarjeta-accion { color: var(--accent); font-size: 14px; }