/* Cartas da Semana — componentes (CSS puro, prefixo cs-). Cores, espaços e raios vêm de tokens.css. */
:root {
  --ouro-grad: linear-gradient(135deg, var(--ouro-velho) 0%, var(--ouro-claro) 32%, var(--ouro) 52%, var(--ouro-claro) 78%, var(--ouro-velho) 100%);
  --estrelas: radial-gradient(1.2px 1.2px at 22px 34px, rgba(245, 233, 208, .9), transparent 60%),
              radial-gradient(1px 1px at 118px 82px, rgba(245, 233, 208, .6), transparent 60%),
              radial-gradient(1.6px 1.6px at 170px 150px, rgba(243, 217, 139, .85), transparent 60%),
              radial-gradient(1px 1px at 60px 170px, rgba(183, 155, 224, .8), transparent 60%),
              radial-gradient(1.3px 1.3px at 196px 22px, rgba(245, 233, 208, .7), transparent 60%),
              radial-gradient(.9px .9px at 90px 120px, rgba(245, 233, 208, .5), transparent 60%);
  --estrelas-tam: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px;
}
[data-theme="light"] {
  --estrelas: radial-gradient(1.4px 1.4px at 22px 34px, rgba(168, 124, 36, .45), transparent 60%),
              radial-gradient(1.2px 1.2px at 170px 150px, rgba(107, 47, 168, .3), transparent 60%),
              radial-gradient(1.2px 1.2px at 118px 82px, rgba(168, 124, 36, .35), transparent 60%);
  --estrelas-tam: 220px 220px, 220px 220px, 220px 220px;
}
.cs-tela, .cs-tela *, .cs-peca, .cs-peca * { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--font-texto); -webkit-font-smoothing: antialiased; }

/* ---------- o céu: fundo de tela e de peça ---------- */
.cs-ceu {
  background-color: var(--noite);
  background-image: var(--estrelas),
    radial-gradient(120% 55% at 50% -5%, var(--violeta) 0%, var(--roxo-real) 32%, var(--ametista) 58%, var(--noite) 100%);
  background-size: var(--estrelas-tam), 100% 100%;
}
[data-theme="light"] .cs-ceu {
  background-color: var(--fundo);
  background-image: var(--estrelas), radial-gradient(110% 50% at 50% -5%, #E4D2F5 0%, #F1E6F0 40%, var(--fundo) 100%);
  background-size: var(--estrelas-tam), 100% 100%;
}

/* ---------- tipografia utilitária ---------- */
.cs-ornamento-fonte { font-family: var(--font-ornamento); font-weight: 700; }
.cs-gravura { font-family: var(--font-gravura); text-transform: uppercase; letter-spacing: .08em; }
.cs-dourado { background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .cs-dourado { background: none; color: var(--roxo-real); }
.cs-sobre { font-family: var(--font-gravura); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-texto); margin: 0; }
.cs-pergunta { font-family: var(--font-texto); font-size: 34px; line-height: 40px; font-weight: 500; color: var(--tinta); margin: 0; }
.cs-pergunta em { font-style: italic; color: var(--ouro-texto); }
.cs-corpo { font-size: 20px; line-height: 30px; font-weight: 500; color: var(--tinta); margin: 0; }
.cs-corpo b { color: var(--ouro-texto); font-weight: 700; }
.cs-suave { color: var(--tinta-suave); }
.cs-legenda { font-size: 16px; line-height: 22px; font-style: italic; font-weight: 500; color: var(--tinta-suave); }
.cs-fala { font-size: 24px; line-height: 32px; font-style: italic; font-weight: 500; color: var(--tinta); margin: 0; }

/* ---------- divisória com estrela ---------- */
.cs-divisa { display: flex; align-items: center; gap: 10px; color: var(--ouro); }
.cs-divisa::before, .cs-divisa::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro)); }
.cs-divisa::after { background: linear-gradient(90deg, var(--ouro), transparent); }
.cs-divisa svg { flex: none; }
[data-theme="light"] .cs-divisa { color: var(--ouro-velho); }

/* ---------- tela de celular ---------- */
.cs-tela { width: 360px; min-height: 740px; color: var(--tinta); display: flex; flex-direction: column; padding: 20px 24px 28px; position: relative; overflow: hidden; }
.cs-tela-moldura { border-radius: 30px; border: 1px solid var(--linha); box-shadow: inset 0 0 0 6px rgba(14, 6, 24, .0); }
.cs-tela-corpo { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.cs-tela-rodape { margin-top: 24px; }
.cs-grade-telas { display: grid; grid-template-columns: repeat(4, 360px); gap: 32px; padding: 32px; }

/* ---------- barra de progresso ---------- */
.cs-progresso { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; min-height: 32px; }
.cs-progresso-trilho { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--progresso-trilho); overflow: hidden; }
.cs-progresso-valor { height: 100%; border-radius: var(--radius-pill); background: var(--ouro-grad); box-shadow: 0 0 10px rgba(212, 175, 55, .6); }
.cs-progresso-texto { font-family: var(--font-gravura); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--ouro-texto); white-space: nowrap; }
.cs-voltar { width: 32px; height: 32px; border: 0; background: none; color: var(--tinta-suave); padding: 0; display: grid; place-items: center; cursor: pointer; }

/* ---------- botões ---------- */
.cs-botao { appearance: none; width: 100%; min-height: 58px; border: 0; border-radius: var(--radius-md); background: var(--ouro-grad); color: var(--acao-tinta);
  font-family: var(--font-gravura); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: var(--brilho-ouro), inset 0 1px 0 rgba(255, 255, 255, .5); cursor: pointer; padding: 0 20px; }
[data-theme="light"] .cs-botao { background: var(--acao); box-shadow: var(--brilho-ouro), inset 0 0 0 1.5px var(--ouro); }
.cs-botao:active, .cs-botao.is-pressionado { filter: brightness(1.08); }
.cs-botao:focus-visible, .cs-opcao:focus-visible, .cs-campo input:focus-visible, .cs-horario:focus-visible, .cs-botao-secundario:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cs-botao-secundario { appearance: none; border: 1px solid var(--ouro); background: transparent; color: var(--ouro-texto); border-radius: var(--radius-md);
  font-family: var(--font-gravura); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; padding: 0 16px; cursor: pointer; }
[data-theme="light"] .cs-botao-secundario { border-color: var(--ouro-velho); }

/* opção de escolha única do quiz */
.cs-opcao { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 14px 18px; text-align: left;
  border: 1px solid var(--borda-controle); border-radius: var(--radius-md); background: var(--fundo-cartao); color: var(--tinta);
  font-family: var(--font-texto); font-size: 22px; line-height: 28px; font-weight: 600; cursor: pointer; }
.cs-opcao-marca { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ouro); display: grid; place-items: center; }
.cs-opcao.is-escolhida { background: var(--ouro-grad); border-color: transparent; color: var(--acao-tinta); box-shadow: var(--brilho-ouro); }
[data-theme="light"] .cs-opcao.is-escolhida { background: var(--acao); box-shadow: inset 0 0 0 1.5px var(--ouro); }
.cs-opcao.is-escolhida .cs-opcao-marca { border-color: var(--acao-tinta); }
.cs-opcao.is-escolhida .cs-opcao-marca::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acao-tinta); }
.cs-opcao-pequena { min-height: 48px; font-size: 19px; padding: 10px 14px; gap: 10px; }
.cs-opcoes-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- campos ---------- */
.cs-campo { display: flex; flex-direction: column; gap: 6px; }
.cs-campo label { font-family: var(--font-gravura); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-texto); }
.cs-campo input { width: 100%; min-height: 58px; border: 1px solid var(--borda-controle); border-radius: var(--radius-md); background: var(--fundo-cartao);
  color: var(--tinta); font-family: var(--font-texto); font-size: 24px; font-weight: 600; padding: 0 16px; }
.cs-campo input::placeholder { color: var(--tinta-suave); font-weight: 500; font-style: italic; }
.cs-campo-ajuda { font-size: 16px; line-height: 22px; font-style: italic; color: var(--tinta-suave); }
.cs-data { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; }
.cs-data input { text-align: center; font-family: var(--font-gravura); font-size: 22px; letter-spacing: .06em; }
.cs-data input::placeholder { font-family: var(--font-texto); font-size: 20px; letter-spacing: 0; }
.cs-tel { display: grid; grid-template-columns: 76px 1fr; gap: 10px; }

/* ---------- cartas (arte em SVG) ---------- */
.cs-carta { --w: 120px; width: var(--w); aspect-ratio: 5 / 8; flex: none; display: block; border-radius: calc(var(--w) * .052); box-shadow: var(--sombra-carta); }
.cs-carta img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.cs-carta.is-brilho { box-shadow: var(--sombra-carta), var(--brilho-ouro); }

/* ---------- avatar redondo ---------- */
.cs-avatar { width: 56px; height: 56px; border-radius: var(--radius-pill); display: block; box-shadow: var(--brilho-ouro); flex: none; }

/* ---------- player de áudio (mensagem de voz) ---------- */
.cs-audio { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--radius-lg); border-top-left-radius: 4px;
  background: var(--bolha); border: 1px solid var(--linha); box-shadow: var(--sombra-suave); }
.cs-audio-foto { position: relative; flex: none; }
.cs-audio-foto img { width: 48px; height: 48px; border-radius: 50%; display: block; }
.cs-audio-mic { position: absolute; right: -4px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bolha); display: grid; place-items: center; color: var(--ouro-texto); }
.cs-audio-play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ouro-grad); color: var(--noite); display: grid; place-items: center; cursor: pointer; padding: 0 0 0 3px; }
[data-theme="light"] .cs-audio-play { background: var(--acao); color: var(--creme); }
.cs-audio-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 32px; }
.cs-audio-onda i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--tinta-suave); opacity: .45; }
.cs-audio-onda i.is-ouvida { background: var(--ouro); opacity: 1; }
.cs-audio-meta { display: flex; justify-content: space-between; font-size: 15px; color: var(--tinta-suave); margin-top: 2px; }
.cs-audio-col { flex: 1; display: flex; flex-direction: column; }

/* ---------- lista de áudios ---------- */
.cs-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: var(--radius-md); background: var(--fundo-cartao); }
.cs-lista li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linha); }
.cs-lista li:first-child { border-top: 0; }
.cs-lista-icone { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.cs-lista-icone.is-ouvido { background: var(--ouro-grad); color: var(--noite); box-shadow: var(--brilho-ouro); }
.cs-lista-icone.is-trancado { border: 1.5px solid var(--rubi-texto); color: var(--rubi-texto); }
.cs-lista-titulo { flex: 1; font-size: 18px; line-height: 23px; font-weight: 600; }
.cs-lista-dur { font-family: var(--font-gravura); font-size: 12px; letter-spacing: .08em; color: var(--tinta-suave); }
.cs-lista li.is-trancado .cs-lista-titulo { color: var(--tinta-suave); }

/* ---------- carta em destaque (janela em arco) ---------- */
.cs-destaque { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: var(--radius-md); background: var(--fundo-destaque);
  border: 1px solid var(--ouro); box-shadow: var(--brilho-ouro); }
.cs-destaque .cs-carta { --w: 100px; }

/* ---------- oferta ---------- */
.cs-selo { display: inline-flex; align-self: center; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--rubi); color: var(--creme);
  font-family: var(--font-gravura); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cs-oferta { padding: 20px; border-radius: 160px 160px var(--radius-md) var(--radius-md); border: 1.5px solid var(--ouro); background: var(--fundo-cartao);
  display: flex; flex-direction: column; gap: 14px; padding-top: 64px; position: relative; box-shadow: var(--brilho-ouro); }
.cs-oferta::before { content: ""; position: absolute; inset: 6px; border-radius: 154px 154px 8px 8px; border: 1px solid var(--ouro); opacity: .45; pointer-events: none; }
.cs-preco { display: flex; align-items: baseline; justify-content: space-between; }
.cs-preco-valor { font-family: var(--font-ornamento); font-size: 40px; line-height: 44px; font-weight: 700; color: var(--ouro-texto); }

/* ---------- horário ---------- */
.cs-horarios { display: grid; gap: 10px; }
.cs-horario { appearance: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; width: 100%; padding: 14px 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--borda-controle); border-radius: var(--radius-md); background: var(--fundo-cartao); color: var(--tinta); font-family: var(--font-texto); }
.cs-horario-dia { font-family: var(--font-gravura); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-texto); }
.cs-horario-hora { font-family: var(--font-ornamento); font-size: 30px; line-height: 34px; font-weight: 700; grid-column: 1; }
.cs-horario-vagas { grid-row: 1 / span 2; grid-column: 2; font-size: 16px; font-style: italic; color: var(--rubi-texto); }
.cs-horario.is-escolhido { border: 2px solid var(--ouro); padding: 13px 17px; background: var(--fundo-destaque); box-shadow: var(--brilho-ouro); }

/* ---------- pix ---------- */
.cs-pix-qr { width: 216px; height: 216px; margin: 0 auto; padding: 14px; background: #FFFFFF; border-radius: var(--radius-md); border: 3px solid var(--ouro); box-shadow: var(--brilho-ouro); }
.cs-pix-codigo { display: flex; gap: 8px; align-items: stretch; }
.cs-pix-codigo code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px;
  padding: 12px; border-radius: var(--radius-md); border: 1px dashed var(--borda-controle); background: var(--fundo-cartao); color: var(--tinta-suave); }

/* ---------- peças 1080 px (imagem semanal, Reels) ---------- */
.cs-peca { width: 1080px; color: var(--tinta); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cs-peca-moldura { position: absolute; inset: 32px; border: 3px solid var(--ouro); border-radius: 22px; pointer-events: none; box-shadow: 0 0 30px rgba(212, 175, 55, .25); }
.cs-peca-moldura::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--ouro); border-radius: 12px; opacity: .7; }
.cs-peca-canto { position: absolute; width: 44px; height: 44px; }
.cs-amorah { font-family: var(--font-gravura); font-size: 18px; font-weight: 600; letter-spacing: .4em; color: var(--tinta-suave); }

/* ---------- versão da peça por modo ---------- */
html:not([data-theme="light"]) .cs-so-claro { display: none !important; }
[data-theme="light"] .cs-so-escuro { display: none !important; }

/* ---------- lacre da oferta ---------- */
.cs-oferta-lacre { position: absolute; top: -34px; left: 50%; width: 76px; height: 76px; transform: translateX(-50%); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }

/* ---------- mensagens (WhatsApp) ---------- */
.cs-msg { position: relative; max-width: 86%; align-self: flex-start; background: var(--bolha); border: 1px solid var(--linha); border-radius: 4px 14px 14px 14px; padding: 8px 12px 18px; box-shadow: var(--sombra-suave); }
.cs-msg-eu { align-self: flex-end; background: var(--fundo-destaque); border-color: var(--borda-controle); border-radius: 14px 4px 14px 14px; }
.cs-msg-img { padding: 6px 6px 18px; }
.cs-msg-hora { position: absolute; right: 10px; bottom: 3px; font-size: 12px; color: var(--tinta-suave); }