/* Hilo — vitrina de Logo Lab (Etapa 75). Generado por hilo-backend/tools/logo/build-showcase-pages.js. Se apoya en css/game-art.css (hero, árbol del pack, pasos, «es / no es», preguntas);
 * aquí solo está lo propio del logo: el tablero del héroe, las versiones, los tamaños de plataforma, el video y la ficha de marca. */
body.lg { --ink: #1F2747; --coral: #F2653C; --cream: #F7F1E6; --paper: #FFFFFF; --mist: #E9ECF4; }
.lg .sub-h { margin-top: 44px; }

/* ---------- héroe: un tablero de tarjetas con el mismo logo en sus usos ---------- */
.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: min(100%, 470px); margin: 4px auto 0; }
.bt { display: grid; place-items: center; border-radius: var(--radius-lg); box-shadow: 0 10px 26px rgba(15,18,48,.18); overflow: hidden; }
.bt img { display: block; width: 100%; height: auto; }
.b-main { grid-column: 1 / -1; background: var(--paper); padding: 26px 22px; }
.b-main img { width: 92%; }
.b-ink { grid-column: span 3; background: var(--ink); padding: 18px 14px; }
.b-warm { grid-column: span 3; background: var(--cream); padding: 18px 14px; }
.b-ios { grid-column: span 3; background: transparent; box-shadow: none; padding: 4px 0; }
.b-ios img { width: 62%; border-radius: 22%; box-shadow: 0 10px 22px rgba(15,18,48,.28); }
.b-prof { grid-column: span 3; background: transparent; box-shadow: none; padding: 4px 0; }
.b-prof img { width: 62%; border-radius: 50%; background: #fff; box-shadow: 0 10px 22px rgba(15,18,48,.28); }
.b-ios::after, .b-prof::after { content: none; }

/* ---------- versiones y maquetaciones ---------- */
.vgrid { display: grid; gap: 14px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vtile { margin: 0; }
.vbox { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); overflow: hidden; }
.vbox img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.v-color .vbox { background: var(--paper); }
.v-black .vbox { background: var(--mist); }
.v-white .vbox { background: var(--ink); border-color: var(--ink); }
.v-ink .vbox { background: var(--cream); }
.lays .vbox { background: var(--paper); aspect-ratio: 1 / 1; }
.lays .l-horizontal .vbox img, .lays .l-name .vbox img { width: 100%; height: auto; }
.lays .l-vertical .vbox img, .lays .l-symbol .vbox img { height: 82%; width: auto; }
.vtile figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); }
.vtile figcaption b { color: var(--text-primary); font-weight: 600; font-size: 15px; }

/* ---------- tamaños de plataforma ---------- */
.places { display: grid; gap: 14px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl { margin: 0; }
.pbox { display: grid; place-items: center; min-height: 150px; padding: 14px; border-radius: var(--radius-md); background: var(--mist); border: 1px solid var(--border-subtle); overflow: hidden; }
.pl figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); }
.pl figcaption b { color: var(--text-primary); font-weight: 600; font-size: 15px; }
.favs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; }
.favs img { display: block; image-rendering: auto; }
.favs .f180 { width: 62px; height: 62px; border-radius: 20%; }
.ios { width: 104px; height: auto; border-radius: 22%; box-shadow: 0 8px 18px rgba(15,18,48,.25); }
.andr { position: relative; display: block; width: 108px; height: 108px; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 18px rgba(15,18,48,.25); }
.andr img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pbox .prof { width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px rgba(15,18,48,.2); }
.pl-wide { grid-column: 1 / -1; }
.pl-wide .pbox { min-height: 0; padding: 0; background: transparent; border: 0; }
.pl-wide .banner { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.pl-yt .banner { aspect-ratio: 16 / 9; object-fit: cover; }
.pl-sh .banner { aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- movimiento ---------- */
.mv { border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); margin-bottom: 12px; }
.mv video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #fff; }

/* ---------- ficha de marca ---------- */
.two-col { display: grid; gap: 22px; align-items: start; }
.sheet { margin: 0; justify-self: center; width: min(100%, 420px); }
.sheet img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); background: #fff; }

@container page (min-width: 700px) {
  .favs { gap: 14px; }
  .favs .f180 { width: 90px; height: 90px; }
  .board { width: min(100%, 500px); gap: 14px; }
  .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
  .places { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
  .pl-wide { grid-column: span 2; }
  .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: center; }
  .mv { max-width: 880px; }
}