/* Sistema visual do diagnóstico do Método PI (inspirado no Diagnóstico Magistral, nas cores da marca).
   Marinho da logo (#081525), cartões em marinho claro e dourado champanhe nos botões e destaques.
   Cores com função: vermelho para o dinheiro que escapa, âmbar para atenção, verde para o que está saudável.
   Uma fonte (Manrope), escala de tamanhos do Tailwind, espaços da tabela da skill (2 a 96 px) e movimento com mola. */

:root[data-tema="a"] {
  --fundo: #081525;
  --cartao: #0e2036;
  --cartao-2: #14304f;
  --linha: #24406a;
  --texto: #f4f6fa;
  --texto-2: #b4c1d2;
  --ouro: #d9b26a;
  --prata: #c9d3df;
  --botao: #d9b26a;
  --botao-texto: #081525;
  --botao-hover: #e3c385;
  --heroi: #081525;
  --heroi-texto: #f4f6fa;
  --heroi-ouro: #d9b26a;
  --erro: #ff9a8f;
  --ok: #7fd8a8;
  color-scheme: dark;
}

:root[data-tema="b"] {
  --fundo: #f6f4ef;
  --cartao: #ffffff;
  --cartao-2: #eef1f6;
  --linha: #d9dee6;
  --texto: #0b1a2c;
  --texto-2: #4a5a6e;
  --ouro: #8a6420;
  --prata: #5b6b80;
  --botao: #081525;
  --botao-texto: #e8c77f;
  --botao-hover: #14304f;
  --heroi: #081525;
  --heroi-texto: #f4f6fa;
  --heroi-ouro: #d9b26a;
  --erro: #b3261e;
  --ok: #1e7d4f;
  color-scheme: light;
}

:root {
  --fonte: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
  --raio-grande: 24px;
  --raio: 16px;
  --raio-medio: 12px;
  --raio-pequeno: 8px;
  --vermelho: #ff6b5e;
  --ambar: #f5b544;
  --verde: #5fd38d;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/24px var(--fonte);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p, li { text-wrap: pretty; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

.pular { position: absolute; left: -9999px; top: 8px; background: var(--botao); color: var(--botao-texto); padding: 8px 12px; border-radius: var(--raio-pequeno); z-index: 50; }
.pular:focus { left: 16px; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* Estrutura */
.conteiner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.estreito { max-width: 680px; }
.secao { padding-block: 24px; }
.secao + .secao { padding-top: 0; }
.pilha { display: flex; flex-direction: column; gap: 12px; }
.pilha-16 { display: flex; flex-direction: column; gap: 16px; }
.nowrap { white-space: nowrap; }

/* Barra do topo */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.topo .logo { width: 120px; height: auto; }
.selo {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--heroi-ouro); background: rgba(217, 178, 106, 0.08); border: 1px solid rgba(217, 178, 106, 0.4); border-radius: 999px; padding: 8px 16px;
}
.selo svg { width: 16px; height: 16px; flex: none; }

/* Herói (sempre marinho) */
.heroi { background: var(--heroi); color: var(--heroi-texto); }
.heroi .texto { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 24px; }
.heroi h1 { max-width: 680px; }
.heroi h1 .grande { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
.heroi .sub { font-size: 16px; line-height: 24px; color: #c9d3df; max-width: 680px; }

/* Capa do diagnóstico: a pergunta do dinheiro, 3 selos e o formulário dos dados */
.heroi-quiz { min-height: 100vh; min-height: 100dvh; }
.heroi-quiz .topo { justify-content: center; padding-top: 16px; }
.heroi-quiz .texto { align-items: center; text-align: center; padding: 16px 0 24px; }
.heroi-quiz h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
.heroi-quiz h1 .destaque { color: var(--heroi-ouro); }
.heroi-quiz .sub { max-width: 560px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.checks li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--cartao); border: 1px solid var(--linha); font-size: 14px; line-height: 20px; font-weight: 600; color: #dbe3ec;
}
.checks svg { width: 16px; height: 16px; color: var(--heroi-ouro); flex: none; }
.cartao-dados { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; border-color: rgba(217, 178, 106, 0.4); }
.consentimento a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cartao-dados .h3 { font-size: 20px; line-height: 28px; }
.cartao-dados > .corpo { margin-top: -8px; font-size: 14px; line-height: 20px; }
.campo-dados { display: flex; flex-direction: column; gap: 8px; }
.campo-dados label { font-size: 14px; line-height: 20px; font-weight: 600; color: #dbe3ec; }
.campo-dados .campo { font-size: 16px; line-height: 24px; min-height: 52px; }
.isca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Cartões */
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 24px 16px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 12px; border: 0; border-radius: var(--raio-medio);
  background: var(--botao); color: var(--botao-texto);
  font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 300ms var(--mola), background-color 300ms var(--mola), box-shadow 300ms var(--mola);
}
.botao:active { transform: scale(0.98); }
.botao[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.botao svg { width: 20px; height: 20px; flex: none; }
.botao.cheio { width: 100%; }
.heroi .botao { background: var(--heroi-ouro); color: #081525; }
.botao-texto { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--texto-2); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.botao-texto svg { width: 18px; height: 18px; }
.micro { font-size: 14px; line-height: 20px; color: var(--texto-2); display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.heroi .micro { color: #b4c1d2; }
.micro svg { width: 16px; height: 16px; flex: none; }
.micro.urgente { color: #e9d9b6; }
.micro.urgente svg { color: var(--heroi-ouro); }

/* Botão principal pulsando (pedido do Murilo): anel dourado que se expande, sem mexer no layout */
.botao--pulso { position: relative; isolation: isolate; animation: respira 2.4s var(--mola) infinite; }
.botao--pulso::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 0 0 rgba(217, 178, 106, 0.6); animation: anel 2.4s var(--mola) infinite;
}
.botao--pulso:focus-visible { animation-play-state: paused; }
.botao--pulso[disabled], .botao--pulso[disabled]::after { animation: none; }
@keyframes anel { 0% { box-shadow: 0 0 0 0 rgba(217, 178, 106, 0.6); } 70% { box-shadow: 0 0 0 16px rgba(217, 178, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 178, 106, 0); } }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* Faixa de prova */
.faixa-prova { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.faixa-prova .item { border: 1px solid rgba(217, 178, 106, 0.35); border-radius: var(--raio-medio); padding: 8px; }
.faixa-prova .numero { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--heroi-ouro); white-space: nowrap; }
.faixa-prova .legenda { font-size: 12px; line-height: 16px; color: #b4c1d2; }
.faixa-nota { font-size: 12px; line-height: 16px; color: #8fa0b6; }

/* Campos */
.campo {
  width: 100%; min-height: 56px; padding: 12px 16px; background: #0a1b2f; border: 1px solid var(--linha);
  border-radius: var(--raio-medio); font-size: 18px; line-height: 28px; color: var(--texto);
}
.campo::placeholder { color: var(--texto-2); opacity: 0.7; }
.campo:focus { border-color: var(--ouro); outline: none; box-shadow: 0 0 0 3px rgba(217, 178, 106, 0.35); }
.campo[aria-invalid="true"] { border-color: var(--erro); }
.erro { font-size: 14px; line-height: 20px; color: var(--erro); }
.erro[hidden] { display: none; }
.consentimento { font-size: 12px; line-height: 16px; color: var(--texto-2); display: flex; gap: 8px; }
.consentimento svg { width: 16px; height: 16px; flex: none; }

/* Perguntas: progresso, rótulo do bloco e opções com bolinha */
.progresso { display: flex; flex-direction: column; gap: 8px; }
.progresso-linha { display: flex; justify-content: space-between; gap: 12px; }
.progresso .rotulo { font-size: 14px; line-height: 20px; color: var(--texto-2); font-weight: 600; }
.progresso .pct { font-size: 14px; line-height: 20px; color: var(--ouro); font-weight: 700; font-variant-numeric: tabular-nums; }
.progresso .barra { height: 6px; background: var(--cartao-2); border-radius: 999px; overflow: hidden; }
.progresso .barra span { display: block; height: 100%; background: var(--ouro); border-radius: 999px; transition: width 500ms var(--mola); }
.pergunta { display: flex; flex-direction: column; gap: 16px; }
.pergunta .bloco { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ouro); }
.pergunta .bloco::before { content: ""; width: 16px; height: 2px; border-radius: 999px; background: currentColor; }
.pergunta h2 { font-size: 24px; line-height: 32px; margin-top: -8px; }
.pergunta .ajuda { font-size: 14px; line-height: 20px; color: var(--texto-2); margin-top: -8px; }
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px;
  text-align: left; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-medio);
  font-size: 16px; line-height: 24px; font-weight: 500; cursor: pointer;
  transition: border-color 300ms var(--mola), background-color 300ms var(--mola), transform 300ms var(--mola);
}
.opcao:active { transform: scale(0.98); }
.opcao[aria-checked="true"] { border-color: var(--ouro); background: var(--cartao-2); }
.opcao .marca {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  border: 2px solid #5b7396; color: var(--fundo); transition: background-color 300ms var(--mola), border-color 300ms var(--mola), box-shadow 300ms var(--mola);
}
.opcao[role="radio"][aria-checked="true"] .marca { border-color: var(--ouro); background: var(--ouro); box-shadow: inset 0 0 0 4px var(--cartao-2); }
.opcao[role="checkbox"] .marca { border-radius: 8px; }
.opcao[role="checkbox"] .marca svg { width: 16px; height: 16px; opacity: 0; }
.opcao[role="checkbox"][aria-checked="true"] .marca { border-color: var(--ouro); background: var(--ouro); }
.opcao[role="checkbox"][aria-checked="true"] .marca svg { opacity: 1; }

/* Cartão de case */
.cartao-case { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.cartao-case .numero { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ouro); }
.cartao-case .titulo { font-size: 16px; line-height: 24px; font-weight: 600; }
.cartao-case .quem { font-size: 14px; line-height: 20px; color: var(--texto-2); }
.cartao-case .contexto { display: flex; gap: 8px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.cartao-case .contexto svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ouro); }
/* Vídeo que toca na página: a capa do próprio vídeo, o play dourado no meio e os controles quando começa */
.tela-video { position: relative; overflow: hidden; border-radius: var(--raio); border: 1px solid var(--linha); background: #050d17; aspect-ratio: 16 / 9; }
.tela-video.vertical { aspect-ratio: 9 / 16; }
.tela-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #050d17; }
.tela-video .play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ouro); color: #081525; box-shadow: 0 0 0 8px rgba(217, 178, 106, 0.25); animation: anel-play 2.4s var(--mola) infinite;
}
.tela-video .play svg { width: 28px; height: 28px; margin-left: 3px; }
.tela-video .tag { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(8, 21, 37, 0.85); color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; pointer-events: none; }
.tela-video.tocando .play, .tela-video.tocando .tag { display: none; }
@keyframes anel-play { 50% { box-shadow: 0 0 0 14px rgba(217, 178, 106, 0.08); } }
.grade-videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
.case-com-video { display: flex; flex-direction: column; gap: 4px; }
.case-com-video .tela-video { margin-bottom: 4px; }
.case-com-video .tela-video .play { width: 48px; height: 48px; }
.case-com-video .tela-video .play svg { width: 22px; height: 22px; }
.case-com-video .numero { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ouro); }
.case-com-video .titulo { font-size: 14px; line-height: 20px; font-weight: 600; }
.case-com-video .quem { font-size: 12px; line-height: 16px; color: var(--texto-2); }
.nota { font-size: 12px; line-height: 16px; color: var(--texto-2); }

/* Período (chips) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(217, 178, 106, 0.5);
  background: transparent; color: var(--heroi-texto); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer;
  transition: background-color 300ms var(--mola), color 300ms var(--mola);
}
.chip[aria-pressed="true"] { background: var(--heroi-ouro); color: #081525; border-color: var(--heroi-ouro); }

/* Barra fixa no celular */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(8, 21, 37, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 178, 106, 0.25); border-width: 1px 0 0;
  transform: translateY(110%); transition: transform 500ms var(--mola);
}
.barra-fixa.visivel { transform: translateY(0); }

/* Perguntas frequentes */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { border: 1px solid var(--linha); border-radius: var(--raio-medio); background: var(--cartao); }
.faq summary { list-style: none; cursor: pointer; padding: 12px 16px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; transition: transform 300ms var(--mola); flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 16px 16px; color: var(--texto-2); }

/* Títulos */
.h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.h2.numerado { display: flex; align-items: center; gap: 12px; }
.h2.numerado .n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--raio-pequeno); background: var(--ouro); color: #081525; font-size: 14px; line-height: 20px; }
.olho { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro); }
.corpo { color: var(--texto-2); }

/* Bruno */
.bruno { display: grid; grid-template-columns: 80px 1fr; gap: 12px 16px; align-items: center; padding: 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.bruno img { width: 80px; height: 100px; object-fit: cover; object-position: top; border-radius: var(--raio-medio); }
.bruno .pilha { display: contents; }
.bruno .pilha > :not(:first-child) { grid-column: 1 / -1; }
.bruno .nome { display: block; font-size: 20px; line-height: 28px; font-weight: 700; }
.bruno .papel { display: block; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.bruno p { color: var(--texto-2); }
.bruno .destaque { color: var(--ouro); font-weight: 600; }
.bruno .links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.bruno .links a { color: var(--texto); text-decoration: none; }
.bruno .links svg { width: 20px; height: 20px; color: var(--ouro); }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista li { display: flex; gap: 8px; align-items: flex-start; }
.lista svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.lista-sim svg { color: var(--ouro); }

/* Fechamento: cartão com brilho dourado */
.cartao-final { align-items: center; text-align: center; border-color: rgba(217, 178, 106, 0.5); box-shadow: 0 24px 64px rgba(217, 178, 106, 0.12); }
.cartao-final .pilha { width: 100%; }
.rodape { border: 1px solid var(--linha); border-width: 1px 0 0; padding-block: 24px 96px; }
.rodape p { font-size: 14px; line-height: 20px; color: var(--texto-2); }
.rodape .nota { font-size: 12px; line-height: 16px; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); }
.sem-js { padding: 16px; }

/* Cores com função */
.cor-vermelho { color: var(--vermelho); }
.cor-ambar { color: var(--ambar); }
.cor-verde { color: var(--verde); }

@media (min-width: 768px) {
  .conteiner { padding: 0 32px; }
  .secao { padding-block: 48px; }
  .heroi .texto { padding: 32px 0; gap: 24px; }
  .heroi h1 .grande, .heroi-quiz h1 { font-size: 48px; line-height: 1; }
  .checks { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .cartao { padding: 32px; }
  .pergunta h2 { font-size: 30px; line-height: 36px; }
  .barra-fixa { display: none; }
  .grade-videos { grid-template-columns: repeat(4, 1fr); }
  .bruno { grid-template-columns: 200px 1fr; align-items: start; gap: 24px; padding: 24px; }
  .bruno img { width: 200px; height: 250px; }
  .bruno .pilha { display: flex; }
  .rodape { padding-block: 48px; }
}

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

/* Passar o mouse: só onde existe mouse (no toque, o destaque ficaria preso na opção tocada). */
@media (hover: hover) {
  .botao:not([disabled]):hover { background: var(--botao-hover); transform: translateY(-1px); }
  .heroi .botao:hover { background: #e3c385; }
  .botao--pulso:hover { animation-play-state: paused; }
  .opcao:hover { border-color: var(--ouro); }
}