/* Blog — Mariela Lanza · hereda el sistema visual de marielalanza.com */
:root{
  --bg:#17140F; --bg-alt:#1D1912; --panel:#221D16;
  --cream:#F5EFE4; --ink-soft:#C9C0AC; --ink-mute:#948B78;
  --rose:#E0447E; --rose-deep:#C2185B; --purple:#9257D9; --gold:#C9A227;
  --line:rgba(245,239,228,0.10);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ font-family:var(--sans); font-size:16px; line-height:1.65; background:var(--bg);
  color:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:clip }
img,svg{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
p{ text-wrap:pretty }
h1,h2,h3{ text-wrap:balance; line-height:1.15 }
::selection{ background:var(--rose-deep); color:var(--cream) }
:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:4px }
.skip-link{ position:fixed; top:-100px; left:1rem; z-index:9999; padding:.7rem 1.1rem;
  background:var(--cream); color:var(--bg); border-radius:8px; font-weight:600 }
.skip-link:focus{ top:1rem }

/* nav */
.nav{ position:sticky; top:0; z-index:100; background:rgba(23,20,15,0.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.nav-inner{ max-width:1080px; margin:0 auto; padding:16px 24px; display:flex;
  align-items:center; justify-content:space-between; gap:16px }
.nav-brand{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--cream) }
.nav-brand span{ color:var(--rose) }
.nav-links{ display:none; align-items:center; gap:26px; font-size:14px; color:var(--ink-soft) }
.nav-links a:hover{ color:var(--cream) }
.nav-links a[aria-current]{ color:var(--cream) }
.nav-cta{ background:var(--rose-deep); color:var(--cream)!important; padding:9px 18px;
  border-radius:999px; font-weight:600; font-size:13.5px }
.nav-cta:hover{ background:var(--rose) }
@media (min-width:840px){ .nav-links{ display:flex } }

/* cabecera de sección */
.head{ padding:64px 24px 40px; border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 800px 420px at 80% -20%,rgba(146,87,217,.14),transparent 60%),
             radial-gradient(ellipse 640px 420px at 0% 0%,rgba(224,68,126,.09),transparent 60%) }
.head-inner{ max-width:760px; margin:0 auto }
.eyebrow{ font-family:var(--mono); font-size:12.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--rose); margin-bottom:14px; font-weight:500 }
.head h1{ font-family:var(--serif); font-weight:700; font-size:clamp(30px,5.2vw,46px);
  letter-spacing:-.02em; margin-bottom:16px }
.head .lead{ font-size:17px; color:var(--ink-soft); line-height:1.75; max-width:62ch }
.meta{ font-family:var(--mono); font-size:12.5px; color:var(--ink-mute); margin-top:22px;
  display:flex; flex-wrap:wrap; gap:8px 18px }

/* listado */
.wrap{ max-width:760px; margin:0 auto; padding:56px 24px 88px }
.post-list{ list-style:none; display:grid; gap:0 }
.post-item{ border-bottom:1px solid var(--line); padding:30px 0 }
.post-item:first-child{ padding-top:6px }
.post-item h2{ font-family:var(--serif); font-weight:600; font-size:23px; margin-bottom:10px }
.post-item h2 a:hover{ color:var(--rose) }
.post-item p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin-bottom:12px }
.post-meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--ink-mute) }
.vacio{ color:var(--ink-mute); font-size:15px; padding:20px 0 }

/* artículo */
.prosa{ max-width:720px; margin:0 auto; padding:52px 24px 40px }
.prosa > *{ margin-bottom:22px }
.prosa p{ font-size:17px; line-height:1.8; color:var(--ink-soft) }
.prosa p strong{ color:var(--cream); font-weight:600 }
.prosa h2{ font-family:var(--serif); font-weight:600; font-size:27px; color:var(--cream);
  margin-top:52px; margin-bottom:16px; letter-spacing:-.01em }
.prosa h3{ font-family:var(--serif); font-weight:600; font-size:20px; color:var(--cream);
  margin-top:34px; margin-bottom:10px }
.prosa ul,.prosa ol{ padding-left:22px; color:var(--ink-soft); font-size:17px; line-height:1.8 }
.prosa li{ margin-bottom:9px }
.prosa li::marker{ color:var(--rose) }
.prosa a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(224,68,126,.45) }
.prosa a:hover{ text-decoration-color:var(--rose) }
.prosa{ min-width:0 }
.prosa pre{ background:var(--bg-alt); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; overflow:auto; max-width:100%; font-family:var(--mono); font-size:13.5px;
  line-height:1.7; color:var(--ink-soft) }
.prosa pre code{ display:block; width:max-content; min-width:100% }
.prosa code{ font-family:var(--mono); font-size:.9em; color:var(--gold); overflow-wrap:anywhere }
.prosa pre code{ color:inherit; font-size:inherit }
.prosa blockquote{ border-left:2px solid var(--rose); padding:4px 0 4px 20px;
  font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.6; color:var(--cream) }
.prosa hr{ border:0; border-top:1px solid var(--line); margin:44px 0 }
.dato{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 24px }
.dato h3{ margin-top:0; font-size:17px; font-family:var(--sans); font-weight:600 }
.dato ul{ margin:0; font-size:15.5px }
.dato .fuente{ font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); margin-top:14px }

/* cierre del artículo */
.cierre{ max-width:720px; margin:0 auto; padding:0 24px 80px }
.cierre-caja{ border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:28px 26px }
.cierre-caja h2{ font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:10px }
.cierre-caja p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin-bottom:18px }
.btn{ padding:12px 22px; border-radius:999px; font-weight:600; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out) }
.btn-primary{ background:var(--rose-deep); color:var(--cream) }
.btn-primary:hover{ background:var(--rose); transform:translateY(-2px) }
.btn-ghost{ border:1px solid var(--line); color:var(--cream) }
.btn-ghost:hover{ border-color:var(--rose); transform:translateY(-2px) }
.acciones{ display:flex; gap:10px; flex-wrap:wrap }
.volver{ font-family:var(--mono); font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink-mute); display:inline-block; margin-bottom:8px }
.volver:hover{ color:var(--rose) }

/* footer */
.footer{ border-top:1px solid var(--line); padding:34px 24px; background:var(--bg-alt) }
.footer-inner{ max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; font-family:var(--mono); font-size:12.5px; color:var(--ink-mute) }

/* ── figuras ─────────────────────────────────────────────── */
.fig{ margin:34px 0 }
.fig figcaption{ font-family:var(--mono); font-size:11.5px; letter-spacing:1.2px;
  color:var(--ink-mute); margin-top:14px; line-height:1.6 }

/* diagrama de los tres archivos */
.tres{ display:grid; gap:14px }
@media (min-width:640px){ .tres{ grid-template-columns:repeat(3,1fr) } }
.tres .t{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px 18px }
.tres .t svg{ margin-bottom:12px }
.tres .n{ font-family:var(--mono); font-size:12.5px; color:var(--gold); margin-bottom:8px;
  overflow-wrap:anywhere }
.tres .q{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--cream);
  margin-bottom:7px; line-height:1.2 }
.tres .d{ font-size:14px; line-height:1.6; color:var(--ink-soft) }

/* medidores */
.med{ display:grid; gap:22px }
@media (min-width:640px){ .med{ grid-template-columns:1fr 1fr; gap:26px } }
.med .m{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px 20px 22px }
.med .lbl{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:12px }
.med .val{ font-family:var(--sans); font-weight:600; font-size:52px; line-height:1;
  color:var(--rose); letter-spacing:-.02em; margin-bottom:14px }
.med .pista{ height:10px; border-radius:999px; background:rgba(224,68,126,.18);
  overflow:hidden }
.med .relleno{ height:100%; border-radius:999px; background:var(--rose) }
.med .pie{ font-size:12.5px; color:var(--ink-mute); margin-top:10px; line-height:1.5 }

/* ── portada del artículo ────────────────────────────────── */
.portada{ max-width:960px; margin:44px auto 0; padding:0 24px }
.portada img{ width:100%; height:auto; border-radius:14px; border:1px solid var(--line) }

/* ── índice ──────────────────────────────────────────────── */
.indice{ background:var(--bg-alt); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px }
.indice p.tit{ font-family:var(--mono); font-size:11.5px; letter-spacing:2px;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:12px }
.indice ol{ margin:0; padding-left:20px; font-size:15.5px; line-height:1.75 }
.indice li{ margin-bottom:4px }
.indice a{ color:var(--ink-soft); text-decoration:none }
.indice a:hover{ color:var(--rose) }

/* ── bloque de autoría ───────────────────────────────────── */
.autora{ max-width:720px; margin:0 auto 40px; padding:0 24px }
.autora-caja{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:30px }
.autora img{ width:80px; height:80px; border-radius:50%; object-fit:cover;
  border:2px solid var(--rose); flex:0 0 auto }
.autora .txt{ flex:1 1 260px; min-width:0 }
.autora .rot{ font-family:var(--mono); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px }
.autora .nom{ font-family:var(--serif); font-size:21px; font-weight:600;
  color:var(--cream); margin-bottom:8px }
.autora p{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin-bottom:12px }
.autora .enl{ display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px }
.autora .enl a{ color:var(--rose) }
.autora .enl a:hover{ text-decoration:underline }

/* ── tarjeta del listado con imagen ──────────────────────── */
.post-item{ display:grid; gap:18px }
@media (min-width:680px){
  .post-item{ grid-template-columns:280px 1fr; align-items:start; gap:24px }
}
.post-item .miniatura img{ width:100%; border-radius:10px; border:1px solid var(--line) }
.post-item .miniatura:hover img{ border-color:var(--rose) }

/* ── barras horizontales ─────────────────────────────────── */
.barras{ display:grid; gap:16px }
.barra-fila{ display:grid; grid-template-columns:1fr; gap:7px }
.barra-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.barra-nom{ font-size:14.5px; color:var(--cream); line-height:1.35 }
.barra-nom small{ display:block; font-size:12.5px; color:var(--ink-mute); margin-top:2px }
.barra-val{ font-family:var(--sans); font-weight:600; font-size:19px; color:var(--rose);
  flex:0 0 auto; letter-spacing:-.01em }
.barra-val.neg{ color:var(--ink-mute) }
.barra-eje{ position:relative; height:12px; background:rgba(245,239,228,.06);
  border-radius:999px; overflow:visible }
.barra-eje i{ position:absolute; top:0; height:100%; border-radius:999px;
  background:var(--rose); display:block }
.barra-eje i.neg{ background:var(--ink-mute) }
.barra-cero{ position:absolute; top:-4px; bottom:-4px; width:1px;
  background:rgba(245,239,228,.28) }
.nota-eje{ font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--ink-mute);
  margin-top:4px }

/* ── comparación a dos columnas ──────────────────────────── */
.compara{ display:grid; gap:14px }
@media (min-width:680px){ .compara{ grid-template-columns:1fr 1fr } }
.compara .col{ min-width:0 }
.compara .tit{ font-family:var(--mono); font-size:11px; letter-spacing:1.8px;
  text-transform:uppercase; margin-bottom:9px }
.compara .ok{ color:var(--gold) }
.compara .ko{ color:var(--rose) }
.compara pre{ margin:0; font-size:12.5px }

/* ── lista de comprobación ───────────────────────────────── */
.chequeo{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:22px 24px }
.chequeo h3{ margin-top:0; font-family:var(--sans); font-size:16px; font-weight:600 }
.chequeo ol{ margin:0; font-size:15.5px }
.chequeo li{ margin-bottom:12px }
.chequeo li:last-child{ margin-bottom:0 }