/* Transformación Digital — Hablemos + Footer as one composition (pilot for the solution pages).
   One video instance: the Hablemos background video (.security-close-video) is resized and positioned by td-page.js so its
   light arc stays behind the Hablemos CTA (as on the other pages) and the glow below the arc runs down behind the footer.
   The footer — painted later in the document — sits on that same layer as dark liquid glass.
   td-page.js adds .is-shared and the measurements; without JS the section and footer behave exactly as before.
   Variables: --td-footer-h (end of Hablemos → end of footer), --td-video-top / --td-video-h (video box). */
.td-page .security-close.td-closing.is-shared{overflow:visible}

/* The single video. Above the section it is fully transparent (mask), so it never covers the previous section;
   it then fades in over 150px and continues to the end of the footer (no bottom fade, which used to create the cut). */
.td-page .td-closing.is-shared .security-close-video{
  top:var(--td-video-top,0px);bottom:auto;height:var(--td-video-h,100%);
  -webkit-mask-image:linear-gradient(transparent 0,transparent calc(-1 * var(--td-video-top,0px)),#000 calc(150px - var(--td-video-top,0px)));
  mask-image:linear-gradient(transparent 0,transparent calc(-1 * var(--td-video-top,0px)),#000 calc(150px - var(--td-video-top,0px)))}

/* Side vignette (security-close:after) continues behind the footer so its edges don't change at the boundary. */
.td-page .td-closing.is-shared::after{bottom:calc(-1 * var(--td-footer-h,0px))}

/* Progressive darkening from the lower part of Hablemos into the footer zone — never a solid band. */
.td-page .td-closing.is-shared::before{content:'';position:absolute;left:0;right:0;top:60%;bottom:calc(-1 * var(--td-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, same family as the header (translucent, blur, slight saturation, hairline, faint top light).
   Replaces site-consistency.css's rgba(0,1,14,.55) + blur(16px) and drops its dark upward shadow. */
.td-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){
  .td-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){
  .td-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))){
  .td-page .footer{background:rgba(3,8,20,.82)}
}