/* ==========================================
   DESIGN SYSTEM — HERDADO DA LANDING
========================================== */

:root {
  --bg-1:#f6f7fb;
  --bg-2:#eceef6;
  --txt:#1f2230;
  --txt-soft:#5a607a;
  --brand:#6a5acd;
  --brand-2:#20b2aa;
  --card:rgba(255,255,255,.65);
  --stroke:rgba(99,102,241,.15);
  --shadow:0 10px 30px rgba(31,34,48,.12);
  --radius:22px;
  --maxw:760px;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Inter,system-ui,sans-serif;
}

/* ==========================================
   BODY / FUNDO
========================================== */

body {
  min-height:100vh;
  color:var(--txt);
  background:
    radial-gradient(1200px 800px at 10% 20%, var(--bg-2), transparent 60%),
    radial-gradient(1000px 700px at 90% 80%, var(--bg-2), transparent 60%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2));
  overflow-x:hidden;
}

h1 {
  margin:14px 0 0;
  font-size:clamp(28px,4.5vw,40px);
  font-weight:800;
  line-height:1.15;
  color:var(--txt);
}

#app {
  width:100%;
  height:100%;
}

/* ==========================================
   TELAS
========================================== */

.tela {
  min-height:100vh;
  display:none;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
}

.tela.active {
  display:flex;
}

/* ==========================================
   CARD MESTRE (IGUAL À LANDING)
========================================== */

.card-master {
  width:100%;
  max-width:var(--maxw);
  min-height:520px;

  padding:32px 28px;

  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;
}

/* ==========================================
   TEXTO / TÍTULOS
========================================== */

.titulo-inicio {
      background:linear-gradient(90deg,var(--brand),var(--brand-2));
      -webkit-background-clip:text;
      color:transparent;
      display:block;
}


.subtitulo-inicio {
      display:block;
      margin-top:10px;
      font-size:0.7em;
      font-weight:600;
      color:var(--txt-soft);
}

.contador {
  font-size:15px;
  color:var(--txt-soft);
  margin-bottom:16px;
}

.pergunta {
  font-size:22px;
  font-weight:600;
  margin:0 0 26px;
  line-height:1.45;
}

/* ==========================================
   ESCALA LIKERT — CÍRCULOS PERFEITOS
========================================== */

.faixa-legenda {
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--txt-soft);
  margin-bottom:8px;
  padding:0 12px;
}

.faixa-valores {
  width:100%;
  display:flex;
  justify-content:center;
  gap:14px;
}

.likert {
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;

  border-radius:50%;
  border:1px solid var(--stroke);

  background:rgba(255,255,255,.75);
  font-size:16px;
  font-weight:600;
  color:var(--txt-soft);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition:all .18s ease;
}

.likert:hover {
  background:linear-gradient(
    135deg,
    rgba(106,90,205,.18),
    rgba(32,178,170,.16)
  );
  color:var(--txt);
  transform:scale(1.08);
}

.likert.ativo {
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:transparent;
  transform:scale(1.12);
  box-shadow:0 8px 18px rgba(31,34,48,.25);
}

.likert:focus,
.likert:active,
.likert:focus-visible {
  outline: none;
  box-shadow: none;
}

.likert:not(.ativo) {
  background:rgba(255,255,255,.75);
  color:var(--txt-soft);
  transform:scale(1);
}


/* ==========================================
   BOTÕES
========================================== */

.btn {
  border:none;
  cursor:pointer;
  transition:.2s ease;
}

.btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 32px;
  border-radius:999px;

  font-size:18px;
  font-weight:600;

  color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  text-decoration:none;

  margin:28px auto 0;
}


/* ==========================================
   MICRO TEXTO
========================================== */

.micro {
  margin-top:12px;
  font-size:13px;
  color:var(--txt-soft);
  opacity:.75;
}

/* ==========================================
   BOTÃO FECHAR
========================================== */

.btn-fechar {
  position:fixed;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:#555;
  background:rgba(255,255,255,.9);
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  text-decoration:none;
  z-index:9999;
}

/* ==========================================
   MOBILE FIRST
========================================== */

@media (max-width:480px) {
  .card-master {
    min-height:440px;
    padding:28px 20px;
  }

  .pergunta {
    font-size:20px;
  }

  .faixa-valores {
    gap:10px;
  }

  .likert {
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    font-size:15px;
  }

  .micro {
    font-size:12px;
  }
}


/* ==========================================
   MODAL PREMIUM — CORREÇÃO DEFINITIVA
========================================== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 26, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 24px;
}

.modal.hide {
  display: none;
}

.modal .card-master {
  max-width: 520px;
  width: 100%;
  min-height: auto;
}

/* Opcional: animação sutil */
.modal:not(.hide) .card-master {
  animation: modalIn .35s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ==========================================
   MODAL BOX — LAYOUT CORRETO
========================================== */

.modal-box {
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  padding: 32px 28px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  text-align: center;
}

.modal-box h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

.premium-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-soft);
  margin-bottom: 18px;
}

.premium-preco {
  font-size: 16px;
  margin-bottom: 22px;
}

.premium-preco span {
  font-size: 13px;
  color: var(--txt-soft);
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-secondary {
  background: none;
  color: var(--txt-soft);
  font-size: 14px;
  text-decoration: underline;
}


/* ==========================================
   GRÁFICO DISC — CORES DEFINITIVAS
========================================== */

#grafico-barras {
  width: 100%;
  margin: 24px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.barra {
  height: 42px;
  border-radius: 999px;
  position: relative;
  transition: width .6s ease;
}

.barra span {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #fff;
}

/* Cores DISC */
.barra.d { background:#ff2d2d; } /* vermelho */
.barra.i { background:#ffb400; } /* amarelo */
.barra.s { background:#00a650; } /* verde */
.barra.c { background:#0070f3; } /* azul */


.resultado-limite {
  margin-top: 18px;
  font-size: 14px;
  color: var(--txt-soft);
  opacity: .9;
}

.metodo-ufania {
  font-size: 12px;
  color: var(--txt-soft);
  opacity: .75;
  margin-bottom: 12px;
}