/* LAS PÁGINAS LEGALES (public/legal/): el aviso legal, la privacidad y los términos, en español y en inglés. Son
   páginas sueltas, sin el juego ni su CSS, para que se lean sin jugar (y las abra un buscador). Calcan la chapa de los
   paneles del juego (src/estilo.css, «los paneles»): fondo oscuro, la letra de rótulos para los títulos, rayas finas en
   vez de cajas y el naranja del corredor de acento. Aquí sí se selecciona y se desliza: es un texto para leer. */
@font-face {
  font-family: 'Rebufo';
  src: url('../fuentes/rebufo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --rotulo: 'Rebufo', system-ui, 'Segoe UI', Roboto, sans-serif;
  --fondo: #0c0f14;
  --chapa: #14110e;
  --chapa-alta: #221c17;
  --tinta: #f3f5f8;
  --tinta-2: rgb(243 245 248 / 0.78);
  --tinta-3: rgb(243 245 248 / 0.58);
  --raya: rgb(255 255 255 / 0.12);
  --acento: #ff7a1a;
  --acento-claro: #ffb36b;
  --chaflan: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--fondo); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.6 system-ui, 'Segoe UI', Roboto, sans-serif;
}
::selection { background: var(--acento); color: #1c0d02; }

.cabecera {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: var(--chapa);
  border-bottom: 1px solid var(--raya);
}
.cabecera .marca { display: block; height: 40px; }
.cabecera .marca img { display: block; height: 100%; width: auto; }
.cabecera nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* las teclas de la cabecera: la chapa de las secundarias del juego, con la esquina cortada */
.tecla {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  background: var(--chapa-alta);
  clip-path: var(--chaflan);
  color: var(--tinta);
  font: 700 13px/1 var(--rotulo);
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.tecla:hover { background: color-mix(in oklab, var(--chapa-alta) 86%, #fff); }
.tecla:focus-visible, a:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px max(16px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

h1, h2, h3 { font-family: var(--rotulo); font-weight: 900; line-height: 1.15; letter-spacing: 0.04em; }
/* el título de la página, con la barra sesgada del color del bando encima, como el nombre de la tarjeta del menú */
h1 { position: relative; margin: 18px 0 6px; font-size: clamp(28px, 6vw, 40px); text-transform: uppercase; }
h1::before { content: ''; position: absolute; left: 0.06em; bottom: calc(100% + 0.18em); width: 1.5em; height: 0.12em; background: var(--acento); transform: skewX(-9deg); transform-origin: 0 100%; }
h2 { margin: 36px 0 10px; padding-top: 16px; border-top: 1px solid var(--raya); font-size: 21px; }
h3 { margin: 22px 0 6px; font-size: 16px; color: var(--tinta-2); }

.fecha { margin: 0 0 18px; color: var(--tinta-3); font-size: 14px; }
.resumen { margin: 18px 0; padding: 14px 16px; background: var(--chapa); border-left: 3px solid var(--acento); color: var(--tinta-2); }
.resumen p { margin: 0; }
.resumen p + p { margin-top: 8px; }

p, li { color: var(--tinta-2); }
p { margin: 10px 0; }
ul { margin: 10px 0; padding-left: 22px; }
li + li { margin-top: 6px; }
strong { color: var(--tinta); }
a { color: var(--acento-claro); text-underline-offset: 2px; }
code { padding: 1px 5px; background: var(--chapa-alta); border-radius: 3px; font-size: 0.9em; overflow-wrap: anywhere; }

/* las tablas: filas con raya encima, sin cajas; en un móvil estrecho se deslizan de lado dentro de su hueco */
.tabla { margin: 14px 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 9px 12px 9px 0; border-top: 1px solid var(--raya); text-align: left; vertical-align: top; color: var(--tinta-2); }
th { color: var(--tinta); font-weight: 600; }
thead th { border-top: 0; font-size: 13px; letter-spacing: 0.04em; color: var(--tinta-3); text-transform: uppercase; }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0 18px; margin: 14px 0; }
dl.datos dt, dl.datos dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--raya); }
dl.datos dt { color: var(--tinta); font-weight: 600; }
dl.datos dd { color: var(--tinta-2); overflow-wrap: anywhere; }

.pie { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--raya); font-size: 14px; color: var(--tinta-3); }
.pie a { margin-right: 14px; }

@media (max-width: 520px) {
  .cabecera .marca { height: 32px; }
  .tecla { min-height: 36px; padding: 0 11px; font-size: 12px; }
  dl.datos { grid-template-columns: 1fr; }
  dl.datos dd { padding-top: 0; border-top: 0; }
}