/* Vela Virtual — aplicação especial em tema escuro: a sala das velas à noite.

   Do design system vem a forma: a tipografia do kit, a escala de títulos, raio
   8, fio de 1px, respiro 32, o botão e o botão tonal. A cor da marca vem da
   paleta do núcleo (a12-color-palettes) onde há fundo claro — no botão, que
   inverte para o escuro: superfície clara do núcleo com texto na Marca Escura.
   Fundo e texto são da aplicação, porque o DS não tem tema escuro; a luz quente
   é a da chama e só marca seleção e foco.

   Tudo preso a .a12-vela: nada daqui pode chegar ao cabeçalho nem ao rodapé do
   portal. Os valores depois da vírgula são a paleta Azul Manto, e só valem onde
   a paleta do núcleo não estiver na página. */
/* As regras dos componentes vão presas a #a12-vela: o kit do Elementor estiliza
   todo <button>, <input> e <a> do site (.elementor-kit-5 button, 0,1,1), e
   passava por cima do botão do aplicativo — texto branco sobre a superfície clara. */

.a12-vela{
  --marca:var(--a12-principal,#005199);
  --marca-escura:var(--a12-secundaria,#003361);
  --sobre-marca:var(--a12-on-principal,#FFFFFF);
  --claro:var(--a12-fundo-minimo,#F4F8FB);
  --claro-2:var(--a12-fundo-suave,#E3EEF7);
  --raio:8px; --respiro:32px;
  --noite:#0c0907;
  --painel:#18120d;
  --fio:rgba(213,212,212,.2);
  --fio-forte:rgba(213,212,212,.38);
  --texto:#e8e0d3;
  --texto-forte:#fbf6ee;
  --texto-apoio:#b5a893;
  --luz:#f4a63c;
  --luz-clara:#ffd58a;
  background:var(--noite);
  color:var(--texto);
  font-size:16px;
  line-height:1.6;
  color-scheme:dark;
  padding-bottom:64px;
}
#a12-vela *,#a12-vela *::before,#a12-vela *::after{box-sizing:border-box}
#a12-vela [hidden]{display:none!important}
/* o kit vaza peso 900 para o corpo do site (memória "DS padrão do site no V3"):
   o texto do app diz o peso dele */
#a12-vela p,#a12-vela span,#a12-vela li,#a12-vela label,#a12-vela div{font-weight:400}
#a12-vela :focus-visible{outline:2px solid var(--luz-clara);outline-offset:3px}

/* ---------- altar ---------- */
/* A cena: o canvas cobre o bloco inteiro e tudo fica por cima dele — o título,
   o cartão e o lugar onde a vela é desenhada (#lugar-vela, que o script mede). */
#a12-vela .a12-vela__altar{position:relative;background:var(--noite);overflow:hidden}
#a12-vela .a12-vela__altar canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:manipulation}
#a12-vela .a12-vela__palco{position:relative;z-index:2;display:grid;max-width:1180px;margin:0 auto;padding:0 16px 48px}
#a12-vela .a12-vela__lugar{height:clamp(320px,82vw,460px)}
#a12-vela .a12-vela__ritual{width:100%;max-width:560px;margin:0 auto}
@media (min-width:900px){
  #a12-vela .a12-vela__palco{grid-template-columns:440px 1fr;gap:32px;align-items:stretch;padding:16px 16px 64px}
  #a12-vela .a12-vela__lugar{order:2;height:auto;min-height:540px}
  #a12-vela .a12-vela__ritual{order:1;margin:0}
}
#a12-vela .a12-vela__cartao{background:rgba(24,18,13,.82);border:1px solid var(--fio);border-radius:var(--raio);padding:var(--respiro);display:grid;gap:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:600px){ .a12-vela__cartao{--respiro:24px} }
/* título e texto de cada passo: o cartão conduz, sem personagem nem balão.
   Título na escala do DS para cartão (18,4/26,4, peso 600). */
#a12-vela .a12-vela__cabeca{display:grid;gap:6px}
#a12-vela .a12-vela__titulo{margin:0;font-size:18.4px;line-height:26.4px;font-weight:600;color:var(--texto-forte);text-wrap:balance}
#a12-vela .a12-vela__lead{margin:0;font-size:15px;line-height:1.6;color:var(--texto-apoio)}
/* as três etapas como linha do tempo: bolinha por etapa, ligadas por um fio.
   Feita = bolinha cheia; a atual = na luz da chama, com halo; a seguir = vazada. */
#a12-vela .a12-vela__etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);counter-reset:etapa}
#a12-vela .a12-vela__etapas li{position:relative;margin:0;padding-top:22px;text-align:center;font-size:12px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-apoio)}
#a12-vela .a12-vela__etapas li::before{content:"";position:absolute;top:4px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:1.5px solid var(--fio-forte);background:var(--noite);z-index:1;box-sizing:border-box}
#a12-vela .a12-vela__etapas li+li::after{content:"";position:absolute;top:8.5px;right:50%;width:100%;height:1px;background:var(--fio-forte)}
#a12-vela .a12-vela__etapas li[data-feito]::before{background:var(--texto-apoio);border-color:var(--texto-apoio)}
#a12-vela .a12-vela__etapas li[data-feito]+li::after,#a12-vela .a12-vela__etapas li[aria-current="step"]::after{background:var(--texto-apoio)}
#a12-vela .a12-vela__etapas li[aria-current="step"]{color:var(--texto-forte)}
#a12-vela .a12-vela__etapas li[aria-current="step"]::before{background:var(--luz);border-color:var(--luz);box-shadow:0 0 0 4px rgba(244,166,60,.18),0 0 12px rgba(244,166,60,.55)}
#a12-vela .a12-vela__passo{display:grid;gap:20px}
#a12-vela #passo-intencao label[for],#a12-vela #passo-intencao legend{font-weight:600;font-size:15px;color:var(--texto-forte)}
#a12-vela #passo-intencao textarea{width:100%;min-height:104px;resize:vertical;border-radius:var(--raio);border:1px solid var(--fio-forte);background:rgba(0,0,0,.35);color:var(--texto-forte);font:inherit;font-size:16px;line-height:1.5;padding:12px 14px;margin-top:6px}
#a12-vela #passo-intencao textarea::placeholder{color:var(--texto-apoio)}
#a12-vela #passo-intencao textarea:focus-visible{outline-offset:0}
#a12-vela .a12-vela__ajuda{font-size:14px;color:var(--texto-apoio);margin:0}
#a12-vela #passo-intencao fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
#a12-vela #passo-intencao legend{margin-bottom:8px;padding:0}
#a12-vela .a12-vela__opcao{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--fio);border-radius:var(--raio);cursor:pointer;font-weight:400}
#a12-vela .a12-vela__opcao:has(input:checked){border-color:var(--luz);box-shadow:inset 0 0 0 1px var(--luz);background:rgba(244,166,60,.06)}
#a12-vela .a12-vela__opcao:has(input:disabled){opacity:.7;cursor:default}
#a12-vela .a12-vela__opcao input{margin:4px 0 0;accent-color:var(--luz)}
#a12-vela .a12-vela__opcao b{display:block;font-weight:600;color:var(--texto-forte)}
#a12-vela .a12-vela__opcao span{font-size:14px;color:var(--texto-apoio)}
#a12-vela .a12-vela__rascunho{font-size:13px;min-height:1.2em;margin:4px 0 0;color:var(--texto-apoio)}
#a12-vela .a12-vela__aviso{margin:0;padding:10px 14px;border-radius:var(--raio);border:1px solid rgba(255,120,100,.45);background:rgba(255,120,100,.08);color:#ffc9bf;font-size:14px}

/* botão do DS: a forma inteira; no escuro, superfície clara do núcleo e texto
   na Marca Escura */
#a12-vela .a12-vela__botao{appearance:none;border:0;border-radius:var(--raio);padding:12px 24px;font:inherit;font-size:16px;font-weight:600;line-height:1.2;cursor:pointer;background:var(--claro);color:var(--marca-escura);min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
#a12-vela .a12-vela__botao:hover{background:var(--claro-2);color:var(--marca-escura)}
#a12-vela .a12-vela__botao[disabled]{opacity:.6;cursor:default}
#a12-vela .a12-vela__botao--tonal{background:rgba(255,255,255,.08);color:var(--texto-forte);box-shadow:inset 0 0 0 1px var(--fio)}
#a12-vela .a12-vela__botao--tonal:hover{background:rgba(255,255,255,.14);color:var(--texto-forte)}
#a12-vela .a12-vela__icone{width:20px;height:20px;flex:none}
#a12-vela .a12-vela__acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#a12-vela .a12-vela__redes{display:flex;flex-wrap:wrap;gap:8px}
#a12-vela .a12-vela__redes .a12-vela__botao{min-height:40px;padding:8px 16px;font-size:15px}
#a12-vela .a12-vela__elo{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--luz-clara);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#a12-vela .a12-vela__sessao{margin:0;padding-top:16px;border-top:1px solid var(--fio);font-size:13px;color:var(--texto-apoio);word-break:break-word}
#a12-vela .a12-vela__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a porta do a12-membro entra com o desenho dela, como cartão claro */
#a12-vela .a12-vela__porta .a12-membro{margin:0}

/* ---------- cabeçalho do serviço ---------- */
/* centrado pelo contêiner, e não por `margin: auto` no parágrafo: o tema força
   `p { margin: 0 !important }`, e a frase ficava presa à esquerda, torta em
   relação ao título */
#a12-vela .a12-vela__intro{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:48px 16px 16px;text-align:center;display:grid;justify-items:center;gap:8px}
#a12-vela .a12-vela__intro h1{color:var(--texto-forte);font-size:clamp(30px,5vw,40px);line-height:1.2;margin:0;font-weight:600;text-wrap:balance}
/* sem viúva: `pretty` não deixa palavra sozinha na última linha; `balance` é a
   reserva de quem ainda não tem `pretty`, e a largura curta deixa as linhas parelhas */
#a12-vela .a12-vela__intro p{margin:0 auto;max-width:56ch;color:var(--texto-apoio);text-wrap:balance;text-wrap:pretty}

/* ---------- cabeçalho de seção do DS: título, régua, complemento ---------- */
#a12-vela .a12-vela__secao{display:flex;align-items:center;gap:16px;margin:0 0 16px}
#a12-vela .a12-vela__secao h2{margin:0;font-size:32px;line-height:41.6px;font-weight:600;color:var(--texto-forte);white-space:nowrap}
#a12-vela .a12-vela__secao hr{flex:1;border:0;border-top:1px solid var(--fio);margin:0;min-width:24px}
@media (max-width:600px){
  #a12-vela .a12-vela__secao{flex-wrap:wrap;row-gap:8px}
  #a12-vela .a12-vela__secao h2{font-size:26px;line-height:34px}
}

/* ---------- sala das velas ---------- */
#a12-vela .a12-vela__sala{max-width:1180px;margin:32px auto 0;padding:0 16px}
#a12-vela .a12-vela__contadores{display:flex;gap:24px;font-size:14px;color:var(--texto-apoio);font-variant-numeric:tabular-nums;white-space:nowrap}
#a12-vela .a12-vela__contadores strong{color:var(--texto-forte);font-size:20px;font-weight:600;display:block;line-height:1.2}
#a12-vela .a12-vela__estante{position:relative;border-radius:var(--raio);background:var(--noite);border:1px solid var(--fio)}
#a12-vela .a12-vela__estante canvas{display:block;width:100%;height:420px;border-radius:var(--raio)}
#a12-vela .a12-vela__alvos{position:absolute;inset:0}
#a12-vela .a12-vela__vazia{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;text-align:center;color:var(--texto-apoio)}
#a12-vela .alvo{position:absolute;width:40px;transform:translate(-50%,-100%);background:transparent;border:0;border-radius:var(--raio);cursor:pointer;padding:0}
#a12-vela .dica-vela{position:absolute;z-index:4;pointer-events:none;background:var(--painel);color:var(--texto);border:1px solid var(--fio-forte);border-radius:var(--raio);padding:8px 12px;font-size:13px;line-height:1.4;white-space:nowrap;transform:translate(-50%,calc(-100% - 10px));box-shadow:0 6px 18px rgba(0,0,0,.45)}
#a12-vela .dica-vela::after{content:"";position:absolute;left:var(--seta,50%);bottom:-6px;width:10px;height:10px;background:var(--painel);border-right:1px solid var(--fio-forte);border-bottom:1px solid var(--fio-forte);transform:translateX(-50%) rotate(45deg)}
#a12-vela .dica-vela b{display:block;color:var(--texto-forte);font-size:14px;font-weight:600}
#a12-vela .dica-vela .minha{color:var(--luz-clara)}
#a12-vela .etiqueta-minha{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,calc(-100% - 8px));background:var(--luz-clara);color:#22140a;font-size:12px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;white-space:nowrap}
#a12-vela .etiqueta-minha::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:var(--luz-clara);transform:translateX(-50%) rotate(45deg)}
#a12-vela .a12-vela__legenda{font-size:14px;margin:12px 0 0;color:var(--texto-apoio)}
#a12-vela .a12-vela__intencao{margin:4px 0 0;padding:12px 14px;border-left:2px solid var(--luz);background:rgba(255,255,255,.04);color:var(--texto-forte);white-space:pre-wrap;border-radius:0 var(--raio) var(--raio) 0}

/* a contagem regressiva */
#a12-vela .a12-vela__restante{display:grid;gap:8px}
#a12-vela .a12-vela__relogio{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#a12-vela .a12-vela__relogio div{display:grid;justify-items:center;gap:2px;padding:12px 4px;border:1px solid var(--fio);border-radius:var(--raio);background:rgba(0,0,0,.25)}
#a12-vela .a12-vela__relogio strong{font-size:28px;line-height:1.1;font-weight:600;color:var(--luz-clara);font-variant-numeric:tabular-nums}
#a12-vela .a12-vela__relogio span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-apoio)}
/* copiar e compartilhar lado a lado, com a mesma largura */
#a12-vela .a12-vela__dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#a12-vela .a12-vela__dupla .a12-vela__botao{padding-inline:12px}
/* botão de ponta a ponta */
#a12-vela .a12-vela__botao--largo{width:100%}
/* a doação: o QR em fundo branco (é o que o leitor do banco precisa) ao lado de como pagar */
#a12-vela .a12-vela__pix{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center}
@media (max-width:420px){ #a12-vela .a12-vela__pix{grid-template-columns:1fr;justify-items:center} }
#a12-vela .a12-vela__qr{position:relative;width:160px;aspect-ratio:1;border-radius:var(--raio);overflow:hidden;background:#fff}
/* o QR de exemplo, enquanto a chave oficial não chega */
#a12-vela .a12-vela__qr-selo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 8px;border-radius:4px;background:#1c1c1e;color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
#a12-vela .a12-vela__qr svg{display:block;width:100%;height:100%}
#a12-vela .a12-vela__passos-pix{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;color:var(--texto)}
#a12-vela .a12-vela__outras{display:grid;gap:8px}
#a12-vela .a12-vela__voltar{margin:0;text-align:center;font-size:14px}
#a12-vela .a12-vela__titulo[tabindex="-1"]:focus{outline:none}
/* o convite de quem recebeu o link: a pergunta e o botão juntos, separados do resto */
#a12-vela .a12-vela__convite{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--fio)}
#a12-vela .a12-vela__convite p{margin:0;font-size:16px;font-weight:600;color:var(--texto-forte)}
/* com a altura travada (a doação no lugar da vela), a sobra fica no fim, e não entre as linhas */
#a12-vela .a12-vela__cartao,#a12-vela .a12-vela__passo{align-content:start}

/* ---------- suas velas acesas ----------
   Entre o altar e a sala: um cartão por vela da pessoa, no desenho dos cartões
   do Memorial (painel, fio, raio 8, retrato), e por último sempre o de acender
   uma nova. Sem vela, a seção não aparece e a página é a de sempre. */
#a12-vela .a12-vela__minhas{max-width:1180px;margin:32px auto 0;padding:0 16px}
#a12-vela .a12-vela__minhas-conta{margin:0;font-size:14px;color:var(--texto-apoio);font-variant-numeric:tabular-nums;white-space:nowrap}
#a12-vela .a12-vela__vitrine{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){ #a12-vela .a12-vela__vitrine{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }
#a12-vela .a12-vela__vitrine li{margin:0;display:grid;min-width:0}
#a12-vela .a12-vela__moldura{position:relative;background:var(--painel);border:1px solid var(--fio);border-radius:var(--raio);padding:16px;display:grid;gap:12px;grid-template-rows:auto 1fr auto;min-width:0}
@media (max-width:600px){ #a12-vela .a12-vela__moldura{padding:12px;gap:10px} }
#a12-vela .a12-vela__moldura:hover{border-color:var(--luz)}
#a12-vela .a12-vela__moldura--nova{border-style:dashed;border-color:var(--fio-forte);background:transparent}
/* o cartão da nova não é clicável inteiro: quem age é o botão */
#a12-vela .a12-vela__moldura--nova:hover{border-color:var(--fio-forte)}
#a12-vela .a12-vela__nova{white-space:normal;text-align:center;line-height:1.25;align-self:start}
#a12-vela .a12-vela__nova svg{width:20px;height:20px;flex:none}
@media (max-width:600px){
  #a12-vela .a12-vela__nova{padding:10px 12px;font-size:15px;gap:6px}
  #a12-vela .a12-vela__nova svg{width:18px;height:18px}
}
/* a vela que está no altar: borda na luz da chama e o selo "Em destaque" */
#a12-vela .a12-vela__moldura[data-destaque]{border-color:var(--luz);box-shadow:inset 0 0 0 1px var(--luz)}
#a12-vela .a12-vela__retrato{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:4px;overflow:hidden;border:1px solid var(--fio-forte);background:#0a0705}
#a12-vela .a12-vela__retrato canvas{display:block;width:100%;height:100%}
#a12-vela .a12-vela__destaque{position:absolute;left:8px;top:8px;display:none;background:var(--luz-clara);color:#22140a;font-size:12px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px}
#a12-vela .a12-vela__moldura[data-destaque] .a12-vela__destaque{display:block}
#a12-vela .a12-vela__destaque-linha{display:none}
@media (max-width:600px){
  #a12-vela .a12-vela__moldura[data-destaque] .a12-vela__destaque,#a12-vela .a12-vela__moldura[data-destaque] .a12-vela__tempo{display:none}
  #a12-vela .a12-vela__moldura[data-destaque] .a12-vela__destaque-linha{display:inline;color:var(--luz-clara);font-weight:600}
}
#a12-vela .a12-vela__moldura h3{margin:0;min-width:0;font-size:16px;line-height:1.4;font-weight:600;color:var(--texto-forte)}
@media (max-width:600px){ #a12-vela .a12-vela__moldura h3{font-size:15px} }
/* o cartão inteiro é o botão (o ::after cobre o cartão); o kit põe nowrap e
   fundo em todo button, e aqui o texto tem de quebrar */
#a12-vela .a12-vela__ver{appearance:none;display:block;width:100%;min-width:0;min-height:0;margin:0;padding:0;background:none;border:0;box-shadow:none;color:inherit;font:inherit;font-weight:600;letter-spacing:normal;text-transform:none;text-align:left;white-space:normal;cursor:pointer}
#a12-vela .a12-vela__ver:hover{background:none;color:inherit}
#a12-vela .a12-vela__ver::after{content:"";position:absolute;inset:0;border-radius:var(--raio)}
#a12-vela .a12-vela__ver:focus-visible{outline:none}
#a12-vela .a12-vela__ver:focus-visible::after{outline:2px solid var(--luz-clara);outline-offset:3px}
#a12-vela .a12-vela__ver[aria-disabled="true"]{cursor:default}
#a12-vela .a12-vela__ver-texto{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;overflow-wrap:anywhere}
#a12-vela .a12-vela__datas{margin:0;display:flex;gap:6px;align-items:center;font-size:14px;line-height:1.4;color:var(--texto-apoio);font-variant-numeric:tabular-nums}
#a12-vela .a12-vela__datas svg{width:16px;height:16px;flex:none;color:var(--luz)}
/* o voo da vela do cartão até o altar: um canvas por cima da página, que não pega clique */
#a12-vela .a12-vela__voo{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
/* no cartão do ritual, a intenção da vela que está no altar, em duas linhas */
#a12-vela .a12-vela__intencao--curta{margin:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}