/* ==========================================================================
   ticonline | ilustración de la página «SEO»
   Una revisión técnica, las palabras clave, tu web subiendo al primer resultado y las visitas.
   ========================================================================== */

.mk-serp { left: 0; top: 0; width: 58%; }
.mk-serp__body { display: grid; gap: 3.6cqw; padding: 4.4cqw; }
.mk-search { display: flex; align-items: center; gap: 2cqw; height: 9cqw; padding: 0 3.6cqw; background: #fff; border: 1px solid var(--tile-line); border-radius: 99px; font-size: 3.4cqw; }
.mk-search svg { flex: none; width: 3.8cqw; height: 3.8cqw; color: var(--tile-accent); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 1.8cqw; }
.mk-chip { padding: 0.9cqw 2.6cqw; background: #dbe6f7; color: #1f3f73; border-radius: 99px; font-size: 2.7cqw; font-weight: 500; white-space: nowrap; }

.mk-results { --rh: 17cqw; --gap: 2.6cqw; position: relative; height: calc(var(--rh) * 3 + var(--gap) * 2); }
.mk-res {
  position: absolute; left: 0; right: 0; top: calc(var(--i) * (var(--rh) + var(--gap))); height: var(--rh);
  display: grid; align-content: center; gap: 0.4cqw; min-width: 0; padding: 0 12cqw 0 3.6cqw;
  background: #fff; border: 1px solid var(--tile-line); border-radius: 2.6cqw;
}
.mk-res small { font-size: 2.6cqw; color: var(--tile-muted); }
.mk-res b { overflow: hidden; font-size: 3.3cqw; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mk-res--us { background: #f4f8fe; border-color: #9bb8e8; }
.mk-badge { position: absolute; right: 3.2cqw; top: 50%; width: 6.4cqw; height: 6.4cqw; display: grid; place-items: center; translate: 0 -50%; background: #2f5fa8; color: #fff; border-radius: 50%; font-size: 3.2cqw; font-weight: 600; }

.mk-audit { right: 0; top: 7%; width: 44%; }
.mk-audit__list { display: grid; gap: 2.6cqw; padding: 4cqw; }
.mk-audit__row { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.6cqw 3cqw; background: #fff; border: 1px solid var(--tile-line); border-radius: 2.4cqw; font-size: 3.7cqw; }
.mk-audit__row b { font-weight: 500; }

.mk-chart { right: 0; bottom: 0; width: 46%; }
.mk-chart__svg { display: block; width: 100%; height: auto; aspect-ratio: 200 / 62; overflow: visible; }
.mk-area { fill: rgba(126, 163, 230, 0.18); stroke: none; }
.mk-line { fill: none; stroke: var(--img-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.mk-dot { fill: var(--img-accent); }
.mk-chart__pos { position: absolute; left: 4.6cqw; bottom: 4.6cqw; padding: 0.9cqw 2.6cqw; background: #6a93d6; color: #0a1220; border-radius: 99px; font-size: max(0.75rem, 2.8cqw); font-weight: 500; }

@media (max-width: 860px) {
  .mk-serp { width: 64%; }
  .mk-audit { width: 50%; }
  .mk-chart { width: 64%; }
}