:root {
  --paper: #FAFAF6; --surface: #FFFFFF; --ink: #17211D; --ink-2: #444E48; --ink-3: #79837C;
  --rule: #E0E4DC; --accent: #0C6154;
  --sans: 'Onest', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: 16px; line-height: 1.6; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.wrap { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 28px; }
nav { border-bottom: 1px solid var(--rule); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1240px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; letter-spacing: -.01em; }
.marca b { font-weight: 700; } .marca span { font-weight: 400; color: var(--ink-3); }
nav a.volver { font-size: 14px; color: var(--ink-2); }
main { padding: 56px 0 96px; }
.kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
h1 { font-size: clamp(32px, 4.5vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 12px 0 8px; }
.act { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 40px; }
h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 40px 0 10px; }
p, li { color: var(--ink-2); }
p { margin: 0 0 14px; }
ul { padding-left: 20px; margin: 0 0 14px; }
li { margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); font-weight: 500; }
td code { font-family: var(--mono); font-size: 13px; }
.pend { background: #FBF0DC; color: #A8700B; padding: 0 4px; font-family: var(--mono); font-size: 13px; }
footer { border-top: 1px solid var(--rule); padding: 22px 0; font-size: 13px; color: var(--ink-3); }
footer .wrap { max-width: 1240px; display: flex; gap: 18px; flex-wrap: wrap; }

/* Botones y aviso de cookies (compartidos con el blog; en la portada viven en su propio CSS) */
.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; border: 0; }
.btn.claro { background: var(--paper); color: var(--ink); font-weight: 600; }
.btn.linea.inv { background: transparent; color: var(--paper); border: 1px solid rgba(250,250,246,.35); }
.cookies { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 50; display: none; justify-content: center; }
.cookies.abierto { display: flex; }
.cookies .caja { display: flex; align-items: center; gap: 20px; max-width: 880px; background: var(--ink); color: var(--paper); padding: 16px 18px 16px 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); border: 1px solid rgba(250,250,246,.12); }
.cookies p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(250,250,246,.8); }
.cookies p a { color: var(--paper); text-decoration: underline; }
.cookies .acc { display: flex; gap: 8px; flex-shrink: 0; }
.cookies .btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
footer button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
footer button:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .cookies { left: 12px; right: 12px; bottom: 12px; }
  .cookies .caja { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .cookies .acc .btn { flex: 1; }
}