/* MOVIMENTO — a camada de comportamento partilhada por todos os ecrãs do app.
 *
 * POR QUE UM FICHEIRO E NÃO REGRAS EM CADA ECRÃ:
 * são dez ecrãs. Dez cópias das mesmas regras é a garantia de que daqui a três
 * meses existem dez versões diferentes — uma com a curva antiga, outra sem o
 * respeito por quem desliga animações. Aqui muda-se num sítio.
 *
 * O CRITÉRIO, e não é "animar tudo": anima-se o que EXPLICA UMA MUDANÇA —
 * algo aparece, sai, carrega ou avança. O que já está no sítio fica quieto.
 * Movimento a mais custa fluidez em telemóvel fraco, e o público do Aprimory
 * está no campo, com rede e aparelho de campo.
 *
 * Usar: <link rel="stylesheet" href="/movimento.css"> antes do <style> do ecrã.
 */

:root{
  /* Uma curva só. Curvas diferentes na mesma app lêem-se como peças de
     sistemas diferentes — é o detalhe que faz uma interface parecer montada
     em vez de desenhada. */
  --mov-curva:cubic-bezier(.22,.61,.36,1);
  --mov-rapido:.16s;   /* resposta ao dedo   */
  --mov-normal:.34s;   /* entrada de conteúdo */
  --mov-osso1:#eef0ec; /* esqueleto: base    */
  --mov-osso2:#f7f8f6; /* esqueleto: brilho  */
}

/* ---- ESQUELETO ---------------------------------------------------------
 * A forma do conteúdo antes de o conteúdo existir. Um "a carregar…" centrado
 * diz que algo acontece; o esqueleto diz O QUE vai aparecer — e o salto do
 * layout quando os dados chegam deixa de existir, que é a parte que o
 * utilizador sente sem saber nomear.
 *
 * Regra de ouro: o esqueleto tem de ter a ALTURA REAL do que substitui. Um
 * esqueleto mais baixo que o conteúdo empurra a página no momento em que a
 * pessoa já estava a ler, e é pior do que não ter esqueleto nenhum. */
.esq, .esq-l{
  background:linear-gradient(90deg,var(--mov-osso1) 25%,var(--mov-osso2) 37%,var(--mov-osso1) 63%);
  background-size:400% 100%;
  animation:mov-brilho 1.4s linear infinite;
  border-radius:8px;
}
.esq-l{display:block;height:13px;margin-bottom:8px}
.esq-l:last-child{margin-bottom:0}
.esq-l.curta{width:55%}
.esq-l.media{width:78%}
.esq-cartao{background:#fff;border:1px solid var(--linha,#e6e9e2);border-radius:14px;
  padding:13px 15px;margin-bottom:9px;display:flex;gap:13px;align-items:center}
.esq-cartao .esq-av{flex:0 0 30px;height:30px;border-radius:9px}
.esq-cartao .esq-txt{flex:1}
.esq-cartao .esq-fim{flex:0 0 46px;height:11px}
@keyframes mov-brilho{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---- ENTRADA -----------------------------------------------------------
 * O conteúdo assenta em vez de aparecer de repente. Escalonado com
 * `--i` (índice da linha), o olho lê de cima para baixo em vez de levar a
 * lista toda à cara.
 *
 * O escalonamento PÁRA aos ~12 itens: numa lista de 40, o último entraria um
 * segundo depois do primeiro, e esperar por uma animação é o oposto do que
 * ela serve. */
@keyframes mov-assenta{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.mov-entra{animation:mov-assenta var(--mov-normal) var(--mov-curva) both}
.mov-entra[style*="--i"]{animation-delay:calc(min(var(--i),12) * 26ms)}

@keyframes mov-surge{from{opacity:0}to{opacity:1}}
.mov-surge{animation:mov-surge .22s var(--mov-curva) both}

/* ---- SAÍDA -------------------------------------------------------------
 * Só para o que a pessoa mandou sair (fechar um painel, remover uma linha).
 * O que desaparece por decisão do sistema deve desaparecer e pronto — animar
 * isso é fazer esperar por uma despedida que ninguém pediu. */
@keyframes mov-sai{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
.mov-sai{animation:mov-sai .2s var(--mov-curva) both;pointer-events:none}

/* ---- RESPOSTA AO TOQUE -------------------------------------------------
 * Num telemóvel o `:hover` NUNCA acontece. Sem isto, tocar num cartão não dá
 * sinal nenhum de vida, e a pessoa toca outra vez — que é como nascem os
 * duplos envios. */
.mov-toque{transition:transform var(--mov-rapido) var(--mov-curva),
                     box-shadow var(--mov-rapido) var(--mov-curva),
                     border-color var(--mov-rapido) var(--mov-curva)}
.mov-toque:active{transform:scale(.985)}

/* ---- PROGRESSO ---------------------------------------------------------
 * `.mov-barra` para progresso REAL (sabe-se a percentagem).
 * `.mov-indef` para trabalho de duração desconhecida — nunca fingir uma
 * percentagem que não se sabe: uma barra que chega a 90% e fica lá ensina a
 * desconfiar de todas as outras. */
.mov-barra{height:4px;background:var(--linha,#e6e9e2);border-radius:99px;overflow:hidden}
.mov-barra>i{display:block;height:100%;background:var(--verde,#5E8039);border-radius:99px;
  transition:width .3s var(--mov-curva)}
.mov-indef{height:3px;background:var(--linha,#e6e9e2);border-radius:99px;overflow:hidden;position:relative}
.mov-indef::after{content:"";position:absolute;inset:0 auto 0 0;width:38%;border-radius:99px;
  background:var(--verde,#5E8039);animation:mov-desliza 1.15s var(--mov-curva) infinite}
@keyframes mov-desliza{0%{left:-40%}100%{left:100%}}

/* Botão a trabalhar: o rodopio herda a cor do texto, por isso funciona em
   qualquer botão sem uma regra por cor. */
.mov-rodo{display:inline-block;width:13px;height:13px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:7px;
  animation:mov-roda .7s linear infinite}
@keyframes mov-roda{to{transform:rotate(360deg)}}

/* ---- IMAGENS -----------------------------------------------------------
 * `loading="lazy"` é do HTML; aqui trata-se do que se vê enquanto ela não
 * chega. O fundo evita o buraco branco, e o `fade` evita o estalo. */
.mov-img{background:var(--mov-osso1);transition:opacity .3s var(--mov-curva)}
.mov-img:not(.pronta){opacity:0}

/* ---- QUEM PEDIU MENOS MOVIMENTO ---------------------------------------
 * Enjoo, vertigem, epilepsia fotossensível — e também quem simplesmente
 * prefere. Aqui nada disto é informação: é conforto. Desligar não tira nada
 * a ninguém, e é por isso que é seguro desligar TUDO. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* ===========================================================================
   DOIS TEMAS, E A ESCOLHA É DE QUEM LÊ
   ---------------------------------------------------------------------------
   O sóbrio (padrão de origem) tira tudo o que não é conteúdo do caminho. O
   lúdico devolve calor: fundo quente, cantos mais redondos, acento dourado
   com mais presença.

   NÃO É GOSTO, É ACESSIBILIDADE — e é por isso que vive ao lado do "Modo
   foco" e do "Alto contraste", não numa configuração de aparência à parte.
   Quem precisa de menos estímulo e quem precisa de mais são os dois lados da
   mesma questão, e nenhum dos dois está a escolher um enfeite.

   O PADRÃO É O LÚDICO. Engaja mais, e quem precisa de sobriedade é
   precisamente quem vai procurar os ajustes; quem precisa de estímulo
   raramente sabe que precisa.

   Só se mexe em COR e RAIO. Nada de espaçamento, tamanho ou posição: um tema
   que mexe no layout tem de ser testado como se fosse uma app inteira, e
   passa a ter o dobro das maneiras de partir.
   =========================================================================== */
:root[data-tema="ludico"]{
  --bg:#fdf7ec; --fundo:#fdf7ec;
  --card:#fffdf9;
  --linha:#efe3cf;
  --verde-claro:#eef4e4;
  --ouro:#c8912a;
}
:root[data-tema="ludico"] body{background:var(--bg,#fdf7ec)}
/* Cantos mais generosos: é o que separa "documento" de "companhia". */
:root[data-tema="ludico"] .card,
:root[data-tema="ludico"] .cart,
:root[data-tema="ludico"] .painel,
:root[data-tema="ludico"] .bloco{border-radius:20px}
:root[data-tema="ludico"] .sec-tit{color:#8a6a1f}

/* O sóbrio é o que já existia: declarado por extenso para que trocar de tema
   devolva SEMPRE o mesmo resultado, e não o que sobrou do tema anterior. */
:root[data-tema="sobrio"]{
  --bg:#f6f7f4; --fundo:#f6f7f4;
  --card:#ffffff;
  --linha:#eceee9;
  --ouro:#b9932f;
}

/* O BOTÃO DE PREFERÊNCIAS TINHA DE VIVER NALGUM SÍTIO.
   Estava a 18px do fundo — por cima da barra de abas, a tapar "Início" num
   telemóvel. Um atalho que estorva o caminho principal é pior do que não
   existir. Sobe acima da barra, encolhe, e cala-se: é utilidade, não ação
   principal. A CASA dele é a tela "Conta"; isto aqui é só o atalho. */
/* O flutuante desaparece: quem o chama agora é o botão do cabeçalho. Continua
   no DOM porque é ele que abre o painel do widget — escondê-lo é mais seguro
   do que reescrever o widget na véspera do lançamento. */
.apr-a11y-btn{display:none !important}
#prefTopo{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;border-radius:11px;border:0;
  background:transparent;color:var(--suave,#6b7280);cursor:pointer;padding:0}
#prefTopo:hover{background:rgba(0,0,0,.05);color:var(--verde,#5E8039)}
header{display:flex;align-items:center;gap:10px}
.apr-a11y-panel{bottom:calc(var(--tab-h,64px) + 68px) !important}


/* ===========================================================================
   CINÉTICA — a segunda camada, pedida a 2026-08-09
   ---------------------------------------------------------------------------
   O esqueleto já existia. Faltava o resto: entrada, saída, resposta ao toque,
   progresso e transição entre telas.

   O LIMITE QUE ME IMPUS, porque "premium" e "cinético" entram em conflito
   depressa: nada dura mais de 400 ms, nada se move mais de 14 px, e nada se
   move DEPOIS de estar no sítio. Animação que se nota duas vezes é animação a
   mais — a primeira encanta, a segunda atrasa. O público está no campo, com
   telemóvel de campo: cada animação é orçamento de bateria.

   Tudo aqui respeita `prefers-reduced-motion` pela regra que já existe no fim
   deste ficheiro — e agora também o "Menos animações" das preferências, que
   põe `apr-menos-mov` no <html>.
   =========================================================================== */

/* ---- ENTRADA DA PÁGINA -------------------------------------------------
 * A tela inteira sobe 8px e revela-se. É o que transforma "carregou outra
 * página" em "avancei" — e é a diferença entre um site e uma app. */
@keyframes mov-pagina{from{opacity:0}to{opacity:1}}
body{animation:mov-pagina .26s var(--mov-curva) both}
/* O deslize vive no conteúdo, nunca no <body>. */
@keyframes mov-sobe-pag{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.wrap > header, .wrap > .colunas, main, .tela{animation:mov-sobe-pag .32s var(--mov-curva) both}

/* ---- SAÍDA -------------------------------------------------------------
 * Sem saída, o que desaparece parece ter falhado. Com ela, parece ter sido
 * arrumado. */
@keyframes mov-sai{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
.mov-sai{animation:mov-sai .2s var(--mov-curva) both}

/* ---- RESPOSTA AO DEDO --------------------------------------------------
 * Todo botão afunda ao toque. É a confirmação mais barata que existe: diz
 * "recebi" antes de a rede sequer ter respondido, e é o que faz a app não
 * parecer lenta mesmo quando a rede está. */
button, .b, a.b, .chip, .cap, .item, .tm{
  transition:transform var(--mov-rapido) var(--mov-curva),
             box-shadow var(--mov-rapido) var(--mov-curva),
             background var(--mov-rapido) var(--mov-curva),
             opacity var(--mov-rapido) var(--mov-curva);
}
button:active, .b:active, a.b:active, .chip:active, .cap:active, .item:active{transform:scale(.975)}
button:disabled{opacity:.6}

/* ---- CARTÕES QUE SE APRESENTAM ----------------------------------------
 * Um estado de foco que só muda a cor lê-se como decoração; que levanta o
 * cartão lê-se como "isto abre". */
.card{transition:transform .22s var(--mov-curva), box-shadow .22s var(--mov-curva)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,26,18,.10)}

/* ---- ENTRADA EM CASCATA ------------------------------------------------
 * Listas entram item a item, 40 ms de intervalo. Todos ao mesmo tempo é um
 * salto; um a um é uma lista a ser servida. Para a 13.ª linha o atraso já não
 * se acumula: passado meio segundo, esperar deixa de encantar e começa a
 * irritar. */
.mov-entra{animation:mov-sobe .34s var(--mov-curva) both}
@keyframes mov-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mov-lista > *{animation:mov-sobe .34s var(--mov-curva) both}
.mov-lista > *:nth-child(1){animation-delay:.02s}
.mov-lista > *:nth-child(2){animation-delay:.06s}
.mov-lista > *:nth-child(3){animation-delay:.10s}
.mov-lista > *:nth-child(4){animation-delay:.14s}
.mov-lista > *:nth-child(5){animation-delay:.18s}
.mov-lista > *:nth-child(6){animation-delay:.22s}
.mov-lista > *:nth-child(7){animation-delay:.26s}
.mov-lista > *:nth-child(8){animation-delay:.30s}
.mov-lista > *:nth-child(9){animation-delay:.34s}
.mov-lista > *:nth-child(10){animation-delay:.38s}
.mov-lista > *:nth-child(11){animation-delay:.42s}
.mov-lista > *:nth-child(n+12){animation-delay:.46s}

/* ---- PROGRESSO ---------------------------------------------------------
 * A barra cresce em vez de aparecer cheia: o crescimento é o que se lê como
 * "avancei", e é a única parte da gamificação que não precisa de palavras. */
.barra i, .prog i, [data-prog]{transition:width .7s var(--mov-curva)}

/* ---- CARREGAMENTO INDETERMINADO ---------------------------------------- */
.mov-indef{height:3px;border-radius:99px;overflow:hidden;background:var(--mov-osso1);position:relative}
.mov-indef::after{content:"";position:absolute;inset:0;width:38%;border-radius:99px;
  background:var(--verde,#5E8039);animation:mov-corre 1.1s var(--mov-curva) infinite}
@keyframes mov-corre{from{transform:translateX(-100%)}to{transform:translateX(320%)}}

/* ---- IMAGENS ----------------------------------------------------------
 * Revelam-se em vez de aparecerem de repente. Com `lazy` no HTML, é isto que
 * torna o carregamento tardio invisível em vez de um piscar. */
img{transition:opacity .4s var(--mov-curva)}
img[loading="lazy"]:not(.pronta){opacity:0}
img.pronta{opacity:1}

/* ---- QUEM PEDIU MENOS ------------------------------------------------- */
html.apr-menos-mov *, html.apr-menos-mov *::before, html.apr-menos-mov *::after{
  animation-duration:.01ms !important; animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
}


/* ---- AS PREFERÊNCIAS COMO GAVETA --------------------------------------
 * O widget desenha um painel de canto, herdado do desktop da Systeme. Aqui
 * ele passa a subir do fundo, com a largura toda e ao alcance do polegar —
 * sem lhe tocar no código, só no sítio onde aterra. Acima do tablet volta a
 * ser um painel, porque aí o canto é o lugar certo. */
.apr-a11y-panel{
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  width:auto !important; max-width:none !important;
  max-height:80vh !important; overflow-y:auto !important;
  border-radius:20px 20px 0 0 !important;
  padding-bottom:calc(var(--tab-h,64px) + 14px) !important;
  animation:mov-gaveta .28s var(--mov-curva) both;
  box-shadow:0 -14px 40px rgba(15,26,12,.22) !important;
}
@keyframes mov-gaveta{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:900px){
  .apr-a11y-panel{
    left:auto !important; right:20px !important; bottom:20px !important;
    width:320px !important; border-radius:18px !important;
    padding-bottom:14px !important; animation:mov-sobe .26s var(--mov-curva) both;
  }
}


/* ---- OS WIDGETS NO SEU LUGAR -----------------------------------------
 * A Jornada deixa de flutuar: vive no cabeçalho, entre o título e as
 * preferências. Um chip que tapa o conteúdo lê-se como anúncio; no cabeçalho
 * lê-se como o estado da pessoa. */
.apr-gami.no-topo{position:static !important;margin-left:auto;flex:0 0 auto;
  box-shadow:none !important;font-size:10.5px !important;padding:3px 8px !important;
  /* O chip vinha em verde cheio, herdado da barra da Systeme. No cabeçalho do
     app — branco, com o verde só no traço — um bloco saturado é a coisa mais
     pesada do ecrã, e o estado de quem estuda não é o assunto da página. Passa
     a vestir-se como as outras etiquetas da aula ("aula livre", "legendas"):
     fundo claro, texto no verde escuro, traço fino. */
  background:var(--verde-claro,#eef4e4) !important;
  color:var(--verde-esc,#3f5427) !important;
  border:1px solid var(--linha,#e6e9e2) !important;
  gap:6px !important;font-weight:700;
  /* NUNCA em duas linhas. O `max-width:42%` da ronda anterior travava a
     largura mas deixava o conteúdo partir — a chama caía para uma segunda
     linha e o chip crescia em altura, empurrando o cabeçalho todo. Cortar a
     largura sem proibir a quebra troca um defeito por outro.
     Agora: proibida a quebra, e o chip pede o espaço que precisa. Quem cede é
     o título do cabeçalho, que ellipsiza — e que nestas telas está repetido
     logo abaixo, em corpo grande (a aula e o curso mostram-no no conteúdo). */
  white-space:nowrap;flex-shrink:0}
.apr-gami.no-topo .it{white-space:nowrap}
.apr-gami.no-topo .it{gap:2px !important}
/* Os emojis são a linguagem da gamificação e ficam — mas em corpo de etiqueta,
   não de ícone: em tamanho cheio eram eles que empurravam o título para fora. */
.apr-gami.no-topo .it:first-child{font-size:11px}
.apr-gami.no-topo .it{font-size:10.5px}
.apr-gami.no-topo .car{opacity:.55}
.apr-gami.no-topo + #prefTopo{margin-left:4px}
/* O painel da Jornada continua fixo, mas ancorado abaixo do cabeçalho. */
.apr-gp{top:58px !important;right:10px !important;left:auto !important;
  max-width:min(340px, calc(100vw - 20px))}

/* A gaveta do fim do conteúdo: nasce vazia e sem altura, revela-se quando
   recebe alguma coisa. Assim nada aparece antes da página. */
#ferramentasFim{display:block;opacity:0;transform:translateY(8px);
  transition:opacity .34s var(--mov-curva), transform .34s var(--mov-curva)}
#ferramentasFim:not(:empty){opacity:1;transform:none}


/* A Jornada, enquanto não é movida para o cabeçalho, fica onde não tapa nada.
   Duas defesas: o JavaScript move-a, e o CSS garante que mesmo que não a mova
   ela não aterra em cima do conteúdo. */
.apr-gami:not(.no-topo){top:auto !important;bottom:calc(var(--tab-h,64px) + 14px) !important;
  right:12px !important;font-size:12px !important;padding:6px 11px !important}

/* ===========================================================================
   O CABEÇALHO, IGUAL EM TODAS AS TELAS (2026-08-10)
   ---------------------------------------------------------------------------
   Depois de o título da aula descer para o conteúdo, o cabeçalho ficou com
   três coisas e nenhuma regra: dois botões de tamanhos diferentes e o chip da
   Jornada a flutuar entre eles. Cada tela tinha o seu `header{}`, portanto a
   mesma faixa mudava de altura conforme a página.

   Aqui ela passa a ser UMA: colada ao topo, translúcida, com os controlos do
   mesmo tamanho e a Jornada ao centro. É o tratamento que a prateleira já
   usava — trazê-lo para as outras telas é o que faz a app parecer uma app, e
   não cinco páginas com o mesmo logótipo.
   =========================================================================== */
header{
  position:sticky; top:0; z-index:40;
  /* Translúcido com desfoque: o conteúdo passa por baixo em vez de bater numa
     barra opaca. O `-webkit-` continua a ser preciso no WebView do Android. */
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.8) blur(12px);
  -webkit-backdrop-filter:saturate(1.8) blur(12px);
}
/* Os dois controlos com a MESMA área de toque. Estavam um a 40px e outro a
   herdar o tamanho do texto — e um alvo de 20px falha o dedo. */
/* O `:not(.apr-gami)` NÃO É DETALHE. O chip da Jornada também é um <button>
   filho direto do <header>, e esta regra impunha-lhe 40×40: a caixa ficava do
   tamanho de um ícone e os três números transbordavam para fora do fundo
   arredondado. Visto de fora, "uma bolinha verde atrás do XP" — e ninguém
   procura a causa numa regra de área de toque.
   Uma regra escrita para dois controlos de ícone apanhou um terceiro elemento
   que não é ícone nenhum: tem largura própria, e é ela que tem de mandar. */
header > a:not(.apr-gami),
header > button:not(.apr-gami){
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--verde,#5E8039);
  transition:background var(--mov-rapido) var(--mov-curva),
             transform var(--mov-rapido) var(--mov-curva);
}
header > a:not(.apr-gami):active,
header > button:not(.apr-gami):active{ background:var(--verde-claro,#eef4e4); transform:scale(.94) }
/* E, por garantia, o chip diz o seu tamanho por extenso: se amanhã alguém
   escrever outra regra de largura para o cabeçalho, esta ganha. */
header > .apr-gami.no-topo{ width:auto !important; height:auto !important;
  min-height:26px; border-radius:999px !important }
/* A Jornada ao centro, entre os dois. `margin:auto` nos dois lados é o que a
   centra sem depender de haver título — e a tela da aula já não tem. */
header .apr-gami.no-topo{ margin-left:auto !important; margin-right:auto !important }


/* ===========================================================================
   VANTAGEM — a camada comercial, com a mesma linguagem nos três ecrãs
   ---------------------------------------------------------------------------
   O certificado é sempre pago, e é a única coisa que se vende dentro do curso.
   Até aqui isso aparecia como texto corrido ao lado do preço ("ou R$ 61,02 a
   vista (-10%)"), que é informação verdadeira e comercialmente muda: o olho
   passa por cima sem parar.

   TRÊS PEÇAS, e nenhuma delas inventa urgência:
     .vant       — o selo da vantagem (o desconto, o parcelamento, o "aberto").
     .vant-preco — o preço com a âncora riscada e o número que interessa grande.
     .vant-viva  — respira. SÓ UMA por ecrã: duas coisas a pulsar competem uma
                   com a outra e o olho não pousa em nenhuma.

   O movimento aqui é de 2% de escala e um halo que aparece e some. Não é para
   ser notado — é para o canto do olho voltar lá. Quem pediu menos movimento
   não vê nada disto (a regra do topo desliga), e a informação continua toda
   legível: a animação nunca é o que comunica.
   =========================================================================== */
.vant{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:800; letter-spacing:.01em;
  border-radius:999px; padding:3px 9px; line-height:1.35;
  background:var(--verde-claro,#eef4e4); color:var(--verde,#5E8039);
  white-space:nowrap;
}
.vant.ouro{ background:#fbf3dd; color:#8a6a12 }
.vant.plus{ background:linear-gradient(120deg,#4a6330,#7a5f14); color:#fff }
.vant.aberto{ background:#e8f3ec; color:#2f6b46 }

/* O preço: a âncora encolhe e desbota, o valor que interessa cresce. É a
   mesma hierarquia de uma etiqueta de montra — e é honesta, porque o número
   riscado existe mesmo. */
.vant-preco{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-top:2px }
.vant-preco s{ font-size:12.5px; color:#9aa39b }
.vant-preco b{ font-size:19px; letter-spacing:-.02em; color:var(--tinta,#0b1220) }
.vant-preco .cond{ font-size:11.5px; color:var(--mut,#64748b); font-weight:600 }

/* A linha de condições: parcelamento e desconto lado a lado, cada um no seu
   selo, porque são duas condições diferentes e fundi-las faria o cartão
   prometer o que o checkout pode não dar. */
.vant-linha{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px }

@keyframes mov-respira{
  0%,100%{ transform:scale(1);      box-shadow:0 0 0 0 rgba(185,147,47,0) }
  50%    { transform:scale(1.025);  box-shadow:0 0 0 5px rgba(185,147,47,.16) }
}
.vant-viva{ animation:mov-respira 2.8s var(--mov-curva) infinite }

/* O botão que fecha a compra. Um brilho que atravessa de dois em dois
   segundos: chama sem gritar, e some antes de irritar. */
.vant-cta{ position:relative; overflow:hidden }
.vant-cta::after{
  content:""; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-160%); animation:mov-brilha 3.4s var(--mov-curva) infinite;
  pointer-events:none;
}
@keyframes mov-brilha{
  0%,72%{ transform:translateX(-160%) } 100%{ transform:translateX(320%) }
}