body[data-method="STEAM"] .feedback-card strong { color: #173e4b; }
.profile-card > div { min-width: 0; width: 100%; }
.profile-card .profile-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 9px 0; }
.profile-card .profile-detail div { padding: 8px; border-radius: 9px; background: rgba(255, 255, 255, .68); }
.profile-card .profile-detail b { display: block; margin-bottom: 3px; color: #18536a; font-size: .69rem; }
.profile-card .profile-detail span { display: block; color: #426374; font-size: .7rem; line-height: 1.4; }
.profile-card small { color: #52766e; font-size: .65rem; }

@media (max-width: 650px) {
  .profile-card .profile-detail { grid-template-columns: 1fr; }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-shell {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 9px 5px;
    min-height: 0;
    padding: 145px 12px 58px;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-intro {
    top: 13px;
    right: 13px;
    left: 13px;
    max-width: none;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-intro h2 {
    max-width: 260px;
    font-size: 1.55rem;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-intro p {
    max-width: 305px;
    font-size: .72rem;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-lines,
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-info {
    display: none;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-node {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    min-width: 0;
    min-height: 102px;
    padding: 8px 2px;
    transform: none;
    align-content: start;
    border-radius: 11px;
    background: rgba(11, 45, 83, .45);
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-node.center {
    grid-column: 1 / -1;
    justify-self: center;
    width: 42%;
    min-height: 113px;
    margin-bottom: 3px;
    background: rgba(242, 190, 68, .1);
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-node .cosmos-orb {
    width: 39px;
    height: 39px;
    font-size: 1rem;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-node.center .cosmos-orb {
    width: 53px;
    height: 53px;
    font-size: 1.3rem;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-node strong {
    width: 100%;
    max-width: 100%;
    margin-top: 7px;
    font-size: .58rem;
    overflow-wrap: anywhere;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-node small {
    max-width: 96%;
    font-size: .52rem;
    overflow-wrap: anywhere;
  }
  body[data-method="STEAM"][data-route-mode="visual"] .cosmos-caption {
    right: 12px;
    bottom: 15px;
    left: 12px;
    align-items: end;
    font-size: .59rem;
  }

  body[data-method="ABPC"] .journey-banner { flex-wrap: wrap; }
  body[data-method="ABPC"] .journey-map {
    display: grid;
    gap: 10px;
    height: auto;
    min-height: 0;
    padding: 16px 9px;
    overflow: visible;
  }
  body[data-method="ABPC"] .journey-map:before {
    content: "";
    position: absolute;
    top: 35px;
    bottom: 30px;
    left: 38px;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(#30aa7c, #3186db, #f3a832, #9163cf, #1aa4bc);
  }
  body[data-method="ABPC"] .journey-lines { display: none; }
  body[data-method="ABPC"] .journey-stop,
  body[data-method="ABPC"] .journey-branch {
    position: relative;
    top: auto !important;
    left: auto !important;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: 9px;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 61px;
    padding: 7px;
    transform: none;
    border: 1px solid #e0eaf1;
    border-radius: 12px;
    background: #fff;
    text-align: left;
  }
  body[data-method="ABPC"] .journey-stop .stop-circle {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    border-width: 3px;
  }
  body[data-method="ABPC"] .journey-stop strong {
    margin: 0;
    overflow-wrap: anywhere;
  }
  body[data-method="ABPC"] .journey-stop small {
    max-width: none;
    margin: 0 0 0 5px;
  }
  body[data-method="ABPC"] .journey-branch {
    width: calc(100% - 22px);
    margin-left: 22px;
    border-style: dashed;
    background: #f7faff;
  }
  body[data-method="ABPC"] .journey-branch span {
    width: 37px;
    height: 37px;
  }
  body[data-method="ABPC"] .journey-branch small {
    max-width: none;
    font-size: .68rem;
  }
  body[data-method="AS"] .service-board-foot:after {
    content: "Desliza las columnas para ver las tres etapas.";
    margin-left: auto;
    color: #236577;
    font-weight: 800;
  }
}