/* Urbanist variable (OFL). WOFF2 primero: pesa la mitad que el TTF (38 frente a 85 KB). */
@font-face {
  font-family: Urbanist;
  src:
    url('/fonts/urbanist/Urbanist-VF.woff2') format('woff2'),
    url('/fonts/urbanist/Urbanist-VF.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* Respaldo con las medidas de Urbanist: mientras llega la fuente, los títulos ocupan lo mismo y no saltan */
@font-face {
  font-family: 'Urbanist Fallback';
  src: local(Arial);
  size-adjust: 96%;
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: Urbanist;
  src:
    url('/fonts/urbanist/Urbanist-Italic-VF.woff2') format('woff2'),
    url('/fonts/urbanist/Urbanist-Italic-VF.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Reserva para el difuminado de sistema de las PWA instaladas en iPhone. */
  --z-hueco-sistema-superior: 0px;
  --z-familia: Urbanist, 'Urbanist Fallback', system-ui, sans-serif;
  --z-tipo-display-tam: clamp(3rem, 6vw, 5.5rem);
  --z-tipo-display-alto: 1.02;
  --z-tipo-display-tracking: -0.03em;
  --z-tipo-display-peso: 600;
  --z-tipo-titular-1-tam: clamp(2.25rem, 4vw, 3.5rem);
  --z-tipo-titular-1-alto: 1.06;
  --z-tipo-titular-1-tracking: -0.02em;
  --z-tipo-titular-1-peso: 600;
  --z-tipo-titular-2-tam: clamp(1.75rem, 3vw, 2.5rem);
  --z-tipo-titular-2-alto: 1.1;
  --z-tipo-titular-2-tracking: -0.015em;
  --z-tipo-titular-2-peso: 600;
  --z-tipo-titular-3-tam: 1.5rem;
  --z-tipo-titular-3-alto: 1.2;
  --z-tipo-titular-3-tracking: -0.01em;
  --z-tipo-titular-3-peso: 600;
  --z-tipo-titular-4-tam: 1.25rem;
  --z-tipo-titular-4-alto: 1.3;
  --z-tipo-titular-4-tracking: -0.005em;
  --z-tipo-titular-4-peso: 600;
  --z-tipo-cuerpo-grande-tam: 1.125rem;
  --z-tipo-cuerpo-grande-alto: 1.55;
  --z-tipo-cuerpo-grande-tracking: 0;
  --z-tipo-cuerpo-grande-peso: 400;
  --z-tipo-cuerpo-tam: 1rem;
  --z-tipo-cuerpo-alto: 1.55;
  --z-tipo-cuerpo-tracking: 0;
  --z-tipo-cuerpo-peso: 400;
  --z-tipo-pequeno-tam: 0.875rem;
  --z-tipo-pequeno-alto: 1.5;
  --z-tipo-pequeno-tracking: 0.005em;
  --z-tipo-pequeno-peso: 400;
  --z-tipo-minimo-tam: 0.75rem;
  --z-tipo-minimo-alto: 1.45;
  --z-tipo-minimo-tracking: 0.01em;
  --z-tipo-minimo-peso: 500;
  --z-tipo-etiqueta-tam: 0.75rem;
  --z-tipo-etiqueta-alto: 1.3;
  --z-tipo-etiqueta-tracking: 0.18em;
  --z-tipo-etiqueta-peso: 600;
  --z-tipo-cifra-grande-tam: clamp(2.5rem, 5vw, 4.5rem);
  --z-tipo-cifra-grande-alto: 1;
  --z-tipo-cifra-grande-tracking: -0.02em;
  --z-tipo-cifra-grande-peso: 300;
  --z-radio: 0;
  --z-radio-circulo: 50%;
  /* Objetivo táctil mínimo (pulido-pwa §5): 44 px. */
  --z-zona-tactil: 2.75rem;
  /* Solo firma: logo, Q y contrapuntos; no usar como fondo de interfaz. */
  --z-deg: linear-gradient(
    90deg,
    #00dc91 0%,
    #158fad 31%,
    #1d71b8 45%,
    #3166a8 49%,
    #6f4473 62%,
    #a12a4a 75%,
    #c5162c 86%,
    #db0a1a 94%,
    #e30613 100%
  );
  /* Paradas fijas de la firma, también disponibles para SVG y canvas. */
  --z-deg-verde: #00dc91;
  --z-deg-turquesa: #158fad;
  --z-deg-azul: #1d71b8;
  --z-deg-azul-medio: #3166a8;
  --z-deg-violeta: #6f4473;
  --z-deg-granate: #a12a4a;
  --z-deg-rojo-medio: #c5162c;
  --z-deg-rojo-claro: #db0a1a;
  --z-deg-rojo: #e30613;
  --z-deg-v: linear-gradient(
    180deg,
    #00dc91 0%,
    #158fad 31%,
    #1d71b8 45%,
    #3166a8 49%,
    #6f4473 62%,
    #a12a4a 75%,
    #c5162c 86%,
    #db0a1a 94%,
    #e30613 100%
  );
  /* Azul acción de la norma 2026: enlaces destacados, cifras y gráficos. */
  --z-azul-accion: #1d71b8;
  --z-azul-accion-halo: rgb(29 113 184 / 0.15);
  /* Superficie azul para avisos que deben verse (versión nueva): igual en claro y en noche. */
  --z-azul-fondo: #1d71b8;
  --z-sobre-azul: #fff;
  --z-deg-punto: linear-gradient(90deg, #00dc91, #1d71b8, #e30613);
  --z-noche-bloque: #10141f;
  --z-fondo: #fff;
  /* Fachada de vídeo: velo bajo la miniatura y texto encima, iguales en claro y en noche. */
  --z-velo-video: rgb(16 20 31 / 0.22);
  --z-sobre-video: #fff;
  /* Papel no responde al tema: certificados y documentos imprimibles. */
  --z-papel: #fff;
  --z-sobre-papel: #1b1b1b;
  --z-sup: #efefed;
  --z-elev: #fff;
  --z-relleno: #e8e6e1;
  --z-texto: #1b1b1b;
  --z-texto-2: #5f5f5f;
  --z-texto-3: #626260;
  --z-borde: #e2dfd8;
  --z-borde-f: #7a7873;
  --z-accion: #1b1b1b;
  --z-boton: #1b1b1b;
  --z-boton-h: #333;
  --z-boton-a: #000;
  --z-sobre-boton: #fff;
  --z-foco: #1d71b8;
  --z-hover: #e8e6e1;
  --z-activo: #e2dfd8;
  --z-boton-fantasma-a: #d2cfc7;
  --z-dest: #8a3844;
  --z-dest-h: #74303a;
  --z-dest-a: #5f2730;
  --z-sobre-dest: #fff;
  --z-dis-bg: #e8e6e1;
  --z-dis-fg: #8a8780;
  --z-error: #8a3844;
  --z-error-fijo: #8a3844;
  --z-error-bg: #f9eef0;
  --z-error-bd: #e2b8bf;
  --z-ok: #1e7a4f;
  --z-ok-bg: #eef7f2;
  --z-ok-bd: #a9d6bf;
  --z-info: #1d71b8;
  --z-info-bg: #f1f4f8;
  --z-info-bd: #b9c4d6;
  --z-aviso: #8c6102;
  --z-aviso-bg: #fbf4e4;
  --z-aviso-bd: #e6cf98;
  --z-skel: #e8e6e1;
  --z-agua: #e8e6e1;
  --z-scrim: rgb(16 20 31 / 0.48);
  --z-tip: #1b1b1b;
  --z-sobre-tip: #fff;
  --z-foco-sp: rgb(27 27 27 / 0.06);
  --z-velo-blanco-85: rgb(255 255 255 / 0.85);
  --z-velo-blanco-25: rgb(255 255 255 / 0.25);
  --z-velo-blanco-16: rgb(255 255 255 / 0.16);
  --z-velo-blanco-15: rgb(255 255 255 / 0.15);
  /* Iridiscencia de CartaInclinable: foil holográfico sobre la ilustración de la carta, igual en claro y en
     noche (la carta es una imagen y no cambia con el tema). Solo para ese efecto; no son colores de interfaz. */
  --z-holo-brillo: rgb(255 255 255 / 0.26);
  --z-holo-rosa: rgb(255 0 122 / 0.17);
  --z-holo-amarillo: rgb(255 205 0 / 0.13);
  --z-holo-turquesa: rgb(0 224 168 / 0.17);
  --z-holo-azul: rgb(0 150 255 / 0.13);
  --z-holo-violeta: rgb(168 60 255 / 0.17);
  --z-velo-relieve-sombra: rgb(27 27 27 / 0.045);
  --z-velo-relieve-luz: rgb(255 255 255 / 0.9);
  --z-velo-relieve-sombra-noche: rgb(0 0 0 / 0.32);
  --z-velo-relieve-luz-noche: rgb(255 255 255 / 0.035);
  --z-velo-azul-noche: rgb(16 20 31 / var(--zq-velo, 0.6));
  --z-velo-negro-fino: rgb(0 0 0 / 0.035);
  --z-velo-negro-sombra: rgb(0 0 0 / 0.25);
  --z-negro: #000;
  --z-noche-fijo: #10141f;
  --z-texto-claro-fijo: #e6eaf1;
  --z-azul-suave: #c5d0e0;
  --z-azul-tenue: #b8c3d5;
  --z-azul-borde: #36527f;
  --z-marca-agua-papel: #f0efec;
  --z-texto-papel-secundario: #5f5f5f;
  --z-texto-papel-terciario: #6b6b6b;
  --z-eje-rojo: #be1622;
  --z-texto-contraste-claro: #3d3d3b;
  --z-texto-contraste-noche: #e1e6ee;
  --z-scrim-reducido: rgb(16 20 31 / 0.88);
  --z-scrim-reducido-noche: rgb(0 0 0 / 0.9);
  /* Solo para capas que flotan: menús, popovers, tooltips, diálogos y cajones. */
  --z-sombra-1: 0 1px 2px rgb(27 27 27 / 0.06), 0 8px 20px -6px rgb(27 27 27 / 0.14);
  --z-sombra-2: 0 2px 4px rgb(27 27 27 / 0.06), 0 24px 48px -12px rgb(27 27 27 / 0.24);
  color-scheme: light;
}

/* iOS 26 y 27 pintan Liquid Glass dentro de una PWA instalada en vertical. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (orientation: portrait) {
    :root {
      --z-hueco-sistema-superior: 1.5rem;
    }
  }
}
[data-tema='noche'],
html[data-theme='dark'],
.zq-seccion--noche {
  /* Azul acción aclarado para que contraste sobre azul noche. */
  --z-azul-accion: #8bc3f4;
  --z-azul-accion-halo: rgb(139 195 244 / 0.2);
  --z-noche-bloque: #171d2b;
  --z-fondo: #10141f;
  --z-sup: #171d2b;
  --z-elev: #202838;
  --z-relleno: #1c2433;
  --z-texto: #fff;
  --z-texto-2: #cbd2de;
  --z-texto-3: #adb7c8;
  --z-borde: #3a465c;
  --z-borde-f: #8897b0;
  --z-accion: #fff;
  --z-boton: #fff;
  --z-boton-h: #e6eaf1;
  --z-boton-a: #d0d8e4;
  --z-sobre-boton: #10141f;
  --z-foco: #fff;
  --z-hover: #2a3448;
  --z-activo: #364258;
  --z-boton-fantasma-a: #435069;
  --z-dest: #eda3ad;
  --z-dest-h: #eaa3ad;
  --z-dest-a: #d27683;
  --z-sobre-dest: #1b1b1b;
  --z-dis-bg: #202838;
  --z-dis-fg: #8897b0;
  --z-error: #eda3ad;
  --z-error-bg: #333d5f;
  --z-error-bd: #5e516d;
  --z-ok: #5cc08f;
  --z-ok-bg: #23445f;
  --z-ok-bd: #31636b;
  --z-info: #8bc3f4;
  --z-info-bg: #1c3048;
  --z-info-bd: #55789b;
  --z-aviso: #e0b252;
  --z-aviso-bg: #334257;
  --z-aviso-bd: #5e5e56;
  --z-skel: #202838;
  --z-agua: #171d2b;
  --z-scrim: rgb(0 0 0 / 0.72);
  --z-tip: #fff;
  --z-sobre-tip: #1b1b1b;
  --z-foco-sp: rgb(255 255 255 / 0.08);
  --z-velo-relieve-sombra: rgb(0 0 0 / 0.32);
  --z-velo-relieve-luz: rgb(255 255 255 / 0.035);
  --z-sombra-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.5);
  --z-sombra-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 24px 48px -12px rgb(0 0 0 / 0.65);
  color-scheme: dark;
}

/* Estilos globales de elemento. Solo para proyectos que adoptan el sistema entero. */
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  font-family: var(--z-familia);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--z-fondo);
  color: var(--z-texto);
  transition: background-color var(--z-dur-estado) ease, color var(--z-dur-estado) ease;
}
body {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: var(--z-tipo-cuerpo-peso);
  line-height: var(--z-tipo-cuerpo-alto);
  letter-spacing: var(--z-tipo-cuerpo-tracking);
  transition: background-color var(--z-dur-estado) ease, color var(--z-dur-estado) ease;
}
h1 { font-size: var(--z-tipo-titular-1-tam); font-weight: var(--z-tipo-titular-1-peso); line-height: var(--z-tipo-titular-1-alto); letter-spacing: var(--z-tipo-titular-1-tracking); }
h2 { font-size: var(--z-tipo-titular-2-tam); font-weight: var(--z-tipo-titular-2-peso); line-height: var(--z-tipo-titular-2-alto); letter-spacing: var(--z-tipo-titular-2-tracking); }
h3 { font-size: var(--z-tipo-titular-3-tam); font-weight: var(--z-tipo-titular-3-peso); line-height: var(--z-tipo-titular-3-alto); letter-spacing: var(--z-tipo-titular-3-tracking); }
h4 { font-size: var(--z-tipo-titular-4-tam); font-weight: var(--z-tipo-titular-4-peso); line-height: var(--z-tipo-titular-4-alto); letter-spacing: var(--z-tipo-titular-4-tracking); }
small { font-size: var(--z-tipo-pequeno-tam); font-weight: var(--z-tipo-pequeno-peso); line-height: var(--z-tipo-pequeno-alto); letter-spacing: var(--z-tipo-pequeno-tracking); }
table,
time,
data,
output,
.zq-cifras {
  font-variant-numeric: tabular-nums;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: var(--z-accion);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-thickness: 2px;
  }
}
:where(p, li, blockquote, td, th, caption, figcaption, .zq-prosa) a:not([class]) {
  color: var(--z-azul-accion);
  text-decoration-line: underline;
  text-decoration-color: var(--z-azul-accion);
}
@media (hover: hover) and (pointer: fine) {
  :where(p, li, blockquote, td, th, caption, figcaption, .zq-prosa) a:not([class]):hover {
    text-decoration-thickness: 2px;
  }
}
:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}
button,
a,
[role='button'],
label,
input {
  touch-action: manipulation;
}
@media (pointer: coarse) {
  /* Radios, casillas y deslizadores dibujan su propia caja y su zona: estirarlos los deforma. */
  :where(button, input:not([type='hidden'], [type='radio'], [type='checkbox'], [type='range']), select, textarea, [role='button'], [role='tab'], [role='switch'], [role='checkbox'], [role='radio']) {
    min-height: 2.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: var(--z-dur-reducido) !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --z-scrim: var(--z-scrim-reducido); }
  [data-tema='noche'], html[data-theme='dark'], .zq-seccion--noche { --z-scrim: var(--z-scrim-reducido-noche); }
}
@media (prefers-contrast: more) {
  :root { --z-borde: var(--z-borde-f); --z-texto-2: var(--z-texto-contraste-claro); }
  [data-tema='noche'], html[data-theme='dark'], .zq-seccion--noche { --z-texto-2: var(--z-texto-contraste-noche); }
  :focus-visible { outline-width: 3px; }
}

/* Clases zq- de tipografía, contrapuntos y temas. No tocan elementos sueltos. */
.zq-cifra {
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: 300;
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
  font-variant-numeric: tabular-nums;
}
.zq-cifras { font-variant-numeric: tabular-nums; }
.zq-etiqueta {
  text-transform: uppercase;
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  line-height: var(--z-tipo-etiqueta-alto);
}
.zq-programa {
  font-style: italic;
}
/* Marca de revisión: un dato por confirmar dentro de un texto («[[PENDIENTE: …]]» en el contenido). Se pinta como
   <mark class="zq-pendiente"> (el componente `Pendiente` y el HTML que genera el markdown usan esta misma clase).
   Fondo y anillo de aviso, que valen en claro y en noche. El texto va en --z-texto y no heredado: así contrasta con el
   relleno aunque el texto de alrededor sea gris, azul o blanco sobre una foto. Es la única definición: no la repitas
   en las hojas de componentes. */
.zq-pendiente {
  padding: 0 0.25rem;
  background: var(--z-aviso-bg);
  color: var(--z-texto);
  box-shadow: inset 0 0 0 1px var(--z-aviso-bd);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.zq-filo {
  height: 0.25rem;
  background: var(--z-deg);
}
.zq-punto {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-deg-punto);
}
.zq-accion-subrayada {
  border-bottom: 0.125rem solid transparent;
  border-image: var(--z-deg) 1;
}
.zq-cierre {
  height: 0.5rem;
  background: var(--z-deg);
}
/* Zona táctil de 44 px (pulido-pwa §5) sin cambiar la caja visible: un ::after centrado la amplía
   solo en lo que le falta. Para enlaces y botones pequeños que no son .zq-boton. */
.zq-zona-tactil {
  position: relative;
}
.zq-zona-tactil::after {
  content: '';
  position: absolute;
  inset-block: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
  inset-inline: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
}
/* Interfaz que no se selecciona ni abre el menú de iOS al mantener pulsado (pulido-pwa §2). */
.zq-interfaz {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.zq-marca-agua {
  background: url('../assets/logo/zinquo-marca-de-agua.svg') no-repeat right bottom/contain;
}
/* Cualquier zona con tema propio vuelve a resolver fondo y texto con sus tokens. */
[data-tema],
.zq-seccion {
  color: var(--z-texto);
}

[data-tema='noche'] {
  background-color: var(--z-fondo);
}

/* Sin la base global, los componentes siguen en Urbanist y con su caja. */
[class^='zq-'],
[class*=' zq-'] {
  box-sizing: border-box;
  font-family: var(--z-familia);
}

/* Pulso de los esqueletos de carga. */
@keyframes zq-skel {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* Entrada y salida de un grupo de cartas (el par de un duelo, una mano). `zq-cartas-entra` en el contenedor
   hace que cada hijo suba y se asiente al montarse; cambia su `key` en cada par para que se repita.
   `zq-cartas-sale` los encoge hacia arriba, los desvanece y bloquea los toques mientras se van. Son
   transiciones y no @keyframes, así que se pueden interrumpir: si la salida llega a mitad de la entrada,
   parte de donde esté. Entra con el muelle crítico y sale en --z-dur-salida (180 ms): la app cambia el par
   pasado ese tiempo más un fotograma, porque la transición empieza al pintar. Con movimiento reducido,
   ambas se quedan en el fundido de --z-dur-reducido (160 ms). */
.zq-cartas-entra > * {
  transition:
    opacity var(--z-muelle-critico-dur) var(--z-muelle-critico),
    transform var(--z-muelle-critico-dur) var(--z-muelle-critico);
}
@starting-style {
  .zq-cartas-entra > * {
    opacity: 0;
    transform: translateY(1.125rem) scale(0.97);
  }
}
.zq-cartas-entra > :nth-child(2) { transition-delay: 60ms; }
.zq-cartas-entra > :nth-child(3) { transition-delay: 120ms; }
.zq-cartas-entra > :nth-child(4) { transition-delay: 180ms; }
.zq-cartas-entra > :nth-child(5) { transition-delay: 240ms; }
.zq-cartas-entra > :nth-child(n + 6) { transition-delay: 300ms; }
.zq-cartas-sale {
  pointer-events: none;
}
.zq-cartas-sale > * {
  opacity: 0;
  transform: translateY(-0.625rem) scale(0.97);
  transition:
    opacity var(--z-dur-salida) var(--z-curva-salida),
    transform var(--z-dur-salida) var(--z-curva-salida);
}
@media (prefers-reduced-motion: reduce) {
  .zq-cartas-entra > *,
  .zq-cartas-sale > * {
    transition: opacity var(--z-dur-reducido);
  }
  .zq-cartas-entra > :nth-child(n) {
    transition-delay: 0ms;
  }
  .zq-cartas-sale > * {
    transform: none;
  }
}
.zq-cartas-entra > [data-movimiento='reducido'],
.zq-cartas-sale > [data-movimiento='reducido'] {
  transition: opacity var(--z-dur-reducido);
  transition-delay: 0ms;
}
.zq-cartas-sale > [data-movimiento='reducido'] {
  transform: none;
}

.zq-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  user-select: none;
  -webkit-touch-callout: none;
}

.zq-logo--logo {
  min-width: 4.5rem;
}

.zq-logo--horizontal {
  min-width: 11.25rem;
}

.zq-logo--respeto {
  padding: 1em;
}

.zq-q-marca {
  display: block;
  width: auto;
  height: var(--zq-q-tamano, 48px);
  min-height: 1rem;
  max-width: 100%;
  /* La Q no se estira: si falta ancho, se encoge entera dentro de su caja. */
  user-select: none;
  -webkit-touch-callout: none;
}

.zq-q-marca--respeto {
  padding: calc(var(--zq-q-tamano, 48px) / 3);
}

.zq-marca-de-agua {
  position: absolute;
  user-select: none;
  z-index: 0;
  left: 38%;
  top: 44%;
  width: 100%;
  height: 62%;
  pointer-events: none;
}

.zq-titular {
  margin: 0;
  font-weight: 600;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.zq-titular--display {
  font-size: var(--z-tipo-display-tam);
  line-height: var(--z-tipo-display-alto);
  letter-spacing: var(--z-tipo-display-tracking);
}

.zq-titular--1 {
  font-size: var(--z-tipo-titular-1-tam);
  line-height: var(--z-tipo-titular-1-alto);
  letter-spacing: var(--z-tipo-titular-1-tracking);
}

.zq-titular--2 {
  font-size: var(--z-tipo-titular-2-tam);
  line-height: var(--z-tipo-titular-2-alto);
  letter-spacing: var(--z-tipo-titular-2-tracking);
}

.zq-titular--3 {
  font-size: var(--z-tipo-titular-3-tam);
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
}

.zq-titular--4 {
  font-size: var(--z-tipo-titular-4-tam);
  line-height: var(--z-tipo-titular-4-alto);
  letter-spacing: var(--z-tipo-titular-4-tracking);
}

.zq-cifra--extralight {
  font-weight: 200;
}

.zq-programa {
  font-style: normal;
}

.zq-programa em {
  font-style: italic;
}

.zq-entradilla {
  margin: 0.875rem 0 0;
  max-width: 60ch;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 400;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
  text-wrap: pretty;
}

/* La Q que carga */
.zq-q-carga {
  display: inline-block;
  flex: none;
  width: auto;
  height: 1em;
  aspect-ratio: 1020 / 860;
  overflow: visible;
}

.zq-q-carga__trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 272;
  stroke-dasharray: 1 1.2;
  animation: zq-q-carga 1800ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes zq-q-carga {
  0% {
    stroke-dashoffset: 1;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-q-carga__trazo {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* La marca de agua solo va sobre blanco: en tema noche no se pinta. */
[data-tema='noche'] .zq-marca-de-agua,
html[data-theme='dark'] .zq-marca-de-agua {
  display: none;
}

/* Logo `auto`: sobre noche pasa a blanco (el degradado solo va sobre blanco) */
[data-tema='noche'] .zq-logo--auto,
html[data-theme='dark'] .zq-logo--auto,
.zq-seccion--noche .zq-logo--auto {
  filter: brightness(0) invert(1);
}

/* Familia acciones. Clases con prefijo zq-. */
.zq-boton {
  /* Un enlace con aspecto de botón no lleva el subrayado de los enlaces. */
  text-decoration: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color var(--z-dur-estado) ease-out;
}

/* La interfaz no se selecciona y el pulsado es propio: sin el recuadro gris de iOS. */
:is(.zq-boton, .zq-completar, .zq-accion-enlace, .zq-selector__boton, .zq-selector__lista button, .zq-buscador__lista button, .zq-seleccion__etiqueta, .zq-radio-tarjeta, .zq-interruptor) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.zq-boton__rotulo {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.zq-boton--s {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
}

.zq-boton--l {
  min-height: 3.25rem;
  padding: 0 1.5rem;
  font-size: 1rem;
}

.zq-boton--secundario {
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-texto);
  color: var(--z-texto);
}

.zq-boton--fantasma {
  background: transparent;
  color: var(--z-texto);
}

.zq-boton--destructivo {
  background: var(--z-dest);
  color: var(--z-sobre-dest);
}

.zq-boton--error {
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-texto);
  color: var(--z-texto);
}

.zq-boton--solo-icono {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
}

.zq-boton--s.zq-boton--solo-icono {
  width: 2.25rem;
  min-width: 2.25rem;
}

/* Un icono suelto sin fondo es una acción secundaria: gris hasta que se pasa por encima */
.zq-boton--fantasma.zq-boton--solo-icono {
  color: var(--z-texto-2);
}

@media (hover: hover) and (pointer: fine) {
  .zq-boton--fantasma.zq-boton--solo-icono:hover:not(:disabled) {
    color: var(--z-texto);
  }
}

/* El círculo para dar algo por hecho (BotonCompletar). La zona que se pulsa es mayor que el círculo */
.zq-completar {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  /* La zona táctil la pone el ::before: la altura mínima de base.css lo estiraba a 22 × 44 en el móvil */
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--z-borde-f);
  border-radius: var(--z-radio-circulo); /* círculo */
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 150ms ease-out,
    background-color 150ms ease-out,
    color 150ms ease-out;
}

.zq-completar::before {
  position: absolute;
  /* Zona de 44 px centrada en el círculo. El porcentaje es de la caja interior, así que cuenta también el borde */
  inset: calc((100% - var(--z-zona-tactil)) / 2);
  content: '';
}

@media (hover: hover) and (pointer: fine) {
  /* Antes de estar hecha no se pinta de verde: el verde es solo para lo completado. */
  .zq-completar:hover:not(:disabled) {
    border-color: var(--z-texto-2);
    color: var(--z-texto-2);
  }
}

.zq-completar:focus-visible {
  outline: 3px solid var(--z-foco);
  outline-offset: 2px;
}

.zq-completar--hecha {
  border-color: var(--z-ok);
  background: var(--z-ok);
  color: var(--z-fondo);
  cursor: default;
}

.zq-completar--cargando {
  border-color: var(--z-texto-2);
  border-right-color: transparent;
  color: transparent;
  cursor: progress;
  animation: zq-completar-gira 700ms linear infinite;
}

@keyframes zq-completar-gira {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-completar--cargando {
    animation: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .zq-boton:hover:not(:disabled) {
    background: var(--z-boton-h);
  }
}

@media (hover: hover) and (pointer: fine) {
  .zq-boton--secundario:hover:not(:disabled),
  .zq-boton--error:hover:not(:disabled) {
    background: var(--z-hover);
  }
}

@media (hover: hover) and (pointer: fine) {
  .zq-boton--fantasma:hover:not(:disabled) {
    background: var(--z-hover);
  }
}

@media (hover: hover) and (pointer: fine) {
  .zq-boton--destructivo:hover:not(:disabled) {
    background: var(--z-dest-h);
  }
}

.zq-boton:active:not(:disabled) {
  background: var(--z-boton-a);
}

/* Respuesta común: el color específico queda junto a cada variante y el gesto no añade sombra. */
:is(.zq-boton, .zq-completar, .zq-accion-enlace, .zq-selector__boton, .zq-selector__lista button, .zq-buscador__lista button, .zq-seleccion__etiqueta, .zq-radio-tarjeta, .zq-interruptor):active:not(:disabled):not([aria-disabled='true']),
.zq-demo-pulsado :is(.zq-boton, .zq-completar, .zq-accion-enlace, .zq-selector__boton, .zq-selector__lista button, .zq-buscador__lista button, .zq-seleccion__etiqueta, .zq-radio-tarjeta, .zq-interruptor):not(:disabled):not([aria-disabled='true']) {
  transition: background-color var(--z-dur-pulsado) ease-out;
}

.zq-completar:active:not(:disabled):not([aria-disabled='true']) { background: var(--z-activo); }
.zq-accion-enlace:active:not(:disabled):not([aria-disabled='true']) { color: var(--z-texto-3); }
.zq-selector__boton:active:not(:disabled):not([aria-disabled='true']),
.zq-selector__lista button:active:not(:disabled):not([aria-disabled='true']),
.zq-buscador__lista button:active:not(:disabled):not([aria-disabled='true']),
.zq-radio-tarjeta:active:not(:disabled):not([aria-disabled='true']) { background: var(--z-activo); }
.zq-interruptor:active:not(:disabled):not([aria-disabled='true']) .zq-interruptor__pista { background: var(--z-boton-a); }

:is(.zq-selector__boton, .zq-selector__lista button, .zq-buscador__lista button, .zq-seleccion__etiqueta, .zq-radio-tarjeta, .zq-interruptor) { touch-action: manipulation; }

.zq-boton--secundario:active:not(:disabled),
.zq-boton--error:active:not(:disabled),
.zq-boton--fantasma:active:not(:disabled) {
  background: var(--z-boton-fantasma-a);
}

.zq-boton--destructivo:active:not(:disabled) {
  background: var(--z-dest-a);
}

.zq-boton:disabled:not(.zq-boton--cargando) {
  background: var(--z-dis-bg);
  color: var(--z-dis-fg);
  cursor: not-allowed;
}

.zq-grupo-botones {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--z-borde-f);
  border-radius: var(--z-radio);
}

.zq-grupo-botones > .zq-boton {
  border-radius: 0;
}

/* Filete entre botones sin añadir borde (no mueve nada) y el botón elegido con el color de acción. */
.zq-grupo-botones > .zq-boton + .zq-boton {
  box-shadow: inset 1px 0 0 var(--z-borde-f);
}

.zq-grupo-botones > .zq-boton[aria-pressed='true'] {
  background: var(--z-boton);
  color: var(--z-sobre-boton);
}

@media (hover: hover) and (pointer: fine) {
  .zq-grupo-botones > .zq-boton[aria-pressed='true']:hover:not(:disabled) {
    background: var(--z-boton-h);
  }
}

.zq-grupo-botones > .zq-boton[aria-pressed='true']:active:not(:disabled) {
  background: var(--z-boton-a);
}

.zq-accion-enlace {
  position: relative;
  color: var(--z-accion);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Zona táctil de 44 px (pulido-pwa §2) sin cambiar la caja visible: el ::after centrado amplía solo
   lo que falta, igual que .zq-zona-tactil. Es para el enlace de acción suelto; en texto corrido
   (donde la regla lo exime) bastaría el enlace normal, porque la zona se solaparía con la línea contigua. */
.zq-accion-enlace::after {
  content: '';
  position: absolute;
  inset-block: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
  inset-inline: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
}

@media (hover: hover) and (pointer: fine) {
  .zq-accion-enlace:hover {
    color: var(--z-texto);
    text-decoration-thickness: 2px;
  }
}

.zq-accion-enlace:active {
  color: var(--z-texto-2);
}

.zq-accion-enlace--icono {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.zq-accion-enlace__icono {
  display: inline-flex;
  flex: none;
  text-decoration: none;
}

.zq-accion-enlace[aria-disabled='true'] {
  color: var(--z-texto-3);
  pointer-events: none;
  text-decoration: none;
}

.zq-campo,
.zq-selector,
.zq-buscador {
  position: relative;
  min-width: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-campo__etiqueta {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--z-texto);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-weight: 600;
  text-wrap: balance;
}

.zq-campo__control,
.zq-buscador__control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
}

.zq-campo__control:focus-within,
.zq-buscador__control:focus-within {
  box-shadow: inset 0 0 0 2px var(--z-foco);
}

.zq-campo input,
.zq-buscador input {
  flex: 1;
  min-width: 0;
  /* 44 px como .zq-boton m y el contenedor: el campo entero se pulsa, no solo un hueco de 42 px. */
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--z-texto);
  font: inherit;
}

/* Fechas nativas: heredan el esquema de color del tema, así el icono del calendario se ve en noche. */
.zq-campo input[type='date'],
.zq-campo input[type='datetime-local'],
.zq-campo input[type='month'] {
  min-width: 0;
  color-scheme: inherit;
  font-variant-numeric: tabular-nums;
}

.zq-campo input[type='date']::-webkit-calendar-picker-indicator,
.zq-campo input[type='datetime-local']::-webkit-calendar-picker-indicator,
.zq-campo input[type='month']::-webkit-calendar-picker-indicator {
  margin: 0;
  opacity: 0.7;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .zq-campo input[type='date']::-webkit-calendar-picker-indicator:hover,
  .zq-campo input[type='datetime-local']::-webkit-calendar-picker-indicator:hover,
  .zq-campo input[type='month']::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }
}

.zq-rango-fechas {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.zq-rango-fechas > legend {
  padding: 0;
  margin-bottom: 0.5rem;
}

.zq-rango-fechas__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 520px) {
  .zq-rango-fechas__campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.zq-campo input:disabled {
  color: var(--z-texto-3);
}

.zq-campo:has(input:disabled) .zq-campo__control {
  background: var(--z-relleno);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-campo__icono {
  display: flex;
  color: var(--z-texto-3);
}

.zq-campo--error .zq-campo__control,
.zq-selector--error .zq-selector__boton {
  box-shadow: inset 0 0 0 2px var(--z-error);
}

.zq-campo--valido .zq-campo__control,
.zq-selector--valido .zq-selector__boton { box-shadow: inset 0 0 0 2px var(--z-ok); }

.zq-campo__ayuda,
.zq-area__pie {
  margin: 0.375rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-campo__error,
.zq-seleccion__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.375rem 0 0;
  color: var(--z-error);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-campo__error svg,
.zq-seleccion__error svg {
  flex: none;
  margin-top: 0.125rem;
}

.zq-area textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  resize: vertical;
  border: 0;
  border-radius: var(--z-radio);
  outline-offset: -2px;
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font: inherit;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

/* Después del bloque base, para que el anillo de estado gane a la especificidad. */
.zq-area.zq-campo--error textarea { box-shadow: inset 0 0 0 2px var(--z-error); }
.zq-area.zq-campo--valido textarea { box-shadow: inset 0 0 0 2px var(--z-ok); }

.zq-area__pie {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.zq-area__pie span:last-child {
  font-variant-numeric: tabular-nums;
}

.zq-seleccion__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--z-texto);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  cursor: pointer;
}

.zq-seleccion input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
}

.zq-casilla__marca {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1.5px var(--z-borde-f);
  color: var(--z-sobre-boton);
}

.zq-casilla__check {
  display: none;
}

.zq-seleccion input:checked + .zq-casilla__marca {
  background: var(--z-boton);
  box-shadow: none;
}

.zq-seleccion input:checked + .zq-casilla__marca .zq-casilla__check {
  display: block;
}

.zq-seleccion input:disabled + .zq-casilla__marca {
  background: var(--z-relleno);
  box-shadow: inset 0 0 0 1.5px var(--z-borde);
}

.zq-seleccion input:focus-visible + .zq-casilla__marca {
  box-shadow: inset 0 0 0 1.5px var(--z-borde-f), 0 0 0 2px var(--z-fondo), 0 0 0 4px var(--z-foco);
}

.zq-seleccion--error .zq-casilla__marca {
  box-shadow: inset 0 0 0 2px var(--z-error);
}

/* ───────────────────────── Pastillas ───────────────────────── */

.zq-pastillas {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.zq-pastillas__etiqueta {
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--z-texto-2);
  text-transform: uppercase;
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  line-height: var(--z-tipo-etiqueta-alto);
}

.zq-pastillas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Casilla real con aspecto de botón: esquinas rectas y borde fino; la elegida, llena de azul de acción */
.zq-pastilla {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.zq-pastilla input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
}

.zq-pastilla:has(input:checked) {
  background: var(--z-azul-fondo);
  box-shadow: none;
  color: var(--z-sobre-azul);
}

.zq-pastilla:has(input:focus-visible) {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .zq-pastilla:not(.zq-pastilla--fija):not(:has(input:checked)):hover {
    background: var(--z-hover);
  }
}

/* Al apretar, se apaga al momento (la elegida también): se ve qué va a pasar antes de soltar */
.zq-pastilla:not(.zq-pastilla--fija):active {
  background: var(--z-activo);
  color: var(--z-texto);
  transition-duration: 0ms;
}

/* La que está de referencia (por ejemplo, la etapa que se edita) se ve, pero no se elige */
.zq-pastilla--fija {
  box-shadow: none;
  outline: 1px dashed var(--z-borde-f);
  outline-offset: -1px;
  color: var(--z-texto-2);
  cursor: default;
}

@media (pointer: coarse) {
  .zq-pastilla {
    min-height: 2.75rem;
  }
}

/* ───────────────────────── Deslizador ───────────────────────── */

.zq-deslizador {
  min-width: 0;
}

.zq-deslizador__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.zq-deslizador__etiqueta {
  color: var(--z-texto);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-weight: 600;
}

.zq-deslizador__valor {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.zq-deslizador input[type='range'] {
  width: 100%;
  height: 2.75rem; /* zona táctil de 44 px; la pista (6 px) queda centrada */
  margin: 0;
  background: transparent;
  appearance: none;
  touch-action: manipulation;
  cursor: pointer;
  accent-color: var(--z-azul-accion);
}

.zq-deslizador input[type='range']::-webkit-slider-runnable-track {
  height: 0.375rem;
  border-radius: var(--z-radio);
  background: var(--z-sup);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-deslizador input[type='range']::-moz-range-track {
  height: 0.375rem;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-deslizador input[type='range']::-moz-range-progress {
  height: 0.375rem;
  border-radius: var(--z-radio);
  background: var(--z-azul-accion);
}

.zq-deslizador input[type='range']::-webkit-slider-thumb {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -6px;
  appearance: none;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-azul-accion);
  box-shadow: 0 0 0 2px var(--z-fondo), 0 0 0 3px var(--z-azul-accion);
}

.zq-deslizador input[type='range']::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-azul-accion);
  box-shadow: 0 0 0 2px var(--z-fondo), 0 0 0 3px var(--z-azul-accion);
}

.zq-deslizador input[type='range']:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 3px;
  border-radius: var(--z-radio);
}

.zq-deslizador input[type='range']:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.zq-deslizador__marcas {
  position: relative;
  height: 1.25rem;
  margin: -0.8125rem 0.5625rem 0; /* sube bajo la pista: el campo de 44 px no añade aire */
  color: var(--z-texto-2);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  pointer-events: none;
  user-select: none;
}

.zq-deslizador__marcas span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.zq-deslizador__marcas span:first-child {
  transform: none;
}

.zq-deslizador__marcas span:last-child {
  transform: translateX(-100%);
}

.zq-deslizador__ayuda {
  margin: 0.375rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-grupo-radio {
  margin: 0;
  padding: 0;
  border: 0;
}

.zq-grupo-radio legend {
  margin-bottom: 0.625rem;
  padding: 0;
  color: var(--z-texto);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-weight: 600;
  text-wrap: balance;
}

.zq-grupo-radio__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.75rem;
}

.zq-radio-tarjeta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 1.125rem 1.125rem 1.125rem 3.125rem;
  border: 0;
  border-radius: var(--z-radio);
  outline-offset: 2px;
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  color: var(--z-texto);
  cursor: pointer;
  text-align: left;
  transition:
    box-shadow 120ms linear,
    background-color 120ms linear;
}

@media (hover: hover) and (pointer: fine) {
  .zq-radio-tarjeta:hover:not(:disabled) {
    box-shadow: inset 0 0 0 1px var(--z-borde-f);
  }
}

.zq-radio-tarjeta--activa {
  box-shadow: inset 0 0 0 2px var(--z-texto);
}

.zq-radio-tarjeta:disabled {
  background: var(--z-relleno);
  color: var(--z-texto-3);
  cursor: not-allowed;
}

.zq-radio-tarjeta__punto {
  position: absolute;
  top: 1.25rem;
  left: 1.125rem;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1.5px var(--z-borde-f);
}

.zq-radio-tarjeta--activa .zq-radio-tarjeta__punto {
  box-shadow: inset 0 0 0 6px var(--z-boton);
}

/* Una palabra sin cortes (un correo, una URL) parte línea en vez de salirse de la tarjeta */
:is(.zq-radio-tarjeta__titulo, .zq-radio-tarjeta__descripcion) {
  overflow-wrap: anywhere;
}
.zq-radio-tarjeta__titulo {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  font-weight: 600;
  text-wrap: balance;
}
.zq-radio-tarjeta__descripcion {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}
.zq-radio-tarjeta__precio {
  margin-top: 0.25rem;
  font-size: var(--z-tipo-titular-3-tam);
  line-height: var(--z-tipo-titular-3-alto);
  font-weight: 300;
}

.zq-selector__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.625rem 0 0.75rem;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.zq-selector__boton:disabled {
  background: var(--z-relleno);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  color: var(--z-texto-3);
  cursor: not-allowed;
}

.zq-selector__boton > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.zq-selector__boton svg {
  flex: none;
  color: var(--z-texto-2);
}

.zq-selector__lista,
.zq-buscador__lista {
  position: absolute;
  z-index: 5;
  right: 0;
  left: 0;
  max-height: 15.75rem;
  margin-top: 0.375rem;
  overflow: auto;
  padding: 0.375rem;
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radio);
  background: var(--z-elev);
  box-shadow: none;
}

.zq-lista-flotante {
  right: auto;
  left: auto;
  overflow: auto;
}

.zq-selector__lista button,
.zq-buscador__lista button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border: 0;
  border-radius: var(--z-radio);
  background: transparent;
  color: var(--z-texto);
  cursor: pointer;
  font: inherit;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-align: left;
}

.zq-buscador__lista button > span {
  min-width: 0;
}

.zq-buscador__lista button {
  min-height: 2.75rem;
  padding: 0.375rem 0.625rem;
}

@media (hover: hover) and (pointer: fine) {
  .zq-selector__lista button:hover,
  .zq-buscador__lista button:hover {
    background: var(--z-hover);
  }
}

.zq-buscador__control {
  gap: 0.5rem;
  box-shadow: inset 0 0 0 1px var(--z-accion);
}

.zq-buscador__control > svg {
  flex: none;
  color: var(--z-texto-2);
}

.zq-buscador__lista small {
  display: block;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-buscador__vacio {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  padding: 1.5rem 0.75rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-align: center;
  text-wrap: balance;
}

.zq-buscador__vacio svg {
  color: var(--z-texto-3);
}
.zq-buscador__vacio strong {
  color: var(--z-texto);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  font-weight: 600;
}

.zq-interruptor {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--z-radio);
  background: transparent;
  color: var(--z-texto);
  cursor: pointer;
  font: inherit;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-align: left;
}

.zq-interruptor__pista {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: var(--z-radio);
  background: var(--z-borde-f);
  transition: background-color 200ms cubic-bezier(0.65, 0, 0.35, 1);
}

.zq-interruptor__pastilla {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  /* Solo transform: la pastilla se desliza sin recalcular el diseño. */
  transition: transform 200ms cubic-bezier(0.65, 0, 0.35, 1);
}

.zq-interruptor--activado .zq-interruptor__pista {
  background: var(--z-boton);
}
.zq-interruptor--activado .zq-interruptor__pastilla {
  transform: translateX(1rem);
}

@media (hover: hover) and (pointer: fine) {
  .zq-interruptor:hover .zq-interruptor__pista {
    background: var(--z-texto-2);
  }
}
@media (hover: hover) and (pointer: fine) {
  .zq-interruptor--activado:hover .zq-interruptor__pista {
    background: var(--z-boton);
  }
}

.zq-interruptor:disabled .zq-interruptor__pista {
  background: var(--z-borde);
}
.zq-interruptor:disabled .zq-interruptor__pastilla {
  background: var(--z-relleno);
}

.zq-interruptor--q .zq-interruptor__pista {
  width: 4rem;
  height: 2rem;
}
.zq-interruptor--q .zq-interruptor__pastilla {
  top: 0.25rem;
  width: 1.75rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
}
.zq-interruptor--q.zq-interruptor--activado .zq-interruptor__pastilla {
  transform: translateX(1.8125rem);
}

.zq-interruptor__q {
  color: var(--z-texto-3);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: 1;
  font-weight: 700;
}
.zq-interruptor--activado .zq-interruptor__q {
  color: transparent;
  background: var(--z-deg);
  background-clip: text;
}

.zq-acciones-matriz {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.zq-acciones-matriz__tabla {
  display: grid;
  grid-template-columns: 150px repeat(7, minmax(130px, 1fr));
  min-width: 67.5rem;
}
.zq-acciones-matriz__tabla > * {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--z-borde);
}
.zq-acciones-matriz__tabla > strong {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-weight: 600;
}
.zq-acciones-matriz__tabla > .zq-acciones-matriz__cabecera {
  min-height: auto;
  color: var(--z-texto-2);
  border-bottom-color: var(--z-borde-f);
  font-size: var(--z-tipo-etiqueta-tam);
  line-height: var(--z-tipo-etiqueta-alto);
  font-weight: var(--z-tipo-etiqueta-peso);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  text-transform: uppercase;
}

.zq-estado-hover {
  box-shadow: inset 0 0 0 1px var(--z-texto) !important;
}
.zq-estado-foco {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}
.zq-estado-activo {
  box-shadow: inset 0 0 0 2px var(--z-foco) !important;
}
.zq-estado-error {
  box-shadow: inset 0 0 0 2px var(--z-error) !important;
}
.zq-estado-cargando {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

@media (prefers-reduced-motion: reduce) {
  :is(.zq-boton, .zq-completar, .zq-accion-enlace, .zq-selector__boton, .zq-selector__lista button, .zq-buscador__lista button, .zq-seleccion__etiqueta, .zq-radio-tarjeta, .zq-interruptor):active:not(:disabled):not([aria-disabled='true']),
  .zq-demo-pulsado :is(.zq-boton, .zq-completar, .zq-accion-enlace, .zq-selector__boton, .zq-selector__lista button, .zq-buscador__lista button, .zq-seleccion__etiqueta, .zq-radio-tarjeta, .zq-interruptor):not(:disabled):not([aria-disabled='true']) { transform: none; }
}

.zq-radio-matriz {
  appearance: none;
  position: relative;
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  /* El mínimo de 44 px del puntero táctil (base.css) lo estiraría en una píldora: la zona va en el ::after. */
  min-height: 0;
  margin: 0;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1.5px var(--z-borde-f);
  place-content: center;
}

/* Zona táctil de 44 × 44 px centrada, sin cambiar el círculo visible. El ::before queda para el punto. */
.zq-radio-matriz::after {
  content: '';
  position: absolute;
  inset-block: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
  inset-inline: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
}

.zq-radio-matriz:checked {
  background: var(--z-boton);
  box-shadow: none;
}

.zq-radio-matriz:checked::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-sobre-boton);
  content: '';
}

.zq-radio-matriz:disabled {
  background: var(--z-relleno);
  box-shadow: inset 0 0 0 1.5px var(--z-borde);
}

.zq-radio-matriz[aria-invalid='true'] {
  box-shadow: inset 0 0 0 2px var(--z-error);
}

@media (max-width: 640px), (pointer: coarse) {
  .zq-boton--s {
    min-height: 2.75rem;
  }
  .zq-boton--s.zq-boton--solo-icono {
    width: 2.75rem;
    min-width: 2.75rem;
  }
}

/* Cargando: el rótulo deja su sitio a la Q y el botón no cambia de ancho. */
.zq-boton--cargando {
  position: relative;
  cursor: progress;
}

.zq-boton--cargando .zq-boton__rotulo {
  visibility: hidden;
}

/* Rótulo de reserva: ocupa su sitio en la celda para que el botón no cambie de ancho. */
.zq-boton__rotulo--reserva {
  visibility: hidden;
}

.zq-boton__carga {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: 1;
}

/* Familia contenido. Valores transcritos de Componentes 2 Contenido. */
.zq-insignia-estado,
.zq-etiqueta-nivel {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  font-weight: 600;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.zq-insignia-estado {
  gap: 0.375rem;
  padding: 0 0.625rem 0 0.5rem;
  background: var(--z-relleno);
  color: var(--z-texto);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  letter-spacing: var(--z-tipo-minimo-tracking);
}
.zq-insignia-estado--borrador {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
}
.zq-insignia-estado--completado {
  background: var(--z-ok-bg);
  color: var(--z-ok);
  box-shadow: inset 0 0 0 1px var(--z-ok-bd);
}
.zq-insignia-estado--archivado {
  color: var(--z-texto-2);
}
.zq-insignia-estado--sin-acceso {
  background: var(--z-aviso-bg);
  color: var(--z-aviso);
  box-shadow: inset 0 0 0 1px var(--z-aviso-bd);
}
.zq-insignia-estado--en-curso {
  background: var(--z-info-bg);
  color: var(--z-info);
  box-shadow: inset 0 0 0 1px var(--z-info-bd);
}
.zq-etiqueta-nivel {
  gap: 0.4375rem;
  padding: 0 0.625rem;
  background: transparent;
  color: var(--z-texto);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  font-size: var(--z-tipo-etiqueta-tam);
  line-height: var(--z-tipo-etiqueta-alto);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  text-transform: uppercase;
}
.zq-etiqueta-nivel--instructor,
.zq-etiqueta-nivel--certificacion,
.zq-etiqueta-nivel--experto {
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  box-shadow: none;
}
.zq-etiqueta-nivel--sobre-foto {
  background: var(--z-papel);
  color: var(--z-sobre-papel);
}
.zq-etiqueta-nivel__punto {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--z-radio-circulo); /* círculo */
  background-image: var(--z-deg);
}
.zq-progreso {
  display: grid;
  gap: 0.5rem;
}
.zq-progreso__cabecera {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}
.zq-progreso__cabecera span:first-child {
  min-width: 0;
  font-weight: 600;
}
/* Urbanist no tiene cifras tabulares: se reserva el ancho de la cifra para que no baile. */
.zq-progreso__cabecera span:last-child {
  min-width: 4ch;
  color: var(--z-texto-2);
  text-align: end;
}
.zq-progreso__pista {
  height: 0.375rem;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}
.zq-progreso__relleno {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--z-radio);
  background: var(--z-texto);
  transform-origin: left center;
  transition: transform 300ms var(--z-muelle-critico), background-color var(--z-dur-estado) ease-out;
}
/* El verde es solo para lo completado. */
.zq-progreso__relleno--completo {
  background: var(--z-ok);
}
@media (prefers-reduced-motion: reduce) {
  .zq-progreso__relleno {
    transition: background-color var(--z-dur-reducido) linear;
  }
}
.zq-anillo-progreso {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}
.zq-anillo-progreso__circulo {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
}
.zq-anillo-progreso--72 .zq-anillo-progreso__circulo {
  width: 4.5rem;
  height: 4.5rem;
}
.zq-anillo-progreso svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.zq-anillo-progreso circle {
  fill: none;
  stroke: var(--z-relleno);
  stroke-width: 3;
}
.zq-anillo-progreso circle + circle {
  stroke: var(--z-texto);
  stroke-linecap: round;
}
.zq-anillo-progreso--completo circle + circle {
  stroke: var(--z-ok);
}
.zq-anillo-progreso__circulo > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-weight: 600;
}
.zq-anillo-progreso--72 .zq-anillo-progreso__circulo > span {
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}
.zq-anillo-progreso__etiqueta {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}
.zq-tarjeta-programa {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-elev);
  color: var(--z-texto);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .zq-tarjeta-programa:hover {
    box-shadow: inset 0 0 0 1px var(--z-borde-f);
  }
}
.zq-tarjeta-programa:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}
.zq-tarjeta-programa:active,
.zq-demo-pulsado .zq-tarjeta-programa {
  background: var(--z-activo);
  transition: background-color var(--z-dur-estado) ease-out;
}
.zq-tarjeta-programa__portada {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--z-sup);
}
.zq-tarjeta-programa__portada > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zq-tarjeta-programa--en-curso .zq-tarjeta-programa__portada,
.zq-tarjeta-programa--sin-empezar .zq-tarjeta-programa__portada {
  background: var(--z-noche-fijo);
}
.zq-tarjeta-programa__superior {
  position: absolute;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.zq-tarjeta-programa__superior:empty {
  display: none;
}
.zq-tarjeta-programa__candado {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--z-radio);
  background: var(--z-elev);
  color: var(--z-texto);
}
.zq-tarjeta-programa__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.125rem 1.125rem 1.25rem;
}
/* El nombre de un programa nunca se corta con «…». */
.zq-tarjeta-programa h3 {
  min-width: 0;
  margin: 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.zq-tarjeta-programa__cuerpo > p {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}
.zq-tarjeta-programa__pie {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.375rem;
}
.zq-tarjeta-programa__pie .zq-progreso {
  gap: 0.375rem;
}
.zq-tarjeta-programa__pie .zq-progreso__cabecera span:first-child {
  color: var(--z-texto-2);
  font-weight: 400;
}
.zq-tarjeta-programa__completado {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.375rem;
  color: var(--z-ok);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
}
/* Una acción principal por tarjeta. */
.zq-tarjeta-programa__accion {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--z-radio);
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  font-weight: 600;
}
/* La secundaria va fantasma: sin recuadro dentro de la tarjeta. */
.zq-tarjeta-programa--sin-acceso .zq-tarjeta-programa__accion,
.zq-tarjeta-programa--completado .zq-tarjeta-programa__accion {
  background: transparent;
  color: var(--z-texto);
}
.zq-avatar {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-relleno);
  color: var(--z-texto);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  font-weight: 600;
  line-height: 1;
}
.zq-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zq-avatar--24 {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--z-tipo-minimo-tam);
  line-height: 1;
}
.zq-avatar--32 {
  width: 2rem;
  height: 2rem;
  font-size: var(--z-tipo-minimo-tam);
  line-height: 1;
}
.zq-avatar--40 {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: 1;
}
.zq-avatar--56 {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: 1;
}
.zq-avatar--80 {
  width: 5rem;
  height: 5rem;
  font-size: var(--z-tipo-titular-3-tam);
  line-height: 1;
}
.zq-avatar--sello {
  overflow: visible;
  box-shadow: none;
}
.zq-avatar--sello > span:first-child,
.zq-avatar--sello img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: var(--z-radio-circulo); /* círculo */
}
.zq-avatar--sello > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--z-relleno);
}
.zq-avatar--sello svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.zq-avatar--sello circle {
  fill: none;
  stroke-width: 1.6;
}
.zq-avatar__sello {
  position: absolute;
  right: -3px;
  bottom: -1px;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-elev);
  box-shadow: 0 0 0 1px var(--z-borde);
  font-size: var(--z-tipo-minimo-tam);
  line-height: 1;
  font-weight: 300;
}
.zq-grupo-avatares {
  display: flex;
  align-items: center;
}
.zq-grupo-avatares > * {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--z-fondo);
}
.zq-grupo-avatares > *:first-child {
  margin-left: 0;
}
.zq-grupo-avatares__restantes {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: 1;
  font-weight: 600;
}
.zq-etiqueta-seccion {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--z-accion);
  font-size: var(--z-tipo-etiqueta-tam);
  line-height: var(--z-tipo-etiqueta-alto);
  font-weight: var(--z-tipo-etiqueta-peso);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  text-transform: uppercase;
}
.zq-etiqueta-seccion > span {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--z-radio);
  background-image: var(--z-deg);
}
.zq-etiqueta-seccion--lisa {
  color: var(--z-texto);
}
.zq-etiqueta-seccion--lisa > span {
  background: var(--z-texto);
}
.zq-bloque-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
}
.zq-bloque-cifras > div {
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid var(--z-borde-f);
  padding-top: 0.75rem;
}
.zq-bloque-cifras strong {
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: var(--z-tipo-cifra-grande-peso);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
}
.zq-bloque-cifras span {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}
.zq-cita-editorial {
  margin: 0;
  padding-top: 0.5rem;
}
.zq-cita-editorial blockquote {
  margin: 0;
  padding: 0;
}
.zq-cita-editorial p {
  margin: 0;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: 300;
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  text-indent: -0.42em;
  text-wrap: pretty;
}
.zq-cita-editorial figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}
.zq-cita-editorial figcaption > span {
  flex: none;
  width: 1.75rem;
  height: 0.0625rem;
  background: var(--z-borde-f);
}
.zq-bloque-bonus {
  position: relative;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-noche-fijo);
  color: var(--z-papel);
  padding: 1.75rem;
}
.zq-bloque-bonus__marca {
  position: absolute;
  right: -2.5rem;
  bottom: -3rem;
  opacity: 0.07;
  pointer-events: none;
}
.zq-bloque-bonus__contenido {
  position: relative;
}
.zq-bloque-bonus__etiqueta {
  display: inline-flex;
  height: 1.75rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-radius: var(--z-radio);
  background: var(--z-papel);
  color: var(--z-sobre-papel);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
  white-space: nowrap;
}
.zq-bloque-bonus .zq-cifra {
  display: block;
  margin-top: 1rem;
  font-size: var(--z-tipo-cifra-grande-tam);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
}
.zq-bloque-bonus h3 {
  max-width: 20ch;
  margin: 0.375rem 0 0;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: 600;
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  text-wrap: balance;
}
.zq-bloque-bonus__contenido > div {
  display: grid;
  gap: 0.625rem;
  max-width: 34ch;
  margin-top: 1.125rem;
}
.zq-bloque-bonus p {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}
.zq-bloque-bonus p > span:first-child {
  color: var(--z-azul-suave);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  font-weight: 300;
}
.zq-bloque-bonus p > span:last-child {
  color: var(--z-azul-tenue);
}
.zq-bloque-bonus b {
  color: var(--z-papel);
  font-weight: 600;
}
.zq-acordeon-preguntas {
  border-top: 1px solid var(--z-borde-f);
}
.zq-acordeon-preguntas > div {
  border-bottom: 1px solid var(--z-borde);
}
.zq-acordeon-preguntas h3 {
  margin: 0;
}
.zq-acordeon-preguntas button {
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  border-radius: var(--z-radio);
  padding: 0.875rem 0;
  background: transparent;
  color: var(--z-texto);
  cursor: pointer;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-align: left;
  text-wrap: balance;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.zq-acordeon-preguntas button:active:not(:disabled),
.zq-demo-pulsado .zq-acordeon-preguntas button {
  background: var(--z-activo);
  transition: background-color var(--z-dur-estado) ease-out;
}
.zq-acordeon-preguntas button:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: -2px;
}
.zq-acordeon-preguntas button svg {
  flex: none;
  transition: transform var(--z-dur-estado) ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .zq-acordeon-preguntas button svg {
    transition: none;
  }
}
.zq-acordeon-preguntas button[aria-expanded='true'] svg {
  transform: rotate(45deg);
}
.zq-acordeon-preguntas [role='region'] {
  padding: 0 2.5rem 1.125rem 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}
.zq-estado-vacio {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.75rem;
  border-radius: var(--z-radio);
  padding: 2.25rem 1.75rem;
  box-shadow: inset 0 0 0 1px var(--z-borde);
}
.zq-estado-vacio--vacio {
  background: var(--z-sup);
  box-shadow: none;
}
.zq-estado-vacio__titulo {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.zq-estado-vacio__titulo svg {
  flex: none;
  margin-top: 0.125rem;
}
/* Cualquier nivel de EstadoVacio (prop `nivel`), no solo el h3 de serie */
.zq-estado-vacio__titulo > :is(h2, h3, h4) {
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}
.zq-estado-vacio > p {
  max-width: 40ch;
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}
.zq-estado-vacio__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.25rem;
}
.zq-estado-vacio button {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  border: 0;
  border-radius: var(--z-radio);
  padding: 0 1.25rem;
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  cursor: pointer;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.zq-estado-vacio button:active,
.zq-demo-pulsado .zq-estado-vacio button {
  background: var(--z-boton-a);
  transition: background-color var(--z-dur-estado) ease-out;
}
.zq-estado-vacio button:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}
/* La acción secundaria va fantasma, sin recuadro. */
.zq-estado-vacio .zq-estado-vacio__secundaria {
  padding: 0 1.125rem;
  background: transparent;
  color: var(--z-texto);
}
.zq-estado-vacio .zq-estado-vacio__secundaria:active,
.zq-demo-pulsado .zq-estado-vacio .zq-estado-vacio__secundaria {
  background: var(--z-activo);
}
.zq-esqueleto-programa {
  overflow: hidden;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}
.zq-esqueleto-programa > div,
.zq-esqueleto-programa span {
  background: var(--z-skel);
  animation: zq-skel 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.zq-esqueleto-programa > div {
  aspect-ratio: 16 / 9;
}
.zq-esqueleto-programa section {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: 1.125rem;
}
.zq-esqueleto-programa span {
  display: block;
  height: 1.125rem;
  border-radius: var(--z-radio);
}
.zq-esqueleto-programa span:nth-child(1) {
  width: 34%;
  height: 0.75rem;
  animation-delay: 80ms;
}
.zq-esqueleto-programa span:nth-child(2) {
  width: 92%;
  animation-delay: 160ms;
}
.zq-esqueleto-programa span:nth-child(3) {
  width: 64%;
  animation-delay: 240ms;
}
.zq-esqueleto-programa span:nth-child(4) {
  height: 2.75rem;
  margin-top: 0.75rem;
  border-radius: var(--z-radio);
  animation-delay: 320ms;
}
@media (prefers-reduced-motion: reduce) {
  .zq-esqueleto-programa > div,
  .zq-esqueleto-programa span {
    animation: none;
  }
}
.zq-patrones-web {
  display: grid;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--z-borde-f);
}
.zq-patrones-web > div {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--z-borde);
}
.zq-patrones-web dt {
  min-width: 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  font-weight: 600;
  text-wrap: balance;
}
.zq-patrones-web dd {
  min-width: 0;
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}
@media (max-width: 480px) {
  .zq-patrones-web > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
  .zq-bloque-cifras {
    grid-template-columns: minmax(0, 1fr);
  }
}
.zq-contenido-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.25rem;
}
.zq-contenido-dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 2.5rem;
}
.zq-contenido-tres-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.25rem;
}

/* Carta inclinable · la carta de valores que se inclina en 3D hacia el puntero (CartaInclinable) -----
   Reglas del sistema aplicadas (docs/interaccion-y-movimiento.md y docs/pulido-pwa.md):
   - Solo con ratón o lápiz: el transform lo escribe useInclinacion, nunca un :hover, y con táctil o
     movimiento reducido no se escribe. Al pulsar no se mueve nada: cambia el borde de color.
   - Esquinas rectas y un borde fino en vez de sombra: una carta no flota sobre la página.
   - La iridiscencia (mix-blend-mode: overlay) es un efecto sobre la ilustración, no un fondo de
     interfaz; se apaga con iridiscencia={false}, con movimiento reducido y con transparencia reducida. */
.zq-carta-inclinable {
  /* La perspectiva va en el contenedor: el grupo que entra y sale (zq-cartas-entra y zq-cartas-sale)
     anima este elemento y la carta de dentro se inclina por su cuenta. */
  perspective: 1000px;
}
.zq-carta-inclinable__cara {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: var(--zq-carta-proporcion, 700 / 1078);
  overflow: hidden;
  border: 0.0625rem solid var(--z-borde);
  border-radius: var(--z-radio);
  background: var(--z-papel);
  color: inherit;
  font: inherit;
  /* Suaviza cada paso del puntero y la vuelta al reposo; el borde responde al pulsar. */
  transition:
    transform var(--z-dur-estado) ease-out,
    border-color var(--z-dur-pulsado);
}
button.zq-carta-inclinable__cara {
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
button.zq-carta-inclinable__cara:active {
  border-color: var(--z-accion);
}
.zq-carta-inclinable__cara:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}
.zq-carta-inclinable__imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El puntero siempre cae sobre la cara, y la imagen no se arrastra como un archivo. */
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Foil holográfico: un brillo que sigue al puntero y una banda de color que gira con él. Las variables
   las escribe useInclinacion en cada movimiento; los colores son los tokens --z-holo-*. */
.zq-carta-inclinable__holo {
  --zq-holo-x: 50%;
  --zq-holo-y: 50%;
  --zq-holo-ang: 105deg;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  /* overlay respeta los blancos: el bloque de texto de la carta apenas se tiñe y el color se concentra
     en la ilustración, que es donde hay medios tonos. Un velo blanco solo lavaría la carta. */
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at var(--zq-holo-x) var(--zq-holo-y), var(--z-holo-brillo), transparent 42%),
    linear-gradient(
      var(--zq-holo-ang),
      var(--z-holo-rosa) 8%,
      var(--z-holo-amarillo) 26%,
      var(--z-holo-turquesa) 46%,
      var(--z-holo-azul) 68%,
      var(--z-holo-violeta) 88%
    );
  transition: opacity var(--z-dur-estado);
}
/* Sin foil con movimiento reducido (es puro adorno) ni con transparencia reducida (se ve a través de él). */
@media (prefers-reduced-motion: reduce) {
  .zq-carta-inclinable__holo {
    display: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .zq-carta-inclinable__holo {
    display: none;
  }
}
.zq-carta-inclinable[data-movimiento='reducido'] .zq-carta-inclinable__holo {
  display: none;
}

/* Zona bloques-c: familia C «Datos, prueba y confianza» (42 a 57)
   y familia E «Personas y comunidad» (82 a 90).
   Reglas de docs/reglas-del-campus.md, pulido-pwa.md e interaccion-y-movimiento.md:
   - todo texto con un nivel de --z-tipo-* (tamaño e interlineado en pareja);
   - cifras grandes de web en cifra-grande, peso 300, azul de acción;
   - sin cajas dentro de cajas: filetes entre filas y tarjeta solo para un objeto;
   - nada se mueve al interactuar; pulsado solo color; hover solo con ratón;
   - objetivos de 44 px y rejillas con minmax(0, 1fr). */

/* Texto base de la zona: nivel cuerpo. Cada pieza fija el suyo. */
:is(
  .zq-b-cifras,
  .zq-b-cifra,
  .zq-b-grafico,
  .zq-b-tabla,
  .zq-b-indicadores,
  .zq-b-antes-despues,
  .zq-b-clientes,
  .zq-b-avales,
  .zq-b-prensa,
  .zq-b-investigacion,
  .zq-b-comparativa,
  .zq-b-linea-tiempo,
  .zq-b-microprueba,
  .zq-b-datos,
  .zq-b-mapa-red,
  .zq-b-verificar,
  .zq-b-equipo,
  .zq-b-persona,
  .zq-b-ponentes,
  .zq-b-directorio,
  .zq-b-testimonios,
  .zq-b-caso,
  .zq-b-comunidad,
  .zq-b-autor,
  .zq-b-redes
) {
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

/* ---------- Piezas comunes de la zona ---------- */

.zq-b-c-solo-lectores {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.zq-b-c-foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--z-radio);
  object-fit: cover;
  background-color: var(--z-relleno);
}

.zq-b-c-foto--vacia {
  background: var(--z-sup);
}

/* Etiquetas que cambian de un estado a otro («Ver datos» y «Ocultar datos»): se superponen en
   la misma celda y el ancho lo fija la más larga; solo se ve la del estado actual. */
.zq-b-c-rotulos {
  display: inline-grid;
}

.zq-b-c-rotulos > span {
  grid-area: 1 / 1;
  text-decoration: inherit;
}

.zq-b-c-rotulos > .zq-b-c-rotulo--oculto {
  visibility: hidden;
}

/* La interfaz no se selecciona: botones, filtros y pestañas de la zona. */
:is(
  .zq-b-grafico__ver,
  .zq-b-tabla__orden,
  .zq-b-clientes__pausa,
  .zq-b-equipo__ver-bio,
  .zq-b-equipo__flecha,
  .zq-b-testimonios__flecha,
  .zq-b-testimonios__fachada,
  .zq-b-directorio__filtro,
  .zq-b-redes__enlace,
  .zq-b-mapa-red__pais,
  .zq-b-clientes__logo
) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 42 · Banda de cifras ---------- */

/* Las columnas las fija el componente según cuántas cifras lleva (1 a 4): la banda ocupa todo el ancho. */
.zq-b-cifras {
  display: grid;
  grid-template-columns: repeat(var(--zq-b-cifras-columnas, 4), minmax(0, 1fr));
  gap: 1rem;
}

.zq-b-cifras__item {
  min-width: 0;
  border-top: 1px solid var(--z-texto);
  padding-top: 0.875rem;
}

.zq-b-cifras__cifra {
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: var(--z-tipo-cifra-grande-peso);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
  overflow-wrap: anywhere;
}

.zq-b-cifras--contador .zq-b-cifras__cifra {
  font-variant-numeric: tabular-nums;
}

.zq-b-cifras__texto {
  margin-top: 0.5rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  color: var(--z-texto-2);
  text-wrap: pretty;
}

.zq-b-cifras__fuente {
  margin-top: 0.25rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-3);
}

/* ---------- 43 · Cifra destacada ---------- */

.zq-b-cifra {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

/* La cifra es el protagonista del bloque: nivel cifra-grande, que es el papel de las cifras de web. */
.zq-b-cifra__cifra {
  flex: none;
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: var(--z-tipo-cifra-grande-peso);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
}

.zq-b-cifra__contexto {
  max-width: 20ch;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: var(--z-tipo-titular-3-peso);
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  text-wrap: balance;
}

.zq-b-cifra__fuente {
  margin-top: 0.5rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

/* ---------- 44 · Gráficos ---------- */

.zq-b-grafico {
  margin: 0;
}

.zq-b-grafico__titulo {
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: var(--z-tipo-titular-4-peso);
  line-height: var(--z-tipo-titular-4-alto);
  letter-spacing: var(--z-tipo-titular-4-tracking);
  text-wrap: balance;
}

.zq-b-grafico__barras,
.zq-b-grafico__progresos,
.zq-b-grafico__pictogramas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  max-width: 38.75rem;
  margin-top: 1rem;
}

.zq-b-grafico__progresos,
.zq-b-grafico__pictogramas {
  gap: 1rem;
}

.zq-b-grafico__fila {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 5ch;
  gap: 0.625rem;
  align-items: center;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-grafico__fila > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.zq-b-grafico__pista {
  display: block;
  height: 0.875rem;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
}

.zq-b-grafico__pista--fina {
  height: 0.5rem;
  margin-top: 0.375rem;
}

.zq-b-grafico__barra {
  display: block;
  height: 100%;
  border-radius: var(--z-radio);
  background: var(--z-texto-2);
}

.zq-b-grafico__barra--destacada {
  background: var(--z-azul-accion);
}

.zq-b-grafico__valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zq-b-grafico__progreso-cabeza {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-grafico__anillo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}

.zq-b-grafico__anillo svg {
  flex: none;
  max-width: 100%;
  aspect-ratio: 1;
}

.zq-b-grafico__anillo-pista,
.zq-b-grafico__anillo-tramo {
  fill: none;
  stroke-width: 14;
}

.zq-b-grafico__anillo-pista {
  stroke: var(--z-relleno);
}

.zq-b-grafico__anillo-tramo,
.zq-b-grafico__anillo-tramo--gris-1 {
  stroke: var(--z-texto-2);
}

.zq-b-grafico__anillo-tramo--gris-2 {
  stroke: var(--z-borde-f);
}

.zq-b-grafico__anillo-tramo--gris-3 {
  stroke: var(--z-borde);
}

.zq-b-grafico__anillo-tramo--destacado {
  stroke: var(--z-azul-accion);
}

.zq-b-grafico__leyenda {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-grafico__leyenda li {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr) auto;
  gap: 0.625rem;
  align-items: center;
  min-width: min(13.75rem, 100%);
}

.zq-b-grafico__muestra {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--z-radio);
  background: var(--z-texto-2);
}

.zq-b-grafico__muestra--gris-2 {
  background: var(--z-borde-f);
}

.zq-b-grafico__muestra--gris-3 {
  background: var(--z-borde);
}

.zq-b-grafico__muestra--destacada {
  background: var(--z-azul-accion);
}

.zq-b-grafico__linea {
  max-width: 38.75rem;
  margin-top: 1rem;
}

.zq-b-grafico__linea svg {
  display: block;
  width: 100%;
  height: 13.75rem;
}

.zq-b-grafico__guia {
  stroke: var(--z-borde);
  stroke-width: 1;
}

.zq-b-grafico__trazo {
  fill: none;
  stroke: var(--z-azul-accion);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.zq-b-grafico__ejes {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  letter-spacing: var(--z-tipo-minimo-tracking);
  color: var(--z-texto-2);
}

.zq-b-grafico__ejes > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.zq-b-grafico__celdas {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.zq-b-grafico__celda {
  aspect-ratio: 1;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
}

.zq-b-grafico__celda--llena {
  background: var(--z-texto-2);
}

.zq-b-grafico__celda--destacada {
  background: var(--z-azul-accion);
}

.zq-b-grafico__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  margin-top: 0.25rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

.zq-b-grafico__ver {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--z-texto);
  cursor: pointer;
}

.zq-b-grafico__ver > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.zq-b-grafico__tabla {
  width: 100%;
  max-width: 38.75rem;
  margin-top: 0.5rem;
  border-collapse: collapse;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-grafico__tabla th,
.zq-b-grafico__tabla td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--z-borde);
  text-align: left;
}

.zq-b-grafico__tabla thead th {
  border-top: 0;
  border-bottom: 1px solid var(--z-borde-f);
  font-weight: 600;
}

.zq-b-grafico__tabla td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zq-b-grafico__tabla tbody th {
  font-weight: 400;
}

/* ---------- 45 · Tabla de datos ---------- */

.zq-b-tabla {
  overflow-x: auto;
  max-height: var(--zq-b-tabla-alto, none);
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-tabla table {
  width: 100%;
  min-width: 32.5rem;
  border-collapse: collapse;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 0.875rem;
  background: var(--z-sup);
  text-align: left;
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-tabla thead th:not(:has(button)) {
  padding-block: 0.625rem;
}

.zq-b-tabla tbody tr {
  border-top: 1px solid var(--z-borde);
}

.zq-b-tabla tbody th,
.zq-b-tabla td {
  padding: 0.625rem 0.875rem;
  text-align: left;
}

.zq-b-tabla tbody th {
  font-weight: 600;
}

.zq-b-tabla td {
  font-weight: 400;
}

.zq-b-tabla .zq-b-tabla__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zq-b-tabla__orden {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.zq-b-tabla__num .zq-b-tabla__orden {
  flex-direction: row-reverse;
}

/* El hueco de la flecha existe siempre: al ordenar no se mueve el título. */
.zq-b-tabla__flecha {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
}

.zq-b-tabla__orden svg {
  flex: none;
}

/* ---------- 46 · Indicadores ---------- */

.zq-b-indicadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.zq-b-indicadores__item {
  min-width: 0;
  padding: 1.25rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-indicadores__valor {
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: var(--z-tipo-cifra-grande-peso);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
  overflow-wrap: anywhere;
}

.zq-b-indicadores__texto {
  margin-top: 0.5rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-indicadores__meta {
  margin-top: 0.25rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

/* ---------- 47 · Antes y después ---------- */

.zq-b-antes-despues {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--z-texto);
}

.zq-b-antes-despues__par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--z-borde);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-antes-despues__antes {
  color: var(--z-texto-2);
  text-wrap: pretty;
}

.zq-b-antes-despues__despues {
  font-weight: 600;
  text-wrap: pretty;
}

/* ---------- 48 · Clientes ---------- */

.zq-b-clientes__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.zq-b-clientes__rotulo {
  min-width: 0;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
  text-wrap: balance;
}

.zq-b-clientes__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-clientes__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  padding: 0 1rem;
  border-radius: var(--z-radio);
  background: var(--z-sup);
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-alto);
  text-align: center;
  text-decoration: none;
}

.zq-b-clientes__logo img {
  max-width: 100%;
  max-height: 1.75rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
}

/* Rejilla con filetes por celda: el borde de arriba y de la izquierda lo pone la lista y el de la
   derecha y el de abajo, cada logo. Las celdas que sobran en la última fila quedan en blanco. */
.zq-b-clientes--rejilla .zq-b-clientes__lista {
  grid-template-columns: repeat(var(--zq-b-clientes-columnas, 6), minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--z-borde);
  border-left: 1px solid var(--z-borde);
}

.zq-b-clientes--rejilla .zq-b-clientes__lista > li {
  min-width: 0;
}

.zq-b-clientes--rejilla .zq-b-clientes__logo {
  height: 5.5rem;
  border-right: 1px solid var(--z-borde);
  border-bottom: 1px solid var(--z-borde);
  border-radius: 0;
  background: var(--z-fondo);
}

@media (max-width: 1023px) {
  .zq-b-clientes--rejilla .zq-b-clientes__lista {
    grid-template-columns: repeat(var(--zq-b-clientes-columnas-tablet, 4), minmax(0, 1fr));
  }
}

.zq-b-clientes__pausa {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--z-radio);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  cursor: pointer;
}

.zq-b-clientes__ventana {
  overflow: hidden;
}

.zq-b-clientes__cinta {
  display: flex;
  width: max-content;
  animation: zq-b-clientes-cinta 40s linear infinite;
}

.zq-b-clientes--carrusel .zq-b-clientes__lista {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}

.zq-b-clientes--carrusel .zq-b-clientes__logo {
  width: 12.5rem;
}

.zq-b-clientes__ventana:focus-within .zq-b-clientes__cinta,
.zq-b-clientes--pausado .zq-b-clientes__cinta {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .zq-b-clientes__ventana:hover .zq-b-clientes__cinta {
    animation-play-state: paused;
  }
}

@keyframes zq-b-clientes-cinta {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 49 · Avales ---------- */

.zq-b-avales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-avales__item {
  min-width: 0;
  padding: 1.25rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-avales__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 2rem;
  margin-bottom: 0.75rem;
  object-fit: contain;
  object-position: left center;
}

.zq-b-avales__nombre {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
}

.zq-b-avales__nombre a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  overflow-wrap: anywhere;
}

.zq-b-avales__texto {
  margin-top: 0.25rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
  text-wrap: pretty;
}

.zq-b-avales--columna-noche {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--z-borde);
}

.zq-b-avales--columna-noche .zq-b-avales__item {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.125rem 0;
  border-radius: 0;
  border-bottom: 1px solid var(--z-borde);
  box-shadow: none;
}

.zq-b-avales--columna-noche .zq-b-avales__logo {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.zq-b-avales--columna-noche .zq-b-avales__texto {
  margin-top: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

/* ---------- 50 · Prensa ---------- */

.zq-b-prensa {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--z-borde);
}

.zq-b-prensa__item {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(0, 7.5rem);
  gap: 0 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--z-borde);
}

.zq-b-prensa__medio {
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

.zq-b-prensa__titular {
  display: block;
  padding-block: 0.5rem;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  color: var(--z-texto);
  text-decoration: none;
  text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
  .zq-b-prensa__titular:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

.zq-b-prensa__titular:active {
  color: var(--z-azul-accion);
}

.zq-b-prensa__fecha {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

/* ---------- 51 · Investigación ---------- */

.zq-b-investigacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.zq-b-investigacion__item {
  display: flex;
  flex-direction: row;
  gap: 1.75rem;
}

.zq-b-investigacion__item > div {
  min-width: 0;
}

.zq-b-investigacion__cifra {
  flex: none;
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: var(--z-tipo-cifra-grande-peso);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
}

.zq-b-investigacion__hallazgo {
  max-width: 40ch;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: var(--z-tipo-titular-3-peso);
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  text-wrap: balance;
}

.zq-b-investigacion__referencia {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--z-tipo-pequeno-tam);
  font-style: normal;
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
  overflow-wrap: anywhere;
}

.zq-b-investigacion__referencia a {
  color: inherit;
}

.zq-b-investigacion--lista {
  gap: 0;
  border-top: 1px solid var(--z-borde);
}

.zq-b-investigacion--lista .zq-b-investigacion__item {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--z-borde);
}

.zq-b-investigacion--lista .zq-b-investigacion__cifra {
  min-width: 0;
  font-size: var(--z-tipo-titular-2-tam);
  line-height: var(--z-tipo-titular-2-alto);
  letter-spacing: var(--z-tipo-titular-2-tracking);
  overflow-wrap: anywhere;
}

.zq-b-investigacion--lista .zq-b-investigacion__hallazgo {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
  font-weight: 600;
}

/* ---------- 52 · Comparativa ---------- */

.zq-b-comparativa__tabla {
  overflow-x: auto;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-comparativa table {
  width: 100%;
  min-width: 32.5rem;
  border-collapse: collapse;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-comparativa thead tr {
  border-bottom: 1px solid var(--z-borde-f);
  text-align: left;
}

.zq-b-comparativa thead th {
  padding: 0.625rem 0.875rem;
  font-weight: 600;
  text-align: left;
}

.zq-b-comparativa tbody tr {
  border-top: 1px solid var(--z-borde);
}

.zq-b-comparativa tbody tr:first-child {
  border-top: 0;
}

.zq-b-comparativa tbody th {
  padding: 0.625rem 0.875rem;
  font-weight: 400;
  text-align: left;
}

.zq-b-comparativa td {
  padding: 0.625rem 0.875rem;
  font-weight: 600;
}

.zq-b-comparativa td svg,
.zq-b-comparativa__fila strong svg {
  margin-right: 0.375rem;
  vertical-align: -3px;
}

.zq-b-comparativa__tarjetas {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.zq-b-comparativa__tarjeta {
  overflow: hidden;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-comparativa__nombre {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--z-borde-f);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
}

.zq-b-comparativa__fila {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--z-borde);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-comparativa__nombre + .zq-b-comparativa__fila {
  border-top: 0;
}

.zq-b-comparativa__fila > span {
  min-width: 0;
}

.zq-b-comparativa__fila strong {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 53 · Línea temporal ---------- */

.zq-b-linea-tiempo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-linea-tiempo__hito {
  min-width: 0;
  border-top: 2px solid var(--z-texto);
  padding-top: 0.75rem;
}

.zq-b-linea-tiempo__anio {
  font-size: var(--z-tipo-titular-2-tam);
  font-weight: 300;
  line-height: var(--z-tipo-titular-2-alto);
  letter-spacing: var(--z-tipo-titular-2-tracking);
}

.zq-b-linea-tiempo__texto {
  margin-top: 0.375rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-linea-tiempo--vertical {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 45rem;
  border-left: 2px solid var(--z-texto);
}

.zq-b-linea-tiempo--vertical .zq-b-linea-tiempo__hito {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0 0 1.5rem 1.5rem;
  border-top: 0;
}

.zq-b-linea-tiempo--vertical .zq-b-linea-tiempo__texto {
  margin-top: 0;
}

/* ---------- 54 · Microprueba ---------- */

.zq-b-microprueba {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

.zq-b-microprueba li + li::before {
  content: '· ';
}

/* ---------- 55 · Datos clave ---------- */

.zq-b-datos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.0625rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-borde);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-datos__item {
  min-width: 0;
  padding: 0.875rem;
  background: var(--z-fondo);
}

.zq-b-datos__dato {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

.zq-b-datos__valor {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-alto);
  overflow-wrap: anywhere;
}

/* ---------- 56 · Mapa de la red ---------- */

.zq-b-mapa-red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.zq-b-mapa-red__mapa {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-sup);
}

.zq-b-mapa-red__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zq-b-mapa-red__punto {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-texto);
  box-shadow: 0 0 0 4px var(--z-azul-accion-halo);
}

.zq-b-mapa-red__punto--destacado {
  background: var(--z-azul-accion);
}

.zq-b-mapa-red__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  min-width: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-mapa-red__lista ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-mapa-red__pais {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--z-texto);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  a.zq-b-mapa-red__pais:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

a.zq-b-mapa-red__pais:active {
  color: var(--z-azul-accion);
}

.zq-b-mapa-red__nota {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

/* ---------- 57 · Verificador de certificados ---------- */

.zq-b-verificar {
  max-width: 32.5rem;
}

.zq-b-verificar__fila {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
}

.zq-b-verificar__campo {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font: inherit;
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-alto);
  letter-spacing: 0.04em;
}

.zq-b-verificar__campo:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}

.zq-b-verificar__boton {
  align-self: center;
}

.zq-b-verificar__resultado {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.875rem;
  border-radius: var(--z-radio);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-verificar__resultado > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.zq-b-verificar__resultado strong {
  font-weight: 600;
}

.zq-b-verificar__resultado > svg {
  flex: none;
}

.zq-b-verificar__resultado--valido {
  background: var(--z-ok-bg);
  box-shadow: inset 0 0 0 1px var(--z-ok-bd);
}

.zq-b-verificar__resultado--valido strong {
  color: var(--z-ok);
}

.zq-b-verificar__resultado--valido .zq-q-marca {
  height: 1.5rem;
  width: auto;
}

.zq-b-verificar__resultado--no-encontrado {
  background: var(--z-aviso-bg);
  box-shadow: inset 0 0 0 1px var(--z-aviso-bd);
}

.zq-b-verificar__resultado--no-encontrado strong,
.zq-b-verificar__resultado--no-encontrado > svg {
  color: var(--z-aviso);
}

.zq-b-verificar__resultado--revocado {
  background: var(--z-error-bg);
  box-shadow: inset 0 0 0 1px var(--z-error-bd);
}

.zq-b-verificar__resultado--revocado strong,
.zq-b-verificar__resultado--revocado > svg {
  color: var(--z-error);
}

/* ---------- 82 · Equipo ---------- */

.zq-b-equipo__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-equipo__lista > li {
  min-width: 0;
}

.zq-b-equipo__nombre {
  margin: 0.625rem 0 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
}

.zq-b-equipo__cargo {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

.zq-b-equipo__ver-bio {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto);
  cursor: pointer;
}

.zq-b-equipo__ver-bio > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.zq-b-equipo__bio {
  margin: 0;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
  text-wrap: pretty;
}

.zq-b-equipo--carrusel .zq-b-equipo__lista {
  display: grid;
  grid-auto-columns: calc((100% - 3rem) / 4);
  grid-auto-flow: column;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.zq-b-equipo--carrusel .zq-b-equipo__lista > li {
  scroll-snap-align: start;
}

/* Variante texto: sin foto, con filete por persona y la bio siempre visible (cuerpo, no se esconde).
   Las columnas las fija el componente según cuántas personas hay (1 a 4). */
.zq-b-equipo--texto .zq-b-equipo__lista {
  grid-template-columns: repeat(var(--zq-b-equipo-columnas, 4), minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

/* Una sola persona: no se estira a todo el ancho, el texto se queda en una medida legible. */
.zq-b-equipo--texto .zq-b-equipo__lista > li:only-child {
  max-width: 60ch;
}

.zq-b-equipo--texto .zq-b-equipo__ficha {
  padding-top: 1rem;
  border-top: 1px solid var(--z-borde);
}

.zq-b-equipo--texto .zq-b-equipo__nombre {
  margin: 0;
}

.zq-b-equipo--texto .zq-b-equipo__cargo {
  margin-top: 0.25rem;
}

.zq-b-equipo--texto .zq-b-equipo__bio {
  margin-top: 0.5rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

@media (max-width: 1023px) {
  .zq-b-equipo--texto .zq-b-equipo__lista {
    grid-template-columns: repeat(var(--zq-b-equipo-columnas-tablet, 2), minmax(0, 1fr));
  }
}

.zq-b-equipo__controles {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.zq-b-equipo__flecha,
.zq-b-testimonios__flecha {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--z-radio);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  cursor: pointer;
}

/* ---------- 83 · Persona protagonista ---------- */

.zq-b-persona {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.zq-b-persona > div {
  min-width: 0;
}

.zq-b-persona__media {
  max-width: 18.75rem;
}

.zq-b-persona__nombre {
  margin: 0;
  font-size: var(--z-tipo-titular-2-tam);
  font-weight: var(--z-tipo-titular-2-peso);
  line-height: var(--z-tipo-titular-2-alto);
  letter-spacing: var(--z-tipo-titular-2-tracking);
  text-wrap: balance;
}

.zq-b-persona__cargo {
  margin-top: 0.375rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  color: var(--z-texto-2);
}

.zq-b-persona__bio {
  max-width: 60ch;
  margin: 1.125rem 0 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: pretty;
}

/* Subtítulo: bajo un titular de sección el nombre es titular-3, no otro titular-2. */
.zq-b-persona__nombre--3 {
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: var(--z-tipo-titular-3-peso);
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
}

/* Marcas en línea de `bioHtml`. */
.zq-b-persona__bio strong {
  font-weight: 600;
}

.zq-b-persona__bio a {
  color: var(--z-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.zq-b-persona__cita {
  margin: 1.125rem 0 0;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: 300;
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  text-wrap: pretty;
}

/* ---------- 84 · Ponentes ---------- */

.zq-b-ponentes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-ponentes__ficha {
  min-width: 0;
}

.zq-b-ponentes__nombre {
  margin: 0.625rem 0 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
}

.zq-b-ponentes__tema {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

/* ---------- 85 · Directorio ---------- */

.zq-b-directorio__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.zq-b-directorio__filtro {
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: var(--z-radio);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font: inherit;
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  cursor: pointer;
}

.zq-b-directorio__filtro[aria-pressed='true'] {
  background: var(--z-boton);
  box-shadow: none;
  color: var(--z-sobre-boton);
}

.zq-b-directorio__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-directorio__ficha {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 1.25rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-directorio__ficha > div {
  min-width: 0;
}

.zq-b-directorio .zq-b-directorio__avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

.zq-b-directorio__nombre {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  overflow-wrap: anywhere;
}

.zq-b-directorio__nombre a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
}

.zq-b-directorio__rol {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

/* ---------- 86 · Testimonios ---------- */

.zq-b-testimonios {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.zq-b-testimonios__cita {
  min-width: 0;
  margin: 0;
}

.zq-b-testimonios__cita blockquote {
  margin: 0;
}

/* Cita grande (unica y carrusel): titular-3 con peso ligero. */
.zq-b-testimonios__cita p {
  margin: 0;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: 300;
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  text-indent: -0.42em;
  text-wrap: pretty;
}

.zq-b-testimonios__autoria {
  margin-top: 0.75rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

/* Retrato junto a la firma (solo si la cita lo trae): avatar de 40 px y el texto al lado. */
.zq-b-testimonios__autoria--con-retrato {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.zq-b-testimonios__autoria--con-retrato > span:last-child {
  min-width: 0;
}

.zq-b-testimonios--rejilla {
  grid-template-columns: repeat(var(--zq-b-testimonios-columnas, 3), minmax(0, 1fr));
  gap: 2rem 1rem;
}

/* Con `columnas`, el aire entre citas sube a 2,5 rem: las largas dejarían los filetes casi pegados. */
.zq-b-testimonios--columnas {
  gap: 2.5rem;
}

/* En tablet la rejilla con `columnas` pasa a 2: a 820 px, 3 citas largas quedarían muy estrechas. */
@media (max-width: 1023px) {
  .zq-b-testimonios--columnas {
    grid-template-columns: repeat(var(--zq-b-testimonios-columnas-tablet, 2), minmax(0, 1fr));
  }
}

/* Las firmas quedan alineadas abajo en cada fila, sea cual sea el largo de la cita. */
.zq-b-testimonios--rejilla .zq-b-testimonios__cita {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--z-texto);
  padding-top: 1rem;
}

.zq-b-testimonios--rejilla .zq-b-testimonios__autoria {
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Cita corta (rejilla y muro): titular-4. */
.zq-b-testimonios--rejilla .zq-b-testimonios__cita p,
.zq-b-testimonios--muro .zq-b-testimonios__cita p {
  font-size: var(--z-tipo-titular-4-tam);
  line-height: var(--z-tipo-titular-4-alto);
  letter-spacing: var(--z-tipo-titular-4-tracking);
}

.zq-b-testimonios--muro {
  display: block;
  columns: 3;
  column-gap: 1rem;
}

.zq-b-testimonios--muro .zq-b-testimonios__cita {
  break-inside: avoid;
  margin-bottom: 1rem;
  padding: 1.25rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-testimonios--carrusel {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.zq-b-testimonios--carrusel .zq-b-testimonios__cita p {
  max-width: 32ch;
}

/* Todas las citas comparten celda: la altura la fija la más larga y los controles no saltan. */
.zq-b-testimonios__diapositiva {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.zq-b-testimonios__diapositiva > .zq-b-testimonios__cita {
  grid-area: 1 / 1;
}

.zq-b-testimonios__diapositiva > .zq-b-testimonios__cita--oculta {
  visibility: hidden;
}

.zq-b-testimonios__controles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.zq-b-testimonios__contador {
  min-width: 5ch;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--z-texto-2);
}

.zq-b-testimonios--video {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1rem;
}

.zq-b-testimonios__video {
  min-width: 0;
}

.zq-b-testimonios--video .zq-b-testimonios__cita {
  margin-top: 0.875rem;
}

.zq-b-testimonios--video .zq-b-testimonios__cita p {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 400;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
  text-indent: 0;
}

.zq-b-testimonios__fachada,
.zq-b-testimonios__reproductor {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
  padding: 0;
}

.zq-b-testimonios__fachada {
  cursor: pointer;
}

.zq-b-testimonios__fachada:disabled {
  cursor: default;
}

.zq-b-testimonios__fachada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El botón de reproducir mide 56 px y solo cambia de color. */
.zq-b-testimonios__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--z-radio);
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  transform: translate(-50%, -50%);
  transition: background-color var(--z-dur-pulsado) ease-out;
}

/* ---------- 87 · Caso de éxito ---------- */

.zq-b-caso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
}

.zq-b-caso > div {
  min-width: 0;
}

.zq-b-caso__contexto {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

.zq-b-caso__reto {
  margin: 0.5rem 0 0;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: var(--z-tipo-titular-3-peso);
  line-height: var(--z-tipo-titular-3-alto);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  text-wrap: balance;
}

.zq-b-caso__cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.zq-b-caso__cifra {
  min-width: 0;
  border-top: 1px solid var(--z-texto);
  padding-top: 0.875rem;
}

.zq-b-caso__numero {
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: var(--z-tipo-cifra-grande-peso);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
  overflow-wrap: anywhere;
}

.zq-b-caso__texto {
  margin-top: 0.5rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  color: var(--z-texto-2);
  text-wrap: pretty;
}

.zq-b-caso__rotulo {
  margin-top: 1rem;
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  line-height: var(--z-tipo-etiqueta-alto);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  text-transform: uppercase;
  color: var(--z-texto-2);
}

.zq-b-caso__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.zq-b-caso__parte .zq-b-caso__rotulo {
  margin: 0 0 0.75rem;
}

.zq-b-caso__intervencion {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: pretty;
}

/* ---------- 88 · Comunidad ---------- */

.zq-b-comunidad {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.75rem;
}

.zq-b-comunidad > div:last-child {
  min-width: 0;
}

.zq-b-comunidad__cifra {
  flex: none;
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: var(--z-tipo-cifra-grande-peso);
  line-height: var(--z-tipo-cifra-grande-alto);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
}

.zq-b-comunidad__texto {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: balance;
}

.zq-b-comunidad__detalles {
  margin-top: 0.25rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
}

.zq-b-comunidad__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.25rem;
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-alto);
  color: var(--z-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.zq-b-comunidad__enlace:active {
  color: var(--z-azul-accion);
}

/* ---------- 89 · Autor ---------- */

.zq-b-autor {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  max-width: 38.75rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--z-borde);
  border-bottom: 1px solid var(--z-borde);
}

.zq-b-autor > div:last-child {
  min-width: 0;
}

.zq-b-autor__nombre {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
}

.zq-b-autor__bio {
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
  text-wrap: pretty;
}

.zq-b-autor__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto);
}

.zq-b-autor__enlace:active {
  color: var(--z-azul-accion);
}

/* ---------- 90 · Redes sociales ---------- */

.zq-b-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-redes__enlace {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-alto);
  text-decoration: none;
}

.zq-b-redes__icono {
  display: inline-flex;
  flex: none;
}

.zq-b-redes__icono svg {
  width: 1.125rem;
  height: 1.125rem;
}

.zq-b-redes--rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.zq-b-redes--rejilla > li {
  min-width: 0;
}

.zq-b-redes--rejilla .zq-b-redes__enlace {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  align-items: center;
  min-height: 0;
  padding: 1.25rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-redes--rejilla .zq-b-redes__icono svg {
  width: 1.5rem;
  height: 1.5rem;
}

.zq-b-redes--rejilla .zq-b-redes__nombre {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
}

.zq-b-redes--rejilla .zq-b-redes__usuario {
  grid-column: 2;
  min-width: 0;
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 400;
  line-height: var(--z-tipo-pequeno-alto);
  color: var(--z-texto-2);
  overflow-wrap: anywhere;
}

/* ---------- Pulsado y hover de los controles de la zona ---------- */

/* Al apretar solo cambia el color: nada encoge ni se mueve (--z-activo, --z-boton-a). */
:is(
  .zq-b-clientes__pausa,
  .zq-b-equipo__flecha,
  .zq-b-testimonios__flecha,
  .zq-b-directorio__filtro,
  .zq-b-redes__enlace,
  a.zq-b-clientes__logo
):active {
  background-color: var(--z-activo);
  transition: background-color var(--z-dur-pulsado) ease-out;
}

.zq-b-directorio__filtro[aria-pressed='true']:active {
  background-color: var(--z-boton-a);
}

.zq-b-testimonios__fachada:active:not(:disabled) .zq-b-testimonios__play {
  background-color: var(--z-boton-a);
}

:is(.zq-b-grafico__ver, .zq-b-equipo__ver-bio, .zq-b-tabla__orden):active {
  color: var(--z-azul-accion);
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .zq-b-clientes__pausa,
    .zq-b-equipo__flecha,
    .zq-b-testimonios__flecha,
    .zq-b-directorio__filtro:not([aria-pressed='true']),
    .zq-b-redes__enlace,
    a.zq-b-clientes__logo
  ):hover {
    background-color: var(--z-hover);
  }

  .zq-b-testimonios__fachada:hover:not(:disabled) .zq-b-testimonios__play {
    background-color: var(--z-boton-a);
  }
}

/* ---------- 390 ---------- */

@media (max-width: 767px) {
  .zq-b-cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Con una cifra de más en una fila de 2, la última ocupa todo el ancho (3 cifras: 2 y 1). */
  .zq-b-cifras__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .zq-b-cifra {
    flex-direction: column;
    align-items: flex-start;
  }

  .zq-b-indicadores,
  .zq-b-avales,
  .zq-b-ponentes,
  .zq-b-directorio__lista,
  .zq-b-testimonios,
  .zq-b-testimonios--rejilla,
  .zq-b-testimonios--video,
  .zq-b-mapa-red,
  .zq-b-persona,
  .zq-b-caso,
  .zq-b-antes-despues__par,
  .zq-b-prensa__item,
  .zq-b-caso__cifras {
    grid-template-columns: minmax(0, 1fr);
  }

  .zq-b-clientes__lista,
  .zq-b-linea-tiempo,
  .zq-b-datos,
  .zq-b-equipo__lista,
  .zq-b-redes--rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zq-b-clientes--rejilla .zq-b-clientes__lista {
    grid-template-columns: repeat(var(--zq-b-clientes-columnas-movil, 3), minmax(0, 1fr));
  }

  .zq-b-linea-tiempo--vertical {
    grid-template-columns: minmax(0, 1fr);
  }

  .zq-b-linea-tiempo--vertical .zq-b-linea-tiempo__hito {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .zq-b-investigacion__item {
    flex-direction: column;
  }

  .zq-b-investigacion--lista .zq-b-investigacion__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .zq-b-prensa__item {
    gap: 0;
  }

  .zq-b-comparativa__tabla {
    display: none;
  }

  .zq-b-comparativa__tarjetas {
    display: grid;
  }

  .zq-b-verificar__fila {
    flex-direction: column;
  }

  .zq-b-verificar__boton {
    align-self: flex-start;
  }

  .zq-b-avales--columna-noche .zq-b-avales__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .zq-b-equipo--carrusel .zq-b-equipo__lista {
    grid-auto-columns: 72%;
    grid-template-columns: none;
  }

  /* En texto la bio no cabe en 2 columnas estrechas: una sola. */
  .zq-b-equipo--texto .zq-b-equipo__lista {
    grid-template-columns: minmax(0, 1fr);
  }

  .zq-b-persona {
    gap: 1.5rem;
  }

  .zq-b-caso {
    gap: 1.5rem;
  }

  .zq-b-testimonios--muro {
    columns: 1;
  }

  .zq-b-comunidad {
    flex-direction: column;
    align-items: flex-start;
  }

  .zq-b-grafico__fila {
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) 5ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-b-clientes__cinta {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }

  .zq-b-clientes__lista--copia,
  .zq-b-clientes__pausa {
    display: none;
  }

  .zq-b-clientes--carrusel .zq-b-clientes__lista {
    flex-wrap: wrap;
  }

  .zq-b-testimonios__play {
    transition: none;
  }
}

/* Zona bloques-h: familia H «Conversión» (111 a 130, más la 182 Oferta) e I «Avisos y estados» (131 a 136).
   Valores transcritos de las fichas de «Bloques 3 Convertir». Muestra móvil: max-width 767px. */

/* Tipografía por papeles (docs/reglas-del-campus.md §1): cada texto lleva el tamaño y el interlineado de su nivel.
   Los bloques parten del cuerpo; titulares, entradillas, secundarios y cifras fijan su nivel donde se pintan. */
:where(
  .zq-b-formulario,
  .zq-b-formulario-pasos,
  .zq-b-candidatura,
  .zq-b-solicitud-empresa,
  .zq-b-formulario-panel,
  .zq-b-cuestionario,
  .zq-b-cta,
  .zq-b-cierre,
  .zq-b-precio,
  .zq-b-plazos,
  .zq-b-financiacion,
  .zq-b-bonus,
  .zq-b-garantia,
  .zq-b-resumen-compra,
  .zq-b-llamada,
  .zq-b-contacto,
  .zq-b-directo,
  .zq-b-lista-espera,
  .zq-b-gracias,
  .zq-b-bienvenida,
  .zq-b-cookies,
  .zq-b-nota,
  .zq-b-aviso-pagina,
  .zq-b-vacio,
  .zq-b-cargando,
  .zq-b-firma,
  .zq-b-oferta
) {
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

/* ── Piezas compartidas (zq-b-h-*) ─────────────────────────────── */

.zq-b-h-enlace-boton {
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .zq-b-h-enlace-boton:hover {
    color: var(--z-sobre-boton);
    text-decoration: none;
  }

  .zq-b-h-enlace-boton.zq-boton--secundario:hover,
  .zq-b-h-enlace-boton.zq-boton--fantasma:hover {
    color: var(--z-texto);
  }
}

.zq-b-h-enlace-boton--ancho {
  display: grid;
  width: 100%;
}

/* Los campos de los bloques miden 48 px, con texto de 16 px para que iOS no haga zoom. */
.zq-b-formulario .zq-campo__control,
.zq-b-formulario-pasos .zq-campo__control,
.zq-b-candidatura .zq-campo__control,
.zq-b-solicitud-empresa .zq-campo__control,
.zq-b-cuestionario .zq-campo__control,
.zq-b-resumen-compra .zq-campo__control {
  min-height: 3rem;
  padding: 0 0.875rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-h-telefono__etiqueta {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--z-texto);
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-h-telefono__fila {
  display: flex;
  gap: 0.5rem;
}

.zq-b-h-telefono__prefijo {
  min-height: 3rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font: inherit;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-h-telefono__prefijo:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--z-foco);
}

.zq-b-h-telefono__numero {
  flex: 1;
  min-width: 0;
}

/* Aviso de un envío: éxito (verde, algo hecho) o error junto a lo que falló. */
.zq-b-h-envio {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--z-radio);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-h-envio > span {
  min-width: 0;
}

.zq-b-h-envio svg {
  flex: none;
  margin-top: 0.1875rem;
}

.zq-b-h-envio--exito {
  background: var(--z-ok-bg);
  box-shadow: inset 0 0 0 1px var(--z-ok-bd);
  color: var(--z-texto);
}

.zq-b-h-envio--exito svg {
  color: var(--z-ok);
}

.zq-b-h-envio--error {
  background: var(--z-error-bg);
  box-shadow: inset 0 0 0 1px var(--z-error-bd);
  color: var(--z-texto);
}

.zq-b-h-envio--error svg {
  color: var(--z-error);
}

/* Fichas de opción única (tamaños, plazos, horas, respuestas). */
.zq-b-h-fichas {
  position: relative;
}

/* Campo de texto invisible que obliga a elegir: el navegador no valida los campos ocultos. */
.zq-b-h-fichas__requerido {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.zq-b-h-fichas__etiqueta {
  margin-bottom: 0.5rem;
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: balance;
}

.zq-b-h-fichas__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.zq-b-h-ficha {
  display: flex;
  align-items: center;
  min-width: var(--z-zona-tactil);
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: var(--z-radio);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  cursor: pointer;
  font: inherit;
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition:
    box-shadow var(--zq-q-dur-micro, 120ms) var(--zq-q-curva-estandar, ease),
    background-color var(--z-dur-pulsado, 120ms) ease;
}

@media (hover: hover) and (pointer: fine) {
  .zq-b-h-ficha:hover {
    background: var(--z-hover);
  }
}

.zq-b-h-ficha:active {
  background: var(--z-activo);
  transition-duration: 0ms;
}

.zq-b-h-ficha--activa {
  box-shadow: inset 0 0 0 2px var(--z-texto);
}

.zq-b-h-ficha:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}

.zq-b-h-fichas--cuadrada .zq-b-h-ficha {
  justify-content: center;
  min-width: 3.5rem;
  padding: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-h-fichas--hora .zq-b-h-ficha {
  padding: 0 1rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

/* Una hora local con la equivalencia del equipo debajo. */
.zq-b-h-fichas--hora .zq-b-h-ficha--doble {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 6rem;
  min-height: 3.5rem;
  padding: 0.375rem 0.875rem;
  gap: 0;
}

.zq-b-h-ficha__principal {
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-grande-alto);
}

.zq-b-h-ficha__secundaria {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-minimo-tam);
  font-weight: 500;
  line-height: var(--z-tipo-minimo-alto);
}

.zq-b-h-fichas--respuesta .zq-b-h-fichas__opciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.zq-b-h-fichas--respuesta .zq-b-h-ficha {
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border-radius: var(--z-radio);
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 400;
  line-height: var(--z-tipo-cuerpo-alto);
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .zq-b-h-ficha {
    transition: none;
  }
}

/* ── 111 · Formulario de captación ─────────────────────────────── */

.zq-b-formulario {
  display: grid;
  gap: 0.75rem;
  max-width: 30rem;
}

.zq-b-formulario__campos {
  display: grid;
  gap: 0.75rem;
}

/* Las casillas de consentimiento y de novedades se ven igual: texto pequeño y marca de 18 px. */
.zq-b-formulario__consentimiento,
.zq-b-formulario__novedades {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

/* La ficha pinta la casilla de 18 px y pegada al campo; la marca queda a la altura de la primera línea. */
.zq-b-formulario__consentimiento .zq-seleccion__etiqueta,
.zq-b-formulario__novedades .zq-seleccion__etiqueta {
  align-items: flex-start;
  min-height: 1.125rem;
  gap: 0.5rem;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.zq-b-formulario__consentimiento .zq-casilla__marca,
.zq-b-formulario__novedades .zq-casilla__marca {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: calc((var(--z-tipo-pequeno-tam) * var(--z-tipo-pequeno-alto) - 1.125rem) / 2);
}

/* El enlace de la política va subrayado y en el color del texto: es lo que se lee antes de aceptar. */
.zq-b-formulario__consentimiento a {
  color: var(--z-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* En el móvil la fila de la casilla llega a 44 px con relleno, y crece si el texto baja de línea. */
@media (max-width: 767px) {
  .zq-b-formulario__consentimiento .zq-seleccion__etiqueta,
  .zq-b-formulario__novedades .zq-seleccion__etiqueta {
    min-height: 0;
    padding-block: 0.75rem;
  }
}

.zq-b-formulario__legal {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-b-formulario--minimo {
  max-width: none;
}

.zq-b-formulario--minimo .zq-b-formulario__campos {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.zq-b-formulario--minimo .zq-b-formulario__campos > :not(.zq-b-formulario__boton) {
  flex: 1;
  min-width: 0;
}

.zq-b-formulario--minimo .zq-campo__etiqueta,
.zq-b-formulario--minimo .zq-b-h-telefono__etiqueta {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.zq-b-formulario--minimo .zq-b-formulario__boton {
  min-height: 3rem;
}

@media (max-width: 767px) {
  .zq-b-formulario--minimo .zq-b-formulario__campos {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── 112 · Formulario por pasos ────────────────────────────────── */

.zq-b-formulario-pasos {
  max-width: 30rem;
}

.zq-b-formulario-pasos__progreso {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-formulario-pasos__barra {
  height: 0.25rem;
  margin: 0.5rem 0 1rem;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
}

/* La barra avanza con scaleX desde la izquierda: solo transform, sin tocar el ancho. */
.zq-b-formulario-pasos__relleno {
  width: 100%;
  height: 100%;
  border-radius: var(--z-radio);
  background: var(--z-texto);
  transform-origin: left center;
  transition: transform var(--zq-q-dur-base, 200ms) var(--zq-q-curva-estandar, ease);
}

.zq-b-formulario-pasos__paso {
  display: grid;
  gap: 0.75rem;
}

.zq-b-formulario-pasos__titulo {
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

.zq-b-formulario-pasos__resumen {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-formulario-pasos__dato {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--z-borde);
}

.zq-b-formulario-pasos__dato dt {
  flex: none;
  color: var(--z-texto-2);
}

.zq-b-formulario-pasos__dato dd {
  min-width: 0;
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: right;
}

/* Atrás a la izquierda y Siguiente a la derecha, sin que uno empuje al otro. */
.zq-b-formulario-pasos__acciones {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 1rem;
}

.zq-b-formulario-pasos__acciones > :first-child {
  justify-self: start;
}

.zq-b-formulario-pasos .zq-b-h-envio {
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .zq-b-formulario-pasos__relleno {
    transition: none;
  }
}

/* ── 113 · Candidatura ─────────────────────────────────────────── */

.zq-b-candidatura {
  display: grid;
  gap: 0.75rem;
  max-width: 32.5rem;
}

.zq-b-candidatura__adjunto {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.75rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  cursor: pointer;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--z-dur-pulsado, 120ms) ease;
}

.zq-b-candidatura__adjunto > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .zq-b-candidatura__adjunto:hover {
    background: var(--z-hover);
  }
}

.zq-b-candidatura__adjunto:active {
  background: var(--z-activo);
  transition-duration: 0ms;
}

.zq-b-candidatura__adjunto:focus-within {
  box-shadow: inset 0 0 0 2px var(--z-foco);
}

.zq-b-candidatura__icono {
  flex: none;
  color: var(--z-texto-3);
}

/* El verde solo cuando el archivo ya está adjunto. */
.zq-b-candidatura__adjunto--listo .zq-b-candidatura__icono {
  color: var(--z-ok);
}

.zq-b-candidatura__adjunto--error {
  box-shadow: inset 0 0 0 2px var(--z-error);
}

.zq-b-candidatura__error {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin: -0.25rem 0 0;
  color: var(--z-error);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-candidatura__error svg {
  flex: none;
}

/* ── 114 · Solicitud de empresa ────────────────────────────────── */

.zq-b-solicitud-empresa {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 38.75rem;
}

.zq-b-solicitud-empresa > * {
  min-width: 0;
  max-width: 100%;
}

.zq-b-solicitud-empresa__campos {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

/* ── 115 · Formulario en panel ─────────────────────────────────── */

.zq-b-formulario-panel {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.zq-b-formulario-panel--en-linea {
  position: relative;
  z-index: auto;
  height: 18.75rem;
  overflow: hidden;
  border-radius: var(--z-radio);
}

.zq-b-formulario-panel--panel-inferior {
  align-items: flex-end;
}

.zq-b-formulario-panel__velo {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--z-scrim);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* El panel flota sobre el velo y se separa de él con el contraste de su superficie, sin sombra (norma.mjs no lo autoriza aún). */
.zq-b-formulario-panel__panel {
  position: relative;
  display: grid;
  gap: 0.625rem;
  width: 100%;
  max-width: 26.25rem;
  max-height: 100%;
  overflow: auto;
  padding: 1.25rem;
  border-radius: var(--z-radio);
  background: var(--z-elev);
  box-shadow: var(--z-sombra-2);
  animation: zq-b-formulario-panel-entra var(--zq-q-dur-base, 200ms) var(--zq-q-curva-entrada, ease-out)
    backwards;
}

.zq-b-formulario-panel--panel-inferior .zq-b-formulario-panel__panel {
  animation-name: zq-b-formulario-panel-sube;
}

.zq-b-formulario-panel__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.zq-b-formulario-panel__titulo {
  min-width: 0;
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

/* Botón de cerrar de 44 px que sobresale del margen del panel para alinear la X con el título. */
.zq-b-formulario-panel__cerrar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.75rem -0.75rem 0 auto;
  border: 0;
  border-radius: var(--z-radio);
  background: transparent;
  color: var(--z-texto-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--z-dur-pulsado, 120ms) ease;
}

@media (hover: hover) and (pointer: fine) {
  .zq-b-formulario-panel__cerrar:hover {
    background: var(--z-hover);
  }
}

.zq-b-formulario-panel__cerrar:active {
  background: var(--z-activo);
  transition-duration: 0ms;
}

.zq-b-formulario-panel .zq-b-formulario {
  gap: 0.625rem;
  max-width: none;
}

@keyframes zq-b-formulario-panel-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes zq-b-formulario-panel-sube {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@media (max-width: 767px) {
  .zq-b-formulario-panel {
    align-items: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-b-formulario-panel__panel {
    animation: none;
  }
}

/* ── 116 · Cuestionario ────────────────────────────────────────── */

.zq-b-cuestionario {
  max-width: 38.75rem;
}

.zq-b-cuestionario__progreso {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-cuestionario__pregunta {
  margin: 0.5rem 0 0.875rem;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-3-tracking);
  line-height: var(--z-tipo-titular-3-alto);
  text-wrap: balance;
}

.zq-b-cuestionario__pregunta:focus {
  outline: none;
}

.zq-b-cuestionario__captura {
  display: grid;
  gap: 0.75rem;
}

.zq-b-cuestionario__captura .zq-b-cuestionario__pregunta {
  margin: 0 0 0.125rem;
}

.zq-b-cuestionario__texto {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-cuestionario__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.zq-b-cuestionario__acciones--pasos {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.zq-b-cuestionario__acciones--pasos > :first-child {
  justify-self: start;
}

.zq-b-cuestionario__captura .zq-b-cuestionario__acciones {
  margin-top: 0.25rem;
}

/* ── 117 · CTA intermedio ──────────────────────────────────────── */

/* Texto a la izquierda y botones a la derecha. Si falta ancho (entre 768 y 900 px con 2 botones) los
   botones bajan bajo el texto en vez de aplastarlo. */
.zq-b-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.zq-b-cta__textos {
  flex: 1 1 28rem;
  min-width: 0;
}

/* Etiqueta en mayúsculas espaciadas, en gris, sobre el titular o sobre la frase. */
.zq-b-cta__etiqueta {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-etiqueta-tam);
  line-height: var(--z-tipo-etiqueta-alto);
}

.zq-b-cta__titular {
  margin: 0;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-3-tracking);
  line-height: var(--z-tipo-titular-3-alto);
  text-wrap: balance;
}

.zq-b-cta__texto {
  max-width: 70ch;
  margin: 0.25rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: pretty;
}

/* Sin titular, la frase es el mensaje: va en el color principal y sin hueco encima. */
.zq-b-cta--sin-titular .zq-b-cta__texto {
  margin: 0;
  color: var(--z-texto);
}

.zq-b-cta__acciones {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 100%;
}

/* Un rótulo largo baja de línea en vez de salirse del bloque. */
.zq-b-cta .zq-b-h-enlace-boton {
  max-width: 100%;
  padding-block: 0.5rem;
  text-align: center;
  white-space: normal;
}

@media (max-width: 767px) {
  .zq-b-cta {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  /* En columna el flex-basis sería un alto: el texto se queda con el suyo. */
  .zq-b-cta__textos {
    flex: 0 1 auto;
  }

  .zq-b-cta__acciones {
    flex: 0 1 auto;
  }
}

/* ── 118 · Cierre ──────────────────────────────────────────────── */

.zq-b-cierre {
  position: relative;
  overflow: hidden;
}

.zq-b-cierre__q {
  --zq-q-tamano: 240px;
  position: absolute;
  right: -30px;
  bottom: -60px;
  max-width: none;
  pointer-events: none;
}

.zq-b-cierre__contenido {
  position: relative;
  max-width: 35rem;
}

.zq-b-cierre__titular {
  margin: 0;
  font-size: var(--z-tipo-titular-1-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-1-tracking);
  line-height: var(--z-tipo-titular-1-alto);
  text-wrap: balance;
}

.zq-b-cierre__texto {
  margin: 0.625rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: pretty;
}

.zq-b-cierre__boton,
.zq-b-cierre__formulario {
  margin-top: 1.25rem;
}

.zq-b-cierre__barra {
  position: relative;
  margin-top: 3rem;
}

@media (max-width: 767px) {
  /* En móvil la Q baja bajo el botón para no pisar el titular ni el texto. */
  .zq-b-cierre--q {
    padding-bottom: 3.5rem;
  }

  .zq-b-cierre__q {
    --zq-q-tamano: 120px;
    right: -20px;
    bottom: -64px;
  }

  .zq-b-cierre__barra {
    margin-top: 2.5rem;
  }
}

/* ── 119 · Precio y planes ─────────────────────────────────────── */

.zq-b-precio__monedas {
  margin-bottom: 1rem;
}

.zq-b-precio__planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.zq-b-precio__plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 1.125rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-precio__plan--recomendado {
  box-shadow: inset 0 0 0 2px var(--z-texto);
}

.zq-b-precio__insignia {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin-bottom: 0.625rem;
  padding: 0 0.5rem;
  border-radius: var(--z-radio);
  background: var(--z-texto);
  color: var(--z-fondo);
  font-size: var(--z-tipo-minimo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-minimo-alto);
}

/* Título de tarjeta: cuerpo grande en 600. */
.zq-b-precio__nombre {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: balance;
}

/* El precio de un plan es la cifra de la tarjeta: titular-2 en peso 300 (cifra-grande desbordaría 3 columnas). */
.zq-b-precio__plan .zq-b-precio__importe {
  display: block;
  max-width: 100%;
  margin: 0.5rem 0;
  font-size: var(--z-tipo-titular-2-tam);
  font-weight: 300;
  letter-spacing: var(--z-tipo-titular-2-tracking);
  line-height: var(--z-tipo-titular-2-alto);
  overflow-wrap: anywhere;
}

.zq-b-precio__detalle {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-precio__boton {
  margin-top: 0.875rem;
}

@media (max-width: 767px) {
  .zq-b-precio__planes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 120 · Plazos ──────────────────────────────────────────────── */

.zq-b-plazos {
  max-width: 32.5rem;
}

.zq-b-plazos__cuota {
  margin: 1rem 0 0;
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: 300;
  line-height: var(--z-tipo-cifra-grande-alto);
}

/* La cifra reserva su ancho para que la unidad no baile al cambiar de plazos. */
.zq-b-plazos__cuota .zq-cifra {
  display: inline-block;
  min-width: 8ch;
}

.zq-b-plazos__unidad {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
}

.zq-b-plazos__resumen {
  margin: 0.25rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

/* ── 121 · Financiación ────────────────────────────────────────── */

.zq-b-financiacion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.zq-b-financiacion__opcion {
  min-width: 0;
  padding: 1.125rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-financiacion__titulo {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: balance;
}

.zq-b-financiacion__texto {
  margin: 0.375rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-b-financiacion__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--z-texto);
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
  .zq-b-financiacion {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 122 · Bonus ───────────────────────────────────────────────── */

.zq-b-bonus {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  color: var(--z-texto);
}

.zq-b-bonus__q {
  --zq-q-tamano: 160px;
  position: absolute;
  right: -30px;
  bottom: -40px;
  max-width: none;
  pointer-events: none;
}

/* Etiqueta llena: una insignia, nivel mínimo. */
.zq-b-bonus__etiqueta {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: var(--z-radio);
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  font-size: var(--z-tipo-minimo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-minimo-alto);
}

.zq-b-bonus__titulo {
  position: relative;
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

.zq-b-bonus__cifra {
  display: block;
  margin-top: 0.875rem;
  font-size: var(--z-tipo-cifra-grande-tam);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
  line-height: var(--z-tipo-cifra-grande-alto);
}

/* En móvil la Q sube a la esquina para no tapar la cifra ni el texto. */
@media (max-width: 767px) {
  .zq-b-bonus__q {
    --zq-q-tamano: 120px;
    top: -34px;
    right: -30px;
    bottom: auto;
  }
}

.zq-b-bonus__texto {
  display: block;
  margin-top: 0.25rem;
}

/* ── 123 · Garantía ────────────────────────────────────────────── */

.zq-b-garantia {
  max-width: 38.75rem;
  padding: 1.125rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-garantia__titular {
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

.zq-b-garantia__texto {
  margin: 0.375rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-garantia__texto a {
  color: var(--z-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── 124 · Resumen de compra ───────────────────────────────────── */

.zq-b-resumen-compra {
  max-width: 28.75rem;
  padding: 1.125rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-resumen-compra__lineas {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-resumen-compra__linea {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.zq-b-resumen-compra__linea dt {
  min-width: 0;
  overflow-wrap: anywhere;
}

.zq-b-resumen-compra__linea dd {
  flex: none;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.zq-b-resumen-compra__codigo-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--z-texto);
  cursor: pointer;
  font: inherit;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.zq-b-resumen-compra__codigo-enlace:active {
  color: var(--z-texto-2);
}

.zq-b-resumen-compra__codigo {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-top: 0.75rem;
}

.zq-b-resumen-compra__codigo .zq-campo {
  flex: 1;
  min-width: 0;
}

.zq-b-resumen-compra__codigo .zq-boton {
  min-height: 3rem;
}

.zq-b-resumen-compra__boton {
  margin-top: 0.875rem;
}

.zq-b-resumen-compra__pie {
  margin: 0.5rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-align: center;
}

/* ── 125 · Reservar llamada ────────────────────────────────────── */

.zq-b-llamada {
  max-width: 38.75rem;
}

.zq-b-llamada__huecos {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}

.zq-b-llamada__huecos > * {
  min-width: 0;
  max-width: 100%;
}

/* El día de una reserva se entiende sin repetir la zona, que ya va antes del selector. */
.zq-b-llamada--propia .zq-b-h-fichas--hora .zq-b-h-fichas__etiqueta {
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-llamada__fachada {
  max-width: 35rem;
  padding: 1.125rem;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-llamada__titulo {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: balance;
}

.zq-b-llamada__aviso {
  margin: 0.375rem 0 0.75rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-b-llamada__marco {
  display: block;
  width: 100%;
  height: 40rem;
  border: 0;
  border-radius: var(--z-radio);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-llamada--externa {
  max-width: none;
}

/* ── 126 · Contacto ────────────────────────────────────────────── */

/* Los canales van en columnas separadas por un filete, no en una caja cada uno. */
.zq-b-contacto__canales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.zq-b-contacto__canal {
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--z-borde);
}

.zq-b-contacto__titulo {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-cuerpo-grande-tracking);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: balance;
}

.zq-b-contacto__valor {
  margin: 0.25rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  overflow-wrap: anywhere;
}

.zq-b-contacto__valor a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}

.zq-b-contacto__pais + .zq-b-contacto__pais {
  margin-top: 2rem;
}

.zq-b-contacto__nombre-pais {
  margin: 0 0 0.75rem;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

.zq-b-contacto__horario {
  margin: 1rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-contacto__formulario {
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .zq-b-contacto__canales {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 127 · Hora del directo ────────────────────────────────────── */

.zq-b-directo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.zq-b-directo__unidades {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Las cifras reservan su ancho: al cambiar el minuto la fila no se mueve. */
.zq-b-directo__numero {
  display: block;
  min-width: 2ch;
  font-size: var(--z-tipo-cifra-grande-tam);
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
  line-height: var(--z-tipo-cifra-grande-alto);
}

.zq-b-directo__rotulo {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
}

.zq-b-directo__fecha {
  min-width: 0;
  margin: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-directo__calendario {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--z-texto);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
  .zq-b-directo {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 128 · Lista de espera ─────────────────────────────────────── */

.zq-b-lista-espera {
  max-width: 32.5rem;
}

.zq-b-lista-espera__titular {
  margin: 0;
  font-size: var(--z-tipo-titular-3-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-3-tracking);
  line-height: var(--z-tipo-titular-3-alto);
  text-wrap: balance;
}

.zq-b-lista-espera__aviso {
  margin: 0.375rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-lista-espera__formulario {
  margin-top: 0.875rem;
}

/* ── 129 · Gracias ─────────────────────────────────────────────── */

.zq-b-gracias {
  max-width: 38.75rem;
}

.zq-b-gracias__q {
  --zq-q-tamano: 48px;
}

.zq-b-gracias__titular {
  margin: 0.875rem 0 0;
  font-size: var(--z-tipo-titular-1-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-1-tracking);
  line-height: var(--z-tipo-titular-1-alto);
  text-wrap: balance;
}

.zq-b-gracias__pasos,
.zq-b-gracias__recursos ul {
  display: grid;
  gap: 0.625rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-gracias__paso {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.zq-b-gracias__paso > span:last-child,
.zq-b-gracias__paso > a {
  min-width: 0;
}

/* El enlace de un paso llega a 44 px sin mover la fila: zona ampliada invisible. */
.zq-b-gracias__paso > a {
  position: relative;
}

.zq-b-gracias__paso > a::after {
  content: '';
  position: absolute;
  inset: -0.75rem 0;
}

/* Los pasos aún no están hechos: numerados en gris, nunca con un check verde. */
.zq-b-gracias__numero {
  flex: none;
  min-width: 1.5rem;
  color: var(--z-texto-3);
  font-weight: 300;
}

.zq-b-gracias__paso a,
.zq-b-gracias__recurso {
  color: var(--z-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}

.zq-b-gracias__recursos {
  margin-top: 2rem;
}

.zq-b-gracias__subtitulo {
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

.zq-b-gracias__recurso {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  min-height: 2.75rem;
}

.zq-b-gracias__recurso svg {
  flex: none;
}

.zq-b-gracias__formato {
  color: var(--z-texto-2);
}

/* ── 130 · Bienvenida tras la compra ───────────────────────────── */

.zq-b-bienvenida {
  max-width: 38.75rem;
}

.zq-b-bienvenida__titular {
  margin: 0;
  font-size: var(--z-tipo-titular-1-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-1-tracking);
  line-height: var(--z-tipo-titular-1-alto);
  text-wrap: balance;
}

.zq-b-bienvenida__texto {
  margin: 0.5rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: pretty;
}

.zq-b-bienvenida__boton {
  margin-top: 1rem;
}

.zq-b-bienvenida__pasos {
  display: grid;
  gap: 0.625rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-bienvenida__paso {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.zq-b-bienvenida__paso > span:last-child {
  min-width: 0;
}

.zq-b-bienvenida__numero {
  flex: none;
  min-width: 1.5rem;
  color: var(--z-texto-3);
  font-weight: 300;
}

/* ── 131 · Aviso de cookies ────────────────────────────────────── */

.zq-b-cookies {
  max-width: 35rem;
  padding: 1.125rem;
  border-radius: var(--z-radio);
  background: var(--z-elev);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-b-cookies--fijo {
  position: fixed;
  z-index: 40;
  bottom: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  box-shadow: var(--z-sombra-1);
}

.zq-b-cookies__texto {
  margin: 0;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-cookies__categorias {
  display: grid;
  gap: 0.75rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.zq-b-cookies__categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--z-borde);
}

.zq-b-cookies__categoria > div {
  min-width: 0;
}

.zq-b-cookies__nombre {
  display: block;
  font-size: var(--z-tipo-cuerpo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-cookies__descripcion {
  display: block;
  margin-top: 0.125rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-cookies__fija {
  flex: none;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-b-cookies__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

/* ── 132 · Nota ────────────────────────────────────────────────── */

.zq-b-nota {
  margin: 0.75rem 0 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

/* La llamada a la nota va volada en el nivel «mínimo» de la escala. Sin interlineado propio
   (line-height 0) para que el número no empuje la línea de texto en la que va incrustado. */
.zq-b-nota-ref {
  font-size: var(--z-tipo-minimo-tam);
  line-height: 0;
  vertical-align: super;
}

/* El número es un enlace pequeño: su zona táctil de 44 px sale de un pseudoelemento centrado que
   amplía solo lo que le falta (pulido-pwa §5), sin mover el texto. */
.zq-b-nota__numero,
.zq-b-nota-ref a {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.zq-b-nota__numero::after,
.zq-b-nota-ref a::after {
  content: '';
  position: absolute;
  inset-block: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
  inset-inline: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
}

.zq-b-nota__numero {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .zq-b-nota__numero:hover {
    text-decoration: underline;
  }
}

.zq-b-nota:target {
  background: var(--z-hover);
}

.zq-b-nota-ref a {
  color: var(--z-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ── 133 · Aviso de página ─────────────────────────────────────── */

.zq-b-aviso-pagina {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  max-width: 45rem;
  padding: 0.875rem 1rem;
  border-radius: var(--z-radio);
  color: var(--z-texto);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-b-aviso-pagina__icono {
  flex: none;
  margin-top: 0.1875rem;
}

.zq-b-aviso-pagina__texto {
  min-width: 0;
  margin: 0;
  text-wrap: pretty;
}

.zq-b-aviso-pagina__texto strong {
  font-weight: 600;
}

.zq-b-aviso-pagina--info {
  background: var(--z-info-bg);
  box-shadow: inset 0 0 0 1px var(--z-info-bd);
}

.zq-b-aviso-pagina--info .zq-b-aviso-pagina__icono {
  color: var(--z-info);
}

.zq-b-aviso-pagina--exito {
  background: var(--z-ok-bg);
  box-shadow: inset 0 0 0 1px var(--z-ok-bd);
}

.zq-b-aviso-pagina--exito .zq-b-aviso-pagina__icono {
  color: var(--z-ok);
}

.zq-b-aviso-pagina--atencion {
  background: var(--z-aviso-bg);
  box-shadow: inset 0 0 0 1px var(--z-aviso-bd);
}

.zq-b-aviso-pagina--atencion .zq-b-aviso-pagina__icono {
  color: var(--z-aviso);
}

.zq-b-aviso-pagina--error {
  background: var(--z-error-bg);
  box-shadow: inset 0 0 0 1px var(--z-error-bd);
}

.zq-b-aviso-pagina--error .zq-b-aviso-pagina__icono {
  color: var(--z-error);
}

/* ── 134 · Estado vacío ────────────────────────────────────────── */

.zq-b-vacio {
  padding: 1.5rem 0;
  text-align: center;
}

.zq-b-vacio__q {
  --zq-q-tamano: 36px;
  margin: 0 auto;
  opacity: 0.25;
}

/* Título del estado vacío: titular-4. */
.zq-b-vacio__mensaje {
  margin: 0.75rem 0 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: 600;
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

.zq-b-vacio__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--z-texto);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* ── 135 · Cargando ────────────────────────────────────────────── */

.zq-b-cargando--tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.zq-b-cargando--lista,
.zq-b-cargando--texto {
  display: grid;
  gap: 1.25rem;
}

.zq-b-cargando__elemento {
  display: grid;
  gap: 0.625rem;
}

.zq-b-cargando__imagen,
.zq-b-cargando__linea {
  background: var(--z-skel);
  animation: zq-b-cargando-pulso 1.6s var(--zq-q-curva-estandar, ease-in-out) infinite;
}

.zq-b-cargando__imagen {
  aspect-ratio: 16 / 9;
  border-radius: var(--z-radio);
}

.zq-b-cargando__linea {
  border-radius: var(--z-radio);
}

.zq-b-cargando__linea--corta {
  width: 40%;
  height: 0.875rem;
}

.zq-b-cargando__linea--larga {
  width: 85%;
  height: 1.125rem;
}

.zq-b-cargando--q {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
  color: var(--z-texto);
}

.zq-b-cargando__q {
  width: auto;
  height: 3rem;
}

@keyframes zq-b-cargando-pulso {
  50% {
    opacity: 0.55;
  }
}

@media (max-width: 767px) {
  .zq-b-cargando--tarjetas {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-b-cargando__imagen,
  .zq-b-cargando__linea {
    animation: none;
  }
}

/* ── 136 · Firma de página ─────────────────────────────────────── */

.zq-b-firma {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}

.zq-b-firma__q {
  --zq-q-tamano: 28px;
}

.zq-b-firma__barra {
  width: 100%;
}

/* ── 182 · Oferta ──────────────────────────────────────────────── */

/* Superficie propia en azul noche: la oferta es lo que te llevas, no una sección más. Un solo
   recuadro (la superficie), sin cajas dentro; el texto y la compra se separan con un filete. */
.zq-b-oferta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  padding: 3rem;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  color: var(--z-texto);
}

.zq-b-oferta__texto,
.zq-b-oferta__compra {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  min-width: 0;
}

.zq-b-oferta__texto {
  padding-right: 3.5rem;
}

.zq-b-oferta__compra {
  gap: 2rem;
  padding-left: 3.5rem;
  border-left: 1px solid var(--z-borde);
}

/* La etiqueta es una placa llena: se ve de lejos que esto es algo aparte. */
.zq-b-oferta__etiqueta {
  justify-self: start;
  padding: 0.375rem 0.75rem;
  background: var(--z-boton);
  color: var(--z-sobre-boton);
  font-size: var(--z-tipo-etiqueta-tam);
  line-height: var(--z-tipo-etiqueta-alto);
}

.zq-b-oferta__titular {
  margin: 0;
}

.zq-b-oferta__entradilla {
  max-width: 60ch;
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: pretty;
}

.zq-b-oferta__entradilla > * {
  margin: 0;
}

.zq-b-oferta__entradilla > * + * {
  margin-top: 0.75rem;
}

/* Lo que incluye: marca de check y no viñetas del navegador, como en «Para quién es». */
.zq-b-oferta__incluye {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-b-oferta__incluye-item {
  display: flex;
  gap: 0.625rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-oferta__icono {
  flex: none;
  /* Centra el icono de 16 px en la primera línea. */
  margin-top: calc((var(--z-tipo-cuerpo-tam) * var(--z-tipo-cuerpo-alto) - 1rem) / 2);
}

/* Los datos se colocan según lo que ocupan: dos importes cortos van juntos y uno largo baja de fila. */
.zq-b-oferta__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3.5rem;
  margin: 0;
}

/* Con 3 o 4 datos van en rejilla de columnas iguales: 2 donde caben y 1 donde no. */
.zq-b-oferta--n3 .zq-b-oferta__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2rem 2.5rem;
}

.zq-b-oferta__dato {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  justify-items: start;
  min-width: 0;
  max-width: 100%;
}

.zq-b-oferta__dato > dt,
.zq-b-oferta__dato > dd {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.zq-b-oferta__dato-etiqueta {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  line-height: var(--z-tipo-etiqueta-alto);
  text-transform: uppercase;
}

/* La cifra es la protagonista: cifra grande en peso 300. */
.zq-b-oferta__dato .zq-b-oferta__cifra {
  display: block;
  font-size: var(--z-tipo-cifra-grande-tam);
  font-weight: 300;
  letter-spacing: var(--z-tipo-cifra-grande-tracking);
  line-height: var(--z-tipo-cifra-grande-alto);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Con 3 o más datos, o con un valor largo como una fecha, la cifra baja a titular-2 para que quepa. */
.zq-b-oferta--n3 .zq-b-oferta__dato .zq-b-oferta__cifra,
.zq-b-oferta__dato--largo .zq-b-oferta__cifra {
  font-size: var(--z-tipo-titular-2-tam);
  letter-spacing: var(--z-tipo-titular-2-tracking);
  line-height: var(--z-tipo-titular-2-alto);
}

/* Lo que todavía no está cerrado se lee como texto, nunca como un importe. */
.zq-b-oferta__por-confirmar {
  display: block;
  max-width: 22rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-oferta__dato > .zq-b-oferta__nota {
  max-width: 22rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-b-oferta__dato > .zq-b-oferta__dato-accion {
  margin-top: 0.5rem;
}

.zq-b-oferta__accion {
  justify-self: start;
}

/* Un rótulo largo baja de línea en vez de salirse de la superficie. */
.zq-b-oferta .zq-b-h-enlace-boton {
  max-width: 100%;
  padding-block: 0.5rem;
  text-align: center;
  white-space: normal;
}

/* En tableta y móvil las dos columnas pasan a una: el texto no se queda en 190 px. */
@media (max-width: 1023px) {
  .zq-b-oferta {
    grid-template-columns: minmax(0, 1fr);
  }

  .zq-b-oferta__texto {
    padding-right: 0;
    padding-bottom: 2rem;
  }

  /* El filete pasa de vertical a horizontal. */
  .zq-b-oferta__compra {
    padding-top: 2rem;
    padding-left: 0;
    border-top: 1px solid var(--z-borde);
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .zq-b-oferta {
    padding: 1.75rem 1.25rem;
  }

  .zq-b-oferta__datos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .zq-b-oferta__dato {
    justify-items: stretch;
  }

  /* Botones a todo el ancho: el pulgar los alcanza y el rótulo largo no se corta. */
  .zq-b-oferta__accion {
    justify-self: stretch;
  }

  .zq-b-oferta__dato-accion .zq-b-h-enlace-boton {
    display: grid;
    width: 100%;
  }
}

/* Panel · ficha. Clases con prefijo zq-. */

@keyframes zq-ficha-pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* El esqueleto aparece a partir de unos 150 ms: si la carga es rápida no parpadea. */
@keyframes zq-ficha-entra {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.zq-cifra-variacion__lector,
.zq-pestanas-enlace__lector {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Interfaz: no se selecciona ni saca el recuadro gris de iOS. */
:is(.zq-cifra-variacion--enlace, .zq-pestanas-enlace__pestana, .zq-recuadro__cabecera) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ───────────────────────── Recuadro ───────────────────────── */

.zq-recuadro {
  min-width: 0;
  scroll-margin-top: 1.5rem;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  color: var(--z-texto);
}

.zq-recuadro__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 1rem 1.25rem 0;
}

.zq-recuadro__titulo {
  min-width: 0;
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: var(--z-tipo-titular-4-peso);
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
  text-wrap: balance;
}

.zq-recuadro__accion {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}

.zq-recuadro__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0.875rem 1.25rem 1.25rem;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

/* En la columna del cuerpo, un botón o una etiqueta sueltos conservan su ancho; no se estiran */
.zq-recuadro__cuerpo > :is(.zq-boton, .zq-etiqueta-tono, img) {
  align-self: flex-start;
}

.zq-recuadro--sin-relleno .zq-recuadro__cuerpo {
  padding: 0.75rem 0 0;
}

.zq-recuadro--sin-relleno .zq-recuadro__vacio,
.zq-recuadro--sin-relleno .zq-recuadro__esqueleto {
  padding: 0.875rem 1.25rem 1.25rem;
}

.zq-recuadro__vacio {
  color: var(--z-texto-2);
  text-wrap: pretty;
}

/* Error junto a lo que falló: lleva el paso siguiente y no borra lo que había. */
.zq-recuadro__error {
  margin: 0;
  color: var(--z-error);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-recuadro__formulario {
  display: grid;
  gap: 1rem;
}

.zq-recuadro__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.zq-recuadro--editando {
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
}

.zq-recuadro__esqueleto {
  display: grid;
  gap: 0.75rem;
  animation: zq-ficha-entra 1ms linear 150ms both;
}

.zq-recuadro__esqueleto span,
.zq-historial__esqueleto span {
  display: block;
  height: 0.875rem;
  border-radius: var(--z-radio);
  background: var(--z-skel);
  animation: zq-ficha-pulso 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.zq-recuadro__esqueleto span:nth-child(1) {
  width: 40%;
}

.zq-recuadro__esqueleto span:nth-child(2) {
  width: 85%;
}

.zq-recuadro__esqueleto span:nth-child(3) {
  width: 65%;
}

/* ───────────────────────── Dato ───────────────────────── */

.zq-rejilla-datos {
  display: grid;
  gap: 0.875rem 1.5rem;
  margin: 0;
}

.zq-rejilla-datos--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zq-dato {
  min-width: 0;
}

.zq-dato--completo {
  grid-column: 1 / -1;
}

/* Las preguntas largas se leen como enunciado y respuesta, no como etiqueta de control. */
.zq-dato--pregunta {
  grid-column: 1 / -1;
  padding-block-start: 0.875rem;
  box-shadow: inset 0 1px 0 var(--z-borde);
}

.zq-dato--pregunta:first-child {
  padding-block-start: 0;
  box-shadow: none;
}

.zq-dato__etiqueta {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  line-height: var(--z-tipo-etiqueta-alto);
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.zq-dato--pregunta .zq-dato__etiqueta {
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: var(--z-tipo-pequeno-peso);
  letter-spacing: var(--z-tipo-pequeno-tracking);
  line-height: var(--z-tipo-pequeno-alto);
  text-transform: none;
}

.zq-dato__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

/* Enlaces del valor (correo, teléfono): miden una línea (unos 25 px). Un ::after centrado los lleva a
   44 px de alto, sin cambiar la caja visible. Entre los enlaces de dos datos hay una etiqueta y el hueco
   de la rejilla, de sobra para que sus zonas no se pisen. */
.zq-dato__valor a {
  position: relative;
  color: var(--z-azul-accion);
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}

.zq-dato__valor a::after {
  content: '';
  position: absolute;
  inset-block: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
  inset-inline: min(0px, calc((100% - var(--z-zona-tactil)) / 2));
}

/* Pulsado: solo color, como el resto de enlaces del panel. */
.zq-dato__valor a:is(:active, .zq-demo-pulsado *) {
  color: var(--z-texto);
  transition: color var(--z-dur-pulsado) ease-out;
}

.zq-dato__valor a:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}

.zq-dato__valor--vacio {
  color: var(--z-texto-3);
}

/* ───────────────────────── Etiqueta con tono ───────────────────────── */

.zq-etiqueta-tono {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
  color: var(--z-texto-2);
  font-size: var(--z-tipo-minimo-tam);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: var(--z-tipo-minimo-tracking);
  line-height: var(--z-tipo-minimo-alto);
  vertical-align: middle;
  white-space: nowrap;
  /* Un texto largo (el nombre completo de un producto) no se sale de su tarjeta: se corta */
  max-width: 100%;
  min-width: 0;
}

.zq-etiqueta-tono__texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zq-etiqueta-tono__icono {
  display: inline-flex;
  flex-shrink: 0;
}

.zq-etiqueta-tono__icono svg {
  width: 0.875rem;
  height: 0.875rem;
}

.zq-etiqueta-tono--aviso {
  background: var(--z-aviso-bg);
  box-shadow: inset 0 0 0 1px var(--z-aviso-bd);
  color: var(--z-aviso);
}

.zq-etiqueta-tono--error {
  background: var(--z-error-bg);
  box-shadow: inset 0 0 0 1px var(--z-error-bd);
  color: var(--z-error);
}

.zq-etiqueta-tono--exito {
  background: var(--z-ok-bg);
  box-shadow: inset 0 0 0 1px var(--z-ok-bd);
  color: var(--z-ok);
}

.zq-etiqueta-tono--prueba {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--z-azul-accion);
  color: var(--z-azul-accion);
}

/* ───────────────────────── Cifra con variación ───────────────────────── */

.zq-rejilla-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--zq-cifras-minimo, 200px)), 1fr));
  gap: 0.75rem;
}

.zq-cifra-variacion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  min-width: 0;
  padding: 1rem 1.125rem;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde);
  color: var(--z-texto);
  text-decoration: none;
  transition:
    box-shadow var(--z-dur-estado) ease-out,
    background-color var(--z-dur-pulsado) ease-out;
}

.zq-cifra-variacion--enlace {
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .zq-cifra-variacion--enlace:hover {
    background: var(--z-sup);
    box-shadow: inset 0 0 0 1px var(--z-borde-f);
  }
}

/* Pulsado: solo color, entra al instante y sale en --z-dur-pulsado. */
.zq-cifra-variacion--enlace:is(:active, .zq-demo-pulsado *) {
  background: var(--z-activo);
  transition-duration: 0ms;
}

.zq-cifra-variacion--enlace:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}

.zq-cifra-variacion__etiqueta {
  max-width: 100%;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  line-height: var(--z-tipo-etiqueta-alto);
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

/* Cifras del panel: titular-2 con peso 300. */
.zq-cifra-variacion__cifra {
  max-width: 100%;
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-titular-2-tam);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: var(--z-tipo-titular-2-tracking);
  line-height: var(--z-tipo-titular-2-alto);
  overflow-wrap: anywhere;
}

.zq-cifra-variacion__lineas {
  display: grid;
  gap: 0.25rem;
}

.zq-cifra-variacion__linea {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

/* Varias monedas en una tarjeta: titular-3 para que quepan sin partirse; el ancho se reserva y se alinean al final. */
.zq-cifra-variacion__lineas .zq-cifra-variacion__cifra {
  min-width: 7ch;
  font-size: var(--z-tipo-titular-3-tam);
  letter-spacing: var(--z-tipo-titular-3-tracking);
  line-height: var(--z-tipo-titular-3-alto);
  text-align: end;
}

.zq-cifra-variacion__moneda {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  line-height: var(--z-tipo-etiqueta-alto);
}

.zq-cifra-variacion__sin-datos {
  color: var(--z-texto-3);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}

.zq-cifra-variacion__variacion {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-cifra-variacion__variacion--bueno {
  color: var(--z-ok);
}

.zq-cifra-variacion__variacion--malo {
  color: var(--z-error);
}

.zq-cifra-variacion__nota {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-cifra-variacion--activa .zq-cifra-variacion__cifra {
  color: var(--z-error);
}

.zq-cifra-variacion--inactiva .zq-cifra-variacion__cifra {
  color: var(--z-texto-3);
}

/* ───────────────────────── Historial ───────────────────────── */

.zq-historial__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin: 0 0 0.75rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-minimo-tam);
  font-weight: 600;
  line-height: var(--z-tipo-minimo-alto);
}

.zq-historial__leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.zq-historial__lista {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-historial__evento {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  column-gap: 0.625rem;
  align-items: start;
}

.zq-historial__punto {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: var(--z-radio-circulo); /* círculo */
  background: var(--z-azul-accion);
}

/* El desplazamiento solo cuenta en la rejilla del evento; en la leyenda el punto se centra con el texto. */
.zq-historial__evento > .zq-historial__punto {
  margin-top: calc((var(--z-tipo-cuerpo-tam) * var(--z-tipo-cuerpo-alto) - 0.5rem) / 2);
}

.zq-historial__evento--automatico .zq-historial__punto {
  background: var(--z-borde-f);
}

.zq-historial__punto--automatico {
  background: var(--z-borde-f);
}

.zq-historial__frase {
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  overflow-wrap: anywhere;
}

.zq-historial__meta {
  grid-column: 2;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-historial__vacio {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-wrap: pretty;
}

.zq-historial__error {
  margin: 0 0 0.75rem;
  color: var(--z-error);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}

.zq-historial__mas {
  margin-top: 1rem;
}

.zq-historial__esqueleto {
  display: grid;
  gap: 1rem;
  animation: zq-ficha-entra 1ms linear 150ms both;
}

@media (prefers-reduced-motion: reduce) {
  .zq-recuadro__esqueleto span,
  .zq-historial__esqueleto span {
    animation: none;
  }
}

.zq-historial__esqueleto span:nth-child(odd) {
  width: 80%;
}

.zq-historial__esqueleto span:nth-child(even) {
  width: 55%;
}

/* ───────────────────────── Pestañas de enlace ───────────────────────── */

.zq-pestanas-enlace {
  /* Contiene los rótulos para lector de pantalla (absolutos) dentro de su propio desplazamiento: si no, en móvil
     se salen por la derecha y la página entera se desplaza en horizontal */
  position: relative;
  overflow-x: auto;
  border-bottom: 1px solid var(--z-borde);
  overscroll-behavior-x: contain;
}

.zq-pestanas-enlace__lista {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Si la tira se corta por un lado, el borde se funde (máscara de opacidad, sin color) para que se vea que se desliza.
   Los atributos los pone `PestanasEnlace` solo cuando queda contenido oculto de ese lado. */
.zq-pestanas-enlace:is([data-mas-izquierda], [data-mas-derecha]) {
  --zq-fundido-izq: 0rem;
  --zq-fundido-der: 0rem;
  mask-image: linear-gradient(to right, transparent 0, var(--z-fondo) var(--zq-fundido-izq), var(--z-fondo) calc(100% - var(--zq-fundido-der)), transparent 100%);
}

.zq-pestanas-enlace[data-mas-izquierda] {
  --zq-fundido-izq: 1.5rem;
}

.zq-pestanas-enlace[data-mas-derecha] {
  --zq-fundido-der: 1.5rem;
}

.zq-pestanas-enlace__pestana {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--z-radio);
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  /* El peso es el mismo en todos los estados: la activa se distingue por color y subrayado. */
  font-weight: 500;
  line-height: var(--z-tipo-cuerpo-alto);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  a.zq-pestanas-enlace__pestana:hover {
    background: var(--z-hover);
    color: var(--z-texto);
  }
}
a.zq-pestanas-enlace__pestana:is(:active, .zq-demo-pulsado *) {
  background: var(--z-activo);
  transition: background-color var(--z-dur-estado) ease-out;
}

a.zq-pestanas-enlace__pestana:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: -2px;
}

.zq-pestanas-enlace__pestana[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--z-accion);
  color: var(--z-texto);
}

.zq-pestanas-enlace__pestana[aria-disabled='true'] {
  color: var(--z-dis-fg);
  cursor: not-allowed;
}

.zq-pestanas-enlace__contador {
  /* Ancho reservado para que el rótulo de al lado no baile cuando cambia la cifra. */
  min-width: 2ch;
  color: var(--z-texto-3);
  font-size: var(--z-tipo-pequeno-tam);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: var(--z-tipo-pequeno-alto);
  text-align: center;
}

.zq-pestanas-enlace__contador--urgente {
  min-width: 1.5rem;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--z-radio);
  background: var(--z-error);
  color: var(--z-fondo);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
}

@media (max-width: 640px) {
  .zq-rejilla-datos--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .zq-recuadro__cabecera {
    padding: 0.875rem 1rem 0;
  }

  .zq-recuadro__cuerpo {
    padding: 0.75rem 1rem 1rem;
  }

  .zq-recuadro--sin-relleno .zq-recuadro__vacio,
  .zq-recuadro--sin-relleno .zq-recuadro__esqueleto {
    padding: 0.75rem 1rem 1rem;
  }
}

/* Calendario del panel. UI densa: horas y eventos en `minimo`, controles en `pequeno`.
   Nada se mueve al interactuar: los estados cambian color o anillo, nunca peso ni borde que aparece. */

.zq-calendario {
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radio);
  background: var(--z-elev);
  color: var(--z-texto);
  overflow: hidden;
}

/* Cabecera: periodo, navegación y vistas */
.zq-calendario__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid var(--z-borde);
  background: var(--z-sup);
}

.zq-calendario__navegacion,
.zq-calendario__vistas {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.zq-calendario__navegacion h2 {
  min-width: 0;
  margin: 0 0.5rem;
  font-size: var(--z-tipo-titular-4-tam);
  line-height: var(--z-tipo-titular-4-alto);
  font-weight: 600;
  text-wrap: balance;
}

.zq-calendario__navegacion h2::first-letter { text-transform: uppercase; }

.zq-calendario__icono,
.zq-calendario__hoy,
.zq-calendario__vista {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radio);
  background: var(--z-elev);
  color: var(--z-texto);
  font: inherit;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.zq-calendario__icono { padding: 0; }

/* Las vistas se eligen como la segmentada (navegacion.css): una pista con relleno, y la elegida sube a superficie
   con texto pleno. Mismo peso y mismo borde en todas (el borde es transparente donde no se ve): cambia solo el color. */
.zq-calendario__vistas {
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--z-radio);
  background: var(--z-relleno);
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-calendario__vista {
  border-color: transparent;
  background: transparent;
  color: var(--z-texto-2);
}

.zq-calendario__vista--activa {
  border-color: var(--z-borde);
  background: var(--z-elev);
  color: var(--z-texto);
}

/* Días de la semana */
.zq-calendario__dias {
  display: grid;
  grid-template-columns: repeat(var(--zq-columnas, 7), minmax(0, 1fr));
  margin-left: 3.375rem;
  border-bottom: 1px solid var(--z-borde);
}

/* El mes no tiene columna de horas: su cabecera ocupa todo el ancho, alineada con la cuadrícula. */
.zq-calendario__escritorio--mes .zq-calendario__dias { margin-left: 0; }

.zq-calendario__dias span {
  min-width: 0;
  padding: 0.5rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
  -webkit-user-select: none;
  user-select: none;
}

.zq-calendario__dias .zq-calendario__dia--hoy { color: var(--z-azul-accion); }

/* Vista de tiempo (día y semana) */
.zq-calendario__tiempo {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 37.5rem;
}

.zq-calendario__horas {
  display: grid;
  grid-template-rows: repeat(14, 1fr);
  border-right: 1px solid var(--z-borde);
  color: var(--z-texto-3);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
}

.zq-calendario__horas span {
  padding-right: 0.5rem;
  transform: translateY(-0.5rem);
}

.zq-calendario__cuerpo-tiempo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--zq-columnas), minmax(0, 1fr));
  background: var(--z-sup);
}

.zq-calendario__franja {
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--z-borde);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Eventos */
.zq-calendario__evento-posicionado {
  position: absolute;
  left: calc((100% / var(--zq-columnas)) * (var(--zq-columna, 0) + (var(--zq-carril, 0) / var(--zq-carriles, 1))));
  width: calc((100% / var(--zq-columnas)) / var(--zq-carriles, 1));
  padding: 0.125rem;
  z-index: 1;
}

/* Todo el día: una franja propia sobre las horas, con la misma columna de horas y las mismas columnas.
   Los eventos del mismo día se apilan y la franja crece con ellos. */
.zq-calendario__todo-dia {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  border-bottom: 1px solid var(--z-borde);
}

.zq-calendario__todo-dia-rotulo {
  padding: 0.375rem 0.5rem 0 0;
  border-right: 1px solid var(--z-borde);
  color: var(--z-texto-3);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
}

.zq-calendario__todo-dia-cuerpo {
  display: grid;
  grid-template-columns: repeat(var(--zq-columnas), minmax(0, 1fr));
  min-width: 0;
}

.zq-calendario__todo-dia-celda {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.25rem 0.125rem;
  border-right: 1px solid var(--z-borde);
}

.zq-calendario__todo-dia-evento { min-width: 0; }

.zq-calendario__todo-dia-evento .zq-calendario__evento { height: auto; }

.zq-calendario__evento {
  display: flex;
  gap: 0.25rem;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: 1.75rem;
  min-width: 0;
  padding: 0.3125rem 0.375rem;
  border: 1px solid var(--z-borde-f);
  border-radius: var(--z-radio);
  background: var(--z-elev);
  color: var(--z-texto);
  font: inherit;
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.zq-calendario__evento-cuerpo {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.zq-calendario__evento-titulo {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.zq-calendario__evento-nombre {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Compacto (celdas del mes y franja de todo el día): una sola línea; si el título no cabe, acaba en puntos
   suspensivos y el texto entero va en su `title`. */
.zq-calendario__evento--compacto { white-space: nowrap; }
.zq-calendario__evento--compacto .zq-calendario__evento-nombre { text-overflow: ellipsis; }

.zq-calendario__evento-detalle {
  display: block;
  margin-top: 0.125rem;
  color: var(--z-texto-2);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.zq-calendario__evento-persona {
  flex: none;
  margin-left: auto;
  color: var(--z-texto-2);
  font-weight: 600;
}

/* Con foto: un círculo del alto de una línea del evento, como el avatar pero sin crecer la fila */
.zq-calendario__evento-persona--foto {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  border-radius: var(--z-radio-circulo); /* círculo */
  box-shadow: inset 0 0 0 1px var(--z-borde);
}

.zq-calendario__evento-persona--foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zq-calendario__evento--accion { border-color: var(--z-azul-accion); color: var(--z-azul-accion); }
.zq-calendario__evento--aviso { border-color: var(--z-aviso-bd); background: var(--z-aviso-bg); color: var(--z-aviso); }
.zq-calendario__evento--error { border-color: var(--z-error-bd); background: var(--z-error-bg); color: var(--z-error); }
.zq-calendario__evento--exito { border-color: var(--z-ok-bd); background: var(--z-ok-bg); color: var(--z-ok); }

/* Arrastre */
.zq-calendario__cuerpo-tiempo,
.zq-calendario__mes { touch-action: pan-y; }

.zq-calendario__cuerpo-tiempo--arrastrando,
.zq-calendario__mes--arrastrando { -webkit-user-select: none; user-select: none; }

.zq-calendario__sombra-tiempo {
  position: absolute;
  left: calc((100% / var(--zq-columnas)) * var(--zq-columna, 0));
  width: calc(100% / var(--zq-columnas));
  display: grid;
  place-items: center;
  min-height: 1.5rem;
  border: 1px dashed var(--z-azul-accion);
  border-radius: var(--z-radio);
  background: var(--z-azul-accion-halo);
  color: var(--z-texto);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
  pointer-events: none;
  z-index: 3;
}

/* Línea de ahora */
.zq-calendario__ahora {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.125rem;
  background: var(--z-dest);
  z-index: 2;
  pointer-events: none;
}

.zq-calendario__ahora span {
  position: absolute;
  top: -0.5625rem;
  left: 0.125rem;
  padding: 0 0.25rem;
  border-radius: var(--z-radio);
  background: var(--z-dest);
  color: var(--z-sobre-dest);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
}

/* Vista de mes */
.zq-calendario__mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.zq-calendario__celda-mes {
  min-width: 0;
  min-height: 7.5rem;
  padding: 0.375rem;
  border-right: 1px solid var(--z-borde);
  border-bottom: 1px solid var(--z-borde);
}

.zq-calendario__celda-mes > span:first-child {
  display: block;
  margin-bottom: 0.3125rem;
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
}

.zq-calendario__celda-mes--fuera { color: var(--z-texto-3); background: var(--z-sup); }

.zq-calendario__celda-mes .zq-calendario__evento {
  min-height: 1.375rem;
  margin-bottom: 0.1875rem;
  padding: 0.1875rem 0.25rem;
}

.zq-calendario__mas {
  display: block;
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
}

/* «+N más» de la franja de todo el día: un botón que despliega o pliega la lista del día. */
.zq-calendario__mas--control {
  min-height: 1.375rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.zq-calendario__mas--control:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}

/* En las celdas del mes vecino el fondo es gris y el azul pequeño no llega a 4,5:1. */
.zq-calendario__celda-mes--fuera .zq-calendario__mas { color: var(--z-texto); }

.zq-calendario__celda-mes--destino {
  background: var(--z-azul-accion-halo);
  outline: 1px dashed var(--z-azul-accion);
  outline-offset: -3px;
}

.zq-calendario__sombra-mes {
  display: block;
  margin-bottom: 0.1875rem;
  padding: 0.1875rem 0.25rem;
  border: 1px dashed var(--z-azul-accion);
  border-radius: var(--z-radio);
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
}

/* Cargando y vacío */
.zq-calendario__cargando,
.zq-calendario__vacio {
  display: grid;
  place-items: center;
  min-height: 11.25rem;
  padding: 1.25rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-align: center;
  text-wrap: pretty;
}

.zq-calendario__cargando {
  background: var(--z-sup);
  animation: zq-calendario-carga 1.2s ease-in-out infinite alternate;
}

@keyframes zq-calendario-carga {
  from { opacity: 1; }
  to { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .zq-calendario__cargando { animation: none; }
}

/* Agenda (móvil) */
.zq-calendario__movil { display: none; }

.zq-calendario__agenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0.75rem;
  list-style: none;
}

.zq-calendario__agenda h3 {
  margin: 0 0 0.375rem;
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  font-weight: 600;
  text-wrap: balance;
}

.zq-calendario__agenda h3::first-letter { text-transform: uppercase; }

.zq-calendario__agenda p {
  margin: 0;
  color: var(--z-texto-3);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

.zq-calendario__agenda-vacia {
  margin: 0;
  padding: 1.25rem 0.75rem;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  text-align: center;
}

.zq-calendario__agenda-evento {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.375rem;
}

.zq-calendario__agenda-evento time {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

/* En la agenda los eventos son objetivos táctiles de 44 px y se leen en `pequeno`. */
.zq-calendario__agenda .zq-calendario__evento {
  min-height: 2.75rem;
  padding: 0.5rem 0.625rem;
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}

/* Móvil: la agenda sustituye a la cuadrícula. */
@media (max-width: 640px) {
  .zq-calendario__cabecera { align-items: flex-start; }
  .zq-calendario__navegacion { flex-wrap: wrap; }
  .zq-calendario__navegacion h2 { order: 3; width: 100%; margin: 0.125rem 0 0; }
  .zq-calendario__escritorio { display: none; }
  .zq-calendario__movil { display: block; }
}

/* Con dedo, los eventos de la cuadrícula de mes llegan a 44 px. */
@media (pointer: coarse) {
  .zq-calendario__celda-mes .zq-calendario__evento { min-height: 2.75rem; align-items: center; }
  .zq-calendario__todo-dia-evento .zq-calendario__evento,
  .zq-calendario__mas--control { min-height: 2.75rem; align-items: center; }
}

/* Hover: solo con ratón. El hover cambia color, nunca tamaño ni peso. */
@media (hover: hover) and (pointer: fine) {
  .zq-calendario__icono:hover,
  .zq-calendario__hoy:hover,
  .zq-calendario__vista:hover:not(.zq-calendario__vista--activa) { border-color: var(--z-borde-f); }
  .zq-calendario__franja:hover { background: var(--z-azul-accion-halo); }
  .zq-calendario__evento:hover { box-shadow: inset 0 0 0 1px currentColor; }
  .zq-calendario__mas--control:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}

/* Pulsado: solo color, sin escala. */
.zq-calendario__icono:active,
.zq-calendario__hoy:active,
.zq-calendario__vista:active,
.zq-calendario__evento:active,
.zq-calendario__mas--control:active {
  background: var(--z-activo);
  transition: background-color var(--z-dur-pulsado) ease-out;
}

.zq-calendario__franja:active {
  background: var(--z-azul-accion-halo);
  transition: background-color var(--z-dur-pulsado) ease-out;
}

/* ZINQUO · movimiento de la Q · 1.0 · 01/10/2026
   Fuente: «Movimiento de la Q de ZINQUO» (notas con Tudor, 27/09 a 01/10) y
   «ZINQUO · Evolución de marca 2026». Sustituye a v0-zq-movimiento.css.

   Anatomía (ver Movimiento Q.dc.html):
   <svg class="zq-q" viewBox="1850 0 920 760">
     <mask id="GID-m"><path data-trazo d="M2528 560 L2528 385 A293 293 0 1 0 2235 678 L2820 678"
           fill="none" stroke="var(--z-papel)" stroke-width="272" pathLength="1"/></mask>
     <use data-silueta href="#GID-f" fill="var(--z-sobre-papel)"/>    capa 1
     <use href="#GID-f" fill="url(#GID-deg)" mask="url(#GID-m)"/>     capa 2
   Cada copia lleva sus propios id. Centro del anillo (2235, 380); caja (2308, 380). */

:root {
  --z-dur-pulsado: 100ms;
  --z-dur-estado: 180ms;
  --z-dur-salida: 180ms;
  --z-dur-reducido: 160ms;
  --z-curva-salida: cubic-bezier(0.64, 0, 0.78, 0);
  --z-muelle-critico: linear(0, 0.064, 0.192, 0.324, 0.459, 0.578, 0.675, 0.753, 0.81, 0.858, 0.895, 0.923, 0.942, 0.957, 0.969, 0.977, 0.983, 0.988, 0.991, 0.994, 0.995, 0.997, 0.998, 0.998, 1);
  --z-muelle-critico-dur: 512ms;
  --z-muelle-impulso: linear(0, 0.058, 0.184, 0.347, 0.495, 0.627, 0.737, 0.831, 0.895, 0.941, 0.972, 0.993, 1.005, 1.011, 1.013, 1.013, 1.011, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1);
  --z-muelle-impulso-dur: 490ms;
  --z-muelle-cajon: linear(0, 0.066, 0.191, 0.353, 0.51, 0.637, 0.752, 0.84, 0.9, 0.947, 0.977, 0.995, 1.006, 1.011, 1.013, 1.012, 1.011, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1.001, 1);
  --z-muelle-cajon-dur: 427ms;
  --z-capa-base: 0;
  --z-capa-pegajosa: 10;
  --z-capa-flotante: 20;
  --z-capa-dialogo: 30;
  --z-capa-recorrido: 40;
  --zq-q-curva-pluma: cubic-bezier(0.5, 0, 0.3, 1);
  --zq-q-curva-estandar: cubic-bezier(0.65, 0, 0.35, 1);
  --zq-q-curva-entrada: cubic-bezier(0.22, 1, 0.36, 1);
  --zq-q-curva-salida: cubic-bezier(0.64, 0, 0.78, 0);
  --zq-q-curva-pulso: cubic-bezier(0.34, 1.32, 0.64, 1);
  --zq-q-dur-micro: 120ms;
  --zq-q-dur-base: 200ms;
  --zq-q-dur-salida: 160ms;
  --zq-q-dur-entrada: 480ms;
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --z-muelle-critico: cubic-bezier(0.22, 1, 0.36, 1);
    --z-muelle-impulso: cubic-bezier(0.34, 1.13, 0.64, 1);
    --z-muelle-cajon: cubic-bezier(0.22, 1.08, 0.36, 1);
  }
}

.zq-q [data-trazo] {
  stroke-dasharray: 1 1.2;
  stroke-dashoffset: 0;
}
.zq-q [data-silueta] {
  opacity: 0;
}

/* Formarse · 900 ms */
@keyframes zq-q-escribe {
  from {
    stroke-dashoffset: 1.1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.zq-q-formarse [data-trazo] {
  animation: zq-q-escribe 900ms var(--zq-q-curva-pluma) backwards;
}

/* Cargar · 1,8 s en bucle sobre la silueta al 14% */
@keyframes zq-q-carga {
  0% {
    stroke-dashoffset: 1.1;
  }
  46%,
  58% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1.1;
  }
}
.zq-q-cargar [data-silueta] {
  opacity: 0.14;
}
.zq-q-cargar [data-trazo] {
  animation: zq-q-carga 1800ms var(--zq-q-curva-estandar) infinite;
}

/* Carga larga · desde 4 s · el tramo crece en cada vuelta (periodo siempre 1) */
@keyframes zq-q-recorre {
  0% {
    stroke-dasharray: 0.18 0.82;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
  }
  88.9% {
    stroke-dasharray: 1 0;
    stroke-dashoffset: -4;
    stroke-opacity: 1;
  }
  96.3% {
    stroke-dasharray: 1 0;
    stroke-dashoffset: -4;
    stroke-opacity: 1;
  }
  100% {
    stroke-dasharray: 1 0;
    stroke-dashoffset: -4;
    stroke-opacity: 0;
  }
}
.zq-q-carga-larga [data-silueta] {
  opacity: 0.14;
}
.zq-q-carga-larga [data-trazo] {
  animation: zq-q-recorre 10800ms linear infinite;
}

/* Celebrar · ~2,1 s · el flujo de color (SMIL, spreadMethod reflect, 0 → 1804) lo lanza el JS a los 820 ms */
@keyframes zq-q-toma-aire {
  40% {
    transform: translateY(-48px);
  }
}
.zq-q-celebrar [data-silueta] {
  opacity: 1;
}
.zq-q-celebrar [data-trazo] {
  animation: zq-q-escribe 640ms var(--zq-q-curva-pluma) 180ms backwards;
}
.zq-q-celebrar .zq-q use {
  animation: zq-q-toma-aire 900ms var(--zq-q-curva-estandar) 520ms;
}

/* Entrada · 2 s · .zoom con transform-origin 2308px 380px y transform-box view-box */
@keyframes zq-q-encoge {
  from {
    transform: translate(-68px, 0) scale(2.3);
  }
}
@keyframes zq-q-sale-local {
  to {
    opacity: 0;
  }
}
@keyframes zq-q-entra-logo {
  from {
    opacity: 0;
  }
}
@keyframes zq-q-letra-sube {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
}
.zq-q-entrada .zoom {
  animation: zq-q-encoge 760ms var(--zq-q-curva-estandar) 1000ms backwards;
}
.zq-q-entrada .zq-q-local [data-trazo] {
  animation: zq-q-escribe 900ms var(--zq-q-curva-pluma) backwards;
}
.zq-q-entrada .zq-q-local {
  animation: zq-q-sale-local 520ms var(--zq-q-curva-estandar) 1120ms forwards;
}
.zq-q-entrada .zq-q-logo {
  animation: zq-q-entra-logo 520ms var(--zq-q-curva-estandar) 1120ms backwards;
}
.zq-q-entrada .letra {
  animation: zq-q-letra-sube 480ms var(--zq-q-curva-entrada) backwards;
  animation-delay: calc(1380ms + var(--i, 0) * 50ms);
}

/* Despedida · 2,5 s · --dx por letra: z −260, i −200, n −140, u 140, o 200, ® 260 */
@keyframes zq-q-letra-aparta {
  to {
    opacity: 0;
    transform: translateX(var(--dx));
  }
}
@keyframes zq-q-agranda {
  to {
    transform: translate(-68px, 0) scale(2.3);
  }
}
@keyframes zq-q-pulso {
  35% {
    transform: scale(1.08);
  }
  70% {
    transform: scale(0.985);
  }
}
@keyframes zq-q-onda {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
.zq-q-despedida .letra {
  animation: zq-q-letra-aparta 560ms var(--zq-q-curva-salida) forwards;
  animation-delay: calc(var(--orden, 0) * 90ms);
}
.zq-q-despedida .zoom {
  animation: zq-q-agranda 900ms var(--zq-q-curva-estandar) 380ms forwards;
}
.zq-q-despedida .pulso {
  animation: zq-q-pulso 640ms var(--zq-q-curva-pulso) 1420ms;
}
.zq-q .onda {
  opacity: 0;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5;
}
.zq-q-despedida .onda {
  animation: zq-q-onda 900ms var(--zq-q-curva-entrada) 1580ms none;
}
.zq-q-despedida .onda + .onda {
  animation-delay: 1760ms;
  stroke-opacity: 0.6;
}

/* Botón → Q → botón · data-fase: cargando | exito | vuelta | error */
@keyframes zq-b-sale {
  to {
    opacity: 0;
    transform: translateY(-70%);
    filter: blur(6px);
  }
}
@keyframes zq-b-entra {
  from {
    opacity: 0;
    transform: translateY(70%);
    filter: blur(6px);
  }
}
@keyframes zq-b-hunde {
  45% {
    transform: scale(0.965);
  }
}
@keyframes zq-b-cometa {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(265%);
  }
}
@keyframes zq-b-barra {
  from {
    transform: scaleX(0);
  }
}
@keyframes zq-b-recoge {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes zq-b-reintento {
  from {
    transform: rotate(-200deg);
  }
}
@keyframes zq-b-despliega {
  from {
    opacity: 0;
    transform: translateY(-6px);
    clip-path: inset(0 0 100% 0);
  }
}
.zq-boton-q {
  display: grid;
  position: relative;
  overflow: hidden;
  border-radius: var(--z-radio);
  background: var(--z-sobre-papel);
  color: var(--z-papel);
  transition:
    background-color 420ms var(--zq-q-curva-estandar),
    color 420ms var(--zq-q-curva-estandar),
    box-shadow 420ms var(--zq-q-curva-estandar);
}
.zq-boton-q > .capa {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.zq-boton-q [data-bq],
.zq-boton-q [data-l2] {
  opacity: 0;
}
.zq-boton-q .borde {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  overflow: hidden;
}
.zq-boton-q .cometa,
.zq-boton-q .barra {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.zq-boton-q .cometa {
  width: 38%;
  background: linear-gradient(90deg, transparent, var(--z-deg-verde) 30%, var(--z-deg-azul) 60%, var(--z-deg-rojo));
}
.zq-boton-q .barra {
  transform-origin: left center;
  background: linear-gradient(90deg, var(--z-deg-verde), var(--z-deg-azul) 45%, var(--z-deg-violeta) 62%, var(--z-deg-rojo));
}
.zq-boton-q[data-fase='cargando'] {
  animation: zq-b-hunde 320ms var(--zq-q-curva-pulso);
}
.zq-boton-q[data-fase='cargando'] [data-l1] {
  animation: zq-b-sale 260ms var(--zq-q-curva-salida) forwards;
}
.zq-boton-q[data-fase='cargando'] [data-bq] {
  opacity: 1;
  animation: zq-b-entra 340ms var(--zq-q-curva-entrada) 90ms backwards;
}
.zq-boton-q[data-fase='cargando'] [data-bq] [data-trazo='blanco'] {
  animation: zq-q-carga 1800ms var(--zq-q-curva-estandar) infinite;
}
.zq-boton-q[data-fase='cargando'] .cometa {
  opacity: 1;
  animation: zq-b-cometa 1300ms var(--zq-q-curva-estandar) infinite;
}
.zq-boton-q[data-fase='exito'] [data-l1] {
  opacity: 0;
}
.zq-boton-q[data-fase='exito'] [data-trazo='color'] {
  animation: zq-q-escribe 640ms var(--zq-q-curva-pluma) backwards;
}
.zq-boton-q[data-fase='exito'] .barra {
  opacity: 1;
  animation: zq-b-barra 640ms var(--zq-q-curva-estandar) backwards;
}
.zq-boton-q[data-fase='exito'] [data-bq] {
  animation: zq-b-sale 260ms var(--zq-q-curva-salida) 760ms forwards;
  opacity: 1;
}
.zq-boton-q[data-fase='exito'] [data-l2] {
  opacity: 1;
  animation: zq-b-entra 340ms var(--zq-q-curva-entrada) 840ms backwards;
}
.zq-boton-q[data-fase='exito'] .check path {
  stroke-dasharray: 1 1.2;
  animation: zq-q-escribe 360ms var(--zq-q-curva-entrada) 1060ms backwards;
}
.zq-boton-q[data-fase='vuelta'] [data-l2] {
  animation: zq-b-sale 260ms var(--zq-q-curva-salida) forwards;
  opacity: 1;
}
.zq-boton-q[data-fase='vuelta'] [data-l1] {
  animation: zq-b-entra 340ms var(--zq-q-curva-entrada) 80ms backwards;
}
.zq-boton-q[data-fase='error'] {
  background: var(--z-papel);
  color: var(--z-sobre-papel);
  box-shadow: inset 0 0 0 1px var(--z-sobre-papel);
}
.zq-boton-q[data-fase='error'] .barra {
  opacity: 1;
  background: var(--z-error-fijo);
  transform-origin: center;
  animation: zq-b-recoge 520ms var(--zq-q-curva-estandar) forwards;
}
.zq-boton-q[data-fase='error'] [data-l1] {
  animation: zq-b-entra 340ms var(--zq-q-curva-entrada) 300ms backwards;
}
.zq-boton-q[data-fase='error'] .reintento {
  animation: zq-b-reintento 600ms var(--zq-q-curva-entrada) 380ms backwards;
}
.zq-boton-q .reintento {
  display: none;
}
.zq-boton-q[data-fase='error'] .reintento {
  display: block;
}
.zq-q-error-mensaje {
  border-radius: var(--z-radio);
  animation: zq-b-despliega 360ms var(--zq-q-curva-entrada) 460ms backwards;
}

/* Reducción de movimiento, gesto a gesto */
@keyframes zq-q-fundido {
  from {
    opacity: 0;
  }
}
@keyframes zq-q-parpadeo {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zq-q-formarse [data-trazo],
  .zq-q-celebrar [data-trazo],
  .zq-q-entrada .zq-q-local [data-trazo] {
    animation: none;
    stroke-dashoffset: 0;
  }
  .zq-q-formarse,
  .zq-q-entrada {
    animation: zq-q-fundido 200ms linear backwards;
  }
  .zq-q-celebrar [data-silueta] {
    opacity: 0;
  }
  .zq-q-celebrar .zq-q use {
    animation: zq-q-fundido 300ms linear backwards;
  }
  .zq-q-cargar [data-trazo] {
    animation: none;
    stroke-dashoffset: 0;
  }
  .zq-q-cargar [data-silueta] {
    opacity: 0;
  }
  .zq-q-cargar .zq-q {
    animation: zq-q-parpadeo 1600ms linear infinite;
  }
  .zq-q-carga-larga [data-trazo] {
    animation: none;
    stroke-dasharray: 1 0;
  }
  .zq-q-entrada .zoom,
  .zq-q-entrada .letra,
  .zq-q-entrada .zq-q-local,
  .zq-q-entrada .zq-q-logo {
    animation: none;
  }
  .zq-q-despedida .letra {
    animation: none;
    opacity: 0;
  }
  .zq-q-despedida .zoom {
    animation: none;
    transform: translate(-68px, 0) scale(2.3);
  }
  .zq-q-despedida,
  .zq-q-despedida .pulso {
    animation: zq-q-fundido 300ms linear backwards;
  }
  .zq-q-despedida .onda {
    display: none;
  }
  .zq-boton-q [data-l1],
  .zq-boton-q [data-bq],
  .zq-boton-q [data-l2] {
    animation-name: zq-q-fundido !important;
    transform: none;
    filter: none;
  }
  .zq-boton-q[data-fase] {
    animation: none;
  }
  .zq-boton-q .cometa {
    animation: none !important;
    transform: translateX(80%);
  }
  .zq-boton-q .reintento,
  .zq-boton-q .check path {
    animation: none !important;
  }
  .zq-q-error-mensaje {
    animation: zq-q-fundido 160ms linear backwards;
  }
}