/* semana en casa — lobby
   Una sola familia tipográfica, un solo acento, cero radios, cero sombras
   (con la única excepción del cuerpo físico de las teclas). */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg:      #FAFAF7;
  --ink:     #141414;
  --muted:   #6B6B66;
  --hair:    #E3E3DD;
  --key:     #E8E8E3;
  --accent:  #FF4D00;
  --on-accent: #0E0E0D;

  --rail: 188px;
  --gap:  56px;
  --pad:  clamp(20px, 5vw, 56px);
  --maxw: 1240px;

  --t-meta: 11px;
  --t-why:  13px;
  --t-body: 15px;
}

html[data-theme="night"] {
  --bg:    #0E0E0D;
  --ink:   #E9E9E4;
  --muted: #8A8A84;
  --hair:  #262624;
  --key:   #1C1C1A;
  --on-accent: #0E0E0D;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg:    #0E0E0D;
    --ink:   #E9E9E4;
    --muted: #8A8A84;
    --hair:  #262624;
    --key:   #1C1C1A;
  }
}

/* Fallback face with IBM Plex Mono's vertical metrics, so the swap from the
   system monospace to the webfont doesn't shift the layout. */
@font-face {
  font-family: "Plex Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", "Plex Fallback", "Courier New", monospace;
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto is required: the width/height attributes map to presentational
   hints that would otherwise beat aspect-ratio and stretch every cover. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ header */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}

.bar-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.bar-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bar-right { justify-self: end; }

/* --------------------------------------------------- teclas (mood + tema) */
/* nowrap keeps the header exactly one key-row tall: if the labels re-wrapped
   when the webfont swapped in, the whole page below would shift. */
.keys { display: flex; gap: 6px; flex-wrap: nowrap; }

.key {
  appearance: none;
  background: var(--key);
  border: 1px solid var(--hair);
  box-shadow: 0 2px 0 var(--hair);   /* el cuerpo físico de la tecla */
  padding: 6px 12px 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear,
              transform 100ms linear, box-shadow 100ms linear,
              border-color 100ms linear;
}

.key:hover { border-color: var(--accent); }

.key[aria-pressed="true"],
.key.is-on {
  transform: translateY(1px);
  box-shadow: none;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.key:active { transform: translateY(1px); box-shadow: none; }

.no-js .moods { display: none; }   /* sin JS el filtro no existe */
.no-js #conserje { display: none; }   /* y el conserje tampoco */

/* -------------------------------------------------------------- estructura */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 1024px) {
  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- nav rail */
.rail { display: none; }

@media (min-width: 1024px) {
  .rail {
    display: block;
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow: auto;
    padding-top: 8px;
  }
  .rail li + li { margin-top: 7px; }
  .rail a {
    font-size: 12px;
    color: var(--muted);
    display: block;
    line-height: 1.4;
    border-left: 1px solid transparent;
    padding-left: 12px;
    transition: color 100ms linear, border-color 100ms linear;
  }
  .rail a:hover { color: var(--ink); }
  .rail a[aria-current="true"] {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 500;
  }
}

main { min-width: 0; }

/* ------------------------------------------------------------------- intro */
.intro { padding: clamp(48px, 9vw, 104px) 0 0; }

.intro h1 {
  font-size: clamp(44px, 9vw, 92px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.intro .sub {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

.intro .manifesto {
  margin-top: clamp(28px, 4vw, 40px);
  max-width: 70ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.62;
}

.intro .manifesto strong { font-weight: 700; }

.rule {
  margin: clamp(32px, 4vw, 44px) 0 0;
  border: 0;
  border-top: 1px solid var(--hair);
}

/* --------------------------------------------------------------- secciones */
.sec { padding-top: clamp(56px, 7vw, 92px); scroll-margin-top: 76px; }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 26px;
}

.sec-head h2 {
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.sec-head .tally {
  font-size: var(--t-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fam {
  font-size: var(--t-why);
  font-style: italic;
  color: var(--muted);
  margin: 34px 0 14px;
}
.fam:first-of-type { margin-top: 0; }

/* --------------------------------------------------------- cards tipográficas */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 44px;
}
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.item {
  display: block;
  border-top: 1px solid var(--hair);
  padding: 14px 0 20px;
  transition: opacity 120ms linear, filter 120ms linear;
}

/* Ficha de película: póster a la izquierda, texto a la derecha — entrada de
   catálogo, no tarjeta. */
.item.film {
  display: grid;
  grid-template-columns: clamp(76px, 20%, 100px) minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

.film .poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--key);
  transition: border-color 100ms linear;
}

.film .txt { min-width: 0; }
.film .w { max-width: none; }

a.item.film:hover .poster { border-color: var(--accent); }

.item .t, .item .m, .item .w,
.alb .t, .alb .w,
.vid .t, .vid .w,
.chan .n, .chan .w { display: block; }

.item .t {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  transition: color 100ms linear;
}

.item .m {
  margin-top: 5px;
  font-size: var(--t-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.item .w {
  margin-top: 9px;
  font-size: var(--t-why);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

a.item:hover .t { color: var(--accent); }

/* ------------------------------------------------------------ discos (con tapa) */
.grid-alb {
  display: grid;
  /* 170px is the desktop floor; the clamp lets 390px hold two per row
     instead of one enormous cover. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 40vw, 170px), 1fr));
  column-gap: 20px;
  row-gap: 30px;
}

.alb { display: block; transition: opacity 120ms linear, filter 120ms linear; }

.alb .cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--key);
  transition: border-color 100ms linear;
}

.alb .t {
  margin-top: 11px;
  font-size: var(--t-why);
  font-weight: 700;
  line-height: 1.35;
  transition: color 100ms linear;
}

.alb .w {
  margin-top: 6px;
  font-size: var(--t-why);
  line-height: 1.5;
  color: var(--muted);
}

a.alb:hover .cover { border-color: var(--accent); }
a.alb:hover .t { color: var(--accent); }

/* ---------------------------------------------------------------- estantería */
/* Columnas fijas que dividen 36 exacto (3 · 4 · 6): la grilla siempre cierra
   en filas completas, sin lugares vacantes en ningún ancho. */
.shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 560px) { .shelf { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .shelf { grid-template-columns: repeat(6, 1fr); } }

.shelf a { display: block; }

.shelf img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--key);
  transition: border-color 100ms linear, opacity 100ms linear;
}

.shelf a:hover img,
.shelf a:focus-visible img,
.shelf a.is-peek img { border-color: var(--accent); }

.shelf-cap {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  color: var(--muted);
  min-height: 1.5em;
  font-variant-numeric: tabular-nums;
}
.shelf-cap b { font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------------------- video */
.grid-vid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 22px;
  row-gap: 32px;
}

.vid { display: block; transition: opacity 120ms linear, filter 120ms linear; }

.vid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--key);
  transition: border-color 100ms linear;
}

.vid .t {
  margin-top: 11px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  transition: color 100ms linear;
}

.vid .w {
  margin-top: 6px;
  font-size: var(--t-why);
  line-height: 1.5;
  color: var(--muted);
}

.vid .tag {
  display: inline-block;
  margin-top: 7px;
  font-size: var(--t-meta);
  color: var(--muted);
  border: 1px solid var(--hair);
  padding: 2px 6px;
}

a.vid:hover img { border-color: var(--accent); }
a.vid:hover .t { color: var(--accent); }

/* ------------------------------------------------------------------- juegos */
.tiempos { margin: 0 0 26px; flex-wrap: wrap; gap: 6px; }

.fam-note {
  font-size: var(--t-why);
  font-style: italic;
  color: var(--muted);
  margin: -6px 0 16px;
  max-width: 62ch;
}

.grid-game {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 42vw, 200px), 1fr));
  column-gap: 20px;
  row-gap: 32px;
  margin-bottom: 8px;
}

.game { display: block; transition: opacity 120ms linear, filter 120ms linear; }
.gtxt { display: block; min-width: 0; }

.box-wrap { position: relative; display: block; }

.grid-game.solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
  .grid-game.solo .game {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 26px;
    align-items: start;
    max-width: 780px;
  }
  .grid-game.solo .gtxt { padding-top: 2px; }
}

/* El arte de caja viene en proporciones muy distintas; se normaliza todo a
   cuadrado en el build (escalar y recortar) para que la grilla quede pareja. */
.game .box {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--key);
  border: 1px solid var(--hair);
  transition: border-color 100ms linear;
}

.game .box.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.scout {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 6px 3px;
  color: var(--on-accent);
  background: var(--accent);
}

.grid-empty {
  font-size: var(--t-why);
  color: var(--muted);
  margin-top: 4px;
}
.grid-empty[hidden] { display: none; }

.game .t {
  display: block;
  margin-top: 11px;
  font-size: var(--t-why);
  font-weight: 700;
  line-height: 1.35;
  transition: color 100ms linear;
}

.game .m {
  display: block;
  margin-top: 4px;
  font-size: var(--t-meta);
  color: var(--muted);
}

.game .w {
  display: block;
  margin-top: 7px;
  font-size: var(--t-why);
  line-height: 1.5;
  color: var(--muted);
}

a.game:hover .box { border-color: var(--accent); }
a.game:hover .t { color: var(--accent); }

/* ----------------------------------------------------------------- canales */
.chan {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  border-top: 1px solid var(--hair);
  padding: 12px 0 14px;
  transition: opacity 120ms linear, filter 120ms linear;
}

@media (min-width: 760px) {
  .chan { grid-template-columns: minmax(190px, 270px) 1fr; align-items: baseline; }
}

.chan .n { font-size: 15px; font-weight: 700; line-height: 1.35; transition: color 100ms linear; }
.chan .n .side { font-weight: 400; color: var(--muted); font-size: var(--t-meta); margin-left: 8px; }
.chan .w { font-size: var(--t-why); line-height: 1.5; color: var(--muted); }
a.chan:hover .n { color: var(--accent); }

/* ------------------------------------------------------------------- prosa */
.prose {
  max-width: 70ch;
  font-size: var(--t-body);
  line-height: 1.65;
  transition: opacity 120ms linear, filter 120ms linear;
}
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose + .prose { margin-top: 18px; }

/* -------------------------------------------------------------------- cava */
.cava-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-why);
  margin-bottom: 26px;
}
.cava-table th, .cava-table td {
  text-align: left;
  border-bottom: 1px solid var(--hair);
  padding: 9px 14px 9px 0;
  font-variant-numeric: tabular-nums;
}
.cava-table th { font-weight: 700; font-size: var(--t-meta); color: var(--muted); }

/* ------------------------------------------------------------------ footer */
.foot {
  margin-top: clamp(72px, 9vw, 120px);
  border-top: 1px solid var(--hair);
  padding: 22px 0 56px;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.foot .clock { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.foot .closing {
  margin-top: 30px;
  text-align: center;
  font-style: italic;
  font-size: var(--t-why);
  color: var(--muted);
}

/* --------------------------------------------- placeholder sin arte (raro) */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  background: var(--key);
  border: 1px solid var(--hair);
  aspect-ratio: 1 / 1;
}
.vid .ph { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------- el conserje */
.conserje { max-width: 70ch; }

.c-rows { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.c-result {
  margin-top: 18px;
  border-top: 1px solid var(--hair);
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  min-height: 7.2em;
}

.c-result .c-line { display: block; }
.c-result .lbl { color: var(--muted); }
.c-result .c-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.c-result a { font-weight: 700; transition: color 100ms linear; }
.c-result a:hover { color: var(--accent); }
.c-result .c-otra {
  margin-top: 12px;
  background: var(--key);
  border: 1px solid var(--hair);
  box-shadow: 0 2px 0 var(--hair);
  padding: 5px 12px 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear,
              transform 100ms linear, box-shadow 100ms linear,
              border-color 100ms linear;
}
.c-result .c-otra:hover { border-color: var(--accent); }
.c-result .c-otra:active { transform: translateY(1px); box-shadow: none; }

/* -------------------------------------------------- la ventana de película */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 5vh, 64px) var(--pad);
  overflow: auto;
}

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 9, 0.62);
}

html[data-theme="night"] .modal-back { background: rgba(0, 0, 0, 0.74); }

.modal-box {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 22px clamp(18px, 3vw, 30px) 26px;
}

.fm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.fm-head h3 {
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.fm-x { flex: none; }

.fm-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 620px) { .fm-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 26px; } }

.fm-left { max-width: 150px; }

.fm-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--key);
}

.fm-body { min-width: 0; }

.fm-meta {
  font-size: var(--t-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.fm-meta .imdb { color: var(--ink); font-weight: 700; }

.fm-why {
  margin-top: 14px;
  font-size: var(--t-why);
  line-height: 1.55;
  border-left: 1px solid var(--accent);
  padding-left: 12px;
}

.fm-syn { margin-top: 16px; font-size: var(--t-why); line-height: 1.65; }

.fm-rows { margin-top: 18px; }

.fm-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--hair);
  padding: 9px 0;
  font-size: 12px;
  line-height: 1.5;
}
.fm-row dt { color: var(--muted); }
.fm-row dd { margin: 0; }

.fm-watch { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 14px; }
.fm-watch h4 { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.fm-wgroup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-bottom: 8px; }
.fm-wgroup .lbl { font-size: var(--t-meta); color: var(--muted); min-width: 74px; }

.fm-chip {
  display: inline-block;
  border: 1px solid var(--hair);
  padding: 4px 9px 3px;
  font-size: 11px;
  transition: border-color 100ms linear, color 100ms linear;
}
a.fm-chip:hover { border-color: var(--accent); color: var(--accent); }

.fm-none { font-size: 12px; color: var(--muted); }

.fm-lb {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
  transition: color 100ms linear, border-color 100ms linear;
}
.fm-lb:hover { color: var(--accent); border-bottom-color: var(--accent); }

body.modal-open { overflow: hidden; }

/* --------------------------------------------- táctil (iPad y pantallas touch) */
@media (pointer: coarse) {
  :root { --rail: 216px; }
  .rail a {
    font-size: 13px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .rail li + li { margin-top: 2px; }
  .key { padding: 10px 14px 9px; font-size: 12px; }
  .c-result .c-otra { padding: 9px 14px 8px; font-size: 12px; }
}

/* ---------------------------------------------------------------- el filtro */
.dim { opacity: 0.15; filter: grayscale(1); }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 419px) {
  .bar-in { grid-template-columns: auto 1fr; row-gap: 8px; }
  .bar-title { grid-column: 1; }
  .bar-right { grid-column: 2; }
  .moods { grid-column: 1 / -1; }
  .key { padding: 6px 9px 5px; font-size: 10px; }
}