/* /minha-historia: uma pergunta por tela, estilo Typeform. Mobile first (390px). */
.sobre-ceu > section.hist-palco{background:transparent!important;padding:14px 0 30px}
.hist{max-width:640px}
.hist [hidden]{display:none!important}

/* logo: grande na abertura, menor nas perguntas */
.hist-logo{display:block;width:min(280px,72vw);height:auto;margin:6px auto 14px;transition:width .35s ease,margin .35s ease}
.hist-logo.pequeno-logo{width:min(150px,40vw);margin:0 auto 10px}

/* topo com a barra de progresso */
.hist-topo{display:flex;align-items:center;gap:10px;margin:0 2px 12px}
.hist-barra{flex:1;height:8px;border-radius:999px;background:rgba(7,120,129,.14);overflow:hidden}
.hist-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--dourado));transition:width .4s ease}
.hist-conta{font-size:13px;font-weight:700;color:var(--teal);white-space:nowrap;font-variant-numeric:tabular-nums}

/* cada tela */
.tela{display:none;padding:22px 18px;min-height:min(62svh,560px)}
.tela.ativo{display:flex;flex-direction:column;animation:passo-entra .38s cubic-bezier(.2,.8,.2,1)}
.tela.ativo.volta{animation-name:passo-volta}
@keyframes passo-entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes passo-volta{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
.passo-rotulo{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--teal)}
.passo-titulo{font-size:clamp(23px,6.2vw,32px);line-height:1.2;margin:0 0 14px}
h1.passo-titulo{font-size:clamp(27px,7.4vw,40px);text-align:center}
.passo-sub{color:var(--tinta-fraca);font-size:16px;margin:0 0 14px}
.tela[data-passo="inicio"]{text-align:left}
.tela[data-passo="inicio"] .selo{align-self:center}
.tela[data-passo="inicio"] .passo-sub{text-align:center}
.tela .dica{font-size:15px;color:var(--tinta-fraca);background:var(--areia);border-radius:12px;padding:10px 12px;margin:0 0 14px}

/* abertura */
.aviso-tempo{background:#fff6e0;border:2px solid var(--dourado);border-radius:14px;padding:14px 16px;margin:4px 0 14px}
.aviso-tempo > b{display:block;font-size:17px;line-height:1.35;margin-bottom:4px}
.aviso-tempo p{margin:0;font-size:15px}
.dicas-curtas{margin:0 0 18px;padding-left:20px;font-size:15px}
.dicas-curtas li{margin:5px 0}
.escolha-modo{display:grid;gap:10px;margin-bottom:12px}
.escolha-modo .botao{width:100%}
.botao.grande{min-height:60px;font-size:18px;flex-direction:column;gap:0;line-height:1.15}
.botao.grande small{font-size:12px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.5px}

/* campos */
.hist .dupla{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:560px){.hist .dupla{grid-template-columns:1fr 1fr}}
.hist .linha-zap{display:grid;grid-template-columns:118px 1fr;gap:8px}
.hist input,.hist select,.hist textarea{font-size:17px}
.opcoes-grandes{display:grid;gap:10px}
.opcoes-grandes .opcao input{width:22px;height:22px;margin:0;accent-color:var(--teal)}
.opcoes-grandes .opcao:has(input:checked){border-color:var(--teal);background:#eaf6f6}

/* pergunta: áudio em destaque ou texto em destaque */
.pergunta textarea{min-height:150px;resize:vertical;margin-top:10px}
.gravador{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gravador .gravar{min-height:64px;font-size:18px;padding:14px 26px;flex:1 1 100%}
.gravador .gravando{background:#d62828;animation:pulsa 1.2s ease-in-out infinite}
.gravador .gravando:hover{background:#b71f1f}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(214,40,40,.45)}50%{box-shadow:0 0 0 12px rgba(214,40,40,0)}}
.gravador .tempo{font-variant-numeric:tabular-nums;font-weight:800;color:#d62828;font-size:18px}
.gravador .tirar-audio{min-height:40px;padding:8px 14px;font-size:14px}
.gravador audio{width:100%;height:44px}
.gravador .anexar{font-size:14px;color:var(--teal);text-decoration:underline;cursor:pointer}
.gravador .status{font-size:14px;color:var(--tinta-fraca);flex:1 1 100%}
.gravador .status:empty{display:none}
.link-escrever,.link-voltar{background:none;border:0;padding:10px 0 0;font:600 15px var(--fonte);color:var(--teal);text-decoration:underline;cursor:pointer;align-self:flex-start}
.modo-audio .pergunta:not(.escrevendo) textarea{display:none}
.modo-audio .pergunta.escrevendo .link-escrever{display:none}
.modo-texto .link-escrever{display:none}
.modo-texto .pergunta{flex-direction:column}
.modo-texto .pergunta textarea{order:4;margin-top:0}
.modo-texto .pergunta .gravador{order:5;margin-top:12px}
.modo-texto .gravador .gravar{background:var(--papel);color:var(--teal);border:2px solid var(--teal);min-height:48px;font-size:15px;flex:0 1 auto}
.modo-texto .gravador .gravar.gravando{background:#d62828;color:#fff;border-color:#d62828}

/* navegação */
.hist-nav{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:12px}
.hist-nav .voltar{padding:14px 16px}
.hist .erro:empty{display:none}
.hist .erro{margin:12px 2px 0;font-weight:600}
.hist-rodape{text-align:center;margin-top:12px}

/* fotos */
.escolher-fotos{margin:4px 0 14px;align-self:flex-start}
.grade-fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:560px){.grade-fotos{grid-template-columns:repeat(3,1fr)}}
.foto-item{position:relative;border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff}
.foto-item img,.foto-item .sem-previa{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--areia)}
.foto-item .sem-previa{display:grid;place-items:center;font-size:13px;color:var(--tinta-fraca);text-align:center;padding:8px}
.foto-item input{border:0;border-top:1px solid var(--linha);border-radius:0;padding:8px;font-size:16px}
.foto-item .tirar{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;cursor:pointer}

/* envio */
.resumo-envio{background:var(--areia);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:15px}
.resumo-envio .falta{color:#b3261e}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer;margin-bottom:12px}
.aceite input{width:22px;height:22px;flex:0 0 22px;margin-top:2px}
.hist .enviar{width:100%;margin-top:8px;min-height:58px;font-size:18px}
.progresso{margin-top:12px}
.progresso .barra{height:12px;border-radius:999px;background:var(--areia);overflow:hidden}
.progresso .barra i{display:block;height:100%;width:0;background:var(--teal);transition:width .2s}
.progresso p{font-size:14px;font-weight:600;margin-top:6px}
.obrigado{text-align:center;margin:10px 0 20px;padding:26px 18px}

@media (prefers-reduced-motion: reduce){
  .tela.ativo,.tela.ativo.volta,.gravador .gravando{animation:none}
  .hist-logo,.hist-barra i{transition:none}
}

/* o botão flutuante do WhatsApp fica no canto de baixo: a navegação abre espaço para ele no celular */
@media (max-width:480px){.hist-nav{padding-right:58px}}

/* Episódios na abertura: fora da .hist (640px) para caber 3 colunas no desktop. */
.sobre-ceu > section.hist-videos{background:transparent!important;padding:4px 0 44px}
.hist-videos[hidden]{display:none!important}
.hv-grade{max-width:1180px;margin:0 auto;padding:0 16px;display:grid;gap:18px}
.hv-video{margin:0}
.hv-quadro{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:4px solid #111;box-shadow:8px 8px 0 #111;background:#000}
.hv-quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hv-video figcaption{font-weight:800;margin-top:12px;text-align:center;font-size:16px}
.hv-texto{margin:0;text-align:center;font-size:17px;line-height:1.5;background:rgba(255,255,255,.92);border-radius:16px;padding:16px 18px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
@media (min-width:900px){.hv-grade{max-width:960px;grid-template-columns:300px 1fr;align-items:center;gap:28px}.hv-texto{font-size:18px}}

/* vídeo que apresenta o assunto, acima da caixa da abertura */
.hist-intro-video{margin:0 0 18px}
.hist-intro-video figcaption{font-weight:800;margin-top:12px;text-align:center;font-size:15px;color:var(--teal-escuro)}
.aviso-tempo .aviso-fotos{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.18)}