/*
 * La web de Ironhold Games: una hoja para todas las páginas.
 * Hierro y fragua: grafito con un punto de azul acero, texto casi blanco y un
 * solo color de acento, el rojo de hierro al fuego. Sin fuentes de fuera
 * (nada que avise a terceros de quién entra): las del sistema, en mayúsculas
 * y gruesas para los títulos.
 */
:root {
  --fondo: #0c0e11;
  --placa: #14171c;
  --linea: #262b33;
  --tinta: #eceef1;
  --suave: #949ba6;
  --fragua: #e5432d;
  --fragua-oscura: #b8301e;
  --pocket: #f07818;
  --kore: #f0c419;
  --sweep: #ffb224;
  --titulo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.6 var(--texto);
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fragua); outline-offset: 3px; }
img, svg { max-width: 100%; }

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Barra de arriba */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(12, 14, 17, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra .envoltura { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca svg { width: 28px; height: 28px; flex: none; }
.marca span { font: 900 17px/1 var(--titulo); letter-spacing: 0.08em; text-transform: uppercase; }
.marca small { font-weight: 600; color: var(--suave); letter-spacing: 0.18em; margin-left: 4px; font-size: 11px; }
.barra nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.barra nav a {
  text-decoration: none;
  font: 700 13px/1 var(--titulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--suave);
}
.barra nav a:hover { color: var(--tinta); }
/* El idioma: un desplegable sin JavaScript (<details>). */
.idiomas { position: relative; }
.idiomas summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--linea);
  padding: 6px 8px;
  font: 700 13px/1 var(--titulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--suave);
}
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary::after { content: " ▾"; }
.idiomas[open] summary, .idiomas summary:hover { color: var(--tinta); }
.idiomas ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  min-width: 150px;
  background: var(--placa);
  border: 1px solid var(--linea);
}
.barra nav .idiomas a { display: block; padding: 9px 14px; letter-spacing: 0.06em; text-transform: none; font-size: 15px; }
.barra nav .idiomas a:hover { background: var(--fondo); }
@media (max-width: 560px) {
  .barra nav .seccion { display: none; }
}

/* Portada */
.portada {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
  background:
    linear-gradient(180deg, rgba(229, 67, 45, 0.10), rgba(12, 14, 17, 0) 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px),
    var(--fondo);
}
.portada .envoltura { position: relative; padding-block: 72px 64px; }
.portada .torre {
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: min(420px, 70vw);
  height: auto;
  opacity: 0.07;
  pointer-events: none;
}
.antetitulo {
  margin: 0 0 14px;
  font: 800 12px/1 var(--titulo);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fragua);
}
.portada h1 {
  margin: 0;
  font: 900 clamp(44px, 11vw, 112px)/0.92 var(--titulo);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.portada h1 span { display: block; color: var(--suave); -webkit-text-stroke: 0; }
.portada .lema {
  margin: 24px 0 0;
  max-width: 30em;
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--tinta);
}
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  font: 800 14px/1 var(--titulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--fragua);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background 0.15s;
}
.boton:hover { background: var(--fragua-oscura); }
.boton.hueco { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); clip-path: none; }
.boton.hueco:hover { box-shadow: inset 0 0 0 1px var(--suave); }

/* Secciones */
.seccion-pagina { padding-block: 72px; border-bottom: 1px solid var(--linea); }
.seccion-pagina h2 {
  margin: 0 0 28px;
  font: 900 clamp(30px, 5vw, 44px)/1 var(--titulo);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Juegos */
.juegos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.juego {
  display: flex;
  flex-direction: column;
  background: var(--placa);
  border: 1px solid var(--linea);
  min-width: 0;
}
.juego .arte {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--color), #0c0e11 120%);
}
.juego .arte.pocket {
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 220, 120, 0.22), transparent 55%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, #5fb83a, #2c6e2a);
}
.juego .arte.pocket .emblema, .juego .arte.sweep .emblema { border-radius: 22%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.juego .arte.kore {
  background:
    radial-gradient(circle at 78% 50%, rgba(240, 196, 25, 0.22), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 10px),
    #191a1f;
}
.juego .arte.kore b { color: #f0c419; letter-spacing: 0.32em; }
.juego .arte .emblema { position: absolute; right: 8%; top: 50%; width: 34%; height: auto; max-width: 128px; transform: translateY(-50%); }
.juego .arte.sweep {
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 178, 36, 0.18), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 10px),
    #0c1117;
}

.juego .arte b {
  font: 900 clamp(30px, 4vw, 40px)/0.95 var(--titulo);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.estado {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 8px;
  font: 800 11px/1 var(--titulo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(12, 14, 17, 0.82);
  color: var(--tinta);
}
.estado.vivo::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: #51cf66; border-radius: 50%; vertical-align: 1px; }
.juego .cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 22px; flex: 1; }
.juego h3 { margin: 0; font: 900 22px/1.1 var(--titulo); text-transform: uppercase; }
.juego p { margin: 0; color: var(--suave); }
.juego .donde { font: 700 12px/1.3 var(--titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
.juego .pie { margin-top: auto; padding-top: 8px; }
.pronto { display: inline-block; font: 800 14px/46px var(--titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }

/* Estudio y contacto */
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px 64px; }
.dos > * { min-width: 0; }
.textos { display: flex; flex-direction: column; gap: 18px; }
.mision { margin: 0; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.55; max-width: 34em; }
.correo {
  display: inline-block;
  margin-top: 4px;
  font: 800 clamp(20px, 3.4vw, 30px)/1.2 var(--titulo);
  overflow-wrap: anywhere;
  text-decoration: none;
  border-bottom: 3px solid var(--fragua);
}
.nota { color: var(--suave); font-size: 15px; }

/* Pie */
.pie-pagina { padding-block: 36px 48px; color: var(--suave); font-size: 14px; }
.pie-pagina .envoltura { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.pie-pagina nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.pie-pagina a { text-decoration: none; }
.pie-pagina a:hover { color: var(--tinta); }

/* Páginas de texto (privacidad) */
.legal { padding-block: 56px 72px; }
.legal .envoltura > * { max-width: 720px; }
.legal h1 {
  margin: 0 0 8px;
  font: 900 clamp(36px, 7vw, 60px)/1 var(--titulo);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.legal .fecha { margin: 0 0 32px; color: var(--suave); font-size: 15px; }
.legal h2 {
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font: 900 21px/1.2 var(--titulo);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.legal h3 { margin: 26px 0 8px; font: 800 17px/1.3 var(--titulo); }
.legal p, .legal li { color: #d5d9de; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal .indice { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; font-size: 15px; }
.legal .indice a { color: var(--suave); }
.legal .indice li + li { margin-top: 0; }
.tabla { overflow-x: auto; }
.tabla table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.tabla th { font: 800 12px/1.3 var(--titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }

/* Lo que falta por rellenar: se ve a la legua y no se publica así. */
.falta { background: #f6d77a; color: #1b1b1b; padding: 0 5px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}