/* ============================================================
   Evaluador de Madurez Ciber — Plentius styles
   Paleta: teal #1BA098 + navy #2D5B8E · Space Grotesk + Inter
   ============================================================ */

.pl-ciber {
  --teal: #1BA098;
  --navy: #2D5B8E;
  --ink: #0F1E2E;
  --muted: #5A6B7A;
  --line: #E2EAEF;
  --bg-soft: #FBFDFE;
  --radius: 18px;
  --radius-sm: 12px;
  --pad: clamp(18px, 4vw, 32px);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

.pl-ciber * { box-sizing: border-box; }

/* ---------- Hero ---------- */
.pl-ciber__hero {
  text-align: center;
  padding: 28px 0 20px;
  margin-bottom: 8px;
}
.pl-ciber__badge {
  display: inline-block;
  background: rgba(27, 160, 152, 0.1);
  color: var(--teal);
  border: 1px solid rgba(27, 160, 152, 0.35);
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pl-ciber__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.pl-ciber__sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.4px;
  margin: 0 0 12px;
}
.pl-ciber__intro {
  font-size: 15px;
  color: #46586A;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Headers comunes ---------- */
.pl-ciber__h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 14px;
}
.pl-ciber__h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 26px 0 8px;
}

/* ---------- Botones ---------- */
.pl-ciber__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 11px 22px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  border: 1.5px solid transparent;
}
.pl-ciber__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pl-ciber__btn:not(:disabled):hover { filter: brightness(1.05); transform: translateY(-1px); }
.pl-ciber__btn--primary {
  background: linear-gradient(135deg, var(--teal), var(--navy));
  color: #fff;
  box-shadow: 0 14px 26px -14px rgba(27, 160, 152, 0.6);
}
.pl-ciber__btn--ghost {
  background: transparent;
  color: #46586A;
  border: 1.5px solid #C7D3DC;
}

/* ---------- Pantallas (overlay) ---------- */
.pl-ciber[data-screen="lead"]   [data-screen="quest"],
.pl-ciber[data-screen="quest"]  [data-screen="lead"],
.pl-ciber[data-screen="results"] [data-screen="lead"] { display: none; }
[data-screen] { transition: opacity .2s ease; }

/* ---------- Pantalla 1: Lead form ---------- */
.pl-ciber__lead {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid #DFE9EF;
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: 0 24px 50px -34px rgba(15, 30, 46, 0.3);
}
.pl-ciber__lead-form { position: relative; }
.pl-ciber__field {
  margin-bottom: 14px;
}
.pl-ciber__field label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #51677A;
}
.pl-ciber__field input {
  border: 1px solid #D3DEE6;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #FBFDFE;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .15s, box-shadow .15s;
}
.pl-ciber__field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(27, 160, 152, 0.15);
}
.pl-ciber__field input:required:invalid { border-color: #E0A8A1; }

@media (min-width: 640px) {
  .pl-ciber__lead-form .pl-ciber__field:nth-child(1),
  .pl-ciber__lead-form .pl-ciber__field:nth-child(2),
  .pl-ciber__lead-form .pl-ciber__field:nth-child(3),
  .pl-ciber__lead-form .pl-ciber__field:nth-child(4) {
    display: inline-block;
    width: calc(50% - 6px);
    vertical-align: top;
  }
  .pl-ciber__lead-form .pl-ciber__field:nth-child(odd)  { margin-right: 12px; }
}

/* profiles radio group */
.pl-ciber__profiles {
  border: none;
  padding: 0;
  margin: 18px 0 0;
}
.pl-ciber__profiles legend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #51677A;
  margin-bottom: 8px;
  padding: 0;
}
.pl-ciber__profile {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  border: 1px solid #D3DEE6;
  background: #FBFDFE;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 0 8px 8px 0;
  cursor: pointer;
  min-width: 200px;
  transition: all .18s ease;
  vertical-align: top;
}
.pl-ciber__profile input { position: absolute; opacity: 0; }
.pl-ciber__profile strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.pl-ciber__profile-desc,
.pl-ciber__profile-tgt { font-size: 12px; opacity: 0.85; }
.pl-ciber__profile-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 280px;
  background: var(--ink);
  color: #F6F8F9;
  border: 1px solid rgba(27, 160, 152, 0.4);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  box-shadow: 0 14px 32px rgba(15, 30, 46, 0.35);
  opacity: 0;
  visibility: hidden;
  z-index: 20;
  transition: opacity .15s ease, transform .15s ease;
}
.pl-ciber__profile-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--ink);
}
.pl-ciber__profile:hover .pl-ciber__profile-tip,
.pl-ciber__profile:focus-within .pl-ciber__profile-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  display: block;
}
.pl-ciber__profile:has(input:checked) {
  border-color: var(--teal);
  background: linear-gradient(160deg, rgba(27, 160, 152, 0.10), rgba(45, 91, 142, 0.08));
  box-shadow: 0 0 0 2px rgba(27, 160, 152, 0.28), 0 12px 26px -18px rgba(27, 160, 152, 0.7);
}

/* ---------- Pantalla 2: Cuestionario ---------- */
.pl-ciber__quest-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.pl-ciber__cliente {
  margin: 0 0 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.pl-ciber__quest-sub { font-size: 14px; color: var(--muted); }

.pl-ciber__tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 6px;
  margin-bottom: 18px;
}
.pl-ciber__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: all .15s ease;
  color: #46586A;
  font-weight: 500;
}
.pl-ciber__tab.is-active {
  background: color-mix(in srgb, var(--fcolor) 8%, transparent);
  border-color: color-mix(in srgb, var(--fcolor) 40%, transparent);
  color: var(--fcolor);
  font-weight: 700;
}
.pl-ciber__tab-dot {
  color: #fff;
  background: #C9D3DC;
  border-radius: 99px;
  font-size: 10.5px;
  padding: 2px 7px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.pl-ciber__tab.is-active .pl-ciber__tab-dot,
.pl-ciber__tab.is-done .pl-ciber__tab-dot { background: var(--fcolor); }

.pl-ciber__q {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px -4px rgba(15, 30, 46, 0.12);
}
.pl-ciber__q-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pl-ciber__q-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  letter-spacing: -0.2px;
}
.pl-ciber__ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #5E7387;
  background: #EEF4F7;
  border: 1px solid #DDE7ED;
  border-radius: 8px;
  padding: 3px 9px;
  white-space: nowrap;
  align-self: flex-start;
}
.pl-ciber__q-opts {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.pl-ciber__opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #E6EDF1;
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  cursor: pointer;
  font-size: 14px;
  background: var(--bg-soft);
  transition: all .15s ease;
}
.pl-ciber__opt:hover {
  border-color: #9FD3CE;
  background: rgba(27, 160, 152, 0.04);
}
.pl-ciber__opt input { accent-color: var(--teal); margin-top: 3px; flex-shrink: 0; }
.pl-ciber__opt.is-sel {
  border-color: var(--teal);
  background: rgba(27, 160, 152, 0.06);
  box-shadow: 0 0 0 1.5px rgba(27, 160, 152, 0.4);
}
.pl-ciber__nchip {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--navy);
  background: rgba(45, 91, 142, 0.1);
  border-radius: 7px;
  padding: 2px 7px;
  margin-top: 2px;
  flex-shrink: 0;
}
.pl-ciber__opt-txt { flex: 1; }

.pl-ciber__quest-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Pantalla 3: Resultados ---------- */
.pl-ciber__results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.pl-ciber__results-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.4px;
}
.pl-ciber__results-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.pl-ciber__results-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(240px, 1fr);
  gap: 24px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 2px 6px -4px rgba(15, 30, 46, 0.12);
}
.pl-ciber__radar { width: 100%; }
.pl-ciber__radar svg { max-width: 340px; width: 100%; height: auto; display: block; margin: 0 auto; }

.pl-ciber__global-lab {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pl-ciber__global-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-top: 4px;
}
.pl-ciber__global-max { font-size: 22px; color: #8A99A8; font-weight: 500; }
.pl-ciber__lvl-pill {
  display: inline-block;
  background: color-mix(in srgb, var(--lc) 10%, transparent);
  color: var(--lc);
  border: 1px solid color-mix(in srgb, var(--lc) 35%, transparent);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  margin: 6px 0 14px;
}

.pl-ciber__bar { margin-bottom: 10px; }
.pl-ciber__bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 3px;
}
.pl-ciber__bar-track {
  position: relative;
  height: 8px;
  background: #E3EBF0;
  border-radius: 99px;
  overflow: visible;
}
.pl-ciber__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  transition: width .3s;
}
.pl-ciber__bar-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--navy);
}

.pl-ciber__gaps { display: grid; gap: 10px; }
.pl-ciber__gap {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  padding: 14px 18px;
}
.pl-ciber__gap-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pl-ciber__gap-head strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
}
.pl-ciber__chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #5E7387;
  background: #EEF4F7;
  border: 1px solid #DDE7ED;
  border-radius: 8px;
  padding: 3px 9px;
  white-space: nowrap;
}
.pl-ciber__gap-reco { font-size: 14px; color: #42505E; margin-top: 6px; }
.pl-ciber__gap-next { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.pl-ciber__gap-none {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  padding: 14px 18px;
}

.pl-ciber__footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 20px 24px 0;
  max-width: 760px;
  margin: 24px auto 0;
}
.pl-ciber__footer p { margin: 0; line-height: 1.5; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .pl-ciber__results-grid { grid-template-columns: 1fr; }
  .pl-ciber__results-btns { width: 100%; }
  .pl-ciber__results-btns .pl-ciber__btn { flex: 1; }
  .pl-ciber__tabs { overflow-x: auto; flex-wrap: nowrap; }
  .pl-ciber__tab { white-space: nowrap; }
  .pl-ciber__profile-tip { left: 0; transform: none; width: min(280px, 80vw); }
  .pl-ciber__profile:hover .pl-ciber__profile-tip,
  .pl-ciber__profile:focus-within .pl-ciber__profile-tip {
    transform: none;
  }
  .pl-ciber__lead,
  .pl-ciber__results-grid { padding: 20px; }
  .pl-ciber__lead-form .pl-ciber__field:nth-child(n) { width: 100%; margin-right: 0; }
}

/* ---------- Print ---------- */
@media print {
  .pl-ciber__results-btns,
  .pl-ciber__hero,
  .pl-ciber__footer { display: none !important; }
  .pl-ciber__results-grid { border: none; box-shadow: none; padding: 0; }
  .pl-ciber__global-num { color: #000; }
  body { background: #fff; }
}