/* ── HERO ─────────────────────────────────────────────────────────────── */
.rp-hero {
  padding: 5rem 1rem 2.5rem;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.rp-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: hsl(var(--foreground));
  margin-bottom: 0.75rem;
}
.rp-hero__subtitle {
  font-size: 1.15rem;
  font-weight: 600;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
}
.rp-hero__description {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
}

/* ── WIZARD CONTAINER ─────────────────────────────────────────────────── */
.rp-wizard-section {
  position: relative;
  padding: 1.5rem 1rem 4rem;
  overflow: clip;
  isolation: isolate;
}

/* Ambient background glow — subtle, elegant, never distracting */
.rp-bg-glow {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.rp-bg-glow::before,
.rp-bg-glow::after {
  content: '';
  position: absolute;
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.16;
  background: radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%);
  animation: rpDrift 22s ease-in-out infinite alternate;
}
.rp-bg-glow::before { top: -10%; left: -8%; }
.rp-bg-glow::after {
  bottom: -12%;
  right: -8%;
  background: radial-gradient(circle, #f9a825 0%, transparent 70%);
  animation-duration: 26s;
  animation-delay: -6s;
}
@keyframes rpDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6%, 8%) scale(1.12); }
}
:root[data-theme="dark"] .rp-bg-glow::before,
:root[data-theme="dark"] .rp-bg-glow::after,
.dark .rp-bg-glow::before,
.dark .rp-bg-glow::after {
  opacity: 0.28;
}
@media (prefers-color-scheme: dark) {
  .rp-bg-glow::before, .rp-bg-glow::after { opacity: 0.28; }
}

.rp-wizard-container {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background: color-mix(in srgb, hsl(var(--card)) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid color-mix(in srgb, hsl(var(--primary)) 14%, hsl(var(--border)));
  border-radius: 1.5rem;
  padding: 2.25rem;
  box-shadow:
    0 1px 0 0 color-mix(in srgb, white 8%, transparent) inset,
    0 20px 60px -20px color-mix(in srgb, hsl(var(--primary)) 25%, transparent),
    0 8px 24px -8px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.4s ease;
}
@media (max-width: 600px) {
  .rp-wizard-container { padding: 1.25rem 1.1rem; border-radius: 1.1rem; }
}

/* Progress bar */
.rp-progress { margin-bottom: 2.25rem; }
.rp-progress-track { position: relative; height: 8px; background: hsl(var(--muted)); border-radius: 9999px; overflow: hidden; }
.rp-progress-fill {
  position: relative;
  height: 100%; width: 0%;
  background: linear-gradient(90deg, hsl(var(--primary)), #f9a825);
  border-radius: 9999px;
  transition: width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 0 12px 1px color-mix(in srgb, hsl(var(--primary)) 55%, transparent);
}
.rp-progress-dots { display: flex; justify-content: space-between; margin-top: 0.65rem; padding: 0 1px; }
.rp-progress-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rp-progress-dot.is-done {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  transform: scale(1);
}
.rp-progress-dot.is-active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, hsl(var(--primary)) 22%, transparent);
  transform: scale(1.25);
  animation: rpDotPulse 1.8s ease-in-out infinite;
}
@keyframes rpDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, hsl(var(--primary)) 22%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, hsl(var(--primary)) 10%, transparent); }
}
.rp-steps-labels { display: flex; justify-content: space-between; margin-top: 0.75rem; font-size: 0.85rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.rp-steps-labels span { flex: 1; text-align: center; transition: color 0.3s ease, font-weight 0.3s ease; }
.rp-steps-labels span.is-active { color: hsl(var(--primary)); font-weight: 700; font-size: 0.9rem; }
.rp-progress-text { text-align: center; font-size: 0.95rem; font-weight: 500; color: hsl(var(--muted-foreground)); margin-top: 0.6rem; }

/* En móvil, 6 etiquetas apretadas son ilegibles: solo se muestra la del paso activo */
@media (max-width: 600px) {
  .rp-steps-labels span { display: none; }
  .rp-steps-labels span.is-active { display: block; font-size: 1rem; }
}

/* Steps — directional slide + fade transition between questions */
.rp-step {
  animation: rpStepInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rp-step.hidden { display: none; }
.rp-step[data-direction="back"] { animation-name: rpStepInLeft; }
@keyframes rpStepInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rpStepInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
.rp-step-title { font-size: 1.4rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 0.4rem; }
.rp-step-hint { font-size: 0.9rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; }

/* Entrance stagger for a step's direct children */
.rp-step > * {
  animation: rpChildIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms + 60ms);
}
@keyframes rpChildIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Option cards (paso 1, 3) */
.rp-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.85rem; }
.rp-card-grid--etapa { grid-template-columns: 1fr; }
.rp-option-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.1rem 1rem; border: 2px solid hsl(var(--border)); border-radius: 0.9rem;
  background: hsl(var(--card)); cursor: pointer; font-size: 0.9rem;
  text-align: center; overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease;
}
.rp-option-card--wide { flex-direction: row; align-items: flex-start; text-align: left; gap: 0.75rem; }
.rp-option-card:hover {
  border-color: color-mix(in srgb, hsl(var(--primary)) 60%, hsl(var(--border)));
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, hsl(var(--primary)) 45%, transparent);
}
.rp-option-card:active { transform: translateY(-1px) scale(0.98); }
.rp-option-card.selected {
  border-color: hsl(var(--primary));
  background: color-mix(in srgb, hsl(var(--primary)) 12%, hsl(var(--card)));
  box-shadow: 0 0 0 3px color-mix(in srgb, hsl(var(--primary)) 18%, transparent), 0 14px 28px -14px color-mix(in srgb, hsl(var(--primary)) 55%, transparent);
  transform: translateY(-2px);
}
.rp-option-card.selected::after {
  content: '✓';
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
  animation: rpCheckPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.rp-option-card--wide.selected::after { top: 0.75rem; right: 0.85rem; }
@keyframes rpCheckPop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
.rp-option-emoji { font-size: 1.6rem; transition: transform 0.25s ease; }
.rp-option-card:hover .rp-option-emoji { transform: scale(1.15) rotate(-4deg); }
.rp-option-label { font-weight: 600; color: hsl(var(--foreground)); }
.rp-option-desc { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

/* Checkboxes */
.rp-checkbox-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
@media (min-width: 540px) { .rp-checkbox-grid { grid-template-columns: 1fr 1fr; } }
.rp-checkbox-grid--single { grid-template-columns: 1fr; }
.rp-checkbox-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid hsl(var(--border)); border-radius: 0.6rem; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.rp-checkbox-item:hover { background: color-mix(in srgb, hsl(var(--primary)) 6%, hsl(var(--background))); border-color: color-mix(in srgb, hsl(var(--primary)) 35%, hsl(var(--border))); }
.rp-checkbox-item:has(input:checked) { border-color: hsl(var(--primary)); background: color-mix(in srgb, hsl(var(--primary)) 8%, hsl(var(--background))); }
.rp-checkbox-item input[type="checkbox"] { accent-color: hsl(var(--primary)); width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* Textarea / input */
.rp-textarea-wrap { margin-top: 1.25rem; }
.rp-textarea-wrap.hidden { display: none; }
.rp-textarea-wrap label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground)); }
.rp-textarea-wrap textarea,
.rp-textarea-wrap input[type="text"] {
  width: 100%; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem;
  background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.95rem;
  resize: vertical; min-height: 100px; transition: border-color 0.2s; font-family: inherit;
}
.rp-textarea-wrap input[type="text"] { min-height: unset; }
.rp-textarea-wrap textarea:focus,
.rp-textarea-wrap input:focus { outline: none; border-color: hsl(var(--primary)); }
.rp-char-counter { text-align: right; font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

.rp-compromiso-title { font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 1rem; color: hsl(var(--foreground)); }

/* Nav buttons */
.rp-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; gap: 1rem; }
.rp-btn-primary {
  background: linear-gradient(135deg, hsl(var(--primary)), color-mix(in srgb, hsl(var(--primary)) 70%, #f9a825));
  color: white; border: none; border-radius: 0.6rem; padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
}
.rp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px color-mix(in srgb, hsl(var(--primary)) 65%, transparent); }
.rp-btn-primary:active { transform: translateY(0); }
.rp-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.rp-btn-primary.hidden, .rp-btn-secondary.hidden, .rp-step.hidden { display: none; }
.rp-btn-secondary { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: 0.6rem; padding: 0.75rem 1.75rem; font-size: 1rem; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.rp-btn-secondary:hover { border-color: color-mix(in srgb, hsl(var(--primary)) 50%, hsl(var(--border))); transform: translateY(-1px); }

/* Error messages */
.rp-error {
  color: #ef4444;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.rp-error.hidden { display: none; }

/* Compromiso — campos personales */
.rp-personal-fields { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 540px) { .rp-personal-fields { grid-template-columns: 1fr 1fr; } }
.rp-field input { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.rp-field input:focus { outline: none; border-color: hsl(var(--primary)); }
.rp-field label { display: block; font-weight: 500; margin-bottom: 0.35rem; font-size: 0.9rem; }

/* Validación por campo */
.rp-field input.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.rp-field input.valid { border-color: #22c55e; }
.rp-field-error { color: #ef4444; font-size: 0.88rem; font-weight: 600; margin-top: 0.4rem; line-height: 1.4; }
.rp-field-error.hidden { display: none; }

/* Animación */
@keyframes rpFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive móvil */
@media (max-width: 767px) {
  .rp-card-grid:not(.rp-card-grid--etapa) { grid-template-columns: 1fr 1fr; }
  .rp-option-card { padding: 0.75rem 0.5rem; font-size: 0.8rem; }
  .rp-nav { flex-direction: column-reverse; }
  .rp-btn-primary, .rp-btn-secondary { width: 100%; text-align: center; }
}

/* ── TARJETA DE ANÁLISIS ─────────────────────────────────────────────── */
.rp-result { padding: 2rem 1rem 4rem; }
.rp-result.hidden { display: none; }

.rp-result-loading { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem; }
.rp-spinner { width: 40px; height: 40px; border: 3px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: rpSpin 0.8s linear infinite; }
@keyframes rpSpin { to { transform: rotate(360deg); } }

.rp-tarjeta {
  max-width: 720px;
  margin: 0 auto 2rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.rp-tarjeta-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); }
.rp-tarjeta-logo img { height: 36px; width: auto; }
.rp-tarjeta-titulo h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.rp-tarjeta-red { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin: 0; }

.rp-tarjeta-identity { margin-bottom: 1.5rem; }
.rp-tarjeta-nombre { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.5rem; }
.rp-tarjeta-etapa { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 0.75rem; }
.rp-tarjeta-perfiles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rp-tag { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 9999px; background: color-mix(in srgb, hsl(var(--primary)) 12%, hsl(var(--background))); color: hsl(var(--primary)); border: 1px solid color-mix(in srgb, hsl(var(--primary)) 30%, transparent); }

.rp-bienvenida { font-size: 1.05rem; font-style: italic; color: hsl(var(--primary)); border-left: 3px solid hsl(var(--primary)); padding-left: 1rem; margin: 1rem 0 1.5rem; }

.rp-tarjeta-seccion { margin-bottom: 1.5rem; }
.rp-tarjeta-seccion h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.rp-tarjeta-seccion p, .rp-tarjeta-seccion li { color: hsl(var(--foreground)); }
.rp-tarjeta-seccion ul, .rp-tarjeta-seccion ol { padding-left: 1.25rem; }
.rp-tarjeta-seccion li { margin-bottom: 0.3rem; }

.rp-tarjeta-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 540px) { .rp-tarjeta-grid-2 { grid-template-columns: 1fr; } }

.rp-pasos { counter-reset: pasos; padding-left: 0; list-style: none; }
.rp-pasos li { counter-increment: pasos; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: color-mix(in srgb, hsl(var(--primary)) 6%, hsl(var(--background))); margin-bottom: 0.5rem; }
.rp-pasos li::before { content: counter(pasos) ". "; font-weight: 700; color: hsl(var(--primary)); }

.rp-tarjeta-datos { margin-top: 1.5rem; padding: 1rem; background: hsl(var(--muted)); border-radius: 0.5rem; display: grid; gap: 0.4rem; font-size: 0.85rem; }
.rp-dato-label { font-weight: 600; }

.rp-tarjeta-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: space-between; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

.rp-print-actions { max-width: 720px; margin: 0 auto; text-align: center; }
.rp-print-hint { font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; }

.rp-network-error { max-width: 720px; margin: 0 auto; text-align: center; padding: 2rem; color: #ef4444; }

/* ── VIEW TRANSITIONS API (progressive enhancement) ────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── ACCESIBILIDAD: prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rp-bg-glow::before, .rp-bg-glow::after { animation: none; }
  .rp-progress-fill { transition: width 0.15s linear; box-shadow: none; }
  .rp-progress-dot { transition: none; }
  .rp-progress-dot.is-active { animation: none; }
  .rp-step, .rp-step > * { animation: none !important; }
  .rp-option-card, .rp-option-card:hover, .rp-option-card.selected,
  .rp-option-emoji, .rp-option-card:hover .rp-option-emoji,
  .rp-checkbox-item, .rp-btn-primary, .rp-btn-primary:hover, .rp-btn-secondary {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  .rp-option-card.selected::after { animation: none; }
}

/* ── ESTILOS DE IMPRESIÓN ────────────────────────────────────────────── */
@media print {
  body > * { display: none !important; }
  #rpResult { display: block !important; }
  .rp-print-actions { display: none !important; }

  .rp-tarjeta {
    max-width: 100%;
    border: none;
    padding: 0;
    font-size: 11pt;
    color: #000 !important;
    background: #fff !important;
  }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .rp-tarjeta-seccion, .rp-tarjeta-grid-2 { page-break-inside: avoid; }
}