:root{
  --ink:#181614; --paper:#F7F5F0; --paper-2:#EDEAE2;
  --hazard:#E8590C; --steel:#33495C; --line:#D8D3C7;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  line-height:1.55; font-size:17px;
}
h1,h2,h3{font-family:"Oswald",system-ui,sans-serif; font-weight:600; letter-spacing:.2px; margin:0 0 .4em}
a{color:var(--steel)}
a:focus-visible,button:focus-visible{outline:3px solid var(--hazard); outline-offset:2px}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.prose{max-width:var(--maxw)}

/* header */
header.site{background:var(--ink); color:var(--paper); border-bottom:6px solid var(--hazard)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px}
header.site .logo{font-family:"Oswald",sans-serif; font-size:1.3rem; color:#fff; text-decoration:none; letter-spacing:.3px; display:flex; align-items:center; gap:10px}
header.site .logo-mark{flex:none}
header.site nav a{color:var(--paper); text-decoration:none; margin-left:22px; font-size:.95rem}
header.site nav a:hover{color:var(--hazard)}

/* hero */
.hero{background:var(--ink); color:var(--paper); padding:64px 0 72px; position:relative; overflow:hidden}
.hero::after{content:"";position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  background:repeating-linear-gradient(45deg,var(--hazard) 0 18px, transparent 18px 36px); opacity:.18; border-radius:50%}
.hero h1{font-size:clamp(2rem,5vw,3.1rem); max-width:14ch; color:#fff}
.hero p{max-width:52ch; color:#D9D5CB; font-size:1.1rem}

/* categories */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:40px 0}
@media(max-width:760px){.cats{grid-template-columns:1fr}}
.cat-card{background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--hazard); padding:22px}
.cat-card h3{font-size:1.05rem; margin-bottom:.3em}
.cat-card a{text-decoration:none; color:var(--ink)}
.cat-card p{margin:0; color:#4a463f; font-size:.95rem}

/* article list */
.post-list{list-style:none; margin:0; padding:0}
.post-list li{border-top:1px solid var(--line); padding:18px 0}
.post-list a{text-decoration:none; color:var(--ink); font-weight:600}
.post-list .tag{display:inline-block; font-size:.75rem; color:var(--hazard); font-family:"IBM Plex Mono",monospace; margin-bottom:4px}

/* article page */
main.article{padding:48px 0 80px}
main.article .tag{font-family:"IBM Plex Mono",monospace; color:var(--hazard); font-size:.85rem}
main.article h1{font-size:clamp(1.6rem,4vw,2.3rem); margin-top:.3em}
main.article h2{font-size:1.3rem; margin-top:1.6em; border-top:3px solid var(--ink); padding-top:.5em}
main.article table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.95rem}
main.article th,main.article td{border:1px solid var(--line); padding:8px 10px; text-align:left}
main.article th{background:var(--paper-2); font-family:"IBM Plex Mono",monospace; font-weight:600}
main.article .ad-slot{margin:2.2em 0; padding:14px; border:1px dashed var(--line); text-align:center; color:#8a8578; font-size:.85rem}

/* simple page (legal/about) */
main.page{padding:48px 0 80px}
main.page h1{font-size:2rem}

footer.site{background:var(--ink); color:#B8B3A6; padding:32px 0; margin-top:60px; font-size:.9rem}
footer.site a{color:#B8B3A6}
footer.site .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}

.afiliado-box{background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--steel); padding:14px 18px; margin:1.6em 0; font-size:.95rem}
.afiliado-box strong{display:block; margin-bottom:6px; font-family:"Oswald",sans-serif; letter-spacing:.3px}
.afiliado-box a{color:var(--steel); font-weight:600}
.afiliado-box .nota{display:block; margin-top:6px; font-size:.8rem; color:#6b665a}