/* Blog de Calidana. Mismos tokens y tipografías que la landing (/calidana-web/index.html). */
:root{
  --paper:#f4f2ee; --surface:#fcfbf8; --ink:#231419; --muted:#6b6066; --line:#e7e3dd;
  --brand:#a02952; --brand-deep:#7a1d3e; --rose:#f3c7d6; --rose-50:#fbeef3;
  --amber:#7a4700; --amber-50:#fbf1e1;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --wrap:1160px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#171315; --surface:#211b1e; --ink:#f4eef0; --muted:#b9adb2; --line:#3a3236;
    --brand:#e0678f; --brand-deep:#f08aac; --rose:#5a2439; --rose-50:#2e1822; --amber:#f0bd6e; --amber-50:#33271a;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (max-width:360px){.wrap{padding:0 16px}}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;letter-spacing:-.015em}
.skip{position:absolute;left:12px;top:-60px;background:#a02952;color:#fff;padding:10px 16px;border-radius:10px;z-index:10;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* encabezado y pie: iguales a la landing */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font:700 17px/1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{color:#2a0f1b}}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:800 22px/1 var(--display);letter-spacing:-.02em}
.brand svg{width:36px;height:36px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{position:relative;padding:12px 0;text-decoration:none;color:var(--muted);font-size:16px;white-space:nowrap;transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:var(--brand)}
.top .btn{min-height:44px;padding:0 20px;font-size:15.5px}
.top .sm{display:none}
@media (max-width:1100px){.nav{display:none}.top .btn{margin-left:auto}}
@media (max-width:480px){.top .lg{display:none}.top .sm{display:inline}}
footer{padding:40px 0 56px;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .brand{font-size:18px;color:var(--ink)}
footer .brand svg{width:28px;height:28px}
footer .legal{display:flex;gap:4px 18px;flex-wrap:wrap}
footer .legal a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
footer .legal a:hover{color:var(--brand)}

/* portada del blog */
.blog-hero{padding:72px 0 40px;position:relative;overflow:hidden}
.blog-hero::before{content:"";position:absolute;right:-120px;top:-160px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 14%,transparent),transparent 65%);pointer-events:none}
.kicker{font:700 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin:0 0 16px}
.blog-hero h1{font-size:clamp(40px,6vw,72px);font-weight:800;max-width:14ch;letter-spacing:-.025em;line-height:1.02}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--muted);max-width:58ch;margin:22px 0 0}
.blog-list{padding:8px 0 104px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.f{font:600 15px/1 var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 16px;min-height:44px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.f:hover{border-color:var(--c,var(--brand))}
.f.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:minmax(0,1fr)}}
.card{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--surface);border-radius:22px;padding:26px 26px 24px;
  border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.card::before{content:"";position:absolute;left:26px;top:0;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--c)}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 40%,var(--line));box-shadow:0 24px 44px -28px rgba(60,20,35,.35)}
.card[hidden]{display:none}
.card-cat{font:700 13px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--c)}
.card h3{font-size:23px;font-weight:700;line-height:1.18}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:22px}
.card p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.55}
.card-meta{margin-top:auto;padding-top:8px;font-size:14px;color:var(--muted)}
.card.big{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:10px 48px;padding:40px;
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--c) 9%,transparent),transparent 60%),var(--surface)}
.card.big::before{left:40px;width:64px}
.card.big .card-cat{grid-column:1}
.card.big h3{grid-column:1;font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em}
.card.big p{grid-column:2;grid-row:1/4;align-self:end;font-size:18px}
.card.big .card-meta{grid-column:1}
@media (max-width:760px){.card.big{grid-template-columns:minmax(0,1fr);padding:28px 26px}.card.big::before{left:26px}.card.big p{grid-column:1;grid-row:auto}}
.draft-tag{font-style:normal;font-weight:700;color:var(--amber);background:var(--amber-50);border-radius:6px;padding:1px 7px}
.empty{color:var(--muted)}

/* artículo */
.post{padding:28px 0 0}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14.5px;color:var(--muted)}
.crumbs a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--brand)}
.crumbs span{display:inline-flex;align-items:center}
.draft{margin:8px 0 0;padding:12px 16px;border-radius:12px;background:var(--amber-50);color:var(--amber);font-size:15.5px;font-weight:700;max-width:760px}
.post-head{max-width:860px;padding:28px 0 40px}
.cat{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;text-decoration:none;
  font:700 13px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
.post-head h1{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.022em;line-height:1.05;margin-top:18px}
.post-meta{margin:20px 0 0;font-size:15px;color:var(--muted)}
.post-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start;padding-bottom:88px;border-top:1px solid var(--line);padding-top:40px}
.toc{position:sticky;top:96px;font-size:15px}
.toc b{display:block;font:700 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--muted);line-height:1.35;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{color:var(--ink);border-left-color:var(--c);font-weight:700}
@media (max-width:960px){.post-grid{grid-template-columns:minmax(0,1fr);gap:28px}.toc{position:static;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px}}
.prose{max-width:720px;font-size:19px;line-height:1.72}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(26px,3vw,32px);font-weight:700;margin:56px 0 16px;line-height:1.15}
.prose h3{font-size:22px;font-weight:700;margin:36px 0 10px}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--brand)}
.prose strong{font-weight:700}
.prose a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose blockquote{margin:28px 0;padding:18px 22px;border-radius:16px;background:color-mix(in srgb,var(--c) 8%,var(--surface));border-left:4px solid var(--c);font-size:18px}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:16.5px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--display);font-size:15px}
.cta{margin:48px 0 8px;padding:32px;border-radius:24px;color:#fff;
  background:radial-gradient(100% 140% at 100% 0%,#c23a6a,transparent 60%),#7a1d3e}
.cta b{display:block;font:700 clamp(22px,2.6vw,28px)/1.15 var(--display);max-width:22ch}
.cta p{margin:12px 0 22px;color:#fbe3ec;font-size:17px;max-width:52ch}
.cta .btn{background:#fff;color:#7a1d3e}
.cta .btn:hover{background:var(--rose)}
.related{background:var(--surface);border-top:1px solid var(--line);padding:72px 0 88px}
.related h2{font-size:clamp(28px,3.4vw,38px);font-weight:700;margin-bottom:28px}
.related .card{background:var(--paper)}
@media print{.top,.toc,.related,footer,.cta{display:none}body{background:#fff}}
/* la tipografía de texto tacha el cero: fechas y números en la de títulos */
.card-meta,.post-meta,.cnt{font-family:var(--display);font-variant-numeric:tabular-nums}