/* Identidade Maria Giullia (brandbook) · modo noite como assinatura.
   Carregado depois de styles.css e report.css: só troca o visual. */
:root {
  --mg-vinho: #482123;
  --mg-vinho-fundo: #2e1214;
  --mg-pink: #ff66c4;
  --mg-pink-profundo: #e04ea9;
  --mg-azul: #5aa1ce;
  --mg-creme: #f2f0ef;
  --mg-petroleo: #3c6c8b;
  --mg-ink-2: rgba(242, 240, 239, 0.8);
  --mg-ink-3: rgba(242, 240, 239, 0.62);
  --mg-linha: rgba(242, 240, 239, 0.14);
  --mg-card: rgba(255, 255, 255, 0.045);
  --mg-card-forte: rgba(255, 255, 255, 0.08);
  --mg-sombra-pink: 0 14px 34px rgba(255, 102, 196, 0.3);
  --mg-cetim: cubic-bezier(0.22, 1, 0.36, 1);
  --font-core: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-support: "Work Sans", "DM Sans", Arial, sans-serif;
  --script: "Cindel Script", "Alex Brush", cursive;

  /* tokens antigos apontando para a marca */
  --off: var(--mg-creme);
  --rosa: var(--mg-pink);
  --rosa-escuro: var(--mg-pink);
  --vinho: var(--mg-vinho);
  --azul: var(--mg-azul);
  --ceu: var(--mg-azul);
  --suave: var(--mg-ink-3);
  --linha: var(--mg-linha);
  --raio: 22px;
}

html { background: var(--mg-vinho-fundo); }
body {
  background: radial-gradient(ellipse 90% 70% at 58% 32%, #5f2a30 0%, #482123 52%, #331417 100%) fixed;
  color: var(--mg-creme);
  font-family: var(--font-core);
}
/* cetim: dobras suaves por cima do fundo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(118deg, transparent 12%, rgba(255, 222, 238, 0.045) 22%, transparent 34%, transparent 58%, rgba(255, 222, 238, 0.035) 68%, transparent 80%);
}

/* elementos antigos saem; o fundo agora é da marca */
.fita, .estrela { display: none !important; }
.fundo-marca { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fundo-marca__estrela { position: absolute; top: 4%; right: -2%; width: min(260px, 60vw); animation: mg-cadente 9s var(--mg-cetim) infinite; opacity: 0; }
.fundo-marca__poeira { position: absolute; inset: 0; }
.fundo-marca__fita { position: absolute; left: -10%; bottom: -1%; width: 120%; height: 140px; opacity: 0.85; }
body.em-pergunta .fundo-marca__fita { opacity: 0.35; }

/* poeira estelar: a faísca é o único momento de energia */
.poeira svg { position: absolute; animation: mg-faisca 3.2s ease-out infinite; opacity: 0; }
@keyframes mg-faisca {
  0%, 70%, 100% { opacity: 0; transform: scale(0.6); }
  76% { opacity: 1; transform: scale(1.15); }
  84% { opacity: 0.4; transform: scale(0.9); }
}
@keyframes mg-cadente {
  0% { opacity: 0; transform: translate(40px, -20px); }
  8% { opacity: 1; }
  22% { opacity: 0; transform: translate(-120px, 50px); }
  100% { opacity: 0; transform: translate(-120px, 50px); }
}

/* fita que se desenrola */
.fita-cetim__traco { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: mg-desenrola 1.6s var(--mg-cetim) 0.2s forwards; }
.fita-cetim__estrela { opacity: 0; animation: mg-aparece 0.25s ease-out 1.6s forwards; }
@keyframes mg-desenrola { to { stroke-dashoffset: 0; } }
@keyframes mg-aparece { to { opacity: 1; } }

/* o selo pousa com peso: desce, achata a 0,94, volta, e o pingo escorre */
.selo { display: block; overflow: visible; }
.selo--pousa .selo__corpo { transform-box: fill-box; transform-origin: 50% 100%; animation: mg-pouso 0.95s var(--mg-cetim) both; }
.selo--pousa .selo__pingo { transform-box: fill-box; transform-origin: 50% 0; animation: mg-pingo 0.7s var(--mg-cetim) 0.95s both; }
@keyframes mg-pouso {
  0% { opacity: 0; transform: translateY(-28px); }
  55% { opacity: 1; transform: translateY(0) scaleY(0.94); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes mg-pingo { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ---------- Tipografia: DM Sans clara + palavra-chave cursiva pink ---------- */
.titulo, .pergunta, .secao__titulo, .cartao h2 { color: var(--mg-creme); font-weight: 300; letter-spacing: -0.02em; }
.script { font-family: var(--script); color: var(--mg-pink); font-weight: 400; letter-spacing: 0; }
.titulo .script { font-size: 1.5em; }
.rotulo, .legenda, .grupo-titulo, .quadro h3, .post-pronto__rotulo {
  font-family: var(--font-support);
  letter-spacing: 0.18em;
}
.rotulo { color: var(--mg-azul); font-weight: 500; }
.subtitulo, .apoio { color: var(--mg-ink-2); font-family: var(--font-support); font-weight: 300; }
.assinatura { font-family: var(--script); color: var(--mg-pink); }
.marca-selo-topo { margin: 0 0 18px; }

/* ---------- Campos e botões ---------- */
.campo {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--mg-linha);
  color: var(--mg-creme);
  border-radius: 16px;
}
.campo::placeholder { color: rgba(242, 240, 239, 0.45); }
.campo:focus { border-color: var(--mg-pink); box-shadow: 0 0 0 4px rgba(255, 102, 196, 0.2); }
.campo-arroba::before { color: var(--mg-pink); }

.botao {
  background: var(--mg-pink);
  color: var(--mg-vinho);
  font-weight: 500;
  box-shadow: var(--mg-sombra-pink);
  transition: transform 0.22s var(--mg-cetim), box-shadow 0.22s var(--mg-cetim), background 0.22s;
}
.botao:hover { background: #ff7fce; box-shadow: 0 18px 40px rgba(255, 102, 196, 0.38); }
.botao--linha { background: transparent; color: var(--mg-creme); border: 1px solid rgba(242, 240, 239, 0.28); box-shadow: none; }
.botao--linha:hover { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.botao--rosa { background: var(--mg-pink); color: var(--mg-vinho); }
.link { color: var(--mg-ink-3); }
.erro { color: #ffb8dc; }

/* ---------- Quiz ---------- */
.opcao {
  background: var(--mg-card);
  border: 1px solid var(--mg-linha);
  color: var(--mg-creme);
  transition: border-color 0.22s var(--mg-cetim), background 0.22s var(--mg-cetim), transform 0.22s var(--mg-cetim);
}
.opcao:hover { border-color: var(--mg-pink); background: var(--mg-card-forte); }
.opcao--marcada { background: var(--mg-pink); border-color: var(--mg-pink); color: var(--mg-vinho); }
.opcao__desc { color: var(--mg-ink-3); }
.opcao--marcada .opcao__desc { color: var(--mg-vinho); }
.opcao--outro { color: var(--mg-ink-3); border-style: dashed; }
.grupo-titulo { color: var(--mg-pink); }
.legenda { color: var(--mg-ink-3); }
.cartao-escolha { background: rgba(20, 6, 8, 0.32); border: 1px solid rgba(255, 102, 196, 0.35); }
.cartao-escolha .legenda { color: var(--mg-azul); }
.perfil-card { background: rgba(20, 6, 8, 0.32); border: 1px solid var(--mg-linha); }
.perfil-card img, .avatar-vazio { border-color: var(--mg-pink); }
.aceite { color: var(--mg-ink-2); }
.aceite a { color: var(--mg-pink); }
.fase { background: var(--mg-card); border: 1px solid var(--mg-linha); }
.fase b { background: rgba(255, 102, 196, 0.16); color: var(--mg-pink); }
.fase span { color: var(--mg-ink-3); }
.pulso { background: var(--mg-pink); box-shadow: 0 0 40px rgba(255, 102, 196, 0.55); }
.entrar { animation: mg-entrar 0.7s var(--mg-cetim) both; }
@keyframes mg-entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Relatório ---------- */
.cartao {
  background: var(--mg-card);
  border: 1px solid var(--mg-linha);
  color: var(--mg-creme);
  box-shadow: none;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.cartao--vinho { background: rgba(20, 6, 8, 0.38); border-color: rgba(255, 102, 196, 0.28); }
.suave, .cartao--vinho .suave { color: var(--mg-ink-3); }
.barra, .cartao--vinho .barra { background: rgba(242, 240, 239, 0.14); }
.barra--vinho > i { background: rgba(242, 240, 239, 0.6); }
.barra > i { box-shadow: 0 0 12px rgba(255, 102, 196, 0.45); }
.barra--azul > i { background: var(--mg-azul); box-shadow: 0 0 12px rgba(90, 161, 206, 0.45); }
.numeros span { color: var(--mg-ink-3); }
.fase-rel { border-top-color: var(--mg-linha); }

.quadro { border: 1px solid transparent; }
.quadro--rosa { background: rgba(255, 102, 196, 0.11); border-color: rgba(255, 102, 196, 0.3); }
.quadro--rosa h3 { color: var(--mg-pink); }
.quadro--salvia { background: rgba(90, 161, 206, 0.12); border-color: rgba(90, 161, 206, 0.3); }
.quadro--salvia h3 { color: var(--mg-azul); }
.quadro--nevoa { background: rgba(90, 161, 206, 0.08); border-color: rgba(90, 161, 206, 0.22); }
.quadro--nevoa h3 { color: var(--mg-azul); }
.quadro--off { background: rgba(242, 240, 239, 0.05); border-color: var(--mg-linha); }
.quadro--off h3 { color: var(--mg-ink-3); }
.quadro--vinho { background: rgba(20, 6, 8, 0.45); border-color: rgba(255, 102, 196, 0.35); }
.quadro--vinho h3 { color: var(--mg-pink); }

.bio-nova { background: rgba(242, 240, 239, 0.06); border-color: var(--mg-pink); color: var(--mg-creme); }
.leva-a, .rotulo-inline { color: var(--mg-pink); }
.pos-linha { border-top-color: var(--mg-linha); }
.pos-promessa { box-shadow: var(--mg-sombra-pink); }
.arquetipo-nome small { color: var(--mg-ink-3); }
.semana { border-top-color: rgba(255, 102, 196, 0.3); }
.semana__nome { color: var(--mg-creme); font-weight: 300; }
.tarefa { background: rgba(255, 255, 255, 0.035); border-color: var(--mg-linha); transition: background 0.42s var(--mg-cetim), border-color 0.42s var(--mg-cetim); }
.tarefa--feita { background: rgba(255, 102, 196, 0.1); border-color: rgba(255, 102, 196, 0.35); }
.tarefa--feita .tarefa__titulo span { text-decoration-color: rgba(255, 102, 196, 0.7); }
.foto-grande { border-color: var(--mg-pink); box-shadow: 0 0 0 6px rgba(255, 102, 196, 0.12), 0 0 40px rgba(255, 102, 196, 0.25); }
.rel__topo .selo { margin: 0 auto 10px; }

/* ---------- CTA: a assinatura da marca ---------- */
.convite {
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(255, 102, 196, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 58% 40%, #5f2a30 0%, #3a181b 55%, #210c0e 100%);
  color: var(--mg-creme);
  border-top: 1px solid rgba(255, 102, 196, 0.35);
  padding: 72px 22px 80px;
  text-align: center;
}
.convite::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 12%, rgba(255, 222, 238, 0.06) 24%, transparent 36%, transparent 60%, rgba(255, 222, 238, 0.05) 70%, transparent 82%);
}
.convite .poeira { position: absolute; inset: 0; z-index: 0; }
.convite__fita { position: absolute; left: -8%; top: 22px; width: 116%; height: 110px; z-index: 0; opacity: 0.9; }
.convite__cadente { position: absolute; right: -4%; top: 30%; width: 220px; z-index: 0; opacity: 0; }
.convite.visivel .convite__cadente { animation: mg-cadente 6s var(--mg-cetim) 1.2s infinite; }
.convite:not(.visivel) .fita-cetim__traco, .convite:not(.visivel) .fita-cetim__estrela { animation-play-state: paused; }
.convite:not(.visivel) .selo__corpo, .convite:not(.visivel) .selo__pingo { animation-play-state: paused; }
.convite__selo { margin: 26px auto 8px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35)); }
.convite__selo .selo, .rel__topo .selo { margin: 0 auto; }
.convite__fundo { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.convite__dentro { text-align: center; }
.convite h2 { color: var(--mg-creme); font-weight: 300; }
.convite .numero {
  font-weight: 500;
  color: var(--mg-pink);
  text-shadow: 0 0 24px rgba(255, 102, 196, 0.55);
  font-variant-numeric: tabular-nums;
}
.convite p { color: var(--mg-ink-2); }
.convite .script { color: var(--mg-pink); font-size: 1.9em; line-height: 0.7; }
.convite .gap {
  color: var(--mg-creme);
  font-size: 20px;
  background: rgba(20, 6, 8, 0.4);
  border: 1px solid rgba(255, 102, 196, 0.35);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 10px auto 30px;
  max-width: 480px;
}
.convite .gap-rotulo { color: var(--mg-azul) !important; font-family: var(--font-support); }
.convite .chamada { color: var(--mg-creme); }
.convite [data-revelar] { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--mg-cetim), transform 0.9s var(--mg-cetim); }
.convite.visivel [data-revelar] { opacity: 1; transform: none; }
.convite.visivel [data-revelar="2"] { transition-delay: 0.25s; }
.convite.visivel [data-revelar="3"] { transition-delay: 0.5s; }
.convite.visivel [data-revelar="4"] { transition-delay: 0.75s; }
.convite.visivel [data-revelar="5"] { transition-delay: 1s; }

.botao-gigante {
  position: relative;
  overflow: hidden;
  background: var(--mg-pink);
  color: var(--mg-vinho);
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(255, 102, 196, 0.42), 0 0 0 0 rgba(255, 102, 196, 0.5);
  animation: mg-halo 2.8s var(--mg-cetim) infinite;
  transition: transform 0.3s var(--mg-cetim), box-shadow 0.3s var(--mg-cetim);
}
/* brilho de cetim atravessando o botão */
.botao-gigante::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: mg-brilho 3.6s var(--mg-cetim) 1.4s infinite;
}
.botao-gigante:hover { transform: translateY(-2px); box-shadow: 0 24px 54px rgba(255, 102, 196, 0.5); }
@keyframes mg-brilho { 0% { left: -60%; } 45%, 100% { left: 130%; } }
@keyframes mg-halo {
  0% { box-shadow: 0 18px 44px rgba(255, 102, 196, 0.42), 0 0 0 0 rgba(255, 102, 196, 0.45); }
  70% { box-shadow: 0 18px 44px rgba(255, 102, 196, 0.42), 0 0 0 16px rgba(255, 102, 196, 0); }
  100% { box-shadow: 0 18px 44px rgba(255, 102, 196, 0.42), 0 0 0 0 rgba(255, 102, 196, 0); }
}
.confirmacao { background: rgba(20, 6, 8, 0.45); border: 1px solid rgba(255, 102, 196, 0.45); color: var(--mg-creme); animation: mg-entrar 0.9s var(--mg-cetim) both; }
.confirmacao strong { color: var(--mg-pink); }
.convite .assinatura { color: var(--mg-pink); font-size: 40px; }

/* ---------- Movimento reduzido: tudo no quadro final ---------- */
@media (prefers-reduced-motion: reduce) {
  .fita-cetim__traco { stroke-dashoffset: 0; }
  .fita-cetim__estrela, .convite [data-revelar] { opacity: 1 !important; transform: none !important; }
  .poeira svg { opacity: 0.6; }
}

/* ---------- Painel das administradoras: modo dia ---------- */
body.modo-dia { background: var(--mg-creme); color: var(--mg-vinho); }
body.modo-dia::before { display: none; }
body.modo-dia .titulo, body.modo-dia .pergunta, body.modo-dia .cartao h2 { color: var(--mg-vinho); }
body.modo-dia .script { color: var(--mg-pink-profundo); }
body.modo-dia .rotulo { color: var(--mg-petroleo); }
body.modo-dia .apoio, body.modo-dia .suave { color: #7a4a4c; }
body.modo-dia .cartao { background: #fff; border-color: rgba(72, 33, 35, 0.12); color: var(--mg-vinho); backdrop-filter: none; }
body.modo-dia .campo { background: #fff; color: var(--mg-vinho); border-color: rgba(72, 33, 35, 0.2); }
body.modo-dia .campo::placeholder { color: rgba(72, 33, 35, 0.45); }
body.modo-dia .botao--linha { color: var(--mg-vinho); border-color: rgba(72, 33, 35, 0.2); }
body.modo-dia .link { color: #7a4a4c; }
body.modo-dia .erro { color: #b3261e; }

/* ---------- PDF: modo dia, para imprimir ---------- */
@media print {
  html, body { background: #fff !important; color: var(--mg-vinho) !important; }
  body::before, .fundo-marca { display: none !important; }
  .cartao, .tarefa, .quadro, .bio-nova { background: #fff !important; border-color: rgba(72, 33, 35, 0.18) !important; color: var(--mg-vinho) !important; backdrop-filter: none !important; }
  .titulo, .pergunta, .cartao h2, .semana__nome, .tarefa__titulo, .suave, p, li { color: var(--mg-vinho) !important; }
  .script { color: var(--mg-pink-profundo) !important; }
  .rotulo { color: var(--mg-petroleo) !important; }
  .post-pronto__rotulo, .leva-a { color: var(--mg-pink-profundo) !important; }
}

/* ---------- Leitura 360° e cruzamento ---------- */
.cruzamento { padding: 16px 0; border-top: 1px solid var(--mg-linha); }
.cruzamento:first-of-type { border-top: 0; padding-top: 4px; }
.cruzamento p { margin: 0 0 10px; }
.cruzamento .legenda { margin: 0 0 4px; }
.cruzamento__disse { font-size: 17px; font-style: italic; }
.cruzamento__disse .legenda { color: var(--rosa); font-style: normal; }
.cruzamento__leitura { padding-left: 12px; border-left: 2px solid var(--mg-azul); }