/* ═══════════════════════════════════════════════════════════════
   Diagnóstico Consulta Clara™ — Sistema visual MiPsicoMatch
   Alineado con home.html / landing-piloto-beca.html
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --brand: #8480F2;
  --brand-deep: #6F6CE0;
  --brand-light: #8898F2;
  --violet: #8480F2;            /* alias retrocompatible */
  --lavender: #8898F2;
  --sky: #88ABF2;
  --ice: #88C1F2;
  --violet-soft: rgba(124,120,232,0.10);

  /* Surfaces */
  --bg: #F8F9FC;
  --paper: #F8F9FC;
  --surface: #ffffff;
  --surface-soft: #eff4fb;
  --navy: #0B1120;
  --navy-2: #111B2E;
  --navy-3: #162035;

  /* Ink */
  --ink: #0F1728;
  --ink-soft: #33435F;
  --muted: #687793;

  /* Lines & shadows */
  --line: rgba(15,23,40,0.08);
  --line-dark: rgba(255,255,255,0.10);
  --shadow-sm: 0 1px 3px rgba(15,23,40,0.04);
  --shadow-md: 0 4px 16px rgba(15,23,40,0.06);
  --shadow-lg: 0 12px 40px rgba(15,23,40,0.08);
  --shadow-xl: 0 24px 64px rgba(15,23,40,0.10);

  /* States */
  --green: #38A169;
  --green-bg: #dff3ea;
  --success: #157554;
  --danger: #c9475c;
  --warning: #f2a74b;

  /* Warm accents */
  --warm: #F5A623;
  --warm-soft: rgba(245,166,35,0.08);
  --earth: #C4956A;

  /* Easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 24px;
  --radius-full: 999px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Instrument Sans", "Inter", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at top left, rgba(136, 193, 242, 0.16), transparent 18%),
    radial-gradient(circle at top right, rgba(132, 128, 242, 0.14), transparent 18%),
    linear-gradient(180deg, #fbfcff 0%, #f5f8fc 100%);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, strong {
  margin: 0;
  font-family: "Sora", "Inter", sans-serif;
  letter-spacing: -0.035em;
}

p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   MININAV (botón volver al inicio + logo MiPsicoMatch_)
   ═══════════════════════════════════════════════════════════════ */
.mininav {
  position: relative; z-index: 5;
  padding: 0.85rem 0;
  background: rgba(11,17,32,0.72); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.mininav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: min(calc(100% - 2rem), 1120px);
  margin: 0 auto;
}
.mininav-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.78); font-size: 0.88rem; font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04);
  transition: background 0.15s, color 0.15s;
}
.mininav-back:hover { background: rgba(255,255,255,0.10); color: #fff; }
.mininav-back::before {
  content: ""; width: 0.5rem; height: 0.5rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.mininav-brand {
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.75rem; border-radius: 8px;
  background: linear-gradient(135deg, #88C1F2 0%, #A8B4F0 50%, #9B8CE8 100%);
  box-shadow: 0 4px 14px rgba(124,120,232,0.25);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.mininav-brand:hover {
  box-shadow: 0 6px 20px rgba(124,120,232,0.35);
  transform: translateY(-1px);
}
.mininav-brand span {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 0.88rem;
  color: #fff; letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   SHELL & CARDS
   ═══════════════════════════════════════════════════════════════ */
.cc-shell {
  width: min(calc(100% - 2rem), 1120px);
  margin: 0 auto;
  padding: 2rem 0 5rem;
}

.cc-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cc-card:hover {
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════
   HERO (dark con grain texture + orbes)
   ═══════════════════════════════════════════════════════════════ */
.cc-hero {
  position: relative;
  padding: 2rem;
  margin-bottom: 1rem;
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(136,193,242,0.18), transparent 28%),
    radial-gradient(circle at top left, rgba(124,120,232,0.16), transparent 24%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 56%, var(--navy-3) 100%);
  overflow: hidden;
}

.cc-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.cc-hero > * { position: relative; z-index: 1; }

.cc-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
}
.cc-eyebrow::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, var(--ice), var(--brand));
  box-shadow: 0 0 0 3px rgba(136,193,242,0.15);
}

.cc-hero h1 {
  margin-top: 1rem;
  max-width: 14ch;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
}

.cc-hero p {
  margin-top: 1rem;
  max-width: 58ch;
  color: rgba(255,255,255,0.78);
  line-height: 1.72;
  font-size: 1.02rem;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT & PANEL
   ═══════════════════════════════════════════════════════════════ */
.cc-layout { display: grid; gap: 1rem; }

.cc-panel { padding: 1.5rem; }

.cc-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.08;
  background: linear-gradient(180deg, var(--ink) 0%, #2A3754 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.cc-panel p {
  margin-top: 0.8rem;
  color: var(--muted);
  line-height: 1.72;
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════════════════ */
.cc-progress { margin-top: 1.2rem; display: grid; gap: 0.7rem; }

.cc-progress-bar {
  width: 100%; height: 10px;
  border-radius: var(--radius-full);
  background: rgba(15,23,40,0.06); overflow: hidden;
}

.cc-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand), var(--ice));
  transition: width 0.3s ease;
}

.cc-progress-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--muted); font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION
   ═══════════════════════════════════════════════════════════════ */
.cc-question-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }

.cc-question {
  display: grid; gap: 0.75rem;
  padding: 1.1rem;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(124,120,232,0.05), rgba(255,255,255,0.98));
  border: 1px solid var(--line);
}

.cc-question__label { font-weight: 700; color: var(--ink); line-height: 1.55; }

.cc-options, .cc-scale-grid { display: grid; gap: 0.8rem; }

.cc-option-card, .cc-scale-card {
  display: grid; gap: 0.45rem;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
  cursor: pointer;
}

.cc-option-card input, .cc-scale-card input { margin: 0; }

.cc-scale-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cc-scale-card strong { font-size: 1.15rem; }

textarea {
  width: 100%; min-height: 140px;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(15,23,40,0.12);
  resize: vertical;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--violet-soft);
}

/* ═══════════════════════════════════════════════════════════════
   ACTIONS & BUTTONS (sistema brand actualizado)
   ═══════════════════════════════════════════════════════════════ */
.cc-actions {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1rem; margin-top: 1.25rem;
}

.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem;
  border: 0; border-radius: var(--radius-full);
  font-family: "Sora", sans-serif; font-size: 0.93rem; font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  white-space: nowrap;
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn:active { transform: translateY(0); }

.cc-btn--primary {
  color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 50%, var(--brand) 100%);
  background-size: 200% 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 8px 24px rgba(132,128,242,0.28);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background-position 0.4s ease;
}
.cc-btn--primary::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.cc-btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 14px 40px rgba(132,128,242,0.38);
  transform: translateY(-2px);
}
.cc-btn--primary:hover::after {
  animation: shineSweep 0.6s ease forwards;
}
.cc-btn--primary:active { transform: translateY(0) scale(0.98); }

.cc-btn--secondary {
  color: var(--ink);
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cc-btn--secondary:hover { box-shadow: var(--shadow-md); }

.cc-btn--outline {
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--line);
}
.cc-btn--outline:hover { border-color: var(--brand); color: var(--brand); }

.cc-btn:disabled { opacity: 0.48; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   CHIPS & SCORES
   ═══════════════════════════════════════════════════════════════ */
.cc-chip-row,
.cc-recommendation-actions,
.cc-history-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}

.cc-chip {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  font-size: 0.82rem; font-weight: 700;
}

/* Para chips dentro de panels claros */
.cc-panel .cc-chip {
  background: rgba(124,120,232,0.08);
  border-color: rgba(124,120,232,0.18);
  color: var(--ink-soft);
}

.cc-scores-grid,
.cc-summary-grid,
.cc-history-grid {
  display: grid; gap: 1rem; margin-top: 1.25rem;
}

.cc-score-card,
.cc-summary-card,
.cc-history-card {
  padding: 1.2rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cc-score-card:hover,
.cc-summary-card:hover,
.cc-history-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cc-score-bar {
  margin-top: 0.7rem;
  width: 100%; height: 10px;
  border-radius: var(--radius-full);
  background: rgba(15,23,40,0.06); overflow: hidden;
}
.cc-score-bar > span {
  display: block; height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand), var(--ice));
}

.cc-score-card small,
.cc-history-card small {
  display: block; margin-top: 0.5rem; color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   RESULTADO HERO + KPI
   ═══════════════════════════════════════════════════════════════ */
.cc-result-hero { display: grid; gap: 1.2rem; }

.cc-kpi { display: inline-flex; align-items: baseline; gap: 0.5rem; }

.cc-kpi strong {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.95;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.cc-kpi span { color: var(--muted); font-size: 0.95rem; }

.cc-recommendation {
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(136,193,242,0.18), transparent 28%),
    linear-gradient(145deg, rgba(132,128,242,0.06), rgba(255,255,255,0.98));
  border: 1px solid rgba(132,128,242,0.15);
}

/* ═══════════════════════════════════════════════════════════════
   MATURITY GRID (escala 6 niveles)
   ═══════════════════════════════════════════════════════════════ */
.cc-maturity-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem; margin-top: 1.3rem;
}

.cc-maturity-step {
  min-height: 150px;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.84);
  color: var(--muted);
  position: relative; overflow: hidden;
}

.cc-maturity-step::before {
  content: ""; position: absolute;
  left: 1rem; right: 1rem; top: 0.85rem;
  height: 4px; border-radius: var(--radius-full);
  background: rgba(15,23,40,0.06);
}

.cc-maturity-step small,
.cc-maturity-step strong,
.cc-maturity-step span { display: block; }

.cc-maturity-step small {
  margin-top: 0.7rem;
  color: inherit; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 0.72rem;
}

.cc-maturity-step strong { margin-top: 0.55rem; color: var(--ink); }

.cc-maturity-step span {
  margin-top: 0.45rem;
  line-height: 1.5; font-size: 0.88rem;
}

.cc-maturity-step.is-current {
  border-color: rgba(132,128,242,0.48);
  background: linear-gradient(180deg, rgba(132,128,242,0.13), rgba(136,193,242,0.08)), #fff;
  color: var(--ink-soft);
  box-shadow: 0 14px 34px rgba(132,128,242,0.14), 0 0 0 1px rgba(132,128,242,0.12);
}
.cc-maturity-step.is-current::before {
  background: linear-gradient(90deg, var(--brand), var(--ice));
}

.cc-maturity-step.is-complete {
  border-color: rgba(136,193,242,0.3);
  background: rgba(232,243,255,0.68);
}
.cc-maturity-step.is-complete::before { background: rgba(136,193,242,0.7); }

.cc-maturity-step.is-next {
  border-color: rgba(21,117,84,0.24);
  background: rgba(223,243,234,0.66);
}
.cc-maturity-step.is-next::before { background: rgba(21,117,84,0.46); }

.cc-maturity-step.is-locked { opacity: 0.62; }

/* ═══════════════════════════════════════════════════════════════
   RECOMMENDATION PRODUCT MINI
   ═══════════════════════════════════════════════════════════════ */
.cc-product-mini {
  margin-top: 1rem;
  padding: 1.2rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════
   NOTE (callout)
   ═══════════════════════════════════════════════════════════════ */
.cc-note {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(223,243,234,0.78);
  border: 1px solid rgba(21,117,84,0.16);
  color: var(--ink-soft);
  line-height: 1.6; font-size: 0.94rem;
}

.cc-empty { text-align: center; padding: 2rem; }

/* ═══════════════════════════════════════════════════════════════
   APP FLOW (intro / quiz / gate)
   ═══════════════════════════════════════════════════════════════ */
.cc-app-flow { min-height: 100vh; }
.cc-flow-shell { min-height: calc(100vh - 60px); }

.cc-flow-screen {
  display: none;
  min-height: calc(100vh - 60px);
  padding: 1rem;
  place-items: center;
}
.cc-flow-screen.active { display: grid; }

.cc-flow-card,
.cc-question-shell {
  width: min(100%, 980px);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.cc-flow-card { padding: clamp(1.4rem, 4vw, 2.4rem); }

.cc-flow-card--intro {
  background:
    radial-gradient(circle at top right, rgba(136,193,242,0.20), transparent 22%),
    radial-gradient(circle at top left, rgba(132,128,242,0.14), transparent 18%),
    rgba(255,255,255,0.96);
}

.cc-flow-card h1,
.cc-flow-card h2,
.cc-question-stage h2 {
  margin-top: 1rem;
  max-width: 16ch;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.04;
  background: linear-gradient(180deg, var(--ink) 0%, #2A3754 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.cc-flow-card p,
.cc-question-stage p {
  margin-top: 1rem;
  max-width: 62ch;
  color: var(--ink-soft);
  line-height: 1.72;
}

.cc-mini-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem; margin: 1.4rem 0;
}
.cc-mini-grid--stack { grid-template-columns: 1fr; }

.cc-mini-grid article {
  padding: 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.cc-mini-grid article strong,
.cc-mini-grid article span { display: block; }

.cc-mini-grid article strong {
  font-family: "Sora", sans-serif;
  font-size: 1rem; line-height: 1.3;
  color: var(--ink);
}

.cc-mini-grid article span {
  margin-top: 0.4rem;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION STAGE
   ═══════════════════════════════════════════════════════════════ */
.cc-top-progress { padding: 1rem 1rem 0; }

.cc-question-stage { padding: clamp(1.4rem, 5vw, 2.6rem); }

.cc-question-type {
  display: inline-flex; min-height: 36px;
  align-items: center; padding: 0 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(132,128,242,0.18);
  background: rgba(132,128,242,0.08);
  color: var(--brand-deep);
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.cc-question-context {
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(136,193,242,0.10);
  border: 1px solid rgba(136,193,242,0.22);
  margin-top: 1rem;
}

.cc-answer-grid { display: grid; gap: 0.8rem; margin-top: 1.4rem; }

.cc-answer-option {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 1rem; align-items: center; width: 100%;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
  color: var(--ink); cursor: pointer; text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cc-answer-option:hover,
.cc-answer-option.is-selected {
  border-color: rgba(132,128,242,0.46);
  box-shadow: 0 14px 34px rgba(132,128,242,0.14);
  transform: translateY(-1px);
}

.cc-answer-option.is-selected {
  background: linear-gradient(145deg, rgba(132,128,242,0.06), rgba(255,255,255,0.98));
}

.cc-answer-score {
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(132,128,242,0.15), rgba(136,193,242,0.15));
  color: var(--ink);
  font-family: "Sora", sans-serif;
  font-size: 1.1rem; font-weight: 800;
}

.cc-answer-option.is-selected .cc-answer-score {
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: #fff;
}

.cc-answer-option strong,
.cc-answer-option em { display: block; }

.cc-answer-option em {
  margin-top: 0.3rem;
  color: var(--muted);
  font-style: normal;
  line-height: 1.55;
  font-size: 0.92rem;
}

.cc-textarea-shell textarea {
  min-height: 200px;
  border: 1px solid rgba(132,128,242,0.30);
  background: rgba(132,128,242,0.02);
}
.cc-textarea-shell textarea:focus {
  border-color: var(--brand);
  background: #fff;
}

.cc-textarea-shell small,
.cc-microcopy {
  display: block;
  margin-top: 0.65rem;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.88rem;
}

.cc-actions--question { padding: 0 1.4rem 1.4rem; }

/* ═══════════════════════════════════════════════════════════════
   AUTH GATE (card dark con orbes)
   ═══════════════════════════════════════════════════════════════ */
.cc-gate-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 1.4rem;
  align-items: start;
}

.cc-auth-card {
  position: relative;
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(136,193,242,0.14), transparent 30%),
    radial-gradient(circle at bottom left, rgba(124,120,232,0.16), transparent 32%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 56%, var(--navy-3) 100%);
  color: #fff; overflow: hidden;
}

.cc-auth-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.cc-auth-card > * { position: relative; z-index: 1; }

.cc-auth-card h3 {
  font-size: 1.3rem; line-height: 1.2;
  color: #fff;
}

.cc-auth-card p,
.cc-auth-card .cc-microcopy {
  color: rgba(255,255,255,0.72);
}

.cc-auth-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.3rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

.cc-auth-tabs button {
  min-height: 42px;
  border: 0; border-radius: var(--radius-full);
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-family: "Sora", sans-serif;
  font-weight: 700; font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}

.cc-auth-tabs button.active {
  background: rgba(255,255,255,0.16);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}

.cc-auth-form {
  display: grid; gap: 0.9rem;
  margin-top: 1rem;
}

.cc-auth-form.hidden,
.hidden { display: none; }

.cc-auth-form label {
  display: grid; gap: 0.4rem;
  color: rgba(255,255,255,0.86);
  font-weight: 600;
  font-size: 0.88rem;
}

.cc-auth-form input:not([type="checkbox"]) {
  min-height: 50px;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cc-auth-form input:not([type="checkbox"]):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(132,128,242,0.30);
}

.cc-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  font-weight: 500; line-height: 1.45;
}

.cc-alert {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(201,71,92,0.18);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.55;
  font-size: 0.92rem;
}

/* ═══════════════════════════════════════════════════════════════
   CROSS-PROMO (entre herramientas)
   ═══════════════════════════════════════════════════════════════ */
.cc-cross-promo {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: center;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(132,128,242,0.06), rgba(255,255,255,0.98));
  border: 1px solid rgba(132,128,242,0.15);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.cc-cross-promo:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(132,128,242,0.25);
}
.cc-cross-promo-icon {
  width: 3rem; height: 3rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.85rem; color: var(--white);
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  box-shadow: 0 8px 18px rgba(132,128,242,0.32);
}
.cc-cross-promo-body strong { display: block; font-size: 1.05rem; line-height: 1.3; color: var(--ink); margin-bottom: 0.3rem; font-family: "Sora", sans-serif; }
.cc-cross-promo-body p { margin: 0 !important; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.cc-cross-promo-body b { color: var(--ink); font-weight: 700; }

@media (max-width: 760px) {
  .cc-cross-promo { grid-template-columns: 1fr; text-align: center; }
  .cc-cross-promo-icon { margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   CALCULADORA (estilos específicos)
   ═══════════════════════════════════════════════════════════════ */
.cc-calculator-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1000px) { .cc-calculator-layout { grid-template-columns: 1.05fr 0.95fr; } }
.cc-calculator-form { padding: 1.8rem; }
.cc-calculator-result {
  padding: 1.8rem; position: sticky; top: 1rem;
  background: linear-gradient(180deg, var(--white) 0%, rgba(132,128,242,0.04) 100%);
  border: 1px solid rgba(132,128,242,0.18);
}
.cc-calculator-result h2 {
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cc-form-helper {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; border-radius: var(--radius-md);
  background: rgba(132,128,242,0.05); border: 1px solid rgba(132,128,242,0.15);
  margin-bottom: 1.4rem;
}
.cc-form-helper strong { display: block; font-family: "Sora", sans-serif; color: var(--ink); margin-bottom: 0.2rem; }
.cc-form-helper span { font-size: 0.88rem; color: var(--muted); }
.cc-helper-button {
  padding: 0.6rem 1.1rem; border-radius: var(--radius-full); border: 1px solid var(--brand);
  background: var(--white); color: var(--brand); font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.cc-helper-button:hover { background: var(--brand); color: var(--white); }
.cc-step-map { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.cc-step-map span {
  flex: 1; min-width: 120px; padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm); background: rgba(15,23,40,0.04);
  font-size: 0.78rem; font-weight: 700; color: var(--muted); text-align: center;
}
.cc-form-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.cc-form-section:last-of-type { border-bottom: 0; }
.cc-section-heading { margin-bottom: 1.2rem; }
.cc-section-heading h2 {
  font-size: 1.3rem; line-height: 1.3; margin: 0.6rem 0 0.5rem;
  -webkit-text-fill-color: initial; color: var(--ink); background: none;
}
.cc-section-heading p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.cc-context-label {
  display: inline-block; padding: 0.35rem 0.75rem; border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.cc-context-label--goal { background: rgba(132,128,242,0.12); color: var(--brand); }
.cc-context-label--current { background: rgba(136,193,242,0.15); color: #4a7eb8; }
.cc-context-label--cost { background: rgba(242,167,75,0.15); color: #b87a30; }
.cc-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.cc-field-grid label { display: grid; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.cc-field-grid label.is-disabled { opacity: 0.5; }
.cc-field-grid input, .cc-field-grid select {
  min-height: 44px; padding: 0 0.85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 0.95rem; outline: none;
}
.cc-field-grid input:focus, .cc-field-grid select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--violet-soft), 0 2px 8px rgba(132,128,242,0.12);
}
.cc-field-grid small { font-size: 0.78rem; color: var(--muted); line-height: 1.5; font-weight: 400; }
.cc-suffix-field { position: relative; display: flex; align-items: center; }
.cc-suffix-field input { padding-right: 2.5rem; width: 100%; }
.cc-suffix-field span { position: absolute; right: 0.85rem; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.cc-quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.cc-quick-actions button {
  padding: 0.45rem 0.85rem; border-radius: var(--radius-full);
  border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.cc-quick-actions button:hover { border-color: var(--brand); background: rgba(132,128,242,0.04); color: var(--brand); }
.cc-inline-formula {
  margin-top: 1rem; padding: 0.85rem 1rem;
  background: rgba(15,23,40,0.03); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6;
}
.cc-soft-alert {
  margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm);
  background: rgba(242,167,75,0.10); border: 1px solid rgba(242,167,75,0.25);
  color: #8a5a1a; font-size: 0.88rem; line-height: 1.55;
}
.cc-advanced-box { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(15,23,40,0.02); }
.cc-advanced-box summary { cursor: pointer; font-family: "Sora", sans-serif; font-weight: 700; color: var(--ink); padding: 0.4rem 0; list-style: none; }
.cc-advanced-box summary::-webkit-details-marker { display: none; }
.cc-advanced-box summary::after { content: " ▾"; color: var(--brand); }
.cc-advanced-box[open] summary::after { content: " ▴"; }
.cc-advanced-box p { color: var(--muted); font-size: 0.88rem; margin: 0.5rem 0 1rem; }
.cc-quick-actions--compact button { font-size: 0.75rem; padding: 0.4rem 0.7rem; }
.cc-eyebrow--light { background: rgba(132,128,242,0.10); color: var(--brand); border: 1px solid rgba(132,128,242,0.20); }
.cc-eyebrow--light::before { background: linear-gradient(180deg, var(--brand-light), var(--brand-deep)); }
.cc-meaning-card {
  margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: var(--radius-md);
  background: rgba(132,128,242,0.06); border: 1px solid rgba(132,128,242,0.18);
}
.cc-meaning-card strong { display: block; font-size: 0.88rem; color: var(--brand-deep); margin-bottom: 0.4rem; }
.cc-meaning-card span { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.cc-result-stack { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.cc-result-stack article {
  padding: 0.95rem 1.1rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.7); border: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center;
}
.cc-result-stack article.is-highlight {
  background: linear-gradient(135deg, rgba(132,128,242,0.10), rgba(136,193,242,0.06));
  border-color: rgba(132,128,242,0.32);
  box-shadow: 0 8px 22px rgba(132,128,242,0.14);
}
.cc-result-stack strong { font-family: "Sora", sans-serif; font-size: 1.4rem; color: var(--ink); }
.cc-result-stack span { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.cc-result-stack b { color: var(--ink); font-weight: 700; }
.cc-gap-meter { margin-top: 1.4rem; }
.cc-gap-labels { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }
.cc-gap-labels strong { color: var(--ink); margin-left: 0.3rem; font-weight: 700; }
.cc-gap-track { height: 8px; border-radius: var(--radius-full); background: rgba(15,23,40,0.06); overflow: hidden; }
.cc-gap-track > span { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--brand), var(--ice)); transition: width 0.3s; }
.cc-gap-meter > p { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
.cc-scenario-panel { margin-top: 1.5rem; padding: 1.2rem; border-radius: var(--radius-md); background: rgba(15,23,40,0.03); }
.cc-scenario-panel > strong { display: block; font-family: "Sora", sans-serif; color: var(--ink); margin-bottom: 0.4rem; }
.cc-scenario-panel > p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.6; }
.cc-scenario-grid { display: grid; gap: 0.6rem; margin-top: 1rem; }
@media (min-width: 600px) { .cc-scenario-grid { grid-template-columns: 1fr 1fr; } }
.cc-scenario-card { padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line); }
.cc-scenario-card span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.cc-scenario-card strong { display: block; font-family: "Sora", sans-serif; font-size: 1.4rem; color: var(--ink); margin-bottom: 0.4rem; }
.cc-scenario-card p { font-size: 0.82rem; color: var(--muted); margin: 0; line-height: 1.5; }
.cc-scenario-card--current { background: rgba(15,23,40,0.04); }
.cc-scenario-card--desired { background: linear-gradient(135deg, rgba(132,128,242,0.08), rgba(136,193,242,0.05)); border-color: rgba(132,128,242,0.20); }
.cc-scenario-summary { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; }
.cc-risk-card { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--white); }
.cc-risk-card strong { display: block; font-family: "Sora", sans-serif; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.4rem; }
.cc-risk-card span { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.cc-risk-card[data-risk="bajo"] { background: rgba(56,161,105,0.06); border-color: rgba(56,161,105,0.18); }
.cc-risk-card[data-risk="bajo"] strong { color: var(--success); }
.cc-risk-card[data-risk="medio"] { background: rgba(242,167,75,0.06); border-color: rgba(242,167,75,0.18); }
.cc-risk-card[data-risk="medio"] strong { color: #b87a30; }
.cc-risk-card[data-risk="alto"] { background: rgba(201,71,92,0.06); border-color: rgba(201,71,92,0.18); }
.cc-risk-card[data-risk="alto"] strong { color: var(--danger); }
.cc-final-conclusion { margin-top: 1.5rem; padding: 1.2rem; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(132,128,242,0.08), rgba(136,193,242,0.04)); border: 1px solid rgba(132,128,242,0.18); }
.cc-final-conclusion strong { display: block; font-family: "Sora", sans-serif; font-size: 1rem; color: var(--ink); margin-bottom: 0.5rem; }
.cc-final-conclusion span { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
.cc-final-conclusion[data-tone="warning"] { background: rgba(242,167,75,0.08); border-color: rgba(242,167,75,0.20); }
.cc-final-conclusion[data-tone="danger"] { background: rgba(201,71,92,0.06); border-color: rgba(201,71,92,0.18); }
.cc-mini-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .cc-mini-metrics { grid-template-columns: repeat(3, 1fr); } }
.cc-mini-metrics div { padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); background: rgba(15,23,40,0.03); }
.cc-mini-metrics strong { display: block; font-family: "Sora", sans-serif; font-size: 1.05rem; color: var(--ink); }
.cc-mini-metrics span { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.3; margin-top: 0.2rem; }
.cc-benchmark-panel { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.cc-benchmark-panel summary { cursor: pointer; list-style: none; padding: 0.3rem 0; }
.cc-benchmark-panel summary::-webkit-details-marker { display: none; }
.cc-benchmark-panel summary strong { display: block; font-family: "Sora", sans-serif; color: var(--ink); }
.cc-benchmark-panel summary span { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.cc-benchmark-list { display: grid; gap: 0.6rem; margin-top: 1rem; }
.cc-benchmark-item { padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: rgba(15,23,40,0.03); border-left: 3px solid var(--brand); }
.cc-benchmark-item[data-tone="warning"] { border-left-color: var(--warning); background: rgba(242,167,75,0.06); }
.cc-benchmark-item[data-tone="danger"] { border-left-color: var(--danger); background: rgba(201,71,92,0.06); }
.cc-benchmark-item span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cc-benchmark-item strong { display: block; font-family: "Sora", sans-serif; font-size: 0.95rem; color: var(--ink); margin: 0.25rem 0; }
.cc-benchmark-item p { font-size: 0.82rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.cc-source-note { margin-top: 1rem; }
.cc-source-note summary { cursor: pointer; font-size: 0.82rem; color: var(--brand); font-weight: 600; }
.cc-source-note ul { padding-left: 1.2rem; margin: 0.6rem 0; font-size: 0.8rem; color: var(--muted); }
.cc-source-note li { margin-bottom: 0.4rem; line-height: 1.4; }
.cc-interpretation-card { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius-md); background: rgba(132,128,242,0.05); border: 1px solid rgba(132,128,242,0.15); }
.cc-interpretation-card strong { display: block; font-family: "Sora", sans-serif; color: var(--ink); margin-bottom: 0.4rem; }
.cc-interpretation-card span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; }
.cc-formula-box { margin-top: 1.2rem; padding: 0.95rem 1.1rem; border-radius: var(--radius-sm); background: rgba(15,23,40,0.04); }
.cc-formula-box strong { display: block; font-size: 0.85rem; color: var(--ink); margin-bottom: 0.3rem; }
.cc-formula-box span { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.55; }
.cc-checklist-mini { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius-md); background: rgba(56,161,105,0.06); border: 1px solid rgba(56,161,105,0.18); }
.cc-checklist-mini strong { display: block; font-family: "Sora", sans-serif; color: var(--success); margin-bottom: 0.4rem; }
.cc-checklist-mini > p { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 0.7rem; line-height: 1.55; }
.cc-checklist-mini ul { padding-left: 1.2rem; margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.cc-checklist-mini li { margin-bottom: 0.3rem; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   CAPTURE FORM (resultado sin login)
   ═══════════════════════════════════════════════════════════════ */
#resultScreen {
  align-items: start;
  padding-bottom: 3rem;
}

.cc-capture-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.cc-capture-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.cc-capture-form input:not([type="checkbox"]) {
  min-height: 50px;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cc-capture-form input:not([type="checkbox"]):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--violet-soft);
}

.cc-capture-success {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--green-bg);
  border: 1px solid rgba(21,117,84,0.24);
  color: var(--success);
  font-size: 0.94rem;
  line-height: 1.6;
}

.cc-capture-error {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(201,71,92,0.08);
  border: 1px solid rgba(201,71,92,0.24);
  color: var(--danger);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   ORBES (decorativos en sections dark)
   ═══════════════════════════════════════════════════════════════ */
.orb-canvas {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
  animation: orbFloat 20s ease-in-out infinite;
  will-change: transform, opacity;
}
.orb--1 {
  width: 320px; height: 320px; top: -8%; left: -8%;
  background: radial-gradient(circle, rgba(124,120,232,0.22), transparent 70%);
}
.orb--2 {
  width: 280px; height: 280px; bottom: -10%; right: -10%;
  background: radial-gradient(circle, rgba(136,193,242,0.18), transparent 70%);
  animation-delay: -7s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.05); }
}

@keyframes shineSweep {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .cc-layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .cc-scores-grid,
  .cc-summary-grid,
  .cc-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cc-shell { width: min(calc(100% - 1rem), 1120px); padding: 1.2rem 0 4rem; }
  .cc-flow-screen { padding: 0.5rem; align-items: start; }
  .cc-mini-grid,
  .cc-gate-grid,
  .cc-maturity-grid { grid-template-columns: 1fr; }
  .cc-flow-card h1,
  .cc-flow-card h2,
  .cc-question-stage h2 { max-width: 100%; }
  .cc-answer-option { grid-template-columns: 48px minmax(0, 1fr); }
  .cc-answer-score { width: 48px; height: 48px; font-size: 1rem; }
  .cc-scale-grid { grid-template-columns: 1fr; }
  .cc-actions { align-items: stretch; }
  .cc-actions .cc-btn { width: 100%; }
  .cc-recommendation-actions { flex-direction: column; }
  .cc-recommendation-actions .cc-btn { width: 100%; }
  .cc-form-helper { flex-direction: column; align-items: stretch; text-align: center; }
  .cc-hero { padding: 1.5rem; }
  .cc-panel { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .cc-btn--primary::after { animation: none !important; }
}