/* componentes · cada um com suas variantes e estados.
   Regra única: componente consome token semântico, nunca primitivo nem hex. */

/* ===================== botão ===================== */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2); height:40px; padding-inline:var(--s-5); border-radius:var(--r-pill);
  font-size:var(--fs-ui); font-weight:var(--fw-med); letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
             transform var(--t-fast) var(--ease)}
.btn svg{width:15px; height:15px; flex:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:var(--state-disabled-opacity);
  pointer-events:none}

/* primária · a única que usa o gradiente da marca. uma por tela. */
.btn--primary{background:var(--grad-action); background-size:180% 180%;
  color:var(--text-on-brand); transition:background-position var(--t-slow) var(--ease),
  transform var(--t-fast) var(--ease)}
.btn--primary:hover{background-position:100% 50%}

/* secundária · a de uso diário */
.btn--secondary{background:var(--surface-raised); color:var(--text);
  border:1px solid var(--border-strong)}
.btn--secondary:hover{background:var(--surface-overlay); border-color:var(--accent)}

/* discreta · dentro de tabela, cartão e barra de ferramenta */
.btn--ghost{color:var(--text-2)}
.btn--ghost:hover{background:var(--state-hover); color:var(--text)}

/* destrutiva */
.btn--danger{background:var(--err-bg); color:var(--err); border:1px solid var(--err)}
.btn--danger:hover{background:var(--err); color:var(--bg)}

.btn--sm{height:32px; padding-inline:var(--s-4); font-size:var(--fs-sm)}
.btn--lg{height:48px; padding-inline:var(--s-6); font-size:var(--fs-lead)}
.btn--icon{width:40px; padding:0}
.btn--icon.btn--sm{width:32px}

/* carregando · o rótulo some e o disco gira. a largura não muda. */
.btn[data-loading="1"]{pointer-events:none; color:transparent}
.btn[data-loading="1"]::after{content:""; position:absolute; width:15px; height:15px;
  border-radius:50%; border:1.6px solid currentColor; border-top-color:transparent;
  color:var(--text); animation:spin .7s linear infinite}
.btn--primary[data-loading="1"]::after{color:var(--text-on-brand)}

/* ===================== campo ===================== */
.field{display:flex; flex-direction:column; gap:6px; min-width:0; width:100%}
.field > label{font-size:var(--fs-sm); font-weight:var(--fw-med); color:var(--text)}
.field input,.field select,.field textarea{
  width:100%; height:40px; padding:0 var(--s-4);
  background:var(--surface-raised); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  font-family:var(--font-ui); font-size:var(--fs-ui);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast)}
.field textarea{height:auto; padding:var(--s-3) var(--s-4); resize:vertical; line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--text-weak)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-weak)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.field input:disabled,.field select:disabled,.field textarea:disabled{
  opacity:var(--state-disabled-opacity); cursor:not-allowed}
.field .hint{font-size:var(--fs-xs); color:var(--text-3)}
.field[data-state="error"] input,.field[data-state="error"] textarea{border-color:var(--err)}
.field[data-state="error"] .hint{color:var(--err)}
.field[data-state="success"] input{border-color:var(--ok)}
.field[data-state="success"] .hint{color:var(--ok)}

/* ===================== chip / alternador ===================== */
.chip{display:inline-flex; align-items:center; gap:var(--s-2); height:30px;
  padding-inline:var(--s-3); border-radius:var(--r-pill);
  border:1px solid var(--border-strong); background:var(--surface-raised);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast)}
.chip:hover{color:var(--text); border-color:var(--text-weak)}
.chip[aria-pressed="true"]{color:var(--accent); border-color:var(--accent);
  background:var(--accent-weak)}
.chip[disabled]{opacity:var(--state-disabled-opacity); pointer-events:none}

/* ===================== selo ===================== */
.badge{display:inline-flex; align-items:center; gap:6px; height:22px; padding-inline:var(--s-3);
  border-radius:var(--r-pill); font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.badge::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.badge--ok{color:var(--ok); background:var(--ok-bg)}
.badge--warn{color:var(--warn); background:var(--warn-bg)}
.badge--err{color:var(--err); background:var(--err-bg)}
.badge--info{color:var(--info); background:var(--info-bg)}
.badge--neutral{color:var(--text-3); background:var(--state-hover)}

/* ===================== cartão ===================== */
.card{position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s-5); min-width:0;
  transition:border-color var(--t-base), transform var(--t-base) var(--ease)}
.card--link:hover{border-color:var(--border-strong); transform:translateY(-2px)}
.card-ic{width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center;
  border:1px solid var(--border-strong); color:var(--accent); margin-bottom:var(--s-4)}
.card-ic svg{width:17px; height:17px}
.card h4{margin-bottom:6px}

/* ===================== aviso ===================== */
.note{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-3);
  padding:var(--s-4); border-radius:var(--r-md); border:1px solid; align-items:start}
.note svg{width:16px; height:16px; margin-top:2px}
.note strong{display:block; font-size:var(--fs-ui); font-weight:var(--fw-med);
  color:var(--text); margin-bottom:3px}
.note p{font-size:var(--fs-sm); color:var(--text-2); line-height:1.55; max-width:72ch}
.note--ok{border-color:var(--ok); background:var(--ok-bg); color:var(--ok)}
.note--warn{border-color:var(--warn); background:var(--warn-bg); color:var(--warn)}
.note--err{border-color:var(--err); background:var(--err-bg); color:var(--err)}
.note--info{border-color:var(--info); background:var(--info-bg); color:var(--info)}

/* ===================== ícone ===================== */
.ic-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,84px),1fr));
  gap:var(--s-2)}
.ic-cell{background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--s-4) var(--s-2);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2); min-width:0;
  transition:border-color var(--t-fast), color var(--t-fast); color:var(--text-2)}
.ic-cell:hover{border-color:var(--accent); color:var(--accent)}
.ic-cell svg{width:var(--isz,20px); height:var(--isz,20px); transition:width var(--t-fast), height var(--t-fast)}
.ic-cell span{font-family:var(--font-mono); font-size:9px; letter-spacing:.05em;
  color:var(--text-weak); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis}

/* ===================== dado ===================== */
.metric{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s-5); min-width:0}
.metric .t-label{margin-bottom:var(--s-3)}
.metric .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:30px; font-weight:var(--fw-light); letter-spacing:-.03em; color:var(--text);
  line-height:1; display:flex; align-items:baseline; gap:4px}
.metric .v u{text-decoration:none; font-size:15px; color:var(--text-3)}
.metric .trend{display:inline-flex; align-items:center; gap:5px; margin-top:var(--s-3);
  font-family:var(--font-mono); font-size:var(--fs-xs)}
.metric .trend svg{width:12px; height:12px}
.trend--up{color:var(--ok)} .trend--down{color:var(--err)} .trend--flat{color:var(--text-3)}
.metric[data-state="empty"] .v{color:var(--text-weak); font-size:22px}
.metric[data-state="empty"] .trend{display:none}

.bars{display:grid; gap:var(--s-3)}
.bar{display:grid; grid-template-columns:minmax(0,118px) minmax(0,1fr) 54px;
  align-items:center; gap:var(--s-3); font-size:var(--fs-sm)}
.bar em{font-style:normal; font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar .t{height:6px; border-radius:3px; background:var(--data-empty); overflow:hidden}
.bar .t i{display:block; height:100%; width:0; background:var(--data-2);
  transition:width 900ms var(--ease)}
.bar b{font-family:var(--font-mono); font-size:var(--fs-xs); text-align:right;
  font-weight:var(--fw-book); color:var(--text-2); font-variant-numeric:tabular-nums}
.bar--lead em{color:var(--text)} .bar--lead .t i{background:var(--data-1)}

.spark{display:flex; align-items:flex-end; gap:3px; height:44px}
.spark i{flex:1; background:var(--data-2); border-radius:1px; opacity:.55;
  transition:opacity var(--t-fast)}
.spark i:last-child{opacity:1; background:var(--data-1)}

.empty{display:grid; place-items:center; gap:var(--s-2); padding:var(--s-7) var(--s-5);
  border:1px dashed var(--border-strong); border-radius:var(--r-lg); text-align:center}
.empty svg{width:22px; height:22px; color:var(--text-weak)}

/* ===================== etapa numerada ===================== */
.step{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(14px,3vw,var(--s-7)); align-items:start;
  padding-block:var(--s-5); border-top:1px solid var(--border)}
.step-n{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--accent);
  padding-top:3px}
/* Em duas colunas, o terceiro filho cai na linha de baixo e aterra na
   coluna 'auto', que é dimensionada pelo conteúdo e cresce com a frase
   até furar a viewport. O parágrafo tem que atravessar as duas. */
@media (max-width:900px){
  .step{grid-template-columns:auto minmax(0,1fr)}
  .step > p{grid-column:1 / -1}
}

/* ===================== amostra de cor ===================== */
.swatch{text-align:left; width:100%; min-width:0; display:block;
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); transition:border-color var(--t-fast)}
.swatch:hover{border-color:var(--accent)}
.swatch .c{height:72px; display:block}
.swatch .m{padding:var(--s-3); display:flex; flex-direction:column; gap:3px}
.swatch b{font-size:var(--fs-sm); font-weight:var(--fw-med)}
.swatch span{font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-3)}
.ramp{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:2px; width:100%}
.ramp i{height:40px; display:block; border-radius:2px}
.ramp-x{display:flex; justify-content:space-between; margin-top:5px;
  font-family:var(--font-mono); font-size:9px; color:var(--text-weak)}

/* ===================== deslizante ===================== */
.slider{position:relative; height:40px; width:100%; touch-action:none}
.slider .trk{position:absolute; left:0; right:0; top:19px; height:3px; border-radius:var(--r-pill);
  background:var(--surface-overlay)}
.slider .fill{position:absolute; left:0; top:19px; height:3px; border-radius:var(--r-pill);
  background:var(--grad-cool)}
.slider .cap{position:absolute; top:11px; width:2px; height:19px; background:var(--accent-hot)}
.slider .knob{position:absolute; top:9px; width:22px; height:22px; margin-left:-11px;
  border-radius:50%; background:var(--surface-overlay); border:1.5px solid var(--accent);
  box-shadow:var(--e-2); transition:transform var(--t-fast) var(--spring)}
.slider:focus-within .knob{transform:scale(1.1)}

/* ===================== trilha horizontal ===================== */
.reel{display:flex; gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:var(--s-3)}
.reel::-webkit-scrollbar{display:none}
.reel > *{flex:0 0 min(78%,320px); scroll-snap-align:start}

/* ===================== folha técnica ===================== */
.sheet{position:relative; border:1px solid var(--border-strong); background:var(--bg-sunk);
  padding:clamp(22px,3vw,var(--s-6)); border-radius:var(--r-xs)}
.sheet .tk{position:absolute; width:10px; height:10px; border:0 solid var(--accent)}
.tk.tl{left:-1px; top:-1px; border-left-width:1px; border-top-width:1px}
.tk.tr{right:-1px; top:-1px; border-right-width:1px; border-top-width:1px}
.tk.bl{left:-1px; bottom:-1px; border-left-width:1px; border-bottom-width:1px}
.tk.br{right:-1px; bottom:-1px; border-right-width:1px; border-bottom-width:1px}
.titleblock{display:flex; flex-wrap:wrap; border:1px solid var(--border);
  border-right:0; border-bottom:0; margin-top:var(--s-5)}
.titleblock div{flex:1 1 140px; border-right:1px solid var(--border);
  border-bottom:1px solid var(--border); padding:var(--s-3) var(--s-4)}
.titleblock span{display:block; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-weak); margin-bottom:4px}
.titleblock b{font-size:var(--fs-sm); font-weight:var(--fw-med)}

/* ===================== superfície clara ===================== */
.light{background:var(--paper); color:var(--paper-text); border-radius:var(--r-lg);
  padding:var(--s-5); border:1px solid var(--paper-border)}
.light .t-label{color:var(--paper-text-2)}
.light p{color:var(--paper-text-2)}

/* ===================================================================
   v3 · blocos de afirmação.
   A Move não escreve adjetivo. Escreve frase curta com número dentro.
   Estes três blocos são as formas permitidas de fazer uma afirmação.
   =================================================================== */

/* ---- afirmação · a unidade básica da voz ---- */
.claim{border-top:1px solid var(--border); padding-block:var(--s-6)}
.claim .k{font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:var(--tr-kicker); text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:var(--s-3)}
.claim h3{font-family:var(--font-display); font-weight:var(--fw-air);
  font-size:clamp(26px,3vw,42px); line-height:1.08; letter-spacing:var(--tr-h1);
  max-width:20ch}
.claim h3 b{font-weight:var(--fw-air); font-variant-numeric:tabular-nums;
  font-family:var(--font-mono); font-size:.88em; letter-spacing:-.02em}
.claim p{font-size:var(--fs-sm); color:var(--text-2); line-height:1.6;
  max-width:52ch; margin-top:var(--s-3)}
.claim .src{display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-3);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-weak)}
.claim .src::before{content:""; width:14px; height:1px; background:var(--text-weak)}

/* ---- ficha do método · valor que sobe de zero ---- */
.sched{list-style:none; margin:0; padding:0; border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden}
.sched li{border-bottom:1px solid var(--border)}
.sched li:last-child{border-bottom:0}
.sched-row{width:100%; display:grid; grid-template-columns:28px minmax(0,1fr) auto;
  column-gap:var(--s-4); row-gap:4px; align-items:baseline; text-align:left;
  padding:var(--s-4) var(--s-5); position:relative; background:none; border:0;
  color:inherit; font:inherit; cursor:pointer}
.sched-row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-base) var(--ease)}
.sched-row[aria-expanded="true"]::before{transform:scaleY(1)}
.sched-row[aria-expanded="true"]{background:var(--state-selected)}
.sched-row .n{font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-weak)}
.sched-row .l{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text)}
.sched-row .v{font-family:var(--font-mono); font-size:16px; font-weight:var(--fw-med);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap;
  color:var(--accent-good)}
.sched-row .d{grid-column:2/-1; color:var(--text-2); font-size:var(--fs-sm);
  line-height:1.5; max-width:62ch}

/* ---- contador grande · usado em HUD e em marco ---- */
.counter{font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-weight:var(--fw-light); letter-spacing:-.03em; color:var(--text); line-height:1}
.counter--xl{font-size:clamp(40px,6vw,72px)}
.counter--lg{font-size:34px}

/* ---- par certo/errado de redação ---- */
.voice{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--s-4)}
.voice-box{border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-5)}
.voice-box--no{border-top:2px solid var(--err)}
.voice-box--yes{border-top:2px solid var(--ok)}
.voice-box .tag{font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:var(--tr-label); text-transform:uppercase; display:block;
  margin-bottom:var(--s-3)}
.voice-box--no .tag{color:var(--err)} .voice-box--yes .tag{color:var(--ok)}
.voice-box q{display:block; font-size:var(--fs-lead); font-weight:var(--fw-light);
  line-height:1.45; quotes:none; color:var(--text)}
.voice-box .why{font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--s-3);
  line-height:1.55}

/* ===================================================================
   v4 · AMPLIAÇÃO DO SISTEMA
   O que veio antes resolve o uso diário. O que vem agora resolve a
   página de apresentação: mais variantes de botão, estado com sinal
   vivo, e a família de cartões inteira.

   A regra não muda: token semântico, nunca hex. Raio sempre pelo mapa
   de papel (--r-botao, --r-cartao, …), nunca um número solto.
   =================================================================== */

/* ===================== botão · variantes novas ===================== */

/* contorno · a terceira força entre a primária e a discreta. Sem
   preenchimento, com borda que acende. É a secundária de fundo escuro
   quando a secundária sólida pesaria demais na composição. */
.btn--outline{color:var(--text); border:1px solid var(--border-strong);
  background:transparent}
.btn--outline:hover{border-color:var(--accent); color:var(--accent);
  background:var(--accent-weak)}

/* vidro · para botão sobre mídia, onde fundo sólido tapa a imagem e
   fundo transparente some. Só sobre imagem ou vídeo, nunca sobre --bg. */
.btn--glass{color:var(--text);
  background:color-mix(in srgb, var(--surface) 42%, transparent);
  backdrop-filter:blur(var(--blur-vidro)); -webkit-backdrop-filter:blur(var(--blur-vidro));
  border:1px solid var(--border-strong)}
.btn--glass:hover{background:color-mix(in srgb, var(--surface) 64%, transparent);
  border-color:var(--text-weak)}

/* marca · preenchimento com o gradiente inteiro das quatro faces.
   Diferente da primária: esta é assinatura, não chamada. Uma por página,
   e nunca ao lado de uma primária. */
.btn--brand{background:var(--grad-brand); background-size:220% 220%;
  color:var(--text-on-brand); border:0;
  animation:shimmer 8s var(--ease-io) infinite}
.btn--brand:hover{animation-play-state:paused}

/* circular · ação única e reconhecível: tocar, avançar, fechar.
   Nunca recebe rótulo; sempre recebe aria-label. */
.btn--circle{width:44px; height:44px; padding:0; border-radius:50%;
  border:1px solid var(--border-strong); background:var(--surface-raised);
  color:var(--text)}
.btn--circle:hover{border-color:var(--accent); color:var(--accent)}
.btn--circle.btn--sm{width:34px; height:34px}
.btn--circle.btn--lg{width:56px; height:56px}
.btn--circle.btn--primary{border:0; background:var(--grad-action);
  color:var(--text-on-brand)}
.btn--circle svg{width:17px; height:17px}

/* seta que anda · a seta desliza no hover. O deslocamento é 3px: o
   suficiente para o olho registrar intenção de avançar, pouco o
   bastante para não parecer que o botão está quebrando. */
.btn .seta{transition:transform var(--t-base) var(--ease)}
.btn:hover .seta{transform:translateX(3px)}

/* largura total · dentro de cartão estreito e em telefone */
.btn--block{width:100%}

/* grupo · botões que são uma escolha só, encostados um no outro */
.btn-grupo{display:inline-flex; padding:3px; gap:3px; border-radius:var(--r-botao);
  background:var(--surface-raised); border:1px solid var(--border)}
.btn-grupo .btn{height:32px; font-size:var(--fs-sm)}

/* ===================== rótulo e estado ===================== */

/* sobrancelha · o rótulo que abre uma seção. O filete antes dele cresce
   da esquerda quando a seção entra, então o rótulo não aparece sozinho
   no meio do branco. */
.eyebrow{display:inline-flex; align-items:center; gap:var(--s-3);
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:var(--tr-kicker); text-transform:uppercase; color:var(--accent)}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor;
  opacity:.6; flex:none}
.eyebrow--centro{justify-content:center}
.eyebrow--centro::after{content:""; width:28px; height:1px; background:currentColor;
  opacity:.6; flex:none}
.eyebrow--neutra{color:var(--text-3)}

/* etiqueta · classifica um bloco. Mais leve que o selo: sem ponto,
   sem cor de estado, só borda. */
.label-pill{display:inline-flex; align-items:center; gap:6px; height:24px;
  padding-inline:var(--s-3); border-radius:var(--r-selo);
  border:1px solid var(--border-strong); background:var(--grad-ghost);
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.label-pill svg{width:12px; height:12px}
.label-pill--accent{color:var(--accent); border-color:var(--accent-ring);
  background:var(--accent-weak)}
.label-pill--hot{color:var(--accent-hot); border-color:rgba(211,32,100,.34);
  background:rgba(211,32,100,.10)}

/* indicador vivo · o ponto que pulsa com um anel saindo dele. Existe
   para UMA coisa: dizer que o dado na tela está chegando agora. Usado
   em qualquer outro lugar, mente. */
.status{display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.status .ponto{position:relative; width:7px; height:7px; border-radius:50%;
  background:var(--ok); flex:none}
.status .ponto::after{content:""; position:absolute; inset:0; border-radius:50%;
  background:inherit; animation:ping 2.4s var(--ease) infinite}
.status--pausado .ponto{background:var(--warn)}
.status--parado .ponto{background:var(--err)}
.status--parado .ponto::after{animation:none}
.status b{color:var(--text); font-weight:var(--fw-book)}

/* ===================== família de cartões ===================== */

/* O cartão base já existe acima (.card). Estas são as formas que a
   página de apresentação pede, e cada uma tem um trabalho diferente. */

/* recurso · ícone em caixa, título, uma frase. O tijolo da grade de
   capacidades. A caixa do ícone usa --r-icone e nunca o raio do cartão:
   dois raios iguais aninhados somem um no outro. */
.card--recurso{display:grid; gap:var(--s-4); align-content:start;
  padding:var(--s-6); border-radius:var(--r-cartao)}
.card--recurso .ic{width:44px; height:44px; border-radius:var(--r-icone);
  display:grid; place-items:center; flex:none;
  background:var(--accent-weak); color:var(--accent);
  border:1px solid var(--accent-ring)}
.card--recurso .ic svg{width:20px; height:20px}
.card--recurso h4{font-size:var(--fs-h4); font-weight:var(--fw-med); color:var(--text)}
.card--recurso p{font-size:var(--fs-sm); color:var(--text-2); line-height:var(--lh-normal)}
.card--recurso[data-cor="hot"] .ic{background:rgba(211,32,100,.12);
  color:var(--accent-hot); border-color:rgba(211,32,100,.30)}
.card--recurso[data-cor="good"] .ic{background:rgba(44,236,168,.12);
  color:var(--accent-good); border-color:rgba(44,236,168,.30)}
.card--recurso[data-cor="deep"] .ic{background:rgba(95,44,132,.22);
  color:var(--ro-300); border-color:rgba(142,79,190,.34)}

/* borda em gradiente · duas camadas de fundo, uma no padding-box e
   outra no border-box, com a borda transparente por cima. É o único
   jeito de ter borda com gradiente sem pseudo-elemento, e o único jeito
   de o canto arredondado acompanhar. */
.card--borda{border:1px solid transparent; border-radius:var(--r-cartao-alto);
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    var(--grad-borda) border-box}
.card--borda[data-cor="hot"]{background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    var(--grad-borda-hot) border-box}

/* depoimento · a citação é o assunto, então ela vem primeiro e maior;
   a assinatura vem depois, pequena, atrás de um divisor. */
.card--depoimento{display:grid; gap:var(--s-5); padding:var(--s-7) var(--s-6);
  border-radius:var(--r-cartao-alto)}
.card--depoimento blockquote{font-size:var(--fs-lead); line-height:var(--lh-relaxed);
  color:var(--text); max-width:46ch}
.card--depoimento figcaption{display:flex; align-items:center; gap:var(--s-3);
  padding-top:var(--s-4); border-top:1px solid var(--border)}
.card--depoimento .av{width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--surface-overlay);
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-2)}
.card--depoimento .qm{font-family:Georgia,"Times New Roman",serif; font-size:52px;
  line-height:.6; color:var(--accent); opacity:.34}

/* plano · a coluna de preço. O destaque não é cor, é elevação e escala:
   cor em três colunas iguais vira semáforo. */
.card--plano{display:grid; gap:var(--s-5); align-content:start;
  padding:var(--s-7) var(--s-6); border-radius:var(--r-cartao-alto);
  background:var(--surface); border:1px solid var(--border);
  transition:transform var(--t-base) var(--ease), border-color var(--t-base),
             box-shadow var(--t-base)}
.card--plano:hover{transform:translateY(-4px); border-color:var(--border-strong)}
.card--plano .preco{font-family:var(--font-display); font-weight:var(--fw-air);
  font-size:42px; letter-spacing:var(--tr-h1); color:var(--text);
  font-variant-numeric:tabular-nums}
.card--plano .preco small{font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:.1em; color:var(--text-3); font-variant-numeric:normal}
.card--plano ul{display:grid; gap:var(--s-3); font-size:var(--fs-sm); color:var(--text-2)}
.card--plano li{display:flex; gap:var(--s-3); align-items:flex-start}
.card--plano li svg{width:15px; height:15px; flex:none; color:var(--accent-good);
  margin-top:2px}
.card--plano[data-destaque="1"]{border-color:var(--accent-ring);
  box-shadow:0 30px 70px -40px rgba(21,171,216,.44)}

/* palco em perspectiva · as colunas de plano inclinadas no eixo Y, com
   a do meio à frente. Só a partir de 1024px: abaixo disso a inclinação
   come largura e o texto quebra. Abaixo, vira pilha reta. */
.palco-cartoes{display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:1024px){
  .palco-cartoes{perspective:2400px; transform-style:preserve-3d;
    grid-template-columns:repeat(3,1fr)}
  .palco-cartoes .card--plano{transform-style:preserve-3d;
    transition:transform 620ms var(--ease-io), opacity var(--t-slow),
               filter var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow)}
  .palco-cartoes .card--plano:nth-child(1){transform:rotateY(15deg) translateZ(-52px) translateX(34px)}
  .palco-cartoes .card--plano:nth-child(2){transform:translateZ(52px) scale(1.04); z-index:2}
  .palco-cartoes .card--plano:nth-child(3){transform:rotateY(-15deg) translateZ(-52px) translateX(-34px)}
  /* com um escolhido, os outros recuam de verdade: opacidade, desfoque
     e profundidade juntos. Só opacidade não lê como "atrás". */
  .palco-cartoes[data-ativo] .card--plano{opacity:.26; filter:blur(4px)}
  .palco-cartoes[data-ativo="1"] .card--plano:nth-child(1),
  .palco-cartoes[data-ativo="2"] .card--plano:nth-child(2),
  .palco-cartoes[data-ativo="3"] .card--plano:nth-child(3){
    opacity:1; filter:none; z-index:3;
    transform:translateZ(150px) scale(1.10); border-color:var(--accent);
    box-shadow:0 0 110px -24px rgba(21,171,216,.42)}
}
@media (prefers-reduced-motion:reduce){
  .palco-cartoes,.palco-cartoes .card--plano{perspective:none; transform:none !important;
    opacity:1 !important; filter:none !important}
}