/* Tema APRS — hoja de estilo AUTOSUFICIENTE del blog.
   No depende de /estilo.css: trae sus propios tokens y layout base. */

:root{
  --navy:#0f2c48;
  --steel:#2b5f8a;
  --celeste:#7fb6d8;
  --celeste-soft:#cfe4f0;
  --cream:#ece6d6;
  --orange:#e07a2f;
  --ink:#122334;
  --muted:#5b7185;
  --paper:#f6f9fb;
  --paper-2:#eaf1f6;
  --line:rgba(15,44,72,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--steel)}
.wrap{width:min(1080px,92vw);margin-inline:auto}

/* ---- Encabezado ---- */
.blog-header{position:sticky;top:0;z-index:20;background:rgba(246,249,251,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.blog-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.blog-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.1rem}
.blog-brand img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.blog-brand b{color:var(--orange)}
.blog-nav{display:flex;gap:22px;font-family:"Space Mono",monospace;font-size:.8rem}
.blog-nav a{color:var(--muted);text-decoration:none;transition:color .2s}
.blog-nav a:hover{color:var(--navy)}

/* ---- Cabecera del listado ---- */
.blog-main{padding:56px 0 80px}
.blog-head .kicker{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);margin-bottom:12px}
.blog-head h1{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--navy);letter-spacing:-.01em}
.blog-intro{color:var(--muted);margin-top:12px;max-width:60ch}
.blog-empty{color:var(--muted)}

/* ---- Chips de categoría ---- */
.cat-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cat-chip{
  font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.04em;
  color:var(--steel);background:rgba(43,95,138,.08);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s;
}
.cat-chip:hover,.cat-chip.is-active{background:var(--steel);color:#fff;border-color:var(--steel)}
.cat-chip .n{opacity:.55;margin-left:2px}

/* ---- Tarjetas de nota ---- */
.notas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.note-card{
  display:flex;flex-direction:column;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 22px 24px;text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
  overflow:hidden;
}
.note-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,44,72,.12)}
.note-thumb{margin:-22px -22px 4px;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.note-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.note-meta{display:flex;align-items:center;gap:8px;font-family:"Space Mono",monospace;font-size:.7rem;color:var(--muted)}
.note-cat{color:var(--orange);text-transform:uppercase;letter-spacing:.12em;font-weight:700;text-decoration:none}
.note-card h3{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.15rem;color:var(--navy);line-height:1.2}
.note-card p{color:var(--muted);font-size:.95rem}
.note-more{margin-top:auto;font-family:"Space Mono",monospace;font-size:.72rem;color:var(--steel)}

/* ---- Artículo ---- */
.post{max-width:72ch;margin-inline:auto}
.post .kicker a{font-family:"Space Mono",monospace;font-size:.75rem;color:var(--steel);text-decoration:none}
.post-hero{margin:22px 0 6px;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--paper-2)}
.post-hero img{width:100%;height:100%;object-fit:cover;display:block}
.post-meta{margin:18px 0 10px}
.post h1{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(1.9rem,4.5vw,2.8rem);color:var(--navy);line-height:1.1;letter-spacing:-.02em}
.post-content{margin-top:26px;font-size:1.06rem;color:var(--ink);line-height:1.75}
.post-content h2{font-family:"Space Grotesk",sans-serif;color:var(--navy);margin:1.6em 0 .5em}
.post-content p{margin:0 0 1.1em}
.post-content a{color:var(--steel)}
.post-content img{max-width:100%;border-radius:12px}
.post-content pre{background:var(--navy);color:#e8eef4;padding:16px;border-radius:12px;overflow:auto;font-family:"Space Mono",monospace;font-size:.86rem}
.post-content code{font-family:"Space Mono",monospace;background:rgba(43,95,138,.1);padding:2px 6px;border-radius:6px;font-size:.9em}
.post-content pre code{background:none;padding:0}

/* ---- Pie ---- */
.blog-footer{background:var(--navy);color:#8ca7bd;font-family:"Space Mono",monospace;font-size:.75rem;padding:24px 0;margin-top:40px}
.blog-footer .wrap{text-align:center}
.blog-footer b{color:#dbe8f2;font-weight:400}
.blog-footer a{color:var(--celeste);text-decoration:none}

@media (max-width:760px){ .notas-grid{grid-template-columns:1fr} }

/* ---- Compartir nota ---- */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.share-label{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.share-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);border:1px solid var(--line);cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s}
.share-btn svg{width:20px;height:20px;fill:currentColor}
.share-btn:hover{transform:translateY(-2px)}
.share-btn.wa:hover{background:#25D366;color:#fff;border-color:#25D366}
.share-btn.tg:hover{background:#26A5E4;color:#fff;border-color:#26A5E4}
.share-btn.x:hover{background:#000;color:#fff;border-color:#000}
.share-btn.fb:hover{background:#1877F2;color:#fff;border-color:#1877F2}
.share-btn.mail:hover,.share-btn.share-copy:hover,.share-btn.share-native:hover{background:var(--steel);color:#fff;border-color:var(--steel)}
.share-btn.ok{background:var(--orange);color:#fff;border-color:var(--orange)}
.share-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}