/* ============================================================
   DIGLOX — Diagnóstico Inteligente de Automatización
   Design System v3.0 — Professional Corporate Edition
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand palette ── */
  --cyan:          #06B6D4;
  --cyan-light:    #22D3EE;
  --cyan-dark:     #0891B2;
  --indigo:        #6366F1;
  --blue:          #3B82F6;
  --emerald:       #10B981;
  --amber:         #F59E0B;
  --rose:          #F43F5E;

  /* ── Gradients ── */
  --grad-brand:    linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --grad-surface:  linear-gradient(145deg, rgba(15,23,42,0.95), rgba(8,14,27,0.98));
  --grad-glow:     radial-gradient(ellipse 80% 50% at 50% 0%, rgba(6,182,212,0.15) 0%, transparent 70%);

  /* ── Dark scale ── */
  --bg:            #0B1120;
  --surface-1:     #0F172A;
  --surface-2:     #1E293B;
  --surface-3:     #334155;
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --border-accent: rgba(6,182,212,0.3);

  /* ── Text scale ── */
  --text-primary:  #F0F6FF;
  --text-secondary:#94A3B8;
  --text-muted:    #476080;

  /* ── Status ── */
  --success:       #10B981;
  --warning:       #F59E0B;
  --error:         #F43F5E;

  /* ── Typography ── */
  --font-display:  'Plus Jakarta Sans', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* ── Spacing scale ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Legacy aliases for backwards compat */
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-8: var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);
  --sp-xs: var(--sp-1);
  --sp-sm: var(--sp-2);
  --sp-md: var(--sp-4);
  --sp-lg: var(--sp-6);
  --sp-xl: var(--sp-8);
  --sp-2xl: var(--sp-12);

  /* ── Radius ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ── Motion ── */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms var(--ease);
  --t-base: 280ms var(--ease);
  --t-slow: 500ms var(--ease);

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-cyan: 0 8px 32px rgba(6,182,212,0.25);
  --shadow-glow: 0 0 60px rgba(6,182,212,0.10);

  /* Legacy gradient compat */
  --gradient-primary: var(--grad-brand);
}

/* ══════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--grad-glow);
  pointer-events: none;
  z-index: 0;
}

img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; transition: color var(--t-fast); }
ul, ol { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); }

/* ══════════════════════════════════════════════════════════════
   CANVAS BACKGROUND
   ══════════════════════════════════════════════════════════════ */
#bgCanvas,
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
}

/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════ */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* ══════════════════════════════════════════════════════════════
   HEADER  (covers both .site-header and .main-header)
   ══════════════════════════════════════════════════════════════ */
.site-header,
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: rgba(6, 13, 27, 0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

.header-inner,
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}

.logo-img {
  height: 48px; /* Slightly taller to accommodate the text in the image */
  width: auto;
  display: block;
}

.logo-icon { flex-shrink: 0; }

.logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.logo-dot { color: var(--cyan); }

/* Header badge / tag */
.header-badge,
.header-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 14px;
  border-radius: var(--r-full);
  background: rgba(6,182,212,0.08);
  border: 1px solid rgba(6,182,212,0.2);
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Pulse dot */
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulseDot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(6,182,212,0.5); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(6,182,212,0); }
}

/* ══════════════════════════════════════════════════════════════
   MAIN LAYOUT — SCREENS
   ══════════════════════════════════════════════════════════════ */
.main-wrapper,
.app-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding-top: 64px;
}

.screen {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.screen--active  { display: flex; }
.screen--visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   SCREEN — INTRO
   ══════════════════════════════════════════════════════════════ */
#screen-intro {
  min-height: calc(100vh - 64px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}

#screen-intro::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,0.1), transparent 70%);
  top: -10%;
  left: -10%;
  pointer-events: none;
}

#screen-intro::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.08), transparent 70%);
  bottom: -5%;
  right: -5%;
  pointer-events: none;
}

.screen-content,
.intro-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

/* Intro badge */
.intro-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 16px;
  border-radius: var(--r-full);
  background: rgba(6,182,212,0.1);
  border: 1px solid rgba(6,182,212,0.25);
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulseDot 2s ease-in-out infinite;
}

/* Intro title */
.intro-title,
#screen-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.intro-subtitle,
.subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 520px;
}

/* Stats row */
.intro-stats,
.intro-feats {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
}

.intro-stat,
.feat-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 18px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.intro-stat:hover,
.feat-item:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.intro-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.1;
}

.intro-stat span,
.feat-item span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.stat-icon,
.feat-icon { font-size: 1rem; }

/* Tagline */
.intro-tagline {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  max-width: 420px;
}
.intro-tagline strong { color: var(--text-secondary); font-style: normal; }

/* ── Floating orbit visual ── */
.intro-visual {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(6,182,212,0.13);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.ring-1 { width: 240px; height: 240px; animation: rotateRing 22s linear infinite; }
.ring-2 { width: 300px; height: 300px; animation: rotateRing 34s linear infinite reverse; border-color: rgba(99,102,241,0.08); }

@keyframes rotateRing {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

.orbit-cube {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--grad-brand);
  top: 50%; left: 50%;
}

.cube-1 { animation: orbitA 22s linear infinite; opacity: 0.8; }
.cube-2 { animation: orbitB 34s linear infinite reverse; opacity: 0.5; width: 6px; height: 6px; }

@keyframes orbitA {
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(120px); }
  to   { transform: translate(-50%,-50%) rotate(360deg) translateX(120px); }
}
@keyframes orbitB {
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(150px); }
  to   { transform: translate(-50%,-50%) rotate(360deg) translateX(150px); }
}

.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  background: rgba(11,21,37,0.92);
  border: 1px solid rgba(6,182,212,0.22);
  backdrop-filter: blur(10px);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.card-1 { top: 5%;  left: 0;    animation: floatCard 4s ease-in-out infinite; }
.card-2 { bottom: 20%; right: -8%; animation: floatCard 5s ease-in-out 1s infinite; }
.card-3 { bottom: 5%;  left: 10%; animation: floatCard 3.5s ease-in-out 0.5s infinite; }
.card-icon { font-size: 1rem; }

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ══════════════════════════════════════════════════════════════
   SCREEN — FORM
   ══════════════════════════════════════════════════════════════ */
#screen-form {
  min-height: calc(100vh - 64px);
  padding: var(--sp-12) var(--sp-4);
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

/* Card wrapper — covers both class names */
.form-shell,
.form-card {
  width: 100%;
  max-width: 820px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.form-shell::before,
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
}

/* ── Progress ── */
.progress-header,
.progress-container {
  margin-bottom: var(--sp-10);
}

.progress-bar-outer,
.progress-bar {
  height: 3px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--r-full);
  transition: width 0.5s var(--ease);
  box-shadow: 0 0 14px rgba(6,182,212,0.5);
}

.step-labels {
  display: flex;
  justify-content: space-between;
}

.step-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--t-base);
  flex: 1;
  text-align: center;
}

.step-label.active { color: var(--cyan); }
.step-label.done   { color: var(--text-secondary); }

/* ── Steps ── */
.form-step         { display: none; }
.form-step--active { display: block; animation: stepIn 0.4s var(--ease); }

@keyframes stepIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Step header ── */
.step-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}

/* Legacy step-number indicator */
.step-number {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.25;
  flex-shrink: 0;
}

.step-title,
.step-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: var(--sp-1);
}

.step-subtitle,
.step-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ── Form grid ── */
.fields-grid,
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.field-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-group--full { grid-column: 1 / -1; }

.field-label,
.field-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.required { color: var(--cyan); }

/* ── Inputs ── */
.field-input,
.field-select,
.field-textarea,
.field-area {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-primary);
  padding: 11px 14px;
  font-size: 0.9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  width: 100%;
  outline: none;
}

.field-input::placeholder,
.field-textarea::placeholder,
.field-area::placeholder {
  color: var(--text-muted);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus,
.field-area:focus {
  border-color: var(--cyan);
  background: rgba(6,182,212,0.05);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.10);
}

.field-input.error,
.field-select.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(244,63,94,0.10);
}

.field-select,
.field-select option:first-child {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2363748B' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.field-select option { background: var(--surface-2); color: var(--text-primary); }

.field-textarea,
.field-area {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.field-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.field-error {
  font-size: 0.75rem;
  color: var(--error);
  min-height: 1.1em;
  display: block;
}

/* ── Margin helpers ── */
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

/* ── Radio pills (empleados) ── */
.radio-pill-group,
.radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.radio-pill {
  cursor: pointer;
}

.radio-pill input { display: none; }

.radio-pill span,
.radio-box {
  display: block;
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 500;
  transition: all var(--t-fast);
  user-select: none;
  white-space: nowrap;
}

.radio-pill span:hover,
.radio-box:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.radio-pill input:checked + span,
input:checked + .radio-box {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-cyan);
}

/* ── Radio cards (experiencia, objetivo step 3) ── */
.radio-card-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.radio-card-group--2col {
  grid-template-columns: repeat(2, 1fr);
}

.radio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}

.radio-card input { display: none; }

.radio-card:hover {
  border-color: var(--border-accent);
  background: rgba(6,182,212,0.03);
}

.radio-card:has(input:checked) {
  border-color: var(--cyan);
  background: rgba(6,182,212,0.08);
  box-shadow: 0 0 0 2px rgba(6,182,212,0.12), 0 8px 24px rgba(6,182,212,0.15);
}

.radio-card-icon { font-size: 1.5rem; }

.radio-card-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
}

.radio-card:has(input:checked) .radio-card-label { color: var(--text-primary); }

/* ── Option cards (row layout — experience/objetivo/presupuesto) ── */
.radio-grid-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.option-card { cursor: pointer; }
.option-card input { display: none; }

.option-box {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.87rem;
  font-weight: 500;
  transition: all var(--t-fast);
  user-select: none;
}

.option-box::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  margin-right: var(--sp-3);
  transition: all var(--t-fast);
}

.option-card input:checked + .option-box {
  border-color: var(--cyan);
  background: rgba(6,182,212,0.07);
  color: var(--text-primary);
}

.option-card input:checked + .option-box::before {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.18);
}

.option-box:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

/* ── Checklist blocks ── */
.checklist-blocks,
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.check-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: border-color var(--t-fast);
}

.check-block:hover { border-color: rgba(6,182,212,0.18); }

/* Block header */
.check-block-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.check-block h3,
.block-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0;
}

/* When used standalone (no .check-block-header wrapper) */
.check-block > h3 {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.block-icon { font-size: 1.1rem; }

/* Check items */
.check-items,
.check-block {
  /* container */
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  margin-bottom: var(--sp-1);
}

.check-item:last-child { margin-bottom: 0; }
.check-item:hover { background: rgba(255,255,255,0.04); }

/* Hidden native checkbox */
.check-input { display: none; }

/* Styled checkbox label text */
.check-text,
.check-box {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.5;
  position: relative;
  transition: color var(--t-fast);
}

/* When .check-box acts as the label text with pseudo-elements for the box */
.check-item > .check-box {
  padding-left: 26px;
}

.check-item > .check-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-3);
  transition: all var(--t-fast);
}

.check-item > .check-box::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 4px;
  width: 10px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--t-fast);
}

.check-input:checked + .check-box::before,
.check-input:checked ~ .check-box::before {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(6,182,212,0.3);
}

.check-input:checked + .check-box::after,
.check-input:checked ~ .check-box::after {
  transform: rotate(-45deg) scale(1);
}

.check-input:checked + .check-box,
.check-input:checked ~ .check-box,
.check-input:checked ~ .check-text {
  color: var(--text-primary);
}

/* Alternative selector for :has() browsers */
.check-item:has(.check-input:checked) .check-text,
.check-item:has(.check-input:checked) .check-box {
  color: var(--text-primary);
}

/* When .check-box is a visual box only (legacy style) */
.check-box-visual {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: all var(--t-fast);
}

.check-input:checked ~ .check-box-visual {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(6,182,212,0.35);
}

/* Consent */
.check-item--consent { padding: 0; }
.consent-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.checkbox-small .check-box {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.link--inline {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-group {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

/* ── Urgency / priority slider ── */
.urgency-slider-group,
.urgency-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.urgency-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--cyan), var(--indigo));
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
}

.urgency-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(6,182,212,0.4), 0 0 0 3px rgba(6,182,212,0.15);
  cursor: pointer;
  transition: transform var(--t-fast);
}

.urgency-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

.urgency-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* ── Priority options (step 3 legacy) ── */
.priority-section,
.priority-selector { display: flex; flex-direction: column; gap: var(--sp-2); }

.custom-block { display: flex; flex-direction: column; gap: var(--sp-6); margin-bottom: var(--sp-8); }

.priority-option {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}

.priority-option input { display: none; }

.priority-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.priority-option--alta  .priority-dot { background: var(--error); }
.priority-option--media .priority-dot { background: var(--warning); }
.priority-option--baja  .priority-dot { background: var(--success); }

.priority-option:has(input:checked) {
  border-color: var(--cyan);
  background: rgba(6,182,212,0.07);
}

.priority-option strong { display: block; font-size: 0.9rem; color: var(--text-primary); }
.priority-option span   { font-size: 0.78rem; color: var(--text-muted); }

/* ── Form navigation ── */
.step-nav,
.step-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 24px;
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.btn--primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 4px 16px rgba(6,182,212,0.28);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6,182,212,0.42);
}

.btn--primary:active { transform: translateY(0); }

.btn--glow {
  background: var(--grad-brand);
  color: #fff;
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(6,182,212,0.3); }
  50%       { box-shadow: 0 0 44px rgba(6,182,212,0.55); }
}

.btn--outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-strong);
}

.btn--outline:hover {
  background: var(--surface-2);
  border-color: var(--border-accent);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.btn--ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn--large { padding: 14px 32px; font-size: 1rem; }

.btn-arrow { transition: transform var(--t-fast); font-style: normal; }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-link,
.btn--link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  transition: color var(--t-fast);
  font-family: var(--font-body);
}

.btn-link:hover,
.btn--link:hover { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════
   SCREEN — LOADING
   ══════════════════════════════════════════════════════════════ */
#screen-loading {
  min-height: calc(100vh - 64px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  max-width: 400px;
}

/* AI loader rings */
.ai-loader {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: spinRing 2s linear infinite;
}

.ring-a { width: 100px; height: 100px; border-top-color: var(--cyan); border-right-color: rgba(6,182,212,0.2); }
.ring-b { width: 72px;  height: 72px;  border-top-color: var(--indigo); border-left-color: rgba(99,102,241,0.2); animation-direction: reverse; animation-duration: 1.4s; }
.ring-c { width: 46px;  height: 46px;  border-top-color: var(--cyan-light); border-bottom-color: rgba(6,182,212,0.15); animation-duration: 0.9s; }

@keyframes spinRing { to { transform: rotate(360deg); } }

.ai-icon { position: relative; z-index: 1; font-size: 1.6rem; }

/* Simple spinner (new HTML) */
.spinner {
  position: relative;
  width: 72px;
  height: 72px;
}

.spinner-inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--surface-3);
  border-top-color: var(--cyan);
  border-right-color: var(--indigo);
  animation: spin 1.1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-title,
.loading-content h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.loading-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
  width: 100%;
}

.loading-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-muted);
  font-size: 0.87rem;
  transition: color var(--t-base);
}

.loading-step.done { color: var(--success); }

.load-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface-3);
  flex-shrink: 0;
  transition: background var(--t-base);
}

.load-dot--active {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(6,182,212,0.6);
  animation: pulseDot 1s ease-in-out infinite;
}

.load-dot--done { background: var(--success); animation: none; }

/* ══════════════════════════════════════════════════════════════
   SCREEN — RESULTS
   ══════════════════════════════════════════════════════════════ */
#screen-result {
  flex-direction: column;
  align-items: center;
  padding: var(--sp-10) var(--sp-4) var(--sp-16);
}

/* Outer wrapper */
.result-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.result-card {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  position: relative;
  padding: var(--sp-6) var(--sp-8);
}

.result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
}

/* ── Result hero ── */
.result-hero,
.result-header {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 14px;
  border-radius: var(--r-full);
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  color: var(--success);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.result-title,
.result-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
}

.result-subtitle { font-size: 1rem; color: var(--text-secondary); margin-top: var(--sp-3); }

/* ── Metrics grid ── */
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.result-col-main,
.result-col-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.result-box {
  background: var(--surface-1);
  padding: var(--sp-6) var(--sp-6);
}

.result-box h3 {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

/* Legacy .card-header / .card-title */
.card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.card-icon-label { font-size: 1.2rem; }

.card-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Score */
.score-circle,
.level-display { margin-bottom: var(--sp-4); }

.score-val,
.level-percent {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--cyan);
  display: block;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.score-progress,
.level-bar-outer {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.score-bar,
.level-bar-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--r-full);
  transition: width 1.4s var(--ease);
  box-shadow: 0 0 14px rgba(6,182,212,0.4);
  width: 0;
}

.score-tag,
.level-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.score-info,
.level-info,
.level-desc {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Impact */
.impact-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.impact-item,
.impact-metrics .impact-metric {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}

.impact-item:hover,
.impact-metric:hover { border-color: var(--border-accent); }

.impact-icon,
.metric-icon { font-size: 1.15rem; flex-shrink: 0; }

.impact-val,
.metric-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
}

.impact-lbl,
.metric-label {
  font-size: 0.71rem;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Areas */
.tag-list,
.areas-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tag-list li,
.areas-list li {
  padding: 7px 12px;
  background: rgba(6,182,212,0.07);
  border: 1px solid rgba(6,182,212,0.15);
  border-radius: var(--r-sm);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--cyan-light);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.tag-list li::before,
.areas-list li::before { content: '▸'; opacity: 0.55; flex-shrink: 0; }

/* ── Analysis sections ── */
.result-analysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.analysis-section {
  background: var(--surface-1);
  padding: var(--sp-8) var(--sp-6);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.section-icon { font-size: 1rem; }

.section-title h2 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.feature-list,
.problems-list,
.opportunities-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.feature-list li,
.problems-list li,
.opportunities-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.feature-list li:last-child,
.problems-list li:last-child,
.opportunities-list li:last-child { border-bottom: none; }

#problems-list li::before,
.problems-list li::before {
  content: '→';
  color: var(--error);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

#opportunities-list li::before,
.opportunities-list li::before {
  content: '✦';
  color: var(--amber);
  flex-shrink: 0;
  font-size: 0.68rem;
  margin-top: 3px;
}

/* ── Personalized section ── */
.recommendation-header {
  padding: var(--sp-8) var(--sp-8) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.recommendation-header h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}

.recommendation-header p,
.personalized-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* Legacy personalized card */
.result-card--personalized {
  margin: 0 var(--sp-6) var(--sp-6);
  background: rgba(6,182,212,0.05);
  border-color: rgba(6,182,212,0.18);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

/* ── Custom insight ── */
.custom-insight,
.insight-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin: var(--sp-5) var(--sp-8);
  padding: var(--sp-5);
  background: rgba(6,182,212,0.06);
  border: 1px solid rgba(6,182,212,0.18);
  border-radius: var(--r-lg);
}

.insight-icon { font-size: 1.3rem; flex-shrink: 0; }

.insight-label,
.insight-content h4 {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-1);
}

.insight-text,
#insight-text {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── Solutions ── */
.solutions-grid {
  padding: 0 var(--sp-8) var(--sp-6);
}

.solution-column h3 {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-4);
}

.solutions-list,
.solution-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.solutions-list li,
.solution-items li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.81rem;
  color: var(--text-secondary);
  line-height: 1.55;
  transition: border-color var(--t-fast);
}

.solutions-list li:hover,
.solution-items li:hover { border-color: var(--border-accent); }

.sol-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* ── CTA ── */
.result-cta,
.result-cta-section {
  padding: var(--sp-8) var(--sp-8);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.cta-box,
.result-cta-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
}

.cta-box h3,
.result-cta-text h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cta-box p,
.result-cta-text p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 440px;
  line-height: 1.7;
}

.cta-btns,
.result-cta-buttons {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.result-restart { margin-top: var(--sp-2); }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer,
.app-footer {
  position: relative;
  z-index: 1;
  padding: var(--sp-6);
  border-top: 1px solid var(--border);
}

.footer-container,
.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.site-footer p,
.app-footer p {
  font-size: 0.77rem;
  color: var(--text-muted);
  max-width: none;
}

.footer-links {
  display: flex;
  gap: var(--sp-5);
}

.footer-links a {
  font-size: 0.77rem;
  color: var(--text-muted);
  transition: color var(--t-fast);
}

.footer-links a:hover { color: var(--cyan); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .form-shell,
  .form-card {
    padding: var(--sp-8) var(--sp-6);
    border-radius: var(--r-xl);
  }

  .result-grid          { grid-template-columns: 1fr; }
  .result-analysis      { grid-template-columns: 1fr; }
  .solutions-list,
  .solution-items       { grid-template-columns: 1fr; }
  .intro-visual         { display: none; }
  
  .radio-card-group     { grid-template-columns: 1fr; }
  .radio-card-group--2col { grid-template-columns: repeat(2, 1fr); }

  .result-hero,
  .result-header,
  .recommendation-header { padding-left: var(--sp-6); padding-right: var(--sp-6); }

  .custom-insight,
  .insight-card,
  .solutions-grid,
  .result-cta,
  .result-cta-section   { padding-left: var(--sp-6); padding-right: var(--sp-6); }

  .custom-insight,
  .insight-card         { margin-left: var(--sp-6); margin-right: var(--sp-6); }
  
  .result-card { padding: var(--sp-6) var(--sp-6); }
}

@media (max-width: 640px) {
  .form-shell,
  .form-card {
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-lg);
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }

  .fields-grid,
  .form-grid            { grid-template-columns: 1fr; }
  .checklist-blocks,
  .check-grid           { grid-template-columns: 1fr; }
  .field-group--full    { grid-column: auto; }
  .header-badge,
  .header-tag           { display: none; }
  .radio-pill-group,
  .radio-grid           { gap: var(--sp-2); }
  
  .radio-card-group,
  .radio-card-group--2col { grid-template-columns: 1fr; }

  .step-footer,
  .step-nav             { flex-wrap: wrap; }
  .impact-metrics       { grid-template-columns: 1fr; }
  .result-cta-buttons   { flex-direction: column; align-items: center; }

  .result-hero,
  .result-header,
  .analysis-section,
  .recommendation-header,
  .result-box           { padding-left: var(--sp-4); padding-right: var(--sp-4); }

  .custom-insight,
  .insight-card,
  .solutions-grid,
  .result-cta,
  .result-cta-section   { padding-left: var(--sp-4); padding-right: var(--sp-4); margin-left: 0; margin-right: 0; }

  .result-wrapper { padding: 0 var(--sp-2); }
  .result-card { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }

  .footer-container     { flex-direction: column; align-items: flex-start; }

  #screen-intro         { padding: var(--sp-12) var(--sp-4); }
  .intro-stats,
  .intro-feats          { flex-direction: column; align-items: center; }
}

@media (max-width: 420px) {
  .radio-pill span     { padding: 7px 12px; font-size: 0.8rem; }
  .btn--large          { padding: 13px 24px; font-size: 0.92rem; }
  .result-card         { padding: var(--sp-4) var(--sp-3); }
}