/* Web Systems 3.1 · Página Soluciones
 * Este módulo se carga de forma condicional desde functions.php.
 */

/* Solutions index */
.goal-navigator { background: var(--paper); }
.goal-switcher { display: grid; grid-template-columns: .76fr 1.24fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow); }
.goal-tabs { display: grid; border-right: 1px solid var(--line); }
.goal-tabs button { min-height: 88px; display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 8px; padding: 0 24px; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; background: white; text-align: left; font-size: 13px; font-weight: 700; }
.goal-tabs button:last-child { border-bottom: 0; }
.goal-tabs button span { color: #a2a7af; font-size: 8px; }
.goal-tabs button.active { color: white; background: var(--ink); }
.goal-tabs button.active span { color: #7894ff; }
.goal-result { min-height: 352px; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; background: radial-gradient(circle at 100% 0, rgba(36,88,255,.1), transparent 45%); }
.goal-label { color: #969ca5; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.goal-result > i { width: 51px; height: 51px; display: grid; place-items: center; margin: 20px 0; border-radius: 13px; color: white; background: var(--blue); }
.goal-result h3 { margin: 0; font-size: clamp(31px, 3.3vw, 45px); line-height: 1.04; letter-spacing: -.045em; }
.goal-result > p { max-width: 650px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.goal-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; }
.goal-tags span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: #646b76; background: #f7f8fa; font-size: 8px; }
.goal-result .button { align-self: flex-start; }
.solution-catalog { background: white; }
.solution-catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.solution-catalog-card { padding: 35px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.catalog-card-head { display: flex; align-items: center; justify-content: space-between; }
.catalog-card-head > span { color: #a4a9b1; font-size: 8px; font-weight: 850; }
.catalog-card-head > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--blue); background: var(--blue-soft); }
.solution-catalog-card h3 { margin: 40px 0 15px; font-size: 24px; letter-spacing: -.035em; }
.solution-catalog-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.solution-catalog-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 25px 0 30px; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
.solution-catalog-card li { display: flex; align-items: center; gap: 7px; color: #5f6671; font-size: 9px; }
.solution-catalog-card li svg { color: var(--blue); }
.connected-stack { color: white; background: var(--ink); }
.connected-stack-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; align-items: center; }
.connected-stack-copy > p { margin: 23px 0 29px; color: #9fa7b4; font-size: 13px; line-height: 1.75; }
.stack-flow { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 14px; align-items: center; }
.stack-flow > span { min-height: 120px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 18px; border: 1px solid var(--line-dark); border-radius: 14px; background: #131720; text-align: center; }
.stack-flow > span > i { color: #829cff; }
.stack-flow b { font-size: 11px; }
.stack-flow small { color: #737c8a; font-size: 8px; }
.stack-flow > svg { color: #5f78d5; }

@media (max-width: 900px) {
  .goal-switcher { grid-template-columns: 1fr; }
  .goal-tabs { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--line); }
  .goal-tabs button { border-right: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .goal-tabs { grid-template-columns: 1fr; }
  .goal-tabs button { border-right: 0; }
  .goal-result { padding: 34px 25px; }
  .solution-catalog-grid { grid-template-columns: 1fr; }
  .solution-catalog-card ul { grid-template-columns: 1fr; }
  .stack-flow { grid-template-columns: 1fr; }
  .stack-flow > svg { transform: rotate(90deg); margin: auto; }
}