/* Teste do Espelho: a identidade da clinica em tela.
 *
 * Tema unico e claro, de proposito: esta e a marca da Dra. Fabiola, nao uma preferencia
 * de quem abre. Por isso nao ha `prefers-color-scheme` aqui, e toda cor esta pintada
 * explicitamente, para a pagina nao pegar emprestado o fundo de nenhum navegador em
 * modo escuro.
 */

:root{
  --bg:#F3EEE7;
  --offwhite:#FBF8F3;
  --cafe:#4B372E;
  --cafe-fundo:#29221F;
  --nude:#C9B5A4;
  --champagne:#B59A70;
  --borda:#E5DACD;

  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--cafe-fundo);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* O teste e respondido no celular, um toque atras do outro. Sem isto, o duplo toque
     rapido em dois cartoes seguidos e lido como zoom. */
  touch-action:manipulation;
}

.palco{
  min-height:100%;
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

.tela{
  flex:1;
  display:flex;
  flex-direction:column;
  /* `env(safe-area-inset-*)` mantem o conteudo fora da barra de gestos do iPhone, onde
     um botao encostado nao recebe o toque. */
  padding:calc(28px + env(safe-area-inset-top)) 26px calc(28px + env(safe-area-inset-bottom));
  animation:entra .42s cubic-bezier(.22,.68,.36,1) both;
}
@keyframes entra{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}

.kicker{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--champagne);font-weight:500;
}

/* ── Botoes ─────────────────────────────────────────────────────────── */
.botao{
  display:block;width:100%;border:0;cursor:pointer;
  background:var(--cafe-fundo);color:var(--offwhite);
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  padding:18px;border-radius:2px;
  transition:background .2s ease,transform .2s ease;
}
.botao:hover{background:var(--cafe)}
.botao:active{transform:scale(.99)}
.botao--discreto{
  background:transparent;color:var(--cafe);
  border:1px solid var(--nude);letter-spacing:.16em;
}
.botao--discreto:hover{background:rgba(201,181,164,.18)}

.botao:focus-visible,.cartao:focus-visible{
  outline:2px solid var(--champagne);outline-offset:3px;
}

/* ── Carregando ─────────────────────────────────────────────────────── */
.tela--carregando{justify-content:center;align-items:center;gap:20px;text-align:center}
.carregando-texto{color:var(--nude);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.selo{
  width:54px;height:54px;border-radius:50%;
  border:1px solid var(--champagne);color:var(--champagne);
  display:grid;place-items:center;font-size:19px;
}

/* ── Capa ───────────────────────────────────────────────────────────── */
.tela--capa{justify-content:center;text-align:center;gap:22px}
.capa-marca{margin:0 auto}
.capa-nome{
  font-family:var(--sans);font-size:15px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cafe);
}
.filete{width:40px;height:1px;background:var(--nude);border:0;margin:0 auto}
.capa-chamada{font-family:var(--serif);font-size:clamp(30px,9vw,38px);line-height:1.14}
.capa-chamada em{font-style:italic;color:var(--champagne)}
.capa-texto{font-size:15px;color:var(--cafe);max-width:30ch;margin:0 auto}
.capa-texto b{font-weight:500;color:var(--cafe-fundo)}
.capa-meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--nude)}
.capa-assinatura{font-size:11.5px;color:var(--nude);line-height:1.5}

/* ── Perguntas ──────────────────────────────────────────────────────── */
.pergunta-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tracos{display:flex;gap:5px;align-items:center}
.traco{width:16px;height:2px;background:var(--nude);opacity:.55;border-radius:2px;transition:.3s}
.traco--feito{background:var(--champagne);opacity:1}
.traco--agora{width:26px;background:var(--cafe)}

.pergunta-abertura{
  margin-top:22px;font-family:var(--serif);font-style:italic;
  font-size:13.5px;color:var(--champagne);
}
.pergunta-enunciado{margin:14px 0 0;font-size:clamp(23px,6.4vw,27px);line-height:1.24}

.cartoes{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.cartao{
  text-align:left;cursor:pointer;font:inherit;
  background:var(--offwhite);border:1px solid var(--borda);
  border-radius:3px;padding:16px;
  font-size:15px;line-height:1.4;color:var(--cafe);
  display:flex;gap:12px;align-items:flex-start;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cartao:hover{border-color:var(--champagne)}
.cartao-letra{
  font-family:var(--serif);font-size:12px;color:var(--champagne);
  border:1px solid currentColor;border-radius:50%;
  width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;margin-top:1px;
}
.cartao[aria-pressed="true"]{
  border-color:var(--champagne);box-shadow:0 0 0 1px var(--champagne);
  transform:scale(1.015);background:#fff;
}
.cartao[aria-pressed="true"] .cartao-letra{
  background:var(--champagne);color:#fff;border-color:var(--champagne);
}

.pergunta-fecho{
  margin-top:auto;padding-top:20px;
  font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.45;
  color:var(--cafe);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;
}
.pergunta-fecho--visivel{opacity:1;transform:none}

/* ── Respiro ────────────────────────────────────────────────────────── */
/* A pausa nao pode parecer mais uma pergunta sem cartoes. Por isso ela e a unica tela
   do meio do teste com o texto centrado e em serifa: a mudanca de forma e o que avisa,
   antes da leitura, que aqui nao ha nada para responder. */
.tela--respiro .respiro-corpo{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:16px;
  padding:8px 0 24px;
}
.respiro-texto{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(18px,5vw,21px);
  line-height:1.42;
  color:var(--cafe-fundo);
  max-width:26ch;
}
.respiro-texto em{font-style:italic;color:var(--champagne)}
.respiro-assinatura{
  margin:6px 0 0;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--nude);
}
.respiro-assinatura em{font-style:italic}

/* ── Apuracao ───────────────────────────────────────────────────────── */
.tela--apurando{justify-content:center;align-items:center;gap:26px;text-align:center}
.anel{width:120px;height:120px}
.anel circle{fill:none;stroke-width:1.5}
.anel .anel-trilho{stroke:var(--nude);opacity:.45}
/* Sem `animation` aqui de proposito: quem move o anel e o mesmo laco que conta a
   porcentagem, em quiz.js. O offset cheio e o estado de partida, antes do primeiro
   quadro. */
.anel .anel-marca{
  stroke:var(--champagne);stroke-linecap:round;
  stroke-dasharray:339;stroke-dashoffset:339;
  transform:rotate(-90deg);transform-origin:center;
}
.anel-numero{
  font-family:var(--serif);font-size:27px;fill:var(--cafe-fundo);
  text-anchor:middle;dominant-baseline:central;
}
.apurando-texto{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--cafe)}

/* ── Resultado ──────────────────────────────────────────────────────── */
.resultado-titulo{margin-top:10px;font-size:clamp(26px,7.4vw,31px);line-height:1.2}
.resultado-titulo em{font-style:italic;color:var(--champagne)}
.texto{font-size:15px;line-height:1.62;color:var(--cafe);margin-top:14px}
.texto b{font-weight:500;color:var(--cafe-fundo)}

.mapa{margin-top:24px;display:flex;flex-direction:column;gap:11px}
.mapa-titulo{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--nude);
}
.faixa{display:grid;grid-template-columns:82px 1fr 32px;gap:10px;align-items:center}
.faixa-nome{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cafe)}
.faixa-barra{height:5px;background:rgba(201,181,164,.4);border-radius:3px;overflow:hidden}
.faixa-barra span{
  display:block;height:100%;width:0;background:var(--nude);border-radius:3px;
  transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.faixa--vencedora .faixa-nome{color:var(--cafe-fundo);font-weight:500}
.faixa--vencedora .faixa-barra span{background:var(--champagne)}
.faixa-valor{
  font-size:11px;color:var(--nude);text-align:right;
  font-variant-numeric:tabular-nums;
}

.miudo{font-size:11px;line-height:1.5;color:var(--nude);margin-top:14px}

.assinatura{
  margin-top:24px;padding:18px 0;
  border-top:1px solid var(--nude);border-bottom:1px solid var(--nude);
  font-family:var(--serif);font-size:17px;line-height:1.34;color:var(--cafe-fundo);
}
.assinatura em{font-style:italic;color:var(--champagne);font-style:italic}

.chamada{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.chamada-pergunta{font-size:15px;color:var(--cafe);text-align:center;margin-bottom:4px}

/* ── Pre-avaliacao ──────────────────────────────────────────────────── */
.passos{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.passo{
  display:flex;gap:12px;align-items:center;
  background:var(--offwhite);border:1px solid var(--borda);
  padding:14px 16px;border-radius:3px;font-size:14px;color:var(--cafe);
}
.passo-numero{font-family:var(--serif);font-size:15px;color:var(--champagne);flex:0 0 20px}
.passo b{font-weight:500;color:var(--cafe-fundo)}

.tela--fim{justify-content:center;text-align:center;gap:18px}

/* ── Erro ───────────────────────────────────────────────────────────── */
.tela--erro{justify-content:center;text-align:center;gap:18px}
.erro-texto{font-size:15px;color:var(--cafe);max-width:32ch;margin:0 auto}

.sem-js{
  max-width:420px;margin:60px auto;padding:0 26px;text-align:center;
  color:var(--cafe);font-size:15px;line-height:1.6;
}