/* Leitura Vibracional: telas do quiz em creme, vinho e dourado; telas de vídeo na noite estrelada. */
:root{
  --creme:#f7efe4;
  --creme-linha:#e9dccb;
  --vinho:#7a2e5c;
  --vinho-claro:#9c4378;
  --vinho-fundo:#4f1d3c;
  --ouro:#e0b04a;
  --ouro-fundo:#b78427;
  --ouro-claro:#f6e3b4;
  --verde:#1fa64a;
  --verde-fundo:#168a3b;
  --texto:#3a2233;
  --texto-leve:#6d5565;
  --erro:#b3261e;
  --erro-fundo:#fdecea;
  --noite:#130a16;
  --raio:14px;
  --sombra:0 6px 18px rgba(79,29,60,.12);
  --barra:8px;
  --topo:26px;
  --base:48px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--creme)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--creme);color:var(--texto);
  font-family:Lexend,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;overflow-wrap:break-word}
img,svg{max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
:focus-visible{outline:3px solid var(--vinho);outline-offset:3px}
.escuro :focus-visible{outline-color:var(--ouro)}
[tabindex="-1"]:focus{outline:none}
.sem-js{margin:16px;padding:14px 16px;border-radius:12px;background:var(--ouro-claro);color:var(--vinho-fundo);font-weight:600;text-align:center}

/* barra de progresso no topo */
.barra-topo{position:sticky;top:0;z-index:5}
.trilho{height:var(--barra);width:100%;background:var(--creme-linha);overflow:hidden}
.trilho span{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,var(--ouro-fundo),var(--ouro));border-radius:0 6px 6px 0;transition:width .45s ease}

/* palco */
.palco{position:relative;z-index:1;width:100%;max-width:500px;margin:0 auto;
  padding:var(--topo) max(16px,env(safe-area-inset-right)) var(--base) max(16px,env(safe-area-inset-left))}
.etapa{animation:surge .32s ease-out both}
@keyframes surge{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tela-pergunta{display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - var(--barra) - var(--topo) - var(--base));
  min-height:calc(100dvh - var(--barra) - var(--topo) - var(--base));padding-bottom:4vh}

/* abertura */
.titulo{margin:4px 0 20px;font-size:clamp(19px,5.4vw,25px);line-height:1.35;font-weight:700;text-align:center;text-wrap:balance}
.realce{background:var(--ouro);color:var(--vinho-fundo);padding:0 .28em;border-radius:7px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.aviso{display:flex;align-items:center;gap:12px;margin:0 0 24px;padding:14px 16px;background:#fbecc9;border:1px solid #edd395;border-left:5px solid var(--ouro);border-radius:12px;color:var(--vinho-fundo);font-size:16px;line-height:1.45}
.aviso p{margin:0}
.aviso svg{flex:none}
.chamada{margin:0 0 16px;font-size:clamp(17px,4.8vw,20px);font-weight:600;text-align:center}
.generos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.genero{display:flex;flex-direction:column;padding:0;border:0;border-radius:var(--raio);overflow:hidden;background:var(--vinho);box-shadow:var(--sombra);text-align:left;transition:transform .15s ease,box-shadow .15s ease}
.genero img{display:block;width:100%;height:auto;aspect-ratio:480/637;object-fit:cover;background:var(--vinho-fundo)}
.genero-rotulo{display:block;padding:12px 14px;background:var(--vinho);border-top:3px solid var(--ouro);color:#fff;font-size:clamp(16px,4.6vw,19px);font-weight:700}
.genero-rotulo .seta{color:var(--ouro);margin-right:4px}
.genero:active{transform:translateY(1px) scale(.99)}
.genero[aria-pressed="true"]{outline:3px solid var(--ouro);outline-offset:2px}
.privacidade{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px 0 10px;font-size:14.5px;color:var(--texto-leve)}
.privacidade svg{flex:none}
.privacidade strong{color:var(--texto)}
.prova{margin:0;font-size:14.5px;color:var(--texto-leve);text-align:center}

/* perguntas */
.pergunta{margin:0 0 22px;font-size:clamp(18px,5vw,22px);line-height:1.3;font-weight:700;text-align:center;text-wrap:balance}
.pergunta label{cursor:default}
.faixa{margin:0 0 18px;padding:12px 14px;background:var(--vinho);border-bottom:4px solid var(--ouro);border-radius:12px;color:#fff;font-size:clamp(15px,4.4vw,19px);line-height:1.3;font-weight:700;text-align:center;letter-spacing:.01em;text-wrap:balance}
.grade{display:grid;gap:10px;margin:0 auto;width:100%}
.g2{grid-template-columns:1fr 1fr;max-width:360px}
.g2.meio .op:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
.g3{grid-template-columns:repeat(3,1fr);max-width:372px}
.g3 .op:last-child:nth-child(3n+1){grid-column:2}
.dias{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:400px;margin:0 auto}
.op{min-height:50px;padding:10px 8px;border:0;border-bottom:4px solid var(--ouro);border-radius:10px;background:#fff;color:var(--vinho-fundo);font-size:17px;font-weight:600;line-height:1.2;box-shadow:0 2px 8px rgba(79,29,60,.08);transition:background-color .15s ease,color .15s ease,transform .1s ease}
.dias .op{width:48px;height:48px;min-height:48px;padding:0}
.op:active{transform:translateY(2px);box-shadow:none}
.op[aria-pressed="true"]{background:var(--vinho);color:#fff}
.cartoes{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:360px;margin:0 auto;width:100%}
.cartao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:108px;padding:14px 6px 12px;border:2px solid var(--vinho);border-radius:var(--raio);background:linear-gradient(160deg,var(--vinho-claro),var(--vinho));color:#fff;font-size:clamp(14px,4vw,16px);font-weight:600;line-height:1.2;box-shadow:var(--sombra);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.cartao:active{transform:translateY(1px) scale(.98)}
.cartao[aria-pressed="true"]{border-color:var(--ouro);box-shadow:0 0 0 3px rgba(224,176,74,.45),var(--sombra)}
.cartoes.grandes{max-width:420px;gap:14px}
.cartoes.grandes .cartao{min-height:136px;font-size:clamp(15px,4.4vw,18px);font-weight:700}
.ic{width:46px;height:46px;fill:none;stroke:var(--ouro-claro);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.grandes .ic{width:58px;height:58px}
.ic .cheio{fill:var(--ouro);stroke:none}
.ic .ac{stroke:var(--ouro)}
.voltar{display:block;margin:28px auto 0;min-width:150px;padding:11px 30px;border:2px solid var(--vinho-claro);border-radius:10px;background:transparent;color:var(--vinho);font-size:16px;font-weight:600;transition:background-color .15s ease,color .15s ease}

/* nome e e-mail */
.form-nome{display:flex;flex-direction:column;align-items:center}
.campo{display:block;width:100%;max-width:320px;height:56px;margin:0 auto;padding:0 18px;border:2px solid var(--vinho);border-radius:12px;background:#fff;color:var(--texto);font-size:18px;font-weight:500;-webkit-appearance:none;appearance:none;box-shadow:inset 0 1px 3px rgba(79,29,60,.08)}
.campo::placeholder{color:#7d6873;font-weight:400}
.campo:focus{outline:none;border-color:var(--ouro-fundo);box-shadow:0 0 0 4px rgba(224,176,74,.45)}
.campo[aria-invalid="true"]{border-color:var(--erro);background:var(--erro-fundo)}
.erro{width:100%;max-width:340px;margin:10px auto 0;padding:9px 12px;border-radius:10px;background:var(--erro-fundo);color:var(--erro);font-size:14.5px;font-weight:500;line-height:1.4;text-align:center}
.erro p{margin:0}
.erro.dica-email{background:#fff6df;color:var(--vinho-fundo)}
.dica-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.dica-acoes button{min-height:44px;padding:12px 18px;border:0;border-radius:999px;background:#157a35;color:#fff;font-size:14px;font-weight:600}
.dica-acoes .nao{background:#fff;color:var(--texto);box-shadow:inset 0 0 0 1px #d9c9d2}
.btn-verde{display:block;width:100%;max-width:360px;margin:18px auto 0;padding:15px 20px;border:0;border-radius:999px;background:var(--verde);color:#fff;font-size:clamp(19px,4.9vw,20px);font-weight:700;line-height:1.25;text-align:center;text-wrap:balance;text-decoration:none;box-shadow:0 8px 18px rgba(31,166,74,.35);transition:background-color .15s ease,transform .1s ease}
.btn-verde:active{transform:translateY(2px)}
.btn-verde:disabled{opacity:.75;cursor:progress}

/* telas escuras (cálculo e vídeos) */
.escuro,.escuro body{background:var(--noite)}
body.escuro{color:#f4ebf1}
body.escuro::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,10,22,.55) 0%,rgba(19,10,22,.78) 55%,rgba(19,10,22,.92) 100%),url("/img/fundo.webp?v=1") center top/cover no-repeat,var(--noite)}
body.escuro .barra-topo{display:none}
.carregando{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);min-height:calc(100dvh - 120px);text-align:center}
.mandala{margin-bottom:18px;animation:gira 6s linear infinite;filter:drop-shadow(0 0 12px rgba(224,176,74,.55))}
@keyframes gira{to{transform:rotate(360deg)}}
.carregando-txt{margin:0 0 18px;color:#fff;font-size:clamp(19px,5.4vw,24px);font-weight:600}
.carregando-trilho{width:100%;max-width:320px;height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.carregando-trilho span{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ouro-fundo),var(--ouro),#fff0c7)}
.carregando-trilho span.encher{animation:enche 4s linear forwards}
@keyframes enche{from{width:0}to{width:100%}}

.tela-video{padding-top:4px}
.titulo-video{margin:0 0 18px;color:#fff;font-size:clamp(19px,5.4vw,25px);line-height:1.35;font-weight:700;text-align:center;text-wrap:balance}
.titulo-video .nome{color:var(--ouro)}
.moldura{position:relative;width:100%;max-width:400px;min-height:240px;margin:0 auto;border-radius:12px;background:rgba(0,0,0,.35);
  box-shadow:0 0 0 1px rgba(224,176,74,.35),0 18px 40px rgba(0,0,0,.45)}
.moldura::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(224,176,74,.3);border-top-color:var(--ouro);border-radius:50%;animation:gira .9s linear infinite;pointer-events:none}
.moldura.pronto{min-height:0;background:transparent}
.moldura.pronto::after{display:none}
.falha{max-width:400px;margin:14px auto 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(224,176,74,.45);color:#f4ebf1;font-size:15px;text-align:center}
.falha p{margin:0 0 10px}
.btn-tentar{min-height:46px;padding:12px 22px;border:0;border-radius:999px;background:var(--ouro);color:var(--vinho-fundo);font-size:15px;font-weight:700}
.caixa-email{max-width:400px;margin:22px auto 0;padding:18px 16px 20px;border:1px solid rgba(224,176,74,.5);border-radius:var(--raio);background:rgba(30,14,30,.72);text-align:center;animation:surge .45s ease-out both}
.caixa-email-txt{margin:0 0 14px;color:#fff;font-size:17px;font-weight:600;line-height:1.4}
.caixa-email-txt label{cursor:default}
.caixa-email .campo,.caixa-email .btn-verde{max-width:100%}
.pg-leitura .palco{padding-top:22px}

@media (hover:hover) and (pointer:fine){
  .genero:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(79,29,60,.22)}
  .op:not([aria-pressed="true"]):hover{background:#fff7e8}
  .cartao:hover{transform:translateY(-2px);border-color:var(--ouro)}
  .voltar:hover{background:var(--vinho);border-color:var(--vinho);color:#fff}
  .btn-verde:not(:disabled):hover{background:var(--verde-fundo)}
}

/* computador: vídeo do tamanho da tela e e-mail ao lado */
@media (min-width:600px){
  .moldura{max-width:min(400px,calc((100vh - 150px) * .5625))}
  .caixa-email{max-width:max(300px,min(400px,calc((100vh - 150px) * .5625)))}
  body.escuro .palco{padding-bottom:16px}
}
@media (min-width:768px){
  :root{--topo:40px}
  .abertura{max-width:480px;margin:0 auto}
  .titulo,.titulo-video{margin-left:-60px;margin-right:-60px}
}
@media (min-width:1024px){
  body.escuro .palco{max-width:1180px}
  .pg-quiz .tela-video{display:grid;grid-template-columns:minmax(0,1fr) min(400px,calc((100vh - 150px) * .5625)) minmax(0,1fr);align-items:start}
  .pg-quiz .tela-video>.titulo-video{grid-column:1/-1;grid-row:1;width:100%;max-width:760px;margin-left:auto;margin-right:auto}
  .pg-quiz .tela-video>.moldura{grid-column:2;grid-row:2}
  .pg-quiz .tela-video>.falha{grid-column:2;grid-row:3;width:100%}
  .pg-quiz .tela-video>.caixa-email{grid-column:3;grid-row:2;align-self:center;justify-self:start;width:calc(100% - 32px);max-width:380px;margin:0 0 0 32px}
}
@media (min-width:768px) and (max-height:920px){
  :root{--topo:24px}
  .titulo{margin-top:0;margin-bottom:16px;font-size:24px}
  .aviso{margin-bottom:18px;padding:12px 16px}
  .chamada{margin-bottom:12px}
  .genero img{aspect-ratio:480/540;object-position:center 20%}
  .genero-rotulo{padding:10px 14px}
  .privacidade{margin-top:18px}
}
@media (max-width:359px){
  .aviso{padding:12px;gap:10px;font-size:15px}
  .dias .op{width:46px;height:46px;min-height:46px;font-size:16px}
  .cartao{min-height:100px}
  .cartoes.grandes .cartao{min-height:120px}
  .privacidade,.prova{font-size:13.5px}
  .btn-verde{padding-left:12px;padding-right:12px;font-size:19px}
}
@media (max-width:430px) and (max-height:700px){
  .titulo{margin-bottom:14px}
  .aviso{margin-bottom:14px;padding:10px 12px}
  .chamada{margin-bottom:10px}
  .genero img{aspect-ratio:480/540;object-position:center 20%}
}
@media (max-width:599px) and (max-height:620px){
  :root{--topo:14px}
  .pg-leitura .palco{padding-top:14px}
  .tela-video{padding-top:0}
  .titulo-video{margin-bottom:10px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .etapa,.caixa-email,.mandala,.moldura::after{animation:none!important}
  .genero,.cartao,.op,.btn-verde,.trilho span{transition:none!important}
}