/* Intenção de Missa — aplicação especial em tema escuro, como a Vela e o Memorial.

   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 onde há fundo claro — no botão, que inverte para o escuro.
   Fundo, texto e a luz quente são da aplicação, porque o DS não tem tema
   escuro. Tudo preso a #a12-intencao: o kit do Elementor estiliza todo
   <button>, <input> e <a> do site, e o tema força p{margin:0!important}. */

.a12-intencao{
  --marca:var(--a12-principal,#005199);
  --marca-escura:var(--a12-secundaria,#003361);
  --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; --luz-fraca:rgba(244,166,60,.14);
  --papel:#f7f1e6; --papel-linha:#cfc4b2;
  position:relative;
  background:var(--noite);
  color:var(--texto);
  font-size:16px;
  line-height:1.6;
  color-scheme:dark;
  padding-bottom:64px;
  overflow:hidden;
}
#a12-intencao *,#a12-intencao *::before,#a12-intencao *::after{box-sizing:border-box}
#a12-intencao [hidden]{display:none!important}
#a12-intencao p,#a12-intencao span,#a12-intencao li,#a12-intencao label,#a12-intencao div{font-weight:400}
#a12-intencao :focus-visible{outline:2px solid var(--luz-clara);outline-offset:3px}
#a12-intencao [tabindex="-1"]:focus{outline:0}
#a12-intencao .a12-intencao__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- as luzes: o canvas cobre o bloco inteiro, tudo fica por cima ---------- */
#a12-intencao .a12-intencao__luzes{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
#a12-intencao .a12-intencao__intro,#a12-intencao .a12-intencao__cena,#a12-intencao .a12-intencao__minhas{position:relative;z-index:1}

/* ---------- cabeçalho do serviço ---------- */
#a12-intencao .a12-intencao__intro{max-width:760px;margin:0 auto;padding:48px 16px 8px;text-align:center;display:grid;justify-items:center;gap:10px}
#a12-intencao .a12-intencao__intro h1{color:var(--texto-forte);font-size:clamp(30px,5vw,40px);line-height:1.2;margin:0;font-weight:600;text-wrap:balance}
#a12-intencao .a12-intencao__intro p{margin:0 auto;max-width:60ch;color:var(--texto-apoio);font-size:17px;text-wrap:balance;text-wrap:pretty}
#a12-intencao .a12-intencao__acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#a12-intencao .a12-intencao__acoes--centro{justify-content:center;margin-top:8px}

/* ---------- a cena: cartão à esquerda, Nossa Senhora à direita ---------- */
#a12-intencao .a12-intencao__palco{position:relative;display:grid;gap:16px;justify-items:center;max-width:1200px;margin:0 auto;padding:32px 16px 48px}
#a12-intencao .a12-intencao__lugar-nsa{position:relative;order:1;width:min(100%,260px);aspect-ratio:1;justify-self:center}
#a12-intencao .a12-intencao__nsa{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center 18%;background-repeat:no-repeat;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 38%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 38%,transparent 100%)}
#a12-intencao .a12-intencao__nsa::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(45% 45% at 50% 60%,var(--luz-fraca),transparent 70%);opacity:0;transition:opacity .6s}
#a12-intencao .a12-intencao__nsa.recebe::after{opacity:1;animation:a12-intencao-pulso 1.4s ease-out}
@keyframes a12-intencao-pulso{0%{transform:scale(.6);opacity:0}40%{opacity:1}100%{transform:scale(1.25);opacity:0}}
@media (min-width:900px){
  #a12-intencao .a12-intencao__palco{grid-template-columns:minmax(0,520px) minmax(300px,1fr);align-items:center;column-gap:48px;justify-items:stretch;padding:40px 16px 56px}
  #a12-intencao .a12-intencao__lugar-nsa{order:0;width:min(100%,440px)}
}

/* cartão do DS (raio 8, fio, respiro 32) em superfície escura */
#a12-intencao .a12-intencao__cartao{position:relative;background:rgba(24,18,13,.86);border:1px solid var(--fio);border-radius:var(--raio);padding:var(--respiro);display:grid;gap:20px;width:100%;max-width:560px;align-content:start;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:600px){ #a12-intencao .a12-intencao__cartao{--respiro:24px} }
#a12-intencao .a12-intencao__passo{display:grid;gap:20px;align-content:start}
#a12-intencao .a12-intencao__cabeca{display:grid;gap:6px}
#a12-intencao .a12-intencao__titulo{margin:0;font-size:18.4px;line-height:26.4px;font-weight:600;color:var(--texto-forte);text-wrap:balance}
#a12-intencao .a12-intencao__lead{margin:0;font-size:15px;line-height:1.6;color:var(--texto-apoio)}
#a12-intencao .a12-intencao__lead--forte{font-size:16px;color:var(--texto-forte)}
#a12-intencao .a12-intencao__quando{margin:0;font-size:14px;color:var(--texto-apoio)}
#a12-intencao .a12-intencao__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}
#a12-intencao .a12-intencao__sessao{margin:0;padding-top:16px;border-top:1px solid var(--fio);font-size:13px;color:var(--texto-apoio);word-break:break-word}
#a12-intencao .a12-intencao__elo{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--luz-clara);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
#a12-intencao .a12-intencao__porta .a12-membro{margin:0}

/* as três etapas como linha do tempo, como na Vela */
#a12-intencao .a12-intencao__etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
#a12-intencao .a12-intencao__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-intencao .a12-intencao__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-intencao .a12-intencao__etapas li+li::after{content:"";position:absolute;top:8.5px;right:50%;width:100%;height:1px;background:var(--fio-forte)}
#a12-intencao .a12-intencao__etapas li[data-feito]::before{background:var(--texto-apoio);border-color:var(--texto-apoio)}
#a12-intencao .a12-intencao__etapas li[data-feito]+li::after,#a12-intencao .a12-intencao__etapas li[aria-current="step"]::after{background:var(--texto-apoio)}
#a12-intencao .a12-intencao__etapas li[aria-current="step"]{color:var(--texto-forte)}
#a12-intencao .a12-intencao__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)}

/* botão do DS: a forma inteira; no escuro, superfície clara e texto na Marca Escura */
#a12-intencao .a12-intencao__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-intencao .a12-intencao__botao:hover{background:var(--claro-2);color:var(--marca-escura)}
#a12-intencao .a12-intencao__botao[disabled]{opacity:.6;cursor:default}
#a12-intencao .a12-intencao__botao--tonal{background:rgba(255,255,255,.08);color:var(--texto-forte);box-shadow:inset 0 0 0 1px var(--fio)}
#a12-intencao .a12-intencao__botao--tonal:hover{background:rgba(255,255,255,.14);color:var(--texto-forte)}
#a12-intencao .a12-intencao__icone{width:20px;height:20px;flex:none}
#a12-intencao .a12-intencao__girando{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:a12-intencao-gira .8s linear infinite;flex:none}
@keyframes a12-intencao-gira{to{transform:rotate(360deg)}}

/* ---------- a folha ---------- */
#a12-intencao .a12-intencao__folha{position:relative;background:var(--papel);border-radius:var(--raio);padding:18px 18px 14px;color:#2a211a;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#a12-intencao .a12-intencao__folha label{display:block;color:#5b4d3e;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
#a12-intencao .a12-intencao__folha textarea{display:block;width:100%;min-height:150px;resize:vertical;border:0;border-radius:0;box-shadow:none;background:transparent;color:#2a211a;font:inherit;font-size:17px;line-height:1.55;padding:6px 0 0;margin:0;background-image:repeating-linear-gradient(transparent 0 25.3px,var(--papel-linha) 25.3px 26.3px);background-position:0 11px}
#a12-intencao .a12-intencao__folha textarea::placeholder{color:#8e8171}
#a12-intencao .a12-intencao__folha textarea:focus,#a12-intencao .a12-intencao__folha textarea:focus-visible{outline:0;box-shadow:none;border:0}
#a12-intencao .a12-intencao__folha:focus-within{box-shadow:0 0 0 2px var(--luz-clara),0 10px 30px rgba(0,0,0,.35)}
#a12-intencao .a12-intencao__contagem{display:flex;justify-content:space-between;font-size:13px;color:#8e8171;margin-top:6px}
#a12-intencao .a12-intencao__contagem b{font-weight:600;color:#5b4d3e}
#a12-intencao .enviando .a12-intencao__folha{visibility:hidden}

/* ---------- o envelope ---------- */
#a12-intencao .a12-intencao__envelope{position:absolute;z-index:5;width:220px;height:170px;left:0;top:0;pointer-events:none;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
#a12-intencao .a12-intencao__envelope svg{width:100%;height:100%;overflow:visible;display:block}
#a12-intencao .a12-intencao__envelope .papel{transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
#a12-intencao .a12-intencao__envelope .aba-atras{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.4,0,1,1) .4s}
#a12-intencao .a12-intencao__envelope .aba-frente{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .32s cubic-bezier(0,0,.2,1) .7s}
#a12-intencao .a12-intencao__envelope .selo{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .2s 1s,transform .3s cubic-bezier(.3,1.4,.6,1) 1s}
#a12-intencao .a12-intencao__envelope.fechado .papel{transform:translateY(64px)}
#a12-intencao .a12-intencao__envelope.fechado .aba-atras{transform:scaleY(0)}
#a12-intencao .a12-intencao__envelope.fechado .aba-frente{transform:scaleY(1)}
#a12-intencao .a12-intencao__envelope.fechado .selo{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  #a12-intencao .a12-intencao__envelope .papel,#a12-intencao .a12-intencao__envelope .aba-atras,#a12-intencao .a12-intencao__envelope .aba-frente,#a12-intencao .a12-intencao__envelope .selo{transition:none}
  #a12-intencao .a12-intencao__nsa.recebe::after{animation:none;opacity:1}
}

/* ---------- Minhas intenções: a pilha de envelopes ---------- */
#a12-intencao .a12-intencao__minhas{max-width:1200px;margin:0 auto;padding:24px 16px 0}
#a12-intencao .a12-intencao__secao{display:flex;align-items:center;gap:16px;margin:0 0 20px}
#a12-intencao .a12-intencao__secao h2{margin:0;font-size:32px;line-height:41.6px;font-weight:600;color:var(--texto-forte);white-space:nowrap}
#a12-intencao .a12-intencao__secao hr{flex:1;border:0;border-top:1px solid var(--fio);margin:0;min-width:24px}
@media (max-width:600px){ #a12-intencao .a12-intencao__secao h2{font-size:26px;line-height:34px} }
#a12-intencao .a12-intencao__vazio{margin:0;color:var(--texto-apoio);font-size:15px}
#a12-intencao .a12-intencao__pilha{display:grid;gap:12px;list-style:none;margin:0;padding:0;max-width:720px}
#a12-intencao .a12-intencao__carta{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--painel);border:1px solid var(--fio);border-radius:var(--raio);padding:16px 18px;margin:0}
#a12-intencao .a12-intencao__carta--nova{border-color:var(--luz);box-shadow:inset 0 0 0 1px var(--luz)}
#a12-intencao .a12-intencao__carta svg{width:44px;height:30px;margin-top:4px}
#a12-intencao .a12-intencao__carta time{display:block;font-size:13px;color:var(--texto-apoio);margin-bottom:4px}
#a12-intencao .a12-intencao__carta p{margin:0;color:var(--texto-forte);white-space:pre-wrap}