/* MOVE60+ · formulário uma pergunta por tela · base compartilhada
   Cores e tema vêm de tema.css (um por site). Aqui só estrutura, foco, toque e estados.
   Regras de acessibilidade: ver o planejamento (§4): corpo 18px, alvo de toque 48px, foco 3px em dois tons,
   transição desligada com prefers-reduced-motion, nada depende só da cor. */

@font-face { font-family: "Switzer"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/switzer-500.woff2) format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/switzer-700.woff2) format("woff2"); }
@font-face { font-family: "Obviously Narrow"; font-weight: 600; font-style: normal; font-display: block; src: local("Obviously Narrow Semibold"), local("ObviouslyNarrow-Semibold"), url(../fonts/ObviouslyNarrow-Semibold-MOVE60.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Switzer", "Helvetica Neue", Arial, sans-serif; font-weight: 500;
  font-size: 1.125rem; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
body[data-tela="abertura"] { background: var(--hero-bg); color: var(--hero-ink); }
h1, h2, p, dl, dd { margin: 0; }
img { max-width: 100%; display: block; }

.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 999px; }
.pular:focus { top: 8px; }

#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- topo ---------- */
.topo { width: 100%; max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 28px) 16px 0; }
.topo-linha { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 12px; }
.logo img { height: auto; width: 120px; }
.abertura .logo img { width: 160px; }
.voltar {
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; min-width: 48px; padding: 0 14px 0 6px;
  background: none; border: 0; color: inherit; font: inherit; font-weight: 500; cursor: pointer; border-radius: 999px;
}
.voltar:hover { text-decoration: underline; }
.progresso { margin-top: 8px; }
.etapa { font-size: 1rem; color: var(--ink-2); }
.barra { height: 8px; margin-top: 8px; background: var(--trilho); border-radius: 999px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--barra); border-radius: 999px; transition: width .2s ease; }

/* ---------- miolo ---------- */
.miolo { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 36px 16px 104px; animation: entra .18s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pergunta { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem); line-height: 1.25; font-weight: 500; text-wrap: balance; }
.pergunta:focus { outline: none; }
.pergunta label { display: block; }
.opc { font-size: .75em; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.ajuda { margin-top: 8px; color: var(--ink-2); font-size: 1.0625rem; }
.corpo p, .corpo ul { margin: 12px 0 0; max-width: 56ch; }
.corpo ul { padding-left: 1.2em; }
.corpo li { margin-top: 6px; }
.corpo strong { font-weight: 700; }

/* ---------- campos ---------- */
.campo {
  display: block; width: 100%; min-height: 56px; margin-top: 16px; padding: 12px 16px;
  font: inherit; font-size: 1.125rem; color: var(--ink); background: var(--card);
  border: 2px solid var(--campo-borda); border-radius: 12px; appearance: none;
}
textarea.campo { min-height: 140px; resize: vertical; }
.campo:focus-visible, .btn:focus-visible, .voltar:focus-visible, .btn-link:focus-visible, .ajuda-fixa a:focus-visible, .aceite a:focus-visible, .pular:focus-visible {
  outline: 3px solid var(--foco); outline-offset: 3px; box-shadow: 0 0 0 7px var(--foco-halo);
}
.campo[aria-invalid="true"] { border-color: var(--ink); border-width: 3px; }
.data3 { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; margin-top: 16px; }
.data3 .campo { margin-top: 6px; text-align: center; }
.data3 label, .outra label, .busca label, .rotulo-solto { display: block; font-size: 1rem; }
.rotulo-solto { margin-top: 16px; }
.busca { margin-top: 16px; }
.busca .campo { margin-top: 6px; }
.vazio { margin-top: 12px; color: var(--ink-2); }
.outra { margin: 8px 0 0 8px; padding: 4px 0 8px 16px; border-left: 3px solid var(--campo-borda); }
.outra .campo { margin-top: 6px; }

/* ---------- opções (cartões de rádio e caixa) ---------- */
.opcoes { display: grid; gap: 10px; margin-top: 16px; }
.opcoes-grade { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.grupo { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.grupo legend { padding: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.opcao {
  display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 14px 16px; cursor: pointer;
  background: var(--card); border: 2px solid var(--campo-borda); border-radius: 16px;
}
.opcao-curta { min-height: 52px; padding: 10px 12px; align-items: center; }
.opcao:hover { border-color: var(--ink); }
.opcao input {
  appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 1px 0 0; cursor: pointer;
  background: var(--card); border: 2px solid var(--ink); display: grid; place-content: center;
}
.opcao input[type="radio"] { border-radius: 50%; }
.opcao input[type="checkbox"] { border-radius: 7px; }
.opcao input:checked { background: var(--sel-marca); }
.opcao input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sel-check); }
.opcao input[type="checkbox"]:checked::after {
  content: ""; width: 15px; height: 15px; background: var(--sel-check);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.opcao:has(input:checked) { background: var(--sel-bg); border-color: var(--sel-borda); box-shadow: inset 0 0 0 1px var(--sel-borda); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; box-shadow: 0 0 0 7px var(--foco-halo); }
@supports not selector(:has(*)) {
  .opcao input:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
}
.opcao-texto { min-width: 0; }
.opcao-rotulo { display: block; font-size: 1.125rem; line-height: 1.35; overflow-wrap: anywhere; }
.opcao-curta .opcao-rotulo { font-size: 1.0625rem; }
.opcao-dica { display: block; margin-top: 2px; font-size: 1rem; color: var(--ink-2); }
.aceite a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- erro ---------- */
.erro {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px;
  background: var(--erro-bg); border: 2px solid var(--ink); border-radius: 12px; font-weight: 500;
}
.erro svg { flex: none; margin-top: 2px; }

/* ---------- botões ---------- */
.acoes { margin-top: 28px; display: flex; }
.acoes-pilha { flex-direction: column; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 28px;
  font: inherit; font-weight: 700; font-size: 1.125rem; text-decoration: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--btn-borda); border-radius: 999px;
}
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"]::after { content: ""; width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.btn-sec { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-sec:hover { background: var(--ink); color: var(--bg); }
.btn-link { background: none; border: 0; padding: 0 8px; min-height: 44px; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 700; }
.ajuda-fixa { margin-top: 28px; }
.ajuda-fixa a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: inherit; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.priv-nota { margin-top: 16px; font-size: 1rem; color: var(--ink-2); }
.priv-nota a { color: inherit; font-weight: 700; }

/* ---------- revisão ---------- */
.rev { margin-top: 28px; }
.rev h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 500; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.rev-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trilho); }
.rev-item dt { font-size: 1rem; color: var(--ink-2); }
.rev-item dd { font-size: 1.125rem; overflow-wrap: anywhere; }

/* ---------- fim ---------- */
.selo-ok { color: var(--ink); margin-bottom: 8px; }

/* ---------- abertura ---------- */
.abertura { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.miolo-abertura { max-width: 1040px; display: grid; gap: 32px; align-content: center; padding-top: 24px; padding-bottom: 104px; }
.titulo-grande {
  font-family: "Obviously Narrow", "Arial Narrow", sans-serif; font-weight: 600; font-synthesis: none; text-transform: uppercase;
  font-size: clamp(2.75rem, 11vw, 4.5rem); line-height: .94; letter-spacing: 0; text-wrap: balance;
}
.titulo-grande:focus { outline: none; }
.titulo-grande .kw { color: var(--kw); display: block; }
.corpo-abertura p { font-size: 1.1875rem; }
.limite { margin-top: 20px; font-size: 1rem; max-width: 52ch; }
.figura { margin: 0; }
.figura img { width: 100%; height: auto; border-radius: 24px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.figura figcaption { margin-top: 8px; font-size: 1rem; }
.abertura .topo { max-width: 1040px; }

@media (min-width: 760px) {
  .btn { width: auto; min-width: 240px; }
  .acoes-pilha .btn { width: 100%; }
  .topo { padding-top: 40px; }
  .miolo { padding-top: 56px; }
  .miolo-abertura { grid-template-columns: 1.3fr .7fr; align-items: center; gap: 56px; padding-top: 24px; }
  .miolo-abertura:not(:has(.figura)) { grid-template-columns: 1fr; max-width: 760px; margin-left: max(16px, calc((100% - 1040px) / 2)); }
  .figura img { aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .miolo { animation: none; }
  .barra i { transition: none; }
  .btn[aria-busy="true"]::after { animation: none; }
}
@media (forced-colors: active) {
  .opcao:has(input:checked) { outline: 3px solid Highlight; }
  .btn { border: 2px solid ButtonText; }
}

/* respiro entre o título grande e o texto da abertura */
.corpo-abertura { margin-top: 24px; }

/* foto da família: mesma moldura da do estudante (retrato); o recorte acompanha as três pessoas, que ficam à direita da foto original */
.figura.foco-direita img { object-position: 97% 50%; }

/* celular: a primeira tela é o bloco título + texto + botão, centralizado na vertical; a foto vem logo abaixo, ao rolar */
@media (max-width: 759px) {
  .abertura-texto { min-height: calc(100vh - 150px); min-height: calc(100dvh - 150px); display: flex; flex-direction: column; justify-content: center; }
  .miolo-abertura { align-content: start; }
}

/* botão flutuante do WhatsApp: verde da marca para WhatsApp, glifo escuro (contraste) e borda na cor do texto da página */
.zap-flutuante {
  position: fixed; z-index: 50; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  background: #25d366; color: #0b3b26; border: 3px solid var(--ink); text-decoration: none;
}
body[data-tela="abertura"] .zap-flutuante { border-color: var(--hero-ink); }
.zap-flutuante svg { width: 32px; height: 32px; }
.zap-flutuante:hover { background: #1ebe5b; }
.zap-flutuante:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; box-shadow: 0 0 0 7px var(--foco-halo); }

/* ---------- tela "Você é..." (dois botões grandes) ---------- */
.miolo-escolha { max-width: 640px; display: flex; flex-direction: column; justify-content: center; padding-top: 28px; }
@media (min-width: 760px) { .miolo-escolha { max-width: 1040px; } }
.miolo-escolha .titulo-grande { color: var(--ink); }
.ajuda-escolha { margin-top: 16px; font-size: 1.1875rem; }
.escolhas { display: grid; gap: 16px; margin-top: 28px; }
.cartao-escolha {
  display: flex; align-items: center; gap: 18px; width: 100%; min-height: 132px; padding: 18px 20px; text-align: left; cursor: pointer;
  font: inherit; color: inherit; border: 3px solid var(--ink); border-radius: 24px;
}
.cartao-escolha:hover { border-width: 5px; padding: 16px 18px; }
.cartao-escolha:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; box-shadow: 0 0 0 8px var(--foco-halo); }
.cartao-escolha .disco { flex: none; width: 88px; height: 88px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.cartao-escolha .disco img { width: 86%; height: 86%; object-fit: contain; }
.cartao-texto { display: grid; gap: 4px; min-width: 0; }
.cartao-texto strong { font-size: 1.5rem; line-height: 1.15; font-weight: 700; }
.cartao-texto span { font-size: 1.125rem; line-height: 1.35; }
.trocar { margin-top: 12px; }
.trocar .btn-link { margin-left: -8px; }
@media (min-width: 760px) { .escolhas { grid-template-columns: 1fr 1fr; } .cartao-escolha { flex-direction: column; align-items: flex-start; min-height: 260px; justify-content: space-between; } }

/* ---------- pessoa idosa: letra e áreas de toque maiores (a voz do convite pede tipo grande e alto contraste) ---------- */
body[data-perfil="idoso"] { font-size: 1.25rem; }
body[data-perfil="idoso"] .pergunta { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
body[data-perfil="idoso"] .ajuda, body[data-perfil="idoso"] .etapa { font-size: 1.25rem; }
body[data-perfil="idoso"] .opcao-rotulo { font-size: 1.3125rem; }
body[data-perfil="idoso"] .opcao { min-height: 64px; }
body[data-perfil="idoso"] .campo { min-height: 64px; font-size: 1.3125rem; }
body[data-perfil="idoso"] .btn { min-height: 64px; font-size: 1.3125rem; }
body[data-perfil="idoso"] .corpo-abertura p { font-size: 1.3125rem; }
body[data-perfil="idoso"] .limite, body[data-perfil="idoso"] .ajuda-fixa a, body[data-perfil="idoso"] .priv-nota { font-size: 1.125rem; }