/* ===== TOKENS (idénticos a los de index.html y contenidoconia/index.html) ===== */
:root {
  color-scheme: dark;
  --color-bg: #000000;
  --color-text: #F2EEE6;
  --color-muted: #A9B0BD;
  --color-accent: #D4AF37;
  --color-accent-text: #000000;
  --color-border: rgba(255, 255, 255, .09);
  --color-gold-line: rgba(212, 175, 55, .38);
  --metal-gold: linear-gradient(135deg, #A8832A 0%, #E6C45E 28%, #FFF0B3 46%, #D4AF37 62%, #A8832A 100%);
  --metal-edge: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 40%, rgba(212,175,55,.35) 100%);
  --sheen: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
  --font-body: "Times New Roman", Tinos, Times, serif;
  --font-heading: var(--font-body);
  --font-small: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem;
  --max-width: 860px;
  --header-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font: 400 1.08rem/1.7 var(--font-body); color: var(--color-text); background: var(--color-bg);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-accent); color: #000; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); }
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(0,0,0,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); max-width: 1120px; margin-inline: auto; padding-inline: var(--space-3); }
.logo { font: 700 1.35rem/1 var(--font-heading); text-decoration: none; letter-spacing: .08em; color: var(--color-text); }
.metal-silver { background: linear-gradient(180deg, #FFFFFF 0%, #E4E7EC 45%, #B9C0CB 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metal-gold { background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-home { font: 600 .85rem/1 var(--font-small); text-decoration: none; color: var(--color-text); border: 1px solid var(--color-gold-line); border-radius: 999px; padding: .55rem 1rem; transition: color .2s, border-color .2s; }
.btn-home:hover { color: var(--color-accent); border-color: var(--color-accent); }
main { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .3rem; }
.updated { font: 400 .85rem/1.4 var(--font-small); color: var(--color-muted); margin: 0 0 var(--space-4); }
h2 { font-size: 1.3rem; margin: var(--space-4) 0 .6rem; padding-top: .2rem; border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
h2:first-of-type { border-top: 0; padding-top: 0; }
p, li { color: var(--color-text); }
.muted { color: var(--color-muted); }
ul { padding-left: 1.3rem; }
a { color: var(--color-accent); }
mark { background: rgba(212,175,55,.16); color: var(--color-accent); padding: .05rem .3rem; border-radius: 4px; font-style: normal; }
.notice { margin-top: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-gold-line); border-radius: 12px; font: 400 .85rem/1.5 var(--font-small); color: var(--color-muted); }
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-3); }
.footer-inner { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; font: 400 .85rem/1 var(--font-small); color: var(--color-muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer a { color: var(--color-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }