/* =============================================================
   ACTO VOLTAJE — LIBRETOS (blog)
   Apoyado en los tokens de colors_and_type.css (vía styles.css).
   Hero en navy (como Leit motiv), lectura en papel/hueso.
   ============================================================= */

.page--libretos { background: var(--av-bone); color: var(--av-fg); }

/* ---------- HERO ---------- */
.lib-hero {
  position: relative;
  background: var(--av-navy);
  color: var(--av-fg-inv);
  padding: 150px 0 72px;
  overflow: hidden;
}
.lib-hero .shell { position: relative; z-index: 2; }
.lib-hero .leit-hero-orb { opacity: .38; }
.lib-hero .leit-hero-orb-2 { opacity: .3; }
.lib-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--av-fg-inv-3);
  margin-bottom: 36px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.lib-meta a { color: var(--av-fg-inv-2); text-decoration: none; }
.lib-meta a:hover { color: var(--av-yellow); }
.lib-meta .tag-y { color: var(--av-yellow); }
.lib-hero h1 {
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: .96; letter-spacing: -.025em; text-transform: uppercase;
  color: var(--av-paper); margin: 0 0 28px; max-width: 1100px;
}
.lib-hero h1 .accent-y { color: var(--av-yellow); }
.lib-hero h1 .brk { color: var(--av-electric); font-family: var(--av-font-voltage); letter-spacing: 0; }
.lib-lede {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.45; font-weight: 500;
  color: var(--av-fg-inv-2); max-width: 720px; margin: 0;
}
.lib-lede strong { color: var(--av-paper); font-weight: 600; }

/* ---------- LAYOUT: main + sidebar ---------- */
.lib-body { padding: 72px 0 96px; }
.lib-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}
.lib-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }

/* ---------- SIDEBAR BLOCKS ---------- */
.side-block {
  background: var(--av-paper);
  border: 1px solid var(--av-line);
  padding: 24px;
}
.side-title {
  font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--av-fg-3); margin: 0 0 16px; font-weight: 700;
}
.side-search { position: relative; }
.side-search input {
  width: 100%; padding: 13px 14px; font: inherit; font-size: .95rem;
  border: 1px solid var(--av-line); background: var(--av-bone); color: var(--av-navy);
}
.side-search input:focus { outline: none; border-color: var(--av-navy); }
.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-list a {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 11px 0; text-decoration: none; color: var(--av-navy);
  border-bottom: 1px solid var(--av-line); font-weight: 600; font-size: .98rem;
  transition: color var(--av-dur-fast) var(--av-ease-out), padding var(--av-dur-fast) var(--av-ease-out);
}
.cat-list li:last-child a { border-bottom: 0; }
.cat-list a:hover, .cat-list a.is-active { color: var(--av-electric); padding-left: 6px; }
.cat-list a.is-active .cat-name::before { content: "→ "; color: var(--av-yellow); }
.cat-dot { width: 10px; height: 10px; flex: 0 0 10px; background: var(--c, var(--av-navy)); }
.cat-name { flex: 1; }
.cat-count { font-family: var(--av-font-mono); font-size: 11px; color: var(--av-fg-3); letter-spacing: .1em; }

.gloss dt { font-weight: 700; color: var(--av-navy); margin-top: 14px; font-size: .95rem; }
.gloss dt:first-child { margin-top: 0; }
.gloss dd { margin: 4px 0 0; color: var(--av-fg-2); font-size: .9rem; line-height: 1.5; }

.side-cta { background: var(--av-navy); color: var(--av-fg-inv-2); border-color: var(--av-navy); position: relative; overflow: hidden; }
.side-cta::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px;
  background: radial-gradient(circle, rgba(0,180,151,.55), transparent 65%); pointer-events: none;
}
.side-cta .side-title { color: var(--av-teal); }
.side-cta h3 { color: var(--av-paper); font-size: 1.35rem; line-height: 1.15; margin: 0 0 10px; text-transform: none; }
.side-cta p { margin: 0 0 18px; font-size: .92rem; line-height: 1.55; }
.side-cta .btn { width: 100%; justify-content: space-between; }

.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 32px 1fr; gap: 4px; padding: 8px 0;
  color: var(--av-fg-2); text-decoration: none; font-size: .92rem; line-height: 1.35;
  border-bottom: 1px solid var(--av-line);
}
.toc li:last-child a { border-bottom: 0; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--av-font-mono); font-size: 11px; color: var(--av-fg-3); padding-top: 2px; }
.toc a:hover, .toc a.is-active { color: var(--av-navy); }
.toc a.is-active::before { color: var(--av-yellow); }

/* ---------- CATEGORY COLORS ---------- */
[data-cat="estrategia"] { --c: var(--av-yellow); }
[data-cat="geo"]        { --c: var(--av-electric); }
[data-cat="agentes"]    { --c: var(--av-teal); }
[data-cat="regulacion"] { --c: var(--av-coral); }
[data-cat="equipos"]    { --c: var(--av-salmon); }

/* ---------- POST LIST ---------- */
.lib-filter-note {
  font-family: var(--av-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--av-fg-3); margin: 0 0 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.lib-filter-note button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer;
  color: var(--av-electric); padding: 0;
}
.post-list { display: flex; flex-direction: column; gap: 28px; }
.post-card {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  background: var(--av-paper); border: 1px solid var(--av-line);
  text-decoration: none; color: inherit;
  transition: transform var(--av-dur-base) var(--av-ease-out), box-shadow var(--av-dur-base) var(--av-ease-out), border-color var(--av-dur-base) var(--av-ease-out);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-md); border-color: var(--av-navy); }
.post-card[hidden] { display: none; }
.post-card-body { padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.post-card h2 {
  font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.12; text-transform: none; letter-spacing: -.01em; margin: 0; color: var(--av-navy);
}
.post-card p { margin: 0; color: var(--av-fg-2); line-height: 1.6; font-size: 1rem; }
.post-card .read {
  margin-top: auto; padding-top: 6px;
  font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--av-navy);
}
.post-card:hover .read { color: var(--av-electric); }
.post-card--featured { grid-template-columns: 1fr; }
.post-card--featured .cover { aspect-ratio: 21 / 8; min-height: 0; }
.post-card--featured h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.post-card--featured .post-card-body { padding: 32px 36px 36px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  font-family: var(--av-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 5px 9px; border: 1px solid var(--c, var(--av-navy)); color: var(--av-navy); background: transparent;
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.chip::before { content: ""; width: 7px; height: 7px; background: var(--c, var(--av-navy)); }
.chip-meta { font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--av-fg-3); }

/* ---------- COVERS (CSS, sin peso de imagen) ---------- */
.cover {
  position: relative; overflow: hidden; min-height: 220px;
  background: var(--av-navy); color: var(--av-paper);
  display: flex; flex-direction: column; justify-content: space-between; padding: 20px;
  isolation: isolate;
}
.cover::before, .cover::after { content: ""; position: absolute; border-radius: 50%; filter: blur(28px); z-index: -1; }
.cover::before { width: 75%; aspect-ratio: 1; right: -18%; top: -22%; background: radial-gradient(circle, var(--o1) 0%, transparent 68%); }
.cover::after  { width: 60%; aspect-ratio: 1; left: -16%; bottom: -30%; background: radial-gradient(circle, var(--o2) 0%, transparent 70%); opacity: .85; }
.cover-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.cover-num { font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cover-word {
  font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .9;
  font-size: clamp(2rem, 4vw, 3.2rem); color: var(--av-paper);
}
.cover-word .brk { color: var(--o1); font-family: var(--av-font-voltage); letter-spacing: 0; }
.cover--geo        { --o1: #0F92B2; --o2: #F2E541; }
.cover--agentes    { --o1: #00B497; --o2: #0F92B2; }
.cover--regulacion { --o1: #FF6B7E; --o2: #F2A07A; }
.cover--equipos    { --o1: #FFB700; --o2: #FF6B7E; }

.lib-empty { padding: 40px; background: var(--av-paper); border: 1px dashed var(--av-line); text-align: center; color: var(--av-fg-2); }

/* ---------- ARTICLE ---------- */
.art-hero h1 { font-size: clamp(2.1rem, 5vw, 4.1rem); line-height: 1.02; text-transform: none; letter-spacing: -.02em; max-width: 1000px; }
.art-byline {
  display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 32px;
  font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--av-fg-inv-3);
}
.art-byline strong { color: var(--av-paper); font-weight: 700; }
.art-hero .chip { color: var(--av-paper); }
.art-hero .chips { margin-bottom: 22px; }

.art { background: var(--av-paper); border: 1px solid var(--av-line); padding: clamp(28px, 5vw, 64px); min-width: 0; }
.art > *:first-child { margin-top: 0; }
.art p, .art li { font-size: 1.08rem; line-height: 1.75; color: #1d3557; }
.art p { margin: 0 0 1.2em; }
.art h2 {
  font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.15; text-transform: none; letter-spacing: -.015em;
  margin: 2.2em 0 .7em; color: var(--av-navy); scroll-margin-top: 100px;
}
.art h2::before {
  content: attr(data-n); display: block; margin-bottom: 10px;
  font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .22em; color: var(--av-electric); font-weight: 700;
}
.art h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.6em 0 .5em; color: var(--av-navy); }
.art ul, .art ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.art li { margin-bottom: .45em; }
.art li::marker { color: var(--av-electric); font-weight: 700; }
.art a { color: var(--av-electric); text-underline-offset: 3px; }
.art a:hover { color: var(--av-navy); }
.art strong { color: var(--av-navy); }
.art blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--av-yellow);
  font-size: 1.3rem; line-height: 1.45; font-weight: 600; color: var(--av-navy);
}

.tldr {
  background: var(--av-navy); color: var(--av-fg-inv-2); padding: 28px 30px; margin: 0 0 2.4em; position: relative;
}
.tldr-label {
  font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--av-yellow);
  font-weight: 700; display: block; margin-bottom: 12px;
}
.art .tldr p, .art .tldr li { color: var(--av-fg-inv-2); font-size: 1.02rem; }
.art .tldr strong { color: var(--av-paper); }
.art .tldr p:last-child, .art .tldr ul:last-child { margin-bottom: 0; }
.art .tldr li::marker { color: var(--av-yellow); }

.callout {
  border: 1px solid var(--av-line); border-left: 4px solid var(--c, var(--av-teal));
  background: var(--av-bone); padding: 22px 24px; margin: 1.8em 0;
}
.callout-label { font-family: var(--av-font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--av-fg-3); display: block; margin-bottom: 8px; }
.art .callout p:last-child, .art .callout ul:last-child { margin-bottom: 0; }
.callout--av { --c: var(--av-yellow); background: #fff8e6; }

.table-wrap { overflow-x: auto; margin: 1.6em 0 2em; border: 1px solid var(--av-line); }
.art table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
.art th {
  text-align: left; background: var(--av-navy); color: var(--av-paper); padding: 12px 14px;
  font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}
.art td { padding: 12px 14px; border-top: 1px solid var(--av-line); vertical-align: top; line-height: 1.5; color: #1d3557; }
.art tr:nth-child(even) td { background: #faf8f4; }

.steps { counter-reset: st; list-style: none; padding: 0 !important; }
.steps > li { counter-increment: st; position: relative; padding: 18px 0 18px 64px; border-top: 1px solid var(--av-line); margin: 0 !important; }
.steps > li::before {
  content: "[" counter(st, decimal-leading-zero) "]"; position: absolute; left: 0; top: 19px;
  font-family: var(--av-font-mono); font-size: 13px; font-weight: 700; color: var(--av-electric);
}

.faq { margin-top: 1em; border-top: 2px solid var(--av-navy); }
.faq details { border-bottom: 1px solid var(--av-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 700; font-size: 1.08rem; color: var(--av-navy); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--av-font-mono); font-size: 1.4rem; color: var(--av-electric); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 14px; }

.sources { margin-top: 2.6em; padding-top: 22px; border-top: 1px solid var(--av-line); }
.sources h2 { font-size: 1rem; margin: 0 0 12px; font-family: var(--av-font-mono); letter-spacing: .2em; text-transform: uppercase; }
.sources h2::before { display: none; }
.art .sources li { font-size: .9rem; line-height: 1.5; color: var(--av-fg-2); }

.author {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center;
  margin-top: 2.6em; padding: 22px; background: var(--av-bone); border: 1px solid var(--av-line);
}
.author-mark { width: 64px; height: 64px; background: var(--av-navy); display: grid; place-items: center; }
.author-mark img { width: 40px; height: auto; }
.art .author p { margin: 0; font-size: .95rem; line-height: 1.55; }
.author-name { font-weight: 800; color: var(--av-navy); }

.art-end { margin-top: 56px; }
.art-end h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); text-transform: none; margin: 0 0 20px; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.related .post-card { grid-template-columns: 1fr; }
.related .cover { min-height: 130px; }
.related .cover-word { font-size: 1.6rem; }
.related .post-card-body { padding: 20px 22px; }
.related .post-card h2 { font-size: 1.15rem; }

/* ---------- CATEGORÍAS EN MÓVIL ---------- */
.lib-cats-m { display: none; }
.lib-cats-m .chip { white-space: nowrap; background: var(--av-paper); padding: 9px 12px; }
.lib-cats-m .chip.is-active { background: var(--av-navy); color: var(--av-paper); border-color: var(--av-navy); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-side { position: static; }
  .lib-side .toc { display: none; }
  .lib-cats-m { display: flex; gap: 8px; overflow-x: auto; margin: -8px 0 24px; padding-bottom: 6px; scrollbar-width: none; }
  .lib-cats-m::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
  .lib-hero { padding: 120px 0 52px; }
  .post-card { grid-template-columns: 1fr; }
  .post-card .cover { min-height: 150px; }
  .post-card--featured .cover { aspect-ratio: auto; }
  .post-card-body, .post-card--featured .post-card-body { padding: 22px; }
  .lib-meta { font-size: 10px; }
  .steps > li { padding-left: 48px; }
}