.solutionsPage {
  --s-line: rgb(115 142 207/0.3);
  --s-panel: rgb(2 10 32/0.62);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #02081b;
  color: #fff;
}
.solutionsPage:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 9%, rgb(80 25 213/0.26), transparent 25%),
    radial-gradient(ellipse at 18% 40%, rgb(29 67 164/0.18), transparent 30%),
    radial-gradient(ellipse at 82% 68%, rgb(171 26 177/0.13), transparent 28%);
  pointer-events: none;
}
.solutionsPage mark {
  background: none;
  color: #ffd400;
}
.hero {
  position: relative;
  min-height: 760px;
  padding: 100px var(--container-gutter) 62px;
  background:
    radial-gradient(circle at 53% 39%, rgb(111 20 222/0.43), transparent 33%),
    linear-gradient(110deg, #02091d 0%, #070a2d 55%, #02081b 100%);
}
.hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 170px;
  background: linear-gradient(transparent, #02091c);
  pointer-events: none;
}
.network {
  position: absolute;
  inset: 25px 0 0;
  background: url("../../hero/connection-network.svg") center/cover no-repeat;
  opacity: 0.42;
  mix-blend-mode: screen;
}
.heroGrid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 30% 42% 28%;
  max-width: 1380px;
  min-height: 590px;
  margin: auto;
}
.heroCopy {
  z-index: 2;
  padding: 42px 0 0;
}
.eyebrow {
  color: #ff3bd5;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.heroCopy h1 {
  margin: 20px 0 24px;
  font-size: clamp(2.6rem, 3.65vw, 3.65rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.heroCopy p {
  max-width: 390px;
  margin: 0 0 16px;
  color: #e1e6f3;
  font-size: 0.92rem;
  line-height: 1.58;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
}
.actions a {
  border-radius: 999px;
  padding: 13px 21px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.primary {
  border: 1px solid #ca48ff;
  background: linear-gradient(100deg, #7b1aaf, #9a28d7);
  box-shadow: 0 0 24px rgb(192 43 255/0.2);
}
.secondary {
  border: 1px solid #5a6680;
  background: rgb(2 8 25/0.38);
}
.heroVisual {
  position: relative;
  z-index: 0;
  height: 680px;
  margin: -65px -105px -70px;
}
.heroVisual:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #03091d 0,
      transparent 17%,
      transparent 80%,
      #03091c 100%
    ),
    linear-gradient(0deg, #03091c, transparent 24%);
  pointer-events: none;
}
.heroVisual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.04);
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8%,
    #000 88%,
    transparent 100%
  );
}
.heroSolutions {
  align-self: center;
  margin: 0;
  padding: 16px 0 0 22px;
}
.heroSolutions li {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.heroSolutions svg {
  width: 62px;
  height: 62px;
  padding: 13px;
  color: #ff3bd5;
  border: 1px solid rgb(210 61 255/0.62);
  filter: drop-shadow(0 0 9px rgb(199 48 255/0.22));
  clip-path: polygon(
    25% 0,
    75% 0,
    100% 25%,
    100% 75%,
    75% 100%,
    25% 100%,
    0 75%,
    0 25%
  );
}
.heroSolutions h2 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 600;
}
.heroSolutions p {
  margin: 0;
  color: #d9deec;
  font-size: 0.72rem;
  line-height: 1.38;
}
.main {
  position: relative;
  z-index: 1;
  margin-top: -58px;
  padding: 0 var(--container-gutter) 28px;
  background:
    linear-gradient(to bottom, rgb(2 9 28/0.15), rgb(2 8 26/0.38) 45%, #02081a),
    url("../../home/home-fondo-1.webp?v=20261002-1") center/cover fixed;
}
.panel {
  max-width: 1380px;
  margin: 0 auto 14px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: linear-gradient(120deg, rgb(5 15 42/0.7), rgb(1 8 28/0.48));
  box-shadow:
    inset 0 0 70px rgb(27 60 137/0.09),
    0 14px 42px rgb(0 0 0/0.14);
  backdrop-filter: blur(3px);
}
.panelTitle {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.025em;
}
.listen {
  display: grid;
  grid-template-columns: 30% 70%;
  padding: 34px 32px;
}
.intro {
  padding-right: 38px;
  border-right: 1px solid var(--s-line);
}
.intro p,
.uncertaintyCopy p {
  margin: 15px 0;
  color: #d9deea;
  font-size: 0.79rem;
  line-height: 1.5;
}
.intro strong {
  display: block;
  font-size: 0.76rem;
  line-height: 1.45;
}
.listenGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.listenGrid article,
.categoryGrid article {
  padding: 10px 28px;
  text-align: center;
  border-right: 1px solid var(--s-line);
}
.listenGrid article:last-child,
.categoryGrid article:last-child {
  border: 0;
}
.listenGrid svg {
  width: 58px;
  height: 58px;
  margin: auto;
  color: #ff3bd5;
}
.listenGrid h3,
.categoryGrid h3,
.processGrid h3,
.flow h3,
.differenceGrid h3 {
  margin: 10px 0 6px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.22;
}
.listenGrid p,
.categoryGrid p,
.processGrid p,
.differenceGrid p {
  margin: 0;
  color: #ccd4e5;
  font-size: 0.72rem;
  line-height: 1.43;
}
.lighthouse {
  position: relative;
  display: grid;
  height: 390px;
  max-width: 1500px;
  margin: -18px auto -18px;
  place-items: center;
  background:
    linear-gradient(
      to bottom,
      #02091c 0,
      transparent 22%,
      transparent 72%,
      #03091c 100%
    ),
    linear-gradient(
      90deg,
      #02091c 0,
      transparent 12%,
      transparent 88%,
      #02091c 100%
    ),
    url("../../solutions/lighthouse.webp?v=20261002-1") center 64% / cover
      no-repeat;
  text-align: center;
}
.lighthouse p {
  margin: 55px 0 0;
  font-size: 1.7rem;
  line-height: 1.28;
  text-shadow: 0 3px 16px #000;
}
.lighthouse span {
  display: block;
  width: 68px;
  height: 2px;
  margin: 15px auto;
  background: #e63aff;
  box-shadow: 0 0 10px #dc3aff;
}
.categories {
  padding: 18px 18px 22px;
  text-align: center;
}
.categories > h2,
.process > h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
}
.subtitle {
  margin: 5px 0 18px;
  color: #d8deea;
  font-size: 0.72rem;
}
.categoryGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.categoryGrid article {
  padding: 9px 18px 12px;
}
.categoryGrid svg {
  width: 39px;
  height: 39px;
  margin: auto;
  color: #ff3bd5;
}
.process {
  padding: 16px 28px 25px;
  text-align: center;
}
.processGrid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 15px;
}
.processGrid:before {
  content: "";
  position: absolute;
  top: 13px;
  right: 4%;
  left: 4%;
  border-top: 1px dashed #ee3cf3;
  filter: drop-shadow(0 0 4px #d839e9);
}
.processGrid article {
  z-index: 1;
  padding: 0 28px;
}
.processGrid span {
  display: grid;
  width: 29px;
  height: 29px;
  margin: 0 auto 6px;
  border: 1px solid #e46aff;
  border-radius: 50%;
  place-items: center;
  background: #7827b3;
  box-shadow: 0 0 10px rgb(208 61 255/0.28);
  font-size: 0.68rem;
}
.processGrid svg {
  width: 33px;
  height: 33px;
  margin: auto;
  color: #ff3bd5;
}
.uncertainty {
  display: grid;
  grid-template-columns: 27% 73%;
  padding: 26px 30px;
}
.uncertaintyCopy {
  padding-right: 30px;
  border-right: 1px solid var(--s-line);
}
.flow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  padding-left: 15px;
}
.flow article {
  position: relative;
  padding: 8px 5px;
  text-align: center;
}
.flow svg {
  width: 48px;
  height: 48px;
  margin: auto;
  color: #ff3bd5;
}
.flow b {
  position: absolute;
  top: 25px;
  right: -5px;
  font-size: 1.05rem;
}
.featuredFlow svg {
  width: 72px;
  height: 72px;
  padding: 13px;
  border: 1px solid #ed58ff;
  border-radius: 10px;
  box-shadow:
    0 0 18px rgb(213 46 255/0.48),
    inset 0 0 12px rgb(108 48 255/0.2);
}
.featuredFlow h3 {
  color: #fff;
}
.capabilities {
  display: grid;
  grid-template-columns: 21% 79%;
  padding: 20px 28px;
}
.capabilities > .panelTitle {
  padding: 12px 34px 0 0;
  border-right: 1px solid var(--s-line);
}
.capabilityGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.capabilityGrid div {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-right: 1px solid var(--s-line);
  border-bottom: 1px solid var(--s-line);
  color: #dce2ef;
  font-size: 0.72rem;
}
.capabilityGrid svg {
  width: 27px;
  height: 27px;
  flex: none;
  color: #ff3bd5;
}
.difference {
  display: grid;
  grid-template-columns: 20% 51% 29%;
  min-height: 180px;
  padding-left: 28px;
  overflow: hidden;
}
.difference > .panelTitle {
  padding-top: 28px;
}
.differenceGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.differenceGrid article {
  padding: 24px 20px;
  border-left: 1px solid var(--s-line);
}
.differenceGrid svg {
  width: 38px;
  height: 38px;
  color: #ff3bd5;
}
.differenceImage {
  position: relative;
  min-height: 180px;
}
.differenceImage:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #030b22, transparent 45%),
    linear-gradient(0deg, #03091c, transparent 38%);
}
.differenceImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 60%;
}
.faq {
  display: grid;
  grid-template-columns: 19% 61% 20%;
  min-height: 158px;
  padding: 18px 25px;
}
.faq > div:first-child a,
.faq aside a {
  color: #ff45d4;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}
.faqGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 0 20px;
  border-right: 1px solid var(--s-line);
  border-left: 1px solid var(--s-line);
}
.faqGrid details {
  padding: 8px 12px;
  border: 1px solid rgb(96 123 185/0.25);
  border-radius: 7px;
  background: rgb(7 18 45/0.8);
  font-size: 0.68rem;
}
.faqGrid summary {
  cursor: pointer;
}
.faqGrid p {
  margin: 7px 0 0;
  color: #cfd6e6;
  line-height: 1.4;
}
.faq aside {
  padding: 10px 20px;
}
.faq aside svg {
  width: 44px;
  margin-right: 12px;
  float: left;
  color: #ff3bd5;
}
.faq aside p {
  margin: 0 0 13px;
  font-size: 0.75rem;
}
.faq aside small {
  color: #c3cadc;
}
.solutionsPage > .php-site-footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
}
@media (max-width: 62rem) {
  .hero {
    min-height: auto;
  }
  .heroGrid {
    grid-template-columns: 40% 60%;
  }
  .heroVisual {
    height: 620px;
  }
  .heroSolutions {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .listen,
  .uncertainty,
  .capabilities,
  .difference,
  .faq {
    grid-template-columns: 1fr;
  }
  .intro,
  .uncertaintyCopy,
  .capabilities > .panelTitle {
    margin-bottom: 20px;
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid var(--s-line);
  }
  .categoryGrid {
    grid-template-columns: repeat(4, 1fr);
  }
  .processGrid {
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
  .processGrid:before {
    display: none;
  }
  .differenceImage {
    height: 230px;
  }
  .faqGrid {
    padding: 18px 0;
    border: 0;
  }
  .lighthouse {
    height: 340px;
  }
}
@media (max-width: 47.9375rem) {
  .hero {
    padding: 88px 20px 70px;
  }
  .heroGrid {
    display: flex;
    flex-direction: column;
  }
  .heroCopy {
    order: 1;
    padding-top: 18px;
  }
  .heroCopy h1 {
    font-size: 2.65rem;
  }
  .heroVisual {
    order: 2;
    height: 540px;
    margin: -45px -85px -85px;
  }
  .heroSolutions {
    order: 3;
    display: block;
  }
  .main {
    padding-inline: 12px;
  }
  .listen {
    display: block;
  }
  .listenGrid,
  .categoryGrid,
  .processGrid,
  .flow,
  .capabilityGrid,
  .differenceGrid,
  .faqGrid {
    grid-template-columns: 1fr 1fr;
  }
  .listenGrid article,
  .categoryGrid article {
    padding: 18px 10px;
    border: 0;
    border-bottom: 1px solid var(--s-line);
  }
  .lighthouse {
    height: 300px;
  }
  .lighthouse p {
    font-size: 1.25rem;
  }
  .flow article {
    padding: 12px 4px;
  }
  .flow b {
    display: none;
  }
  .capabilityGrid div {
    border-right: 0;
  }
  .difference {
    padding: 0 18px 18px;
  }
  .differenceGrid article {
    border: 0;
    border-bottom: 1px solid var(--s-line);
  }
  .faq {
    padding: 20px;
  }
  .faq aside {
    padding: 20px 0;
  }
}
@media (max-width: 28rem) {
  .heroCopy h1 {
    font-size: 2.25rem;
  }
  .heroVisual {
    height: 450px;
  }
  .listenGrid,
  .categoryGrid,
  .processGrid,
  .flow,
  .capabilityGrid,
  .differenceGrid,
  .faqGrid {
    grid-template-columns: 1fr;
  }
  .panelTitle {
    font-size: 1.45rem;
  }
}

/* Fondo ambiental exclusivo de Soluciones. */
.solutionsPage {
  --s-line: rgb(137 116 255/0.42);
  --s-panel: rgb(2 8 31/0.24);
  background-color: #01102b;
  background-image:
    linear-gradient(rgb(0 3 11/0.52), rgb(0 3 11/0.52)),
    url("../../solutions/fondosoluciones2.webp?v=20261002-1");
  background-position:
    center,
    right bottom;
  background-size:
    100% 100%,
    auto clamp(40rem, 48vw, 56rem);
  background-repeat: no-repeat;
}
.solutionsPage:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../../solutions/solutions-background-v4.webp?v=20261002-1")
    center top/100% auto no-repeat;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(66.667vw - clamp(10rem, 14vw, 16rem)),
    transparent 66.667vw
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(66.667vw - clamp(10rem, 14vw, 16rem)),
    transparent 66.667vw
  );
  pointer-events: none;
}
.hero {
  background: transparent;
}
.hero:after {
  content: none;
}
.network {
  opacity: 0.14;
}
.main {
  background: transparent;
}
.panel {
  border-color: var(--s-line);
  background: linear-gradient(120deg, rgb(5 15 52/0.24), rgb(1 7 29/0.12));
  box-shadow:
    inset 0 0 70px rgb(52 42 172/0.06),
    0 14px 42px rgb(0 0 0/0.1);
  backdrop-filter: none;
}
.lighthouse {
  background:
    linear-gradient(
      to bottom,
      rgb(2 7 25/0.22),
      transparent 28%,
      transparent 72%,
      rgb(2 7 25/0.3)
    ),
    linear-gradient(
      90deg,
      #020719 0,
      transparent 15%,
      transparent 85%,
      #020719 100%
    ),
    url("../../solutions/lighthouse.webp?v=20261002-1") center 64% / cover
      no-repeat;
}
.faqGrid details {
  background: rgb(7 18 45/0.34);
}
@media (max-width: 62rem) {
  .solutionsPage {
    background-color: #01102b;
  }
}

.heroVisual img {
  content: url("../../hero/robot_futurista3.png");
  object-fit: contain;
  object-position: center bottom;

  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 78%,
    rgb(0 0 0 / 0.92) 84%,
    rgb(0 0 0 / 0.68) 90%,
    rgb(0 0 0 / 0.34) 96%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 78%,
    rgb(0 0 0 / 0.92) 84%,
    rgb(0 0 0 / 0.68) 90%,
    rgb(0 0 0 / 0.34) 96%,
    transparent 100%
  );

  transform: none;
}

.heroVisual:after {
  content: none;
}
.heroSolutions li {
  position: relative;
}
.heroSolutions li:before {
  content: none;
}
.heroSolutions svg {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  justify-self: center;
  padding: 3px;
  border: 0;
  clip-path: none;
  filter: drop-shadow(0 0 7px rgb(199 48 255/0.35));
}
.heroSolutions li > div {
  grid-column: 2;
  grid-row: 1;
}
@media (min-width: 62.0625rem) {
  .heroSolutions {
    padding-inline-start: clamp(3.75rem, 4.5vw, 5.75rem);
  }
}
.panel.listen {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(3.75rem, 4vw, 5rem) 38px 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.panel.listen:before {
  content: none;
}
.listenActions {
  position: relative;
  z-index: 1;
  margin: 0 0 42px;
}
.listenOverview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 28% 32%;
  align-items: start;
  margin-bottom: 32px;
}
.listenOverview .intro {
  padding: 8px 34px 8px 8px;
  border: 0;
}
.listenOverview .introBody {
  padding: 5px 0 2px 34px;
  border-left: 2px solid #e83cdb;
}
.listenOverview .introBody p {
  margin: 0 0 17px;
  color: #d9deea;
  font-size: 0.79rem;
  line-height: 1.5;
}
.listenOverview .introBody strong {
  display: block;
  font-size: 0.76rem;
  line-height: 1.45;
}
.listen .listenGrid {
  position: relative;
  z-index: 1;
  padding: 28px 18px 24px;
  border: 1px solid rgb(137 116 255/0.38);
  border-radius: 12px;
  background: linear-gradient(120deg, rgb(5 15 42/0.62), rgb(1 8 28/0.48));
  box-shadow:
    inset 0 0 70px rgb(84 39 169/0.12),
    0 0 22px rgb(195 43 255/0.08);
}
.listen .listenGrid:after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: -1px;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e142ff 50%, transparent);
  box-shadow: 0 0 8px #d83cff;
  pointer-events: none;
}
.listen .listenGrid article {
  padding-block: 12px;
}
@media (max-width: 62rem) {
  .listenOverview {
    grid-template-columns: 40% 60%;
  }
  .listen .listenGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 47.9375rem) {
  .listen {
    padding: 24px 18px;
  }
  .listenActions {
    margin-bottom: 28px;
  }
  .listenOverview {
    display: block;
  }
  .listenOverview .intro {
    padding: 0 0 18px;
  }
  .listenOverview .introBody {
    padding: 0 0 0 18px;
  }
  .listen .listenGrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 28rem) {
  .listen .listenGrid {
    grid-template-columns: 1fr;
  }
}
.valueStatement {
  display: grid;
  min-height: 180px;
  place-content: center;
  padding: 28px 20px;
  text-align: center;
}
.valueStatement p {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1.28;
  text-shadow: 0 3px 16px #000;
}
.valueStatement span {
  display: block;
  width: 68px;
  height: 2px;
  margin: 15px auto 0;
  background: #e63aff;
  box-shadow: 0 0 10px #dc3aff;
}

/* El hero de Soluciones replica la jerarquía responsive aprobada del Home. */
@media (max-width: 79.9375rem) {
  .heroSolutions {
    display: none;
  }
  .heroGrid {
    min-height: auto;
  }
  .heroVisual {
    height: auto;
    margin: 0;
    overflow: hidden;
  }
  .heroVisual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center top;
    transform: none;
  }
}
@media (min-width: 64rem) and (max-width: 79.9375rem) {
  .heroGrid {
    display: grid;
    grid-template-columns: minmax(20rem, 0.95fr) minmax(22rem, 1.05fr);
    align-items: center;
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
  }
  .heroCopy {
    max-width: 390px;
  }
  .heroVisual {
    width: 100%;
    height: 100%;
    max-height: none;
    align-self: stretch;
  }
  .heroVisual img {
    height: 100%;
    object-position: center bottom;
  }
}
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .heroGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .heroCopy {
    max-width: 43rem;
  }
  .heroVisual {
    width: min(48vw, 25rem);
    max-height: 26.875rem;
    margin: 1rem auto 0;
  }
  .heroVisual img {
    width: 100%;
    object-position: center top;
  }
}
@media (max-width: 47.9375rem) {
  .heroGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .heroVisual {
    width: min(82vw, 20.625rem);
    height: auto;
    margin: 1.125rem auto 0;
  }
}
@media (min-width: 80rem) {
  .heroVisual {
    height: clamp(39rem, 44vw, 42.5rem);
    overflow: visible;
  }
  .heroVisual img {
    mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
    transform: translateY(clamp(1.25rem, 2vw, 2rem)) scale(0.96);
  }
}
@media (min-width: 64rem) {
  .heroCopy {
    align-self: center;
    padding-top: 0;
  }
}
.differenceImage img {
  object-fit: cover;
  object-position: 78% 58%;
}

/* Fondo narrativo suministrado para Soluciones, fundido con el lienzo desde arriba. */
.solutionsPage:after {
  content: none;
}
.main {
  position: relative;
  z-index: 1;
}
.categories,
.process,
.difference {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.categories {
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}
.process {
  margin-bottom: clamp(2rem, 4vw, 4rem);
  padding: clamp(2rem, 3vw, 3rem) 0;
  border-top: 1px solid rgb(137 116 255/0.2);
  border-bottom: 1px solid rgb(137 116 255/0.2);
  border-radius: 0;
}
.difference {
  margin-bottom: clamp(3rem, 7vw, 7rem);
  padding-block: clamp(2rem, 4vw, 4rem);
  border-radius: 0;
}
.capabilities {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  background: linear-gradient(120deg, rgb(4 12 39/0.72), rgb(1 7 29/0.56));
  backdrop-filter: blur(2px);
}
.faq {
  background: linear-gradient(120deg, rgb(4 12 39/0.74), rgb(1 7 29/0.58));
  backdrop-filter: blur(2px);
}
@media (min-width: 62.0625rem) {
  .processGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .processGrid article {
    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
  }
  .difference {
    grid-template-columns: 24% 76%;
    min-height: 20rem;
    padding-left: 0;
  }
  .difference > .panelTitle {
    padding: 2.5rem 2rem 0;
  }
  .differenceGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: start;
  }
  .differenceGrid article {
    min-height: 13rem;
    padding: 2.5rem 1.5rem;
  }
}
@media (max-width: 62rem) {
  .categories,
  .process,
  .difference {
    padding-inline: 1rem;
  }
}

/* Composición abierta del body: el paisaje actúa como un único lienzo. */
.listen .listenGrid {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.listen .listenGrid:after {
  content: none;
}
.listenGrid article,
.categoryGrid article {
  border-color: rgb(137 116 255/0.16);
}
.categories {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.process {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.processGrid:before {
  border-top-color: rgb(238 60 243/0.58);
  filter: drop-shadow(0 0 3px rgb(216 57 233/0.42));
}
.uncertainty {
  height: auto;
  border: 1px solid rgb(137 116 255/0.26);
  background: linear-gradient(120deg, rgb(4 12 39/0.5), rgb(1 7 29/0.38));
  box-shadow: none;
  backdrop-filter: blur(2px);
}
.capabilities {
  border-color: rgb(137 116 255/0.12);
  background: rgb(2 8 31/0.12);
  box-shadow: none;
  backdrop-filter: none;
}
.capabilities > .panelTitle,
.capabilityGrid div {
  border-color: rgb(137 116 255/0.14);
}
.difference {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.differenceGrid article {
  border-color: rgb(137 116 255/0.16);
}
.faq {
  border-color: rgb(137 116 255/0.24);
  background: linear-gradient(120deg, rgb(4 12 39/0.52), rgb(1 7 29/0.4));
  box-shadow: none;
  backdrop-filter: blur(2px);
}
.faqGrid {
  border-color: rgb(137 116 255/0.16);
}
.faqGrid details {
  border-color: rgb(96 123 185/0.18);
  background: rgb(7 18 45/0.24);
}

@media (max-width: 47.9375rem) {
  .listenGrid article,
  .categoryGrid article,
  .differenceGrid article {
    border-color: rgb(137 116 255/0.14);
  }
  .capabilities > .panelTitle {
    border-color: rgb(137 116 255/0.14);
  }
}

/* Segunda pasada: ritmo vertical compacto y matriz editorial ligera. */
.panel.listen {
  padding-block: clamp(2.25rem, 3vw, 3.25rem) clamp(1.5rem, 2vw, 2rem);
}
.listenOverview {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}
.listen .listenGrid {
  padding-block: clamp(1rem, 1.5vw, 1.5rem);
}
.listen .listenGrid article {
  padding-block: 0.5rem;
}
.categories {
  margin-bottom: clamp(0.75rem, 1.5vw, 1.5rem);
  padding-block: clamp(1.25rem, 2vw, 2rem);
}
.process {
  margin-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.5rem, 2vw, 2.25rem);
}
.difference {
  min-height: 0;
  margin-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}
.differenceGrid article {
  min-height: 0;
  padding-block: clamp(1.5rem, 2.25vw, 2.25rem);
}
.capabilities {
  margin-bottom: clamp(0.875rem, 1.5vw, 1.5rem);
  padding-block: clamp(1rem, 1.5vw, 1.5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.capabilities > .panelTitle {
  border-color: rgb(137 116 255/0.1);
}
.capabilityGrid div {
  border-color: rgb(137 116 255/0.08);
}

/* Galería temporal: visible únicamente con /soluciones?icon-test=1. */
.hgIcon {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 1.5px rgb(168 60 255/0.38));
}
.hgIconTest {
  position: relative;
  z-index: 3;
  max-width: 86rem;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid rgb(168 60 255/0.24);
  border-radius: 1rem;
  background: #030619;
  color: #fff;
  text-align: center;
}
.hgIconTest > h2 {
  margin: 0;
  font-size: 1.6rem;
}
.hgIconTest > p {
  margin: 0.5rem 0 2rem;
  color: #aeb7cf;
}
.hgIconTestGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.hgIconTestGrid article {
  display: grid;
  min-height: 10rem;
  padding: 1.25rem;
  border: 1px solid rgb(168 60 255/0.14);
  border-radius: 0.75rem;
  place-content: center;
  background: rgb(5 9 30/0.72);
}
.hgIconTestSizes {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.hgIcon48 {
  width: 48px;
  height: 48px;
}
.hgIcon40 {
  width: 40px;
  height: 40px;
}
.hgIcon32 {
  width: 32px;
  height: 32px;
}
.hgIconTestGrid h3 {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.25;
}
@media (max-width: 62rem) {
  .hgIconTestGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 47.9375rem) {
  .hgIconTest {
    margin-inline: 1rem;
    padding: 1.25rem;
  }
  .hgIconTestGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 28rem) {
  .hgIconTestGrid {
    grid-template-columns: 1fr;
  }
}

/* Primera sección narrativa del body. */
.bodyIntro {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  padding: clamp(3.5rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem)
    clamp(3rem, 4.5vw, 4.5rem);
}
.bodyIntro:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -2rem;
  bottom: -2rem;
  left: 50%;
  width: 100vw;
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgb(0 3 11/0.34) 24%,
    rgb(0 3 11/0.62) 58%,
    rgb(0 3 11/0.38) 82%,
    transparent 100%
  );
  transform: translateX(-50%);
  pointer-events: none;
}
.bodyIntroContent {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin-inline: auto;
  text-align: center;
}
.bodyIntro h2 {
  max-width: 46rem;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(1.55rem, 2.45vw, 2.65rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.bodyIntro h2 span {
  display: block;
}
.bodyIntro h2 span + span {
  margin-top: 0.35em;
  color: #d9e0ed;
}
.bodyIntro h2 mark {
  color: #ffd400;
}
.bodyIntroJourney {
  display: flex;
  margin: clamp(2.5rem, 4vw, 3.75rem) 0 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 7vw, 7rem);
  list-style: none;
}
.bodyIntroJourney:before,
.bodyIntroJourney:after {
  content: none;
}
.bodyIntroJourney li {
  position: relative;
  color: #cbd4e3;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.bodyIntroJourney li:not(:last-child):after {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(1.25rem, 3vw, 3rem));
  color: rgb(155 168 191/0.46);
  font-size: 0.8rem;
  font-weight: 400;
  transform: translateY(-52%);
}
.bodyIntroJourney li:before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
}

.solutionsMotion .bodyIntro h2 span,
.solutionsMotion .bodyIntroJourney li {
  opacity: 0;
  transform: translateY(1rem);
}
.solutionsMotion .bodyIntro.is-visible h2 span,
.solutionsMotion .bodyIntro.is-visible .bodyIntroJourney li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.solutionsMotion .bodyIntro.is-visible h2 span:nth-child(2) {
  transition-delay: 0.18s;
}
.solutionsMotion .bodyIntro.is-visible .bodyIntroJourney li:nth-child(1) {
  transition-delay: 0.55s;
}
.solutionsMotion .bodyIntro.is-visible .bodyIntroJourney li:nth-child(2) {
  transition-delay: 0.78s;
}
.solutionsMotion .bodyIntro.is-visible .bodyIntroJourney li:nth-child(3) {
  transition-delay: 1.01s;
}
.solutionsMotion .bodyIntro.is-visible .bodyIntroJourney li:before {
  animation: bodyIntroAccent 0.55s ease both;
}
.solutionsMotion
  .bodyIntro.is-visible
  .bodyIntroJourney
  li:nth-child(1):before {
  animation-delay: 0.55s;
}
.solutionsMotion
  .bodyIntro.is-visible
  .bodyIntroJourney
  li:nth-child(2):before {
  animation-delay: 0.78s;
}
.solutionsMotion
  .bodyIntro.is-visible
  .bodyIntroJourney
  li:nth-child(3):before {
  animation-delay: 1.01s;
}
@keyframes bodyIntroAccent {
  0%,
  100% {
    background: transparent;
  }
  45% {
    background: #ff2dbd;
  }
}

@media (max-width: 47.9375rem) {
  .bodyIntro {
    padding-block: clamp(3rem, 9vw, 4.25rem);
  }
  .bodyIntroJourney {
    gap: clamp(1.25rem, 5vw, 2.5rem);
    margin-top: 2.5rem;
  }
  .bodyIntroJourney li {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }
  .bodyIntroJourney li:not(:last-child):after {
    left: calc(100% + clamp(0.45rem, 2vw, 1rem));
  }
}
@media (prefers-reduced-motion: reduce) {
  .solutionsMotion .bodyIntro h2 span,
  .solutionsMotion .bodyIntroJourney li {
    opacity: 1;
    transform: none;
  }
  .solutionsMotion .bodyIntroJourney li:before {
    animation: none;
  }
}

/* =========================================================
   SOLUCIONES — NUEVO BODY EDITORIAL
   El fondo High Route, Hero y Footer NO se modifican.
   ========================================================= */

/* -----------------------------------------
   Ritmo general del nuevo body
   ----------------------------------------- */

.solutionsPage .main {
  padding-bottom: 0;
}

/* =========================================
   02. HACEMOS REALIDAD LA SOLUCIÓN
   ========================================= */

.solutionPaths {
  position: relative;
  width: 100%;
  padding: clamp(4rem, 6vw, 6.5rem) var(--container-gutter)
    clamp(4rem, 6vw, 6rem);
}

.solutionPathsInner {
  width: min(100%, 78rem);
  margin-inline: auto;
}

.solutionPaths h2 {
  max-width: 50rem;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(1.65rem, 2.25vw, 2.35rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-align: center;
}

.solutionPaths h2 mark {
  background: transparent;
  color: var(--color-yellow-strategic);
}

.solutionPathsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 8vw, 8rem);
  margin-top: clamp(3.25rem, 5vw, 5rem);
}

/* No son tarjetas:
   sin fondo, sin caja, sin glow */
.solutionPath {
  position: relative;
  min-width: 0;
  padding-top: 1.25rem;
}

/* ==========================================================
   HIGH ROUTE — ESCALA BASE CONGELADA
   No mover ni estirar después de este punto
   ========================================================== */

.solutionsPage .routeCanvas::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;
  left: auto;

  width: min(62vw, 58rem);
  height: 100%;

  background-image: url("../../solutions/fondosoluciones3.png");

  background-position: right top;

  background-size: 100% auto;

  background-repeat: no-repeat;

  filter: brightness(0.68) saturate(0.78) contrast(0.92);

  opacity: 0.92;

  pointer-events: none;
}

.solutionPathCustom::after,
.solutionPathEnterprise::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 1px;
}

.solutionPathCustom::after {
  background: var(--logo-magenta);
}

.solutionPathEnterprise::after {
  background: var(--logo-blue);
}

.solutionPathLabel {
  display: block;
  margin-bottom: 1.15rem;
  color: rgb(203 212 229 / 70%);
  font-size: clamp(0.72rem, 0.8vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.25;
}

.solutionPath h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 1.65vw, 1.7rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.solutionPath p {
  max-width: 28rem;
  margin: 0.85rem 0 0;
  color: rgb(213 221 237 / 76%);
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.55;
}

.solutionPathSeparator {
  padding-inline: 0.45em;
  color: rgb(213 221 237 / 48%);
}

/* =========================================
   03. REDUCIMOS LA INCERTIDUMBRE
   ========================================= */

.validationJourney {
  position: relative;
  width: 100%;
  padding: clamp(4rem, 6vw, 6rem) var(--container-gutter);
}

.validationJourneyInner {
  width: min(100%, 84rem);
  margin-inline: auto;
}

.validationJourney h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-align: center;
}

.validationJourney h2 mark {
  background: transparent;
  color: var(--color-yellow-strategic);
}

/* Línea de recorrido */

.validationSteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: clamp(3.5rem, 5vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.validationSteps::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgb(155 168 191 / 18%),
    rgb(155 168 191 / 42%),
    rgb(155 168 191 / 18%)
  );
}

.validationSteps li {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding-inline: 0.5rem;
  text-align: center;
}

.validationNumber {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
  border: 1px solid rgb(169 180 203 / 46%);
  border-radius: 50%;
  background: #02091d;
  color: rgb(213 221 237 / 82%);
  font-size: 0.78rem;
  font-weight: 600;
  place-items: center;
}

.validationSteps strong {
  color: rgb(235 239 248 / 88%);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  font-weight: 600;
  line-height: 1.3;
}

/* Demo funcional:
   único punto con énfasis mayor */

.validationFeatured .validationNumber {
  border-color: rgb(255 204 0 / 74%);
  color: var(--color-yellow-strategic);
  box-shadow: 0 0 1rem rgb(255 204 0 / 8%);
}

.validationFeatured strong {
  color: #fff;
}

/* =========================================
   04. CIERRE
   ========================================= */

.solutionsClosing {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(5rem, 8vw, 8rem) var(--container-gutter) clamp(4rem, 6vw, 6rem);
  pointer-events: auto;
}

.solutionsClosingInner {
  display: flex;
  width: min(100%, 78rem);
  margin-inline: auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 6rem);
}

.solutionsClosing h2 {
  max-width: 42rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.solutionsClosing h2 span {
  display: block;
}

.solutionsClosing h2 mark {
  background: transparent;
  color: var(--color-yellow-strategic);
}

.solutionsClosingAction {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 3rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid rgb(255 88 214 / 54%);
  border-radius: var(--radius-pill);
  padding-inline: 1.6rem;
  background: rgb(3 9 29 / 18%);
  color: #fff;
  font-size: var(--font-size-functional);
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.solutionsClosingAction:hover {
  border-color: var(--logo-magenta);
  background: rgb(214 51 255 / 8%);
  transform: translateY(-1px);
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 62rem) {
  .solutionPathsGrid {
    gap: 3rem;
  }

  .validationSteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1rem;
  }

  .validationSteps::before {
    display: none;
  }
}

@media (max-width: 47.9375rem) {
  .solutionPaths {
    padding-block: 3.5rem;
  }

  .solutionPathsGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.5rem;
  }

  .solutionPaths h2 {
    text-align: left;
  }

  .validationJourney {
    padding-block: 3.5rem;
  }

  .validationJourney h2 {
    text-align: left;
  }

  .validationSteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solutionsClosing {
    padding-block: 4rem;
  }

  .solutionsClosingInner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 28rem) {
  .validationSteps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .validationSteps li {
    align-items: flex-start;
    flex-direction: row;
    gap: 0.85rem;
    text-align: left;
  }

  .validationNumber {
    flex: 0 0 2rem;
    margin: 0;
  }

  .validationSteps strong {
    padding-top: 0.4rem;
  }
}

/* =========================================================
   SOLUCIONES — AJUSTE DE RITMO VERTICAL
   No modifica fondo, hero, header ni footer.
   ========================================================= */

/* 01. BLOQUE INTRO */
.bodyIntro {
  padding-top: clamp(2.75rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 3.5vw, 3.5rem);
}

.bodyIntroJourney {
  margin-top: clamp(1.9rem, 3vw, 2.75rem);
}

/* 02. HACEMOS REALIDAD LA SOLUCIÓN */
.solutionPaths {
  padding-top: clamp(2.75rem, 4vw, 4rem);
  padding-bottom: clamp(4rem, 5vw, 5.25rem);
}

.solutionPathsGrid {
  margin-top: clamp(2.25rem, 3.5vw, 3.5rem);
}

.solutionPath {
  padding-top: 1rem;
}

.solutionPathLabel {
  margin-bottom: 0.85rem;
}

.solutionPath p {
  margin-top: 0.65rem;
}

/* 03. REDUCIMOS LA INCERTIDUMBRE */
.validationJourney {
  padding-top: clamp(3rem, 4vw, 4rem);
  padding-bottom: clamp(3.25rem, 4.5vw, 4.5rem);
}

.validationSteps {
  margin-top: clamp(2.5rem, 3.75vw, 3.75rem);
}

.validationNumber {
  margin-bottom: 0.75rem;
}

/* 04. CIERRE */
.solutionsClosing {
  padding-top: clamp(3.75rem, 5vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 5vw, 5rem);
}

/* Mantener lectura cómoda en pantallas grandes */
@media (min-width: 80rem) {
  .bodyIntroContent {
    max-width: 58rem;
  }

  .solutionPathsInner {
    max-width: 74rem;
  }

  .validationJourneyInner {
    max-width: 80rem;
  }

  .solutionsClosingInner {
    max-width: 74rem;
  }
}

/* Tablet */
@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .bodyIntro {
    padding-block: 3rem;
  }

  .solutionPaths {
    padding-block: 3rem 3.5rem;
  }

  .validationJourney {
    padding-block: 3rem 3.75rem;
  }

  .solutionsClosing {
    padding-block: 3.75rem;
  }
}

/* Mobile */
@media (max-width: 47.9375rem) {
  .bodyIntro {
    padding-block: 2.75rem;
  }

  .bodyIntroJourney {
    margin-top: 2rem;
  }

  .solutionPaths {
    padding-block: 2.75rem 3.25rem;
  }

  .solutionPathsGrid {
    margin-top: 2.25rem;
    gap: 2.75rem;
  }

  .validationJourney {
    padding-block: 2.75rem 3.5rem;
  }

  .validationSteps {
    margin-top: 2.5rem;
  }

  .solutionsClosing {
    padding-block: 3.5rem;
  }
}

/* =========================================================
   SOLUCIONES — AJUSTE DEL CIERRE / FOOTER
   Mantiene el mismo High Route y el mismo footer.
   Solo libera el extremo derecho y da un poco más de
   presencia al camino inferior.
   ========================================================= */

/* 1. Eliminar únicamente la firma repetida del lado derecho:
   logo + "Tecnología con propósito. Resultados que perduran." */
.solutionsPage .php-site-footer .footerSignature {
  display: none;
}

/* 2. Conservar deliberadamente el cuarto espacio del grid vacío.
   Así no desplazamos Legal hacia la derecha y dejamos respirar
   el paisaje/camino en ese extremo. */
@media (min-width: 80rem) {
  .solutionsPage .php-site-footer .footerGrid {
    grid-template-columns:
      minmax(0, 30fr)
      minmax(0, 21fr)
      minmax(0, 21fr)
      minmax(0, 28fr);
  }
}

/* 3. Dar un poco más de visibilidad al High Route hacia abajo.
   NO cambia imagen, posición, tamaño ni comportamiento.
   Solo disminuye suavemente la capa oscura al acercarse al footer. */

.solutionsPage {
  background-image:
    linear-gradient(
      to bottom,
      rgb(0 3 11 / 52%) 0%,
      rgb(0 3 11 / 52%) 68%,
      rgb(0 3 11 / 42%) 78%,
      rgb(0 3 11 / 28%) 88%,
      rgb(0 3 11 / 18%) 100%
    ),
    url("../../solutions/fondosoluciones2.webp?v=20261002-1");
}

/* 4. El footer permanece transparente para dejar visible el lienzo.
   No añadir fondos ni paneles nuevos. */
.solutionsPage .php-site-footer .footer {
  background: transparent;
}

/* =========================================================
   HIGH ROUTE — VISIBILIDAD INFERIOR
   Mantiene exactamente posición y tamaño del asset.
   Solo libera oscuridad y añade una luz azul muy sutil abajo.
   ========================================================= */

.solutionsPage {
  background-color: #01102b;

  background-image:

    /* LUZ MUY SUTIL EN EL TRAMO INFERIOR */
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 76%,
      rgb(38 67 118 / 3%) 84%,
      rgb(47 82 140 / 7%) 92%,
      rgb(55 91 150 / 10%) 100%
    ),
    /* OSCURECIMIENTO GENERAL */
    linear-gradient(
        to bottom,
        rgb(0 3 11 / 52%) 0%,
        rgb(0 3 11 / 52%) 66%,
        rgb(0 3 11 / 40%) 76%,
        rgb(0 3 11 / 25%) 88%,
        rgb(0 3 11 / 12%) 100%
      ),
    /* MISMO HIGH ROUTE */
    url("../../solutions/fondosoluciones2.webp?v=20261002-1");

  background-position:
    center,
    center,
    right bottom;

  background-size:
    100% 100%,
    100% 100%,
    auto clamp(40rem, 48vw, 56rem);

  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* ==========================================================
   HIGH ROUTE — INICIO DESPUÉS DEL FARO
   ========================================================== */

.solutionsPage .routeCanvas {
  position: absolute;
  z-index: -1;

  top: 0;
  right: 0;
  left: 0;

  height: 100%;

  background: transparent;
  pointer-events: none;
}

/* ==========================================================
   LIMPIEZA DEFINITIVA DEL FONDO GLOBAL
   El High Route vive únicamente en .routeCanvas
   ========================================================== */

.solutionsPage {
  background-color: #01102b !important;
  background-image: none !important;
}

/* ==========================================================
   HIGH ROUTE — IMAGEN CONTROLADA POR CSS
   ========================================================== */

.solutionsPage .routeCanvas {
  position: absolute;
  z-index: -1;

  top: clamp(12rem, 16vw, 16rem);
  right: 0;
  bottom: -2rem;
  left: 0;

  background: transparent;

  pointer-events: none;
}

/* Imagen del camino */
/* Imagen del camino integrada al lienzo */
.solutionsPage .routeCanvas::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image: url("../../solutions/fondosoluciones3.png");

  background-position: right top;

  background-size: auto 100%;

  background-repeat: no-repeat;

  filter: brightness(0.68) saturate(0.78) contrast(0.92);

  opacity: 0.92;

  pointer-events: none;
}

/* No añadir otra capa visual todavía */
.solutionsPage .routeCanvas::after {
  content: none;
}

/* ==========================================================
   FOOTER TRANSPARENTE — SOLUCIONES
   El lienzo continúa detrás del footer
   ========================================================== */

.solutionsPage .php-site-footer,
.solutionsPage .php-site-footer footer,
.solutionsPage .php-site-footer .footer,
.solutionsPage footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Elimina la línea divisoria sobre el footer */
.solutionsPage .php-site-footer,
.solutionsPage .php-site-footer footer,
.solutionsPage .php-site-footer .footer,
.solutionsPage footer {
  border-top: none !important;
  box-shadow: none !important;
}

/* ==========================================================
   LIENZO NARRATIVO — ALTURA BASE
   ========================================================== */

.solutionsPage .narrativeMain {
  position: relative;
  min-height: 2200px;
}

/* ==========================================================
   ==========================================================
   H&G SOLUCIONES — MASTER NARRATIVE CANVAS
   VERSIÓN DE CONTROL
   TODO LO ANTERIOR QUEDA SOBRESCRITO DESDE AQUÍ
   ==========================================================
   ========================================================== */

/* ==========================================================
   0. REINICIO DEL LIENZO
   ========================================================== */

.solutionsPage {
  position: relative !important;
  min-height: 100vh;
  overflow-x: hidden !important;

  background-color: #01102b !important;
  background-image: none !important;

  color: #fff;
}

/* El fondo superior original sigue perteneciendo al HERO */
.solutionsPage::before {
  top: -7rem !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  background-position: center top !important;
}

/* ==========================================================
   1. HIGH ROUTE
   UNA SOLA INSTANCIA DE LA IMAGEN
   ========================================================== */

.solutionsPage .routeCanvas {
  position: absolute !important;
  z-index: 0 !important;

  inset: 0 !important;

  width: 100%;
  height: 100%;

  overflow: visible;

  background: transparent !important;

  pointer-events: none;
}

/*
 * IMPORTANTÍSIMO:
 *
 * NO usamos background-size auto 100%.
 * NO usamos left negativo.
 * NO estiramos el PNG hasta cubrir los 2280 px.
 *
 * Conservamos una escala cinematográfica y dejamos
 * que la imagen forme parte del lienzo.
 */
.solutionsPage .routeCanvas::before {
  content: "" !important;

  position: absolute !important;

  /*
   * El camino nace en la parte superior derecha,
   * debajo de la escena del faro.
   */
  top: 3rem !important;
  right: -1.5rem !important;

  left: auto !important;
  bottom: auto !important;

  /*
   * Tamaño deliberadamente grande, pero NO gigante.
   * La imagen ocupa aproximadamente 72% del viewport.
   */
  width: clamp(64rem, 74vw, 82rem) !important;
  aspect-ratio: 16 / 9;

  height: auto !important;

  background-image: url("../../solutions/fondosoluciones3.png") !important;

  background-position: right top !important;

  background-size: 100% auto !important;

  background-repeat: no-repeat !important;

  /*
   * Integramos el asset con el azul corporativo.
   * No destruimos la oscuridad original.
   */
  filter: brightness(0.68) saturate(0.74) contrast(0.94) !important;

  opacity: 0.88 !important;

  /*
   * Desaparición muy suave del límite izquierdo
   * y del extremo inferior.
   */
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 0.4) 9%,
      #000 21%,
      #000 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 89%,
      rgb(0 0 0 / 0.65) 95%,
      transparent 100%
    );

  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 0.4) 9%,
      #000 21%,
      #000 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 89%,
      rgb(0 0 0 / 0.65) 95%,
      transparent 100%
    );

  mask-composite: intersect;

  pointer-events: none;
}

/* No hay otra capa ni otro High Route */
.solutionsPage .routeCanvas::after {
  content: none !important;
}

/* ==========================================================
   2. REGLAS GENERALES DE LOS 4 MOMENTOS
   ========================================================== */

.solutionsPage .journeyMoment {
  position: absolute !important;
  z-index: 2;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

.solutionsPage .journeyCopy,
.solutionsPage .journeyProcessHeading,
.solutionsPage .journeyOffers,
.solutionsPage .routeSteps {
  background: transparent !important;
  box-shadow: none !important;
}

.solutionsPage .journeyMoment::before,
.solutionsPage .journeyMoment::after,
.solutionsPage .journeyCopy::before,
.solutionsPage .journeyCopy::after {
  content: none !important;
}

/* Tipografía corporativa sobria */
.solutionsPage .journeyMoment h2 {
  margin: 0;

  color: #fff;

  font-size: clamp(1.75rem, 2.1vw, 2.25rem);
  font-weight: 400;

  line-height: 1.2;
  letter-spacing: -0.035em;
}

.solutionsPage .journeyMoment h2 span {
  display: block;
}

.solutionsPage .journeyMoment h2 mark {
  background: transparent;
  color: #ffd400;
}

/* ==========================================================
   3. MOMENTO 1
   CONTINUIDAD FARO -> COMPRENDER
   ========================================================== */

.solutionsPage .journeyStart {
  top: 5rem !important;
  left: clamp(4rem, 10vw, 10rem) !important;

  width: min(39rem, 42vw) !important;

  min-height: 0 !important;
}

.solutionsPage .journeyStart h2 {
  font-size: clamp(1.9rem, 2.35vw, 2.5rem);
}

.solutionsPage .journeyStart h2 span + span {
  margin-top: 0.3rem;
  color: #d9e0ed;
}

.solutionsPage .journeyMiniFlow {
  display: flex;

  margin-top: 1.9rem;

  align-items: center;
  gap: 1.25rem;

  color: rgb(220 227 241 / 0.72);

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.solutionsPage .journeyMiniFlow i {
  color: rgb(220 227 241 / 0.35);
  font-style: normal;
}

/* ==========================================================
   4. MOMENTO 2
   HACEMOS REALIDAD...
   ========================================================== */

.solutionsPage .journeyWhat {
  top: 510px !important;
  left: clamp(4rem, 8vw, 8rem) !important;

  width: min(34rem, 35vw) !important;

  min-height: 0 !important;
}

.solutionsPage .journeyWhat h2 {
  margin-bottom: 2.3rem;

  font-size: clamp(1.65rem, 1.9vw, 2rem);
}

.solutionsPage .journeyOffers {
  display: grid;

  gap: 2rem;
}

.solutionsPage .journeyOffer {
  display: grid;

  grid-template-columns: 0.65rem 1fr;

  gap: 0.85rem;

  align-items: start;
}

.solutionsPage .journeyOfferEnterprise {
  margin-left: 3.5rem;
}

.solutionsPage .journeyOfferDot {
  width: 0.45rem;
  height: 0.45rem;

  margin-top: 0.4rem;

  border-radius: 50%;

  background: #ffd400;

  box-shadow: 0 0 0.5rem rgb(255 212 0 / 0.18);
}

.solutionsPage .journeyOffer h3 {
  margin: 0;

  color: #fff;

  font-size: 1rem;
  font-weight: 600;
}

.solutionsPage .journeyOffer p {
  max-width: 22rem;

  margin: 0.35rem 0 0;

  color: rgb(216 224 239 / 0.7);

  font-size: 0.82rem;
  line-height: 1.5;
}

.solutionsPage .journeyOffer p span {
  margin-inline: 0.35rem;

  color: rgb(255 255 255 / 0.34);
}

/* ==========================================================
   5. MOMENTO 3
   PROCESO SOBRE EL RECORRIDO
   ========================================================== */

.solutionsPage .journeyProcess {
  top: 990px !important;
  right: 0 !important;
  left: 0 !important;

  width: 100% !important;

  min-height: 760px !important;
}

.solutionsPage .journeyProcessHeading {
  position: absolute !important;

  top: 2rem !important;
  left: clamp(4rem, 7vw, 7rem) !important;

  width: 25rem !important;
}

.solutionsPage .journeyProcessHeading h2 {
  font-size: clamp(1.6rem, 1.8vw, 1.95rem);
}

/*
 * PASOS:
 * Ya no están en una columna ni en una línea horizontal.
 * Siguen visualmente la diagonal del camino.
 */
.solutionsPage .routeSteps {
  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.solutionsPage .routeStep {
  position: absolute !important;

  display: flex !important;

  width: 8rem !important;

  flex-direction: column !important;
  align-items: center !important;

  gap: 0.5rem;

  text-align: center;
}

/* Necesidad */
.solutionsPage .routeStep1 {
  top: 455px !important;
  left: 11% !important;
}

/* Análisis */
.solutionsPage .routeStep2 {
  top: 400px !important;
  left: 25% !important;
}

/* Diseño */
.solutionsPage .routeStep3 {
  top: 330px !important;
  left: 39% !important;
}

/* Demo */
.solutionsPage .routeStep4 {
  top: 250px !important;
  left: 53% !important;
}

/* Validación */
.solutionsPage .routeStep5 {
  top: 185px !important;
  left: 66% !important;
}

/* Implementación */
.solutionsPage .routeStep6 {
  top: 115px !important;
  left: 78% !important;
}

.solutionsPage .routeStepNode {
  display: grid;

  width: 2.45rem;
  height: 2.45rem;

  place-items: center;

  border: 1px solid rgb(210 220 238 / 0.42);

  border-radius: 50%;

  background: rgb(2 9 29 / 0.72);

  color: rgb(226 233 245 / 0.78);

  font-size: 0.64rem;
  font-weight: 600;
}

/* Demo es el único enfatizado */
.solutionsPage .routeStep4 .routeStepNode {
  border-color: rgb(255 212 0 / 0.72);

  color: #ffd400;

  box-shadow: 0 0 0.8rem rgb(255 212 0 / 0.1);
}

.solutionsPage .routeStep strong {
  color: rgb(235 240 248 / 0.84);

  font-size: 0.76rem;
  font-weight: 600;

  line-height: 1.25;
}

/* ==========================================================
   6. MOMENTO 4
   CTA FINAL
   ========================================================== */

.solutionsPage .journeyEnd {
  top: 1830px !important;
  left: clamp(4rem, 8vw, 8rem) !important;

  width: min(33rem, 37vw) !important;

  min-height: 0 !important;
}

.solutionsPage .journeyEnd h2 {
  font-size: clamp(1.7rem, 2vw, 2.1rem);
}

.solutionsPage .journeyCta {
  display: inline-flex;

  min-height: 3rem;

  margin-top: 1.8rem;

  align-items: center;
  justify-content: center;

  gap: 0.75rem;

  padding-inline: 1.45rem;

  border: 1px solid rgb(255 66 199 / 0.58);

  border-radius: 999px;

  background: rgb(2 9 29 / 0.2);

  color: #fff;

  font-size: 0.86rem;
  font-weight: 600;

  text-decoration: none;
}

/* ==========================================================
   7. FOOTER
   ========================================================== */

.solutionsPage .php-site-footer,
.solutionsPage .php-site-footer footer,
.solutionsPage .php-site-footer .footer {
  position: relative !important;
  z-index: 4 !important;

  background: transparent !important;

  background-color: transparent !important;

  background-image: none !important;

  border-top: 0 !important;

  box-shadow: none !important;
}

/* Mantener eliminada la firma repetida derecha */
.solutionsPage .php-site-footer .footerSignature {
  display: none !important;
}

/*
 * El footer sube ligeramente sobre el último
 * tramo del lienzo para que no parezca otra sección.
 */
.solutionsPage > .php-site-footer {
  margin-top: -180px !important;

  padding-top: 180px !important;
}

/* ==========================================================
   8. ELIMINAR RESTOS DEL BODY ANTERIOR
   ========================================================== */

.solutionsPage .bodyIntro,
.solutionsPage .solutionPaths,
.solutionsPage .validationJourney,
.solutionsPage .solutionsClosing {
  /*
   * Solo aplica si estos elementos viejos todavía existen
   * accidentalmente en PHP.
   */
}

/* Ningún fondo rectangular en el body narrativo */
.solutionsPage .journeyMoment,
.solutionsPage .journeyMoment *,
.solutionsPage .routeSteps {
  box-shadow: none;
}

/* ==========================================================
   9. TABLET
   ========================================================== */

@media (max-width: 79.9375rem) {
  .solutionsPage .main.narrativeMain {
    min-height: 2050px !important;
  }

  .solutionsPage .routeCanvas::before {
    width: clamp(52rem, 86vw, 68rem) !important;

    right: -8rem !important;
  }

  .solutionsPage .journeyStart,
  .solutionsPage .journeyWhat,
  .solutionsPage .journeyEnd {
    left: 3rem !important;
  }
}

/* ==========================================================
   10. MOBILE
   En móvil NO intentamos replicar coordenadas desktop.
   Se convierte en narrativa vertical limpia.
   ========================================================== */

@media (max-width: 47.9375rem) {
  .solutionsPage .main.narrativeMain {
    display: block;

    min-height: auto !important;

    padding: 4rem var(--container-gutter) 5rem !important;
  }

  .solutionsPage .routeCanvas {
    position: absolute !important;

    inset: 0 !important;

    opacity: 0.42;
  }

  .solutionsPage .routeCanvas::before {
    top: 5rem !important;
    right: -14rem !important;

    width: 48rem !important;

    opacity: 0.48 !important;
  }

  .solutionsPage .journeyMoment,
  .solutionsPage .journeyStart,
  .solutionsPage .journeyWhat,
  .solutionsPage .journeyProcess,
  .solutionsPage .journeyEnd {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    min-height: auto !important;

    margin: 0 0 5.5rem !important;
  }

  .solutionsPage .journeyProcessHeading {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    width: 100% !important;

    margin-bottom: 2.5rem;
  }

  .solutionsPage .routeSteps {
    position: relative !important;

    display: grid !important;

    gap: 1.15rem;
  }

  .solutionsPage .routeStep,
  .solutionsPage .routeStep1,
  .solutionsPage .routeStep2,
  .solutionsPage .routeStep3,
  .solutionsPage .routeStep4,
  .solutionsPage .routeStep5,
  .solutionsPage .routeStep6 {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    display: grid !important;

    width: 100% !important;

    grid-template-columns:
      2.45rem
      1fr;

    align-items: center !important;

    gap: 0.8rem;

    text-align: left;
  }

  .solutionsPage .journeyOfferEnterprise {
    margin-left: 1.5rem;
  }

  .solutionsPage > .php-site-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ==========================================================
   QUITAR VELO OSCURO DEL PRIMER TRAMO NARRATIVO
   ========================================================== */

.solutionsPage .bodyIntro::before {
  content: none !important;
}

.solutionsPage .main,
.solutionsPage .main.narrativeMain {
  background: transparent !important;
  background-image: none !important;
}

/* ==========================================================
   SOLUCIONES — FONDO PRINCIPAL SIN OSCURECIMIENTO / SIN MASK
   ========================================================== */

.solutionsPage::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  /* QUITAR COMPLETAMENTE EL DESVANECIMIENTO HEREDADO */
  -webkit-mask-image: none !important;
  mask-image: none !important;

  opacity: 1 !important;
  filter: none !important;

  /* SUBIR LA IMAGEN DENTRO DE SU PROPIO LIENZO */
  background-position: center -140px !important;

  pointer-events: none !important;
}

/* QUITAR VELOS DEL BODY */
.solutionsPage .bodyIntro::before {
  content: none !important;
}

.solutionsPage .main,
.solutionsPage .main.narrativeMain {
  background: transparent !important;
  background-image: none !important;
}

/* Evitar cualquier overlay del hero sobre la transición */
.solutionsPage .hero::after {
  content: none !important;
}

/* ==========================================================
   SOLUCIONES — FONDO NARRATIVO CONTINUO V5
   Cielo + mar + faro + montaña + camino
   ========================================================== */

/* Fondo base */
.solutionsPage {
  position: relative !important;
  background: #01102b !important;
  overflow-x: hidden !important;
}

/* Desactivar definitivamente el fondo antiguo */
.solutionsPage::before {
  content: none !important;
}

/* El HERO no pinta otro fondo encima */
.solutionsPage .hero {
  position: relative !important;
  z-index: 2 !important;

  background: transparent !important;
  background-image: none !important;
}

.solutionsPage .hero::after {
  content: none !important;
}

/* El MAIN tampoco pinta azul por encima */
.solutionsPage .main,
.solutionsPage .main.narrativeMain {
  position: relative !important;
  z-index: 1 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  overflow: visible !important;
}

/* Quitamos todos los velos heredados */
.solutionsPage .bodyIntro::before,
.solutionsPage .journeyStart::before,
.solutionsPage .journeyStart::after {
  content: none !important;
}

/* ==========================================================
   NUEVO LIENZO ÚNICO
   ========================================================== */

.solutionsPage::after {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;

  /*
   * Comienza detrás de la zona inferior del hero
   * y continúa hasta el final de la página.
   */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  background-image: url("../../solutions/solutions-background-v5.webp?v=20261002-1") !important;

  background-repeat: no-repeat !important;

  /*
   * La imagen se dimensiona por ALTURA DEL LIENZO,
   * conservando proporciones.
   */
  background-size: cover !important;

  /*
   * Subimos la composición para que la luz del faro
   * quede justo debajo de la zona inferior de la muñeca.
   */
  background-position: center top !important;

  pointer-events: none !important;
}

/* Shared typography contract: internal pages consume Home's semantic scale. */
.solutionsPage {
  font-family: var(--font-family-site);
}
.solutionsPage .eyebrow {
  font-size: var(--hero-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  line-height: var(--line-height-eyebrow);
}
.solutionsPage .heroCopy h1 {
  font-size: var(--hero-h1);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h1);
  line-height: var(--hero-h1-line);
}
.solutionsPage .heroCopy p {
  font-size: var(--hero-body);
  line-height: var(--hero-body-line);
}
.solutionsPage .actions a {
  font-size: var(--font-size-functional);
  font-weight: var(--font-weight-semibold);
}

/* Todo el contenido queda por encima del paisaje */
.solutionsPage .hero,
.solutionsPage .main.narrativeMain,
.solutionsPage .journeyMoment,
.solutionsPage .php-site-footer {
  position: relative;
  z-index: 2;
}

/* El footer solapa visualmente 180 px del cierre. El lienzo narrativo debe
   permanecer por encima para que su CTA reciba el clic. */
.solutionsPage > main.main {
  position: relative;
  z-index: 5 !important;
}

/* Footer completamente transparente */
.solutionsPage .php-site-footer,
.solutionsPage .php-site-footer footer,
.solutionsPage .php-site-footer .footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   V5 — FUNDIDO PROGRESIVO HACIA EL FOOTER
   El paisaje NO se corta: pierde intensidad gradualmente
   ========================================================== */

.solutionsPage::after {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 78%,
    rgb(0 0 0 / 0.95) 82%,
    rgb(0 0 0 / 0.85) 86%,
    rgb(0 0 0 / 0.7) 90%,
    rgb(0 0 0 / 0.52) 94%,
    rgb(0 0 0 / 0.34) 97%,
    rgb(0 0 0 / 0.2) 100%
  ) !important;

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 78%,
    rgb(0 0 0 / 0.95) 82%,
    rgb(0 0 0 / 0.85) 86%,
    rgb(0 0 0 / 0.7) 90%,
    rgb(0 0 0 / 0.52) 94%,
    rgb(0 0 0 / 0.34) 97%,
    rgb(0 0 0 / 0.2) 100%
  ) !important;
}

/* ==========================================================
   FUNDIDO INFERIOR DEL PAISAJE
   Mantiene el camino en el footer, pero reduce su intensidad
   progresivamente sin crear una línea de corte.
   ========================================================== */

.solutionsPage::after {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0.95) 85%,
    rgba(0, 0, 0, 0.8) 89%,
    rgba(0, 0, 0, 0.6) 93%,
    rgba(0, 0, 0, 0.42) 97%,
    rgba(0, 0, 0, 0.3) 100%
  ) !important;

  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0.95) 85%,
    rgba(0, 0, 0, 0.8) 89%,
    rgba(0, 0, 0, 0.6) 93%,
    rgba(0, 0, 0, 0.42) 97%,
    rgba(0, 0, 0, 0.3) 100%
  ) !important;
}