/* Diagnóstico Medlucro — a escalada */

:root {
  --navy: #0a1628;
  --navy-hi: #1b263b;
  --navy-deep: #0b1420;
  --tinta: #0e1c2b;
  --greige-hi: #ecede8;
  --greige: #dfe0dc;
  --greige-lo: #d2d5ce;
  --offwhite: #e0e1dd;
  --azul-medio: #415a77;
  --azul-claro: #778da9;
  --ambar: #c97a2f;
  --ambar-suave: #d2977d;
  --branco: #ffffff;
  --linha: rgba(14, 28, 43, 0.22);
  --linha-dark: rgba(224, 225, 221, 0.18);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: "Nunito Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--greige-hi);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

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

/* ── Faixa da montanha (topo) ───────────────────────────────── */

.montanha {
  position: relative;
  width: 100%;
  height: clamp(180px, 15vw, 300px);
  background: var(--navy-deep);
  overflow: hidden;
  flex-shrink: 0;
}

.montanha svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.montanha::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: linear-gradient(to top, rgba(6, 13, 23, 0.8), rgba(6, 13, 23, 0));
  pointer-events: none;
}

.montanha-topo {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 22px 36px 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.logo { height: 26px; width: auto; display: block; }
.logo-abertura { height: 42px; width: auto; margin: 0 auto 26px; display: block; }

.montanha-rodape {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 36px 18px;
  z-index: 2;
  color: var(--azul-claro);
  text-align: right;
}
.camp-atual {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 3px;
}
.camp-bloco {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--offwhite);
}

/* ── Painel do formulário ───────────────────────────────────── */

.form-painel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--greige-hi);
}

.form-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: center;
}

.pergunta-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 56px 36px;
}

.pergunta {
  animation: subir 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pergunta.saindo {
  animation: sair 0.22s ease forwards;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sair {
  to { opacity: 0; transform: translateY(-18px); }
}

.kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 14px;
}
.kicker .num { color: var(--azul-claro); font-weight: 700; }

h1.titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.ajuda { font-size: 15px; color: rgba(14, 28, 43, 0.6); margin-bottom: 6px; }

.campos { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; }

.campo label.campo-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(14, 28, 43, 0.55);
  margin-bottom: 8px;
}

.campo input[type="text"],
.campo input[type="number"],
.campo textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--linha);
  font-size: 19px;
  padding: 6px 2px 10px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
}
.campo input:focus, .campo textarea:focus { border-bottom-color: var(--ambar); }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(14, 28, 43, 0.28); }
.campo textarea { resize: none; min-height: 84px; line-height: 1.5; font-size: 17px; }

.campo-sufixo { position: relative; }
.campo-sufixo .sufixo {
  position: absolute; right: 2px; bottom: 10px;
  font-size: 17px; color: rgba(14, 28, 43, 0.4);
}

/* opções (choice) */
.opcoes { display: flex; flex-direction: column; gap: 10px; }
.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 16.5px;
  color: var(--tinta);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.opcao:hover { border-color: var(--azul-medio); }
.opcao:active { transform: scale(0.995); }
.opcao .tecla {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid var(--linha);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: rgba(14, 28, 43, 0.5);
}
.opcao.marcada {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--offwhite);
}
.opcao.marcada .tecla {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--navy-deep);
}

/* chips (multichoice) */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 15px;
  color: var(--tinta);
  transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--azul-medio); }
.chip.marcada { background: var(--navy); border-color: var(--navy); color: var(--offwhite); }

/* “não medimos” */
.nao-mede {
  margin-top: 10px;
  background: none;
  border: none;
  font-size: 14px;
  color: rgba(14, 28, 43, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 2px 0;
}
.nao-mede.ativa { color: var(--ambar); font-weight: 700; text-decoration: none; }
.nao-mede.ativa::before { content: "✓ "; }

/* ações */
.acoes { margin-top: 36px; display: flex; align-items: center; gap: 18px; }
.btn-continuar {
  background: var(--navy);
  color: var(--offwhite);
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.btn-continuar:hover { background: var(--navy-hi); }
.btn-continuar:active { transform: scale(0.98); }
.btn-continuar:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-continuar .seta { font-size: 18px; line-height: 1; }
.dica-enter { font-size: 13px; color: rgba(14, 28, 43, 0.4); }
.dica-enter kbd {
  font-family: inherit;
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
}
.erro-msg { margin-top: 14px; font-size: 14px; color: #a33b1f; display: none; }
.erro-msg.visivel { display: block; }

/* rodapé */
.form-rodape {
  border-top: 1px solid rgba(14, 28, 43, 0.1);
  padding: 14px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: rgba(14, 28, 43, 0.55);
  flex-wrap: wrap;
}
.rodape-nav { display: flex; align-items: center; gap: 10px; }
.btn-voltar {
  background: none;
  border: 1px solid var(--linha);
  border-radius: 999px;
  width: 34px; height: 34px;
  font-size: 15px;
  color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.btn-voltar:hover { border-color: var(--azul-medio); }
.btn-voltar:disabled { opacity: 0.3; cursor: default; }
.progresso-texto { font-variant-numeric: tabular-nums; }
.btn-link-retomada {
  background: none;
  border: none;
  font-size: 13px;
  color: rgba(14, 28, 43, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link-retomada:hover { color: var(--ambar); }
.salvo-status { font-size: 12px; color: rgba(14, 28, 43, 0.4); }

/* barra de progresso fina no topo do painel do form */
.progresso-barra {
  height: 3px;
  background: rgba(14, 28, 43, 0.08);
  position: relative;
}
.progresso-barra .preenchido {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--ambar);
  width: 0;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Telas de abertura / interstício / cume ─────────────────── */

.tela-cheia {
  position: fixed;
  inset: 0;
  background: var(--navy-deep);
  color: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  overflow: hidden;
}
.tela-cheia svg.fundo { position: absolute; inset: 0; width: 100%; height: 100%; }

/* fundos fotográficos (fotos da marca) com véu navy para o texto respirar */
.foto-abertura {
  background:
    linear-gradient(to bottom, rgba(7, 15, 27, 0.62), rgba(7, 15, 27, 0.38) 42%, rgba(7, 15, 27, 0.82)),
    url("assets/fotos/pico-ambar.jpg") center 30% / cover no-repeat var(--navy-deep);
}
.foto-intersticio {
  background:
    linear-gradient(to bottom, rgba(7, 15, 27, 0.66), rgba(7, 15, 27, 0.42) 45%, rgba(7, 15, 27, 0.84)),
    url("assets/fotos/cordilheira-nevoa.jpg") center / cover no-repeat var(--navy-deep);
}
.foto-cume {
  background:
    linear-gradient(to bottom, rgba(7, 15, 27, 0.55), rgba(7, 15, 27, 0.35) 45%, rgba(7, 15, 27, 0.8)),
    url("assets/fotos/amanhecer.jpg") center / cover no-repeat var(--navy-deep);
}

/* vinheta + leve escurecimento nas bordas das telas com foto */
.foto-abertura::before, .foto-intersticio::before, .foto-cume::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 42%, transparent 55%, rgba(5, 11, 20, 0.55));
  pointer-events: none;
}
.tela-conteudo {
  position: relative;
  z-index: 2;
  max-width: 660px;
  padding: 40px;
  text-align: center;
  animation: subir 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tela-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 20px;
}
.tela-titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.tela-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--azul-claro);
  max-width: 480px;
  margin: 0 auto 34px;
}
.tela-sub strong { color: var(--offwhite); font-weight: 700; }
.btn-claro {
  background: var(--offwhite);
  color: var(--navy-deep);
  border: none;
  border-radius: 999px;
  font-size: 16.5px;
  font-weight: 800;
  padding: 16px 36px;
  transition: transform 0.12s, background 0.15s;
}
.btn-claro:hover { background: var(--branco); transform: translateY(-1px); }
.btn-fantasma {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: none;
  color: var(--azul-claro);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-fantasma:hover { color: var(--offwhite); }
.tela-meta {
  margin-top: 30px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(119, 141, 169, 0.7);
}

/* interstício de acampamento */
.intersticio .tela-conteudo { animation: subir 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.interstico-alt {
  font-family: var(--serif);
  font-size: clamp(64px, 10vw, 110px);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.interstico-alt .m { font-size: 0.35em; color: var(--azul-claro); }
.bandeira { font-size: 30px; margin-bottom: 18px; display: inline-block; animation: fincar 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards; }
@keyframes fincar {
  from { opacity: 0; transform: translateY(-26px) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

.oculto { display: none !important; }

/* toast do link */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--navy);
  color: var(--offwhite);
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0.3s;
  pointer-events: none;
}
.toast.visivel { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

/* ── Responsivo ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .montanha { height: 148px; }
  .montanha-topo { padding: 16px 20px 0; }
  .logo { height: 22px; }
  .logo-abertura { height: 32px; }
  .montanha-rodape { padding: 0 20px 12px; }
  .camp-bloco { font-size: 15px; }
  .pergunta-wrap { padding: 34px 24px 24px; }
  .form-rodape { padding: 12px 20px; }
  .dica-enter { display: none; }
}

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