/* Palco fixo, mobile-first. O único scroll é o do textarea.
   Paleta igual à do original: fundo ameixa escuro, seção em amarelo, ação em verde. */
:root {
  --fundo-1: #4a1d45;
  --fundo-2: #2b1128;
  --balao: rgba(140, 60, 130, .28);
  --verde: #7dd891;
  --verde-escuro: #5fbf75;
  --amarelo: #f5b400;
  --laranja: #b25d35;
  /* Cores das jornadas, como as camisetas dos kits: casados roxo, solteiros laranja. */
  --casado: #8a4fd1;
  --casado-fundo: rgba(138, 79, 209, .22);
  --solteiro: #ff7a1f;
  --solteiro-fundo: rgba(255, 122, 31, .18);
  --perfil: var(--verde);
  --perfil-fundo: rgba(125, 216, 145, .16);
  --texto: #ffffff;
  --suave: rgba(255, 255, 255, .62);
  --campo: rgba(255, 255, 255, .08);
  --borda: rgba(255, 255, 255, .38);
  --trilho: rgba(255, 255, 255, .22);
  --erro: #ff9b8f;
  --raio: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  overscroll-behavior: none;
  color: var(--texto);
  background: var(--fundo-2);
  font: 17px/1.4 "Gilroy", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* Fundo: degradê ameixa + "balões de fala" grandes e desfocados. */
body {
  background:
    radial-gradient(60% 40% at 85% 8%, rgba(120, 45, 110, .55), transparent 70%),
    radial-gradient(50% 35% at 10% 55%, rgba(110, 40, 100, .45), transparent 70%),
    linear-gradient(180deg, var(--fundo-1), var(--fundo-2));
}
body::before, body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  background: var(--balao); border-radius: 48px; filter: blur(2px);
}
body::before { width: 62vw; height: 26vh; top: 6vh; right: -18vw; }
body::after { width: 70vw; height: 30vh; bottom: 4vh; left: -24vw; border-radius: 56px 56px 56px 8px; }

.palco { position: fixed; inset: 0; z-index: 1; max-width: 520px; margin: 0 auto; }

.tela {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 22px max(16px, env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateX(16px);
  pointer-events: none; /* a tela que está saindo não recebe toque durante a transição */
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
.tela.ativa { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .22s ease, transform .22s ease; }
.tela.saindo-volta { transform: translateX(-16px); }
a { color: var(--verde); font-weight: 700; }

/* O conteúdo nunca invade o rodapé: se não couber (tela baixa, fonte grande), a área rola. */
.corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; overflow-y: auto; overscroll-behavior: contain; }
.centro { min-height: 0; overflow-y: auto; }
.tela { overflow: hidden; }
.corpo--pergunta { gap: 12px; padding-top: 18px; }
.centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 0 8px; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 4px; font-weight: 800; letter-spacing: -.01em; }
h2 { margin: 0; }
p { margin: 0; }
.sub, small { color: var(--suave); }
.dica { color: var(--suave); font-weight: 700; font-size: .88rem; }
.sobre { color: var(--amarelo); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .9rem; }
.capa { font-size: 2.2rem; }
.forte { font-weight: 700; }
.dica--centro { text-align: center; }
.aviso { color: var(--verde); font-weight: 700; min-height: 1.2em; font-size: .95rem; }
.marca { font-size: 1.9rem; }

.logo {
  width: 96px; height: 96px; border-radius: 50%;
  background: url(/icons/icon.svg) center / cover no-repeat;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}
.logo--p { width: 64px; height: 64px; margin-bottom: 8px; }

.rodape { display: flex; gap: 14px; padding-top: 14px; justify-content: space-between; }
.rodape { flex: none; }
/* Botão principal ocupa o espaço; o secundário ("voltar") fica do tamanho do texto. */
.rodape > .btn { flex: 1 1 0; min-width: 0; padding: 6px 14px; font-size: 1.05rem; }
.rodape > .btn--sec { flex: 0 1 auto; min-width: 108px; }
.rodape--col { flex-direction: column; align-items: stretch; }
.rodape--col > .btn { max-width: none; }

.btn {
  appearance: none; border: 0; border-radius: 999px;
  min-height: 56px; padding: 0 24px;
  font: inherit; font-weight: 800; font-size: 1.15rem;
  background: var(--verde); color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  line-height: 1.15; cursor: pointer; transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.98); background: var(--verde-escuro); }
.btn:disabled { filter: grayscale(.5) opacity(.6); }
.btn--sec {
  background: rgba(30, 10, 28, .55); color: #fff; text-shadow: none;
  box-shadow: inset 0 0 0 2px var(--borda);
}
.link { appearance: none; border: 0; background: none; padding: 6px 0; font: inherit; font-weight: 700; color: var(--verde); text-decoration: underline; text-align: left; cursor: pointer; align-self: flex-start; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-weight: 700; }
input, textarea {
  font: inherit; font-weight: 600; color: var(--texto);
  background: var(--campo); border: 1.5px solid var(--borda); border-radius: var(--raio);
  padding: 14px 16px; width: 100%; outline: none;
  backdrop-filter: blur(4px);
}
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .45); font-weight: 700; }
input:focus, textarea:focus { border-color: var(--verde); }
#kit-codigo { text-transform: uppercase; letter-spacing: .15em; font-size: 1.25rem; }
textarea { flex: 1 0 auto; min-height: 110px; resize: none; overflow-y: auto; overscroll-behavior: contain; }

.erro { color: var(--erro); min-height: 1.2em; font-size: .95rem; font-weight: 700; }

/* Etiqueta do questionário em uso: deixa claro se as perguntas são de casados ou de solteiros. */
.tag-perfil {
  grid-column: 1 / -1; justify-self: start; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--perfil-fundo); border: 1.5px solid var(--perfil);
  color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .02em;
}
.tag-perfil:empty { display: none; }
[data-perfil-ativo="casado"] { --perfil: var(--casado); --perfil-fundo: var(--casado-fundo); }
[data-perfil-ativo="solteiro"] { --perfil: var(--solteiro); --perfil-fundo: var(--solteiro-fundo); }
.tag-perfil--grande { font-size: 1rem; padding: 8px 18px; }
.btn--perfil { background: var(--perfil); }
.btn--perfil:active { background: var(--perfil); filter: brightness(.9); }
.centro .tag-perfil { align-self: center; margin-bottom: 6px; }

/* Hora atual, logo abaixo da barra. */
.hora { font-size: .85rem; font-weight: 800; color: var(--suave); font-variant-numeric: tabular-nums; }
.hora { justify-self: end; }
.hora::before { content: "🕒 "; }
.tempo-total { color: var(--amarelo); font-weight: 800; }
.tempo-total:empty { display: none; }

/* Escolha Casados / Solteiros */
.perfis { flex: 1; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.perfil-op {
  appearance: none; font: inherit; color: #fff; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; padding: 26px 22px;
  border-radius: 22px; background: var(--campo); border: 1.5px solid var(--borda);
  transition: transform .08s ease, border-color .15s ease;
}
.perfil-op b { font-size: 1.6rem; font-weight: 800; }
.perfil-op span { color: var(--suave); font-weight: 700; }
.perfil-op[data-perfil="casado"] { background: var(--casado-fundo); border: 2px solid var(--casado); }
.perfil-op[data-perfil="solteiro"] { background: var(--solteiro-fundo); border: 2px solid var(--solteiro); }
.perfil-op[data-perfil="casado"] b { color: #c9a6ff; }
.perfil-op[data-perfil="solteiro"] b { color: var(--solteiro); }
.perfil-op:active, .perfil-op[aria-pressed="true"] { transform: scale(.99); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.impressos { color: var(--suave); font-weight: 700; font-size: .92rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.impresso { padding: 4px 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 800; }
.impresso::before { content: "⬇ "; }
.impresso--casado { background: var(--casado); }
.impresso--solteiro { background: var(--solteiro); }

/* Topo da pergunta: SEÇÃO em amarelo · n / total · barra segmentada por seção. */
.topo { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-weight: 800; }
.topo > span:first-child { color: var(--amarelo); text-transform: uppercase; letter-spacing: .03em; }
.topo > span:nth-child(2) { color: var(--suave); }
.barra { grid-column: 1 / -1; display: flex; gap: 3px; height: 5px; }
.barra .seg-barra { flex: var(--n, 1); background: var(--trilho); border-radius: 9px; overflow: hidden; }
.barra .seg-barra i { display: block; height: 100%; width: 0; background: var(--verde); transition: width .3s ease; }

.pergunta { font-size: 1.45rem; line-height: 1.25; font-weight: 800; text-align: center; padding: 0 4px; }
.pergunta--grande { font-size: 1.6rem; margin-top: 12px; }

.notas { display: flex; flex-direction: column; gap: 10px; }
.notas:empty { display: none; }
.nota-item > span { font-weight: 800; font-size: .95rem; color: var(--amarelo); }
.regua { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 4px; }
.regua button {
  appearance: none; border: 1.5px solid var(--borda); background: var(--campo); color: #fff;
  border-radius: 10px; min-height: 40px; padding: 0; font: inherit; font-size: .95rem; font-weight: 800; cursor: pointer;
}
.regua button[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

.video { border-radius: var(--raio); overflow: hidden; background: rgba(0, 0, 0, .45); border: 1.5px solid var(--borda); min-height: 0; flex: 1; display: grid; place-items: center; }
.video video { width: 100%; height: 100%; object-fit: contain; }
.placeholder { color: var(--suave); padding: 24px; text-align: center; font-weight: 700; }


/* Resumo final: a única área com rolagem além do textarea. */
.resumo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 16px 16px; border-radius: var(--raio);
  background: var(--campo); border: 1.5px solid var(--borda);
}
.resumo h3 { color: var(--amarelo); text-transform: uppercase; font-size: .88rem; letter-spacing: .05em; margin: 18px 0 6px; }
.resumo-item { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.resumo-item:last-child { border-bottom: 0; }
.resumo-q { font-weight: 800; }
.resumo-notas { color: var(--amarelo); font-weight: 800; font-size: .92rem; margin-top: 4px; }
.resumo-r { margin-top: 4px; white-space: pre-wrap; color: rgba(255, 255, 255, .9); }
.resumo-r.vazio { color: var(--suave); font-style: italic; }
.btn--whats { background: #25d366; }
.btn--whats:active { background: #1ebe5b; }
.rodape--links { justify-content: center; padding-top: 6px; flex-wrap: wrap; gap: 4px 22px; }
.rodape--links .link { font-size: .9rem; }

/* Telas estreitas (iPhone SE, 320 px): régua de notas em duas linhas de 5, para caber o dedo. */
@media (max-width: 359px) {
  .regua { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}

/* Celulares baixos (ou com as barras do navegador ocupando espaço): tudo mais compacto. */
@media (max-height: 760px) {
  .tela { padding-top: max(10px, env(safe-area-inset-top)); }
  .corpo, .corpo--pergunta { gap: 8px; padding-top: 8px; }
  .topo { gap: 4px; }
  .pergunta { font-size: 1.2rem; }
  .notas { gap: 6px; }
  .regua button { min-height: 34px; }
  .btn { min-height: 50px; }
  textarea { min-height: 96px; }
  .rodape { padding-top: 10px; }
}
@media (max-height: 640px) {
  h1 { font-size: 1.3rem; }
  .pergunta { font-size: 1.08rem; }
  .btn { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .tela, .tela.ativa { transition: none; } }

/* Boas-vindas: no original o título e o botão desta tela são laranja. */
[data-tela="boasvindas"] h1 { color: var(--laranja); }
[data-tela="boasvindas"] .sub { color: #fff; font-weight: 800; }
[data-tela="boasvindas"] [data-acao="iniciar-caminhada"] { background: var(--laranja); }
[data-tela="boasvindas"] [data-acao="iniciar-caminhada"]::after { content: " ▸"; }
.video { aspect-ratio: 9 / 16; max-width: 100%; justify-self: center; align-self: center; border-radius: 28px; }