/* ============================================================
   gss-hscta — envoltorio de los CTA de HubSpot en el blog
   El diseño de cada CTA va en línea dentro de HubSpot; aquí solo el espacio alrededor y el
   móvil (los CTA no pueden llevar media queries). Selectores por estructura, no por estilos:
   HubSpot reescribe los atributos style al guardar. Estructura que pinta HubSpot:
   .hs-web-interactive-inline > a > div (tarjeta) > div (texto) + img (+ span nota)
   ============================================================ */
.gss-hs-cta a{text-decoration:none!important;color:inherit}
.gss-hs-cta .hs-web-interactive-inline{display:block}
/* Red de seguridad: HubSpot añade «Haz clic aquí» suelto dentro del <a> si no se borra */
.gss-hs-cta .hs-web-interactive-inline>a{font-size:0!important;line-height:0}
.gss-hs-cta .hs-web-interactive-inline>a>*{font-size:16px;line-height:1.5}

/* Dentro del artículo: hueco para que la imagen asome por arriba y por abajo */
.gss-hs-cta--in{margin:110px 0 110px;clear:both}

/* Columna del índice: solo escritorio, debajo del índice */
.gss-hs-cta--side{margin:24px 0 0}
.gss-hs-cta--side a>div{max-width:100%!important}
@media (max-width:1024px){.gss-hs-cta--side{display:none}}

/* Pop-up de demo: velo azul oscuro, caja centrada, cerrar en círculo */
.gss-hs-pop{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:rgba(4,20,56,.62);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
.gss-hs-pop.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease}
.gss-hs-pop__box{position:relative;width:100%;max-width:520px;transform:translateY(12px);transition:transform .25s ease}
.gss-hs-pop.is-open .gss-hs-pop__box{transform:none}
.gss-hs-pop__x{position:absolute;top:-14px;right:-14px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#041438;font:400 24px/40px Poppins,Arial,sans-serif;text-align:center;cursor:pointer;box-shadow:0 8px 24px rgba(4,20,56,.25);padding:0}
.gss-hs-pop__x:hover{background:#00ffd7;color:#1a1a1a}
.gss-hs-cta--pop a>div{max-width:100%!important}
@media (max-width:560px){.gss-hs-pop__x{top:-12px;right:-4px}}

@media (max-width:700px){
  .gss-hs-cta--in{margin:44px 0 64px}
  .gss-hs-cta--in a>div{flex-direction:column!important;align-items:stretch!important}
  .gss-hs-cta--in a>div>div{flex:none!important;padding:32px 24px 8px!important}
  .gss-hs-cta--in a>div>div>p:last-of-type{font-size:25px!important}
  .gss-hs-cta--in a>div>img{flex:none!important;width:100%!important;max-width:380px!important;margin:6px auto -40px!important;align-self:center!important}
  .gss-hs-cta--in a>div>img[alt^="Gu"]{max-width:340px!important;margin:-24px auto -60px!important}
  .gss-hs-cta--in a>div>span{right:auto!important;left:24px!important;bottom:-18px!important}
}