/* Las guías. Mismos tokens y mismas tipografías que la landing, en un archivo
   aparte y no repetidos en cada página: son cuatro y el día que cambie el
   acento no se puede depender de acordarse de las cuatro.
   Se sirve desde el mismo dominio, que es lo que la CSP permite (`style-src
   'self'`). Las fuentes se piden por su ruta absoluta porque estas páginas
   viven en /guia/<slug>/ y una ruta relativa las buscaría ahí dentro. */

@font-face {
  font-family: 'League Spartan'; font-style: normal; font-weight: 700 900;
  font-display: swap; src: url('/landing/assets/fuentes/league-spartan-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/landing/assets/fuentes/poppins-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/landing/assets/fuentes/poppins-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/landing/assets/fuentes/poppins-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/landing/assets/fuentes/poppins-700-latin.woff2') format('woff2');
}

:root {
  --bg: #0D1117;
  --bg-2: #0A0E14;
  --surface: #1A1F26;
  --line: #2B313A;
  --ink: #FFFFFF;
  --soft: #E9ECEF;
  --muted: #8A939E;
  --lime: #A8E600;
  --lime-dark: #B8F51A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--lime); }

.guia-nav { border-bottom: 1px solid var(--line); }
.guia-nav-inner {
  max-width: 780px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 12px;
}
.guia-nav a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; }
.guia-nav a:hover { color: var(--lime); }
.marca-txt {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-weight: 900; font-size: 19px; text-transform: uppercase; letter-spacing: -0.005em;
}
.marca-txt i { font-style: normal; color: var(--lime); }
.guia-volver { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.guia { max-width: 780px; margin: 0 auto; padding: 56px 24px 40px; }
.guia-quien {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 14px;
}
.guia h1 {
  font-size: clamp(29px, 5vw, 44px); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.13; text-wrap: balance;
}
/* `.guia .guia-entrada` y no `.guia-entrada` a secas: la regla de abajo
   (`.guia p`) tiene un tipo más y le ganaba en especificidad, así que el
   `margin-top` no se aplicaba nunca y la entradilla salía pegada al título. */
.guia .guia-entrada { margin-top: 20px; font-size: 17.5px; color: var(--soft); }
.guia h2 {
  font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.25; margin: 44px 0 14px; text-wrap: balance;
}
.guia p { margin: 0 0 16px; color: var(--muted); font-size: 16px; max-width: 66ch; }
.guia p b, .guia li b { color: var(--ink); font-weight: 600; }
.guia ul, .guia ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.guia li { color: var(--muted); font-size: 16px; max-width: 64ch; }

/* La cuenta que hace ver el problema: números, no adjetivos. */
.cuenta {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lime);
  border-radius: 12px; padding: 20px 22px; margin: 26px 0;
}
.cuenta h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 12px; }
.cuenta-filas { display: grid; gap: 7px; }
.cuenta-fila {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 15px; color: var(--muted);
}
.cuenta-fila b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cuenta-total { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 10px; }
.cuenta-total b { color: var(--lime); }

.guia-cierre {
  margin: 48px 0 0; padding: 28px 24px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
}
.guia-cierre h2 { margin: 0 0 10px; }
.guia-cierre p { margin: 0 auto 20px; max-width: 52ch; }
.btn-lime {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 10px; border: none;
  background: var(--lime); color: #0D1117; text-decoration: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.btn-lime:hover { background: var(--lime-dark); color: #0D1117; }
.guia-cierre small { display: block; margin-top: 14px; font-size: 12.5px; color: var(--muted); }

.otras { max-width: 780px; margin: 40px auto 0; padding: 0 24px 64px; }
.otras h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.otras-lista { display: grid; gap: 12px; }
.otras-lista a {
  display: block; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit;
}
.otras-lista a:hover { border-color: var(--lime); color: inherit; }
.otras-lista b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.otras-lista span { font-size: 13.5px; color: var(--muted); }

.guia-pie {
  border-top: 1px solid var(--line); padding: 22px 24px;
  text-align: center; font-size: 12.5px; color: var(--muted);
}
.guia-pie a { color: var(--muted); }
.guia-pie a:hover { color: var(--lime); }

@media (max-width: 560px) {
  .guia { padding-top: 36px; }
  .guia-cierre { padding: 24px 18px; }
}