/*
 * IA que Rende — design system
 * ARQUIVO GERADO por `npm run build`. Não edite.
 */

/*
 * brand/fonts/fonts.css
 *
 * ARQUIVO GERADO por `node scripts/fetch-fonts.mjs`. Não edite à mão.
 *
 * Os caminhos são relativos ao CSS que consome este bloco. O build copia os
 * .woff2 para uma pasta fonts/ ao lado do CSS gerado, então url("fonts/...")
 * resolve tanto em design-system/dist/ quanto em sites/*/dist/assets/.
 */
/* Poppins — latin-ext (5.4KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins — latin (7.7KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins — latin-ext (5.5KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins — latin (7.7KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins — latin-ext (5.4KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins — latin (7.6KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins — latin-ext (5.4KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins — latin (7.8KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins — latin-ext (5.3KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins — latin (7.6KB) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*
 * design-system/dist/tokens.css
 *
 * ARQUIVO GERADO — não edite à mão.
 * Fonte da verdade: brand/tokens/*.json (primitivos) + design-system/tokens/*.json (semânticos)
 * Regenere com: npm run build
 */

:root {
  /* brand */
  --iqr-brand-color-roxo-400: #9B7AFF;
  --iqr-brand-color-roxo-500: #6C3BFF;
  --iqr-brand-color-roxo-600: #5930D1;
  --iqr-brand-color-roxo-700: #4928AD;
  --iqr-brand-color-roxo-900: #1E1442;
  --iqr-brand-color-azul-400: #4F8FF7;
  --iqr-brand-color-azul-500: #3B82F6;
  --iqr-brand-color-azul-600: #3472D8;
  --iqr-brand-color-slate-0: #FFFFFF;
  --iqr-brand-color-slate-200: #E2E8F0;
  --iqr-brand-color-slate-300: #CBD5E1;
  --iqr-brand-color-slate-400: #94A3B8;
  --iqr-brand-color-slate-500: #64748B;
  --iqr-brand-color-slate-600: #475569;
  --iqr-brand-color-slate-700: #334155;
  --iqr-brand-color-slate-800: #1E293B;
  --iqr-brand-color-slate-850: #16203A;
  --iqr-brand-color-slate-900: #0F172A;
  --iqr-brand-color-slate-925: #0A1020;
  --iqr-brand-color-slate-950: #080E1C;
  --iqr-brand-color-slate-975: #060A14;
  --iqr-brand-color-signal-success: #34D399;
  --iqr-brand-color-signal-warning: #FBBF24;
  --iqr-brand-color-signal-danger: #F87171;
  --iqr-brand-color-ciano-100: #B4EEFE;
  --iqr-brand-color-ciano-200: #0CDEF0;
  --iqr-brand-color-ciano-300: #37C2FF;
  --iqr-brand-color-ciano-400: #22D3EE;
  --iqr-brand-color-ciano-500: #06B6D4;
  --iqr-brand-color-ciano-900: #083344;
  --iqr-brand-color-marinho-400: #254257;
  --iqr-brand-color-marinho-500: #214D84;
  --iqr-brand-color-marinho-700: #152B49;
  --iqr-brand-color-marinho-800: #112846;
  --iqr-brand-color-marinho-900: #071321;
  --iqr-brand-color-marinho-950: #041321;
  --iqr-brand-color-gelo-50: #F5F8FF;
  --iqr-brand-color-gelo-100: #E0EEFF;
  --iqr-brand-color-gelo-200: #BAD6ED;
  --iqr-brand-color-gelo-300: #B0C1DF;
  --iqr-brand-color-gelo-400: #8296B6;
  --iqr-brand-color-verde-suave-50: #D8F2ED;
  --iqr-brand-color-verde-suave-600: #117B70;
  --iqr-brand-color-verde-suave-900: #154640;
  --iqr-brand-color-ambar-50: #FFF3D6;
  --iqr-brand-color-ambar-700: #7A4E00;
  --iqr-brand-color-vermelho-50: #FDE8E8;
  --iqr-brand-color-vermelho-700: #9B1C1C;
  --iqr-brand-font-display: Poppins, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --iqr-brand-font-text: Poppins, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --iqr-brand-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --iqr-brand-gradient-oficial: linear-gradient(135deg, #6C3BFF 0%, #3B82F6 100%);
  --iqr-brand-gradient-superficie: linear-gradient(160deg, #182240 0%, #111A30 100%);
  --iqr-brand-gradient-tri: linear-gradient(120deg, #6C3BFF 0%, #3B82F6 52%, #22D3EE 100%);
  --iqr-brand-gradient-texto: linear-gradient(90deg, #9B7AFF 0%, #4F8FF7 55%, #22D3EE 100%);
  --iqr-brand-gradient-borda: linear-gradient(135deg, rgba(155, 122, 255, 0.55) 0%, rgba(79, 143, 247, 0.30) 50%, rgba(34, 211, 238, 0.45) 100%);
  --iqr-brand-gradient-atmosfera: radial-gradient(70rem 42rem at 8% -12%, rgba(108, 59, 255, 0.20) 0%, rgba(108, 59, 255, 0) 60%), radial-gradient(56rem 36rem at 92% -6%, rgba(34, 211, 238, 0.10) 0%, rgba(34, 211, 238, 0) 62%);
  --iqr-brand-gradient-acao: linear-gradient(120deg, #6C3BFF 0%, #3472D8 100%);
  --iqr-brand-gradient-ciano: linear-gradient(110deg, #37C2FF 0%, #0CDEF0 100%);
  --iqr-brand-gradient-brilho-comercial: radial-gradient(ellipse at 85% 45%, #112846 0%, rgba(17, 40, 70, 0) 50%);

  /* color */
  --iqr-color-bg-page: var(--iqr-brand-color-slate-925);
  --iqr-color-bg-surface: var(--iqr-brand-color-slate-900);
  --iqr-color-bg-raised: var(--iqr-brand-color-slate-850);
  --iqr-color-bg-elevated: var(--iqr-brand-color-slate-800);
  --iqr-color-bg-sunken: var(--iqr-brand-color-slate-975);
  --iqr-color-bg-inverse: var(--iqr-brand-color-slate-0);
  --iqr-color-text-primary: var(--iqr-brand-color-slate-200);
  --iqr-color-text-secondary: var(--iqr-brand-color-slate-300);
  --iqr-color-text-muted: var(--iqr-brand-color-slate-400);
  --iqr-color-text-inverse: var(--iqr-brand-color-slate-900);
  --iqr-color-text-on-brand: var(--iqr-brand-color-slate-0);
  --iqr-color-text-on-accent: var(--iqr-brand-color-slate-0);
  --iqr-color-text-link: var(--iqr-brand-color-roxo-400);
  --iqr-color-text-disabled: var(--iqr-brand-color-slate-600);
  --iqr-color-border-subtle: var(--iqr-brand-color-slate-800);
  --iqr-color-border-default: var(--iqr-brand-color-slate-700);
  --iqr-color-border-interactive: var(--iqr-brand-color-slate-500);
  --iqr-color-border-focus: var(--iqr-brand-color-roxo-400);
  --iqr-color-brand-default: var(--iqr-brand-color-roxo-500);
  --iqr-color-brand-strong: var(--iqr-brand-color-roxo-500);
  --iqr-color-brand-soft: var(--iqr-brand-color-roxo-900);
  --iqr-color-brand-contrast: var(--iqr-brand-color-roxo-400);
  --iqr-color-accent-default: var(--iqr-brand-color-azul-400);
  --iqr-color-accent-strong: var(--iqr-brand-color-azul-600);
  --iqr-color-accent-oficial: var(--iqr-brand-color-azul-500);
  --iqr-color-accent-cyan: var(--iqr-brand-color-ciano-400);
  --iqr-color-accent-cyan-strong: var(--iqr-brand-color-ciano-500);
  --iqr-color-accent-cyan-soft: var(--iqr-brand-color-ciano-900);
  --iqr-color-action-primary-bg: var(--iqr-brand-color-roxo-500);
  --iqr-color-action-primary-bg-hover: var(--iqr-brand-color-roxo-600);
  --iqr-color-action-primary-bg-active: var(--iqr-brand-color-roxo-700);
  --iqr-color-action-primary-fg: var(--iqr-brand-color-slate-0);
  --iqr-color-action-secondary-bg: var(--iqr-brand-color-slate-800);
  --iqr-color-action-secondary-bg-hover: var(--iqr-brand-color-slate-700);
  --iqr-color-action-secondary-fg: var(--iqr-brand-color-slate-200);
  --iqr-color-feedback-success: var(--iqr-brand-color-signal-success);
  --iqr-color-feedback-warning: var(--iqr-brand-color-signal-warning);
  --iqr-color-feedback-danger: var(--iqr-brand-color-signal-danger);
  --iqr-color-comercial-bg-page: var(--iqr-brand-color-marinho-900);
  --iqr-color-comercial-bg-brilho: var(--iqr-brand-gradient-brilho-comercial);
  --iqr-color-comercial-text-primary: var(--iqr-brand-color-slate-200);
  --iqr-color-comercial-text-secondary: var(--iqr-brand-color-slate-300);
  --iqr-color-comercial-eyebrow: var(--iqr-brand-color-gelo-200);
  --iqr-color-comercial-action-bg: var(--iqr-brand-gradient-ciano);
  --iqr-color-comercial-action-bg-solid: var(--iqr-brand-color-ciano-300);
  --iqr-color-comercial-action-bg-end: var(--iqr-brand-color-ciano-200);
  --iqr-color-comercial-action-fg: var(--iqr-brand-color-marinho-950);
  --iqr-color-comercial-selo-bg: var(--iqr-brand-color-marinho-700);
  --iqr-color-comercial-selo-borda: var(--iqr-brand-color-ciano-300);
  --iqr-color-comercial-etapa-titulo: var(--iqr-brand-color-ciano-100);
  --iqr-color-comercial-etapa-borda: var(--iqr-brand-color-marinho-400);
  --iqr-color-comercial-quadro-bg: var(--iqr-brand-color-gelo-50);
  --iqr-color-comercial-quadro-text: var(--iqr-brand-color-slate-900);
  --iqr-color-comercial-quadro-text-secondary: var(--iqr-brand-color-slate-700);
  --iqr-color-comercial-quadro-text-muted: var(--iqr-brand-color-slate-600);
  --iqr-color-comercial-quadro-borda: var(--iqr-brand-color-gelo-400);
  --iqr-color-comercial-quadro-opcao-borda: var(--iqr-brand-color-gelo-300);
  --iqr-color-comercial-quadro-selecao-bg: var(--iqr-brand-color-gelo-100);
  --iqr-color-comercial-quadro-selecao-borda: var(--iqr-brand-color-azul-500);
  --iqr-color-comercial-quadro-barra-bg: var(--iqr-brand-color-marinho-700);
  --iqr-color-comercial-quadro-barra-fg: var(--iqr-brand-color-slate-0);
  --iqr-color-comercial-quadro-link: var(--iqr-brand-color-marinho-500);
  --iqr-color-comercial-quadro-foco: var(--iqr-brand-color-marinho-700);
  --iqr-color-comercial-quadro-feedback-bg: var(--iqr-brand-color-verde-suave-50);
  --iqr-color-comercial-quadro-feedback-borda: var(--iqr-brand-color-verde-suave-600);
  --iqr-color-comercial-quadro-feedback-text: var(--iqr-brand-color-verde-suave-900);
  --iqr-color-comercial-quadro-sucesso-text: var(--iqr-brand-color-verde-suave-600);
  --iqr-color-comercial-quadro-alerta-bg: var(--iqr-brand-color-ambar-50);
  --iqr-color-comercial-quadro-alerta-text: var(--iqr-brand-color-ambar-700);
  --iqr-color-comercial-quadro-erro-bg: var(--iqr-brand-color-vermelho-50);
  --iqr-color-comercial-quadro-erro-text: var(--iqr-brand-color-vermelho-700);
  --iqr-color-comercial-leitura-bg: var(--iqr-brand-color-gelo-50);
  --iqr-color-comercial-leitura-fio: var(--iqr-brand-color-gelo-300);
  --iqr-color-comercial-fio: var(--iqr-brand-color-marinho-400);

  /* container */
  --iqr-container-narrow: 44rem;
  --iqr-container-base: 68rem;
  --iqr-container-wide: 80rem;
  --iqr-container-gutter: 1.25rem;

  /* layer */
  --iqr-layer-base: 0;
  --iqr-layer-raised: 10;
  --iqr-layer-sticky: 100;
  --iqr-layer-overlay: 200;
  --iqr-layer-modal: 300;
  --iqr-layer-toast: 400;

  /* duration */
  --iqr-duration-instant: 80ms;
  --iqr-duration-fast: 150ms;
  --iqr-duration-base: 240ms;
  --iqr-duration-slow: 480ms;

  /* easing */
  --iqr-easing-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --iqr-easing-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --iqr-easing-exit: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* radius */
  --iqr-radius-sm: 0.375rem;
  --iqr-radius-md: 0.625rem;
  --iqr-radius-lg: 0.875rem;
  --iqr-radius-xl: 1.25rem;
  --iqr-radius-2xl: 1.75rem;
  --iqr-radius-full: 999px;

  /* shadow */
  --iqr-shadow-sm: 0 1px 2px rgba(3, 5, 10, 0.5);
  --iqr-shadow-md: 0 6px 20px -6px rgba(3, 5, 10, 0.65);
  --iqr-shadow-lg: 0 24px 60px -20px rgba(3, 5, 10, 0.8);
  --iqr-shadow-brand: 0 8px 24px -10px rgba(108, 59, 255, 0.6);
  --iqr-shadow-glow: 0 0 0 1px rgba(155, 122, 255, 0.22), 0 14px 40px -14px rgba(108, 59, 255, 0.55);
  --iqr-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px -18px rgba(3, 5, 10, 0.9);

  /* border-width */
  --iqr-border-width-hairline: 1px;
  --iqr-border-width-thick: 2px;
  --iqr-border-width-focus: 3px;

  /* space */
  --iqr-space-0: 0;
  --iqr-space-1: 0.25rem;
  --iqr-space-2: 0.5rem;
  --iqr-space-3: 0.75rem;
  --iqr-space-4: 1rem;
  --iqr-space-5: 1.25rem;
  --iqr-space-6: 1.5rem;
  --iqr-space-8: 2rem;
  --iqr-space-10: 2.5rem;
  --iqr-space-12: 3rem;
  --iqr-space-16: 4rem;
  --iqr-space-20: 5rem;
  --iqr-space-24: 6rem;
  --iqr-space-32: 8rem;

  /* font */
  --iqr-font-display: var(--iqr-brand-font-display);
  --iqr-font-text: var(--iqr-brand-font-text);
  --iqr-font-mono: var(--iqr-brand-font-mono);

  /* size */
  --iqr-size-xs: 0.8125rem;
  --iqr-size-sm: 0.875rem;
  --iqr-size-base: 1rem;
  --iqr-size-md: 1.0625rem;
  --iqr-size-lg: 1.1875rem;
  --iqr-size-xl: 1.375rem;
  --iqr-size-display-sm: clamp(1.625rem, 1.35rem + 1.35vw, 2.125rem);
  --iqr-size-display-md: clamp(2rem, 1.55rem + 2.25vw, 2.875rem);
  --iqr-size-display-lg: clamp(2.5rem, 1.8rem + 3.4vw, 3.875rem);
  --iqr-size-display-xl: clamp(2.875rem, 1.95rem + 4.4vw, 4.5rem);

  /* leading */
  --iqr-leading-tight: 1.08;
  --iqr-leading-snug: 1.22;
  --iqr-leading-normal: 1.5;
  --iqr-leading-relaxed: 1.65;

  /* tracking */
  --iqr-tracking-tighter: -0.03em;
  --iqr-tracking-tight: -0.015em;
  --iqr-tracking-normal: 0;
  --iqr-tracking-wide: 0.08em;
  --iqr-tracking-widest: 0.18em;

  /* weight */
  --iqr-weight-light: 300;
  --iqr-weight-regular: 400;
  --iqr-weight-medium: 500;
  --iqr-weight-semibold: 600;
  --iqr-weight-bold: 700;

  /* measure */
  --iqr-measure-narrow: 38ch;
  --iqr-measure-base: 62ch;
  --iqr-measure-wide: 74ch;
}


/* ===== design-system\css\01-reset.css ===== */
/* ==========================================================================
   01 — Reset
   Zera diferenças entre navegadores. Não define aparência: isso é do 02-base.
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mídia é bloco e nunca estoura o contêiner. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Campos de formulário herdam a tipografia em vez de usar a do sistema. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Quebra palavra longa em vez de estourar a caixa. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dd,
dt {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

table {
  border-collapse: collapse;
}

/* Alvo de rolagem não fica escondido atrás do cabeçalho fixo. */
:target {
  scroll-margin-block-start: 6rem;
}

/* O atributo hidden vence qualquer display de componente. Sem isto, um
   .iqr-field { display: flex } escondido pelo script continuaria visível. */
[hidden] {
  display: none !important;
}

/* ===== design-system\css\02-base.css ===== */
/* ==========================================================================
   02 — Base
   Aparência padrão dos elementos, foco e política de movimento.
   ========================================================================== */

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

/* O fundo é o navy profundo com dois brilhos difusos no topo — o único glow
   do sistema. Ele fica atrás de tudo e desaparece ao rolar; nenhuma seção
   precisa desenhar atmosfera própria. */
body {
  background-color: var(--iqr-color-bg-page);
  background-image: var(--iqr-brand-gradient-atmosfera);
  background-repeat: no-repeat;
  background-size: 100% 80rem;
  color: var(--iqr-color-text-secondary);
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-regular);
  line-height: var(--iqr-leading-relaxed);
}

/* --- Títulos ------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-text-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--iqr-size-display-lg);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-tight);
  letter-spacing: var(--iqr-tracking-tighter);
}

h2 {
  font-size: var(--iqr-size-display-sm);
}

h3 {
  font-size: var(--iqr-size-xl);
}

h4 {
  font-size: var(--iqr-size-lg);
}

h5,
h6 {
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-text-primary);
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

small {
  font-size: var(--iqr-size-sm);
}

code,
kbd,
samp {
  font-family: var(--iqr-font-mono);
  font-size: 0.925em;
}

code {
  padding: 0.1em 0.4em;
  border-radius: var(--iqr-radius-sm);
  background-color: var(--iqr-color-bg-sunken);
  color: var(--iqr-color-accent-cyan);
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
}

/* --- Links -------------------------------------------------------------- */

a {
  color: var(--iqr-color-text-link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

a:hover {
  color: var(--iqr-color-text-primary);
}

/* --- Foco --------------------------------------------------------------- */
/* Um anel só, definido uma vez, visível em qualquer superfície.
   Nunca escreva outline: none sem colocar outra coisa no lugar. */

:focus-visible {
  outline: var(--iqr-border-width-focus) solid var(--iqr-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--iqr-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Seleção ------------------------------------------------------------ */

::selection {
  background-color: var(--iqr-color-brand-strong);
  color: var(--iqr-color-action-primary-fg);
}

/* --- Barra de rolagem --------------------------------------------------- */
/* Fina e da cor da interface. Só nos navegadores que aceitam. */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--iqr-color-border-default) transparent;
}

/* --- Movimento ---------------------------------------------------------- */
/* A política de redução de movimento é declarada uma vez, aqui, e vale para
   o projeto inteiro. Nenhum componente precisa repetir esta regra. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .iqr-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== design-system\css\03-layout.css ===== */
/* ==========================================================================
   03 — Layout
   Primitivos de composição. Não têm cor nem tipografia — só espaço.
   ========================================================================== */

/* --- Container ---------------------------------------------------------- */

.iqr-container {
  inline-size: 100%;
  max-inline-size: var(--iqr-container-base);
  margin-inline: auto;
  padding-inline: var(--iqr-container-gutter);
}

.iqr-container--narrow {
  max-inline-size: var(--iqr-container-narrow);
}

.iqr-container--wide {
  max-inline-size: var(--iqr-container-wide);
}

/* --- Seção -------------------------------------------------------------- */
/* Respiro menor do que o da landing: a plataforma é lida todo dia, e o
   espaço vazio entre blocos custa rolagem. */

.iqr-section {
  padding-block: var(--iqr-space-12);
}

@media (min-width: 48rem) {
  .iqr-section {
    padding-block: var(--iqr-space-16);
  }
}

.iqr-section--tight {
  padding-block: var(--iqr-space-8);
}

@media (min-width: 48rem) {
  .iqr-section--tight {
    padding-block: var(--iqr-space-10);
  }
}

.iqr-section--surface {
  background-color: var(--iqr-color-bg-surface);
  border-block: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-section--sunken {
  background-color: var(--iqr-color-bg-sunken);
}

/* --- Stack: ritmo vertical entre irmãos --------------------------------- */

.iqr-stack {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-stack--1 { gap: var(--iqr-space-1); }
.iqr-stack--2 { gap: var(--iqr-space-2); }
.iqr-stack--3 { gap: var(--iqr-space-3); }
.iqr-stack--4 { gap: var(--iqr-space-4); }
.iqr-stack--5 { gap: var(--iqr-space-5); }
.iqr-stack--6 { gap: var(--iqr-space-6); }
.iqr-stack--8 { gap: var(--iqr-space-8); }
.iqr-stack--10 { gap: var(--iqr-space-10); }
.iqr-stack--12 { gap: var(--iqr-space-12); }

/* --- Cluster: itens lado a lado que quebram linha ----------------------- */

.iqr-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
}

.iqr-cluster--1 { gap: var(--iqr-space-1); }
.iqr-cluster--2 { gap: var(--iqr-space-2); }
.iqr-cluster--3 { gap: var(--iqr-space-3); }
.iqr-cluster--4 { gap: var(--iqr-space-4); }
.iqr-cluster--6 { gap: var(--iqr-space-6); }
.iqr-cluster--between { justify-content: space-between; }
.iqr-cluster--center { justify-content: center; }
.iqr-cluster--end { justify-content: flex-end; }
.iqr-cluster--start { align-items: flex-start; }

/* --- Grade responsiva sem media query ----------------------------------- */

.iqr-grid {
  display: grid;
  gap: var(--iqr-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.iqr-grid--gap-6 { gap: var(--iqr-space-6); }
.iqr-grid--min-13 { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
.iqr-grid--min-18 { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.iqr-grid--min-20 { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }

/* Grades de número fixo, que empilham no celular. */
.iqr-grid--2,
.iqr-grid--3,
.iqr-grid--4 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .iqr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iqr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iqr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .iqr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .iqr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Duas colunas assimétricas a partir do tablet. */
.iqr-split {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: center;
}

@media (min-width: 56rem) {
  .iqr-split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--iqr-space-16);
  }

  .iqr-split--even {
    grid-template-columns: 1fr 1fr;
  }
}

/* Coluna principal + lateral fixa. A lateral vem DEPOIS no HTML (leitor de
   tela ouve o conteúdo primeiro) e o grid a coloca à direita no desktop. */
.iqr-com-lateral {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: start;
}

.iqr-com-lateral > * {
  min-inline-size: 0;
}

@media (min-width: 64rem) {
  .iqr-com-lateral {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--iqr-space-10);
  }

  .iqr-com-lateral--larga {
    grid-template-columns: minmax(0, 1fr) 24rem;
  }

  .iqr-com-lateral__fixa {
    position: sticky;
    inset-block-start: calc(4.25rem + var(--iqr-space-5));
  }
}

/* --- Divisor ------------------------------------------------------------ */

.iqr-divider {
  block-size: 1px;
  border: 0;
  background-color: var(--iqr-color-border-subtle);
}

/* Tudo que é filho de grid ou flex precisa poder encolher. Sem isto, uma
   palavra longa ou uma tabela larga fazem a página rolar de lado. */
.iqr-stack > *,
.iqr-grid > * {
  min-inline-size: 0;
}

/* ===== design-system\css\04-typography.css ===== */
/* ==========================================================================
   04 — Tipografia aplicada
   Classes de papel textual. O elemento HTML continua sendo escolhido pela
   semântica; estas classes só mudam a aparência.
   ========================================================================== */

/* --- Rótulo: o "eyebrow" acima de um título ----------------------------- */

.iqr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-widest);
  text-transform: uppercase;
  color: var(--iqr-color-accent-cyan);
}

.iqr-eyebrow::before {
  content: "";
  inline-size: var(--iqr-space-5);
  block-size: 2px;
  border-radius: var(--iqr-radius-full);
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-eyebrow--sem-traco::before {
  display: none;
}

/* --- Títulos fora da hierarquia de heading ------------------------------ */

.iqr-display {
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-tight);
  letter-spacing: var(--iqr-tracking-tighter);
  color: var(--iqr-color-text-primary);
  text-wrap: balance;
}

.iqr-display--xl { font-size: var(--iqr-size-display-xl); }
.iqr-display--lg { font-size: var(--iqr-size-display-lg); }
.iqr-display--md { font-size: var(--iqr-size-display-md); font-weight: var(--iqr-weight-semibold); }
.iqr-display--sm { font-size: var(--iqr-size-display-sm); font-weight: var(--iqr-weight-semibold); }

/* Trecho destacado dentro de um título: recebe o gradiente da marca em versão
   clara. Os três tons passam de 4,5:1 sobre o navy, o que é o que permite
   texto sobre gradiente aqui — e só aqui, em título grande. */
:is(h1, h2, h3, h4) em,
.iqr-display em,
.iqr-highlight {
  font-style: normal;
  color: var(--iqr-color-brand-contrast);
  background-image: var(--iqr-brand-gradient-texto);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Texto -------------------------------------------------------------- */

.iqr-lead {
  font-size: var(--iqr-size-md);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-text-secondary);
  max-inline-size: var(--iqr-measure-base);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .iqr-lead {
    font-size: var(--iqr-size-lg);
  }
}

.iqr-text-muted {
  color: var(--iqr-color-text-muted);
  font-size: var(--iqr-size-base);
}

.iqr-measure { max-inline-size: var(--iqr-measure-base); }
.iqr-measure--narrow { max-inline-size: var(--iqr-measure-narrow); }
.iqr-measure--wide { max-inline-size: var(--iqr-measure-wide); }

/* --- Prosa: bloco de texto corrido com ritmo próprio -------------------- */

.iqr-prose {
  max-inline-size: var(--iqr-measure-base);
  color: var(--iqr-color-text-secondary);
  line-height: var(--iqr-leading-relaxed);
}

.iqr-prose > * + * {
  margin-block-start: var(--iqr-space-4);
}

.iqr-prose > * + :is(h2, h3, h4) {
  margin-block-start: var(--iqr-space-8);
}

/* --- Cabeçalho de página ------------------------------------------------ */
/* O padrão de toda tela interna: rótulo, título, uma frase de apoio e as
   ações à direita. Empilha no celular. */

.iqr-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--iqr-space-4) var(--iqr-space-6);
}

.iqr-pagina__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  min-inline-size: 0;
  flex: 1 1 24rem;
}

.iqr-pagina__texto h1 {
  font-size: var(--iqr-size-display-sm);
}

@media (min-width: 48rem) {
  .iqr-pagina__texto h1 {
    font-size: var(--iqr-size-display-md);
  }
}

.iqr-pagina__apoio {
  margin: 0;
  max-inline-size: var(--iqr-measure-base);
  color: var(--iqr-color-text-muted);
}

.iqr-pagina__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-3);
}

/* Cabeçalho de seção dentro de uma página: título à esquerda, atalho à direita. */
.iqr-secao-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--iqr-space-2) var(--iqr-space-4);
}

.iqr-secao-cabeca h2 {
  margin: 0;
}

.iqr-secao-cabeca__apoio {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* --- Lista com marcador próprio ----------------------------------------- */

.iqr-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-list > li {
  position: relative;
  padding-inline-start: var(--iqr-space-8);
}

.iqr-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: var(--iqr-space-4);
  block-size: 2px;
  background-image: var(--iqr-brand-gradient-tri);
  border-radius: var(--iqr-radius-full);
}

/* Variante com marca de conferido, para listas de "o que você recebe". */
.iqr-list--check > li::before {
  inset-block-start: 0.3em;
  inline-size: 1.15em;
  block-size: 1.15em;
  background: none;
  border: 0;
  /* Ícone embutido. ATENÇÃO: a cor é um hex fixo dentro de um data-URI — se
     brand.color.ciano.400 mudar, este valor precisa mudar junto. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- Migalhas de pão ---------------------------------------------------- */

.iqr-migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-migalhas a {
  color: inherit;
  text-decoration: none;
}

.iqr-migalhas a:hover {
  color: var(--iqr-color-text-primary);
  text-decoration: underline;
}

/* Texto de 12px é um alvo de 21px de altura: acerta com o mouse e erra com o
   dedo. Onde o apontador é grosso, cada migalha vira uma área de 44px sem
   mudar a aparência do texto. */
@media (pointer: coarse) {
  .iqr-migalhas a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
}

.iqr-migalhas [aria-current="page"] {
  color: var(--iqr-color-text-secondary);
}

.iqr-migalhas__sep {
  color: var(--iqr-color-border-interactive);
}

/* --- Números ------------------------------------------------------------ */

.iqr-tabular {
  font-variant-numeric: tabular-nums;
}

/* Cabeçalho de ficha de pessoa: avatar à esquerda do texto. */
.iqr-pagina--pessoa {
  align-items: flex-start;
}

.iqr-pagina--pessoa > .iqr-avatar {
  flex: none;
  margin-block-start: var(--iqr-space-1);
}

/* ===== design-system\css\05-button.css ===== */
/* ==========================================================================
   05 — Botão
   Alvo mínimo de 44px de altura em todas as variantes, exceto --sm, que é
   para uso em barra de ferramentas com espaçamento próprio.
   ========================================================================== */

.iqr-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iqr-space-2);

  min-block-size: 2.75rem;
  padding-inline: var(--iqr-space-5);
  padding-block: var(--iqr-space-2);

  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  border: var(--iqr-border-width-hairline) solid transparent;
  border-radius: var(--iqr-radius-md);
  cursor: pointer;

  transition:
    background-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    color var(--iqr-duration-fast) var(--iqr-easing-standard),
    transform var(--iqr-duration-instant) var(--iqr-easing-standard),
    box-shadow var(--iqr-duration-fast) var(--iqr-easing-standard),
    filter var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-button:active {
  transform: translateY(1px);
}

.iqr-button[aria-disabled="true"],
.iqr-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* --- Primário: o gradiente da marca ------------------------------------- */

.iqr-button--primary {
  background-image: var(--iqr-brand-gradient-acao);
  background-color: var(--iqr-color-action-primary-bg);
  color: var(--iqr-color-action-primary-fg);
  box-shadow: var(--iqr-shadow-brand);
}

.iqr-button--primary:hover {
  color: var(--iqr-color-action-primary-fg);
  filter: brightness(1.08);
  box-shadow: var(--iqr-shadow-glow);
}

.iqr-button--primary:active {
  filter: brightness(0.96);
}

/* --- Secundário: vidro com contorno ------------------------------------- */

.iqr-button--secondary {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 6%, transparent);
  color: var(--iqr-color-text-primary);
  border-color: var(--iqr-color-border-interactive);
}

.iqr-button--secondary:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 11%, transparent);
  border-color: var(--iqr-color-brand-contrast);
  color: var(--iqr-color-text-primary);
}

/* --- Fantasma ----------------------------------------------------------- */

.iqr-button--ghost {
  background-color: transparent;
  color: var(--iqr-color-text-secondary);
  padding-inline: var(--iqr-space-4);
}

.iqr-button--ghost:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 8%, transparent);
  color: var(--iqr-color-text-primary);
}

/* --- Perigo: só para o que apaga ---------------------------------------- */

.iqr-button--danger {
  background-color: transparent;
  color: var(--iqr-color-feedback-danger);
  border-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 45%, transparent);
}

.iqr-button--danger:hover {
  background-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 12%, transparent);
  border-color: var(--iqr-color-feedback-danger);
  color: var(--iqr-color-feedback-danger);
}

/* --- Tamanhos ----------------------------------------------------------- */

.iqr-button--lg {
  min-block-size: 3.25rem;
  padding-inline: var(--iqr-space-8);
  font-size: var(--iqr-size-md);
}

.iqr-button--sm {
  min-block-size: 2.25rem;
  padding-inline: var(--iqr-space-4);
  font-size: var(--iqr-size-sm);
}

/* 36px acerta com o ponteiro do mouse e erra com o dedo. Onde o apontador é
   grosso — celular, tablet, tela sensível ao toque —, o botão pequeno sobe
   para os 44px que a regra de acessibilidade do projeto exige. A consulta é
   por tipo de apontador, e não por largura, porque quem usa toque num monitor
   grande tem o mesmo dedo. */
@media (pointer: coarse) {
  .iqr-button--sm {
    min-block-size: 2.75rem;
  }
}

.iqr-button--block {
  display: flex;
  inline-size: 100%;
}

/* No mobile, um CTA de largura total acerta mais o dedo do que um centralizado. */
@media (max-width: 30rem) {
  .iqr-button--block-mobile {
    display: flex;
    inline-size: 100%;
  }
}

.iqr-button__icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
}

/* --- Botão de ícone ----------------------------------------------------- */
/* Quadrado, com aria-label no HTML. É o "↑ ↓ ⋯ ✕" de toda lista do painel. */

.iqr-botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  font-family: inherit;
  font-size: var(--iqr-size-base);
  line-height: 1;
  color: var(--iqr-color-text-secondary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 5%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  cursor: pointer;
  transition:
    color var(--iqr-duration-fast) var(--iqr-easing-standard),
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-botao-icone svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.iqr-botao-icone:hover {
  color: var(--iqr-color-text-primary);
  border-color: var(--iqr-color-border-interactive);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 10%, transparent);
}

.iqr-botao-icone--perigo:hover {
  color: var(--iqr-color-feedback-danger);
  border-color: var(--iqr-color-feedback-danger);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 12%, transparent);
}

.iqr-botao-icone--sm {
  inline-size: 1.85rem;
  block-size: 1.85rem;
  font-size: var(--iqr-size-sm);
}

/* --- Grupo de botões ---------------------------------------------------- */

.iqr-botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
}

.iqr-botoes form {
  margin: 0;
}

/* ===== design-system\css\06-card.css ===== */
/* ==========================================================================
   06 — Card e painel
   ==========================================================================
   Um card é uma superfície um passo acima da página: fundo elevado, um fio
   de luz no topo, borda discreta. O destaque vem de uma borda em gradiente
   translúcido — nunca de brilho forte. */

.iqr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);

  padding: var(--iqr-space-6);
  background-color: var(--iqr-color-bg-raised);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent) 0%,
    transparent 40%
  );
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-card--lg {
  padding: var(--iqr-space-8);
  border-radius: var(--iqr-radius-xl);
  gap: var(--iqr-space-4);
}

.iqr-card--compacto {
  padding: var(--iqr-space-4) var(--iqr-space-5);
  gap: var(--iqr-space-2);
}

/* Só use --interactive quando o card inteiro for um link ou um botão. */
.iqr-card--interactive {
  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    transform var(--iqr-duration-fast) var(--iqr-easing-standard),
    box-shadow var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-card--interactive:hover {
  border-color: var(--iqr-color-border-interactive);
  transform: translateY(-2px);
  box-shadow: var(--iqr-shadow-md);
}

/* Borda em gradiente: um pseudo-elemento com a máscara recortando o miolo,
   para o gradiente ficar só no contorno de 1px. */
.iqr-card--featured,
.iqr-card--gradiente {
  border-color: transparent;
  background-image: var(--iqr-brand-gradient-superficie);
  box-shadow: var(--iqr-shadow-glow);
}

.iqr-card--featured::before,
.iqr-card--gradiente::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--iqr-brand-gradient-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Card com faixa colorida no topo: para o card "continuar" e destaques. */
.iqr-card--faixa {
  overflow: hidden;
}

.iqr-card--faixa::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background-image: var(--iqr-brand-gradient-tri);
}

/* Card mais escuro, para agrupar dentro de outro card ou de uma seção clara. */
.iqr-card--recuado {
  background-color: var(--iqr-color-bg-surface);
  background-image: none;
  box-shadow: none;
}

/* O card é um flex column: sem isto, um badge filho estica a largura toda. */
.iqr-card > .iqr-badge {
  align-self: flex-start;
}

.iqr-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: var(--iqr-space-1);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-brand-contrast);
}

.iqr-card__icon svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.iqr-card__icon--cyan {
  background-color: var(--iqr-color-accent-cyan-soft);
  color: var(--iqr-color-accent-cyan);
}

.iqr-card__title {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-text-primary);
}

.iqr-card__body {
  font-size: var(--iqr-size-base);
  color: var(--iqr-color-text-muted);
  margin: 0;
}

/* Cabeçalho de card: título à esquerda, ação à direita. */
.iqr-card__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-2) var(--iqr-space-4);
}

.iqr-card__cabeca .iqr-card__title {
  margin: 0;
}

/* Rodapé de card: separado por um fio, encostado no fim. */
.iqr-card__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  margin-block-start: auto;
  padding-block-start: var(--iqr-space-4);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

/* --- Número de módulo --------------------------------------------------- */

.iqr-card__index {
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  color: var(--iqr-color-accent-cyan);
}

/* --- Bloco de número (estatística) -------------------------------------- */
/* Um número grande com rótulo. Serve para o painel do aluno e o do
   administrador. Nunca decorativo: todo número aqui sai de uma consulta. */

.iqr-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--iqr-space-3);
}

@media (min-width: 48rem) {
  .iqr-numeros {
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: var(--iqr-space-4);
  }
}

.iqr-numero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
  overflow: hidden;
}

.iqr-numero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-numero strong {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-text-primary);
  font-variant-numeric: tabular-nums;
}

.iqr-numero span {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-numero__icone {
  position: absolute;
  inset-block-start: var(--iqr-space-4);
  inset-inline-end: var(--iqr-space-4);
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--iqr-color-accent-cyan);
  opacity: 0.8;
}

.iqr-numero--cyan::before { background-image: linear-gradient(180deg, var(--iqr-color-accent-cyan), var(--iqr-color-accent-cyan-strong)); }
.iqr-numero--sucesso::before { background-image: linear-gradient(180deg, var(--iqr-color-feedback-success), var(--iqr-color-feedback-success)); }
.iqr-numero--aviso::before { background-image: linear-gradient(180deg, var(--iqr-color-feedback-warning), var(--iqr-color-feedback-warning)); }

/* Número que também é filtro: o card inteiro leva a algum lugar. */
a.iqr-numero,
.iqr-numero--link {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard), transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

a.iqr-numero:hover,
.iqr-numero--link:hover {
  border-color: var(--iqr-color-border-interactive);
  transform: translateY(-1px);
}

/* ===== design-system\css\07-badge.css ===== */
/* ==========================================================================
   07 — Badge, chip e pílula
   ==========================================================================
   Um badge classifica; um chip filtra; uma situação diz o estado. Todos
   dizem por escrito o que a cor indica — a cor sozinha nunca é a
   informação. */

.iqr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding-inline: var(--iqr-space-3);
  padding-block: var(--iqr-space-1);
  min-block-size: 1.5rem;

  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  border-radius: var(--iqr-radius-full);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, transparent);
  color: var(--iqr-color-text-secondary);
}

.iqr-badge svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
}

.iqr-badge--brand {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 40%, transparent);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-brand-contrast);
}

.iqr-badge--accent {
  border-color: transparent;
  background-color: var(--iqr-color-accent-strong);
  color: var(--iqr-color-text-on-accent);
}

.iqr-badge--azul {
  border-color: color-mix(in srgb, var(--iqr-color-accent-default) 40%, transparent);
  background-color: color-mix(in srgb, var(--iqr-color-accent-default) 14%, transparent);
  color: var(--iqr-color-accent-default);
}

.iqr-badge--cyan {
  border-color: color-mix(in srgb, var(--iqr-color-accent-cyan) 40%, transparent);
  background-color: var(--iqr-color-accent-cyan-soft);
  color: var(--iqr-color-accent-cyan);
}

.iqr-badge--sucesso {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-success) 40%, transparent);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 14%, transparent);
  color: var(--iqr-color-feedback-success);
}

.iqr-badge--aviso {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 40%, transparent);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 14%, transparent);
  color: var(--iqr-color-feedback-warning);
}

.iqr-badge--erro {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 40%, transparent);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 14%, transparent);
  color: var(--iqr-color-feedback-danger);
}

.iqr-badge--neutro {
  color: var(--iqr-color-text-muted);
}

/* Badge com gradiente: para o rótulo do produto principal e destaques. */
.iqr-badge--gradiente {
  border-color: transparent;
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
}

/* --- Nível ---------------------------------------------------------------
   Iniciante, intermediário e avançado distinguidos DENTRO da paleta: ciano,
   azul e roxo. Sempre com o rótulo por escrito. */

.iqr-nivel {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding-inline: var(--iqr-space-3);
  padding-block: var(--iqr-space-1);
  min-block-size: 1.5rem;

  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  border-radius: var(--iqr-radius-full);
  border: var(--iqr-border-width-hairline) solid transparent;
}

.iqr-nivel::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--iqr-radius-full);
  background-color: currentColor;
  flex: none;
}

.iqr-nivel--iniciante {
  color: var(--iqr-color-accent-cyan);
  background-color: var(--iqr-color-accent-cyan-soft);
}

.iqr-nivel--intermediario {
  color: var(--iqr-color-accent-default);
  background-color: color-mix(in srgb, var(--iqr-color-accent-default) 14%, transparent);
}

.iqr-nivel--avancado {
  color: var(--iqr-color-brand-contrast);
  background-color: var(--iqr-color-brand-soft);
}

/* --- Tipo de conteúdo ---------------------------------------------------- */

.iqr-tipo {
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

/* --- Situação: forma E texto -------------------------------------------- */

.iqr-situacao {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding-inline: var(--iqr-space-2);
  padding-block: 0.1rem;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-medium);
  white-space: nowrap;
  border-radius: var(--iqr-radius-sm);
}

/* Selo comprido ("Pronto para leitura · 40 páginas · 1400px") não pode empurrar
   a página para o lado no celular: ali ele quebra em linhas. */
@media (max-width: 40rem) {
  .iqr-situacao {
    white-space: normal;
    max-inline-size: 100%;
  }
}

.iqr-situacao::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  flex: none;
  background-color: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.iqr-situacao--publicado,
.iqr-situacao--ativo { color: var(--iqr-color-feedback-success); }

.iqr-situacao--rascunho,
.iqr-situacao--pendente { color: var(--iqr-color-feedback-warning); }

.iqr-situacao--arquivado,
.iqr-situacao--encerrado { color: var(--iqr-color-text-muted); }

.iqr-situacao--erro { color: var(--iqr-color-feedback-danger); }

/* --- Nota de transparência ---------------------------------------------- */

.iqr-disclaimer {
  display: flex;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-sunken);
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-text-muted);
}

.iqr-disclaimer svg {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 0.1em;
  color: var(--iqr-color-accent-cyan);
}

/* --- Chip de filtro ------------------------------------------------------ */

.iqr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  min-block-size: 2.25rem;
  padding: var(--iqr-space-2) var(--iqr-space-4);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-full);
  cursor: pointer;
  transition:
    color var(--iqr-duration-fast) var(--iqr-easing-standard),
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-chip:hover {
  color: var(--iqr-color-text-primary);
  border-color: var(--iqr-color-border-interactive);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 8%, transparent);
}

/* O filtro ativo tem cor E borda E fundo: nunca só cor. */
.iqr-chip--ativo {
  color: var(--iqr-color-text-primary);
  background-color: var(--iqr-color-brand-soft);
  border-color: var(--iqr-color-brand-contrast);
}

.iqr-chip__n {
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Avatar textual: a inicial do nome num círculo. */
.iqr-avatar {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border-radius: var(--iqr-radius-full);
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  line-height: 1;
}

.iqr-avatar--sm {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: var(--iqr-size-sm);
}

/* Avatar grande, para o cabeçalho da ficha do aluno. */
.iqr-avatar--lg {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  font-size: var(--iqr-size-xl);
}

/* ===== design-system\css\08-accordion.css ===== */
/* ==========================================================================
   08 — Acordeão
   Construído sobre <details>/<summary>. Abre e fecha, é navegável por
   teclado e é anunciado por leitor de tela sem uma linha de JavaScript.
   ========================================================================== */

.iqr-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-accordion__item {
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  overflow: hidden;
  box-shadow: var(--iqr-shadow-card);
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-accordion__item[open] {
  border-color: var(--iqr-color-border-interactive);
}

.iqr-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-4);

  padding: var(--iqr-space-4) var(--iqr-space-5);
  min-block-size: 3.25rem;

  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-text-primary);

  cursor: pointer;
  list-style: none;
  transition: background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-accordion__trigger::-webkit-details-marker {
  display: none;
}

.iqr-accordion__trigger::marker {
  content: "";
}

.iqr-accordion__trigger:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, transparent);
}

/* Sinal de abrir/fechar: um "mais" que vira "menos". */
.iqr-accordion__sign {
  position: relative;
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--iqr-color-accent-cyan);
}

.iqr-accordion__sign::before,
.iqr-accordion__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background-color: currentColor;
  border-radius: var(--iqr-radius-full);
  transition: transform var(--iqr-duration-base) var(--iqr-easing-standard);
}

.iqr-accordion__sign::before {
  inline-size: 1.25rem;
  block-size: 2px;
  transform: translate(-50%, -50%);
}

.iqr-accordion__sign::after {
  inline-size: 2px;
  block-size: 1.25rem;
  transform: translate(-50%, -50%);
}

.iqr-accordion__item[open] .iqr-accordion__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.iqr-accordion__panel {
  padding: 0 var(--iqr-space-5) var(--iqr-space-5);
  font-size: var(--iqr-size-base);
  color: var(--iqr-color-text-muted);
  max-inline-size: var(--iqr-measure-wide);
}

.iqr-accordion__panel > * + * {
  margin-block-start: var(--iqr-space-3);
}

/* ===== design-system\css\09-form.css ===== */
/* ==========================================================================
   09 — Formulário
   ==========================================================================
   Campo escuro sobre superfície, borda que acende no foco, rótulo pequeno e
   firme. O mesmo campo serve o site e o painel. */

.iqr-field {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  min-inline-size: 0;
}

.iqr-label {
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-primary);
}

.iqr-label__opcional {
  font-weight: var(--iqr-weight-regular);
  color: var(--iqr-color-text-muted);
}

.iqr-input,
.iqr-textarea,
.iqr-select {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-inline: var(--iqr-space-4);
  padding-block: var(--iqr-space-2);

  font-size: var(--iqr-size-base);
  color: var(--iqr-color-text-primary);

  background-color: var(--iqr-color-bg-sunken);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  border-radius: var(--iqr-radius-md);

  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    box-shadow var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-textarea {
  min-block-size: 7rem;
  resize: vertical;
  line-height: var(--iqr-leading-normal);
}

.iqr-textarea--alta {
  min-block-size: 18rem;
}

/* Texto estruturado (importação em lote): monoespaçado, sem quebra automática
   de palavra, para as linhas do modelo ficarem onde o administrador as vê. */
.iqr-textarea--mono {
  font-family: var(--iqr-font-mono);
  font-size: var(--iqr-size-sm);
  white-space: pre;
  overflow-x: auto;
}

.iqr-input::placeholder,
.iqr-textarea::placeholder {
  color: var(--iqr-color-text-muted);
  opacity: 1;
}

.iqr-input:hover,
.iqr-textarea:hover,
.iqr-select:hover {
  border-color: var(--iqr-color-border-focus);
}

.iqr-input:focus-visible,
.iqr-textarea:focus-visible,
.iqr-select:focus-visible {
  outline: none;
  border-color: var(--iqr-color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--iqr-color-border-focus) 30%, transparent);
}

.iqr-input[aria-invalid="true"],
.iqr-textarea[aria-invalid="true"],
.iqr-input.input-validation-error,
.iqr-textarea.input-validation-error {
  border-color: var(--iqr-color-feedback-danger);
}

.iqr-input:disabled,
.iqr-textarea:disabled,
.iqr-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.iqr-select--sm,
.iqr-input--sm {
  min-block-size: 2.25rem;
  font-size: var(--iqr-size-sm);
  padding-inline: var(--iqr-space-3);
}

/* Campo com prefixo ou ícone dentro. */
.iqr-input-grupo {
  position: relative;
  display: flex;
  align-items: center;
}

.iqr-input-grupo > svg {
  position: absolute;
  inset-inline-start: var(--iqr-space-4);
  inline-size: 1.1rem;
  block-size: 1.1rem;
  color: var(--iqr-color-text-muted);
  pointer-events: none;
}

.iqr-input-grupo > .iqr-input {
  padding-inline-start: calc(var(--iqr-space-4) * 2 + 1.1rem);
}

/* Sufixo fixo à direita ("%", "R$", "min"). */
.iqr-input-grupo__sufixo {
  position: absolute;
  inset-inline-end: var(--iqr-space-4);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  pointer-events: none;
}

.iqr-input-grupo:not(:has(> svg)) > .iqr-input {
  padding-inline-start: var(--iqr-space-4);
}

.iqr-input-grupo:has(> .iqr-input-grupo__sufixo) > .iqr-input {
  padding-inline-end: var(--iqr-space-10);
}

/* Select com a seta desenhada, para não depender da do sistema. */
.iqr-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--iqr-color-text-muted) 50%),
                    linear-gradient(135deg, var(--iqr-color-text-muted) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-inline-end: var(--iqr-space-10);
  cursor: pointer;
}

/* A dica e o erro ficam ligados ao campo por aria-describedby no HTML. */
.iqr-field__hint {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-field__error {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-feedback-danger);
}

.iqr-field__error:empty {
  display: none;
}

.field-validation-error {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-feedback-danger);
}

/* --- Caixa de seleção e rádio ------------------------------------------ */

.iqr-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--iqr-space-3);
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-text-secondary);
  cursor: pointer;
}

.iqr-checkbox input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 0.15rem;
  flex: none;
  accent-color: var(--iqr-color-brand-default);
  cursor: pointer;
}

.iqr-checkbox strong {
  display: block;
  color: var(--iqr-color-text-primary);
}

/* --- Interruptor -------------------------------------------------------- */
/* Um checkbox desenhado como chave. O input continua sendo um checkbox de
   verdade: teclado, leitor de tela e envio do formulário funcionam sozinhos. */

.iqr-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
  cursor: pointer;
}

.iqr-switch__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-switch__texto strong {
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-medium);
}

.iqr-switch input {
  appearance: none;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  margin: 0;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-border-default);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  position: relative;
  cursor: pointer;
  transition: background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-switch input::before {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-text-primary);
  transition: transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-switch input:checked {
  background-image: var(--iqr-brand-gradient-acao);
  border-color: transparent;
}

.iqr-switch input:checked::before {
  transform: translateX(1.2rem);
  background-color: var(--iqr-color-text-on-brand);
}

/* --- Opção em card ------------------------------------------------------ */
/* Rádio grande, para escolhas de duas ou três alternativas ("arquivo" ou
   "conteúdo existente"). O card inteiro é o rótulo. */

.iqr-opcao {
  display: flex;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
  cursor: pointer;
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-opcao:hover {
  border-color: var(--iqr-color-border-interactive);
}

.iqr-opcao:has(input:checked) {
  border-color: var(--iqr-color-brand-contrast);
  background-color: var(--iqr-color-brand-soft);
}

.iqr-opcao input {
  margin-block-start: 0.2rem;
  accent-color: var(--iqr-color-brand-default);
  flex: none;
}

.iqr-opcao__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-opcao__texto strong {
  color: var(--iqr-color-text-primary);
}

/* O campo que pertence a uma opção fica recuado sob ela. */
.iqr-recuo-opcao {
  padding-inline-start: var(--iqr-space-8);
}

@media (max-width: 47.99rem) {
  .iqr-recuo-opcao { padding-inline-start: var(--iqr-space-4); }
}

/* --- Arquivo e área de soltar ------------------------------------------- */

.iqr-input--arquivo {
  font-size: var(--iqr-size-sm);
  padding-block: var(--iqr-space-2);
}

.iqr-input--arquivo::file-selector-button {
  margin-inline-end: var(--iqr-space-3);
  padding: var(--iqr-space-1) var(--iqr-space-3);
  font: inherit;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 8%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  border-radius: var(--iqr-radius-sm);
  cursor: pointer;
}

/* A área de soltar envolve o <input type="file"> real: sem JavaScript ela é
   só uma moldura bonita em volta do campo, que continua funcionando. Com
   script, o arquivo solto em cima entra no input. */
.iqr-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-6) var(--iqr-space-5);
  text-align: center;
  border: var(--iqr-border-width-thick) dashed var(--iqr-color-border-interactive);
  border-radius: var(--iqr-radius-lg);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-dropzone:hover,
.iqr-dropzone--sobre {
  border-color: var(--iqr-color-brand-contrast);
  background-color: var(--iqr-color-brand-soft);
}

.iqr-dropzone__icone {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-brand-contrast);
}

.iqr-dropzone__icone svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}

.iqr-dropzone__texto {
  margin: 0;
  font-size: var(--iqr-size-base);
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-medium);
}

.iqr-dropzone__texto span {
  color: var(--iqr-color-brand-contrast);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.iqr-dropzone__dica {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* O input real cobre a área inteira, invisível: clicar em qualquer ponto
   abre o seletor, e o teclado continua chegando nele. */
.iqr-dropzone__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.iqr-dropzone__input:focus-visible ~ .iqr-dropzone__texto {
  outline: var(--iqr-border-width-focus) solid var(--iqr-color-border-focus);
  outline-offset: 4px;
  border-radius: var(--iqr-radius-sm);
}

/* O nome do arquivo escolhido, mostrado pelo script. */
.iqr-dropzone__escolhido {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-accent-cyan);
  font-weight: var(--iqr-weight-medium);
  overflow-wrap: anywhere;
}

.iqr-dropzone__escolhido:empty {
  display: none;
}

/* --- Agrupamentos ------------------------------------------------------- */

/* Grade de campos: auto-FIT, para um campo sozinho ocupar a linha. */
.iqr-admin-grade,
.iqr-campos {
  display: grid;
  gap: var(--iqr-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.iqr-campos--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

/* Campo + botão na mesma linha, empilhando no celular. */
.iqr-admin-form-linha,
.iqr-form-linha {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--iqr-space-3);
}

.iqr-admin-form-linha .iqr-field,
.iqr-form-linha .iqr-field {
  flex: 1;
  min-inline-size: 12rem;
}

/* Fieldset como card: o legend vira o título do bloco. */
fieldset.iqr-card {
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  min-inline-size: 0;
  margin: 0;
}

fieldset.iqr-card > legend {
  padding-inline: var(--iqr-space-2);
  margin-inline-start: calc(var(--iqr-space-2) * -1);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

fieldset.iqr-card > legend + * {
  margin-block-start: var(--iqr-space-2);
}

/* Barra de ações fixa no fim de um formulário longo. */
.iqr-form-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
  padding-block-start: var(--iqr-space-4);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-form-acoes__direita {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-3);
}

/* Contador de caracteres, quando o script o preenche. */
.iqr-field__contador {
  margin: 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Prefixo fixo à esquerda ("area/"), no mesmo grupo do campo. */
.iqr-input-grupo__prefixo {
  position: absolute;
  inset-inline-start: var(--iqr-space-4);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  pointer-events: none;
  max-inline-size: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iqr-input-grupo:has(> .iqr-input-grupo__prefixo) > .iqr-input {
  padding-inline-start: calc(var(--iqr-space-4) + 40%);
}

/* Larguras nomeadas de campo, no lugar de estilo inline página a página.
   Num .iqr-form-linha (flex) valem como base; numa pilha valem como teto. */
.iqr-field--minimo { max-inline-size: 9rem; }
.iqr-field--curto { max-inline-size: 14rem; }
.iqr-field--medio { max-inline-size: 22rem; }

.iqr-form-linha .iqr-field--minimo { flex: 0 1 9rem; }
.iqr-form-linha .iqr-field--curto { flex: 0 1 14rem; }
.iqr-form-linha .iqr-field--medio { flex: 0 1 22rem; }

/* Busca numa barra: não cresce além do que um termo precisa. */
.iqr-input-grupo--busca { max-inline-size: 20rem; }

/* ===== design-system\css\10-navigation.css ===== */
/* ==========================================================================
   10 — Cabeçalho, rodapé e navegação
   ========================================================================== */

/* --- Pular para o conteúdo ---------------------------------------------- */

.iqr-skip-link {
  position: absolute;
  inset-block-start: var(--iqr-space-3);
  inset-inline-start: var(--iqr-space-3);
  z-index: var(--iqr-layer-toast);

  padding: var(--iqr-space-3) var(--iqr-space-4);
  background-color: var(--iqr-color-action-primary-bg);
  color: var(--iqr-color-action-primary-fg);
  border-radius: var(--iqr-radius-md);
  font-weight: var(--iqr-weight-semibold);
  text-decoration: none;

  transform: translateY(-200%);
  transition: transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--iqr-color-action-primary-fg);
}

/* --- Cabeçalho ---------------------------------------------------------- */

.iqr-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--iqr-layer-sticky);

  background-color: color-mix(in srgb, var(--iqr-color-bg-page) 82%, transparent);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.iqr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-4);
  min-block-size: 4.25rem;
  min-inline-size: 0;
}

.iqr-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-3);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.iqr-logo:hover {
  color: var(--iqr-color-text-primary);
}

.iqr-logo img {
  max-inline-size: 100%;
  block-size: auto;
}

.iqr-logo__mark {
  inline-size: 2.125rem;
  block-size: 2.125rem;
  flex: none;
}

.iqr-logo__soft {
  color: var(--iqr-color-text-muted);
  font-weight: var(--iqr-weight-regular);
}

@media (max-width: 26rem) {
  .iqr-header .iqr-logo > span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Menu principal ----------------------------------------------------- */

.iqr-nav {
  display: none;
  align-items: center;
  gap: var(--iqr-space-1);
}

.iqr-nav a {
  position: relative;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  border-radius: var(--iqr-radius-md);
  white-space: nowrap;
  transition: color var(--iqr-duration-fast) var(--iqr-easing-standard),
              background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-nav a:hover {
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 6%, transparent);
}

/* A página atual leva um traço em gradiente embaixo, além da cor. */
.iqr-nav a[aria-current="page"] {
  color: var(--iqr-color-text-primary);
}

.iqr-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--iqr-space-3);
  inset-block-end: 0.15rem;
  block-size: 2px;
  border-radius: var(--iqr-radius-full);
  background-image: var(--iqr-brand-gradient-tri);
}

/* --- Menu do celular ----------------------------------------------------- */

.iqr-menu-mobile { position: relative; }

.iqr-menu-mobile__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, transparent);
  color: var(--iqr-color-text-primary);
  cursor: pointer;
  list-style: none;
}

.iqr-menu-mobile__botao::-webkit-details-marker { display: none; }
.iqr-menu-mobile__botao::marker { content: ""; }

.iqr-menu-mobile__painel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--iqr-space-2));
  z-index: var(--iqr-layer-modal);

  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  min-inline-size: 15rem;
  padding: var(--iqr-space-2);

  background-color: var(--iqr-color-bg-elevated);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-menu-mobile__painel a,
.iqr-menu-mobile__painel button {
  inline-size: 100%;
  padding: var(--iqr-space-3);
  min-block-size: 2.75rem;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-medium);
  text-align: start;
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--iqr-radius-md);
  cursor: pointer;
}

.iqr-menu-mobile__painel a:hover,
.iqr-menu-mobile__painel button:hover {
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 6%, transparent);
}

.iqr-menu-mobile__grupo {
  padding: var(--iqr-space-2) var(--iqr-space-3) var(--iqr-space-1);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  margin-block-start: var(--iqr-space-1);
}

@media (min-width: 64rem) {
  .iqr-nav { display: flex; }
  .iqr-menu-mobile { display: none; }
}

/* --- Busca no cabeçalho -------------------------------------------------- */

.iqr-busca-header {
  display: none;
  flex: 1;
  max-inline-size: 20rem;
  position: relative;
}

@media (min-width: 48rem) {
  .iqr-busca-header { display: block; }
}

.iqr-busca-header input {
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding-inline: var(--iqr-space-10) var(--iqr-space-4);
  padding-block: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 5%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-full);
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
              background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-busca-header svg {
  position: absolute;
  inset-inline-start: var(--iqr-space-4);
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--iqr-color-text-muted);
  pointer-events: none;
}

.iqr-busca-header input::placeholder { color: var(--iqr-color-text-muted); }
.iqr-busca-header input:hover { border-color: var(--iqr-color-border-interactive); }
.iqr-busca-header input:focus-visible {
  outline: none;
  border-color: var(--iqr-color-border-focus);
  background-color: var(--iqr-color-bg-sunken);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--iqr-color-border-focus) 30%, transparent);
}

/* --- Cabeçalho em telas estreitas ---------------------------------------- */

@media (max-width: 30rem) {
  .iqr-header .iqr-logo img {
    inline-size: 8.5rem;
  }

  .iqr-header__inner > .iqr-cluster > .iqr-button {
    display: none;
  }
}

/* --- Rodapé ------------------------------------------------------------- */

.iqr-footer {
  position: relative;
  margin-block-start: var(--iqr-space-8);
  padding-block: var(--iqr-space-12) var(--iqr-space-8);
  background-color: var(--iqr-color-bg-sunken);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* Um fio em gradiente separa o rodapé da página. */
.iqr-footer::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  block-size: 1px;
  background-image: linear-gradient(90deg, transparent, var(--iqr-color-brand-default) 30%, var(--iqr-color-accent-cyan) 70%, transparent);
  opacity: 0.6;
}

.iqr-footer a {
  color: var(--iqr-color-text-muted);
  text-decoration: none;
}

.iqr-footer a:hover {
  color: var(--iqr-color-text-primary);
  text-decoration: underline;
}

.iqr-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-3) var(--iqr-space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Rodapé em colunas: marca e frase à esquerda, grupos de links à direita. */
.iqr-footer__grade {
  display: grid;
  gap: var(--iqr-space-8);
}

@media (min-width: 48rem) {
  .iqr-footer__grade {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--iqr-space-10);
  }
}

@media (min-width: 64rem) {
  .iqr-footer__grade {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
}

.iqr-footer__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-footer__coluna h2 {
  margin: 0;
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-secondary);
}

.iqr-footer__coluna ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-footer__marca {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  max-inline-size: 34ch;
}

.iqr-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding-block-start: var(--iqr-space-6);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-size: var(--iqr-size-xs);
}

/* ===== design-system\css\11-motion.css ===== */
/* ==========================================================================
   11 — Movimento de entrada
   ==========================================================================

   REGRA QUE NÃO SE NEGOCIA: o estado sem JavaScript é o estado VISÍVEL.

   .iqr-reveal sozinho não esconde nada. A opacidade zero só existe dentro de
   [data-motion="ready"], um atributo que só um script inline no <head>
   consegue colocar. Se o JavaScript estiver desligado, falhar ou for
   bloqueado, o atributo nunca aparece e a página é lida normalmente.

   O script inline ainda arma um timeout de segurança que remove o atributo
   caso o JS principal não chegue a inicializar. Ver sites/ebook/js/motion.js.
   ========================================================================== */

[data-motion="ready"] .iqr-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--iqr-duration-slow) var(--iqr-easing-enter),
    transform var(--iqr-duration-slow) var(--iqr-easing-enter);
}

[data-motion="ready"] .iqr-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Atraso em cascata para itens irmãos. Vai só até 6: além disso a espera
   passa a ser percebida como lentidão, não como elegância. */
[data-motion="ready"] .iqr-reveal--delay-1 { transition-delay: 60ms; }
[data-motion="ready"] .iqr-reveal--delay-2 { transition-delay: 120ms; }
[data-motion="ready"] .iqr-reveal--delay-3 { transition-delay: 180ms; }
[data-motion="ready"] .iqr-reveal--delay-4 { transition-delay: 240ms; }
[data-motion="ready"] .iqr-reveal--delay-5 { transition-delay: 300ms; }
[data-motion="ready"] .iqr-reveal--delay-6 { transition-delay: 360ms; }

/* ===== design-system\css\12-utilities.css ===== */
/* ==========================================================================
   12 — Utilitários
   Use com moderação: um utilitário resolve um ajuste pontual; um padrão que
   se repete vira componente.
   ========================================================================== */

/* --- Acessibilidade ----------------------------------------------------- */

.iqr-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Texto -------------------------------------------------------------- */

.iqr-text-center { text-align: center; }
.iqr-text-end { text-align: end; }
.iqr-text-primary { color: var(--iqr-color-text-primary); }
.iqr-text-accent { color: var(--iqr-color-accent-default); }
.iqr-text-cyan { color: var(--iqr-color-accent-cyan); }
.iqr-text-brand { color: var(--iqr-color-brand-contrast); }
.iqr-text-sucesso { color: var(--iqr-color-feedback-success); }
.iqr-text-aviso { color: var(--iqr-color-feedback-warning); }
.iqr-text-erro { color: var(--iqr-color-feedback-danger); }
.iqr-text-sm { font-size: var(--iqr-size-sm); }
.iqr-text-xs { font-size: var(--iqr-size-xs); }
.iqr-mono {
  font-family: var(--iqr-font-mono);
  letter-spacing: var(--iqr-tracking-wide);
}

.iqr-center-block {
  margin-inline: auto;
}

.iqr-text-center .iqr-lead,
.iqr-text-center .iqr-measure {
  margin-inline: auto;
}

.iqr-truncar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Espaço ------------------------------------------------------------- */

.iqr-mt-2 { margin-block-start: var(--iqr-space-2); }
.iqr-mt-3 { margin-block-start: var(--iqr-space-3); }
.iqr-mt-4 { margin-block-start: var(--iqr-space-4); }
.iqr-mt-6 { margin-block-start: var(--iqr-space-6); }
.iqr-mt-8 { margin-block-start: var(--iqr-space-8); }
.iqr-mt-12 { margin-block-start: var(--iqr-space-12); }
.iqr-mt-auto { margin-block-start: auto; }
.iqr-ml-auto { margin-inline-start: auto; }

/* --- Fundo -------------------------------------------------------------- */

/* Atmosfera do topo de uma seção. Decorativa e à prova de clique. O body já
   traz a atmosfera da página; isto é para um herói que precise de mais. */
.iqr-glow {
  position: absolute;
  inset-block-start: -20%;
  inset-inline: 0;
  block-size: 48rem;
  max-block-size: 110%;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(50% 40% at 30% 20%, rgba(108, 59, 255, 0.22) 0%, rgba(108, 59, 255, 0) 70%),
    radial-gradient(36% 30% at 78% 10%, rgba(34, 211, 238, 0.10) 0%, rgba(34, 211, 238, 0) 70%);
}

.iqr-relative { position: relative; }
.iqr-oculto { display: none !important; }
.iqr-flex-1 { flex: 1; }

/* Só existe com JavaScript: o script tira o hidden. */
[data-so-com-js][hidden] { display: none; }

/* --- Ícone -------------------------------------------------------------- */

/* Ícone em linha de texto: do tamanho da letra, alinhado à base. É a classe
   padrão dos ícones de interface quando o HTML não pede outra. */
.iqr-ico {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -0.15em;
  flex: none;
}


.iqr-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
}

.iqr-icon--sm {
  inline-size: 1rem;
  block-size: 1rem;
}

.iqr-icon--lg {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

/* --- Rolagem horizontal contida ----------------------------------------- */
/* min-inline-size: 0 é o que faz funcionar dentro de flex e grid. */
.iqr-rolagem {
  overflow-x: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Só no celular / só no desktop. */
@media (max-width: 47.99rem) {
  .iqr-so-desktop { display: none !important; }
}

@media (min-width: 48rem) {
  .iqr-so-mobile { display: none !important; }
}

/* ===== design-system\css\13-catalogo.css ===== */
/* ==========================================================================
   13 — Catálogo
   Card de conteúdo, card de categoria, busca, filtros, resultados.
   ========================================================================== */

/* --- Card de conteúdo ----------------------------------------------------
   A unidade do catálogo. Capa em cima, corpo embaixo, metadados no rodapé.
   O card inteiro é clicável; o título é o link. */

.iqr-conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);

  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    transform var(--iqr-duration-fast) var(--iqr-easing-standard),
    box-shadow var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-conteudo:hover {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--iqr-shadow-glow);
}

/* Capa: imagem ou o gradiente da marca com o símbolo. Nunca finge ser foto. */
.iqr-conteudo__capa {
  position: relative;
  aspect-ratio: 16 / 9;
  max-inline-size: 100%;
  background-image: var(--iqr-brand-gradient-tri);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.iqr-conteudo__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--iqr-color-bg-raised) 70%, transparent) 100%);
  pointer-events: none;
}

.iqr-conteudo__capa img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--iqr-duration-slow) var(--iqr-easing-standard);
}

.iqr-conteudo:hover .iqr-conteudo__capa img:not(.iqr-conteudo__capa-marca) {
  transform: scale(1.04);
}

.iqr-conteudo__capa-marca {
  inline-size: 34% !important;
  block-size: auto !important;
  max-inline-size: 4.5rem;
  opacity: 0.92;
  object-fit: contain !important;
}

/* Capa em retrato para eBook: a capa de um livro é alta. */
.iqr-conteudo__capa--retrato {
  aspect-ratio: 16 / 9;
  background-image: var(--iqr-brand-gradient-superficie);
}

/* A capa entra inteira em qualquer proporção. Altura em porcentagem não
   resolve para um item de grade dentro de caixa com aspect-ratio (a imagem
   saía no tamanho natural e uma capa alta, 5:8, era cortada no título);
   posicionada sobre a caixa, ela recebe a altura da caixa. */
.iqr-conteudo__capa--retrato img:not(.iqr-conteudo__capa-marca) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--iqr-space-2);
  object-fit: contain;
}

/* Etiqueta sobre a capa: tipo do conteúdo. */
.iqr-conteudo__etiqueta {
  position: absolute;
  inset-block-start: var(--iqr-space-3);
  inset-inline-start: var(--iqr-space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-1);
  padding: var(--iqr-space-1) var(--iqr-space-3);
  border-radius: var(--iqr-radius-full);
  background-color: color-mix(in srgb, var(--iqr-color-bg-sunken) 78%, transparent);
  backdrop-filter: blur(6px);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-bg-inverse) 14%, transparent);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-primary);
}

.iqr-conteudo__etiqueta--direita {
  inset-inline-start: auto;
  inset-inline-end: var(--iqr-space-3);
  color: var(--iqr-color-accent-cyan);
}

.iqr-conteudo__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-5);
  flex: 1;
}

.iqr-conteudo__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-conteudo__titulo {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-md);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  color: var(--iqr-color-text-primary);
}

.iqr-conteudo__resumo {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metadados: duração, aulas, páginas. Só aparece o que o tipo tem. */
.iqr-conteudo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-1) var(--iqr-space-3);
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--iqr-space-3);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.iqr-conteudo__meta > * + *::before {
  content: "·";
  margin-inline-end: var(--iqr-space-3);
  color: var(--iqr-color-border-interactive);
}

/* Todo o card é clicável, e o link cobre a área inteira sem aninhar links. */
.iqr-conteudo__link {
  color: inherit;
  text-decoration: none;
}

.iqr-conteudo__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.iqr-conteudo:hover .iqr-conteudo__link {
  color: var(--iqr-color-text-primary);
}

.iqr-conteudo:has(.iqr-conteudo__link:focus-visible) {
  outline: var(--iqr-border-width-focus) solid var(--iqr-color-border-focus);
  outline-offset: 2px;
}

.iqr-conteudo__link:focus-visible {
  outline: none;
}

/* Botões e progresso ficam ACIMA do link que cobre o card. */
.iqr-conteudo__acao,
.iqr-conteudo__progresso {
  position: relative;
  z-index: 2;
}

/* --- Rodapé do card: preço ou ação -------------------------------------- */

.iqr-conteudo__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-2) var(--iqr-space-3);
  padding-block-start: var(--iqr-space-3);
  margin-block-start: var(--iqr-space-1);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-conteudo__preco {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.iqr-conteudo__preco strong {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.iqr-conteudo__aviso {
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-conteudo__gratis {
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-accent-cyan);
}

.iqr-conteudo__previa {
  color: var(--iqr-color-brand-contrast);
  font-weight: var(--iqr-weight-medium);
}

/* "Ver detalhes" — o convite no canto do card. É um botão (05-button.css);
   aqui só o que o card precisa dele: não quebrar linha. */
.iqr-conteudo__ver {
  white-space: nowrap;
}

/* --- Progresso e ação dentro do card ------------------------------------ */

.iqr-conteudo__progresso {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  margin-block-start: auto;
  padding-block-start: var(--iqr-space-3);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-conteudo__progresso-topo {
  display: flex;
  justify-content: space-between;
  gap: var(--iqr-space-2);
}

.iqr-conteudo__progresso strong {
  color: var(--iqr-color-text-primary);
}

.iqr-conteudo__acao {
  margin-block-start: var(--iqr-space-3);
  align-self: stretch;
}

/* Card horizontal, para listas na área do aluno. */
.iqr-conteudo--horizontal {
  flex-direction: row;
  align-items: stretch;
}

.iqr-conteudo--horizontal .iqr-conteudo__capa {
  flex: 0 0 7rem;
  aspect-ratio: auto;
}

.iqr-conteudo--horizontal .iqr-conteudo__corpo {
  padding: var(--iqr-space-4);
}

/* --- Card de categoria -------------------------------------------------- */

.iqr-categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-5);
  min-block-size: 8.5rem;

  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  text-decoration: none;
  overflow: hidden;

  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    transform var(--iqr-duration-fast) var(--iqr-easing-standard),
    box-shadow var(--iqr-duration-fast) var(--iqr-easing-standard);
}

/* Um brilho suave no canto, que acende no hover. */
.iqr-categoria::before {
  content: "";
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-end: -3rem;
  inline-size: 9rem;
  block-size: 9rem;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(108, 59, 255, 0.28) 0%, rgba(108, 59, 255, 0) 70%);
  opacity: 0.6;
  transition: opacity var(--iqr-duration-fast) var(--iqr-easing-standard);
  pointer-events: none;
}

.iqr-categoria:hover {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 55%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--iqr-shadow-md);
  color: inherit;
}

.iqr-categoria:hover::before {
  opacity: 1;
}

.iqr-categoria__icone {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: var(--iqr-space-2);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-accent-cyan);
  margin-block-end: var(--iqr-space-1);
}

.iqr-categoria__titulo {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
  line-height: var(--iqr-leading-snug);
}

.iqr-categoria__descricao {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  margin: 0;
}

.iqr-categoria__seta {
  margin-block-start: auto;
  padding-block-start: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-brand-contrast);
}

/* --- Aviso de ambiente -------------------------------------------------- */

.iqr-aviso-ambiente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--iqr-space-1) var(--iqr-space-2);
  padding: var(--iqr-space-2) var(--iqr-space-4);

  background-color: var(--iqr-color-brand-soft);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-brand-strong);
  color: var(--iqr-color-text-primary);
  font-size: var(--iqr-size-xs);
  line-height: var(--iqr-leading-normal);
  text-align: center;
}

@media (min-width: 48rem) {
  .iqr-aviso-ambiente { font-size: var(--iqr-size-sm); }
}

.iqr-aviso-ambiente strong {
  color: var(--iqr-color-brand-contrast);
}

/* --- Hero (landing e plataforma) ---------------------------------------- */

.page-hero {
  padding-block-start: var(--iqr-space-12);
  padding-block-end: var(--iqr-space-12);
  overflow: hidden;
}

@media (min-width: 48rem) {
  .page-hero {
    padding-block-start: var(--iqr-space-20);
    padding-block-end: var(--iqr-space-16);
  }
}

/* --- Busca e filtros do catálogo ---------------------------------------- */
/* Os filtros são links: cada combinação é um endereço. A busca é um
   formulário GET, que funciona sem JavaScript. */

.iqr-busca-catalogo {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--iqr-space-3);
}

.iqr-busca-catalogo .iqr-input-grupo {
  flex: 1;
  min-inline-size: 14rem;
}

.iqr-busca-catalogo .iqr-input {
  min-block-size: 3.25rem;
  font-size: var(--iqr-size-md);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-raised);
}

.iqr-busca-catalogo .iqr-button {
  min-block-size: 3.25rem;
  border-radius: var(--iqr-radius-lg);
}

.iqr-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-filtros__grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2) var(--iqr-space-3);
}

.iqr-filtros__rotulo {
  flex: none;
  min-inline-size: 4.5rem;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-filtros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2);
}

/* Seletores em linha (nível, tipo, ordem): compactos, um ao lado do outro. */
.iqr-filtros__seletores {
  display: grid;
  gap: var(--iqr-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  align-items: end;
}

.iqr-filtros__seletores .iqr-label {
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-filtros__seletores .iqr-select {
  min-block-size: 2.5rem;
  font-size: var(--iqr-size-sm);
  background-color: var(--iqr-color-bg-sunken);
}

/* Filtros aplicados, como chips removíveis. */
.iqr-filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-filtros-ativos .iqr-chip {
  min-block-size: 1.9rem;
  padding-block: 0;
  font-size: var(--iqr-size-xs);
}

/* --- Cabeçalho dos resultados ------------------------------------------- */

.iqr-resultados__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
}

.iqr-resultados__contagem {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-resultados__contagem strong {
  color: var(--iqr-color-text-primary);
}

/* ===== design-system\css\14-conta.css ===== */
/* ==========================================================================
   14 — Conta: login, cadastro e menu do aluno
   ========================================================================== */

.iqr-conta {
  max-inline-size: 28rem;
}

.iqr-conta .iqr-card {
  text-align: start;
}

.iqr-conta .iqr-card.iqr-text-center {
  text-align: center;
}

/* Cabeçalho das telas de conta: símbolo, título, frase. */
.iqr-conta__cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iqr-space-3);
  text-align: center;
}

.iqr-conta__cabeca h1 {
  font-size: var(--iqr-size-display-sm);
}

.iqr-conta__simbolo {
  inline-size: 3rem;
  block-size: 3rem;
  padding: var(--iqr-space-2);
  border-radius: var(--iqr-radius-lg);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  box-shadow: var(--iqr-shadow-glow);
}

.iqr-conta__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* --- Cabeçalho: entrar / menu da conta ----------------------------------- */

.iqr-entrar {
  display: none;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  border-radius: var(--iqr-radius-md);
  white-space: nowrap;
}

.iqr-entrar:hover {
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 6%, transparent);
}

@media (min-width: 48rem) {
  .iqr-entrar { display: inline-flex; }
}

.iqr-menu-conta {
  position: relative;
  display: none;
}

@media (min-width: 64rem) {
  .iqr-menu-conta { display: block; }
}

.iqr-menu-conta__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--iqr-radius-full);
  border: var(--iqr-border-width-hairline) solid transparent;
  background-image: var(--iqr-brand-gradient-acao);
  cursor: pointer;
  list-style: none;
  box-shadow: var(--iqr-shadow-brand);
}

.iqr-menu-conta__botao::-webkit-details-marker { display: none; }
.iqr-menu-conta__botao::marker { content: ""; }

.iqr-menu-conta__inicial {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-on-brand);
  line-height: 1;
}

.iqr-menu-conta__painel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--iqr-space-2));
  z-index: var(--iqr-layer-modal);

  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  min-inline-size: 15rem;
  padding: var(--iqr-space-2);

  background-color: var(--iqr-color-bg-elevated);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-menu-conta__nome {
  padding: var(--iqr-space-2) var(--iqr-space-3) var(--iqr-space-3);
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-menu-conta__nome strong {
  display: block;
  color: var(--iqr-color-text-primary);
}

.iqr-menu-conta__painel a,
.iqr-menu-conta__painel button {
  inline-size: 100%;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  min-block-size: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  font-family: inherit;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  text-align: start;
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--iqr-radius-md);
  cursor: pointer;
}

.iqr-menu-conta__painel a:hover,
.iqr-menu-conta__painel button:hover {
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 6%, transparent);
}

.iqr-menu-conta__painel svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--iqr-color-text-muted);
}

@media (max-width: 30rem) {
  .iqr-header__inner > .iqr-cluster > .iqr-entrar { display: none; }
}

/* ===== design-system\css\15-detalhe.css ===== */
/* ==========================================================================
   15 — Página do conteúdo (curso e eBook)
   Herói, ficha lateral e seções do corpo. Módulos em acordeão e cards de
   material vivem em 16-curso.css, porque a página da aula os reaproveita.
   ========================================================================== */

/* --- Duas colunas a partir do tablet ------------------------------------- */

.iqr-detalhe {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: start;
  grid-template-areas:
    "topo"
    "lateral"
    "corpo";
}

.iqr-detalhe__topo { grid-area: topo; }
.iqr-detalhe__lateral { grid-area: lateral; }
.iqr-detalhe__corpo { grid-area: corpo; }

.iqr-detalhe > * {
  min-inline-size: 0;
}

@media (min-width: 56rem) {
  .iqr-detalhe {
    grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.85fr);
    grid-template-areas:
      "topo  lateral"
      "corpo lateral";
    column-gap: var(--iqr-space-10);
    row-gap: var(--iqr-space-10);
  }

  .iqr-detalhe__lateral {
    position: sticky;
    inset-block-start: calc(4.25rem + var(--iqr-space-5));
  }
}

.iqr-detalhe-secao {
  padding-block-start: var(--iqr-space-4);
}

@media (min-width: 56rem) {
  .iqr-detalhe-secao {
    padding-block-start: var(--iqr-space-6);
  }
}

/* --- Herói --------------------------------------------------------------- */

.iqr-hero-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-hero-conteudo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2);
}

.iqr-chip-tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  min-block-size: 1.6rem;
  padding-inline: var(--iqr-space-3);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-full);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 5%, transparent);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-secondary);
}

.iqr-chip-tipo--destaque {
  color: var(--iqr-color-accent-cyan);
  border-color: color-mix(in srgb, var(--iqr-color-accent-cyan) 40%, transparent);
  background-color: var(--iqr-color-accent-cyan-soft);
}

.iqr-chip-tipo--marca {
  color: var(--iqr-color-text-on-brand);
  border-color: transparent;
  background-image: var(--iqr-brand-gradient-acao);
}

.iqr-hero-conteudo__titulo {
  margin: 0;
  max-inline-size: 22ch;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-tight);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-text-primary);
  text-wrap: balance;
}

@media (min-width: 56rem) {
  .iqr-hero-conteudo__titulo {
    font-size: var(--iqr-size-display-md);
  }
}

.iqr-hero-conteudo__resumo {
  margin: 0;
  max-inline-size: 58ch;
  font-size: var(--iqr-size-md);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-text-secondary);
}

/* Linha de fatos: ícone + valor. */
.iqr-fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2) var(--iqr-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-fatos li {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  min-block-size: 2rem;
  padding-inline: var(--iqr-space-3);
  border-radius: var(--iqr-radius-full);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-fatos svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  color: var(--iqr-color-accent-cyan);
}

/* Capa no herói, só no celular: no desktop a ficha lateral já a mostra. */
.iqr-hero-conteudo__capa {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--iqr-radius-lg);
  background-image: var(--iqr-brand-gradient-tri);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-hero-conteudo__capa img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.iqr-hero-conteudo__capa .iqr-ficha__marca {
  inline-size: 22%;
  block-size: auto;
  object-fit: contain;
}

@media (min-width: 56rem) {
  .iqr-hero-conteudo__capa {
    display: none;
  }
}

/* As ações do herói só existem no desktop. No celular a ficha vem logo
   abaixo com o mesmo botão. */
.iqr-hero-conteudo__acoes {
  display: none;
}

@media (min-width: 56rem) {
  .iqr-hero-conteudo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iqr-space-3);
    padding-block-start: var(--iqr-space-2);
  }

  .iqr-hero-conteudo__acoes:empty {
    display: none;
  }
}

/* --- Ficha lateral ------------------------------------------------------- */

.iqr-ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid transparent;
  border-radius: var(--iqr-radius-xl);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-ficha::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--iqr-brand-gradient-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 56rem) {
  .iqr-ficha {
    padding: var(--iqr-space-5);
  }
}

/* Capa: paisagem para curso, retrato para eBook. No celular a capa fica no
   herói, e a ficha começa direto no estado do acesso. */
.iqr-ficha__capa {
  position: relative;
  display: none;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--iqr-radius-lg);
  background-image: var(--iqr-brand-gradient-tri);
}

@media (min-width: 56rem) {
  .iqr-ficha__capa {
    display: grid;
  }
}

.iqr-ficha__capa--retrato {
  aspect-ratio: 4 / 3;
  background-image: var(--iqr-brand-gradient-superficie);
}

.iqr-ficha__capa > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A capa entra inteira, em qualquer proporção (as capas recortadas da arte
   são 5:8; uma cadastrada pode ser quadrada). Altura em porcentagem não
   resolve para um item de grade dentro de caixa com aspect-ratio (a linha é
   "auto", o ciclo vira "auto" e a imagem sai no tamanho natural, cortada);
   posicionada sobre a caixa, ela recebe a altura da caixa. */
.iqr-ficha__capa--retrato > img:not(.iqr-ficha__marca) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--iqr-space-3);
  object-fit: contain;
}

.iqr-ficha__capa > .iqr-ficha__marca {
  inline-size: 24%;
  block-size: auto;
  object-fit: contain;
  opacity: 0.94;
}

.iqr-ficha__capa--retrato > .iqr-ficha__marca {
  inline-size: 30%;
}

.iqr-ficha__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--iqr-color-bg-page) 40%, transparent) 100%);
}

.iqr-ficha__status {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 12%, transparent);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-feedback-success);
}

.iqr-ficha__status svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
}

.iqr-ficha__status--concluido {
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
}

.iqr-ficha__progresso {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-4);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-ficha__progresso-texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  flex: 1;
  min-inline-size: 0;
}

.iqr-ficha__progresso-linha {
  display: flex;
  justify-content: space-between;
  gap: var(--iqr-space-3);
}

.iqr-ficha__progresso strong {
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-ficha__proxima {
  margin: 0;
  padding: var(--iqr-space-3);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, transparent);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-ficha__proxima strong {
  display: block;
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-medium);
}

.iqr-ficha__preco {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
}

.iqr-ficha__valor {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-tight);
  color: var(--iqr-color-text-primary);
  font-variant-numeric: tabular-nums;
}

.iqr-ficha__valor--gratis {
  background-image: var(--iqr-brand-gradient-texto);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.iqr-ficha__condicao,
.iqr-ficha__entrar {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-ficha__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  padding-block-start: var(--iqr-space-4);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-ficha__rotulo {
  margin: 0;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-ficha__resumo {
  display: grid;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--iqr-size-sm);
}

.iqr-ficha__resumo li {
  display: flex;
  justify-content: space-between;
  gap: var(--iqr-space-4);
}

.iqr-ficha__resumo span:first-child {
  color: var(--iqr-color-text-muted);
}

.iqr-ficha__resumo span:last-child {
  color: var(--iqr-color-text-primary);
  text-align: end;
}

.iqr-ficha__itens {
  display: grid;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-ficha__itens li {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
}

.iqr-ficha__itens svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  color: var(--iqr-color-accent-cyan);
}

.iqr-ficha__link {
  font-size: var(--iqr-size-sm);
}

/* --- Seções do corpo ----------------------------------------------------- */

.iqr-secao {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-secao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--iqr-space-2) var(--iqr-space-4);
}

.iqr-secao__cabeca h2 {
  margin: 0;
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-tight);
}

.iqr-secao__resumo,
.iqr-secao__aviso {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-sobre {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  max-inline-size: 66ch;
  font-size: var(--iqr-size-base);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-text-secondary);
}

.iqr-sobre p {
  margin: 0;
}

/* Abas de navegação dentro da página do conteúdo (âncoras). */
.iqr-detalhe__abas {
  position: sticky;
  inset-block-start: 4.25rem;
  z-index: 5;
  margin-inline: calc(var(--iqr-container-gutter) * -1);
  padding-inline: var(--iqr-container-gutter);
  background-color: color-mix(in srgb, var(--iqr-color-bg-page) 88%, transparent);
  backdrop-filter: blur(10px);
}

@media (min-width: 56rem) {
  .iqr-detalhe__abas {
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* --- Sumário do eBook ---------------------------------------------------- */

.iqr-sumario {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--iqr-space-2);
  counter-reset: capitulo;
}

@media (min-width: 40rem) {
  .iqr-sumario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.iqr-sumario__item {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  counter-increment: capitulo;
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
}

.iqr-sumario__item::before {
  content: counter(capitulo, decimal-leading-zero);
  flex: none;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-accent-cyan);
  font-variant-numeric: tabular-nums;
}

.iqr-sumario__titulo {
  flex: 1;
  min-inline-size: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-sumario__pagina {
  flex: none;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Bônus: "Você também recebe" e "Bônus liberados" -------------------- */

.iqr-bonus-grade {
  display: grid;
  gap: var(--iqr-space-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .iqr-bonus-grade {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

.iqr-bonus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-5);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-image: var(--iqr-brand-gradient-superficie);
  overflow: hidden;
}

.iqr-bonus-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-bonus-card__tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-accent-cyan);
}

.iqr-bonus-card__tipo svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.iqr-bonus-card__nome {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

.iqr-bonus-card__descricao {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-bonus-card__valor {
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-bonus-card__valor strong {
  color: var(--iqr-color-text-primary);
}

.iqr-bonus-card__acoes {
  margin-block-start: auto;
  padding-block-start: var(--iqr-space-2);
}

/* "O que esta compra libera": lista com marcas de conferido. */
.iqr-libera {
  display: grid;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iqr-libera li {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-libera li strong {
  color: var(--iqr-color-text-primary);
}

.iqr-libera__marca {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--iqr-radius-full);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 16%, transparent);
  color: var(--iqr-color-feedback-success);
}

.iqr-libera__marca svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
}

.iqr-libera__tipo {
  margin-inline-start: auto;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  white-space: nowrap;
}

.iqr-libera--principal li:first-child {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 40%, transparent);
  background-color: var(--iqr-color-brand-soft);
}

/* ===== design-system\css\16-curso.css ===== */
/* ==========================================================================
   16 — Aula: leitor, sumário do curso e progresso
   ========================================================================== */

.iqr-aula {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: start;
  padding-block: var(--iqr-space-6) var(--iqr-space-16);
}

.iqr-aula > * { min-inline-size: 0; }

@media (min-width: 64rem) {
  .iqr-aula {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--iqr-space-10);
  }

  .iqr-aula__sumario {
    position: sticky;
    inset-block-start: calc(4.25rem + var(--iqr-space-5));
    max-block-size: calc(100vh - 6.5rem);
    overflow-y: auto;
  }
}

.iqr-aula__voltar {
  margin-block-end: var(--iqr-space-5);
  font-size: var(--iqr-size-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-aula__voltar a {
  color: var(--iqr-color-text-muted);
  text-decoration: none;
}

.iqr-aula__voltar a:hover {
  color: var(--iqr-color-text-primary);
  text-decoration: underline;
}

/* --- Cabeçalho da aula --------------------------------------------------- */

/* Coluna principal do leitor: navegação, player, texto e materiais.
   O ritmo vertical vem dos próprios blocos; aqui só se garante que a
   coluna encolhe em vez de estourar a grade. */
.iqr-aula__principal {
  min-inline-size: 0;
}

.iqr-aula__indice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-aula__feito {
  color: var(--iqr-color-feedback-success);
  font-weight: var(--iqr-weight-medium);
}

.iqr-aula__previa {
  color: var(--iqr-color-accent-cyan);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-aula__titulo {
  margin: 0;
  font-size: var(--iqr-size-display-sm);
}

/* --- Prévia gratuita ----------------------------------------------------- */

.iqr-previa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3) var(--iqr-space-5);
  margin-block-end: var(--iqr-space-5);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-accent-cyan) 35%, transparent);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-accent-cyan-soft);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-previa__texto {
  margin: 0;
  flex: 1 1 22rem;
}

.iqr-previa strong {
  color: var(--iqr-color-accent-cyan);
}

.iqr-aula__corpo {
  max-inline-size: 68ch;
  font-size: var(--iqr-size-md);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-text-secondary);
}

/* --- Hora de praticar ---------------------------------------------------- */

.iqr-pratica {
  position: relative;
  padding: var(--iqr-space-5) var(--iqr-space-6);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  max-inline-size: 68ch;
  overflow: hidden;
}

.iqr-pratica::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-pratica__titulo {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  margin: 0 0 var(--iqr-space-3);
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-accent-cyan);
}

.iqr-pratica__titulo svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.iqr-pratica p { margin: 0; }

.iqr-pratica__acao { margin-block-start: var(--iqr-space-4); }

/* --- Navegação entre aulas ----------------------------------------------- */

.iqr-aula__navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
}

.iqr-aula__navegacao form { margin: 0; }

.iqr-aula__travada {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  max-inline-size: 14rem;
  text-align: end;
}

@media (max-width: 40rem) {
  .iqr-aula__navegacao {
    flex-direction: column;
    align-items: stretch;
  }

  .iqr-aula__navegacao .iqr-button {
    inline-size: 100%;
  }

  .iqr-aula__navegacao form {
    order: -1;
  }

  .iqr-aula__travada {
    max-inline-size: none;
    text-align: center;
  }
}

/* --- Sumário do curso ---------------------------------------------------- */

.iqr-sumario-curso {
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  overflow: hidden;
  box-shadow: var(--iqr-shadow-card);
}

.iqr-sumario-curso__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  min-block-size: 2.75rem;
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
  cursor: pointer;
  list-style: none;
}

.iqr-sumario-curso__resumo::-webkit-details-marker { display: none; }
.iqr-sumario-curso__resumo::marker { content: ""; }

.iqr-sumario-curso__contagem {
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-regular);
  color: var(--iqr-color-text-muted);
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .iqr-sumario-curso__resumo { cursor: default; }
}

.iqr-sumario-curso__progresso {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: 0 var(--iqr-space-5) var(--iqr-space-4);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-sumario-curso__progresso progress {
  inline-size: 100%;
  block-size: 0.5rem;
  appearance: none;
  border: 0;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-bg-sunken);
  overflow: hidden;
}

.iqr-sumario-curso__progresso progress::-webkit-progress-bar {
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-sumario-curso__progresso progress::-webkit-progress-value {
  background-image: var(--iqr-brand-gradient-tri);
  border-radius: var(--iqr-radius-full);
}

.iqr-sumario-curso__progresso progress::-moz-progress-bar {
  background-image: var(--iqr-brand-gradient-tri);
  border-radius: var(--iqr-radius-full);
}

/* --- Módulos e aulas na lateral ------------------------------------------ */

.iqr-modulo {
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  padding-block-end: var(--iqr-space-2);
}

.iqr-modulo__titulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-5);
  min-block-size: 2.75rem;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
  cursor: pointer;
  list-style: none;
}

.iqr-modulo__titulo::-webkit-details-marker { display: none; }
.iqr-modulo__titulo::marker { content: ""; }

.iqr-modulo__titulo:hover {
  color: var(--iqr-color-text-secondary);
}

.iqr-modulo[open] > .iqr-modulo__titulo {
  color: var(--iqr-color-text-secondary);
}

.iqr-modulo__contagem {
  font-weight: var(--iqr-weight-regular);
  letter-spacing: var(--iqr-tracking-normal);
  text-transform: none;
  white-space: nowrap;
}

.iqr-modulo__contagem--feito {
  color: var(--iqr-color-feedback-success);
}

.iqr-modulo__seta {
  inline-size: 1rem;
  block-size: 1rem;
  transition: transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-modulo[open] > .iqr-modulo__titulo .iqr-modulo__seta {
  transform: rotate(180deg);
}

.iqr-modulo__aulas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.iqr-aula-item a,
.iqr-aula-item > span {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--iqr-space-3);
  align-items: center;
  padding: var(--iqr-space-2) var(--iqr-space-5);
  min-block-size: 2.75rem;
  font-size: var(--iqr-size-sm);
  line-height: 1.4;
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
}

.iqr-aula-item a:hover {
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, transparent);
}

.iqr-aula-item__titulo {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.iqr-aula-item__marca {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--iqr-radius-full);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  font-size: var(--iqr-size-xs);
  line-height: 1;
  color: var(--iqr-color-text-muted);
}

.iqr-aula-item__marca svg {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.iqr-aula-item__marca--feita {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 18%, transparent);
  color: var(--iqr-color-feedback-success);
}

.iqr-aula-item__marca--atual {
  border-color: transparent;
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
}

.iqr-aula-item--atual a {
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-medium);
  border-inline-start-color: var(--iqr-color-accent-cyan);
  background-color: var(--iqr-color-brand-soft);
}

.iqr-aula-item--travada > span {
  color: var(--iqr-color-text-muted);
  cursor: not-allowed;
}

/* ==========================================================================
   Estrutura do curso na página pública — módulos em acordeão
   ========================================================================== */

.iqr-modulos {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-modulo-card {
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  overflow: hidden;
  box-shadow: var(--iqr-shadow-card);
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-modulo-card[open] {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 45%, transparent);
}

.iqr-modulo-card__cabeca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  min-block-size: 3.5rem;
  cursor: pointer;
  list-style: none;
}

.iqr-modulo-card__cabeca::-webkit-details-marker { display: none; }
.iqr-modulo-card__cabeca::marker { content: ""; }

.iqr-modulo-card__cabeca:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
}

.iqr-modulo-card__n {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--iqr-radius-md);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-brand-contrast) 35%, transparent);
  color: var(--iqr-color-brand-contrast);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-modulo-card--concluido .iqr-modulo-card__n {
  background-image: none;
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 16%, transparent);
  border-color: transparent;
  color: var(--iqr-color-feedback-success);
}

.iqr-modulo-card__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  min-inline-size: 0;
}

.iqr-modulo-card__titulo {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

.iqr-modulo-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-1) var(--iqr-space-3);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-modulo-card__feito {
  color: var(--iqr-color-feedback-success);
  font-weight: var(--iqr-weight-medium);
}

.iqr-modulo-card__seta {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--iqr-color-text-muted);
  transition: transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-modulo-card[open] .iqr-modulo-card__seta {
  transform: rotate(180deg);
}

/* Barra fina de progresso do módulo, no rodapé do cabeçalho. */
.iqr-modulo-card__barra {
  block-size: 3px;
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-modulo-card__barra > span {
  display: block;
  block-size: 100%;
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-modulo-card__aulas {
  margin: 0;
  padding: var(--iqr-space-1) var(--iqr-space-3) var(--iqr-space-3);
  list-style: none;
}

.iqr-aula-linha {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--iqr-space-3);
  min-block-size: 2.75rem;
  padding: var(--iqr-space-2) var(--iqr-space-2);
  border-radius: var(--iqr-radius-md);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-aula-linha:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
}

.iqr-aula-linha a {
  color: inherit;
  text-decoration: none;
}

.iqr-aula-linha a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.iqr-aula-linha {
  position: relative;
}

.iqr-aula-linha a:hover {
  color: var(--iqr-color-text-primary);
}

.iqr-aula-linha--atual {
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-medium);
  background-color: var(--iqr-color-brand-soft);
}

.iqr-aula-linha--bloqueada {
  color: var(--iqr-color-text-muted);
}

.iqr-aula-linha__estado {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--iqr-radius-full);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  color: var(--iqr-color-text-muted);
}

.iqr-aula-linha__estado svg {
  inline-size: 0.8rem;
  block-size: 0.8rem;
}

.iqr-aula-linha__estado--concluida {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 18%, transparent);
  color: var(--iqr-color-feedback-success);
}

.iqr-aula-linha__estado--atual {
  border-color: transparent;
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
}

.iqr-aula-linha__estado--bloqueada {
  border-color: transparent;
  background-color: var(--iqr-color-bg-surface);
}

.iqr-aula-linha__estado--previa {
  border-color: transparent;
  background-color: var(--iqr-color-accent-cyan-soft);
  color: var(--iqr-color-accent-cyan);
}

.iqr-aula-linha--previa {
  color: var(--iqr-color-text-primary);
}

.iqr-aula-linha__texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--iqr-space-1) var(--iqr-space-2);
  min-inline-size: 0;
}

.iqr-aula-linha__etiqueta {
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-accent-cyan);
}

.iqr-aula-linha__etiqueta--feita {
  color: var(--iqr-color-feedback-success);
}

.iqr-aula-linha__tempo {
  font-size: var(--iqr-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--iqr-color-text-muted);
}

/* --- Materiais em cards (página do conteúdo) ---------------------------- */

.iqr-materiais-grade {
  display: grid;
  gap: var(--iqr-space-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .iqr-materiais-grade {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
}

.iqr-material-card {
  display: flex;
  gap: var(--iqr-space-4);
  align-items: flex-start;
  padding: var(--iqr-space-4) var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-material-card__tipo,
.iqr-material__tipo {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-brand-soft);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-brand-contrast) 30%, transparent);
  color: var(--iqr-color-brand-contrast);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-bold);
  letter-spacing: var(--iqr-tracking-wide);
}

.iqr-material-card__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  flex: 1;
  min-inline-size: 0;
}

.iqr-material-card__nome {
  margin: 0;
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-primary);
  overflow-wrap: anywhere;
}

.iqr-material-card__descricao {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-material-card__meta {
  margin: 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-material-card__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2);
  margin-block-start: var(--iqr-space-2);
}

/* --- Quiz na aula ------------------------------------------------------- */

.iqr-quiz-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  max-inline-size: 68ch;
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  color: var(--iqr-color-text-primary);
  text-decoration: none;
  font-weight: var(--iqr-weight-medium);
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-quiz-link:hover {
  border-color: var(--iqr-color-brand-contrast);
  color: var(--iqr-color-text-primary);
}

.iqr-quiz-link__estado {
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-brand-contrast);
  white-space: nowrap;
}

.iqr-quiz-link__estado--ok {
  color: var(--iqr-color-feedback-success);
}

/* --- Player da aula ----------------------------------------------------- */

.iqr-player {
  aspect-ratio: 16 / 9;
  max-inline-size: 100%;
  overflow: hidden;
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-sunken);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-player iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}

/* --- Materiais (aula) --------------------------------------------------- */

.iqr-materiais {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  max-inline-size: 68ch;
}

.iqr-materiais__titulo {
  margin: 0;
  font-size: var(--iqr-size-lg);
}

.iqr-materiais__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-material {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3) var(--iqr-space-4);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
}

.iqr-material__corpo {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.iqr-material__nome {
  margin: 0;
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-primary);
  overflow-wrap: anywhere;
}

.iqr-material__descricao {
  margin: var(--iqr-space-1) 0 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-material__meta {
  margin: var(--iqr-space-1) 0 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-material__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2);
  flex: none;
}

/* ===== design-system\css\17-painel.css ===== */
/* ==========================================================================
   17 — Painel do aluno (Meu Aprendizado)
   ========================================================================== */

/* Cabeçalho: saudação à esquerda, anel de progresso à direita. */
.iqr-painel-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-5);
}

.iqr-painel-topo__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  flex: 1 1 20rem;
}

.iqr-painel-topo__texto h1 {
  font-size: var(--iqr-size-display-sm);
}

@media (min-width: 48rem) {
  .iqr-painel-topo__texto h1 {
    font-size: var(--iqr-size-display-md);
  }
}

.iqr-painel-topo__geral {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-painel-topo__geral p {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-painel-topo__geral strong {
  display: block;
  font-size: var(--iqr-size-base);
  color: var(--iqr-color-text-primary);
}

/* --- Continue de onde parou -------------------------------------------- */
/* O card principal: capa à esquerda, texto e botão à direita. */

.iqr-continuar {
  position: relative;
  display: grid;
  gap: var(--iqr-space-5);
  padding: var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid transparent;
  border-radius: var(--iqr-radius-xl);
  box-shadow: var(--iqr-shadow-glow);
  overflow: hidden;
}

.iqr-continuar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--iqr-brand-gradient-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .iqr-continuar {
    grid-template-columns: 16rem minmax(0, 1fr);
    padding: var(--iqr-space-6);
    align-items: center;
  }
}

.iqr-continuar__capa {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--iqr-radius-lg);
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-continuar__capa img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.iqr-continuar__capa .iqr-ficha__marca {
  inline-size: 26%;
  block-size: auto;
  object-fit: contain;
}

.iqr-continuar__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  min-inline-size: 0;
}

.iqr-continuar__titulo {
  margin: 0;
  font-size: var(--iqr-size-xl);
}

.iqr-continuar__proxima {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-continuar__proxima strong {
  color: var(--iqr-color-text-primary);
}

.iqr-continuar__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-3);
  margin-block-start: var(--iqr-space-2);
}

/* --- Blocos de acesso rápido ------------------------------------------- */
/* "Meus cursos", "Meus eBooks", "Bônus", "Certificados", "Quizzes", "Suporte". */

.iqr-atalhos {
  display: grid;
  gap: var(--iqr-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .iqr-atalhos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .iqr-atalhos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.iqr-atalho {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-atalho:hover {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 50%, transparent);
  transform: translateY(-2px);
  color: inherit;
}

.iqr-atalho__icone {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-accent-cyan);
}

.iqr-atalho__icone svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.iqr-atalho__n {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-semibold);
  line-height: 1;
  color: var(--iqr-color-text-primary);
  font-variant-numeric: tabular-nums;
}

.iqr-atalho__rotulo {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* --- Cabeçalhos de seção com atalho à direita ---------------------------- */

.iqr-painel-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--iqr-space-3);
}

.iqr-painel-secao h2 {
  margin: 0;
}

.iqr-painel-secao a {
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  text-decoration: none;
}

.iqr-painel-secao a:hover {
  text-decoration: underline;
}

/* ===== design-system\css\18-admin.css ===== */
/* ==========================================================================
   18 — Painel administrativo
   ==========================================================================
   Mesma identidade do site, densidade maior. Quem edita passa horas aqui e
   precisa ver muita linha de uma vez; quem estuda precisa de respiro.

   A casca: barra superior fina, menu lateral fixo no desktop (recolhido num
   <details> no celular) e a área de trabalho. Tudo sem JavaScript. */

.iqr-admin {
  display: grid;
  min-block-size: 100vh;
  grid-template-rows: auto 1fr;
  /* minmax(0, 1fr): a coluna nunca cresce além da tela por causa do
     min-content da barra superior — no celular, isso alargava a página. */
  grid-template-columns: minmax(0, 1fr);
}

/* --- Barra superior ------------------------------------------------------ */

.iqr-admin-topo {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--iqr-layer-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-4);
  min-block-size: 3.5rem;
  padding-inline: var(--iqr-space-4);
  background-color: color-mix(in srgb, var(--iqr-color-bg-page) 85%, transparent);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  backdrop-filter: blur(14px);
}

@media (min-width: 64rem) {
  .iqr-admin-topo {
    padding-inline: var(--iqr-space-6);
  }
}

.iqr-admin-topo__marca {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  min-inline-size: 0;
  flex: 1 1 auto;
}

/* No celular, a etiqueta de ambiente cabe; o texto "Ver o site" não. */
@media (max-width: 47.99rem) {
  .iqr-admin-topo__acoes .iqr-button > span { display: none; }
  .iqr-admin-topo__acoes .iqr-button > .iqr-button__icon { margin: 0; }
}

.iqr-admin-topo__marca img {
  inline-size: 8rem;
  block-size: auto;
}

.iqr-admin-topo__rotulo {
  padding: var(--iqr-space-1) var(--iqr-space-2);
  border-radius: var(--iqr-radius-sm);
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
}

.iqr-admin-topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  flex: 0 0 auto;
}

.iqr-admin-topo__acoes .iqr-button {
  min-block-size: 2.25rem;
}

/* --- Corpo: lateral + área de trabalho ---------------------------------- */

.iqr-admin-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 64rem) {
  .iqr-admin-corpo {
    grid-template-columns: 16.5rem minmax(0, 1fr);
  }
}

/* --- Menu lateral --------------------------------------------------------- */

.iqr-admin-lateral {
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-surface);
}

@media (min-width: 64rem) {
  .iqr-admin-lateral {
    position: sticky;
    inset-block-start: 3.5rem;
    block-size: calc(100vh - 3.5rem);
    overflow-y: auto;
    border-block-end: 0;
    border-inline-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  }
}

/* No celular o menu fica recolhido atrás de um rótulo; um checkbox invisível
   o abre e fecha sem JavaScript. No desktop ele está sempre aberto. */
.iqr-admin-lateral__toggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.iqr-admin-lateral__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  min-block-size: 2.75rem;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
  cursor: pointer;
}

.iqr-admin-lateral__resumo svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  transition: transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-admin-lateral__toggle:focus-visible + .iqr-admin-lateral__resumo {
  outline: var(--iqr-border-width-focus) solid var(--iqr-color-border-focus);
  outline-offset: -3px;
}

.iqr-admin-lateral__toggle:checked ~ .iqr-admin-lateral__resumo svg {
  transform: rotate(180deg);
}

.iqr-admin-lateral__toggle:not(:checked) ~ .iqr-admin-nav {
  display: none;
}

@media (min-width: 64rem) {
  .iqr-admin-lateral__resumo {
    display: none;
  }

  .iqr-admin-lateral__toggle:not(:checked) ~ .iqr-admin-nav {
    display: flex;
  }
}

.iqr-admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-5);
  padding: var(--iqr-space-3) var(--iqr-space-3) var(--iqr-space-6);
}

@media (min-width: 64rem) {
  .iqr-admin-nav {
    padding: var(--iqr-space-5) var(--iqr-space-3) var(--iqr-space-8);
  }
}

.iqr-admin-nav__grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iqr-admin-nav__titulo {
  margin: 0 0 var(--iqr-space-1);
  padding-inline: var(--iqr-space-3);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-admin-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  min-block-size: 2.5rem;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  border-radius: var(--iqr-radius-md);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  transition:
    color var(--iqr-duration-fast) var(--iqr-easing-standard),
    background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-admin-nav a svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  flex: none;
  color: var(--iqr-color-text-muted);
  transition: color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-admin-nav a:hover {
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 5%, transparent);
}

.iqr-admin-nav a:hover svg {
  color: var(--iqr-color-accent-cyan);
}

.iqr-admin-nav a[aria-current="page"] {
  color: var(--iqr-color-text-primary);
  background-color: var(--iqr-color-brand-soft);
}

.iqr-admin-nav a[aria-current="page"] svg {
  color: var(--iqr-color-accent-cyan);
}

.iqr-admin-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: var(--iqr-radius-full);
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-admin-nav__n {
  margin-inline-start: auto;
  padding: 0 var(--iqr-space-2);
  border-radius: var(--iqr-radius-full);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 18%, transparent);
  color: var(--iqr-color-feedback-warning);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* --- Área de trabalho ---------------------------------------------------- */

.iqr-admin-main {
  min-inline-size: 0;
  padding: var(--iqr-space-5) var(--iqr-space-4) var(--iqr-space-16);
}

@media (min-width: 48rem) {
  .iqr-admin-main {
    padding: var(--iqr-space-6) var(--iqr-space-6) var(--iqr-space-16);
  }
}

@media (min-width: 80rem) {
  .iqr-admin-main {
    padding-inline: var(--iqr-space-10);
  }
}

.iqr-admin-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-6);
  max-inline-size: 80rem;
}

.iqr-admin-conteudo--estreito {
  max-inline-size: 52rem;
}

.iqr-admin-conteudo > * {
  min-inline-size: 0;
}

/* Cabeçalho da tela: migalhas, título, apoio e ações. */
.iqr-admin-cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-admin-cabeca .iqr-pagina__texto h1 {
  font-size: var(--iqr-size-display-sm);
}

/* Barra de ações do registro (salvar rascunho, publicar, ver como aluno). */
.iqr-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-admin-toolbar__estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2) var(--iqr-space-3);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-admin-toolbar__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  margin-inline-start: auto;
}

.iqr-admin-toolbar__acoes form {
  margin: 0;
}

/* Duas colunas de formulário: campos à esquerda, ficha/ajuda à direita. */
.iqr-admin-duas {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: start;
}

@media (min-width: 72rem) {
  .iqr-admin-duas {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  .iqr-admin-duas__fixa {
    position: sticky;
    inset-block-start: calc(3.5rem + var(--iqr-space-5));
  }
}

.iqr-admin-duas > * {
  min-inline-size: 0;
}

/* --- Cards de atalho do dashboard ---------------------------------------- */

.iqr-admin-atalhos {
  display: grid;
  gap: var(--iqr-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}

.iqr-admin-atalho {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-admin-atalho:hover {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 50%, transparent);
  transform: translateY(-2px);
  color: inherit;
}

.iqr-admin-atalho__icone {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-accent-cyan);
}

.iqr-admin-atalho__icone svg {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.iqr-admin-atalho__texto {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.iqr-admin-atalho__texto strong {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-primary);
}

.iqr-admin-atalho__texto span {
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

/* --- Lista de conteúdos como cards -------------------------------------- */

.iqr-admin-lista {
  display: grid;
  gap: var(--iqr-space-3);
}

.iqr-admin-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--iqr-space-4);
  align-items: center;
  padding: var(--iqr-space-3) var(--iqr-space-4) var(--iqr-space-3) var(--iqr-space-3);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-admin-item:hover {
  border-color: var(--iqr-color-border-default);
}

@media (min-width: 48rem) {
  .iqr-admin-item {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  }
}

.iqr-admin-item__capa {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--iqr-radius-md);
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-admin-item__capa img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.iqr-admin-item__capa .iqr-ficha__marca {
  inline-size: 34%;
  block-size: auto;
  object-fit: contain;
}

.iqr-admin-item__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  min-inline-size: 0;
}

.iqr-admin-item__titulo {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-admin-item__titulo a {
  color: var(--iqr-color-text-primary);
  text-decoration: none;
}

.iqr-admin-item__titulo a:hover {
  color: var(--iqr-color-brand-contrast);
}

.iqr-admin-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-1) var(--iqr-space-3);
  margin: 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-admin-item__acoes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2);
}

@media (min-width: 48rem) {
  .iqr-admin-item__acoes {
    grid-column: auto;
    justify-content: flex-end;
  }
}

/* --- Materiais no painel ------------------------------------------------- */

.iqr-material-admin {
  align-items: center;
}

.iqr-material-admin__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  flex: none;
  max-inline-size: 100%;
}

.iqr-material-admin__acoes form { margin: 0; }

.iqr-material-admin__substituir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-material-admin__substituir .iqr-input--arquivo {
  max-inline-size: 14rem;
  min-block-size: 2.25rem;
}

/* --- Gerenciar conteúdo — esboço do curso -------------------------------- */

.iqr-esboco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-esboco__modulo {
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
  overflow: hidden;
}

.iqr-esboco__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  background-color: var(--iqr-color-bg-surface);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-esboco__aulas {
  list-style: none;
  margin: 0;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  min-block-size: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
}

.iqr-esboco__aula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-2) var(--iqr-space-3);
  border-radius: var(--iqr-radius-md);
  transition: background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-esboco__aula:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
}

.iqr-esboco__vazio {
  padding: var(--iqr-space-3);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  text-align: center;
  border: var(--iqr-border-width-hairline) dashed var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-md);
}

.iqr-esboco__alca {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--iqr-radius-sm);
  letter-spacing: -0.2em;
  color: var(--iqr-color-text-muted);
  cursor: grab;
  user-select: none;
}

.iqr-esboco__alca:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 8%, transparent);
  color: var(--iqr-color-text-primary);
}

.iqr-esboco__alca:active {
  cursor: grabbing;
}

.iqr-esboco__n {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--iqr-radius-sm);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 5%, transparent);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.iqr-esboco__cabeca .iqr-esboco__n {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--iqr-radius-md);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-brand-contrast) 35%, transparent);
  color: var(--iqr-color-brand-contrast);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-sm);
}

.iqr-esboco__texto {
  flex: 1;
  min-inline-size: 12rem;
}

.iqr-esboco__titulo {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  font-weight: var(--iqr-weight-medium);
}

.iqr-esboco__titulo a {
  color: var(--iqr-color-text-primary);
  text-decoration: none;
}

.iqr-esboco__titulo a:hover {
  color: var(--iqr-color-brand-contrast);
  text-decoration: underline;
}

.iqr-esboco__cabeca .iqr-esboco__titulo {
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-esboco__meta {
  margin: var(--iqr-space-1) 0 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-1) var(--iqr-space-3);
}

.iqr-esboco__meta svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  vertical-align: -0.15em;
  margin-inline-end: 0.25em;
  color: var(--iqr-color-accent-cyan);
}

.iqr-esboco__acoes {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  flex: none;
  margin-inline-start: auto;
}

.iqr-esboco__acoes form {
  margin: 0;
}

.iqr-esboco__nova {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 2%, transparent);
}

.iqr-esboco__nova .iqr-input {
  flex: 1;
  min-inline-size: 12rem;
  min-block-size: 2.5rem;
}

/* Estados do arrasto */
.iqr-esboco--arrastando {
  opacity: 0.45;
}

.iqr-esboco__alvo {
  outline: var(--iqr-border-width-thick) dashed var(--iqr-color-brand-contrast);
  outline-offset: 0.125rem;
  border-radius: var(--iqr-radius-md);
}

.iqr-esboco__status {
  margin: 0;
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 14%, transparent);
  color: var(--iqr-color-feedback-success);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
}

.iqr-esboco__status--erro {
  background-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 14%, transparent);
  color: var(--iqr-color-feedback-danger);
}

/* --- Prévia de vídeo no cadastro da aula -------------------------------- */

.iqr-video-previa {
  display: grid;
  gap: var(--iqr-space-3);
}

@media (min-width: 48rem) {
  .iqr-video-previa {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }
}

.iqr-video-previa__quadro {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-sunken);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-video-previa__quadro img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.iqr-video-previa__quadro svg {
  position: absolute;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--iqr-color-text-on-brand);
  filter: drop-shadow(0 2px 8px rgba(3, 5, 10, 0.6));
}

.iqr-video-previa__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-video-previa__texto strong {
  color: var(--iqr-color-text-primary);
}

/* --- Capa no painel ------------------------------------------------------ */

.iqr-capa-admin {
  display: grid;
  gap: var(--iqr-space-4);
}

@media (min-width: 48rem) {
  .iqr-capa-admin {
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
  }
}

.iqr-capa-admin__atual {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--iqr-radius-md);
  background-image: var(--iqr-brand-gradient-tri);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-capa-admin__atual img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.iqr-capa-admin__atual .iqr-ficha__marca {
  inline-size: 28%;
  block-size: auto;
  object-fit: contain;
}

/* --- Carga de webhook ---------------------------------------------------- */

.iqr-carga {
  margin: 0;
  padding: var(--iqr-space-4);
  max-block-size: 28rem;
  overflow: auto;
  font-size: var(--iqr-size-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--iqr-color-text-secondary);
  background: var(--iqr-color-bg-sunken);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
}

/* --- Checklist ----------------------------------------------------------- */

.iqr-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-checklist li {
  display: flex;
  gap: var(--iqr-space-3);
  align-items: flex-start;
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-size: var(--iqr-size-sm);
}

.iqr-checklist__marca {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--iqr-radius-full);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-bold);
  background-color: color-mix(in srgb, var(--iqr-color-text-muted) 18%, transparent);
  color: var(--iqr-color-text-muted);
}

.iqr-checklist__marca--feito {
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 18%, transparent);
  color: var(--iqr-color-feedback-success);
}

.iqr-checklist__marca--pendente {
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 18%, transparent);
  color: var(--iqr-color-feedback-warning);
}

/* Ícone da área na árvore de áreas (reusa o esboço de módulos e aulas). */
.iqr-esboco__icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-brand-contrast);
}

.iqr-esboco__icone > svg,
.iqr-esboco__icone > .iqr-ico {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.iqr-esboco__icone:empty {
  background-image: var(--iqr-brand-gradient-acao);
}

/* Ficha do arquivo (material avulso): ícone do tipo + nome + tamanho,
   alinhados como o cartão de material que o aluno vê. */
.iqr-material-admin--ficha {
  display: flex;
  gap: var(--iqr-space-3);
  align-items: center;
  min-inline-size: 0;
}

.iqr-material-admin--ficha > div {
  min-inline-size: 0;
}

.iqr-material-admin--ficha .iqr-card__title {
  overflow-wrap: anywhere;
}

/* Subáreas de uma área: recolhíveis, abertas por padrão. */
.iqr-esboco__subareas > summary {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-2) var(--iqr-space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-esboco__subareas > summary::-webkit-details-marker { display: none; }

.iqr-esboco__subareas > summary::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-esboco__subareas[open] > summary::after { transform: rotate(-135deg); }

/* ===== design-system\css\19-avaliacao.css ===== */
/* ==========================================================================
   19 — Quiz, resultado e editor de quiz
   ========================================================================== */

/* --- Pergunta (aluno) --------------------------------------------------- */

.iqr-pergunta {
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-raised);
  box-shadow: var(--iqr-shadow-card);
  padding: var(--iqr-space-5);
  min-inline-size: 0;
}

@media (min-width: 48rem) {
  .iqr-pergunta {
    padding: var(--iqr-space-6);
  }
}

.iqr-pergunta__enunciado {
  display: flex;
  align-items: baseline;
  gap: var(--iqr-space-3);
  padding: 0;
  margin-block-end: var(--iqr-space-4);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-md);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
  line-height: 1.45;
}

.iqr-pergunta__n {
  flex: none;
  color: var(--iqr-color-accent-cyan);
  font-variant-numeric: tabular-nums;
}

/* --- Alternativa --------------------------------------------------------- */

.iqr-alternativa {
  display: flex;
  align-items: flex-start;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  min-block-size: 2.75rem;
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  cursor: pointer;
  transition:
    border-color var(--iqr-duration-fast) var(--iqr-easing-standard),
    background-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-alternativa:hover {
  border-color: var(--iqr-color-border-interactive);
}

.iqr-alternativa input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 0.2rem;
  flex: none;
  accent-color: var(--iqr-color-brand-default);
  cursor: pointer;
}

.iqr-alternativa__letra {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--iqr-radius-sm);
  background-color: var(--iqr-color-bg-sunken);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-muted);
}

.iqr-alternativa:has(input:checked) {
  border-color: var(--iqr-color-brand-contrast);
  background-color: var(--iqr-color-brand-soft);
}

.iqr-alternativa:has(input:checked) .iqr-alternativa__letra {
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
}

/* --- Resultado ----------------------------------------------------------- */

.iqr-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-6);
  padding-block-end: var(--iqr-space-6);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-resultado__numero {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-display-md);
  font-weight: var(--iqr-weight-bold);
  line-height: 1;
  letter-spacing: var(--iqr-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.iqr-resultado__numero span {
  font-size: 0.45em;
  margin-inline-start: 0.1em;
}

.iqr-resultado--aprovado .iqr-resultado__numero { color: var(--iqr-color-feedback-success); }
.iqr-resultado--reprovado .iqr-resultado__numero { color: var(--iqr-color-feedback-warning); }

.iqr-resultado__detalhe {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  line-height: 1.6;
}

.iqr-resultado__detalhe strong { color: var(--iqr-color-text-primary); }

/* --- Questão a questão --------------------------------------------------- */

.iqr-corrigida {
  position: relative;
  padding: var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  overflow: hidden;
}

.iqr-corrigida::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background-color: var(--iqr-color-border-default);
}

.iqr-corrigida + .iqr-corrigida { margin-block-start: var(--iqr-space-3); }

.iqr-corrigida--certa::before { background-color: var(--iqr-color-feedback-success); }
.iqr-corrigida--errada::before { background-color: var(--iqr-color-feedback-danger); }

.iqr-corrigida__enunciado {
  display: flex;
  align-items: baseline;
  gap: var(--iqr-space-3);
  margin: 0 0 var(--iqr-space-4);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-primary);
}

.iqr-corrigida__marca { flex: none; }
.iqr-corrigida--certa .iqr-corrigida__marca { color: var(--iqr-color-feedback-success); }
.iqr-corrigida--errada .iqr-corrigida__marca { color: var(--iqr-color-feedback-danger); }

.iqr-corrigida__respostas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--iqr-space-2) var(--iqr-space-4);
  margin: 0;
  font-size: var(--iqr-size-sm);
}

.iqr-corrigida__respostas dt {
  color: var(--iqr-color-text-muted);
  white-space: nowrap;
}

.iqr-corrigida__respostas dd {
  margin: 0;
  color: var(--iqr-color-text-secondary);
}

.iqr-corrigida__explicacao {
  margin: var(--iqr-space-4) 0 0;
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-accent-cyan-soft);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-corrigida__explicacao strong {
  color: var(--iqr-color-accent-cyan);
}

/* --- Editor de quiz (painel) -------------------------------------------- */
/* Todas as perguntas numa tela: cada uma é um card com o enunciado, as
   alternativas (letra, rádio da correta, texto) e a explicação. */

.iqr-editor-quiz {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-pergunta-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
}

/* Inativa: continua editável, mas visivelmente fora do quiz. */
.iqr-pergunta-editor--inativa {
  opacity: 0.7;
  border-style: dashed;
}

.iqr-pergunta-editor--incompleta {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 45%, transparent);
}

.iqr-pergunta-editor__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
}

.iqr-pergunta-editor__n {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-accent-cyan);
}

.iqr-pergunta-editor__acoes {
  display: flex;
  gap: var(--iqr-space-2);
}

.iqr-pergunta-editor__acoes form {
  margin: 0;
}

.iqr-alt-editor {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--iqr-space-3);
}

.iqr-alt-editor__letra {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--iqr-radius-sm);
  background-color: var(--iqr-color-bg-sunken);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-muted);
}

.iqr-alt-editor input[type="radio"] {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  accent-color: var(--iqr-color-feedback-success);
  cursor: pointer;
}

.iqr-alt-editor:has(input[type="radio"]:checked) .iqr-alt-editor__letra {
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 18%, transparent);
  color: var(--iqr-color-feedback-success);
}

.iqr-alt-editor:has(input[type="radio"]:checked) .iqr-input {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-success) 60%, transparent);
}

.iqr-alt-editor .iqr-input {
  min-block-size: 2.5rem;
}

.iqr-alt-editor__dica {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-pergunta-editor__alternativas {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-pergunta-editor__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding-block-start: var(--iqr-space-3);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

/* Barra de salvar que acompanha a rolagem no fim do editor. */
.iqr-barra-salvar {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  margin-block-start: var(--iqr-space-2);
  background-color: color-mix(in srgb, var(--iqr-color-bg-elevated) 92%, transparent);
  backdrop-filter: blur(10px);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-barra-salvar__texto {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* ===== design-system\css\20-emails.css ===== */
/* ==========================================================================
   Sistema > E-mails
   A tela do painel que mostra o que foi enviado e como cada modelo fica.
   ========================================================================== */

/* Pré-visualização do e-mail.
   Altura própria e rolagem: o corpo de um e-mail é mais alto que a área útil
   da tela, e deixá-lo esticar empurraria o histórico para muito longe. */
.iqr-previa-email {
  inline-size: 100%;
  block-size: 30rem;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-md);

  /* O e-mail é desenhado sobre fundo claro. Sem isto o quadro herdaria o fundo
     escuro da página e a prévia mentiria sobre o que chega na caixa de entrada. */
  background-color: var(--iqr-color-bg-inverse);

  /* Um quadro dentro de flex ou grid não encolhe abaixo do conteúdo sem isto,
     e a página inteira passa a rolar de lado no telefone. */
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Versão em texto do e-mail. Preserva as quebras como foram escritas e rola
   de lado sozinha, em vez de alargar a página. */
.iqr-pre {
  margin: 0;
  padding: var(--iqr-space-4);
  overflow-x: auto;
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-sunken);
  color: var(--iqr-color-text-secondary);
  font-family: var(--iqr-font-mono);
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== design-system\css\21-componentes.css ===== */
/* ==========================================================================
   21 — Componentes de interface
   ==========================================================================
   O que toda tela usa e nenhuma deveria improvisar: abas, menus suspensos,
   modal, tabela, paginação, estado vazio, mensagens, carregamento, barra de
   progresso. Tudo funciona sem JavaScript; o script só melhora. */

/* --- Alertas e mensagens ------------------------------------------------ */
/* role="alert" ou role="status" no HTML. A cor sozinha nunca é o aviso: há
   uma barra lateral, um ícone e o texto diz o que houve. */

.iqr-alerta {
  display: flex;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, currentColor 30%, transparent);
  border-inline-start-width: 3px;
  border-inline-start-color: currentColor;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
}

.iqr-alerta > svg {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.1em;
}

.iqr-alerta p { margin: 0; }
.iqr-alerta p + p { margin-block-start: var(--iqr-space-2); }

.iqr-alerta ul {
  margin: var(--iqr-space-2) 0 0;
  padding-inline-start: var(--iqr-space-5);
  list-style: disc;
}

.iqr-alerta li + li {
  margin-block-start: var(--iqr-space-1);
}

.iqr-alerta strong,
.iqr-alerta a {
  color: inherit;
}

.iqr-alerta--erro {
  color: var(--iqr-color-feedback-danger);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 10%, transparent);
}

.iqr-alerta--aviso {
  color: var(--iqr-color-feedback-warning);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 10%, transparent);
}

.iqr-alerta--sucesso {
  color: var(--iqr-color-feedback-success);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 10%, transparent);
}

.iqr-alerta--info {
  color: var(--iqr-color-accent-cyan);
  background-color: color-mix(in srgb, var(--iqr-color-accent-cyan) 8%, transparent);
}

/* O texto do alerta continua legível: só o título e o ícone levam a cor. */
.iqr-alerta--erro .iqr-alerta__corpo,
.iqr-alerta--aviso .iqr-alerta__corpo,
.iqr-alerta--sucesso .iqr-alerta__corpo,
.iqr-alerta--info .iqr-alerta__corpo {
  color: var(--iqr-color-text-secondary);
}

.iqr-alerta__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  min-inline-size: 0;
}

.iqr-alerta__titulo {
  margin: 0;
  font-weight: var(--iqr-weight-semibold);
}

/* Toast: a mesma mensagem, flutuando no canto. Aparece com o script e some
   sozinha; sem script a mensagem fica no fluxo, como alerta. */
.iqr-toast {
  position: fixed;
  inset-inline-end: var(--iqr-space-4);
  inset-block-end: var(--iqr-space-4);
  z-index: var(--iqr-layer-toast);
  max-inline-size: min(24rem, calc(100vw - 2rem));
  box-shadow: var(--iqr-shadow-lg);
  background-color: var(--iqr-color-bg-elevated);
  animation: iqr-toast-entra var(--iqr-duration-base) var(--iqr-easing-enter);
}

@keyframes iqr-toast-entra {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* --- Abas --------------------------------------------------------------- */
/* Links com aria-current: cada aba é um endereço. */

.iqr-abas {
  display: flex;
  gap: var(--iqr-space-1);
  overflow-x: auto;
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  scrollbar-width: none;
}

.iqr-abas::-webkit-scrollbar { display: none; }

.iqr-abas a,
.iqr-abas button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  margin-block-end: -1px;
  font-family: inherit;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-block-end: 2px solid transparent;
  cursor: pointer;
  transition: color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-abas a:hover,
.iqr-abas button:hover {
  color: var(--iqr-color-text-primary);
}

.iqr-abas [aria-current="page"],
.iqr-abas [aria-selected="true"] {
  color: var(--iqr-color-text-primary);
  border-image: var(--iqr-brand-gradient-tri) 1;
  border-image-width: 0 0 2px 0;
}

.iqr-abas__n {
  font-size: var(--iqr-size-xs);
  padding: 0 var(--iqr-space-2);
  border-radius: var(--iqr-radius-full);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 8%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Abas em pílula: para trocar de visão dentro de um card. */
.iqr-abas--pilula {
  display: inline-flex;
  padding: var(--iqr-space-1);
  gap: 0;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-abas--pilula a,
.iqr-abas--pilula button {
  margin: 0;
  padding: var(--iqr-space-2) var(--iqr-space-4);
  border: 0;
  border-radius: var(--iqr-radius-full);
}

.iqr-abas--pilula [aria-current="page"],
.iqr-abas--pilula [aria-selected="true"] {
  border-image: none;
  background-color: var(--iqr-color-bg-elevated);
  color: var(--iqr-color-text-primary);
  box-shadow: var(--iqr-shadow-sm);
}

/* --- Menu suspenso ------------------------------------------------------ */
/* <details> com o menu dentro: abre sem JavaScript e responde ao teclado. */

.iqr-menu {
  position: relative;
}

.iqr-menu > summary {
  list-style: none;
  cursor: pointer;
}

.iqr-menu > summary::-webkit-details-marker { display: none; }
.iqr-menu > summary::marker { content: ""; }

.iqr-menu__painel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--iqr-space-1));
  z-index: var(--iqr-layer-modal);
  min-inline-size: 14rem;
  padding: var(--iqr-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  background-color: var(--iqr-color-bg-elevated);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-md);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-menu__painel--esquerda {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

.iqr-menu__painel a,
.iqr-menu__painel button {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  font-family: inherit;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  text-align: start;
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--iqr-radius-sm);
  cursor: pointer;
}

.iqr-menu__painel a:hover,
.iqr-menu__painel button:hover {
  color: var(--iqr-color-text-primary);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 7%, transparent);
}

.iqr-menu__painel .iqr-menu__perigo:hover {
  color: var(--iqr-color-feedback-danger);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-danger) 12%, transparent);
}

.iqr-menu__painel form {
  margin: 0;
}

.iqr-menu__painel hr {
  margin: var(--iqr-space-1) 0;
  border: 0;
  block-size: 1px;
  background-color: var(--iqr-color-border-subtle);
}

.iqr-menu__painel .iqr-menu__grupo {
  padding: var(--iqr-space-2) var(--iqr-space-3) var(--iqr-space-1);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

/* Um formulário pequeno dentro do menu ("Mover para"). */
.iqr-menu__form {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-2) var(--iqr-space-3) var(--iqr-space-3);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

/* --- Modal -------------------------------------------------------------- */
/* <dialog> nativo. Abre com o atributo open (sem script) ou com showModal(). */

.iqr-modal {
  inline-size: min(34rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  padding: 0;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-xl);
  background-color: var(--iqr-color-bg-elevated);
  color: var(--iqr-color-text-secondary);
  box-shadow: var(--iqr-shadow-lg);
  overflow: hidden;
}

.iqr-modal::backdrop {
  background-color: color-mix(in srgb, var(--iqr-color-bg-sunken) 70%, transparent);
  backdrop-filter: blur(4px);
}

.iqr-modal__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-5) var(--iqr-space-6) 0;
}

.iqr-modal__cabeca h2 {
  margin: 0;
  font-size: var(--iqr-size-xl);
}

.iqr-modal__corpo {
  padding: var(--iqr-space-4) var(--iqr-space-6);
  overflow-y: auto;
}

.iqr-modal__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4) var(--iqr-space-6) var(--iqr-space-5);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

/* --- Tabela ------------------------------------------------------------- */

.iqr-tabela-rolagem {
  /* Contém os descendentes posicionados (ex.: texto só para leitor de tela
     num <th>), que senão estouram a largura da página no celular. */
  position: relative;
  overflow-x: auto;
  min-inline-size: 0;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-raised);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-tabela {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--iqr-size-sm);
  min-inline-size: 38rem;
}

.iqr-tabela--estreita {
  min-inline-size: 0;
}

.iqr-tabela th {
  text-align: start;
  padding: var(--iqr-space-3) var(--iqr-space-4);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
  background-color: var(--iqr-color-bg-surface);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  white-space: nowrap;
}

.iqr-tabela td {
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  vertical-align: middle;
  color: var(--iqr-color-text-secondary);
}

.iqr-tabela tbody tr:last-child td {
  border-block-end: 0;
}

.iqr-tabela tbody tr:hover td {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent);
}

.iqr-tabela td a {
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-medium);
  text-decoration: none;
}

.iqr-tabela td a:hover {
  color: var(--iqr-color-brand-contrast);
  text-decoration: underline;
}

.iqr-tabela__sub {
  display: block;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  font-weight: var(--iqr-weight-regular);
}

.iqr-tabela__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.iqr-tabela__acoes {
  text-align: end;
  white-space: nowrap;
}

.iqr-tabela__acoes .iqr-botoes {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--iqr-space-2);
}

/* --- Lista de itens do painel ------------------------------------------- */
/* Linhas com número, título, metadados e ações à direita. */

.iqr-lista-admin {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-linha-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-linha-admin:hover {
  border-color: var(--iqr-color-border-default);
}

.iqr-linha-admin__corpo {
  flex: 1;
  min-inline-size: 12rem;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
}

.iqr-linha-admin__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2) var(--iqr-space-3);
  margin: 0;
  font-weight: var(--iqr-weight-medium);
}

.iqr-linha-admin__titulo a {
  color: var(--iqr-color-text-primary);
  text-decoration: none;
}

.iqr-linha-admin__titulo a:hover {
  color: var(--iqr-color-brand-contrast);
  text-decoration: underline;
}

.iqr-linha-admin__n {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.75rem;
  block-size: 1.75rem;
  padding-inline: var(--iqr-space-1);
  border-radius: var(--iqr-radius-sm);
  background-color: var(--iqr-color-brand-soft);
  color: var(--iqr-color-brand-contrast);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.iqr-linha-admin__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-1) var(--iqr-space-3);
  margin: 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-linha-admin__acoes {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  flex: none;
}

.iqr-linha-admin__acoes form { margin: 0; }

.iqr-lista-simples {
  list-style: disc;
  margin: 0;
  padding-inline-start: var(--iqr-space-5);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-lista-simples li + li { margin-block-start: var(--iqr-space-2); }

/* Lista de definição: rótulo e valor lado a lado. */
.iqr-ficha-dados {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--iqr-space-2) var(--iqr-space-5);
  margin: 0;
  font-size: var(--iqr-size-sm);
}

.iqr-ficha-dados dt {
  color: var(--iqr-color-text-muted);
}

.iqr-ficha-dados dd {
  margin: 0;
  color: var(--iqr-color-text-primary);
  overflow-wrap: anywhere;
}

/* --- Paginação ---------------------------------------------------------- */

.iqr-paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-3);
}

.iqr-paginacao__posicao {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.iqr-paginacao__paginas {
  display: flex;
  gap: var(--iqr-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.iqr-paginacao__paginas a,
.iqr-paginacao__paginas span {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.25rem;
  block-size: 2.25rem;
  padding-inline: var(--iqr-space-2);
  border-radius: var(--iqr-radius-md);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.iqr-paginacao__paginas a:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 7%, transparent);
  color: var(--iqr-color-text-primary);
}

.iqr-paginacao__paginas [aria-current="page"] {
  background-image: var(--iqr-brand-gradient-acao);
  color: var(--iqr-color-text-on-brand);
  font-weight: var(--iqr-weight-semibold);
}

/* --- Estado vazio ------------------------------------------------------- */
/* Diz o que não há e o que fazer. Nunca inventa card para parecer cheio. */

.iqr-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-10) var(--iqr-space-6);
  text-align: center;
  border: var(--iqr-border-width-hairline) dashed var(--iqr-color-border-default);
  border-radius: var(--iqr-radius-xl);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 2%, transparent);
}

.iqr-vazio--compacto {
  padding: var(--iqr-space-6) var(--iqr-space-5);
  gap: var(--iqr-space-2);
}

.iqr-vazio__icone {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--iqr-radius-full);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  color: var(--iqr-color-accent-cyan);
  margin-block-end: var(--iqr-space-1);
}

.iqr-vazio__icone svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.iqr-vazio__titulo {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

.iqr-vazio__texto {
  margin: 0;
  max-inline-size: 42ch;
  color: var(--iqr-color-text-muted);
}

.iqr-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iqr-space-3);
  margin-block-start: var(--iqr-space-2);
}

/* --- Carregamento ------------------------------------------------------- */
/* Esqueleto: blocos cinza pulsando no lugar do conteúdo que ainda vem. */

.iqr-skeleton {
  display: block;
  border-radius: var(--iqr-radius-sm);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 6%, transparent);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--iqr-color-bg-inverse) 6%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: iqr-skeleton 1.4s var(--iqr-easing-standard) infinite;
}

@keyframes iqr-skeleton {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.iqr-skeleton--texto { block-size: 0.9em; inline-size: 100%; }
.iqr-skeleton--texto-curto { block-size: 0.9em; inline-size: 55%; }
.iqr-skeleton--titulo { block-size: 1.4em; inline-size: 70%; }
.iqr-skeleton--capa { aspect-ratio: 16 / 9; inline-size: 100%; border-radius: var(--iqr-radius-md); }
.iqr-skeleton--botao { block-size: 2.75rem; inline-size: 9rem; border-radius: var(--iqr-radius-md); }

/* Girador: para um botão que está enviando. */
.iqr-spinner {
  display: inline-block;
  inline-size: 1.1em;
  block-size: 1.1em;
  border-radius: var(--iqr-radius-full);
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-inline-start-color: currentColor;
  animation: iqr-gira 0.8s linear infinite;
}

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

/* --- Barra de progresso ------------------------------------------------- */
/* <progress> nativo: lido por leitor de tela e funcional sem JavaScript. */

.iqr-progresso {
  inline-size: 100%;
  block-size: 0.5rem;
  appearance: none;
  border: 0;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-bg-sunken);
  overflow: hidden;
}

.iqr-progresso::-webkit-progress-bar {
  background-color: var(--iqr-color-bg-sunken);
  border-radius: var(--iqr-radius-full);
}

.iqr-progresso::-webkit-progress-value {
  background-image: var(--iqr-brand-gradient-tri);
  border-radius: var(--iqr-radius-full);
  transition: inline-size var(--iqr-duration-base) var(--iqr-easing-standard);
}

.iqr-progresso::-moz-progress-bar {
  background-image: var(--iqr-brand-gradient-tri);
  border-radius: var(--iqr-radius-full);
}

.iqr-progresso--grande {
  block-size: 0.75rem;
}

.iqr-progresso-linha {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-progresso-linha__topo {
  display: flex;
  justify-content: space-between;
  gap: var(--iqr-space-3);
}

.iqr-progresso-linha strong {
  color: var(--iqr-color-text-primary);
}

/* Anel de progresso: um círculo com o percentual no meio. Só CSS. */
.iqr-anel {
  --valor: 0;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  flex: none;
  border-radius: var(--iqr-radius-full);
  background-image: conic-gradient(var(--iqr-color-accent-cyan) calc(var(--valor) * 1%), var(--iqr-color-bg-sunken) 0);
}

.iqr-anel::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border-radius: inherit;
  background-color: var(--iqr-color-bg-raised);
}

.iqr-anel > span {
  position: relative;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
  font-variant-numeric: tabular-nums;
}

.iqr-anel--lg {
  inline-size: 6rem;
  block-size: 6rem;
}

.iqr-anel--lg > span {
  font-size: var(--iqr-size-lg);
}

/* --- Passos ------------------------------------------------------------- */
/* Lista numerada em linha: "1 Comprar → 2 Acessar → 3 Estudar". */

.iqr-passos {
  display: grid;
  gap: var(--iqr-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: passo;
}

@media (min-width: 48rem) {
  .iqr-passos {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }
}

.iqr-passos > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-5);
  counter-increment: passo;
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
}

.iqr-passos > li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-bold);
  line-height: 1;
  background-image: var(--iqr-brand-gradient-texto);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--iqr-color-brand-contrast);
}

.iqr-passos__titulo {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

.iqr-passos__texto {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* --- Bloco de recurso --------------------------------------------------- */
/* Ícone + título + frase. Para "benefícios" e listas de funcionalidades. */

.iqr-recurso {
  display: flex;
  gap: var(--iqr-space-4);
  align-items: flex-start;
}

.iqr-recurso__icone {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-brand-soft);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-brand-contrast) 30%, transparent);
  color: var(--iqr-color-brand-contrast);
}

.iqr-recurso__icone svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}

.iqr-recurso__icone--cyan {
  background-color: var(--iqr-color-accent-cyan-soft);
  border-color: color-mix(in srgb, var(--iqr-color-accent-cyan) 30%, transparent);
  color: var(--iqr-color-accent-cyan);
}

.iqr-recurso__icone--azul {
  background-color: color-mix(in srgb, var(--iqr-color-accent-default) 14%, transparent);
  border-color: color-mix(in srgb, var(--iqr-color-accent-default) 30%, transparent);
  color: var(--iqr-color-accent-default);
}

.iqr-recurso__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  min-inline-size: 0;
}

.iqr-recurso__titulo {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

.iqr-recurso__descricao {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* --- Tecla -------------------------------------------------------------- */

kbd.iqr-kbd {
  padding: 0.1em 0.45em;
  border-radius: var(--iqr-radius-sm);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  border-block-end-width: 2px;
  background-color: var(--iqr-color-bg-sunken);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-secondary);
}

/* --- Linha do tempo ----------------------------------------------------- */

.iqr-linha-do-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.iqr-linha-do-tempo > li {
  position: relative;
  padding-inline-start: var(--iqr-space-8);
  padding-block-end: var(--iqr-space-5);
  font-size: var(--iqr-size-sm);
}

.iqr-linha-do-tempo > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.55rem;
  inset-block-start: 0.35rem;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: 50%;
  background-image: var(--iqr-brand-gradient-acao);
  box-shadow: 0 0 0 3px var(--iqr-color-bg-raised);
}

.iqr-linha-do-tempo > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.85rem;
  inset-block-start: 1.2rem;
  inset-block-end: 0;
  inline-size: 1px;
  background-color: var(--iqr-color-border-subtle);
}

.iqr-linha-do-tempo > li:last-child::after {
  display: none;
}

.iqr-linha-do-tempo__quando {
  display: block;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  margin-block-end: var(--iqr-space-1);
}

/* --- Página de erro ------------------------------------------------------- */

.iqr-vazio--erro {
  position: relative;
  padding-block: var(--iqr-space-12);
}

.iqr-erro__codigo {
  position: absolute;
  inset-block-start: var(--iqr-space-2);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: var(--iqr-weight-bold);
  line-height: 1;
  letter-spacing: var(--iqr-tracking-tight);
  background-image: var(--iqr-brand-gradient-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

/* --- Tabela responsiva: no celular, cada linha vira um card --------------
   Mobile-first: o card é o estado base; a tabela aparece de 48rem para cima.
   Cada <td> leva data-rotulo="Coluna", que vira o rótulo do campo no card. */

.iqr-tabela--responsiva,
.iqr-tabela--responsiva tbody,
.iqr-tabela--responsiva tr,
.iqr-tabela--responsiva td {
  display: block;
}

.iqr-tabela--responsiva thead {
  display: none;
}

.iqr-tabela--responsiva {
  min-inline-size: 0;
  border-collapse: separate;
}

.iqr-tabela--responsiva tbody {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-tabela--responsiva tr {
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-raised);
}

.iqr-tabela--responsiva tr:hover {
  background-color: var(--iqr-color-bg-raised);
}

.iqr-tabela--responsiva td {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-2) 0;
  border: 0;
  text-align: end;
}

.iqr-tabela--responsiva td::before {
  content: attr(data-rotulo);
  flex: none;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
  text-align: start;
}

/* A célula principal (título) e a de ações ocupam a linha inteira. */
.iqr-tabela--responsiva td.iqr-tabela__principal,
.iqr-tabela--responsiva td.iqr-tabela__acoes {
  display: block;
  text-align: start;
}

.iqr-tabela--responsiva td.iqr-tabela__principal::before,
.iqr-tabela--responsiva td.iqr-tabela__acoes::before {
  content: none;
}

.iqr-tabela--responsiva td.iqr-tabela__principal {
  padding-block-end: var(--iqr-space-3);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-weight: var(--iqr-weight-medium);
}

.iqr-tabela--responsiva td.iqr-tabela__acoes {
  padding-block-start: var(--iqr-space-3);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-tabela--responsiva .iqr-tabela__sub {
  display: block;
}

@media (min-width: 48rem) {
  .iqr-tabela--responsiva { display: table; }
  .iqr-tabela--responsiva thead { display: table-header-group; }
  .iqr-tabela--responsiva tbody { display: table-row-group; }
  .iqr-tabela--responsiva tr {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }
  .iqr-tabela--responsiva td,
  .iqr-tabela--responsiva td.iqr-tabela__principal,
  .iqr-tabela--responsiva td.iqr-tabela__acoes {
    display: table-cell;
    text-align: start;
    padding: var(--iqr-space-3) var(--iqr-space-4);
    border: 0;
    border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
    font-weight: inherit;
  }
  .iqr-tabela--responsiva td::before { content: none; }
  .iqr-tabela--responsiva td.iqr-tabela__num { text-align: end; }
  .iqr-tabela--responsiva td.iqr-tabela__acoes { text-align: end; }
  .iqr-tabela--responsiva tr:hover { background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 3%, transparent); }
}

/* Célula com nome + linha de apoio, e avatar à esquerda. */
.iqr-tabela__pessoa {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  min-inline-size: 0;
}

.iqr-tabela__pessoa > .iqr-avatar { flex: none; }

.iqr-tabela__pessoa > div { min-inline-size: 0; }

/* --- Filtros avançados, recolhidos --------------------------------------- */

.iqr-filtros-avancados {
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-surface);
}

.iqr-filtros-avancados > summary {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-text-secondary);
}

.iqr-filtros-avancados > summary::-webkit-details-marker { display: none; }

.iqr-filtros-avancados > summary::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-filtros-avancados[open] > summary::after { transform: rotate(-135deg); }

.iqr-filtros-avancados__painel {
  padding: var(--iqr-space-2) var(--iqr-space-4) var(--iqr-space-4);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

/* Contagem ao lado do resumo: "Filtros avançados · 2 ativos". */
.iqr-filtros-avancados__ativos {
  color: var(--iqr-color-brand-contrast);
}

/* --- Origem do acesso: um card por origem --------------------------------- */

.iqr-origens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: var(--iqr-space-3);
}

.iqr-origem {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  padding: var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-raised);
}

.iqr-origem strong {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xl);
  line-height: 1;
}

.iqr-origem span {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-origem--vazia {
  opacity: 0.55;
}

/* Passo atual e passo feito, no fluxo em etapas. */
.iqr-passos > li.iqr-passos--atual {
  border-color: var(--iqr-color-brand-contrast);
  box-shadow: var(--iqr-shadow-glow);
}

.iqr-passos > li.iqr-passos--feito::before {
  content: "✓";
  background-image: none;
  -webkit-text-fill-color: var(--iqr-color-feedback-success);
  color: var(--iqr-color-feedback-success);
}

/* Linha em destaque numa lista administrativa: o produto principal entre os
   bônus, o item que dá sentido aos outros. */
.iqr-linha-admin--principal {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 35%, transparent);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--iqr-color-brand-contrast) 10%, transparent), transparent 45%);
}

/* Texto que precisa quebrar em qualquer lugar (hash, ID longo) sem estourar
   a coluna: complementa .iqr-mono. */
.iqr-quebra {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Painel de menu que carrega um formulário curto (motivo, detalhes de um
   envio): mais largo que o menu de ações, sem passar da tela do celular. */
.iqr-menu__painel--largo {
  min-inline-size: min(20rem, calc(100vw - 2rem));
}

/* Célula que não pode espremer (valor em moeda numa tabela densa). */
.iqr-tabela td.iqr-tabela__minimo,
.iqr-tabela th.iqr-tabela__minimo {
  min-inline-size: 8rem;
}

/* Célula de texto corrido numa tabela (o resultado de uma ação, uma
   observação): quebra linha em vez de alargar a tabela inteira. */
.iqr-tabela__texto {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .iqr-tabela td.iqr-tabela__texto {
    min-inline-size: 16rem;
    max-inline-size: 30rem;
  }
}

/* Ficha empilhada: rótulo em cima do valor, para valores longos (URL,
   lista de eventos) numa coluna estreita. */
.iqr-ficha-dados--empilhada {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--iqr-space-1);
}

.iqr-ficha-dados--empilhada dd + dt {
  margin-block-start: var(--iqr-space-2);
}

/* Valor que não pode quebrar no meio (um nome de evento, um código). */
.iqr-nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Abas em pílula quebram linha no celular em vez de esconder opções. */
.iqr-abas--pilula {
  flex-wrap: wrap;
}

/* Tabela com colunas de largura fixa (por <colgroup>): sete colunas cabem
   na tela em vez de empurrar a última para a rolagem. Vale só no layout de
   tabela; no celular as linhas viram cards. */
@media (min-width: 48rem) {
  .iqr-tabela--fixa {
    table-layout: fixed;
  }

  .iqr-tabela--fixa td,
  .iqr-tabela--fixa th {
    overflow-wrap: anywhere;
  }
}

/* ===== design-system\css\22-home.css ===== */
/* ==========================================================================
   22 — Home da plataforma
   Herói com bloco visual, benefícios, como funciona, prova de valor.
   ========================================================================== */

/* --- Herói --------------------------------------------------------------- */

.iqr-home-hero {
  display: grid;
  gap: var(--iqr-space-10);
  align-items: center;
}

@media (min-width: 64rem) {
  .iqr-home-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--iqr-space-12);
  }
}

.iqr-home-hero__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-5);
}

.iqr-home-hero__texto h1 {
  font-size: var(--iqr-size-display-lg);
  max-inline-size: 16ch;
}

@media (min-width: 64rem) {
  .iqr-home-hero__texto h1 {
    font-size: var(--iqr-size-display-xl);
  }
}

.iqr-home-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-3);
}

/* Fatos curtos abaixo dos botões: contados, nunca inventados. */
.iqr-home-hero__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2) var(--iqr-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-home-hero__fatos li {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-home-hero__fatos svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--iqr-color-accent-cyan);
}

/* --- Bloco visual: uma "janela" da plataforma ---------------------------- */
/* Não é imagem de banco. É a interface da própria plataforma, em miniatura,
   desenhada com os mesmos componentes: um card de curso, uma barra de
   progresso, um quiz. Diz "isto é o que você recebe" sem prometer nada. */

.iqr-vitrine {
  position: relative;
  display: grid;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  border-radius: var(--iqr-radius-2xl);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid transparent;
  box-shadow: var(--iqr-shadow-glow);
}

.iqr-vitrine::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--iqr-brand-gradient-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Um brilho suave atrás da vitrine. */
.iqr-vitrine::after {
  content: "";
  position: absolute;
  inset: 10% -8% -12% -8%;
  z-index: -1;
  border-radius: 50%;
  background-image: radial-gradient(closest-side, rgba(108, 59, 255, 0.28), rgba(34, 211, 238, 0.06) 60%, transparent);
  filter: blur(18px);
  pointer-events: none;
}

.iqr-vitrine__barra {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding-block-end: var(--iqr-space-2);
}

.iqr-vitrine__barra span {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background-color: var(--iqr-color-border-default);
}

.iqr-vitrine__barra span:first-child { background-color: var(--iqr-color-brand-default); }
.iqr-vitrine__barra span:nth-child(2) { background-color: var(--iqr-color-accent-oficial); }
.iqr-vitrine__barra span:nth-child(3) { background-color: var(--iqr-color-accent-cyan-strong); }

.iqr-vitrine__barra em {
  margin-inline-start: auto;
  font-style: normal;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-vitrine__grade {
  display: grid;
  gap: var(--iqr-space-3);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.iqr-vitrine__card {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-4);
  border-radius: var(--iqr-radius-lg);
  background-color: color-mix(in srgb, var(--iqr-color-bg-page) 70%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-vitrine__card--capa {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--iqr-space-4);
}

.iqr-vitrine__capa {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 5.5rem;
  aspect-ratio: 16 / 10;
  border-radius: var(--iqr-radius-md);
  background-image: var(--iqr-brand-gradient-tri);
}

.iqr-vitrine__capa img {
  inline-size: 40%;
}

.iqr-vitrine__titulo {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

.iqr-vitrine__rotulo {
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-accent-cyan);
}

.iqr-vitrine__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-vitrine__lista li {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-vitrine__lista li::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  border-radius: 50%;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
}

.iqr-vitrine__lista li.feito::before {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--iqr-color-feedback-success) 25%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
}

.iqr-vitrine__lista li.atual::before {
  border-color: transparent;
  background-image: var(--iqr-brand-gradient-acao);
}

.iqr-vitrine__lista li.atual {
  color: var(--iqr-color-text-primary);
}

.iqr-vitrine__numero {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-bold);
  line-height: 1;
  background-image: var(--iqr-brand-gradient-texto);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--iqr-color-brand-contrast);
}

.iqr-vitrine__quiz {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
}

.iqr-vitrine__quiz span {
  padding: var(--iqr-space-1) var(--iqr-space-2);
  border-radius: var(--iqr-radius-sm);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-size: var(--iqr-size-xs);
}

.iqr-vitrine__quiz span.certa {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-success) 50%, transparent);
  color: var(--iqr-color-feedback-success);
}

@media (max-width: 30rem) {
  .iqr-vitrine__grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Benefícios ---------------------------------------------------------- */

.iqr-beneficios {
  display: grid;
  gap: var(--iqr-space-4);
}

@media (min-width: 40rem) {
  .iqr-beneficios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .iqr-beneficios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.iqr-beneficio {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-5);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-beneficio__icone {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--iqr-radius-md);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-brand-contrast) 30%, transparent);
  color: var(--iqr-color-accent-cyan);
}

.iqr-beneficio__icone svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}

.iqr-beneficio h3 {
  margin: 0;
  font-size: var(--iqr-size-base);
}

.iqr-beneficio p {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* --- Prova de valor: seção institucional --------------------------------- */

.iqr-institucional {
  position: relative;
  display: grid;
  gap: var(--iqr-space-6);
  padding: var(--iqr-space-8) var(--iqr-space-6);
  border-radius: var(--iqr-radius-2xl);
  background-image: var(--iqr-brand-gradient-superficie);
  border: var(--iqr-border-width-hairline) solid transparent;
  overflow: hidden;
}

.iqr-institucional::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--iqr-brand-gradient-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 64rem) {
  .iqr-institucional {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: var(--iqr-space-10);
    align-items: center;
  }
}

.iqr-institucional__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-institucional__texto h2 {
  font-size: var(--iqr-size-display-sm);
}

.iqr-institucional__lista {
  display: grid;
  gap: var(--iqr-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.iqr-institucional__lista li {
  display: flex;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  background-color: color-mix(in srgb, var(--iqr-color-bg-page) 55%, transparent);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-institucional__lista svg {
  flex: none;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.1em;
  color: var(--iqr-color-accent-cyan);
}

.iqr-institucional__lista strong {
  display: block;
  color: var(--iqr-color-text-primary);
}

/* --- Chamada final -------------------------------------------------------- */

.iqr-chamada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iqr-space-5);
  text-align: center;
  padding: var(--iqr-space-10) var(--iqr-space-6);
  border-radius: var(--iqr-radius-2xl);
  background-color: var(--iqr-color-bg-raised);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-chamada h2 {
  max-inline-size: 22ch;
}

.iqr-chamada p {
  margin: 0;
  max-inline-size: 48ch;
  color: var(--iqr-color-text-muted);
}


/* Apresentação de aprendizado: imagens ilustrativas e demonstração pública. */
.iqr-home-visual {
  margin: 0;
  min-inline-size: 0;
  overflow: hidden;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-2xl);
  background: var(--iqr-color-bg-sunken);
  box-shadow: var(--iqr-shadow-card);
}
.iqr-home-visual img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: right center;
}
.iqr-home-visual figcaption {
  padding: var(--iqr-space-5);
  font-weight: var(--iqr-weight-semibold);
}
.iqr-home-visual figcaption span,
.iqr-home-nota {
  display: block;
  margin-block-start: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-regular);
  color: var(--iqr-color-text-muted);
}
.iqr-home-experiencia,
.iqr-home-faq {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: start;
}
.iqr-home-experiencia > *, .iqr-home-faq > * { min-inline-size: 0; }
.iqr-home-metodo {
  display: grid;
  gap: var(--iqr-space-5);
  padding-inline-start: var(--iqr-space-6);
  margin: 0;
}
.iqr-home-metodo li { padding-inline-start: var(--iqr-space-2); }
.iqr-home-metodo li::marker { color: var(--iqr-color-accent-cyan); font-weight: var(--iqr-weight-semibold); }
.iqr-home-metodo strong, .iqr-home-metodo span { display: block; }
.iqr-home-metodo span { font-size: var(--iqr-size-sm); color: var(--iqr-color-text-muted); }
.iqr-home-quiz {
  padding: var(--iqr-space-6);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  border-radius: var(--iqr-radius-2xl);
  background: var(--iqr-color-bg-raised);
  box-shadow: var(--iqr-shadow-card);
}
.iqr-home-quiz fieldset { min-inline-size: 0; border: 0; padding: 0; margin: 0; }
.iqr-home-quiz legend {
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-semibold);
  margin-block: var(--iqr-space-3) var(--iqr-space-5);
  padding: 0;
}
.iqr-home-quiz__opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  margin-block-end: var(--iqr-space-3);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  border-radius: var(--iqr-radius-md);
  color: var(--iqr-color-text-secondary);
  font-size: var(--iqr-size-sm);
  cursor: pointer;
}
.iqr-home-quiz__opcao input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: var(--iqr-space-1);
  accent-color: var(--iqr-color-brand-default);
}
.iqr-home-quiz__opcao:has(input:checked) { border-color: var(--iqr-color-accent-cyan); background: var(--iqr-color-bg-sunken); }
.iqr-home-quiz__opcao:focus-within { outline: 2px solid var(--iqr-color-border-focus); outline-offset: 3px; }
.iqr-home-quiz [hidden] { display: none; }
.iqr-home-quiz__feedback p {
  padding: var(--iqr-space-4);
  border-inline-start: 3px solid var(--iqr-color-accent-cyan);
  background: var(--iqr-color-bg-sunken);
  font-size: var(--iqr-size-sm);
}
.iqr-home-quiz__resposta summary,
.iqr-home-faq summary {
  padding-block: var(--iqr-space-4);
  cursor: pointer;
  font-weight: var(--iqr-weight-semibold);
}
.iqr-home-faq details { border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default); }
.iqr-home-faq details p { padding-block-end: var(--iqr-space-5); color: var(--iqr-color-text-secondary); }
.iqr-home-estudo { margin: 0 0 var(--iqr-space-6); }
.iqr-home-estudo img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 40%; border-radius: var(--iqr-radius-2xl); }
.iqr-home-estudo figcaption { margin-block-start: var(--iqr-space-3); font-size: var(--iqr-size-sm); color: var(--iqr-color-text-secondary); }
.iqr-home-estudo figcaption span { color: var(--iqr-color-text-muted); }
.iqr-home-resultados { margin-block: var(--iqr-space-5); }
.iqr-home-resultados ul { display: grid; gap: var(--iqr-space-3); padding: 0; margin-block: var(--iqr-space-3); list-style: none; }
.iqr-home-resultados li { display: flex; align-items: flex-start; gap: var(--iqr-space-3); }
.iqr-home-resultados svg, .iqr-home-diferencial svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--iqr-color-accent-cyan); }
.iqr-home-diferencial { display: flex; align-items: flex-start; gap: var(--iqr-space-3); padding: var(--iqr-space-4); margin-block: var(--iqr-space-4); border-radius: var(--iqr-radius-md); background: var(--iqr-color-bg-raised); color: var(--iqr-color-text-secondary); font-size: var(--iqr-size-sm); }
.iqr-home-diferencial strong { display: block; color: var(--iqr-color-text-primary); }
@media (min-width: 64rem) {
  .iqr-home-experiencia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--iqr-space-12); }
  .iqr-home-faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--iqr-space-12); }
  .iqr-home-hero__texto h1 { max-inline-size: 13ch; }
  .iqr-home-quiz { padding: var(--iqr-space-8); }
}

/* ===== design-system\css\23-suporte-certificado.css ===== */
/* ==========================================================================
   23 — Conversa de suporte e certificado
   ==========================================================================
   A conversa é uma lista de mensagens, aluno de um lado e equipe do outro.
   O certificado é uma página impressa: na tela ele aparece dentro de uma
   moldura; na impressão, só ele sobra. */

/* --- Conversa (chat persistente) ------------------------------------------
   A conversa é uma coluna de balões: os meus à direita, os da outra parte à
   esquerda, notas internas em faixa própria e eventos do sistema ao centro.
   A mesma marcação serve ao aluno e à equipe; só muda quem é "eu". */

.iqr-chat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-chat__balao {
  position: relative;
  align-self: flex-start;
  max-inline-size: min(46rem, 88%);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-lg);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-raised);
  min-inline-size: 0;
}

.iqr-chat__balao--deles {
  border-start-start-radius: var(--iqr-radius-sm);
}

.iqr-chat__balao--minha {
  align-self: flex-end;
  border-start-end-radius: var(--iqr-radius-sm);
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 45%, transparent);
  background-color: var(--iqr-color-brand-soft);
}

/* Nota interna: faixa inteira, tracejada, em tom de aviso. Impossível
   confundir com uma mensagem que foi para o aluno. */
.iqr-chat__balao--nota {
  align-self: stretch;
  max-inline-size: none;
  border: 1px dashed color-mix(in srgb, var(--iqr-color-feedback-warning) 60%, transparent);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 9%, var(--iqr-color-bg-raised));
}

.iqr-chat__balao--nota .iqr-chat__meta strong {
  color: var(--iqr-color-feedback-warning);
}

/* Evento do sistema: uma linha centrada, sem balão. */
.iqr-chat__balao--sistema {
  align-self: center;
  max-inline-size: none;
  padding: var(--iqr-space-1) var(--iqr-space-3);
  border: 0;
  background: transparent;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  text-align: center;
}

.iqr-chat__balao--sistema time {
  color: var(--iqr-color-text-muted);
}

.iqr-chat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  margin: 0 0 var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-secondary);
}

.iqr-chat__meta strong {
  color: var(--iqr-color-text-primary);
  font-size: var(--iqr-size-sm);
}

.iqr-chat__meta time {
  margin-inline-start: auto;
  color: var(--iqr-color-text-muted);
  white-space: nowrap;
}

.iqr-chat__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-text-primary);
  overflow-wrap: anywhere;
}

.iqr-chat__texto p {
  margin: 0;
}

.iqr-chat__anexos {
  list-style: none;
  margin: var(--iqr-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2);
}

.iqr-chat__anexo {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  max-inline-size: 100%;
  padding: var(--iqr-space-1) var(--iqr-space-3);
  border-radius: var(--iqr-radius-full);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-default);
  background-color: var(--iqr-color-bg-sunken);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-primary);
  text-decoration: none;
}

.iqr-chat__anexo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 16rem;
}

.iqr-chat__anexo small {
  color: var(--iqr-color-text-muted);
}

.iqr-chat__anexo svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  flex: none;
}

.iqr-chat__anexo:hover {
  border-color: var(--iqr-color-brand-contrast);
}

/* "Novas mensagens": a linha que marca onde a leitura parou. */
.iqr-chat__separador {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
  margin: var(--iqr-space-2) 0;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iqr-color-brand-contrast);
}

.iqr-chat__separador::before,
.iqr-chat__separador::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 45%, transparent);
}

.iqr-chat__fim {
  block-size: 0;
  padding: 0;
  margin: 0;
}

.iqr-chat__aviso {
  align-items: center;
}

/* Caixa de resposta: fica junto da conversa, sem virar formulário burocrático. */
.iqr-chat__composer .iqr-textarea {
  min-block-size: 5.5rem;
}

.iqr-dropzone--compacta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  text-align: start;
}

.iqr-dropzone--compacta .iqr-dropzone__icone {
  inline-size: 2rem;
  block-size: 2rem;
}

.iqr-dropzone--compacta .iqr-dropzone__texto {
  font-size: var(--iqr-size-sm);
}

.iqr-dropzone--compacta .iqr-dropzone__escolhido:empty {
  display: none;
}

.iqr-dropzone--compacta .iqr-dropzone__escolhido {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-secondary);
}

/* --- Minhas conversas (aluno) --------------------------------------------- */

.iqr-conversas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-conversas__item {
  list-style: none;
}

.iqr-conversas__link {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-4) var(--iqr-space-5);
  border-radius: var(--iqr-radius-lg);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-raised);
  color: var(--iqr-color-text-primary);
  text-decoration: none;
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard), transform var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-conversas__link:hover {
  border-color: var(--iqr-color-brand-contrast);
  transform: translateY(-1px);
}

.iqr-conversas__item--nova .iqr-conversas__link {
  border-color: color-mix(in srgb, var(--iqr-color-brand-contrast) 55%, transparent);
  box-shadow: var(--iqr-shadow-brand-soft, none);
}

.iqr-conversas__item--encerrada .iqr-conversas__link {
  opacity: 0.8;
}

.iqr-conversas__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-conversas__assunto {
  font-size: var(--iqr-size-md);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-conversas__meta {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* Lista simples com marcador discreto (cards de apoio). */
.iqr-lista-simples {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

/* Prévia da última mensagem numa linha da lista do painel. */
.iqr-linha-admin__previa {
  margin: var(--iqr-space-1) 0 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Certificado ---------------------------------------------------------- */

.iqr-certificado {
  position: relative;
  padding: var(--iqr-space-2);
  border-radius: var(--iqr-radius-xl);
  background-image: var(--iqr-brand-gradient-tri);
  box-shadow: var(--iqr-shadow-brand);
  color: var(--iqr-color-text-primary);
}

.iqr-certificado__moldura {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: clamp(var(--iqr-space-8), 6vw, var(--iqr-space-12)) clamp(var(--iqr-space-5), 6vw, var(--iqr-space-12));
  border-radius: calc(var(--iqr-radius-xl) - var(--iqr-space-2));
  background-color: var(--iqr-color-bg-page);
  text-align: center;
  overflow: hidden;
}

.iqr-certificado__moldura::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--iqr-brand-gradient-atmosfera);
  opacity: 0.6;
  pointer-events: none;
}

.iqr-certificado__moldura > * {
  position: relative;
}

.iqr-certificado__cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--iqr-space-4);
  margin-block-end: var(--iqr-space-4);
}

.iqr-certificado__logo {
  inline-size: 10rem;
  block-size: auto;
}

.iqr-certificado__texto {
  margin: 0;
  color: var(--iqr-color-text-secondary);
  font-size: var(--iqr-size-md);
}

.iqr-certificado__nome {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: var(--iqr-weight-bold);
  letter-spacing: var(--iqr-tracking-tight);
  line-height: var(--iqr-leading-tight);
}

.iqr-certificado__curso {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: var(--iqr-weight-semibold);
  background-image: var(--iqr-brand-gradient-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.iqr-certificado__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iqr-space-6) var(--iqr-space-10);
  margin-block-start: var(--iqr-space-8);
  padding-block-start: var(--iqr-space-6);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  inline-size: 100%;
}

.iqr-certificado__rotulo {
  margin: 0 0 var(--iqr-space-1);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-certificado__codigo {
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-primary);
}

.iqr-certificado__carimbo {
  position: absolute;
  inset-block-start: 45%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  margin: 0;
  padding: var(--iqr-space-2) var(--iqr-space-6);
  border: 4px solid var(--iqr-color-feedback-danger);
  border-radius: var(--iqr-radius-md);
  color: var(--iqr-color-feedback-danger);
  font-family: var(--iqr-font-display);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: var(--iqr-weight-bold);
  letter-spacing: var(--iqr-tracking-wide);
  opacity: 0.85;
}

.iqr-certificado--revogado .iqr-certificado__moldura {
  filter: grayscale(0.6);
}

/* Card de certificado revogado na lista do aluno. */
.iqr-card--apagado {
  opacity: 0.7;
}

/* Barra de progresso em tom de aviso (custos ao lado da receita). */
.iqr-progresso--aviso::-webkit-progress-value {
  background-image: none;
  background-color: var(--iqr-color-feedback-warning);
}

.iqr-progresso--aviso::-moz-progress-bar {
  background-image: none;
  background-color: var(--iqr-color-feedback-warning);
}

/* --- Impressão ------------------------------------------------------------ */

@media print {
  .iqr-nao-imprime,
  .iqr-header,
  .iqr-footer,
  .iqr-faixa-ambiente {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #111 !important;
  }

  .iqr-section {
    padding: 0 !important;
  }

  .iqr-certificado {
    box-shadow: none;
    padding: 0.5cm;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .iqr-certificado__moldura {
    background-color: #fff;
    color: #111;
  }

  .iqr-certificado__moldura::before {
    display: none;
  }

  .iqr-certificado__texto,
  .iqr-certificado__codigo,
  .iqr-certificado__nome {
    color: #111;
  }

  .iqr-certificado__rotulo {
    color: #555;
  }

  .iqr-certificado__curso {
    color: #4B24C7;
    background-image: none;
  }
}

/* ===== design-system\css\24-atendimento.css ===== */
/* ==========================================================================
   24 — Central de atendimento
   ==========================================================================
   Três colunas no desktop largo (fila, conversa, aluno); duas no médio
   (conversa, aluno); uma no celular. Produtividade primeiro: densidade
   maior que o resto do painel, pouco brilho, tudo à vista. */

.iqr-central {
  display: grid;
  gap: var(--iqr-space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.iqr-central__fila {
  display: none;
}

@media (min-width: 64rem) {
  .iqr-central--conversa {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }

  .iqr-central__coluna {
    position: sticky;
    inset-block-start: calc(3.5rem + var(--iqr-space-4));
    max-block-size: calc(100vh - 3.5rem - var(--iqr-space-8));
    overflow: auto;
    scrollbar-width: thin;
  }
}

@media (min-width: 90rem) {
  .iqr-central--conversa {
    grid-template-columns: 19rem minmax(0, 1fr) 22rem;
  }

  .iqr-central__fila {
    display: block;
  }
}

.iqr-central > * {
  min-inline-size: 0;
}

/* --- Fila --------------------------------------------------------------- */

.iqr-fila {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-fila__item a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--iqr-space-2) var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-raised);
  color: var(--iqr-color-text-primary);
  text-decoration: none;
  transition: border-color var(--iqr-duration-fast) var(--iqr-easing-standard);
}

.iqr-fila__item a:hover {
  border-color: var(--iqr-color-border-interactive);
}

.iqr-fila__item--aguarda a {
  border-inline-start: 3px solid var(--iqr-color-brand-contrast);
}

.iqr-fila__item--ativo a {
  border-color: var(--iqr-color-brand-contrast);
  background-color: var(--iqr-color-brand-soft);
}

.iqr-fila__ponto {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: 0.45rem;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-brand-contrast);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--iqr-color-brand-contrast) 25%, transparent);
}

.iqr-fila__ponto--lido {
  background-color: var(--iqr-color-border-default);
  box-shadow: none;
}

.iqr-fila__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  min-inline-size: 0;
}

.iqr-fila__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-fila__aluno {
  color: var(--iqr-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 14rem;
}

.iqr-fila__assunto {
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  overflow-wrap: anywhere;
}

.iqr-fila__previa {
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iqr-fila__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-1);
  margin-block-start: var(--iqr-space-1);
}

.iqr-fila__lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--iqr-space-1);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  white-space: nowrap;
}

.iqr-fila--compacta .iqr-fila__item a {
  padding: var(--iqr-space-2) var(--iqr-space-3);
  grid-template-columns: auto minmax(0, 1fr);
}

.iqr-fila--compacta .iqr-fila__lado {
  grid-column: 2;
  flex-direction: row;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-fila--compacta .iqr-fila__badges .iqr-badge:not(.iqr-badge--erro):not(.iqr-badge--aviso) {
  display: none;
}

/* --- Conversa no centro ------------------------------------------------- */

.iqr-central__conversa {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-conversa-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--iqr-space-3);
}

.iqr-conversa-cabeca h1 {
  margin: 0;
  font-size: var(--iqr-size-xl);
}

.iqr-acoes-conversa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-acoes-conversa form {
  display: contents;
}

/* Painel recolhível de uma ação (transferir, escalar): mesmo menu do
   design system, alinhado à esquerda. */
.iqr-acoes-conversa .iqr-menu__painel {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

/* Caixa de resposta com abas: resposta pública e nota interna. */
.iqr-composer {
  padding: 0;
  overflow: hidden;
}

.iqr-composer__abas {
  padding: 0 var(--iqr-space-4);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-composer__abas [role="tab"][aria-selected="true"] {
  color: var(--iqr-color-text-primary);
  border-block-end-color: var(--iqr-color-brand-contrast);
}

.iqr-composer__painel {
  padding: var(--iqr-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-composer__painel--nota {
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 6%, transparent);
}

.iqr-composer__painel--nota .iqr-textarea {
  border-style: dashed;
}

.iqr-composer__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-composer__linha .iqr-select {
  flex: 1 1 14rem;
  max-inline-size: 24rem;
}

.iqr-composer__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
}

.iqr-composer__acoes .iqr-dropzone {
  flex: 1 1 100%;
}

/* --- Ficha lateral do aluno --------------------------------------------- */

.iqr-ficha-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-ficha-lateral__bloco {
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-raised);
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  min-inline-size: 0;
}

.iqr-ficha-lateral__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-2);
  margin: 0;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-ficha-lateral__titulo a {
  font-weight: var(--iqr-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.iqr-ficha-lateral .iqr-ficha-dados {
  font-size: var(--iqr-size-xs);
  gap: var(--iqr-space-1) var(--iqr-space-3);
}

.iqr-ficha-lateral__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
}

.iqr-ficha-lateral__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-1) var(--iqr-space-2);
}

.iqr-ficha-lateral__lista li > strong,
.iqr-ficha-lateral__lista li > a {
  flex: 1 1 100%;
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-medium);
  overflow-wrap: anywhere;
}

.iqr-ficha-lateral__lista li > span {
  color: var(--iqr-color-text-muted);
}

.iqr-ficha-lateral__cabeca {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-3);
}

.iqr-ficha-lateral__cabeca > div {
  min-inline-size: 0;
}

.iqr-ficha-lateral__cabeca strong {
  display: block;
  overflow-wrap: anywhere;
}

.iqr-ficha-lateral__cabeca span {
  display: block;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  overflow-wrap: anywhere;
}

/* --- Semáforo do diagnóstico ------------------------------------------- */

.iqr-semaforo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--iqr-space-2);
}

.iqr-semaforo li {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-2) var(--iqr-space-3);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-sunken);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-secondary);
}

.iqr-semaforo strong {
  display: block;
  color: var(--iqr-color-text-primary);
  font-size: var(--iqr-size-sm);
}

.iqr-semaforo__luz {
  flex: none;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-border-default);
}

.iqr-semaforo__luz--verde { background-color: var(--iqr-color-feedback-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iqr-color-feedback-success) 25%, transparent); }
.iqr-semaforo__luz--amarelo { background-color: var(--iqr-color-feedback-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iqr-color-feedback-warning) 25%, transparent); }
.iqr-semaforo__luz--vermelho { background-color: var(--iqr-color-feedback-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iqr-color-feedback-danger) 25%, transparent); }

.iqr-semaforo--grande {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.iqr-semaforo--grande li {
  padding: var(--iqr-space-3) var(--iqr-space-4);
  background-color: var(--iqr-color-bg-raised);
}

/* Bloco do diagnóstico: título com luz, linhas de checagem, problemas e ações. */
.iqr-diagnostico {
  display: grid;
  gap: var(--iqr-space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .iqr-diagnostico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iqr-diagnostico__largo {
    grid-column: 1 / -1;
  }
}

.iqr-checagens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
}

.iqr-checagens li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--iqr-space-2);
  align-items: start;
}

.iqr-checagens__marca {
  display: inline-grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--iqr-radius-full);
  font-size: 0.7rem;
  font-weight: var(--iqr-weight-bold);
  color: var(--iqr-color-bg-page);
  background-color: var(--iqr-color-border-default);
}

.iqr-checagens__marca--verde { background-color: var(--iqr-color-feedback-success); }
.iqr-checagens__marca--amarelo { background-color: var(--iqr-color-feedback-warning); }
.iqr-checagens__marca--vermelho { background-color: var(--iqr-color-feedback-danger); }

.iqr-checagens__rotulo {
  color: var(--iqr-color-text-muted);
  font-size: var(--iqr-size-xs);
}

.iqr-checagens__valor {
  color: var(--iqr-color-text-primary);
  overflow-wrap: anywhere;
}

.iqr-acoes-recomendadas {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-acao-recomendada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqr-space-2) var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-acao-recomendada__texto {
  flex: 1 1 16rem;
  min-inline-size: 0;
  font-size: var(--iqr-size-sm);
}

.iqr-acao-recomendada__texto strong {
  display: block;
  color: var(--iqr-color-text-primary);
}

.iqr-acao-recomendada__texto span {
  color: var(--iqr-color-text-muted);
  font-size: var(--iqr-size-xs);
}

.iqr-acao-recomendada--bloqueada {
  border-style: dashed;
  opacity: 0.85;
}


/* --- Página de diagnóstico: blocos à esquerda, ações fixas à direita --- */

.iqr-diagnostico-layout {
  display: grid;
  gap: var(--iqr-space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 80rem) {
  .iqr-diagnostico-layout {
    grid-template-columns: minmax(0, 1fr) 24rem;
  }

  .iqr-diagnostico-layout__acoes {
    position: sticky;
    top: calc(var(--iqr-space-4) + env(safe-area-inset-top, 0px));
    max-block-size: calc(100vh - var(--iqr-space-8));
    overflow-y: auto;
  }
}

.iqr-diagnostico-layout__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-acao-recomendada__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2);
  flex: 0 1 auto;
}

.iqr-acao-recomendada__form .iqr-input {
  flex: 1 1 10rem;
  min-inline-size: 0;
}

.iqr-semaforo li > span:last-child {
  min-inline-size: 0;
}

.iqr-card__title .iqr-semaforo__luz {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: var(--iqr-space-1);
}

.iqr-diagnostico .iqr-card__header {
  align-items: flex-start;
  flex-wrap: wrap;
}

.iqr-diagnostico .iqr-card__header > .iqr-text-muted {
  font-size: var(--iqr-size-xs);
}

/* --- Equipe: permissões agrupadas e matriz função × permissão ---------- */

.iqr-permissoes {
  display: grid;
  gap: var(--iqr-space-4);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.iqr-permissoes__grupo {
  margin: 0;
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-sunken);
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  min-inline-size: 0;
}

.iqr-permissoes__grupo legend {
  padding: 0 var(--iqr-space-1);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-permissoes__grupo small {
  color: var(--iqr-color-text-muted);
}

.iqr-checkbox--travada {
  opacity: 0.75;
  cursor: default;
}

.iqr-tabela--matriz th[scope="row"] {
  font-weight: var(--iqr-weight-regular);
  text-align: start;
}

.iqr-tabela--matriz .iqr-tabela__centro {
  text-align: center;
}

.iqr-tabela--matriz .iqr-tabela__grupo th {
  padding-block: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-tabela--matriz input[type="checkbox"] {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  accent-color: var(--iqr-color-action-primary-bg);
}

/* Botões de ação com o título do curso ou do produto: quebram linha no celular em vez de vazar. */
.iqr-acoes-recomendadas .iqr-button,
.iqr-diagnostico-layout__acoes .iqr-button {
  white-space: normal;
  text-align: start;
  max-inline-size: 100%;
}

/* Badge com o nome do produto: quebra linha em vez de vazar a tela. */
.iqr-badge--longo {
  white-space: normal;
  max-inline-size: 100%;
  text-align: start;
  line-height: 1.3;
}

/* Resumo do diagnóstico: luz, ícone e palavra, nunca só a cor. */
.iqr-semaforo--grande li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.iqr-semaforo__estado {
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-semaforo__estado--verde { color: var(--iqr-color-feedback-success); }
.iqr-semaforo__estado--amarelo { color: var(--iqr-color-feedback-warning); }
.iqr-semaforo__estado--vermelho { color: var(--iqr-color-feedback-danger); }

.iqr-semaforo__resumo {
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-secondary);
}

/* "Esta ação exige Supervisor": o bloco de escalada na lateral do diagnóstico. */
.iqr-escalada {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border: var(--iqr-border-width-hairline) dashed var(--iqr-color-feedback-warning);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 8%, var(--iqr-color-bg-sunken));
}

.iqr-escalada__titulo {
  margin: 0;
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

.iqr-escalada .iqr-lista-simples {
  font-size: var(--iqr-size-sm);
}

/* Faixa "assumido por" compacta e a guarda do compositor. */
.iqr-alerta--compacto {
  padding-block: var(--iqr-space-2);
}

.iqr-composer__guarda {
  margin-block-start: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
}

/* ===== design-system\css\25-documento-legal.css ===== */
/* ==========================================================================
   25 — Documento legal
   ==========================================================================
   Termos de uso, política de privacidade e política de cookies. São textos
   longos que ninguém lê por prazer: quem chega aqui quer achar UM parágrafo —
   o que fala do reembolso, o que fala dos dados do filho, o que fala do
   cancelamento. Por isso o índice fica fixo ao lado no desktop, a medida da
   linha é curta, e os títulos têm alvo de rolagem com folga.

   Nada aqui é decorativo. A hierarquia vem do tamanho e do espaço, não de
   caixas coloridas: página jurídica que parece anúncio perde a credibilidade
   que deveria construir. */

.iqr-legal {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .iqr-legal {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--iqr-space-10);
  }
}

/* --- Índice ---------------------------------------------------------------
   No celular ele vem antes do texto, recolhido num <details>: é um atalho,
   não um obstáculo entre a pessoa e a primeira linha. No desktop acompanha a
   rolagem. */

.iqr-legal__indice {
  position: static;
  padding: var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-surface);
}

@media (min-width: 64rem) {
  .iqr-legal__indice {
    position: sticky;
    inset-block-start: var(--iqr-space-6);
    max-block-size: calc(100vh - var(--iqr-space-12));
    overflow-y: auto;
  }
}

.iqr-legal__indice > summary {
  cursor: pointer;
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

/* No desktop o índice está sempre aberto: o <details> vira um bloco comum e
   o resumo deixa de ser clicável para leitor de tela e para o mouse. */
@media (min-width: 64rem) {
  .iqr-legal__indice > summary {
    list-style: none;
    cursor: default;
    pointer-events: none;
  }

  .iqr-legal__indice > summary::-webkit-details-marker {
    display: none;
  }
}

.iqr-legal__indice ol {
  list-style: none;
  margin: var(--iqr-space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--iqr-space-1);
  counter-reset: secao;
}

.iqr-legal__indice li {
  counter-increment: secao;
}

/* Só os links DA LISTA numerada recebem o número. O mesmo painel lateral
   serve à página de contato com uma ficha (<dl>) dentro, e um "0." antes de
   cada e-mail é exatamente o tipo de erro que só aparece em produção. */
.iqr-legal__indice li > a {
  display: flex;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-2);
  border-radius: var(--iqr-radius-sm);
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-snug);
}

.iqr-legal__indice li > a::before {
  content: counter(secao) ".";
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.iqr-legal__indice li > a:hover {
  background-color: var(--iqr-color-bg-raised);
  color: var(--iqr-color-text-primary);
}

/* --- Corpo do documento --------------------------------------------------- */

.iqr-legal__corpo {
  max-inline-size: var(--iqr-measure-base);
  min-inline-size: 0;
}

.iqr-legal__corpo > * + * {
  margin-block-start: var(--iqr-space-4);
}

/* A âncora precisa parar ANTES do título, senão o cabeçalho fixo o engole. */
.iqr-legal__corpo h2 {
  margin-block-start: var(--iqr-space-10);
  scroll-margin-block-start: var(--iqr-space-8);
  font-size: var(--iqr-size-xl);
  line-height: var(--iqr-leading-tight);
}

.iqr-legal__corpo h3 {
  margin-block-start: var(--iqr-space-6);
  scroll-margin-block-start: var(--iqr-space-8);
  font-size: var(--iqr-size-lg);
}

.iqr-legal__corpo p,
.iqr-legal__corpo li {
  color: var(--iqr-color-text-secondary);
  line-height: var(--iqr-leading-relaxed);
}

.iqr-legal__corpo strong {
  color: var(--iqr-color-text-primary);
}

.iqr-legal__corpo ul,
.iqr-legal__corpo ol {
  padding-inline-start: var(--iqr-space-6);
  display: grid;
  gap: var(--iqr-space-2);
}

/* Tabela de 4 colunas com nome de cookie de 40 caracteres não cabe em 390px.
   Sem isto, o celular estica a viewport para 551–663px e a página inteira
   aparece "afastada" — medido no Edge com emulação de aparelho em 18/09. A
   tabela vira um bloco que rola de lado sozinho; o resto da página não sabe. */
.iqr-legal__corpo table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--iqr-size-sm);
}

.iqr-legal__corpo code {
  overflow-wrap: anywhere;
}

.iqr-legal__corpo th,
.iqr-legal__corpo td {
  text-align: start;
  vertical-align: top;
  padding: var(--iqr-space-3);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  color: var(--iqr-color-text-secondary);
}

.iqr-legal__corpo th {
  color: var(--iqr-color-text-primary);
  font-weight: var(--iqr-weight-semibold);
}

/* --- Selo de versão -------------------------------------------------------
   Data de vigência, última atualização e versão. Fica no alto porque é a
   primeira coisa que um advogado — ou um titular reclamando — procura. */

.iqr-legal__versao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2) var(--iqr-space-5);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-inline-start: var(--iqr-border-width-thick) solid var(--iqr-color-brand-contrast);
  border-radius: var(--iqr-radius-sm);
  background-color: var(--iqr-color-bg-raised);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-legal__versao strong {
  color: var(--iqr-color-text-secondary);
  font-weight: var(--iqr-weight-medium);
}

/* --- Trecho pendente de revisão -------------------------------------------
   Enquanto um dado cadastral não existir, o texto NÃO inventa: marca o vazio
   de forma visível, para ninguém publicar sem ver. */

.iqr-legal__revisar {
  display: inline-block;
  padding: 0 var(--iqr-space-2);
  border-radius: var(--iqr-radius-sm);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 22%, transparent);
  color: var(--iqr-color-text-primary);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
}

/* ===== design-system\css\26-leitor.css ===== */
/* ==========================================================================
   26 — Leitor de eBook
   ==========================================================================
   Uma página por vez, a imagem no centro, o mínimo em volta. O leitor existe
   para a página ser lida; tudo o mais — topo, sumário, navegação — é
   coadjuvante e fica discreto. No celular, a navegação vai para o rodapé, com
   alvos de toque grandes; a imagem ocupa a largura inteira.

   Sem JavaScript funciona inteiro: anterior/próxima são links, ir para a
   página é um formulário GET, o sumário é um <details>. Ampliar e tela cheia
   só aparecem com script ([data-so-com-js]). */

.iqr-leitor {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--iqr-color-bg-page);
}

/* --- Topo ------------------------------------------------------------------ */

.iqr-leitor__topo {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-2) var(--iqr-space-4);
  padding: var(--iqr-space-2) var(--iqr-space-4);
  background-color: color-mix(in srgb, var(--iqr-color-bg-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-leitor__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  min-block-size: 44px;
  color: var(--iqr-color-text-primary);
  text-decoration: none;
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-semibold);
  font-size: var(--iqr-size-sm);
  min-inline-size: 0;
}

.iqr-leitor__voltar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 40vw;
}

.iqr-leitor__posicao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--iqr-space-1) var(--iqr-space-3);
  margin: 0;
  color: var(--iqr-color-text-secondary);
  font-size: var(--iqr-size-sm);
  margin-inline-start: auto;
}

.iqr-leitor__capitulo {
  color: var(--iqr-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 28ch;
}

.iqr-leitor__percentual {
  font-variant-numeric: tabular-nums;
  color: var(--iqr-color-brand-contrast);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-leitor__ferramentas {
  position: relative;                    /* o painel do sumário se alinha ao grupo, não ao botão */
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
}

/* --- Sumário: um <details> com painel flutuante ----------------------------
   No desktop, o painel abre alinhado à borda direita do grupo de ferramentas.
   No celular, o grupo fica encostado à esquerda e um painel "para fora" do
   botão sairia da tela — medido em 18/09: só "p. 1 / p. 12" visíveis. Lá ele
   vira uma folha fixa, de margem a margem. */

.iqr-leitor__sumario {
  position: static;
}

.iqr-leitor__sumario > summary {
  list-style: none;
  cursor: pointer;
}

.iqr-leitor__sumario > summary::-webkit-details-marker {
  display: none;
}

.iqr-leitor__sumario-painel {
  position: fixed;
  inset-inline: var(--iqr-space-3);
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 7.5rem);
  z-index: 3;
  max-block-size: 60vh;
  overflow-y: auto;
  padding: var(--iqr-space-3);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-raised);
  box-shadow: var(--iqr-shadow-card);
}

@media (min-width: 64rem) {
  .iqr-leitor__sumario-painel {
    position: absolute;
    inset-inline: auto 0;
    inset-block-start: calc(100% + var(--iqr-space-2));
    inline-size: min(26rem, calc(100vw - 2 * var(--iqr-space-4)));
    max-block-size: 70vh;
  }
}

.iqr-leitor__sumario-painel ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--iqr-space-1);
  counter-reset: capitulo;
}

.iqr-leitor__sumario-painel li {
  counter-increment: capitulo;
}

.iqr-leitor__sumario-painel a {
  display: flex;
  align-items: baseline;
  gap: var(--iqr-space-2);
  min-block-size: 44px;
  padding: var(--iqr-space-2) var(--iqr-space-3);
  border-radius: var(--iqr-radius-sm);
  color: var(--iqr-color-text-secondary);
  text-decoration: none;
  font-size: var(--iqr-size-sm);
}

.iqr-leitor__sumario-painel a::before {
  content: counter(capitulo, decimal-leading-zero);
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.iqr-leitor__sumario-painel a:hover,
.iqr-leitor__sumario-atual a {
  background-color: var(--iqr-color-bg-surface);
  color: var(--iqr-color-text-primary);
}

.iqr-leitor__sumario-pagina {
  margin-inline-start: auto;
  color: var(--iqr-color-text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* --- O palco: a página --------------------------------------------------- */

.iqr-leitor__palco {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--iqr-space-3);
  overflow: auto;
}

/* 100% = a medida de leitura: a largura do palco no celular, 52rem no desktop.
   O zoom é um multiplicador (--iqr-zoom, definido pelo script); acima de 1 a
   página passa da largura do palco e o PALCO rola de lado — nunca a página do
   site. Sem script, --iqr-zoom não existe e vale 1. */
.iqr-leitor__pagina {
  display: block;
  flex: none;                             /* no palco flex, a página não encolhe: transborda e o palco rola */
  inline-size: calc(min(100%, 52rem) * var(--iqr-zoom, 1));
  max-inline-size: none;
  block-size: auto;
  border-radius: var(--iqr-radius-sm);
  box-shadow: var(--iqr-shadow-card);
  background-color: #fff;                 /* o papel da página é branco de propósito, em qualquer tema */
  transition: opacity 120ms ease;
}

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

/* Enquanto a próxima página não chega, a atual esmaece — sem sumir, para o
   olho não perder o lugar. */
.iqr-leitor__pagina--carregando {
  opacity: 0.55;
}

/* Com zoom acima da largura, o palco alinha a página à esquerda para a rolagem
   começar do começo da linha; abaixo, centraliza. */
.iqr-leitor__palco {
  justify-content: safe center;
}

/* --- Zoom por níveis: [ − ] [ 100% ▾ ] [ + ] ------------------------------- */

.iqr-leitor__zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-1);
}

.iqr-leitor__zoom-botao {
  min-inline-size: 44px;
  font-family: var(--iqr-font-display);
  font-weight: var(--iqr-weight-semibold);
  font-size: var(--iqr-size-md);
}

.iqr-leitor__zoom-botao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.iqr-leitor__zoom-menu {
  position: relative;
}

.iqr-leitor__zoom-menu > summary {
  list-style: none;
  cursor: pointer;
  min-inline-size: 5.5ch;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.iqr-leitor__zoom-menu > summary::-webkit-details-marker {
  display: none;
}

.iqr-leitor__zoom-opcoes {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--iqr-space-2));
  z-index: 3;
  display: grid;
  gap: var(--iqr-space-1);
  min-inline-size: 14rem;
  padding: var(--iqr-space-2);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-raised);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-leitor__zoom-opcoes .iqr-button {
  justify-content: flex-start;
  min-block-size: 44px;
}

/* No celular o menu de zoom não pode abrir para fora da tela: vira folha, como o sumário. */
@media (max-width: 64rem) {
  .iqr-leitor__zoom-opcoes {
    position: fixed;
    inset-inline: var(--iqr-space-3);
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 7.5rem);
  }
}

@media (min-width: 64rem) {
  .iqr-leitor__palco {
    padding: var(--iqr-space-6) var(--iqr-space-8);
  }
}

/* --- Navegação: fixa no rodapé, alvos grandes ----------------------------- */

.iqr-leitor__navegacao {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-2) var(--iqr-space-3);
  padding-block-end: calc(var(--iqr-space-2) + env(safe-area-inset-bottom, 0px));
  background-color: color-mix(in srgb, var(--iqr-color-bg-surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-leitor__navegacao > .iqr-button {
  min-block-size: 44px;
  justify-content: center;
}

.iqr-leitor__navegacao > .iqr-button:first-child { justify-self: start; }
.iqr-leitor__navegacao > .iqr-button:last-child { justify-self: end; }

.iqr-leitor__navegacao [aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.iqr-leitor__ir {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-1);
}

.iqr-leitor__ir .iqr-input {
  inline-size: 5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-block-size: 44px;
}

.iqr-leitor__ir-total {
  color: var(--iqr-color-text-muted);
  font-size: var(--iqr-size-sm);
  font-variant-numeric: tabular-nums;
}

.iqr-leitor__barra {
  inline-size: 100%;
  block-size: 3px;
  border-radius: 0;
}

/* --- Ainda processando ----------------------------------------------------- */

.iqr-leitor__aviso {
  max-inline-size: var(--iqr-measure-base);
  margin: var(--iqr-space-10) auto;
}

/* --- Tela cheia -----------------------------------------------------------
   Em tela cheia o leitor É a janela: o palco vira a área que rola (vertical e
   horizontal, com zoom), e topo e navegação ficam nas bordas. Fora dela, quem
   rola é o documento, e o palco só contém o transbordo horizontal. */

.iqr-leitor:fullscreen,
.iqr-leitor--tela-cheia {
  background-color: var(--iqr-color-bg-page);
  block-size: 100vh;
  block-size: 100dvh;
  min-block-size: 0;
}

.iqr-leitor:fullscreen .iqr-leitor__palco,
.iqr-leitor--tela-cheia .iqr-leitor__palco {
  min-block-size: 0;
  overflow: auto;
}

/* No celular, os botões viram só ícone (o rótulo fica no aria-label) e a
   barra passa a "auto 1fr auto": o seletor de página ocupa o meio, e nada
   empurra o "Próxima" para fora da tela — foi o que aconteceu em 390px. */
@media (max-width: 40rem) {
  .iqr-leitor__voltar span { max-inline-size: 30vw; }
  .iqr-leitor__capitulo { display: none; }
  .iqr-leitor__navegacao { grid-template-columns: auto 1fr auto; }
  .iqr-leitor__navegacao > .iqr-button { min-inline-size: 44px; padding-inline: var(--iqr-space-3); }
  .iqr-leitor__navegacao > .iqr-button span { display: none; }
  .iqr-leitor__ir { justify-content: center; min-inline-size: 0; }

  /* As ferramentas (sumário, zoom, tela cheia) ocupam uma linha inteira do
     topo, distribuídas, em vez de espremer-se ao lado do título — foi o que
     empurrou a página para 393px. Alvo de toque de 44px em tudo. */
  .iqr-leitor__ferramentas {
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .iqr-leitor__ferramentas .iqr-button { min-block-size: 44px; padding-inline: var(--iqr-space-2); }
  .iqr-leitor__zoom { gap: 0; }
}

/* ===== design-system\css\27-quiz-leitura.css ===== */
/* --- Quiz dentro do leitor (ADR 0022) ---------------------------------------
   O painel entra no MESMO palco da página: a imagem só fica escondida. Tem
   largura própria de leitura e não usa --iqr-zoom — o zoom é da página, não
   dos controles. Alternativas são rótulos inteiros clicáveis, sem estado de
   certo/errado antes da correção (o gabarito nem chega ao navegador). */

.iqr-quiz-area {
  flex: none;
  inline-size: min(100%, 40rem);
}

.iqr-quiz-area--carregando {
  opacity: 0.6;
}

.iqr-quiz {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-5);
  padding: var(--iqr-space-5);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-raised);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-quiz__cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
}

.iqr-quiz__rotulo {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iqr-color-accent-cyan);
}

.iqr-quiz__titulo {
  margin: 0;
  font-size: var(--iqr-size-xl);
  line-height: var(--iqr-leading-tight);
  text-wrap: balance;
}

.iqr-quiz__titulo:focus {
  outline: none;                            /* foco programático ao trocar de estado; o painel é aria-live */
}

.iqr-quiz__progresso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-1) var(--iqr-space-4);
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.iqr-quiz__aviso {
  margin: 0;
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border-inline-start: 3px solid var(--iqr-color-feedback-warning);
  border-radius: var(--iqr-radius-sm);
  background-color: color-mix(in srgb, var(--iqr-color-feedback-warning) 10%, transparent);
  font-size: var(--iqr-size-sm);
}

.iqr-quiz__intersticio,
.iqr-quiz__resultado {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
}

.iqr-quiz__intersticio p,
.iqr-quiz__resultado p {
  margin: 0;
}

.iqr-quiz__chamada,
.iqr-quiz__resultado-titulo {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-quiz__placar {
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-display);
  font-weight: var(--iqr-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.iqr-quiz__resultado--concluido .iqr-quiz__placar {
  color: var(--iqr-color-feedback-success);
}

/* A pergunta */

.iqr-quiz__fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.iqr-quiz__enunciado {
  padding: 0;
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-medium);
  line-height: var(--iqr-leading-normal);
  text-wrap: pretty;
}

.iqr-quiz__alternativas {
  display: grid;
  gap: var(--iqr-space-2);
}

/* O rótulo inteiro é o alvo: 44px no mínimo, texto longo quebra em linhas. */
.iqr-quiz__alternativa {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--iqr-space-3);
  min-block-size: 44px;
  padding: var(--iqr-space-3) var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.iqr-quiz__alternativa:hover {
  border-color: var(--iqr-color-border-interactive);
}

/* O rádio continua existindo (teclado, leitor de tela, envio sem script), só
   não é o que se vê: o estado aparece na borda, na letra e no fundo. */
.iqr-quiz__alternativa input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.iqr-quiz__alternativa:has(input:focus-visible) {
  outline: 2px solid var(--iqr-color-border-focus);
  outline-offset: 2px;
}

.iqr-quiz__alternativa:has(input:checked) {
  border-color: var(--iqr-color-action-primary-bg);
  background-color: color-mix(in srgb, var(--iqr-color-action-primary-bg) 12%, var(--iqr-color-bg-surface));
}

.iqr-quiz__letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-bg-raised);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-secondary);
}

.iqr-quiz__alternativa:has(input:checked) .iqr-quiz__letra {
  background-color: var(--iqr-color-action-primary-bg);
  color: var(--iqr-color-action-primary-fg);
}

.iqr-quiz__texto {
  align-self: center;
  line-height: var(--iqr-leading-normal);
  overflow-wrap: anywhere;
}

.iqr-quiz__alternativas--falta {
  outline: 2px solid var(--iqr-color-feedback-warning);
  outline-offset: 4px;
  border-radius: var(--iqr-radius-md);
}

/* Correção: certo ou "ainda não". Nunca marca a alternativa certa. */

.iqr-quiz__feedback {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
  border-radius: var(--iqr-radius-md);
  border-inline-start: 4px solid var(--iqr-color-border-subtle);
  background-color: var(--iqr-color-bg-surface);
}

.iqr-quiz__feedback p {
  margin: 0;
}

.iqr-quiz__feedback--certo {
  border-inline-start-color: var(--iqr-color-feedback-success);
}

.iqr-quiz__feedback--errado {
  border-inline-start-color: var(--iqr-color-feedback-warning);
}

.iqr-quiz__veredito {
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-quiz__feedback--certo .iqr-quiz__veredito { color: var(--iqr-color-feedback-success); }
.iqr-quiz__feedback--errado .iqr-quiz__veredito { color: var(--iqr-color-feedback-warning); }

.iqr-quiz__veredito-marca {
  font-weight: var(--iqr-weight-bold);
}

.iqr-quiz__enunciado-eco {
  font-weight: var(--iqr-weight-medium);
}

.iqr-quiz__escolhida {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-quiz__escolhida span {
  font-weight: var(--iqr-weight-semibold);
}

.iqr-quiz__explicacao {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  padding-block-start: var(--iqr-space-2);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-quiz__explicacao-rotulo {
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-quiz__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
}

.iqr-quiz__acoes form {
  margin: 0;
}

/* Estados no sumário: leitura sempre; quiz só onde há quiz. */

.iqr-leitor__estados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-1) var(--iqr-space-3);
  margin: 0;
  padding: 0 0 var(--iqr-space-2) var(--iqr-space-6);
  list-style: none;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-leitor__estados--soltos {
  padding-inline-start: var(--iqr-space-3);
  margin-block-start: var(--iqr-space-2);
}

.iqr-leitor__sumario-painel .iqr-leitor__estado a {
  display: inline;                          /* não herda o bloco dos links de capítulo */
  padding: 0;
  min-block-size: 0;
  color: inherit;
  background: none;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.iqr-leitor__sumario-painel .iqr-leitor__estado a::before {
  content: none;
}

.iqr-leitor__sumario-painel .iqr-leitor__estado a:hover {
  text-decoration-color: currentColor;
  background: none;
}

.iqr-leitor__estado--feito { color: var(--iqr-color-feedback-success); }
.iqr-leitor__estado--necessario { color: var(--iqr-color-feedback-warning); }

.iqr-leitor__estado-marca {
  display: inline-block;
  inline-size: 1em;
  text-align: center;
}

/* No celular o painel do quiz ocupa a largura toda e as ações empilham. */
@media (max-width: 40rem) {
  .iqr-quiz { padding: var(--iqr-space-4); gap: var(--iqr-space-4); }
  .iqr-quiz__acoes { flex-direction: column; align-items: stretch; }
  .iqr-quiz__acoes .iqr-button, .iqr-quiz__acoes form, .iqr-quiz__acoes form .iqr-button { inline-size: 100%; }
  .iqr-quiz__alternativa { padding: var(--iqr-space-3); }
  .iqr-leitor__estados { padding-inline-start: var(--iqr-space-3); }
}

/* --- Estado do material no card do aluno (Etapa C) --------------------------
   Nunca só cor: marca (✓ ● ◐ ○) + palavra. A cor reforça, não informa. */

.iqr-conteudo__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  margin: 0;
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--iqr-color-text-secondary);
}

.iqr-conteudo__estado-marca {
  display: inline-block;
  inline-size: 1em;
  text-align: center;
}

.iqr-conteudo__estado--concluido { color: var(--iqr-color-feedback-success); }
.iqr-conteudo__estado--aguardandoquizobrigatorio { color: var(--iqr-color-feedback-warning); }
.iqr-conteudo__estado--aguardandoquiz,
.iqr-conteudo__estado--concluidocomquizopcionalpendente { color: var(--iqr-color-accent-cyan); }

.iqr-conteudo__quizzes,
.iqr-conteudo__diagnostico,
.iqr-conteudo__atividade {
  margin: var(--iqr-space-1) 0 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  overflow-wrap: anywhere;
}

.iqr-conteudo__diagnostico {
  color: var(--iqr-color-text-secondary);
}

/* --- Tela de conclusão do material ----------------------------------------- */

.iqr-conclusao {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-6);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-lg);
  background-color: var(--iqr-color-bg-raised);
  box-shadow: var(--iqr-shadow-card);
}

.iqr-conclusao--feita {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-success) 40%, var(--iqr-color-border-subtle));
}

.iqr-conclusao__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iqr-color-accent-cyan);
}

.iqr-conclusao--feita .iqr-conclusao__rotulo {
  color: var(--iqr-color-feedback-success);
}

.iqr-conclusao__titulo {
  margin: 0;
  font-size: var(--iqr-size-xl);
  line-height: var(--iqr-leading-tight);
  text-wrap: balance;
}

.iqr-conclusao__material {
  margin: 0;
  font-size: var(--iqr-size-lg);
  color: var(--iqr-color-text-secondary);
}

.iqr-conclusao__diagnostico {
  margin: 0;
}

.iqr-conclusao__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--iqr-space-4);
  margin: 0;
  padding: var(--iqr-space-4) 0;
  border-block: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-conclusao__numeros dt {
  font-size: var(--iqr-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iqr-color-text-muted);
}

.iqr-conclusao__numeros dd {
  margin: var(--iqr-space-1) 0 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.iqr-conclusao__detalhe {
  display: block;
  font-family: var(--iqr-font-text);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-regular);
  color: var(--iqr-color-text-muted);
}

.iqr-conclusao__requisitos {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iqr-conclusao__requisitos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--iqr-space-2);
  align-items: baseline;
}

.iqr-conclusao__requisito--feito {
  color: var(--iqr-color-feedback-success);
}

.iqr-conclusao__marca {
  display: inline-block;
  inline-size: 1em;
  text-align: center;
}

.iqr-conclusao__opcional {
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

.iqr-conclusao__extra {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
}

.iqr-conclusao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-3);
}

.iqr-conclusao__proximo {
  padding-block-start: var(--iqr-space-4);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-conclusao__proximo-rotulo {
  margin: 0 0 var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iqr-color-text-muted);
}

.iqr-conclusao__proximo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
}

@media (max-width: 40rem) {
  .iqr-conclusao { padding: var(--iqr-space-5); }
  .iqr-conclusao__acoes { flex-direction: column; align-items: stretch; }
  .iqr-conclusao__acoes .iqr-button { inline-size: 100%; }
}

/* --- Revisão editorial no painel (ADR 0023) --------------------------------
   Origem no material e alertas de qualidade. Erro e aviso se distinguem por
   ícone e palavra, não só por cor. */

.iqr-origem {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  margin: 0;
  padding: var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) dashed var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  min-inline-size: 0;
}

.iqr-origem legend {
  padding-inline: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iqr-color-text-muted);
}

.iqr-origem__campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--iqr-space-3);
}

.iqr-alertas {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iqr-alerta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-2) var(--iqr-space-3);
  border-inline-start: 3px solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-sm);
  font-size: var(--iqr-size-sm);
  background-color: var(--iqr-color-bg-surface);
  overflow-wrap: anywhere;
}

.iqr-alerta--erro {
  border-inline-start-color: var(--iqr-color-feedback-danger);
  color: var(--iqr-color-feedback-danger);
}

.iqr-alerta--aviso {
  border-inline-start-color: var(--iqr-color-feedback-warning);
  color: var(--iqr-color-text-secondary);
}

.iqr-alerta strong {
  font-weight: var(--iqr-weight-semibold);
}

/* Contadores de revisão na lista de quizzes do eBook. */
.iqr-revisao-contagem {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-1);
  font-size: var(--iqr-size-xs);
  font-variant-numeric: tabular-nums;
}

.iqr-revisao-contagem--erro { color: var(--iqr-color-feedback-danger); }
.iqr-revisao-contagem--aviso { color: var(--iqr-color-feedback-warning); }

/* --- Prévia da importação (dry run) --------------------------------------
   O que aconteceria se a importação fosse confirmada. Números em tabular-nums
   porque são lidos em comparação, linha a linha. */
.iqr-dryrun__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2) var(--iqr-space-4);
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.iqr-dryrun__contagens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iqr-dryrun__contagens li {
  padding: var(--iqr-space-3);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-sm);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-secondary);
  text-align: center;
}

.iqr-dryrun__contagens strong {
  display: block;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-lg);
  color: var(--iqr-color-text-primary);
  font-variant-numeric: tabular-nums;
}

.iqr-dryrun__contagens .iqr-text-erro strong { color: var(--iqr-color-feedback-danger); }
.iqr-dryrun__contagens .iqr-text-aviso strong { color: var(--iqr-color-feedback-warning); }

@media (max-width: 40rem) {
  .iqr-origem__campos { flex-direction: column; align-items: stretch; }
  .iqr-origem__campos .iqr-button { inline-size: 100%; }
}

/* ===== design-system\css\28-entrega.css ===== */
/* ============================================================================
   Entrega do material — leitura imediata e download temporizado (ADR 0024)

   O mesmo bloco serve o card do "Meu aprendizado", a página do produto para
   quem já comprou e o diagnóstico do suporte. Uma marca (✓ ou 🔒) acompanha
   sempre a palavra: a cor reforça, nunca informa sozinha.
   ========================================================================== */

.iqr-entrega {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  margin-block-start: var(--iqr-space-3);
  padding: var(--iqr-space-3);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-entrega--liberada {
  border-color: color-mix(in srgb, var(--iqr-color-feedback-success) 35%, var(--iqr-color-border-subtle));
}

.iqr-entrega__titulo {
  margin: 0;
  font-family: var(--iqr-font-display);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iqr-color-text-muted);
}

.iqr-entrega__estado {
  display: flex;
  align-items: baseline;
  gap: var(--iqr-space-2);
  margin: 0;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-secondary);
  overflow-wrap: anywhere;
}

.iqr-entrega--liberada .iqr-entrega__estado {
  color: var(--iqr-color-feedback-success);
}

.iqr-entrega__marca {
  flex: none;
  inline-size: 1em;
  text-align: center;
}

.iqr-entrega__data,
.iqr-entrega__nota {
  margin: 0;
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
  overflow-wrap: anywhere;
}

.iqr-entrega .iqr-button {
  align-self: flex-start;
  margin-block-start: var(--iqr-space-2);
}

/* Duas colunas na página do produto: leitura de um lado, download do outro.
   Abaixo de 40rem viram uma coluna só — nada de rolagem lateral. */

.iqr-entregas {
  display: grid;
  gap: var(--iqr-space-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.iqr-entregas .iqr-entrega {
  margin-block-start: 0;
}

@media (max-width: 40rem) {
  .iqr-entregas { grid-template-columns: 1fr; }
  .iqr-entrega .iqr-button { inline-size: 100%; text-align: center; }
}

/* ===== design-system\css\28-home-editorial.css ===== */
/* Home editorial. Escopo local: preserva catálogo e área do aluno. */
.iqr-home-editorial { overflow-wrap: anywhere; }
.iqr-home-editorial .iqr-home-abertura {
  overflow: hidden;
  background: var(--iqr-brand-gradient-superficie);
  padding-block: var(--iqr-space-12);
}
.iqr-home-editorial .iqr-home-hero { gap: var(--iqr-space-8); }
.iqr-home-editorial .iqr-home-hero__texto { position: relative; z-index: 1; min-inline-size: 0; }
.iqr-home-editorial .iqr-home-hero__texto h1 { max-inline-size: 17ch; }
.iqr-home-editorial .iqr-home-hero__texto .iqr-lead { max-inline-size: 44ch; }
.iqr-home-editorial .iqr-home-visual {
  border: 0;
  border-radius: var(--iqr-radius-lg);
  box-shadow: none;
  background: transparent;
}
.iqr-home-editorial .iqr-home-visual img { aspect-ratio: 16 / 10; object-position: center; }
.iqr-home-editorial .iqr-home-visual figcaption { padding: var(--iqr-space-3) 0 0; font-size: var(--iqr-size-sm); }
.iqr-home-editorial .iqr-home-objetivos {
  padding-block: var(--iqr-space-6);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}
.iqr-home-editorial .iqr-home-objetivos h2 { font-size: var(--iqr-size-lg); }
.iqr-home-objetivos__lista { display: flex; flex-wrap: wrap; gap: var(--iqr-space-3); }
.iqr-home-editorial .iqr-home-objetivos .iqr-categoria {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-3) var(--iqr-space-4);
  min-block-size: 2.75rem;
  max-inline-size: 100%;
  border-radius: var(--iqr-radius-full);
  box-shadow: none;
}
.iqr-home-editorial .iqr-categoria__icone { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
.iqr-home-editorial .iqr-categoria__titulo { font-size: var(--iqr-size-sm); }
.iqr-home-editorial .iqr-conteudo { border-radius: var(--iqr-radius-2xl); }
.iqr-home-editorial .iqr-conteudo__capa { aspect-ratio: 4 / 3; }
.iqr-home-editorial .iqr-conteudo__capa--retrato { aspect-ratio: 4 / 5; background: var(--iqr-brand-gradient-superficie); }
.iqr-home-editorial .iqr-conteudo__capa--retrato img { max-inline-size: 86%; block-size: 86%; object-fit: contain; }
.iqr-home-editorial .iqr-home-experiencia { align-items: center; }
.iqr-home-editorial #experimente { scroll-margin-block-start: var(--iqr-space-24); }
.iqr-home-editorial .iqr-home-quiz { box-shadow: var(--iqr-shadow-glow); }
.iqr-home-editorial .iqr-chamada { background: var(--iqr-brand-gradient-superficie); }
@media (min-width: 48rem) {
  .iqr-home-editorial .iqr-home-abertura { padding-block: var(--iqr-space-16); }
  .iqr-home-editorial .iqr-section--tight:not(.iqr-home-objetivos) { padding-block: var(--iqr-space-16); }
}
@media (min-width: 64rem) {
  .iqr-home-editorial .iqr-home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--iqr-space-6); }
  .iqr-home-editorial .iqr-home-visual img { aspect-ratio: 1; }
  .iqr-home-editorial .iqr-home-hero__texto h1 { font-size: var(--iqr-size-display-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .iqr-home-editorial .iqr-conteudo:hover,
  .iqr-home-editorial .iqr-categoria:hover { transform: none; }
}

/* ---------- selo "Inclui quizzes" no card ---------- */
/* Fica no corpo do card, abaixo dos dados: não sobe para a capa, para não
   disputar espaço com a imagem nem com o título. */
.iqr-conteudo__selo {
  display: inline-flex; align-items: center; gap: var(--iqr-space-2);
  margin-block-start: var(--iqr-space-2);
  padding: var(--iqr-space-1) var(--iqr-space-3);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-accent-cyan-soft);
  border-radius: var(--iqr-radius-full);
  color: var(--iqr-color-accent-cyan);
  font-size: var(--iqr-size-xs);
  line-height: var(--iqr-leading-tight);
}
.iqr-conteudo__selo-marca { font-weight: 700; }

/* A nota da ficha: o número dos quizzes, discreto, embaixo da frase. */
.iqr-ficha__condicao-nota { display: block; color: var(--iqr-color-text-muted); font-size: var(--iqr-size-xs); }

/* ===== design-system\css\29-home-vitrine.css ===== */
/* ==========================================================================
   29 — Apresentação comercial: escopo, abertura ampla, vitrine, etapas,
   quadro claro do quiz e chamada com banner
   Referência aprovada em 21/09/2026 (pacote "IA que Rende Visual"): navy
   #071321, botões azul-ciano com texto navy, imagem compondo o cenário,
   dois cards grandes lado a lado, quiz em quadro claro. Toda frase é HTML;
   a imagem nunca carrega texto. Mobile-first: base é celular, min-width
   amplia.
   ========================================================================== */

/* --- Escopo ----------------------------------------------------------------
   As páginas de venda pedem a classe no <body>. Dentro dela, os tokens
   semânticos que os componentes já consomem passam a apontar para os tokens
   comerciais: botão primário vira ciano, página vira o navy da referência.
   Fora do escopo (painel, área do aluno, conta) nada muda. */

.iqr-comercial {
  --iqr-color-bg-page: var(--iqr-color-comercial-bg-page);
  --iqr-color-text-primary: var(--iqr-color-comercial-text-primary);
  --iqr-color-text-secondary: var(--iqr-color-comercial-text-secondary);
  --iqr-color-action-primary-bg: var(--iqr-color-comercial-action-bg-solid);
  --iqr-color-action-primary-fg: var(--iqr-color-comercial-action-fg);
  --iqr-brand-gradient-acao: var(--iqr-color-comercial-action-bg);
  --iqr-brand-gradient-atmosfera: var(--iqr-color-comercial-bg-brilho);
  --iqr-shadow-brand: 0 6px 30px color-mix(in srgb, var(--iqr-color-comercial-action-bg-end) 13%, transparent);
  --iqr-shadow-glow: 0 8px 34px color-mix(in srgb, var(--iqr-color-comercial-action-bg-end) 22%, transparent);
}

/* Botão principal: pílula, como na referência. Texto navy sobre ciano:
   9,2:1 no início do gradiente, 11,3:1 no fim (pares no contrast-pairs). */
.iqr-comercial .iqr-button--primary {
  border-radius: var(--iqr-radius-full);
  font-weight: var(--iqr-weight-bold);
}

.iqr-comercial .iqr-button--secondary {
  border-radius: var(--iqr-radius-full);
}

.iqr-comercial .iqr-eyebrow { color: var(--iqr-color-comercial-eyebrow); }

/* Na referência todas as seções sentam no mesmo navy: sem faixa "superfície". */
.iqr-comercial .iqr-section--surface { background: transparent; }

/* --- Abertura ------------------------------------------------------------- */
/* A composição (tablet e eBook) é o cenário, não uma figura num retângulo.
   O lado esquerdo da foto é navy vazio de propósito — a headline mora ali.
   No celular o texto vem antes e a foto fecha a seção, sangrando até as
   bordas, com o topo fundido ao navy. */

.iqr-abertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--iqr-color-bg-page);
  padding-block: var(--iqr-space-10) 0;
}

.iqr-abertura__grade { display: block; }

.iqr-abertura__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-5);
  max-inline-size: 42rem;
}

/* Poppins negrito ocupa ~0,55em por caractere; "Coloque em prática." tem 19.
   display-lg (62px no computador) dá ~650px, que cabem nos 42rem acima.
   overflow-wrap normal: uma palavra longa nunca é partida no meio. */
.iqr-abertura__texto h1 {
  font-size: var(--iqr-size-display-lg);
  letter-spacing: var(--iqr-tracking-tighter);
  line-height: 1.1;
  overflow-wrap: normal;
}

.iqr-abertura__texto .iqr-lead {
  max-inline-size: 30ch;
  font-size: var(--iqr-size-lg);
}

.iqr-abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-4);
}

.iqr-abertura__visual {
  position: relative;
  inline-size: 100vw;
  margin: var(--iqr-space-8) 0 0 calc(50% - 50vw);
  block-size: 20rem;
  overflow: hidden;
}

.iqr-abertura__visual img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 80% center;
}

/* O véu que funde a foto ao navy: de cima no celular, da esquerda no computador. */
.iqr-abertura__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(180deg, var(--iqr-color-bg-page) 0%, transparent 45%);
  pointer-events: none;
}

@media (min-width: 48rem) {
  .iqr-abertura {
    display: flex;
    align-items: center;
    min-block-size: 36rem;
    padding-block: 0;
  }
  .iqr-abertura__grade { padding-block: var(--iqr-space-20); }
  .iqr-abertura__visual {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: auto;
    block-size: auto;
    margin: 0;
  }
  .iqr-abertura__visual img { object-position: 65% center; }
  .iqr-abertura__visual::before {
    background-image: linear-gradient(90deg,
      color-mix(in srgb, var(--iqr-color-bg-page) 88%, transparent) 0%,
      color-mix(in srgb, var(--iqr-color-bg-page) 65%, transparent) 30%,
      transparent 64%);
  }
}

@media (min-width: 64rem) {
  .iqr-abertura { min-block-size: 39rem; }
  .iqr-abertura__grade { padding-block: var(--iqr-space-24); }
}

/* --- Vitrine -------------------------------------------------------------- */
/* Celular: imagem em cima, inteira, conteúdo embaixo — nada por cima da capa.
   De 40rem em diante: a foto é o fundo do card, o livro fica à esquerda, e
   o conteúdo mora sobre a metade direita do cenário, com um véu escuro que
   nasce transparente sobre o livro e escurece onde o texto senta. Não há
   painel de cor sólida: é a própria foto, escurecida. */

.iqr-produtos {
  display: grid;
  gap: var(--iqr-space-6);
}

.iqr-produto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--iqr-radius-xl);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
  background: var(--iqr-color-bg-page);
}

.iqr-produto__imagem {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--iqr-color-bg-page);
}

.iqr-produto__imagem img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.iqr-produto__imagem .iqr-produto__marca {
  inline-size: 30%;
  block-size: auto;
  inset: 25% auto auto 35%;
  opacity: 0.8;
}

.iqr-produto__corpo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-6);
}

.iqr-produto__corpo .iqr-eyebrow { margin-block-end: 0; }

.iqr-produto__titulo {
  margin: 0;
  font-size: var(--iqr-size-xl);
  line-height: 1.2;
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-text-primary);
}

.iqr-produto__titulo a { color: inherit; text-decoration: none; }
.iqr-produto__titulo a:hover { text-decoration: underline; }

.iqr-produto__resumo {
  margin: 0;
  color: var(--iqr-color-text-primary);
  font-size: var(--iqr-size-sm);
}

.iqr-produto__selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-2);
  margin: var(--iqr-space-1) 0 var(--iqr-space-2);
  padding: 0;
  list-style: none;
}

/* Selo translúcido sobre a foto: fundo navy a 67%, borda ciano a 37%. */
.iqr-produto__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-1) var(--iqr-space-3);
  border-radius: var(--iqr-radius-full);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-comercial-selo-borda) 37%, transparent);
  background: color-mix(in srgb, var(--iqr-color-comercial-selo-bg) 67%, transparent);
  color: var(--iqr-color-text-primary);
  font-size: var(--iqr-size-xs);
}

.iqr-produto__selo svg { inline-size: 1rem; block-size: 1rem; }

.iqr-produto__selo--quiz {
  color: var(--iqr-color-accent-cyan);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-produto__corpo .iqr-button {
  align-self: flex-start;
  margin-block-start: var(--iqr-space-2);
}

.iqr-produtos[data-quantidade="1"] .iqr-produto {
  max-inline-size: 40rem;
  margin-inline: auto;
}

@media (min-width: 40rem) {
  .iqr-produto {
    display: flex;
    align-items: flex-end;
    min-block-size: 27rem;
  }
  .iqr-produto__imagem {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    z-index: 0;
  }
  .iqr-produto__imagem img {
    object-fit: cover;
    object-position: 35% center;
  }
  .iqr-produto__imagem .iqr-produto__marca { inset: 30% auto auto 10%; inline-size: 24%; }
  /* O véu: transparente sobre o livro, navy a 74% onde o texto senta. */
  .iqr-produto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(90deg,
      transparent 32%,
      color-mix(in srgb, var(--iqr-color-bg-page) 74%, transparent) 67%);
    pointer-events: none;
  }
  .iqr-produto__corpo {
    margin-inline-start: 49%;
    padding: var(--iqr-space-6) var(--iqr-space-5) var(--iqr-space-6) 0;
  }
  .iqr-produtos[data-quantidade="1"] .iqr-produto { max-inline-size: none; }
}

@media (min-width: 56rem) {
  .iqr-produtos[data-quantidade="2"],
  .iqr-produtos[data-quantidade="varios"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .iqr-produto { min-block-size: 27rem; }
  .iqr-produto__corpo { margin-inline-start: 53%; }
  .iqr-produto__titulo { font-size: var(--iqr-size-lg); }
  .iqr-produtos[data-quantidade="1"] .iqr-produto { max-inline-size: 48rem; margin-inline: auto; }
}

@media (min-width: 64rem) {
  .iqr-produtos[data-quantidade="varios"] {
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  }
  .iqr-produto__titulo { font-size: var(--iqr-size-xl); }
}

/* --- Etapas leves ao lado do quiz ----------------------------------------- */
/* Três colunas pequenas com um filete à esquerda, numeração "01 ·" vinda do
   CSS. Nada de bloco escuro: é texto sobre o navy da página. */

.iqr-etapas {
  display: grid;
  gap: var(--iqr-space-4);
  margin: var(--iqr-space-2) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}

.iqr-etapa {
  counter-increment: etapa;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
  padding-inline-start: var(--iqr-space-3);
  border-inline-start: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-etapa-borda);
}

.iqr-etapa__titulo {
  color: var(--iqr-color-comercial-etapa-titulo);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-etapa__titulo::before { content: "0" counter(etapa) " · "; }

.iqr-etapa__texto {
  color: var(--iqr-color-text-secondary);
  font-size: var(--iqr-size-sm);
}

@media (min-width: 30rem) {
  .iqr-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .iqr-comercial .iqr-home-experiencia {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--iqr-space-16);
    align-items: center;
  }
}

/* --- Quadro claro do quiz ------------------------------------------------- */
/* Fundo branco-azulado, barra navy no topo, texto navy, alternativas com
   borda suave, seleção azul-clara e feedback verde suave. O anel de foco
   dentro do quadro é navy: o roxo do anel padrão some sobre branco. */

.iqr-comercial .iqr-home-quiz {
  padding: 0;
  overflow: hidden;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-quadro-borda);
  border-radius: var(--iqr-radius-xl);
  background: var(--iqr-color-comercial-quadro-bg);
  color: var(--iqr-color-comercial-quadro-text);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-home-quiz__barra {
  display: flex;
  justify-content: space-between;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-4) var(--iqr-space-6);
  background: var(--iqr-color-comercial-quadro-barra-bg);
  color: var(--iqr-color-comercial-quadro-barra-fg);
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  letter-spacing: var(--iqr-tracking-wide);
}

.iqr-home-quiz__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
  padding: var(--iqr-space-6);
}

.iqr-home-quiz__licao {
  margin: 0;
  color: var(--iqr-color-comercial-quadro-text-secondary);
  font-size: var(--iqr-size-sm);
}

.iqr-comercial .iqr-home-quiz legend {
  color: var(--iqr-color-comercial-quadro-text);
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-bold);
  line-height: 1.3;
  margin-block: 0 var(--iqr-space-5);
}

.iqr-comercial .iqr-home-quiz__opcao {
  border-color: var(--iqr-color-comercial-quadro-opcao-borda);
  color: var(--iqr-color-comercial-quadro-text);
  background: transparent;
  min-block-size: 3rem;
}

.iqr-comercial .iqr-home-quiz__opcao:has(input:checked) {
  background: var(--iqr-color-comercial-quadro-selecao-bg);
  border-color: var(--iqr-color-comercial-quadro-selecao-borda);
}

.iqr-comercial .iqr-home-quiz__opcao input { accent-color: var(--iqr-color-comercial-quadro-selecao-borda); }

/* O rádio tem o próprio anel de foco do tema escuro (roxo); dentro do quadro
   claro ele vira navy, como o resto. */
.iqr-comercial .iqr-home-quiz__opcao input:focus-visible {
  outline-color: var(--iqr-color-comercial-quadro-foco);
}

/* Negrito dentro do quadro herda a cor do texto ao redor. Sem isto, o
   <strong> pega o cinza-claro do tema escuro e some sobre o verde. */
.iqr-comercial .iqr-home-quiz strong { color: inherit; }

.iqr-comercial .iqr-home-quiz__opcao:focus-within,
.iqr-comercial .iqr-home-quiz .iqr-button:focus-visible,
.iqr-home-quiz__reset:focus-visible,
.iqr-home-quiz__link:focus-visible,
.iqr-comercial .iqr-home-quiz summary:focus-visible {
  outline: 2px solid var(--iqr-color-comercial-quadro-foco);
  outline-offset: 3px;
}

.iqr-home-quiz__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3);
}

.iqr-home-quiz__reset {
  min-block-size: 2.75rem;
  padding: 0 var(--iqr-space-3);
  border: 0;
  background: transparent;
  color: var(--iqr-color-comercial-quadro-link);
  font: inherit;
  font-weight: var(--iqr-weight-semibold);
  cursor: pointer;
}

.iqr-home-quiz__reset:hover { text-decoration: underline; }

.iqr-comercial .iqr-home-quiz__feedback p {
  background: var(--iqr-color-comercial-quadro-feedback-bg);
  border-inline-start: 3px solid var(--iqr-color-comercial-quadro-feedback-borda);
  color: var(--iqr-color-comercial-quadro-feedback-text);
}

.iqr-comercial .iqr-home-quiz__resposta summary {
  color: var(--iqr-color-comercial-quadro-link);
  padding-block: var(--iqr-space-2);
}

.iqr-comercial .iqr-home-quiz__resposta p {
  color: var(--iqr-color-comercial-quadro-text-secondary);
  font-size: var(--iqr-size-sm);
}

.iqr-home-quiz__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--iqr-color-comercial-quadro-link);
  font-weight: var(--iqr-weight-semibold);
  text-decoration: none;
}

.iqr-home-quiz__link:hover { text-decoration: underline; }

.iqr-home-quiz__nota {
  margin: 0;
  color: var(--iqr-color-comercial-quadro-text-muted);
  font-size: var(--iqr-size-xs);
}

/* --- Chamada final com banner --------------------------------------------- */

.iqr-chamada-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: 12rem;
  display: flex;
  align-items: center;
  padding: var(--iqr-space-8) var(--iqr-space-6);
  border-radius: var(--iqr-radius-xl);
  border: var(--iqr-border-width-hairline) solid color-mix(in srgb, var(--iqr-color-comercial-quadro-borda) 40%, transparent);
  background: var(--iqr-color-bg-page);
}

.iqr-chamada-banner__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: right center;
}

.iqr-chamada-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--iqr-color-bg-page) 85%, transparent) 0%,
    color-mix(in srgb, var(--iqr-color-bg-page) 45%, transparent) 100%);
}

.iqr-chamada-banner__conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--iqr-space-5);
  max-inline-size: 30rem;
}

.iqr-chamada-banner__conteudo h2 {
  margin: 0;
  font-size: var(--iqr-size-display-sm);
}

@media (min-width: 48rem) {
  .iqr-chamada-banner {
    min-block-size: 11rem;
    padding: var(--iqr-space-8) var(--iqr-space-10);
  }
  .iqr-chamada-banner__conteudo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-inline-size: none;
    inline-size: 100%;
    gap: var(--iqr-space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iqr-produto:hover { transform: none; }
}

/* ===== design-system\css\30-paginas-comerciais.css ===== */
/* ==========================================================================
   30 — Identidade comercial nas demais páginas
   A home aprovada (29-) é a referência. Este arquivo leva a mesma identidade
   à página de venda, ao catálogo, à conta, ao aprendizado, ao leitor, aos
   quizzes e ao suporte — sempre dentro do escopo .iqr-comercial, que o
   layout público põe no <body>. O painel não passa por aqui.
   Mobile-first: base é celular, min-width amplia.
   ========================================================================== */

/* --- Ajustes de escopo que a home não precisou ------------------------------
   Componentes que pintavam texto CLARO sobre o gradiente de ação. Com o
   gradiente ciano, texto claro reprova; o texto vira navy, como no botão. */

.iqr-comercial .iqr-chip-tipo--marca,
.iqr-comercial .iqr-ficha__status--concluido {
  color: var(--iqr-color-comercial-action-fg);
}

/* Anel de foco: o roxo do padrão some sobre o navy mais escuro e sobre ciano.
   Fora dos quadros claros, o anel é ciano. */
.iqr-comercial :focus-visible {
  outline-color: var(--iqr-color-comercial-action-bg-solid);
}

/* --- Página de venda ------------------------------------------------------ */
/* A apresentação grande do produto abre a coluna da esquerda. É a arte
   promocional aprovada (livro em cenário), não a capa; a legenda diz isso. */

.iqr-venda__figura {
  margin: var(--iqr-space-2) 0 0;
  min-inline-size: 0;
}

.iqr-venda__figura img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--iqr-radius-xl);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-subtle);
}

.iqr-venda__figura figcaption {
  margin-block-start: var(--iqr-space-2);
  font-size: var(--iqr-size-xs);
  color: var(--iqr-color-text-muted);
}

/* No celular, a ficha vem depois da apresentação; ela não pode ser fixa
   sobre a leitura. A regra de sticky já vive no 15- só a partir de 56rem. */

/* A ficha ganha o mesmo fundo em degradê navy da referência e o botão pílula
   já vem do escopo. Os cantos maiores acompanham os cards da home. */
.iqr-comercial .iqr-ficha {
  border-radius: var(--iqr-radius-xl);
}

/* A ficha comercial (capa, preço, botão, entrega, termos, resumo) é mais alta
   do que cabe numa janela comum. Fixa, ou esconde os Termos abaixo da dobra,
   ou vira uma caixa com rolagem própria — nenhum dos dois serve a quem vai
   pagar. Ela rola com a página: está no topo quando a página abre, que é
   onde a decisão começa. */
@media (min-width: 56rem) {
  .iqr-comercial .iqr-detalhe__lateral {
    position: static;
  }
}

/* --- Catálogo ------------------------------------------------------------- */
/* A grade sabe quantos itens tem. Dois produtos ocupam a área em duas colunas
   largas; um fica contido no centro; de três em diante, grade fluida. */

.iqr-catalogo-grade {
  display: grid;
  gap: var(--iqr-space-6);
}

.iqr-catalogo-grade[data-quantidade="1"] > * {
  max-inline-size: 36rem;
  inline-size: 100%;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .iqr-catalogo-grade[data-quantidade="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .iqr-catalogo-grade[data-quantidade="varios"] {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}

@media (min-width: 64rem) {
  .iqr-catalogo-grade[data-quantidade="varios"] {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }
}

/* Card do catálogo com a arte promocional: capa grande em 3:2, como na home.
   A arte já traz o cenário; nada de gradiente por cima. */
.iqr-comercial .iqr-conteudo__capa--arte {
  aspect-ratio: 3 / 2;
  background: var(--iqr-color-bg-page);
}

.iqr-comercial .iqr-conteudo__capa--arte img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 35% center;
}

.iqr-comercial .iqr-conteudo {
  border-radius: var(--iqr-radius-xl);
}

/* --- Conta: formulário à direita, arte à esquerda ------------------------- */
/* No celular só o formulário existe; a arte entra a partir de 64rem, ocupando
   a mesma altura da coluna do formulário. */

.iqr-conta-layout {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: stretch;
}

.iqr-conta-layout > .iqr-conta {
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-inline: auto;
}

.iqr-conta-arte { display: none; }

@media (min-width: 64rem) {
  .iqr-conta-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--iqr-space-12);
  }
  .iqr-conta-layout > .iqr-conta {
    max-inline-size: 30rem;
    margin-inline: auto;
    align-self: center;
  }
  /* A moldura tem a proporção da foto (3:2): a imagem entra inteira, sem
     cortar o livro nem o tablet. O texto senta no navy vazio da esquerda. */
  .iqr-conta-arte {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    align-self: center;
    overflow: hidden;
    border-radius: var(--iqr-radius-xl);
    background: var(--iqr-color-bg-page);
    isolation: isolate;
  }
  .iqr-conta-arte img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
  }
  /* Véu de cima para baixo: o texto senta no navy, a foto aparece embaixo. */
  .iqr-conta-arte::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--iqr-color-bg-page) 90%, transparent) 0%,
      transparent 75%);
  }
  .iqr-conta-arte__texto {
    position: relative;
    padding: var(--iqr-space-10);
  }
  .iqr-conta-arte__frase {
    margin: var(--iqr-space-3) 0 0;
    font-family: var(--iqr-font-display);
    font-size: var(--iqr-size-display-sm);
    font-weight: var(--iqr-weight-bold);
    line-height: 1.15;
    letter-spacing: var(--iqr-tracking-tight);
    color: var(--iqr-color-text-primary);
  }
  .iqr-conta-arte__frase em {
    font-style: normal;
    background-image: var(--iqr-brand-gradient-texto);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--iqr-color-brand-contrast);
  }
}

/* Título das páginas de conta: o mesmo peso da home, sem o símbolo repetido
   acima (o cabeçalho já traz a marca). */
.iqr-comercial .iqr-conta__cabeca { align-items: flex-start; text-align: start; }
.iqr-comercial .iqr-conta__cabeca h1 { font-size: var(--iqr-size-display-sm); }
.iqr-comercial .iqr-conta .iqr-card { border-radius: var(--iqr-radius-xl); }

/* --- Página de venda: no celular, a ficha antes dos objetivos --------------- */
/* A abertura (título, resumo, apresentação) vem primeiro; a ficha — preço,
   botão, condições e Termos — logo depois; objetivos, dados e ações do herói
   só então. No computador nada muda de lugar: a ficha segue à direita. */
.iqr-comercial .iqr-detalhe {
  grid-template-areas:
    "topo"
    "lateral"
    "mais"
    "corpo";
}

.iqr-comercial .iqr-detalhe__mais {
  grid-area: mais;
}

@media (min-width: 56rem) {
  .iqr-comercial .iqr-detalhe {
    grid-template-areas:
      "topo  lateral"
      "mais  lateral"
      "corpo lateral";
  }

  /* Objetivos e dados faziam parte da abertura; o espaço entre eles e a
     apresentação continua o da abertura, não o das seções. */
  .iqr-comercial .iqr-detalhe__mais {
    margin-block-start: calc(var(--iqr-space-4) - var(--iqr-space-10));
  }
}

/* --- Catálogo: dobra dos filtros --------------------------------------------- */
/* Botão "Filtrar" com a contagem do que está aplicado. Sem script, fechado em
   qualquer largura; com script, o computador abre e esconde o botão. */
.iqr-filtros-dobra > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  min-block-size: 2.75rem;
  padding-inline: var(--iqr-space-4);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-border-interactive);
  border-radius: var(--iqr-radius-full);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-text-primary);
  cursor: pointer;
}

.iqr-filtros-dobra > summary::-webkit-details-marker { display: none; }

.iqr-filtros-dobra > summary::after {
  content: "▾";
  color: var(--iqr-color-text-muted);
}

.iqr-filtros-dobra[open] > summary::after { content: "▴"; }

.iqr-filtros-dobra[open] > summary {
  margin-block-end: var(--iqr-space-3);
}

.iqr-filtros-dobra__contagem {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
  padding-inline: var(--iqr-space-2);
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-comercial-action-bg-solid);
  color: var(--iqr-color-comercial-action-fg);
  font-size: var(--iqr-size-xs);
}

.iqr-filtros-dobra--fixa > summary { display: none; }

/* "Ver detalhes" é botão ciano. O card inteiro já é link (o título cobre a
   área); o botão fica acima dessa cobertura para ser ele o alvo do clique. */
.iqr-comercial .iqr-conteudo__ver {
  position: relative;
  z-index: 2;
}

/* --- Rodapé mais curto no celular ------------------------------------------ */
/* Os quatro grupos de links em duas colunas, marca em cima e menos respiro.
   Nenhum link sai. A partir do tablet volta ao rodapé de sempre. */
.iqr-comercial .iqr-footer {
  margin-block-start: var(--iqr-space-6);
  padding-block: var(--iqr-space-8) var(--iqr-space-6);
}

.iqr-comercial .iqr-footer > .iqr-stack--8 {
  gap: var(--iqr-space-6);
}

.iqr-comercial .iqr-footer__grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--iqr-space-6) var(--iqr-space-4);
}

.iqr-comercial .iqr-footer__marca {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .iqr-comercial .iqr-footer {
    margin-block-start: var(--iqr-space-8);
    padding-block: var(--iqr-space-12) var(--iqr-space-8);
  }
  .iqr-comercial .iqr-footer > .iqr-stack--8 {
    gap: var(--iqr-space-8);
  }
  .iqr-comercial .iqr-footer__grade {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--iqr-space-10);
  }
  .iqr-comercial .iqr-footer__marca {
    grid-column: auto;
  }
}

@media (min-width: 64rem) {
  .iqr-comercial .iqr-footer__grade {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
}

/* ===== design-system\css\31-quadro-claro.css ===== */
/* ==========================================================================
   31 — Quadro claro nas páginas de estudo, e menos decoração fora da home
   O quiz de exemplo da home (29-) fixou a superfície clara: fundo gelo,
   barra navy, texto navy, seleção azul-clara, feedback verde suave. Aqui a
   mesma superfície vai ao quiz do leitor, às avaliações de curso e ao
   resultado. Classes e marcação ficam como estão — há testes que as travam —,
   só cores e superfícies mudam. Acerto e "ainda não" continuam com marca
   (✓/✕) e palavra; a cor reforça, nunca informa sozinha.
   Escopo: .iqr-comercial (o layout público põe no <body>).
   ========================================================================== */

/* --- Menos decoração fora da home ----------------------------------------- */
/* O brilho roxo de fundo (.iqr-glow) era do conceito anterior; a identidade
   comercial já traz o brilho azul pelo corpo. Nas páginas de estudo ele só
   distrai. */
.iqr-comercial .iqr-glow { display: none; }

/* --- Meu aprendizado ------------------------------------------------------- */
/* Foco em estudar: o card "continuar" perde a borda em gradiente e o brilho;
   fica a superfície, a capa, o progresso e o botão ciano. */
.iqr-comercial .iqr-continuar {
  background-image: none;
  border-color: var(--iqr-color-border-subtle);
  box-shadow: var(--iqr-shadow-card);
}
.iqr-comercial .iqr-continuar::before { display: none; }
.iqr-comercial .iqr-continuar__capa { background-image: none; background-color: var(--iqr-color-bg-page); }
/* A capa agora é retrato (a recortada da arte): entra inteira na moldura
   paisagem, sobre o navy, em vez de ser cortada no título. */
.iqr-comercial .iqr-continuar__capa { position: relative; }
.iqr-comercial .iqr-continuar__capa img:not(.iqr-ficha__marca) {
  position: absolute;
  inset: 0;
  padding: var(--iqr-space-3);
  object-fit: contain;
}
.iqr-comercial .iqr-atalho:hover { border-color: var(--iqr-color-comercial-action-bg-solid); }

/* Barras de progresso: ciano, como o botão. */
.iqr-comercial .iqr-progresso { accent-color: var(--iqr-color-comercial-action-bg-solid); }
.iqr-comercial .iqr-progresso::-webkit-progress-value { background-image: var(--iqr-color-comercial-action-bg); }

/* --- Leitor ---------------------------------------------------------------- */
/* A página é a imagem do PDF — o papel claro já é ela. O palco fica navy e a
   página ganha uma moldura suave. Nada no leitor.js muda: só aparência. */
.iqr-comercial .iqr-leitor__pagina {
  border-radius: var(--iqr-radius-sm);
  box-shadow: var(--iqr-shadow-lg);
  background-color: var(--iqr-color-comercial-quadro-bg);
}

/* Os estados do sumário ("Leitura", "Quiz pendente") são links em linha de
   20px — no mouse acertam, no dedo não. Onde o apontador é grosso viram
   alvos de 44px; a marca e a palavra continuam adjacentes, como os testes
   exigem. */
@media (pointer: coarse) {
  .iqr-comercial .iqr-leitor__sumario-painel .iqr-leitor__estado a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--iqr-space-1);
  }
}

/* --- Quiz do leitor -------------------------------------------------------- */
.iqr-comercial .iqr-quiz {
  border-color: var(--iqr-color-comercial-quadro-borda);
  border-radius: var(--iqr-radius-xl);
  background-color: var(--iqr-color-comercial-quadro-bg);
  color: var(--iqr-color-comercial-quadro-text);
  box-shadow: var(--iqr-shadow-lg);
}

.iqr-comercial .iqr-quiz__rotulo { color: var(--iqr-color-comercial-quadro-link); }

.iqr-comercial .iqr-quiz__titulo,
.iqr-comercial .iqr-quiz__enunciado,
.iqr-comercial .iqr-quiz__chamada,
.iqr-comercial .iqr-quiz__resultado-titulo,
.iqr-comercial .iqr-quiz__enunciado-eco,
.iqr-comercial .iqr-quiz__placar { color: var(--iqr-color-comercial-quadro-text); }

.iqr-comercial .iqr-quiz__progresso,
.iqr-comercial .iqr-quiz__escolhida,
.iqr-comercial .iqr-quiz__intersticio p,
.iqr-comercial .iqr-quiz__resultado p { color: var(--iqr-color-comercial-quadro-text-secondary); }

.iqr-comercial .iqr-quiz__explicacao-rotulo { color: var(--iqr-color-comercial-quadro-text-muted); }
.iqr-comercial .iqr-quiz__explicacao { border-block-start-color: var(--iqr-color-comercial-quadro-opcao-borda); }
.iqr-comercial .iqr-quiz__resultado--concluido .iqr-quiz__placar { color: var(--iqr-color-comercial-quadro-sucesso-text); }

.iqr-comercial .iqr-quiz__alternativa {
  background-color: var(--iqr-color-comercial-quadro-bg);
  border-color: var(--iqr-color-comercial-quadro-opcao-borda);
  color: var(--iqr-color-comercial-quadro-text);
}
.iqr-comercial .iqr-quiz__alternativa:hover { border-color: var(--iqr-color-comercial-quadro-selecao-borda); }
.iqr-comercial .iqr-quiz__alternativa:has(input:checked) {
  border-color: var(--iqr-color-comercial-quadro-selecao-borda);
  background-color: var(--iqr-color-comercial-quadro-selecao-bg);
}
.iqr-comercial .iqr-quiz__alternativa:has(input:focus-visible) { outline-color: var(--iqr-color-comercial-quadro-foco); }

.iqr-comercial .iqr-quiz__letra {
  background-color: var(--iqr-color-comercial-quadro-selecao-bg);
  color: var(--iqr-color-comercial-quadro-text);
}
.iqr-comercial .iqr-quiz__alternativa:has(input:checked) .iqr-quiz__letra {
  background-color: var(--iqr-color-comercial-quadro-selecao-borda);
  color: var(--iqr-color-comercial-quadro-barra-fg);
}
.iqr-comercial .iqr-quiz__alternativas--falta { outline-color: var(--iqr-color-comercial-quadro-alerta-text); }

.iqr-comercial .iqr-quiz__feedback {
  background-color: var(--iqr-color-comercial-quadro-selecao-bg);
  border-inline-start-color: var(--iqr-color-comercial-quadro-opcao-borda);
}
.iqr-comercial .iqr-quiz__feedback--certo {
  background-color: var(--iqr-color-comercial-quadro-feedback-bg);
  border-inline-start-color: var(--iqr-color-comercial-quadro-feedback-borda);
}
.iqr-comercial .iqr-quiz__feedback--errado {
  background-color: var(--iqr-color-comercial-quadro-alerta-bg);
  border-inline-start-color: var(--iqr-color-comercial-quadro-alerta-text);
}
.iqr-comercial .iqr-quiz__feedback--certo .iqr-quiz__veredito { color: var(--iqr-color-comercial-quadro-sucesso-text); }
.iqr-comercial .iqr-quiz__feedback--errado .iqr-quiz__veredito { color: var(--iqr-color-comercial-quadro-alerta-text); }

.iqr-comercial .iqr-quiz__aviso {
  background-color: var(--iqr-color-comercial-quadro-alerta-bg);
  border-inline-start-color: var(--iqr-color-comercial-quadro-alerta-text);
  color: var(--iqr-color-comercial-quadro-alerta-text);
}

/* Botões secundários e fantasma dentro do quadro claro: texto navy. */
.iqr-comercial .iqr-quiz .iqr-button--ghost,
.iqr-comercial .iqr-quiz .iqr-button--secondary {
  color: var(--iqr-color-comercial-quadro-link);
  border-color: var(--iqr-color-comercial-quadro-opcao-borda);
  background-color: transparent;
}
.iqr-comercial .iqr-quiz .iqr-button--ghost:hover,
.iqr-comercial .iqr-quiz .iqr-button--secondary:hover {
  background-color: var(--iqr-color-comercial-quadro-selecao-bg);
  color: var(--iqr-color-comercial-quadro-link);
}
.iqr-comercial .iqr-quiz .iqr-button:focus-visible { outline-color: var(--iqr-color-comercial-quadro-foco); }
.iqr-comercial .iqr-quiz a { color: var(--iqr-color-comercial-quadro-link); }

/* --- Avaliação de curso ---------------------------------------------------- */
.iqr-comercial .iqr-pergunta {
  background-color: var(--iqr-color-comercial-quadro-bg);
  border-color: var(--iqr-color-comercial-quadro-borda);
  border-radius: var(--iqr-radius-xl);
  color: var(--iqr-color-comercial-quadro-text);
}
.iqr-comercial .iqr-pergunta__enunciado { color: var(--iqr-color-comercial-quadro-text); }
.iqr-comercial .iqr-pergunta__n { color: var(--iqr-color-comercial-quadro-link); }

.iqr-comercial .iqr-alternativa {
  background-color: var(--iqr-color-comercial-quadro-bg);
  border-color: var(--iqr-color-comercial-quadro-opcao-borda);
  color: var(--iqr-color-comercial-quadro-text);
}
.iqr-comercial .iqr-alternativa:hover { border-color: var(--iqr-color-comercial-quadro-selecao-borda); }
.iqr-comercial .iqr-alternativa input { accent-color: var(--iqr-color-comercial-quadro-selecao-borda); }
.iqr-comercial .iqr-alternativa input:focus-visible { outline-color: var(--iqr-color-comercial-quadro-foco); }
.iqr-comercial .iqr-alternativa:has(input:checked) {
  border-color: var(--iqr-color-comercial-quadro-selecao-borda);
  background-color: var(--iqr-color-comercial-quadro-selecao-bg);
}

/* --- Resultado: questão a questão ------------------------------------------ */
/* Cartão claro. A marcação já traz ✓/✕ e "Acertou./Errou." para leitor de
   tela; as cores só reforçam. */
.iqr-comercial .iqr-corrigida {
  background-color: var(--iqr-color-comercial-quadro-bg);
  border-color: var(--iqr-color-comercial-quadro-borda);
  border-radius: var(--iqr-radius-xl);
  color: var(--iqr-color-comercial-quadro-text);
}
.iqr-comercial .iqr-corrigida__enunciado { color: var(--iqr-color-comercial-quadro-text); }
.iqr-comercial .iqr-corrigida__respostas dt { color: var(--iqr-color-comercial-quadro-text-muted); }
.iqr-comercial .iqr-corrigida__respostas dd { color: var(--iqr-color-comercial-quadro-text-secondary); }
.iqr-comercial .iqr-corrigida--certa::before { background-color: var(--iqr-color-comercial-quadro-sucesso-text); }
.iqr-comercial .iqr-corrigida--certa .iqr-corrigida__marca { color: var(--iqr-color-comercial-quadro-sucesso-text); }
.iqr-comercial .iqr-corrigida--errada::before { background-color: var(--iqr-color-comercial-quadro-erro-text); }
.iqr-comercial .iqr-corrigida--errada .iqr-corrigida__marca { color: var(--iqr-color-comercial-quadro-erro-text); }
.iqr-comercial .iqr-corrigida__explicacao {
  background-color: var(--iqr-color-comercial-quadro-selecao-bg);
  color: var(--iqr-color-comercial-quadro-text-secondary);
}
.iqr-comercial .iqr-corrigida__explicacao strong { color: var(--iqr-color-comercial-quadro-link); }

/* Conclusão do material e cartões de resultado: cantos da identidade. */
.iqr-comercial .iqr-conclusao { border-radius: var(--iqr-radius-xl); }

/* ===== design-system\css\32-editorial.css ===== */
/* ==========================================================================
   32 — Prévia editorial da home (rota /previa/home-editorial, só Development).
   O escopo chama-se .iqr-editorial porque .iqr-previa já é a nota de aula
   gratuita (16-curso).
   Direção "navy + papel claro": navy para abrir, papel claro para ler, navy
   com o quadro claro para fazer, papel claro para a FAQ, navy para fechar.
   Nenhum brilho, nenhum gradiente sob texto, nenhum eyebrow decorativo:
   hierarquia por tamanho, peso, espaço e fios.
   Tudo aqui vive sob .iqr-editorial (o <body> da prévia leva
   "iqr-comercial iqr-editorial"); as camadas 29/30/31 e as páginas publicadas
   não mudam. Mobile-first: base é celular, min-width amplia.
   ========================================================================== */

/* --- Escopo: o que a prévia desliga -------------------------------------- */

.iqr-editorial {
  /* O body pinta a atmosfera com esta variável; a prévia não tem brilho. */
  --iqr-brand-gradient-atmosfera: none;
}

/* Botão primário sólido: a forma em pílula fica (aprovada), o gradiente e a
   sombra saem. */
.iqr-editorial .iqr-button--primary {
  background-image: none;
  background-color: var(--iqr-color-comercial-action-bg-solid);
  color: var(--iqr-color-comercial-action-fg);
  border-radius: var(--iqr-radius-full);
  font-weight: var(--iqr-weight-semibold);
  box-shadow: none;
}

.iqr-editorial .iqr-button--primary:hover,
.iqr-editorial .iqr-button--primary:active {
  background-color: var(--iqr-color-comercial-action-bg-end);
  box-shadow: none;
  filter: none;
}

/* Links de texto: a cor do texto ao redor, sublinhados. Nada de roxo. */
.iqr-editorial-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: var(--iqr-border-width-hairline);
}

/* Dobra: o <details> nativo que abre e fecha sem JavaScript. O summary parece
   um link e tem 44 px de altura. Aberto, troca o rótulo por CSS. */
.iqr-editorial-dobra > summary {
  display: list-item;
  cursor: pointer;
  min-block-size: 2.75rem;
  padding-block: var(--iqr-space-2);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-quadro-link);
}

.iqr-editorial-dobra > summary:hover { text-decoration: underline; }

.iqr-editorial-dobra--escura > summary { color: var(--iqr-color-comercial-text-primary); }

.iqr-editorial-dobra__contagem {
  margin-inline-start: var(--iqr-space-2);
  font-weight: var(--iqr-weight-regular);
  color: var(--iqr-color-comercial-quadro-text-muted);
  white-space: nowrap; /* "13 capítulos, 7 quizzes" desce inteiro no celular, não pela metade */
}

.iqr-editorial-dobra__fechar { display: none; }
.iqr-editorial-dobra[open] > summary .iqr-editorial-dobra__abrir { display: none; }
.iqr-editorial-dobra[open] > summary .iqr-editorial-dobra__fechar { display: inline; }
.iqr-editorial-dobra[open] > summary { margin-block-end: var(--iqr-space-2); }

/* --- Cabeçalho: mesma marcação, só quietude -------------------------------- */

.iqr-editorial .iqr-header {
  background-color: var(--iqr-color-comercial-bg-page);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-block-end-color: var(--iqr-color-comercial-fio);
}

.iqr-editorial .iqr-nav a[aria-current="page"]::after {
  background-image: none;
  background-color: var(--iqr-color-comercial-text-primary);
}

/* "Criar conta" deixa de ser ciano: o ciano é a ação da página. */
.iqr-editorial .iqr-header .iqr-button--primary {
  background-color: transparent;
  color: var(--iqr-color-comercial-text-primary);
  border-color: var(--iqr-color-border-interactive);
}

.iqr-editorial .iqr-header .iqr-button--primary:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 8%, transparent);
}

.iqr-editorial .iqr-entrar,
.iqr-editorial .iqr-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

/* O aviso de ambiente (só Development) não entra nas capturas. */
.iqr-editorial .iqr-aviso-ambiente { display: none; }

.iqr-editorial .iqr-busca-header input:focus-visible {
  box-shadow: 0 0 0 var(--iqr-border-width-focus) color-mix(in srgb, var(--iqr-color-comercial-action-bg-solid) 30%, transparent);
}

/* --- 1. Abertura (navy): título curto, descrição, botão, imagem ---------- */

.iqr-editorial-abertura {
  background-color: var(--iqr-color-comercial-bg-page);
  padding-block: var(--iqr-space-10) var(--iqr-space-12);
}

/* Três arranjos, uma marcação: título, texto e arte são filhos da grade.
   No celular: título, descrição, botão e a imagem logo abaixo. */
.iqr-editorial-abertura__grade {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: start;
  grid-template-areas:
    "titulo"
    "texto"
    "capa";
}

.iqr-editorial-abertura__grade > * { min-inline-size: 0; }

.iqr-editorial-abertura__texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-5);
}

.iqr-editorial-abertura h1 {
  grid-area: titulo;
  margin: 0;
  max-inline-size: 22ch;
  font-size: var(--iqr-size-display-lg);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-tight);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: balance;
}

.iqr-editorial-abertura__lead {
  margin: 0;
  max-inline-size: 44ch;
  font-size: var(--iqr-size-md);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: pretty;
}

.iqr-editorial-abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3) var(--iqr-space-6);
}

/* A apresentação aprovada (livro no cenário, 3:2): inteira, com fio, sem véu
   e sem texto por cima. */
.iqr-editorial-abertura__arte {
  grid-area: capa;
  margin: 0;
  inline-size: 100%;
}

.iqr-editorial-abertura__arte img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-fio);
  border-radius: var(--iqr-radius-md);
}

.iqr-editorial-abertura__arte figcaption {
  margin-block-start: var(--iqr-space-3);
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* Tablet: título atravessa; embaixo, texto à esquerda e a imagem à direita. */
@media (min-width: 48rem) {
  .iqr-editorial-abertura { padding-block: var(--iqr-space-16); }
  .iqr-editorial-abertura__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--iqr-space-10);
    row-gap: var(--iqr-space-6);
    grid-template-areas:
      "titulo titulo"
      "texto  capa";
  }
  .iqr-editorial-abertura__lead { font-size: var(--iqr-size-lg); }
}

/* Desktop: texto à esquerda, imagem à direita em metade da largura, os dois
   centrados na vertical. O título curto sobe para o tamanho de hero. */
@media (min-width: 64rem) {
  .iqr-editorial-abertura { padding-block: var(--iqr-space-20); }
  .iqr-editorial-abertura__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--iqr-space-16);
    row-gap: var(--iqr-space-6);
    align-items: center;
    grid-template-areas:
      "titulo capa"
      "texto  capa";
  }
  .iqr-editorial-abertura h1 {
    align-self: end;
    font-size: var(--iqr-size-display-xl);
  }
  .iqr-editorial-abertura__texto { align-self: start; }
}

/* --- Superfície de leitura (eBooks, aprofundamento, FAQ) ------------------ */

.iqr-editorial-leitura {
  background-color: var(--iqr-color-comercial-leitura-bg);
  color: var(--iqr-color-comercial-quadro-text-secondary);
  padding-block: var(--iqr-space-16);
}

/* Sobre o papel claro o anel ciano some: o anel é navy, como no quadro. */
.iqr-editorial-leitura :focus-visible {
  outline-color: var(--iqr-color-comercial-quadro-foco);
}

.iqr-editorial-leitura h2,
.iqr-editorial-leitura h3 {
  color: var(--iqr-color-comercial-quadro-text);
}

.iqr-editorial-leitura h2 {
  margin: 0 0 var(--iqr-space-8);
  font-size: var(--iqr-size-display-md);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  text-wrap: balance;
}

.iqr-editorial-leitura h3 {
  margin: 0 0 var(--iqr-space-3);
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: 0;
}

@media (min-width: 48rem) {
  .iqr-editorial-leitura { padding-block: var(--iqr-space-20); }
}

/* --- 2. Os eBooks --------------------------------------------------------- */

/* Estado vazio: sem eBook publicado, uma frase; nenhuma vitrine fantasma. */
.iqr-editorial-produtos__vazio,
.iqr-editorial-cursos p {
  margin: 0 0 var(--iqr-space-4);
  max-inline-size: 52ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-quadro-text);
}

/* Um bloco por eBook, separados por um fio. */
.iqr-editorial-produtos__lista {
  display: grid;
  gap: var(--iqr-space-12);
}

.iqr-editorial-produtos__lista > * + * {
  padding-block-start: var(--iqr-space-12);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
}

/* O bloco: capa, texto (subtítulo, título, descrição, objetivos) e oferta
   (chamada, preço, condições). No celular, empilhados; no tablet, a capa ao
   lado do texto e da oferta; no computador, três colunas — a oferta ocupa a
   direita, e a linha não fica vazia. */
.iqr-editorial-produto {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: start;
  grid-template-areas:
    "capa"
    "texto"
    "oferta";
}

.iqr-editorial-produto > * { min-inline-size: 0; }

.iqr-editorial-produto__capa {
  grid-area: capa;
  display: block;
  inline-size: 11rem;
  block-size: auto;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
  border-radius: var(--iqr-radius-sm);
}

.iqr-editorial-produto__texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-editorial-produto__rotulo {
  margin: 0;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-quadro-text-muted);
}

.iqr-editorial-produto__texto h3 {
  margin: calc(-1 * var(--iqr-space-2)) 0 0;
  max-inline-size: 20ch;
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  text-wrap: balance;
}

.iqr-editorial-produto__resumo {
  margin: 0;
  max-inline-size: 52ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-quadro-text);
  text-wrap: pretty;
}

/* Sem objetivos cadastrados: o último parágrafo da descrição, em prosa. */
.iqr-editorial-produto__prosa {
  margin: 0;
  max-inline-size: 52ch;
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-quadro-text-secondary);
  text-wrap: pretty;
}

/* Três benefícios com marca de conferido; os dez atrás de "Ver os 10
   objetivos" (aberto, os três somem via :has()). */
.iqr-editorial-produto__objetivos { display: grid; gap: var(--iqr-space-2); }

.iqr-editorial-produto__beneficios {
  display: grid;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-inline-size: 52ch;
}

.iqr-editorial-produto__beneficios li {
  position: relative;
  padding-inline-start: var(--iqr-space-6);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-quadro-text-secondary);
}

.iqr-editorial-produto__beneficios li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-comercial-quadro-link);
}

.iqr-editorial-produto__objetivos:has(.iqr-editorial-produto__todos[open]) > .iqr-editorial-produto__beneficios {
  display: none;
}

/* Chamada, preço e condições: legíveis, sem parecer tabela. */
.iqr-editorial-produto__oferta {
  grid-area: oferta;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-editorial-produto__preco {
  margin: 0;
  color: var(--iqr-color-comercial-quadro-text);
}

/* O escopo comercial pinta <strong> na tinta clara do navy; aqui a superfície
   é clara, então a tinta é a do quadro. */
.iqr-editorial-produto__preco strong {
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--iqr-color-comercial-quadro-text);
}

.iqr-editorial-produto__preco span { color: var(--iqr-color-comercial-quadro-text-secondary); }

.iqr-editorial-produto__condicoes {
  display: grid;
  gap: var(--iqr-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-quadro-text-secondary);
}

.iqr-editorial-produto__aviso {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-quadro-text-muted);
}

@media (min-width: 30.0625rem) {
  .iqr-editorial-produto__oferta .iqr-button { align-self: start; }
}

@media (min-width: 40rem) {
  .iqr-editorial-produto {
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: var(--iqr-space-8);
    grid-template-areas:
      "capa texto"
      "capa oferta";
  }
  .iqr-editorial-produto__capa { inline-size: 14rem; }
}

@media (min-width: 64rem) {
  .iqr-editorial-produto {
    grid-template-columns: 16rem minmax(0, 1fr) 18rem;
    column-gap: var(--iqr-space-10);
    grid-template-areas: "capa texto oferta";
  }
  .iqr-editorial-produto__capa { inline-size: 16rem; }
  .iqr-editorial-produto__oferta {
    padding-inline-start: var(--iqr-space-8);
    border-inline-start: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
  }
  .iqr-editorial-produto__oferta .iqr-button { align-self: stretch; }
  .iqr-editorial-produto__resumo,
  .iqr-editorial-produto__beneficios,
  .iqr-editorial-produto__prosa { max-inline-size: 58ch; }
}

/* --- 3. Aprofundamento no primeiro eBook: sumário e método --------------- */

/* Emenda com a seção dos eBooks (mesma superfície): um fio, não outra dobra
   de respiro inteira. */
.iqr-editorial-aprofundamento { padding-block-start: 0; }

.iqr-editorial-aprofundamento__grade {
  display: grid;
  gap: var(--iqr-space-8);
  padding-block-start: var(--iqr-space-12);
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
  grid-template-areas:
    "titulo"
    "sumario"
    "metodo";
}

.iqr-editorial-aprofundamento__grade > * { min-inline-size: 0; }
.iqr-editorial-aprofundamento__grade > h2 { grid-area: titulo; margin: 0; }

/* Sumário vivo: numeral, título e página numa linha; o quiz do capítulo,
   recuado, embaixo. Aberto o sumário completo, a amostra some. */
.iqr-sumario-vivo { grid-area: sumario; }

.iqr-sumario-vivo__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
}

.iqr-sumario-vivo__capitulo {
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr) auto;
  column-gap: var(--iqr-space-3);
  align-items: baseline;
  padding-block: var(--iqr-space-3);
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
}

.iqr-sumario-vivo__numero {
  color: var(--iqr-color-comercial-quadro-text-muted);
  font-variant-numeric: tabular-nums;
}

.iqr-sumario-vivo__titulo {
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-quadro-text);
}

.iqr-sumario-vivo__pagina {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-comercial-quadro-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.iqr-sumario-vivo__quizzes {
  grid-column: 2 / -1;
  display: grid;
  gap: var(--iqr-space-2);
  margin: var(--iqr-space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
}

.iqr-sumario-vivo__quizzes li {
  display: grid;
  gap: var(--iqr-space-1);
}

.iqr-sumario-vivo__quiz-rotulo {
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-comercial-quadro-link);
}

.iqr-sumario-vivo__quiz-titulo { color: var(--iqr-color-comercial-quadro-text-secondary); }
.iqr-sumario-vivo__quiz-detalhe { color: var(--iqr-color-comercial-quadro-text-muted); }

.iqr-sumario-vivo:has(.iqr-sumario-vivo__completo[open]) .iqr-sumario-vivo__amostra { display: none; }
.iqr-sumario-vivo__completo { margin-block-start: var(--iqr-space-3); }

/* O método declarado: o único uso do peso 300. */
.iqr-citacao-material {
  grid-area: metodo;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-citacao-material blockquote { margin: 0; }

.iqr-citacao-material blockquote p {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-xl);
  font-weight: var(--iqr-weight-light);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-quadro-text);
  text-wrap: pretty;
}

.iqr-citacao-material__fonte {
  margin: 0;
  max-inline-size: 48ch;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-comercial-quadro-text-muted);
}

@media (min-width: 48rem) {
  .iqr-editorial-aprofundamento__grade { padding-block-start: var(--iqr-space-16); }
  .iqr-editorial-aprofundamento__grade > * { max-inline-size: 48rem; }
}

@media (min-width: 64rem) {
  .iqr-editorial-aprofundamento__grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--iqr-space-16);
    row-gap: var(--iqr-space-8);
    grid-template-areas:
      "titulo  titulo"
      "sumario metodo";
    align-items: start;
  }
  .iqr-editorial-aprofundamento__grade > * { max-inline-size: none; }
}

/* --- 4. Quizzes de leitura (navy + quadro claro) -------------------------- */

.iqr-editorial-quizzes {
  background-color: var(--iqr-color-comercial-bg-page);
  padding-block: var(--iqr-space-16);
}

/* Celular: frase curta, demonstração, regras dobradas. Computador: frase e
   regras à esquerda, demonstração à direita. */
.iqr-editorial-quizzes__grade {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: start;
  grid-template-areas:
    "texto"
    "quadro"
    "regras";
}

.iqr-editorial-quizzes__grade > * { min-inline-size: 0; }

.iqr-editorial-quizzes__texto { grid-area: texto; }

.iqr-editorial-quizzes h2 {
  margin: 0 0 var(--iqr-space-3);
  font-size: var(--iqr-size-display-md);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
}

.iqr-editorial-quizzes__lead {
  margin: 0;
  max-inline-size: 30ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: pretty;
}

/* Onde os quizzes existem hoje: um fato, em tom baixo. */
.iqr-editorial-quizzes__onde {
  margin: var(--iqr-space-3) 0 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-text-muted);
}

.iqr-editorial-quizzes__quadro {
  grid-area: quadro;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-editorial-quizzes__nota {
  margin: 0;
  max-inline-size: 52ch;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-editorial-quizzes__regras { grid-area: regras; }

.iqr-editorial-quizzes__fatos {
  display: grid;
  gap: var(--iqr-space-3);
  margin: 0;
  padding-inline-start: var(--iqr-space-6);
  max-inline-size: 52ch;
  font-size: var(--iqr-size-base);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
}

.iqr-editorial-quizzes__fatos li::marker {
  color: var(--iqr-color-comercial-text-primary);
  font-weight: var(--iqr-weight-semibold);
}

/* O quadro: mesma superfície aprovada, cantos menores, sem sombra, barra sem
   tracking, vocabulário do painel real. */
.iqr-editorial .iqr-home-quiz {
  border-radius: var(--iqr-radius-lg);
  box-shadow: none;
}

.iqr-editorial .iqr-home-quiz__barra {
  flex-wrap: wrap;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  letter-spacing: 0;
}

.iqr-editorial .iqr-home-quiz__rotulo {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--iqr-space-2) var(--iqr-space-4);
  margin: 0;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-quadro-link);
}

.iqr-editorial .iqr-home-quiz__progresso {
  font-weight: var(--iqr-weight-regular);
  color: var(--iqr-color-comercial-quadro-text-muted);
}

.iqr-editorial .iqr-home-quiz legend { font-weight: var(--iqr-weight-semibold); }

.iqr-editorial .iqr-home-quiz__opcao {
  font-size: var(--iqr-size-base);
  line-height: var(--iqr-leading-normal);
}

.iqr-editorial .iqr-home-quiz__letra {
  flex: none;
  min-inline-size: 1.25rem;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-comercial-quadro-link);
}

/* O feedback real tem veredito, rótulo e explicação — três parágrafos num
   bloco só, não três caixas. As regras de <p> das camadas 22/29 saem daqui. */
.iqr-editorial .iqr-home-quiz__feedback p {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
}

.iqr-editorial .iqr-home-quiz__veredito {
  display: grid;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-4);
  border-inline-start: var(--iqr-border-width-thick) solid var(--iqr-color-comercial-quadro-feedback-borda);
  background: var(--iqr-color-comercial-quadro-feedback-bg);
  color: var(--iqr-color-comercial-quadro-feedback-text);
}

.iqr-editorial .iqr-home-quiz__veredito--errado {
  border-inline-start-color: var(--iqr-color-comercial-quadro-alerta-text);
  background: var(--iqr-color-comercial-quadro-alerta-bg);
  color: var(--iqr-color-comercial-quadro-text-secondary);
}

.iqr-editorial .iqr-home-quiz__veredito-titulo {
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-editorial .iqr-home-quiz__veredito--certo .iqr-home-quiz__veredito-titulo { color: var(--iqr-color-comercial-quadro-feedback-text); }
.iqr-editorial .iqr-home-quiz__veredito--certo .iqr-home-quiz__veredito-marca { color: var(--iqr-color-comercial-quadro-sucesso-text); }
.iqr-editorial .iqr-home-quiz__veredito--errado .iqr-home-quiz__veredito-titulo,
.iqr-editorial .iqr-home-quiz__veredito--errado .iqr-home-quiz__veredito-marca { color: var(--iqr-color-comercial-quadro-alerta-text); }

.iqr-editorial .iqr-home-quiz__explicacao-rotulo {
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-quadro-text-muted);
}

@media (min-width: 48rem) {
  .iqr-editorial-quizzes { padding-block: var(--iqr-space-20); }
  .iqr-editorial-quizzes__quadro { max-inline-size: 40rem; }
}

@media (min-width: 64rem) {
  .iqr-editorial-quizzes { padding-block: var(--iqr-space-24); }
  .iqr-editorial-quizzes__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* A primeira linha mede só o texto; o quadro, que atravessa as duas,
       não empurra "Entenda como funciona" para o fim. */
    grid-template-rows: auto 1fr;
    column-gap: var(--iqr-space-16);
    row-gap: var(--iqr-space-6);
    grid-template-areas:
      "texto  quadro"
      "regras quadro";
  }
  .iqr-editorial-quizzes__quadro { max-inline-size: none; }
}

/* --- 5. FAQ (superfície clara): perguntas em dobras, com fios ------------ */

.iqr-editorial-faq__grade {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: start;
}

.iqr-editorial-faq__grade > * { min-inline-size: 0; }

.iqr-editorial-faq__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-editorial-faq__texto h2 { margin: 0; }

.iqr-editorial-faq__texto p {
  margin: 0;
  max-inline-size: 36ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-quadro-text);
}

.iqr-editorial-faq__suporte {
  display: inline-flex;
  align-items: center;
  align-self: start;
  min-block-size: 2.75rem;
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-comercial-quadro-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: var(--iqr-border-width-hairline);
}

.iqr-editorial-faq__itens {
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
}

.iqr-editorial-faq__item {
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-leitura-fio);
}

/* A pergunta é o summary: tinta escura, não a de link, porque é o texto
   principal da lista. */
.iqr-editorial-faq__item > summary {
  padding-block: var(--iqr-space-4);
  color: var(--iqr-color-comercial-quadro-text);
}

.iqr-editorial-faq__item[open] > summary { margin-block-end: 0; }

.iqr-editorial-faq__item > p {
  margin: 0 0 var(--iqr-space-5);
  padding-inline-start: var(--iqr-space-6);
  max-inline-size: 62ch;
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-quadro-text-secondary);
  text-wrap: pretty;
}

@media (min-width: 64rem) {
  .iqr-editorial-faq__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--iqr-space-16);
  }
}

/* --- 6. Chamada final (navy): texto e a paisagem aprovada, lado a lado ---- */

.iqr-editorial-chamada {
  background-color: var(--iqr-color-comercial-bg-page);
  padding-block: var(--iqr-space-16);
}

.iqr-editorial-chamada__grade {
  display: grid;
  gap: var(--iqr-space-8);
  align-items: center;
  grid-template-areas:
    "texto"
    "arte";
}

.iqr-editorial-chamada__grade > * { min-inline-size: 0; }

.iqr-editorial-chamada__texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-5);
}

.iqr-editorial-chamada h2 {
  margin: 0;
  font-size: var(--iqr-size-display-md);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
}

.iqr-editorial-chamada p {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

.iqr-editorial-chamada__texto .iqr-button { align-self: start; }

.iqr-editorial-chamada__arte {
  grid-area: arte;
  margin: 0;
  inline-size: 100%;
}

/* No celular a paisagem ganha altura (recorte para a direita, onde estão as
   luzes); no computador vai inteira, 3:1. */
.iqr-editorial-chamada__arte img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 72% center;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-fio);
  border-radius: var(--iqr-radius-md);
}

@media (max-width: 30rem) {
  .iqr-editorial-chamada__texto .iqr-button { align-self: stretch; }
}

@media (min-width: 48rem) {
  .iqr-editorial-chamada { padding-block: var(--iqr-space-20); }
  .iqr-editorial-chamada__arte img { aspect-ratio: 3 / 1; }
}

@media (min-width: 64rem) {
  .iqr-editorial-chamada__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--iqr-space-16);
    grid-template-areas: "texto arte";
  }
}

/* --- Rodapé: o fio em gradiente vira fio sólido -------------------------- */

.iqr-editorial .iqr-footer::before {
  background-image: none;
  background-color: var(--iqr-color-comercial-fio);
  opacity: 1;
}

/* ===== design-system\css\33-mostra.css ===== */
/* ==========================================================================
   33 — Prévia "vitrine" da home (rota /previa/home-vitrine, só Development).
   O escopo chama-se .iqr-mostra porque .iqr-vitrine já é a vitrine antiga
   (22-home). Referência dominante: DevClub (22/09) — abertura com título forte
   e figura grande, produtos com presença, plataforma mostrada em telas reais,
   ações evidentes. Identidade preservada: navy profundo, azul e ciano nas
   ações, roxo como detalhe, capas planas aprovadas, quadro claro no quiz,
   Poppins. Tudo sob .iqr-mostra (o <body> leva "iqr-comercial iqr-mostra");
   as demais páginas não mudam. Mobile-first: base é celular, min-width amplia.
   ========================================================================== */

/* --- Escopo ---------------------------------------------------------------- */

/* Uma ação principal por tela: "Criar conta" no cabeçalho vira contorno. */
.iqr-mostra .iqr-header .iqr-button--primary {
  background-image: none;
  background-color: transparent;
  color: var(--iqr-color-comercial-text-primary);
  border-color: var(--iqr-color-border-interactive);
  box-shadow: none;
}

.iqr-mostra .iqr-header .iqr-button--primary:hover {
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 8%, transparent);
}

.iqr-mostra .iqr-entrar,
.iqr-mostra .iqr-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

/* O aviso de ambiente (só Development) não entra nas capturas. */
.iqr-mostra .iqr-aviso-ambiente { display: none; }

/* Destaque em palavra: ciano SÓLIDO, uma vez por título. Sem gradiente. */
.iqr-mostra-destaque { color: var(--iqr-color-comercial-action-bg-solid); }

/* Link secundário discreto ao lado do botão principal. */
.iqr-mostra-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-comercial-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--iqr-border-width-hairline);
}

.iqr-mostra-link:hover { color: var(--iqr-color-comercial-action-bg-end); }

/* Cabeça de seção: título forte e uma frase. */
.iqr-mostra-cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  margin-block-end: var(--iqr-space-6);
}

.iqr-mostra-cabeca h2,
.iqr-mostra-quiz h2 {
  margin: 0;
  max-inline-size: 22ch;
  font-size: var(--iqr-size-display-md);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: balance;
}

.iqr-mostra-cabeca p,
.iqr-mostra-cabeca__vazio {
  margin: 0;
  max-inline-size: 48ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

/* Lista de fatos com marca de conferido (ciano). */
.iqr-mostra-fatos,
.iqr-mostra-card__beneficios {
  display: grid;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iqr-mostra-fatos li,
.iqr-mostra-card__beneficios li {
  position: relative;
  padding-inline-start: var(--iqr-space-6);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-text-secondary);
}

.iqr-mostra-fatos li::before,
.iqr-mostra-card__beneficios li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  font-weight: var(--iqr-weight-bold);
  color: var(--iqr-color-comercial-action-bg-solid);
}

/* Dobra: <details> nativo, abre sem JavaScript. */
.iqr-mostra-dobra > summary {
  display: list-item;
  cursor: pointer;
  min-block-size: 2.75rem;
  padding-block: var(--iqr-space-2);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-action-bg-end);
}

.iqr-mostra-dobra > summary:hover { text-decoration: underline; }

.iqr-mostra-dobra ul:not(.iqr-mostra-card__beneficios) {
  display: grid;
  gap: var(--iqr-space-2);
  margin: 0 0 var(--iqr-space-2);
  padding: 0;
  list-style: none;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-text-secondary);
}

/* --- A. Abertura ------------------------------------------------------------ */

.iqr-mostra-abertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--iqr-space-8) var(--iqr-space-8);
}

.iqr-mostra-abertura__grade {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: center;
}

.iqr-mostra-abertura__grade > * { min-inline-size: 0; }

.iqr-mostra-abertura__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

/* Rótulo curto com um ponto ciano: diz o que é o site antes do título. */
.iqr-mostra-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--iqr-space-2);
  margin: 0;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-eyebrow);
}

.iqr-mostra-marca span {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-comercial-action-bg-solid);
}

.iqr-mostra-abertura h1 {
  margin: 0;
  max-inline-size: 20ch;
  font-size: var(--iqr-size-display-lg);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-tight);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: balance;
}

/* As duas frases do título, uma por linha: "Entenda a IA." / "Coloque em prática." */
.iqr-mostra-abertura h1 .iqr-mostra-destaque { display: block; }

.iqr-mostra-abertura__lead {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-md);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

.iqr-mostra-abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iqr-space-3) var(--iqr-space-6);
}

/* No celular os fatos saem: título, apoio, ação e a figura. */
.iqr-mostra-fatos { display: none; font-size: var(--iqr-size-base); }

/* A cena: a capa aprovada (o produto) ao lado de uma representação do
   feedback do quiz (a experiência): rótulo "Demonstração", a resposta dada,
   "✓ Correto" e a explicação. Não é um formulário — nada parece clicável.
   Brilho curto e controlado atrás (ciano com um toque de roxo), nunca sobre
   texto. No celular, só o essencial, na mesma letra. */
.iqr-mostra-cena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  column-gap: var(--iqr-space-3);
  margin: 0;
}

/* Textos longos só a partir do tablet; no celular, as versões curtas. */
.iqr-mostra-cena__longo { display: none; }

.iqr-mostra-cena::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  z-index: -1;
  border-radius: var(--iqr-radius-full);
  background:
    radial-gradient(closest-side at 65% 50%, color-mix(in srgb, var(--iqr-color-accent-cyan) 22%, transparent), transparent 70%),
    radial-gradient(closest-side at 25% 75%, color-mix(in srgb, var(--iqr-color-brand-default) 18%, transparent), transparent 70%);
  filter: blur(24px);
}

.iqr-mostra-cena__capa {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--iqr-radius-sm);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.7);
  transform: rotate(-3deg);
}

.iqr-mostra-cena__quiz {
  overflow: hidden;
  min-inline-size: 0;
  border-radius: var(--iqr-radius-lg);
  background: var(--iqr-color-comercial-quadro-bg);
  color: var(--iqr-color-comercial-quadro-text);
  box-shadow: var(--iqr-shadow-glow);
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
}

.iqr-mostra-cena__barra {
  display: flex;
  justify-content: space-between;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-2) var(--iqr-space-4);
  background: var(--iqr-color-comercial-quadro-barra-bg);
  color: var(--iqr-color-comercial-quadro-barra-fg);
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-mostra-cena__corpo {
  display: grid;
  gap: var(--iqr-space-3);
  padding: var(--iqr-space-4);
}

.iqr-mostra-cena__pergunta {
  margin: 0;
  font-size: var(--iqr-size-base);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
}

/* A resposta dada: um bloco de texto com rótulo, sem rádio nem borda de campo. */
.iqr-mostra-cena__resposta {
  display: grid;
  gap: var(--iqr-space-1);
  margin: 0;
  padding: var(--iqr-space-3);
  border-radius: var(--iqr-radius-md);
  background: var(--iqr-color-comercial-quadro-selecao-bg);
  color: var(--iqr-color-comercial-quadro-text);
}

.iqr-mostra-cena__resposta-rotulo {
  font-size: var(--iqr-size-xs);
  font-weight: var(--iqr-weight-semibold);
  text-transform: none;
  color: var(--iqr-color-comercial-quadro-link);
}

.iqr-mostra-cena__veredito {
  display: grid;
  gap: var(--iqr-space-1);
  padding: var(--iqr-space-3);
  border-inline-start: var(--iqr-border-width-thick) solid var(--iqr-color-comercial-quadro-feedback-borda);
  background: var(--iqr-color-comercial-quadro-feedback-bg);
  color: var(--iqr-color-comercial-quadro-feedback-text);
}

.iqr-mostra-cena__veredito p { margin: 0; }

.iqr-mostra-cena__veredito-titulo { font-weight: var(--iqr-weight-semibold); }

@media (min-width: 48rem) {
  .iqr-mostra-abertura { padding-block: var(--iqr-space-12); }
  .iqr-mostra-abertura__lead { font-size: var(--iqr-size-lg); }
  .iqr-mostra-fatos { display: grid; }
  .iqr-mostra-cena {
    max-inline-size: 44rem;
    margin-inline: auto;
    column-gap: var(--iqr-space-6);
  }
  .iqr-mostra-cena__longo { display: inline; }
  .iqr-mostra-cena__pergunta.iqr-mostra-cena__longo { display: block; }
  .iqr-mostra-cena__curto { display: none; }
  .iqr-mostra-cena { grid-template-columns: minmax(0, 7fr) minmax(0, 8fr); column-gap: var(--iqr-space-6); }
  .iqr-mostra-cena__corpo { padding: var(--iqr-space-5); gap: var(--iqr-space-4); }
  .iqr-mostra-cena__quiz { font-size: var(--iqr-size-base); }
  .iqr-mostra-cena__pergunta { font-size: var(--iqr-size-lg); }
}

@media (min-width: 64rem) {
  .iqr-mostra-abertura { padding-block: var(--iqr-space-16) var(--iqr-space-12); }
  .iqr-mostra-abertura__grade {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: var(--iqr-space-12);
  }
  .iqr-mostra-abertura h1 { font-size: var(--iqr-size-display-xl); }
  .iqr-mostra-cena { max-inline-size: none; margin: 0; }
}

/* --- B. Vitrine dos eBooks -------------------------------------------------- */

.iqr-mostra-ebooks { padding-block: var(--iqr-space-8) var(--iqr-space-12); }

/* Os cards são filhos da grade e cada um é uma subgrade de 6 linhas: palco,
   cabeça (subtítulo + título), resumo, dados, oferta (preço + botão) e
   extras (benefícios + dobra). Lado a lado, cada linha alinha entre os dois:
   preço e botão à mesma altura, sem vazio além da diferença de texto. */
.iqr-mostra-cards {
  display: grid;
  gap: var(--iqr-space-5);
}

.iqr-mostra-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap: var(--iqr-space-3);
  overflow: hidden;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-etapa-borda);
  border-radius: var(--iqr-radius-lg);
  background-color: color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, var(--iqr-color-comercial-bg-page));
}

/* Sem subgrid (navegador antigo), o card vira uma coluna simples. */
@supports not (grid-template-rows: subgrid) {
  .iqr-mostra-card { grid-template-rows: auto; grid-row: auto; }
}

.iqr-mostra-card > * { min-inline-size: 0; padding-inline: var(--iqr-space-5); }

.iqr-mostra-card__palco {
  display: grid;
  place-items: center;
  padding: var(--iqr-space-5) var(--iqr-space-5) var(--iqr-space-3);
  background:
    radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--iqr-color-accent-cyan) 16%, transparent), transparent 100%),
    radial-gradient(40% 50% at 75% 25%, color-mix(in srgb, var(--iqr-color-brand-default) 14%, transparent), transparent 100%);
}

.iqr-mostra-card__palco img {
  display: block;
  inline-size: 9rem;
  block-size: auto;
  border-radius: var(--iqr-radius-sm);
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.75);
}

.iqr-mostra-card__cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-1);
}

.iqr-mostra-card__rotulo {
  margin: 0;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-eyebrow);
}

.iqr-mostra-card h3 {
  margin: 0;
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: balance;
}

.iqr-mostra-card__resumo,
.iqr-mostra-card__prosa {
  margin: 0;
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

.iqr-mostra-card__prosa { font-size: var(--iqr-size-sm); padding-inline: 0; }

/* Fatos do material: poucos, separados por ponto, sem selo. */
.iqr-mostra-card__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iqr-space-1) var(--iqr-space-2);
  margin: 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-mostra-card__fatos span + span::before {
  content: "·";
  margin-inline-end: var(--iqr-space-2);
}

.iqr-mostra-card__fato-quiz { color: var(--iqr-color-comercial-action-bg-end); }

/* Preço e ação; no celular o botão ocupa a linha. */
.iqr-mostra-card__oferta {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  padding-block: var(--iqr-space-1);
}

.iqr-mostra-card__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--iqr-space-2);
  margin: 0;
  color: var(--iqr-color-comercial-text-primary);
}

.iqr-mostra-card__preco strong {
  font-size: var(--iqr-size-display-sm);
  font-weight: var(--iqr-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--iqr-color-comercial-text-primary);
}

.iqr-mostra-card__preco span {
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-comercial-text-secondary);
}

.iqr-mostra-card__oferta .iqr-button {
  display: flex;
  inline-size: 100%;
}

/* Benefícios: a lista larga é do computador; a estreita vive na dobra. */
.iqr-mostra-card__extras {
  display: grid;
  gap: var(--iqr-space-3);
  padding-block-end: var(--iqr-space-4);
}

.iqr-mostra-card__beneficios { font-size: var(--iqr-size-sm); }
.iqr-mostra-card__beneficios--largo { display: none; }

.iqr-mostra-card__mais-conteudo {
  display: grid;
  gap: var(--iqr-space-3);
  padding-block: var(--iqr-space-1) var(--iqr-space-2);
}

.iqr-mostra-card__condicoes {
  display: grid;
  gap: var(--iqr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
  color: var(--iqr-color-comercial-text-secondary);
}

@media (min-width: 30.0625rem) {
  .iqr-mostra-card__oferta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .iqr-mostra-card__oferta .iqr-button { display: inline-flex; inline-size: auto; }
}

@media (min-width: 48rem) {
  .iqr-mostra-ebooks { padding-block: var(--iqr-space-12) var(--iqr-space-16); }
  .iqr-mostra-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--iqr-space-6); }
  .iqr-mostra-card { row-gap: var(--iqr-space-4); }
  .iqr-mostra-card > * { padding-inline: var(--iqr-space-6); }
  .iqr-mostra-card__palco { padding: var(--iqr-space-8) var(--iqr-space-6) var(--iqr-space-5); }
  .iqr-mostra-card__palco img { inline-size: 13rem; }
  .iqr-mostra-card__beneficios { font-size: var(--iqr-size-base); }
  .iqr-mostra-card__beneficios--largo { display: grid; }
  .iqr-mostra-card__beneficios--estreito { display: none; }
  .iqr-mostra-card__extras { padding-block-end: var(--iqr-space-6); }
}

@media (min-width: 64rem) {
  .iqr-mostra-cards { gap: var(--iqr-space-8); }
  .iqr-mostra-card > * { padding-inline: var(--iqr-space-8); }
  .iqr-mostra-card__palco img { inline-size: 15rem; }
}

/* Cursos: só existe quando há curso publicado; mesma cabeça de seção e um link. */
.iqr-mostra-cursos { padding-block: var(--iqr-space-8) var(--iqr-space-12); }

/* --- C. A plataforma por dentro -------------------------------------------- */

.iqr-mostra-plataforma { padding-block: var(--iqr-space-8) var(--iqr-space-6); }

/* Uma demonstração por linha; no computador, duas colunas. */
.iqr-mostra-passos {
  display: grid;
  gap: var(--iqr-space-8);
}

.iqr-mostra-passo {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
  margin: 0;
  min-inline-size: 0;
}

.iqr-mostra-passo__tela {
  overflow: hidden;
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-etapa-borda);
  border-radius: var(--iqr-radius-md);
  background-color: var(--iqr-color-bg-sunken);
}

.iqr-mostra-passo__tela img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* As duas telas são retrato e foram capturadas a 2× no celular: metade da
   largura natural já é o tamanho real, legível. */
.iqr-mostra-passo .iqr-mostra-passo__tela {
  inline-size: min(100%, 22rem);
}

.iqr-mostra-passo figcaption {
  max-inline-size: 44ch;
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

.iqr-mostra-passo figcaption strong { color: var(--iqr-color-comercial-text-primary); }

.iqr-mostra-plataforma__nota {
  margin: var(--iqr-space-5) 0 0;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

@media (min-width: 48rem) {
  .iqr-mostra-plataforma { padding-block: var(--iqr-space-12) var(--iqr-space-8); }
  .iqr-mostra-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--iqr-space-8); align-items: start; }
  .iqr-mostra-passo .iqr-mostra-passo__tela { inline-size: min(100%, 24rem); }
}

/* --- D. Quiz: título, uma frase e o quadro claro ---------------------------- */

.iqr-mostra-quiz { padding-block: var(--iqr-space-8) var(--iqr-space-16); }

.iqr-mostra-quiz__grade {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: start;
}

.iqr-mostra-quiz__grade > * { min-inline-size: 0; }

.iqr-mostra-quiz__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-mostra-quiz__lead {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

.iqr-mostra-quiz__onde {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

.iqr-mostra-quiz__regras { max-inline-size: 48ch; }

.iqr-mostra-quiz__quadro {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-4);
}

.iqr-mostra-quiz__nota {
  margin: 0;
  max-inline-size: 52ch;
  font-size: var(--iqr-size-sm);
  color: var(--iqr-color-text-muted);
}

/* O quadro claro no vocabulário do painel real (mesmas regras da home
   publicada, aqui sob o escopo da prévia). */
.iqr-mostra .iqr-home-quiz { border-radius: var(--iqr-radius-lg); }

.iqr-mostra .iqr-home-quiz__barra {
  flex-wrap: wrap;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  letter-spacing: 0;
}

.iqr-mostra .iqr-home-quiz__rotulo {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--iqr-space-2) var(--iqr-space-4);
  margin: 0;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-quadro-link);
}

.iqr-mostra .iqr-home-quiz__progresso {
  font-weight: var(--iqr-weight-regular);
  color: var(--iqr-color-comercial-quadro-text-muted);
}

.iqr-mostra .iqr-home-quiz legend { font-weight: var(--iqr-weight-semibold); }

.iqr-mostra .iqr-home-quiz__opcao {
  font-size: var(--iqr-size-base);
  line-height: var(--iqr-leading-normal);
}

.iqr-mostra .iqr-home-quiz__letra {
  flex: none;
  min-inline-size: 1.25rem;
  font-size: var(--iqr-size-sm);
  font-weight: var(--iqr-weight-semibold);
  color: var(--iqr-color-comercial-quadro-link);
}

.iqr-mostra .iqr-home-quiz__feedback p {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--iqr-size-sm);
  line-height: var(--iqr-leading-normal);
}

.iqr-mostra .iqr-home-quiz__veredito {
  display: grid;
  gap: var(--iqr-space-2);
  padding: var(--iqr-space-4);
  border-inline-start: var(--iqr-border-width-thick) solid var(--iqr-color-comercial-quadro-feedback-borda);
  background: var(--iqr-color-comercial-quadro-feedback-bg);
  color: var(--iqr-color-comercial-quadro-feedback-text);
}

.iqr-mostra .iqr-home-quiz__veredito--errado {
  border-inline-start-color: var(--iqr-color-comercial-quadro-alerta-text);
  background: var(--iqr-color-comercial-quadro-alerta-bg);
  color: var(--iqr-color-comercial-quadro-text-secondary);
}

.iqr-mostra .iqr-home-quiz__veredito-titulo {
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-semibold);
}

.iqr-mostra .iqr-home-quiz__veredito--certo .iqr-home-quiz__veredito-titulo { color: var(--iqr-color-comercial-quadro-feedback-text); }
.iqr-mostra .iqr-home-quiz__veredito--certo .iqr-home-quiz__veredito-marca { color: var(--iqr-color-comercial-quadro-sucesso-text); }
.iqr-mostra .iqr-home-quiz__veredito--errado .iqr-home-quiz__veredito-titulo,
.iqr-mostra .iqr-home-quiz__veredito--errado .iqr-home-quiz__veredito-marca { color: var(--iqr-color-comercial-quadro-alerta-text); }

.iqr-mostra .iqr-home-quiz__explicacao-rotulo {
  font-weight: var(--iqr-weight-medium);
  color: var(--iqr-color-comercial-quadro-text-muted);
}

@media (min-width: 48rem) {
  .iqr-mostra-quiz { padding-block: var(--iqr-space-10) var(--iqr-space-20); }
  .iqr-mostra-quiz__quadro { max-inline-size: 40rem; }
}

@media (min-width: 64rem) {
  .iqr-mostra-quiz__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--iqr-space-16);
  }
  .iqr-mostra-quiz__quadro { max-inline-size: none; }
}

/* --- E. Como começar: três etapas numeradas (é uma sequência de verdade) ---- */

.iqr-mostra-comecar { padding-block: var(--iqr-space-8) var(--iqr-space-12); }

.iqr-mostra-etapas {
  display: grid;
  gap: var(--iqr-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iqr-mostra-etapas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--iqr-space-4);
  row-gap: var(--iqr-space-1);
  align-items: start;
}

.iqr-mostra-etapa__numero {
  display: grid;
  place-items: center;
  grid-row: span 2;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--iqr-radius-full);
  background-color: var(--iqr-color-comercial-action-bg-solid);
  color: var(--iqr-color-comercial-action-fg);
  font-weight: var(--iqr-weight-bold);
  font-variant-numeric: tabular-nums;
}

.iqr-mostra-etapas h3 {
  margin: 0;
  align-self: center;
  font-size: var(--iqr-size-lg);
  font-weight: var(--iqr-weight-semibold);
  line-height: var(--iqr-leading-snug);
  color: var(--iqr-color-comercial-text-primary);
}

.iqr-mostra-etapas p {
  margin: 0;
  max-inline-size: 40ch;
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .iqr-mostra-comecar { padding-block: var(--iqr-space-12) var(--iqr-space-16); }
  .iqr-mostra-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--iqr-space-8); }
  /* Cada etapa alinha pelo topo: a altura sobrando (do vizinho mais longo)
     não se espalha entre as linhas. */
  .iqr-mostra-etapas li { grid-template-columns: 1fr; row-gap: var(--iqr-space-3); align-content: start; }
  .iqr-mostra-etapa__numero { grid-row: auto; }
  .iqr-mostra-etapas h3 { align-self: start; }
}

/* --- F. FAQ: perguntas em dobras, com fios -------------------------------- */

.iqr-mostra-faq { padding-block: var(--iqr-space-8) var(--iqr-space-12); }

.iqr-mostra-faq__grade {
  display: grid;
  gap: var(--iqr-space-6);
  align-items: start;
}

.iqr-mostra-faq__grade > * { min-inline-size: 0; }

.iqr-mostra-faq__texto {
  display: flex;
  flex-direction: column;
  gap: var(--iqr-space-3);
}

.iqr-mostra-faq__texto h2 {
  margin: 0;
  max-inline-size: 22ch;
  font-size: var(--iqr-size-display-md);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: balance;
}

.iqr-mostra-faq__texto p {
  margin: 0;
  max-inline-size: 36ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
}

.iqr-mostra-faq__texto .iqr-mostra-link { align-self: start; }

.iqr-mostra-faq__itens {
  border-block-start: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-etapa-borda);
}

.iqr-mostra-faq__item {
  border-block-end: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-etapa-borda);
}

/* A pergunta é o summary: tinta clara, tamanho de corpo. */
.iqr-mostra-faq__item > summary {
  padding-block: var(--iqr-space-4);
  font-size: var(--iqr-size-base);
  color: var(--iqr-color-comercial-text-primary);
}

.iqr-mostra-faq__item > p {
  margin: 0 0 var(--iqr-space-5);
  padding-inline-start: var(--iqr-space-6);
  max-inline-size: 62ch;
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .iqr-mostra-faq { padding-block: var(--iqr-space-12) var(--iqr-space-16); }
}

@media (min-width: 64rem) {
  .iqr-mostra-faq__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--iqr-space-16);
  }
}

/* --- G. Chamada final: título, uma frase, o botão para a vitrine ---------- */

.iqr-mostra-chamada { padding-block: var(--iqr-space-8) var(--iqr-space-16); }

.iqr-mostra-chamada__caixa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--iqr-space-5);
  padding: var(--iqr-space-8) var(--iqr-space-5);
  border: var(--iqr-border-width-hairline) solid var(--iqr-color-comercial-etapa-borda);
  border-radius: var(--iqr-radius-lg);
  background:
    radial-gradient(60% 80% at 85% 20%, color-mix(in srgb, var(--iqr-color-accent-cyan) 16%, transparent), transparent 100%),
    radial-gradient(40% 60% at 10% 90%, color-mix(in srgb, var(--iqr-color-brand-default) 14%, transparent), transparent 100%),
    color-mix(in srgb, var(--iqr-color-bg-inverse) 4%, var(--iqr-color-comercial-bg-page));
}

.iqr-mostra-chamada h2 {
  margin: 0;
  max-inline-size: 18ch;
  font-size: var(--iqr-size-display-md);
  font-weight: var(--iqr-weight-bold);
  line-height: var(--iqr-leading-snug);
  letter-spacing: var(--iqr-tracking-tight);
  color: var(--iqr-color-comercial-text-primary);
  text-wrap: balance;
}

.iqr-mostra-chamada p {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--iqr-size-lg);
  line-height: var(--iqr-leading-relaxed);
  color: var(--iqr-color-comercial-text-secondary);
}

@media (min-width: 48rem) {
  .iqr-mostra-chamada { padding-block: var(--iqr-space-12) var(--iqr-space-20); }
  .iqr-mostra-chamada__caixa {
    align-items: center;
    text-align: center;
    padding: var(--iqr-space-12) var(--iqr-space-8);
  }
}

/* --- Rodapé: no escopo da prévia, o fio em gradiente vira fio sólido ------- */

.iqr-mostra .iqr-footer::before {
  background-image: none;
  background-color: var(--iqr-color-comercial-etapa-borda);
  opacity: 1;
}

/* Movimento reduzido: nada aqui anima; a regra global da base já cobre. */