/* ===== PUSPITA DIGITAL — modal de diagnóstico rápido ===== */
/* Paleta alinhada ao index.html: #07070F (grafite), #F4F1FF (off-white), #9B6DFF (roxo), #FCD47D (dourado) */

.tf-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px;}
.tf-modal.is-open{display:flex;}
.tf-backdrop{position:absolute; inset:0; background:rgba(7,7,15,0.75); backdrop-filter:blur(6px);}
body.modal-open{overflow:hidden;}

/* No celular, alinhar ao topo (em vez de centralizar) evita que o teclado
   empurre o modal pra fora da tela quando o campo de texto está focado. */
@media (max-width:640px){
  .tf-modal{ align-items:flex-start; padding:12px; }
  .tf-shell{ margin-top:max(12px, env(safe-area-inset-top)); }
}

.tf-shell{
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:#F4F1FF; color:#07070F; border-radius:28px; padding:40px 32px 24px;
  box-shadow:0 30px 90px rgba(0,0,0,0.55);
  font-family:'Sora', sans-serif;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:640px){ .tf-shell{ padding:28px 18px 16px; border-radius:20px; max-height:94vh; } }
@media (max-width:360px){ .tf-shell{ padding:22px 14px 14px; } .tf-step h2{ font-size:20px; } }

.tf-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:999px;
  background:#07070F; color:#F4F1FF; border:none; font-size:20px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .2s;
}
.tf-close:hover{ background:#9B6DFF; color:#000; }

.tf-progress{ height:3px; width:100%; background:rgba(7,7,15,0.1); border-radius:99px; overflow:hidden; margin-bottom:28px; }
.tf-progress-bar{ display:block; height:100%; width:0%; background:#9B6DFF; transition:width .3s ease; }

.tf-step{ display:none; }
.tf-step.is-active{ display:block; animation:tfIn .35s ease; }
@keyframes tfIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.tf-icon{ width:44px; height:44px; border-radius:999px; background:rgba(155,109,255,0.15); border:1px solid rgba(155,109,255,0.3); display:grid; place-items:center; margin-bottom:18px; color:#9B6DFF; }
.tf-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.tf-kicker{ font-size:11px; letter-spacing:0.2em; font-weight:700; opacity:0.5; margin-bottom:10px; text-transform:uppercase; }
.tf-step h2{ font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-0.02em; font-size:24px; line-height:1.15; margin-bottom:14px; }
.tf-text{ font-size:14px; line-height:1.55; opacity:0.75; margin-bottom:22px; }

.tf-fields{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.tf-fields input{
  height:52px; border-radius:999px; border:1px solid rgba(7,7,15,0.12); background:#fff;
  padding:0 20px; font-size:16px; outline:none; width:100%;
}
.tf-fields input:focus{ border-color:#07070F; box-shadow:0 0 0 3px rgba(7,7,15,0.08); }

.tf-options{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.tf-option{ position:relative; display:block; cursor:pointer; }
.tf-option input{ position:absolute; opacity:0; }
.tf-option span{
  display:block; padding:14px 18px; border-radius:16px; border:1px solid rgba(7,7,15,0.12);
  background:#fff; font-size:14px; font-weight:600; transition:all .18s;
}
.tf-option input:checked + span{ border-color:#07070F; background:#07070F; color:#FCD47D; }
.tf-option:hover span{ border-color:#9B6DFF; }

.price-box{
  background:#07070F; color:#F4F1FF; border-radius:20px; padding:24px; margin-bottom:18px;
}
.price-box > span{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; opacity:0.5; }
.price-box strong{ display:block; font-family:'Sora',sans-serif; font-weight:700; font-size:30px; color:#FCD47D; margin:8px 0 10px; letter-spacing:-0.01em; }
.price-box p{ font-size:13px; line-height:1.5; opacity:0.75; margin-bottom:8px; }
.price-box small{ display:block; font-size:11px; line-height:1.5; opacity:0.55; }

.tf-nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:22px; padding-top:14px; position:sticky; bottom:0; z-index:5;
  background:#F4F1FF; box-shadow:0 -12px 16px -4px rgba(244,241,255,0.95);
}
.tf-back{
  background:none; border:none; font-size:13px; font-weight:600; opacity:0.5; cursor:pointer;
  padding:14px 10px; min-height:44px;
}
.tf-back:hover{ opacity:0.85; }
.tf-next, .tf-modal .btn-primary{
  flex:1; height:52px; border-radius:999px; border:none; background:#07070F; color:#FCD47D;
  font-weight:700; font-size:14px; letter-spacing:-0.01em; cursor:pointer; transition:background .2s;
}
.tf-next:hover, .tf-modal .btn-primary:hover{ background:#9B6DFF; color:#000; }
.tf-next:disabled, .tf-modal .btn-primary:disabled{ opacity:0.6; cursor:not-allowed; }

/* Etapa 0 (intro) e etapas finais (sucesso/recusa) usam só o botão próprio
   da seção ou o X pra fechar — o nav Voltar/Continuar fica escondido. */
.tf-modal.hide-nav .tf-nav{ display:none; }
.tf-step[data-step="0"] .btn-primary{ width:100%; height:52px; border-radius:999px; }

.tf-error, .tf-submit-error{ display:none; color:#C1432A; font-size:12px; font-weight:600; margin-top:10px; text-align:center; }
.tf-error.is-visible, .tf-submit-error.is-visible{ display:block; }

.tf-loading{ opacity:0.6; pointer-events:none; }

.tf-success .tf-icon, .tf-decline .tf-icon{ width:56px; height:56px; }
.tf-success .tf-icon{ background:rgba(155,109,255,0.15); color:#9B6DFF; }
.tf-decline .tf-icon{ background:rgba(7,7,15,0.08); color:#07070F; }