/* =========================================================
   KONNECT — Soluciones (Fase 8, rediseño multipágina)
   Recorrido: apertura con cuatro portales que se expanden (firma) →
   selector fijo con realce por división → cuatro capítulos con la
   atmósfera oficial de cada submarca → herramientas (Perfilador beta,
   Exclusivo Evoluciona) → cierre con la regla de acceso.
========================================================= */

/* ---------- Apertura ---------- */
.sol-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--k-header-h) + 40px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(94, 237, 242, 0.18), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(177, 74, 227, 0.18), transparent 70%),
    var(--k-field);
  color: var(--k-on-dark);
}
.sol-hero__head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.sol-hero__title { margin-top: 16px; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 14ch; color: var(--k-on-dark); }
.sol-hero__lede { font-size: clamp(1.02rem, 1.2vw, 1.15rem); color: var(--k-on-dark-2); max-width: 46ch; }
.sol-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Portales: acordeón horizontal (flex-grow) */
.sol-portals { display: flex; gap: clamp(8px, 1vw, 14px); height: clamp(248px, 28vh, 286px); margin-top: clamp(28px, 3.5vw, 42px); }
.sol-portal { flex: 1 1 0; min-width: 0; transition: flex-grow 700ms var(--k-ease-out); }
.sol-portal a {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  height: 100%; padding: clamp(18px, 2vw, 28px);
  border-radius: var(--k-r-lg);
  border: 1px solid rgba(245, 247, 255, 0.16);
  color: #fff;
}
.sol-portal a::before { content: ""; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 900ms var(--k-ease-out); }
.sol-portal a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 9, 40, 0.76) 0%, rgba(8, 9, 40, 0.14) 58%, transparent 100%), radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--hue) 62%, transparent), transparent 72%); }
.sol-portal--pyme a::before { background-image: url("../../images/derived/fondo-pyme-full-768.jpg"); }
.sol-portal--hipotecario a::before { background-image: url("../../images/derived/fondo-hipotecario-full-768.jpg"); }
.sol-portal--automotriz a::before { background-image: url("../../images/derived/fondo-autos-full-768.jpg"); }
.sol-portal--seguros a::before { background-image: url("../../images/derived/fondo-seguros-full-768.jpg"); }
.sol-portal__lockup { position: absolute; top: 22px; left: 22px; width: min(220px, 74%); height: auto; opacity: 0; transform: translateY(-8px); transition: opacity 500ms var(--k-ease-out), transform 600ms var(--k-ease-out); }
.sol-portal__name { flex: none; font-family: var(--k-font-display); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 600; line-height: 1; }
.sol-portal__line { display: block; flex: none; width: 100%; height: 5.2rem; max-width: 36ch; overflow: hidden; font-size: 0.88rem; line-height: 1.45; color: rgba(245, 247, 255, 0.86); opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--k-ease-out), transform 600ms var(--k-ease-out); }
/* Estado expandido: puntero, foco o el primero por defecto */
.sol-portals:not(:hover):not(:focus-within) .sol-portal:first-child,
.sol-portal:hover, .sol-portal:focus-within { flex-grow: 2.6; }
.sol-portals:not(:hover):not(:focus-within) .sol-portal:first-child :is(.sol-portal__lockup, .sol-portal__line),
.sol-portal:hover :is(.sol-portal__lockup, .sol-portal__line),
.sol-portal:focus-within :is(.sol-portal__lockup, .sol-portal__line) { opacity: 1; transform: none; }
.sol-portal:hover a::before, .sol-portal:focus-within a::before { transform: scale(1); }
.sol-portal a:focus-visible { outline: 3px solid var(--k-aqua); outline-offset: 3px; }

/* ---------- Selector fijo ---------- */
.sol-tabs {
  position: sticky; top: calc(var(--k-header-h) + 8px); z-index: 20;
  margin-top: -32px; pointer-events: none;
}
.sol-tabs__nav {
  display: flex; gap: 6px; width: fit-content; max-width: calc(100% - 2 * var(--k-gutter));
  padding: 6px; border-radius: 999px;
  background: rgba(13, 14, 84, 0.78); border: 1px solid rgba(245, 247, 255, 0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -20px rgba(5, 6, 40, 0.8);
  pointer-events: auto; overflow-x: auto; scrollbar-width: none;
}
.sol-tabs__nav::-webkit-scrollbar { display: none; }
.sol-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700; color: var(--k-on-dark-2);
  transition: background-color var(--k-dur-state) var(--k-ease-out), color var(--k-dur-state) var(--k-ease-out);
}
.sol-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 0 var(--hue); transition: box-shadow var(--k-dur-state) var(--k-ease-out); }
.sol-tab:hover { color: var(--k-on-dark); }
.sol-tab.is-active { color: #fff; background: color-mix(in srgb, var(--hue) 26%, #0D0E54); box-shadow: inset 0 0 0 1px var(--hue); }
.sol-tab.is-active::before { box-shadow: 0 0 10px 2px var(--hue); }

/* ---------- Capítulos ---------- */
.sol-chapter {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100vh, 920px);
  display: flex; align-items: center;
  padding: clamp(96px, 11vw, 160px) 0;
  color: var(--k-on-dark);
  scroll-margin-top: calc(var(--k-header-h) + 60px);
}
.sol-chapter__bg { position: absolute; inset: -8% 0; z-index: -2; background-size: cover; background-position: center; }
.sol-chapter::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 0%, rgba(14, 16, 82, 0.2) 42%, rgba(14, 16, 82, 0.74) 70%); }
.sol-chapter--flip::after { background: linear-gradient(270deg, transparent 0%, rgba(14, 16, 82, 0.2) 42%, rgba(14, 16, 82, 0.74) 70%); }
/* El color de cada fondo oficial vive a la derecha: se refleja cuando la marca va a la izquierda */
.sol-chapter:not(.sol-chapter--flip) .sol-chapter__bg { scale: -1 1; }
.sol-chapter__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 20% 50%, color-mix(in srgb, var(--hue) 30%, transparent), transparent 70%); }
.sol-chapter--pyme .sol-chapter__bg { background-image: url("../../images/derived/fondo-pyme-full-1280.jpg"); }
.sol-chapter--hipotecario .sol-chapter__bg { background-image: url("../../images/backgrounds/fondo-hipotecario-full.jpg"); }
.sol-chapter--automotriz .sol-chapter__bg { background-image: url("../../images/backgrounds/fondo-autos-full.jpg"); }
.sol-chapter--seguros .sol-chapter__bg { background-image: url("../../images/backgrounds/fondo-seguros-full.jpg"); }
.sol-chapter--pyme { --hue: var(--k-pyme); }
.sol-chapter--hipotecario { --hue: var(--k-hipotecario); }
.sol-chapter--automotriz { --hue: var(--k-automotriz); }
.sol-chapter--seguros { --hue: var(--k-seguros); }
.sol-chapter .k-tone { color: var(--hue); }
.sol-chapter--hipotecario .k-tone { color: #D9A2F5; }
.sol-chapter--seguros .k-tone { color: #FF9A88; }
.sol-chapter__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.sol-chapter--flip .sol-chapter__brand { order: 2; }
.sol-chapter__brand { position: relative; display: grid; place-items: center; min-height: 280px; }
.sol-chapter__lockup { position: relative; width: min(90%, 440px); height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5)); }
.sol-chapter .k-h2 { margin-top: 0; max-width: 16ch; color: var(--k-on-dark); }
.sol-chapter__lede { margin-top: 18px; max-width: 50ch; font-size: 1.1rem; color: var(--k-on-dark-2); }
.sol-features { display: grid; gap: 0; margin: 28px 0 22px; border-top: 1px solid rgba(245, 247, 255, 0.16); }
.sol-features li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid rgba(245, 247, 255, 0.16); color: var(--k-on-dark); }
.sol-features li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 14px; height: 2px; background: var(--hue); border-radius: 2px; }
.sol-plan { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.92rem; font-weight: 600; color: var(--k-on-dark); max-width: 58ch; }
.sol-plan--in::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k-aqua); box-shadow: 0 0 12px var(--k-aqua); }
.sol-chapter__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Parallax del fondo ligado a la vista (mejora progresiva) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sol-chapter__bg { animation: sol-bg-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes sol-bg-drift { from { transform: translateY(-5%) scale(1.04); } to { transform: translateY(5%) scale(1.04); } }

/* ---------- Herramientas ---------- */
.sol-tools { padding: var(--k-section) 0; }
.sol-tools__head .k-h2 { margin-top: 16px; max-width: 22ch; }
.sol-profiler {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(28px, 4vw, 56px);
  border-radius: var(--k-r-xl);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(177, 74, 227, 0.4), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(94, 237, 242, 0.2), transparent 60%),
    var(--k-deep);
  border: 1px solid var(--k-card-line);
}
.sol-profiler__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-profiler h3 { margin-top: 18px; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; color: var(--k-on-light); }
.sol-profiler__copy > p:not(.sol-profiler__badges) { margin-top: 18px; max-width: 50ch; color: var(--k-on-light-2); font-size: 1.05rem; }
.sol-profiler__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sol-profiler__visual { position: relative; }
.sol-profiler__icon { position: absolute; right: -10px; top: -90px; width: clamp(130px, 14vw, 200px); height: auto; filter: drop-shadow(0 20px 40px rgba(5, 6, 40, 0.6)); }
.sol-profiler__list { display: grid; gap: 10px; }
.sol-profiler__list li { padding: 14px 16px 14px 44px; position: relative; border-radius: var(--k-r-md); background: rgba(245, 247, 255, 0.06); border: 1px solid rgba(245, 247, 255, 0.1); color: var(--k-on-light-2); font-size: 0.95rem; }
.sol-profiler__list li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--k-aqua); }
@media (prefers-reduced-motion: no-preference) {
  .sol-profiler__icon { animation: sol-float 7s ease-in-out infinite alternate; }
}
@keyframes sol-float { from { translate: 0 -6px; rotate: -3deg; } to { translate: 0 8px; rotate: 3deg; } }

.sol-support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(16px, 2vw, 24px); }
.sol-support__item {
  position: relative; overflow: hidden;
  display: grid; align-content: end; gap: 10px; min-height: 280px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--k-r-lg); background: var(--k-card); border: 1px solid var(--k-card-line);
}
.sol-support__item img { position: absolute; top: 18px; right: 18px; width: 96px; height: auto; transition: transform 600ms var(--k-ease-out); }
.sol-support__item:hover img { transform: translateY(-6px) rotate(-6deg); }
.sol-support__item h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; }
.sol-support__item p { color: var(--k-on-light-2); }
.sol-support__item a { color: var(--k-aqua); font-weight: 700; }

/* ---------- Cierre ---------- */
.sol-final {
  position: relative; padding: clamp(104px, 13vw, 200px) 0; text-align: center;
  background:
    radial-gradient(50% 70% at 50% 110%, rgba(94, 237, 242, 0.28), transparent 70%),
    radial-gradient(35% 50% at 0% 0%, rgba(125, 227, 74, 0.12), transparent 70%),
    radial-gradient(35% 50% at 100% 0%, rgba(242, 105, 83, 0.12), transparent 70%),
    var(--k-field);
  color: var(--k-on-dark);
}
.sol-final__inner { display: flex; flex-direction: column; align-items: center; }
.sol-final__title { margin-top: 18px; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.04; max-width: 18ch; color: var(--k-on-dark); }
.sol-final__inner > p:not(.k-kicker) { margin: 26px 0 36px; max-width: 62ch; font-size: 1.08rem; color: var(--k-on-dark-2); }
.sol-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .sol-hero__head { grid-template-columns: 1fr; }
  .sol-portals { flex-direction: column; height: auto; }
  .sol-portal, .sol-portal:hover, .sol-portal:focus-within,
  .sol-portals:not(:hover):not(:focus-within) .sol-portal:first-child { flex: none; }
  .sol-portal a { min-height: 0; justify-content: flex-start; gap: 10px; padding-top: 22px; }
  .sol-portal__lockup, .sol-portal__line { opacity: 1; transform: none; }
  .sol-portal__line { height: auto; overflow: visible; }
  .sol-portal__lockup { position: static; width: min(200px, 62%); margin-bottom: 6px; }
  .sol-chapter { min-height: 0; }
  .sol-chapter__grid { grid-template-columns: 1fr; }
  .sol-chapter--flip .sol-chapter__brand { order: 0; }
  .sol-chapter__brand { min-height: 200px; }
  .sol-chapter::after, .sol-chapter--flip::after { background: linear-gradient(0deg, rgba(14, 16, 82, 0.9) 0%, rgba(14, 16, 82, 0.7) 55%, rgba(14, 16, 82, 0.08) 100%); }
  .sol-chapter:not(.sol-chapter--flip) .sol-chapter__bg { scale: 1 1; }
  .sol-chapter__bg { background-position: right top; }
  .sol-chapter--pyme .sol-chapter__bg { background-image: url("../../images/derived/fondo-pyme-full-768.jpg"); }
  .sol-chapter--hipotecario .sol-chapter__bg { background-image: url("../../images/derived/fondo-hipotecario-full-768.jpg"); }
  .sol-chapter--automotriz .sol-chapter__bg { background-image: url("../../images/derived/fondo-autos-full-768.jpg"); }
  .sol-chapter--seguros .sol-chapter__bg { background-image: url("../../images/derived/fondo-seguros-full-768.jpg"); }
  .sol-profiler { grid-template-columns: 1fr; }
  .sol-profiler__icon { top: -40px; width: 110px; }
  .sol-profiler__visual { padding-top: 40px; }
  .sol-support { grid-template-columns: 1fr; }
  .sol-support__item { min-height: 220px; }
}
@media (max-width: 640px) {
  .sol-hero__actions, .sol-chapter__actions, .sol-profiler__actions, .sol-final__actions { flex-direction: column; align-items: stretch; }
  .sol-tabs__nav { max-width: calc(100% - 24px); }
  .sol-tab { padding: 0 14px; font-size: 0.84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-portal, .sol-portal a::before, .sol-portal__lockup, .sol-portal__line, .sol-support__item img { transition: none; }
}