/* KlipTok v18 · HUB (Herramientas web · Blog · Foros · Wiki) — estilos con prefijo k18-, sin tocar nada anterior.
   Formato tomado de las capturas de WebDecky: héroe degradado índigo→violeta→rosa, tarjetas blancas con barra superior degradada,
   etiquetas de categoría lavanda, insignias Free/Paid, botón degradado «Abrir», «Cargar más» y barra lateral del blog.
   Claro por defecto (como WebDecky); el modo oscuro responde a data-kt-theme="dark" (lo gestiona KTNav).  Quitar: borrar este archivo. */
.k18 {
  --k18-bg: #f8fafc; --k18-card: #fff; --k18-ink: #111827; --k18-mute: #6b7280; --k18-line: #e5e7eb; --k18-soft: #f3f4f6;
  --k18-a: #4f46e5; --k18-b: #9333ea; --k18-c: #db2777; --k18-grad: linear-gradient(90deg, #4f46e5, #db2777);
  --k18-pill-bg: #f3e8ff; --k18-pill-ink: #7e22ce; --k18-free-bg: #dcfce7; --k18-free-ink: #15803d; --k18-paid-bg: #fee2e2; --k18-paid-ink: #b91c1c;
  --k18-shadow: 0 1px 3px rgba(17,24,39,.08), 0 6px 18px rgba(79,70,229,.06);
  position: fixed; inset: 0; z-index: 99990; display: none; flex-direction: column; background: var(--k18-bg); color: var(--k18-ink);
  font: 400 15px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-size-adjust: 100%; box-sizing: border-box;
}
.k18 *, .k18 *::before, .k18 *::after { box-sizing: border-box; }
.k18.on { display: flex; }
.k18[data-kt-theme="dark"] {
  --k18-bg: #0b1020; --k18-card: #131a30; --k18-ink: #e8ecf8; --k18-mute: #98a2c3; --k18-line: #26304f; --k18-soft: #1a2342;
  --k18-pill-bg: rgba(147,51,234,.22); --k18-pill-ink: #d8b4fe; --k18-free-bg: rgba(34,197,94,.18); --k18-free-ink: #86efac; --k18-paid-bg: rgba(239,68,68,.18); --k18-paid-ink: #fca5a5;
  --k18-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.k18 a { color: var(--k18-a); }
.k18[data-kt-theme="dark"] a { color: #a5b4fc; }
.k18 button { font: inherit; cursor: pointer; }
.k18 :focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }

/* ---- barra superior (equivale a la cabecera de WebDecky) ---- */
.k18-top { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; background: var(--k18-card); border-bottom: 1px solid var(--k18-line); }
.k18-logo { display: flex; align-items: center; gap: .5rem; font: 800 1.05rem/1 Georgia, 'Times New Roman', serif; color: var(--k18-ink); background: none; border: 0; padding: .25rem; white-space: nowrap; }
.k18-logo i { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .55rem; background: var(--k18-grad); color: #fff; font-style: normal; font-size: 1rem; }
.k18-nav { display: flex; gap: .15rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; justify-content: center; -webkit-overflow-scrolling: touch; }
.k18-nav::-webkit-scrollbar { display: none; }
.k18-nav button { flex: 0 0 auto; background: none; border: 0; padding: .5rem .8rem; border-radius: .6rem; color: var(--k18-ink); font-weight: 500; font-size: .86rem; white-space: nowrap; }
.k18-nav button:hover { background: var(--k18-soft); }
.k18-nav button[aria-current="page"] { background: linear-gradient(90deg, rgba(79,70,229,.14), rgba(219,39,119,.14)); color: var(--k18-a); font-weight: 700; }
.k18[data-kt-theme="dark"] .k18-nav button[aria-current="page"] { color: #c4b5fd; }
.k18-user { flex: 0 0 auto; font-size: .78rem; color: var(--k18-mute); white-space: nowrap; }
.k18-user b { color: var(--k18-ink); }

.k18-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .k18-scroll { scroll-behavior: auto; } }

/* ---- héroe ---- */
.k18-hero { background: linear-gradient(100deg, #4f46e5 0%, #9333ea 50%, #db2777 100%); color: #fff; text-align: center; padding: 2.6rem 1rem 2.4rem; position: relative; }
.k18-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 8% 20%, rgba(255,255,255,.18), transparent 38%); pointer-events: none; }
.k18-hero h1 { margin: 0; font: 800 clamp(1.9rem, 5.5vw, 2.9rem)/1.1 Inter, system-ui, sans-serif; letter-spacing: -.02em; position: relative; }
.k18-hero p { margin: .7rem auto 0; max-width: 40rem; opacity: .9; font-size: clamp(.86rem, 2.4vw, 1rem); position: relative; }
.k18-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 66rem; margin: -1.6rem auto 0; padding: 0 1rem; position: relative; z-index: 2; }
.k18-stat { background: var(--k18-card); border-radius: .9rem; box-shadow: 0 8px 24px rgba(17,24,39,.14); padding: 1rem .5rem; text-align: center; }
.k18-stat b { display: block; font: 800 clamp(1.5rem, 5vw, 2rem)/1.1 Inter, sans-serif; }
.k18-stat span { color: var(--k18-mute); font-size: .85rem; }
.k18-stat:nth-child(1) b { color: #4f46e5; } .k18-stat:nth-child(2) b { color: #9333ea; } .k18-stat:nth-child(3) b { color: #db2777; }

.k18-wrap { max-width: 76rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.k18-wrap.narrow { max-width: 52rem; }
.k18-h2 { text-align: center; margin: 1.6rem 0 .25rem; font: 800 1.5rem/1.2 Inter, sans-serif; }
.k18-sub { text-align: center; color: var(--k18-mute); margin: 0 0 1.4rem; font-size: .9rem; }

/* ---- filtros ---- */
.k18-filters { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 0 auto 1.75rem; max-width: 40rem; }
.k18-filters select, .k18-filters input, .k18-in, .k18-ta, .k18-sel {
  padding: .6rem .8rem; border: 1px solid var(--k18-line); border-radius: .6rem; background: var(--k18-card); color: var(--k18-ink); font: inherit; font-size: .88rem; min-width: 0; }
.k18-filters select { flex: 1 1 11rem; } .k18-filters input { flex: 1 1 13rem; }
.k18-in, .k18-sel { width: 100%; } .k18-ta { width: 100%; min-height: 9rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.5; }

/* ---- rejilla de tarjetas ---- */
.k18-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); align-items: stretch; }
.k18-card { position: relative; display: flex; flex-direction: column; gap: .55rem; background: var(--k18-card); border: 1px solid var(--k18-line); border-radius: .9rem; box-shadow: var(--k18-shadow); padding: .9rem; overflow: hidden; }
.k18-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--k18-grad); }
.k18-pill { align-self: flex-start; max-width: 100%; padding: .12rem .6rem; border-radius: 999px; background: var(--k18-pill-bg); color: var(--k18-pill-ink); font-size: .66rem; font-weight: 700; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k18-ico { display: grid; place-items: center; height: 6.2rem; border-radius: .7rem; background: var(--k18-soft); }
.k18-ico img { width: 4.6rem; height: 4.6rem; object-fit: contain; }
.k18-card h3 { margin: 0; font: 700 .93rem/1.3 Inter, sans-serif; }
.k18-badge { align-self: flex-start; padding: .1rem .55rem; border-radius: .4rem; font-size: .68rem; font-weight: 700; }
.k18-badge.free { background: var(--k18-free-bg); color: var(--k18-free-ink); } .k18-badge.paid { background: var(--k18-paid-bg); color: var(--k18-paid-ink); }
.k18-card p { margin: 0; color: var(--k18-mute); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.k18-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: .6rem; padding: .6rem 1rem; background: var(--k18-grad); color: #fff !important; font-weight: 700; font-size: .8rem; text-decoration: none; transition: filter .15s, transform .15s; }
.k18-btn:hover { filter: brightness(1.08); } .k18-btn:active { transform: translateY(1px); }
.k18-btn.block { width: 100%; } .k18-btn.pill { border-radius: 999px; }
.k18-btn.ghost { background: transparent; color: var(--k18-ink) !important; border: 1px solid var(--k18-line); } .k18-btn.ghost:hover { background: var(--k18-soft); filter: none; }
.k18-btn.danger { background: #dc2626; } .k18-btn[disabled] { opacity: .55; cursor: not-allowed; }
.k18-more { display: flex; justify-content: center; margin-top: 1.8rem; }
.k18-empty { text-align: center; color: var(--k18-mute); padding: 2.5rem 1rem; }

/* ---- foros ---- */
.k18-fcard { align-items: center; text-align: center; padding: 1.1rem .9rem 1rem; }
.k18-fcard img { width: 3.6rem; height: 3.6rem; object-fit: contain; margin-top: .3rem; }
.k18-fcard h3 { font-size: .95rem; margin-top: .5rem; } .k18-fcard p { text-align: center; -webkit-line-clamp: 2; flex: 1 1 auto; }
.k18-fcard small { color: var(--k18-mute); font-size: .72rem; }
.k18-list { display: grid; gap: .6rem; }
.k18-row { display: flex; gap: .8rem; align-items: center; justify-content: space-between; background: var(--k18-card); border: 1px solid var(--k18-line); border-radius: .8rem; padding: .75rem .9rem; text-align: left; color: inherit; width: 100%; }
.k18-row:hover { border-color: #a78bfa; }
.k18-row h4 { margin: 0 0 .15rem; font-size: .93rem; overflow-wrap: anywhere; } .k18-row small { color: var(--k18-mute); }
.k18-row .k18-num { flex: 0 0 auto; text-align: center; font-size: .72rem; color: var(--k18-mute); line-height: 1.2; } .k18-row .k18-num b { display: block; font-size: 1rem; color: var(--k18-ink); }
.k18-msg { background: var(--k18-card); border: 1px solid var(--k18-line); border-radius: .8rem; padding: .85rem 1rem; margin-bottom: .7rem; }
.k18-msg header { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .78rem; color: var(--k18-mute); margin-bottom: .45rem; } .k18-msg header b { color: var(--k18-ink); }
.k18-msg .k18-body { overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---- blog / wiki (lista + lateral) ---- */
.k18-cols { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
.k18-panel { background: var(--k18-card); border: 1px solid #bfdbfe; border-radius: 1rem; padding: 1rem; }
.k18[data-kt-theme="dark"] .k18-panel { border-color: var(--k18-line); }
.k18-side { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.k18-side h4 { margin: 0 0 .6rem; font-size: .85rem; }
.k18-search { display: flex; gap: .5rem; } .k18-search input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--k18-line); border-radius: .6rem; background: var(--k18-card); color: var(--k18-ink); font: inherit; font-size: .85rem; }
.k18-mini { display: flex; gap: .6rem; align-items: center; width: 100%; background: none; border: 0; padding: .4rem 0; text-align: left; color: inherit; }
.k18-mini img { width: 2.6rem; height: 2.6rem; border-radius: .5rem; object-fit: cover; flex: 0 0 auto; background: var(--k18-soft); }
.k18-mini span { font-size: .78rem; font-weight: 600; line-height: 1.3; } .k18-mini small { display: block; color: var(--k18-mute); font-weight: 400; font-size: .7rem; }
.k18-catb { display: block; width: 100%; text-align: left; background: var(--k18-soft); border: 0; border-radius: .5rem; padding: .5rem .7rem; margin-bottom: .4rem; font-size: .78rem; color: inherit; }
.k18-catb[aria-pressed="true"] { background: var(--k18-pill-bg); color: var(--k18-pill-ink); font-weight: 700; }
.k18-posts { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k18-post { background: var(--k18-card); border: 1px solid var(--k18-line); border-radius: .8rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--k18-shadow); }
.k18-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--k18-soft); }
.k18-post > div { padding: .85rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.k18-post h3 { margin: 0; font: 700 .95rem/1.35 Inter, sans-serif; } .k18-post p { margin: 0; color: var(--k18-mute); font-size: .8rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.k18-post footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .k18-post footer small { color: var(--k18-mute); font-size: .72rem; }
.k18-post .k18-btn { padding: .45rem .85rem; border-radius: .5rem; background: #4f46e5; }

/* ---- lectura (artículo / página wiki / mensajes) ---- */
.k18-art { background: var(--k18-card); border: 1px solid var(--k18-line); border-radius: 1rem; padding: clamp(1rem, 4vw, 2rem); box-shadow: var(--k18-shadow); }
.k18-art > img.k18-cover { width: 100%; border-radius: .8rem; margin-bottom: 1rem; aspect-ratio: 16 / 9; object-fit: cover; }
.k18-art h1 { margin: .4rem 0 .3rem; font: 800 clamp(1.4rem, 5vw, 2rem)/1.2 Inter, sans-serif; overflow-wrap: anywhere; }
.k18-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: var(--k18-mute); font-size: .78rem; margin-bottom: 1rem; }
.k18-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.k18-md { overflow-wrap: anywhere; } .k18-md h2 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; } .k18-md h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.k18-md p { margin: .6rem 0; } .k18-md ul, .k18-md ol { padding-left: 1.4rem; margin: .6rem 0; } .k18-md li { margin: .2rem 0; }
.k18-md code { background: var(--k18-soft); padding: .1rem .35rem; border-radius: .3rem; font-size: .85em; }
.k18-md pre { background: #0f172a; color: #e2e8f0; padding: .9rem 1rem; border-radius: .7rem; overflow-x: auto; font-size: .8rem; line-height: 1.5; max-width: 100%; } .k18-md pre code { background: none; padding: 0; color: inherit; }
.k18-md .k18-tw { overflow-x: auto; } .k18-md table { border-collapse: collapse; margin: .8rem 0; font-size: .85rem; min-width: 60%; }
.k18-md th, .k18-md td { border: 1px solid var(--k18-line); padding: .4rem .65rem; text-align: left; } .k18-md th { background: var(--k18-soft); }
.k18-note { padding: .7rem .9rem; border-radius: .7rem; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); font-size: .82rem; margin: 0 0 1rem; }
.k18-back { background: none; border: 0; color: var(--k18-a); font-weight: 600; font-size: .85rem; padding: .3rem 0; margin-bottom: .6rem; }
.k18[data-kt-theme="dark"] .k18-back { color: #a5b4fc; }

/* ---- formularios ---- */
.k18-form { display: grid; gap: .8rem; } .k18-form label { display: grid; gap: .25rem; font-size: .8rem; font-weight: 600; } .k18-form label small { font-weight: 400; color: var(--k18-mute); }
.k18-two { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } .k18-preview { border: 1px dashed var(--k18-line); border-radius: .7rem; padding: .8rem 1rem; min-height: 9rem; }
.k18-err { color: #dc2626; font-size: .82rem; min-height: 1.2em; } .k18-ok { color: var(--k18-free-ink); font-size: .82rem; }

/* ---- herramienta abierta ---- */
.k18-thead { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; } .k18-thead img { width: 4rem; height: 4rem; object-fit: contain; flex: 0 0 auto; }
.k18-thead h1 { margin: 0 0 .25rem; font: 800 clamp(1.25rem, 4.5vw, 1.8rem)/1.2 Inter, sans-serif; }
.k18-tool { display: grid; gap: 1rem; } .k18-tool .k18-card { box-shadow: none; } .k18-tool h3 { font-size: .95rem; }
.k18-row2 { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .k18-row2 > * { min-width: 0; }
.k18-kv { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: .35rem .9rem; font-size: .85rem; } .k18-kv dt { color: var(--k18-mute); } .k18-kv dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.k18-out { background: #0f172a; color: #e2e8f0; border-radius: .7rem; padding: .9rem 1rem; overflow: auto; max-height: 22rem; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.k18-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .k18-chip { padding: .2rem .65rem; border-radius: 999px; background: var(--k18-soft); font-size: .78rem; border: 1px solid var(--k18-line); }
.k18-diff { font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; } .k18-diff .a { background: rgba(34,197,94,.22); } .k18-diff .d { background: rgba(239,68,68,.22); text-decoration: line-through; }
.k18-sim { margin: 0 auto; border: 10px solid #1f2937; border-radius: 1.4rem; overflow: hidden; background: #fff; max-width: 100%; } .k18-sim iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.k18-simwrap { overflow: auto; padding: .5rem; background: var(--k18-soft); border-radius: .8rem; text-align: center; }
.k18-prev { border: 1px solid var(--k18-line); border-radius: .8rem; overflow: hidden; max-width: 30rem; background: var(--k18-card); } .k18-prev img { width: 100%; aspect-ratio: 1.91; object-fit: cover; display: block; background: var(--k18-soft); } .k18-prev div { padding: .6rem .8rem; font-size: .8rem; } .k18-prev b { display: block; font-size: .9rem; } .k18-prev small { color: var(--k18-mute); }
.k18-bar { height: .6rem; background: var(--k18-soft); border-radius: 999px; overflow: hidden; } .k18-bar i { display: block; height: 100%; background: var(--k18-grad); width: 0; transition: width .2s; }
.k18-hop { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--k18-line); border-radius: .7rem; background: var(--k18-card); overflow-wrap: anywhere; font-size: .82rem; }
.k18-code { flex: 0 0 auto; min-width: 2.6rem; text-align: center; padding: .1rem .4rem; border-radius: .4rem; font-weight: 800; font-size: .8rem; background: var(--k18-soft); } .k18-code.ok { background: var(--k18-free-bg); color: var(--k18-free-ink); } .k18-code.redir { background: #fef3c7; color: #92400e; } .k18-code.bad { background: var(--k18-paid-bg); color: var(--k18-paid-ink); }
.k18-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; text-align: center; color: var(--k18-mute); font-size: .78rem; padding: 1.4rem 1rem 2rem; border-top: 1px solid var(--k18-line); } .k18-foot a { color: inherit !important; white-space: nowrap; }
.k18-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: #111827; color: #fff; padding: .6rem 1rem; border-radius: .7rem; font-size: .85rem; z-index: 100005; max-width: 90vw; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
body.k18-on #auth-modal, body.k18-on #upload-modal { z-index: 100010 !important; }

/* ---- móvil ---- */
@media (max-width: 900px) { .k18-cols { grid-template-columns: 1fr; } .k18-side { order: 2; } }
@media (max-width: 640px) {
  .k18-top { padding: .4rem .5rem; gap: .4rem; } .k18-logo span { display: none; } .k18-user { display: none; }
  .k18-nav { justify-content: flex-start; } .k18-nav button { padding: .5rem .65rem; font-size: .8rem; }
  .k18-hero { padding: 1.8rem .8rem 2rem; } .k18-stats { gap: .5rem; padding: 0 .6rem; } .k18-stat { padding: .75rem .25rem; } .k18-stat span { font-size: .7rem; }
  .k18-wrap { padding: 1.4rem .75rem 2.5rem; } .k18-posts, .k18-two { grid-template-columns: 1fr; }
  .k18-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .k18-card { padding: .65rem; } .k18-ico { height: 4.6rem; } .k18-ico img { width: 3.4rem; height: 3.4rem; }
  .k18-card h3 { font-size: .82rem; } .k18-card p { font-size: .72rem; -webkit-line-clamp: 3; } .k18-btn { padding: .55rem .6rem; font-size: .72rem; }
  .k18-kv { grid-template-columns: 1fr; } .k18-kv dd { margin-bottom: .4rem; }
}
@media (max-width: 360px) { .k18-grid { grid-template-columns: 1fr; } }

/* =====================================================================================================================
   v18 · ARREGLOS (móvil + formato de infografía). Solo CSS; se quitan borrando este bloque.
   ===================================================================================================================== */
/* Móvil: la barra del navegador cambia la altura real; 100vh quedaba más alto que la pantalla visible. */
html, body { height: 100%; }
@supports (height: 100dvh) { body.h-screen { height: 100dvh; } }
body { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
#feed-container { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
/* Tarjetas fuera de pantalla: el navegador no las pinta ni las maqueta hasta que se acercan (altura fija ya conocida). */
#dynamic-feed > .feed-card { content-visibility: auto; contain-intrinsic-size: auto 38rem; }
/* Texto de desarrollo del modo libro («KTBook.addTool()»): no es para usuarios. */
.kt-soon { display: none !important; }

/* ---- INFOGRAFÍA: formato propio de lectura (no es un vídeo) ----
   Cabecera (categoría, etiquetas, autor, título) ARRIBA · infografía con scroll interno en el CENTRO · botones ABAJO en una barra.
   Nada se superpone a la imagen. Los mismos botones, con su función, solo cambian de sitio. */
.feed-card[data-cat="infographic"] > .group { display: flex; flex-direction: column; background: var(--k18-ib, #0b0f1d); }
.feed-card[data-cat="infographic"] > .group > .ui-element,
.feed-card[data-cat="infographic"] > .group > div.absolute { position: static !important; inset: auto !important; max-height: none !important; }
.feed-card[data-cat="infographic"] > .group > .absolute.top-4 { order: 1; padding: .65rem .75rem .2rem; background: #0b0f1d; pointer-events: auto !important; flex: 0 0 auto; }
.feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.left-4 { order: 2; padding: .15rem .75rem .5rem; background: #0b0f1d; flex: 0 0 auto; width: 100%; }
.feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.left-4 h2 { -webkit-line-clamp: 2; text-shadow: none; }
.feed-card[data-cat="infographic"] > .group > .k17-info { order: 3; flex: 1 1 0; height: auto !important; min-height: 0; }
.feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.right-3 {
  order: 4; flex: 0 0 auto; display: flex !important; flex-direction: row !important; align-items: center; gap: .45rem; overflow-x: auto; overflow-y: hidden;
  padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px)); background: #0b0f1d; border-top: 1px solid rgba(255,255,255,.12); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.right-3::-webkit-scrollbar { display: none; }
.feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.right-3 > * { flex: 0 0 auto; }
.feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.right-3 button, .feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.right-3 a { padding: .55rem !important; }
.k17-info-pct { bottom: .6rem !important; } .k17-info-hint { bottom: .8rem !important; }
/* Escritorio: las infografías son largas y se leen con scroll, así que merecen más ancho que un reel 9:16. */
@media (min-width: 1024px) { #feed-container .feed-card[data-cat="infographic"] { width: min(100%, 36rem) !important; } }
@media (max-width: 767px) { .feed-card[data-cat="infographic"] { max-width: 100%; } }
body.clean-screen .feed-card[data-cat="infographic"] > .group > .absolute.bottom-4.right-3 { display: none !important; }