/* ============================================================
   ALBORA GAMES — juegos.css · v1
   Las páginas de /juegos/: el mismo sistema que la home (tokens.css + styles.css ponen la nav, los botones,
   los kickers, las cards y el pie) más lo propio de los juegos: la ficha del juego, las láminas grabadas
   enmarcadas, los pasos en números romanos y la página legal. Sin JS: todo es HTML y CSS.
   ============================================================ */

/* ---- Nav: «ALBORA | GAMES» ---- */
.nav__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--color-piedra-400);
  padding-left: 12px;
  border-left: var(--rule-oro);
  line-height: 1.4;
}
.nav__links .btn--ghost[aria-current="page"] { color: var(--color-oro-300); }
@media (max-width: 480px) {
  .status { letter-spacing: 0.08em; }                               /* «EN DESARROLLO · ANDROID Y PC» en una línea */
  .nav__inner { padding-inline: var(--space-4); gap: var(--space-3); }
  .nav__brand { gap: 10px; }
  .nav__brand svg { width: 30px; }
  .nav__links .btn--outline { padding: 10px 16px; }
}

.gsec .section__title, .gcontact h2 { text-wrap: balance; }

/* ---- Secciones (más compactas que las de la home: acá se lee, no se recorre un cielo) ---- */
.gsec { padding-block: var(--space-20); }
.gsec--top { padding-top: calc(72px + var(--space-16)); }        /* deja lugar a la nav fija */
@media (max-width: 860px) {
  .gsec { padding-block: var(--space-16); }
  .gsec--top { padding-top: calc(64px + var(--space-12)); }
}

/* adorno entre secciones: dos filetes y un rombo */
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--color-oro-600); }
.orn::before, .orn::after {
  content: "";
  height: 1px;
  width: min(140px, 24vw);
  background: linear-gradient(90deg, transparent, rgba(217, 180, 92, 0.5));
}
.orn::after { transform: scaleX(-1); }
.orn span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid currentColor; }

/* ============ /juegos/ — el estudio ============ */
.ghero { max-width: 860px; }
.ghero .kicker { display: block; margin-bottom: var(--space-4); }
.ghero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 6.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-crema-100);
  text-wrap: balance;
}
.ghero__title .oro { color: var(--color-oro-500); }
.ghero__sub { margin-top: var(--space-6); max-width: 54ch; color: var(--color-piedra-400); }

.gamecard {
  display: grid;
  background: var(--color-noche-800);
  border: var(--rule-oro-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}
.gamecard:hover { border-color: rgba(217, 180, 92, 0.36); }
.gamecard__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-noche-950); }
.gamecard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transition: transform 1.2s var(--ease-out); }
.gamecard:hover .gamecard__media img { transform: scale(1.03); }
.gamecard__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--space-6) var(--space-8); }
.gamecard__icon {
  width: 88px;
  height: 88px;
  border-radius: 22%;
  border: 1px solid rgba(217, 180, 92, 0.5);
  background: var(--color-noche-950);
  margin-top: -44px;                     /* el ícono muerde la imagen, como en la tienda */
  margin-bottom: var(--space-5);
}
.gamecard__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.14em;
  color: var(--color-crema-50);
  margin-top: var(--space-3);
}
.gamecard__tag { font-family: var(--font-display); font-weight: 500; color: var(--color-oro-500); letter-spacing: 0.04em; margin-top: var(--space-2); text-wrap: balance; }
.gamecard__desc { color: var(--color-piedra-400); font-size: var(--text-body); margin-top: var(--space-4); max-width: 46ch; }
.gamecard .btn { margin-top: var(--space-8); }
.games { display: grid; gap: var(--space-6); }
/* el segundo juego: imagen a la derecha y sin ícono (todavía no tiene) */
.gamecard--alt .gamecard__body { padding-top: var(--space-8); }
.gamecard__media--neon { background: #07080D; }                     /* el fondo de las arenas de DEADTIME */
.gamecard__title--neon { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.12em; }
.gamecard__tag--neon { font-family: var(--font-sans); font-weight: 400; letter-spacing: 0.02em; color: var(--color-alba-300); }
@media (min-width: 900px) {
  .gamecard { grid-template-columns: 1.3fr 1fr; }
  .gamecard--alt { grid-template-columns: 1fr 1.3fr; }
  .gamecard--alt .gamecard__media { order: 2; min-height: 400px; }
  .gamecard--alt .gamecard__body { padding-top: var(--space-12); }
  .gamecard__media { aspect-ratio: auto; min-height: 460px; }
  .gamecard__body { justify-content: center; padding: var(--space-12); }
  .gamecard__icon { margin-top: 0; }
}

/* estado: un punto alba + texto mono */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-alba-300);
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-alba-300);
  box-shadow: 0 0 0 4px rgba(144, 208, 224, 0.14);
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.chips li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-crema-100);
  border: var(--rule-crema-soft);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.gcontact {
  border: var(--rule-oro-soft);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: radial-gradient(ellipse 80% 110% at 50% 125%, rgba(217, 180, 92, 0.12), transparent 62%);
}
.gcontact h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-crema-50);
}
.gcontact p { color: var(--color-piedra-400); max-width: 52ch; margin: var(--space-4) auto 0; font-size: var(--text-body); }
.gcontact .btn { margin-top: var(--space-6); }
.gcontact__mail { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.06em; }
.gcontact__mail a { color: var(--color-oro-400); }
.gcontact__mail a:hover { color: var(--color-oro-300); }

/* ============ /juegos/anacrono/ — la portada del juego ============ */
.ahero { position: relative; isolation: isolate; }
.ahero__bg { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-noche-950); }
.ahero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; filter: saturate(0.9) contrast(1.04); }
.ahero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 28, 48, 0.5) 0%, rgba(14, 28, 48, 0.05) 28%, rgba(14, 28, 48, 0.2) 60%, var(--color-noche-900) 96%);
}
.ahero__inner { position: relative; padding-bottom: var(--space-12); }
.ahero__icon {
  width: 96px;
  height: 96px;
  border-radius: 22%;
  border: 1px solid rgba(217, 180, 92, 0.55);
  background: var(--color-noche-950);
  margin-top: -56px;
  margin-bottom: var(--space-5);
}
.ahero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 11vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: 0.1em;
  color: var(--color-crema-50);
  margin-top: var(--space-4);
}
.ahero__tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  letter-spacing: 0.05em;
  color: var(--color-oro-400);
  margin-top: var(--space-3);
  text-wrap: balance;
}
.ahero__lead { margin-top: var(--space-5); max-width: 40ch; color: var(--color-crema-100); }
.ahero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.ahero__soon {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-piedra-400);
}
@media (max-width: 759px) {
  .ahero { padding-top: 60px; }                                     /* la nav fija tapa el borde de arriba */
  .ahero__ctas .btn { flex: 1 1 100%; }                             /* al alcance del pulgar */
}
@media (min-width: 760px) {
  .ahero { display: flex; align-items: flex-end; min-height: min(92svh, 960px); padding-top: 120px; }
  .ahero__bg { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .ahero__bg::after {                     /* arriba el fundido al canvas (sin corte), abajo la sombra para el texto */
    background:
      linear-gradient(180deg, rgba(14, 28, 48, 0.45) 0%, rgba(14, 28, 48, 0) 28%, rgba(14, 28, 48, 0.25) 66%, var(--color-noche-900) 95%),
      linear-gradient(90deg, rgba(8, 19, 32, 0.86) 0%, rgba(8, 19, 32, 0.5) 42%, rgba(8, 19, 32, 0.04) 75%);
  }
  .ahero__inner { width: 100%; padding-bottom: var(--space-16); }
  .ahero__icon { margin-top: 0; }
}

/* ---- la historia ---- */
.astory { display: grid; gap: var(--space-12); align-items: center; }
.astory .kicker--latin { display: block; margin-bottom: var(--space-3); }
.astory__text p { color: var(--color-piedra-400); margin-top: var(--space-4); max-width: 54ch; }
.astory__text p strong { color: var(--color-crema-100); font-weight: 400; }
.astory__pull {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-crema-50) !important;
  border-left: 2px solid var(--color-oro-500);
  padding-left: var(--space-5);
  margin-block: var(--space-8) !important;
}
.astory__pull span { color: var(--color-oro-400); }
@media (min-width: 900px) { .astory { grid-template-columns: 1fr 1.1fr; gap: var(--space-16); } }

/* ---- láminas: grabados enmarcados con su número ---- */
.plate { margin: 0; }
.plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-img);
  border: 1px solid rgba(217, 180, 92, 0.28);
  background: var(--color-noche-950);
}
.plate figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  color: var(--color-crema-100);
}
.plate figcaption span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oro-500);
  white-space: nowrap;
}

/* en el celular las láminas se pasan con el dedo; en la compu van de a tres */
.plates {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-6);
  margin-inline: calc(var(--space-6) * -1);
  padding: 0 var(--space-6) var(--space-3);
  scrollbar-width: none;
}
.plates::-webkit-scrollbar { display: none; }
.plates li { scroll-snap-align: start; }
@media (min-width: 860px) {
  .plates { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding: 0; }
}
.places {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  color: var(--color-crema-100);
}
.places li { display: flex; align-items: baseline; gap: 8px; }
.places li span { font-family: var(--font-mono); font-size: 11px; color: var(--color-oro-500); letter-spacing: 0.1em; }

/* ---- cómo se juega ---- */
.afeat { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }
.afeat .card { padding: var(--space-6); }

/* ---- ficha ---- */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  column-gap: var(--space-8);
  border-top: var(--rule-crema-soft);
}
.spec > div { display: grid; gap: 4px; padding-block: var(--space-4); border-bottom: var(--rule-crema-soft); }
.spec dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-piedra-400);
}
.spec dd { color: var(--color-crema-100); font-size: var(--text-body); }
.spec dd a { color: var(--color-oro-400); text-decoration: underline; text-underline-offset: 3px; }

/* ---- testers ---- */
.testers {
  max-width: 780px;
  margin-inline: auto;
  border: var(--rule-oro);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-6);
  background: radial-gradient(ellipse 90% 80% at 50% 120%, rgba(217, 180, 92, 0.12), transparent 60%), var(--color-noche-800);
}
@media (min-width: 760px) { .testers { padding: var(--space-16) var(--space-12); } }
.testers .kicker { display: block; margin-bottom: var(--space-3); }
.steps { list-style: none; counter-reset: paso; display: grid; gap: var(--space-5); margin-block: var(--space-8); }
.steps li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  align-items: start;
  color: var(--color-piedra-400);
  font-size: var(--text-body);
}
.steps li::before {
  content: counter(paso, upper-roman);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--rule-oro);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-oro-500);
}
.steps strong { color: var(--color-crema-50); font-weight: 600; }
.steps a { color: var(--color-oro-400); }
.testers__note { margin-top: var(--space-4); font-size: var(--text-caption); color: var(--color-piedra-400); }
@media (max-width: 759px) { .testers .btn--primary { width: 100%; } }

/* ============ páginas legales ============ */
.legal { max-width: 68ch; margin-inline: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.08em; color: var(--color-piedra-400); margin-bottom: var(--space-8); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--color-oro-600); }
.legal .crumbs a { color: inherit; text-decoration: none; }
.legal .crumbs a:hover { color: var(--color-oro-300); }
.legal h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-crema-50);
  text-wrap: balance;
}
.legal__date { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.08em; color: var(--color-piedra-400); }
.legal__tldr {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border: var(--rule-oro);
  border-radius: var(--radius-card);
  background: rgba(217, 180, 92, 0.06);
  color: var(--color-crema-50);
}
.legal h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-heading-sm);
  color: var(--color-crema-50);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--rule-crema-soft);
}
.legal p, .legal li { color: var(--color-crema-100); margin-top: var(--space-3); }
.legal ul { padding-left: 1.25em; }
.legal li::marker { color: var(--color-oro-500); }
.legal a { color: var(--color-oro-400); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--color-oro-300); }
.legal .legal__fine { font-size: var(--text-caption); color: var(--color-piedra-400); line-height: 1.6; }