/* =========================================================
   games.cynan.net — Cynan Games
   El negativo del sitio de la empresa: misma tipografía, mismo
   verde, fondo de noche. Aquí mandan las imágenes; el texto
   sólo las acompaña.
   ========================================================= */

:root {
  --noche:        #0C0D0C;
  --noche-alto:   #141615;
  --noche-borde:  #1E2120;
  --papel:        #F4F4F1;
  --papel-70:     rgba(244, 244, 241, .72);
  --papel-50:     rgba(244, 244, 241, .50);
  --verde:        #45D394;
  --verde-alto:   #6FE3B0;
  --verde-tenue:  rgba(69, 211, 148, .12);

  --linea:        rgba(244, 244, 241, .14);
  --linea-fina:   rgba(244, 244, 241, .07);

  --medida:       72rem;
  --canal:        1.5rem;

  --p2: .7rem;
  --p3: 1.4rem;
  --p4: 2.4rem;
  --p5: 4rem;
  --p6: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noche);
  color: var(--papel);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 10vw, 6.5rem);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -.045em;
  line-height: .92;
  text-transform: uppercase;
}

h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
h3 { font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.3; }

p { margin: 0 0 var(--p3); max-width: 58ch; }
p:last-child { margin-bottom: 0; }

.guia {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--papel-70);
  line-height: 1.5;
  max-width: 46ch;
}

.nota { font-size: .875rem; color: var(--papel-50); line-height: 1.55; }

a { color: inherit; }

.enlace {
  color: var(--verde);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
}
.enlace:hover { color: var(--verde-alto); background: var(--verde-tenue); }

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

/* ---------- Estructura ---------- */

.contenido {
  max-width: var(--medida);
  margin: 0 auto;
  padding-inline: var(--canal);
}
@media (min-width: 56rem) { .contenido { padding-inline: 3rem; } }

.seccion { padding-block: var(--p5); border-top: 1px solid var(--linea-fina); }
@media (min-width: 56rem) { .seccion { padding-block: var(--p6); } }

.titulo-seccion {
  margin: 0 0 var(--p3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel-50);
}

/* ---------- Barra ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(12, 13, 12, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea-fina);
}

.barra .contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p3);
  padding-block: .9rem;
}

.marca {
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -.03em;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
}
.marca span { color: var(--verde); }

.barra nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }

/* En pantallas angostas la barra se aprieta en vez de partirse en dos. */
@media (max-width: 34rem) {
  .barra .contenido { gap: .75rem; padding-inline: 1rem; }
  .barra nav { gap: .9rem; flex-wrap: nowrap; }
  .barra nav a { font-size: .8125rem; white-space: nowrap; }
  /* El enlace a cynan.net sigue en el pie y en el cierre. */
  .barra nav .solo-ancho { display: none; }
}
.barra nav a {
  text-decoration: none;
  font-size: .9375rem;
  color: var(--papel-70);
  padding-block: .2rem;
}
.barra nav a:hover, .barra nav a[aria-current="page"] { color: var(--papel); }

/* ---------- Portada ---------- */

.portada {
  position: relative;
  border-bottom: 1px solid var(--linea-fina);
}

.portada .lienzo { position: relative; }

/* La imagen real se recorta al mismo marco que el hueco, no se deforma. */
.portada .lienzo img,
.portada .lienzo video {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 47.99rem) {
  .portada .lienzo img,
  .portada .lienzo video { aspect-ratio: 4 / 3; }
}

/* Lo mismo en la galería: capturas de distinta medida entran parejas. */
.galeria img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Degradado que funde la imagen con el fondo para que el texto se lea
   aunque la captura sea clara. */
.portada .lienzo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--noche) 2%,
    rgba(12, 13, 12, .78) 38%,
    rgba(12, 13, 12, .20) 72%,
    rgba(12, 13, 12, .35) 100%);
  pointer-events: none;
}

.portada .texto {
  position: relative;
  margin-top: -14rem;
  padding-bottom: var(--p5);
}
@media (max-width: 55.99rem) {
  .portada .texto { margin-top: -3.5rem; }
}

.sello {
  display: inline-block;
  margin-bottom: var(--p3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
}

.portada h1 { margin-bottom: var(--p3); }
.portada .guia { margin-bottom: var(--p4); }

/* ---------- Acciones ---------- */

.acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  background: var(--verde);
  color: #08120D;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid var(--verde);
}
.boton:hover { background: var(--verde-alto); border-color: var(--verde-alto); }

.boton-hueco {
  background: transparent;
  color: var(--papel);
  border-color: var(--linea);
}
.boton-hueco:hover { background: rgba(244, 244, 241, .06); border-color: var(--papel-50); }

/* Botón todavía sin destino: se ve, no engaña. */
.boton-pendiente {
  background: transparent;
  color: var(--papel-50);
  border-color: var(--linea-fina);
  border-style: dashed;
  cursor: default;
  font-weight: 600;
}

.boton svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- Galería ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p2);
}
@media (max-width: 47.99rem) { .galeria { grid-template-columns: 1fr; } }

.galeria .ancha { grid-column: 1 / -1; }

.galeria figure { margin: 0; }

.galeria figcaption {
  margin-top: .55rem;
  font-size: .8125rem;
  color: var(--papel-50);
}

/* ---------- Hueco de imagen (se borra al poner las reales) ---------- */

.hueco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  background:
    repeating-linear-gradient(135deg,
      var(--noche-alto) 0 14px,
      #171A19 14px 28px);
  border: 1px dashed var(--linea);
  color: var(--papel-50);
  text-align: center;
  padding: var(--p3);
}
.hueco b {
  color: var(--papel-70);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.hueco span { font-size: .75rem; }

.r-16-9 { aspect-ratio: 16 / 9; }
.r-21-9 { aspect-ratio: 21 / 9; }
.r-1-1  { aspect-ratio: 1 / 1; }

/* En vertical, una portada 21:9 queda como una rendija: se le da altura
   para que la imagen tenga dónde respirar debajo del título. */
@media (max-width: 47.99rem) { .r-21-9 { aspect-ratio: 4 / 3; } }

/* ---------- Ficha ---------- */

.ficha { margin: 0; border-top: 1px solid var(--linea-fina); }

.ficha .renglon {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--canal);
  padding-block: .95rem;
  border-bottom: 1px solid var(--linea-fina);
}
@media (max-width: 40rem) {
  .ficha .renglon { grid-template-columns: 1fr; gap: .15rem; }
}

.ficha dt {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel-50);
  padding-top: .2rem;
}
.ficha dd { margin: 0; }

.estado {
  display: inline-block;
  padding: .12rem .5rem;
  border: 1px solid var(--verde);
  color: var(--verde);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Cierre ---------- */

.cierre {
  background: var(--noche-alto);
  border-top: 1px solid var(--linea-fina);
  text-align: center;
}
.cierre .contenido { padding-block: var(--p6); }
.cierre h2 { margin-bottom: var(--p3); }
.cierre .guia { margin-inline: auto; }
.cierre .acciones { justify-content: center; margin-top: var(--p4); }

/* ---------- Pie ---------- */

.pie {
  border-top: 1px solid var(--linea-fina);
  padding-block: var(--p4);
  font-size: .9375rem;
}
.pie .contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p3);
}
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie-enlaces a { color: var(--papel-70); text-decoration: none; }
.pie-enlaces a:hover { color: var(--papel); }