/* ==========================================================================
   IQNorth · Design System v2 (26/set/2026)
   Fonte da verdade visual do site, do quiz e da área de membro.

   - Tipografia: Sora (títulos, números, botões) + Figtree (texto e interface).
     Sai a Instrument Serif: o dono achou o condensado com itálico "estranho".
     Critério em tipografia.html.
   - Nenhum controle nativo aparece cru: input, checkbox, radio, select e switch
     são componentes próprios, com os mesmos estados (hover só em ponteiro
     fino, focus-visible, disabled, erro, sucesso).
   - Alvo de toque mínimo de 44 px. Botão tem altura FIXA e nunca quebra linha.
   - Movimento: tokens do transitions.dev (.agents/skills/transitions-dev),
     com prefers-reduced-motion respeitado no fim do arquivo.
   Carregue as fontes com:
   https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Figtree:wght@400;500;600;700&display=swap
   ========================================================================== */

:root {
  /* ---- cor (contraste medido, AA) ---- */
  --q-tinta: #14172E;          /* texto principal · 16,2:1 sobre fundo */
  --q-texto: #2A2E45;          /* corpo longo · 12,2:1 */
  --q-suave: #545A73;          /* secundário · 6,2:1 */
  --q-apagado: #8A8FA6;        /* só disabled (isento de AA pela WCAG); nunca para informação */
  --q-prim: #3A34C4;           /* ação · branco sobre ela 8,5:1 */
  --q-prim-hover: #2F29AE;
  --q-prim-press: #2A2596;
  --q-prim-100: #EFEEFD;       /* fundo de seleção */
  --q-prim-200: #DCDAFB;       /* borda de seleção, anel de foco claro */
  --q-ouro: #E9A23B;           /* ponto da marca, destaque (preenchimento) */
  --q-ouro-texto: #9A5B07;     /* ouro como texto em fundo claro · 5,0:1 */
  --q-fundo: #F7F5F0;          /* papel */
  --q-fundo-2: #F1EEE7;
  --q-sup: #FFFFFF;
  --q-sup-2: #EFECE5;
  --q-borda: #E2DED4;
  --q-borda-forte: #CFC9BC;
  --q-ok: #1A7550;  --q-ok-100: #E6F4EC;   /* 5,0:1 sobre ok-100, 5,7:1 sobre branco */
  --q-erro: #B93A26; --q-erro-100: #FBEAE6;
  --q-aviso: #8A5A00; --q-aviso-100: #FDF3DF;
  --q-noite: #0E1024;
  --q-noite-2: #171A33;
  --q-noite-3: #23274A;
  --q-noite-texto: #F2F0EA;
  --q-noite-suave: #A7ABC6;
  --q-prim-noite: #8F8BFF;

  /* ---- tipografia ---- */
  --q-display: 'Sora', 'Sora Fallback', 'Figtree', system-ui, sans-serif; /* Fallback: css/base.css */
  --q-ui: 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --q-t-numero: 700 clamp(72px, 18vw, 120px)/0.9 var(--q-display);   /* o QI */
  --q-t-h1: 700 clamp(34px, 7vw, 56px)/1.05 var(--q-display);
  --q-t-h2: 700 clamp(26px, 4.6vw, 36px)/1.12 var(--q-display);
  --q-t-h3: 600 20px/1.3 var(--q-display);
  --q-t-corpo: 400 16px/1.55 var(--q-ui);
  --q-t-corpo-g: 400 18px/1.55 var(--q-ui);
  --q-t-rotulo: 600 14px/1.3 var(--q-ui);
  --q-t-legenda: 500 13px/1.4 var(--q-ui);
  --q-t-sobre: 700 12px/1 var(--q-ui);   /* SOBRETÍTULO, caixa-alta +0.08em */
  --q-ls-display: -0.03em;

  /* ---- forma ---- */
  --q-r-xs: 8px; --q-r-s: 12px; --q-r-m: 16px; --q-r-l: 22px; --q-r-xl: 28px; --q-r-pill: 999px;
  --q-sombra-1: 0 1px 2px rgba(20,23,46,.06), 0 2px 8px rgba(20,23,46,.05);
  --q-sombra-2: 0 2px 4px rgba(20,23,46,.06), 0 12px 32px rgba(20,23,46,.10);
  --q-sombra-3: 0 8px 16px rgba(20,23,46,.10), 0 32px 64px rgba(20,23,46,.18);
  --q-sombra-cta: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px rgba(58,52,196,.30);
  --q-anel: 0 0 0 3px var(--q-sup), 0 0 0 6px var(--q-prim);   /* focus-visible */
  --q-esp: 4px;               /* grade de 4 */
  --q-gutter: 20px;           /* margem lateral no celular */
  --q-toque: 44px;            /* alvo mínimo */

  /* ---- movimento (transitions.dev) ---- */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  --distance-micro: 4px; --distance-base: 8px; --distance-medium: 12px;
  --scale-large: 0.96; --scale-medium: 0.97;
  --blur-small: 2px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
.q-base, .q-base body {
  margin: 0; background: var(--q-fundo); color: var(--q-texto); font: var(--q-t-corpo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
.q-h1 { font: var(--q-t-h1); letter-spacing: var(--q-ls-display); color: var(--q-tinta); margin: 0; text-wrap: balance; }
.q-h2 { font: var(--q-t-h2); letter-spacing: -0.025em; color: var(--q-tinta); margin: 0; text-wrap: balance; }
.q-h3 { font: var(--q-t-h3); letter-spacing: -0.01em; color: var(--q-tinta); margin: 0; }
.q-h1 em, .q-h2 em { font-style: normal; color: var(--q-prim); }
.q-sobre { font: var(--q-t-sobre); letter-spacing: .08em; text-transform: uppercase; color: var(--q-suave); }
.q-num { font-variant-numeric: tabular-nums lining-nums; }
.q-numero { font: var(--q-t-numero); letter-spacing: -0.045em; font-variant-numeric: tabular-nums lining-nums; }

/* ==========================================================================
   Botão — altura fixa, 1 linha, 3 variantes × 3 tamanhos
   ========================================================================== */
.q-btn {
  --h: 48px; --px: 22px; --fs: 16px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); min-width: var(--h); padding: 0 var(--px); max-width: 100%;
  border: 0; border-radius: var(--q-r-pill); cursor: pointer; user-select: none;
  font: 600 var(--fs)/1 var(--q-display); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
  transition: background-color var(--duration-quick) var(--ease-smooth-out),
              box-shadow var(--duration-quick) var(--ease-smooth-out),
              transform var(--duration-quick) var(--ease-smooth-out),
              color var(--duration-quick) var(--ease-smooth-out);
}
.q-btn svg { width: 18px; height: 18px; flex: none; }
.q-btn--s { --h: 40px; --px: 16px; --fs: 14px; }
.q-btn--m { --h: 48px; --px: 22px; --fs: 16px; }
.q-btn--l { --h: 56px; --px: 28px; --fs: 17px; }
.q-btn--bloco { width: 100%; }
.q-btn--s::after { content: ''; position: absolute; inset: -2px 0; }  /* alvo de toque 44 px no botão pequeno */

.q-btn--prim { background: var(--q-prim); color: #fff; box-shadow: var(--q-sombra-cta); }
.q-btn--sec  { background: var(--q-sup); color: var(--q-tinta); box-shadow: inset 0 0 0 1.5px var(--q-borda-forte); }
.q-btn--ghost{ background: transparent; color: var(--q-prim); }
@media (hover: hover) and (pointer: fine) {
  .q-btn--prim:hover { background: var(--q-prim-hover); }
  .q-btn--sec:hover  { box-shadow: inset 0 0 0 1.5px var(--q-tinta); }
  .q-btn--ghost:hover{ background: var(--q-prim-100); }
}
.q-btn:active { transform: scale(0.98); }
.q-btn--prim:active { background: var(--q-prim-press); }
.q-btn:focus-visible { outline: none; box-shadow: var(--q-anel); }
.q-btn:disabled, .q-btn[aria-disabled="true"] {
  cursor: not-allowed; transform: none; background: var(--q-sup-2); color: var(--q-apagado); box-shadow: none;
}
.q-btn--ghost:disabled { background: transparent; }
/* carregando: o texto some com blur e entra o spinner, sem mudar a largura */
.q-btn[data-carregando="true"] { color: transparent; pointer-events: none; }
.q-btn[data-carregando="true"]::before {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: q-gira 700ms linear infinite;
}
.q-btn--sec[data-carregando="true"]::before { border-color: var(--q-borda); border-top-color: var(--q-prim); }
@keyframes q-gira { to { transform: rotate(360deg); } }

/* ==========================================================================
   Campo de texto / e-mail — rótulo flutuante, sem cara de HTML
   ========================================================================== */
.q-campo { position: relative; display: block; }
.q-campo__caixa {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 16px; border-radius: var(--q-r-m);
  background: var(--q-sup); box-shadow: inset 0 0 0 1.5px var(--q-borda);
  transition: box-shadow var(--duration-quick) var(--ease-smooth-out), background-color var(--duration-quick);
}
.q-campo__icone { width: 20px; height: 20px; color: var(--q-suave); flex: none; transition: color var(--duration-quick); }
.q-campo input {
  all: unset; box-sizing: border-box; flex: 1; min-width: 0; height: 100%;
  padding-top: 18px; font: 500 16px/1.2 var(--q-ui); color: var(--q-tinta); caret-color: var(--q-prim);
}
.q-campo label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); transform-origin: left center;
  font: 500 16px/1 var(--q-ui); color: var(--q-suave); pointer-events: none;
  transition: transform var(--duration-fast) var(--ease-smooth-out), color var(--duration-quick);
}
.q-campo__icone ~ label { left: 46px; }
.q-campo input::placeholder { color: transparent; }
/* rótulo sobe quando há foco ou texto */
.q-campo input:focus + label,
.q-campo input:not(:placeholder-shown) + label { transform: translateY(-19px) scale(0.78); }
.q-campo input:focus + label { color: var(--q-prim); }
@media (hover: hover) and (pointer: fine) { .q-campo__caixa:hover { box-shadow: inset 0 0 0 1.5px var(--q-borda-forte); } }
.q-campo__caixa:focus-within { box-shadow: inset 0 0 0 2px var(--q-prim), 0 0 0 4px var(--q-prim-200); }
.q-campo__caixa:focus-within .q-campo__icone { color: var(--q-prim); }
.q-campo__ajuda { display: flex; gap: 6px; align-items: flex-start; margin: 8px 4px 0; font: var(--q-t-legenda); color: var(--q-suave); min-height: 18px; }
.q-campo__estado { width: 20px; height: 20px; flex: none; opacity: 0; transform: scale(.6);
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-bounce); }
/* erro */
.q-campo.is-erro .q-campo__caixa { box-shadow: inset 0 0 0 2px var(--q-erro); background: #FFFCFB; }
.q-campo.is-erro .q-campo__caixa:focus-within { box-shadow: inset 0 0 0 2px var(--q-erro), 0 0 0 4px var(--q-erro-100); }
.q-campo.is-erro label, .q-campo.is-erro .q-campo__ajuda { color: var(--q-erro); }
.q-campo.is-erro .q-campo__estado--erro { opacity: 1; transform: none; color: var(--q-erro); }
.q-campo.is-treme .q-campo__caixa { animation: q-treme 360ms var(--ease-smooth-out); }
@keyframes q-treme { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
/* sucesso */
.q-campo.is-ok .q-campo__caixa { box-shadow: inset 0 0 0 2px var(--q-ok); }
.q-campo.is-ok .q-campo__estado--ok { opacity: 1; transform: none; color: var(--q-ok); }
.q-campo.is-ok .q-campo__ajuda { color: var(--q-ok); }
/* desabilitado */
.q-campo.is-off .q-campo__caixa { background: var(--q-sup-2); box-shadow: none; }
.q-campo.is-off input, .q-campo.is-off label { color: var(--q-apagado); cursor: not-allowed; }

/* ==========================================================================
   Checkbox — caixa preenche, depois o ✓ é desenhado
   ========================================================================== */
.q-check { display: inline-flex; align-items: flex-start; gap: 12px; min-height: var(--q-toque); padding: 10px 0; cursor: pointer; font: 500 15px/1.45 var(--q-ui); color: var(--q-texto); }
.q-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-check__caixa {
  width: 22px; height: 22px; flex: none; margin-top: 0; border-radius: 7px; display: grid; place-items: center;
  background: var(--q-sup); box-shadow: inset 0 0 0 1.5px var(--q-borda-forte);
  transition: background-color var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick);
}
.q-check__caixa svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 350ms var(--ease-smooth-out); }
.q-check input:checked + .q-check__caixa { background: var(--q-prim); box-shadow: none; }
.q-check input:checked + .q-check__caixa svg { stroke-dashoffset: 0; transition-delay: 60ms; }
.q-check input:focus-visible + .q-check__caixa { box-shadow: var(--q-anel); }
.q-check input:disabled + .q-check__caixa { background: var(--q-sup-2); box-shadow: none; }
.q-check a { color: var(--q-prim); font-weight: 600; }

/* ==========================================================================
   Radio-card de plano
   ========================================================================== */
.q-plano { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 18px; min-height: 72px; border-radius: var(--q-r-l); background: var(--q-sup); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--q-borda);
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast), transform var(--duration-quick); }
.q-plano input { position: absolute; opacity: 0; }
.q-plano__bola { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--q-borda-forte); display: grid; place-items: center; transition: box-shadow var(--duration-quick); }
.q-plano__bola::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--q-prim); transform: scale(0); transition: transform var(--duration-fast) var(--ease-bounce); }
.q-plano__nome { display: block; font: 600 16px/1.3 var(--q-display); color: var(--q-tinta); }
.q-plano__desc { display: block; font: var(--q-t-legenda); color: var(--q-suave); margin-top: 2px; }
.q-plano__preco { text-align: right; font: 700 18px/1.1 var(--q-display); color: var(--q-tinta); white-space: nowrap; }
.q-plano__preco small { display: block; font: var(--q-t-legenda); color: var(--q-suave); }
.q-plano__selo { position: absolute; top: -10px; right: 16px; }
@media (hover: hover) and (pointer: fine) { .q-plano:hover { box-shadow: inset 0 0 0 1.5px var(--q-borda-forte); } }
.q-plano:active { transform: scale(0.99); }
.q-plano:has(input:checked) { background: var(--q-prim-100); box-shadow: inset 0 0 0 2px var(--q-prim); }
.q-plano:has(input:checked) .q-plano__bola { box-shadow: inset 0 0 0 2px var(--q-prim); }
.q-plano:has(input:checked) .q-plano__bola::after { transform: scale(1); }
.q-plano:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--q-prim), 0 0 0 4px var(--q-prim-200); }

/* ==========================================================================
   Toggle — polegar com overshoot duplo (transitions.dev 27)
   ========================================================================== */
.q-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: var(--q-toque); cursor: pointer; font: 500 15px/1.3 var(--q-ui); color: var(--q-texto); }
.q-toggle input { position: absolute; opacity: 0; }
.q-toggle__trilho { width: 46px; height: 28px; border-radius: 999px; background: var(--q-borda-forte); padding: 3px; flex: none; transition: background-color 250ms var(--ease-smooth-out); }
.q-toggle__polegar { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,23,46,.25);
  transition: transform 350ms var(--toggle-ease); }
.q-toggle input:checked + .q-toggle__trilho { background: var(--q-prim); }
.q-toggle input:checked + .q-toggle__trilho .q-toggle__polegar { transform: translateX(18px); }
.q-toggle input:focus-visible + .q-toggle__trilho { box-shadow: var(--q-anel); }
.q-toggle input:disabled + .q-toggle__trilho { opacity: .45; }

/* ==========================================================================
   Segmented / abas — pílula desliza (transitions.dev 16)
   ========================================================================== */
.q-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--q-r-pill); background: var(--q-sup-2); }
.q-seg__pilula { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: var(--q-r-pill); background: var(--q-sup); box-shadow: var(--q-sombra-1);
  transition: transform 250ms var(--ease-smooth-out), width 250ms var(--ease-smooth-out); }
.q-seg button { all: unset; position: relative; z-index: 1; height: 40px; padding: 0 18px; text-align: center; cursor: pointer; border-radius: var(--q-r-pill);
  font: 600 14px/40px var(--q-ui); color: var(--q-suave); white-space: nowrap; transition: color 250ms var(--ease-smooth-out); }
.q-seg button[aria-selected="true"] { color: var(--q-tinta); }
.q-seg button:focus-visible { box-shadow: 0 0 0 2px var(--q-prim); }
/* abas com sublinhado (área de membro) */
.q-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--q-borda); overflow-x: auto; scrollbar-width: none; }
.q-abas button { all: unset; position: relative; height: 48px; padding: 0 14px; cursor: pointer; font: 600 15px/48px var(--q-ui); color: var(--q-suave); white-space: nowrap; }
.q-abas button::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--q-prim); transform: scaleX(0); transition: transform 250ms var(--ease-smooth-out); }
.q-abas button[aria-selected="true"] { color: var(--q-tinta); }
.q-abas button[aria-selected="true"]::after { transform: scaleX(1); }
.q-abas button:focus-visible { box-shadow: inset 0 0 0 2px var(--q-prim); border-radius: 8px; }

/* ==========================================================================
   Select — botão + lista própria (nunca o <select> nativo cru)
   ========================================================================== */
.q-select { position: relative; }
.q-select__botao { all: unset; box-sizing: border-box; width: 100%; height: 58px; padding: 0 44px 0 16px; border-radius: var(--q-r-m); cursor: pointer;
  background: var(--q-sup); box-shadow: inset 0 0 0 1.5px var(--q-borda); display: flex; flex-direction: column; justify-content: center;
  transition: box-shadow var(--duration-quick) var(--ease-smooth-out); }
.q-select__botao small { font: 500 12px/1.2 var(--q-ui); color: var(--q-suave); }
.q-select__botao span { font: 500 16px/1.3 var(--q-ui); color: var(--q-tinta); }
.q-select__botao::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--q-suave); border-bottom: 2px solid var(--q-suave); transform: rotate(45deg); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.q-select[data-aberto="true"] .q-select__botao::after { transform: rotate(225deg); margin-top: -2px; }
@media (hover: hover) and (pointer: fine) { .q-select__botao:hover { box-shadow: inset 0 0 0 1.5px var(--q-borda-forte); } }
.q-select__botao:focus-visible, .q-select[data-aberto="true"] .q-select__botao { box-shadow: inset 0 0 0 2px var(--q-prim), 0 0 0 4px var(--q-prim-200); }
.q-select__lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--q-sup); border-radius: var(--q-r-m); box-shadow: var(--q-sombra-3); transform-origin: top center;
  opacity: 0; transform: scale(var(--scale-medium)) translateY(-4px); pointer-events: none;
  transition: opacity 150ms var(--ease-smooth-out), transform 150ms var(--ease-smooth-out); }
.q-select[data-aberto="true"] .q-select__lista { opacity: 1; transform: none; pointer-events: auto; transition-duration: 250ms; }
.q-select__lista li { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; font: 500 15px/1.3 var(--q-ui); color: var(--q-texto); }
.q-select__lista li:hover, .q-select__lista li[data-ativo="true"] { background: var(--q-fundo); }
.q-select__lista li[aria-selected="true"] { color: var(--q-prim); font-weight: 600; }
.q-select__lista li[aria-selected="true"]::after { content: '✓'; }

/* ==========================================================================
   Acordeão — grid-rows 0fr → 1fr (transitions.dev 21)
   ========================================================================== */
.q-acordeao { border-radius: var(--q-r-l); background: var(--q-sup); box-shadow: var(--q-sombra-1); overflow: hidden; }
.q-acordeao__item + .q-acordeao__item { border-top: 1px solid var(--q-borda); }
.q-acordeao__cab { all: unset; box-sizing: border-box; width: 100%; min-height: 60px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  font: 600 16px/1.35 var(--q-display); color: var(--q-tinta); }
.q-acordeao__cab:focus-visible { box-shadow: inset 0 0 0 2px var(--q-prim); }
.q-acordeao__seta { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--q-fundo); display: grid; place-items: center; transition: transform 250ms var(--ease-smooth-out), background-color 250ms; }
.q-acordeao__seta svg { width: 14px; height: 14px; stroke: var(--q-tinta); stroke-width: 2.2; fill: none; }
.q-acordeao__item[data-aberto="true"] .q-acordeao__seta { transform: rotate(180deg); background: var(--q-prim-100); }
.q-acordeao__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms var(--ease-smooth-out); }
.q-acordeao__item[data-aberto="true"] .q-acordeao__painel { grid-template-rows: 1fr; }
.q-acordeao__painel > div { overflow: hidden; }
.q-acordeao__painel p { margin: 0; padding: 0 20px 18px; color: var(--q-suave); font: var(--q-t-corpo); }

/* ==========================================================================
   Cartão, selo, barra de progresso
   ========================================================================== */
.q-card { background: var(--q-sup); border-radius: var(--q-r-l); box-shadow: var(--q-sombra-1); padding: 20px; }
.q-card--elev { box-shadow: var(--q-sombra-2); }
.q-card--noite { background: var(--q-noite); color: var(--q-noite-texto); box-shadow: none; }
.q-card--link { transition: transform var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .q-card--link:hover { transform: translateY(-2px); box-shadow: var(--q-sombra-2); } }

.q-selo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--q-r-pill); white-space: nowrap;
  font: 700 12px/1 var(--q-ui); letter-spacing: .02em; background: var(--q-sup-2); color: var(--q-texto); }
.q-selo--prim { background: var(--q-prim-100); color: var(--q-prim); }
.q-selo--ouro { background: var(--q-ouro); color: var(--q-tinta); }
.q-selo--ok { background: var(--q-ok-100); color: var(--q-ok); }
.q-selo--erro { background: var(--q-erro-100); color: var(--q-erro); }
.q-selo--noite { background: rgba(242,240,234,.1); color: var(--q-noite-texto); }
.q-selo__ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.q-progresso { height: 6px; border-radius: 999px; background: var(--q-sup-2); overflow: hidden; }
.q-progresso > i { display: block; height: 100%; border-radius: inherit; background: var(--q-prim); transition: width var(--duration-slow) var(--ease-smooth-out); }

/* ==========================================================================
   Toast — sobe com blur, sai mais rápido (transitions.dev 22)
   ========================================================================== */
.q-toasts { position: fixed; z-index: 60; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, 420px); display: grid; gap: 8px; pointer-events: none; }
.q-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px 12px 16px; border-radius: var(--q-r-m);
  background: var(--q-noite); color: var(--q-noite-texto); box-shadow: var(--q-sombra-3); font: 500 15px/1.35 var(--q-ui);
  animation: q-toast-in 350ms var(--ease-smooth-out) both; }
.q-toast[data-saindo="true"] { animation: q-toast-out 250ms var(--ease-smooth-out) both; }
.q-toast__icone { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--q-ok); }
.q-toast__icone svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; }
.q-toast--erro .q-toast__icone { background: var(--q-erro); }
.q-toast button { all: unset; margin-left: auto; padding: 0 8px; height: 32px; border-radius: 8px; cursor: pointer; font: 700 14px/32px var(--q-ui); color: var(--q-prim-noite); }
@keyframes q-toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(2px); } }
@keyframes q-toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(2px); } }

/* ==========================================================================
   Modal — sobe do rodapé no celular, centraliza no desktop (transitions.dev 06)
   ========================================================================== */
.q-modal { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center; }
.q-modal[hidden] { display: none; }
.q-modal__veu { position: absolute; inset: 0; background: rgba(14,16,36,.48); animation: q-veu-in 250ms var(--ease-smooth-out) both; }
.q-modal__caixa { position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow: auto; padding: 24px var(--q-gutter) calc(20px + env(safe-area-inset-bottom));
  background: var(--q-sup); border-radius: var(--q-r-xl) var(--q-r-xl) 0 0; box-shadow: var(--q-sombra-3); animation: q-folha-in 350ms var(--ease-smooth-out) both; }
.q-modal__alca { width: 40px; height: 5px; border-radius: 5px; background: var(--q-borda-forte); margin: -10px auto 16px; }
.q-modal[data-saindo="true"] .q-modal__veu { animation: q-veu-out 150ms var(--ease-smooth-out) both; }
.q-modal[data-saindo="true"] .q-modal__caixa { animation: q-folha-out 150ms var(--ease-smooth-out) both; }
@keyframes q-veu-in { from { opacity: 0; } } @keyframes q-veu-out { to { opacity: 0; } }
@keyframes q-folha-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes q-folha-out { to { transform: translateY(24px); opacity: 0; } }
@media (min-width: 640px) {
  .q-modal { align-items: center; }
  .q-modal__caixa { border-radius: var(--q-r-xl); padding: 28px; }
  .q-modal__alca { display: none; }
  @keyframes q-folha-in { from { transform: scale(var(--scale-large)); opacity: 0; } }
  @keyframes q-folha-out { to { transform: scale(var(--scale-large)); opacity: 0; } }
}

/* ==========================================================================
   Cabeçalho e navegação inferior do app
   ========================================================================== */
.q-cab { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 var(--q-gutter); background: rgba(247,245,240,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(207,201,188,.5); }
.q-cab img { height: 28px; display: block; }
.q-cab--noite { background: rgba(14,16,36,.8); border-bottom-color: rgba(255,255,255,.08); }
.q-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--q-prim-100); color: var(--q-prim); font: 700 14px/1 var(--q-display); }

.q-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--q-borda); }
.q-nav a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; border-radius: 14px; text-decoration: none;
  font: 600 11.5px/1 var(--q-ui); color: var(--q-suave); transition: color var(--duration-quick); }
.q-nav a svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.q-nav a::before { content: ''; position: absolute; top: 4px; width: 56px; height: 32px; border-radius: 16px; background: var(--q-prim-100); transform: scaleX(.4); opacity: 0;
  transition: transform 250ms var(--ease-smooth-out), opacity 250ms var(--ease-smooth-out); z-index: -1; }
.q-nav a[aria-current="page"] { color: var(--q-prim); }
.q-nav a[aria-current="page"]::before { transform: none; opacity: 1; }
.q-nav a:focus-visible { outline: 2px solid var(--q-prim); outline-offset: -2px; }
@media (min-width: 900px) { .q-nav { position: sticky; top: 60px; bottom: auto; width: 240px; height: calc(100vh - 60px); grid-template-columns: 1fr; align-content: start; gap: 4px; padding: 16px; border-top: 0; border-right: 1px solid var(--q-borda); background: transparent; }
  .q-nav a { grid-auto-flow: column; justify-content: start; gap: 12px; padding: 0 14px; font-size: 15px; }
  .q-nav a::before { inset: 0; width: auto; height: auto; top: 0; } }

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   Checkout (auditoria CRO, docs/cro.md): resumo dos termos ACIMA do botão,
   Pix|Cartão em segmented, botão de pagar de 56 px como o elemento de maior
   contraste da tela, e 3 selos de confiança VERDADEIROS em linha.
   Nada de nota, "8M+" ou logo de imprensa.
   ========================================================================== */
.q-resumo { border-radius: var(--q-r-m); background: var(--q-fundo); padding: 14px 16px; font: 500 14px/1.45 var(--q-ui); color: var(--q-texto); }
.q-resumo .lin { display: flex; justify-content: space-between; gap: 12px; }
.q-resumo .lin + .lin { margin-top: 6px; }
.q-resumo b { font-family: var(--q-display); color: var(--q-tinta); white-space: nowrap; text-align: right; }
.q-resumo small { display: block; margin-top: 8px; color: var(--q-suave); font: var(--q-t-legenda); }
.q-confianca { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.q-confianca > div { display: grid; justify-items: center; gap: 6px; text-align: center; font: 600 12px/1.3 var(--q-ui); color: var(--q-suave); }
.q-confianca svg { width: 22px; height: 22px; stroke: var(--q-prim); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.q-seg--pag { display: grid; width: 100%; }
.q-seg--pag button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; line-height: 44px; }
.q-seg--pag svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.q-confianca--2 { grid-template-columns: repeat(2, 1fr); }