/* =========================================================
   SOLUCIÓN · portada 3D, beneficios y gráfico de ahorro
   ========================================================= */

.solution-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.solution-title { margin: 18px 0 22px; }
.lead-strong { color: var(--color-text); font-weight: 600; }

/* Portada con perspectiva */
.cover-wrap { perspective: 1400px; }
.cover-3d {
  position: relative; transform: rotateY(14deg) rotateX(3deg); transform-style: preserve-3d;
  transition: transform .8s var(--ease-out); border-radius: var(--radius-md);
}
.cover-3d:hover { transform: rotateY(4deg) rotateX(1deg); }
.cover-3d img {
  border-radius: var(--radius-md);
  box-shadow: -30px 50px 90px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06);
}
.cover-3d:after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .25));
}
.cover-glow {
  position: absolute; inset: 10% -10% -10% 10%; z-index: -1; filter: blur(30px);
  background: radial-gradient(closest-side, rgba(var(--rgb-cta), .28), transparent);
}

/* Lista de beneficios */
.benefits { list-style: none; margin: 34px 0 40px; display: grid; gap: 4px; }
.benefits li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--color-line); font-size: 17px;
}
.benefits li svg { flex: none; margin-top: 3px; }

/* Gráfico de rangos de ahorro */
.chart-card { padding: 30px; margin-top: 80px; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.chart-head .kicker { margin-bottom: 10px; }
.chart-head h3 { font-size: 24px; letter-spacing: -.02em; }
.chart-head span { font-size: 13px; color: var(--color-text-faint); }
.chart-rows { display: grid; gap: 14px; }
.chart-row { display: grid; grid-template-columns: 200px 1fr 90px; gap: 18px; align-items: center; font-size: 14px; }
.chart-row-name { color: var(--color-text-muted); }
.chart-track { position: relative; height: 10px; border-radius: var(--radius-xs); background: rgba(var(--rgb-text), .06); }
.chart-track b {
  position: absolute; top: 0; bottom: 0; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, rgba(var(--rgb-cta), .35), var(--color-accent));
  transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-out);
}
.in .chart-track b { transform: scaleX(1); }
.chart-row-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 600; }
.chart-axis { display: grid; grid-template-columns: 200px 1fr 90px; gap: 18px; margin-top: 8px; font-size: 11px; color: var(--color-text-faint); }
.chart-axis div { display: flex; justify-content: space-between; }

@media (max-width: 1024px) {
  .solution-grid { grid-template-columns: 1fr; gap: 56px; }
  .cover-wrap { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .chart-row { grid-template-columns: 1fr 70px; gap: 8px 12px; }
  .chart-row-name { grid-column: 1 / -1; }
  .chart-track { grid-column: 1; }
  .chart-axis { display: none; }
}