/* Banderas: proporciones reales, sin recortar ni depender solo del color. */
.quiz-flag-figure img {
  width: auto;
  max-width: 100%;
  max-height: 240px;
  height: auto;
  object-fit: contain;
  outline: 1px solid var(--line);
}
.quiz-flag-figure figcaption { max-width: 36rem; margin-inline: auto; }
.rich-copy .flag-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.rich-copy .flag-example {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--paper);
}
.flag-example-image { height: 180px; display: flex; align-items: center; justify-content: center; }
.rich-copy .flag-example img { display: block; width: auto; max-width: 100%; height: auto; max-height: 180px; object-fit: contain; outline: 1px solid var(--line); }
.rich-copy .flag-example figcaption { margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.flag-example figcaption strong, .flag-example figcaption span { display: block; }
.flag-example figcaption strong { margin-bottom: .35rem; }
.rich-copy .flag-check { margin: 1.25rem 0 2rem; padding: 1rem; border-left: 4px solid var(--night); background: var(--yellow-soft); }
.rich-copy .flag-check p { margin: 0 0 .75rem; }
.rich-copy .flag-check details { margin: 0; }
.flag-check summary { min-height: 44px; padding: .5rem 0; cursor: pointer; font-weight: 800; }
.flag-check summary:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }
.rich-copy .flag-credits { font-size: .9rem; margin-top: 2rem; }
@media (max-width: 520px) {
  .rich-copy .flag-comparison { grid-template-columns: minmax(0, 1fr); }
  .rich-copy .flag-example { padding: .85rem; }
}