/* Tabula Picta · estilos comunes de portada y páginas de texto (los ensayos llevan su propio CSS) */
:root{
  --paper:#EFE4CC; --paper-2:#E6D6B4; --ink:#26201E; --ink-2:#5B4F45; --rule:#CDBB95;
  --ber:#D6482C; --oro:#E2A82E; --lapis-ink:#284696; --verd:#26847A; --minio:#D9772F; --granza:#B8436A;
  --f-display:'Fraunces', Georgia, serif; --f-label:'Archivo Black', 'Arial Black', sans-serif; --f-body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#1B1A20; --paper-2:#26242C; --ink:#EFE4CC; --ink-2:#B9AD97; --rule:#3E3A40;
  --ber:#E8613F; --oro:#E8B648; --lapis-ink:#8EA3E6; --verd:#3FA597; --minio:#E8914F; --granza:#D46A8E; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#1B1A20; --paper-2:#26242C; --ink:#EFE4CC; --ink-2:#B9AD97; --rule:#3E3A40;
  --ber:#E8613F; --oro:#E8B648; --lapis-ink:#8EA3E6; --verd:#3FA597; --minio:#E8914F; --granza:#D46A8E; color-scheme:dark }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:18px; line-height:1.6}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.2; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:var(--lapis-ink); text-underline-offset:3px}
:focus-visible{outline:3px solid var(--oro); outline-offset:2px}
h1,h2,h3{font-family:var(--f-display); font-weight:500; line-height:1.1; margin:0; text-wrap:balance}
p{margin:0}
.wrap{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.in{max-width:72rem; margin-inline:auto}
.col{max-width:40rem; margin-inline:auto}
.kicker{font-family:var(--f-label); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ber)}
.muted{color:var(--ink-2)}
.top{border-bottom:1px solid var(--rule); background:var(--paper)}
.top .in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.brand{display:inline-flex; align-items:baseline; gap:.45em; text-decoration:none; color:var(--ink)}
.brand i{font-family:var(--f-display); font-style:italic; font-variation-settings:'SOFT' 100,'opsz' 144; font-size:1.55rem; color:var(--lapis-ink); line-height:1}
.brand b{font-family:var(--f-label); font-weight:400; letter-spacing:.18em; font-size:.8rem; background:var(--oro); color:#26201E; padding:.2em .45em .15em .6em}
.nav{display:flex; gap:18px; font-size:.92rem}
.nav a{color:var(--ink); text-decoration:none} .nav a:hover{text-decoration:underline}
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-label); letter-spacing:.06em; font-size:.85rem; padding:.75em 1.1em; background:var(--ink); color:var(--paper); text-decoration:none; min-height:44px; border:0; cursor:pointer}
.btn.alt{background:transparent; color:var(--ink); border:2px solid var(--ink)}
.card{border:2px solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--oro); padding:20px 22px}
.prose{display:flex; flex-direction:column; gap:1em}
.prose h2{font-size:1.6rem; margin-top:1.2em}
footer{border-top:1px solid var(--rule); margin-top:64px; padding-block:40px 56px; font-size:.9rem}
footer .in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px}
footer nav{display:flex; flex-wrap:wrap; gap:16px}
footer a{color:var(--ink-2)}