/* MD Reader: estilos propios, encima de /assets/site.css (que no se toca). Todo con las variables comunes. */

/* Subnavegación de la app, dentro del héroe */
.mdr-sub{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.mdr-sub a{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.mdr-sub a:hover{border-color:color-mix(in srgb,var(--app-accent) 40%,transparent)}
.mdr-sub a[aria-current]{background:var(--app-accent);border-color:var(--app-accent);color:var(--on-accent)}
.mdr-ver{margin:14px 0 0;font-size:13.5px;color:var(--muted)}

/* Captura del héroe: un iPhone, sin desbordar */
.mdr-hero-shot{justify-self:center;width:min(100%,320px);padding:10px}
.mdr-hero-shot img{display:block;width:100%;border-radius:18px}
@media (max-width:860px){.mdr-hero-shot{width:min(78%,280px)}}

/* iPad: dos capturas */
.mdr-big{align-items:start}
.mdr-big p{margin:0 0 14px}
.mdr-pads{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mdr-pads figure{margin:0}
.mdr-pads img{display:block;width:100%;border-radius:16px;border:1px solid var(--line)}
.mdr-pads figcaption{font-size:13.5px;color:var(--muted);margin-top:6px}
@media (max-width:560px){.mdr-pads{grid-template-columns:1fr}}

/* Gratis y Pro */
.mdr-plan h3{margin:0 0 10px}
.mdr-pro{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--line));
  background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 9%,var(--surface)),var(--surface))}
.mdr-ticks{list-style:none;margin:0;padding:0}
.mdr-ticks li{position:relative;padding:4px 0 4px 26px}
.mdr-ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:12px;height:7px;border-left:2.5px solid var(--app-accent);
  border-bottom:2.5px solid var(--app-accent);transform:rotate(-45deg)}

/* Próximamente (IA de la 1.3) */
.mdr-soon{border:1px dashed color-mix(in srgb,var(--app-accent) 55%,var(--line));border-radius:var(--radius);padding:20px 22px;
  background:color-mix(in srgb,var(--app-accent) 5%,var(--bg))}
.mdr-soon .kicker{margin-bottom:10px}
.mdr-soon p:last-child{margin:0}

table.facts.mdr-facts{min-width:0}
.mdr-facts th{width:30%;white-space:nowrap}
@media (max-width:560px){.mdr-facts th{white-space:normal;width:38%}}

/* Más apps */
.mdr-more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mdr-more a{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  color:var(--text);text-decoration:none;height:100%}
.mdr-more a:hover{border-color:color-mix(in srgb,var(--app-accent) 40%,transparent)}
.mdr-more img{width:52px;height:52px;border-radius:12px;flex:none}
.mdr-more b{display:block}
.mdr-more small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
@media (max-width:860px){.mdr-more{grid-template-columns:1fr}}

/* Guías */
.mdr-toc{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:0 0 40px;background:var(--surface)}
.mdr-toc ol{margin:6px 0 0;padding-left:20px;columns:2;column-gap:28px}
@media (max-width:560px){.mdr-toc ol{columns:1}}
.mdr-guide{display:grid;grid-template-columns:1fr;gap:24px;scroll-margin-top:80px}
.mdr-guide.has-img{grid-template-columns:1fr 260px;align-items:start}
.mdr-guide ol{padding-left:22px}
.mdr-guide li{margin:0 0 8px}
.mdr-gimg{margin:0}
.mdr-gimg img{display:block;width:100%;border-radius:18px;border:1px solid var(--line)}
.mdr-num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;font-size:16px;font-weight:800;
  color:var(--on-accent);background:var(--app-accent)}
@media (max-width:860px){.mdr-guide.has-img{grid-template-columns:1fr}.mdr-gimg{max-width:280px}}

.article h2{margin-top:30px}

.sheet>.appband{margin:0 0 56px}