/* Diagramas editoriales de las guías */
.guia-visual {
  margin: 1.1rem 0 1.35rem;
  padding: clamp(.75rem, 2vw, 1.2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
}
.guia-visual figcaption {
  margin: 0 0 .8rem;
  color: var(--ink);
  font-weight: 750;
  line-height: 1.35;
}
.guia-visual .guia-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guia-visual .guia-visual-grid li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: .45rem;
  min-width: 0;
  margin: 0;
  padding: .72rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: var(--surface);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.guia-visual-grid li > svg { color: var(--brand-ink); }
.guia-visual-grid strong { display: block; line-height: 1.35; }
.guia-visual-grid li p { margin: .3rem 0 0; font-size: .9375rem; line-height: 1.48; color: var(--ink-2); }
.guia-visual-preview { margin-block: .95rem 1.2rem; }
.guia-visual-preview summary { color: var(--brand-ink); font-weight: 700; cursor: pointer; }
.guia-visual-preview figure { max-width: 25rem; margin: .75rem 0 0; }
.guia-visual-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .5rem; }
.guia-visual-preview figcaption { margin-top: .4rem; font-size: .875rem; color: var(--ink-2); }
.guia-visual-video {
  margin-block: 1rem;
  padding: .7rem .9rem;
  border-inline-start: 3px solid var(--brand);
  background: var(--surface-2);
}
.guia-visual-video p { margin: 0; }
.guia-visual-video p + p { margin-top: .3rem; }
.guia-visual-video a { font-weight: 700; }
@media (max-width: 680px) {
  .guia-visual .guia-visual-grid { grid-template-columns: minmax(0, 1fr); }
  .guia-visual .guia-visual-grid li { grid-template-columns: 1.5rem minmax(0, 1fr); }
}

/* Capturas y demostración del catálogo de PlayStation Plus */
.playstation-catalog-cover {
  max-width: 14.75rem;
  margin-inline: auto;
}
.playstation-catalog-cover img,
.playstation-filter-capture img,
.playstation-video video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: .8rem;
}
.playstation-hero-link {
  color: var(--brand-ink);
  font-weight: 700;
  text-underline-offset: .18em;
}
@media (min-width: 900px) {
  .design-reading > .legacy-guide-hero:has(> .playstation-catalog-cover) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 14.75rem);
    grid-template-areas: "texto foto";
    align-items: center;
  }
  .legacy-guide-hero:has(> .playstation-catalog-cover) > .legacy-guide-hero-copy {
    display: block;
    grid-area: texto;
  }
  .legacy-guide-hero > .playstation-catalog-cover { margin: 0; }
}
.playstation-walkthrough {
  display: grid;
  gap: 1rem 1.4rem;
  align-items: start;
  margin-block: 1rem 1.35rem;
}
@media (min-width: 680px) {
  .playstation-walkthrough { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); }
}
.playstation-steps {
  margin-block: 0 .9rem;
  padding-inline-start: 1.5rem;
}
.playstation-steps li { padding-inline-start: .25rem; }
.playstation-steps li + li { margin-top: .55rem; }
.playstation-steps li::marker { font-weight: 700; color: var(--brand-ink); }
.playstation-filter-capture { margin: .65rem 0 0; }
.playstation-filter-capture img { max-width: 19rem; }
.playstation-video { max-width: 16rem; margin: 0 auto; }
.playstation-video video { aspect-ratio: 390 / 848; background: #171a27; }
.playstation-walkthrough figcaption {
  margin-top: .45rem;
  color: var(--ink-2);
  font-size: .875rem;
  line-height: 1.45;
}

/* Misma columna de 1000 px y misma alineación que las fichas editoriales. */
@media (min-width: 900px) {
  main.design-reading.guia-multimedia { max-width: none; }
  main.design-reading.guia-multimedia > .tool-hero {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  main.design-reading.guia-multimedia > :is(.reading-contents, .trick-toc, .panel, .seo-block, .notice, .ed-video, .comentarios, .conclusion, .prose, .guide-content) {
    max-width: 1000px;
    margin-inline: 0 auto;
  }
  .guia-multimedia > :is(.panel, .seo-block) > p { max-width: 78ch; }
  .guia-multimedia .playstation-walkthrough {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 1.2rem 2rem;
  }
  .guia-multimedia .playstation-video { max-width: 20rem; }
  .guia-multimedia[data-guia-top="gta-6-movil"] #fechas .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.guia-demo {
  display: flow-root;
  clear: both;
  margin-block: 1.3rem .8rem;
  padding: clamp(.85rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.guia-demo h3 { margin: 0 0 .95rem; }
.guia-demo-grid {
  display: grid;
  gap: 1.1rem 1.45rem;
  align-items: start;
}
@media (min-width: 700px) {
  .guia-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guia-demo-grid figure { min-width: 0; width: 100%; margin: 0; }
.guia-demo-photo picture,
.guia-demo-video video,
.guia-demo-embed {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: .65rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.guia-demo-photo picture {
  display: grid;
  justify-items: center;
}
.guia-demo-photo img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 28rem;
  object-fit: contain;
}
.guia-demo-video video { height: auto; background: #172331; }
.guia-demo-embed {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #172331;
}
.guia-demo-embed button {
  max-width: calc(100% - 1.5rem);
  padding: .65rem .8rem;
  border: 1px solid #ffbb89;
  border-radius: .5rem;
  color: #fff;
  background: #242f3f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.guia-demo-embed button:hover { background: #344962; }
.guia-demo-embed iframe { width: 100%; height: 100%; border: 0; }
.guia-demo :is(figcaption, .guia-demo-note) {
  margin-top: .5rem;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.5;
}
.guia-demo-note { margin-bottom: 0; }
.guia-demo-transcript { margin-top: .65rem; }
.guia-demo-transcript summary {
  color: var(--brand-ink);
  font-weight: 700;
  cursor: pointer;
}
.guia-demo-transcript ol { margin-bottom: 0; }