/* =========================================================
   Quiz de qualificacao, Direito do Passageiro Aereo
   Lucas Prodocimo Advocacia

   Identidade herdada da landing page do projeto.
   Celular em primeiro lugar, uma pergunta por tela.
   ========================================================= */

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

:root{
  --blue:#2D6BE4;
  --blue-dk:#1a55cc;
  --blue-lt:#6E9CF7;
  --navy:#0B1631;
  --navy-2:#132349;
  --paper:#F5F4EF;
  --ink:#0d1b3e;
  --mid:#4a5878;
  --light:#8b95ad;
  --line:rgba(13,27,62,.12);
  --pad:clamp(1.25rem,5vw,2.5rem);
  --raio:14px;
}

html{-webkit-text-size-adjust:100%}

body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  min-height:100vh;
  min-height:100dvh;
}

::selection{background:rgba(45,107,228,.22);color:var(--ink)}

/* ---------------- ESTRUTURA ---------------- */

.quiz{
  max-width:620px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 60px -20px rgba(13,27,62,.18);
}

.progresso{
  height:4px;
  background:rgba(45,107,228,.14);
  flex:0 0 auto;
}
.progresso-tr{
  display:block;height:100%;width:0%;
  background:var(--blue);
  border-radius:0 4px 4px 0;
  transition:width .45s cubic-bezier(.22,1,.36,1);
}

.topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--pad) .4rem;
  flex:0 0 auto;
}
/* O cabecalho mantem a altura que tinha com o texto: o logo entra
   com 30px, dentro da faixa de 28 a 32 pedida. */
.marca{position:relative;display:inline-block;line-height:0}

.marca-logo{
  display:block;height:43px;width:auto;
  /* Escopo restrito ao logo. Nada disso vale para o resto da pagina. */
  -webkit-touch-callout:none;  /* tira o menu do toque longo no iPhone */
  -webkit-user-drag:none;      /* tira o arraste para a area de trabalho */
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;         /* o clique vai para a capa, nao para a imagem */
}

/* Camada transparente por cima. Quem tentar salvar leva ela, nao o logo. */
.marca-capa{
  position:absolute;inset:0;z-index:2;
  display:block;background:transparent;
}
.passo{font-size:12px;color:var(--light);letter-spacing:.04em;white-space:nowrap}

.palco{
  flex:1 1 auto;
  display:flex;flex-direction:column;
  padding:1.4rem var(--pad) calc(1.8rem + env(safe-area-inset-bottom));
}

.rodape{
  flex:0 0 auto;
  padding:0 var(--pad) calc(1.4rem + env(safe-area-inset-bottom));
}
.rodape p{font-size:11.5px;color:var(--light);line-height:1.5}

/* ---------------- TELA ---------------- */

.tela{
  display:flex;flex-direction:column;flex:1 1 auto;
  animation:entra .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.olho{
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.7rem;
}

.titulo{
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:clamp(23px,6.2vw,31px);line-height:1.15;letter-spacing:-.035em;
  color:var(--ink);max-width:20ch;
}

.ajuda{margin-top:.7rem;font-size:14.5px;color:var(--mid);max-width:42ch}

/* ---------------- OPCOES ---------------- */

.opcoes{margin-top:1.6rem;display:flex;flex-direction:column;gap:.65rem}

.opcao{
  display:flex;align-items:flex-start;gap:.9rem;width:100%;
  text-align:left;font:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--raio);
  padding:1rem 1.05rem;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.opcao:hover{border-color:var(--blue-lt)}
.opcao:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.opcao[aria-pressed="true"]{border-color:var(--blue);background:rgba(45,107,228,.06)}

.opcao > i{font-size:22px;color:var(--blue);line-height:1.2;flex:0 0 auto}

.opcao-txt{display:block}
.opcao-rot{display:block;font-weight:500;font-size:15.5px;line-height:1.35}
.opcao-nota{display:block;font-size:13px;color:var(--mid);margin-top:.15rem}

.marca-sel{
  margin-left:auto;flex:0 0 auto;
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);
  display:grid;place-items:center;
  transition:border-color .2s ease,background .2s ease;
}
.opcao[aria-pressed="true"] .marca-sel{background:var(--blue);border-color:var(--blue)}
.marca-sel::after{
  content:"";width:7px;height:7px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.opcao[aria-pressed="true"] .marca-sel::after{transform:scale(1)}

/* ---------------- NAVEGACAO ---------------- */

.nav{margin-top:auto;padding-top:1.8rem;display:flex;align-items:center;gap:1rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Montserrat",sans-serif;font-size:15px;font-weight:700;
  color:#fff;background:var(--blue);border:0;
  padding:1.05rem 1.8rem;border-radius:12px;text-decoration:none;
  cursor:pointer;flex:1 1 auto;
  box-shadow:0 10px 30px -12px rgba(45,107,228,.7);
  transition:background .25s ease,transform .25s cubic-bezier(.22,1,.36,1),opacity .2s ease;
}
.btn:hover{background:var(--blue-dk)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.btn[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover{background:var(--blue)}

.btn-zap{background:#fff;color:var(--blue);border:1.5px solid var(--blue);box-shadow:none}
.btn-zap:hover{background:rgba(45,107,228,.07)}

.voltar{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:14px;font-weight:500;color:var(--mid);
  background:none;border:0;padding:.6rem .2rem;cursor:pointer;flex:0 0 auto;
}
.voltar:hover{color:var(--ink)}
.voltar:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.voltar i{font-size:16px;transform:rotate(90deg)}

/* ---------------- CONSENTIMENTO ---------------- */

.consent{
  margin-top:1.5rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--raio);
  padding:1.1rem 1.15rem;
}
.consent ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.consent li{display:flex;gap:.7rem;font-size:14px;color:var(--mid);line-height:1.5}
.consent li i{color:var(--blue);font-size:18px;flex:0 0 auto;line-height:1.3}

.aceite{
  display:flex;align-items:flex-start;gap:.8rem;
  margin-top:1.2rem;padding:.95rem 1rem;
  border:1.5px solid var(--line);border-radius:var(--raio);
  cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.aceite:hover{border-color:var(--blue-lt)}
.aceite:has(input:checked){border-color:var(--blue);background:rgba(45,107,228,.06)}
.aceite:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.aceite input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.aceite span{font-size:14.5px;line-height:1.45}

/* ---------------- RESULTADO ---------------- */

.selo{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);background:rgba(45,107,228,.1);
  padding:.5rem .85rem;border-radius:100px;margin-bottom:1.1rem;
}
.selo i{font-size:15px}

.corpo{margin-top:1.1rem;display:flex;flex-direction:column;gap:.9rem}
.corpo p{font-size:15.5px;color:var(--mid);line-height:1.65}

.resumo{margin-top:1.5rem;border:1px solid var(--line);border-radius:var(--raio);overflow:hidden}
.resumo-h{
  font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--light);
  padding:.85rem 1.05rem;background:var(--paper);border-bottom:1px solid var(--line);
}
.resumo dl{display:flex;flex-direction:column}
.resumo dl > div{
  display:flex;justify-content:space-between;gap:1.2rem;
  padding:.75rem 1.05rem;border-bottom:1px solid var(--line);
}
.resumo dl > div:last-child{border-bottom:0}
.resumo dt{font-size:13px;color:var(--light);flex:0 0 auto}
.resumo dd{font-size:13.5px;color:var(--ink);text-align:right;font-weight:500}

.aviso{margin-top:1.4rem;font-size:12.5px;color:var(--light);line-height:1.55}

.acoes{margin-top:auto;padding-top:1.8rem;display:flex;flex-direction:column;gap:.7rem}

/* ---------------- FITA DE DESENVOLVIMENTO ----------------
   PROVISORIO: remover antes de publicar.
   -------------------------------------------------------- */
.fita{
  position:fixed;left:0;bottom:0;z-index:50;
  font-family:"Montserrat",sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--navy);color:var(--blue-lt);
  padding:.4rem .7rem;border-radius:0 8px 0 0;opacity:.85;
}

/* ---------------- TELAS MAIORES ---------------- */

@media (min-width:640px){
  body{padding:0 1rem}
  .quiz{min-height:auto;margin:2.5rem auto;border-radius:20px;overflow:hidden}
  .palco{min-height:520px}
}

/* ---------------- MOVIMENTO REDUZIDO ---------------- */

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

/* ---------- Tela de gancho ---------- */

.titulo-gancho {
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 0.6rem;
}

.ajuda-gancho {
  font-size: clamp(15px, 4vw, 18px);
  margin-bottom: 1.75rem;
}

.aceite-fino {
  margin-top: 1.5rem;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mid);
  opacity: .8;
}

.aceite-fino input { margin-top: 2px; }

/* ---------- Rotulo e nota dentro da opcao ---------- */

.opcao-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}


/* ---------------- FORMULARIO DE CAPTURA ---------------- */

.form{margin-top:1.7rem;display:flex;flex-direction:column;flex:1 1 auto}

.campo{display:flex;flex-direction:column;margin-bottom:1.05rem}

.campo-rot{
  font-size:13.5px;font-weight:500;color:var(--mid);
  margin-bottom:.4rem;
}

.entrada{
  font-family:"Inter",system-ui,sans-serif;
  /* 16px nao e escolha estetica: abaixo disso o iPhone amplia a pagina
     ao focar o campo, e a tela salta. */
  font-size:16px;
  color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--raio);
  padding:.85rem 1rem;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
  -webkit-appearance:none;appearance:none;
}
.entrada::placeholder{color:var(--light)}
.entrada:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(45,107,228,.14);
}
.entrada-erro{border-color:#c0392b}
.entrada-erro:focus{box-shadow:0 0 0 3px rgba(192,57,43,.14)}

.erro{margin-top:.35rem;font-size:13px;line-height:1.4;color:#c0392b}

/* Erro da tentativa inteira, e nao de um campo. Fica entre o formulario
   e os botoes, com folga em cima, para nao parecer erro do ultimo campo. */
.erro-envio{
  margin-top:1rem;padding:.7rem .9rem;
  background:rgba(192,57,43,.07);border-left:3px solid #c0392b;
  border-radius:6px;font-size:14px;
}

/* Honeypot: fora da tela, fora da tabulacao, mas preenchivel por robo.
   Sem display:none, que alguns robos detectam e pulam. */
.isca{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

.captcha{min-height:0}


/* ---------------- CARTOES DA ABERTURA ---------------- */

.cartoes{margin-top:1.6rem;display:flex;flex-direction:column;gap:.8rem}

.cartao{
  display:flex;align-items:center;gap:1.1rem;width:100%;
  text-align:left;font:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--raio);
  padding:1.25rem 1.2rem;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cartao:hover{border-color:var(--blue-lt);box-shadow:0 8px 24px -16px rgba(13,27,62,.5)}
.cartao:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cartao:active{background:rgba(45,107,228,.04)}

.cartao-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.cartao-txt strong{
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:17px;line-height:1.25;letter-spacing:-.02em;
}
.cartao-txt small{font-size:13px;line-height:1.4;color:var(--mid)}

/* ---------------- SINAL DE PROIBIDO ---------------- */
/* O desenho por baixo, o anel e a barra vermelhos por cima. A barra
   branca mais grossa fica entre os dois e serve de recorte. */

.proibido{flex:0 0 auto;display:block;width:52px;height:52px}
.proibido svg{display:block;width:100%;height:100%}

.proibido-desenho{
  fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.proibido-anel{fill:none;stroke:#e5484d;stroke-width:4}

.proibido-vazado{stroke:#fff;stroke-width:7.5;stroke-linecap:round}
.proibido-barra{stroke:#e5484d;stroke-width:4;stroke-linecap:round}

@media (max-width:400px){
  .proibido{width:46px;height:46px}
  .cartao{gap:.9rem;padding:1.1rem 1rem}
  .cartao-txt strong{font-size:16px}
}