/* Meu Mapa — design system da linha D (roxo vivo + dourado brilhante), aprovada por Derek e Karol em 30/10/2026.
   Fonte da verdade: sistema/pwa-membros/design/BRIEF-CLAUDE-CODE.md (§4) e as telas D2, D3, D4 e D5d.
   Regras: público de 45 a 80 anos (grande, simples, óbvio); leitura longa sempre no branco suave; alvos de toque ≥ 44 px;
   contraste ≥ 4.5:1; nada inline (a CSP da área só aceita este arquivo); prefers-reduced-motion desliga toda animação.
   As peças em HTML saem de api/src/membros/ds.ts; a vitrine com todas elas fica em /componentes (MEMBROS_VITRINE=ligada). */

@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/m/newsreader.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('/m/newsreader-italico.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/m/hanken-grotesk.woff2') format('woff2');
}

:root {
  /* Roxo */
  --roxo: #5b3496;
  --roxo-escuro: #3a2068;
  --roxo-fundo: #2a1650;
  --lilas: #c9a7ff;
  --fundo-roxo: radial-gradient(120% 70% at 50% 30%, #5b3496 0%, #3a2068 55%, #2a1650 100%);
  /* Texto sobre roxo */
  --texto: #f6f0fc;
  --texto-2: #e2d6f2;
  --texto-3: #d8cceb;
  --texto-4: #c9bddc;
  /* Dourado */
  --ouro: #f0d48a;
  --ouro-claro: #fbe3a0;
  --ouro-forte: #c4963f;
  --sobre-ouro: #2a1650;
  --brilho-ouro: linear-gradient(100deg, #c4963f 0%, #d9ad55 22%, #fbe3a0 45%, #d9ad55 62%, #c4963f 100%); /* começa e termina na mesma cor: o brilho passa sem emenda */
  --brilho-titulo: linear-gradient(100deg, #c4963f 0%, #d9ad55 22%, #fff1c4 45%, #d9ad55 62%, #c4963f 100%);
  --esfera-ouro: radial-gradient(circle at 35% 30%, #fff1c4 0%, #f0d48a 42%, #c4963f 100%);
  /* Caixas translúcidas sobre roxo */
  --vidro: rgba(255, 255, 255, .1);
  --vidro-forte: rgba(255, 255, 255, .14);
  --borda-ouro: rgba(240, 212, 138, .45);
  --borda-ouro-forte: rgba(240, 212, 138, .7);
  --borda-lilas: rgba(201, 167, 255, .6);
  /* Leitura (branco suave) */
  --fundo-leitura: #f3eff6;
  --texto-leitura: #22163a;
  --citacao-fundo: #e8e0f2;
  /* Tipografia */
  --serifa: 'Newsreader', Georgia, 'Times New Roman', serif;
  --interface: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Medidas */
  --raio: 14px;
  --raio-caixa: 18px;
  --gutter: 24px;
  --altura-abas: 72px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font: 400 18px/1.55 var(--interface); color: var(--texto);
  background: var(--roxo-fundo) var(--fundo-roxo) no-repeat fixed;
}
body.claro { background: var(--fundo-leitura); color: var(--texto-leitura); }
a { color: var(--ouro); }
img, svg { max-width: 100%; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 3px; }
.claro .leitura :focus-visible { outline-color: var(--roxo); }
[hidden] { display: none !important; } /* .botao e outros com display próprio não podem vencer o hidden */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Coluna da tela ---------- */
.coluna {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh; overflow: hidden;
  padding: calc(52px + env(safe-area-inset-top)) var(--gutter) calc(36px + env(safe-area-inset-bottom));
}
.coluna { gap: 28px; }
.coluna.centro { align-items: center; text-align: center; }
.coluna.com-abas { padding-bottom: calc(var(--altura-abas) + 24px + env(safe-area-inset-bottom)); }
.coluna.colada { gap: 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
.empurra { margin-top: auto; }
.pilha { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pilha.larga { gap: 18px; }
.pilha.meio { align-items: center; }
.centro-texto { text-align: center; }
.respiro { margin-top: 40px; }

/* ---------- Texto ---------- */
.marca { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ouro); }
.marca-nome { font-size: 13px; font-weight: 600; letter-spacing: .32em; padding-left: .32em; }
.marca svg { width: 56px; height: 56px; }
.rotulo { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
.titulo { font: 500 30px/1.2 var(--serifa); color: var(--texto); }
.titulo-grande { font: 600 40px/1.1 var(--serifa); }
.frase { font: 400 25px/1.25 var(--serifa); color: var(--texto); }
.texto { font-size: 18px; line-height: 1.55; color: var(--texto-2); }
.texto strong { color: var(--ouro); font-weight: 700; }
.nota { font-size: 15px; line-height: 1.5; color: var(--texto-4); }
.titulo-ouro {
  background: var(--brilho-titulo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: ouro 3.5s linear infinite;
}

/* ---------- Botões ---------- */
.botao {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px;
  padding: 12px 20px; border: 0; border-radius: var(--raio); cursor: pointer; text-align: center; text-decoration: none;
  font: 700 18px/1.25 var(--interface); -webkit-tap-highlight-color: transparent;
}
.botao-ouro {
  background: var(--brilho-ouro); background-size: 200% 100%; color: var(--sobre-ouro);
  box-shadow: 0 8px 28px rgba(240, 212, 138, .38); animation: ouro 3.5s linear infinite;
}
.botao-ouro:active { transform: translateY(1px); box-shadow: 0 4px 16px rgba(240, 212, 138, .38); }
.botao-ouro.grande { min-height: 60px; border-radius: 16px; font-size: 19px; }
.botao-contorno {
  min-height: 52px; background: transparent; color: var(--texto); border: 1.5px solid var(--borda-lilas);
  font-weight: 500; font-size: 17px;
}
.botao-contorno:active { background: var(--vidro); }
.botao svg { flex: 0 0 auto; width: 22px; height: 22px; }

/* ---------- Pílulas ---------- */
.pilula {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 99px;
  background: var(--vidro-forte); color: var(--texto); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.pilula-ouro { background: rgba(240, 212, 138, .18); color: var(--ouro); font-size: 14px; }
span.pilula, span.pilula-ouro { min-height: 40px; }

/* ---------- Caixas translúcidas ---------- */
.caixa {
  width: 100%; padding: 18px; border-radius: var(--raio-caixa); background: var(--vidro);
  border: 1.5px solid var(--borda-ouro); display: flex; flex-direction: column; gap: 12px;
}
.caixa.brilho { padding: 26px 16px; border-radius: 20px; background: rgba(255, 255, 255, .08); border-color: var(--borda-ouro-forte); box-shadow: 0 0 30px rgba(240, 212, 138, .18); text-align: center; gap: 6px; }
.caixa-nome { font: 400 28px/1.2 var(--serifa); }
.caixa-sub { font-size: 17px; color: var(--texto-4); }
.caixa-titulo { font: 500 22px/1.25 var(--serifa); text-align: center; }
.caixa-texto { font-size: 15px; color: var(--texto-3); text-align: center; }

/* ---------- Estado (um padrão só no app inteiro) ---------- */
.estado {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 32px; padding: 4px 12px;
  border-radius: 99px; font-size: 15px; font-weight: 700; line-height: 1.25; max-width: 100%;
}
.estado::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.estado-pronto { background: var(--brilho-ouro); background-size: 200% 100%; color: var(--sobre-ouro); }
.estado-pronto::before { width: auto; height: auto; border-radius: 0; content: '✦'; font-size: 13px; }
.estado-preparando { background: rgba(201, 167, 255, .16); color: #e6d8ff; border: 1.5px solid var(--borda-lilas); }
.estado-preparando::before { background: var(--lilas); animation: respirar 1.6s ease-in-out infinite; }
.estado-liberado { background: var(--vidro); color: var(--texto-3); border: 1.5px dashed rgba(216, 204, 235, .55); }
.estado-liberado::before { border: 2px solid var(--texto-3); background: transparent; }

/* ---------- Cartão de produto ---------- */
.produto {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; width: 100%; min-height: 96px;
  padding: 16px; border-radius: var(--raio-caixa); background: var(--vidro); border: 1.5px solid var(--borda-ouro);
  color: var(--texto); text-decoration: none;
}
.produto.pronto { border-color: var(--borda-ouro-forte); box-shadow: 0 0 24px rgba(240, 212, 138, .14); }
.produto.preparando, .produto.liberado { border-color: rgba(201, 167, 255, .35); }
.produto-icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(240, 212, 138, .14); color: var(--ouro); font-size: 26px; }
.produto.pronto .produto-icone { background: var(--esfera-ouro); color: var(--sobre-ouro); }
.produto-meio { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.produto-nome { font: 500 21px/1.2 var(--serifa); }
.produto-desc { font-size: 15px; line-height: 1.4; color: var(--texto-3); }
.produto-seta { font-size: 28px; color: var(--ouro); }

/* ---------- Etapas (Mapa em preparação) ---------- */
.etapas { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; border-top: 1px solid rgba(201, 167, 255, .25); }
.etapa { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 0; border-bottom: 1px solid rgba(201, 167, 255, .25); font-size: 17px; line-height: 1.4; }
.etapa-marca { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.etapa.feita .etapa-marca { background: var(--esfera-ouro); color: var(--sobre-ouro); }
.etapa.agora { font-weight: 700; }
.etapa.agora .etapa-marca { border: 2px solid var(--ouro); }
.etapa.agora .etapa-marca::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ouro); animation: respirar 1.6s ease-in-out infinite; }
.etapa.falta { color: var(--texto-4); }
.etapa.falta .etapa-marca { border: 2px solid rgba(201, 189, 220, .5); }

/* ---------- Campo de formulário sobre roxo ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.campo label { font-size: 16px; font-weight: 600; color: var(--texto-3); }
.campo input {
  width: 100%; min-height: 58px; padding: 0 18px; border-radius: var(--raio); border: 1.5px solid var(--borda-lilas);
  background: rgba(255, 255, 255, .1); color: var(--texto); font: 400 19px var(--interface);
}
.campo input::placeholder { color: rgba(216, 204, 235, .7); }
.campo input:focus { border-color: var(--ouro); outline: 3px solid rgba(240, 212, 138, .4); outline-offset: 1px; }
.campo-ajuda { font-size: 15px; color: var(--texto-4); }
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.campo legend { padding: 0; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--texto-3); }
.data-campos { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.data-campo { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--texto-4); }
.data-campo input { width: 100%; min-height: 58px; padding: 0 12px; border-radius: var(--raio); border: 1.5px solid var(--borda-lilas); background: rgba(255, 255, 255, .1); color: var(--texto); font: 400 21px var(--interface); text-align: center; }
.data-campo input:focus { border-color: var(--ouro); outline: 3px solid rgba(240, 212, 138, .4); outline-offset: 1px; }

/* ---------- "Está com dificuldades para acessar?" ---------- */
.dificuldade { width: 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid rgba(201, 167, 255, .25); }
.dificuldade-titulo { font-size: 17px; font-weight: 700; }
.titulo-secao { font: 500 24px/1.2 var(--serifa); }

/* ---------- Avisos (o que aconteceu, o que fazer) ---------- */
.aviso { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--raio); background: var(--vidro-forte); border: 1.5px solid var(--borda-ouro); text-align: left; font-size: 16px; line-height: 1.45; color: var(--texto); }
.aviso-icone { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro); color: var(--sobre-ouro); font-weight: 800; }
.aviso.erro { border-color: #ffb4c8; }
.aviso.erro .aviso-icone { background: #ffb4c8; }
.aviso strong { display: block; font-size: 17px; margin-bottom: 2px; }

/* ---------- Aviso de instalar o app ---------- */
.instalar {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 6px 6px 16px; border-radius: var(--raio);
  background: rgba(255, 255, 255, .12); font-size: 15px; line-height: 1.35;
}
.instalar[hidden] { display: none; }
.instalar-link { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--texto); text-decoration: none; }
.instalar-link svg { flex: 0 0 22px; width: 22px; height: 22px; }
.instalar-link b { color: var(--ouro); white-space: nowrap; }
.coluna.colada .instalar { margin: 0 -8px; width: calc(100% + 16px); }
.instalar-fechar { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--texto); font-size: 24px; line-height: 1; cursor: pointer; }
.instalar-fechar:active { background: var(--vidro); }

/* ---------- Abas (só 3: Meu Mapa, Produtos, Ajuda) ---------- */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 480px; margin: 0 auto; padding: 8px 0 calc(14px + env(safe-area-inset-bottom));
  background: rgba(26, 12, 52, .94); border-top: 1px solid rgba(240, 212, 138, .18);
}
.abas.parada { position: static; margin-top: 24px; }
.aba { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; color: var(--texto-3); text-decoration: none; font-size: 15px; font-weight: 500; } /* 15 px: pedido do Derek, 30/10 */
.aba svg { width: 26px; height: 26px; }
.aba[aria-current='page'] { color: var(--ouro); font-weight: 700; }

/* ---------- Progresso ("X de 9 revelados") ---------- */
.progresso { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.progresso-linha { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; }
.progresso-linha span:last-child { color: var(--ouro); }
.progresso-barra { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.progresso-barra i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #c4963f, #fbe3a0); box-shadow: 0 0 12px rgba(240, 212, 138, .8); transition: width .5s ease; }
.progresso-barra[data-pct='5'] i { width: 5%; } .progresso-barra[data-pct='10'] i { width: 10%; }
.progresso-barra[data-pct='15'] i { width: 15%; } .progresso-barra[data-pct='20'] i { width: 20%; }
.progresso-barra[data-pct='25'] i { width: 25%; } .progresso-barra[data-pct='30'] i { width: 30%; }
.progresso-barra[data-pct='35'] i { width: 35%; } .progresso-barra[data-pct='40'] i { width: 40%; }
.progresso-barra[data-pct='45'] i { width: 45%; } .progresso-barra[data-pct='50'] i { width: 50%; }
.progresso-barra[data-pct='55'] i { width: 55%; } .progresso-barra[data-pct='60'] i { width: 60%; }
.progresso-barra[data-pct='65'] i { width: 65%; } .progresso-barra[data-pct='70'] i { width: 70%; }
.progresso-barra[data-pct='75'] i { width: 75%; } .progresso-barra[data-pct='80'] i { width: 80%; }
.progresso-barra[data-pct='85'] i { width: 85%; } .progresso-barra[data-pct='90'] i { width: 90%; }
.progresso-barra[data-pct='95'] i { width: 95%; } .progresso-barra[data-pct='100'] i { width: 100%; }

/* ---------- Emblema (Mapa pronto) e halo de fundo (confirmação) ---------- */
.emblema { position: relative; width: 240px; height: 240px; flex: 0 0 auto; }
.emblema svg { position: absolute; inset: 0; width: 240px; height: 240px; overflow: visible; }
.emblema .anel-1 { animation: girar 50s linear infinite; transform-origin: 120px 120px; }
.emblema .anel-2 { animation: girar-volta 34s linear infinite; transform-origin: 120px 120px; }
.emblema-centro {
  position: absolute; left: 66px; top: 66px; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
  background: var(--esfera-ouro); color: var(--sobre-ouro); font-size: 46px; animation: pulsar-grande 2.8s ease-in-out infinite;
}
.emblema-preparando .emblema-centro { background: rgba(255, 255, 255, .1); border: 1.5px solid var(--borda-ouro); color: var(--ouro); animation: respirar-centro 2.4s ease-in-out infinite; }
.emblema-preparando .arco { animation: girar 3.2s linear infinite; transform-origin: 120px 120px; }
.halo { position: absolute; left: 50%; top: -160px; width: 420px; height: 420px; margin-left: -210px; pointer-events: none; }
.halo g { animation: girar 70s linear infinite; transform-origin: 210px 210px; }
.coluna > :not(.halo) { position: relative; }
.estrelinha { animation: brilho 2.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.estrelinha:nth-of-type(2) { animation-delay: .8s; }
.estrelinha:nth-of-type(3) { animation-delay: 1.6s; }
.estrelinha:nth-of-type(4) { animation-delay: 1.1s; }
.sobe { animation: sobe .8s ease-out both; }

/* ---------- Mandala interativa ---------- */
.mandala { position: relative; width: 280px; height: 280px; margin: 0 auto; flex: 0 0 auto; }
.mandala > svg { position: absolute; inset: 0; width: 280px; height: 280px; overflow: visible; }
.mandala .anel-1 { animation: girar 60s linear infinite; transform-origin: 140px 140px; }
.mandala .anel-2 { animation: girar-volta 40s linear infinite; transform-origin: 140px 140px; }
.no {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 500 20px/1 var(--serifa); text-decoration: none; background: var(--roxo-escuro); color: var(--texto);
  border: 2px solid rgba(201, 167, 255, .7); transition: transform .2s ease; -webkit-tap-highlight-color: transparent;
}
.no::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; } /* alvo de toque de 58 px */
.no:hover { transform: scale(1.1); }
.no.aceso { background: var(--esfera-ouro); color: var(--sobre-ouro); border: 0; animation: pulsar 3s ease-in-out infinite; }
.no.aceso.agora-mesmo { animation: pop .5s ease-out, pulsar 3s ease-in-out .5s infinite; }
.no[aria-current='true'] { outline: 3px solid var(--ouro-claro); outline-offset: 3px; }
.no.p0 { left: 117px; top: 13px; } .no.p1 { left: 191px; top: 43px; } .no.p2 { left: 221px; top: 117px; }
.no.p3 { left: 191px; top: 191px; } .no.p4 { left: 117px; top: 221px; } .no.p5 { left: 43px; top: 191px; }
.no.p6 { left: 13px; top: 117px; } .no.p7 { left: 43px; top: 43px; }
.no-centro {
  position: absolute; left: 89px; top: 89px; width: 102px; height: 102px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none;
  background: var(--esfera-ouro); color: var(--sobre-ouro); animation: pulsar 3s ease-in-out infinite;
}
.no-centro-num { font: 500 44px/1 var(--serifa); }
.no-centro-rotulo { font-size: 10px; font-weight: 700; letter-spacing: .16em; }

/* ---------- Leitura (branco suave) ---------- */
.leitura-topo {
  position: relative; overflow: hidden; color: var(--texto); padding: env(safe-area-inset-top) 0 72px;
  background: linear-gradient(180deg, #3a2068 0%, #5b3496 62%, #b29bd6 86%, #f3eff6 100%);
}
.leitura-topo > svg { position: absolute; right: 0; top: 0; width: 120px; height: 220px; }
.leitura-barra { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 20px; }
.leitura-cabeca { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 0; }
.leitura-titulo { font: 500 36px/1.12 var(--serifa); }
.leitura-subtitulo { font: italic 400 20px/1.45 var(--serifa); color: var(--texto-2); }
.leitura-corpo { max-width: 480px; margin: 0 auto; }
.leitura { padding: 4px 26px 40px; font: 400 20px/1.62 var(--serifa); color: var(--texto-leitura); }
.leitura p { margin: 0 0 22px; }
.leitura > p:first-of-type::first-letter { float: left; font-size: 66px; line-height: .9; padding: 6px 10px 0 0; color: var(--roxo); }
.leitura h2, .leitura h3 { margin: 38px 0 22px; font: 700 15px/1.4 var(--interface); letter-spacing: .1em; text-transform: uppercase; color: var(--roxo); }
.leitura blockquote { margin: 30px 0; padding: 18px 20px; border-radius: 16px; background: var(--citacao-fundo); border-left: 3px solid var(--ouro-forte); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--roxo-escuro); }
.leitura blockquote p { margin: 0; }
.leitura ul { margin: 0 0 22px; padding-left: 26px; }
.leitura li { margin-bottom: 10px; }
.leitura li::marker { color: var(--ouro-forte); }
.leitura strong { color: var(--roxo-escuro); }
.leitura a { color: var(--roxo); }

/* ---------- Fim do capítulo ---------- */
.revelado {
  margin: 0 20px 36px; padding: 22px 16px; border-radius: 22px; text-align: center; color: var(--texto);
  background: radial-gradient(120% 120% at 50% 0%, #5b3496 0%, #3a2068 100%); display: flex; flex-direction: column; gap: 14px;
}
.revelado-estrela { font-size: 30px; line-height: 1; color: var(--ouro-claro); }
.revelado-titulo { font: 500 22px/1.25 var(--serifa); }
.revelado-texto { font-size: 15px; color: var(--texto-2); }
.revelado .botao, .caixa .botao { min-height: 54px; font-size: 17px; }

/* ---------- Oferta (o que ela ainda não tem) ---------- */
.oferta { border-style: dashed; border-color: var(--borda-ouro); }
.oferta-preco { align-self: flex-start; }
.oferta-convite { font-size: 16px; font-weight: 700; color: var(--ouro); }
.produto.oferta { grid-template-columns: 56px 1fr; }
.estado-passo { background: rgba(240, 212, 138, .16); color: var(--ouro); border: 1.5px solid var(--borda-ouro-forte); }
.estado-passo::before { background: var(--ouro); animation: respirar 1.6s ease-in-out infinite; }
.produto.passo { border-color: var(--borda-ouro-forte); }

/* ---------- Telas no branco: progresso, cartões que abrem (dias, meses), calendário ---------- */
.claro .progresso-linha { color: var(--roxo-escuro); }
.claro .progresso-linha span:last-child { color: #7d5a14; } /* ouro escuro: contraste 5:1 no branco (o ouro-forte dava 2,4:1) */
.claro .progresso-barra { background: #e1d7ee; }
.pagina-clara { display: flex; flex-direction: column; gap: 14px; padding: 8px 20px 40px; }
.pagina-clara > .progresso { padding: 0 6px 6px; }
.pagina-clara.com-abas { padding-bottom: calc(var(--altura-abas) + 40px + env(safe-area-inset-bottom)); }
.pagina-clara .titulo-secao { margin-top: 18px; padding: 0 6px; color: var(--roxo-escuro); }
.pagina-clara .texto-claro { padding: 0 6px; font-size: 17px; line-height: 1.55; color: #4a3b66; }
.dobra { border-radius: var(--raio-caixa); background: #fff; border: 1.5px solid #e1d7ee; color: var(--texto-leitura); }
.dobra > summary, .dobra-linha {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; list-style: none; cursor: pointer;
  font: 600 18px/1.35 var(--interface); color: var(--roxo-escuro);
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary::after { content: '›'; margin-left: auto; font-size: 26px; color: var(--ouro-forte); transition: transform .2s; }
.dobra[open] > summary::after { transform: rotate(90deg); }
.dobra > summary > span:first-of-type:not(.dobra-marca) { flex: 1; }
.dobra .leitura { padding: 4px 20px 20px; font-size: 19px; }
.dobra .leitura > p:first-of-type::first-letter, .hoje-cartao .leitura > p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; }
.dobra .leitura > :is(h2, h3):first-child, .hoje-cartao .leitura > :is(h2, h3):first-child { margin-top: 6px; }
.dobra-marca { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #cbbde0; color: #6e5d8c; font-size: 15px; font-weight: 700; }
.dobra.feito .dobra-marca { border: 0; background: var(--esfera-ouro); color: var(--sobre-ouro); }
.dobra.fechado { background: transparent; border-style: dashed; }
.dobra.fechado .dobra-linha { cursor: default; color: #6e5d8c; font-weight: 500; }
.dobra.forte { border-color: var(--ouro-forte); }
.selo { flex: 0 0 auto; padding: 4px 10px; border-radius: 99px; font: 700 13px/1.3 var(--interface); background: #efe7f8; color: var(--roxo); }
.selo.forte { background: var(--brilho-ouro); background-size: 200% 100%; color: var(--sobre-ouro); }
.hoje-cartao { display: flex; flex-direction: column; gap: 10px; padding: 22px 0 22px; border-radius: 22px; background: #fff; border: 2px solid var(--ouro-forte); box-shadow: 0 8px 28px rgba(91, 52, 150, .12); }
.hoje-cartao > .rotulo, .hoje-cartao > h2 { padding: 0 22px; }
.hoje-cartao > .rotulo { color: var(--ouro-forte); }
.hoje-cartao > h2 { font: 500 28px/1.2 var(--serifa); color: var(--roxo-escuro); }
.hoje-cartao .leitura { padding: 6px 22px 0; }
.hoje-cartao form { padding: 0 22px; }
.mantra { margin: 0 0 22px; padding: 18px 20px; border-radius: 16px; background: var(--citacao-fundo); text-align: center; }
.mantra-texto { font: italic 500 24px/1.4 var(--serifa); color: var(--roxo-escuro); }
.dica { font-size: 16px; color: #6e5d8c; }
.oracao { margin-top: 26px; padding-top: 22px; border-top: 1px solid #e1d7ee; }
.area-cartao { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px; border-radius: 22px; background: #fff; border: 1.5px solid #e1d7ee; }
.area-cartao > h2 { font: 500 26px/1.2 var(--serifa); color: var(--roxo-escuro); padding: 0 4px; }
.area-cartao > p { padding: 0 4px; font-size: 17px; color: #4a3b66; }
.area-cartao > p strong { color: var(--roxo-escuro); }
.area-cartao .dobra { border-color: #ece5f4; }
.grafico { width: 100%; height: auto; }
.grafico text { font: 600 10px var(--interface); fill: #6e5d8c; }
.barra-1 { fill: #e1d7ee; } .barra-2 { fill: #b79ae0; } .barra-3 { fill: #c4963f; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 16px 12px; border-radius: 22px; background: #fff; border: 1.5px solid #e1d7ee; }
.cal-sem { text-align: center; font: 700 13px/2 var(--interface); color: #6e5d8c; }
.cal-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; text-decoration: none; color: var(--roxo-escuro); background: #f6f2fa; }
.cal-dia strong { font-size: 18px; line-height: 1.1; }
.cal-dia small { font-size: 12px; color: #6e5d8c; }
.cal-dia.forte { background: var(--esfera-ouro); color: var(--sobre-ouro); }
.cal-dia.forte small { color: var(--sobre-ouro); }
.cal-dia.hoje { outline: 3px solid var(--roxo); outline-offset: 1px; }
.leitura-fim { padding: 0 26px 40px; }

/* ---------- Player e passo a passo ---------- */
.midia { width: 100%; }
audio.midia { height: 54px; }
video.midia, .midia-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
.passos { margin: 0; padding-left: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 14px; }
.passos li { counter-increment: passo; display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.5; color: var(--texto-2); }
.passos li::before { content: counter(passo); flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--esfera-ouro); color: var(--sobre-ouro); font-weight: 800; font-size: 16px; }
.passos strong { color: var(--texto); }
.ico-inline { width: 22px; height: 22px; vertical-align: -5px; stroke: currentColor; }
.eh-iphone .so-android, .eh-android .so-iphone { display: none; }
.so-app { display: none; }
.eh-app .so-app { display: flex; }
.coluna > .pilula { align-self: flex-start; }

/* ---------- Vitrine dos componentes (só em /componentes) ---------- */
.vitrine-secao { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 28px 0; border-bottom: 1px solid rgba(201, 167, 255, .2); }
.vitrine-nome { font: 700 13px/1.4 var(--interface); letter-spacing: .14em; text-transform: uppercase; color: var(--lilas); }
.vitrine-secao > p.nota { margin-top: -6px; }
.vitrine-amostras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vitrine-cor { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-3); }
.vitrine-cor i { display: block; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); }
.c-roxo { background: #5b3496; } .c-roxo-escuro { background: #3a2068; } .c-roxo-fundo { background: #2a1650; }
.c-lilas { background: #c9a7ff; } .c-ouro { background: #f0d48a; } .c-ouro-brilho { background: var(--brilho-ouro); }
.c-leitura { background: #f3eff6; } .c-texto-leitura { background: #22163a; }
.vitrine-fonte-serifa { font: 500 28px/1.2 var(--serifa); }
.vitrine-fonte-interface { font: 600 20px/1.3 var(--interface); }
.vitrine-leitura { margin: 0 calc(-1 * var(--gutter)); border-radius: 22px; overflow: hidden; background: var(--fundo-leitura); }

/* ---------- Animações ---------- */
@keyframes ouro { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes girar-volta { to { transform: rotate(-360deg); } }
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 212, 138, .55), 0 0 30px rgba(240, 212, 138, .45); }
  50% { box-shadow: 0 0 0 14px rgba(240, 212, 138, 0), 0 0 50px rgba(240, 212, 138, .7); }
}
@keyframes pulsar-grande {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 212, 138, .55), 0 0 40px rgba(240, 212, 138, .5); }
  50% { box-shadow: 0 0 0 18px rgba(240, 212, 138, 0), 0 0 70px rgba(240, 212, 138, .8); }
}
@keyframes brilho { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes respirar-centro { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 212, 138, .2); } 50% { box-shadow: 0 0 40px rgba(240, 212, 138, .35); } }
@keyframes respirar { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Estados de falha (etapa 5) ---------- */
.sem-rede { position: sticky; top: 0; z-index: 60; padding: 14px 20px; padding-top: calc(14px + env(safe-area-inset-top)); background: #ffe3ea; color: #4a1030; font: 700 17px/1.4 var(--interface); text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.midia-erro { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.midia-erro[hidden] { display: none !important; }
.midia-bloco .aviso { color: var(--texto); }

/* ---------- Telas estreitas e letra ampliada (testes antes da virada) ---------- */
/* A Mandala tem 280 px; em celular dobrável ou com zoom de 200% ela encolhe inteira, em vez de vazar para o lado. */
@media (max-width: 340px) { .mandala { zoom: .82; } }
@media (max-width: 277px) { .mandala { zoom: .66; } }
@media (max-width: 232px) { .mandala { zoom: .52; } }
.leitura-barra { flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.dobra > summary { flex-wrap: wrap; row-gap: 6px; }
.claro .hoje-cartao > .rotulo { color: #7d5a14; }
.leitura { overflow-wrap: break-word; hyphens: auto; }