/* Preserve the layered Hoy / Con AI Delivery Platform comparison, with readable app mockups. */
#resultados .outcome-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 42px; }
#resultados .forge-salto { height: 450px; }
#resultados .before-illustration { top: 12px; left: 0; width: 85%; height: 334px; opacity: .83; filter: saturate(.55); }
#resultados .after-illustration { bottom: 22px; right: 0; width: 88%; height: 334px; background: #fff; }
#resultados .before-illustration, #resultados .after-illustration { border-radius: 12px; text-align: left; }
#resultados .before-seal, #resultados .after-seal, #resultados .change-callout { display: none; }
#resultados .forge-salto[data-manual=before] .before-illustration,
#resultados .forge-salto[data-focus=before] .before-illustration { z-index: 4; opacity: 1; filter: none; transform: translate(0, 6px) rotateY(0) scale(1.015); }
#resultados .forge-salto[data-manual=before] .after-illustration { opacity: .3; }
#resultados .state-controls { display: flex; margin-top: 4px; }
#resultados .state-controls button { min-width: 100px; min-height: 36px; font-size: 12px; }
#resultados .comparison-caption { margin: 12px 0 0; text-align: center; font-size: 11px; line-height: 1.5; color: #738298; }
.forge-mock { display: flex; flex-direction: column; height: 100%; font: 11px/1.4 Inter, system-ui, sans-serif; color: #33445d; background: #fff; }
.fm-windowbar { height: 34px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #edf4ff; background: #23416c; font-size: 10px; }
.fm-windowbar > span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fm-modern .fm-windowbar { background: #5f6b7e; }
.fm-legacy .fm-windowbar { background: #647184; }
.fm-windowbar > b { margin-left: auto; white-space: nowrap; font-size: 8px; letter-spacing: 1px; padding: 3px 7px; border: 1px solid #ffffff4d; border-radius: 4px; }
.fm-window-dots { display: flex; gap: 4px; }
.fm-window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #ffffff7d; }
.fm-location { display: flex; align-items: center; gap: 8px; flex: none; height: 31px; padding: 0 14px; background: #f6f8fc; border-bottom: 1px solid #e7edf4; font-size: 9px; color: #718096; }
.fm-brand { height: 16px; width: auto; flex: none; padding-right: 10px; border-right: 1px solid #dde4ee; }
.fm-location > span:first-child { color: #5581b2; font-size: 15px; }
.fm-avatar { display: grid; place-items: center; margin-left: auto; width: 21px; height: 21px; border-radius: 50%; background: #e7e5f6; color: #645295; font-size: 8px; font-weight: 700; }
.fm-content { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 13px 16px 10px; min-height: 0; overflow: hidden; }
.fm-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fm-heading small { display: block; margin-bottom: 3px; color: #7d8da4; font-size: 8px; letter-spacing: .9px; }
.fm-heading strong { display: block; font-size: 13px; font-weight: 650; color: #253b59; }
.fm-badge { display: inline-flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; padding: 3px 6px; border-radius: 5px; font-size: 8px; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.fm-good { background: #e8f5f0; color: #28765c; }
.fm-warn { background: #fff4de; color: #95631d; }
.fm-muted { background: #eef1f6; color: #758298; }
.fm-footer { flex: none; display: flex; align-items: center; gap: 6px; min-height: 27px; padding: 6px 12px; border-top: 1px solid #e9edf4; color: #76859b; background: #f9fbfd; font-size: 8px; }
.fm-status-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #bd9d67; }
.fm-status-dot.is-good { background: #46a38c; }
.fm-table { display: grid; border: 1px solid #e4eaf1; border-radius: 6px; overflow: hidden; }
.fm-row { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; align-items: center; min-height: 28px; border-bottom: 1px solid #eaf0f6; }
.fm-row:last-child { border-bottom: 0; }
.fm-row > span { padding: 5px 8px; min-width: 0; }
.fm-row > span:not(:first-child) { text-align: right; }
.fm-table-head { background: #f0f4f9; color: #6d7d92; font-size: 9px; font-weight: 600; min-height: 24px; }
.fm-mismatch { color: #a96b34; background: #fff3df; padding: 2px 4px; border-radius: 3px; font-weight: 600; }
.fm-sheet-tools { display: flex; align-items: center; gap: 12px; font-size: 8px; color: #77849a; }
.fm-formula { margin-left: auto; border: 1px solid #e3e8f0; padding: 3px 7px; border-radius: 3px; }
.fm-formula b { padding-left: 6px; color: #56647c; font: inherit; }
.fm-inline-warning { display: flex; gap: 7px; align-items: center; font-size: 9px; color: #927144; }
.fm-inline-warning b { display: grid; place-items: center; border-radius: 50%; background: #f9ecd6; width: 14px; height: 14px; }
.fm-metrics, .fm-test-summary { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.fm-metric { padding: 9px 11px; border: 1px solid #e2e9f3; border-radius: 7px; background: linear-gradient(130deg, #f7fbff, #fff); }
.fm-metric > span { display: block; color: #708098; font-size: 9px; }
.fm-metric > strong { display: block; color: #24558b; font-size: 23px; font-weight: 650; letter-spacing: -.6px; line-height: 1.3; }
.fm-metric > small { display: block; color: #8290a3; font-size: 8px; }
.fm-chart-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; font-size: 9px; }
.fm-chart-title span { color: #8391a4; font-size: 8px; }
.fm-bar-row { display: grid; grid-template-columns: 45px 1fr 58px; gap: 10px; align-items: center; margin: 6px 0; font-size: 9px; }
.fm-bar-row > i { height: 8px; border-radius: 3px; background: #eff2f7; overflow: hidden; }
.fm-bar-row i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #328ac6, #9b83ca); }
.fm-bar-row strong { font-size: 9px; text-align: right; font-weight: 500; }
.fm-mails { display: grid; }
.fm-mail { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid #edf0f5; }
.fm-mail > i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef0f6; color: #7c88a0; font: 600 8px Inter, sans-serif; }
.fm-mail > div { flex: 1; min-width: 0; }
.fm-mail small { display: flex; color: #8090a5; font-size: 8px; }
.fm-mail time { margin-left: auto; font-size: 7px; }
.fm-mail b { display: block; font-size: 10px; color: #43536a; }
.fm-mail p { margin: 2px 0 0; font-size: 9px; color: #7e8ba0; }
.fm-process { display: flex; gap: 6px; align-items: center; padding: 8px 0; font-size: 8px; color: #25856f; }
.fm-process span { white-space: nowrap; background: #edf7f3; border-radius: 4px; padding: 4px 6px; }
.fm-process i { flex: 1; height: 1px; background: #cce6df; }
.fm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 15px; }
.fm-fields small { display: block; font-size: 7px; letter-spacing: .5px; color: #8b97a9; margin-bottom: 4px; }
.fm-fields b { display: block; font-size: 10px; color: #425571; font-weight: 500; }
.fm-sync { margin-top: 2px; display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #dbece7; border-radius: 7px; background: #f6fbf9; }
.fm-sync-icon { font-size: 20px; color: #2a947f; }
.fm-sync b, .fm-sync small { display: block; }
.fm-sync b { color: #397a69; font-size: 10px; }
.fm-sync small { color: #7f9b91; font-size: 8px; }
.fm-sync > span:last-child { margin-left: auto; color: #3a997c; }
.fm-terminal { flex: 1; padding: 13px; border-radius: 5px; color: #b3d4c6; background: #273a3e; font: 9px/1.5 Consolas, monospace; }
.fm-terminal > div:first-child { color: #d2e6dc; border-bottom: 1px solid #ffffff20; padding-bottom: 7px; font-size: 9px; }
.fm-terminal > div:first-child span { float: right; font-size: 7px; color: #7b9c90; }
.fm-terminal p { color: #c3d9d0; font: inherit; font-size: 9px; margin: 9px 0; }
.fm-terminal dl { display: grid; grid-template-columns: 105px 1fr; gap: 3px; margin: 0; }
.fm-terminal dt, .fm-terminal dd { margin: 0; font-weight: 400; font-size: 9px; }
.fm-terminal dt { color: #88aaa0; }
.fm-terminal-prompt { margin: 10px 0; }
.fm-terminal > small { color: #789a8f; font-size: 7px; }
.fm-subtabs { display: flex; gap: 16px; border-bottom: 1px solid #e7edf4; font-size: 8px; color: #8d98ac; }
.fm-subtabs span { padding: 6px 0; }
.fm-subtabs .is-current { color: #37699c; border-bottom: 2px solid #5986b5; }
.fm-equivalence { padding: 9px 10px; background: #eef7f4; border: 1px solid #d9eae4; border-radius: 6px; }
.fm-equivalence > div { display: flex; justify-content: space-between; gap: 5px; color: #38816b; font-size: 9px; }
.fm-equivalence > div span { font-size: 8px; }
.fm-equivalence p { font-size: 8px; color: #77998c; margin: 5px 0 0; }
.fm-green, .fm-fields b.fm-green { color: #36836b; }
.fm-checklist .fm-row { grid-template-columns: 1.5fr 1fr; }
.fm-checklist .fm-row b { font-size: 9px; font-weight: 550; }
.fm-checklist .fm-row small { display: block; color: #94a0b1; font-size: 7px; margin-top: 2px; }
.fm-test-summary .fm-metric { padding: 7px 10px; }
.fm-test-summary .fm-metric strong { font-size: 22px; }
@media (min-width: 1400px) {
  #resultados { max-width: 1350px; }
  #resultados .outcome-layout { gap: 65px; }
}
@media (max-width: 1000px) {
  #resultados .outcome-layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; }
  .fm-content { padding: 12px 11px 8px; gap: 8px; }
  .fm-heading strong { font-size: 11px; }
  .fm-heading .fm-badge { font-size: 7px; }
  .fm-row { font-size: 9px; }
}
@media (max-width: 800px) {
  #resultados .outcome-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  #resultados .transformation { max-width: 620px; width: 100%; margin: auto; }
  #resultados .outcome-copy { max-width: 620px; margin: auto; width: 100%; }
  .fm-heading strong { font-size: 13px; }
  .fm-row { font-size: 11px; }
}
@media (max-width: 480px) {
  #resultados .forge-salto { height: 420px; }
  #resultados .before-illustration { width: 95%; height: 315px; }
  #resultados .after-illustration { width: 96%; height: 315px; bottom: 12px; }
  .fm-windowbar { gap: 6px; padding: 0 9px; font-size: 8px; }
  .fm-windowbar > b { font-size: 7px; padding: 3px 5px; }
  .fm-heading strong { font-size: 11px; }
  .fm-content { gap: 8px; }
  .fm-row { font-size: 9px; }
  .fm-row > span { padding: 5px; }
  .fm-fields { gap: 9px; }
  .fm-fields b { font-size: 9px; }
  .fm-footer { font-size: 7px; min-height: 25px; }
  .fm-terminal dl { grid-template-columns: 85px 1fr; }
  .fm-terminal dt, .fm-terminal dd { font-size: 8px; }
  .fm-formula { padding: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #resultados .before-illustration, #resultados .after-illustration { transition: none; }
}

/* Match the reference: two comparison cards, without numbered steps. */
#resultados .outcome-copy > h3, #resultados .outcome-copy > p { display: none; }
#resultados #impact-flow { display: grid; gap: 12px; margin: 0; }
#resultados #impact-flow::before { display: none; }
.comparison-story-card {
  display: flex; align-items: flex-start; gap: 13px; width: 100%; padding: 22px 20px;
  background: #fff; border: 1px solid #d4e3f6; border-radius: 20px;
  text-align: left; font: 400 16px/1.55 Inter, system-ui, sans-serif;
  color: #263650; cursor: pointer; box-shadow: 0 9px 28px #20395e05;
}
.comparison-story-icon {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  background: #eef1f6; color: #91a0b6; border-radius: 9px; font-size: 15px;
}
.comparison-story-card small { display: block; color: #7e90ae; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 7px; }
.comparison-story-text { display: block; }
.comparison-story-card[data-compare-side=after] .comparison-story-icon { background: #e1f2fc; color: #008cd4; }
.comparison-story-card[data-compare-side=after] small { color: #0085cb; }
.comparison-story-card:hover, .comparison-story-card[aria-pressed=true] { border-color: #bfd9f5; }
.comparison-story-card:focus-visible { outline: 2px solid #0076be; outline-offset: 4px; }
@media (hover:hover) and (pointer:fine) { #resultados .state-controls { display: none; } }
@media (max-width: 480px) { .comparison-story-card { padding: 18px 16px; font-size: 15px; } }