/* Auto-generado: selectores con scope bajo .sim-page para evitar choques con el CSS del sitio principal. */

.sim-page {
  --bg-dark: #05070d;
  --bg-dark-soft: #0b0f1c;
  --bg-dark-card: #0f1424;
  --bg-dark-card-2: #131a2e;
  --bg-light: #f4f6fb;
  --ink: #eef1f8;
  --ink-muted: #99a2ba;
  --ink-faint: #6b7590;
  --ink-dark: #0b0e17;
  --ink-dark-muted: #5b6478;
  --blue: #2f6bff;
  --blue-2: #1547c9;
  --violet: #7c5cff;
  --cyan: #00d0ff;
  --amber: #ffb23f;
  --red: #ff5470;
  --green: #2fd59a;
  --grad-brand: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(47, 107, 255, 0.16) 0%, rgba(124, 92, 255, 0.16) 100%);
  --grad-text: linear-gradient(100deg, #7fa6ff 0%, #a98dff 55%, #5fe1ff 100%);
  --border-dark: rgba(238, 241, 248, 0.09);
  --border-dark-strong: rgba(238, 241, 248, 0.16);
  --shadow-lg: 0 30px 80px -30px rgba(4, 8, 20, 0.55);
  --shadow-md: 0 16px 40px -18px rgba(4, 8, 20, 0.4);
  --shadow-glow: 0 0 0 1px rgba(124, 92, 255, 0.25), 0 20px 50px -20px rgba(47, 107, 255, 0.45);
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --container: 1240px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sim-page *,
.sim-page *::before,
.sim-page *::after {
  box-sizing: border-box;
}
.sim-page {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
.sim-page {
  margin: 0;
  background: var(--bg-dark);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sim-page img,
.sim-page svg {
  display: block;
  max-width: 100%;
}
.sim-page a {
  color: inherit;
  text-decoration: none;
}
.sim-page button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
.sim-page h1,
.sim-page h2,
.sim-page h3,
.sim-page h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
}
.sim-page p {
  margin: 0;
}
.sim-page ::selection {
  background: rgba(124, 92, 255, 0.45);
}
.sim-page :focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.sim-page .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.sim-page .grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sim-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sim-page .eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}


.sim-page .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, opacity 0.2s;
}
.sim-page .btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.sim-page .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.4), 0 26px 60px -18px rgba(47, 107, 255, 0.7);
}
.sim-page .btn-primary .arrow {
  transition: transform 0.25s var(--ease);
}
.sim-page .btn-primary:hover .arrow {
  transform: translateX(4px);
}
.sim-page .btn-ghost {
  border: 1px solid var(--border-dark-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
}
.sim-page .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}
.sim-page .btn-sm {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
}
.sim-page .btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}


.sim-page .nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 76px;
  display: flex;
  align-items: center;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.sim-page .nav.scrolled {
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--border-dark);
}
.sim-page .nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sim-page .logo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: #fff;
}
.sim-page .logo small {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sim-page .nav-links {
  display: flex;
  gap: 30px;
  font-size: 14px;
  color: var(--ink-muted);
}
.sim-page .nav-links a:hover {
  color: #fff;
}


.sim-page .bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sim-page .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.55;
}
.sim-page .glow-a {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(47, 107, 255, 0.55), transparent 70%);
  top: -180px;
  right: -120px;
}
.sim-page .glow-b {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.45), transparent 70%);
  bottom: -220px;
  left: -160px;
}
.sim-page .grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}


.sim-page .hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 130px 0 80px;
  overflow: hidden;
}
.sim-page .hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 60px;
  align-items: center;
}
.sim-page .hero h1 {
  font-size: clamp(40px, 6vw, 76px);
  margin: 22px 0 24px;
}
.sim-page .hero .lead {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-muted);
  max-width: 560px;
}
.sim-page .hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.sim-page .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 34px;
  font-size: 13px;
  color: var(--ink-faint);
}
.sim-page .hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sim-page .hero-meta svg {
  width: 16px;
  height: 16px;
  color: var(--cyan);
}


.sim-page .console {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(19, 26, 46, 0.9), rgba(11, 15, 28, 0.92));
  border: 1px solid var(--border-dark-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(124, 92, 255, 0.08);
  padding: 22px;
  backdrop-filter: blur(10px);
}
.sim-page .console::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(47, 107, 255, 0.6), transparent 40%, transparent 60%, rgba(124, 92, 255, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.sim-page .console-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.sim-page .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}
.sim-page .live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: ping 1.8s infinite;
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 213, 154, 0.6);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(47, 213, 154, 0);
  }
}
.sim-page .console-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-dark);
}
.sim-page .console-total .k {
  font-size: 12px;
  color: var(--ink-faint);
}
.sim-page .console-total .v {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.sim-page .console-total .budget {
  text-align: right;
  font-size: 12px;
  color: var(--ink-muted);
}
.sim-page .meter {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 8px;
  width: 160px;
}
.sim-page .meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-brand);
  transition: width 0.8s var(--ease);
}
.sim-page .console-rows {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.sim-page .crow {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-dark);
  font-size: 13px;
  transition: border-color 0.4s, background 0.4s;
}
.sim-page .crow .ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--grad-brand-soft);
  color: #a9b9ff;
}
.sim-page .crow .ic svg {
  width: 16px;
  height: 16px;
}
.sim-page .crow .n {
  font-weight: 500;
}
.sim-page .crow .s {
  font-size: 11.5px;
  color: var(--ink-faint);
}
.sim-page .crow .amt {
  font-family: var(--font-display);
  font-weight: 600;
}
.sim-page .crow.blocked {
  border-color: rgba(255, 84, 112, 0.45);
  background: rgba(255, 84, 112, 0.07);
}
.sim-page .crow.blocked .ic {
  background: rgba(255, 84, 112, 0.15);
  color: var(--red);
}
.sim-page .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}
.sim-page .tag-red {
  background: rgba(255, 84, 112, 0.14);
  color: #ff8fa2;
}
.sim-page .tag-green {
  background: rgba(47, 213, 154, 0.12);
  color: #6ff0be;
}
.sim-page .tag-amber {
  background: rgba(255, 178, 63, 0.14);
  color: #ffc875;
}
.sim-page .approval {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(124, 92, 255, 0.1);
  border: 1px solid rgba(124, 92, 255, 0.3);
  font-size: 12.5px;
  color: var(--ink);
  transform-origin: top;
  animation: pop 0.6s var(--ease) both;
}
.sim-page .approval .av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #4a154b;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.sim-page .approval .acts {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.sim-page .approval .acts span {
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 11.5px;
}
.sim-page .approval .ok {
  background: var(--green);
  color: #05230f;
}
.sim-page .approval .no {
  background: rgba(255, 255, 255, 0.08);
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


.sim-page section {
  position: relative;
}
.sim-page .section {
  padding: 120px 0;
}
.sim-page .section-head {
  max-width: 760px;
  margin-bottom: 60px;
}
.sim-page .section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.sim-page .section-head.wide {
  max-width: none;
}
.sim-page .section-head h2 {
  font-size: clamp(32px, 4.2vw, 54px);
  margin: 18px 0 18px;
}
.sim-page .section-head p {
  font-size: 18px;
  color: var(--ink-muted);
}
.sim-page .section-light {
  background: var(--bg-light);
  color: var(--ink-dark);
}
.sim-page .section-light .section-head p,
.sim-page .section-light .muted {
  color: var(--ink-dark-muted);
}
.sim-page .section-light .eyebrow {
  color: var(--ink-dark-muted);
}


.sim-page .stmt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sim-page .stmt {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(19, 26, 46, 0.9), rgba(11, 15, 28, 0.92));
  border: 1px solid var(--border-dark-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(124, 92, 255, 0.08);
  backdrop-filter: blur(10px);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.sim-page .stmt:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 92, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.25), 0 26px 60px -24px rgba(47, 107, 255, 0.5);
}
.sim-page .stmt .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  color: #fff;
  margin-bottom: 20px;
}
.sim-page .stmt .ic svg {
  width: 22px;
  height: 22px;
}
.sim-page .stmt h3 {
  font-size: 19px;
  margin-bottom: 8px;
  color: var(--ink);
}
.sim-page .stmt p {
  font-size: 14.5px;
  color: var(--ink-muted);
}


.sim-page .pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.sim-page .pillar {
  position: relative;
  padding: 34px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-dark-card), var(--bg-dark-soft));
  border: 1px solid var(--border-dark);
  overflow: hidden;
}
.sim-page .pillar::after {
  content: '';
  position: absolute;
  inset: auto -40% -60% auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(47, 107, 255, 0.22), transparent 70%);
  transition: transform 0.6s var(--ease);
}
.sim-page .pillar:hover::after {
  transform: translate(-30px, -30px);
}
.sim-page .pillar .num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}
.sim-page .pillar h3 {
  font-size: 26px;
  margin: 18px 0 10px;
}
.sim-page .pillar p {
  color: var(--ink-muted);
  font-size: 15px;
}
.sim-page .pillar-quote {
  margin-top: 40px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  color: var(--ink);
}


.sim-page .dims-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.sim-page .dims {
  display: grid;
  gap: 14px;
}
.sim-page .dim {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid rgba(11, 14, 23, 0.07);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.sim-page .dim:hover {
  transform: translateX(6px);
  border-color: rgba(47, 107, 255, 0.35);
}
.sim-page .dim .n {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--blue);
  background: rgba(47, 107, 255, 0.08);
}
.sim-page .dim h4 {
  font-size: 18px;
}
.sim-page .dim p {
  font-size: 14px;
  color: var(--ink-dark-muted);
}
.sim-page .radar-demo {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #eef1fa 70%);
  box-shadow: inset 0 0 0 1px rgba(11, 14, 23, 0.05), 0 40px 80px -50px rgba(47, 107, 255, 0.5);
  padding: 8px;
  display: grid;
  place-items: center;
}


.sim-page .layer {
  display: grid;
  grid-template-columns: 1fr auto 1.1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
}
.sim-page .layer-col {
  display: grid;
  gap: 12px;
}
.sim-page .layer-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-dark-card);
  border: 1px solid var(--border-dark);
  font-size: 14px;
  font-weight: 500;
}
.sim-page .layer-chip svg {
  width: 18px;
  height: 18px;
  color: #a9b9ff;
}
.sim-page .layer-core {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(47, 107, 255, 0.2), rgba(124, 92, 255, 0.18));
  border: 1px solid rgba(124, 92, 255, 0.45);
  box-shadow: var(--shadow-glow);
  text-align: center;
}
.sim-page .layer-core h3 {
  font-size: 22px;
  margin-bottom: 14px;
}
.sim-page .layer-core ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-muted);
}
.sim-page .layer-core li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sim-page .layer-core li svg {
  width: 14px;
  height: 14px;
  color: var(--green);
}
.sim-page .flow-line {
  position: relative;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.6), transparent);
  overflow: hidden;
}
.sim-page .flow-line::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -20px;
  width: 20px;
  height: 6px;
  border-radius: 6px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: flow 1.8s linear infinite;
}
@keyframes flow {
  to {
    left: 100%;
  }
}


.sim-page .why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.sim-page .checklist {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}
.sim-page .checklist li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 18.5px;
}
.sim-page .checklist li svg {
  flex: none;
  width: 27px;
  height: 27px;
  margin-top: 1px;
  color: var(--blue);
}
.sim-page .big-stat {
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--bg-dark);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.sim-page .big-stat .q {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
}
.sim-page .big-stat .q em {
  font-style: normal;
}
.sim-page .big-stat .foot {
  margin-top: 26px;
  font-size: 14px;
  color: var(--ink-muted);
}


.sim-page .about {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.sim-page .stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sim-page .stat {
  padding: 26px;
  border-radius: var(--r-md);
  background: var(--bg-dark-card);
  border: 1px solid var(--border-dark);
}
.sim-page .stat .v {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.sim-page .stat .k {
  font-size: 13.5px;
  color: var(--ink-muted);
}


.sim-page .cta-final {
  position: relative;
  overflow: hidden;
  padding: 90px 40px;
  border-radius: 32px;
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(47, 107, 255, 0.35), transparent 60%),
    linear-gradient(180deg, var(--bg-dark-card), var(--bg-dark-soft));
  border: 1px solid var(--border-dark-strong);
}
.sim-page .cta-final h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  max-width: 820px;
  margin: 18px auto;
}
.sim-page .cta-final p {
  color: var(--ink-muted);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 34px;
}
.sim-page .slots {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 26px;
  font-size: 13px;
  color: var(--ink-muted);
}
.sim-page .slots-dots {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.sim-page .slots i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--grad-brand);
}
.sim-page .cta-final p.consent-note {
  margin-top: 28px;
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.sim-page .consent-note strong {
  font-weight: 700;
}
.sim-page .consent-note .consent-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sim-page .consent-note .consent-link:hover {
  color: var(--cyan);
}

.sim-page .footer {
  padding: 50px 0;
  border-top: 1px solid var(--border-dark);
  color: var(--ink-faint);
  font-size: 13.5px;
}
.sim-page .footer .container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}


.sim-page .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.sim-page .reveal.in {
  opacity: 1;
  transform: none;
}
.sim-page .reveal[data-d='1'] {
  transition-delay: 0.08s;
}
.sim-page .reveal[data-d='2'] {
  transition-delay: 0.16s;
}
.sim-page .reveal[data-d='3'] {
  transition-delay: 0.24s;
}


/* OJO: selector compuesto ".sim-page.sim-body" (sin espacio) a propósito —
   en el HTML ambas clases están en el MISMO <div>, no una adentro de la otra.
   ".sim-page .sim-body" (con espacio, selector descendiente) NUNCA matchea
   acá y quedaría como CSS muerto, igual que le pasaba a esta misma regla
   antes de este arreglo (el degradé radial decorativo nunca se pintaba; el
   fondo sólido oscuro igual se veía bien porque lo resuelve, aparte, la
   regla más simple ".sim-page { background: var(--bg-dark) }"). */
.sim-page.sim-body {
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 80% -10%, rgba(47, 107, 255, 0.18), transparent 55%),
    radial-gradient(ellipse at -10% 110%, rgba(124, 92, 255, 0.14), transparent 55%), var(--bg-dark);
  /* #site-nav (ver más abajo, #site-nav.chat-exit-nav) es position:fixed en
     esta página igual que en el resto del sitio, así que no empuja contenido
     por sí solo: este padding le deja el lugar justo para que no tape nada. */
  padding-top: var(--nav-h, 84px);
}
/* Mientras el chat está activo (chat-layout.show) la página externa no debe
   tener scroll propio: el único scroll permitido queda dentro de #messages.
   El header se mantiene siempre visible, el footer mínimo (franja de
   copyright + Terms/Privacy) ocupa solo su alto natural, y .chat-layout se
   estira para llenar el resto del alto disponible. Cuando se muestra el
   popup de cierre (chat-layout pierde .show), esta regla deja de aplicar y
   la página vuelve a comportarse como una página normal con scroll completo. */
body:has(> .sim-body .chat-layout.show) {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body:has(> .sim-body .chat-layout.show) > .sim-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body:has(> .sim-body .chat-layout.show) > .sim-body > .sim-progress-bar {
  flex: none;
}
body:has(> .sim-body .chat-layout.show) > .sim-body .chat-layout.show {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body:has(> .sim-body .chat-layout.show) > footer.site-footer {
  flex: none;
}

/* Footer mínimo de la pantalla de encuesta: solo la franja de copyright +
   Terms/Privacy (sin logo/contacto/redes), así que se le saca el padding y
   el borde superior propios de .site-footer para que el único borde visible
   sea el de .footer-bottom-simple, justo encima del texto. */
.sim-page ~ footer.site-footer.footer-minimal {
  padding-top: 0;
  border-top: none;
}
.sim-page ~ footer.site-footer.footer-minimal .footer-bottom-simple {
  padding: 14px 0;
}
/* Barra de progreso de la encuesta: antes vivía dentro de .sim-top (el header
   propio del simulador, ya reemplazado por el navbar principal del sitio,
   ver #site-nav.chat-exit-nav más abajo). Ahora es su propia franja, fija en
   el flujo normal (no position:fixed) justo debajo del navbar — mismo look
   que tenía .sim-top (fondo oscuro + blur + borde inferior). */
.sim-page .sim-progress-bar {
  background: rgba(5, 7, 13, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-dark);
}
/* Navbar principal del sitio en la pantalla de encuesta: mismo componente
   (#site-nav) que usa el resto de las páginas, incluida la landing de este
   mismo simulador (diagnostico-gasto-ia.html) — pero acá, a pedido, solo se
   muestra el logo a la izquierda y el botón "Salir" a la derecha; no hay
   nav-links, selector de idioma ni toggle mobile en el HTML de esta página,
   así que no hace falta ocultarlos por CSS. .nav-solid lo deja siempre
   opaco/con blur (en vez de transparente-hasta-hacer-scroll como en el resto
   del sitio): acá no hay scroll de página que dispare ese cambio. */
.chat-exit-nav .nav-cta {
  gap: 0;
}
.sim-page .icon-btn,
#site-nav .icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink-muted);
  border: 1px solid var(--border-dark);
  transition: color 0.2s, background 0.2s;
}
.sim-page .icon-btn:hover,
#site-nav .icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.sim-page .icon-btn svg,
#site-nav .icon-btn svg {
  width: 15px;
  height: 15px;
}
/* El botón "Salir" del navbar, a diferencia del resto de los .icon-btn, no
   tiene fondo propio definido arriba — por eso se ve con el fondo claro que
   pone el navegador por default en los <button>. Acá se le da el mismo
   estilo oscuro que ya usa el selector de idioma del navbar (.lang-trigger),
   para que ambos controles del navbar se vean consistentes. */
#site-nav.chat-exit-nav .icon-btn {
  background: rgba(238, 241, 248, 0.06);
  border: 1px solid var(--border-dark-strong);
  color: var(--ink);
}
#site-nav.chat-exit-nav .icon-btn:hover {
  background: rgba(238, 241, 248, 0.11);
  color: #fff;
}

.sim-page .progress {
  padding: 12px 0 14px;
}
.sim-page .progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.sim-page .progress-label b {
  color: #fff;
  font-weight: 600;
}
.sim-page .segs {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;
}
.sim-page .seg {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.sim-page .seg i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-brand);
  border-radius: inherit;
  transition: width 0.6s var(--ease);
}


.sim-page .chat-layout {
  display: none;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 28px;
  align-items: stretch;
}
.sim-page .chat-layout.show {
  display: grid;
}
.sim-page .chat-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sim-page .messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sim-page .messages::-webkit-scrollbar {
  width: 8px;
}
.sim-page .messages::-webkit-scrollbar-track {
  background: transparent;
}
.sim-page .messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}
.sim-page .msg {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  max-width: 88%;
  animation: msgIn 0.45s var(--ease) both;
}
.sim-page .msg.fast {
  animation: none;
}
@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sim-page .msg .avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(47, 107, 255, 0.8);
}
.sim-page .msg .avatar.ghost {
  visibility: hidden;
}
.sim-page .bubble {
  padding: 13px 17px;
  border-radius: 18px;
  font-size: 15.5px;
  line-height: 1.55;
  background: var(--bg-dark-card-2);
  border: 1px solid var(--border-dark);
  border-bottom-left-radius: 6px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sim-page .bubble strong {
  color: #fff;
  font-weight: 600;
}
.sim-page .msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.sim-page .msg.user .bubble {
  background: var(--grad-brand);
  border: 0;
  color: #fff;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 10px 30px -14px rgba(47, 107, 255, 0.8);
}
.sim-page .msg.user .bubble.skipped {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-muted);
  font-style: italic;
  box-shadow: none;
}
.sim-page .msg.rich {
  max-width: 100%;
  width: 100%;
}
.sim-page .msg.rich .bubble {
  padding: 0;
  background: none;
  border: 0;
  width: 100%;
}
.sim-page .typing {
  display: inline-flex;
  gap: 5px;
  padding: 16px 18px;
}
.sim-page .typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: blink 1.2s infinite both;
}
.sim-page .typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.sim-page .typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}


.sim-page .pcard {
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(160deg, rgba(47, 107, 255, 0.14), rgba(124, 92, 255, 0.1));
  border: 1px solid rgba(124, 92, 255, 0.35);
}
.sim-page .pcard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9c6ff;
  margin-bottom: 16px;
}
.sim-page .pcard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
.sim-page .pcard-flow {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.sim-page .pcard-col {
  display: grid;
  gap: 6px;
}
.sim-page .pill {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(5, 7, 13, 0.55);
  border: 1px solid var(--border-dark);
  white-space: nowrap;
  text-align: center;
}
.sim-page .pcard-arrow {
  height: 2px;
  min-width: 18px;
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.1), rgba(124, 92, 255, 0.8));
  position: relative;
}
.sim-page .pcard-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: rgba(124, 92, 255, 0.9);
  border-right: 0;
}
.sim-page .pcard-core {
  padding: 14px 12px;
  border-radius: 14px;
  text-align: center;
  background: var(--grad-brand);
  box-shadow: var(--shadow-glow);
}
.sim-page .pcard-core strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
}
.sim-page .pcard-core small {
  font-size: 11px;
  opacity: 0.85;
}


.sim-page .composer {
  flex: none;
  padding: 16px 0 18px;
}
/* Mismo estilo/color que .inline-ask-box (los inputs de nombre, empresa,
   rubro, etc.) para que las preguntas con opciones (chips/escala) queden en
   la misma línea visual que las preguntas de texto libre. */
.sim-page .composer-inner {
  padding: 14px;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  background: var(--grad-brand);
  border: none;
  box-shadow: 0 10px 30px -14px rgba(47, 107, 255, 0.8);
  animation: msgIn 0.35s var(--ease) both;
}
.sim-page .composer-inner:empty {
  display: none;
}
.sim-page .composer-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.sim-page .composer input[type='text'],
.sim-page .composer input[type='email'],
.sim-page .composer textarea {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 13px 15px;
  font: inherit;
  font-size: 15.5px;
  color: #fff;
  outline: none;
  resize: none;
  transition: border-color 0.2s, background 0.2s;
}
.sim-page .composer textarea {
  min-height: 52px;
  max-height: 180px;
  line-height: 1.5;
}
.sim-page .composer input:focus,
.sim-page .composer textarea:focus {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
}
.sim-page .composer input::placeholder,
.sim-page .composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}
.sim-page .send {
  flex: none;
  height: 52px;
  padding: 0 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue-2);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.sim-page .send:hover {
  background: #fff;
  transform: translateY(-1px);
}
.sim-page .send:disabled {
  opacity: 0.35;
  transform: none;
  cursor: not-allowed;
}
.sim-page .send svg {
  width: 16px;
  height: 16px;
}
.sim-page .composer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  min-height: 22px;
}
.sim-page .composer-foot .left {
  display: flex;
  gap: 14px;
  align-items: center;
}
.sim-page .composer-foot .right {
  display: flex;
  align-items: center;
}
/* Rótulo corto arriba a la izquierda del composer de opciones (en vez de
   abajo a la derecha, como estaba antes) — deja el renglón de abajo libre
   para el botón "Continuar" en las preguntas de selección múltiple, y en
   general achica el alto total de la tarjeta. */
.sim-page .composer-hint {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 10px;
}
.sim-page .send-mini {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  gap: 6px;
}
.sim-page .send-mini svg {
  width: 13px;
  height: 13px;
}
.sim-page .foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  padding: 3px 0;
}
.sim-page .foot-btn:hover {
  color: #fff;
}
.sim-page .foot-btn svg {
  width: 13px;
  height: 13px;
}
.sim-page .err {
  color: #fff3b0;
}

/* Campo de texto libre (nombre, empresa, mail, respuestas abiertas…) inyectado
   dentro de la conversación en vez del composer fijo de abajo: se ve como un
   campo a completar —alineado a la derecha, como el próximo turno— y no como
   una barra de chat siempre presente. Reutiliza la paleta de .msg.user para
   que quede claro que es "tu turno", pero con un input real adentro en vez de
   una burbuja de texto. */
.sim-page .inline-ask {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  animation: msgIn 0.35s var(--ease) both;
}
.sim-page .inline-ask-box {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--grad-brand);
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  padding: 10px;
  box-shadow: 0 10px 30px -14px rgba(47, 107, 255, 0.8);
}
.sim-page .inline-ask input,
.sim-page .inline-ask textarea {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 11px 13px;
  font: inherit;
  font-size: 15.5px;
  color: #fff;
  outline: none;
  resize: none;
  transition: border-color 0.2s, background 0.2s;
}
.sim-page .inline-ask textarea {
  min-height: 46px;
  max-height: 160px;
  line-height: 1.5;
}
.sim-page .inline-ask input:focus,
.sim-page .inline-ask textarea:focus {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
}
.sim-page .inline-ask input::placeholder,
.sim-page .inline-ask textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}
.sim-page .inline-send {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: grid;
  place-items: center;
  transition: opacity 0.2s, background 0.2s;
}
.sim-page .inline-send:hover {
  background: rgba(255, 255, 255, 0.28);
}
.sim-page .inline-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.sim-page .inline-send svg {
  width: 16px;
  height: 16px;
}
.sim-page .inline-ask-foot {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 8px;
  font-size: 12.5px;
}
.sim-page .inline-ask-foot button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  padding: 3px 0;
}
.sim-page .inline-ask-foot button:hover {
  color: #fff;
}
.sim-page .inline-ask-foot svg {
  width: 13px;
  height: 13px;
}

.sim-page .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sim-page .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 13px;
  font-size: 14.5px;
  text-align: left;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.sim-page .chip:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}
.sim-page .chip .key {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.sim-page .chip .box {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  transition: background 0.18s, border-color 0.18s;
}
.sim-page .chip .box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  color: var(--blue-2);
}
.sim-page .chip.on {
  background: rgba(255, 255, 255, 0.32);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
.sim-page .chip.on .box {
  background: #fff;
  border-color: #fff;
}
.sim-page .chip.on .box svg {
  opacity: 1;
}
.sim-page .chip.rec {
  border-color: rgba(255, 255, 255, 0.8);
}
.sim-page .chip .star {
  color: #fff;
  font-size: 13px;
}
.sim-page .chip.dim {
  opacity: 0.45;
}
.sim-page .other-row {
  display: none;
  margin-top: 10px;
}
.sim-page .other-row.show {
  display: flex;
}
.sim-page .scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sim-page .scale button {
  height: 60px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: all 0.18s;
}
.sim-page .scale button:hover {
  background: #fff;
  color: var(--blue-2);
  border-color: transparent;
  transform: translateY(-2px);
}
.sim-page .scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 8px;
}


.sim-page .profile {
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(19, 26, 46, 0.9), rgba(11, 15, 28, 0.9));
  border: 1px solid var(--border-dark-strong);
  box-shadow: var(--shadow-md);
  min-height: 0;
  overflow-y: auto;
}
.sim-page .profile-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sim-page .profile-toggle {
  display: none;
}
.sim-page .level {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 20px;
}
.sim-page .level-ring {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
}
.sim-page .level-ring svg {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.sim-page .level-ring .track {
  stroke: rgba(255, 255, 255, 0.08);
}
.sim-page .level-ring .val {
  stroke: url(#ringGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease);
}
.sim-page .level-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 18px;
}
.sim-page .level-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.sim-page .level-sub {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.sim-page .calibrating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-muted);
}
.sim-page .calibrating::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  border-top-color: var(--cyan);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.sim-page .pbars {
  display: grid;
  gap: 14px;
}
.sim-page .pbar-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.sim-page .pbar-top span:last-child {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-muted);
  transition: color 0.3s;
}
.sim-page .pbar-track {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.sim-page .pbar-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--grad-brand);
  transition: width 1s var(--ease), background 0.4s;
}
.sim-page .pbar.flash .pbar-top span:last-child {
  color: var(--cyan);
}
.sim-page .profile-note {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}


.sim-page .generating {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 13, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 24px;
}
.sim-page .generating.show {
  display: flex;
  animation: fade 0.4s both;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.sim-page .gen-box {
  width: 100%;
  max-width: 440px;
  text-align: center;
}
.sim-page .gen-orb {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--blue), var(--violet), var(--cyan), var(--blue));
  animation: spin 2.4s linear infinite;
  position: relative;
  filter: drop-shadow(0 0 30px rgba(47, 107, 255, 0.6));
}
.sim-page .gen-orb::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg-dark);
}
.sim-page .gen-box h3 {
  font-size: 24px;
  margin-bottom: 22px;
}
.sim-page .gen-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  text-align: left;
}
.sim-page .gen-steps li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-dark);
  font-size: 14px;
  color: var(--ink-faint);
  transition: color 0.3s, border-color 0.3s;
}
.sim-page .gen-steps li .st {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  flex: none;
  display: grid;
  place-items: center;
}
.sim-page .gen-steps li.active {
  color: #fff;
  border-color: rgba(124, 92, 255, 0.4);
}
.sim-page .gen-steps li.active .st {
  border-color: var(--ink-faint);
  border-top-color: var(--cyan);
  animation: spin 0.8s linear infinite;
}
.sim-page .gen-steps li.done {
  color: var(--ink);
}
.sim-page .gen-steps li.done .st {
  border-color: var(--green);
  background: var(--green);
}
.sim-page .gen-steps li.done .st::after {
  content: '';
  width: 6px;
  height: 3px;
  border-left: 2px solid #05230f;
  border-bottom: 2px solid #05230f;
  transform: rotate(-45deg) translate(1px, -1px);
}


/* El cierre de la encuesta es un popup sobre la conversación (que sigue
   montada y visible, difuminada, detrás) — no un reemplazo de pantalla. */
.sim-page .report {
  display: none;
}
.sim-page .report.show {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: msgIn 0.3s var(--ease) both;
}
/* La conversación de fondo se difumina mientras el popup de cierre está
   abierto, para que se note que sigue "ahí" sin competir con el popup. */
.sim-page .chat-layout:has(~ .report.show) {
  filter: blur(5px);
  pointer-events: none;
}
.sim-page .r-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: 30px;
}
.sim-page .r-head h1 {
  font-size: clamp(30px, 4vw, 48px);
  margin-top: 14px;
}
.sim-page .r-head .meta {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 14.5px;
}
.sim-page .r-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sim-page .r-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.sim-page .card {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(19, 26, 46, 0.85), rgba(11, 15, 28, 0.9));
  border: 1px solid var(--border-dark);
  padding: 28px;
  break-inside: avoid;
}
.sim-page .card h3 {
  font-size: 20px;
  margin-bottom: 6px;
}
.sim-page .card .sub {
  color: var(--ink-muted);
  font-size: 14px;
  margin-bottom: 20px;
}
.sim-page .c-score {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.sim-page .c-score::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  right: -150px;
  top: -150px;
  background: radial-gradient(circle, rgba(47, 107, 255, 0.28), transparent 70%);
  pointer-events: none;
}
.sim-page .c-radar {
  grid-column: span 7;
}
.sim-page .score-wrap {
  display: flex;
  gap: 26px;
  align-items: center;
  margin: 10px 0 22px;
}
.sim-page .score-ring {
  position: relative;
  width: 150px;
  height: 150px;
  flex: none;
}
.sim-page .score-ring svg {
  width: 150px;
  height: 150px;
  transform: rotate(-90deg);
}
.sim-page .score-ring .num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.sim-page .score-ring .num b {
  display: block;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sim-page .score-ring .num small {
  font-size: 12px;
  color: var(--ink-faint);
}
.sim-page .lvl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sim-page .tone-crit {
  background: rgba(255, 84, 112, 0.15);
  color: #ff8fa2;
}
.sim-page .tone-warn {
  background: rgba(255, 178, 63, 0.15);
  color: #ffc875;
}
.sim-page .tone-mid {
  background: rgba(0, 208, 255, 0.12);
  color: #7fe6ff;
}
.sim-page .tone-good {
  background: rgba(47, 107, 255, 0.16);
  color: #9db7ff;
}
.sim-page .tone-great {
  background: rgba(47, 213, 154, 0.14);
  color: #6ff0be;
}
.sim-page .lvl-name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  margin: 10px 0 6px;
  letter-spacing: -0.02em;
}
.sim-page .lvl-blurb {
  color: var(--ink-muted);
  font-size: 15px;
}
.sim-page .ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.sim-page .ladder div {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
}
.sim-page .ladder div i {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}
.sim-page .ladder div.on i {
  background: var(--grad-brand);
}
.sim-page .ladder div.cur {
  color: #fff;
  font-weight: 600;
}
.sim-page .radar-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}
.sim-page .radar-svg text {
  font-family: var(--font-body);
}
.sim-page .dim-list {
  display: grid;
  gap: 14px;
}
.sim-page .dim-row .top {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 6px;
}
.sim-page .dim-row .top b {
  font-family: var(--font-display);
}
.sim-page .dim-row small {
  display: block;
  color: var(--ink-faint);
  font-size: 12px;
  margin-top: 4px;
}

.sim-page .c-kpis {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
  background: none;
  border: 0;
}
.sim-page .kpi {
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(19, 26, 46, 0.85), rgba(11, 15, 28, 0.9));
  border: 1px solid var(--border-dark);
  padding: 22px;
}
.sim-page .kpi .k {
  font-size: 12.5px;
  color: var(--ink-muted);
}
.sim-page .kpi .v {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.sim-page .kpi .s {
  font-size: 12px;
  color: var(--ink-faint);
}
.sim-page .kpi.alert {
  border-color: rgba(255, 84, 112, 0.35);
  background: linear-gradient(180deg, rgba(255, 84, 112, 0.1), rgba(11, 15, 28, 0.9));
}
.sim-page .kpi.alert .v {
  color: #ff9fb0;
}

.sim-page .c-findings {
  grid-column: span 7;
}
.sim-page .c-strengths {
  grid-column: span 5;
}
.sim-page .finding {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border-dark);
}
.sim-page .finding:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.sim-page .sev {
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  height: fit-content;
  white-space: nowrap;
}
.sim-page .sev-4 {
  background: rgba(255, 84, 112, 0.16);
  color: #ff8fa2;
}
.sim-page .sev-3 {
  background: rgba(255, 140, 80, 0.16);
  color: #ffb08a;
}
.sim-page .sev-2 {
  background: rgba(255, 178, 63, 0.14);
  color: #ffc875;
}
.sim-page .sev-1 {
  background: rgba(0, 208, 255, 0.12);
  color: #7fe6ff;
}
.sim-page .finding h4 {
  font-size: 16.5px;
  margin-bottom: 4px;
}
.sim-page .finding p {
  font-size: 14px;
  color: var(--ink-muted);
}
.sim-page .finding .fix {
  margin-top: 8px;
  font-size: 12.5px;
  color: #a9b9ff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sim-page .finding .fix svg {
  width: 13px;
  height: 13px;
}
.sim-page .str-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 12px;
}
.sim-page .str-list li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
}
.sim-page .str-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--green);
}
.sim-page .quote {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--violet);
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
}
.sim-page .quote b {
  display: block;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.sim-page .c-solution {
  grid-column: span 12;
}
.sim-page .sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sim-page .sol {
  position: relative;
  padding: 22px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-dark);
}
.sim-page .sol.pick {
  border-color: rgba(124, 92, 255, 0.5);
  background: linear-gradient(160deg, rgba(47, 107, 255, 0.12), rgba(124, 92, 255, 0.08));
}
.sim-page .sol .ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  margin-bottom: 14px;
}
.sim-page .sol .ic svg {
  width: 20px;
  height: 20px;
  color: #fff;
}
.sim-page .sol h4 {
  font-size: 16.5px;
  margin-bottom: 6px;
}
.sim-page .sol p {
  font-size: 13.5px;
  color: var(--ink-muted);
}
.sim-page .sol .badges {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 6px;
}

.sim-page .c-roadmap {
  grid-column: span 12;
}
.sim-page .road {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
}
.sim-page .road-col {
  padding: 22px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-dark);
}
.sim-page .road-col .rng {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sim-page .road-col h4 {
  font-size: 24px;
  margin: 6px 0 14px;
}
.sim-page .road-col h4 span {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sim-page .road-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.sim-page .road-col li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
}
.sim-page .road-col li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

.sim-page .c-cta {
  grid-column: span 12;
  text-align: center;
  padding: 50px 30px;
  background: radial-gradient(ellipse at top, rgba(47, 107, 255, 0.3), transparent 65%),
    linear-gradient(180deg, rgba(19, 26, 46, 0.9), rgba(11, 15, 28, 0.95));
  border-color: var(--border-dark-strong);
}
.sim-page .c-cta h3 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 14px auto 12px;
  max-width: 700px;
}
.sim-page .c-cta p {
  color: var(--ink-muted);
  max-width: 600px;
  margin: 0 auto 28px;
}
.sim-page .c-cta .btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.sim-page .disclaimer {
  grid-column: span 12;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.6;
}
.sim-page .print-only {
  display: none;
}

/* Popup de cierre simple (reemplaza al informe completo con score/riesgo en
   USD): una tarjeta chica, centrada, sin cifras — solo confirma que la
   encuesta se recibió y qué sigue. Es el contenido de .report.show, que ya
   se encarga de centrarla sobre la conversación difuminada de fondo. */
.sim-page .thanks-card {
  width: 100%;
  max-width: 560px;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  text-align: center;
  padding: 48px 36px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(19, 26, 46, 0.96), rgba(11, 15, 28, 0.96));
  border: 1px solid var(--border-dark-strong);
  box-shadow: var(--shadow-lg);
}
.sim-page .thanks-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(47, 107, 255, 0.6);
}
.sim-page .thanks-icon svg {
  width: 26px;
  height: 26px;
}
.sim-page .thanks-card h1 {
  font-size: clamp(24px, 3.4vw, 32px);
  margin: 14px 0 12px;
}
.sim-page .thanks-card p {
  color: var(--ink-muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.sim-page .thanks-card .btns {
  margin-bottom: 22px;
}


.sim-page .toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 30px);
  opacity: 0;
  z-index: 90;
  padding: 12px 18px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-dark);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: all 0.35s var(--ease);
  pointer-events: none;
}
.sim-page .toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}


@media (max-width: 1080px) {
  .sim-page .stmt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sim-page .layer {
    grid-template-columns: 1fr;
  }
  .sim-page .flow-line {
    width: 2px;
    height: 40px;
    margin: 0 auto;
    background: linear-gradient(180deg, transparent, rgba(124, 92, 255, 0.6), transparent);
  }
  .sim-page .flow-line::after {
    left: -2px;
    top: -20px;
    width: 6px;
    height: 20px;
    animation: flowV 1.8s linear infinite;
  }
  @keyframes flowV {
    to {
      top: 100%;
    }
  }
  .sim-page .layer-col {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
@media (max-width: 960px) {
  .sim-page .nav-links {
    display: none;
  }
  .sim-page .hero-grid,
.sim-page .dims-wrap,
.sim-page .why-grid,
.sim-page .about {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .sim-page .pillars {
    grid-template-columns: 1fr;
  }
  .sim-page .section {
    padding: 84px 0;
  }
  .sim-page .chat-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
  }
  .sim-page .profile {
    order: -1;
    margin: 0 -24px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 12px 24px;
    background: rgba(11, 15, 28, 0.94);
    backdrop-filter: blur(12px);
    overflow-y: visible;
  }
  .sim-page .profile-toggle {
    display: inline-flex;
  }
  .sim-page .profile .profile-body {
    display: none;
  }
  .sim-page .profile.open .profile-body {
    display: block;
  }
  .sim-page .profile .level {
    margin: 10px 0 6px;
  }
  .sim-page .profile .level-ring,
.sim-page .profile .level-ring svg {
    width: 44px;
    height: 44px;
  }
  .sim-page .profile .level-ring b {
    font-size: 14px;
  }
  .sim-page .level-name {
    font-size: 17px;
  }
  .sim-page .chat-col {
    min-height: 0;
    padding-top: 18px;
  }
  .sim-page .r-grid > .card,
.sim-page .c-score,
.sim-page .c-radar,
.sim-page .c-findings,
.sim-page .c-strengths {
    grid-column: span 12;
  }
  .sim-page .c-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .sim-page .sol-grid,
.sim-page .road {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .sim-page .container {
    padding: 0 16px;
  }
  .sim-page .profile {
    margin: 0 -16px;
    padding: 10px 16px;
  }
  .sim-page .hero {
    padding-top: 110px;
  }
  .sim-page .stmt-grid,
.sim-page .stats {
    grid-template-columns: 1fr 1fr;
  }
  .sim-page .stmt-grid {
    grid-template-columns: 1fr;
  }
  .sim-page .msg {
    max-width: 96%;
  }
  .sim-page .bubble {
    font-size: 15px;
  }
  .sim-page .radar-box {
    grid-template-columns: 1fr;
  }
  .sim-page .score-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .sim-page .c-kpis {
    grid-template-columns: 1fr;
  }
  .sim-page .card {
    padding: 22px;
  }
  .sim-page .pcard-flow {
    grid-template-columns: 1fr;
  }
  .sim-page .pcard-arrow {
    width: 2px;
    height: 16px;
    min-width: 0;
    margin: 0 auto;
  }
  .sim-page .pcard-arrow::after {
    display: none;
  }
  .sim-page .pcard-col {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
  .sim-page .send span {
    display: none;
  }
  .sim-page .cta-final {
    padding: 60px 22px;
  }
  .sim-page .approval {
    flex-wrap: wrap;
  }
  /* Se saca el avatar "#" de la tarjeta de aprobación en mobile: libera ancho
     para el texto (que en mobile ya viene con flex-wrap) y achica el alto
     real de la tarjeta para que no supere el alto reservado en .approval-slot
     y haga crecer la consola entera al aparecer. */
  .sim-page .approval .av {
    display: none;
  }
  .sim-page .slots {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  /* Total de gasto + presupuesto: en vez de compartir una fila angosta (lo que
     hacía que "USD 4.561" se partiera en dos líneas), el total pasa a ocupar
     todo el ancho en una sola línea y el presupuesto con su barra quedan
     debajo, centrados. */
  .sim-page .console-total {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .sim-page .console-total .budget {
    text-align: center;
  }
  .sim-page .console-total .meter {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sim-page *,
.sim-page *::before,
.sim-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .sim-page .reveal {
    opacity: 1;
    transform: none;
  }
}


@media print {
  @page {
    size: A4;
    margin: 14mm;
  }
  .sim-page,
.sim-page .sim-body {
    background: #fff !important;
    color: #0b0e17;
  }
  .sim-page .sim-top,
.sim-page .chat-layout,
.sim-page .r-actions,
.sim-page .toast,
.sim-page .generating,
.sim-page .c-cta .btns,
.sim-page .no-print {
    display: none !important;
  }
  .sim-page .print-only {
    display: block;
  }
  .sim-page .report {
    display: block !important;
    padding: 0;
  }
  .sim-page .container {
    max-width: none;
    padding: 0;
  }
  .sim-page .card,
.sim-page .kpi,
.sim-page .sol,
.sim-page .road-col {
    background: #fff !important;
    border: 1px solid #dde2ee !important;
    box-shadow: none !important;
    color: #0b0e17;
  }
  .sim-page .card::after,
.sim-page .c-score::after {
    display: none;
  }
  .sim-page .r-head {
    border-color: #dde2ee;
  }
  .sim-page .r-head .meta,
.sim-page .card .sub,
.sim-page .lvl-blurb,
.sim-page .finding p,
.sim-page .sol p,
.sim-page .kpi .k,
.sim-page .kpi .s,
.sim-page .dim-row small,
.sim-page .disclaimer,
.sim-page .quote {
    color: #5b6478 !important;
  }
  .sim-page .road-col li,
.sim-page .str-list li {
    color: #0b0e17;
  }
  .sim-page .finding {
    border-color: #e6e9f2;
  }
  .sim-page .kpi.alert .v {
    color: #d6334f;
  }
  .sim-page .grad-text,
.sim-page .road-col h4 span {
    -webkit-text-fill-color: initial;
    color: #2f6bff;
    background: none;
  }
  .sim-page .radar-svg .grid-line {
    stroke: #dde2ee;
  }
  .sim-page .radar-svg .axis-label {
    fill: #0b0e17;
  }
  .sim-page .c-cta {
    background: #f4f6fb !important;
  }
  .sim-page .r-grid {
    gap: 12px;
  }
  .sim-page .c-score,
.sim-page .c-radar,
.sim-page .c-findings,
.sim-page .c-strengths {
    grid-column: span 12;
  }
  .sim-page .c-solution,
.sim-page .c-roadmap {
    break-before: page;
  }
  .sim-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


.sim-page .sent-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: #b9f5dc;
  background: rgba(47, 213, 154, 0.1);
  border: 1px solid rgba(47, 213, 154, 0.3);
}
.sim-page .sent-note svg {
  width: 15px;
  height: 15px;
}
.sim-page .sent-note b {
  color: #fff;
  font-weight: 600;
}


/* ==========================================================================
   Rediseño `diagnostico-gasto-ia.html` (06/10/2026, 3ra vuelta):
   portada más chica, sin cuadriculado, consola de ejemplo más estable y con
   transiciones más suaves, gráficos animados decorativos nuevos.
   ========================================================================== */

/* Portada más resumida: sin pantalla completa, menos padding. Solo se usa en
   esta página (el header .hero no existe en diagnostico-gasto-ia-chat.html). */
.sim-page .hero.hero-compact {
  min-height: 0;
  padding: calc(var(--nav-h, 84px) + 48px) 0 64px;
  /* Mismo degradé que la portada de index.html, para que el fondo de esta
     portada no se vea "distinto" (antes esta página usaba círculos .glow
     con otros colores/posiciones en vez de este gradiente). */
  background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(124, 92, 255, .18), transparent 60%),
              radial-gradient(ellipse 50% 34% at 18% 46%, rgba(47, 107, 255, .16), transparent 68%),
              var(--bg-dark);
}
.sim-page .hero.hero-compact .hero-grid {
  gap: 48px;
}
/* Un poco de aire extra arriba/abajo del contenido de la portada, para que
   no quede pegado al borde superior (navbar) ni al inferior (sección
   siguiente) — además del padding que ya tiene el propio .hero. */
.sim-page .hero.hero-compact .hero-container {
  padding-top: 32px;
  padding-bottom: 40px;
}
.sim-page .hero.hero-compact h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  margin: 18px 0 18px;
}
.sim-page .hero.hero-compact .lead {
  font-size: 16.5px;
}

/* Números que no "tiemblan": ancho de dígitos fijo (tabular) para que el
   total, el monto bloqueado y los montos por fila no cambien de ancho cada
   vez que se actualizan. */
.sim-page .console-total .v,
.sim-page .crow .amt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.sim-page .crow .amt {
  min-width: 80px;
  text-align: right;
}

/* El texto de estado de la fila (p.ej. "GPT · reintentos detectados" →
   "Bloqueado · superó el tope") hace un crossfade en vez de cambiar de golpe. */
.sim-page .crow .s {
  transition: opacity 0.22s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  white-space: nowrap;
  overflow: hidden;
}

/* Espacio reservado para la tarjeta de aprobación: así la consola entera no
   cambia de alto cada vez que la tarjeta aparece o desaparece. Se indenta
   para quedar visualmente "colgada" de la fila bloqueada (la última de la
   lista) y se le agrega un pequeño conector hacia arriba. */
.sim-page .approval-slot {
  position: relative;
  /* Alto y margen siempre reservados (no solo cuando hay contenido): así la
     tarjeta de la consola mantiene el mismo alto todo el tiempo y no "salta"
     cada vez que la aprobación aparece o desaparece. */
  min-height: 88px;
  margin-top: 14px;
  margin-left: 42px;
}
.sim-page .approval-slot:not(:empty)::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 14px;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(255, 84, 112, 0.5), rgba(124, 92, 255, 0.35));
}
.sim-page .approval-slot .approval {
  margin-top: 0;
}
.sim-page .approval.leaving {
  animation: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* En mobile, sin el ícono "#" (se saca más arriba), el texto de la tarjeta
   sigue ocupando más líneas que en desktop (ancho angosto + flex-wrap en
   .approval), así que el alto real de la tarjeta supera los 88px reservados
   para desktop. Se reserva ese alto real acá para que la consola no cambie
   de tamaño al aparecer la tarjeta de aprobación en mobile. */
@media (max-width: 620px) {
  .sim-page .approval-slot {
    min-height: 130px;
  }
}

/* Variante de 3 columnas para stmt-grid (en vez de las 4 por defecto), con su
   propio quiebre a mobile — así no hace falta un estilo inline que después
   gane por especificidad sobre el @media de la grilla de 4 columnas. */
.sim-page .stmt-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
  .sim-page .stmt-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Indicador de cupos del CTA final: barrido secuencial sutil sobre los 5
   cuadraditos, en vez de quedar estáticos. */
.sim-page .slots i {
  animation: slotPulse 3.2s ease-in-out infinite;
}
.sim-page .slots i:nth-child(1) { animation-delay: 0s; }
.sim-page .slots i:nth-child(2) { animation-delay: 0.18s; }
.sim-page .slots i:nth-child(3) { animation-delay: 0.36s; }
.sim-page .slots i:nth-child(4) { animation-delay: 0.54s; }
.sim-page .slots i:nth-child(5) { animation-delay: 0.72s; }
@keyframes slotPulse {
  0%, 60%, 100% { opacity: 0.55; transform: scale(1); }
  20% { opacity: 1; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .sim-page .slots i {
    animation: none;
  }
}