/* Quieren Data? — sitio.css
   Estilos propios del sitio. Todo sale de tokens.css: nunca escribir un hex acá.
   Depende de: tokens.css (variables + @font-face) y components.css (clases qd-*). */

:root {
  --qd-max: 1080px;        /* ancho máximo de contenido */
  --qd-max-texto: 680px;   /* ancho de lectura cómoda para texto largo */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* components.css ya define fondo, color y tipografía base */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

:where(a):focus-visible,
:where(button, input, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- layout */

.qd-wrap {
  width: 100%;
  max-width: var(--qd-max);
  margin: 0 auto;
  padding-inline: var(--space-4);
}

.qd-wrap--texto { max-width: var(--qd-max-texto); }

.qd-bloque { padding-block: var(--space-6); }

/* El header es sticky: los anclas tienen que frenar más abajo */
:where(section, article)[id] { scroll-margin-top: var(--space-6); }

.qd-bloque + .qd-bloque { border-top: 1px solid var(--line); }

/* Bloque a sangre con fondo de marca: el único color que se repite en la pieza */
.qd-bloque--brand {
  background: var(--brand);
  color: var(--on-brand);
  border-top: 0;
}
.qd-bloque--brand .qd-titulo,
.qd-bloque--brand .qd-antetitulo { color: var(--on-brand); }
.qd-bloque--brand p { color: var(--on-brand); }

/* --------------------------------------------------------- tipografía web */

.qd-antetitulo {            /* = kicker */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.qd-titular {               /* = display-h1, para el hero */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.qd-titular--poster {       /* = display-poster */
  font-size: clamp(56px, 12vw, 96px);
  line-height: 0.92;
}

.qd-titulo {                /* = display-h2, títulos de sección en caja normal */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.qd-cifra {                 /* = data-figure */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.qd-texto { font-size: 15px; line-height: 1.85; color: var(--text-body); }
.qd-texto p { margin: 0 0 var(--space-3); }
.qd-texto p:last-child { margin-bottom: 0; }
.qd-texto a { color: var(--link-strong); text-decoration: underline; text-underline-offset: 3px; }
.qd-texto ul, .qd-texto ol { margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.qd-texto li { margin-bottom: var(--space-2); }

.qd-lead { font-size: 18px; line-height: 1.7; color: var(--text-body); margin: 0; }

.qd-meta { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-body); }

/* -------------------------------------------------------------- botones */

.qd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 2px solid var(--ink);
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
}

.qd-btn:hover { background: var(--surface-card); color: var(--ink); }

.qd-btn--linea { background: transparent; color: var(--ink); }
.qd-btn--linea:hover { background: var(--ink); color: var(--surface); }

/* Para usar arriba de un bloque de color, donde el verde del botón normal se
   confunde con el fondo. Es el botón principal del bloque de acceso. */
.qd-btn--claro { background: var(--surface-card); color: var(--ink); }
.qd-btn--claro:hover { background: var(--ink); color: var(--surface); }

.qd-botonera { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* --------------------------------------------------------------- header */

.qd-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.qd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.qd-marca { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.qd-marca img { width: 36px; height: 36px; display: block; border-radius: var(--radius-sm); }
.qd-marca span {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.qd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.qd-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.qd-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.qd-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* "Acceso teatros" es una puerta a otra cosa — una aplicación con sesión, no
   una página más del sitio — así que se ve como un botón y no como un link.
   Se engancha por el destino del link, no por una clase, para que valga en
   todas las páginas sin tocar el HTML de cada una. La única que queda afuera
   es `teatros/index.html`, donde el link apunta a sí mismo. */
.qd-nav a[href$="teatros/index.html"] {
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}
.qd-nav a[href$="teatros/index.html"]:hover {
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
}

@media (max-width: 640px) {
  .qd-header-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .qd-nav { gap: var(--space-3); }
}

/* ----------------------------------------------------------------- hero */

.qd-hero { padding-block: var(--space-6) var(--space-5); }

.qd-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-5);
}

.qd-hero-texto > * + * { margin-top: var(--space-4); }
.qd-hero-busto { display: block; width: 100%; }

@media (max-width: 820px) {
  .qd-hero-inner { grid-template-columns: 1fr; }
  .qd-hero-busto { max-width: 420px; margin-inline: auto; }
}

/* ------------------------------------------------------------- las capas */

.qd-capas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

.qd-capa {
  padding: var(--space-5);
  border-radius: var(--radius-block);
  color: var(--on-accent);
}
.qd-capa .qd-titulo, .qd-capa .qd-antetitulo, .qd-capa p { color: var(--on-accent); }
.qd-capa ul { margin: var(--space-3) 0 0; padding-left: var(--space-4); }
.qd-capa li { margin-bottom: var(--space-2); font-size: 15px; line-height: 1.85; }

.qd-capa--datos { background: var(--brand); }
.qd-capa--marketing { background: var(--accent-orange); }

@media (max-width: 820px) { .qd-capas { grid-template-columns: 1fr; } }

/* --------------------------------------------------- listado de informes */

/* Grilla (home): 3 → 2 → 1 columnas */
.qd-informes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

@media (max-width: 820px) { .qd-informes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qd-informes { grid-template-columns: 1fr; } }

/* Lista (/informes/): siempre una columna. Va después de las media queries
   de arriba para que no se las pisen. */
.qd-informes.qd-informes--lista { grid-template-columns: 1fr; gap: var(--space-5); }

.qd-informe { display: block; text-decoration: none; color: inherit; min-width: 0; }

.qd-informe-tapa {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-block);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
}
.qd-informe-tapa img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-block); }
.qd-informe-tapa--color { color: var(--on-accent); }
.qd-informe-tapa--color .qd-informe-tema {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qd-informe-meta { margin: var(--space-3) 0 var(--space-1); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-body); }
.qd-informe-titulo { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--ink); }
.qd-informe:hover .qd-informe-titulo { text-decoration: underline; text-underline-offset: 3px; }
.qd-informe-bajada { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.85; color: var(--text-body); }

/* Variante lista: tapa chica a la izquierda */
.qd-informes--lista .qd-informe { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.qd-informes--lista .qd-informe-meta { margin-top: 0; }
@media (max-width: 560px) {
  .qd-informes--lista .qd-informe { grid-template-columns: 1fr; }
  .qd-informes--lista .qd-informe-meta { margin-top: var(--space-3); }
}

.qd-vacio { padding: var(--space-5); border: 1px dashed var(--line); border-radius: var(--radius-block); text-align: center; }

/* ------------------------------------------------------- nota / artículo */

.qd-nota-header { padding-block: var(--space-6) var(--space-4); }
.qd-nota-header .qd-antetitulo { margin-bottom: var(--space-4); }
.qd-nota-titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.qd-nota-lectura { font-family: var(--font-mono); font-style: italic; font-size: 15px; line-height: 1.85; color: var(--text-body); margin: 0; }

.qd-nota-tapa { margin-block: var(--space-5); border-radius: var(--radius-block); overflow: hidden; }
.qd-nota-tapa img { display: block; width: 100%; }

.qd-nota-cuerpo { padding-bottom: var(--space-6); }
.qd-nota-cuerpo h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-3);
}
.qd-nota-cuerpo h3 { font-family: var(--font-mono); font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--ink); margin: var(--space-4) 0 var(--space-2); }
.qd-nota-cuerpo blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-block);
  background: var(--brand);
  color: var(--on-brand);
}
.qd-nota-cuerpo blockquote p { color: var(--on-brand); margin: 0; }
.qd-nota-cuerpo figure { margin: var(--space-5) 0; }
.qd-nota-cuerpo figcaption { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-body); margin-top: var(--space-2); }
.qd-nota-cuerpo hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }

.qd-fuentes { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.qd-fuentes li { margin-bottom: var(--space-2); }

/* -------------------------------------------------------------- suscripción */

.qd-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.qd-form input[type="email"] {
  flex: 1 1 260px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--ink);
}
.qd-form input[type="email"]::placeholder { color: var(--text-body); }

/* ------------------------------------------------------------------ footer */

.qd-site-footer { border-top: 1px solid var(--line); padding-block: var(--space-5); text-align: center; }
.qd-site-footer .qd-footer-logo { width: 64px; height: 64px; border-radius: var(--radius-sm); }
.qd-site-footer .qd-footer-name { font-family: var(--font-mono); }
.qd-site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.qd-site-footer nav a { font-family: var(--font-mono); font-size: 12px; color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ varios */

.qd-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.qd-saltar {
  position: absolute; left: var(--space-3); top: calc(var(--space-3) * -4);
  background: var(--brand); color: var(--on-brand);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-decoration: none;
  transition: top 0.1s;
}
.qd-saltar:focus { top: var(--space-3); z-index: 20; }

/* ══════════════════════════════════ bloques visuales de los informes ══
   Gráfico de barras, cifras destacadas y grid de destacados. Se usan dentro
   del cuerpo de un informe; la plantilla los trae comentados para copiar. */

/* ─────────────────────────────────────────────── gráfico de barras ── */

.qd-grafico { margin: var(--space-5) 0; }

.qd-grafico-titulo {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.qd-barra-fila {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-radius: var(--radius-sm);
}

/* La fila entera es el objetivo del tooltip: se puede enfocar con el teclado */
.qd-barra-fila[data-qd-tooltip] { cursor: default; }
.qd-barra-fila[data-qd-tooltip]:hover,
.qd-barra-fila[data-qd-tooltip]:focus-visible { background: var(--line); }
.qd-barra-fila:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.qd-barra-nombre {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-barra-pista {
  height: 18px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qd-barra-relleno {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: var(--radius-sm);
  transform-origin: left center;
  animation: qd-crecer 0.5s ease-out both;
}

@keyframes qd-crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .qd-barra-relleno { animation: none; }
}

.qd-barra-valor {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 4ch;
}

/* La fila destacada del ranking lleva el acento, no el verde de marca */
.qd-barra--destacada .qd-barra-relleno { background: var(--accent-orange); }
.qd-barra--destacada .qd-barra-nombre { font-weight: 700; color: var(--ink); }

.qd-grafico figcaption,
.qd-grafico .qd-grafico-fuente {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-body);
  margin-top: var(--space-3);
}

@media (max-width: 560px) {
  .qd-barra-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre valor" "pista pista"; gap: var(--space-1) var(--space-2); }
  .qd-barra-nombre { grid-area: nombre; }
  .qd-barra-valor { grid-area: valor; }
  .qd-barra-pista { grid-area: pista; }
}

/* ────────────────────────────────────────────── cifras destacadas ── */

.qd-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.qd-cifra-bloque {
  padding: var(--space-4);
  border-radius: var(--radius-block);
  color: var(--on-accent);
}
.qd-cifra-bloque--brand { background: var(--brand); color: var(--on-brand); }
.qd-cifra-bloque--cyan { background: var(--accent-cyan); }
.qd-cifra-bloque--yellow { background: var(--accent-yellow); }
.qd-cifra-bloque--orange { background: var(--accent-orange); }
.qd-cifra-bloque--purple { background: var(--accent-purple); color: var(--on-purple); }

.qd-cifra-numero {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  display: block;
}

.qd-cifra-texto {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  display: block;
}

/* ───────────────────────────────────────────── grid de destacados ── */

.qd-destacados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.qd-destacado {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-block);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

a.qd-destacado:hover { border-color: var(--ink); }
a.qd-destacado:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.qd-destacado-puesto {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.qd-destacado-nombre {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-top: var(--space-1);
}
a.qd-destacado:hover .qd-destacado-nombre { text-decoration: underline; text-underline-offset: 3px; }

.qd-destacado-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-body);
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────── tooltip ── */

.qd-tooltip {
  position: fixed;
  z-index: 50;
  max-width: 280px;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.qd-tooltip[data-visible="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .qd-tooltip { transition: none; }
}

/* ═══════════════════════════════════════════════ footer: redes y crédito ══ */

.qd-site-footer .qd-footer-socials { gap: var(--space-3); }

.qd-site-footer .qd-footer-social {
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-sm);
}
.qd-site-footer .qd-footer-social svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.qd-site-footer .qd-footer-social:hover { background: var(--brand); color: var(--on-brand); }

.qd-footer-credito {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-body);
}
.qd-footer-credito a { color: var(--link-strong); text-decoration: underline; text-underline-offset: 3px; }
.qd-footer-corazon { color: var(--brand); font-style: normal; }

/* ═══════════════════════════════════════════ acceso de organizaciones ══ */

/* Cartel de demo. Se saca cuando el acceso sea de verdad. */
.qd-demo {
  background: var(--accent-yellow);
  color: var(--on-accent);
  padding-block: var(--space-3);
}
.qd-demo p { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
.qd-demo b { font-weight: 700; }

/* ─────────────────────────────────────────────────────────── login ── */

.qd-login { padding-block: var(--space-6); }

.qd-login-caja {
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-block);
  padding: var(--space-5);
}

.qd-login-caja .qd-titulo { margin-bottom: var(--space-4); }

/* Cabecera de la organización dentro del cuadro de login */
.qd-login-org {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.qd-login-org .qd-org-sigla { width: 44px; height: 44px; font-size: 20px; flex: none; }
.qd-login-org-nombre {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.qd-campo { display: block; margin-bottom: var(--space-4); }
.qd-campo span {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.qd-campo input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.qd-campo input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.qd-login-btn { width: 100%; justify-content: center; }

.qd-login-error {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--accent-red);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}

.qd-login-pista {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-body);
}
.qd-login-pista code {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}

/* ──────────────────────────────────────── listado de organizaciones ── */

.qd-orgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.qd-org {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-block);
  text-decoration: none;
  color: inherit;
}
.qd-org:hover { border-color: var(--ink); }
.qd-org:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.qd-org-sigla {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-accent);
}

.qd-org-nombre {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.qd-org:hover .qd-org-nombre { text-decoration: underline; text-underline-offset: 3px; }

.qd-org-meta { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-body); }

/* ────────────────────────────────── espacio de una organización ── */

.qd-panel-header { padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.qd-panel-header-inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.qd-miga {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-body);
  margin: 0 0 var(--space-3);
}
.qd-miga a { color: var(--link-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Marco donde se enchufa un dashboard hecho como artefacto */
.qd-dashboard {
  margin-top: var(--space-4);
  border: 2px solid var(--ink);
  border-radius: var(--radius-block);
  overflow: hidden;
  background: var(--surface-card);
}
.qd-dashboard iframe { display: block; width: 100%; height: 720px; border: 0; }

.qd-dashboard-vacio {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-block);
  margin-top: var(--space-4);
}
.qd-dashboard-vacio p { margin: 0 auto; max-width: 46ch; }

@media (max-width: 560px) {
  .qd-dashboard iframe { height: 520px; }
}

/* ═══════════════════════════════════════════════ recortes de collage ══
   Recortes sueltos del design system flotando en los huecos de la página.
   Regla de marca: nunca encima de texto. Por eso van apoyados en la columna
   vacía que queda a la derecha del texto (que mide --qd-max-texto) y se
   esconden apenas la pantalla deja de tener ese hueco. Son decorativos:
   alt="" y no reciben clics. */

.qd-collage { position: relative; }

/* El contenido siempre va por encima del recorte */
.qd-collage > .qd-wrap { position: relative; z-index: 1; }

.qd-recorte {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Todos se apoyan en el borde derecho del contenido, no en el del navegador:
   así el hueco entre el texto y el recorte es el mismo en cualquier pantalla. */
.qd-recorte { right: calc(max(0px, (100% - var(--qd-max)) / 2) + var(--space-4)); }

/* Abajo de este ancho el texto ya ocupa todo y el hueco desaparece */
@media (max-width: 960px) { .qd-recorte { display: none; } }

.qd-recorte--mano   { width: 190px; top: var(--space-5); transform: rotate(-8deg); }
.qd-recorte--lentes { width: 200px; top: var(--space-6); transform: rotate(6deg); }
.qd-recorte--avion  { width: 150px; top: 50%; transform: translateY(-50%) rotate(-12deg); }
.qd-recorte--labios { width: 130px; top: 50%; transform: translateY(-50%) rotate(10deg); }