/* Haz que pase — hoja compartida por las páginas internas (gracias, aviso). Mismos tokens que index.html. */
:root {
  color-scheme: dark;
  --bg: #0c0b0b; --paper: #f3f1ed; --ink: #101010; --white: #f5f3ef;
  --soft: #aaa59d; --line: #2b2928; --red: #B4181E; --red-hot: #E5363D;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
body {
  background: var(--bg) url(assets/textura-fondo-oscuro.jpg) center / cover fixed;
  color: var(--white); font-family: var(--body); font-size: 18px; line-height: 1.6; margin: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 820px; margin: 0 auto; }
a { color: var(--red-hot); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--red-hot); outline-offset: 3px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 18px; }
.top .mark { font-family: var(--display); font-size: 22px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; color: var(--white); }
.top .mark b { color: var(--red-hot); font-weight: 400; }
.top .back { font-family: var(--label); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--soft); }
.top .back:hover { color: var(--red-hot); }
.sheet { background: var(--paper); color: var(--ink); padding: clamp(28px, 5vw, 56px); margin-block: 20px 56px; }
.sheet h1 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6vw, 56px); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 6px; }
.sheet h1 em { font-style: normal; color: var(--red); }
.sheet h2 { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 3vw, 26px); text-transform: uppercase; letter-spacing: .02em; margin: 34px 0 10px; }
.sheet p, .sheet li { color: #3a3833; }
.sheet .tag { font-family: var(--label); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: #6b6760; display: block; margin-bottom: 14px; }
.sheet ul { padding-left: 20px; }
.sheet li { margin-bottom: 7px; }
.rule { border: 0; border-top: 4px solid var(--red); width: 76px; margin: 22px 0 0; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--label); font-weight: 600; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; background: var(--ink); color: var(--white); border: 2px solid var(--ink); padding: 14px 26px; margin-top: 10px; }
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
footer { border-top: 1px solid var(--line); padding-block: 24px 40px; font-family: var(--label); font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }