/* Carta do Dia - taro interativo | Minha Numerologia Cabala
   Folha exclusiva desta pagina. Tudo que anima e transform ou opacity. */

body.mnc-carta-dia .cd-palco{
  --cd-noite:#141F3F; --cd-marinho:#1B2A55; --cd-ouro:#B08A4A;
  --cd-ouro-claro:#D9BC84; --cd-tinta:#2A2E3F; --cd-papel:#F7F4EC;
  --cd-larg:132px; --cd-alt:198px; --cd-passo:7deg; --cd-pivo:300%;
  position:relative; margin:0 auto; max-width:1100px;
  padding:6px 16px 0; text-align:center;
}

.cd-convite{
  margin:0 auto 28px; max-width:30ch;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.16rem,2.4vw,1.58rem); line-height:1.34;
  color:var(--cd-marinho);
}
.cd-convite::after{
  content:""; display:block; width:54px; height:1px; margin:14px auto 0;
  background:var(--cd-ouro); opacity:.7;
}

/* A aura: luz que cresce atras da carta escolhida. */
.cd-aura{
  position:absolute; left:50%; top:46%; width:520px; height:520px;
  margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(176,138,74,.34) 0,rgba(176,138,74,.11) 42%,rgba(176,138,74,0) 70%);
  opacity:0; transform:scale(.6);
  transition:opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.25,1);
}
.cd-palco[data-estado="revelada"] .cd-aura,
.cd-palco[data-estado="virando"] .cd-aura{opacity:1; transform:scale(1)}

/* O leque: as cartas giram em volta de um eixo abaixo do palco, por isso
   voltar a rotate(0) devolve a carta ao centro sem conta de posicao. */
.cd-leque{position:relative; height:376px; margin:0 auto}

.cd-carta{
  position:absolute; left:50%; bottom:0; z-index:1;
  width:var(--cd-larg); height:var(--cd-alt);
  margin:0 0 0 calc(var(--cd-larg) / -2);
  padding:0; border:0; background:none; cursor:pointer;
  perspective:1200px; -webkit-tap-highlight-color:transparent;
  transform-origin:50% var(--cd-pivo);
  transform:rotate(calc((var(--i) - 5.5) * var(--cd-passo)));
  transition:transform 440ms cubic-bezier(.22,.68,.32,1), opacity 320ms ease;
}
.cd-carta:focus-visible{outline:2px solid var(--cd-ouro); outline-offset:6px; border-radius:12px}

.cd-giro{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 920ms cubic-bezier(.2,.78,.26,1);
}
.cd-face{
  position:absolute; inset:0; display:block; border-radius:11px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 10px 26px -14px rgba(10,16,38,.72), 0 0 0 1px rgba(176,138,74,.45);
}
.cd-frente{transform:rotateY(180deg); background:var(--cd-marinho)}
.cd-face svg{display:block; width:100%; height:100%}
/* Tres camadas, tres tempos: a carta gira ate o centro, a lupa cresce,
   e so o giro vira em 3D. Separadas porque cada uma tem sua duracao. */
.cd-carta{perspective:none}
.cd-lupa{
  position:relative; display:block; width:100%; height:100%;
  perspective:1200px; transform-origin:50% 50%;
  transition:transform 440ms cubic-bezier(.22,.68,.32,1);
}

/* Mao parada: a carta sai do leque sem perder o angulo dela. */
@media (hover:hover){
  .cd-carta:hover{z-index:14}
  .cd-carta:hover .cd-lupa{transform:translateY(-26px) scale(1.04)}
  .cd-carta:hover .cd-face{box-shadow:0 18px 38px -16px rgba(10,16,38,.78), 0 0 0 1px rgba(217,188,132,.85)}
}
.cd-carta:focus-visible{z-index:14}
.cd-carta:focus-visible .cd-lupa{transform:translateY(-26px) scale(1.04)}

/* As onze que ficam para tras. */
.cd-dorme{opacity:.16; pointer-events:none}
.cd-dorme .cd-lupa{transform:scale(.93)}

/* A escolhida: volta ao centro do leque e cresce. */
.cd-escolhida{z-index:30; pointer-events:none}
.cd-escolhida .cd-lupa{transform:translateY(-16px) scale(1.34)}
.cd-palco[data-estado="virando"] .cd-escolhida,
.cd-palco[data-estado="revelada"] .cd-escolhida{transform:rotate(0deg)}
.cd-escolhida.cd-vira .cd-giro{transform:rotateY(180deg)}

/* A luz que atravessa a carta durante a virada. */
.cd-brilho{
  position:absolute; inset:0; z-index:3; border-radius:11px; overflow:hidden;
  pointer-events:none; opacity:0;
}
.cd-brilho::before{
  content:""; position:absolute; top:-40%; left:-60%;
  width:48%; height:180%; transform:translateX(-120%) rotate(16deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,248,230,.76) 50%,rgba(255,255,255,0) 100%);
}
.cd-escolhida.cd-vira .cd-brilho{opacity:1}
.cd-escolhida.cd-vira .cd-brilho::before{
  animation:cdLustro 920ms cubic-bezier(.3,.7,.3,1) 60ms both;
}
@keyframes cdLustro{
  from{transform:translateX(-120%) rotate(16deg)}
  to{transform:translateX(320%) rotate(16deg)}
}

/* As faiscas: nascem no centro da carta e se abrem em leque. */
.cd-faisca{
  position:absolute; left:50%; top:46%; width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px; border-radius:50%; pointer-events:none; z-index:40;
  background:radial-gradient(circle,#FFF6E2 0,var(--cd-ouro-claro) 55%,rgba(176,138,74,0) 100%);
  animation:cdFaisca var(--dur,1150ms) cubic-bezier(.17,.72,.3,1) var(--atraso,0ms) both;
}
@keyframes cdFaisca{
  0%{opacity:0; transform:translate(0,0) scale(.4)}
  18%{opacity:1}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(var(--fim,1.1))}
}
/* Recado de estado: espera, erro, ou "ja escolheu hoje". */
.cd-recado{
  margin:22px auto 0; max-width:46ch; padding:13px 18px;
  border:1px solid rgba(176,138,74,.5); border-radius:4px;
  background:#FBF8F1; color:#4A3A1E;
  font-size:.97rem; line-height:1.5;
}
.cd-recado[hidden]{display:none}
.cd-espera{display:inline-block; width:13px; height:13px; margin-right:9px;
  vertical-align:-1px; border:2px solid rgba(176,138,74,.35);
  border-top-color:var(--cd-ouro); border-radius:50%;
  animation:cdRoda 760ms linear infinite}
@keyframes cdRoda{to{transform:rotate(360deg)}}

/* A leitura. Entra subindo, depois que a carta terminou de virar. */
.cd-leitura{
  margin:34px auto 0; max-width:680px; padding:30px 30px 26px;
  border:1px solid rgba(27,42,85,.14); border-radius:5px;
  background:#fff; box-shadow:0 22px 54px -34px rgba(20,31,63,.5);
  text-align:left; opacity:0; transform:translateY(22px);
  transition:opacity 560ms ease, transform 560ms cubic-bezier(.2,.8,.25,1);
}
.cd-leitura[hidden]{display:none}
.cd-leitura.cd-entrou{opacity:1; transform:none}

.cd-grupo{
  margin:0 0 6px; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:#856632;
}
.cd-nome{
  margin:0 0 4px; font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.62rem,3.4vw,2.1rem); line-height:1.18;
  color:var(--cd-marinho);
}
.cd-elemento{margin:0 0 18px; font-size:.9rem; color:#6B6F80}
.cd-resumo{
  margin:0 0 24px; padding:0 0 0 16px;
  border-left:3px solid var(--cd-ouro);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.12rem; line-height:1.56; color:#3A3F52;
}
.cd-bloco{margin:0 0 22px}
.cd-bloco h3{
  margin:0 0 7px; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; color:#856632; font-weight:700;
}
.cd-bloco p{margin:0; font-size:1.02rem; line-height:1.68; color:var(--cd-tinta)}
.cd-mensagem{
  padding:20px 22px; border-radius:4px;
  background:linear-gradient(180deg,#FBF7EE 0,#F6F0E2 100%);
  border:1px solid rgba(176,138,74,.34);
}
.cd-mensagem h3{color:#7A5A22}
.cd-rodape{
  margin:0; padding:18px 0 0; border-top:1px solid rgba(27,42,85,.1);
  display:flex; flex-wrap:wrap; gap:14px; align-items:baseline;
  justify-content:space-between;
}
.cd-rodape a{color:#1B2A55; font-weight:600; text-underline-offset:3px}
.cd-volta{margin:0; font-size:.88rem; color:#6B6F80}
/* ---- Telas medias: o mesmo leque, em escala menor. ---- */
@media (max-width:1040px){
  body.mnc-carta-dia .cd-palco{--cd-larg:112px; --cd-alt:168px; --cd-passo:6.2deg}
  .cd-leque{height:318px}
  .cd-aura{width:420px; height:420px; margin:-210px 0 0 -210px}
}

/* ---- Celular: grade de quatro colunas, nenhuma carta sobre a outra.
   Cada carta tem linha e coluna fixas, para que tirar a escolhida do
   fluxo nao empurre as outras onze de lugar. ---- */
@media (max-width:767px){
  body.mnc-carta-dia .cd-palco{padding:4px 16px 0}
  .cd-convite{margin-bottom:20px}
  .cd-leque{
    display:grid; grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(3,auto); gap:9px; height:auto;
  }
  .cd-carta{
    position:static; width:auto; height:auto; margin:0;
    aspect-ratio:2 / 3; transform:none;
    grid-column:var(--col); grid-row:var(--row);
  }
  .cd-face{border-radius:7px}
  .cd-escolhida{
    position:absolute; left:50%; top:0; z-index:30;
    width:152px; height:228px; margin:0 0 0 -76px; transform:none;
  }
  .cd-escolhida .cd-lupa{transform:none}
  .cd-escolhida .cd-face{border-radius:11px}
  .cd-palco[data-estado="virando"] .cd-leque,
  .cd-palco[data-estado="revelada"] .cd-leque{min-height:250px}
  .cd-leitura{padding:24px 20px 20px; border-radius:4px}
  .cd-rodape{flex-direction:column; gap:8px}
}
@media (max-width:360px){
  .cd-leque{gap:7px}
  .cd-escolhida{width:136px; height:204px; margin-left:-68px}
}

/* ---- Quem pediu menos movimento continua tendo a experiencia inteira,
   sem giro 3D, sem faisca e sem varredura de luz. ---- */
@media (prefers-reduced-motion:reduce){
  .cd-carta,.cd-lupa,.cd-giro,.cd-aura{transition-duration:1ms}
  .cd-leitura{transition-duration:140ms}
  .cd-giro{transform:none !important}
  .cd-face{backface-visibility:visible; -webkit-backface-visibility:visible}
  .cd-frente{transform:none; opacity:0; transition:opacity 240ms ease}
  .cd-escolhida.cd-vira .cd-frente{opacity:1}
  .cd-brilho,.cd-faisca{display:none}
  .cd-espera{animation-duration:2.4s}
  @media (hover:hover){
    .cd-carta:hover .cd-lupa{transform:scale(1.03)}
  }
}

/* Sem JavaScript a pagina continua honesta: o leque aparece parado e o
   recado explica, em vez de 12 botoes que nao fazem nada. */
.cd-palco[data-estado="sem-js"] .cd-leque{opacity:.5; pointer-events:none}
/* Os textos chegam do servidor com paragrafos proprios, porque passaram
   por wpautop. Estas regras valem para o que vem de dentro deles. */
.cd-resumo p{margin:0 0 10px; font:inherit; color:inherit}
.cd-resumo p:last-child{margin-bottom:0}
.cd-bloco p{margin:0 0 11px}
.cd-bloco p:last-child{margin-bottom:0}
.cd-bloco em{font-style:italic}
.cd-bloco strong{color:var(--cd-marinho)}
.cd-mensagem strong{color:#7A5A22}
/* O kit global do Elementor publica regras como `.elementor-kit-7 button`,
   com especificidade 0,1,1 - vence uma classe sozinha. Por isso o botao da
   carta aparecia com padding 16px 32px e borda de 1px, e a arte ficava com
   metade da largura. O seletor leva elemento e ancestral junto, sem
   !important. Ver memoria: kit-elementor-vence-classe-sozinha. */
.cd-leque button.cd-carta{
  padding:0; border:0; border-radius:0;
  background:none; box-shadow:none;
  color:inherit; font:inherit; letter-spacing:normal; text-transform:none;
  min-height:0; min-width:0;
}
.cd-leque button.cd-carta:hover,
.cd-leque button.cd-carta:focus,
.cd-leque button.cd-carta:active{
  padding:0; border:0; background:none; box-shadow:none; color:inherit;
}
/* A `reset.css` do tema traz `[type="button"]{width:auto;appearance:button}`
   e `[type="button"]{transition:all .3s}`. Seletor de atributo tem
   especificidade 0,1,0 - empata com `.cd-carta` - e essa folha carrega
   depois da minha, entao o empate era decidido por ordem e o tema vencia:
   a carta ficava com largura zero e a coreografia rodava no tempo dele.
   Largura, altura e transicao precisam de peso maior que 0,1,0.
   Comprovado tirando e repondo o atributo type na pagina. */
.cd-leque button.cd-carta{
  width:var(--cd-larg); height:var(--cd-alt);
  appearance:none; -webkit-appearance:none;
  white-space:normal; text-align:center;
  transition:transform 440ms cubic-bezier(.22,.68,.32,1), opacity 320ms ease;
}
@media (max-width:1040px){
  .cd-leque button.cd-carta{width:var(--cd-larg); height:var(--cd-alt)}
}
@media (max-width:767px){
  .cd-leque button.cd-carta{width:auto; height:auto; aspect-ratio:2 / 3}
  .cd-leque button.cd-carta.cd-escolhida{width:152px; height:228px}
}
@media (max-width:360px){
  .cd-leque button.cd-carta.cd-escolhida{width:136px; height:204px}
}
@media (prefers-reduced-motion:reduce){
  .cd-leque button.cd-carta{transition-duration:1ms}
}
/* O pivo do leque fica ABAIXO das cartas, entao girar afunda as pontas em
   vez de levanta-las: a 38,5 graus a carta desce 127px alem da base. Sem
   folga, o leque invadia o texto da secao seguinte.

   Conta, com raio R = pivo - meia carta e angulo maximo t:
     mergulho = R*(1-cos t) + (altura_da_caixa_girada/2 - meia_carta)
   Desktop: R=495, t=38,5 -> 127px.  Ate 1040px: R=420, t=34,1 -> 89px.
   A folga do topo existe para a carta escolhida, que cresce 1,34 vez. */
body.mnc-carta-dia .cd-palco{--cd-mergulho:132px}
.cd-leque{height:392px}
.cd-carta{bottom:var(--cd-mergulho)}
@media (max-width:1040px){
  body.mnc-carta-dia .cd-palco{--cd-mergulho:92px}
  .cd-leque{height:316px}
}
@media (max-width:767px){
  body.mnc-carta-dia .cd-palco{--cd-mergulho:0px}
  .cd-leque{height:auto}
  .cd-leque button.cd-carta{bottom:auto}
}
/* No celular cada carta tem coluna e linha fixas, para que tirar a
   escolhida do fluxo nao empurre as outras onze. Mas o CSS Grid diz que
   um filho posicionado em absoluto COM lugar definido na grade se
   posiciona dentro da propria celula, nao do conteiner: a carta revelada
   ficava presa a coluna de onde saiu, fora do centro. Devolver o lugar
   para `auto` faz o bloco de referencia voltar a ser o leque inteiro.
   As outras onze continuam fixas, entao nada reflui. */
@media (max-width:767px){
  .cd-leque button.cd-carta.cd-escolhida{grid-column:auto; grid-row:auto}
}
/* ==========================================================================
   TEMA APLICATIVO - escuro, colorido, so nesta pagina
   Escrito depois de tudo e prefixado com body.mnc-carta-dia para vencer o
   tema claro acima sem !important. Nenhuma outra pagina do site e tocada.
   ========================================================================== */

body.mnc-carta-dia{
  --ap-noite:#07081A; --ap-noite-2:#0E1030; --ap-poco:#05060F;
  --ap-violeta:#A98BFF; --ap-roxo:#7C5CF0; --ap-ciano:#43E0D8;
  --ap-rosa:#FF5F9E; --ap-ambar:#F2B544; --ap-brasa:#FF8A4C;
  --ap-tinta:#ECEBFA; --ap-tinta-2:rgba(236,235,250,.76);
  --ap-tinta-3:rgba(236,235,250,.54);
  --ap-vidro:rgba(255,255,255,.055); --ap-vidro-2:rgba(255,255,255,.085);
  --ap-borda:rgba(255,255,255,.11); --ap-borda-2:rgba(255,255,255,.18);
  --ap-acento:var(--ap-violeta);
  background-color:var(--ap-noite);
  background-image:
    radial-gradient(900px 620px at 12% -8%, rgba(124,92,240,.28), transparent 62%),
    radial-gradient(760px 540px at 92% 4%, rgba(67,224,216,.16), transparent 60%),
    radial-gradient(1000px 700px at 50% 112%, rgba(255,95,158,.14), transparent 64%);
  background-attachment:fixed;
  color:var(--ap-tinta);
}

/* O acento muda com a familia da carta revelada. */
body.mnc-carta-dia .cd-palco[data-familia="maiores"]{--ap-acento:var(--ap-violeta)}
body.mnc-carta-dia .cd-palco[data-familia="copas"]{--ap-acento:var(--ap-rosa)}
body.mnc-carta-dia .cd-palco[data-familia="ouros"]{--ap-acento:var(--ap-ambar)}
body.mnc-carta-dia .cd-palco[data-familia="espadas"]{--ap-acento:var(--ap-ciano)}
body.mnc-carta-dia .cd-palco[data-familia="paus"]{--ap-acento:var(--ap-brasa)}

/* O ceu: tres nebulosas que deslizam devagar, atras de tudo. Sao fixas
   para nao criar rolagem lateral e nao dependem de filter, que e caro. */
body.mnc-carta-dia .cd-ceu{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
body.mnc-carta-dia .cd-nebula{
  position:absolute; display:block; border-radius:50%;
  will-change:transform;
}
body.mnc-carta-dia .cd-n1{
  width:62vw; height:62vw; left:-14vw; top:-18vw;
  background:radial-gradient(circle,rgba(124,92,240,.30) 0,rgba(124,92,240,0) 68%);
  animation:cdDeriva1 34s ease-in-out infinite alternate;
}
body.mnc-carta-dia .cd-n2{
  width:48vw; height:48vw; right:-10vw; top:6vh;
  background:radial-gradient(circle,rgba(67,224,216,.20) 0,rgba(67,224,216,0) 68%);
  animation:cdDeriva2 42s ease-in-out infinite alternate;
}
body.mnc-carta-dia .cd-n3{
  width:70vw; height:70vw; left:14vw; bottom:-30vw;
  background:radial-gradient(circle,rgba(255,95,158,.17) 0,rgba(255,95,158,0) 66%);
  animation:cdDeriva3 50s ease-in-out infinite alternate;
}
@keyframes cdDeriva1{to{transform:translate3d(7vw,5vh,0) scale(1.14)}}
@keyframes cdDeriva2{to{transform:translate3d(-6vw,8vh,0) scale(1.1)}}
@keyframes cdDeriva3{to{transform:translate3d(5vw,-7vh,0) scale(1.16)}}

body.mnc-carta-dia .elementor{position:relative; z-index:1}
/* ---- Tipografia da pagina no escuro ---- */
body.mnc-carta-dia .elementor-widget-heading .elementor-heading-title{color:var(--ap-tinta)}
body.mnc-carta-dia h1.elementor-heading-title{
  color:var(--ap-tinta);
  background-image:linear-gradient(104deg,#FFF2D2 0,#C9B4FF 38%,#8EE9E4 72%,#FFC9DF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.01em;
}
body.mnc-carta-dia h2.elementor-heading-title{
  font-size:clamp(1.42rem,2.6vw,1.92rem); letter-spacing:-.005em;
}
body.mnc-carta-dia h2.elementor-heading-title::after{
  content:""; display:block; width:46px; height:2px; margin:13px 0 0; border-radius:2px;
  background:linear-gradient(90deg,var(--ap-violeta),rgba(169,139,255,0));
}
body.mnc-carta-dia h3.elementor-heading-title{color:#F3E7C9; font-size:1.06rem}
body.mnc-carta-dia .elementor-widget-text-editor{color:var(--ap-tinta-2); line-height:1.74}
body.mnc-carta-dia .elementor-widget-text-editor strong{color:var(--ap-tinta)}
body.mnc-carta-dia .elementor-widget-text-editor a{
  color:#9FE9E4; text-decoration-color:rgba(159,233,228,.45); text-underline-offset:3px;
}
body.mnc-carta-dia .elementor-widget-text-editor a:hover{color:#C9F5F2}

/* ---- A barra do alto: identidade, data e estado ---- */
body.mnc-carta-dia .cd-barra{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px 14px;
  margin:0 auto 22px; padding:9px 16px;
  width:fit-content; max-width:100%;
  border:1px solid var(--ap-borda); border-radius:999px;
  background:var(--ap-vidro);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  font-size:.78rem; letter-spacing:.085em; text-transform:uppercase;
  color:var(--ap-tinta-3);
}
body.mnc-carta-dia .cd-marca{display:inline-flex; align-items:center; gap:8px; color:var(--ap-tinta-2)}
body.mnc-carta-dia .cd-pulso{
  width:7px; height:7px; border-radius:50%; background:var(--ap-acento);
  box-shadow:0 0 0 0 var(--ap-acento);
  animation:cdPulso 2.6s ease-out infinite;
}
@keyframes cdPulso{
  0%{box-shadow:0 0 0 0 rgba(169,139,255,.55)}
  70%{box-shadow:0 0 0 9px rgba(169,139,255,0)}
  100%{box-shadow:0 0 0 0 rgba(169,139,255,0)}
}
body.mnc-carta-dia .cd-data{
  position:relative; padding:0 14px; color:var(--ap-tinta-3);
}
body.mnc-carta-dia .cd-data::before,
body.mnc-carta-dia .cd-data::after{
  content:""; position:absolute; top:50%; width:1px; height:12px; margin-top:-6px;
  background:var(--ap-borda-2);
}
body.mnc-carta-dia .cd-data::before{left:0}
body.mnc-carta-dia .cd-data::after{right:0}
body.mnc-carta-dia .cd-selo{
  padding:3px 11px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ap-acento) 42%, transparent);
  background:color-mix(in srgb, var(--ap-acento) 13%, transparent);
  color:var(--ap-acento); font-size:.72rem;
}

/* ---- O convite ---- */
body.mnc-carta-dia .cd-convite{
  max-width:26ch; color:var(--ap-tinta);
  font-size:clamp(1.3rem,2.7vw,1.82rem); font-weight:400; line-height:1.3;
}
body.mnc-carta-dia .cd-convite::after{
  width:64px; height:2px; border-radius:2px; opacity:1;
  background:linear-gradient(90deg,rgba(169,139,255,0),var(--ap-acento),rgba(169,139,255,0));
}
/* Valor simples antes do color-mix: navegador que nao entende a funcao
   fica com a versao em rgba em vez de ficar sem borda nenhuma. */
body.mnc-carta-dia .cd-selo{
  border-color:rgba(169,139,255,.42);
  background:rgba(169,139,255,.13);
  color:var(--ap-acento);
  border-color:color-mix(in srgb, var(--ap-acento) 42%, transparent);
  background:color-mix(in srgb, var(--ap-acento) 13%, transparent);
}

/* ---- As cartas no escuro ---- */
body.mnc-carta-dia .cd-face{
  border-radius:13px;
  box-shadow:
    0 18px 40px -20px rgba(0,0,0,.9),
    0 2px 10px -4px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 0 1px rgba(169,139,255,.16);
}
body.mnc-carta-dia .cd-frente{background:#0E0B26}

@media (hover:hover){
  body.mnc-carta-dia .cd-carta:hover .cd-face{
    box-shadow:
      0 26px 52px -22px rgba(0,0,0,.95),
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 0 0 1px rgba(169,139,255,.5),
      0 0 34px -4px rgba(124,92,240,.55);
  }
}
body.mnc-carta-dia .cd-carta:focus-visible{outline-color:var(--ap-violeta)}

/* A escolhida ganha o halo da familia dela. */
body.mnc-carta-dia .cd-escolhida .cd-face{
  box-shadow:
    0 34px 68px -26px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 0 1px color-mix(in srgb, var(--ap-acento) 62%, transparent),
    0 0 56px -6px color-mix(in srgb, var(--ap-acento) 60%, transparent);
}
body.mnc-carta-dia .cd-dorme{opacity:.2}
body.mnc-carta-dia .cd-dorme .cd-face{box-shadow:0 10px 24px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05)}

/* A aura por tras da carta escolhida acompanha o acento. */
body.mnc-carta-dia .cd-aura{
  background:radial-gradient(circle,
    color-mix(in srgb, var(--ap-acento) 34%, transparent) 0,
    color-mix(in srgb, var(--ap-acento) 10%, transparent) 44%,
    transparent 70%);
}
body.mnc-carta-dia .cd-faisca{
  background:radial-gradient(circle,#FFFFFF 0,var(--ap-acento) 52%,transparent 100%);
}
body.mnc-carta-dia .cd-brilho::before{
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 100%);
}

/* ---- O recado ---- */
body.mnc-carta-dia .cd-recado{
  border:1px solid var(--ap-borda); border-radius:12px;
  background:var(--ap-vidro); color:var(--ap-tinta-2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.mnc-carta-dia .cd-espera{
  border-color:rgba(255,255,255,.18); border-top-color:var(--ap-acento);
}
/* ---- A leitura: folha de vidro escuro ---- */
body.mnc-carta-dia .cd-leitura{
  position:relative; overflow:hidden;
  max-width:720px; margin-top:40px; padding:34px 34px 28px;
  border:1px solid var(--ap-borda); border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075) 0, rgba(255,255,255,.028) 160px, rgba(255,255,255,.028) 100%),
    rgba(10,11,30,.72);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset;
}
/* Fio de luz no topo da folha, na cor da familia. */
body.mnc-carta-dia .cd-leitura::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,
    transparent 0,
    color-mix(in srgb, var(--ap-acento) 85%, transparent) 28%,
    color-mix(in srgb, var(--ap-acento) 85%, transparent) 72%,
    transparent 100%);
}
body.mnc-carta-dia .cd-leitura::after{
  content:""; position:absolute; left:50%; top:-120px;
  width:380px; height:240px; margin-left:-190px; pointer-events:none;
  background:radial-gradient(ellipse,
    color-mix(in srgb, var(--ap-acento) 22%, transparent) 0, transparent 70%);
}

/* Etiquetas */
body.mnc-carta-dia .cd-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 15px;
}
body.mnc-carta-dia .cd-chip{
  display:inline-block; padding:5px 12px; border-radius:999px;
  border:1px solid var(--ap-borda); background:var(--ap-vidro);
  color:var(--ap-tinta-2);
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
}
body.mnc-carta-dia .cd-chip:empty{display:none}
body.mnc-carta-dia .cd-chip-forte{
  border-color:rgba(169,139,255,.45); background:rgba(169,139,255,.14); color:var(--ap-acento);
  border-color:color-mix(in srgb, var(--ap-acento) 45%, transparent);
  background:color-mix(in srgb, var(--ap-acento) 14%, transparent);
}

body.mnc-carta-dia .cd-nome{
  margin:0 0 18px; color:var(--ap-tinta);
  font-size:clamp(1.9rem,4vw,2.5rem); line-height:1.1; letter-spacing:-.015em;
}
body.mnc-carta-dia .cd-resumo{
  margin:0 0 26px; padding:0 0 0 18px;
  border-left:2px solid color-mix(in srgb, var(--ap-acento) 70%, transparent);
  color:var(--ap-tinta); font-size:1.16rem; line-height:1.6;
}
body.mnc-carta-dia .cd-resumo p{color:var(--ap-tinta)}

body.mnc-carta-dia .cd-bloco{margin:0 0 24px}
body.mnc-carta-dia .cd-bloco h3{
  display:flex; align-items:center; gap:9px;
  margin:0 0 10px; color:var(--ap-tinta-3);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
body.mnc-carta-dia .cd-bloco h3::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--ap-acento); flex:0 0 auto;
}
body.mnc-carta-dia .cd-bloco p{color:var(--ap-tinta-2); font-size:1.02rem; line-height:1.72}
body.mnc-carta-dia .cd-bloco strong{color:var(--ap-tinta)}

body.mnc-carta-dia .cd-mensagem{
  padding:22px 24px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--ap-acento) 28%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ap-acento) 11%, transparent) 0, rgba(255,255,255,.02) 100%),
    rgba(255,255,255,.015);
}
body.mnc-carta-dia .cd-mensagem h3{color:var(--ap-acento)}
body.mnc-carta-dia .cd-mensagem p{color:var(--ap-tinta)}

body.mnc-carta-dia .cd-rodape{
  border-top:1px solid var(--ap-borda); padding-top:20px; align-items:center;
}
body.mnc-carta-dia .cd-rodape a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--ap-borda-2); background:var(--ap-vidro-2);
  color:var(--ap-tinta); font-weight:500; font-size:.95rem; text-decoration:none;
  transition:border-color 220ms ease, background 220ms ease, transform 220ms ease;
}
body.mnc-carta-dia .cd-rodape a::after{content:"\2192"; opacity:.6}
body.mnc-carta-dia .cd-rodape a:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--ap-acento) 60%, transparent);
  background:color-mix(in srgb, var(--ap-acento) 12%, transparent);
}
body.mnc-carta-dia .cd-volta{color:var(--ap-tinta-3); font-size:.86rem}
/* ---- A mesa como superficie de aplicativo ---- */
@media (min-width:768px){
  body.mnc-carta-dia .cd-palco{
    padding:30px 28px 36px; border-radius:26px;
    border:1px solid var(--ap-borda);
    background:linear-gradient(180deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.012) 100%);
    box-shadow:0 50px 120px -60px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset;
  }
}
@media (max-width:767px){
  body.mnc-carta-dia .cd-palco{
    padding:18px 14px 22px; border-radius:20px;
    border:1px solid var(--ap-borda);
    background:linear-gradient(180deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.012) 100%);
  }
  body.mnc-carta-dia .cd-barra{
    gap:6px 10px; padding:8px 13px; font-size:.68rem; letter-spacing:.07em;
  }
  body.mnc-carta-dia .cd-data{padding:0 10px}
  body.mnc-carta-dia .cd-selo{font-size:.66rem; padding:3px 9px}
  body.mnc-carta-dia .cd-leitura{
    margin-top:28px; padding:24px 20px 20px; border-radius:16px;
  }
  body.mnc-carta-dia .cd-nome{font-size:1.72rem; margin-bottom:14px}
  body.mnc-carta-dia .cd-resumo{font-size:1.06rem; padding-left:14px}
  body.mnc-carta-dia .cd-mensagem{padding:18px 17px}
  body.mnc-carta-dia .cd-rodape a{width:100%; justify-content:center}
}

/* Quem pediu menos movimento nao recebe nebulosa deslizando nem pulso. */
@media (prefers-reduced-motion:reduce){
  body.mnc-carta-dia .cd-nebula,
  body.mnc-carta-dia .cd-pulso{animation:none}
}

/* Em telas muito largas a leitura nao deve virar uma linha infinita. */
@media (min-width:1200px){
  body.mnc-carta-dia .cd-leitura{padding:40px 44px 32px}
}
/* ---- Cabecalho e rodape no tema escuro, SO nesta pagina ----
   O emblema da marca e feito de tracos em #B08A4A sobre fundo vazio, e
   dourado sobre escuro da 6,2:1 - por isso ele nao precisa de filtro
   nenhum. A palavra "Cabala" tem cor propria e continua dourada. */
body.mnc-carta-dia header.elementor-location-header{
  background:rgba(8,9,26,.76);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.mnc-carta-dia header.elementor-location-header .e-con{background-color:transparent}
body.mnc-carta-dia header .elementor-nav-menu a,
body.mnc-carta-dia header .elementor-nav-menu .sub-arrow{color:var(--ap-tinta-2)}
body.mnc-carta-dia header .elementor-nav-menu a:hover,
body.mnc-carta-dia header .elementor-nav-menu a:focus{color:var(--ap-tinta)}
body.mnc-carta-dia header .elementor-nav-menu .current-menu-item > a,
body.mnc-carta-dia header .elementor-nav-menu .current-menu-ancestor > a{color:#F3E7C9}

/* Painel suspenso do menu */
body.mnc-carta-dia header ul.sub-menu{
  background:rgba(12,13,34,.96);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
}
body.mnc-carta-dia header ul.sub-menu a{color:var(--ap-tinta-2)}
body.mnc-carta-dia header ul.sub-menu a:hover{color:var(--ap-tinta); background:rgba(255,255,255,.06)}

/* Menu do celular */
body.mnc-carta-dia header nav.elementor-nav-menu--dropdown{
  background:rgba(10,11,30,.98);
  border:1px solid rgba(255,255,255,.1);
}
body.mnc-carta-dia header .elementor-menu-toggle{color:var(--ap-tinta)}

/* Campo de busca */
body.mnc-carta-dia header input[type="search"],
body.mnc-carta-dia header input[type="text"]{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:var(--ap-tinta);
}
body.mnc-carta-dia header input::placeholder{color:rgba(236,235,250,.45)}
body.mnc-carta-dia header input[type="search"]:focus,
body.mnc-carta-dia header input[type="text"]:focus{
  border-color:rgba(169,139,255,.6); background:rgba(255,255,255,.09);
}

/* Rodape */
body.mnc-carta-dia footer.elementor-location-footer{
  background:rgba(5,6,18,.9);
  border-top:1px solid rgba(255,255,255,.07);
}
body.mnc-carta-dia footer.elementor-location-footer .e-con{background-color:transparent}
/* O aviso de cookies e modulo do proprio site (#mnc-cookies). Aqui ele so
   troca de roupa: nenhum texto, botao ou comportamento muda. */
body.mnc-carta-dia #mnc-cookies{
  background:rgba(12,13,34,.96);
  border:1px solid rgba(255,255,255,.12);
  color:var(--ap-tinta-2);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
body.mnc-carta-dia #mnc-cookies a{color:#9FE9E4}
body.mnc-carta-dia #mnc-cookies button{
  background:var(--ap-roxo); border-color:var(--ap-roxo); color:#fff;
}
body.mnc-carta-dia #mnc-cookies button:hover{background:#8E6FF5; border-color:#8E6FF5}
/* ---- A frente da carta ----
   A arte vem de mnc_tc_arte(), que e compartilhada com as 78 paginas de
   carta e por isso nao se toca. O que da para fazer aqui e vesti-la: uma
   moldura interna na cor da familia, um verniz de cima para baixo e um
   leve escurecimento nas bordas. Tudo por cima, nada dentro do SVG. */
body.mnc-carta-dia .cd-frente{
  background:#0E0B26;
  box-shadow:
    0 34px 68px -26px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 0 0 1px color-mix(in srgb, var(--ap-acento) 62%, transparent),
    0 0 56px -6px color-mix(in srgb, var(--ap-acento) 60%, transparent);
}
body.mnc-carta-dia .cd-frente::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:13px;
  background:
    linear-gradient(168deg, rgba(255,255,255,.13) 0, rgba(255,255,255,.03) 26%, rgba(255,255,255,0) 52%),
    radial-gradient(130% 94% at 50% 0%, rgba(255,255,255,0) 58%, rgba(0,0,0,.42) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
body.mnc-carta-dia .cd-frente svg{
  position:relative; z-index:1;
}

/* A carta revelada respira devagar. Serve de sinal de que ela esta viva,
   e e so transform, entao nao custa pintura. */
body.mnc-carta-dia .cd-palco[data-estado="revelada"] .cd-escolhida .cd-lupa{
  animation:cdFlutua 7s ease-in-out infinite;
}
@keyframes cdFlutua{
  0%,100%{transform:translateY(-16px) scale(1.34)}
  50%{transform:translateY(-24px) scale(1.345)}
}
@media (max-width:767px){
  body.mnc-carta-dia .cd-palco[data-estado="revelada"] .cd-escolhida .cd-lupa{
    animation-name:cdFlutuaCel;
  }
  @keyframes cdFlutuaCel{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-7px) scale(1.005)}
  }
}
@media (prefers-reduced-motion:reduce){
  body.mnc-carta-dia .cd-palco[data-estado="revelada"] .cd-escolhida .cd-lupa{animation:none}
}