/* ============================================================
   Formulário de aplicação — pele escura do funil
   Tokens da seção 4 do BRIEFING-PAGINAS.md. Sora sozinha.
   ============================================================ */

:root{
  --gluon-grey:#181D20;
  --depth-navy:#21323B;
  --base-clara:#ECEEE8;
  --scarborough:#7F9394;
  --aqua-whisper:#C1DFE0;
  --aqua-hover:#9ECACB;
  --yellow-gold:#E2B765;
  --aw10:rgba(193,223,224,0.08);
  --aw20:rgba(193,223,224,0.18);
  --sc15:rgba(127,147,148,0.15);
  --font:'Sora',sans-serif;
  --erro:#E88B7D;
}

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

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

body{
  font-family:var(--font);
  background:var(--gluon-grey);
  color:var(--base-clara);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* glow no topo, atrás de tudo */
body::before{
  content:'';
  position:fixed;
  top:-200px;left:50%;
  transform:translateX(-50%);
  width:720px;height:460px;
  background:radial-gradient(ellipse at 50% 0%,rgba(193,223,224,0.16) 0%,rgba(193,223,224,0.04) 55%,transparent 80%);
  pointer-events:none;
  z-index:0;
}

/* ---------- Casca de tela cheia ---------- */
.app{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* Na abertura o botão anda junto com o conteúdo, em vez de ficar preso na
   base da tela. Sem isto, em tela alta o texto centraliza no meio e o botão
   fica lá embaixo sozinho, com um vão no meio. O palco para de esticar e o
   conjunto inteiro (texto, carrossel e botão) centraliza como um bloco só.
   Se o conteúdo passar da altura da tela, o rodapé continua sticky e volta
   a grudar embaixo. */
.app:has(.tela--intro){justify-content:center}
.app:has(.tela--intro) .palco{flex:0 0 auto}

/* ---------- Topo: progresso + marca discreta ---------- */
.topo{
  position:sticky;
  top:0;
  z-index:5;
  background:linear-gradient(180deg,var(--gluon-grey) 60%,rgba(24,29,32,0));
  padding-bottom:8px;
}

.barra{
  height:2px;
  width:100%;
  background:var(--sc15);
}
.barra__fill{
  height:100%;
  width:0%;
  background:var(--aqua-whisper);
  box-shadow:0 0 10px rgba(193,223,224,0.5);
  transition:width .45s cubic-bezier(0.16,1,0.3,1);
}

/* 3 colunas fixas: voltar | nome | tempo. O nome fica no centro mesmo
   quando o voltar some (primeira pergunta). */
.topo__linha{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:14px 20px 0;
  max-width:640px;
  margin:0 auto;
  width:100%;
}

.marca{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--scarborough);
}

.passo{
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.08em;
  color:rgba(127,147,148,0.7);
  font-variant-numeric:tabular-nums;
}

/* botão voltar, discreto, só depois da tela 1 */
.voltar{
  background:none;
  border:0;
  color:var(--scarborough);
  font-family:var(--font);
  font-size:.72rem;
  font-weight:500;
  cursor:pointer;
  padding:4px 0;
  display:none;
  align-items:center;
  gap:5px;
  transition:color .15s;
}
.voltar:hover{color:var(--aqua-whisper)}
.voltar.visivel{display:inline-flex}
.voltar{grid-column:1;justify-self:start}
.marca{grid-column:2;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.marca__foto{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;display:none}
.marca--foto .marca__foto{display:block}
/* Tela do preço: a foto do Zé ao lado do "Como prometi" */
.fala{display:flex;align-items:flex-start;gap:12px}
.fala__foto{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;margin-top:2px;border:1px solid rgba(193,223,224,.25)}
.fala p{margin:0}
.passo{grid-column:3;justify-self:end}

/* ---------- Miolo: uma pergunta, centralizada ---------- */
.palco{
  flex:1;
  display:flex;
  justify-content:center;
  padding:22px 20px 20px;
  min-width:0;
}
/* Dois detalhes aqui, os dois necessários.
   min-width:0 porque este div é o item flex: sem ele o trilho do carrossel
   (largura de todas as fotos somadas) estica a coluna e joga o texto pra
   fora da tela no celular.
   margin:auto no lugar de align-items:center porque centraliza igual, mas
   quando o conteúdo passa da altura da tela ele ainda rola até o topo, o
   que align-items:center não deixa. É o que tira o vão entre o carrossel
   e o botão sem quebrar a tela de abertura no celular. */
.palco > *{
  min-width:0;
  width:100%;
  max-width:600px;
  margin:auto;
}

.tela{
  width:100%;
  max-width:600px;
  /* Sem isto o carrossel estica a tela: item flex não encolhe abaixo do
     próprio conteúdo, e o trilho tem largura de todas as fotos somadas. */
  min-width:0;
}

.selo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--scarborough);
  background:rgba(193,223,224,0.06);
  border:1px solid rgba(193,223,224,0.14);
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:24px;
}
.selo::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--aqua-whisper);
  box-shadow:0 0 8px rgba(193,223,224,0.6);
}

.pergunta{
  font-size:clamp(1.35rem,4.4vw,1.85rem);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--base-clara);
  margin-bottom:12px;
  text-wrap:balance;
}
.pergunta .accent,
.corpo .accent{
  color:transparent;
  background:linear-gradient(135deg,var(--aqua-whisper) 0%,rgba(193,223,224,0.5) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 24px rgba(193,223,224,0.18));
}

.ajuda{
  font-size:.86rem;
  font-weight:400;
  line-height:1.65;
  color:var(--scarborough);
  margin-bottom:28px;
  max-width:480px;
}

.corpo{
  margin-bottom:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.corpo p{
  font-size:.88rem;
  line-height:1.7;
  color:var(--scarborough);
}
.corpo strong,
.ajuda strong,
.pergunta strong{
  color:var(--aqua-whisper);
  font-weight:600;
}

/* Na tela 10 o título é a frase de acolhimento e a pergunta de verdade
   é a linha de baixo. Ela não pode ficar com cara de subtexto. */
.tela--preco .ajuda{
  color:var(--base-clara);
  font-weight:600;
  font-size:.98rem;
  margin-bottom:22px;
}

/* ---------- Escolha: botão grande com a letra ---------- */
.opcoes{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.opcao{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  background:rgba(193,223,224,0.04);
  border:1px solid rgba(193,223,224,0.12);
  border-radius:14px;
  padding:16px 18px;
  color:var(--base-clara);
  font-family:var(--font);
  font-size:.95rem;
  font-weight:500;
  line-height:1.4;
  cursor:pointer;
  transition:background .15s,border-color .15s,transform .12s;
}
.opcao:hover{
  background:rgba(193,223,224,0.08);
  border-color:rgba(193,223,224,0.3);
}
.opcao:active{transform:scale(.99)}
.opcao.marcada{
  background:rgba(193,223,224,0.12);
  border-color:var(--aqua-whisper);
}

.opcao__letra{
  flex-shrink:0;
  width:30px;height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(193,223,224,0.08);
  border:1px solid rgba(193,223,224,0.16);
  font-size:.75rem;
  font-weight:700;
  color:var(--scarborough);
  transition:background .15s,color .15s,border-color .15s;
}
.opcao:hover .opcao__letra,
.opcao.marcada .opcao__letra{
  background:var(--aqua-whisper);
  border-color:var(--aqua-whisper);
  color:#111820;
}

/* ---------- Campos ---------- */
.campo{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
  background:rgba(193,223,224,0.04);
  border:1px solid rgba(193,223,224,0.14);
  border-radius:14px;
  transition:border-color .15s,background .15s;
}
.campo:focus-within{
  border-color:var(--aqua-whisper);
  background:rgba(193,223,224,0.07);
}
.campo__prefixo{
  padding-left:18px;
  font-size:1.05rem;
  font-weight:600;
  color:var(--scarborough);
}
.campo input{
  flex:1;
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:var(--base-clara);
  font-family:var(--font);
  font-size:1.05rem;
  font-weight:500;
  padding:17px 18px;
}
.campo__prefixo + input{padding-left:6px}
.campo input::placeholder{color:rgba(127,147,148,0.55);font-weight:400}

/* dissertação: o espaço em branco é que comunica "escreve à vontade" */
.disserta{
  width:100%;
  background:rgba(193,223,224,0.04);
  border:1px solid rgba(193,223,224,0.14);
  border-radius:14px;
  color:var(--base-clara);
  font-family:var(--font);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  padding:18px;
  min-height:180px;
  resize:vertical;
  outline:0;
  transition:border-color .15s,background .15s;
}
.disserta:focus{
  border-color:var(--aqua-whisper);
  background:rgba(193,223,224,0.07);
}
.disserta::placeholder{color:rgba(127,147,148,0.55)}

/* opt-in */
.optin{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:16px;
  cursor:pointer;
  font-size:.82rem;
  line-height:1.55;
  color:var(--scarborough);
}
.optin input{
  appearance:none;
  -webkit-appearance:none;
  flex-shrink:0;
  width:20px;height:20px;
  margin-top:1px;
  border:1px solid rgba(193,223,224,0.28);
  border-radius:6px;
  background:rgba(193,223,224,0.04);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .15s,border-color .15s;
}
.optin input:checked{
  background:var(--aqua-whisper);
  border-color:var(--aqua-whisper);
}
.optin input:checked::after{
  content:'';
  width:5px;height:9px;
  border:solid #111820;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}

/* erro */
.erro{
  display:none;
  margin-top:12px;
  font-size:.8rem;
  font-weight:500;
  color:var(--erro);
}
.erro.visivel{display:block}

/* ---------- Rodapé fixo: o botão no alcance do polegar ---------- */
.rodape{
  position:sticky;
  bottom:0;
  z-index:5;
  padding:16px 20px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(24,29,32,0) 0%,var(--gluon-grey) 42%);
}
.rodape__interno{
  max-width:600px;
  margin:0 auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--aqua-whisper);
  color:#111820;
  font-family:var(--font);
  font-size:.94rem;
  font-weight:700;
  padding:16px 30px;
  border:0;
  border-radius:24px;
  cursor:pointer;
  letter-spacing:.01em;
  transition:opacity .15s,transform .15s;
}
.cta:hover{opacity:.88;transform:translateY(-1px)}
.cta:active{transform:scale(.98)}
.cta[disabled]{opacity:.45;cursor:default;transform:none}

.dica{
  font-size:.7rem;
  color:rgba(127,147,148,0.7);
  letter-spacing:.02em;
}
@media (hover:none){.dica{display:none}}

.rodape__interno .nota{flex-basis:100%;margin-top:-6px}
/* Botão no centro em todas as telas, no PC também (no celular o botão já ocupa a linha).
   A dica e a nota descem pra linha de baixo, centralizadas. */
.rodape__interno{justify-content:center}
.rodape__interno .nota,
.rodape__interno .dica{flex-basis:100%;text-align:center}
.rodape__interno .dica{margin-top:-6px}
.nota{
  white-space:pre-line;
  font-size:.72rem;
  line-height:1.4;
  color:rgba(127,147,148,0.85);
  letter-spacing:.01em;
}

/* ---------- Transição entre telas ---------- */
@keyframes entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes sai{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-10px)}
}
.tela.entrando{animation:entra .32s cubic-bezier(0.16,1,0.3,1) both}
.tela.saindo{animation:sai .16s ease-in both}

@media (prefers-reduced-motion:reduce){
  .tela.entrando,.tela.saindo{animation:none}
  .barra__fill{transition:none}
  .cta:hover,.opcao:active,.cta:active{transform:none}
}

/* ---------- Envio e erro de envio ---------- */
.enviando{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
  color:var(--scarborough);
  font-size:.9rem;
}
.spinner{
  width:34px;height:34px;
  border:2px solid var(--sc15);
  border-top-color:var(--aqua-whisper);
  border-radius:50%;
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2.4s}
}

.ctas-linha{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.cta-fantasma{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  color:var(--aqua-whisper);
  font-family:var(--font);
  font-size:.9rem;
  font-weight:600;
  padding:15px 26px;
  border-radius:24px;
  border:1px solid rgba(193,223,224,0.28);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.cta-fantasma:hover{
  background:rgba(193,223,224,0.06);
  border-color:rgba(193,223,224,0.5);
}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  .palco{padding:20px 18px 18px}
  .corpo{gap:11px}
  .corpo p{font-size:.85rem;line-height:1.62}
  .topo__linha{padding:12px 18px 0}
  .rodape{padding:14px 18px calc(18px + env(safe-area-inset-bottom))}
  .rodape__interno{flex-direction:row;flex-wrap:wrap}
  .cta{flex:1;padding:17px 24px}
  .rodape__interno .nota{text-align:center}
  .disserta{min-height:150px}
  .opcao{padding:15px 16px;font-size:.92rem}
}

/* opt-in em texto, sem caixinha (28/09) */
.optin--aviso{ display:block; cursor:default; margin:14px 0 0; }

/* 30/09, pedido do Zé: pílula com bolinha desvaloriza o site. O selo que
   sobrou (quando traz informação) vira só uma linha de texto discreta. */
.selo,.objecao .selo,.modo-limpo .objecao .selo{background:none!important;border:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
.selo::before,.objecao .selo::before,.modo-limpo .objecao .selo::before{display:none!important;content:none!important}

/* Contador de vagas na abertura do formulário (30/09), no molde da /vaga */
.vagas-abertura{display:flex;align-items:center;gap:11px;text-align:left;margin:16px auto 0;max-width:460px;
  padding:9px 14px;border-radius:13px;background:var(--depth-navy);border:1px solid rgba(193,223,224,0.10)}
.vagas-abertura p{font-size:.78rem;line-height:1.45;color:var(--scarborough);margin:0}
.vagas-abertura p strong{color:var(--base-clara)}
.vagas-abertura__num{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:46px}
.vagas-abertura__n{display:inline-block;font-size:1.8rem;font-weight:800;line-height:1;color:var(--aqua-whisper);text-shadow:0 0 14px rgba(193,223,224,0.35)}
.vagas-abertura__rot{font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;text-align:center;color:var(--scarborough)}
@keyframes vagaDesceAbertura{from{opacity:.2;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.vagas-abertura__n.desceu{animation:vagaDesceAbertura .32s ease-out}

/* ---------- 07/10: barra de progresso mais visível ----------
   Mesmo lugar e mesmo JS (o #barra continua mudando só o width):
   mais grossa, arredondada e com a bolinha na ponta. */
.barra{height:5px;border-radius:99px}
.barra__fill{
  position:relative;border-radius:99px;
  background:linear-gradient(90deg,rgba(193,223,224,0.35),var(--aqua-whisper));
  box-shadow:none;transition:width .55s cubic-bezier(0.16,1,0.3,1);
}
.barra__fill::after{
  content:"";position:absolute;right:-1px;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(50%,-50%);background:var(--aqua-whisper);
  box-shadow:0 0 0 4px rgba(193,223,224,0.15),0 0 14px rgba(193,223,224,0.7);
}
.barra__fill[style*="width: 0"]::after,.barra__fill[style*="width:0"]::after{display:none}

/* ---------- 07/10: textura da marca parada na capa ----------
   Guia de marca: textura pequena (bloco 44 px, sálvia, 55%), num canto
   só, sumindo em diagonal, longe do texto. Parada, pra não disputar
   com o carrossel de fotos. Só na tela de abertura. */
.tela--intro{position:relative;isolation:isolate}

/* 07/10 (4), pedido do Zé: a textura começa lá em cima, atrás do nome, do
   CRN e do tempo, e desce até o texto, no celular e no computador. Mesmo
   esmaecimento circular a partir do canto direito da coluna. Fica atrás de
   tudo; na abertura o topo fica transparente e só ganha fundo ao rolar. */
.app:has(.tela--intro)::before{
  content:"";position:absolute;top:0;right:0;   /* 07/10: encosta na borda, sem respiro (pedido do Zé) */
  
  width:min(300px,72%);height:330px;z-index:-1;pointer-events:none;
  background:url("/funil/fotos/textura-marca.svg") 100% 0/44px 44px repeat;opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,rgba(0,0,0,.45) 34%,transparent 70%);
          mask-image:radial-gradient(circle at 100% 0,#000 0,rgba(0,0,0,.45) 34%,transparent 70%);
}
.app:has(.tela--intro) .topo{background:transparent}
html.rolou .app:has(.tela--intro) .topo{background:linear-gradient(180deg,var(--gluon-grey) 60%,rgba(24,29,32,0))}

/* 07/10 (5), pedido do Zé: o topo fica colado lá em cima (sem o vão acima do
   nome) e o resto da abertura vem logo abaixo, como um bloco só (texto,
   carrossel e botão juntos). No computador a textura ocupa
   a largura toda no alto e some pra baixo; no celular fica no canto. */
.app:has(.tela--intro){justify-content:flex-start}
/* sem centralizar: título, carrossel e botão vêm logo abaixo do topo, juntos;
   em tela alta a sobra fica no fim da página, não entre o nome e o título */
.app:has(.tela--intro) .palco{margin-block:0}
@media (min-width:701px){
  .app:has(.tela--intro)::before{
    left:0;right:0;width:auto;height:260px;opacity:.38;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);
  }
}