/* Camada de vidro (estilo Liquid Glass da Apple) sobre o sistema do diagnóstico. Pedido do Murilo, 06/11.
   Carregada depois de base.css e de form.css ou paginas.css: tirar o <link> volta ao visual anterior.
   - Fundo vivo: manchas de luz desfocadas (dourado, violeta, turquesa e azul) e uma textura fina por cima.
   - Cartões de vidro: translúcidos, com borda de luz no alto. Desfoque de verdade só onde o conteúdo passa
     por baixo (cabeçalho das perguntas, barra do botão, aviso do rascunho) e nos cartões do topo.
   - Ouro com brilho nos botões e nos destaques; vermelho, âmbar e verde em degradê nos números.
   - Menos movimento ou menos transparência no aparelho: versão calma e sólida no fim do arquivo. */

:root {
  --vidro-1: rgba(255, 255, 255, 0.065);
  --vidro-2: rgba(255, 255, 255, 0.025);
  --vidro-borda: rgba(255, 255, 255, 0.1);
  --sombra-vidro: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -16px rgba(1, 4, 12, 0.7);
  --borda-luz: linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0) 55%, rgba(217, 178, 106, 0.24) 100%);
  --grad-ouro: linear-gradient(135deg, #f8e1a3 0%, #e4bf76 40%, #c8984c 100%);
  --grad-ouro-texto: linear-gradient(180deg, #fbe7b4 0%, #dcb46c 100%);
  --grad-titulo: linear-gradient(180deg, #ffffff 30%, #c5d1e1 100%);
  --violeta: #8b7cf6;
  --turquesa: #34d5c0;
  --azul: #5b8cff;
}

/* ---------- Fundo vivo ---------- */
html { background: #050c18; }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: -12vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 50% 2%, rgba(217, 178, 106, 0.3), transparent 70%),
    radial-gradient(44vmax 36vmax at -6% 36%, rgba(124, 92, 255, 0.26), transparent 70%),
    radial-gradient(40vmax 34vmax at 106% 60%, rgba(45, 212, 191, 0.17), transparent 70%),
    radial-gradient(52vmax 40vmax at 38% 108%, rgba(37, 99, 235, 0.3), transparent 70%),
    linear-gradient(180deg, #060e1c 0%, #081525 50%, #050c18 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.heroi, .aplicacao { background: transparent; }
.rodape { border-color: rgba(255, 255, 255, 0.07); }

/* ---------- Vidro ---------- */
.cartao, .area, .passo-plano, .opcao, .checks li, .faq details, .bruno, .conteudos a, .cartao-case, .chip {
  background: linear-gradient(180deg, var(--vidro-1), var(--vidro-2));
  border-color: var(--vidro-borda);
  box-shadow: var(--sombra-vidro);
}
.tela-video { border-color: var(--vidro-borda); box-shadow: var(--sombra-vidro); }

/* Borda de luz: o brilho no alto do vidro (sem mudar o tamanho de nada) */
.cartao, .area, .passo-plano, .bruno, .tela-video { position: relative; isolation: isolate; }
.cartao::before, .area::before, .passo-plano::before, .bruno::before, .tela-video::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--borda-luz);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Desfoque de verdade (poucos elementos, para o celular não pesar) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cartao-dados, .cartao-saude, .cartao-valor, .cartao-final {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  }
}

/* ---------- Tipografia ---------- */
h1, .h2, .titulo-nivel, .pergunta h2, .calculando h2 { letter-spacing: -0.02em; }
.heroi-quiz h1, .finalizado h1 {
  background: var(--grad-titulo); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heroi-quiz h1 { font-size: 36px; line-height: 40px; letter-spacing: -0.035em; }
.heroi-quiz h1 .destaque, .finalizado h1 .nome {
  background: var(--grad-ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(217, 178, 106, 0.35));
}
.finalizado h1 { font-size: 30px; line-height: 36px; }
.heroi .sub, .finalizado p { color: #c3cfde; }
.olho, .pergunta .bloco { letter-spacing: 0.12em; }

/* ---------- Selos e pílulas ---------- */
.selo {
  background: linear-gradient(180deg, rgba(217, 178, 106, 0.18), rgba(217, 178, 106, 0.05));
  border-color: rgba(226, 189, 118, 0.45); color: #f1d394;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 28px rgba(217, 178, 106, 0.14);
}
.checks li svg { color: #f1d394; }

/* ---------- Botões ---------- */
.botao, .heroi .botao {
  background: var(--grad-ouro); color: #0b1526; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(120, 78, 18, 0.22), 0 12px 30px -8px rgba(217, 178, 106, 0.5);
}
.botao:active { transform: scale(0.97); transition-duration: 100ms; }
.botao--contorno { background: var(--vidro-1); color: var(--texto); border: 1px solid var(--vidro-borda); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.chip[aria-pressed="true"] { background: var(--grad-ouro); color: #0b1526; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -8px rgba(217, 178, 106, 0.6); }
.h2.numerado .n { background: var(--grad-ouro); color: #0b1526; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 18px -8px rgba(217, 178, 106, 0.6); }

/* ---------- Campos ---------- */
.campo { background: rgba(3, 9, 20, 0.5); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.campo:focus { border-color: rgba(228, 191, 118, 0.85); box-shadow: 0 0 0 4px rgba(217, 178, 106, 0.16), inset 0 1px 2px rgba(0, 0, 0, 0.4); }

/* ---------- Perguntas ---------- */
/* Faixa do topo das perguntas (não fica presa no alto: com o teclado aberto no celular, ela cobriria o campo) */
.cabeca-quiz { padding-bottom: 12px; background: linear-gradient(180deg, rgba(5, 12, 24, 0.55), rgba(5, 12, 24, 0)); }
.progresso .barra { height: 6px; background: rgba(255, 255, 255, 0.08); }
.progresso .barra span { background: linear-gradient(90deg, var(--violeta), #e4bf76); box-shadow: 0 0 14px rgba(217, 178, 106, 0.55); }
.pergunta .bloco { color: #f1d394; }
.pergunta .bloco::before { background: linear-gradient(90deg, var(--violeta), #e4bf76); }
.opcao { border-radius: 16px; transition: border-color 300ms var(--mola), background 300ms var(--mola), box-shadow 300ms var(--mola), transform 300ms var(--mola); }
.opcao:active { transform: scale(0.985); transition-duration: 100ms; }
.opcao .marca { border-color: rgba(255, 255, 255, 0.32); }
.opcao[aria-checked="true"] {
  background: linear-gradient(180deg, rgba(217, 178, 106, 0.2), rgba(217, 178, 106, 0.06));
  border-color: rgba(228, 191, 118, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(217, 178, 106, 0.22), 0 14px 32px -12px rgba(217, 178, 106, 0.4);
}
.opcao[role="radio"][aria-checked="true"] .marca { background: var(--grad-ouro); border-color: transparent; box-shadow: inset 0 0 0 4px #1f2a36; }
.opcao[role="checkbox"][aria-checked="true"] .marca { background: var(--grad-ouro); border-color: transparent; }
.cartao-case .numero, .case-com-video .numero, .valor-area { background: var(--grad-ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Calculando: anel de luz girando e um halo que respira */
.calculando .giro {
  position: relative; width: 76px; height: 76px; border: 0; border-radius: 999px;
  background: conic-gradient(from 0deg, rgba(139, 124, 246, 0) 0deg, rgba(139, 124, 246, 0.95) 150deg, #e4bf76 300deg, rgba(228, 191, 118, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  box-shadow: none; filter: drop-shadow(0 0 16px rgba(217, 178, 106, 0.5));
}

/* ---------- Resultado ---------- */
.medidor::before {
  content: ""; position: absolute; inset: 22px; border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
.medidor svg { overflow: visible; } /* o brilho do anel vaza sem cortar */
.medidor .trilho { stroke: rgba(255, 255, 255, 0.08); }
.medidor .arco { stroke: url(#medidor-grad); filter: drop-shadow(0 0 8px var(--brilho, rgba(217, 178, 106, 0.5))); }
.medidor.cor-vermelho { --brilho: rgba(255, 77, 77, 0.6); }
.medidor.cor-ambar { --brilho: rgba(255, 170, 51, 0.6); }
.medidor.cor-verde { --brilho: rgba(18, 184, 134, 0.65); }
.medidor .nota b { background: var(--grad-nota, var(--grad-titulo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.medidor.cor-vermelho .nota b { --grad-nota: linear-gradient(180deg, #ffc1b6, #ff5a5a); }
.medidor.cor-ambar .nota b { --grad-nota: linear-gradient(180deg, #ffe7a6, #ffa62b); }
.medidor.cor-verde .nota b { --grad-nota: linear-gradient(180deg, #b5f5d6, #22c58e); }
.nivel { box-shadow: 0 0 22px -4px currentColor; }

.cartao-valor::before { background: linear-gradient(155deg, rgba(255, 150, 140, 0.45), rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 107, 107, 0.28) 100%); }
.cartao-valor .valor { background: linear-gradient(180deg, #ffb3aa 0%, #ff5252 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 82, 82, 0.35)); }
.cartao-valor .valor.verde { background: linear-gradient(180deg, #b5f5d6 0%, #22c58e 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(34, 197, 142, 0.35)); }
.pilula { background: linear-gradient(180deg, rgba(255, 107, 107, 0.18), rgba(255, 107, 107, 0.06)); border-color: rgba(255, 140, 130, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }

.area .ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.area .ic.cor-vermelho { background: linear-gradient(160deg, rgba(255, 107, 107, 0.3), rgba(255, 107, 107, 0.08)); }
.area .ic.cor-ambar { background: linear-gradient(160deg, rgba(255, 181, 71, 0.3), rgba(255, 181, 71, 0.08)); }
.area .ic.cor-verde { background: linear-gradient(160deg, rgba(74, 222, 128, 0.28), rgba(74, 222, 128, 0.07)); }
.barra-nota { height: 8px; background: rgba(255, 255, 255, 0.07); }
.barra-nota i.cor-vermelho { background: linear-gradient(90deg, #ff9a8f, #ff4d4d); box-shadow: 0 0 12px rgba(255, 77, 77, 0.55); }
.barra-nota i.cor-ambar { background: linear-gradient(90deg, #ffe08a, #ffa62b); box-shadow: 0 0 12px rgba(255, 166, 43, 0.55); }
.barra-nota i.cor-verde { background: linear-gradient(90deg, #8ff0c4, #16c784); box-shadow: 0 0 12px rgba(22, 199, 132, 0.55); }

.passo-plano::before { background: linear-gradient(155deg, rgba(248, 225, 163, 0.5), rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 55%, rgba(217, 178, 106, 0.3) 100%); }
.passo-plano .num { background: var(--grad-ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(217, 178, 106, 0.4)); }
.o-que-fazer { background: linear-gradient(180deg, rgba(217, 178, 106, 0.12), rgba(217, 178, 106, 0.03)); border-color: rgba(226, 189, 118, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

.tela-video { border-radius: 20px; }
.tela-video .play {
  background: rgba(255, 255, 255, 0.16); color: #fbe7b4; border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 30px -6px rgba(0, 0, 0, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.08);
}
.tela-video .tag { background: rgba(5, 12, 24, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.14); }
@keyframes anel-play { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 30px -6px rgba(0, 0, 0, 0.55), 0 0 0 16px rgba(255, 255, 255, 0.03); } }

/* Fechamento: cartão de vidro com um halo dourado atrás */
.cartao-final { border-color: rgba(226, 189, 118, 0.4); }
.cartao-final::after {
  content: ""; position: absolute; z-index: -1; inset: -18% -8%; border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(217, 178, 106, 0.22), transparent);
}

/* Barra do botão: cápsula de vidro flutuando sobre o conteúdo */
.barra-fixa {
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; background: rgba(8, 18, 34, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  transform: translateY(calc(100% + 32px));
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra-fixa { background: rgba(8, 18, 34, 0.5); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
  .aviso-rascunho { background: rgba(8, 18, 34, 0.55); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
}
.barra-fixa.visivel { transform: translateY(0); }

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Capa: cada parte surge em sequência, como um material chegando */
  .heroi-quiz .topo, .heroi-quiz .texto > *, .heroi-quiz .cartao-dados { animation: surge 900ms var(--mola) both; }
  .heroi-quiz .texto > :nth-child(1) { animation-delay: 60ms; }
  .heroi-quiz .texto > :nth-child(2) { animation-delay: 130ms; }
  .heroi-quiz .texto > :nth-child(3) { animation-delay: 200ms; }
  .heroi-quiz .texto > :nth-child(4) { animation-delay: 270ms; }
  .heroi-quiz .cartao-dados { animation-delay: 340ms; }
  /* Resultado: os blocos se materializam ao entrar na tela (destino.js marca .revela e .visto) */
  .revela { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(8px); transition: opacity 800ms var(--mola), transform 800ms var(--mola), filter 800ms var(--mola); }
  .revela.visto { opacity: 1; transform: none; filter: none; }
  .pergunta.entrando { filter: blur(6px); }
  .pergunta { transition: opacity 500ms var(--mola), transform 500ms var(--mola), filter 500ms var(--mola); }
}
@keyframes surge { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* No computador o fundo vivo se mexe bem devagar; no celular fica parado (o vidro não pesa) */
  body::before { animation: deriva 40s ease-in-out infinite alternate; }
}
@keyframes deriva { to { transform: translate3d(3vmax, -2vmax, 0) scale(1.06) rotate(2deg); } }

/* ---------- Passar o mouse ---------- */
@media (hover: hover) {
  .botao:not([disabled]):hover, .heroi .botao:hover { background: var(--grad-ouro); filter: brightness(1.07) saturate(1.05); }
  .opcao:hover { border-color: rgba(228, 191, 118, 0.5); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); }
  .conteudos a:hover { border-color: rgba(228, 191, 118, 0.6); }
}

@media (min-width: 768px) {
  .heroi-quiz h1 { font-size: 60px; line-height: 1; }
  .finalizado h1 { font-size: 36px; line-height: 40px; }
}

/* ---------- Menos transparência, mais contraste ---------- */
@media (prefers-reduced-transparency: reduce) {
  body::before, body::after { display: none; }
  html { background: #081525; }
  .cartao, .area, .passo-plano, .opcao, .checks li, .faq details, .bruno, .conteudos a, .cartao-case, .chip, .cartao-dados, .cartao-saude, .cartao-valor, .cartao-final {
    background: #0e2036; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .cabeca-quiz, .barra-fixa, .aviso-rascunho, .tela-video .play, .tela-video .tag { background: #0b1a2e; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .cartao, .area, .passo-plano, .opcao, .faq details, .bruno, .conteudos a, .cartao-case { background: #0e2036; border-color: rgba(255, 255, 255, 0.45); }
  .cartao::before, .area::before, .passo-plano::before, .bruno::before, .tela-video::before { display: none; }
}