/* Soluciones — Hablemos + Footer as one composition. Same architecture and values as Transformación Digital (td-cierre.css,
   the approved reference), generalised for the interior pages (.security-close) and the overview (.portfolio-contact).
   One video instance: the Hablemos background video is resized and positioned by solucion-cierre.js so its light arc stays
   behind the Hablemos CTA and the glow below it runs down behind the footer, which sits on that layer as dark liquid glass.
   solucion-cierre.js adds .gv-closing / .is-shared and the measurements; without JS both sections behave as before.
   Variables: --gv-footer-h (end of Hablemos → end of footer), --gv-video-top / --gv-video-h (video box). */
.gv-closing.is-shared{overflow:visible}

/* The video overflows <main> into the footer's area. On TD <main> clips only horizontally (td-page.css:
   .td-page .td-main{overflow-x:clip}); here <main> had overflow:clip (infraestructura-capacidades-v2, colaboracion-page,
   security-flow, security-refresh) or overflow:hidden (solutions-page), which cut the video at the end of <main> and left
   the footer over plain black. Same rule as TD: clip x, keep y visible. clip (unlike hidden) creates no scroll container,
   so existing sticky elements keep working. */
.solutions-page main{overflow-x:clip;overflow-y:visible}

/* The single video: transparent above the section (mask), fades in over 150px and continues to the end of the footer.
   It now reaches up behind the previous section, so it never takes clicks (.solutions-close-video had no pointer-events rule). */
.gv-closing.is-shared :is(.security-close-video,.solutions-close-video){
  top:var(--gv-video-top,0px);bottom:auto;height:var(--gv-video-h,100%);pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent 0,transparent calc(-1 * var(--gv-video-top,0px)),#000 calc(150px - var(--gv-video-top,0px)));
  mask-image:linear-gradient(transparent 0,transparent calc(-1 * var(--gv-video-top,0px)),#000 calc(150px - var(--gv-video-top,0px)))}

/* Side vignette continues behind the footer (::after on the interior pages, ::before on the overview). */
.security-close.gv-closing.is-shared::after,.portfolio-contact.gv-closing.is-shared::before{bottom:calc(-1 * var(--gv-footer-h,0px))}

/* Progressive darkening from the lower part of Hablemos into the footer zone — never a solid band
   (::before on the interior pages, ::after on the overview, whichever pseudo-element is free). */
.security-close.gv-closing.is-shared::before,.portfolio-contact.gv-closing.is-shared::after{content:'';position:absolute;left:0;right:0;top:60%;bottom:calc(-1 * var(--gv-footer-h,0px));z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(0,1,14,.15) 30%,rgba(0,1,14,.3) 100%)}

/* Footer: dark liquid glass (replaces site-consistency.css's rgba(0,1,14,.55) + blur(16px) and its dark upward shadow). */
.solutions-page .footer{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 38%,transparent),rgba(3,8,20,.5);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* Tablet: a little more surface, a little less blur. */
@media (max-width:1000px){
  .solutions-page .footer{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),rgba(3,8,20,.56);-webkit-backdrop-filter:blur(16px) saturate(118%);backdrop-filter:blur(16px) saturate(118%)}
}
/* Mobile: legibility and performance first — denser glass, lighter blur. */
@media (max-width:700px){
  .solutions-page .footer{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),rgba(3,8,20,.64);-webkit-backdrop-filter:blur(12px) saturate(115%);backdrop-filter:blur(12px) saturate(115%)}
}
/* Browsers without backdrop-filter: keep the content readable over the video. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .solutions-page .footer{background:rgba(3,8,20,.82)}
}