/* Kuotia blog: index, cards, covers and the article layout. Loaded after kuotia-site.css on blog pages only
   (blog_index.html, base_blog.html); uses its tokens, so light and dark follow automatically.

   Components a post body can use (inside .kb-content):
   - .kb-callout.<type> with a first child <p class="kb-label">: info "Clave", tip "Consejo", warning "Ojo",
     danger "Cuidado", plazo "Plazo", kuotia "Cómo lo hacemos en Kuotia". Then an optional <h4> and <p>s.
   - .kb-example: worked example, <p class="kb-label">Ejemplo</p> + <h4> + table/paragraphs.
     Totals: <tr class="total">; the figure that answers the example: <td class="kb-result">.
   - .kb-table-wrap > table.kb-table: data tables; numeric columns are right-aligned by kuotia-site.js.
   - ol.kb-steps: a real procedure, one <li> per step (numbered tiles joined by a line).
   - .kb-co: a company named inline, {% include 'autonomos/public/_logo.html' with name='stripe' %} + name.
   The "En resumen" box, the header and the closing block come from base_blog.html. */

/* ───────────── Covers (blog/_cover.html) ───────────── */
.cv {
  --cv-bg: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --cv-dot: color-mix(in srgb, var(--accent) 20%, transparent);
  --cv-paper: var(--surface);
  --cv-edge: color-mix(in srgb, var(--ink) 16%, var(--surface));
  --cv-bar: color-mix(in srgb, var(--ink) 9%, var(--surface));
  --cv-bar2: color-mix(in srgb, var(--ink) 20%, var(--surface));
  --cv-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  background-color: var(--cv-bg);
  background-image: radial-gradient(var(--cv-dot) 1px, transparent 1.3px);
  background-size: 16px 16px; background-position: 8px 8px;
}
:root[data-theme="dark"] .cv { --cv-bg: color-mix(in srgb, var(--accent) 9%, var(--bg)); --cv-dot: color-mix(in srgb, var(--accent) 22%, transparent); --cv-soft: color-mix(in srgb, var(--accent) 26%, var(--surface)); --cv-edge: color-mix(in srgb, var(--ink) 22%, var(--surface)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv { --cv-bg: color-mix(in srgb, var(--accent) 9%, var(--bg)); --cv-dot: color-mix(in srgb, var(--accent) 22%, transparent); --cv-soft: color-mix(in srgb, var(--accent) 26%, var(--surface)); --cv-edge: color-mix(in srgb, var(--ink) 22%, var(--surface)); }
}
.cv svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv text { font-family: var(--font); font-weight: 650; letter-spacing: -.02em; }
.cv .cv-sh { fill: var(--ink); opacity: .07; }
.cv .cv-p { fill: var(--cv-paper); stroke: var(--cv-edge); stroke-width: 1.5; }
.cv .cv-l { fill: var(--cv-bar); }
.cv .cv-l2 { fill: var(--cv-bar2); }
.cv .cv-a { fill: var(--accent); }
.cv .cv-as { fill: var(--cv-soft); }
.cv .cv-ao { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.cv .cv-ao2 { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.cv .cv-box { fill: var(--surface-2); stroke: var(--cv-edge); stroke-width: 1.2; }
.cv .cv-cell { fill: var(--cv-bar); }
.cv .cv-t { fill: var(--ink); }
.cv .cv-tm { fill: var(--muted); font-weight: 560; letter-spacing: 0; }
.cv .cv-ta { fill: #fff; }
.cv .cv-tat { fill: var(--accent-ink); }
.cv .cv-dash { stroke: var(--cv-edge); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.cv .cv-coin { fill: var(--cv-soft); stroke: var(--accent); stroke-width: 1.5; }
.cv .cv-coin2 { fill: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.cv .cv-wheel { fill: var(--cv-bar2); }
.cv .cv-bar { fill: var(--cv-soft); }
.cv .cv-bar2 { fill: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.cv .cv-pbar { fill: var(--cv-paper); stroke: var(--cv-edge); stroke-width: 1.5; }
.cv .cv-fold { fill: var(--cv-bar); stroke: var(--cv-edge); stroke-width: 1.5; }
.cv .cv-fold2 { fill: var(--cv-soft); stroke: color-mix(in srgb, var(--accent) 40%, var(--surface)); stroke-width: 1.5; }
.cv .cv-arrow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cv .cv-arrow2 { fill: none; stroke: var(--cv-bar2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cv .cv-check { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cv .cv-check-lg { stroke-width: 10; }
.cv .cv-side { fill: var(--surface-2); }
.cv .cv-qr { fill: var(--ink); }
.cv .cv-grid { fill: none; stroke: var(--cv-edge); stroke-width: 1.5; }
.cv .cv-star { fill: var(--accent); }
.cv .cv-logo { color: var(--ink); fill: var(--ink); }
.cv .cv-link { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, var(--surface)); stroke-width: 2; stroke-dasharray: 5 5; }
.cv .cv-line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }

/* ───────────── Cards ───────────── */
.cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.card { display: flex; flex-direction: column; height: 100%; color: inherit; border-radius: 16px; }
.card .cv { transition: border-color .2s ease; }
.card .cv svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.card:hover .cv { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.card:hover .cv svg { transform: scale(1.025); }
.card h3 { margin-top: 18px; font-size: 1.125rem; line-height: 1.35; letter-spacing: -.014em; transition: color .15s; }
.card:hover h3 { color: var(--accent-ink); }
.card-dek { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.card-meta > * + *::before { content: "·"; margin: 0 .55em; color: var(--line-strong); }
.card-meta .card-cat { color: var(--ink-2); font-weight: 560; }
.card:focus-visible { box-shadow: none; }
.card:focus-visible .cv { box-shadow: var(--focus); }

/* ───────────── Blog index ───────────── */
.blog-head { padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3vw, 40px); }
.blog-head h1 { font-size: var(--fs-h1-page); line-height: 1.08; }
.blog-head .lead { margin-top: 16px; max-width: 38em; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; }

.feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: center; color: inherit; padding-bottom: clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.feature .cv { border-radius: 18px; }
.feature .cv svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.feature:hover .cv svg { transform: scale(1.02); }
.feature .card-meta { margin-top: 0; padding-top: 0; font-size: var(--fs-sm); }
.feature h2 { margin-top: 14px; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -.026em; transition: color .15s; }
.feature:hover h2 { color: var(--accent-ink); }
.feature-dek { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-read); line-height: 1.6; max-width: 36em; }
.feature .link-arrow { margin-top: 22px; color: var(--accent-ink); }
.feature:focus-visible { box-shadow: none; }
.feature:focus-visible .cv { box-shadow: var(--focus); }

.blog-guides { padding-top: clamp(32px, 4vw, 48px); scroll-margin-top: calc(var(--head-h) + 8px); }
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-filter a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 560; white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.blog-filter a span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.blog-filter a:hover { color: var(--ink); border-color: var(--line-strong); }
.blog-filter a.is-on { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.blog-filter a.is-on span { color: var(--accent-ink); }

.blog-sec { padding-top: 44px; scroll-margin-top: calc(var(--head-h) + 64px); }
.blog-sec[hidden] { display: none; }
.blog-sec + .blog-sec { margin-top: 20px; }
.blog-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; margin-bottom: 24px; }
.blog-sec-head h2 { font-size: 1.375rem; letter-spacing: -.018em; }
.blog-sec-head p { color: var(--muted); font-size: var(--fs-sm); max-width: 52ch; }

/* ───────────── Closing block with the flow (index and articles) ───────────── */
.blog-close {
  margin: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 40px 72px; align-items: center; padding: clamp(28px, 4.5vw, 56px); border: 1px solid var(--line); border-radius: 22px; background: var(--bg-soft);
}
.blog-close h2 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.125rem); line-height: 1.15; letter-spacing: -.026em; max-width: 16ch; }
.blog-close p { margin-top: 16px; color: var(--ink-2); font-size: var(--fs-read); line-height: 1.6; max-width: 34em; }
.blog-close .cta-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.blog-close .flow { justify-self: end; max-width: 380px; }

/* ───────────── Article header ───────────── */
.art-hero { padding: clamp(28px, 4vw, 52px) 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.art-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px 64px; align-items: center; }
.art-hero .crumbs { margin-bottom: 16px; }
.art-hero h1 { font-size: clamp(2rem, 1.4rem + 1.9vw, 2.875rem); line-height: 1.1; letter-spacing: -.03em; max-width: 22ch; }
.art-dek { margin-top: 16px; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; max-width: 36em; }
.art-byline { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.art-byline > * + *::before { content: "·"; margin: 0 .6em; color: var(--line-strong); }
.art-byline > .art-dates { flex-basis: 100%; }
.art-byline > .art-dates::before { content: none; }
.art-by { display: inline-flex; align-items: center; gap: 8px; }
.art-by-mark { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.art-by-mark .k-mark { width: 16px; height: 16px; color: var(--brand-ink); --k-mark-accent: var(--accent); }
.art-byline a { color: var(--ink-2); font-weight: 560; }
.art-byline a:hover { color: var(--accent-ink); }
.art-hero .cv { border-radius: 18px; }

/* ───────────── Article grid ───────────── */
.art-grid { display: grid; grid-template-columns: 220px minmax(0, 660px); gap: 0 80px; justify-content: start; padding-top: clamp(32px, 4vw, 48px); }
.art-aside { position: sticky; top: calc(var(--head-h) + 32px); padding-top: 4px; align-self: start; max-height: calc(100vh - var(--head-h) - 64px); overflow-y: auto; }
.art-main { min-width: 0; }

/* Table of contents (.kb-toc from each post) */
.kb-toc { font-size: var(--fs-sm); }
.kb-toc h2 { font-size: var(--fs-xs) !important; font-weight: 600; color: var(--muted); margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; letter-spacing: 0; }
.kb-toc h2 i, .kb-toc .kb-toc-num { display: none; }
.kb-toc-grid { border-left: 1px solid var(--line); display: block; }
.kb-toc-item { display: block; padding: 0; border: 0; }
.kb-toc-item a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.4; transition: color .15s, border-color .15s; }
.kb-toc-item a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.kb-toc-item a.is-active { color: var(--ink); font-weight: 560; border-left-color: var(--accent); }
.toc-toggle { display: none; }

/* En resumen */
.kb-summary { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); padding: 22px 26px 24px; margin-bottom: 44px; }
.kb-summary h2 { font-size: 1rem; letter-spacing: -.005em; line-height: 1.4; }
.kb-summary ul { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.kb-summary li { position: relative; padding-left: 26px; color: var(--ink); font-size: var(--fs-read); line-height: 1.55; }
.kb-summary li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.kb-summary li strong { font-weight: 640; }
.kb-summary:not(:has(li)) { display: none; }

/* One quiet signup line: under "En resumen" on phones and tablets, under the TOC in the desktop aside */
.kb-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin: 0 0 44px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45;
}
.kb-summary + .kb-cta { margin-top: -28px; }
.kb-cta-price { color: var(--muted); white-space: nowrap; }
.kb-aside-cta {
  display: grid; gap: 4px; margin-top: 28px; padding: 16px 0 0 16px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 560; line-height: 1.4;
}
.kb-aside-cta span { color: var(--muted); font-weight: 400; }
.kb-aside-cta .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 1101px) { .kb-cta { display: none; } }

/* ───────────── Article body ───────────── */
.kb-content { font-size: var(--fs-read); line-height: 1.75; color: var(--ink-2); }
.kb-content > * + * { margin-top: 1.1em; }
.kb-content h2 { font-size: 1.625rem; line-height: 1.22; letter-spacing: -.022em; margin-top: 2.4em; scroll-margin-top: calc(var(--head-h) + 20px); }
.kb-content > h2:first-child, .kb-content > .art-lead + h2 { margin-top: 0; }
.kb-content > .art-lead + h2 { margin-top: 1.8em !important; }
.kb-content h3 { font-size: 1.1875rem; line-height: 1.35; margin-top: 2em; scroll-margin-top: calc(var(--head-h) + 20px); }
.kb-content h4 { font-size: 1.0625rem; margin-top: 1.6em; }
.kb-content h2 + *, .kb-content h3 + *, .kb-content h4 + * { margin-top: .7em; }
.kb-content ul, .kb-content ol { padding-left: 1.3em; }
.kb-content li { padding-left: .2em; }
.kb-content li + li { margin-top: .55em; }
.kb-content ul > li::marker { color: var(--accent); }
.kb-content ol > li::marker { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }
.kb-content strong { color: var(--ink); }
.kb-content a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.kb-content a:hover { text-decoration-color: currentColor; }
.kb-content blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.kb-content blockquote.kb-letter { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; padding: 20px 24px; font-size: var(--fs-base); line-height: 1.7; color: var(--ink); }
.kb-letter p + p { margin-top: .8em; }
.kb-content code { font-size: .9em; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 0 .3em; }
.kb-content i.fas, .kb-content i.far, .kb-content i.fab { display: none; }
.kb-content .kb-formula {
  margin: 1.6em 0; padding: 18px 22px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--surface); color: var(--ink); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; line-height: 1.5;
}
.art-lead { font-size: 1.25rem; line-height: 1.6; color: var(--ink); letter-spacing: -.008em; }

/* Companies named inline */
.kb-co { white-space: nowrap; }
.kb-co .logo-mark { width: 1.05em; height: 1.05em; vertical-align: -.14em; margin-right: .3em; fill: currentColor; color: var(--ink); }

/* Callouts: a label, then the text */
.kb-callout, .kb-example { --tone: var(--accent-ink); --tone-line: color-mix(in srgb, var(--accent) 30%, var(--line)); --tone-bg: var(--accent-soft); }
.kb-callout { position: relative; display: block; border: 1px solid var(--tone-line); background: var(--tone-bg); padding: 18px 22px 20px; border-radius: 14px; margin: 1.8em 0 !important; }
.kb-callout-icon { display: none !important; }
.kb-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; color: var(--tone); font-size: var(--fs-xs); font-weight: 680; letter-spacing: .01em; line-height: 1.3; }
.kb-label::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.kb-callout-content h3, .kb-callout-content h4, .kb-callout > h4 { font-size: var(--fs-read); margin: 0 0 6px !important; color: var(--ink); line-height: 1.4; letter-spacing: -.008em; }
.kb-callout-content p, .kb-callout > p:not(.kb-label) { margin: 0; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-2); }
.kb-callout-content > * + *, .kb-callout > p + p:not(.kb-label) { margin-top: 8px; }
.kb-callout-content ul, .kb-callout-content ol { padding-left: 1.2em; font-size: var(--fs-base); line-height: 1.65; margin-top: 8px; }
.kb-callout-content li + li { margin-top: 4px; }
.kb-callout-content .kb-label { margin-bottom: 8px !important; }
.kb-callout-content .kb-label + h4 { margin-top: 0 !important; }

.kb-callout, .kb-callout.info { --tone: var(--ink-2); --tone-line: var(--line); --tone-bg: var(--surface-2);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zM7.2 7h1.6v4.5H7.2zM8 4.2a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E"); }
.kb-callout.tip { --tone: var(--accent-ink); --tone-line: color-mix(in srgb, var(--accent) 28%, var(--line)); --tone-bg: var(--accent-soft);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a5 5 0 0 0-3 9c.6.5 1 1.1 1 1.8V12h4v-.2c0-.7.4-1.3 1-1.8a5 5 0 0 0-3-9zM6 13.2h4V14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.kb-callout.warning { --tone: #8a5300; --tone-line: color-mix(in srgb, var(--warn-line) 40%, var(--line)); --tone-bg: var(--warn-soft);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2c.4 0 .8.2 1 .6l6.3 11.1c.4.8-.1 1.7-1 1.7H1.7c-.9 0-1.4-.9-1-1.7L7 1.8c.2-.4.6-.6 1-.6zM7.2 5.5v4.2h1.6V5.5zM8 10.8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E"); }
.kb-callout.danger { --tone: #a32a19; --tone-line: color-mix(in srgb, var(--danger-line) 35%, var(--line)); --tone-bg: var(--danger-soft);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm2.7 3.2 1.1 1.1L9.1 8l2.7 2.7-1.1 1.1L8 9.1l-2.7 2.7-1.1-1.1L6.9 8 4.2 5.3l1.1-1.1L8 6.9z'/%3E%3C/svg%3E"); }
.kb-callout.plazo { --tone: var(--accent-ink); --tone-line: color-mix(in srgb, var(--accent) 28%, var(--line)); --tone-bg: var(--accent-soft);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 1h1.5v1.5h4V1h1.5v1.5H13a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 13 14.5H3A1.5 1.5 0 0 1 1.5 13V4A1.5 1.5 0 0 1 3 2.5h1.5zM3 6.5V13h10V6.5zm6.5 2h2.5V11H9.5z'/%3E%3C/svg%3E"); }
.kb-callout.kuotia, .kb-callout.cta { --tone: var(--ink); --tone-line: var(--line); --tone-bg: var(--bg-soft);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 5h6v22H6zM19.6 5h7.6L12 22v-8.5zM15.1 19.9l4.1-4.6L28.6 27h-7.8z'/%3E%3C/svg%3E"); }
.kb-callout.kuotia .kb-label::before, .kb-callout.cta .kb-label::before { background: var(--accent); }
:root[data-theme="dark"] .kb-callout.warning { --tone: #f0b552; }
:root[data-theme="dark"] .kb-callout.danger { --tone: #f59585; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kb-callout.warning { --tone: #f0b552; }
  :root:not([data-theme="light"]) .kb-callout.danger { --tone: #f59585; }
}

/* Worked examples: a worksheet card */
.kb-example {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h10a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 13 15H3a1.5 1.5 0 0 1-1.5-1.5v-11A1.5 1.5 0 0 1 3 1zm0 1.5v3h10v-3zm0 4.5v6.5h2.5V7zm4 0v1.8h2V7zm3.5 0v1.8H13V7zM7 10.2V12h2v-1.8zm3.5 0V12H13v-1.8z'/%3E%3C/svg%3E");
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 20px 22px 18px; margin: 1.8em 0 !important; overflow-x: auto;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.kb-example + .kb-example { margin-top: -.6em !important; }
.kb-example h4 { font-size: var(--fs-read); margin: 0 0 14px !important; color: var(--ink); letter-spacing: -.008em; }
.kb-example .kb-label + h4 { margin-top: 0 !important; }
.kb-example p:not(.kb-label) { font-size: var(--fs-base); line-height: 1.7; margin: 0 0 8px; }
.kb-example p:last-child { margin-bottom: 0; }
.kb-example table + p, .kb-example p + table { margin-top: 14px !important; }
.kb-example ul, .kb-example ol { font-size: var(--fs-base); padding-left: 1.2em; }
.kb-example table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; margin: 0; }
.kb-example th, .kb-example td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kb-example thead th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); border-bottom-color: var(--line-strong); white-space: nowrap; }
.kb-example th:first-child, .kb-example td:first-child { padding-left: 0; }
.kb-example th:last-child, .kb-example td:last-child { padding-right: 0; }
.kb-example tbody tr:last-child td { border-bottom: 0; }
.kb-example tbody tr:last-child:has(strong) td, .kb-example tr.total td { border-top: 1px solid var(--line-strong); color: var(--ink); }
.kb-example .kb-result, .kb-content .kb-result { color: var(--accent-ink); font-weight: 650; }
.kb-example .kb-result strong, .kb-content .kb-result strong { color: inherit; }

/* Data tables */
.kb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin: 1.8em 0 !important; background: var(--surface); }
.kb-table-wrap.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.kb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; font-variant-numeric: tabular-nums; }
.kb-table th, .kb-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kb-table thead th { background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border-bottom-color: var(--line-strong); }
.kb-table tbody td:first-child { color: var(--ink); }
.kb-table tbody tr:last-child td, .kb-table tbody tr:last-child th { border-bottom: 0; }
.kb-table tbody tr.total td { color: var(--ink); font-weight: 650; border-top: 1px solid var(--line-strong); }
.kb-content td.num, .kb-content th.num { text-align: right; white-space: nowrap; }

/* Step lists */
.kb-content ol.kb-steps { list-style: none; padding-left: 0; counter-reset: kb-step; margin-top: 1.4em; }
.kb-steps > li { position: relative; counter-increment: kb-step; padding: 2px 0 0 48px; min-height: 30px; }
.kb-steps > li + li { margin-top: 18px; }
.kb-steps > li::before {
  content: counter(kb-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.kb-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: -14px; width: 1px; background: var(--line-strong); }

/* FAQ */
.kb-faq { margin-top: 64px; }
.kb-faq > h2 { font-size: 1.625rem; line-height: 1.22; letter-spacing: -.022em; margin-bottom: 18px; scroll-margin-top: calc(var(--head-h) + 20px); }
.kb-faq-item { border-bottom: 1px solid var(--line); }
.kb-faq > h2 + .kb-faq-item { border-top: 1px solid var(--line); }
.kb-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left;
  background: none; border: 0; padding: 18px 0; min-height: 60px; cursor: pointer;
  font: 600 var(--fs-read)/1.4 var(--font); color: var(--ink); letter-spacing: -.008em;
}
.kb-faq-q i { display: none; }
.kb-faq-q::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
  background: linear-gradient(var(--ink-2), var(--ink-2)) center / 10px 1.6px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) center / 1.6px 10px no-repeat;
  transition: transform .2s ease, background-size .2s ease;
}
.kb-faq-item.active .kb-faq-q::after { background-size: 10px 1.6px, 1.6px 0; }
.kb-faq-q:hover { color: var(--accent-ink); }
.kb-faq-a { display: none; padding: 0 46px 22px 0; color: var(--ink-2); font-size: var(--fs-read); line-height: 1.7; }
.kb-faq-a p + p { margin-top: 10px; }
.kb-faq-item.active .kb-faq-a { display: block; }
.no-js .kb-faq-a { display: block; }

/* About the authors */
.art-about { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.art-about-mark { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); display: grid; place-items: center; background: var(--surface); }
.art-about-mark .k-mark { width: 26px; height: 26px; color: var(--brand-ink); --k-mark-accent: var(--accent); }
.art-about p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.art-about p strong { display: block; color: var(--ink); font-size: var(--fs-base); }

/* Related */
.art-related { padding-bottom: clamp(48px, 6vw, 80px); }
.art-related > h2 { font-size: 1.375rem; letter-spacing: -.018em; margin-bottom: 24px; }
.blog-close + .art-related { margin-top: 0; }

/* ───────────── Responsive ───────────── */
@media (max-width: 1100px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 720px; }
  .art-aside { position: static; max-height: none; overflow: visible; margin-bottom: 24px; }
  .kb-aside-cta { display: none; }
  .kb-toc { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); }
  .kb-toc h2 { margin: 0 !important; }
  .toc-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 0 18px;
    background: none; border: 0; cursor: pointer; font: 600 var(--fs-sm)/1 var(--font); color: var(--ink);
  }
  .toc-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
  .kb-toc.open .toc-toggle::after { transform: rotate(-135deg); }
  .kb-toc.enhanced > h2 { display: none !important; }
  .kb-toc.enhanced .kb-toc-grid { display: none; }
  .kb-toc.enhanced.open .kb-toc-grid { display: block; border-left: 0; border-top: 1px solid var(--line); padding: 8px 0; }
  .kb-toc:not(.enhanced) { padding: 14px 18px; }
  .kb-toc.enhanced.open .kb-toc-item a { padding: 10px 18px; border-left: 0; margin: 0; }
  .art-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px 40px; }
}
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .blog-close { grid-template-columns: minmax(0, 1fr); }
  .blog-close .flow { justify-self: center; width: 100%; }
}
@media (max-width: 760px) {
  .art-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .art-hero .cv { aspect-ratio: 2 / 1; }
  .art-hero .cv svg { inset: -12% 0; height: 124%; }
}
@media (max-width: 600px) {
  .blog-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
  .blog-filter::-webkit-scrollbar { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .blog-head .lead { font-size: var(--fs-read); }
  .art-hero h1 { font-size: 1.875rem; }
  .art-dek { font-size: var(--fs-read); }
  .art-byline { gap: 4px 16px; }
  .art-byline > * + *::before { content: none; }
  .art-by { flex: 1 1 100%; margin-bottom: 4px; }
  .kb-summary { padding: 18px 18px 20px; margin-bottom: 36px; }
  .kb-callout { padding: 16px 18px 18px; }
  .kb-example { padding: 16px 16px 14px; }
  .kb-content h2, .kb-faq > h2 { font-size: 1.4375rem; }
  .blog-close { padding: 24px 20px; border-radius: 18px; }
  .blog-close .btn { flex: 1 1 100%; }
  .kb-faq-a { padding-right: 0; }
}
@media print {
  .art-aside, .blog-close, .art-related, .art-hero .cv { display: none !important; }
  .kb-faq-a { display: block !important; }
}

/* ───────────── Guide visuals (pillar guides) ─────────────
   All static HTML/CSS, final frame without JS; numbers in the markup must match the article.
   - .kf: a form as AEAT shows it, one .kf-row per casilla (<span class="kf-c">07</span> label <b>amount</b>),
     grouped in .kf-sec with a .kf-sec-h; .kf-op marks a formula row ("27 − 45"), .kf-res the result.
   - .kd: yes/no route, .kd-q question cards and .kd-a answers (.kd-yes / .kd-no). */
.kf { margin: 2em 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; font-size: var(--fs-sm); line-height: 1.45; }
.kf-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-weight: 600; }
.kf-tag { flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 28px; padding: 0 8px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kf-h small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: var(--fs-xs); }
.kf-sec { padding: 6px 18px 10px; }
.kf-sec + .kf-sec { border-top: 1px dashed var(--line-strong); }
.kf-sec-h { margin: 8px 0 4px !important; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.kf-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); margin: 0 !important; color: var(--ink-2); }
.kf-sec .kf-row:last-child { border-bottom: 0; }
.kf-c { justify-self: start; min-width: 34px; padding: 1px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.kf-row b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.kf-row em { font-style: normal; color: var(--muted); font-size: var(--fs-xs); }
.kf-op b { color: var(--ink-2); font-weight: 560; }
.kf-zero b { color: var(--muted); font-weight: 500; }
.kf-res { margin: 0 !important; padding: 14px 18px; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.kf-res b { font-size: 1.25rem; letter-spacing: -.02em; color: var(--accent-ink); }
.kf-note { margin: 0 !important; padding: 10px 18px 14px; color: var(--muted); font-size: var(--fs-xs); }

.kd { margin: 2em 0 !important; display: grid; gap: 10px; counter-reset: kd; }
.kd-q { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.kd-q > .kd-qt { grid-column: 1 / -1; margin: 0 !important; padding: 12px 16px; font-weight: 600; color: var(--ink); font-size: var(--fs-base); line-height: 1.45; border-bottom: 1px solid var(--line); counter-increment: kd; }
.kd-q > .kd-qt::before { content: counter(kd); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.kd-a { margin: 0 !important; padding: 10px 16px 12px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.kd-a + .kd-a { border-left: 1px solid var(--line); }
.kd-a b { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.kd-a.kd-end { background: var(--accent-soft); }
.kd-a.kd-end b { color: var(--accent-ink); }

@media (max-width: 600px) {
  .kd-q { grid-template-columns: minmax(0, 1fr); }
  .kd-a + .kd-a { border-left: 0; border-top: 1px solid var(--line); }
  .kf-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; }
  .kf-h { padding: 12px 14px; }
  .kf-sec { padding: 4px 14px 8px; }
}

/* Guide calculators (form.kcalc, js/kuotia-guides.js) and the sources list at the end of a guide. */
.kb-example td + td { white-space: nowrap; }
.kcalc { margin: 1.6em 0 !important; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.kcalc[hidden] { display: none; }
.kcalc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.kcalc label { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; font-size: var(--fs-sm); font-weight: 560; color: var(--ink); line-height: 1.4; }
.kcalc input[inputmode] { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.kcalc input[inputmode]:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.kcalc .kcalc-check { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; font-weight: 500; }
.kcalc .kcalc-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.kcalc .kf { margin: 18px 0 0 !important; }
.kb-content ul.kb-sources { font-size: var(--fs-sm); line-height: 1.6; }
.kb-content ul.kb-sources li + li { margin-top: .35em; }
@media (max-width: 600px) {
  .kcalc { padding: 14px; }
  .kcalc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Direct answer at the top of a pillar guide (replaces the "En resumen" box): lead paragraph + .kstat figures. */
.kb-answer { margin-bottom: 40px; }
.kb-answer .art-lead { margin: 0; }
.kb-answer + .kb-cta { margin-top: 0; }