:root {
  --mostaza: #e9b43a;
  --crema: #ebe4d6;
  --tinta: #1c1b2e;
  --azul: #2f4fd0;
  --rosa: #e0457b;
  --verde: #2fa37a;
  --rojo: #d63a3a;
  --texto: #1c1b2e;
  --suave: #4a4860;
  --fondo: var(--mostaza);
  --tarjeta: var(--crema);
  --papel: #f6f1e7;
  --linea: #1c1b2e;
  --azul-texto: #2f4fd0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #17162a; --tarjeta: #24233b; --papel: #1e1d33; --texto: #f1ece1;
    --suave: #b9b5c9; --tinta: #0d0c1a; --linea: #e9e3d6; --azul-texto: #8fa4ff;
  }
}
:root[data-theme="dark"] {
  --fondo: #17162a; --tarjeta: #24233b; --papel: #1e1d33; --texto: #f1ece1;
  --suave: #b9b5c9; --tinta: #0d0c1a; --linea: #e9e3d6; --azul-texto: #8fa4ff;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 17px/1.6 "Archivo", system-ui, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-texto); }
.envoltorio { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.estrecho { max-width: 760px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-family: "Archivo Black", sans-serif; line-height: 1.12; margin: 0; }
.mono { font-family: "JetBrains Mono", monospace; }

/* Barra superior */
.barra { padding: 16px 0; }
.barra .envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); font-family: "Archivo Black", sans-serif; font-size: 1.3rem; }
.marca img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--tinta); }
.barra nav a { font: 700 .9rem "JetBrains Mono", monospace; color: var(--texto); text-decoration: none; margin-left: 14px; }

/* Portada */
.banner { border: 4px solid var(--tinta); border-radius: 20px; overflow: hidden; }
.intro { padding: 28px 0 8px; max-width: 720px; }
.intro h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.intro p { font-size: 1.15rem; margin: 12px 0 0; }
.boton {
  display: inline-block; margin-top: 18px; padding: 12px 20px;
  background: var(--rojo); color: #fff; text-decoration: none;
  font-family: "Archivo Black", sans-serif; border: 3px solid var(--tinta);
  border-radius: 12px; box-shadow: 4px 4px 0 var(--tinta);
}
section { padding: 36px 0; }
section > h2 { font-size: 1.9rem; margin-bottom: 18px; }

.caja {
  background: var(--tarjeta); border: 3px solid var(--tinta); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--tinta);
}
.reparto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ficha { padding: 18px; }
.ficha h3 { font-size: 1.4rem; }
.ficha p { margin: 0; color: var(--suave); }
.etiqueta {
  display: inline-block; font: 700 .78rem "JetBrains Mono", monospace; color: #fff;
  padding: 2px 8px; border-radius: 4px; margin: 6px 0 8px;
}

/* Lista de artículos */
.articulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.tarjeta-art { display: block; text-decoration: none; color: var(--texto); overflow: hidden; transition: transform .15s; }
.tarjeta-art:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta); }
.tarjeta-art img { aspect-ratio: 4/5; object-fit: cover; object-position: top; border-bottom: 3px solid var(--tinta); width: 100%; }
.tarjeta-art .cuerpo { padding: 14px 16px 16px; }
.tarjeta-art h3 { font-size: 1.15rem; margin: 4px 0 6px; }
.tarjeta-art p { margin: 0; font-size: .95rem; color: var(--suave); }
.num { font: 700 .8rem "JetBrains Mono", monospace; color: var(--azul-texto); }
.tema { font: 700 .75rem "JetBrains Mono", monospace; color: #fff; background: var(--tinta); padding: 2px 7px; border-radius: 4px; }

/* Artículo */
.cabecera-art { display: grid; grid-template-columns: 1fr 220px; gap: 28px; align-items: center; padding: 20px 0 8px; }
.cabecera-art h1 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); margin: 8px 0 12px; }
.cabecera-art p { font-size: 1.1rem; margin: 0; }
.cabecera-art img { border: 4px solid var(--tinta); border-radius: 14px; aspect-ratio: 9/16; object-fit: cover; }
article.post { background: var(--papel); border: 3px solid var(--tinta); border-radius: 20px; padding: 8px 0 28px; margin: 24px 0; }
article.post h2 { font-size: 1.55rem; margin: 34px 0 10px; }
article.post p, article.post li { font-size: 1.05rem; }
.definicion {
  margin: 26px 0; padding: 18px 20px; border: 3px solid var(--tinta); border-radius: 14px;
  background: var(--tarjeta); box-shadow: 5px 5px 0 var(--azul);
}
.definicion .rotulo { font: 700 .78rem "JetBrains Mono", monospace; color: var(--azul-texto); text-transform: uppercase; letter-spacing: .05em; }
.definicion dfn { font-style: normal; font-family: "Archivo Black", sans-serif; font-size: 1.2rem; display: block; margin: 4px 0 6px; }
.definicion p { margin: 0; }
.pregunta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0;
  font: 700 .95rem "JetBrains Mono", monospace;
}
.pregunta span { padding: 6px 10px; border: 2px solid var(--linea); border-radius: 8px; }
.pregunta .ent { background: color-mix(in srgb, var(--verde) 18%, transparent); }
.pregunta .sal { background: color-mix(in srgb, var(--rosa) 18%, transparent); }
.mentira { border-left: 6px solid var(--rosa); padding: 6px 14px; margin: 18px 0; }
.mentira b { font: 700 .8rem "JetBrains Mono", monospace; color: var(--rosa); text-transform: uppercase; }
figure { margin: 24px 0; }
figure svg { width: 100%; height: auto; display: block; background: var(--tarjeta); border: 3px solid var(--tinta); border-radius: 14px; }
figcaption { font-size: .9rem; color: var(--suave); margin-top: 8px; }
.llevate {
  border: 3px solid var(--tinta); border-radius: 14px; padding: 14px 18px; margin: 30px 0 0;
  background: var(--mostaza); color: #1c1b2e; font-weight: 600;
}
.llevate b { font-family: "Archivo Black", sans-serif; display: block; }
code { font-family: "JetBrains Mono", monospace; font-size: .92em; background: color-mix(in srgb, var(--linea) 10%, transparent); padding: 1px 5px; border-radius: 4px; }
.navegar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 10px 0 40px; }
.navegar a { font-family: "Archivo Black", sans-serif; text-decoration: none; color: var(--texto); }

/* Dibujos: colores que cambian con el tema */
svg .t { fill: var(--texto); font-family: "JetBrains Mono", monospace; }
svg .tg { fill: var(--texto); font-family: "Archivo Black", sans-serif; }
svg .s { fill: var(--suave); font-family: "JetBrains Mono", monospace; }
svg .l { stroke: var(--linea); fill: none; }
svg .f { fill: var(--papel); stroke: var(--linea); }

@media (max-width: 640px) {
  .cabecera-art { grid-template-columns: 1fr; }
  .cabecera-art img { max-width: 200px; }
  .barra nav a { margin-left: 8px; }
}

footer { padding: 32px 0 48px; font-size: .9rem; color: var(--suave); }