/*
 * Dr.Phé — hoja de estilo única.
 *
 * Un solo archivo, sin preprocesador y sin build: el sitio son cuatro pantallas
 * de scroll y el coste de mantener una cadena de compilación no se paga con
 * nada. Todo el color y la medida salen de las variables de abajo, que son las
 * mismas que usa el juego para que la marca se reconozca al saltar de una cosa
 * a la otra.
 *
 * El sitio se compromete con un solo mundo visual —oscuro, de mesa de juego a
 * media luz— igual que hacen las páginas de estudio que sirvieron de
 * referencia. No hay tema claro: cada color se pinta explícitamente para que la
 * página se sostenga sea cual sea el fondo del navegador.
 */

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Tapete a media luz: el verde del juego, bajado hasta casi negro. */
  --ground: #08120E;
  --surface: #0E1D17;
  --surface-high: #14291F;
  --felt: #123425;

  --gold: #C9A227;
  --gold-soft: #E0C169;
  --gold-dim: rgba(201, 162, 39, 0.22);

  --parchment: #F2EDE3;
  --parchment-dim: #A9B5AE;
  /*
   * El gris más apagado, subido de #6F7D75.
   *
   * Aquel daba 4,03 sobre el fondo de las secciones y 4,41 sobre el general, y
   * el mínimo de la WCAG para texto normal es 4,5. Con este son 4,87 y 5,33, así
   * que las fechas, el selector de idioma y los pies dejan de estar por debajo.
   */
  --parchment-faint: #7C8B83;

  --rule: rgba(201, 162, 39, 0.16);
  --rule-soft: rgba(242, 237, 227, 0.09);

  /* Cinzel para lo que se lee de un vistazo; serif del sistema para lo que se
     lee de verdad, que así no cuesta ni un byte de descarga. */
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
    Georgia, serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--gold-soft);
  text-underline-offset: 0.2em;
}

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

img {
  max-width: 100%;
}

/* Salta directamente al contenido con el teclado. */
/*
 * Enlace de salto: invisible hasta que el tabulador llega a él.
 *
 * Se esconde encogiéndolo a un píxel y recortándolo, no mandándolo a
 * `left: -9999px`. Con lo segundo, en las páginas de derecha a izquierda el
 * navegador cuenta esos 9999 px como ancho de página: la árabe se abría
 * desplazada sobre once mil píxeles de vacío y parecía una página en blanco.
 */
.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--gold);
  color: #14201A;
  font-family: var(--ui);
  z-index: 100;
}

.skip:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  overflow: visible;
  clip-path: none;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
}

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

.top {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1rem var(--gutter);
  background: linear-gradient(to bottom, rgba(8, 18, 14, 0.92), transparent);
  backdrop-filter: blur(6px);
  z-index: 50;
  transition: background 0.3s ease;
}

.top[data-scrolled='true'] {
  background: rgba(8, 18, 14, 0.96);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
}

.brand b {
  color: var(--gold);
  font-weight: 700;
}

/*
 * En pantalla estrecha la navegación pasa a una segunda línea desplazable.
 *
 * Esconderla sin más —lo primero que se hace— dejaba el móvil sin ninguna forma
 * de saltar de sección, y un menú desplegable exige JavaScript para algo que
 * aquí son cinco enlaces cortos. Así están siempre a la vista y a un toque.
 */
.nav {
  display: flex;
  gap: 1.5rem;
  order: 3;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  font-family: var(--ui);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  white-space: nowrap;
}

@media (min-width: 900px) {
  .nav {
    order: 0;
    width: auto;
    overflow: visible;
    gap: 2rem;
    font-size: 0.85rem;
  }
}

.nav a {
  color: var(--parchment-dim);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--parchment);
  border-bottom-color: var(--gold);
}

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

section {
  padding: clamp(5rem, 12vw, 9rem) var(--gutter);
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.eyebrow {
  font-family: var(--ui);
  /* 0,72 rem eran 11,5 px y se leían con esfuerzo; estos son 13,5. */
  font-size: 0.845rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lede {
  max-width: var(--measure);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--parchment-dim);
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: 9rem;
  overflow: hidden;
}

/* Tapete: un resplandor central sobre el verde, como una mesa iluminada. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 90% at 50% 15%,
      rgba(18, 52, 37, 0.85),
      transparent 65%
    ),
    radial-gradient(60% 50% at 80% 90%, rgba(201, 162, 39, 0.09), transparent);
  z-index: -2;
}

.hero-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
  }
}

/*
 * Cinzel es una capital romana: sus mayúsculas ocupan mucho más que las de una
 * grotesca al mismo cuerpo, así que la escala va deliberadamente por debajo de
 * lo que pediría un titular normal. Con el tamaño «de manual» el saludo se
 * comía la pantalla entera y no dejaba ver ni la entradilla.
 */
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  margin-bottom: 1.5rem;
}

.hero h1 span {
  display: block;
  color: var(--gold);
}

.hero .lede {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--parchment-dim);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold-soft);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--gold-dim);
  transform: translateY(-2px);
}

.button--solid {
  background: var(--gold);
  color: #14201A;
}

.button--solid:hover,
.button--solid:focus-visible {
  background: var(--gold-soft);
  color: #14201A;
}

/* ---------- Abanico de cartas ---------- */

/*
 * El emblema de la portada son cartas, no un icono abstracto: es lo que hace
 * este estudio. Van dibujadas con CSS y un SVG minúsculo —nada de imágenes— así
 * que la portada no espera a ninguna descarga para estar completa.
 */
.fan {
  position: relative;
  height: clamp(230px, 32vw, 360px);
  display: grid;
  place-items: center;
}

.card {
  position: absolute;
  width: clamp(96px, 12vw, 148px);
  aspect-ratio: 0.69;
  border-radius: 10px;
  background: linear-gradient(160deg, #FBF8F1, #E6DFD1);
  border: 1px solid rgba(20, 32, 26, 0.35);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 135%;
  display: grid;
  place-items: center;
  animation: deal 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.card svg {
  width: 46%;
  height: 46%;
}

.card:nth-child(1) {
  --angle: -21deg;
  --shift: -104px;
  animation-delay: 0.15s;
}
.card:nth-child(2) {
  --angle: -7deg;
  --shift: -35px;
  animation-delay: 0.28s;
}
.card:nth-child(3) {
  --angle: 7deg;
  --shift: 35px;
  animation-delay: 0.41s;
}
.card:nth-child(4) {
  --angle: 21deg;
  --shift: 104px;
  animation-delay: 0.54s;
}

/*
 * Cada carta se desplaza además de girar. Solo con el giro se amontonaban en el
 * centro y el palo de las tres primeras quedaba tapado por la siguiente: se veía
 * un montón, no una mano abierta.
 */
.card {
  transform: translateX(var(--shift)) rotate(var(--angle));
}

@keyframes deal {
  from {
    opacity: 0;
    transform: translateX(0) rotate(0deg) translateY(60px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(var(--shift)) rotate(var(--angle));
  }
}

/* ---------- Cifras ---------- */

.facts {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin-top: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 760px) {
  .facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fact {
  background: var(--ground);
  padding: 1.75rem;
}

.fact dt {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  margin-bottom: 0.5rem;
}

.fact dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--gold-soft);
}

/* ---------- Qué hacemos ---------- */

.alt {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.columns {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: 3.5rem;
}

@media (min-width: 860px) {
  .columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.column h3 {
  color: var(--parchment);
  margin-bottom: 0.85rem;
}

.column p {
  color: var(--parchment-dim);
  margin: 0;
}

.column::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.5rem;
}

/* ---------- Juegos ---------- */

.games {
  display: grid;
  gap: 2rem;
  margin-top: 3.5rem;
}

@media (min-width: 900px) {
  .games {
    grid-template-columns: 1.4fr 1fr;
  }
}

.game {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  min-height: 420px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(18, 52, 37, 0.95), transparent),
    var(--surface-high);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.game:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.game__tag {
  align-self: flex-start;
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
}

.game h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: none;
  letter-spacing: 0.02em;
}

.game p {
  max-width: 46ch;
  color: var(--parchment-dim);
  margin: 0;
}

.game__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--parchment-faint);
}

/* La ficha en preparación no promete nada que no exista. */
.game--soon {
  background: var(--surface);
  border-style: dashed;
  border-color: var(--rule-soft);
  justify-content: center;
  min-height: 280px;
  text-align: center;
  align-items: center;
}

.game--soon:hover {
  transform: none;
  border-color: var(--rule);
}

/* ---------- Método ---------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule-soft);
}

.step {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 860px) {
  .step {
    grid-template-columns: 4rem 16rem 1fr;
    align-items: baseline;
  }
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--ui);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.step h3 {
  color: var(--parchment);
  font-size: 1rem;
}

.step p {
  margin: 0;
  color: var(--parchment-dim);
}

/* ---------- Contacto ---------- */

.contact {
  text-align: center;
}

.contact .wrap {
  max-width: 720px;
}

.mailto {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.5vw, 2.1rem);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color 0.25s ease;
}

.mailto:hover {
  border-bottom-color: var(--gold);
}

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

footer {
  padding: 3rem var(--gutter) 4rem;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.foot {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ui);
  font-size: 0.8rem;
  color: var(--parchment-faint);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.foot a {
  color: var(--parchment-dim);
  text-decoration: none;
}

.foot a:hover {
  color: var(--gold-soft);
}

/* ---------- Revelado al desplazar ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/*
 * Quien pide menos movimiento no ve ninguno, y sobre todo no se queda sin
 * contenido: sin esto, un revelado que nunca se dispara deja la página en
 * blanco para quien lleva la preferencia activada.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Preguntas frecuentes ---------- */

/*
 * Acordeón con `<details>`: lo abre y lo cierra el navegador, sin una línea de
 * JavaScript, y el contenido está en el HTML desde el principio —los buscadores
 * lo leen aunque esté plegado, que es justo lo que se busca con una sección de
 * preguntas—.
 */
.faq {
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule-soft);
}

.faq details {
  border-bottom: 1px solid var(--rule-soft);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--parchment);
  transition: color 0.2s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-family: var(--ui);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.25s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--gold-soft);
}

.faq p {
  max-width: var(--measure);
  margin: 0 0 1.4rem;
  color: var(--parchment-dim);
}

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

.foot-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 760px) {
  .foot-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 3rem;
  }
}

.foot-brand p {
  max-width: 30ch;
  margin: 1rem 0 0;
  color: var(--parchment-faint);
  font-size: 0.9rem;
}

.foot-col h3 {
  font-size: 0.72rem;
  font-family: var(--ui);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--parchment-faint);
  margin-bottom: 1rem;
}

.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--ui);
  font-size: 0.88rem;
}

/*
 * Los enlaces del pie se pulsan, así que necesitan sitio para el dedo: la WCAG
 * 2.2 pide 24 px de alto y estos medían 17. El relleno vertical los sube sin
 * mover nada de la retícula.
 */
.foot-col a {
  display: inline-block;
  padding-block: 4px;
  color: var(--parchment-dim);
  text-decoration: none;
}

.foot-col a:hover {
  color: var(--gold-soft);
}

/* ---------- Selector de idioma ---------- */

/*
 * Enlaces, no un desplegable: son dos idiomas y cada uno tiene su dirección
 * propia. Un `<select>` con JavaScript escondería del buscador la versión que
 * no está seleccionada, que es lo contrario de lo que se quiere.
 */
/*
 * Selector de idioma.
 *
 * Son diez idiomas, así que no caben en una fila: es un `<details>`, que abre y
 * cierra sin JavaScript y responde al teclado por sí solo. La lista se despliega
 * en capa flotante para no empujar el contenido de la barra.
 */
.langs {
  position: relative;
  font-family: var(--ui);
  font-size: 0.8rem;
}

.langs > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  color: var(--parchment-faint);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* El triángulo que Safari y Chrome ponen por su cuenta. */
.langs > summary::-webkit-details-marker {
  display: none;
}

.langs > summary::after {
  content: '▾';
  margin-inline-start: 0.45rem;
  opacity: 0.7;
}

.langs > summary:hover,
.langs[open] > summary {
  color: var(--parchment);
  border-color: var(--gold-dim);
}

.langs ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  min-width: 10rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
}

/* En el pie el menú se abre hacia arriba: abajo no hay página donde caber. */
footer .langs ul {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

.langs li {
  margin: 0;
}

.langs a {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
  color: var(--parchment-faint);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.langs a:hover {
  color: var(--parchment);
  background: rgb(255 255 255 / 6%);
}

.langs a[aria-current='true'] {
  color: var(--gold);
}

.top .langs {
  margin-inline-start: auto;
}

@media (min-width: 900px) {
  .top .langs {
    margin-inline-start: 0;
  }
}

/* La fecha de última actualización de los documentos legales. */
.doc .updated {
  color: var(--parchment-faint);
  font-family: var(--ui);
  font-size: 0.85rem;
}

/* ---------- Páginas de texto legal ---------- */

.doc {
  padding-top: clamp(8rem, 14vw, 11rem);
}

.doc .wrap {
  max-width: 780px;
}

.doc h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 3rem 0 1rem;
}

.doc h3 {
  font-size: 0.95rem;
  color: var(--parchment);
  margin: 2rem 0 0.5rem;
}

.lede a {
  color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.doc p,
.doc li {
  color: var(--parchment-dim);
}

.doc ul {
  padding-inline-start: 1.2rem;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.5rem 0;
}

.doc th,
.doc td {
  text-align: start;
  vertical-align: top;
  padding-block: 0.7rem;
  padding-inline: 0 1rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--parchment-dim);
}

.doc th {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}

/* Hueco por rellenar antes de publicar: se ve a la legua a propósito. */
.gap {
  background: rgba(201, 162, 39, 0.16);
  border-bottom: 1px solid var(--gold-dim);
  color: var(--gold-soft);
  font-family: var(--ui);
  font-size: 0.85em;
  padding: 0.1em 0.4em;
}

.table-wrap {
  overflow-x: auto;
}

/* ---------- Preferencias de visualización ---------- */

/*
 * Tres ajustes: contraste, cuerpo de letra y movimiento.
 *
 * Se guardan como atributos en la raíz —`data-contraste`, `data-texto`,
 * `data-movimiento`— y todo lo demás sale de ahí, sin tocar una sola regla del
 * resto de la hoja: el tema alto contraste solo redefine las variables, y el
 * tamaño de letra solo mueve la raíz, de la que cuelgan todos los `rem`.
 */

.top__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

@media (min-width: 900px) {
  .top__controls {
    margin-inline-start: 0;
  }
}

.prefs {
  position: relative;
  font-family: var(--ui);
  font-size: 0.8rem;
}

.prefs > summary {
  list-style: none;
  cursor: pointer;
  min-width: 2.25rem;
  padding: 0.3rem 0.6rem;
  text-align: center;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  color: var(--parchment-faint);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.prefs > summary::-webkit-details-marker {
  display: none;
}

.prefs > summary:hover,
.prefs[open] > summary {
  color: var(--parchment);
  border-color: var(--gold-dim);
}

.prefs__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  width: 15rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
}

footer .prefs__panel {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

.prefs__label {
  margin: 0.25rem 0 0;
  color: var(--parchment-faint);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.prefs__row {
  display: flex;
  gap: 0.35rem;
}

.prefs__toggle,
.prefs__size {
  flex: 1;
  min-height: 2.25rem;
  padding: 0.4rem 0.6rem;
  font: inherit;
  color: var(--parchment-dim);
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.prefs__toggle {
  text-align: start;
}

.prefs__toggle:hover,
.prefs__size:hover {
  color: var(--parchment);
  border-color: var(--gold-dim);
}

/* Puesto o no puesto se ve, no solo se anuncia: el oro es el estado activo. */
.prefs__toggle[aria-pressed='true'],
.prefs__size[aria-pressed='true'] {
  color: var(--gold);
  border-color: var(--gold);
  background: rgb(201 162 39 / 12%);
}

/* ---------- Tema de alto contraste ---------- */

:root[data-contraste='alto'] {
  --ground: #000000;
  --surface: #000000;
  --surface-high: #0B0B0B;
  --felt: #000000;

  --gold: #FFD75E;
  --gold-soft: #FFE9A6;
  --gold-dim: rgb(255 215 94 / 60%);

  --parchment: #FFFFFF;
  --parchment-dim: #F4F4F4;
  --parchment-faint: #DCDCDC;

  --rule: rgb(255 215 94 / 70%);
  --rule-soft: rgb(255 255 255 / 45%);
}

/*
 * Lo que no sale de las variables hay que apagarlo a mano: la barra superior y
 * las secciones llevan degradados y velos escritos en su regla, y en alto
 * contraste un degradado es exactamente lo que no se quiere.
 */
:root[data-contraste='alto'] .top {
  background: #000000;
  backdrop-filter: none;
}

/* El velo verde de la portada vive en un pseudoelemento, no en la sección. */
:root[data-contraste='alto'] .hero,
:root[data-contraste='alto'] .hero::before,
:root[data-contraste='alto'] .hero::after,
:root[data-contraste='alto'] .alt,
:root[data-contraste='alto'] section,
:root[data-contraste='alto'] section::before,
:root[data-contraste='alto'] section::after {
  background-image: none;
}

:root[data-contraste='alto'] .button--solid {
  color: #000000;
  background: var(--gold);
}

:root[data-contraste='alto'] .card {
  background: #FFFFFF;
  border-color: #000000;
}

/* ---------- Cuerpo de letra ---------- */

:root[data-texto='125'] {
  font-size: 125%;
}

:root[data-texto='150'] {
  font-size: 150%;
}

/* ---------- Movimiento ---------- */

/*
 * El interruptor tiene que ganarle a cualquier animación declarada más abajo,
 * venga de donde venga; por eso el `!important`, que aquí no es un atajo sino la
 * forma correcta de un ajuste que anula.
 */
:root[data-movimiento='reducido'] *,
:root[data-movimiento='reducido'] *::before,
:root[data-movimiento='reducido'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

:root[data-movimiento='reducido'] [data-reveal] {
  opacity: 1;
  transform: none;
}