/* =============================================================
   /curso/ — só o que falta no design system do site.
   A base vem de /src/css/ds/ (tokens, base, components): cores, fontes,
   .cartao, .orcamento, .ficha, .entrada, .btn, .bloco-escuro, .treino__*.
   Aqui: a ficha vira rádio/caixa de marcar de verdade (funciona sem JS),
   mensagens de erro, o bloco do PIX e as peças do painel.
   ============================================================= */

/* Cabeçalho desta página: logo à esquerda, WhatsApp à direita */
.curso-topo .logo__tag { color: var(--terra-ink); }

/* Fichas com input de verdade dentro (rádio ou caixa) */
.ficha { position: relative; cursor: pointer; display: inline-flex; align-items: center; }
.ficha input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ficha:has(input:checked) {
  color: #fff; border-color: var(--terra-ink);
  background: linear-gradient(180deg, #D26D3E, var(--terra-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 16px -8px rgba(191, 90, 48, .7);
}
.ficha:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 3px; }
.ficha--larga { width: 100%; }
.fichas--coluna { flex-direction: column; align-items: stretch; }

/* Rótulo de cada pergunta dentro do passo */
.pergunta { display: block; margin: 1.1rem 0 .55rem; font-size: .95rem; font-weight: 700; color: var(--ink); }
.pergunta:first-of-type { margin-top: 0; }
.pergunta small { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 500; color: var(--subtle); }
.campo { display: block; }
.campo > span { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .75rem; }
@media (max-width: 640px) { .campos--2 { grid-template-columns: 1fr; } }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--subtle) 50%), linear-gradient(135deg, var(--subtle) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }

.marcar { display: flex; gap: .7rem; align-items: flex-start; margin-top: .9rem; font-size: .9rem; line-height: 1.5; color: var(--body); cursor: pointer; }
.marcar input { width: 20px; height: 20px; margin-top: .1rem; flex: none; accent-color: var(--terra); }

.erro { margin-top: .5rem; font-size: .86rem; font-weight: 600; color: var(--terra-ink); }
.aviso { padding: .85rem 1rem; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--terra) 35%, var(--line));
  background: color-mix(in srgb, var(--terra) 8%, #fff); color: var(--ink); font-size: .92rem; }
.isca { position: absolute; left: -9999px; }

/* Os 2 dias, dentro do bloco escuro */
.dias { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 560px) { .dias { grid-template-columns: 1fr; } }
.dia { padding: 1rem 1.1rem; border-radius: var(--r); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .04); }
.dia__data { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; color: var(--sol-light); line-height: 1; }
.dia__longo { margin-top: .35rem; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.dia__titulo { margin-top: .6rem; font-weight: 700; color: var(--on-dark); line-height: 1.3; }

/* Resposta depois de enviar */
.pronto__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 560px) { .pronto__acoes .btn { width: 100%; } }
.miudo { margin-top: 1rem; font-size: .84rem; color: var(--subtle); }

/* Botão claro, para fundo creme (o site só tem o vazado para fundo escuro) */
.btn-vazado { color: var(--ink); border-color: var(--line-2); background: var(--surface); box-shadow: var(--luz-topo), 0 1px 2px rgba(46, 58, 47, .05); }
.btn-vazado:hover { color: var(--terra-ink); border-color: var(--terra); transform: translateY(-2px); }

/* PIX (quando o config manda cobrar) */
.pix { margin: 1.5rem 0 1rem; text-align: center; }
.pix img, .pix__qr { width: 264px; height: 264px; margin: 0 auto; padding: 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sombra-1); }
.pix__qr img { width: 240px; height: 240px; padding: 0; border: 0; box-shadow: none; }
.pix__valor { margin-top: .9rem; font-family: var(--mono); font-size: 1.7rem; font-weight: 500; color: var(--terra-ink); }
.pix__para { font-size: .86rem; color: var(--subtle); }
.copia { font-family: var(--mono); font-size: .8rem; word-break: break-all; }
.passos-pix { margin-top: 1rem; padding-left: 1.2rem; list-style: decimal; }
.passos-pix li { margin: .3rem 0; }

.curso-rodape { position: relative; z-index: 1; padding: 2rem 0 3rem; text-align: center; font-size: .86rem; color: var(--subtle); }
.curso-rodape a { font-weight: 600; }

/* ---------- Painel ---------- */
.painel { padding-block: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1.25rem; }
.painel .cartao { padding: clamp(1.25rem, 3.5vw, 1.75rem); }
.painel h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.numeros { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.numeros b { color: var(--terra-ink); }
.painel__links { margin-top: 1rem; display: flex; gap: 1rem; font-size: .9rem; font-weight: 600; }
.resumo h3 { margin: 1.4rem 0 .6rem; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); }
.barra { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(70px, 1fr) 28px; gap: .75rem; align-items: center; margin: .45rem 0; font-size: .88rem; color: var(--ink); }
.barra__trilho { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.barra__cheio { display: block; height: 100%; background: linear-gradient(90deg, var(--terra), var(--sol)); }
.barra__n { font-family: var(--mono); font-weight: 500; text-align: right; }
.falas { margin-top: .4rem; display: grid; gap: .4rem; font-size: .92rem; font-style: italic; }
.pessoa__nome { font-weight: 800; color: var(--ink); font-size: 1.02rem; }
.pessoa__dados { margin-top: .2rem; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.respostas { margin-top: .8rem; display: grid; gap: .3rem; font-size: .9rem; }
.respostas b { color: var(--ink); }
.acoes { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.acoes form { margin: 0; }
.pessoa--pago { border-color: color-mix(in srgb, var(--mato) 45%, var(--line)); }
.pessoa--cancelado { opacity: .55; }
.painel details summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.painel details[open] summary { margin-bottom: 1rem; }

/* Comprovante (V4) */
.comprovante { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px dashed var(--line-2); }
.comprovante h3 { font-size: 1.1rem; color: var(--ink); }
.arquivo { display: block; margin-top: .8rem; padding: 1rem; border: 2px dashed var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer; text-align: center; }
.arquivo:hover, .arquivo:focus-within { border-color: var(--terra); }
.arquivo input { display: block; width: 100%; margin-top: .5rem; font-size: .9rem; }
.ok { padding: .85rem 1rem; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--mato) 45%, var(--line));
  background: color-mix(in srgb, var(--mato) 10%, #fff); color: var(--ink); font-size: .92rem; }
.lembrete { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--sol) 18%, #fff); border: 1px solid color-mix(in srgb, var(--sol) 45%, var(--line)); font-size: .92rem; color: var(--ink); }
.situacao { display: inline-block; margin-top: .5rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--ink); }
.situacao--pago { background: color-mix(in srgb, var(--mato) 18%, #fff); }
.situacao--comprovante_enviado { background: color-mix(in srgb, var(--sol) 30%, #fff); }
.pessoa--comprovante_enviado { border-color: color-mix(in srgb, var(--sol) 60%, var(--line)); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.filtros a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.filtros a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Configurar evento (painel) */
.config { display: grid; gap: 1.25rem; }
.config h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: .75rem; }
.config .campo { margin-top: .75rem; }
.config textarea.entrada { width: 100%; }
.ajuda { display: block; margin-top: .3rem; font-size: .8rem; color: var(--subtle); }

/* O título da página fica dentro do bloco escuro (o DS só pinta h2 e h3 ali) */
.bloco-escuro h1 { color: var(--on-dark); }

/* =============================================================
   Apresentação do curso (secoes.php + curso.js), set/2026.
   Regra de todas as cenas: o estilo normal é o estado FINAL; a animação
   só traz de "escondido" até ele. Sem JS ou com movimento reduzido, tudo
   aparece pronto e parado.
   ============================================================= */

/* ---------- Topo: mata, buritis e rio de Anapu no pé do bloco escuro ---------- */
.pagina .treino { position: relative; overflow: hidden; isolation: isolate; padding-bottom: calc(clamp(2rem, 4vw, 3rem) + clamp(64px, 10vw, 120px)); }
.pagina .treino__topo { position: relative; z-index: 1; }
.curso-chao { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; height: clamp(64px, 10vw, 120px); shape-rendering: crispEdges; pointer-events: none; }
.pa-rio        { fill: #1B251E; }
.pa-mata-fundo { fill: #1F2A21; }
.pa-mata       { fill: #121913; }
.pa-margem     { fill: #D9683A; opacity: .4; }
.pa-reflexo    { fill: var(--marca-agua); }
.pa-reflexo-sol{ fill: var(--sol-light); }
.pa-onda       { fill: var(--on-dark); opacity: .1; }
.pa-reflexo, .pa-reflexo-sol { animation: cintila 2.4s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * -.35s); }
.pa-onda { animation: marola 4.2s steps(3, jump-none) infinite; animation-delay: calc(var(--i) * -.6s); }
.fora-da-tela .pa-reflexo, .fora-da-tela .pa-reflexo-sol, .fora-da-tela .pa-onda { animation-play-state: paused; }
@keyframes cintila { 0% { opacity: 1; transform: none; } 100% { opacity: .5; transform: translateX(1px); } }
@keyframes marola  { 0% { transform: none; } 100% { transform: translateX(2px); } }

/* ---------- Fachada: a loja que acorda (fachada.svg.php) ----------
   Três atos no céu:
     0–3,6 s   Lua     o jeito de sempre: loja aberta, mas apagada, placa à mão
     3,8–6,6 s Eclipse a lua tapa o sol, céu vermelho, letreiro apaga, FECHADO
     6,5 s em diante  Sol  clarão, o sol da marca acende, amanhece;
               8,4 s o celular · 9,2–11,6 s escaneia e a loja se transforma
               11,8 s letreiro · 12,2 s avisos · 13,5 s clientes chegando
   O estilo normal é a loja pronta, de dia; a animação só vem da noite até ela. */
.fachada-moldura { position: relative; margin: 0 0 1.4rem; overflow: hidden; cursor: pointer; border-radius: var(--r); border: 1px solid var(--line-dark); box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .7); }
.fachada { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.fachada text { font-family: var(--texto); font-weight: 800; }
.fachada-legenda { margin: -.9rem 0 1.2rem; font-family: var(--mao); font-size: 1.15rem; color: var(--on-dark-3); }
.fz-sol .sol__horizonte, .fz-sol .sol__agua { display: none; }
.fz-mata { fill: #1F2A21; }
.fz-estrelas { fill: #F4F0E6; opacity: 0; }
.fz-letreiro { font-size: 5.2px; letter-spacing: .5px; fill: #F3C77F; filter: drop-shadow(0 0 1.6px rgba(243, 199, 127, .9)); }
.fz-placa { font-size: 2.5px; letter-spacing: .2px; fill: #2E3A2F; }
.fz-placa--mao { font-family: var(--mao) !important; font-size: 4.4px; font-weight: 600 !important; letter-spacing: 0; fill: #3A2F26; }
.fz-placa--aberto { fill: #fff; }
.fz-noite, .fz-crise, .fz-feixe, .fz-varredura, .fz-cliente, .fz-lua, .fz-coroa, .fz-clarao, .fz-placa-velha, .fz-legenda { opacity: 0; }
.fz-cliente { transform: translate(110px, 84px); }
.fz-aviso text, .fz-legenda text { font-size: 4px; fill: #2E3A2F; }
.fz-legenda text { font-size: 4.4px; }
.fz-aviso, .fz-legenda { filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .35)); }
.fz-aviso, .fz-coroa__anel, .fz-clarao__brilho { transform-box: fill-box; transform-origin: center; }

/* Ato 1 e 2: céu, lua, eclipse */
.fachada .fz-noite      { animation: fz-noite 9.2s linear both; }
.fachada .fz-crise      { animation: fz-crise 3.2s ease-in-out 4.1s both; }
.fachada .fz-alvorada   { animation: fz-alvorada 9.2s linear both; }
.fachada .fz-estrelas   { animation: fz-estrelas 9.2s linear both; }
.fachada .fz-lua        { animation: fz-lua 8s cubic-bezier(.45, .05, .35, 1) both; }
.fachada .fz-lua__luz   { animation: fz-lua-luz 4.6s linear both; }
.fachada .fz-coroa      { animation: fz-coroa 2.9s ease-in-out 4.5s both; }
.fachada .fz-coroa__anel { animation: fz-coroa-gira 2.9s linear 4.5s both; }
.fachada .fz-clarao     { animation: fz-clarao 1s var(--saida) 6.5s both; }
.fachada .fz-clarao__brilho { animation: fz-clarao-cresce 1s var(--saida) 6.5s both; }
.fachada .fz-sol        { animation: fz-sol 1.2s var(--saida) 3.4s both; }
.fachada .fz-sol .sol__raio, .fachada .fz-sol .sol__ponto { animation: fz-raios 7.8s linear both; }
.fachada .fz-placa-velha { animation: fz-placa-velha 4.6s linear both; }
.fachada .fz-fechado    { animation: fz-fechado 5s linear both; }
.fachada .fz-legenda--1 { animation: fz-legenda 3.4s ease both .2s; }
.fachada .fz-legenda--2 { animation: fz-legenda 2.8s ease both 3.8s; }
.fachada .fz-legenda--3 { animation: fz-legenda 4.8s ease both 6.9s; }

/* Ato 3: a transformação */
.fachada .fz-celular    { animation: fz-celular .7s var(--saida) 8.4s both; }
.fachada .fz-feixe      { animation: fz-feixe 2.8s ease-in-out 9s both; }
.fachada .fz-varredura  { animation: fz-varre 2.4s linear 9.2s both; }
.fachada .fz-novo       { animation: fz-revela 2.4s linear 9.2s both; }
.fachada .fz-letreiro   { animation: fz-letreiro 12.6s linear both, fz-brilho 2.6s ease-in-out 12.8s infinite alternate; }
.fachada .fz-lampada    { animation: fz-acende 1s steps(1, end) 11.9s both; }
.fachada .fz-aviso      { animation: fz-aviso .55s var(--saida) both, fz-flutua 3.2s ease-in-out infinite alternate; animation-delay: calc(12.2s + var(--k) * .6s), calc(13.2s + var(--k) * .5s); }
.fachada .fz-cliente    { animation: fz-cliente 9s linear 13.5s infinite; }
.fachada .fz-perna--a   { animation: fz-passo .5s steps(1, end) infinite; }
.fachada .fz-perna--b   { animation: fz-passo .5s steps(1, end) -.25s infinite; }
.fora-da-tela .fachada * { animation-play-state: paused !important; }

@keyframes fz-noite     { 0%, 40% { opacity: .55; } 48%, 72% { opacity: .72; } 100% { opacity: 0; } }
@keyframes fz-crise     { 0% { opacity: 0; } 25%, 70% { opacity: .5; } 100% { opacity: 0; } }
@keyframes fz-alvorada  { 0%, 74% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fz-estrelas  { 0%, 74% { opacity: .9; } 96%, 100% { opacity: 0; } }
@keyframes fz-lua       { 0% { opacity: 1; transform: translate(78px, 12px); } 35% { transform: translate(102px, 7px); } 57.5%, 80% { opacity: 1; transform: translate(125px, 24.6px); } 100% { opacity: 0; transform: translate(170px, 6px); } }
@keyframes fz-lua-luz   { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fz-coroa     { 0% { opacity: 0; } 14%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fz-coroa-gira { 0% { transform: scale(.85) rotate(0); } 50% { transform: scale(1.06) rotate(8deg); } 100% { transform: scale(1) rotate(14deg); } }
@keyframes fz-clarao    { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fz-clarao-cresce { from { transform: scale(.3); } to { transform: scale(3.2); } }
@keyframes fz-sol       { 0% { opacity: 0; transform: translateY(26px); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes fz-raios     { 0%, 87% { opacity: .08; } 100% { opacity: 1; } }
@keyframes fz-placa-velha { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fz-fechado   { 0%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fz-legenda   { 0% { opacity: 0; transform: translateY(-3px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fz-celular   { from { transform: translateY(40px); } to { transform: none; } }
@keyframes fz-feixe     { 0% { opacity: 0; } 20%, 70% { opacity: .55; } 100% { opacity: 0; } }
@keyframes fz-varre     { 0% { opacity: 0; transform: none; } 8%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(104px); } }
@keyframes fz-revela    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fz-letreiro  { 0%, 34% { opacity: .35; } 35% { opacity: .05; } 35.8% { opacity: .3; } 36.6%, 93% { opacity: .05; } 94.5% { opacity: 1; } 95.5% { opacity: .3; } 97%, 100% { opacity: 1; } }
@keyframes fz-acende    { 0% { opacity: .15; } 20% { opacity: 1; } 35% { opacity: .3; } 50%, 100% { opacity: 1; } }
@keyframes fz-brilho    { from { filter: drop-shadow(0 0 1.2px rgba(243, 199, 127, .7)); } to { filter: drop-shadow(0 0 3px rgba(243, 199, 127, 1)); } }
@keyframes fz-aviso     { from { opacity: 0; transform: translateY(5px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fz-flutua    { from { transform: none; } to { transform: translateY(-1.5px); } }
@keyframes fz-cliente   { 0% { opacity: 1; transform: translate(162px, 84px); } 62% { opacity: 1; transform: translate(111px, 84px); } 70%, 100% { opacity: 0; transform: translate(109px, 84px); } }
@keyframes fz-passo     { 0% { transform: none; } 50% { transform: translateY(-1px); } }

@media (prefers-reduced-motion: reduce) {
  .fachada * { animation: none !important; }
}

/* ---------- Vitrine: abas à esquerda, celular à direita ---------- */
.vitrine-secao { overflow-x: clip; }
.vitrine { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: 2.5rem; }
.vitrine__abas { display: grid; gap: .7rem; }
.aba {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: .95rem; align-items: center;
  width: 100%; padding: .95rem 1.1rem 1.15rem; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-1);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s var(--curva), background .3s var(--curva);
}
.aba:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.aba:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.aba[aria-pressed="true"] { border-color: color-mix(in srgb, var(--cor) 50%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 8%, var(--surface)), var(--surface)); box-shadow: var(--sombra-2); }
.aba__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--cor-ink); background: color-mix(in srgb, var(--cor) 14%, var(--surface)); transition: color .3s, background .3s; }
.aba[aria-pressed="true"] .aba__ic { color: var(--cor-sobre); background: linear-gradient(150deg, var(--cor-alto), var(--cor-baixo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 18px -10px color-mix(in srgb, var(--cor) 80%, transparent); }
.ico { width: 23px; height: 23px; }
.aba__s { display: block; font-size: var(--t-pequeno); color: var(--subtle); }
.aba__t { display: block; margin-top: .1rem; font-size: 1.04rem; font-weight: 700; line-height: 1.3; }
.aba__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--cor) 12%, transparent); }
.aba__barra i { display: block; height: 100%; background: var(--cor); transform-origin: left center; transform: scaleX(0); }
.vitrine.rodando .aba[aria-pressed="true"] .aba__barra i { animation: aba-tempo var(--dur, 7.5s) linear both; }
@keyframes aba-tempo { to { transform: none; } }
.vitrine__nota { margin-top: .35rem; font-family: var(--mao); font-size: 1.3rem; line-height: 1.2; color: var(--terra-ink); }

/* O celular */
.celular {
  position: relative; width: clamp(262px, 25vw, 312px); aspect-ratio: 9 / 18.6; padding: 11px; border-radius: 46px;
  background: linear-gradient(160deg, #445646, #1A231C 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 2px 0 rgba(255, 255, 255, .12), 0 44px 80px -34px rgba(26, 35, 28, .65), 0 18px 34px -20px rgba(26, 35, 28, .5);
}
.celular::before { content: ""; position: absolute; inset: -14% -30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sol) 34%, transparent), transparent); }
.celular__ilha { position: absolute; top: 21px; left: 50%; z-index: 4; width: 86px; height: 23px; margin-left: -43px; border-radius: 20px; background: #0C110D; }
.celular__tela { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: var(--canvas); }
.tela {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 48px 14px 14px;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.985);
  transition: opacity .4s var(--saida), transform .5s var(--saida), visibility 0s linear .4s;
}
.tela.ativa { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--saida), transform .6s var(--saida), visibility 0s; }
.tela__app { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--subtle); }
.tela__app b { font-size: .98rem; color: var(--ink); }
.tela__pedido { padding: .55rem .7rem; border-radius: 12px; font-size: .82rem; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.tela__pedido span { display: block; font-family: var(--mao); font-size: 1.12rem; line-height: 1; color: var(--terra-ink); }

/* O copo de açaí (desenho) */
.acai { display: block; overflow: visible; }
.acai__copo { fill: #fff; stroke: #E4DDCD; stroke-width: 1.5; }
.acai__faixa { fill: #5B2A6E; }
.acai__topo { fill: #3E1B4D; }
.acai__creme { fill: #5E2A70; }
.acai__banana { fill: #F6E3A6; stroke: #E4C774; stroke-width: 1.5; }
.acai__granola { fill: #C98B4A; }
.acai__colher { fill: none; stroke: #D8D8D8; stroke-width: 4; stroke-linecap: round; }
.acai__colher-ponta { fill: #E6E6E6; }

/* M2 · Foto de produto: a foto da mesa vira foto de estúdio */
.foto { position: relative; flex: 1; overflow: hidden; border-radius: 16px; }
.foto__camada { position: absolute; inset: 0; display: grid; place-items: center; }
.foto__camada .acai { position: relative; width: 56%; }
.foto__antes { background: linear-gradient(180deg, #928E80 0 54%, transparent 54%), repeating-linear-gradient(90deg, #7A5638 0 22px, #684A30 22px 24px); }
.foto__antes .acai { transform: rotate(-7deg) translateY(12%) scale(.86); filter: brightness(.78) saturate(.75) blur(.3px); }
.foto__depois { background: radial-gradient(85% 62% at 50% 34%, #FFFFFF, #F6EAD4 68%, #EBD5AF); }
.foto__depois .acai { filter: drop-shadow(0 16px 12px rgba(80, 40, 20, .22)); }
.foto__luz { position: absolute; top: -20%; left: 50%; width: 120%; height: 70%; margin-left: -60%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); }
.foto__sombra { position: absolute; bottom: 19%; left: 50%; width: 46%; height: 5%; margin-left: -23%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 30, 10, .28), transparent); }
.brilho { position: absolute; width: 14px; height: 14px; background: var(--sol); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.brilho:nth-of-type(1) { top: 22%; left: 20%; }
.brilho:nth-of-type(2) { top: 16%; right: 22%; width: 10px; height: 10px; }
.brilho:nth-of-type(3) { top: 46%; right: 14%; width: 12px; height: 12px; }
.foto__linha { position: absolute; top: 0; bottom: 0; left: 100%; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px 2px rgba(255, 255, 255, .9); opacity: 0; }
.foto__rotulo { position: absolute; top: 10px; z-index: 2; padding: 0 .55rem .1rem; border-radius: 8px; font-family: var(--mao); font-size: 1.2rem; color: var(--ink); background: rgba(255, 255, 255, .88); }
.foto__rotulo--antes { left: 10px; opacity: 0; }
.foto__rotulo--depois { right: 10px; }
.tela--foto.ativa .foto__depois { animation: revela 2.2s var(--curva) 1.3s both; }
.tela--foto.ativa .foto__linha { animation: varre 2.2s var(--curva) 1.3s both; }
.tela--foto.ativa .foto__rotulo--antes { animation: rotulo-antes 3.4s linear .2s both; }
.tela--foto.ativa .foto__rotulo--depois { animation: aparece .5s var(--saida) 3.2s both; }
.tela--foto.ativa .brilho { animation: brilha .7s var(--saida) both; animation-delay: calc(3.5s + var(--i) * .18s); }
.tela--foto.ativa .tela__pedido { animation: sobe-tela .5s var(--saida) .3s both; }
@keyframes revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes varre { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes rotulo-antes { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes brilha { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* M3 · Arte de promoção: os elementos entram como se fossem arrastados no Canva */
.arte { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; box-shadow: var(--sombra-2); }
.arte__fundo { position: absolute; inset: 0; background: linear-gradient(150deg, #6A2D80, #2E1238); }
.arte__sol { position: absolute; top: -30%; right: -28%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--sol) 0 44%, transparent 45%), repeating-conic-gradient(rgba(243, 199, 127, .55) 0 7deg, transparent 7deg 20deg); }
.arte__marca { position: absolute; top: 8%; left: 8%; font-size: .74rem; font-weight: 700; color: var(--sol-light); }
.arte__titulo { position: absolute; top: 17%; left: 8%; font-family: var(--titulo); font-size: 1.62rem; font-weight: 600; line-height: .98; color: #fff; }
.arte__produto { position: absolute; right: 5%; bottom: 5%; width: 44%; }
.arte__produto .acai { width: 100%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); }
.arte__selo { position: absolute; top: 55%; left: 8%; padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--ink); background: var(--sol); transform: rotate(-5deg); }
.arte__botao { position: absolute; bottom: 8%; left: 8%; padding: .42rem .7rem; border-radius: 9px; font-size: .72rem; font-weight: 700; color: #fff; background: #1FA855; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.tela__ferramentas { display: flex; gap: 4px; }
.tela__ferramentas i { flex: 1; padding: .45rem 0; border-radius: 8px; font-size: .66rem; font-style: normal; text-align: center; color: var(--subtle); background: var(--surface); border: 1px solid var(--line); }
.tela__ferramentas i:first-child { color: var(--ink); border-color: color-mix(in srgb, var(--terra) 40%, var(--line)); }
.tela--arte.ativa .arte__fundo { animation: pinta .7s var(--saida) .2s both; }
.tela--arte.ativa .arte__sol { animation: sol-gira 1s var(--saida) .7s both; }
.tela--arte.ativa .arte__marca { animation: aparece .5s var(--saida) 1s both; }
.tela--arte.ativa .arte__titulo { animation: arrasta .7s var(--saida) 1.2s both; }
.tela--arte.ativa .arte__produto { animation: estala .7s var(--saida) 1.8s both; }
.tela--arte.ativa .arte__selo { animation: carimba .5s var(--saida) 2.5s both; }
.tela--arte.ativa .arte__botao { animation: sobe-tela .5s var(--saida) 2.9s both; }
@keyframes pinta { from { clip-path: circle(0 at 0 100%); } to { clip-path: circle(150% at 0 100%); } }
@keyframes sol-gira { from { transform: scale(.3) rotate(-60deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes arrasta { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes estala { 0% { transform: scale(.4) rotate(12deg); opacity: 0; } 70% { transform: scale(1.06) rotate(-2deg); opacity: 1; } 100% { transform: none; } }
@keyframes carimba { 0% { transform: rotate(-5deg) scale(2); opacity: 0; } 100% { transform: rotate(-5deg); opacity: 1; } }

/* M4 · Vídeo de 30 s: três cenas, legenda palavra por palavra e a agulha andando */
.video { position: relative; flex: 1; overflow: hidden; border-radius: 14px; background: #111; }
.video__cena { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; }
.video__cena--1 { background: radial-gradient(80% 60% at 50% 40%, #7B3A92, #2B1034); }
.video__cena--1 .acai { width: 58%; margin: 0 auto; }
.video__cena--2 { background: linear-gradient(160deg, #D0703F, var(--terra-ink)); }
.video__cena--3 { opacity: 1; background: linear-gradient(160deg, #558A66, var(--mato-deep)); }
.video__cena span { display: block; font-family: var(--titulo); font-size: 1.7rem; font-weight: 600; line-height: 1.05; color: #fff; }
.video__legenda { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-size: 1.05rem; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.video__linha { position: relative; display: grid; grid-template-rows: 1fr 14px; gap: 4px; height: 58px; padding: 6px; border-radius: 10px; background: var(--ink); }
.video__clipes { display: flex; gap: 3px; }
.video__clipes i { flex: 1; border-radius: 4px; }
.video__clipes i:nth-child(1) { background: #7B3A92; }
.video__clipes i:nth-child(2) { background: var(--terra); }
.video__clipes i:nth-child(3) { background: var(--mato); }
.video__clipes i:nth-child(4) { flex: .6; background: var(--sol); }
.video__onda { display: flex; align-items: center; gap: 2px; }
.video__onda i { flex: 1; height: var(--h); border-radius: 1px; background: var(--sol-light); opacity: .75; }
.video__agulha { position: absolute; top: 2px; bottom: 2px; left: calc(100% - 8px); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.video__tempo { display: flex; justify-content: space-between; font-size: .78rem; color: var(--subtle); }
.video__tempo span { font-weight: 800; color: var(--ink); }
.tela--video.ativa .video__cena--1 { animation: cena-1 6.4s linear both; }
.tela--video.ativa .video__cena--1 .acai { animation: aproxima 2.4s ease-out both; }
.tela--video.ativa .video__cena--2 { animation: cena-2 6.4s linear both; }
.tela--video.ativa .video__cena--3 { animation: cena-3 6.4s linear both; }
.tela--video.ativa .video__legenda span { animation: palavra .35s var(--saida) both; }
.tela--video.ativa .video__legenda span:nth-child(1) { animation-delay: .3s; }
.tela--video.ativa .video__legenda span:nth-child(2) { animation-delay: .6s; }
.tela--video.ativa .video__legenda span:nth-child(3) { animation-delay: .9s; }
.tela--video.ativa .video__agulha { animation: agulha 6.4s linear both; }
@keyframes cena-1 { 0%, 32% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes cena-2 { 0%, 32% { opacity: 0; } 36%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes cena-3 { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes aproxima { from { transform: scale(.85); } to { transform: scale(1.05); } }
@keyframes palavra { from { transform: translateY(8px) scale(.8); opacity: 0; color: var(--sol-light); } to { transform: none; opacity: 1; } }
@keyframes agulha { from { left: 6px; } to { left: calc(100% - 8px); } }

/* M5 · WhatsApp que vende: catálogo, resposta pronta e mensagem de ausência */
.tela--zap { gap: 0; padding: 42px 0 0; background: #EFE7DC; }
.zap-topo { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; color: #fff; background: var(--mato-deep); }
.zap-topo__foto { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.zap-topo__foto .acai { width: 64%; }
.zap-topo b { display: block; font-size: .9rem; }
.zap-topo small { display: block; font-size: .7rem; opacity: .8; }
.zap-conversa { flex: 1; display: flex; flex-direction: column; gap: .42rem; padding: .65rem .6rem; }
.zap-catalogo { padding: .45rem; border-radius: 10px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.zap-catalogo__t { display: block; margin-bottom: .3rem; font-size: .72rem; font-weight: 700; color: var(--ink); }
.zap-catalogo__itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.zap-catalogo__itens i { display: grid; justify-items: center; gap: 2px; padding: 5px 3px 4px; border-radius: 8px; font-style: normal; background: #F6F1E7; }
.zap-catalogo__itens .acai { width: 58%; }
.zap-catalogo__itens b { font-size: .64rem; color: var(--ink); }
.zmsg { max-width: 84%; margin: 0; padding: .42rem .6rem .45rem; border-radius: 10px; font-size: .78rem; line-height: 1.36; color: #1d261f; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.zmsg--cliente { align-self: flex-start; border-top-left-radius: 3px; background: #fff; }
.zmsg--loja { align-self: flex-end; border-top-right-radius: 3px; background: #D9FDD3; }
.zmsg small { display: block; margin-top: .15rem; font-size: .64rem; font-weight: 600; text-align: right; color: var(--mato-ink); }
.zap-hora { align-self: center; margin: .1rem 0 0; padding: .12rem .5rem; border-radius: 6px; font-size: .66rem; color: var(--subtle); background: rgba(255, 255, 255, .75); }
.lua { display: inline-block; width: 10px; height: 10px; margin-right: .35rem; border-radius: 50%; box-shadow: 3px -2px 0 0 var(--sol-ink); transform: translateY(1px); }
.tela--zap.ativa .zap-catalogo { animation: sobe-tela .5s var(--saida) .3s both; }
.tela--zap.ativa .zmsg--cliente { animation: sobe-tela .45s var(--saida) 1.1s both; }
.tela--zap.ativa .zmsg--loja:not(.zmsg--ausencia) { animation: sobe-tela .45s var(--saida) 2s both; }
.tela--zap.ativa .zap-hora { animation: aparece .4s var(--saida) 3.3s both; }
.tela--zap.ativa .zmsg--ausencia { animation: sobe-tela .45s var(--saida) 3.8s both; }

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe-tela { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .vitrine { grid-template-columns: 1fr; }
  .celular { order: -1; justify-self: center; }
  .vitrine__abas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .aba { grid-template-columns: 1fr; gap: .5rem; padding: .8rem .85rem 1rem; }
  .aba__ic { width: 38px; height: 38px; border-radius: 11px; }
  .aba__t { font-size: .92rem; }
  .vitrine__nota { grid-column: 1 / -1; }
}

/* ---------- Programa: módulo a módulo, com a barra de duração ---------- */
.encontros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.25rem; }
.encontro { position: relative; overflow: hidden; padding: 1.5rem 1.45rem 1.1rem; }
.encontro::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--cor), color-mix(in srgb, var(--cor) 25%, transparent)); }
.encontro__topo { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.encontro__data { flex: none; font-family: var(--titulo); font-size: 2.7rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--cor-ink); }
.encontro__rotulo { font-size: var(--t-pequeno); color: var(--subtle); }
.encontro h3 { margin-top: .15rem; font-family: var(--titulo); font-size: var(--t-cartao); line-height: 1.2; }
.modulos { margin: .3rem 0 0; padding: 0; list-style: none; }
.modulo { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .45rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.modulo:last-child { border-bottom: 0; }
.modulo__n { font-size: .85rem; font-weight: 800; color: var(--cor-ink); }
.modulo__t { font-weight: 600; line-height: 1.38; color: var(--ink); }
.modulo__ver { margin-left: .3rem; font-family: var(--mao); font-size: 1.15rem; font-weight: 600; white-space: nowrap; color: var(--terra-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.modulo__ver:hover { color: var(--terra); }
.modulo__min { font-size: var(--t-pequeno); white-space: nowrap; color: var(--subtle); }
.modulo__barra { grid-column: 2 / -1; height: 6px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--cor) 12%, var(--surface-2)); }
.modulo__barra i { display: block; width: calc(var(--min) / 60 * 100%); height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cor-alto), var(--cor-baixo)); transform-origin: left center; transition: transform 1s var(--saida); transition-delay: calc(var(--j) * .14s); }
.programa-secao.espera .encontro:not(.visto) .modulo__barra i { transform: scaleX(0); }
@media (max-width: 860px) { .encontros { grid-template-columns: 1fr; } }

/* ---------- O que você leva + quem ensina ---------- */
.leva { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.leva__lista { display: grid; gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.leva__lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.1rem 1.2rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-1); }
.leva__ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--cor-sobre); background: linear-gradient(150deg, var(--cor-alto), var(--cor-baixo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 18px -10px color-mix(in srgb, var(--cor) 80%, transparent); }
.leva__ic .ico { width: 25px; height: 25px; }
.leva__lista strong { display: block; font-size: 1.05rem; color: var(--ink); }
.leva__lista span:not(.leva__ic) { display: block; margin-top: .2rem; font-size: .95rem; line-height: 1.55; color: var(--body); }
.professor { position: relative; margin: 0; }
.professor img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(46, 58, 47, .55); }
.professor figcaption { position: absolute; left: -1.25rem; right: 1.25rem; bottom: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--r); background: rgba(251, 249, 242, .95); border: 1px solid var(--line); box-shadow: var(--sombra-2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.professor small { display: block; font-family: var(--mao); font-size: 1.25rem; line-height: 1; color: var(--terra-ink); }
.professor strong { display: block; margin-top: .25rem; font-family: var(--titulo); font-size: 1.15rem; color: var(--ink); }
.professor figcaption span { display: block; margin-top: .35rem; font-size: .9rem; line-height: 1.5; color: var(--body); }
.professor a { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-weight: 700; color: var(--mato-ink); }
@media (max-width: 860px) {
  .leva { grid-template-columns: 1fr; }
  .professor { max-width: 440px; justify-self: center; }
  .professor figcaption { left: .75rem; right: .75rem; bottom: .75rem; }
}

/* ---------- Chamada para a ficha ---------- */
.chamada-secao { padding-top: 0; }
.chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.6rem, 4vw, 2.4rem); }
.chamada .eyebrow { color: var(--terra-light); }
.chamada__t { margin-top: .4rem; font-family: var(--titulo); font-size: var(--t-secao); font-weight: 600; line-height: 1.1; color: var(--on-dark); }
.chamada__t .acento { color: var(--sol-light); }
@media (max-width: 560px) { .chamada .btn { width: 100%; } }

/* ---------- Ficha: barra de progresso dos 4 passos ---------- */
.ficha-progresso {
  position: sticky; top: calc(var(--nav-h) + 10px); z-index: 5; display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.25rem; padding: .6rem .85rem; border-radius: 999px; font-size: var(--t-pequeno); color: var(--subtle);
  background: rgba(251, 249, 242, .94); border: 1px solid var(--line); box-shadow: var(--sombra-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ficha-progresso__trilho { flex: 1; display: flex; gap: 5px; }
.ficha-progresso__trilho i { flex: 1; height: 6px; border-radius: 6px; background: var(--line); transition: background .4s var(--curva); }
.ficha-progresso__trilho i.feito { background: linear-gradient(90deg, #558A66, var(--mato)); }
.ficha-progresso b { white-space: nowrap; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .pa-reflexo, .pa-reflexo-sol, .pa-onda, .tela *, .aba__barra i { animation: none !important; }
  .tela { transition: none; }
  .modulo__barra i { transition: none; }
}

@media (max-width: 860px) { .treino__texto .fachada-moldura { margin: 1.25rem 0 1rem; } .treino__texto .fachada-legenda { margin: -.5rem 0 .5rem; } }

/* ---------- Venda: a frase "como isso vende" nas abas e nos módulos ---------- */
.aba__venda { display: block; margin-top: .3rem; font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--terra-ink); }
.aba__venda::before, .modulo__venda::before { content: "→ "; }
.modulo__venda { grid-column: 2 / -1; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--terra-ink); }
@media (max-width: 860px) { .aba__venda { font-size: .8rem; } }

/* ---------- Caminho da venda: o cliente passa pelas 4 etapas até o selo ----------
   Ciclo de 8 s: o cliente anda no trilho, cada etapa acende quando ele chega
   (atraso de 1,3 s por etapa) e o selo "Venda fechada" aparece no fim. */
.funil { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: stretch; margin-top: 2.25rem; padding-top: 34px; }
.funil__trilho { position: absolute; top: 10px; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--line); }
.funil__trilho i { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--sol), var(--terra), var(--mato), var(--ink-2)); transform-origin: left center; }
.funil__cliente { position: absolute; top: 50%; left: 100%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--terra); border: 3px solid var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terra) 30%, transparent), 0 6px 12px -4px rgba(46, 58, 47, .5); }
.funil__etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.funil__etapa {
  position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.15rem 1.05rem;
  border-radius: var(--r); background: var(--surface); border: 1px solid color-mix(in srgb, var(--cor) 40%, var(--line)); box-shadow: var(--sombra-2);
}
.funil__n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-weight: 800; color: var(--cor-sobre); background: linear-gradient(150deg, var(--cor-alto), var(--cor-baixo)); }
.funil__etapa h3 { margin-top: .35rem; font-family: var(--titulo); font-size: var(--t-cartao); line-height: 1.15; }
.funil__etapa p { flex: 1; font-size: .92rem; line-height: 1.5; color: var(--body); }
.funil__mods { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.funil__mods b { padding: .12rem .45rem; border-radius: 999px; font-size: .78rem; color: var(--cor-ink); background: color-mix(in srgb, var(--cor) 13%, var(--surface)); }
.funil__selo { align-self: center; display: grid; place-items: center; width: 124px; aspect-ratio: 1; padding: 1rem; border-radius: 50%; text-align: center; color: #fff; background: linear-gradient(150deg, #558A66, var(--mato-deep)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mato) 18%, transparent), 0 18px 30px -16px rgba(36, 74, 50, .8); }
.funil__selo span { font-family: var(--titulo); font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.funil__selo span::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto .35rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.funil .funil__cliente { animation: funil-anda 8s cubic-bezier(.45, 0, .55, 1) infinite; }
.funil .funil__trilho i { animation: funil-enche 8s cubic-bezier(.45, 0, .55, 1) infinite; }
.funil .funil__etapa { animation: funil-acende 8s var(--curva) infinite; animation-delay: calc(.5s + var(--k) * 1.3s); }
.funil .funil__selo { animation: funil-selo 8s var(--saida) infinite; }
.funil.fora-da-tela * { animation-play-state: paused !important; }
@keyframes funil-anda  { 0% { left: 0; opacity: 0; } 5% { opacity: 1; } 72%, 90% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes funil-enche { 0% { transform: scaleX(0); } 72%, 92% { transform: none; } 100% { transform: none; opacity: 0; } }
@keyframes funil-acende { 0% { transform: none; } 4%, 26% { transform: translateY(-6px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 35%, transparent), var(--sombra-2); } 36%, 100% { transform: none; } }
@keyframes funil-selo  { 0%, 68% { transform: scale(.55) rotate(-12deg); opacity: .25; } 76% { transform: scale(1.08); opacity: 1; } 82%, 96% { transform: none; opacity: 1; } 100% { transform: scale(.55); opacity: .25; } }

@media (max-width: 860px) {
  .funil { grid-template-columns: 1fr; padding: 0 0 0 34px; }
  .funil__trilho { top: 0; bottom: 0; left: 10px; right: auto; width: 4px; height: auto; }
  .funil__trilho i { transform-origin: center top; }
  .funil__cliente { top: 100%; left: 50%; margin: -9px 0 0 -9px; }
  .funil__etapas { grid-template-columns: 1fr; }
  .funil__selo { justify-self: center; }
  .funil .funil__cliente { animation-name: funil-anda-v; }
  .funil .funil__trilho i { animation-name: funil-enche-v; }
  @keyframes funil-anda-v  { 0% { top: 0; opacity: 0; } 5% { opacity: 1; } 72%, 90% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
  @keyframes funil-enche-v { 0% { transform: scaleY(0); } 72%, 92% { transform: none; } 100% { transform: none; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .funil *, .funil { animation: none !important; }
  .funil__cliente { display: none; }
}

/* ---------- Guia do curso (página da inscrição) ----------
   Trancado enquanto não está pago; liberado com o botão de baixar o PDF. */
.guia-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1.1rem; align-items: center; margin: 0 0 1.5rem; padding: 1.1rem 1.2rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-1); }
.guia-card__capa { position: relative; display: grid; place-items: center; width: 92px; aspect-ratio: 210 / 297; border-radius: 6px; background: radial-gradient(70% 60% at 80% 110%, rgba(214, 104, 58, .6), transparent 70%), var(--escuro); box-shadow: 0 12px 20px -12px rgba(26, 35, 28, .7); }
.guia-card__capa .sol { width: 62%; height: auto; }
.guia-card__rotulo { font-size: var(--t-pequeno); font-weight: 700; color: var(--terra-ink); }
.guia-card__t { margin-top: .15rem; font-family: var(--titulo); font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.guia-card__s { margin-top: .35rem; font-size: .92rem; line-height: 1.5; color: var(--body); }
.guia-card__botao { margin-top: .9rem; }
.guia-card--trancado .guia-card__capa { filter: grayscale(.7) brightness(.8); }
.guia-card__cadeado, .guia-card__ok { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); background-position: center; background-repeat: no-repeat; background-size: 16px; }
.guia-card__cadeado { background-color: var(--ink-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.guia-card__ok { background-color: var(--mato); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); animation: guia-ok .6s var(--saida) .3s both; }
.guia-card--liberado { border-color: color-mix(in srgb, var(--mato) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--mato) 7%, var(--surface)), var(--surface)); }
@keyframes guia-ok { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@media (max-width: 560px) { .guia-card { grid-template-columns: 70px minmax(0, 1fr); gap: .9rem; } .guia-card__capa { width: 70px; } .guia-card__botao { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .guia-card__ok { animation: none; } }

/* Ferramentas de cada módulo, no programa */
.modulo__ferr { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .3rem; }
.modulo__ferr b { padding: .12rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--mato-ink); background: color-mix(in srgb, var(--mato) 12%, var(--surface)); }