/* ================================================================
   DEKEVA — blog-kit.css
   Componentes de contenido para las entradas en «modo HTML».

   Tres capas, de menos a más fuerza:
     1. Prosa: p, h2, ul, a… sin clase. Especificidad de una sola clase
        (.dkv-post :where(…)), así que cualquier CSS que traiga el post
        la puede ajustar.
     2. CSS del post: lo que pegue Pablo, encerrado en .dkv-post por
        inc/blog-kit-core.php. Nunca sale del artículo.
     3. Componentes kit-*: los manda el tema. El CSS del post no puede
        tocarlos (el filtro descarta sus reglas sobre clases kit-).

   Fuentes: el «font kill» de blog.css pone Inter a todo con !important.
   Aquí se devuelve Cormorant o JetBrains Mono donde toca, también con
   !important y más especificidad.
================================================================ */

.blog-single__body--html {
  width: min(1040px, 92vw);
}

.dkv-post {
  --k-ink:        #0d0d0b;
  --k-muted:      #6b6b68;
  --k-line:       rgba(13,13,11,0.1);
  --k-line-2:     rgba(13,13,11,0.22);
  --k-paper:      #ffffff;
  --k-soft:       #f5f5f3;
  --k-dark:       #0d0d0b;
  --k-on-dark:    #f2ede4;
  --k-muted-dark: #b4b3af;
  --k-blue:       #032FD4;
  --k-blue-dark:  #7C90FF;
  --k-blue-dim:   rgba(3,47,212,0.06);

  --k-display: 'Cormorant Garamond', Georgia, serif;
  --k-italic:  'Cormorant', Georgia, serif;
  --k-mono:    'JetBrains Mono', ui-monospace, monospace;

  --k-ease: cubic-bezier(.19,1,.22,1);
  --k-col:  720px;
  --k-wide: 1040px;
  --k-gap:  clamp(2.4rem, 5vw, 3.6rem);

  color: var(--k-ink);
}

/* Columna de lectura; kit-ancho sale a 1040.
   div.dkv-post > * pesa (0,1,1): gana al «* { margin: 0 }» que suelen traer
   los posts (0,1,0 una vez encerrado) y pierde contra sus reglas con clase. */
div.dkv-post > * { max-width: var(--k-col); margin-inline: auto; }
div.dkv-post > .kit-ancho { max-width: var(--k-wide); }

/* ════════════════════════════════════════════════════════════
   1 · PROSA (elementos sin componente)
═══════════════════════════════════════════════════════════ */
.dkv-post :where(p, ul, ol, dl, figure, pre, table) { margin-block: 0 1.4em; }

.dkv-post > :where(p:first-of-type)::first-letter {
  font-family: var(--k-display);
  font-weight: 400; font-size: 4.5em; line-height: .85;
  float: left; padding: .15em .15em 0 0;
  color: var(--k-blue);
}

.dkv-post :where(h2) {
  font-weight: 300;
  font-size: clamp(1.8rem, 2.8vw, 2.35rem);
  line-height: 1.18; letter-spacing: -.02em;
  margin: 2.4em auto .55em;
  padding-top: 1em;
  border-top: 1px solid var(--k-line);
  text-wrap: balance;
}
.dkv-post :where(h2, h3) { scroll-margin-top: 7.5rem; }
.dkv-post :where(h3) {
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  line-height: 1.25; letter-spacing: -.015em;
  margin: 1.9em auto .45em;
  text-wrap: balance;
}
.dkv-post :where(h4) {
  font-weight: 500; font-size: 1.18rem;
  margin: 1.6em auto .4em;
}
.dkv-post :where(h2, h3, h4) em { color: var(--k-blue); }

.dkv-post :where(a) {
  color: var(--k-blue);
  border-bottom: 1px solid currentColor;
  transition: opacity .3s var(--k-ease);
}
.dkv-post :where(a):hover { opacity: .65; }

.dkv-post :where(strong, b) { font-weight: 500; }
.dkv-post :where(mark) { background: var(--k-blue-dim); color: inherit; padding: 0 .15em; }

.dkv-post :where(ul, ol) { padding-left: 1.4em; }
.dkv-post :where(li) + :where(li) { margin-top: .5em; }
.dkv-post :where(ul) > :where(li)::marker { color: var(--k-blue); }

.dkv-post :where(blockquote) {
  margin: 2.4em 0;
  padding-left: 1.6rem;
  border-left: 1px solid var(--k-blue);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.4;
}

.dkv-post :where(hr) {
  border: 0; height: 1px; background: var(--k-line);
  margin: 3em auto;
}

.dkv-post :where(img, video, iframe) { max-width: 100%; }
.dkv-post :where(img) { height: auto; }
.dkv-post :where(figcaption) {
  margin-top: .7em;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-muted);
}

.dkv-post :where(table) { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.dkv-post :where(th) {
  text-align: left; vertical-align: bottom;
  padding: 0 1.2em .8em 0;
  font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--k-muted);
  border-bottom: 1px solid var(--k-ink);
}
.dkv-post :where(td) {
  padding: .95em 1.2em .95em 0; vertical-align: top;
  border-bottom: 1px solid var(--k-line);
}

.dkv-post :where(code) {
  background: var(--k-soft); padding: .12em .4em;
  font-size: .88em; color: var(--k-blue);
}
.dkv-post :where(pre) {
  background: var(--k-dark); color: var(--k-on-dark);
  padding: 1.4rem 1.6rem; overflow-x: auto;
  font-size: .85rem; line-height: 1.7;
}
.dkv-post :where(pre) :where(code) { background: none; padding: 0; color: inherit; }

/* Fuentes de la prosa (ganan al font kill del blog) */
body .dkv-post :where(th, figcaption, code, pre),
body .dkv-post :where(th, figcaption, code, pre) * {
  font-family: var(--k-mono) !important;
}

/* ════════════════════════════════════════════════════════════
   2 · COMPONENTES kit-*
═══════════════════════════════════════════════════════════ */

/* Rótulos: una sola voz para todos los títulos pequeños del kit */
.dkv-post .kit-claves__titulo,
.dkv-post .kit-nota__titulo,
.dkv-post .kit-cifra__fuente,
.dkv-post .kit-versus__etiqueta,
.dkv-post .kit-check__titulo,
.dkv-post .kit-copiar__titulo,
.dkv-post .kit-cta__nota,
.dkv-post .kit-herramienta__titulo,
.dkv-post .kit-indice__titulo,
.dkv-post .kit-pestanas__tab,
.dkv-post .kit-copiar__btn,
.dkv-post .kit-btn,
.dkv-post .kit-etiqueta,
.dkv-post .kit-si,
.dkv-post .kit-no,
.dkv-post .kit-cita figcaption {
  font-family: var(--k-mono) !important;
  font-size: 10.5px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.5;
}
.dkv-post .kit-btn *, .dkv-post .kit-etiqueta * { font-family: var(--k-mono) !important; }

/* Display: cifras, citas, títulos de bloque (y lo que lleven dentro) */
.dkv-post .kit-cifra__num, .dkv-post .kit-cifra__num *,
.dkv-post .kit-cita blockquote, .dkv-post .kit-cita blockquote *,
.dkv-post .kit-versus__dato, .dkv-post .kit-versus__dato *,
.dkv-post .kit-cta__titulo, .dkv-post .kit-cta__titulo *,
.dkv-post .kit-faq > summary, .dkv-post .kit-faq > summary *,
.dkv-post .kit-pasos > li::before {
  font-family: var(--k-display) !important;
}
.dkv-post .kit-cita em,
.dkv-post .kit-cta__titulo em,
.dkv-post .kit-pasos > li::before {
  font-family: var(--k-italic) !important;
  font-style: italic;
}

/* ── Entradilla ─────────────────────────────────────────── */
.dkv-post .kit-entradilla {
  margin: 0 auto 2.2em;
  font-size: clamp(1.18rem, 1.9vw, 1.4rem);
  line-height: 1.55; font-weight: 300;
  color: var(--k-ink);
  text-wrap: pretty;
}
.dkv-post .kit-entradilla::first-letter { all: unset; }

/* ── Índice ─────────────────────────────────────────────── */
.dkv-post .kit-indice { margin: 0 auto var(--k-gap); }
.dkv-post .kit-indice:empty { display: none; }
.dkv-post .kit-indice__titulo { margin: 0 0 1rem; color: var(--k-muted); }
.dkv-post .kit-indice ol {
  list-style: none; margin: 0; padding: 0;
  counter-reset: kit-indice;
  columns: 2; column-gap: 2.4rem;
}
.dkv-post .kit-indice li {
  counter-increment: kit-indice;
  break-inside: avoid;
  display: grid; grid-template-columns: 2.2rem 1fr;
  padding: .55rem 0; margin: 0;
  border-top: 1px solid var(--k-line);
  font-size: .95rem; line-height: 1.4;
}
.dkv-post .kit-indice li::before {
  content: counter(kit-indice, decimal-leading-zero);
  font-family: var(--k-mono) !important;
  font-size: 10.5px; color: var(--k-muted); padding-top: .25em;
}
.dkv-post .kit-indice a { color: var(--k-ink); border: 0; transition: color .3s var(--k-ease); }
.dkv-post .kit-indice a:hover { color: var(--k-blue); opacity: 1; }
@media (max-width: 640px) { .dkv-post .kit-indice ol { columns: 1; } }

/* ── Puntos clave ───────────────────────────────────────── */
.dkv-post .kit-claves {
  margin: 0 auto var(--k-gap);
  padding: clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.4rem, 3.6vw, 2.6rem);
  background: var(--k-soft);
}
.dkv-post .kit-claves__titulo { margin: 0 0 1.1rem; color: var(--k-blue); }
.dkv-post .kit-claves ul { list-style: none; margin: 0; padding: 0; }
.dkv-post .kit-claves li {
  position: relative;
  margin: 0; padding-left: 1.8rem;
  font-size: 1.02rem; line-height: 1.6;
}
.dkv-post .kit-claves li + li { margin-top: .75rem; }
.dkv-post .kit-claves li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: .9rem; height: 1px; background: var(--k-blue);
}

/* ── Nota ───────────────────────────────────────────────── */
.dkv-post .kit-nota {
  position: relative;
  display: grid; grid-template-columns: 8.5rem 1fr; column-gap: 1.6rem;
  margin: var(--k-gap) auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--k-line);
}
.dkv-post .kit-nota::before {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 3rem; height: 1px; background: var(--k-blue);
}
.dkv-post .kit-nota__titulo { grid-column: 1; margin: .35em 0 0; color: var(--k-blue); }
.dkv-post .kit-nota > :not(.kit-nota__titulo) { grid-column: 2; margin: 0; }
.dkv-post .kit-nota > :not(.kit-nota__titulo) + :not(.kit-nota__titulo) { margin-top: .8em; }
.dkv-post .kit-nota--aviso::before { background: var(--k-ink); width: 100%; }
.dkv-post .kit-nota--aviso .kit-nota__titulo { color: var(--k-ink); }
@media (max-width: 640px) {
  .dkv-post .kit-nota { grid-template-columns: 1fr; }
  .dkv-post .kit-nota__titulo,
  .dkv-post .kit-nota > :not(.kit-nota__titulo) { grid-column: 1; }
  .dkv-post .kit-nota__titulo { margin: 0 0 .6rem; }
}

/* ── Cita destacada ─────────────────────────────────────── */
.dkv-post .kit-cita { margin: calc(var(--k-gap) * 1.3) auto; padding: 0; }
.dkv-post .kit-cita::before {
  content: ''; display: block;
  width: 2.5rem; height: 1px; background: var(--k-blue);
  margin-bottom: 1.6rem;
}
.dkv-post .kit-cita blockquote {
  margin: 0; padding: 0; border: 0;
  font-style: normal; font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.2; letter-spacing: -.015em;
  color: var(--k-ink);
  text-wrap: balance;
}
.dkv-post .kit-cita blockquote p { margin: 0; }
.dkv-post .kit-cita em { font-weight: 300; color: var(--k-blue); padding-bottom: .08em; }
.dkv-post .kit-cita figcaption { margin-top: 1.4rem; color: var(--k-muted); }

/* ── Cifras ─────────────────────────────────────────────── */
.dkv-post .kit-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem 0;
  margin: var(--k-gap) auto;
}
.dkv-post .kit-cifra {
  padding: 0 1.6rem;
  border-left: 1px solid var(--k-line);
}
.dkv-post .kit-cifra:first-child { border-left: 0; padding-left: 0; }
.dkv-post .kit-cifra > * { margin: 0; }
.dkv-post .kit-cifra__num {
  font-weight: 300;
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  color: var(--k-ink);
}
.dkv-post .kit-cifra__num em { font-style: normal; color: var(--k-blue); }
.dkv-post .kit-cifra__texto { margin-top: .8rem; font-size: .95rem; line-height: 1.5; }
.dkv-post .kit-cifra__fuente { margin-top: .9rem; color: var(--k-muted); letter-spacing: .12em; }
@media (max-width: 640px) {
  .dkv-post .kit-cifra { border-left: 0; padding: 1.2rem 0 0; border-top: 1px solid var(--k-line); }
  .dkv-post .kit-cifra:first-child { border-top: 0; padding-top: 0; }
}

/* ── Comparativa ────────────────────────────────────────── */
.dkv-post .kit-versus {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: var(--k-gap) auto;
}
.dkv-post .kit-versus__lado {
  padding: 1.3rem 2rem 0 0;
  border-top: 1px solid var(--k-line-2);
  color: var(--k-muted);
}
.dkv-post .kit-versus__lado + .kit-versus__lado {
  padding: 1.3rem 0 0 2rem;
  border-left: 1px solid var(--k-line);
}
.dkv-post .kit-versus__lado > * { margin: 0; }
.dkv-post .kit-versus__lado > * + * { margin-top: .8rem; }
.dkv-post .kit-versus__etiqueta { color: var(--k-muted); }
.dkv-post .kit-versus__dato {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.08; letter-spacing: -.02em;
  color: var(--k-muted);
}
.dkv-post .kit-versus__lado--bien { color: var(--k-ink); border-top-color: var(--k-blue); }
.dkv-post .kit-versus__lado--bien .kit-versus__etiqueta { color: var(--k-blue); }
.dkv-post .kit-versus__lado--bien .kit-versus__dato { color: var(--k-ink); }
@media (max-width: 640px) {
  .dkv-post .kit-versus { grid-template-columns: 1fr; row-gap: 1.8rem; }
  .dkv-post .kit-versus__lado,
  .dkv-post .kit-versus__lado + .kit-versus__lado { padding: 1.2rem 0 0; border-left: 0; }
}

/* ── Pasos ──────────────────────────────────────────────── */
.dkv-post .kit-pasos {
  list-style: none; margin: var(--k-gap) auto; padding: 0;
  counter-reset: kit-paso;
}
.dkv-post .kit-pasos > li {
  counter-increment: kit-paso;
  position: relative;
  display: grid; grid-template-columns: 3.6rem 1fr;
  margin: 0; padding: 0 0 2rem;
}
.dkv-post .kit-pasos > li:last-child { padding-bottom: 0; }
.dkv-post .kit-pasos > li::before {
  content: counter(kit-paso);
  grid-column: 1; grid-row: 1 / span 9;
  font-weight: 300; font-size: 2.1rem; line-height: 1;
  color: var(--k-blue);
}
.dkv-post .kit-pasos > li::after {
  content: ''; position: absolute;
  left: .55rem; top: 2.9rem; bottom: .9rem;
  width: 1px; background: var(--k-line);
}
.dkv-post .kit-pasos > li:last-child::after { display: none; }
.dkv-post .kit-pasos > li > * { grid-column: 2; margin: 0; }
.dkv-post .kit-pasos > li > h3,
.dkv-post .kit-pasos > li > h4 { margin: .15em 0 .4em; font-size: clamp(1.25rem, 1.7vw, 1.45rem); }
.dkv-post .kit-pasos > li > p + p { margin-top: .7em; }

/* ── Checklist ──────────────────────────────────────────── */
.dkv-post .kit-check {
  margin: var(--k-gap) auto;
  padding: 1.2rem 0;
  border-block: 1px solid var(--k-line);
}
.dkv-post .kit-check__titulo { margin: 0 0 .8rem; color: var(--k-muted); }
.dkv-post .kit-check ul { list-style: none; margin: 0; padding: 0; }
.dkv-post .kit-check li {
  position: relative;
  margin: 0; padding: .55rem 0 .55rem 2.2rem;
  line-height: 1.55;
  transition: color .35s var(--k-ease);
}
.dkv-post .kit-check li::before {
  content: ''; position: absolute; left: 0; top: .78rem;
  width: 1.05rem; height: 1.05rem;
  border: 1px solid var(--k-line-2);
  transition: background .35s var(--k-ease), border-color .35s var(--k-ease);
}
.dkv-post .kit-check li::after {
  content: ''; position: absolute; left: .37rem; top: .9rem;
  width: .32rem; height: .6rem;
  border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: transform .35s var(--k-ease), opacity .2s;
}
.dkv-post .kit-check li:hover::before { border-color: var(--k-blue); }
.dkv-post .kit-check li[aria-checked="true"] { color: var(--k-muted); }
.dkv-post .kit-check li[aria-checked="true"]::before { background: var(--k-blue); border-color: var(--k-blue); }
.dkv-post .kit-check li[aria-checked="true"]::after { transform: rotate(45deg) scale(1); opacity: 1; }
.dkv-post .kit-check li:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }

/* ── Tabla ──────────────────────────────────────────────── */
.dkv-post .kit-tabla {
  margin: var(--k-gap) auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.dkv-post .kit-tabla table { margin: 0; min-width: 34rem; }
.dkv-post .kit-si { color: var(--k-blue); letter-spacing: .12em; }
.dkv-post .kit-no { color: var(--k-muted); letter-spacing: .12em; }

/* ── Etiqueta ───────────────────────────────────────────── */
.dkv-post .kit-etiqueta {
  display: inline-block;
  padding: .3em .65em .25em;
  letter-spacing: .12em; white-space: nowrap;
  border: 1px solid var(--k-line-2);
  color: var(--k-muted);
}
.dkv-post .kit-etiqueta--alta { background: var(--k-blue); border-color: var(--k-blue); color: #fff; }
.dkv-post .kit-etiqueta--media { border-color: var(--k-blue); color: var(--k-blue); }
.dkv-post .kit-etiqueta--baja { color: var(--k-muted); }

/* ── Bloques ────────────────────────────────────────────── */
.dkv-post .kit-rejilla {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem 2.6rem;
  margin: var(--k-gap) auto;
}
.dkv-post .kit-rejilla__item { padding-top: 1rem; border-top: 1px solid var(--k-line-2); }
.dkv-post .kit-rejilla__item > * { margin: 0; }
.dkv-post .kit-rejilla__item > h3,
.dkv-post .kit-rejilla__item > h4 { margin: 0 0 .5rem; font-size: 1.3rem; }
.dkv-post .kit-rejilla__item > p { font-size: .97rem; line-height: 1.6; }
.dkv-post .kit-rejilla__item > p + p { margin-top: .6em; }
@media (max-width: 640px) { .dkv-post .kit-rejilla { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ── Pestañas ───────────────────────────────────────────── */
.dkv-post .kit-pestanas { margin: var(--k-gap) auto; }
.dkv-post .kit-pestanas__lista {
  display: flex; gap: 0 1.8rem;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--k-line);
  margin-bottom: 1.6rem;
}
.dkv-post .kit-pestanas__lista::-webkit-scrollbar { display: none; }
.dkv-post .kit-pestanas__tab {
  position: relative; flex: none;
  padding: 1rem 0 .95rem; margin: 0;
  background: none; border: 0;
  color: var(--k-muted);
  transition: color .3s var(--k-ease);
}
.dkv-post .kit-pestanas__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--k-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--k-ease);
}
.dkv-post .kit-pestanas__tab:hover { color: var(--k-ink); }
.dkv-post .kit-pestanas__tab[aria-selected="true"] { color: var(--k-ink); }
.dkv-post .kit-pestanas__tab[aria-selected="true"]::after { transform: scaleX(1); }
.dkv-post .kit-pestanas__tab:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 4px; }
.dkv-post .kit-pestana > :first-child { margin-top: 0; }
.dkv-post .kit-pestana > :last-child { margin-bottom: 0; }
.dkv-post .kit-pestana[hidden] { display: none; }
/* Sin JS: cada panel con su título, uno debajo de otro */
.dkv-post .kit-pestanas:not(.is-listo) .kit-pestana + .kit-pestana { margin-top: 2rem; }
.dkv-post .kit-pestanas:not(.is-listo) .kit-pestana::before {
  content: attr(data-titulo);
  display: block; margin-bottom: .6rem;
  font-family: var(--k-mono) !important;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--k-blue);
}

/* ── Bloque para copiar ─────────────────────────────────── */
.dkv-post .kit-copiar {
  position: relative;
  margin: var(--k-gap) auto;
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--k-soft);
}
.dkv-post .kit-copiar__titulo { margin: 0 6.5rem .9rem 0; color: var(--k-muted); }
.dkv-post .kit-copiar pre {
  margin: 0; padding: 0;
  background: none; color: var(--k-ink);
  font-size: .84rem; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.dkv-post .kit-copiar__btn {
  position: absolute; top: .85rem; right: .85rem;
  padding: .55rem .9rem .5rem;
  background: var(--k-paper); color: var(--k-ink);
  border: 1px solid var(--k-line-2);
  transition: background .3s var(--k-ease), color .3s var(--k-ease), border-color .3s var(--k-ease);
}
.dkv-post .kit-copiar__btn:hover { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }
.dkv-post .kit-copiar__btn.is-hecho { background: var(--k-blue); color: #fff; border-color: var(--k-blue); }
.dkv-post .kit-copiar__btn:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }

/* ── Botón ──────────────────────────────────────────────── */
.dkv-post .kit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3.1rem;
  padding: .95rem 1.6rem .9rem;
  background: var(--k-blue); color: #fff;
  border: 1px solid var(--k-blue);
  font-size: 11px; letter-spacing: .2em;
  white-space: nowrap;
  opacity: 1;
  transition: background .35s var(--k-ease), border-color .35s var(--k-ease), color .35s var(--k-ease), transform .35s var(--k-ease);
}
.dkv-post .kit-btn:hover { background: var(--k-ink); border-color: var(--k-ink); color: #fff; opacity: 1; }
.dkv-post .kit-btn:active { transform: translateY(1px); }
.dkv-post .kit-btn:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 3px; }
.dkv-post .kit-btn--linea { background: transparent; color: var(--k-ink); border-color: var(--k-line-2); }
.dkv-post .kit-btn--linea:hover { background: var(--k-ink); color: #fff; }
.dkv-post .kit-btn--wa::before {
  content: ''; flex: none;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--k-wa) center / contain no-repeat;
          mask: var(--k-wa) center / contain no-repeat;
}
.dkv-post {
  /* Glifo de WhatsApp: el mismo que usan los botones de compartir del tema */
  --k-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' d='M16 4C9.383 4 4 9.383 4 16c0 2.114.553 4.176 1.606 5.993L4 28l6.183-1.59A11.94 11.94 0 0 0 16 28c6.617 0 12-5.383 12-12S22.617 4 16 4Zm5.386 13.488c-.296-.149-1.75-.864-2.022-.964-.272-.099-.47-.149-.669.15-.198.296-.767.963-.94 1.161-.174.198-.347.223-.643.074-.297-.149-1.252-.461-2.385-1.471-.881-.786-1.476-1.757-1.65-2.053-.173-.297-.018-.457.13-.605.133-.133.297-.347.446-.52.149-.174.198-.297.297-.495.099-.199.05-.372-.025-.52-.074-.15-.668-1.609-.915-2.205-.241-.579-.487-.5-.669-.51l-.57-.01a1.1 1.1 0 0 0-.793.372c-.273.297-1.041 1.017-1.041 2.48 0 1.462 1.065 2.874 1.214 3.072.149.198 2.097 3.2 5.076 4.49.71.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.75-.715 1.998-1.405.247-.69.247-1.283.173-1.406-.074-.123-.272-.198-.569-.347Z'/%3E%3C/svg%3E");
}

/* ── Llamada a la acción ────────────────────────────────── */
.dkv-post .kit-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .9rem 2.6rem; align-items: end;
  margin: calc(var(--k-gap) * 1.2) auto;
  padding: 1.8rem 0 0;
  border-top: 1px solid var(--k-ink);
}
.dkv-post .kit-cta > * { margin: 0; }
.dkv-post .kit-cta__titulo {
  grid-column: 1;
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.12; letter-spacing: -.02em;
  color: var(--k-ink);
  text-wrap: balance;
}
.dkv-post .kit-cta__titulo em { font-weight: 300; color: var(--k-blue); padding-bottom: .06em; }
.dkv-post .kit-cta__texto { grid-column: 1; font-size: 1rem; line-height: 1.6; color: var(--k-muted); max-width: 46ch; }
.dkv-post .kit-cta__accion { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.dkv-post .kit-cta__nota { grid-column: 2; color: var(--k-muted); letter-spacing: .12em; text-align: right; }

.dkv-post .kit-cta--oscuro {
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.6rem, 4.5vw, 3.2rem);
  background: var(--k-dark); color: var(--k-on-dark);
  border-top: 0;
}
div.dkv-post > .kit-cta--oscuro { max-width: 860px; }
.dkv-post .kit-cta--oscuro .kit-cta__titulo { color: var(--k-on-dark); }
.dkv-post .kit-cta--oscuro .kit-cta__titulo em { color: var(--k-blue-dark); }
.dkv-post .kit-cta--oscuro .kit-cta__texto,
.dkv-post .kit-cta--oscuro .kit-cta__nota { color: var(--k-muted-dark); }
.dkv-post .kit-cta--oscuro .kit-btn { background: var(--k-on-dark); border-color: var(--k-on-dark); color: var(--k-ink); }
.dkv-post .kit-cta--oscuro .kit-btn:hover { background: var(--k-blue); border-color: var(--k-blue); color: #fff; }
.dkv-post .kit-cta--oscuro .kit-btn:focus-visible { outline-color: var(--k-on-dark); }

@media (max-width: 720px) {
  .dkv-post .kit-cta { grid-template-columns: 1fr; align-items: start; }
  .dkv-post .kit-cta__accion,
  .dkv-post .kit-cta__nota { grid-column: 1; grid-row: auto; text-align: left; }
  .dkv-post .kit-cta__accion { margin-top: .6rem; }
  .dkv-post .kit-cta .kit-btn { width: 100%; }
}

/* ── Preguntas frecuentes ───────────────────────────────── */
.dkv-post .kit-faqs { margin: 1.6rem auto var(--k-gap); border-top: 1px solid var(--k-line-2); }
.dkv-post .kit-faq { margin: 0; border-bottom: 1px solid var(--k-line); }
.dkv-post .kit-faq > summary {
  position: relative;
  list-style: none;
  padding: 1.25rem 3rem 1.25rem 0;
  font-weight: 400;
  font-size: clamp(1.18rem, 1.7vw, 1.38rem);
  line-height: 1.3; letter-spacing: -.01em;
  transition: color .3s var(--k-ease);
}
.dkv-post .kit-faq > summary::-webkit-details-marker { display: none; }
.dkv-post .kit-faq > summary::before,
.dkv-post .kit-faq > summary::after {
  content: ''; position: absolute; right: .3rem; top: 50%;
  width: 14px; height: 1px; background: var(--k-ink);
  transition: transform .45s var(--k-ease), background .3s;
}
.dkv-post .kit-faq > summary::after { transform: rotate(90deg); }
.dkv-post .kit-faq > summary:hover { color: var(--k-blue); }
.dkv-post .kit-faq > summary:hover::before,
.dkv-post .kit-faq > summary:hover::after { background: var(--k-blue); }
.dkv-post .kit-faq > summary:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 4px; }
.dkv-post .kit-faq[open] > summary::after { transform: rotate(0deg); }
.dkv-post .kit-faq > :not(summary) { padding: 0 3rem 1.5rem 0; }
.dkv-post .kit-faq > :not(summary) > * { margin: 0; }
.dkv-post .kit-faq > :not(summary) > * + * { margin-top: .8em; }

/* ── Herramienta a medida ───────────────────────────────── */
.dkv-post .kit-herramienta {
  margin: var(--k-gap) auto;
  padding: clamp(1.4rem, 3.4vw, 2.4rem);
  border: 1px solid var(--k-line-2);
}
.dkv-post .kit-herramienta__titulo { margin: 0 0 1.2rem; color: var(--k-blue); }

/* ── Movimiento ─────────────────────────────────────────── */
@keyframes kit-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .dkv-post .kit-faq[open] > :not(summary),
  .dkv-post .kit-pestanas.is-listo .kit-pestana:not([hidden]) { animation: kit-entra .5s var(--k-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .dkv-post *, .dkv-post *::before, .dkv-post *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ════════════════════════════════════════════════════════════
   3 · CATÁLOGO /?blog-kit
═══════════════════════════════════════════════════════════ */
.bkc .bkc-comp { margin: calc(var(--k-gap) * 1.6) auto 0; }
.bkc .bkc-comp > h2 { margin-top: 0; }
.bkc .bkc-comp__cuando { color: var(--k-muted); max-width: 60ch; }
.bkc .bkc-comp__demo { padding: 1.4rem 0 1.6rem; }
.bkc .bkc-comp__demo > :first-child { margin-top: 0; }
.bkc .bkc-comp__codigo { margin-top: 1rem; }
.bkc .bkc-comp__codigo pre { max-height: 22rem; overflow: auto; }
.bkc #generador pre { max-height: 32rem; overflow: auto; }