/*
 * styles/pagina.css — La pagina «Cómo se juega al Cinco y Caballo» (DEC-098).
 *
 * Una pagina de texto, para leer y para los buscadores: la madera y las letras
 * del juego, un cartel claro y nada mas. No depende de las hojas del juego.
 */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('../assets/fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya SC'; font-weight: 800; font-display: swap; src: url('../assets/fonts/alegreya-sc-800.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --madera: #33261c;
  --papel: #f6f0e3;
  --tinta: #2b2118;
  --suave: #6b5a45;
  --oliva: #5d6b2e;
  --oliva-oscuro: #46521f;
  --linea: rgba(43, 33, 24, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--tinta);
  background: var(--madera) url('../assets/texturas/madera-fondo.svg') 0 0 / 480px 480px;
  font: 400 1.05rem / 1.6 'Barlow', system-ui, sans-serif;
}

a { color: var(--oliva-oscuro); }

.pagina__cabecera {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 8px;
  text-align: center;
  color: #f1e8d6;
}
.pagina__lugar { margin: 0; font: 700 0.75rem 'Barlow Condensed', sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: #c8b99b; }
.pagina__marca { margin: 4px 0 0; font: 800 1.6rem 'Alegreya SC', Georgia, serif; }
.pagina__marca a { color: inherit; text-decoration: none; }

.pagina {
  max-width: 760px;
  margin: 12px auto 0;
  padding: 24px 22px 28px;
  border: 3px solid var(--oliva);
  border-radius: 8px;
  background: var(--papel);
  box-shadow: 0 18px 40px rgba(10, 6, 2, 0.5);
}
@media (max-width: 800px) {
  .pagina { margin: 8px 10px 0; padding: 18px 16px 24px; }
}

h1 { margin: 0 0 12px; font: 800 2rem / 1.15 'Alegreya SC', Georgia, serif; color: var(--oliva-oscuro); }
h2 {
  margin: 0 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font: 800 1.45rem / 1.2 'Alegreya SC', Georgia, serif;
  color: var(--oliva-oscuro);
}
h3 { margin: 16px 0 4px; font: 700 1.1rem 'Barlow Condensed', sans-serif; letter-spacing: 0.02em; }

.pagina__intro { font-size: 1.12rem; }
.pagina__accion { margin: 16px 0; text-align: center; }
.pagina__boton {
  display: inline-block;
  min-width: 220px;
  padding: 12px 24px;
  border-radius: 6px;
  color: #fffaf0;
  background: var(--oliva);
  box-shadow: inset 0 -4px 0 var(--oliva-oscuro), 0 6px 14px rgba(10, 6, 2, 0.3);
  font: 700 1.2rem 'Barlow Condensed', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.pagina__boton:focus-visible { outline: 3px solid var(--oliva-oscuro); outline-offset: 3px; }

.pagina__indice { margin: 8px 0 18px; padding: 12px 16px; border-radius: 6px; background: rgba(93, 107, 46, 0.08); }
.pagina__indice ol { margin: 0; padding-left: 1.3em; columns: 2 220px; }
.pagina__seccion { margin-top: 18px; scroll-margin-top: 12px; }
.pagina__seccion ul, .pagina__seccion ol { padding-left: 1.3em; }
.pagina__seccion li { margin: 4px 0; }

.pagina__orden { padding: 8px 12px; border-radius: 6px; background: rgba(93, 107, 46, 0.1); font-weight: 600; }

.pagina__cartas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12px 0; }
.pagina__carta { margin: 0; text-align: center; }
.pagina__carta img { display: block; width: 96px; height: auto; border-radius: 6px; box-shadow: 0 4px 10px rgba(10, 6, 2, 0.3); }
.pagina__carta[data-gana='true'] img { outline: 3px solid #d9a81e; outline-offset: 2px; }
.pagina__carta figcaption { margin-top: 4px; font: 700 0.9rem 'Barlow Condensed', sans-serif; color: var(--suave); }

.pagina__tabla { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.98rem; }
.pagina__tabla th, .pagina__tabla td { padding: 6px 8px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.pagina__tabla th { font: 700 0.95rem 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--suave); }

.pagina__pie {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  text-align: center;
  font-size: 0.85rem;
  color: #c8b99b;
}
.pagina__pie a { color: #f1e8d6; }