@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #f6f5f2; --bg-2: #ffffff; --ink: #141416; --ink-2: #55534f; --line: rgb(20 20 22 / 0.12);
  --mint: #00695c; --cyan: #00718a; --amber: #8a5a00; --coral: #b23a17;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c; --bg-2: #111118; --ink: #dddbd7; --ink-2: #a6a49f; --line: rgb(221 219 215 / 0.14);
    --mint: #00f5d4; --cyan: #00d4ff; --amber: #ffd479; --coral: #ff8a65;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 "Montserrat", system-ui, sans-serif; }
a { color: var(--cyan); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em; }
.cab, main, .pie { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.cab { display: flex; align-items: center; gap: 16px; padding-top: 24px; padding-bottom: 8px; color: var(--ink-2); font-weight: 600; }
.cab img { display: block; height: 32px; width: auto; }
.antetitulo { margin: 40px 0 4px; color: var(--mint); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.15; overflow-wrap: anywhere; }
.entrada { color: var(--ink-2); font-size: 1.05rem; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }
h3 { font-size: 0.85rem; margin: 20px 0 8px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.bloque { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 24px 0; }
.estado { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.estado.bien { border-color: var(--mint); }
.estado.mal { border-color: var(--coral); }
.enlaces { margin: 0; padding-left: 20px; }
.enlaces li { margin: 6px 0; }
.enlaces code { overflow-wrap: anywhere; }
details { margin-top: 14px; }
summary { cursor: pointer; font-weight: 600; }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; white-space: pre; }
.nota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; color: var(--ink-2); margin: 0 0 4px; }
.puntos { font-size: 2.2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.puntos small { font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.grado { font-weight: 700; color: var(--mint); text-transform: uppercase; letter-spacing: 0.04em; }
.nota-apex { color: var(--ink-2); font-size: 0.9rem; margin: 8px 0 0; }
.cat ul { list-style: none; margin: 0; padding: 0; }
.cat li { display: grid; grid-template-columns: 7.5rem 14rem 1fr; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.pill { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.bien .pill { color: var(--mint); } .aviso .pill { color: var(--amber); } .mal .pill { color: var(--coral); } .info .pill { color: var(--ink-2); }
.nombre { font-weight: 600; }
.detalle { color: var(--ink-2); }
@media (max-width: 720px) { .cat li { grid-template-columns: 1fr; gap: 0; } }
.cierre { margin: 32px 0; font-weight: 600; }
.pie { padding-top: 16px; padding-bottom: 32px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.9rem; }
.pie a { color: var(--ink-2); }