.clinical-evolution {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cddbd7;
  border-radius: 18px;
  background: #f7fbfa;
  box-shadow: 0 28px 70px rgba(7, 27, 24, .16);
  color: #102d3a;
}

.evolution-bar {
  min-height: 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: #0c2340;
  color: #d7e5e8;
  font-size: 11px;
}

.evolution-bar .app-wordmark { color: #fff; font-size: 15px; font-weight: 700; }
.evolution-bar b { justify-self: end; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #18b6c9; color: #071b2d; font-size: 10px; }
.evolution-content { padding: 22px; }
.evolution-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.evolution-heading small { color: #52707a; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.evolution-heading h3 { margin: 5px 0 0; color: #0c2340; font-size: clamp(18px, 2.2vw, 25px); }
.evolution-heading > span { padding: 7px 10px; border-radius: 999px; background: #dff5f3; color: #126b73; font-size: 10px; font-weight: 700; white-space: nowrap; }
.change-summary h4 { margin: 0 0 9px; color: #48636d; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.change-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.change-grid article { display: grid; gap: 4px; padding: 12px; border: 1px solid #dce8e5; border-radius: 10px; background: #fff; }
.change-grid span { color: #58717a; font-size: 10px; font-weight: 600; }
.change-grid strong { color: #0c2340; font-size: 17px; line-height: 1.1; }
.change-grid small { font-size: 10px; font-weight: 700; }
.trend-down { color: #12806f; }
.trend-up { color: #087ba4; }
.evolution-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; margin-top: 10px; }
.trend-panel { min-width: 0; padding: 14px; border: 1px solid #dce8e5; border-radius: 12px; background: #fff; }
.trend-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trend-panel header span { display: block; color: #0c2340; font-size: 12px; font-weight: 700; }
.trend-panel header small { color: #71868d; font-size: 9px; }
.trend-panel header strong { color: #157b83; font-size: 12px; white-space: nowrap; }
.trend-panel svg { display: block; width: 100%; height: auto; margin-top: 5px; overflow: visible; }
.grid-lines line { stroke: #dfeae8; stroke-width: 1; }
.area { fill: rgba(24, 182, 201, .1); }
.weight-line, .fat-line, .muscle-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.weight-line { stroke: #18a6b7; }
.weight-points circle { fill: #fff; stroke: #18a6b7; stroke-width: 3; }
.fat-line { stroke: #d39f43; }
.muscle-line { stroke: #18a6b7; }
.axis-labels text { fill: #667e86; font: 500 10px "DM Sans", sans-serif; text-anchor: middle; }
.axis-labels.compact text { font-size: 9px; }
.chart-legend { display: flex; gap: 16px; margin-top: 8px; color: #58717a; font-size: 9px; font-weight: 600; }
.chart-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.fat-key::before { background: #d39f43; }
.muscle-key::before { background: #18a6b7; }
.lab-trend { display: grid; grid-template-columns: .65fr 1fr 1.2fr; align-items: center; gap: 18px; margin-top: 10px; padding: 14px 16px; border: 1px solid #dce8e5; border-radius: 12px; background: #fff; }
.lab-trend > div:first-child { display: grid; }
.lab-trend > div:first-child small { color: #71868d; font-size: 9px; text-transform: uppercase; }
.lab-trend > div:first-child strong { color: #0c2340; font-size: 14px; }
.lab-values { display: flex; align-items: center; justify-content: center; gap: 12px; color: #58717a; font-size: 9px; white-space: nowrap; }
.lab-values span { display: grid; }
.lab-values b { color: #0c2340; font-size: 18px; }
.lab-values small { color: #71868d; }
.lab-values i { color: #18a6b7; font-size: 18px; font-style: normal; }
.lab-trend svg { display: block; width: 100%; height: 48px; }
.lab-trend svg path { fill: none; stroke: #18a6b7; stroke-width: 3; stroke-linecap: round; }
.lab-trend svg circle { fill: #fff; stroke: #18a6b7; stroke-width: 3; }
.clinical-decision { margin: 12px 0 0; color: #536b74; font-size: 10px; font-weight: 600; text-align: right; }

/* Mobile header: the right-hand menu control remains high-contrast and explicit. */
@media (max-width: 1050px) {
  .menu { width: auto; min-width: 68px; height: 40px; padding: 0 10px; border: 1px solid #b8c8c3; border-radius: 6px; align-items: flex-end; }
  .menu::before { content: "Menú"; position: absolute; align-self: flex-start; color: #071b18; font: 700 13px/1 "DM Sans", sans-serif; }
  .menu span { width: 18px; background: #071b18; }
}

@media (max-width: 700px) {
  .v23-product { align-items: stretch; }
  .evolution-content { padding: 16px; }
  .evolution-bar { grid-template-columns: 1fr auto; padding: 10px 14px; }
  .evolution-bar b { display: none; }
  .demo-notice { justify-self: end; font-size: 10px; font-weight: 600; }
  .evolution-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .change-grid, .evolution-grid { grid-template-columns: 1fr; }
  .change-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .change-grid article { padding: 11px; }
  .trend-panel { padding: 12px 8px; }
  .trend-panel header { padding-inline: 4px; }
  .axis-labels text { font-size: 9px; }
  .lab-trend { grid-template-columns: 1fr; gap: 10px; }
  .lab-values { justify-content: flex-start; }
  .lab-trend svg { height: 42px; }
  .clinical-decision { text-align: left; }
}

@media (max-width: 390px) {
  .change-grid { grid-template-columns: 1fr; }
  .demo-notice { max-width: 145px; text-align: right; }
  .axis-labels text { font-size: 8px; }
}