/* ============================================================
   Kinesis — Diagnóstico de Redes · estilos del tool
   HEREDA los tokens del sitio (colors/typography/spacing/fonts).
   No se redeclara ningún :root. Solo clases nuevas del tool.
   ============================================================ */

.tool {
  min-height: 70vh;
  padding: var(--space-8) 40px var(--space-9);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(162, 155, 254, 0.14) 0%, transparent 55%),
    radial-gradient(120% 80% at 90% 5%, rgba(237, 95, 76, 0.12) 0%, transparent 50%),
    var(--paper);
}
.tool__loading { text-align: center; color: var(--text-muted); padding: var(--space-9) 0; }

/* Los eyebrows del sitio llevan una rayita (::before) que parece guion largo.
   En el tool la quitamos: el label va sin la línea de acento. */
.tool .eyebrow::before { display: none; }

.tool__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.tool__inner--wide { max-width: 920px; }

/* Aparición de cada paso (respeta reduce-motion) */
.step { animation: step-in var(--dur-slow) var(--ease-out) both; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
}

.step__head { text-align: center; margin-bottom: var(--space-7); }
.step__head .eyebrow { justify-content: center; }
.step__head h1,
.step__head h2 {
  margin: 14px 0 10px;
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  line-height: 1.02;
}
.step__head h1 { font-size: 48px; }
.step__head h2 { font-size: 40px; }
/* El script (Nighty) tiene una caja visual más pequeña; lo subimos para que
   se lea proporcional al resto del titular, aunque el font-size sea mayor. */
/* Variante compacta (pantalla de calificación: todo cabe en una vista) */
.step__head--compact { margin-bottom: var(--space-5); }
.step__head--compact h2 { font-size: 26px; margin: 8px 0 6px; }
.step__head--compact p { font-size: var(--fs-sm); }

.step__head .script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--coral);
  font-size: 1.6em;
  line-height: 0.82;
}
.step__head p {
  max-width: 540px;
  margin: 0 auto;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ---------- Landing (paso 0) ---------- */
.diag-card {
  background: var(--paper-pure);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-7);
}
.diag-card--narrow { max-width: 560px; margin: 0 auto; }
.diag-email { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.diag-email__nota { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }

/* ---------- Preguntas / chips ---------- */
.qblock { margin-bottom: var(--space-7); }
.qblock__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}
.chipset { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--paper-pure);
  color: var(--text-strong);
  border: 1.5px solid var(--border-default);
  cursor: pointer;
  touch-action: manipulation; /* sin delay de ~300ms al tocar en móvil */
  /* Solo animamos hover (borde + leve elevación). El relleno al seleccionar
     es instantáneo para que el toque se sienta inmediato, no con retraso. */
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--coral-300); transform: translateY(-1px); }
.chip.is-selected {
  background: var(--coral);
  color: var(--text-on-accent);
  border-color: transparent;
  box-shadow: var(--shadow-coral);
}
.chipset--stack .chip { text-align: left; }

/* ---------- Campo de usuario de Instagram ---------- */
.qblock--last { margin-bottom: 0; }
.ig-input {
  display: flex;
  align-items: center;
  background: var(--paper-pure);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ig-input:focus-within {
  border-color: var(--lavanda-600);
  box-shadow: 0 0 0 3px rgba(126,116,240,0.22);
}
.ig-input__prefix {
  padding: 12px 4px 12px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-muted);
  user-select: none;
}
.ig-input__field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-strong);
  padding: 12px 16px 12px 2px;
}
.ig-help { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 8px; }

.form-error { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--space-3); text-align: center; }
.form-error--inline { text-align: left; margin-top: 8px; }
.step__actions { display: flex; justify-content: center; gap: 14px; margin-top: var(--space-6); }
.step__back { background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-sans); font-size: 14px; }
.step__back:hover { color: var(--coral); }

/* ---------- Procesando ---------- */
.processing { text-align: center; padding: var(--space-9) 0; }
.spinner {
  width: 54px; height: 54px; margin: 0 auto var(--space-6);
  border-radius: 50%;
  border: 4px solid var(--ink-100);
  border-top-color: var(--coral);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2400ms; } }
.processing__msg { color: var(--text-muted); font-size: var(--fs-lg); min-height: 1.6em; }

/* ---------- Resultado ---------- */
.arch { text-align: center; margin: 0 auto var(--space-7); max-width: 640px; }
.arch__kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--lavanda-600);
  margin-bottom: 12px;
}
.arch__name {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  color: var(--text-strong);
}
.arch__tagline { margin: 0; font-size: var(--fs-lg); color: var(--coral); font-weight: 500; }

.notice-ok {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(47,143,91,0.08);
  border: 1px solid var(--success);
  color: var(--text-strong);
  font-size: var(--fs-sm);
}

.result__top {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-8);
}
.ring { position: relative; width: 168px; height: 168px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--ink-100); stroke-width: 14; }
.ring__value { fill: none; stroke: var(--coral); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.ring__num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring__num b { font-family: var(--font-sans); font-weight: 900; font-size: 46px; color: var(--text-strong); line-height: 1; }
.ring__num span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  margin-top: 6px;
  max-width: 92px;
  line-height: 1.3;
  text-align: center;
}
.result__intro { max-width: 380px; }
.result__intro .eyebrow { margin-bottom: 10px; }
.result__intro h2 { margin: 0 0 8px; font-family: var(--font-sans); font-weight: 900; font-size: 30px; letter-spacing: var(--ls-tight); color: var(--text-strong); }
.result__intro p { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }

.branches { display: grid; gap: var(--space-5); }

.branch-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--paper-pure);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  overflow: hidden;
}
.branch-card--priority { border-color: var(--coral); box-shadow: var(--shadow-coral); }
.branch-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-on-accent);
  background: var(--coral);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: var(--space-4);
}
.branch-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.branch-card__title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); color: var(--text-strong); }
.branch-card__score { font-family: var(--font-sans); font-weight: 900; font-size: 30px; color: var(--coral); line-height: 1; }
.branch-card__score small { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.branch-bar { height: 8px; border-radius: var(--radius-pill); background: var(--ink-100); margin: 14px 0 var(--space-5); overflow: hidden; }
.branch-bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--gradient-warm); transition: width var(--dur-slow) var(--ease-out); }

.branch-line { margin: 0 0 var(--space-4); }
.branch-line__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: 4px; }
.branch-line__label--good { color: var(--success); }
.branch-line__label--gap { color: var(--coral); }
.branch-line p { margin: 0; color: var(--text-body); line-height: var(--lh-body); }
.branch-note { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }

/* Generador */
.gen { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px dashed var(--border-default); }
.gen__kicker { font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--lavanda-600); font-weight: 700; }
.gen__title { margin: 6px 0 var(--space-5); font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-lg); color: var(--text-strong); }
.ba-group { margin-bottom: var(--space-5); }
.ba-field { font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); margin-bottom: 8px; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ba__cell { border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--fs-sm); line-height: 1.5; }
.ba__cell--antes { background: var(--ink-100); color: var(--text-muted); }
.ba__cell--despues { background: rgba(237,95,76,0.08); color: var(--text-strong); border: 1px solid var(--coral-300); }
.ba__tag { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: 6px; font-weight: 700; }
.ba__cell--antes .ba__tag { color: var(--ink-500); }
.ba__cell--despues .ba__tag { color: var(--coral); }
.pilares { display: grid; gap: 10px; margin-bottom: var(--space-5); }
.pilar { padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--border-subtle); }
.pilar b { color: var(--text-strong); }
.pilar span { display: block; color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }
.cal { display: grid; gap: 8px; }
.cal__row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; padding: 10px var(--space-4); border-radius: var(--radius-sm); background: var(--paper); }
.cal__dia { font-weight: 700; color: var(--coral); font-size: var(--fs-sm); }
.cal__idea { color: var(--text-body); font-size: var(--fs-sm); line-height: 1.5; }
.cal__idea em { color: var(--text-muted); font-style: normal; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-wide); margin-top: 2px; }
.frames { display: grid; gap: 10px; }
.frame { display: flex; gap: 12px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--border-subtle); }
.frame b { color: var(--text-strong); font-size: var(--fs-sm); }
.frame span { color: var(--text-muted); font-size: var(--fs-sm); }
.gen__nota { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
.service-note {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--ciruela);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Ramas bloqueadas */
.branch-card--locked .branch-card__body { filter: blur(6px); user-select: none; pointer-events: none; opacity: 0.7; }
.branch-card--locked { background: var(--paper); }
.lock-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(247,245,241,0.3), rgba(247,245,241,0.75));
}
.lock-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-pure);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

/* Bloque de desbloqueo */
.unlock {
  margin-top: var(--space-6);
  text-align: center;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--gradient-cool);
  color: #fff;
}
.unlock h3 { margin: 0 0 10px; font-family: var(--font-sans); font-weight: 900; font-size: 26px; }
.unlock p { margin: 0 auto var(--space-5); max-width: 460px; opacity: 0.92; line-height: var(--lh-body); }

/* ---------- Calificación / consentimiento ---------- */
/* Dos columnas: preguntas | consentimiento + CTA. El aside queda a la vista
   mientras se responde, para que el cambio del botón en vivo se aprecie. */
.calif {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.calif__preguntas {
  background: var(--paper-pure);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.calif__preguntas .qblock { margin-bottom: var(--space-5); }
.calif__preguntas .qblock:last-child { margin-bottom: 0; }
.calif__preguntas .qblock__label { font-size: 15px; margin-bottom: 10px; }
.calif__preguntas .chip { padding: 8px 14px; font-size: 13px; }
.calif__aside {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.calif__aside .consent { margin: 0; padding: var(--space-4) var(--space-5); }
.calif__aside .consent p { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.calif__aside .optin { padding: 4px 0; }
.calif__aside .optin span { font-size: 13px; }
.calif__aside .final-cta { margin-top: 0; padding: var(--space-5); }
.calif__aside .final-cta h3 { font-size: 22px; margin-bottom: 8px; }
.calif__aside .final-cta p { font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.calif__aside .step__back { align-self: center; }

.consent {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1px solid var(--border-subtle);
}
.consent__title { font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); margin-bottom: 8px; }
.consent p { margin: 0 0 var(--space-4); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.optin { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.optin input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--coral); flex: none; }
.optin span { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.5; }

/* ---------- CTA final (en vivo, dentro de la calificación) ---------- */
.final-cta {
  text-align: center;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--paper-pure);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-6);
  animation: cta-swap var(--dur-base) var(--ease-out);
}
@keyframes cta-swap { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .final-cta { animation: none; } }
.final-cta h3 {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.final-cta p { margin: 0 auto var(--space-6); max-width: 440px; color: var(--text-muted); line-height: var(--lh-body); }
.final-cta--done { background: rgba(47,143,91,0.08); border-color: var(--success); }
.final-cta--done p { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .calif { grid-template-columns: 1fr; }
  .calif__aside { position: static; }
}
@media (max-width: 720px) {
  .tool { padding: var(--space-7) 20px var(--space-8); }
  .step__head h1 { font-size: 40px; }
  .step__head h2 { font-size: 30px; }
  .arch__name { font-size: 32px; }
  .ba { grid-template-columns: 1fr; }
  .result__top { flex-direction: column; text-align: center; }
  .result__intro { text-align: center; }
  .result__intro .eyebrow { justify-content: center; }
}