/* =====================================================================
   A CONTA DA ASSINANTE, as três abas do desenho aprovado pelo André
   (Claude Design, aba «Conta, assinatura», 30/09/2026)
   ---------------------------------------------------------------------
   Os valores são os do desenho, copiados um a um: fontes, tamanhos,
   entrelinhas, espaços, cores, bordas, raios e sombras. O celular segue os
   quadros de 390 px e o computador os de 1280 px. Quem monta a tela é o
   js/conta-abas.js. A CSP do site não deixa estilo em atributo, e por isso
   tudo mora aqui, em classe.

   AS TRÊS DIFERENÇAS PARA O DESENHO, anotadas no relatório
   docs/auditoria/CONTA_TELAS_2026-09-30.md:
   1. O peso 600 do Libre Franklin não existe na pasta /tipos, que só tem
      300, 400 e 500. O navegador engrossa o 500 sozinho.
   2. O número dos dias sem carta no diário sai em #8C8578, e não em
      #5C554A, que dava 2,5:1 sobre o fundo do quadro, abaixo dos 4,5:1.
   3. As abas passam de 39 para 44 px de altura, pelo alvo de toque de
      44 px. Os filtros e os links miúdos continuam do tamanho desenhado, e
      a área de toque deles cresce para 44 px por um ::after invisível.
   ===================================================================== */

.cx{--cx-fundo:#0C0B0A;--cx-quadro:#15130F;--cx-fio:#2A2620;--cx-fio2:#3A332A;--cx-osso:#EDE9E1;
  --cx-cinza:#A9A194;--cx-apaga:#8C8578;--cx-claro:#CFC8BB;--cx-ouro:#D9A45A;--cx-ocre:#C58A3D;
  --cx-serif:"EB Garamond",Georgia,serif;--cx-sans:"Libre Franklin",Helvetica,sans-serif}
body.cx-corpo{margin:0;background:#0C0B0A;color:#EDE9E1}
.cx{box-sizing:border-box;max-width:1280px;margin:0 auto;background:var(--cx-fundo);padding:22px 20px 40px;
  display:flex;flex-direction:column;gap:28px;font-family:var(--cx-sans);color:var(--cx-osso);line-height:normal}
.cx[data-aba="leituras"],.cx[data-aba="dados"]{gap:26px}
.cx *,.cx *::before,.cx *::after{box-sizing:border-box}
.cx a{color:var(--cx-ouro)}
.cx a:hover{color:var(--cx-osso)}
.cx p{margin:0}
.cx [hidden]{display:none!important}
.cx :focus-visible{outline:2px solid var(--cx-ouro);outline-offset:3px;border-radius:2px}
.cx button{font-family:var(--cx-sans)}

/* a área de toque de 44 px sem mexer no desenho */
.cx-alvo{position:relative}
.cx-alvo::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;min-height:100%;transform:translateY(-50%)}

/* ---------- o topo, com a marca e o Sair ---------- */
.cx-topo{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cx-marca{min-height:44px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cx-osso)}
.cx .cx-marca{color:var(--cx-osso)}
.cx-marca img{width:28px;height:28px;display:block}
.cx-marca-nome{font-family:var(--cx-serif);font-size:26px;letter-spacing:.5px;line-height:normal}
.cx-marca-nome span{color:var(--cx-ocre)}
.cx-sair{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:500;
  color:var(--cx-osso);text-decoration:none;border:1px solid var(--cx-fio2);border-radius:999px;padding:0 16px;
  background:transparent;cursor:pointer;line-height:normal}
.cx-sair:hover{border-color:var(--cx-ouro)}
.cx-sair svg{width:16px;height:16px;flex-shrink:0}

/* ---------- as abas ---------- */
.cx-abas{display:flex;gap:22px;border-bottom:1px solid var(--cx-fio)}
.cx-aba{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:400;color:var(--cx-cinza);text-decoration:none;padding:10px 0;
  border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;cursor:pointer;line-height:normal}
.cx-aba[aria-selected="true"]{font-weight:600;color:var(--cx-osso);border-bottom-color:var(--cx-ouro)}
.cx-aba:hover{color:var(--cx-osso)}
/* a aba Assinatura escondida para quem não assina, desde 09/10/2026 (js/conta-abas.js) */
.cx-aba[hidden]{display:none}

/* ---------- títulos e textos que se repetem ---------- */
.cx-cabeca{display:flex;flex-direction:column;gap:12px}
.cx-cabeca-leituras{gap:10px}
.cx-h2{margin:0;font-family:var(--cx-serif);font-weight:400;font-size:30px;line-height:1.12;text-wrap:balance}
.cx-situacao{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cx-p{font-size:14px;line-height:1.55;color:var(--cx-cinza)}
.cx-p13{font-size:13px;line-height:1.55;color:var(--cx-cinza)}
.cx-nota{font-size:12px;line-height:1.6;color:var(--cx-apaga)}
.cx-selo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--cx-ouro);background:rgba(217,164,90,.12);border:1px solid rgba(217,164,90,.35);
  border-radius:999px;padding:5px 11px;line-height:normal}
.cx-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cx-ouro)}
.cx-selo-neutro{color:var(--cx-osso);background:rgba(237,233,225,.06)}
.cx-selo-neutro::before{background:var(--cx-osso)}
.cx-rot{font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--cx-ocre)}
.cx-link{font-size:14px;font-weight:500;color:var(--cx-ouro);text-decoration:none}

/* ---------- os quadros ---------- */
.cx-colunas{display:flex;flex-direction:column;gap:18px}
.cx-coluna{display:contents}
.cx-bloco{display:flex;flex-direction:column;gap:18px;background:var(--cx-quadro);border:1px solid var(--cx-fio);
  border-radius:6px;padding:22px}

/* a ordem do celular, que o computador divide em duas colunas */
.cx-o-semana{order:1}.cx-o-convite{order:2}.cx-o-carta{order:3}.cx-o-analises{order:4}.cx-o-diario{order:5}
.cx-o-prefs{order:6}.cx-o-historico{order:7}.cx-o-indica{order:8}.cx-o-ajuda{order:9}

/* ---------- a leitura da semana ---------- */
.cx-semana{gap:20px;border-radius:8px}
.cx-semana.cx-disponivel{border-color:var(--cx-ouro);box-shadow:0 0 60px rgba(217,164,90,.10)}
.cx-semana-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cx-h3{margin:0;font-family:var(--cx-serif);font-weight:400;font-size:24px;line-height:1.15}
.cx-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cx-dia{display:flex;flex-direction:column;gap:6px;align-items:center}
.cx-dia-caixa{width:100%;height:34px;border-radius:4px;border:1px solid var(--cx-fio2);background:transparent;
  display:flex;align-items:center;justify-content:center}
.cx-dia-passou .cx-dia-caixa{background:rgba(217,164,90,.28)}
.cx-dia-hoje .cx-dia-caixa{border-color:var(--cx-ouro);background:rgba(217,164,90,.10)}
.cx-dia-usou .cx-dia-caixa{border-color:var(--cx-ouro);background:var(--cx-ouro)}
.cx-dia-caixa svg{width:12px;height:12px}
.cx-dia-nome{font-size:11px;line-height:1.2;text-align:center;color:var(--cx-cinza);font-weight:400}
.cx-dia-hoje .cx-dia-nome{color:var(--cx-osso);font-weight:600}
.cx-btn{display:block;text-align:center;background:var(--cx-ouro);color:var(--cx-fundo);text-decoration:none;font-size:17px;
  font-weight:600;letter-spacing:.2px;padding:19px 34px;border-radius:3px;align-self:stretch;box-shadow:0 10px 30px rgba(217,164,90,.18)}
.cx a.cx-btn{color:var(--cx-fundo)}
.cx a.cx-btn:hover{color:var(--cx-fundo);background:#E4B570}

.cx-feita{display:flex;gap:16px;align-items:center;background:var(--cx-fundo);border:1px solid var(--cx-fio2);border-radius:6px;padding:16px}
.cx-trio{display:flex;gap:6px;flex-shrink:0}
.cx-trio img{width:40px;height:66px;object-fit:cover;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.5);display:block}
.cx-trio img.cx-inv{transform:rotate(180deg)}
.cx-feita-texto{display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-meta{font-size:12px;color:var(--cx-cinza)}
.cx-pergunta{font-family:var(--cx-serif);font-style:italic;font-size:17px;line-height:1.3;color:var(--cx-osso)}

.cx-libera{display:flex;gap:18px;align-items:center}
.cx-anel{position:relative;width:80px;height:80px;flex-shrink:0}
.cx-anel svg{display:block;transform:rotate(-90deg)}
.cx-anel .cx-anel-pc{display:none}
.cx-anel-num{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cx-anel-n{font-family:var(--cx-serif);font-size:28px;line-height:1;color:var(--cx-osso)}
.cx-anel-d{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--cx-cinza)}
.cx-libera-texto{display:flex;flex-direction:column;gap:6px}
.cx-libera-titulo{font-family:var(--cx-serif);font-size:22px;line-height:1.2}

.cx-o-lm{order:1}

/* ---------- as leituras do mês (assinatura nova, etapa 4, 05/10/2026) ----------
   As pranchas A1 a A7 do canvas «Fluxo do gacha», faixa «Assinatura nova»,
   copiadas: o quadro com 22 px de folga, o fio de ouro e o brilho quando há
   leitura disponível, cada leitura na sua caixa de 16 px, a figura de 92 por
   50, o nome em 21 px, o selo, e o botão de 16 px com 15 px de folga em cima
   e embaixo. */
.cx-lm-bloco{display:flex;flex-direction:column}
.cx-lm{display:flex;flex-direction:column;gap:16px;background:var(--cx-quadro);border:1px solid var(--cx-fio);border-radius:8px;padding:22px}
.cx-lm-aceso{border-color:var(--cx-ouro);box-shadow:0 0 60px rgba(217,164,90,.10)}
.cx-lm-conta{color:var(--cx-osso);font-weight:500}
.cx-lm-item{display:flex;flex-direction:column;gap:14px;background:var(--cx-fundo);border:1px solid var(--cx-fio2);border-radius:6px;padding:16px}
.cx-lm-cab{display:flex;gap:14px;align-items:center}
.cx-lm-fig{flex-shrink:0;display:block}
.cx-lm-nome-selo{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:flex-start}
.cx-lm-nome{font-family:var(--cx-serif);font-size:21px;line-height:1.15}
.cx-lm-selo{white-space:nowrap}
.cx-lm-escrevendo::before{animation:cx-pulso 1.6s ease-in-out infinite}
@keyframes cx-pulso{0%,100%{opacity:1}50%{opacity:.25}}
.cx-lm-pergunta{font-family:var(--cx-serif);font-style:italic;font-size:17px;line-height:1.3;color:var(--cx-osso);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-lm-link{display:block;font-size:14px;font-weight:500;color:var(--cx-ouro);text-decoration:none}
/* a área de toque de 44 px, sem mexer na caixa desenhada */
.cx-lm-link,.cx-lm-toque{position:relative}
.cx-lm-link::after,.cx-lm-toque::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.cx a.cx-lm-btn{display:block;text-align:center;background:var(--cx-ouro);color:var(--cx-fundo);text-decoration:none;font-size:16px;
  font-weight:600;letter-spacing:.2px;padding:15px 20px;border-radius:3px;box-shadow:0 10px 30px rgba(217,164,90,.18)}
.cx a.cx-lm-btn:hover{color:var(--cx-fundo);background:#E4B570}
.cx-lm-aviso{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;background:rgba(217,164,90,.07);
  border:1px solid rgba(217,164,90,.22);border-radius:4px;font-size:12px;line-height:1.55;color:var(--cx-claro)}
.cx-lm-aviso svg{flex-shrink:0;margin-top:2px}
.cx .cx-lm-nota{margin-top:14px}
/* os espaços do alto, pelas pranchas: 6 px do Sair às abas, 22 px das abas ao
   título e da situação ao quadro, e 10 px entre o título, o selo e a frase.
   Só no celular e só com o quadro do mês, para quem ainda está na semana
   continuar vendo a conta de antes */
@media (max-width:899.98px){
  .cx.cx-com-lm .cx-topo-sair{margin-bottom:-22px}
  .cx-com-lm #cxPainel-assinatura{gap:22px;margin-top:-6px}
  .cx-com-lm #cxPainel-assinatura .cx-cabeca{gap:10px}
}
.cx-lm-convite{margin-top:16px}
.cx-lm-leque{flex-shrink:0;display:block}
@media (prefers-reduced-motion:reduce){.cx-lm-escrevendo::before{animation:none}}

/* ---------- o convite para outra leitura ---------- */
.cx-convite{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,#1C1710,#14110D);
  border:1px solid #4A3D2A;border-radius:8px;padding:20px}
.cx-leque{position:relative;width:96px;height:76px;flex-shrink:0}
.cx-leque img{position:absolute;width:38px;height:63px;object-fit:cover;border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.cx-leque img:nth-child(1){left:4px;top:8px;transform:rotate(-10deg)}
.cx-leque img:nth-child(2){left:54px;top:8px;transform:rotate(10deg)}
.cx-leque img:nth-child(3){left:29px;top:2px}
.cx-convite-texto{display:flex;flex-direction:column;gap:8px;min-width:0}
.cx-convite-titulo{font-family:var(--cx-serif);font-size:21px;line-height:1.2}
.cx-sublinhado{align-self:flex-start;font-size:14px;font-weight:600;color:var(--cx-ouro);text-decoration:none;
  border-bottom:1px solid var(--cx-ouro);padding-bottom:2px}

/* ---------- a carta do dia ---------- */
.cx-carta{display:flex;gap:16px;align-items:center}
.cx-carta img{width:70px;height:117px;object-fit:cover;border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.5);display:block;flex-shrink:0}
.cx-carta-texto{display:flex;flex-direction:column;gap:6px}
.cx-carta-nome{font-family:var(--cx-serif);font-size:24px;line-height:1}

/* ---------- as próximas análises ---------- */
.cx-analises{display:flex;flex-direction:column;gap:12px}
.cx-analise{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--cx-fundo);border:1px solid var(--cx-fio2);border-radius:6px}
.cx-data{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;flex-shrink:0;
  border:1px solid var(--cx-ouro);border-radius:6px;padding:8px 0}
.cx-data-dia{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--cx-ouro)}
.cx-data-num{font-family:var(--cx-serif);font-size:26px;line-height:1.05;color:var(--cx-osso)}
.cx-analise-texto{display:flex;flex-direction:column;gap:5px;min-width:0}
.cx-analise-rot{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--cx-cinza)}
.cx-analise-titulo{font-family:var(--cx-serif);font-size:19px;line-height:1.25;color:var(--cx-osso)}
.cx-analise-desc{font-size:13px;line-height:1.5;color:var(--cx-cinza)}
.cx-aviso{display:flex;gap:8px;align-items:flex-start;margin-top:6px;padding:9px 11px;background:rgba(217,164,90,.07);
  border:1px solid rgba(217,164,90,.22);border-radius:4px;font-size:12px;line-height:1.55;color:var(--cx-claro)}
.cx-aviso svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}

/* ---------- o diário de cartas ---------- */
.cx-diario-topo{display:flex;justify-content:space-between;align-items:center}
.cx-mes{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--cx-osso)}
.cx-seta{background:transparent;border:0;padding:0;font-size:14px;line-height:normal;color:var(--cx-cinza);cursor:pointer}
.cx-seta[aria-disabled="true"]{color:#4A4438;cursor:default}
.cx-seta.cx-alvo::after{left:-16px;right:-16px}
.cx-mes-nome{font-family:var(--cx-serif);font-size:17px}
.cx-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cx-grade-sem{font-size:11px;color:var(--cx-cinza);text-align:center}
.cx-grade-dia{aspect-ratio:.62;border-radius:3px;border:1px solid var(--cx-fio);display:flex;align-items:flex-start;
  padding:3px;font-size:10px;color:var(--cx-apaga)}
.cx-grade-carta{position:relative;display:block;aspect-ratio:.62;border-radius:3px;overflow:hidden;border:1px solid #4A3D2A}
.cx-grade-carta.cx-hoje{border-color:var(--cx-ouro)}
.cx-grade-carta img{width:100%;height:100%;object-fit:cover;display:block}
.cx-grade-carta span{position:absolute;left:3px;top:2px;font-size:10px;font-weight:600;color:var(--cx-osso);text-shadow:0 1px 3px #000}

/* ---------- como a carta do dia chega ---------- */
.cx-opcoes{display:flex;flex-direction:column;gap:10px}
.cx-opcao{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:transparent;
  border:1px solid var(--cx-fio2);border-radius:6px;padding:14px 16px;cursor:pointer;color:var(--cx-osso)}
.cx-opcao[aria-checked="true"]{background:rgba(217,164,90,.10);border-color:var(--cx-ouro)}
.cx-bola{width:18px;height:18px;border-radius:50%;border:1px solid var(--cx-ouro);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:2px}
.cx-bola::before{content:"";width:8px;height:8px;border-radius:50%;background:transparent}
.cx-opcao[aria-checked="true"] .cx-bola::before{background:var(--cx-ouro)}
.cx-opcao-texto{display:flex;flex-direction:column;gap:4px}
.cx-opcao-titulo{font-size:15px;font-weight:600}
.cx-opcao-desc,.cx-p13b{font-size:13px;line-height:1.5;color:var(--cx-cinza)}
.cx-horario{display:flex;flex-direction:column;gap:10px}
.cx-horario-rot{font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--cx-cinza)}
.cx-horas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--cx-fio2);border-radius:6px;overflow:hidden}
.cx-hora{min-height:48px;border:none;background:transparent;color:var(--cx-osso);font-family:var(--cx-serif);font-size:20px;cursor:pointer}
.cx .cx-hora{font-family:var(--cx-serif)}
.cx-hora + .cx-hora{border-left:1px solid var(--cx-fio2)}
.cx-hora[aria-checked="true"]{background:var(--cx-ouro);color:var(--cx-fundo)}
.cx-hora:focus-visible{outline-offset:-3px}
.cx-meia-noite{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--cx-claro);padding-top:4px}
.cx-meia-noite svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.cx-salvo{font-size:12px;line-height:1.5;color:var(--cx-apaga);min-height:0}
.cx-salvo:empty{display:none}

/* ---------- o histórico e as listas de links ---------- */
.cx-lista{display:flex;flex-direction:column}
.cx-hist{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--cx-fio);
  text-decoration:none;color:var(--cx-osso)}
.cx a.cx-hist{color:var(--cx-osso)}
.cx-hist-texto{display:flex;flex-direction:column;gap:4px;min-width:0}
.cx-seta-dir{color:var(--cx-ouro);font-size:18px}
.cx-item{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:12px 0;border-top:1px solid var(--cx-fio);color:var(--cx-osso);
  text-decoration:none;font-size:15px}
.cx a.cx-item{color:var(--cx-osso)}
.cx-item span:last-child{color:var(--cx-ouro)}
.cx-privacidade .cx-item{padding:13px 0}

/* ---------- a indicação ---------- */
.cx-p165{font-size:14px;line-height:1.65;color:var(--cx-cinza)}
.cx-copia{display:flex;gap:8px;align-items:stretch}
.cx-copia-campo{flex-grow:1;min-width:0;display:flex;align-items:center;background:var(--cx-fundo);border:1px solid var(--cx-fio2);
  border-radius:4px;padding:0 12px;font-size:14px;color:var(--cx-osso);overflow:hidden;white-space:nowrap}
.cx-copiar{min-height:44px;background:transparent;border:1px solid var(--cx-ouro);color:var(--cx-ouro);border-radius:4px;
  font-size:14px;font-weight:600;padding:0 14px;cursor:pointer}

/* ---------- o pé ---------- */
.cx-pe{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--cx-fio);padding-top:20px}
.cx-pe-cancelar{font-size:13px;color:var(--cx-cinza);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.cx a.cx-pe-cancelar{color:var(--cx-cinza)}
.cx-ia{font-size:13px;color:var(--cx-ouro)}
.cx-pe-so{border-top:1px solid var(--cx-fio);padding-top:20px}

/* ---------- a aba Leituras ---------- */
.cx-filtros{display:flex;gap:8px;flex-wrap:wrap}
.cx-filtro{min-height:38px;background:transparent;border:1px solid var(--cx-fio2);color:var(--cx-claro);border-radius:999px;
  font-size:14px;padding:0 14px;cursor:pointer}
.cx-filtro[aria-pressed="true"]{background:rgba(217,164,90,.12);border-color:var(--cx-ouro);color:var(--cx-osso)}
.cx-meses{display:flex;flex-direction:column;gap:28px}
.cx-mes-grupo{display:flex;flex-direction:column}
.cx-mes-titulo{font-family:var(--cx-serif);font-size:20px;padding-bottom:6px;color:var(--cx-osso);margin:0;font-weight:400}
.cx-leitura{position:relative;display:flex;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--cx-fio);color:var(--cx-osso)}
.cx-figura{width:102px;flex-shrink:0;display:flex;justify-content:center}
.cx-figura .cx-trio img{width:30px;height:50px}
.cx-mini{position:relative;width:102px;height:56px}
.cx-mini-dentro{position:absolute}
.cx-mini-c{position:absolute;width:9px;height:16px;border:1px solid #6B5A40;border-radius:2px;background:rgba(237,233,225,.03)}
.cx-leitura-texto{display:flex;flex-direction:column;gap:5px;min-width:0;flex-grow:1}
.cx-leitura-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cx-tipo{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--cx-ouro)}
.cx-quando{font-size:12px;color:var(--cx-cinza)}
.cx-estado{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cx-est{font-size:12px}
.cx-est-pronta{color:#8DBE8A}
.cx-est-escrita{color:var(--cx-ouro)}
.cx-est-presente{color:var(--cx-claro)}
.cx-est-outra{color:var(--cx-cinza)}
.cx-reenviar,.cx-desistir{position:relative;z-index:2;background:transparent;border:0;padding:0;font-size:12px;color:var(--cx-cinza);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cx-acao{color:var(--cx-ouro);font-size:14px;font-weight:500;flex-shrink:0;text-decoration:none}
.cx a.cx-acao{color:var(--cx-ouro)}
.cx a.cx-acao::before{content:"";position:absolute;inset:0;z-index:1}
.cx-leitura:hover .cx-acao{color:var(--cx-osso)}
.cx-vazio{font-size:14px;line-height:1.55;color:var(--cx-cinza);padding:16px 0;border-top:1px solid var(--cx-fio)}
.cx-nova{display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:center;background:var(--cx-quadro);
  border:1px solid var(--cx-fio);border-radius:8px;padding:24px}
.cx-nova-titulo{font-family:var(--cx-serif);font-size:22px}
/* o convite de quem entra sem assinatura (prancha ContaSemAssinatura, 06/10/2026) */
.cx-cv{display:flex;flex-direction:column;gap:18px;background:var(--cx-quadro);border:1px solid var(--cx-ouro);box-shadow:0 0 60px rgba(217,164,90,.10);border-radius:8px;padding:22px}
.cx-cv-item{display:flex;gap:14px;align-items:flex-start}
.cx-cv-fig{flex-shrink:0;width:64px;display:flex;justify-content:center;padding-top:4px}
.cx-cv-fig svg{display:block}
.cx-cv-carta{display:block;width:26px;height:42px;object-fit:cover;border-radius:2px;margin:0 19px}
.cx-cv-barras{display:grid;grid-template-columns:repeat(7,7px);gap:2px;width:64px;justify-content:center}
.cx-cv-barras span{height:16px;border-radius:1px;background:rgba(217,164,90,.55)}
.cx-cv-barras .cx-cv-barra-hoje{background:var(--cx-ouro)}
.cx-cv-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.cx-cv-quando{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--cx-ocre)}
.cx-cv-nome{font-family:var(--cx-serif);font-size:20px;line-height:1.2}
.cx-cv-pe{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--cx-fio2);padding-top:16px}
.cx-cv-valor{font-family:var(--cx-serif);font-size:22px;color:var(--cx-osso)}
.cx a.cx-cv-btn{padding:17px 20px;letter-spacing:normal}
.cx-cv-como{align-self:center}
.cx-situacao-cv{align-items:stretch}
.cx-cv-chega{display:flex;flex-direction:column;gap:16px;background:var(--cx-quadro);border:1px solid var(--cx-fio);border-radius:6px;padding:22px}
.cx-cv-print-tit{font-family:var(--cx-serif);font-size:19px;line-height:1.25}
.cx-cv-print-tit2{margin-top:6px}
.cx .cx-cv-print{box-sizing:content-box;position:relative;width:300px;max-width:100%;margin:0 auto;overflow:hidden;border:1px solid var(--cx-fio2);border-radius:12px}
.cx-cv-print img{display:block;width:300px;height:562px}
.cx-cv-print-520{height:520px}
.cx-cv-print-330{height:330px}
.cx-cv-esmaece{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to bottom,rgba(21,19,15,0),#15130F)}
.cx-cv-nota{font-size:12px;line-height:1.6;color:var(--cx-apaga)}
/* o atalho das leituras do mês na aba Leituras (12.5) */
.cx-lm-atalho{font-size:14px;line-height:1.55;color:var(--cx-osso);border:1px solid var(--cx-ouro);border-radius:8px;padding:14px 16px}
.cx-lm-atalho .cx-link{white-space:nowrap}
.cx-miudas{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.cx-miuda{display:inline-flex;align-items:center;min-height:44px;background:transparent;border:0;padding:0;font-size:12px;color:var(--cx-cinza);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
.cx-miuda-nota{font-size:12px;line-height:1.5;color:var(--cx-cinza)}
.cx-miuda-nota:empty{display:none}

/* ---------- a aba Dados ---------- */
.cx-dados{display:flex;flex-direction:column;gap:18px}
.cx-dados-col{display:contents}
.cx-o-meus{order:1}.cx-o-pagamento{order:2}.cx-o-privacidade{order:3}
.cx-campo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--cx-fio)}
.cx-campo-texto{display:flex;flex-direction:column;gap:4px;min-width:0}
.cx-campo-rot{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--cx-cinza)}
.cx-campo-valor{font-size:16px;color:var(--cx-osso);overflow-wrap:anywhere}
.cx-campo-ajuda{font-size:12px;line-height:1.5;color:var(--cx-cinza)}
.cx-mudar{font-size:14px;color:var(--cx-ouro);text-decoration:none;flex-shrink:0;background:transparent;border:0;padding:0;cursor:pointer;line-height:normal}
.cx-edita{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.cx-edita input{min-height:44px;background:var(--cx-fundo);border:1px solid var(--cx-fio2);border-radius:4px;color:var(--cx-osso);
  font:16px var(--cx-sans);padding:0 12px}
.cx-edita input:focus-visible{outline:2px solid var(--cx-ouro);outline-offset:1px}
.cx-trat{display:flex;gap:8px;flex-wrap:wrap}
.cx-trat .cx-filtro{min-height:44px}
.cx-edita-acoes{display:flex;gap:14px;align-items:center}
.cx-cartao{display:flex;align-items:center;gap:12px}
.cx-cartao-fig{width:42px;height:28px;border-radius:4px;border:1px solid var(--cx-fio2);background:linear-gradient(135deg,#2A2620,#15130F);
  display:flex;align-items:flex-end;padding:4px;flex-shrink:0}
.cx-cartao-fig::before{content:"";width:10px;height:7px;border-radius:1px;background:var(--cx-ocre)}
.cx-cartao-texto{display:flex;flex-direction:column;gap:2px;flex-grow:1}
.cx-cartao-num{font-size:15px;color:var(--cx-osso)}
.cx-cartao-via{font-size:12px;color:var(--cx-cinza)}
.cx-cobranca{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--cx-fio)}
.cx-cobranca-texto{display:flex;flex-direction:column;gap:3px}
.cx-cobranca-valor{font-size:15px;color:var(--cx-osso)}
.cx-cobranca-desc{font-size:12px;color:var(--cx-cinza)}
.cx-cobranca-links{display:flex;gap:14px;font-size:13px}
.cx-cobranca-links a{color:var(--cx-ouro);text-decoration:none}
.cx-apagar{font-size:13px;color:#C98A7E;text-decoration:underline;text-underline-offset:3px;background:transparent;border:0;padding:0;
  cursor:pointer;align-self:flex-start}

/* a entrada, antes da sessão, fica no quadro de sempre, dentro da casca nova */
.cx-entrar .conta{border-top:0;margin-top:0;padding-top:0}

/* ---------- entre o celular e o computador ---------- */
@media (min-width:600px) and (max-width:899.98px){
  /* o molde do celular, centrado em no máximo 560 px (adendo do computador, 01/10/2026) */
  .cx{max-width:560px;padding:28px 0 48px}
}

/* ---------- o computador, pelos quadros de 1280 ---------- */
@media (min-width:900px){
  .cx{padding:32px clamp(40px,8.75vw,112px) 56px;gap:40px}
  .cx[data-aba="leituras"],.cx[data-aba="dados"]{gap:36px}
  .cx-marca img{width:32px;height:32px}
  .cx-marca-nome{font-size:30px}
  .cx-h2{font-size:44px}
  .cx-bloco{padding:26px}
  .cx-semana{padding:32px}
  .cx-colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
  .cx-coluna{display:flex;flex-direction:column;gap:28px}
  .cx-coluna-larga{grid-column:span 2}
  .cx-dias{gap:8px}
  .cx-dia-caixa{height:40px}
  .cx-feita .cx-trio img{width:46px;height:76px}
  .cx-anel{width:92px;height:92px}
  .cx-anel .cx-anel-cel{display:none}
  .cx-anel .cx-anel-pc{display:block}
  .cx-anel-n{font-size:32px}
  .cx-libera-titulo{font-size:26px}
  .cx-convite{padding:24px}
  .cx-convite-titulo{font-size:24px}
  .cx-grade{gap:6px}
  .cx-meses{max-width:860px}
  .cx-nova{align-items:center;padding:36px}
  .cx-nova-titulo{font-size:26px}
  .cx-nova .cx-btn{display:inline-block;font-size:18px;padding:21px 34px;align-self:center}
  .cx-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
  .cx-dados-col{display:flex;flex-direction:column;gap:28px}
}

@media (prefers-reduced-motion:reduce){.cx *{transition:none!important}}

/* ---------- as miniaturas da tiragem, no traço da ferradura do desenho ---------- */
.cx-mini-ferradura .cx-mini-dentro{left:4px;top:9px;width:93px;height:38px}
.cx-mini-tres .cx-mini-dentro,.cx-mini-uma .cx-mini-dentro,.cx-mini-cruz .cx-mini-dentro{left:0;top:0;width:102px;height:56px}
.cx-mini-ferradura .cx-c1{left:1px;top:1px}.cx-mini-ferradura .cx-c2{left:14px;top:9px}.cx-mini-ferradura .cx-c3{left:28px;top:17px}
.cx-mini-ferradura .cx-c4{left:41px;top:21px}.cx-mini-ferradura .cx-c5{left:54px;top:17px}.cx-mini-ferradura .cx-c6{left:68px;top:9px}
.cx-mini-ferradura .cx-c7{left:81px;top:1px}
.cx-mini-cruz .cx-c1,.cx-mini-cruz .cx-c2{left:31px;top:20px}.cx-mini-cruz .cx-c2{transform:rotate(90deg)}
.cx-mini-cruz .cx-c3{left:31px;top:39px}.cx-mini-cruz .cx-c4{left:17px;top:20px}.cx-mini-cruz .cx-c5{left:31px;top:1px}
.cx-mini-cruz .cx-c6{left:45px;top:20px}.cx-mini-cruz .cx-c7{left:75px;top:40px}.cx-mini-cruz .cx-c8{left:75px;top:27px}
.cx-mini-cruz .cx-c9{left:75px;top:14px}.cx-mini-cruz .cx-c10{left:75px;top:1px}
.cx-mini-tres .cx-mini-c,.cx-mini-uma .cx-mini-c{width:30px;height:50px;top:3px;border-radius:3px}
.cx-mini-tres .cx-c1{left:0}.cx-mini-tres .cx-c2{left:36px}.cx-mini-tres .cx-c3{left:72px}
.cx-mini-uma .cx-c1{left:36px}

.cx-so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-h3-solto{margin:0;font-weight:400}
.cx-novidades{font-size:13px;line-height:1.5;color:var(--cx-cinza);display:flex;gap:10px;align-items:flex-start;min-height:44px}
.cx-novidades input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:1px 0 0;flex-shrink:0;cursor:pointer;
  background:var(--cx-fundo);border:1px solid var(--cx-fio2);border-radius:4px;display:inline-grid;place-content:center}
.cx-novidades input::before{content:"";width:10px;height:6px;border-left:2px solid var(--cx-fundo);border-bottom:2px solid var(--cx-fundo);
  transform:translateY(-1px) rotate(-45deg);opacity:0}
.cx-novidades input:checked{background:var(--cx-ouro);border-color:var(--cx-ouro)}
.cx-novidades input:checked::before{opacity:1}
.cx-novidades input:focus-visible{outline:2px solid var(--cx-ouro);outline-offset:2px}
.cx .cx-conta{border:0;margin:0;padding:0}
.cx:has(#contaDentro[hidden]) #btnSair{display:none}
#conta:has(#contaDentro:not([hidden])) .cx-so-fora{display:none}
.cx-rodape{margin-top:-14px;font-size:12px;line-height:1.6;color:var(--cx-apaga)}
.cx-rodape .rodape-legal{margin:0;font-size:12px;line-height:1.6;color:var(--cx-apaga)}
.cx-rodape .rodape-legal b{font-weight:500;color:var(--cx-cinza)}
.cx-rodape .rodape-empresarial{display:block;font-size:11px;color:var(--cx-apaga)}
.cx-rodape .cx-rodape-termos{margin:6px 0 0;font-size:12px;line-height:1.6}
.cx-rodape .cx-rodape-termos a{color:var(--cx-apaga);text-decoration:underline;text-underline-offset:2px}
.cx-painel{display:flex;flex-direction:column;gap:inherit}
.cx-painel:focus-visible{outline:2px solid var(--cx-ouro);outline-offset:6px}
.cx-dentro{display:flex;flex-direction:column;gap:inherit}
.cx-dentro[hidden]{display:none}
.cx-conta{display:flex;flex-direction:column;gap:inherit}
.cx-troca-cartao{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.cx-rodape .rodape-legal{border:0;padding:0;max-width:none;font-family:var(--cx-sans)}
.cx-estado:has(.cx-desistir):has(.cx-reenviar){row-gap:30px}

/* O TOPO DO SITE NA CONTA, 01/10/2026, pedido do André: a marca, «As 78
   cartas» e «Minha conta», como na home e nas páginas geradas. O Sair fica
   numa linha própria logo abaixo, só para quem está dentro. */
.cx .topo.cx-topo-site{margin:0}
.cx .topo.cx-topo-site a.link{color:inherit}
.cx .topo.cx-topo-site a.marca{color:var(--cx-osso)}
.cx-topo-sair{justify-content:flex-end;margin-top:-16px}
.cx:has(#contaDentro[hidden]) .cx-topo-sair{display:none}

/* o bloco «Tiragens grátis neste aparelho» saiu em 02/10/2026, com a tiragem grátis */

/* O MOLDE DO COMPUTADOR, adendo de 01/10/2026 (pranchas DesktopLeitura e
   DesktopFim do Claude Design): a partir de 900 px o topo ocupa 1120 px,
   72 px de altura e o fio embaixo, com a marca à esquerda e o menu à
   direita; todo o resto fica numa coluna de no máximo 760 px, centrada.
   As colunas do quadro de 1280 de 30/09 viram uma só dentro dela. */
@media (min-width:900px){
  .cx{max-width:none;padding:0 40px 56px;align-items:center}
  .cx>*{width:100%;max-width:760px}
  .cx>.topo.cx-topo-site{max-width:1120px;height:72px;padding:0;margin:0;border-bottom:1px solid #35312B;flex:none}
  .cx-topo-site .marca{font-size:23px}
  .cx-topo-site .marca-simbolo{width:26px;height:26px}
  .cx-topo-site .topo-nav{gap:24px}
  .cx .topo.cx-topo-site .topo-nav a.link{font-family:var(--cx-serif);font-size:16px;font-variant-caps:small-caps;letter-spacing:.1em;
    color:var(--cx-cinza);text-decoration:none}
  .cx .topo.cx-topo-site .topo-nav a.link[aria-current="page"],.cx .topo.cx-topo-site .topo-nav a.link:hover{color:var(--cx-osso)}
  .cx-topo-sair{margin-top:-20px}
  .cx-colunas{grid-template-columns:minmax(0,1fr)}
  .cx-coluna-larga{grid-column:auto}
}

/* OS ALVOS DE 44 PX NA CAIXA DO PRÓPRIO ELEMENTO, verificador 2 de
   01/10/2026. A área de toque já passava de 44 px pelo .cx-alvo (o
   ::after), mas a caixa da marca, da aba «Dados», das setas do mês, do dia
   do diário, de «Ver a carta de hoje», de «Cancelar a assinatura» e de
   «Termos» era menor. Cada uma ganha a caixa de 44 px, e a margem negativa
   devolve o espaço, para o desenho não sair do lugar. */
.cx .topo.cx-topo-site a.marca{min-height:44px}
.cx-aba{min-width:44px;justify-content:center}
.cx-seta{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-14px -20px}
.cx a.cx-link{display:inline-flex;align-items:center;min-height:44px;margin:-13px 0;align-self:flex-start}
.cx a.cx-pe-cancelar{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
.cx-rodape .cx-rodape-termos a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:-14px 0}
/* o diário no celular: a grade passa um pouco da margem do quadro, para os
   sete dias terem 44 px de largura */
@media (max-width:599.98px){.cx-o-diario .cx-grade{margin:0 -10px;gap:2px}}
/* e todos os outros alvos marcados com .cx-alvo nas abas (abrir, recibo,
   nota fiscal, trocar, mudar, desistir, reenviar, apagar, fazer outra
   pergunta): a caixa de 44 por 44, com a margem de cima e de baixo devolvida */
.cx a.cx-alvo:not(.cx-aba):not(.cx-grade-carta),.cx button.cx-alvo:not(.cx-aba):not(.cx-seta):not(.cx-filtro){display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-top:-13px;margin-bottom:-13px}
.cx-filtro{min-height:44px}
/* o «Abrir», o «Ver» e o «Acompanhar» de cada leitura: o cartão inteiro já
   abre a leitura (o ::before), e a caixa do link também passa a ter 44 px */
.cx a.cx-acao{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;min-width:44px;margin-top:-13px;margin-bottom:-13px}
/* a indicação na aba Leituras, 02/10/2026: o bloco calmo de sempre, o link
   no campo, e «Copiar o link» e «Mandar pelo WhatsApp» no desenho da linha
   «Nota fiscal», em ocre de 13 px, com alvo de 44 px; a leitura ganha
   embaixo, separada por um fio */
.cx-indica{max-width:760px}
.cx-indica-links{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px}
.cx-indica-links a,.cx-indica-links button{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;padding:0;background:transparent;
  border:0;font:inherit;font-size:13px;color:var(--cx-ouro);text-decoration:none;cursor:pointer}
.cx-indica-links a:hover,.cx-indica-links button:hover{color:var(--cx-osso)}
.cx-credito{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--cx-fio);padding-top:16px}
.cx-credito-titulo{font-family:var(--cx-serif);font-size:18px;line-height:1.3;color:var(--cx-osso)}
.cx-credito .cx-p13{margin:0}