/* Compatibilidad Numerológica — dos nombres, barra de afinidad y veredicto de pareja. */

.ncc-page { color: #f3ead2; }
.ncc-header { text-align: center; margin-bottom: 1.4rem; }
.ncc-header h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #f3a9c2;
  text-shadow: 0 0 16px rgba(243,169,194,0.45);
  margin: 0 0 .6rem;
}
.ncc-intro { max-width: 62ch; margin: 0 auto; color: rgba(243,234,210,0.85); line-height: 1.55; }

.ncc-app { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.4rem; }

/* ---------- Form ---------- */
.ncc-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.3rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(243,169,194,0.3);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,200,220,0.06), transparent 60%),
    linear-gradient(165deg, #3a1c2c 0%, #1a0e16 100%);
}
.ncc-field { display: flex; flex-direction: column; gap: .35rem; }
.ncc-label { font-weight: 700; color: #f3a9c2; }
.ncc-input {
  width: 100%;
  padding: .75rem 1rem;
  background: rgba(26,14,22,0.6);
  border: 1px solid rgba(243,169,194,0.4);
  border-radius: 10px;
  color: #f3ead2;
  font-size: 1.05rem;
  font-family: inherit;
  box-sizing: border-box;
}
.ncc-input:focus { outline: none; border-color: rgba(243,169,194,0.85); box-shadow: 0 0 0 3px rgba(243,169,194,0.2); }
.ncc-input::placeholder { color: rgba(243,234,210,0.4); }
.ncc-heart { text-align: center; color: #f3a9c2; font-size: 1.5rem; opacity: .8; }
.ncc-calc { align-self: center; min-width: 200px; margin-top: .3rem; }

/* ---------- Result ---------- */
.ncc-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ncc-person { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.ncc-person-name { font-weight: 700; color: #f3ead2; font-size: 1.15rem; }
.ncc-person-num {
  font-size: .8rem;
  color: #f3a9c2;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.ncc-amp { color: #f3a9c2; font-size: 1.6rem; }

/* Compatibility bar */
.ncc-bar-wrap { display: flex; align-items: center; gap: .8rem; }
.ncc-bar {
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.ncc-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ad08a, #f3d56a);
  transition: width 1.2s cubic-bezier(.22,.9,.3,1);
}
.ncc-percent {
  font-weight: 800;
  font-size: 1.2rem;
  color: #f3ead2;
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
}

/* Bar colour by level */
.ncc-result[data-level="1"] .ncc-bar-fill { background: linear-gradient(90deg, #3fbf6a, #8fffa8); }
.ncc-result[data-level="2"] .ncc-bar-fill { background: linear-gradient(90deg, #c8a23a, #ffe08a); }
.ncc-result[data-level="3"] .ncc-bar-fill { background: linear-gradient(90deg, #c87a3a, #ffc08a); }
.ncc-result[data-level="4"] .ncc-bar-fill { background: linear-gradient(90deg, #b03a3a, #ff9a9a); }

.ncc-verdict-title {
  text-align: center;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 1.4rem;
  color: #f3a9c2;
  margin: .4rem 0 0;
}
.ncc-verdict-desc {
  text-align: center;
  line-height: 1.6;
  color: rgba(243,234,210,0.92);
  margin: 0;
  max-width: 52ch;
  margin-inline: auto;
}

.ncc-result { display: flex; flex-direction: column; gap: 1rem; text-align: center; }
.ncc-error { text-align: center; color: #ff9999; margin: 0; }

@media (max-width: 520px) {
  .ncc-calc { align-self: stretch; }
}